playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

First vision for shelf control 

Slide all nodes to the right after user tap on button with class
"shelf-open".
pull/95/head
Anton Byrna 12 years ago
parent
52cd717914
commit
803b6f32f1
3 changed files with 140 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      dist/ratchet.js
  2. 51
      lib/js/shelf.js
  3. 38
      test/app/index.html

50
dist/ratchet.js vendored
Unescape View File

@ -531,6 +531,56 @@
}); });
window.addEventListener('click', function (e) { if (getTarget(e.target)) e.preventDefault(); }); 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 * SLIDER v1.0.0
* Licensed under The MIT License * Licensed under The MIT License

51
lib/js/shelf.js
Unescape View File

@ -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);
}();

38
test/app/index.html
Unescape View File

@ -18,7 +18,45 @@
</head> </head>
<body> <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"> <header class="bar-title">
<a class="button open-shelf" href="#">
Open shelf
</a>
<h1 class="title">Movie finder</h1> <h1 class="title">Movie finder</h1>
</header> </header>
<nav class="bar-standard bar-header-secondary"> <nav class="bar-standard bar-header-secondary">

Write Preview
Loading…
Cancel
Save