Draggable.create - want to show / hide switching to a specific array / endvalues

I got hit over a project that I have been working on for a while. The customer wants a spinning wheel on the home page, such as a safe combination dial or volume control.

The handle has 4 end values ​​that the object snaps to (the closest value). The problem I am facing is that I have no idea how to get JS to switch hide / show on a specific element after reaching the corresponding value.

For example, when rotating 90 degrees, I want to show X. When rotating 180 degrees, I want X to hide and Y to take its place / to show. Repeat in 90 degree increments for Z and A.

My current attempt at code (among many) looks like this:

var dialarray = [0,90,180,270]; 

var rotationSnap = 90;
Draggable.create("#Stage_Group", {
    type:"rotation", //instead of "x,y" or "top,left", we can simply do "rotation" to make the object spinnable! 
    throwProps:true, //enables kinetic-based flicking (continuation of movement, decelerating after releasing the mouse/finger)
    snap:function(endValue) { 
        //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected.
        return Math.round(endValue / rotationSnap) * rotationSnap;

if (rotation("#Stage_Group") = 90) {
    sym.$("brand_awareness").show();
} else {
    sym.$("brand_awareness").hide();
}
}
})

      

I use Greensocks where support is lacking to get the correct answer, so with some help from more experienced code (which I didn't understand either) I move on to StackOverflow.

Can someone please guide me to a solution here? This infuriates me, even if it means that the current code will work as a result, maybe I am missing out on another more logical solution to create a rotating object with triggers at certain values?

Thanks in advance!

+3


source to share


1 answer


This will be the code inside your binding. Updated after seeing your comment



var imgRotation = Math.round(endValue / rotationSnap) * rotationSnap;
if (imgRotation == 90) {
   sym.$("id1").show();
} else if (imgRotation == 180) {
   sym.$("id2").show();
} else if (imgRotation == 270 ) {
   sym.$("id3").show();
}
else if ((imgRotation >= 360) || (imgRotation == 0)){
   sym.$("id4").show();
}
return imgRotation;

      

+1


source







All Articles