refactoring, add landing page

googlearchive · Dec 13, 2013 · 111f91d · 111f91d
1 parent 8f683be
commit 111f91d
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 150 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+  <title>polymer api</title>
+  <style>
+    html, body {
+      font-family: Arial, sans-serif;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    [noviewer] [ifnoviewer] {
+      display: block;
+    }
+    [detector], [ifnoviewer], [noviewer] [ifviewer] {
+      display: none;
+    }
+    [ifviewer], [ifnoviewer] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+    iframe {
+      border: none;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+    #remote {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  </style>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../polymer-home-page/polymer-home-page.html">
+</head>
+<body>
+  <img detector src="../polymer-home-page/bowager-logo.png" onerror="noviewer()">
+  <polymer-home-page ifviewer></polymer-home-page>
+  <div ifnoviewer>
+    <span id="remote">[remote]</span>
+    <iframe></iframe>
+  </div>
+  <!-- -->
+  <script>
+    var remoteDocs = 'http://turbogadgetry.com/bowertopia/components/';
+    // if no local info viewer, load it remotely
+    function noviewer() {
+      document.body.setAttribute('noviewer', '');
+      var path = location.pathname.split('/');
+      var module = path.pop() || path.pop();
+      document.querySelector('iframe').src = remoteDocs + module;
+      document.querySelector('title').textContent = module;
+    }
+    // for testing only
+    var opts = window.location.search;
+    if (opts.indexOf('noviewer') >= 0) {
+      noviewer();
+    }
+  </script>
+</body>
+</html>
diff --git a/smoke.html b/smoke.html
diff --git a/x-designable.html b/x-designable.html
@@ -52,23 +52,45 @@
           this.selected = e;
         }
       },
+      update: function() {
+        this.marshalNodeReferences(this);
+      },
+      //
+      // abstracted drag API
+      //
+      // `track` events are triggered at the source of the drag, so 
+      // any object that wants to support dragging 'designable' objects
+      // implements the 'track' events but delegates the work to 
+      // callbacks that 'drag' populates on the drag object (dragInfo).
+      //
+      // drag-sources are x-pallete and x-designable
+      //
       drag: function(dragInfo) {
+        // TODO(sjmiles): store in instance variable?
         this.dragInfo = dragInfo;
-        //
+        // drag avatar
+        // TODO(sjmiles): if this is an element from the design-canvas, it's immediately
+        // pulled out of it's original context
         this.appendChild(dragInfo.element);
         //
-        var origin = dragInfo.origin || dragInfo.element.getBoundingClientRect();
+        // calculate a starting origin in the frame of 'this'
         var local = this.getBoundingClientRect();
+        // TODO(sjmiles): why the conditional?
+        var origin = dragInfo.origin; // || dragInfo.element.getBoundingClientRect();
         dragInfo.start = {x: origin.left - local.left, y: origin.top - local.top};
+        //console.log(origin, dragInfo.start, local);
         //
+        // contextualize utility method
+        var snap = this.snap.bind(this);
+        // attach drag handler to the dragInfo
         dragInfo.drag = function(event) {
-          var p = this.snap(
-            this.dragInfo.start.x + event.dx,
-            this.dragInfo.start.y + event.dy
+          var p = snap(
+            this.start.x + event.dx,
+            this.start.y + event.dy
           );
-          this.dragInfo.element.style.left = p.x + 'px';
-          this.dragInfo.element.style.top = p.y + 'px';
-        }.bind(this);
+          this.element.style.left = p.x + 'px';
+          this.element.style.top = p.y + 'px';
+        };
       },
       drop: function(element, event) {
         var container = this.findContainer(element, event.target);
@@ -91,6 +113,7 @@
           return true;
         }
       },
+      //
       decorateElement: function(element) {
         var s = element.style;
         s.pointerEvents = '';
@@ -105,9 +128,6 @@
             return ['style'].indexOf(c.localName) < 0;
           }).forEach(this.applyUniqueId.bind(this));
       },
-      update: function() {
-        this.marshalNodeReferences(this);
-      },
       // stuffs required for making binding to work, ad-hoc
       applyUniqueId: function(node) {
         if (!node.id) {
@@ -168,12 +188,27 @@
       trackStart: function(event) {
         // it's nobody else's event
         event.stopPropagation();
+        //console.dir(event);
         // acquire target
         var elt = this.findDraggableElement(event.target);
         if (elt) {
-          this.drag(this.createDragObject(elt));
+          var dragInfo = this.createDragObject(elt);
+          //
+          var px = event.pageX - dragInfo.origin.left;
+          if (px < 4 || px > dragInfo.origin.width -4) {
+            console.log(px);
+            return;
+          }
+          //
+          var style = elt.style;
+          style.position = 'absolute';
+          style.pointerEvents = 'none';
+          style.transition = 'none';
+          style.webkitTransition = 'none';
+          //
+          this.drag(dragInfo);
           this.selected = elt;
-          Platform.flush();
+          //Platform.flush();
         }
       },
       track: function(event) {
@@ -228,11 +263,6 @@
       },
       createDragObject: function(elt) {
         var rect = elt.getBoundingClientRect();
-        var style = elt.style;
-        style.position = 'absolute';
-        style.pointerEvents = 'none';
-        style.transition = 'none';
-        style.webkitTransition = 'none';
         return {
           origin: rect,
           element: elt
@@ -244,10 +274,10 @@
           y: Math.round(inY / this.grid) * this.grid
         }
       },
-      editorElements: {input:1, select: 1, textarea: 1},
       nodeIsEditor: function(node) {
         return node.isEditor || this.editorElements[node.localName];
-      }
+      },
+      editorElements: {input:1, select: 1, textarea: 1}
     });
   </script>
 </polymer-element>