Mootools Inpinity Slider - a slider ui control that allows an infinite amount of pins

103 views
Skip to first unread message

csuwldcat

unread,
Sep 25, 2009, 12:06:07 PM9/25/09
to MooTools Users
if you want a double pinned slider (or need many more pins - for a
Photoshop-type gradient selector for instance) you can't really do
much better than this plugin, it uses a more OO aproach via the
Class.refactor in Mootools More versus some of the other scripts out
there which basically totally rewrite the entire Mootools More
Slider...and it is only 19 lines!!!

Check it out!!!

http://blog.citycrawler.com/?p=74

nwhite

unread,
Sep 25, 2009, 12:19:52 PM9/25/09
to mootool...@googlegroups.com
++ nice use of Class.Refactor

Oskar Krawczyk

unread,
Sep 25, 2009, 12:21:15 PM9/25/09
to mootool...@googlegroups.com
I want to see this in MooTools-more!

___

Oskar Krawczyk
http://nouincolor.com

Aaron Newton

unread,
Sep 25, 2009, 1:13:22 PM9/25/09
to mootool...@googlegroups.com
I agree. Let's get this into -more. Not for this release (which is due out monday) but for the next one.

csuwldcat, if you want to pull from mootools more and change slider - instead of using refactor just integrate your changes directly into the slider class - go for it. If not, we'll do it.

If you're not comfortable w/ git, you can do all this on github. Create an account, go to mootools more (github.com/mootools/mootools-more/), click "fork", navigate to Slider.js, click "edit", paste in your new version, save it, and then send a pull request.

Aaron

csuwldcat

unread,
Sep 25, 2009, 6:30:12 PM9/25/09
to MooTools Users
Sounds like a plan Aaron, I will look at getting into the Git side of
it this weekend.

Also, did you all see the added option to set the knob spacing? It is
a per knob option, and each knob can be different. So picture this:

I have a slider that is 100px wide with 100 steps. I give it three
knobs with the new method and set the first to a spacing of 5 steps
the second to 10 steps and the last to 20 steps. If I then set the
pins to step 0, 50, and 100 respectively upon dragging the one that
starts at 0 step toward the one at 50 step the script is watching to
see if it is violating a spacing option of either. In this case one
is set to 5 and the other 10, the script chooses the bigger spacing to
obey, thus the 0 pin would be prohibited from dragging any closer than
step 40 in respect to the 50 pin. I hope that was not clear as mud...

Anywho, I have the default space setting at 1 step because I felt that
what was the point of a pin on the same point? Is this a good
default? Opinions, comments?

- Daniel

On Sep 25, 10:13 am, Aaron Newton <aa...@iminta.com> wrote:
> I agree. Let's get this into -more. Not for this release (which is due out
> monday) but for the next one.
> csuwldcat, if you want to pull from mootools more and change slider -
> instead of using refactor just integrate your changes directly into the
> slider class - go for it. If not, we'll do it.
>
> If you're not comfortable w/ git, you can do all this on github. Create an
> account, go to mootools more (github.com/mootools/mootools-more/), click
> "fork", navigate to Slider.js, click "edit", paste in your new version, save
> it, and then send a pull request.
>
> Aaron
>
> On Fri, Sep 25, 2009 at 9:21 AM, Oskar Krawczyk <oskar.krawc...@gmail.com>wrote:
>
>
>
> > I want to see this in MooTools-more!
>
> > ___
>
> > Oskar Krawczyk
> >http://nouincolor.com
>

Aaron Newton

unread,
Sep 25, 2009, 6:50:34 PM9/25/09
to mootool...@googlegroups.com
That *sounds* good, but I'd need to maybe play with it a while to feel completely certain.

csuwldcat

unread,
Sep 29, 2009, 12:51:08 AM9/29/09
to MooTools Users
Almost done with the additions to Slider, should have it in Git for a
pull tomorrow ;)

Oskar Krawczyk

