Link and DOM initiated interaction

Skip to first unread message

Aryan Duntley

Mar 2, 2012, 11:02:07 AM3/2/12
Hey, Just began trying to work with Uize.  Awesome framework.  A little complicated, in my opinion, in that the documentation seems more strictly geared toward code reference without there being quite enough step by step resources (I'm a noob).  I do plan on dedicating myself to learning this framework however, and once I do, I will no doubt begin placing very basic step by step tutorials on you tube and the like.  Anyway, I first came to Uize while searching for a 3D rotator imitation *series of images as opposed to true blue 3D* ( I come from a Flash and AS3 background and I have created some that work fine, but I'm searching for more 'Web Standard' tools and knowledge).  So, that is why I am currently working with the 3D rotation viewer.  I have disregarded the DotCom files and will attempt to work from the ground up with the base Widget.Page.  In so doing, I have the 3d page here, having replaced the UizeDotCom page instance with the base Widget.Page.  This has removed the click functionality from the<code> href="javascript://"</code> anchor tags.  I am assuming, having attempted to compare the two .Page files, that the issue lies with the evaluator function.  I have tried to use Uize.node.wire to listen for a click, but the first parameter expects an id, and I have none to give it.  I have created generic id's and that does not work.  The DotCom.Page.Example file has this: <code>Uize.Node.find ({tagName:'a',className:/\b(tourPage|tourButton)\b/}),</code> that looks like it could be the culprit, but it also has this: <code>_this._evaluator &&  _this.wireNode (Uize.Node.find ({tagName:'A',className:/\blinkedJs\b/}), 'click', function () {_this._evaluator (this.title || this.innerHTML)}) ;</code> which seems a more likely candidate.  Later in the code the class calls a registerProperties function assigning 'evaluator' to the variable _evaluator.  I have attempted to place the associated code in the base Widget.Page file, but there was no response when I tested.  How to I achieve the interactivity between DOM initiated actions and the Uize code?  First I would have to listen for a click on each/any of the class 'linkedJS'.  The second bit of code above seems to do that, or at least identify the a tags associated with that className.  Then I would have to pull the title attribute from that current event object (Again, the second bit of code seems to be doing that as well.  Once I have done that I will have to make another call to the <code>Uize.Node.wire</code> method utilizing the value obtained from the title attribute.  I am almost positive that the second bit of code above handles the majority of my issue, but I am not fully understanding the syntax of everything so I cannot simply write my own method and it is a little difficult for me to pinpoint the specific bits of code I would need to pull from the DotCom.Page.Example file (and quite possibly from the DotCom.Page file as well) in order to achieve my goals.  Any help?
<html xmlns="">
<style type="text/css">.rotationViewer {position:relative;    width:640px;height:378px;border-style:solid;border-width:1px;margin:auto;margin-bottom:10px;cursor:pointer;}
.rotationViewer img {position:absolute;    visibility:hidden;left:0;top:0;width:100%;height:100%;}</style></head><body>
<script type="text/javascript" src="js/Uize.js"></script>
    <div id="page_rotationViewer" class="rotationViewer insetBorderColor"></div>   <div style="text-align:center;"><p>
        <a href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (-360,2700,Uize.Curve.easeInOutPow (4))">360 counter-clockwise</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (1080,4000,Uize.Curve.easeInOutPow (4))">3 spins</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))">spin with bounce</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (360,4000,Uize.Curve.Mod.bend (Uize.Curve.Rubber.easeOutElastic (.1),3))">spin with elasticity</a></p>    </div>
<script type="text/javascript">

Uize.module ({
    builder:function () {
        /*** create the example page widget ***/
            var page = = Uize.Widget.Page ({evaluator:function (code) {eval (code)}});//{idPrefix:'page'}
            //var page = Uize.Widget.Page ();
        /*** configuration variables ***/
                totalFrames = 72,
                frameUrlTemplate =

        /*** state variables ***/
                rotation = 0,
                lastFrameNo = -1,

        /*** create the Uize.Widget.Drag instance ***/
            var rotationViewer = page.addChild (
                    cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
                    releaseTravel:function (speed) {
                            deceleration = 5000, // measured in pixels/s/s
                            duration = speed / deceleration
                        return {
                            distance:Math.round (speed * duration / 2),
                            curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
                    html:function (input) {
                            htmlChunks = [],
                            frameNodeIdPrefix = input.idPrefix + '-frame'
                        for (var frameNo = 0; ++frameNo <= totalFrames;) {
                            htmlChunks.push (
                                '<img' +
                                    ' id="' + frameNodeIdPrefix + frameNo + '"' +
                                    ' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
                        return htmlChunks.join ('');

        /*** 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});

        /*** initialization ***/
            Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});

        /*** wire up the page widget ***/
            page.wireUi ();
            //Uize.Node.wire ('','click',function () {alert ('You clicked me')});
      Uize.Node.wire (
            function () {
                        function() { spin (360,2700,Uize.Curve.linear (4)) },


Reply all
Reply to author
0 new messages