fomantic-ui-sass 2.7.8 → 2.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/app/assets/javascripts/semantic-ui/api.js +1 -1
  4. data/app/assets/javascripts/semantic-ui/calendar.js +41 -18
  5. data/app/assets/javascripts/semantic-ui/dropdown.js +58 -33
  6. data/app/assets/javascripts/semantic-ui/form.js +9 -4
  7. data/app/assets/javascripts/semantic-ui/modal.js +96 -33
  8. data/app/assets/javascripts/semantic-ui/popup.js +8 -8
  9. data/app/assets/javascripts/semantic-ui/progress.js +10 -8
  10. data/app/assets/javascripts/semantic-ui/rating.js +35 -6
  11. data/app/assets/javascripts/semantic-ui/sidebar.js +2 -3
  12. data/app/assets/javascripts/semantic-ui/slider.js +78 -29
  13. data/app/assets/javascripts/semantic-ui/tab.js +1 -1
  14. data/app/assets/javascripts/semantic-ui/toast.js +395 -121
  15. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +3 -3
  16. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +741 -143
  17. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +35 -35
  18. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +73 -117
  19. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +11 -11
  20. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +976 -191
  21. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +1 -0
  22. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +51 -81
  23. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +12 -12
  24. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +35 -14
  25. data/app/assets/stylesheets/semantic-ui/elements/_emoji.scss +12312 -0
  26. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +111 -66
  27. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +70 -31
  28. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +28 -28
  29. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +218 -69
  30. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +20 -20
  31. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +52 -51
  32. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +85 -91
  33. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +8 -8
  34. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +11 -11
  35. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +31 -10
  36. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +38 -38
  37. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +16 -17
  38. data/app/assets/stylesheets/semantic-ui/elements/_text.scss +3 -3
  39. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +6 -6
  40. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +2 -2
  41. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +14 -124
  42. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +21 -21
  43. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +181 -110
  44. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +12 -12
  45. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +121 -30
  46. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +71 -72
  47. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +44 -26
  48. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +246 -21
  49. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +16 -13
  50. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +2 -2
  51. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +12 -14
  52. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +20 -23
  53. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +2 -2
  54. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +542 -155
  55. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +16 -16
  56. data/app/assets/stylesheets/semantic-ui/views/_card.scss +42 -17
  57. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +9 -9
  58. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +20 -5
  59. data/app/assets/stylesheets/semantic-ui/views/_item.scss +33 -12
  60. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +60 -46
  61. data/lib/fomantic/ui/sass/version.rb +2 -2
  62. metadata +2 -1
