another anchor example

rsms · Oct 19, 2011 · c5a6eb6 · c5a6eb6
1 parent 6e4396a
commit c5a6eb6
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 13 deletions.
diff --git a/examples/anchor2.html b/examples/anchor2.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport" content="width=640,initial-scale=0.5,user-scalable=no">
+    <script src="http://movelang.org/move-0.4.4.js"></script>
+    <script>document.write('<'+'script src="../uilayer.js?'+(+new Date)+'"><'+'/script>');</script>
+    <script type="text/move">
+
+import UILayer
+UILayer.debug = true
+
+document.body.appendChild((rootLayer = UILayer {width:1, height:1, perspective: 600}).element)
+
+layer1 = rootLayer.addSublayer UILayer {x:50, y:50, width:200, height:400, animated:true}
+layer2 = layer1.addSublayer UILayer {anchor:{bottom:0, right:-200, top:0}, animated:true, width:200, height:200}
+layer3 = layer2.addSublayer UILayer {anchor:{bottom:0, right:-100, top:0}, width:100, height:300}
+
+layer2.on 'change:frame', ^(ev) {
+  if (ev.oldValues.width) {
+    anchor = @anchor
+    anchor.right = -@frame.width
+    @anchor = anchor
+  }
+}
+
+after {delay:500} ^{
+  layer1.frame.width = 500
+  after {delay:500} ^{
+    layer2.frame.width = 300
+  }
+}
+
+    </script>
+    <style>
+      * { margin:0; padding:0; border:none; }
+      body { background: white url(checker-pattern.png) repeat scroll top left; }
+      .uilayer { border:1px solid white; }
+    </style>
+  </head>
+  <body></body>
+</html>
diff --git a/uilayer.js b/uilayer.js
@@ -1,14 +1,3 @@
-Move.require.define("UILayer","UILayer/index.mv",function(require,module,exports){
-  var M, _MoveKWArgsT, Text, extend, create, print, dprint, repeat, after, JSON, __class, EventEmitter, EHTML, version;
-  M = Move.runtime, _MoveKWArgsT = M._MoveKWArgsT, Text = M.Text, extend = M.extend, create = M.create, print = M.print, dprint = M.dprinter(module), repeat = M.repeat, after = M.after, JSON = M.JSON, __class = M.__class, EventEmitter = M.EventEmitter;
-  EHTML = Move.EHTML;
-  if (typeof window === "undefined" || !window.navigator || window.navigator.userAgent.indexOf("WebKit") === -1) {
-    module.exports = null;
-    return print("Error: UILayer is only compatible with WebKit");
-  }
-  module.exports = exports = require("./UILayer");
-  exports.version = version = "0.0.6";
-});
 Move.require.define("UILayer/UIFrame","UILayer/UIFrame.mv",function(require,module,exports){
   var M, _MoveKWArgsT, Text, extend, create, print, dprint, repeat, after, JSON, __class, EventEmitter, EHTML, mkCSSPixelValueProperty, UIFrame;
   M = Move.runtime, _MoveKWArgsT = M._MoveKWArgsT, Text = M.Text, extend = M.extend, create = M.create, print = M.print, dprint = M.dprinter(module), repeat = M.repeat, after = M.after, JSON = M.JSON, __class = M.__class, EventEmitter = M.EventEmitter;
@@ -37,7 +26,9 @@ Move.require.define("UILayer/UIFrame","UILayer/UIFrame.mv",function(require,modu
         } else {
           this.layer.element.style.setProperty(name, Text(value), null);
         }
-        if (!this.layer.eventsMuted) return this.layer.emit("change:frame", oldValues);
+        if (!this.layer.eventsMuted) return this.layer.emit("change:frame", {
+          oldValues: oldValues
+        });
       }
     };
   };
@@ -1266,6 +1257,17 @@ Move.require.define("UILayer/UILayer","UILayer/UILayer.mv",function(require,modu
   if ((head = document.getElementsByTagName("head")).length) head = head[0]; else head = document.body || document.documentElement;
   baseStyle = document.createElement("style");
   baseStyle.id = "UILayer-base-style";
-  baseStyle.appendChild(document.createTextNode(".uilayer {" + "  display: block;" + "  visibility: visible;" + "  position: absolute;" + "  top:auto; right:auto; bottom:auto; left:auto;" + "  width:auto; height:auto;" + "  overflow: visible;" + "  z-index:0;" + "  opacity:1;" + "}\n" + ".uilayer.textureBacked {" + "  -webkit-transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);" + "  -webkit-transform-origin: 50% 50% 0%;" + "  -webkit-backface-visibility: hidden;" + "  -webkit-transform-style: flat;" + "}\n" + ".uilayer.animated {" + "  -webkit-transition-duration: 500ms;" + "  -webkit-transition-timing-function: ease;" + "  -webkit-transition-delay: 0;" + "  -webkit-transition-property: none;" + "}"));
+  baseStyle.appendChild(document.createTextNode(".uilayer {" + "  display: block;" + "  visibility: visible;" + "  position: absolute;" + "  top:auto; right:auto; bottom:auto; left:auto;" + "  width:auto; height:auto;" + "  overflow: visible;" + "  z-index:0;" + "  opacity:1;" + "  -webkit-box-sizing: border-box;" + "}\n" + ".uilayer.textureBacked {" + "  -webkit-transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1);" + "  -webkit-transform-origin: 50% 50% 0%;" + "  -webkit-backface-visibility: hidden;" + "  -webkit-transform-style: flat;" + "}\n" + ".uilayer.animated {" + "  -webkit-transition-duration: 500ms;" + "  -webkit-transition-timing-function: ease;" + "  -webkit-transition-delay: 0;" + "  -webkit-transition-property: none;" + "}"));
   return head.appendChild(baseStyle);
+});
+Move.require.define("UILayer","UILayer/index.mv",function(require,module,exports){
+  var M, _MoveKWArgsT, Text, extend, create, print, dprint, repeat, after, JSON, __class, EventEmitter, EHTML, version;
+  M = Move.runtime, _MoveKWArgsT = M._MoveKWArgsT, Text = M.Text, extend = M.extend, create = M.create, print = M.print, dprint = M.dprinter(module), repeat = M.repeat, after = M.after, JSON = M.JSON, __class = M.__class, EventEmitter = M.EventEmitter;
+  EHTML = Move.EHTML;
+  if (typeof window === "undefined" || !window.navigator || window.navigator.userAgent.indexOf("WebKit") === -1) {
+    module.exports = null;
+    return print("Error: UILayer is only compatible with WebKit");
+  }
+  module.exports = exports = require("./UILayer");
+  exports.version = version = "0.0.6";
 });