overlay_me 0.12.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +4 -0
- data/CHANGELOG.md +37 -0
- data/Gemfile +7 -0
- data/Gemfile.lock +70 -0
- data/LICENSE +21 -0
- data/README.md +136 -0
- data/Rakefile +115 -0
- data/addons/layout_resizer.js +51 -0
- data/demo_page.html +33 -0
- data/javascripts/addons/layout_resizer.js.coffee +42 -0
- data/javascripts/basics.js.coffee +25 -0
- data/javascripts/draggable.js.coffee +51 -0
- data/javascripts/init.js.coffee +24 -0
- data/javascripts/lib/backbone.js +1154 -0
- data/javascripts/lib/html5slider.js +268 -0
- data/javascripts/lib/jquery.js +9404 -0
- data/javascripts/lib/underscore.js +807 -0
- data/javascripts/menu.js.coffee +29 -0
- data/javascripts/menu_item.js.coffee +42 -0
- data/javascripts/overlay_me.js.coffee +3 -0
- data/javascripts/overlays/content_div_mngmt.js.coffee +91 -0
- data/javascripts/overlays/draggable_image.js.coffee +34 -0
- data/javascripts/overlays/dynamic_images_mngmt.js.coffee +48 -0
- data/javascripts/overlays/image.js.coffee +100 -0
- data/javascripts/overlays/images_mngt_div.js.coffee +103 -0
- data/javascripts/overlays/init.js.coffee +13 -0
- data/javascripts/overlays.js.coffee +49 -0
- data/lib/overlay_me/version.rb +7 -0
- data/lib/overlay_me.rb +22 -0
- data/overlay_me.css +232 -0
- data/overlay_me.gemspec +23 -0
- data/overlay_me.js +12565 -0
- data/stylesheets/overlay_me.css.scss +213 -0
- data/vendor/assets/javascripts/overlay_me/addons/layout_resizer.js +51 -0
- data/vendor/assets/javascripts/overlay_me/overlay_me.min.js +733 -0
- metadata +200 -0
@@ -0,0 +1,268 @@
|
|
1
|
+
/*
|
2
|
+
html5slider - a JS implementation of <input type=range> for Firefox 4 and up
|
3
|
+
https://github.com/fryn/html5slider
|
4
|
+
|
5
|
+
Copyright (c) 2010-2011 Frank Yan, <http://frankyan.com>
|
6
|
+
|
7
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
8
|
+
of this software and associated documentation files (the "Software"), to deal
|
9
|
+
in the Software without restriction, including without limitation the rights
|
10
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
11
|
+
copies of the Software, and to permit persons to whom the Software is
|
12
|
+
furnished to do so, subject to the following conditions:
|
13
|
+
|
14
|
+
The above copyright notice and this permission notice shall be included in
|
15
|
+
all copies or substantial portions of the Software.
|
16
|
+
|
17
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
18
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
19
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
20
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
21
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
22
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
23
|
+
THE SOFTWARE.
|
24
|
+
*/
|
25
|
+
|
26
|
+
(function() {
|
27
|
+
|
28
|
+
// test for native support
|
29
|
+
var test = document.createElement('input');
|
30
|
+
try {
|
31
|
+
test.type = 'range';
|
32
|
+
if (test.type == 'range')
|
33
|
+
return;
|
34
|
+
} catch (e) {
|
35
|
+
return;
|
36
|
+
}
|
37
|
+
|
38
|
+
// test for required property support
|
39
|
+
if (!document.mozSetImageElement || !('MozAppearance' in test.style))
|
40
|
+
return;
|
41
|
+
|
42
|
+
var scale;
|
43
|
+
var isMac = navigator.platform == 'MacIntel';
|
44
|
+
var thumb = {
|
45
|
+
radius: isMac ? 9 : 6,
|
46
|
+
width: isMac ? 22 : 12,
|
47
|
+
height: isMac ? 16 : 20
|
48
|
+
};
|
49
|
+
var track = '-moz-linear-gradient(top, transparent ' + (isMac ?
|
50
|
+
'6px, #999 6px, #999 7px, #ccc 9px, #bbb 11px, #bbb 12px, transparent 12px' :
|
51
|
+
'9px, #999 9px, #bbb 10px, #fff 11px, transparent 11px') +
|
52
|
+
', transparent)';
|
53
|
+
var styles = {
|
54
|
+
'min-width': thumb.width + 'px',
|
55
|
+
'min-height': thumb.height + 'px',
|
56
|
+
'max-height': thumb.height + 'px',
|
57
|
+
padding: 0,
|
58
|
+
border: 0,
|
59
|
+
'border-radius': 0,
|
60
|
+
cursor: 'default',
|
61
|
+
'text-indent': '-999999px' // -moz-user-select: none; breaks mouse capture
|
62
|
+
};
|
63
|
+
var onChange = document.createEvent('HTMLEvents');
|
64
|
+
onChange.initEvent('change', true, false);
|
65
|
+
|
66
|
+
if (document.readyState == 'loading')
|
67
|
+
document.addEventListener('DOMContentLoaded', initialize, true);
|
68
|
+
else
|
69
|
+
initialize();
|
70
|
+
|
71
|
+
function initialize() {
|
72
|
+
// create initial sliders
|
73
|
+
Array.forEach(document.querySelectorAll('input[type=range]'), transform);
|
74
|
+
// create sliders on-the-fly
|
75
|
+
document.addEventListener('DOMNodeInserted', onNodeInserted, true);
|
76
|
+
}
|
77
|
+
|
78
|
+
function onNodeInserted(e) {
|
79
|
+
check(e.target);
|
80
|
+
if (e.target.querySelectorAll)
|
81
|
+
Array.forEach(e.target.querySelectorAll('input'), check);
|
82
|
+
}
|
83
|
+
|
84
|
+
function check(input, async) {
|
85
|
+
if (input.localName != 'input' || input.type == 'range');
|
86
|
+
else if (input.getAttribute('type') == 'range')
|
87
|
+
transform(input);
|
88
|
+
else if (!async)
|
89
|
+
setTimeout(check, 0, input, true);
|
90
|
+
}
|
91
|
+
|
92
|
+
function transform(slider) {
|
93
|
+
|
94
|
+
var isValueSet, areAttrsSet, isChanged, isClick, prevValue, rawValue, prevX;
|
95
|
+
var min, max, step, range, value = slider.value;
|
96
|
+
|
97
|
+
// lazily create shared slider affordance
|
98
|
+
if (!scale) {
|
99
|
+
scale = document.body.appendChild(document.createElement('hr'));
|
100
|
+
style(scale, {
|
101
|
+
'-moz-appearance': isMac ? 'scale-horizontal' : 'scalethumb-horizontal',
|
102
|
+
display: 'block',
|
103
|
+
visibility: 'visible',
|
104
|
+
opacity: 1,
|
105
|
+
position: 'fixed',
|
106
|
+
top: '-999999px'
|
107
|
+
});
|
108
|
+
document.mozSetImageElement('__sliderthumb__', scale);
|
109
|
+
}
|
110
|
+
|
111
|
+
// reimplement value and type properties
|
112
|
+
var getValue = function() { return '' + value; };
|
113
|
+
var setValue = function setValue(val) {
|
114
|
+
value = '' + val;
|
115
|
+
isValueSet = true;
|
116
|
+
draw();
|
117
|
+
delete slider.value;
|
118
|
+
slider.value = value;
|
119
|
+
slider.__defineGetter__('value', getValue);
|
120
|
+
slider.__defineSetter__('value', setValue);
|
121
|
+
};
|
122
|
+
slider.__defineGetter__('value', getValue);
|
123
|
+
slider.__defineSetter__('value', setValue);
|
124
|
+
slider.__defineGetter__('type', function() { return 'range'; });
|
125
|
+
|
126
|
+
// sync properties with attributes
|
127
|
+
['min', 'max', 'step'].forEach(function(prop) {
|
128
|
+
if (slider.hasAttribute(prop))
|
129
|
+
areAttrsSet = true;
|
130
|
+
slider.__defineGetter__(prop, function() {
|
131
|
+
return this.hasAttribute(prop) ? this.getAttribute(prop) : '';
|
132
|
+
});
|
133
|
+
slider.__defineSetter__(prop, function(val) {
|
134
|
+
val === null ? this.removeAttribute(prop) : this.setAttribute(prop, val);
|
135
|
+
});
|
136
|
+
});
|
137
|
+
|
138
|
+
// initialize slider
|
139
|
+
slider.readOnly = true;
|
140
|
+
style(slider, styles);
|
141
|
+
update();
|
142
|
+
|
143
|
+
slider.addEventListener('DOMAttrModified', function(e) {
|
144
|
+
// note that value attribute only sets initial value
|
145
|
+
if (e.attrName == 'value' && !isValueSet) {
|
146
|
+
value = e.newValue;
|
147
|
+
draw();
|
148
|
+
}
|
149
|
+
else if (~['min', 'max', 'step'].indexOf(e.attrName)) {
|
150
|
+
update();
|
151
|
+
areAttrsSet = true;
|
152
|
+
}
|
153
|
+
}, true);
|
154
|
+
|
155
|
+
slider.addEventListener('mousedown', onDragStart, true);
|
156
|
+
slider.addEventListener('keydown', onKeyDown, true);
|
157
|
+
slider.addEventListener('focus', onFocus, true);
|
158
|
+
slider.addEventListener('blur', onBlur, true);
|
159
|
+
|
160
|
+
function onDragStart(e) {
|
161
|
+
isClick = true;
|
162
|
+
setTimeout(function() { isClick = false; }, 0);
|
163
|
+
if (e.button || !range)
|
164
|
+
return;
|
165
|
+
var width = parseFloat(getComputedStyle(this, 0).width);
|
166
|
+
var multiplier = (width - thumb.width) / range;
|
167
|
+
if (!multiplier)
|
168
|
+
return;
|
169
|
+
// distance between click and center of thumb
|
170
|
+
var dev = e.clientX - this.getBoundingClientRect().left - thumb.width / 2 -
|
171
|
+
(value - min) * multiplier;
|
172
|
+
// if click was not on thumb, move thumb to click location
|
173
|
+
if (Math.abs(dev) > thumb.radius) {
|
174
|
+
isChanged = true;
|
175
|
+
this.value -= -dev / multiplier;
|
176
|
+
}
|
177
|
+
rawValue = value;
|
178
|
+
prevX = e.clientX;
|
179
|
+
this.addEventListener('mousemove', onDrag, true);
|
180
|
+
this.addEventListener('mouseup', onDragEnd, true);
|
181
|
+
}
|
182
|
+
|
183
|
+
function onDrag(e) {
|
184
|
+
var width = parseFloat(getComputedStyle(this, 0).width);
|
185
|
+
var multiplier = (width - thumb.width) / range;
|
186
|
+
if (!multiplier)
|
187
|
+
return;
|
188
|
+
rawValue += (e.clientX - prevX) / multiplier;
|
189
|
+
prevX = e.clientX;
|
190
|
+
isChanged = true;
|
191
|
+
this.value = rawValue;
|
192
|
+
}
|
193
|
+
|
194
|
+
function onDragEnd() {
|
195
|
+
this.removeEventListener('mousemove', onDrag, true);
|
196
|
+
this.removeEventListener('mouseup', onDragEnd, true);
|
197
|
+
}
|
198
|
+
|
199
|
+
function onKeyDown(e) {
|
200
|
+
if (e.keyCode > 36 && e.keyCode < 41) { // 37-40: left, up, right, down
|
201
|
+
onFocus.call(this);
|
202
|
+
isChanged = true;
|
203
|
+
this.value = value + (e.keyCode == 38 || e.keyCode == 39 ? step : -step);
|
204
|
+
}
|
205
|
+
}
|
206
|
+
|
207
|
+
function onFocus() {
|
208
|
+
if (!isClick)
|
209
|
+
this.style.boxShadow = !isMac ? '0 0 0 2px #fb0' :
|
210
|
+
'0 0 2px 1px -moz-mac-focusring, inset 0 0 1px -moz-mac-focusring';
|
211
|
+
}
|
212
|
+
|
213
|
+
function onBlur() {
|
214
|
+
this.style.boxShadow = '';
|
215
|
+
}
|
216
|
+
|
217
|
+
// determines whether value is valid number in attribute form
|
218
|
+
function isAttrNum(value) {
|
219
|
+
return !isNaN(value) && +value == parseFloat(value);
|
220
|
+
}
|
221
|
+
|
222
|
+
// validates min, max, and step attributes and redraws
|
223
|
+
function update() {
|
224
|
+
min = isAttrNum(slider.min) ? +slider.min : 0;
|
225
|
+
max = isAttrNum(slider.max) ? +slider.max : 100;
|
226
|
+
if (max < min)
|
227
|
+
max = min > 100 ? min : 100;
|
228
|
+
step = isAttrNum(slider.step) && slider.step > 0 ? +slider.step : 1;
|
229
|
+
range = max - min;
|
230
|
+
draw(true);
|
231
|
+
}
|
232
|
+
|
233
|
+
// recalculates value property
|
234
|
+
function calc() {
|
235
|
+
if (!isValueSet && !areAttrsSet)
|
236
|
+
value = slider.getAttribute('value');
|
237
|
+
if (!isAttrNum(value))
|
238
|
+
value = (min + max) / 2;;
|
239
|
+
// snap to step intervals (WebKit sometimes does not - bug?)
|
240
|
+
value = Math.round((value - min) / step) * step + min;
|
241
|
+
if (value < min)
|
242
|
+
value = min;
|
243
|
+
else if (value > max)
|
244
|
+
value = min + ~~(range / step) * step;
|
245
|
+
}
|
246
|
+
|
247
|
+
// renders slider using CSS background ;)
|
248
|
+
function draw(attrsModified) {
|
249
|
+
calc();
|
250
|
+
if (isChanged && value != prevValue)
|
251
|
+
slider.dispatchEvent(onChange);
|
252
|
+
isChanged = false;
|
253
|
+
if (!attrsModified && value == prevValue)
|
254
|
+
return;
|
255
|
+
prevValue = value;
|
256
|
+
var position = range ? (value - min) / range * 100 : 0;
|
257
|
+
var bg = '-moz-element(#__sliderthumb__) ' + position + '% no-repeat, ';
|
258
|
+
style(slider, { background: bg + track });
|
259
|
+
}
|
260
|
+
|
261
|
+
}
|
262
|
+
|
263
|
+
function style(element, styles) {
|
264
|
+
for (var prop in styles)
|
265
|
+
element.style.setProperty(prop, styles[prop], 'important');
|
266
|
+
}
|
267
|
+
|
268
|
+
})();
|