First vision for shelf control

Slide all nodes to the right after user tap on button with class "shelf-open".
12 years ago · 803b6f32f1
3 changed files with 140 additions and 1 deletions
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@ -531,6 +531,56 @@
  });

  window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); });
+}();/* ----------------------------------
+ * SHELF v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+ 
+!function () {
+  
+  var shelfButton = false;
+  
+  var findOpenShelfButton = function(target) {
+    var i, buttons = document.querySelectorAll('.open-shelf');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = buttons.length; i--;) { if (buttons[i] == target) return target; }
+    }
+  };
+  
+  window.addEventListener('touchend', function(e) {
+    e = e.originalEvent || e;
+    
+    shelfButton = findOpenShelfButton(e.target);
+    
+    if (!shelfButton) return;
+    
+    var padding = 10,
+        right = document.body.offsetWidth - shelfButton.offsetWidth - padding,
+        childNodes, i, l;
+    
+    if (shelfButton.classList.contains('active')) {
+      shelfButton.classList.remove('active');
+      
+      childNodes = document.body.childNodes;
+      for (i=0, l=childNodes.length; i<l; i+=1) {
+        if (childNodes[i].nodeType == Node.ELEMENT_NODE && !childNodes[i].classList.contains('shelf')) {
+          childNodes[i].style['-webkit-transform'] = 'translateX(0)';
+        }
+      }
+    } else {
+      shelfButton.classList.add('active');
+      
+      childNodes = document.body.childNodes;
+      for (i=0, l=childNodes.length; i<l; i+=1) {
+        if (childNodes[i].nodeType == Node.ELEMENT_NODE && !childNodes[i].classList.contains('shelf')) {
+          childNodes[i].style['-webkit-transition'] = '-webkit-transform 0.3s ease-in-out';
+          childNodes[i].style['-webkit-transform'] = 'translateX(' + right + 'px)';
+        }
+      }
+    }
+  }, false);
+  
 }();/* ----------------------------------
 * SLIDER v1.0.0
 * Licensed under The MIT License
--- a/lib/js/shelf.js
+++ b/lib/js/shelf.js
@ -0,0 +1,51 @@
+/* ----------------------------------
+ * SHELF v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+ 
+!function () {
+  
+  var shelfButton = false;
+  
+  var findOpenShelfButton = function(target) {
+    var i, buttons = document.querySelectorAll('.open-shelf');
+    for (; target && target !== document; target = target.parentNode) {
+      for (i = buttons.length; i--;) { if (buttons[i] == target) return target; }
+    }
+  };
+  
+  window.addEventListener('touchend', function(e) {
+    e = e.originalEvent || e;
+    
+    shelfButton = findOpenShelfButton(e.target);
+    
+    if (!shelfButton) return;
+    
+    var padding = 10,
+        right = document.body.offsetWidth - shelfButton.offsetWidth - padding,
+        childNodes, i, l;
+    
+    if (shelfButton.classList.contains('active')) {
+      shelfButton.classList.remove('active');
+      
+      childNodes = document.body.childNodes;
+      for (i=0, l=childNodes.length; i<l; i+=1) {
+        if (childNodes[i].nodeType == Node.ELEMENT_NODE && !childNodes[i].classList.contains('shelf')) {
+          childNodes[i].style['-webkit-transform'] = 'translateX(0)';
+        }
+      }
+    } else {
+      shelfButton.classList.add('active');
+      
+      childNodes = document.body.childNodes;
+      for (i=0, l=childNodes.length; i<l; i+=1) {
+        if (childNodes[i].nodeType == Node.ELEMENT_NODE && !childNodes[i].classList.contains('shelf')) {
+          childNodes[i].style['-webkit-transition'] = '-webkit-transform 0.3s ease-in-out';
+          childNodes[i].style['-webkit-transform'] = 'translateX(' + right + 'px)';
+        }
+      }
+    }
+  }, false);
+  
+}();
--- a/test/app/index.html
+++ b/test/app/index.html
@ -17,8 +17,46 @@

  </head>
  <body>
-
+    
+  <div class="shelf">
+    <ul class="list">
+      <li class="list-divider">Recommended movies</li>
+      <li>
+        <a href="choose-theater.html">
+          <strong>Argo</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Skyfall: 007</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Wreck-it Ralph</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+      <li class="list-divider">Top movies</li>
+      <li>
+        <a href="choose-theater.html" data-transition="slide-in">
+          <strong>Movie 4</strong>
+          <p>Lorem ipsum dolor sit amet</p>
+          <span class="chevron"></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+  
  <header class="bar-title">
+    <a class="button open-shelf" href="#">
+      Open shelf
+    </a>
    <h1 class="title">Movie finder</h1>
  </header>
  <nav class="bar-standard bar-header-secondary">