semantic-ui-sass 1.12.3.0 → 2.0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/app/assets/javascripts/semantic-ui.js +1 -0
- data/app/assets/javascripts/semantic-ui/accordion.js +67 -53
- data/app/assets/javascripts/semantic-ui/api.js +395 -189
- data/app/assets/javascripts/semantic-ui/checkbox.js +322 -114
- data/app/assets/javascripts/semantic-ui/colorize.js +4 -2
- data/app/assets/javascripts/semantic-ui/dimmer.js +74 -50
- data/app/assets/javascripts/semantic-ui/dropdown.js +2046 -584
- data/app/assets/javascripts/semantic-ui/embed.js +662 -0
- data/app/assets/javascripts/semantic-ui/form.js +345 -163
- data/app/assets/javascripts/semantic-ui/modal.js +119 -90
- data/app/assets/javascripts/semantic-ui/nag.js +8 -9
- data/app/assets/javascripts/semantic-ui/popup.js +390 -228
- data/app/assets/javascripts/semantic-ui/progress.js +112 -103
- data/app/assets/javascripts/semantic-ui/rating.js +79 -55
- data/app/assets/javascripts/semantic-ui/search.js +305 -123
- data/app/assets/javascripts/semantic-ui/shape.js +94 -48
- data/app/assets/javascripts/semantic-ui/sidebar.js +84 -151
- data/app/assets/javascripts/semantic-ui/site.js +5 -5
- data/app/assets/javascripts/semantic-ui/state.js +4 -4
- data/app/assets/javascripts/semantic-ui/sticky.js +108 -35
- data/app/assets/javascripts/semantic-ui/tab.js +220 -125
- data/app/assets/javascripts/semantic-ui/transition.js +205 -171
- data/app/assets/javascripts/semantic-ui/visibility.js +220 -100
- data/app/assets/javascripts/semantic-ui/visit.js +6 -4
- data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +17 -16
- data/app/assets/stylesheets/semantic-ui/collections/_form.scss +223 -121
- data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +462 -448
- data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +949 -665
- data/app/assets/stylesheets/semantic-ui/collections/_message.scss +134 -92
- data/app/assets/stylesheets/semantic-ui/collections/_table.scss +270 -208
- data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
- data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1357 -521
- data/app/assets/stylesheets/semantic-ui/elements/_container.scss +125 -0
- data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +51 -31
- data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +3 -3
- data/app/assets/stylesheets/semantic-ui/elements/_header.scss +270 -144
- data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +241 -110
- data/app/assets/stylesheets/semantic-ui/elements/_image.scss +30 -16
- data/app/assets/stylesheets/semantic-ui/elements/_input.scss +88 -53
- data/app/assets/stylesheets/semantic-ui/elements/_label.scss +432 -281
- data/app/assets/stylesheets/semantic-ui/elements/_list.scss +172 -128
- data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +16 -14
- data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +15 -7
- data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +32 -13
- data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +329 -212
- data/app/assets/stylesheets/semantic-ui/elements/_step.scss +291 -99
- data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -2
- data/app/assets/stylesheets/semantic-ui/globals/_site.scss +19 -18
- data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +17 -18
- data/app/assets/stylesheets/semantic-ui/modules/_all.scss +1 -0
- data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +265 -161
- data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +29 -15
- data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +441 -156
- data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +168 -0
- data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +163 -85
- data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +8 -8
- data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +88 -23
- data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +185 -129
- data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +75 -60
- data/app/assets/stylesheets/semantic-ui/modules/_search.scss +99 -52
- data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +11 -11
- data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +16 -12
- data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +4 -4
- data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
- data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +31 -39
- data/app/assets/stylesheets/semantic-ui/views/_ad.scss +3 -3
- data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -0
- data/app/assets/stylesheets/semantic-ui/views/_card.scss +204 -162
- data/app/assets/stylesheets/semantic-ui/views/_comment.scss +6 -6
- data/app/assets/stylesheets/semantic-ui/views/_feed.scss +51 -26
- data/app/assets/stylesheets/semantic-ui/views/_item.scss +62 -36
- data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +265 -90
- data/lib/semantic/ui/sass/version.rb +2 -2
- data/semantic-ui-sass.gemspec +2 -2
- metadata +9 -6
@@ -1,9 +1,9 @@
|
|
1
1
|
/*!
|
2
|
-
* # Semantic UI
|
2
|
+
* # Semantic UI - Shape
|
3
3
|
* http://github.com/semantic-org/semantic-ui/
|
4
4
|
*
|
5
5
|
*
|
6
|
-
* Copyright
|
6
|
+
* Copyright 2015 Contributors
|
7
7
|
* Released under the MIT license
|
8
8
|
* http://opensource.org/licenses/MIT
|
9
9
|
*
|
@@ -37,8 +37,10 @@ $.fn.shape = function(parameters) {
|
|
37
37
|
$allModules
|
38
38
|
.each(function() {
|
39
39
|
var
|
40
|
-
moduleSelector
|
41
|
-
settings
|
40
|
+
moduleSelector = $allModules.selector || '',
|
41
|
+
settings = ( $.isPlainObject(parameters) )
|
42
|
+
? $.extend(true, {}, $.fn.shape.settings, parameters)
|
43
|
+
: $.extend({}, $.fn.shape.settings),
|
42
44
|
|
43
45
|
// internal aliases
|
44
46
|
namespace = settings.namespace,
|
@@ -100,7 +102,7 @@ $.fn.shape = function(parameters) {
|
|
100
102
|
repaint: function() {
|
101
103
|
module.verbose('Forcing repaint event');
|
102
104
|
var
|
103
|
-
shape = $sides
|
105
|
+
shape = $sides[0] || document.createElement('div'),
|
104
106
|
fakeAssignment = shape.offsetWidth
|
105
107
|
;
|
106
108
|
},
|
@@ -115,7 +117,7 @@ $.fn.shape = function(parameters) {
|
|
115
117
|
module.reset();
|
116
118
|
module.set.active();
|
117
119
|
};
|
118
|
-
settings.beforeChange.call($nextSide
|
120
|
+
settings.beforeChange.call($nextSide[0]);
|
119
121
|
if(module.get.transitionEvent()) {
|
120
122
|
module.verbose('Starting CSS animation');
|
121
123
|
$module
|
@@ -205,13 +207,29 @@ $.fn.shape = function(parameters) {
|
|
205
207
|
: duration
|
206
208
|
;
|
207
209
|
module.verbose('Setting animation duration', duration);
|
208
|
-
|
210
|
+
if(settings.duration || settings.duration === 0) {
|
211
|
+
$sides.add($side)
|
212
|
+
.css({
|
213
|
+
'-webkit-transition-duration': duration,
|
214
|
+
'-moz-transition-duration': duration,
|
215
|
+
'-ms-transition-duration': duration,
|
216
|
+
'-o-transition-duration': duration,
|
217
|
+
'transition-duration': duration
|
218
|
+
})
|
219
|
+
;
|
220
|
+
}
|
221
|
+
},
|
222
|
+
|
223
|
+
currentStageSize: function() {
|
224
|
+
var
|
225
|
+
$activeSide = $module.find('.' + settings.className.active),
|
226
|
+
width = $activeSide.outerWidth(true),
|
227
|
+
height = $activeSide.outerHeight(true)
|
228
|
+
;
|
229
|
+
$module
|
209
230
|
.css({
|
210
|
-
|
211
|
-
|
212
|
-
'-ms-transition-duration': duration,
|
213
|
-
'-o-transition-duration': duration,
|
214
|
-
'transition-duration': duration
|
231
|
+
width: width,
|
232
|
+
height: height
|
215
233
|
})
|
216
234
|
;
|
217
235
|
},
|
@@ -227,12 +245,13 @@ $.fn.shape = function(parameters) {
|
|
227
245
|
: $clone.find(selector.side).first(),
|
228
246
|
newSize = {}
|
229
247
|
;
|
248
|
+
module.set.currentStageSize();
|
230
249
|
$activeSide.removeClass(className.active);
|
231
250
|
$nextSide.addClass(className.active);
|
232
251
|
$clone.insertAfter($module);
|
233
252
|
newSize = {
|
234
|
-
width : $nextSide.outerWidth(),
|
235
|
-
height : $nextSide.outerHeight()
|
253
|
+
width : $nextSide.outerWidth(true),
|
254
|
+
height : $nextSide.outerHeight(true)
|
236
255
|
};
|
237
256
|
$clone.remove();
|
238
257
|
$module
|
@@ -260,7 +279,7 @@ $.fn.shape = function(parameters) {
|
|
260
279
|
$nextSide
|
261
280
|
.addClass(className.active)
|
262
281
|
;
|
263
|
-
settings.onChange.call($nextSide
|
282
|
+
settings.onChange.call($nextSide[0]);
|
264
283
|
module.set.defaultSide();
|
265
284
|
}
|
266
285
|
},
|
@@ -371,8 +390,8 @@ $.fn.shape = function(parameters) {
|
|
371
390
|
up: function() {
|
372
391
|
var
|
373
392
|
translate = {
|
374
|
-
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
375
|
-
z: -($activeSide.outerHeight() / 2)
|
393
|
+
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
394
|
+
z: -($activeSide.outerHeight(true) / 2)
|
376
395
|
}
|
377
396
|
;
|
378
397
|
return {
|
@@ -383,8 +402,8 @@ $.fn.shape = function(parameters) {
|
|
383
402
|
down: function() {
|
384
403
|
var
|
385
404
|
translate = {
|
386
|
-
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
387
|
-
z: -($activeSide.outerHeight() / 2)
|
405
|
+
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
406
|
+
z: -($activeSide.outerHeight(true) / 2)
|
388
407
|
}
|
389
408
|
;
|
390
409
|
return {
|
@@ -395,8 +414,8 @@ $.fn.shape = function(parameters) {
|
|
395
414
|
left: function() {
|
396
415
|
var
|
397
416
|
translate = {
|
398
|
-
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
|
399
|
-
z : -($activeSide.outerWidth() / 2)
|
417
|
+
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
|
418
|
+
z : -($activeSide.outerWidth(true) / 2)
|
400
419
|
}
|
401
420
|
;
|
402
421
|
return {
|
@@ -407,8 +426,8 @@ $.fn.shape = function(parameters) {
|
|
407
426
|
right: function() {
|
408
427
|
var
|
409
428
|
translate = {
|
410
|
-
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
|
411
|
-
z : -($activeSide.outerWidth() / 2)
|
429
|
+
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
|
430
|
+
z : -($activeSide.outerWidth(true) / 2)
|
412
431
|
}
|
413
432
|
;
|
414
433
|
return {
|
@@ -419,7 +438,7 @@ $.fn.shape = function(parameters) {
|
|
419
438
|
over: function() {
|
420
439
|
var
|
421
440
|
translate = {
|
422
|
-
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
|
441
|
+
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
|
423
442
|
}
|
424
443
|
;
|
425
444
|
return {
|
@@ -430,7 +449,7 @@ $.fn.shape = function(parameters) {
|
|
430
449
|
back: function() {
|
431
450
|
var
|
432
451
|
translate = {
|
433
|
-
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
|
452
|
+
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
|
434
453
|
}
|
435
454
|
;
|
436
455
|
return {
|
@@ -471,14 +490,19 @@ $.fn.shape = function(parameters) {
|
|
471
490
|
above: function() {
|
472
491
|
var
|
473
492
|
box = {
|
474
|
-
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
493
|
+
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
475
494
|
depth : {
|
476
|
-
active : ($nextSide.outerHeight() / 2),
|
477
|
-
next : ($activeSide.outerHeight() / 2)
|
495
|
+
active : ($nextSide.outerHeight(true) / 2),
|
496
|
+
next : ($activeSide.outerHeight(true) / 2)
|
478
497
|
}
|
479
498
|
}
|
480
499
|
;
|
481
500
|
module.verbose('Setting the initial animation position as above', $nextSide, box);
|
501
|
+
$sides
|
502
|
+
.css({
|
503
|
+
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
504
|
+
})
|
505
|
+
;
|
482
506
|
$activeSide
|
483
507
|
.css({
|
484
508
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
@@ -487,7 +511,6 @@ $.fn.shape = function(parameters) {
|
|
487
511
|
$nextSide
|
488
512
|
.addClass(className.animating)
|
489
513
|
.css({
|
490
|
-
'display' : 'block',
|
491
514
|
'top' : box.origin + 'px',
|
492
515
|
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
|
493
516
|
})
|
@@ -497,14 +520,19 @@ $.fn.shape = function(parameters) {
|
|
497
520
|
below: function() {
|
498
521
|
var
|
499
522
|
box = {
|
500
|
-
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
|
523
|
+
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
|
501
524
|
depth : {
|
502
|
-
active : ($nextSide.outerHeight() / 2),
|
503
|
-
next : ($activeSide.outerHeight() / 2)
|
525
|
+
active : ($nextSide.outerHeight(true) / 2),
|
526
|
+
next : ($activeSide.outerHeight(true) / 2)
|
504
527
|
}
|
505
528
|
}
|
506
529
|
;
|
507
530
|
module.verbose('Setting the initial animation position as below', $nextSide, box);
|
531
|
+
$sides
|
532
|
+
.css({
|
533
|
+
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
534
|
+
})
|
535
|
+
;
|
508
536
|
$activeSide
|
509
537
|
.css({
|
510
538
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
@@ -513,7 +541,6 @@ $.fn.shape = function(parameters) {
|
|
513
541
|
$nextSide
|
514
542
|
.addClass(className.animating)
|
515
543
|
.css({
|
516
|
-
'display' : 'block',
|
517
544
|
'top' : box.origin + 'px',
|
518
545
|
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
|
519
546
|
})
|
@@ -522,15 +549,24 @@ $.fn.shape = function(parameters) {
|
|
522
549
|
|
523
550
|
left: function() {
|
524
551
|
var
|
552
|
+
height = {
|
553
|
+
active : $activeSide.outerWidth(true),
|
554
|
+
next : $nextSide.outerWidth(true)
|
555
|
+
},
|
525
556
|
box = {
|
526
|
-
origin : ( (
|
557
|
+
origin : ( ( height.active - height.next ) / 2),
|
527
558
|
depth : {
|
528
|
-
active : (
|
529
|
-
next : (
|
559
|
+
active : (height.next / 2),
|
560
|
+
next : (height.active / 2)
|
530
561
|
}
|
531
562
|
}
|
532
563
|
;
|
533
564
|
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
565
|
+
$sides
|
566
|
+
.css({
|
567
|
+
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
568
|
+
})
|
569
|
+
;
|
534
570
|
$activeSide
|
535
571
|
.css({
|
536
572
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
@@ -539,7 +575,6 @@ $.fn.shape = function(parameters) {
|
|
539
575
|
$nextSide
|
540
576
|
.addClass(className.animating)
|
541
577
|
.css({
|
542
|
-
'display' : 'block',
|
543
578
|
'left' : box.origin + 'px',
|
544
579
|
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
|
545
580
|
})
|
@@ -548,15 +583,24 @@ $.fn.shape = function(parameters) {
|
|
548
583
|
|
549
584
|
right: function() {
|
550
585
|
var
|
586
|
+
height = {
|
587
|
+
active : $activeSide.outerWidth(true),
|
588
|
+
next : $nextSide.outerWidth(true)
|
589
|
+
},
|
551
590
|
box = {
|
552
|
-
origin : ( (
|
591
|
+
origin : ( ( height.active - height.next ) / 2),
|
553
592
|
depth : {
|
554
|
-
active : (
|
555
|
-
next : (
|
593
|
+
active : (height.next / 2),
|
594
|
+
next : (height.active / 2)
|
556
595
|
}
|
557
596
|
}
|
558
597
|
;
|
559
598
|
module.verbose('Setting the initial animation position as left', $nextSide, box);
|
599
|
+
$sides
|
600
|
+
.css({
|
601
|
+
'transform' : 'translateZ(-' + box.depth.active + 'px)'
|
602
|
+
})
|
603
|
+
;
|
560
604
|
$activeSide
|
561
605
|
.css({
|
562
606
|
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
|
@@ -565,7 +609,6 @@ $.fn.shape = function(parameters) {
|
|
565
609
|
$nextSide
|
566
610
|
.addClass(className.animating)
|
567
611
|
.css({
|
568
|
-
'display' : 'block',
|
569
612
|
'left' : box.origin + 'px',
|
570
613
|
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
|
571
614
|
})
|
@@ -574,11 +617,15 @@ $.fn.shape = function(parameters) {
|
|
574
617
|
|
575
618
|
behind: function() {
|
576
619
|
var
|
620
|
+
height = {
|
621
|
+
active : $activeSide.outerWidth(true),
|
622
|
+
next : $nextSide.outerWidth(true)
|
623
|
+
},
|
577
624
|
box = {
|
578
|
-
origin : ( (
|
625
|
+
origin : ( ( height.active - height.next ) / 2),
|
579
626
|
depth : {
|
580
|
-
active : (
|
581
|
-
next : (
|
627
|
+
active : (height.next / 2),
|
628
|
+
next : (height.active / 2)
|
582
629
|
}
|
583
630
|
}
|
584
631
|
;
|
@@ -591,7 +638,6 @@ $.fn.shape = function(parameters) {
|
|
591
638
|
$nextSide
|
592
639
|
.addClass(className.animating)
|
593
640
|
.css({
|
594
|
-
'display' : 'block',
|
595
641
|
'left' : box.origin + 'px',
|
596
642
|
'transform' : 'rotateY(-180deg)'
|
597
643
|
})
|
@@ -667,7 +713,7 @@ $.fn.shape = function(parameters) {
|
|
667
713
|
});
|
668
714
|
}
|
669
715
|
clearTimeout(module.performance.timer);
|
670
|
-
module.performance.timer = setTimeout(module.performance.display,
|
716
|
+
module.performance.timer = setTimeout(module.performance.display, 500);
|
671
717
|
},
|
672
718
|
display: function() {
|
673
719
|
var
|
@@ -786,7 +832,7 @@ $.fn.shape.settings = {
|
|
786
832
|
debug : false,
|
787
833
|
|
788
834
|
// verbose debug output
|
789
|
-
verbose :
|
835
|
+
verbose : false,
|
790
836
|
|
791
837
|
// performance data output
|
792
838
|
performance: true,
|
@@ -802,7 +848,7 @@ $.fn.shape.settings = {
|
|
802
848
|
allowRepeats: false,
|
803
849
|
|
804
850
|
// animation duration
|
805
|
-
duration :
|
851
|
+
duration : false,
|
806
852
|
|
807
853
|
// possible errors
|
808
854
|
error: {
|
@@ -1,9 +1,9 @@
|
|
1
1
|
/*!
|
2
|
-
* # Semantic UI
|
2
|
+
* # Semantic UI - Sidebar
|
3
3
|
* http://github.com/semantic-org/semantic-ui/
|
4
4
|
*
|
5
5
|
*
|
6
|
-
* Copyright
|
6
|
+
* Copyright 2015 Contributors
|
7
7
|
* Released under the MIT license
|
8
8
|
* http://opensource.org/licenses/MIT
|
9
9
|
*
|
@@ -83,12 +83,6 @@ $.fn.sidebar = function(parameters) {
|
|
83
83
|
|
84
84
|
transitionEvent = module.get.transitionEvent();
|
85
85
|
|
86
|
-
// cache on initialize
|
87
|
-
if( ( settings.useLegacy == 'auto' && module.is.legacy() ) || settings.useLegacy === true) {
|
88
|
-
settings.transition = 'overlay';
|
89
|
-
settings.useLegacy = true;
|
90
|
-
}
|
91
|
-
|
92
86
|
if(module.is.ios()) {
|
93
87
|
module.set.ios();
|
94
88
|
}
|
@@ -101,6 +95,10 @@ $.fn.sidebar = function(parameters) {
|
|
101
95
|
module.setup.layout();
|
102
96
|
}
|
103
97
|
|
98
|
+
requestAnimationFrame(function() {
|
99
|
+
module.setup.cache();
|
100
|
+
});
|
101
|
+
|
104
102
|
module.instantiate();
|
105
103
|
},
|
106
104
|
|
@@ -122,11 +120,13 @@ $.fn.sidebar = function(parameters) {
|
|
122
120
|
|
123
121
|
destroy: function() {
|
124
122
|
module.verbose('Destroying previous module for', $module);
|
125
|
-
module.remove.direction();
|
126
123
|
$module
|
127
124
|
.off(eventNamespace)
|
128
125
|
.removeData(moduleNamespace)
|
129
126
|
;
|
127
|
+
if(module.is.ios()) {
|
128
|
+
module.remove.ios();
|
129
|
+
}
|
130
130
|
// bound by uuid
|
131
131
|
$context.off(elementNamespace);
|
132
132
|
$window.off(elementNamespace);
|
@@ -171,7 +171,7 @@ $.fn.sidebar = function(parameters) {
|
|
171
171
|
module.verbose('Adding clickaway events to context', $context);
|
172
172
|
if(settings.closable) {
|
173
173
|
$context
|
174
|
-
.on('click'
|
174
|
+
.on('click' + elementNamespace, module.event.clickaway)
|
175
175
|
.on('touchend' + elementNamespace, module.event.clickaway)
|
176
176
|
;
|
177
177
|
}
|
@@ -206,10 +206,11 @@ $.fn.sidebar = function(parameters) {
|
|
206
206
|
},
|
207
207
|
|
208
208
|
add: {
|
209
|
-
|
209
|
+
inlineCSS: function() {
|
210
210
|
var
|
211
|
-
width = $module.outerWidth(),
|
212
|
-
height = $module.outerHeight(),
|
211
|
+
width = module.cache.width || $module.outerWidth(),
|
212
|
+
height = module.cache.height || $module.outerHeight(),
|
213
|
+
isRTL = module.is.rtl(),
|
213
214
|
direction = module.get.direction(),
|
214
215
|
distance = {
|
215
216
|
left : width,
|
@@ -219,13 +220,14 @@ $.fn.sidebar = function(parameters) {
|
|
219
220
|
},
|
220
221
|
style
|
221
222
|
;
|
222
|
-
|
223
|
+
|
224
|
+
if(isRTL){
|
223
225
|
module.verbose('RTL detected, flipping widths');
|
224
226
|
distance.left = -width;
|
225
227
|
distance.right = width;
|
226
228
|
}
|
227
229
|
|
228
|
-
style = '<style
|
230
|
+
style = '<style>';
|
229
231
|
|
230
232
|
if(direction === 'left' || direction === 'right') {
|
231
233
|
module.debug('Adding CSS rules for animation distance', width);
|
@@ -277,8 +279,9 @@ $.fn.sidebar = function(parameters) {
|
|
277
279
|
;
|
278
280
|
}
|
279
281
|
style += '</style>';
|
280
|
-
$
|
281
|
-
|
282
|
+
$style = $(style)
|
283
|
+
.appendTo($head)
|
284
|
+
;
|
282
285
|
module.debug('Adding sizing css to head', $style);
|
283
286
|
}
|
284
287
|
},
|
@@ -289,6 +292,7 @@ $.fn.sidebar = function(parameters) {
|
|
289
292
|
$sidebars = $context.children(selector.sidebar);
|
290
293
|
$pusher = $context.children(selector.pusher);
|
291
294
|
$fixed = $context.children(selector.fixed);
|
295
|
+
module.clear.cache();
|
292
296
|
},
|
293
297
|
|
294
298
|
refreshSidebars: function() {
|
@@ -298,13 +302,20 @@ $.fn.sidebar = function(parameters) {
|
|
298
302
|
|
299
303
|
repaint: function() {
|
300
304
|
module.verbose('Forcing repaint event');
|
301
|
-
element.style.display='none';
|
302
|
-
element.offsetHeight;
|
305
|
+
element.style.display = 'none';
|
306
|
+
var ignored = element.offsetHeight;
|
303
307
|
element.scrollTop = element.scrollTop;
|
304
|
-
element.style.display='';
|
308
|
+
element.style.display = '';
|
305
309
|
},
|
306
310
|
|
307
311
|
setup: {
|
312
|
+
cache: function() {
|
313
|
+
module.cache = {
|
314
|
+
width : $module.outerWidth(),
|
315
|
+
height : $module.outerHeight(),
|
316
|
+
rtl : ($module.css('direction') == 'rtl')
|
317
|
+
};
|
318
|
+
},
|
308
319
|
layout: function() {
|
309
320
|
if( $context.children(selector.pusher).length === 0 ) {
|
310
321
|
module.debug('Adding wrapper element for sidebar');
|
@@ -324,6 +335,7 @@ $.fn.sidebar = function(parameters) {
|
|
324
335
|
$module.detach().prependTo($context);
|
325
336
|
module.refresh();
|
326
337
|
}
|
338
|
+
module.clear.cache();
|
327
339
|
module.set.pushable();
|
328
340
|
module.set.direction();
|
329
341
|
}
|
@@ -349,11 +361,6 @@ $.fn.sidebar = function(parameters) {
|
|
349
361
|
},
|
350
362
|
|
351
363
|
show: function(callback) {
|
352
|
-
var
|
353
|
-
animateMethod = (settings.useLegacy === true)
|
354
|
-
? module.legacyPushPage
|
355
|
-
: module.pushPage
|
356
|
-
;
|
357
364
|
callback = $.isFunction(callback)
|
358
365
|
? callback
|
359
366
|
: function(){}
|
@@ -381,7 +388,7 @@ $.fn.sidebar = function(parameters) {
|
|
381
388
|
settings.transition = 'overlay';
|
382
389
|
}
|
383
390
|
}
|
384
|
-
|
391
|
+
module.pushPage(function() {
|
385
392
|
callback.call(element);
|
386
393
|
settings.onShow.call(element);
|
387
394
|
});
|
@@ -394,11 +401,6 @@ $.fn.sidebar = function(parameters) {
|
|
394
401
|
},
|
395
402
|
|
396
403
|
hide: function(callback) {
|
397
|
-
var
|
398
|
-
animateMethod = (settings.useLegacy === true)
|
399
|
-
? module.legacyPullPage
|
400
|
-
: module.pullPage
|
401
|
-
;
|
402
404
|
callback = $.isFunction(callback)
|
403
405
|
? callback
|
404
406
|
: function(){}
|
@@ -406,7 +408,7 @@ $.fn.sidebar = function(parameters) {
|
|
406
408
|
if(module.is.visible() || module.is.animating()) {
|
407
409
|
module.debug('Hiding sidebar', callback);
|
408
410
|
module.refreshSidebars();
|
409
|
-
|
411
|
+
module.pullPage(function() {
|
410
412
|
callback.call(element);
|
411
413
|
settings.onHidden.call(element);
|
412
414
|
});
|
@@ -455,12 +457,11 @@ $.fn.sidebar = function(parameters) {
|
|
455
457
|
pushPage: function(callback) {
|
456
458
|
var
|
457
459
|
transition = module.get.transition(),
|
458
|
-
$transition = (transition
|
459
|
-
? $
|
460
|
-
:
|
461
|
-
? $module
|
462
|
-
: $pusher,
|
460
|
+
$transition = (transition === 'overlay' || module.othersActive())
|
461
|
+
? $module
|
462
|
+
: $pusher,
|
463
463
|
animate,
|
464
|
+
dim,
|
464
465
|
transitionEnd
|
465
466
|
;
|
466
467
|
callback = $.isFunction(callback)
|
@@ -474,14 +475,12 @@ $.fn.sidebar = function(parameters) {
|
|
474
475
|
module.repaint();
|
475
476
|
animate = function() {
|
476
477
|
module.bind.clickaway();
|
477
|
-
module.add.
|
478
|
+
module.add.inlineCSS();
|
478
479
|
module.set.animating();
|
479
480
|
module.set.visible();
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
}
|
484
|
-
}
|
481
|
+
};
|
482
|
+
dim = function() {
|
483
|
+
module.set.dimmed();
|
485
484
|
};
|
486
485
|
transitionEnd = function(event) {
|
487
486
|
if( event.target == $transition[0] ) {
|
@@ -494,16 +493,17 @@ $.fn.sidebar = function(parameters) {
|
|
494
493
|
$transition.off(transitionEvent + elementNamespace);
|
495
494
|
$transition.on(transitionEvent + elementNamespace, transitionEnd);
|
496
495
|
requestAnimationFrame(animate);
|
496
|
+
if(settings.dimPage && !module.othersVisible()) {
|
497
|
+
requestAnimationFrame(dim);
|
498
|
+
}
|
497
499
|
},
|
498
500
|
|
499
501
|
pullPage: function(callback) {
|
500
502
|
var
|
501
503
|
transition = module.get.transition(),
|
502
|
-
$transition = (transition == '
|
503
|
-
? $
|
504
|
-
:
|
505
|
-
? $module
|
506
|
-
: $pusher,
|
504
|
+
$transition = (transition == 'overlay' || module.othersActive())
|
505
|
+
? $module
|
506
|
+
: $pusher,
|
507
507
|
animate,
|
508
508
|
transitionEnd
|
509
509
|
;
|
@@ -513,11 +513,11 @@ $.fn.sidebar = function(parameters) {
|
|
513
513
|
;
|
514
514
|
module.verbose('Removing context push state', module.get.direction());
|
515
515
|
|
516
|
-
module.set.transition(transition);
|
517
516
|
module.unbind.clickaway();
|
518
517
|
module.unbind.scrollLock();
|
519
518
|
|
520
519
|
animate = function() {
|
520
|
+
module.set.transition(transition);
|
521
521
|
module.set.animating();
|
522
522
|
module.remove.visible();
|
523
523
|
if(settings.dimPage && !module.othersVisible()) {
|
@@ -529,7 +529,7 @@ $.fn.sidebar = function(parameters) {
|
|
529
529
|
$transition.off(transitionEvent + elementNamespace, transitionEnd);
|
530
530
|
module.remove.animating();
|
531
531
|
module.remove.transition();
|
532
|
-
module.remove.
|
532
|
+
module.remove.inlineCSS();
|
533
533
|
if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
|
534
534
|
module.scrollBack();
|
535
535
|
}
|
@@ -541,62 +541,6 @@ $.fn.sidebar = function(parameters) {
|
|
541
541
|
requestAnimationFrame(animate);
|
542
542
|
},
|
543
543
|
|
544
|
-
legacyPushPage: function(callback) {
|
545
|
-
var
|
546
|
-
distance = $module.width(),
|
547
|
-
direction = module.get.direction(),
|
548
|
-
properties = {}
|
549
|
-
;
|
550
|
-
distance = distance || $module.width();
|
551
|
-
callback = $.isFunction(callback)
|
552
|
-
? callback
|
553
|
-
: function(){}
|
554
|
-
;
|
555
|
-
properties[direction] = distance;
|
556
|
-
module.debug('Using javascript to push context', properties);
|
557
|
-
module.set.visible();
|
558
|
-
module.set.transition();
|
559
|
-
module.set.animating();
|
560
|
-
if(settings.dimPage) {
|
561
|
-
$pusher.addClass(className.dimmed);
|
562
|
-
}
|
563
|
-
$context
|
564
|
-
.css('position', 'relative')
|
565
|
-
.animate(properties, settings.duration, settings.easing, function() {
|
566
|
-
module.remove.animating();
|
567
|
-
module.bind.clickaway();
|
568
|
-
callback.call(element);
|
569
|
-
})
|
570
|
-
;
|
571
|
-
},
|
572
|
-
legacyPullPage: function(callback) {
|
573
|
-
var
|
574
|
-
distance = 0,
|
575
|
-
direction = module.get.direction(),
|
576
|
-
properties = {}
|
577
|
-
;
|
578
|
-
distance = distance || $module.width();
|
579
|
-
callback = $.isFunction(callback)
|
580
|
-
? callback
|
581
|
-
: function(){}
|
582
|
-
;
|
583
|
-
properties[direction] = '0px';
|
584
|
-
module.debug('Using javascript to pull context', properties);
|
585
|
-
module.unbind.clickaway();
|
586
|
-
module.set.animating();
|
587
|
-
module.remove.visible();
|
588
|
-
if(settings.dimPage && !module.othersActive()) {
|
589
|
-
$pusher.removeClass(className.dimmed);
|
590
|
-
}
|
591
|
-
$context
|
592
|
-
.css('position', 'relative')
|
593
|
-
.animate(properties, settings.duration, settings.easing, function() {
|
594
|
-
module.remove.animating();
|
595
|
-
callback.call(element);
|
596
|
-
})
|
597
|
-
;
|
598
|
-
},
|
599
|
-
|
600
544
|
scrollToTop: function() {
|
601
545
|
module.verbose('Scrolling to top of page to avoid animation issues');
|
602
546
|
currentScroll = $(window).scrollTop();
|
@@ -609,8 +553,16 @@ $.fn.sidebar = function(parameters) {
|
|
609
553
|
window.scrollTo(0, currentScroll);
|
610
554
|
},
|
611
555
|
|
556
|
+
clear: {
|
557
|
+
cache: function() {
|
558
|
+
module.verbose('Clearing cached dimensions');
|
559
|
+
module.cache = {};
|
560
|
+
}
|
561
|
+
},
|
562
|
+
|
612
563
|
set: {
|
613
|
-
|
564
|
+
|
565
|
+
// ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios
|
614
566
|
ios: function() {
|
615
567
|
$html.addClass(className.ios);
|
616
568
|
},
|
@@ -623,6 +575,11 @@ $.fn.sidebar = function(parameters) {
|
|
623
575
|
$context.addClass(className.pushable);
|
624
576
|
},
|
625
577
|
|
578
|
+
// pusher
|
579
|
+
dimmed: function() {
|
580
|
+
$pusher.addClass(className.dimmed);
|
581
|
+
},
|
582
|
+
|
626
583
|
// sidebar
|
627
584
|
active: function() {
|
628
585
|
$module.addClass(className.active);
|
@@ -647,13 +604,18 @@ $.fn.sidebar = function(parameters) {
|
|
647
604
|
},
|
648
605
|
remove: {
|
649
606
|
|
650
|
-
|
651
|
-
module.debug('Removing
|
607
|
+
inlineCSS: function() {
|
608
|
+
module.debug('Removing inline css styles', $style);
|
652
609
|
if($style && $style.length > 0) {
|
653
610
|
$style.remove();
|
654
611
|
}
|
655
612
|
},
|
656
613
|
|
614
|
+
// ios scroll on html not document
|
615
|
+
ios: function() {
|
616
|
+
$html.removeClass(className.ios);
|
617
|
+
},
|
618
|
+
|
657
619
|
// context
|
658
620
|
pushed: function() {
|
659
621
|
$context.removeClass(className.pushed);
|
@@ -743,36 +705,13 @@ $.fn.sidebar = function(parameters) {
|
|
743
705
|
return (isIE11 || isIE);
|
744
706
|
},
|
745
707
|
|
746
|
-
legacy: function() {
|
747
|
-
var
|
748
|
-
element = document.createElement('div'),
|
749
|
-
transforms = {
|
750
|
-
'webkitTransform' :'-webkit-transform',
|
751
|
-
'OTransform' :'-o-transform',
|
752
|
-
'msTransform' :'-ms-transform',
|
753
|
-
'MozTransform' :'-moz-transform',
|
754
|
-
'transform' :'transform'
|
755
|
-
},
|
756
|
-
has3D
|
757
|
-
;
|
758
|
-
|
759
|
-
// Add it to the body to get the computed style.
|
760
|
-
document.body.insertBefore(element, null);
|
761
|
-
for (var transform in transforms) {
|
762
|
-
if (element.style[transform] !== undefined) {
|
763
|
-
element.style[transform] = "translate3d(1px,1px,1px)";
|
764
|
-
has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]);
|
765
|
-
}
|
766
|
-
}
|
767
|
-
document.body.removeChild(element);
|
768
|
-
return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
|
769
|
-
},
|
770
708
|
ios: function() {
|
771
709
|
var
|
772
|
-
userAgent
|
773
|
-
isIOS
|
710
|
+
userAgent = navigator.userAgent,
|
711
|
+
isIOS = userAgent.match(regExp.ios),
|
712
|
+
isMobileChrome = userAgent.match(regExp.mobileChrome)
|
774
713
|
;
|
775
|
-
if(isIOS) {
|
714
|
+
if(isIOS && !isMobileChrome) {
|
776
715
|
module.verbose('Browser was found to be iOS', userAgent);
|
777
716
|
return true;
|
778
717
|
}
|
@@ -814,7 +753,10 @@ $.fn.sidebar = function(parameters) {
|
|
814
753
|
return $context.hasClass(className.animating);
|
815
754
|
},
|
816
755
|
rtl: function () {
|
817
|
-
|
756
|
+
if(module.cache.rtl === undefined) {
|
757
|
+
module.cache.rtl = ($module.css('direction') == 'rtl');
|
758
|
+
}
|
759
|
+
return module.cache.rtl;
|
818
760
|
}
|
819
761
|
},
|
820
762
|
|
@@ -887,7 +829,7 @@ $.fn.sidebar = function(parameters) {
|
|
887
829
|
});
|
888
830
|
}
|
889
831
|
clearTimeout(module.performance.timer);
|
890
|
-
module.performance.timer = setTimeout(module.performance.display,
|
832
|
+
module.performance.timer = setTimeout(module.performance.display, 500);
|
891
833
|
},
|
892
834
|
display: function() {
|
893
835
|
var
|
@@ -1001,7 +943,7 @@ $.fn.sidebar.settings = {
|
|
1001
943
|
namespace : 'sidebar',
|
1002
944
|
|
1003
945
|
debug : false,
|
1004
|
-
verbose :
|
946
|
+
verbose : false,
|
1005
947
|
performance : true,
|
1006
948
|
|
1007
949
|
transition : 'auto',
|
@@ -1030,9 +972,7 @@ $.fn.sidebar.settings = {
|
|
1030
972
|
returnScroll : false,
|
1031
973
|
delaySetup : false,
|
1032
974
|
|
1033
|
-
useLegacy : 'auto',
|
1034
975
|
duration : 500,
|
1035
|
-
easing : 'easeInOutQuint',
|
1036
976
|
|
1037
977
|
onChange : function(){},
|
1038
978
|
onShow : function(){},
|
@@ -1063,8 +1003,9 @@ $.fn.sidebar.settings = {
|
|
1063
1003
|
},
|
1064
1004
|
|
1065
1005
|
regExp: {
|
1066
|
-
ios
|
1067
|
-
|
1006
|
+
ios : /(iPad|iPhone|iPod)/g,
|
1007
|
+
mobileChrome : /(CriOS)/g,
|
1008
|
+
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
|
1068
1009
|
},
|
1069
1010
|
|
1070
1011
|
error : {
|
@@ -1077,13 +1018,5 @@ $.fn.sidebar.settings = {
|
|
1077
1018
|
|
1078
1019
|
};
|
1079
1020
|
|
1080
|
-
// Adds easing
|
1081
|
-
$.extend( $.easing, {
|
1082
|
-
easeInOutQuint: function (x, t, b, c, d) {
|
1083
|
-
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
1084
|
-
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
1085
|
-
}
|
1086
|
-
});
|
1087
|
-
|
1088
1021
|
|
1089
1022
|
})( jQuery, window , document );
|