fomantic-ui-sass 2.8.7.1 → 2.8.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -0
  3. data/app/assets/javascripts/semantic-ui/calendar.js +9 -11
  4. data/app/assets/javascripts/semantic-ui/dimmer.js +8 -11
  5. data/app/assets/javascripts/semantic-ui/dropdown.js +191 -99
  6. data/app/assets/javascripts/semantic-ui/form.js +98 -60
  7. data/app/assets/javascripts/semantic-ui/modal.js +259 -16
  8. data/app/assets/javascripts/semantic-ui/nag.js +130 -64
  9. data/app/assets/javascripts/semantic-ui/popup.js +4 -4
  10. data/app/assets/javascripts/semantic-ui/progress.js +6 -8
  11. data/app/assets/javascripts/semantic-ui/search.js +14 -12
  12. data/app/assets/javascripts/semantic-ui/slider.js +55 -31
  13. data/app/assets/javascripts/semantic-ui/toast.js +26 -6
  14. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +1 -1
  15. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +46 -5
  16. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +14 -7
  17. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +6 -4
  18. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +50 -3
  19. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +6 -2
  20. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +29 -2
  21. data/app/assets/stylesheets/semantic-ui/elements/_container.scss +3 -4
  22. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +1 -1
  23. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1 -1
  24. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +10 -5
  25. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +237 -65
  26. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +1 -1
  27. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +2 -1
  28. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +1 -1
  29. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +1 -1
  30. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +41 -37
  31. data/app/assets/stylesheets/semantic-ui/elements/_placeholder.scss +1 -1
  32. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +1 -1
  33. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +1 -1
  34. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +34 -2
  35. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +1 -1
  36. data/app/assets/stylesheets/semantic-ui/elements/_text.scss +1 -1
  37. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +2 -3
  38. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +2 -2
  39. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +1 -1
  40. data/app/assets/stylesheets/semantic-ui/modules/_calendar.scss +3 -3
  41. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +46 -4
  42. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +1 -1
  43. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +72 -3
  44. data/app/assets/stylesheets/semantic-ui/modules/_embed.scss +1 -1
  45. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +19 -8
  46. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +168 -16
  47. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +4 -2
  48. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +18 -10
  49. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +18 -33
  50. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +1 -1
  51. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +1 -1
  52. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +1 -1
  53. data/app/assets/stylesheets/semantic-ui/modules/_slider.scss +3 -1
  54. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +1 -2
  55. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +1 -1
  56. data/app/assets/stylesheets/semantic-ui/modules/_toast.scss +97 -10
  57. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +1 -1
  58. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +1 -1
  59. data/app/assets/stylesheets/semantic-ui/views/_card.scss +74 -2
  60. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +1 -1
  61. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +1 -1
  62. data/app/assets/stylesheets/semantic-ui/views/_item.scss +1 -1
  63. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +1 -1
  64. data/fomantic-ui-sass.gemspec +1 -1
  65. data/lib/fomantic/ui/sass/version.rb +2 -2
  66. metadata +4 -4
