Uize.module ({ required:[ 'Uize.Widget.Page', 'Uize.Widget.Drag', 'Uize.Fade.xFactory', 'Uize.Curve.Rubber', 'Uize.Curve.Mod', 'Uize.Widget.CollectionItem.Zooming', 'Uize.Widget.MagView' ], builder:function () { /*** create the example page widget ***/ var page = window.page = Uize.Widget.Page ({evaluator:function (code) {eval (code)}});//{idPrefix:'page'} //var page = Uize.Widget.Page (); /*** configuration variables ***/ var totalFrames = 14, frameUrlTemplate ='https://www.sandygravesart.com/360/grace/[#frame].jpg';
/*** state variables ***/ var rotation = 0, lastFrameNo = -1, dragStartRotation ;
/*** create the Uize.Widget.Drag instance ***/
var rotationViewer = page.addChild (
'rotationViewer',
Uize.Widget.Drag,
{
cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
releaseTravel:function (speed) {
var
deceleration = 5000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
};
},
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
''
);
}
return htmlChunks.join ('');
},
built:false
}
);
/*** wire up the drag widget with events for updating rotation degree ***/ function updateRotation (newRotation) { rotation = ((newRotation % 360) + 360) % 360; var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1)); if (frameNo != lastFrameNo) { rotationViewer.showNode ('frame'+ lastFrameNo,false); rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo)); } } rotationViewer.wire ({ 'Drag Start':function () {dragStartRotation = rotation;}, 'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)} });
/*** function for animating spin ***/ function spin (degrees,duration,curve) { Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve}); }
//widgetClass:'Uize.Widget.HoverFader', //nodes:{root:'menu1',className:/bmenuLinkb/}
/*** initialization ***/ Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))}); //Uize.Node.wire ('rotationViewer','click',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});
/*** wire up the page widget ***/ page.wireUi (); page.wireNode (Uize.Node.find ({tagName:'a',className:/blinkedJsb/}), 'click',function (){page.evaluator (this.title || this.innerHTML)}); page.wireNode (Uize.Node.find ({tagName:'img',className:/bjabawab/}), 'click',function (){alert("fire | 17 x 16 x 12 | Ed. 30");});
} }); /*CONTINUOUS ROTATION Uize.Node.wire ( window, 'load', function () { setInterval( function() { spin (360,2700,Uize.Curve.linear (4)) }, 2700 ) });*/ // ]]>click and drag to rotate