unread,
Sep 29, 2009, 5:30:24 AM9/29/09
to mootool...@googlegroups.com
Can't wait! :-)


___

Oskar Krawczyk
http://nouincolor.com


csuwldcat

unread,
Sep 29, 2009, 11:03:05 AM9/29/09
to MooTools Users
Ok, I think I got it committed to the More repo on Git.

The slider now can have unlimited pins, each with their own spacing
settings. This means if you have 3 pins the first can be set to have
5 steps of spacing while the second has 10 and the third has 15. The
pins are not allowed to violate the other pins' spacing areas on drag
or set. The default is 1 step for the knobSpacing option. To make a
multi-pin slider, do a .each() on all the pins and create an optioned
out instance with multiKnob: true; for each pin with in addition to
your selected options, but use the same bar element obviously. The
script will handle all the rest ;)

@Aaron - I did a commit on the More Slider source, is that what I
should have done?

- Daniel

On Sep 29, 2:30 am, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> Can't wait! :-)
>
> ___
>
> Oskar Krawczykhttp://nouincolor.com

Aaron Newton

unread,
Sep 29, 2009, 11:30:21 AM9/29/09
to mootool...@googlegroups.com
Excellent work Daniel!

@Aaron - I did a commit on the More Slider source, is that what I
should have done?

Yes, in theory. Github is down so I can't verify.

Here's the fun question: did you rewrite the docs and unit test? If not, I don't think you're done yet! Welcome to the world of software releases. It takes 1/2 the time to write the code, and another 1/2 to document and test it.

Speaking of testing, did you test it across all our supported browsers?

I know, you hate me. Now back get to work.

csuwldcat

unread,
Sep 29, 2009, 1:25:32 PM9/29/09
to MooTools Users
I tested it in FF 3/3.5, Chrome, IE7/8

I have an example package and one further commit to make to add
onDragCollision and onSetCollision events to the slider options ;)

Where can I do the rest of what you described?

Aaron Newton

unread,
Sep 29, 2009, 2:08:33 PM9/29/09
to mootool...@googlegroups.com
On Tue, Sep 29, 2009 at 10:25 AM, csuwldcat <dbuc...@auctiva.com> wrote:

I tested it in FF 3/3.5, Chrome, IE7/8

I have an example package and one further commit to make to add
onDragCollision and onSetCollision events to the slider options ;)

Where can I do the rest of what you described?

The docs are pretty straight forward; your commit should include changes to the markdown file in /Docs

The user tests are in /Tests. There's a readme inside the UnitTester framework. You'll need to initialize submodules in order to see it:

git submodule update --init

Then hit /Tests/ with your browser (you need to serve it through a web server; on osx I just create a soft link to my development directory from within my webserver root, then hit localhost/mootools/Tests/ or whatever).

You can see example tests in /Tests/UserTests/

If you don't have time to get the unit test working, just include a link to a test you have elsewhere and I'll duplicate it into the unit test framework for you.

Oskar Krawczyk

unread,
Sep 29, 2009, 3:44:31 PM9/29/09
to mootool...@googlegroups.com
Daniel, can you set up a test case on http://mooshell.net – I'll give
it a swing on Firefox 2, Safari 3/4 and IE 6 (both, native and
standalone) and post the results.

Thanks!

csuwldcat

unread,
Sep 29, 2009, 7:36:39 PM9/29/09
to MooTools Users
hey Oskar, Aaron, here is a quick and dirty mock on MooShell:
http://mooshell.net/6Zdms/

On Sep 29, 12:44 pm, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> Daniel, can you set up a test case onhttp://mooshell.net– I'll give  

csuwldcat

unread,
Sep 29, 2009, 7:41:54 PM9/29/09
to MooTools Users
I put two new custom event hooks in there: onSetCollision and
onDragCollision

This way you can do stuff in the UI or with messaging to alert the
user that they are trying to do stuff with the knobs that is not
allowed by your constraints ;)

