2 missing things I believe. First, when you keep mouse down on the scrollers buttons, you would expect the scroller to keep scrolling until you release the mouse button or the scroller is at his maximum.
And the same is true if you click in the scroller outside of the knob. The scroller should scroll until it reach your mouse down/reach an end.
I looked at the code, and there's a few things that should to be defined on their own. I guess the buttons width will always be equal to the scroller width, but the buttons aren't always square, and the height might be different. Even more complicated is the emulation of the aqua scrollers. The buttons have to contains the rounded edges, so they aren't squares. But their size for the calculations is different, it goes from the external side to the tangent of the rounded part. And the knob will go overlapping the button layers. So in order to implement that, I would need the scroller to be able to deal with these differences.
To make things a little more interesting, the scroller buttons can be on the same side :-) and in that configuration, the 2 buttons don't have the same height !!
So I think a good and simple way to implement this is to define the scrolling course on the button as a sub rectangle. Then you get to tell it's y/height for vertical and it's x/width for horizontal. And by doing that, it removes the relation between the actual size/location of the buttons, and the scrolling logic.
Still, by default that rectangle should be calculated the way your example is if that's the most usefull configuration for most people, and then you can override that ractangle if necessary, but it should be used internally for the calculations.
For skinning the knob button, I'll need to be able to use 3 images: the rounded edges and a repeating background.
The skinning, on top of the images/size of the buttons should also contains their location.
As you can see, in the case where the buttons are together, there's still an image on the top ....
I previously used skins as dictionary, defining a bunch of defined properties.
Picture 2.pdf
Description: Adobe PDF document
Picture 3.pdf
Description: Adobe PDF document
I agree it's a very good idea to have a light version and a skinnable one.
Benoit
On Sunday, March 23, 2003, at 01:28 AM, Doug Melvin wrote:
introducing scrollbar_light
by light i mean no images.
I do intend to now produce one with images for skinablity.
the arguments for the scrollabr light are explained int he source of the HTML example file (attached)
The attached HTML file goes in the /examples/ directory.
The attached JS file goes into the src/gui/ directory
I hope rar format is okay for everyone.. if not let me know and I'll start using zip
Goddamn but this is very frusterating..
It has been a very long time since I have done any serious JS coding.
Not to mention that the new DynAPI is VERY different.
Here is some stuff that should be added to the docs.
Make any corrections nessesary.
-----------------start here---------------------
Dragevents:
To test if a layer (myLayer) is being dragged:
Each layer no longer has it's own 'dragging' property.
To test is a layer is being dragged you check the isDragging property of the
Dragevent engine (Dragevent.isDragging).
To test if a specific layer is being dragged you check if the layer being dragged (DragEvent.dragevent.src)
is the layer in question
2.x code:
if(myLayer.dragging){ your code here}
3x code:
if(DragEvent.dragevent.isDragging&&DragEvent.dragevent.src===myLayer){ your code here}
--------------------
Responde to precreate/create event where the layer's variable name is myLayer:
You no longer assign an event listener for these two events.
Instead you pass a function to be execute at the precreate or create event.
The passed function is executed as if it where a method of the layer in question.
So, instead of getting the source of the event you simple use 'this' to refer to the layer
upon which the function is being executed
(onCreate/onPrecreate)
2.x code:
var el = new EventListener(myLayer);
el.onprecreate=function(e){
e.getSource().doSomething();
}
el.oncreate=function(e){
e.getSource().doSomething();
}
myLayer.addEventListener(el);
3x code:
var createCode = function(){
this.doSomething(); // note the use of 'this' to indicate the source of the create event
}
this.onCreate(createCode);
var preCreateCode = function(){
this.doSomething(); // note the use of 'this' to indicate the source of the precreate event
}
this.onPrecreate(preCreateCode);
--------------end here---------------
<scrollbar_light.rar>
