twentytwenty_rails 0.0.3

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.
@@ -0,0 +1,103 @@
1
+ (function($){
2
+
3
+ $.fn.twentytwenty = function(options) {
4
+ var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
5
+ return this.each(function() {
6
+
7
+ var sliderPct = options.default_offset_pct;
8
+ var container = $(this);
9
+ var sliderOrientation = options.orientation;
10
+ var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
11
+ var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
12
+
13
+
14
+ container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
15
+ container.append("<div class='twentytwenty-overlay'></div>");
16
+ var beforeImg = container.find("img:first");
17
+ var afterImg = container.find("img:last");
18
+ container.append("<div class='twentytwenty-handle'></div>");
19
+ var slider = container.find(".twentytwenty-handle");
20
+ slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
21
+ slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
22
+ container.addClass("twentytwenty-container");
23
+ beforeImg.addClass("twentytwenty-before");
24
+ afterImg.addClass("twentytwenty-after");
25
+
26
+ var overlay = container.find(".twentytwenty-overlay");
27
+ overlay.append("<div class='twentytwenty-before-label'></div>");
28
+ overlay.append("<div class='twentytwenty-after-label'></div>");
29
+
30
+ var calcOffset = function(dimensionPct) {
31
+ var w = beforeImg.width();
32
+ var h = beforeImg.height();
33
+ return {
34
+ w: w+"px",
35
+ h: h+"px",
36
+ cw: (dimensionPct*w)+"px",
37
+ ch: (dimensionPct*h)+"px"
38
+ };
39
+ };
40
+
41
+ var adjustContainer = function(offset) {
42
+ if (sliderOrientation === 'vertical') {
43
+ beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
44
+ }
45
+ else {
46
+ beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
47
+ }
48
+ container.css("height", offset.h);
49
+ };
50
+
51
+ var adjustSlider = function(pct) {
52
+ var offset = calcOffset(pct);
53
+ slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
54
+ adjustContainer(offset);
55
+ }
56
+
57
+ $(window).on("resize.twentytwenty", function(e) {
58
+ adjustSlider(sliderPct);
59
+ });
60
+
61
+ var offsetX = 0;
62
+ var imgWidth = 0;
63
+
64
+ slider.on("movestart", function(e) {
65
+ if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
66
+ e.preventDefault();
67
+ }
68
+ else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
69
+ e.preventDefault();
70
+ }
71
+ container.addClass("active");
72
+ offsetX = container.offset().left;
73
+ offsetY = container.offset().top;
74
+ imgWidth = beforeImg.width();
75
+ imgHeight = beforeImg.height();
76
+ });
77
+
78
+ slider.on("moveend", function(e) {
79
+ container.removeClass("active");
80
+ });
81
+
82
+ slider.on("move", function(e) {
83
+ if (container.hasClass("active")) {
84
+ sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
85
+ if (sliderPct < 0) {
86
+ sliderPct = 0;
87
+ }
88
+ if (sliderPct > 1) {
89
+ sliderPct = 1;
90
+ }
91
+ adjustSlider(sliderPct);
92
+ }
93
+ });
94
+
95
+ container.find("img").on("mousedown", function(event) {
96
+ event.preventDefault();
97
+ });
98
+
99
+ $(window).trigger("resize.twentytwenty");
100
+ });
101
+ };
102
+
103
+ })(jQuery);
@@ -0,0 +1,2 @@
1
+ //= require jquery.event.move
2
+ //= require jquery.twentytwenty
@@ -0,0 +1,473 @@
1
+ *,
2
+ *:before,
3
+ *:after {
4
+ -moz-box-sizing: border-box;
5
+ -webkit-box-sizing: border-box;
6
+ box-sizing: border-box; }
7
+
8
+ html,
9
+ body {
10
+ font-size: 100%; }
11
+
12
+ body {
13
+ background: white;
14
+ color: #222222;
15
+ padding: 0;
16
+ margin: 0;
17
+ font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
18
+ font-weight: normal;
19
+ font-style: normal;
20
+ line-height: 1;
21
+ position: relative;
22
+ cursor: default; }
23
+
24
+ a:hover {
25
+ cursor: pointer; }
26
+
27
+ a:focus {
28
+ outline: none; }
29
+
30
+ img,
31
+ object,
32
+ embed {
33
+ max-width: 100%;
34
+ height: auto; }
35
+
36
+ object,
37
+ embed {
38
+ height: 100%; }
39
+
40
+ img {
41
+ -ms-interpolation-mode: bicubic; }
42
+
43
+ #map_canvas img,
44
+ #map_canvas embed,
45
+ #map_canvas object,
46
+ .map_canvas img,
47
+ .map_canvas embed,
48
+ .map_canvas object {
49
+ max-width: none !important; }
50
+
51
+ .left {
52
+ float: left !important; }
53
+
54
+ .right {
55
+ float: right !important; }
56
+
57
+ .text-left {
58
+ text-align: left !important; }
59
+
60
+ .text-right {
61
+ text-align: right !important; }
62
+
63
+ .text-center {
64
+ text-align: center !important; }
65
+
66
+ .text-justify {
67
+ text-align: justify !important; }
68
+
69
+ .hide {
70
+ display: none; }
71
+
72
+ .antialiased {
73
+ -webkit-font-smoothing: antialiased; }
74
+
75
+ img {
76
+ display: inline-block;
77
+ vertical-align: middle; }
78
+
79
+ textarea {
80
+ height: auto;
81
+ min-height: 50px; }
82
+
83
+ select {
84
+ width: 100%; }
85
+
86
+ /* Grid HTML Classes */
87
+ .row {
88
+ width: 100%;
89
+ margin-left: auto;
90
+ margin-right: auto;
91
+ margin-top: 0;
92
+ margin-bottom: 0;
93
+ max-width: 62.5em;
94
+ *zoom: 1; }
95
+ .row:before, .row:after {
96
+ content: " ";
97
+ display: table; }
98
+ .row:after {
99
+ clear: both; }
100
+ .row.collapse .column,
101
+ .row.collapse .columns {
102
+ position: relative;
103
+ padding-left: 0;
104
+ padding-right: 0;
105
+ float: left; }
106
+ .row .row {
107
+ width: auto;
108
+ margin-left: -0.9375em;
109
+ margin-right: -0.9375em;
110
+ margin-top: 0;
111
+ margin-bottom: 0;
112
+ max-width: none;
113
+ *zoom: 1; }
114
+ .row .row:before, .row .row:after {
115
+ content: " ";
116
+ display: table; }
117
+ .row .row:after {
118
+ clear: both; }
119
+ .row .row.collapse {
120
+ width: auto;
121
+ margin: 0;
122
+ max-width: none;
123
+ *zoom: 1; }
124
+ .row .row.collapse:before, .row .row.collapse:after {
125
+ content: " ";
126
+ display: table; }
127
+ .row .row.collapse:after {
128
+ clear: both; }
129
+
130
+ .column,
131
+ .columns {
132
+ position: relative;
133
+ padding-left: 0.9375em;
134
+ padding-right: 0.9375em;
135
+ width: 100%;
136
+ float: left; }
137
+
138
+ @media only screen {
139
+ .column,
140
+ .columns {
141
+ position: relative;
142
+ padding-left: 0.9375em;
143
+ padding-right: 0.9375em;
144
+ float: left; }
145
+
146
+ .small-1 {
147
+ position: relative;
148
+ width: 8.33333%; }
149
+
150
+ .small-2 {
151
+ position: relative;
152
+ width: 16.66667%; }
153
+
154
+ .small-3 {
155
+ position: relative;
156
+ width: 25%; }
157
+
158
+ .small-4 {
159
+ position: relative;
160
+ width: 33.33333%; }
161
+
162
+ .small-5 {
163
+ position: relative;
164
+ width: 41.66667%; }
165
+
166
+ .small-6 {
167
+ position: relative;
168
+ width: 50%; }
169
+
170
+ .small-7 {
171
+ position: relative;
172
+ width: 58.33333%; }
173
+
174
+ .small-8 {
175
+ position: relative;
176
+ width: 66.66667%; }
177
+
178
+ .small-9 {
179
+ position: relative;
180
+ width: 75%; }
181
+
182
+ .small-10 {
183
+ position: relative;
184
+ width: 83.33333%; }
185
+
186
+ .small-11 {
187
+ position: relative;
188
+ width: 91.66667%; }
189
+
190
+ .small-12 {
191
+ position: relative;
192
+ width: 100%; }
193
+
194
+ .small-offset-0 {
195
+ position: relative;
196
+ margin-left: 0%; }
197
+
198
+ .small-offset-1 {
199
+ position: relative;
200
+ margin-left: 8.33333%; }
201
+
202
+ .small-offset-2 {
203
+ position: relative;
204
+ margin-left: 16.66667%; }
205
+
206
+ .small-offset-3 {
207
+ position: relative;
208
+ margin-left: 25%; }
209
+
210
+ .small-offset-4 {
211
+ position: relative;
212
+ margin-left: 33.33333%; }
213
+
214
+ .small-offset-5 {
215
+ position: relative;
216
+ margin-left: 41.66667%; }
217
+
218
+ .small-offset-6 {
219
+ position: relative;
220
+ margin-left: 50%; }
221
+
222
+ .small-offset-7 {
223
+ position: relative;
224
+ margin-left: 58.33333%; }
225
+
226
+ .small-offset-8 {
227
+ position: relative;
228
+ margin-left: 66.66667%; }
229
+
230
+ .small-offset-9 {
231
+ position: relative;
232
+ margin-left: 75%; }
233
+
234
+ .small-offset-10 {
235
+ position: relative;
236
+ margin-left: 83.33333%; }
237
+
238
+ [class*="column"] + [class*="column"]:last-child {
239
+ float: right; }
240
+
241
+ [class*="column"] + [class*="column"].end {
242
+ float: left; }
243
+
244
+ .column.small-centered,
245
+ .columns.small-centered {
246
+ position: relative;
247
+ margin-left: auto;
248
+ margin-right: auto;
249
+ float: none !important; } }
250
+ /* Styles for screens that are atleast 768px; */
251
+ @media only screen and (min-width: 768px) {
252
+ .large-1 {
253
+ position: relative;
254
+ width: 8.33333%; }
255
+
256
+ .large-2 {
257
+ position: relative;
258
+ width: 16.66667%; }
259
+
260
+ .large-3 {
261
+ position: relative;
262
+ width: 25%; }
263
+
264
+ .large-4 {
265
+ position: relative;
266
+ width: 33.33333%; }
267
+
268
+ .large-5 {
269
+ position: relative;
270
+ width: 41.66667%; }
271
+
272
+ .large-6 {
273
+ position: relative;
274
+ width: 50%; }
275
+
276
+ .large-7 {
277
+ position: relative;
278
+ width: 58.33333%; }
279
+
280
+ .large-8 {
281
+ position: relative;
282
+ width: 66.66667%; }
283
+
284
+ .large-9 {
285
+ position: relative;
286
+ width: 75%; }
287
+
288
+ .large-10 {
289
+ position: relative;
290
+ width: 83.33333%; }
291
+
292
+ .large-11 {
293
+ position: relative;
294
+ width: 91.66667%; }
295
+
296
+ .large-12 {
297
+ position: relative;
298
+ width: 100%; }
299
+
300
+ .row .large-offset-0 {
301
+ position: relative;
302
+ margin-left: 0%; }
303
+
304
+ .row .large-offset-1 {
305
+ position: relative;
306
+ margin-left: 8.33333%; }
307
+
308
+ .row .large-offset-2 {
309
+ position: relative;
310
+ margin-left: 16.66667%; }
311
+
312
+ .row .large-offset-3 {
313
+ position: relative;
314
+ margin-left: 25%; }
315
+
316
+ .row .large-offset-4 {
317
+ position: relative;
318
+ margin-left: 33.33333%; }
319
+
320
+ .row .large-offset-5 {
321
+ position: relative;
322
+ margin-left: 41.66667%; }
323
+
324
+ .row .large-offset-6 {
325
+ position: relative;
326
+ margin-left: 50%; }
327
+
328
+ .row .large-offset-7 {
329
+ position: relative;
330
+ margin-left: 58.33333%; }
331
+
332
+ .row .large-offset-8 {
333
+ position: relative;
334
+ margin-left: 66.66667%; }
335
+
336
+ .row .large-offset-9 {
337
+ position: relative;
338
+ margin-left: 75%; }
339
+
340
+ .row .large-offset-10 {
341
+ position: relative;
342
+ margin-left: 83.33333%; }
343
+
344
+ .row .large-offset-11 {
345
+ position: relative;
346
+ margin-left: 91.66667%; }
347
+
348
+ .push-1 {
349
+ position: relative;
350
+ left: 8.33333%;
351
+ right: auto; }
352
+
353
+ .pull-1 {
354
+ position: relative;
355
+ right: 8.33333%;
356
+ left: auto; }
357
+
358
+ .push-2 {
359
+ position: relative;
360
+ left: 16.66667%;
361
+ right: auto; }
362
+
363
+ .pull-2 {
364
+ position: relative;
365
+ right: 16.66667%;
366
+ left: auto; }
367
+
368
+ .push-3 {
369
+ position: relative;
370
+ left: 25%;
371
+ right: auto; }
372
+
373
+ .pull-3 {
374
+ position: relative;
375
+ right: 25%;
376
+ left: auto; }
377
+
378
+ .push-4 {
379
+ position: relative;
380
+ left: 33.33333%;
381
+ right: auto; }
382
+
383
+ .pull-4 {
384
+ position: relative;
385
+ right: 33.33333%;
386
+ left: auto; }
387
+
388
+ .push-5 {
389
+ position: relative;
390
+ left: 41.66667%;
391
+ right: auto; }
392
+
393
+ .pull-5 {
394
+ position: relative;
395
+ right: 41.66667%;
396
+ left: auto; }
397
+
398
+ .push-6 {
399
+ position: relative;
400
+ left: 50%;
401
+ right: auto; }
402
+
403
+ .pull-6 {
404
+ position: relative;
405
+ right: 50%;
406
+ left: auto; }
407
+
408
+ .push-7 {
409
+ position: relative;
410
+ left: 58.33333%;
411
+ right: auto; }
412
+
413
+ .pull-7 {
414
+ position: relative;
415
+ right: 58.33333%;
416
+ left: auto; }
417
+
418
+ .push-8 {
419
+ position: relative;
420
+ left: 66.66667%;
421
+ right: auto; }
422
+
423
+ .pull-8 {
424
+ position: relative;
425
+ right: 66.66667%;
426
+ left: auto; }
427
+
428
+ .push-9 {
429
+ position: relative;
430
+ left: 75%;
431
+ right: auto; }
432
+
433
+ .pull-9 {
434
+ position: relative;
435
+ right: 75%;
436
+ left: auto; }
437
+
438
+ .push-10 {
439
+ position: relative;
440
+ left: 83.33333%;
441
+ right: auto; }
442
+
443
+ .pull-10 {
444
+ position: relative;
445
+ right: 83.33333%;
446
+ left: auto; }
447
+
448
+ .push-11 {
449
+ position: relative;
450
+ left: 91.66667%;
451
+ right: auto; }
452
+
453
+ .pull-11 {
454
+ position: relative;
455
+ right: 91.66667%;
456
+ left: auto; }
457
+
458
+ .column.large-centered,
459
+ .columns.large-centered {
460
+ position: relative;
461
+ margin-left: auto;
462
+ margin-right: auto;
463
+ float: none !important; }
464
+
465
+ .column.large-uncentered,
466
+ .columns.large-uncentered {
467
+ margin-left: 0;
468
+ margin-right: 0;
469
+ float: left !important; }
470
+
471
+ .column.large-uncentered.opposite,
472
+ .columns.large-uncentered.opposite {
473
+ float: right !important; } }