@@ -58,6 +58,7 @@ $.fn.modal = function(parameters) {
58
58
  selector = settings.selector,
59
59
  className = settings.className,
60
60
  namespace = settings.namespace,
61
+ fields = settings.fields,
61
62
  error = settings.error,
62
63
 
63
64
  eventNamespace = '.' + namespace,
@@ -74,7 +75,7 @@ $.fn.modal = function(parameters) {
74
75
  $dimmer,
75
76
 
76
77
  element = this,
77
- instance = $module.data(moduleNamespace),
78
+ instance = $module.hasClass('modal') ? $module.data(moduleNamespace) : undefined,
78
79
 
79
80
  ignoreRepeatedEvents = false,
80
81
 
@@ -91,6 +92,46 @@ $.fn.modal = function(parameters) {
91
92
  module = {
92
93
 
93
94
  initialize: function() {
95
+ if(!$module.hasClass('modal')) {
96
+ module.create.modal();
97
+ if(!$.isFunction(settings.onHidden)) {
98
+ settings.onHidden = function () {
99
+ module.destroy();
100
+ $module.remove();
101
+ };
102
+ }
103
+ }
104
+ $module.addClass(settings.class);
105
+ if (settings.title !== '') {
106
+ $module.find(selector.title).html(module.helpers.escape(settings.title, settings.preserveHTML)).addClass(settings.classTitle);
107
+ }
108
+ if (settings.content !== '') {
109
+ $module.find(selector.content).html(module.helpers.escape(settings.content, settings.preserveHTML)).addClass(settings.classContent);
110
+ }
111
+ if(module.has.configActions()){
112
+ var $actions = $module.find(selector.actions).addClass(settings.classActions);
113
+ if ($actions.length === 0) {
114
+ $actions = $('<div/>', {class: className.actions + ' ' + (settings.classActions || '')}).appendTo($module);
115
+ } else {
116
+ $actions.empty();
117
+ }
118
+ settings.actions.forEach(function (el) {
119
+ var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
120
+ text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
121
+ cls = module.helpers.deQuote(el[fields.class] || ''),
122
+ click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
123
+ $actions.append($('<button/>', {
124
+ html: icon + text,
125
+ class: className.button + ' ' + cls,
126
+ click: function () {
127
+ if (click.call(element, $module) === false) {
128
+ return;
129
+ }
130
+ module.hide();
131
+ }
132
+ }));
133
+ });
134
+ }
94
135
  module.cache = {};
95
136
  module.verbose('Initializing dimmer', $context);
96
137
 
@@ -110,6 +151,9 @@ $.fn.modal = function(parameters) {
110
151
  module.observeChanges();
111
152
  }
112
153
  module.instantiate();
154
+ if(settings.autoShow){
155
+ module.show();
156
+ }
113
157
  },
114
158
 
115
159
  instantiate: function() {
@@ -121,6 +165,23 @@ $.fn.modal = function(parameters) {
121
165
  },
122
166
 
123
167
  create: {
168
+ modal: function() {
169
+ $module = $('<div/>', {class: className.modal});
170
+ if (settings.closeIcon) {
171
+ $close = $('<i/>', {class: className.close})
172
+ $module.append($close);
173
+ }
174
+ if (settings.title !== '') {
175
+ $('<div/>', {class: className.title}).appendTo($module);
176
+ }
177
+ if (settings.content !== '') {
178
+ $('<div/>', {class: className.content}).appendTo($module);
179
+ }
180
+ if (module.has.configActions()) {
181
+ $('<div/>', {class: className.actions}).appendTo($module);
182
+ }
183
+ $context.append($module);
184
+ },
124
185
  dimmer: function() {
125
186
  var
126
187
  defaultSettings = {
@@ -247,6 +308,12 @@ $.fn.modal = function(parameters) {
247
308
  get: {
248
309
  id: function() {
249
310
  return (Math.random().toString(16) + '000000000').substr(2, 8);
311
+ },
312
+ element: function() {
313
+ return $module;
314
+ },
315
+ settings: function() {
316
+ return settings;
250
317
  }
251
318
  },
252
319
 
@@ -424,9 +491,9 @@ $.fn.modal = function(parameters) {
424
491
  $module
425
492
  .transition({
426
493
  debug : settings.debug,
427
- animation : settings.transition + ' in',
494
+ animation : (settings.transition.showMethod || settings.transition) + ' in',
428
495
  queue : settings.queue,
429
- duration : settings.duration,
496
+ duration : settings.transition.showDuration || settings.duration,
430
497
  useFailSafe : true,
431
498
  onComplete : function() {
432
499
  settings.onVisible.apply(element);
@@ -474,9 +541,9 @@ $.fn.modal = function(parameters) {
474
541
  $module
475
542
  .transition({
476
543
  debug : settings.debug,
477
- animation : settings.transition + ' out',
544
+ animation : (settings.transition.hideMethod || settings.transition) + ' out',
478
545
  queue : settings.queue,
479
- duration : settings.duration,
546
+ duration : settings.transition.hideDuration || settings.duration,
480
547
  useFailSafe : true,
481
548
  onStart : function() {
482
549
  if(!module.others.active() && !module.others.animating() && !keepDimmed) {
@@ -499,7 +566,9 @@ $.fn.modal = function(parameters) {
499
566
  $previousModal.find(selector.dimmer).removeClass('active');
500
567
  }
501
568
  }
502
- settings.onHidden.call(element);
569
+ if($.isFunction(settings.onHidden)) {
570
+ settings.onHidden.call(element);
571
+ }
503
572
  module.remove.dimmerStyles();
504
573
  module.restore.focus();
505
574
  callback();
@@ -625,7 +694,12 @@ $.fn.modal = function(parameters) {
625
694
  bodyMargin: function() {
626
695
  var position = module.can.leftBodyScrollbar() ? 'left':'right';
627
696
  $body.css('margin-'+position, initialBodyMargin);
628
- $body.find(selector.bodyFixed.replace('right',position)).css('padding-'+position, initialBodyMargin);
697
+ $body.find(selector.bodyFixed.replace('right',position)).each(function(){
698
+ var el = $(this),
699
+ attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
700
+ ;
701
+ el.css(attribute, '');
702
+ });
629
703
  }
630
704
  },
631
705
 
@@ -699,7 +773,35 @@ $.fn.modal = function(parameters) {
699
773
  $module.removeClass(className.loading);
700
774
  module.debug('Caching modal and container sizes', module.cache);
701
775
  },
702
-
776
+ helpers: {
777
+ deQuote: function(string) {
778
+ return String(string).replace(/"/g,"");
779
+ },
780
+ escape: function(string, preserveHTML) {
781
+ if (preserveHTML){
782
+ return string;
783
+ }
784
+ var
785
+ badChars = /[<>"'`]/g,
786
+ shouldEscape = /[&<>"'`]/,
787
+ escape = {
788
+ "<": "&lt;",
789
+ ">": "&gt;",
790
+ '"': "&quot;",
791
+ "'": "&#x27;",
792
+ "`": "&#x60;"
793
+ },
794
+ escapedChar = function(chr) {
795
+ return escape[chr];
796
+ }
797
+ ;
798
+ if(shouldEscape.test(string)) {
799
+ string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
800
+ return string.replace(badChars, escapedChar);
801
+ }
802
+ return string;
803
+ }
804
+ },
703
805
  can: {
704
806
  leftBodyScrollbar: function(){
705
807
  if(module.cache.leftBodyScrollbar === undefined) {
@@ -734,7 +836,11 @@ $.fn.modal = function(parameters) {
734
836
  ;
735
837
  }
736
838
  },
737
-
839
+ has: {
840
+ configActions: function () {
841
+ return Array.isArray(settings.actions) && settings.actions.length > 0;
842
+ }
843
+ },
738
844
  is: {
739
845
  active: function() {
740
846
  return $module.hasClass(className.active);
@@ -811,7 +917,12 @@ $.fn.modal = function(parameters) {
811
917
  if(settings.detachable || module.can.fit()) {
812
918
  $body.css('margin-'+position, tempBodyMargin + 'px');
813
919
  }
814
- $body.find(selector.bodyFixed.replace('right',position)).css('padding-'+position, tempBodyMargin + 'px');
920
+ $body.find(selector.bodyFixed.replace('right',position)).each(function(){
921
+ var el = $(this),
922
+ attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
923
+ ;
924
+ el.css(attribute, 'calc(' + el.css(attribute) + ' + ' + tempBodyMargin + 'px)');
925
+ });
815
926
  },
816
927
  clickaway: function() {
817
928
  if (!settings.detachable) {
@@ -838,8 +949,8 @@ $.fn.modal = function(parameters) {
838
949
  closable : 'auto',
839
950
  useFlex : module.can.useFlex(),
840
951
  duration : {
841
- show : settings.duration,
842
- hide : settings.duration
952
+ show : settings.transition.showDuration || settings.duration,
953
+ hide : settings.transition.hideDuration || settings.duration
843
954
  }
844
955
  },
845
956
  dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
@@ -1098,15 +1209,29 @@ $.fn.modal = function(parameters) {
1098
1209
 
1099
1210
  if(methodInvoked) {
1100
1211
  if(instance === undefined) {
1212
+ if ($.isFunction(settings.templates[query])) {
1213
+ settings.autoShow = true;
1214
+ settings.className.modal = settings.className.template;
1215
+ settings = $.extend(true, {}, settings, settings.templates[query].apply(module ,queryArguments));
1216
+
1217
+ // reassign shortcuts
1218
+ className = settings.className;
1219
+ namespace = settings.namespace;
1220
+ fields = settings.fields;
1221
+ error = settings.error;
1222
+ }
1101
1223
  module.initialize();
1102
1224
  }
1103
- module.invoke(query);
1225
+ if (!$.isFunction(settings.templates[query])) {
1226
+ module.invoke(query);
1227
+ }
1104
1228
  }
1105
1229
  else {
1106
1230
  if(instance !== undefined) {
1107
1231
  instance.invoke('destroy');
1108
1232
  }
1109
1233
  module.initialize();
1234
+ returnedValue = $module;
1110
1235
  }
1111
1236
  })
1112
1237
  ;
@@ -1137,6 +1262,7 @@ $.fn.modal.settings = {
1137
1262
  closable : true,
1138
1263
  autofocus : true,
1139
1264
  restoreFocus : true,
1265
+ autoShow : false,
1140
1266
 
1141
1267
  inverted : false,
1142
1268
  blurring : false,
@@ -1161,6 +1287,24 @@ $.fn.modal.settings = {
1161
1287
  padding : 50,
1162
1288
  scrollbarWidth: 10,
1163
1289
 
1290
+ //dynamic content
1291
+ title : '',
1292
+ content : '',
1293
+ class : '',
1294
+ classTitle : '',
1295
+ classContent : '',
1296
+ classActions : '',
1297
+ closeIcon : false,
1298
+ actions : false,
1299
+ preserveHTML : true,
1300
+
1301
+ fields : {
1302
+ class : 'class',
1303
+ text : 'text',
1304
+ icon : 'icon',
1305
+ click : 'click'
1306
+ },
1307
+
1164
1308
  // called before show animation
1165
1309
  onShow : function(){},
1166
1310
 
@@ -1171,7 +1315,7 @@ $.fn.modal.settings = {
1171
1315
  onHide : function(){ return true; },
1172
1316
 
1173
1317
  // called after hide animation
1174
- onHidden : function(){},
1318
+ onHidden : false,
1175
1319
 
1176
1320
  // called after approve selector match
1177
1321
  onApprove : function(){ return true; },
@@ -1180,12 +1324,16 @@ $.fn.modal.settings = {
1180
1324
  onDeny : function(){ return true; },
1181
1325
 
1182
1326
  selector : {
1327
+ title : '> .header',
1328
+ content : '> .content',
1329
+ actions : '> .actions',
1183
1330
  close : '> .close',
1184
1331
  approve : '.actions .positive, .actions .approve, .actions .ok',
1185
1332
  deny : '.actions .negative, .actions .deny, .actions .cancel',
1186
1333
  modal : '.ui.modal',
1187
1334
  dimmer : '> .ui.dimmer',
1188
- bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar'
1335
+ bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close',
1336
+ prompt : '.ui.input > input'
1189
1337
  },
1190
1338
  error : {
1191
1339
  dimmer : 'UI Dimmer, a required component is not included in this page',
@@ -1201,9 +1349,104 @@ $.fn.modal.settings = {
1201
1349
  loading : 'loading',
1202
1350
  scrolling : 'scrolling',
1203
1351
  undetached : 'undetached',
1204
- front : 'front'
1352
+ front : 'front',
1353
+ close : 'close icon',
1354
+ button : 'ui button',
1355
+ modal : 'ui modal',
1356
+ title : 'header',
1357
+ content : 'content',
1358
+ actions : 'actions',
1359
+ template : 'ui tiny modal',
1360
+ ok : 'positive',
1361
+ cancel : 'negative',
1362
+ prompt : 'ui fluid input'
1363
+ },
1364
+ text: {
1365
+ ok : 'Ok',
1366
+ cancel: 'Cancel'
1205
1367
  }
1206
1368
  };
1207
1369
 
1370
+ $.fn.modal.settings.templates = {
1371
+ getArguments: function(args) {
1372
+ var queryArguments = [].slice.call(args);
1373
+ if($.isPlainObject(queryArguments[0])){
1374
+ return $.extend({
1375
+ handler:function(){},
1376
+ content:'',
1377
+ title: ''
1378
+ }, queryArguments[0]);
1379
+ } else {
1380
+ if(!$.isFunction(queryArguments[queryArguments.length-1])) {
1381
+ queryArguments.push(function() {});
1382
+ }
1383
+ return {
1384
+ handler: queryArguments.pop(),
1385
+ content: queryArguments.pop() || '',
1386
+ title: queryArguments.pop() || ''
1387
+ };
1388
+ }
1389
+ },
1390
+ alert: function () {
1391
+ var settings = this.get.settings(),
1392
+ args = settings.templates.getArguments(arguments)
1393
+ ;
1394
+ return {
1395
+ title : args.title,
1396
+ content: args.content,
1397
+ actions: [{
1398
+ text : settings.text.ok,
1399
+ class: settings.className.ok,
1400
+ click: args.handler
1401
+ }]
1402
+ }
1403
+ },
1404
+ confirm: function () {
1405
+ var settings = this.get.settings(),
1406
+ args = settings.templates.getArguments(arguments)
1407
+ ;
1408
+ return {
1409
+ title : args.title,
1410
+ content: args.content,
1411
+ actions: [{
1412
+ text : settings.text.ok,
1413
+ class: settings.className.ok,
1414
+ click: function(){args.handler(true)}
1415
+ },{
1416
+ text: settings.text.cancel,
1417
+ class: settings.className.cancel,
1418
+ click: function(){args.handler(false)}
1419
+ }]
1420
+ }
1421
+ },
1422
+ prompt: function () {
1423
+ var $this = this,
1424
+ settings = this.get.settings(),
1425
+ args = settings.templates.getArguments(arguments),
1426
+ input = $($.parseHTML(args.content)).filter('.ui.input')
1427
+ ;
1428
+ if (input.length === 0) {
1429
+ args.content += '<p><div class="'+settings.className.prompt+'"><input placeholder="'+this.helpers.deQuote(args.placeholder || '')+'" type="text" value="'+this.helpers.deQuote(args.defaultValue || '')+'"></div></p>';
1430
+ }
1431
+ return {
1432
+ title : args.title,
1433
+ content: args.content,
1434
+ actions: [{
1435
+ text: settings.text.ok,
1436
+ class: settings.className.ok,
1437
+ click: function(){
1438
+ var settings = $this.get.settings(),
1439
+ inputField = $this.get.element().find(settings.selector.prompt)[0]
1440
+ ;
1441
+ args.handler($(inputField).val());
1442
+ }
1443
+ },{
1444
+ text: settings.text.cancel,
1445
+ class: settings.className.cancel,
1446
+ click: function(){args.handler(null)}
1447
+ }]
1448
+ }
1449
+ }
1450
+ }
1208
1451
 
1209
1452
  })( jQuery, window, document );