compass-ratchet 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +67 -0
- data/lib/compass-ratchet.rb +3 -0
- data/stylesheets/_compass-ratchet.scss +14 -0
- data/stylesheets/compass-ratchet/_bars.scss +330 -0
- data/stylesheets/compass-ratchet/_base.scss +155 -0
- data/stylesheets/compass-ratchet/_buttons.scss +124 -0
- data/stylesheets/compass-ratchet/_chevrons.scss +32 -0
- data/stylesheets/compass-ratchet/_counts.scss +42 -0
- data/stylesheets/compass-ratchet/_forms.scss +126 -0
- data/stylesheets/compass-ratchet/_lists.scss +122 -0
- data/stylesheets/compass-ratchet/_popovers.scss +158 -0
- data/stylesheets/compass-ratchet/_push.scss +30 -0
- data/stylesheets/compass-ratchet/_segmented-controllers.scss +67 -0
- data/stylesheets/compass-ratchet/_shared.scss +8 -0
- data/stylesheets/compass-ratchet/_sliders.scss +40 -0
- data/stylesheets/compass-ratchet/_toggles.scss +71 -0
- data/templates/project/checkout.html +81 -0
- data/templates/project/choose-movie.html +125 -0
- data/templates/project/choose-theater.html +110 -0
- data/templates/project/config.rb +8 -0
- data/templates/project/css/app.css +1 -0
- data/templates/project/img/argo.png +0 -0
- data/templates/project/img/ralph.png +0 -0
- data/templates/project/img/skyfall.png +0 -0
- data/templates/project/index.html +160 -0
- data/templates/project/js/popovers.js +63 -0
- data/templates/project/js/push.js +417 -0
- data/templates/project/js/segmented-controllers.js +47 -0
- data/templates/project/js/sliders.js +114 -0
- data/templates/project/js/toggles.js +94 -0
- data/templates/project/manifest.rb +24 -0
- data/templates/project/sass/app.scss +13 -0
- data/templates/project/settings.html +73 -0
- data/templates/project/theaters.html +131 -0
- metadata +111 -0
@@ -0,0 +1,114 @@
|
|
1
|
+
/* ----------------------------------
|
2
|
+
* SLIDER v1.0.0
|
3
|
+
* Licensed under The MIT License
|
4
|
+
* Adapted from Brad Birdsall's swipe
|
5
|
+
* http://opensource.org/licenses/MIT
|
6
|
+
* ---------------------------------- */
|
7
|
+
|
8
|
+
!function () {
|
9
|
+
|
10
|
+
var pageX;
|
11
|
+
var pageY;
|
12
|
+
var slider;
|
13
|
+
var deltaX;
|
14
|
+
var deltaY;
|
15
|
+
var offsetX;
|
16
|
+
var lastSlide;
|
17
|
+
var startTime;
|
18
|
+
var resistance;
|
19
|
+
var sliderWidth;
|
20
|
+
var slideNumber;
|
21
|
+
var isScrolling;
|
22
|
+
var scrollableArea;
|
23
|
+
|
24
|
+
var getSlider = function (target) {
|
25
|
+
var i, sliders = document.querySelectorAll('.slider ul');
|
26
|
+
for (; target && target !== document; target = target.parentNode) {
|
27
|
+
for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
var getScroll = function () {
|
32
|
+
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
|
33
|
+
return parseInt(translate3d ? translate3d[1] : 0)
|
34
|
+
};
|
35
|
+
|
36
|
+
var setSlideNumber = function (offset) {
|
37
|
+
var round = offset ? (deltaX < 0 ? 'ceil' : 'floor') : 'round';
|
38
|
+
slideNumber = Math[round](getScroll() / ( scrollableArea / slider.children.length) );
|
39
|
+
slideNumber += offset;
|
40
|
+
slideNumber = Math.min(slideNumber, 0);
|
41
|
+
slideNumber = Math.max(-(slider.children.length - 1), slideNumber);
|
42
|
+
}
|
43
|
+
|
44
|
+
var onTouchStart = function (e) {
|
45
|
+
slider = getSlider(e.target);
|
46
|
+
|
47
|
+
if (!slider) return;
|
48
|
+
|
49
|
+
var firstItem = slider.querySelector('li');
|
50
|
+
|
51
|
+
scrollableArea = firstItem.offsetWidth * slider.children.length;
|
52
|
+
isScrolling = undefined;
|
53
|
+
sliderWidth = slider.offsetWidth;
|
54
|
+
resistance = 1;
|
55
|
+
lastSlide = -(slider.children.length - 1);
|
56
|
+
startTime = +new Date;
|
57
|
+
pageX = e.touches[0].pageX;
|
58
|
+
pageY = e.touches[0].pageY;
|
59
|
+
|
60
|
+
setSlideNumber(0);
|
61
|
+
|
62
|
+
slider.style['-webkit-transition-duration'] = 0;
|
63
|
+
};
|
64
|
+
|
65
|
+
var onTouchMove = function (e) {
|
66
|
+
if (e.touches.length > 1 || !slider) return; // Exit if a pinch || no slider
|
67
|
+
|
68
|
+
deltaX = e.touches[0].pageX - pageX;
|
69
|
+
deltaY = e.touches[0].pageY - pageY;
|
70
|
+
pageX = e.touches[0].pageX;
|
71
|
+
pageY = e.touches[0].pageY;
|
72
|
+
|
73
|
+
if (typeof isScrolling == 'undefined') {
|
74
|
+
isScrolling = Math.abs(deltaY) > Math.abs(deltaX);
|
75
|
+
}
|
76
|
+
|
77
|
+
if (isScrolling) return;
|
78
|
+
|
79
|
+
offsetX = (deltaX / resistance) + getScroll();
|
80
|
+
|
81
|
+
e.preventDefault();
|
82
|
+
|
83
|
+
resistance = slideNumber == 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
|
84
|
+
slideNumber == lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;
|
85
|
+
|
86
|
+
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
|
87
|
+
};
|
88
|
+
|
89
|
+
var onTouchEnd = function (e) {
|
90
|
+
if (!slider || isScrolling) return;
|
91
|
+
|
92
|
+
setSlideNumber(
|
93
|
+
(+new Date) - startTime < 1000 && Math.abs(deltaX) > 15 ? (deltaX < 0 ? -1 : 1) : 0
|
94
|
+
);
|
95
|
+
|
96
|
+
offsetX = slideNumber * sliderWidth;
|
97
|
+
|
98
|
+
slider.style['-webkit-transition-duration'] = '.2s';
|
99
|
+
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
|
100
|
+
|
101
|
+
e = new CustomEvent('slide', {
|
102
|
+
detail: { slideNumber: Math.abs(slideNumber) },
|
103
|
+
bubbles: true,
|
104
|
+
cancelable: true
|
105
|
+
});
|
106
|
+
|
107
|
+
slider.parentNode.dispatchEvent(e);
|
108
|
+
};
|
109
|
+
|
110
|
+
window.addEventListener('touchstart', onTouchStart);
|
111
|
+
window.addEventListener('touchmove', onTouchMove);
|
112
|
+
window.addEventListener('touchend', onTouchEnd);
|
113
|
+
|
114
|
+
}();
|
@@ -0,0 +1,94 @@
|
|
1
|
+
/* ----------------------------------
|
2
|
+
* TOGGLE v1.0.0
|
3
|
+
* Licensed under The MIT License
|
4
|
+
* http://opensource.org/licenses/MIT
|
5
|
+
* ---------------------------------- */
|
6
|
+
|
7
|
+
!function () {
|
8
|
+
|
9
|
+
var start = {};
|
10
|
+
var touchMove = false;
|
11
|
+
var distanceX = false;
|
12
|
+
var toggle = false;
|
13
|
+
|
14
|
+
var findToggle = function (target) {
|
15
|
+
var i, toggles = document.querySelectorAll('.toggle');
|
16
|
+
for (; target && target !== document; target = target.parentNode) {
|
17
|
+
for (i = toggles.length; i--;) { if (toggles[i] === target) return target; }
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
window.addEventListener('touchstart', function (e) {
|
22
|
+
e = e.originalEvent || e;
|
23
|
+
|
24
|
+
toggle = findToggle(e.target);
|
25
|
+
|
26
|
+
if (!toggle) return;
|
27
|
+
|
28
|
+
var handle = toggle.querySelector('.toggle-handle');
|
29
|
+
var toggleWidth = toggle.offsetWidth;
|
30
|
+
var handleWidth = handle.offsetWidth;
|
31
|
+
var offset = toggle.classList.contains('active') ? toggleWidth - handleWidth : 0;
|
32
|
+
|
33
|
+
start = { pageX : e.touches[0].pageX - offset, pageY : e.touches[0].pageY };
|
34
|
+
touchMove = false;
|
35
|
+
|
36
|
+
// todo: probably should be moved to the css
|
37
|
+
toggle.style['-webkit-transition-duration'] = 0;
|
38
|
+
});
|
39
|
+
|
40
|
+
window.addEventListener('touchmove', function (e) {
|
41
|
+
e = e.originalEvent || e;
|
42
|
+
|
43
|
+
if (e.touches.length > 1) return; // Exit if a pinch
|
44
|
+
|
45
|
+
if (!toggle) return;
|
46
|
+
|
47
|
+
var handle = toggle.querySelector('.toggle-handle');
|
48
|
+
var current = e.touches[0];
|
49
|
+
var toggleWidth = toggle.offsetWidth;
|
50
|
+
var handleWidth = handle.offsetWidth;
|
51
|
+
var offset = toggleWidth - handleWidth;
|
52
|
+
|
53
|
+
touchMove = true;
|
54
|
+
distanceX = current.pageX - start.pageX;
|
55
|
+
|
56
|
+
if (Math.abs(distanceX) < Math.abs(current.pageY - start.pageY)) return;
|
57
|
+
|
58
|
+
e.preventDefault();
|
59
|
+
|
60
|
+
if (distanceX < 0) return handle.style.webkitTransform = 'translate3d(0,0,0)';
|
61
|
+
if (distanceX > offset) return handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
|
62
|
+
|
63
|
+
handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
|
64
|
+
|
65
|
+
toggle.classList[(distanceX > (toggleWidth/2 - handleWidth/2)) ? 'add' : 'remove']('active');
|
66
|
+
});
|
67
|
+
|
68
|
+
window.addEventListener('touchend', function (e) {
|
69
|
+
if (!toggle) return;
|
70
|
+
|
71
|
+
var handle = toggle.querySelector('.toggle-handle');
|
72
|
+
var toggleWidth = toggle.offsetWidth;
|
73
|
+
var handleWidth = handle.offsetWidth;
|
74
|
+
var offset = toggleWidth - handleWidth;
|
75
|
+
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth/2 - handleWidth/2)));
|
76
|
+
|
77
|
+
if (slideOn) handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
|
78
|
+
else handle.style.webkitTransform = 'translate3d(0,0,0)';
|
79
|
+
|
80
|
+
toggle.classList[slideOn ? 'add' : 'remove']('active');
|
81
|
+
|
82
|
+
e = new CustomEvent('toggle', {
|
83
|
+
detail: { isActive: slideOn },
|
84
|
+
bubbles: true,
|
85
|
+
cancelable: true
|
86
|
+
});
|
87
|
+
|
88
|
+
toggle.dispatchEvent(e);
|
89
|
+
|
90
|
+
touchMove = false;
|
91
|
+
toggle = false;
|
92
|
+
});
|
93
|
+
|
94
|
+
}();
|
@@ -0,0 +1,24 @@
|
|
1
|
+
description "Test app using compass-ratchet"
|
2
|
+
|
3
|
+
stylesheet 'sass/app.scss', :media => 'screen, projection'
|
4
|
+
|
5
|
+
image 'img/argo.png'
|
6
|
+
image 'img/ralph.png'
|
7
|
+
image 'img/skyfall.png'
|
8
|
+
javascript 'js/popovers.js'
|
9
|
+
javascript 'js/push.js'
|
10
|
+
javascript 'js/segmented-controllers.js'
|
11
|
+
javascript 'js/sliders.js'
|
12
|
+
javascript 'js/toggles.js'
|
13
|
+
|
14
|
+
html 'checkout.html'
|
15
|
+
html 'choose-movie.html'
|
16
|
+
html 'choose-theater.html'
|
17
|
+
html 'index.html'
|
18
|
+
html 'settings.html'
|
19
|
+
html 'theaters.html'
|
20
|
+
file 'config.rb'
|
21
|
+
|
22
|
+
welcome_message %Q{
|
23
|
+
Now customize and compile!
|
24
|
+
}
|
@@ -0,0 +1,73 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>Movie finder</title>
|
6
|
+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
7
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
8
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
9
|
+
|
10
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
|
11
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
|
12
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
|
13
|
+
|
14
|
+
<link rel="stylesheet" href="../../dist/ratchet.css">
|
15
|
+
<link rel="stylesheet" href="css/app.css">
|
16
|
+
<script src="../../dist/ratchet.js"></script>
|
17
|
+
<script src="../../dos/js/fingerblast.js"></script>
|
18
|
+
|
19
|
+
</head>
|
20
|
+
<body>
|
21
|
+
|
22
|
+
<header class="bar-title">
|
23
|
+
<h1 class="title">Settings</h1>
|
24
|
+
</header>
|
25
|
+
|
26
|
+
<nav class="bar-tab">
|
27
|
+
<ul class="tab-inner">
|
28
|
+
<li class="tab-item">
|
29
|
+
<a href="index.html" data-transition="fade">
|
30
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
31
|
+
<div class="tab-label">Movies</div>
|
32
|
+
</a>
|
33
|
+
</li>
|
34
|
+
<li class="tab-item">
|
35
|
+
<a href="theaters.html" data-transition="fade">
|
36
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
37
|
+
<div class="tab-label">Theaters</div>
|
38
|
+
</a>
|
39
|
+
</li>
|
40
|
+
<li class="tab-item active">
|
41
|
+
<a href="settings.html" data-transition="fade">
|
42
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
43
|
+
<div class="tab-label">Settings</div>
|
44
|
+
</a>
|
45
|
+
</li>
|
46
|
+
</ul>
|
47
|
+
</nav>
|
48
|
+
|
49
|
+
<div class="content">
|
50
|
+
<div class="form-wrapper">
|
51
|
+
<form>
|
52
|
+
<div class="input-group">
|
53
|
+
<div class="input-row">
|
54
|
+
<label>Full name</label>
|
55
|
+
<input type="text" placeholder="Mister Ratchet">
|
56
|
+
</div>
|
57
|
+
<div class="input-row">
|
58
|
+
<label>Email</label>
|
59
|
+
<input type="email" placeholder="ratchetframework@gmail.com">
|
60
|
+
</div>
|
61
|
+
<div class="input-row">
|
62
|
+
<label>Username</label>
|
63
|
+
<input type="text" placeholder="goRatchet">
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
<a class="button-block">Save changes</a>
|
67
|
+
</form>
|
68
|
+
</div>
|
69
|
+
|
70
|
+
</div>
|
71
|
+
|
72
|
+
</body>
|
73
|
+
</html>
|
@@ -0,0 +1,131 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<title>Movie finder</title>
|
6
|
+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
7
|
+
<meta name="apple-mobile-web-app-capable" content="yes">
|
8
|
+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
9
|
+
|
10
|
+
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
|
11
|
+
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
|
12
|
+
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
|
13
|
+
|
14
|
+
<link rel="stylesheet" href="../../dist/ratchet.css">
|
15
|
+
<link rel="stylesheet" href="css/app.css">
|
16
|
+
<script src="../../dist/ratchet.js"></script>
|
17
|
+
|
18
|
+
</head>
|
19
|
+
<body>
|
20
|
+
|
21
|
+
<header class="bar-title">
|
22
|
+
<h1 class="title">Find a theater</h1>
|
23
|
+
</header>
|
24
|
+
<nav class="bar-standard bar-header-secondary">
|
25
|
+
<form>
|
26
|
+
<input type="search" placeholder="Search">
|
27
|
+
</form>
|
28
|
+
</nav>
|
29
|
+
|
30
|
+
<nav class="bar-tab">
|
31
|
+
<ul class="tab-inner">
|
32
|
+
<li class="tab-item">
|
33
|
+
<a href="index.html" data-transition="fade">
|
34
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
35
|
+
<div class="tab-label">Movies</div>
|
36
|
+
</a>
|
37
|
+
</li>
|
38
|
+
<li class="tab-item active">
|
39
|
+
<a href="theaters.html" data-transition="fade">
|
40
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
41
|
+
<div class="tab-label">Theaters</div>
|
42
|
+
</a>
|
43
|
+
</li>
|
44
|
+
<li class="tab-item">
|
45
|
+
<a href="settings.html" data-transition="fade">
|
46
|
+
<img class="tab-icon" src="../../docs/img/icon-hamburger.png">
|
47
|
+
<div class="tab-label">Settings</div>
|
48
|
+
</a>
|
49
|
+
</li>
|
50
|
+
</ul>
|
51
|
+
</nav>
|
52
|
+
|
53
|
+
<div class="content">
|
54
|
+
|
55
|
+
<ul class="list">
|
56
|
+
<li class="list-divider">Theaters nearby</li>
|
57
|
+
<li>
|
58
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
59
|
+
<strong>Metreon 16</strong>
|
60
|
+
<p>1.3 miles away</p>
|
61
|
+
<span class="chevron"></span>
|
62
|
+
</a>
|
63
|
+
</li>
|
64
|
+
<li>
|
65
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
66
|
+
<strong>AMC 5</strong>
|
67
|
+
<p>3.5 miles away</p>
|
68
|
+
<span class="chevron"></span>
|
69
|
+
</a>
|
70
|
+
</li>
|
71
|
+
<li>
|
72
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
73
|
+
<strong>Regal 42</strong>
|
74
|
+
<p>7.3 miles away</p>
|
75
|
+
<span class="chevron"></span>
|
76
|
+
</a>
|
77
|
+
</li>
|
78
|
+
<li>
|
79
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
80
|
+
<strong>Shorline theater</strong>
|
81
|
+
<p>12.5 miles away</p>
|
82
|
+
<span class="chevron"></span>
|
83
|
+
</a>
|
84
|
+
</li>
|
85
|
+
<li>
|
86
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
87
|
+
<strong>AMC 16</strong>
|
88
|
+
<p>12.2 miles away</p>
|
89
|
+
<span class="chevron"></span>
|
90
|
+
</a>
|
91
|
+
</li>
|
92
|
+
<li>
|
93
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
94
|
+
<strong>BW3 16</strong>
|
95
|
+
<p>13.4 miles away</p>
|
96
|
+
<span class="chevron"></span>
|
97
|
+
</a>
|
98
|
+
</li>
|
99
|
+
<li>
|
100
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
101
|
+
<strong>MC Hammer 16</strong>
|
102
|
+
<p>14.1 miles away</p>
|
103
|
+
<span class="chevron"></span>
|
104
|
+
</a>
|
105
|
+
</li>
|
106
|
+
<li>
|
107
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
108
|
+
<strong>AMC 3</strong>
|
109
|
+
<p>14.3 miles away</p>
|
110
|
+
<span class="chevron"></span>
|
111
|
+
</a>
|
112
|
+
</li>
|
113
|
+
<li>
|
114
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
115
|
+
<strong>AMC 2</strong>
|
116
|
+
<p>14.7 miles away</p>
|
117
|
+
<span class="chevron"></span>
|
118
|
+
</a>
|
119
|
+
</li>
|
120
|
+
<li>
|
121
|
+
<a href="choose-movie.html" data-transition="slide-in">
|
122
|
+
<strong>AMC 10</strong>
|
123
|
+
<p>15 miles away</p>
|
124
|
+
<span class="chevron"></span>
|
125
|
+
</a>
|
126
|
+
</li>
|
127
|
+
</ul>
|
128
|
+
</div>
|
129
|
+
|
130
|
+
</body>
|
131
|
+
</html>
|