- Daniel

csuwldcat

unread,
Sep 29, 2009, 7:52:21 PM9/29/09
to MooTools Users
Damn, good thing you guys had me do that, there is an issue with the
set slider method that i just found. I need to update the node order
in the DOM after a successful set so that the next drag of the set
knob operates correctly. Also, MooShell is sick like the swine flu,
thanks for the heads up!

- Daniel

Oskar Krawczyk

unread,
Sep 30, 2009, 5:58:56 AM9/30/09
to mootool...@googlegroups.com
IE6 = OK
IE6-standalone = OK
IE7 = OK

Firefox 2 (Mac) = OK
Firefox 3 (Mac) = OK
Firefox 3 (Win) = OK

Safari 3 (Mac) = OK
Safari 4 (Mac) = OK
Safari 4 (Win) = OK

Nice! We'll see how the Unit Test goes :-)


___

Oskar Krawczyk
http://nouincolor.com


csuwldcat

unread,
Sep 30, 2009, 11:47:11 AM9/30/09
to MooTools Users
Alright, fixed the issue with manual sets and update the shell test:
http://mooshell.net/HpPng/

Basically, when a pin was being set manually to a step and it cleared
the spacing validation, it was in a new visual position in reference
to other pins but the DOM still reflected the old order. Added resort
snippet to the set method that updates the DOM to reflect the visual
order of pins. Should retain all performance as .set in slider is not
a method called on each drag step.

- Daniel

On Sep 30, 2:58 am, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> IE6 = OKIE6-standalone = OK
> IE7 = OK
>
> Firefox 2 (Mac) = OK
> Firefox 3 (Mac) = OK
> Firefox 3 (Win) = OK
>
> Safari 3 (Mac) = OK
> Safari 4 (Mac) = OK
> Safari 4 (Win) = OK
>
> Nice! We'll see how the Unit Test goes :-)
>
> ___
>
> Oskar Krawczykhttp://nouincolor.com

csuwldcat

unread,
Sep 30, 2009, 11:55:34 AM9/30/09
to MooTools Users
Ugg, removed one line of old unneeded null check: http://mooshell.net/SvG9y/

On Sep 30, 2:58 am, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> IE6 = OKIE6-standalone = OK
> IE7 = OK
>
> Firefox 2 (Mac) = OK
> Firefox 3 (Mac) = OK
> Firefox 3 (Win) = OK
>
> Safari 3 (Mac) = OK
> Safari 4 (Mac) = OK
> Safari 4 (Win) = OK
>
> Nice! We'll see how the Unit Test goes :-)
>
> ___
>
> Oskar Krawczykhttp://nouincolor.com

csuwldcat

unread,
Oct 1, 2009, 11:43:52 AM10/1/09
to MooTools Users
This could be regarded as a complete version, I knocked out an issue
with the dragCollision custom event and I am thinking this is a good
candidate for serious testing under one condition:

When a user initially sets a pin on the first init of a new slider pin
and they set it to collide with another pin's spacing or step
position, there is an error. I could do something to solve that by
assessing the closest "gap" that the pin set try could fail to but
before I went down the rabbit's hole on that, I wanted to get your
take on what we should and shouldn't be rounding the corners for? I
mean it happens only on init if the person tries to do something they
shouldn't be doing under any stretch of logic. Let me know what you
both think, other than that, I think it is set!

http://mooshell.net/MXC9s/

Oskar Krawczyk

unread,
Oct 1, 2009, 12:04:16 PM10/1/09
to mootool...@googlegroups.com
As much as I love the refactoring you've done, I'm gonna put it out there: how about making the collision constrains optional? I'm sure I'll find myself in a situation when I just want to move one of the pin all the way from left to right, and being constrained by any other pins that are in the way.

O.

___

Oskar Krawczyk
http://nouincolor.com


csuwldcat

