This Stepper just user Hype Elements and Normal Javascript.
The Stepper’s Form is inside the Elements innerHTML.
We have two functions.
The first function ( stepper() )is used to get the Symbol and it’s child Stepper. Then count up or down the number.
There is a repeater function that allows for you to hold the spinner buttons down and repeatedly step.
The forms inneHTML code also validates for numbers only.
This code should not need editing. And is called from the mouse down Action.
The second function ( spinEnd() ) is used to invalidate the setTimeInterval from the first Function.
This stops the repeater.
This function is called from the mouse up Action.
You can add code to this function after the single line of code there.
Code you would add here would be to get the value of the Stepper and then do something.
You would need to give the Symbol and ID. If you duplicate the Symbol then give each their own ID.
To then get the value of the respective spinner you would use something like.
The Symbol elements UI can be changed using the normal Hype techniques. They can also be duplicated and the Elements UI of the individual Symbols changed.
It seems to work ok here but I may need to perfect the interval. At the moment it is at 100 milliseconds. Any ideas on that. I kept it at 100 so as to not jump too many digits on each click
There is a new ini() function that is called on Symol load.
This simply sets up a function that will be called if the user hits the enter key inside the input.
The function that is called is named yourFunctions().
This is now where you place your code for the stepper. This same function is also called when the stepEnd() function is called.
This makes it easier to edit your own code and takes into account entries made manually in the input.
The yourFunctions() has block of code already inside which should not be removed.
if ( Object.prototype.toString.call(this) === "[object Window]" ){
/* WE HAVE TO LOAD THIS FUNCTION ON SYMBOL LOAD SO IT EXPORTS WITH THE SYMBOL. WE DO NOT WANT THAT CALL TO DO ANYTHING, THE CALL WILL REGISTER AS
"[object Window]"
THE SUBMIT AND BUTTONS
"[object object]"
*/
return
}
Because the yourFunctions() function would not normally be called in any of the hype actions, mouse click, load actions etc. It will not export with the symbol. To counter this I have added it to the Symbol on load action.
The line above insures that nothing actually is run when the symbol on load runs. But everything works correctly when the buttons or enter key are used.
(@jonathan, it would be great if there was an option on Symbol export to choose what Functions should be included )
Too late, I grabbed the latest version. I think it’s great but still is very slow on android. I remedied this by slowing it down far enough to be held down and tick by with enough time to let the user pick. I’ll stay tuned though. I think you’re on to something!
I haven’t looked at the code, but macOS steppers will always trigger on mouse down, then have a delay before the repeat comes into play. So I’d start a timer for 1000ms (1s) to begin a repeat and then from then on use the 100ms to increment. The initial down should always instantly trigger a step.
Here is one using a timeout to do it how you suggest. Work well for me.
I also now have the templates users functions ( yourFunctions() ) trigger as the user types in the input field as well as on each step. This seems more in keeping with a real stepper.
I like that I can use Hype to create a stepper for the simple reason this type of Template makes it very easy for us to customise the styling without having to put in any css.