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.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/javascripts/semantic-ui.js +1 -0
  4. data/app/assets/javascripts/semantic-ui/accordion.js +67 -53
  5. data/app/assets/javascripts/semantic-ui/api.js +395 -189
  6. data/app/assets/javascripts/semantic-ui/checkbox.js +322 -114
  7. data/app/assets/javascripts/semantic-ui/colorize.js +4 -2
  8. data/app/assets/javascripts/semantic-ui/dimmer.js +74 -50
  9. data/app/assets/javascripts/semantic-ui/dropdown.js +2046 -584
  10. data/app/assets/javascripts/semantic-ui/embed.js +662 -0
  11. data/app/assets/javascripts/semantic-ui/form.js +345 -163
  12. data/app/assets/javascripts/semantic-ui/modal.js +119 -90
  13. data/app/assets/javascripts/semantic-ui/nag.js +8 -9
  14. data/app/assets/javascripts/semantic-ui/popup.js +390 -228
  15. data/app/assets/javascripts/semantic-ui/progress.js +112 -103
  16. data/app/assets/javascripts/semantic-ui/rating.js +79 -55
  17. data/app/assets/javascripts/semantic-ui/search.js +305 -123
  18. data/app/assets/javascripts/semantic-ui/shape.js +94 -48
  19. data/app/assets/javascripts/semantic-ui/sidebar.js +84 -151
  20. data/app/assets/javascripts/semantic-ui/site.js +5 -5
  21. data/app/assets/javascripts/semantic-ui/state.js +4 -4
  22. data/app/assets/javascripts/semantic-ui/sticky.js +108 -35
  23. data/app/assets/javascripts/semantic-ui/tab.js +220 -125
  24. data/app/assets/javascripts/semantic-ui/transition.js +205 -171
  25. data/app/assets/javascripts/semantic-ui/visibility.js +220 -100
  26. data/app/assets/javascripts/semantic-ui/visit.js +6 -4
  27. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +17 -16
  28. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +223 -121
  29. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +462 -448
  30. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +949 -665
  31. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +134 -92
  32. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +270 -208
  33. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
  34. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1357 -521
  35. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +125 -0
  36. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +51 -31
  37. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +3 -3
  38. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +270 -144
  39. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +241 -110
  40. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +30 -16
  41. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +88 -53
  42. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +432 -281
  43. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +172 -128
  44. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +16 -14
  45. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +15 -7
  46. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +32 -13
  47. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +329 -212
  48. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +291 -99
  49. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -2
  50. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +19 -18
  51. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +17 -18
  52. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +1 -0
  53. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +265 -161
  54. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +29 -15
  55. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +441 -156
  56. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +168 -0
  57. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +163 -85
  58. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +8 -8
  59. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +88 -23
  60. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +185 -129
  61. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +75 -60
  62. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +99 -52
  63. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +11 -11
  64. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +16 -12
  65. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +4 -4
  66. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +3 -3
  67. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +31 -39
  68. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +3 -3
  69. data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -0
  70. data/app/assets/stylesheets/semantic-ui/views/_card.scss +204 -162
  71. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +6 -6
  72. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +51 -26
  73. data/app/assets/stylesheets/semantic-ui/views/_item.scss +62 -36
  74. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +265 -90
  75. data/lib/semantic/ui/sass/version.rb +2 -2
  76. data/semantic-ui-sass.gemspec +2 -2
  77. metadata +9 -6
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * # Semantic UI 1.12.3 - Shape
2
+ * # Semantic UI - Shape
3
3
  * http://github.com/semantic-org/semantic-ui/
4
4
  *
5
5
  *
6
- * Copyright 2014 Contributors
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 = $allModules.selector || '',
41
- settings = $.extend(true, {}, $.fn.shape.settings, parameters),
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.get(0) || document.createElement('div'),
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.get());
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
- $sides.add($side)
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
- '-webkit-transition-duration': duration,
211
- '-moz-transition-duration': duration,
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.get());
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 : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
557
+ origin : ( ( height.active - height.next ) / 2),
527
558
  depth : {
528
- active : ($nextSide.outerWidth() / 2),
529
- next : ($activeSide.outerWidth() / 2)
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 : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
591
+ origin : ( ( height.active - height.next ) / 2),
553
592
  depth : {
554
- active : ($nextSide.outerWidth() / 2),
555
- next : ($activeSide.outerWidth() / 2)
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 : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
625
+ origin : ( ( height.active - height.next ) / 2),
579
626
  depth : {
580
- active : ($nextSide.outerWidth() / 2),
581
- next : ($activeSide.outerWidth() / 2)
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, 100);
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 : true,
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 : 700,
851
+ duration : false,
806
852
 
807
853
  // possible errors
808
854
  error: {
@@ -1,9 +1,9 @@
1
1
  /*!
2
- * # Semantic UI 1.12.3 - Sidebar
2
+ * # Semantic UI - Sidebar
3
3
  * http://github.com/semantic-org/semantic-ui/
4
4
  *
5
5
  *
6
- * Copyright 2014 Contributors
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' + elementNamespace, module.event.clickaway)
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
- bodyCSS: function() {
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
- if( module.is.rtl() ){
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 title="' + namespace + '">';
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
- $head.append(style);
281
- $style = $('style[title=' + namespace + ']');
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
- animateMethod(function() {
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
- animateMethod(function() {
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 == 'safe')
459
- ? $context
460
- : (transition === 'overlay' || module.othersActive())
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.bodyCSS();
478
+ module.add.inlineCSS();
478
479
  module.set.animating();
479
480
  module.set.visible();
480
- if(!module.othersVisible()) {
481
- if(settings.dimPage) {
482
- $pusher.addClass(className.dimmed);
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 == 'safe')
503
- ? $context
504
- : (transition == 'overlay' || module.othersActive())
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.bodyCSS();
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
- // html
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
- bodyCSS: function() {
651
- module.debug('Removing body css styles', $style);
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 = navigator.userAgent,
773
- isIOS = userAgent.match(regExp.ios)
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
- return $module.css('direction') == 'rtl';
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, 100);
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 : true,
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 : /(iPad|iPhone|iPod)/g,
1067
- 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
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 );