unread,
Oct 1, 2009, 12:11:07 PM10/1/09
to MooTools Users
I fully agree Oskar, I just looked it over and i think it would only
be about 2 lines to make that an option that can be fully turned
off ;)

- Daniel


On Oct 1, 9:04 am, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> As much as I love the refactoring you've done, I'm gonna put it out there:
> how about making the collision constrains optional? I'm sure I'll find
> myself in a situation when I just want to move one of the pin all the way
> from left to right, and being constrained by any other pins that are in the
> way.
> O.
>
> ___
>
> Oskar Krawczykhttp://nouincolor.com

Aaron Newton

unread,
Oct 1, 2009, 1:17:05 PM10/1/09
to mootool...@googlegroups.com
also, does this new version address this issue?

csuwldcat

unread,
Oct 1, 2009, 6:38:41 PM10/1/09
to MooTools Users
Haha oh you mean the one I reported ;) No, it does not, but I will
add that in. Basically what I was thinking for a fix there was this:
Clone the surrounding node at its height/width and padding dimensions
(for cases, such as my own, where width 100% sliders are being used)
then do a measure on the element when it is properly z-indexed out of
sight and visibility hidden.

If there is another route you would prefer I take just give me a
holler.

BTW - Aaron, I would like to talk with you off line about an
opportunity that may be possible for Mootools. I recently (yesterday)
secured a job as a PM with a foxy browser manufacturer and there are
some areas where Mootools could be greatly benefited if I could get
some collaboration...

On Oct 1, 10:17 am, Aaron Newton <aa...@iminta.com> wrote:
> also, does this new version address this issue?https://mootools.lighthouseapp.com/projects/24057-mootoolsmore/ticket...

Aaron Newton

unread,
Oct 1, 2009, 6:58:33 PM10/1/09
to mootool...@googlegroups.com
On Thu, Oct 1, 2009 at 3:38 PM, csuwldcat <dani...@gmail.com> wrote:

Haha oh you mean the one I reported ;)  No, it does not, but I will
add that in.  Basically what I was thinking for a fix there was this:
Clone the surrounding node at its height/width and padding dimensions
(for cases, such as my own, where width 100% sliders are being used)
then do a measure on the element when it is properly z-indexed out of
sight and visibility hidden.

I'd rather you use Element.measure.
 
BTW - Aaron, I would like to talk with you off line about an
opportunity that may be possible for Mootools.  I recently (yesterday)
secured a job as a PM with a foxy browser manufacturer and there are
some areas where Mootools could be greatly benefited if I could get
some collaboration...

Feel free to drop me an email. aaron [at] mootools | net

csuwldcat

unread,
Oct 2, 2009, 8:21:32 AM10/2/09
to MooTools Users
Hey Aaron, I'll be contacting you shortly re: the offline items, as
far as the way to do this code (and any future coded I might do) what
are best practices for things like reliance on other plugins in More,
code style, and general procedure that you think I should follow? I
want to make sure that what I am doing is consistent with how Mootools
as a whole would want them done.

Thanks,

Daniel

On Oct 1, 3:58 pm, Aaron Newton <aa...@iminta.com> wrote:

csuwldcat

unread,
Oct 2, 2009, 12:16:50 PM10/2/09
to MooTools Users
Oskar check this out, now the spacing option is totally at a whim,
just don't declare the option on init and that pin will be free to
move about where ever it wants: http://mooshell.net/tJ6hS/

Two big additions here,

1. Now you can mix your slider pins, some can have spacing and others
can go wild and move anywhere.

2. I happened to add a feature in the process, the pins' DOM order is
now synced with their visual UI order on the screen - I felt that this
was a big part of going multi-pin anyway!

I am working on the display: none; slider instantiation issue right
now.

On Oct 1, 3:58 pm, Aaron Newton <aa...@iminta.com> wrote:

Oskar Krawczyk

unread,
Oct 5, 2009, 5:57:01 AM10/5/09
to mootool...@googlegroups.com
You deserve a case of beer for that– address you'd like it to be FedEx-ed? :-)

