fomantic-ui-sass 2.7.8 → 2.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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