@@ -318,8 +318,7 @@ $.fn.sidebar = function(parameters) {
318
318
  cache: function() {
319
319
  module.cache = {
320
320
  width : $module.outerWidth(),
321
- height : $module.outerHeight(),
322
- rtl : ($module.css('direction') == 'rtl')
321
+ height : $module.outerHeight()
323
322
  };
324
323
  },
325
324
  layout: function() {
@@ -761,7 +760,7 @@ $.fn.sidebar = function(parameters) {
761
760
  },
762
761
  rtl: function () {
763
762
  if(module.cache.rtl === undefined) {
764
- module.cache.rtl = ($module.css('direction') == 'rtl');
763
+ module.cache.rtl = $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl';
765
764
  }
766
765
  return module.cache.rtl;
767
766
  }
@@ -89,6 +89,8 @@ $.fn.slider = function(parameters) {
89
89
  isTouch,
90
90
  gapRatio = 1,
91
91
 
92
+ initialPosition,
93
+ initialLoad,
92
94
  module
93
95
  ;
94
96
 
@@ -96,6 +98,7 @@ $.fn.slider = function(parameters) {
96
98
 
97
99
  initialize: function() {
98
100
  module.debug('Initializing slider', settings);
101
+ initialLoad = true;
99
102
 
100
103
  currentRange += 1;
101
104
  documentEventID = currentRange;
@@ -111,6 +114,7 @@ $.fn.slider = function(parameters) {
111
114
  module.read.metadata();
112
115
  module.read.settings();
113
116
 
117
+ initialLoad = false;
114
118
  module.instantiate();
115
119
  },
116
120
 
@@ -313,31 +317,52 @@ $.fn.slider = function(parameters) {
313
317
  },
314
318
 
315
319
  event: {
316
- down: function(event, originalEvent) {
320
+ down: function(event) {
317
321
  event.preventDefault();
318
322
  if(module.is.range()) {
319
323
  var
320
- eventPos = module.determine.eventPos(event, originalEvent),
324
+ eventPos = module.determine.eventPos(event),
321
325
  newPos = module.determine.pos(eventPos)
322
326
  ;
323
- $currThumb = module.determine.closestThumb(newPos);
327
+ // Special handling if range mode and both thumbs have the same value
328
+ if(module.is.range() && settings.preventCrossover && module.thumbVal === module.secondThumbVal) {
329
+ initialPosition = newPos;
330
+ $currThumb = undefined;
331
+ } else {
332
+ $currThumb = module.determine.closestThumb(newPos);
333
+ }
324
334
  }
325
335
  if(!module.is.disabled()) {
326
336
  module.bind.slidingEvents();
327
337
  }
328
338
  },
329
- move: function(event, originalEvent) {
339
+ move: function(event) {
330
340
  event.preventDefault();
331
- var value = module.determine.valueFromEvent(event, originalEvent);
341
+ var value = module.determine.valueFromEvent(event);
342
+ if($currThumb === undefined) {
343
+ var
344
+ eventPos = module.determine.eventPos(event),
345
+ newPos = module.determine.pos(eventPos)
346
+ ;
347
+ $currThumb = initialPosition > newPos ? $thumb : $secondThumb;
348
+ }
332
349
  if(module.get.step() == 0 || module.is.smooth()) {
333
350
  var
334
351
  thumbVal = module.thumbVal,
335
352
  secondThumbVal = module.secondThumbVal,
336
- thumbSmoothVal = module.determine.smoothValueFromEvent(event, originalEvent)
353
+ thumbSmoothVal = module.determine.smoothValueFromEvent(event)
337
354
  ;
338
355
  if(!$currThumb.hasClass('second')) {
356
+ if(settings.preventCrossover) {
357
+ value = Math.min(secondThumbVal, value);
358
+ thumbSmoothVal = Math.min(secondThumbVal, thumbSmoothVal);
359
+ }
339
360
  thumbVal = value;
340
361
  } else {
362
+ if(settings.preventCrossover) {
363
+ value = Math.max(thumbVal, value);
364
+ thumbSmoothVal = Math.max(thumbVal, thumbSmoothVal);
365
+ }
341
366
  secondThumbVal = value;
342
367
  }
343
368
  value = Math.abs(thumbVal - (secondThumbVal || 0));
@@ -349,13 +374,16 @@ $.fn.slider = function(parameters) {
349
374
  });
350
375
  }
351
376
  },
352
- up: function(event, originalEvent) {
377
+ up: function(event) {
353
378
  event.preventDefault();
354
- var value = module.determine.valueFromEvent(event, originalEvent);
379
+ var value = module.determine.valueFromEvent(event);
355
380
  module.set.value(value);
356
381
  module.unbind.slidingEvents();
357
382
  },
358
383
  keydown: function(event, first) {
384
+ if(module.is.range() && settings.preventCrossover && module.thumbVal === module.secondThumbVal) {
385
+ $currThumb = undefined;
386
+ }
359
387
  if(module.is.focused()) {
360
388
  $(document).trigger(event);
361
389
  }
@@ -574,7 +602,7 @@ $.fn.slider = function(parameters) {
574
602
  return value;
575
603
  },
576
604
  currentThumbValue: function() {
577
- return $currThumb.hasClass('second') ? module.secondThumbVal : module.thumbVal;
605
+ return $currThumb !== undefined && $currThumb.hasClass('second') ? module.secondThumbVal : module.thumbVal;
578
606
  },
579
607
  thumbValue: function(which) {
580
608
  switch(which) {
@@ -615,22 +643,23 @@ $.fn.slider = function(parameters) {
615
643
  if( settings.autoAdjustLabels ) {
616
644
  var
617
645
  numLabels = module.get.numLabels(),
646
+ trackLength = module.get.trackLength(),
618
647
  gapCounter = 1
619
648
  ;
620
649
 
621
650
  // While the distance between two labels is too short,
622
651
  // we divide the number of labels at each iteration
623
652
  // and apply only if the modulo of the operation is an odd number.
624
- while ((module.get.trackLength() / numLabels) * gapCounter < settings.labelDistance) {
625
- if( !(numLabels % gapCounter) ) {
626
- gapRatio = gapCounter;
653
+ if(trackLength>0){
654
+ while ((trackLength / numLabels) * gapCounter < settings.labelDistance) {
655
+ if( !(numLabels % gapCounter) ) {
656
+ gapRatio = gapCounter;
657
+ }
658
+ gapCounter += 1;
627
659
  }
628
- gapCounter += 1;
629
660
  }
630
- return gapRatio;
631
- } else {
632
- return 1;
633
661
  }
662
+ return gapRatio;
634
663
  }
635
664
  },
636
665
 
@@ -650,6 +679,9 @@ $.fn.slider = function(parameters) {
650
679
  secondThumbPos = parseFloat(module.determine.thumbPos($secondThumb)),
651
680
  secondThumbDelta = Math.abs(eventPos - secondThumbPos)
652
681
  ;
682
+ if(thumbDelta === secondThumbDelta && module.get.thumbValue() === module.get.min()) {
683
+ return $secondThumb;
684
+ }
653
685
  return thumbDelta <= secondThumbDelta ? $thumb : $secondThumb;
654
686
  },
655
687
  closestThumbPos: function(eventPos) {
@@ -692,9 +724,9 @@ $.fn.slider = function(parameters) {
692
724
  ;
693
725
  return adjustedPos;
694
726
  },
695
- valueFromEvent: function(event, originalEvent) {
727
+ valueFromEvent: function(event) {
696
728
  var
697
- eventPos = module.determine.eventPos(event, originalEvent),
729
+ eventPos = module.determine.eventPos(event),
698
730
  newPos = module.determine.pos(eventPos),
699
731
  value
700
732
  ;
@@ -707,12 +739,12 @@ $.fn.slider = function(parameters) {
707
739
  }
708
740
  return value;
709
741
  },
710
- smoothValueFromEvent: function(event, originalEvent) {
742
+ smoothValueFromEvent: function(event) {
711
743
  var
712
744
  min = module.get.min(),
713
745
  max = module.get.max(),
714
746
  trackLength = module.get.trackLength(),
715
- eventPos = module.determine.eventPos(event, originalEvent),
747
+ eventPos = module.determine.eventPos(event),
716
748
  newPos = eventPos - module.get.trackOffset(),
717
749
  ratio,
718
750
  value
@@ -725,17 +757,19 @@ $.fn.slider = function(parameters) {
725
757
  value = ratio * (max - min) + min;
726
758
  return value;
727
759
  },
728
- eventPos: function(event, originalEvent) {
760
+ eventPos: function(event) {
729
761
  if(module.is.touch()) {
730
762
  var
731
- touchY = event.changedTouches[0].pageY || event.touches[0].pageY,
732
- touchX = event.changedTouches[0].pageX || event.touches[0].pageX
763
+ touchEvent = event.changedTouches ? event : event.originalEvent,
764
+ touches = touchEvent.changedTouches[0] ? touchEvent.changedTouches : touchEvent.touches,
765
+ touchY = touches[0].pageY,
766
+ touchX = touches[0].pageX
733
767
  ;
734
768
  return module.is.vertical() ? touchY : touchX;
735
769
  }
736
770
  var
737
- clickY = event.pageY || originalEvent.pageY,
738
- clickX = event.pageX || originalEvent.pageX
771
+ clickY = event.pageY || event.originalEvent.pageY,
772
+ clickX = event.pageX || event.originalEvent.pageX
739
773
  ;
740
774
  return module.is.vertical() ? clickY : clickX;
741
775
  },
@@ -822,8 +856,10 @@ $.fn.slider = function(parameters) {
822
856
  set: {
823
857
  value: function(newValue) {
824
858
  module.update.value(newValue, function(value, thumbVal, secondThumbVal) {
825
- settings.onChange.call(element, value, thumbVal, secondThumbVal);
826
- settings.onMove.call(element, value, thumbVal, secondThumbVal);
859
+ if (!initialLoad || settings.fireOnInit){
860
+ settings.onChange.call(element, value, thumbVal, secondThumbVal);
861
+ settings.onMove.call(element, value, thumbVal, secondThumbVal);
862
+ }
827
863
  });
828
864
  },
829
865
  rangeValue: function(first, second) {
@@ -847,8 +883,10 @@ $.fn.slider = function(parameters) {
847
883
  value = Math.abs(module.thumbVal - module.secondThumbVal);
848
884
  module.update.position(module.thumbVal, $thumb);
849
885
  module.update.position(module.secondThumbVal, $secondThumb);
850
- settings.onChange.call(element, value, module.thumbVal, module.secondThumbVal);
851
- settings.onMove.call(element, value, module.thumbVal, module.secondThumbVal);
886
+ if (!initialLoad || settings.fireOnInit) {
887
+ settings.onChange.call(element, value, module.thumbVal, module.secondThumbVal);
888
+ settings.onMove.call(element, value, module.thumbVal, module.secondThumbVal);
889
+ }
852
890
  } else {
853
891
  module.error(error.notrange);
854
892
  }
@@ -884,9 +922,18 @@ $.fn.slider = function(parameters) {
884
922
  value = newValue;
885
923
  module.thumbVal = value;
886
924
  } else {
925
+ if($currThumb === undefined) {
926
+ $currThumb = newValue <= module.get.currentThumbValue() ? $thumb : $secondThumb;
927
+ }
887
928
  if(!$currThumb.hasClass('second')) {
929
+ if(settings.preventCrossover) {
930
+ newValue = Math.min(module.secondThumbVal, newValue);
931
+ }
888
932
  module.thumbVal = newValue;
889
933
  } else {
934
+ if(settings.preventCrossover) {
935
+ newValue = Math.max(module.thumbVal, newValue);
936
+ }
890
937
  module.secondThumbVal = newValue;
891
938
  }
892
939
  value = Math.abs(module.thumbVal - module.secondThumbVal);
@@ -1222,6 +1269,8 @@ $.fn.slider.settings = {
1222
1269
  smooth : false,
1223
1270
  autoAdjustLabels : true,
1224
1271
  labelDistance : 100,
1272
+ preventCrossover : true,
1273
+ fireOnInit : false,
1225
1274
 
1226
1275
  //the decimal place to round to if step is undefined
1227
1276
  decimalPlaces : 2,
@@ -100,7 +100,7 @@ $.fn.tab = function(parameters) {
100
100
  initializedHistory = true;
101
101
  }
102
102
 
103
- if(module.determine.activeTab() == null) {
103
+ if(instance === undefined && module.determine.activeTab() == null) {
104
104
  module.debug('No active tab detected, setting first tab active', module.get.initialPath());
105
105
  module.changeTab(module.get.initialPath());
106
106
  };
@@ -43,27 +43,31 @@ $.fn.toast = function(parameters) {
43
43
  ? $.extend(true, {}, $.fn.toast.settings, parameters)
44
44
  : $.extend({}, $.fn.toast.settings),
45
45
 
46
- className = settings.className,
47
- selector = settings.selector,
48
- error = settings.error,
49
- namespace = settings.namespace,
50
-
51
- eventNamespace = '.' + namespace,
52
- moduleNamespace = namespace + '-module',
53
-
54
- $module = $(this),
55
- $toastBox = $('<div/>',{'class':settings.className.box}),
56
- $toast = $('<div/>'),
57
- $progress = $('<div/>',{'class':settings.className.progress+' '+settings.class}),
58
- $progressBar = $('<div/>',{'class':'bar'}),
59
-
60
- $close = $('<i/>',{'class':'close icon'}),
61
- $context = (settings.context)
46
+ className = settings.className,
47
+ selector = settings.selector,
48
+ error = settings.error,
49
+ namespace = settings.namespace,
50
+ fields = settings.fields,
51
+
52
+ eventNamespace = '.' + namespace,
53
+ moduleNamespace = namespace + '-module',
54
+
55
+ $module = $(this),
56
+ $toastBox,
57
+ $toast,
58
+ $actions,
59
+ $progress,
60
+ $progressBar,
61
+ $animationObject,
62
+ $close,
63
+ $context = (settings.context)
62
64
  ? $(settings.context)
63
65
  : $('body'),
64
66
 
65
- element = this,
66
- instance = $module.data(moduleNamespace),
67
+ isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
68
+
69
+ element = this,
70
+ instance = isToastComponent ? $module.data(moduleNamespace) : undefined,
67
71
 
68
72
  module
69
73
  ;
@@ -71,34 +75,58 @@ $.fn.toast = function(parameters) {
71
75
 
72
76
  initialize: function() {
73
77
  module.verbose('Initializing element');
74
- if(typeof settings.showProgress !== 'string' || ['top','bottom'].indexOf(settings.showProgress) === -1 ) {
75
- settings.showProgress = false;
76
- }
77
78
  if (!module.has.container()) {
78
79
  module.create.container();
79
80
  }
80
-
81
- module.create.toast();
82
-
83
- module.bind.events();
84
-
85
- if(settings.displayTime > 0) {
86
- module.closeTimer = setTimeout(module.close, settings.displayTime+(!!settings.showProgress ? 300 : 0));
81
+ if(isToastComponent || settings.message !== '' || settings.title !== '' || module.get.iconClass() !== '' || settings.showImage || module.has.configActions()) {
82
+ if(typeof settings.showProgress !== 'string' || [className.top,className.bottom].indexOf(settings.showProgress) === -1 ) {
83
+ settings.showProgress = false;
84
+ }
85
+ module.create.toast();
86
+ if(settings.closeOnClick && (settings.closeIcon || $($toast).find(selector.input).length > 0 || module.has.configActions())){
87
+ settings.closeOnClick = false;
88
+ }
89
+ if(!settings.closeOnClick) {
90
+ $toastBox.addClass(className.unclickable);
91
+ }
92
+ module.bind.events();
93
+ }
94
+ module.instantiate();
95
+ if($toastBox) {
96
+ module.show();
87
97
  }
88
- module.show();
98
+ },
99
+
100
+ instantiate: function() {
101
+ module.verbose('Storing instance of toast');
102
+ instance = module;
103
+ $module
104
+ .data(moduleNamespace, instance)
105
+ ;
89
106
  },
90
107
 
91
108
  destroy: function() {
92
- module.debug('Removing toast', $toast);
93
- $toast.remove();
94
- $toast = undefined;
95
- settings.onRemove.call($toast, element);
109
+ if($toastBox) {
110
+ module.debug('Removing toast', $toastBox);
111
+ module.unbind.events();
112
+ $toastBox.remove();
113
+ $toastBox = undefined;
114
+ $toast = undefined;
115
+ $animationObject = undefined;
116
+ settings.onRemove.call($toastBox, element);
117
+ $progress = undefined;
118
+ $progressBar = undefined;
119
+ $close = undefined;
120
+ }
121
+ $module
122
+ .removeData(moduleNamespace)
123
+ ;
96
124
  },
97
125
 
98
126
  show: function(callback) {
99
127
  callback = callback || function(){};
100
128
  module.debug('Showing toast');
101
- if(settings.onShow.call($toast, element) === false) {
129
+ if(settings.onShow.call($toastBox, element) === false) {
102
130
  module.debug('onShow callback returned false, cancelling toast animation');
103
131
  return;
104
132
  }
@@ -106,9 +134,6 @@ $.fn.toast = function(parameters) {
106
134
  },
107
135
 
108
136
  close: function(callback) {
109
- if(module.closeTimer) {
110
- clearTimeout(module.closeTimer);
111
- }
112
137
  callback = callback || function(){};
113
138
  module.remove.visible();
114
139
  module.unbind.events();
@@ -119,74 +144,172 @@ $.fn.toast = function(parameters) {
119
144
  create: {
120
145
  container: function() {
121
146
  module.verbose('Creating container');
122
- $context.append('<div class="ui ' + settings.position + ' ' + className.container + '"></div>');
147
+ $context.append($('<div/>',{class: settings.position + ' ' + className.container}));
123
148
  },
124
149
  toast: function() {
125
- var $content = $('<div/>').addClass(className.content);
126
- module.verbose('Creating toast');
127
- if(settings.closeIcon) {
128
- $toast.append($close);
129
- $toast.css('cursor','default');
130
- }
150
+ $toastBox = $('<div/>', {class: className.box});
151
+ if (!isToastComponent) {
152
+ module.verbose('Creating toast');
153
+ $toast = $('<div/>');
154
+ var $content = $('<div/>', {class: className.content});
155
+ var iconClass = module.get.iconClass();
156
+ if (iconClass !== '') {
157
+ $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
158
+ }
159
+
160
+ if (settings.showImage) {
161
+ $toast.append($('<img>', {
162
+ class: className.image + ' ' + settings.classImage,
163
+ src: settings.showImage
164
+ }));
165
+ }
166
+ if (settings.title !== '') {
167
+ $content.append($('<div/>', {
168
+ class: className.title,
169
+ text: settings.title
170
+ }));
171
+ }
131
172
 
132
- var iconClass = typeof settings.showIcon === 'string' ? settings.showIcon : settings.showIcon && settings.icons[settings.class] ? settings.icons[settings.class] : '';
133
- if (iconClass != '') {
134
- var $icon = $('<i/>').addClass(iconClass + ' ' + className.icon);
173
+ $content.append($('<div/>', {html: module.helpers.escape(settings.message, settings.preserveHTML)}));
135
174
 
136
175
  $toast
137
- .addClass(className.icon)
138
- .append($icon)
176
+ .addClass(settings.class + ' ' + className.toast)
177
+ .append($content)
139
178
  ;
179
+ $toast.css('opacity', settings.opacity);
180
+ if (settings.closeIcon) {
181
+ $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : '')});
182
+ if($close.hasClass(className.left)) {
183
+ $toast.prepend($close);
184
+ } else {
185
+ $toast.append($close);
186
+ }
187
+ }
188
+ } else {
189
+ $toast = settings.cloneModule ? $module.clone().removeAttr('id') : $module;
190
+ $close = $toast.find('> i'+module.helpers.toClass(className.close));
191
+ settings.closeIcon = ($close.length > 0);
140
192
  }
141
-
142
- if (settings.title !== '') {
143
- var
144
- $title = $('<div/>')
145
- .addClass(className.title)
146
- .text(settings.title)
147
- ;
148
-
149
- $content.append($title);
193
+ if ($toast.hasClass(className.compact)) {
194
+ settings.compact = true;
150
195
  }
151
-
152
- $content.append($('<div/>').html(settings.message));
153
-
154
- $toast
155
- .addClass(settings.class + ' ' + className.toast)
156
- .append($content)
157
- ;
158
- $toast.css('opacity', settings.opacity);
159
- if(settings.compact || $toast.hasClass('compact')) {
160
- $toastBox.addClass('compact');
196
+ if ($toast.hasClass('card')) {
197
+ settings.compact = false;
161
198
  }
162
- if($toast.hasClass('toast') && !$toast.hasClass('inverted')){
163
- $progress.addClass('inverted');
164
- } else {
165
- $progress.removeClass('inverted');
166
- }
167
- $toast = $toastBox.append($toast);
168
- if(!!settings.showProgress && settings.displayTime > 0){
169
- $progress
170
- .addClass(settings.showProgress)
171
- .append($progressBar);
172
- if ($progress.hasClass('top')) {
173
- $toast.prepend($progress);
199
+ $actions = $toast.find('.actions');
200
+ if (module.has.configActions()) {
201
+ if ($actions.length === 0) {
202
+ $actions = $('<div/>', {class: className.actions + ' ' + (settings.classActions || '')}).appendTo($toast);
203
+ }
204
+ if($toast.hasClass('card') && !$actions.hasClass(className.attached)) {
205
+ $actions.addClass(className.extraContent);
206
+ if($actions.hasClass(className.vertical)) {
207
+ $actions.removeClass(className.vertical);
208
+ module.error(error.verticalCard);
209
+ }
210
+ }
211
+ settings.actions.forEach(function (el) {
212
+ var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
213
+ text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
214
+ cls = module.helpers.deQuote(el[fields.class] || ''),
215
+ click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
216
+ $actions.append($('<button/>', {
217
+ html: icon + text,
218
+ class: className.button + ' ' + cls,
219
+ click: function () {
220
+ if (click.call(element, $module) === false) {
221
+ return;
222
+ }
223
+ module.close();
224
+ }
225
+ }));
226
+ });
227
+ }
228
+ if ($actions && $actions.hasClass(className.vertical)) {
229
+ $toast.addClass(className.vertical);
230
+ }
231
+ if($actions.length > 0 && !$actions.hasClass(className.attached)) {
232
+ if ($actions && (!$actions.hasClass(className.basic) || $actions.hasClass(className.left))) {
233
+ $toast.addClass(className.actions);
234
+ }
235
+ }
236
+ if(settings.displayTime === 'auto'){
237
+ settings.displayTime = Math.max(settings.minDisplayTime, $toast.text().split(" ").length / settings.wordsPerMinute * 60000);
238
+ }
239
+ $toastBox.append($toast);
240
+
241
+ if($actions.length > 0 && $actions.hasClass(className.attached)) {
242
+ $actions.addClass(className.buttons);
243
+ $actions.detach();
244
+ $toast.addClass(className.attached);
245
+ if (!$actions.hasClass(className.vertical)) {
246
+ if ($actions.hasClass(className.top)) {
247
+ $toastBox.prepend($actions);
248
+ $toast.addClass(className.bottom);
249
+ } else {
250
+ $toastBox.append($actions);
251
+ $toast.addClass(className.top);
252
+ }
174
253
  } else {
175
- $toast.append($progress);
254
+ $toast.wrap(
255
+ $('<div/>',{
256
+ class:className.vertical + ' ' +
257
+ className.attached + ' ' +
258
+ (settings.compact ? className.compact : '')
259
+ })
260
+ );
261
+ if($actions.hasClass(className.left)) {
262
+ $toast.addClass(className.left).parent().addClass(className.left).prepend($actions);
263
+ } else {
264
+ $toast.parent().append($actions);
265
+ }
176
266
  }
177
- $progressBar.css('transition','width '+(settings.displayTime/1000)+'s linear');
178
- $progressBar.width(settings.progressUp?'0%':'100%');
179
- setTimeout(function() {
180
- if(typeof $progress !== 'undefined'){
181
- $progressBar.width(settings.progressUp?'100%':'0%');
267
+ }
268
+ if($module !== $toast) {
269
+ $module = $toast;
270
+ element = $toast[0];
271
+ }
272
+ if(settings.displayTime > 0) {
273
+ var progressingClass = className.progressing+' '+(settings.pauseOnHover ? className.pausable:'');
274
+ if (!!settings.showProgress) {
275
+ $progress = $('<div/>', {
276
+ class: className.progress + ' ' + (settings.classProgress || settings.class),
277
+ 'data-percent': ''
278
+ });
279
+ if(!settings.classProgress) {
280
+ if ($toast.hasClass('toast') && !$toast.hasClass(className.inverted)) {
281
+ $progress.addClass(className.inverted);
282
+ } else {
283
+ $progress.removeClass(className.inverted);
284
+ }
285
+ }
286
+ $progressBar = $('<div/>', {class: 'bar '+(settings.progressUp ? 'up ' : 'down ')+progressingClass});
287
+ $progress
288
+ .addClass(settings.showProgress)
289
+ .append($progressBar);
290
+ if ($progress.hasClass(className.top)) {
291
+ $toastBox.prepend($progress);
292
+ } else {
293
+ $toastBox.append($progress);
182
294
  }
183
- },300);
295
+ $progressBar.css('animation-duration', settings.displayTime / 1000 + 's');
296
+ }
297
+ $animationObject = $('<span/>',{class:'wait '+progressingClass});
298
+ $animationObject.css('animation-duration', settings.displayTime / 1000 + 's');
299
+ $animationObject.appendTo($toast);
300
+ }
301
+ if (settings.compact) {
302
+ $toastBox.addClass(className.compact);
303
+ $toast.addClass(className.compact);
304
+ if($progress) {
305
+ $progress.addClass(className.compact);
306
+ }
184
307
  }
185
308
  if (settings.newestOnTop) {
186
- $toast.prependTo(module.get.container());
309
+ $toastBox.prependTo(module.get.container());
187
310
  }
188
311
  else {
189
- $toast.appendTo(module.get.container());
312
+ $toastBox.appendTo(module.get.container());
190
313
  }
191
314
  }
192
315
  },
@@ -194,8 +317,17 @@ $.fn.toast = function(parameters) {
194
317
  bind: {
195
318
  events: function() {
196
319
  module.debug('Binding events to toast');
197
- (settings.closeIcon ? $close : $toast)
198
- .on('click' + eventNamespace, module.event.click)
320
+ if(settings.closeOnClick || settings.closeIcon) {
321
+ (settings.closeIcon ? $close : $toast)
322
+ .on('click' + eventNamespace, module.event.click)
323
+ ;
324
+ }
325
+ if($animationObject) {
326
+ $animationObject.on('animationend' + eventNamespace, module.close);
327
+ }
328
+ $toastBox
329
+ .on('click' + eventNamespace, selector.approve, module.event.approve)
330
+ .on('click' + eventNamespace, selector.deny, module.event.deny)
199
331
  ;
200
332
  }
201
333
  },
@@ -203,7 +335,15 @@ $.fn.toast = function(parameters) {
203
335
  unbind: {
204
336
  events: function() {
205
337
  module.debug('Unbinding events to toast');
206
- (settings.closeIcon ? $close : $toast)
338
+ if(settings.closeOnClick || settings.closeIcon) {
339
+ (settings.closeIcon ? $close : $toast)
340
+ .off('click' + eventNamespace)
341
+ ;
342
+ }
343
+ if($animationObject) {
344
+ $animationObject.off('animationend' + eventNamespace);
345
+ }
346
+ $toastBox
207
347
  .off('click' + eventNamespace)
208
348
  ;
209
349
  }
@@ -212,9 +352,9 @@ $.fn.toast = function(parameters) {
212
352
  animate: {
213
353
  show: function(callback) {
214
354
  callback = $.isFunction(callback) ? callback : function(){};
215
- if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
355
+ if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
216
356
  module.set.visible();
217
- $toast
357
+ $toastBox
218
358
  .transition({
219
359
  animation : settings.transition.showMethod + ' in',
220
360
  queue : false,
@@ -222,48 +362,48 @@ $.fn.toast = function(parameters) {
222
362
  verbose : settings.verbose,
223
363
  duration : settings.transition.showDuration,
224
364
  onComplete : function() {
225
- callback.call($toast, element);
226
- settings.onVisible.call($toast, element);
365
+ callback.call($toastBox, element);
366
+ settings.onVisible.call($toastBox, element);
227
367
  }
228
368
  })
229
369
  ;
230
370
  }
231
- else {
232
- module.error(error.noTransition);
233
- }
234
371
  },
235
372
  close: function(callback) {
236
373
  callback = $.isFunction(callback) ? callback : function(){};
237
374
  module.debug('Closing toast');
238
- if(settings.onHide.call($toast, element) === false) {
375
+ if(settings.onHide.call($toastBox, element) === false) {
239
376
  module.debug('onHide callback returned false, cancelling toast animation');
240
377
  return;
241
378
  }
242
379
  if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
243
- $toast
380
+ $toastBox
244
381
  .transition({
245
382
  animation : settings.transition.hideMethod + ' out',
246
383
  queue : false,
247
384
  duration : settings.transition.hideDuration,
248
385
  debug : settings.debug,
249
386
  verbose : settings.verbose,
387
+ interval : 50,
250
388
 
251
389
  onBeforeHide: function(callback){
252
390
  callback = $.isFunction(callback)?callback : function(){};
253
391
  if(settings.transition.closeEasing !== ''){
254
- $toast.css('opacity',0);
255
- $toast.wrap('<div/>').parent().slideUp(500,settings.transition.closeEasing,function(){
256
- $toast.parent().remove();
257
- callback.call($toast);
392
+ $toastBox.css('opacity',0);
393
+ $toastBox.wrap('<div/>').parent().slideUp(500,settings.transition.closeEasing,function(){
394
+ if($toastBox){
395
+ $toastBox.parent().remove();
396
+ callback.call($toastBox);
397
+ }
258
398
  });
259
399
  } else {
260
- callback.call($toast);
400
+ callback.call($toastBox);
261
401
  }
262
402
  },
263
403
  onComplete : function() {
404
+ callback.call($toastBox, element);
405
+ settings.onHidden.call($toastBox, element);
264
406
  module.destroy();
265
- callback.call($toast, element);
266
- settings.onHidden.call($toast, element);
267
407
  }
268
408
  })
269
409
  ;
@@ -271,6 +411,18 @@ $.fn.toast = function(parameters) {
271
411
  else {
272
412
  module.error(error.noTransition);
273
413
  }
414
+ },
415
+ pause: function() {
416
+ $animationObject.css('animationPlayState','paused');
417
+ if($progressBar) {
418
+ $progressBar.css('animationPlayState', 'paused');
419
+ }
420
+ },
421
+ continue: function() {
422
+ $animationObject.css('animationPlayState','running');
423
+ if($progressBar) {
424
+ $progressBar.css('animationPlayState', 'running');
425
+ }
274
426
  }
275
427
  },
276
428
 
@@ -278,12 +430,36 @@ $.fn.toast = function(parameters) {
278
430
  container: function() {
279
431
  module.verbose('Determining if there is already a container');
280
432
  return ($context.find(module.helpers.toClass(settings.position) + selector.container).length > 0);
433
+ },
434
+ toast: function(){
435
+ return !!module.get.toast();
436
+ },
437
+ toasts: function(){
438
+ return module.get.toasts().length > 0;
439
+ },
440
+ configActions: function () {
441
+ return Array.isArray(settings.actions) && settings.actions.length > 0;
281
442
  }
282
443
  },
283
444
 
284
445
  get: {
285
446
  container: function() {
286
447
  return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
448
+ },
449
+ toastBox: function() {
450
+ return $toastBox || null;
451
+ },
452
+ toast: function() {
453
+ return $toast || null;
454
+ },
455
+ toasts: function() {
456
+ return $(module.get.container()).find(selector.box);
457
+ },
458
+ iconClass: function() {
459
+ return typeof settings.showIcon === 'string' ? settings.showIcon : settings.showIcon && settings.icons[settings.class] ? settings.icons[settings.class] : '';
460
+ },
461
+ remainingTime: function() {
462
+ return $animationObject ? $animationObject.css('opacity') * settings.displayTime : 0;
287
463
  }
288
464
  },
289
465
 
@@ -300,8 +476,24 @@ $.fn.toast = function(parameters) {
300
476
  },
301
477
 
302
478
  event: {
303
- click: function() {
304
- settings.onClick.call($toast, element);
479
+ click: function(event) {
480
+ if($(event.target).closest('a').length === 0) {
481
+ settings.onClick.call($toastBox, element);
482
+ module.close();
483
+ }
484
+ },
485
+ approve: function() {
486
+ if(settings.onApprove.call(element, $module) === false) {
487
+ module.verbose('Approve callback returned false cancelling close');
488
+ return;
489
+ }
490
+ module.close();
491
+ },
492
+ deny: function() {
493
+ if(settings.onDeny.call(element, $module) === false) {
494
+ module.verbose('Deny callback returned false cancelling close');
495
+ return;
496
+ }
305
497
  module.close();
306
498
  }
307
499
  },
@@ -318,6 +510,43 @@ $.fn.toast = function(parameters) {
318
510
  });
319
511
 
320
512
  return result;
513
+ },
514
+ deQuote: function(string) {
515
+ return String(string).replace(/"/g,"");
516
+ },
517
+ escape: function(string, preserveHTML) {
518
+ if (preserveHTML){
519
+ return string;
520
+ }
521
+ var
522
+ badChars = /[&<>"'`]/g,
523
+ shouldEscape = /[&<>"'`]/,
524
+ escape = {
525
+ "&": "&amp;",
526
+ "<": "&lt;",
527
+ ">": "&gt;",
528
+ '"': "&quot;",
529
+ "'": "&#x27;",
530
+ "`": "&#x60;"
531
+ },
532
+ escapedChar = function(chr) {
533
+ return escape[chr];
534
+ }
535
+ ;
536
+ if(shouldEscape.test(string)) {
537
+ return string.replace(badChars, escapedChar);
538
+ }
539
+ return string;
540
+ }
541
+ },
542
+
543
+ can: {
544
+ useElement: function(element){
545
+ if ($.fn[element] !== undefined) {
546
+ return true;
547
+ }
548
+ module.error(error.noElement.replace('{element}',element));
549
+ return false;
321
550
  }
322
551
  },
323
552
 
@@ -495,6 +724,7 @@ $.fn.toast = function(parameters) {
495
724
  instance.invoke('destroy');
496
725
  }
497
726
  module.initialize();
727
+ returnedValue = $module;
498
728
  }
499
729
  })
500
730
  ;
@@ -518,18 +748,29 @@ $.fn.toast.settings = {
518
748
  context : 'body',
519
749
 
520
750
  position : 'top right',
521
- class : 'info',
751
+ class : 'neutral',
752
+ classProgress : false,
753
+ classActions : false,
754
+ classImage : 'mini',
522
755
 
523
756
  title : '',
524
757
  message : '',
525
758
  displayTime : 3000, // set to zero to require manually dismissal, otherwise hides on its own
526
- showIcon : true,
759
+ minDisplayTime : 1000, // minimum displaytime in case displayTime is set to 'auto'
760
+ wordsPerMinute : 120,
761
+ showIcon : false,
527
762
  newestOnTop : false,
528
763
  showProgress : false,
529
- progressUp : true, //if false, the bar will start at 100% and decrease to 0%
764
+ pauseOnHover : true,
765
+ progressUp : false, //if true, the bar will start at 0% and increase to 100%
530
766
  opacity : 1,
531
767
  compact : true,
532
768
  closeIcon : false,
769
+ closeOnClick : true,
770
+ cloneModule : true,
771
+ actions : false,
772
+ preserveHTML : true,
773
+ showImage : false,
533
774
 
534
775
  // transition settings
535
776
  transition : {
@@ -537,23 +778,41 @@ $.fn.toast.settings = {
537
778
  showDuration : 500,
538
779
  hideMethod : 'scale',
539
780
  hideDuration : 500,
540
- closeEasing : 'easeOutBounce' //Set to empty string to stack the closed toast area immediately (old behaviour)
781
+ closeEasing : 'easeOutCubic' //Set to empty string to stack the closed toast area immediately (old behaviour)
541
782
  },
542
783
 
543
784
  error: {
544
785
  method : 'The method you called is not defined.',
545
- noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
786
+ noElement : 'This module requires ui {element}',
787
+ verticalCard : 'Vertical but not attached actions are not supported for card layout'
546
788
  },
547
789
 
548
790
  className : {
549
- container : 'toast-container',
550
- box : 'toast-box',
791
+ container : 'ui toast-container',
792
+ box : 'floating toast-box',
551
793
  progress : 'ui attached active progress',
552
794
  toast : 'ui toast',
553
- icon : 'icon',
795
+ icon : 'centered icon',
554
796
  visible : 'visible',
555
797
  content : 'content',
556
- title : 'header'
798
+ title : 'ui header',
799
+ actions : 'actions',
800
+ extraContent : 'extra content',
801
+ button : 'ui button',
802
+ buttons : 'ui buttons',
803
+ close : 'close icon',
804
+ image : 'ui image',
805
+ vertical : 'vertical',
806
+ attached : 'attached',
807
+ inverted : 'inverted',
808
+ compact : 'compact',
809
+ pausable : 'pausable',
810
+ progressing : 'progressing',
811
+ top : 'top',
812
+ bottom : 'bottom',
813
+ left : 'left',
814
+ basic : 'basic',
815
+ unclickable : 'unclickable'
557
816
  },
558
817
 
559
818
  icons : {
@@ -564,9 +823,19 @@ $.fn.toast.settings = {
564
823
  },
565
824
 
566
825
  selector : {
567
- container : '.toast-container',
826
+ container : '.ui.toast-container',
568
827
  box : '.toast-box',
569
- toast : '.ui.toast'
828
+ toast : '.ui.toast',
829
+ input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
830
+ approve : '.actions .positive, .actions .approve, .actions .ok',
831
+ deny : '.actions .negative, .actions .deny, .actions .cancel'
832
+ },
833
+
834
+ fields : {
835
+ class : 'class',
836
+ text : 'text',
837
+ icon : 'icon',
838
+ click : 'click'
570
839
  },
571
840
 
572
841
  // callbacks
@@ -576,6 +845,8 @@ $.fn.toast.settings = {
576
845
  onHide : function(){},
577
846
  onHidden : function(){},
578
847
  onRemove : function(){},
848
+ onApprove : function(){},
849
+ onDeny : function(){}
579
850
  };
580
851
 
581
852
  $.extend( $.easing, {
@@ -589,6 +860,9 @@ $.extend( $.easing, {
589
860
  } else {
590
861
  return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
591
862
  }
863
+ },
864
+ easeOutCubic: function (t) {
865
+ return (--t)*t*t+1;
592
866
  }
593
867
  });
594
868