I would like each button of a presentation, regardless of its position on the table, has a downward movement of n pixels on mouse click (start touch), and on mouse down (end touch) returns to its initial position.
Exploring the list of functions I found the substitution variable “hypeDocument.getElementProperty (element, ‘top’)” and “hypeDocument.setElementProperty (element, propertyName, value, …”, which seem to respond exactly to my purpose.
I thought of creating a “startTouchTopDown” function and an “endTouchTopUp” function, and to apply these two functions to each presentation button.
I ask you if it is possible, in the second replacement variable, to replace “value” with an expression or some else (variable or other) that makes the two functions suitable to each button, regardless of its position on the table.
I am not very familiar with Javascript and writing code, any suggestion is greatly appreciated!
Thanks
I think i need to share an example to be more clear about the effect I need: I want every button going down on “start touch” and return at its original position on “end touch”.
Ok here it is in code. Tried to keep it simple and with no timers ( which would not really work well if someone did quick clicks )
//-- get initial top of element.
var buttonElTop = hypeDocument.getElementProperty(element, 'top')
//-- set button is not down and top height if not set already.
if (typeof hypeDocument.customData[element.id + "_isDown"] === "undefined"){
hypeDocument.customData[element.id + "_isDown"] = "false"
hypeDocument.customData[element.id + "_top"] = buttonElTop
}
//- button is up & event is mousedown.
if ( hypeDocument.customData[element.id + "_isDown"]== "false" && event.type == 'mousedown'){
hypeDocument.setElementProperty(element, 'top', buttonElTop + 20, 0.3, 'easeinout')
hypeDocument.customData[element.id + "_isDown"] = "true"
return
}
//- button is down & event is mouseup.
//-- we always only go to inial top, otherwise a quick mouse click could jump to higher than needed if we use -20. .
if ( hypeDocument.customData[element.id + "_isDown"] == "true" && event.type == 'mouseup'){
hypeDocument.setElementProperty(element, 'top', hypeDocument.customData[element.id + "_top"], 0.3, 'easeinout')
hypeDocument.customData[element.id + "_isDown"] = "false"
return
}
first of all, thanks for your reply and for the attached file.
I opened your file and launched the preview in Chrome, unfortunately clicking on the buttons I see a different behavior from that of your video: once pressed the first time, the buttons go down, but clicking on it a second time, they stay down (I attach the video of my screen as a demonstration).
I also copied the code you shared in my file and simply applied it to my own button, and in fact I see the same behavior in preview: the button is lowered at the first click (mouse down) but then (mouse over) remains down.
Can you tell me if I have forgotten some fundamental passage?
Thanks
I had already been playing with a more complex model as I noticed that if you slide the mouse out of the element while it is still down the mouse up that comes after will not be detected.
I assume this is what you mean.
New code
//-- All buttons given class buttonz
//-- get initial top of element.
//-- set button is not down and top height if not set already.
if (typeof hypeDocument.customData[element.id + "_isDown"] === "undefined"){
var buttonElTop = hypeDocument.getElementProperty(element, 'top')
hypeDocument.customData[element.id + "_isDown"] = "false"
hypeDocument.customData[element.id + "_top"] = buttonElTop
}
//- button is up & event is mousedown/pointerdown.
if ( hypeDocument.customData[element.id + "_isDown"]== "false" && event.type == 'mousedown' || event.type == 'pointerdown'){
hypeDocument.setElementProperty(element, 'top', hypeDocument.customData[element.id + "_top"] + 20, 0.3, 'easeinout')
hypeDocument.customData[element.id + "_isDown"] = "true"
return
}
/*
Button is down & events is mouseup/pointerup.
pointerup: - for chrome
*/
if ( hypeDocument.customData[element.id + "_isDown"] == "true" && event.type == 'mouseup' || event.type == 'pointerup' ){
buttonUp(element)
return
}
/*
.
mouseout: mouse may be dragged away and off element.
Which will stop button down due to mouseup/pointerup not getting detected by the element.
This event is on the buttons surrounding group which acts as a buffer zone.
*/
if ( event.type == 'mouseout'){
var buttons_ = document.querySelectorAll('.buttonz')
for (i = 0; i < buttons_.length; i++) {
var element = buttons_[i]
if ( hypeDocument.customData[element.id + "_isDown"] == "true"){
buttonUp(buttons_[i])
}
}
return
}
/*
we always only go to inial top, otherwise a quick mouse click could jump to higher than needed if we use -20.
*/
function buttonUp(element){
hypeDocument.setElementProperty(element, 'top', hypeDocument.customData[element.id + "_top"], 0.3, 'easeinout')
hypeDocument.customData[element.id + "_isDown"] = "false"
return
}
The button up down elements have been given a joint class name that gets used in the code.
The also have a group on them individually which acts as a buffer zone for the mouseout event.
The Group buffer zone is used like this instead of the element itself because if we click the element near it’s top it slides down and we would likely get inconsistent behaviour.