O.

___

Oskar Krawczyk
http://nouincolor.com


csuwldcat

unread,
Oct 5, 2009, 10:04:51 AM10/5/09
to MooTools Users
Hey Oskar,

I took what you said about the desire to have pins that just went
anywhere and incorporated it. Now you can have any mix of constrained
or unconstrained pins. I am plugging in the measurement ability to
fix that outstanding ticket today or tomorrow ;0

http://mooshell.net/tJ6hS/

On Oct 1, 3:58 pm, Aaron Newton <aa...@iminta.com> wrote:

csuwldcat

unread,
Oct 5, 2009, 12:12:31 PM10/5/09
to MooTools Users
Ok here it is, all finished :)

Ticket #128 fixed with the addition of a measure boolean option.
Pins are now synced in the DOM to their visual order in the slider.
Sliders can now have constrained and unconstrained pins, or any mix
thereof.

http://mooshell.net/z27Ej/

On Oct 1, 3:58 pm, Aaron Newton <aa...@iminta.com> wrote:

csuwldcat

unread,
Oct 6, 2009, 2:23:18 PM10/6/09
to MooTools Users
Let me know when I should be committing the above noted code to Git
and I will do so :)

Aaron Newton

unread,
Oct 6, 2009, 4:05:25 PM10/6/09
to mootool...@googlegroups.com
Back from vacation and ready to work on mootools stuff...

Hey Aaron, I'll be contacting you shortly re: the offline items, as
far as the way to do this code (and any future coded I might do) what
are best practices for things like reliance on other plugins in More,
code style, and general procedure that you think I should follow?  I
want to make sure that what I am doing is consistent with how Mootools
as a whole would want them done.

This is a little too vague for me to answer. Code style is pretty consistent throughout -core and -more, so you should look at what's there for guidance. There's also a style guide on github, but it's not 100% complete.

As for dependencies, you should create a user test. Create one of those and if your dependencies (listed in scripts.json) are off, the test will fail to load. That's the easiest way to test for those.

Before I pull your code in I'll go over it and fix any style issues I might find. When you're 100% ready for me to do so, add your changes to github and send me a pull request. Changes to the docs files would be really, really nice to see. User tests for the new functionality would be nice, but I'll do them if you don't have time.

If you need help with git, I can give you some guidance. There's a learning curve there. Email me directly if you want to chat about it or anything else.

Aaron Newton

unread,
Oct 6, 2009, 4:20:36 PM10/6/09
to mootool...@googlegroups.com
Looking at the code from here (http://mooshell.net/z27Ej/), my comments:

Oskar Krawczyk

unread,
Dec 4, 2009, 7:43:13 AM12/4/09
to mootool...@googlegroups.com
Hey, what happened with this? 

I was sure this was already implemented in 1.2.4.2.


___

Oskar Krawczyk
http://nouincolor.com


csuwldcat

unread,
Dec 4, 2009, 7:46:07 PM12/4/09
to MooTools Users
I have a few lines to correct per a code review that was done, nothing
broken about it, just code adherance stuff. How about I make a by-the-
end-of-the-weekend commitment to have it 100%!

PS - If you would do the UI for JetpackShell, I could probably talk to
a guy and get this bumped up to tonight or tomorrow... :) ...just
screwing with you Oskar!

- Daniel

On Dec 4, 4:43 am, Oskar Krawczyk <oskar.krawc...@gmail.com> wrote:
> Hey, what happened with this?
>
> I was sure this was already implemented in 1.2.4.2.
>
> ___
>
> Oskar Krawczykhttp://nouincolor.com

Oskar Krawczyk

unread,
Dec 5, 2009, 10:54:46 AM12/5/09
to mootool...@googlegroups.com
That would be super-awesome– just be sure to drop us a message with the MooShell link :-)

Hopefully this could be pushed into 1.2.4.3.
Reply all
Reply to author
Forward
0 new messages