Skip to content

Commit bf2f280

Browse files
lubber-delubber-de
authored
feat(modal): js config templates, alert, confirm, prompt
This PR adds the possibility of using JS config templates for the modal module. That means you can declare a reusable dynamic template function which returns predefined config settings (modified depending of your input to the template function) as the modal is already prepared to create dynamic content out of pure js since #1774 For this reason modal now also has an optional autoshow option, which enables you to immediatly show the modal on instantiation time, so no more need for $(.ui.modal).modal({closable:false}).modal('show') but $(.ui.modal).modal({closable:false, autoShow:true}) Modal now also can use the transition methods for show/hide individually (backwards compatible) (just like in toast and for dimmer in #1867)
1 parent 58b023c commit bf2f280

File tree

2 files changed

+134
-17
lines changed

2 files changed

+134
-17
lines changed

‎src/definitions/modules/modal.js

Lines changed: 130 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,9 @@ $.fn.modal = function(parameters) {
146146
module.observeChanges();
147147
}
148148
module.instantiate();
149+
if(settings.autoShow){
150+
module.show();
151+
}
149152
},
150153

151154
instantiate: function() {
@@ -158,19 +161,19 @@ $.fn.modal = function(parameters) {
158161

159162
create: {
160163
modal: function() {
161-
$module = $('<div/>', {class: 'ui modal'});
164+
$module = $('<div/>', {class: className.modal});
162165
if (settings.closeIcon) {
163166
$close = $('<i/>', {class: className.close})
164167
$module.append($close);
165168
}
166169
if (settings.title !== '') {
167-
$('<div/>', {class: 'header'}).appendTo($module);
170+
$('<div/>', {class: className.title}).appendTo($module);
168171
}
169172
if (settings.content !== '') {
170-
$('<div/>', {class: 'content'}).appendTo($module);
173+
$('<div/>', {class: className.content}).appendTo($module);
171174
}
172175
if (module.has.configActions()) {
173-
$('<div/>', {class: 'actions'}).appendTo($module);
176+
$('<div/>', {class: className.actions}).appendTo($module);
174177
}
175178
$context.append($module);
176179
},
@@ -300,6 +303,12 @@ $.fn.modal = function(parameters) {
300303
get: {
301304
id: function() {
302305
return (Math.random().toString(16) + '000000000').substr(2, 8);
306+
},
307+
element: function() {
308+
return $module;
309+
},
310+
settings: function() {
311+
return settings;
303312
}
304313
},
305314

@@ -477,9 +486,9 @@ $.fn.modal = function(parameters) {
477486
$module
478487
.transition({
479488
debug : settings.debug,
480-
animation : settings.transition + ' in',
489+
animation : (settings.transition.showMethod || settings.transition) + ' in',
481490
queue : settings.queue,
482-
duration : settings.duration,
491+
duration : settings.transition.showDuration || settings.duration,
483492
useFailSafe : true,
484493
onComplete : function() {
485494
settings.onVisible.apply(element);
@@ -527,9 +536,9 @@ $.fn.modal = function(parameters) {
527536
$module
528537
.transition({
529538
debug : settings.debug,
530-
animation : settings.transition + ' out',
539+
animation : (settings.transition.hideMethod || settings.transition) + ' out',
531540
queue : settings.queue,
532-
duration : settings.duration,
541+
duration : settings.transition.hideDuration || settings.duration,
533542
useFailSafe : true,
534543
onStart : function() {
535544
if(!module.others.active() && !module.others.animating() && !keepDimmed) {
@@ -935,8 +944,8 @@ $.fn.modal = function(parameters) {
935944
closable : 'auto',
936945
useFlex : module.can.useFlex(),
937946
duration : {
938-
show : settings.duration,
939-
hide : settings.duration
947+
show : settings.transition.showDuration || settings.duration,
948+
hide : settings.transition.hideDuration || settings.duration
940949
}
941950
},
942951
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
@@ -1195,9 +1204,22 @@ $.fn.modal = function(parameters) {
11951204

11961205
if(methodInvoked) {
11971206
if(instance === undefined) {
1207+
if ($.isFunction(settings.templates[query])) {
1208+
settings.autoShow = true;
1209+
settings.className.modal = settings.className.template;
1210+
settings = $.extend(true, {}, settings, settings.templates[query].apply(module ,queryArguments));
1211+
1212+
// reassign shortcuts
1213+
className = settings.className;
1214+
namespace = settings.namespace;
1215+
fields = settings.fields;
1216+
error = settings.error;
1217+
}
11981218
module.initialize();
11991219
}
1200-
module.invoke(query);
1220+
if (!$.isFunction(settings.templates[query])) {
1221+
module.invoke(query);
1222+
}
12011223
}
12021224
else {
12031225
if(instance !== undefined) {
@@ -1235,6 +1257,7 @@ $.fn.modal.settings = {
12351257
closable : true,
12361258
autofocus : true,
12371259
restoreFocus : true,
1260+
autoShow : false,
12381261

12391262
inverted : false,
12401263
blurring : false,
@@ -1304,7 +1327,8 @@ $.fn.modal.settings = {
13041327
deny : '.actions .negative, .actions .deny, .actions .cancel',
13051328
modal : '.ui.modal',
13061329
dimmer : '> .ui.dimmer',
1307-
bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close'
1330+
bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close',
1331+
prompt : '.ui.input > input'
13081332
},
13091333
error : {
13101334
dimmer : 'UI Dimmer, a required component is not included in this page',
@@ -1322,9 +1346,102 @@ $.fn.modal.settings = {
13221346
undetached : 'undetached',
13231347
front : 'front',
13241348
close : 'close icon',
1325-
button : 'ui button'
1349+
button : 'ui button',
1350+
modal : 'ui modal',
1351+
title : 'header',
1352+
content : 'content',
1353+
actions : 'actions',
1354+
template : 'ui tiny modal',
1355+
ok : 'positive',
1356+
cancel : 'negative',
1357+
prompt : 'ui fluid input'
1358+
},
1359+
text: {
1360+
ok : 'Ok',
1361+
cancel: 'Cancel'
13261362
}
13271363
};
13281364

1365+
$.fn.modal.settings.templates = {
1366+
getArguments: function(args) {
1367+
var queryArguments = [].slice.call(args);
1368+
if($.isPlainObject(queryArguments[0])){
1369+
return $.extend({
1370+
handler:function(){},
1371+
content:'',
1372+
title: ''
1373+
}, queryArguments[0]);
1374+
} else {
1375+
if(!$.isFunction(queryArguments[queryArguments.length-1])) {
1376+
queryArguments.push(function() {});
1377+
}
1378+
return {
1379+
handler: queryArguments.pop(),
1380+
content: queryArguments.pop() || '',
1381+
title: queryArguments.pop() || ''
1382+
};
1383+
}
1384+
},
1385+
alert: function () {
1386+
var settings = this.get.settings(),
1387+
args = settings.templates.getArguments(arguments)
1388+
;
1389+
return {
1390+
title : args.title,
1391+
content: args.content,
1392+
actions: [{
1393+
text : settings.text.ok,
1394+
class: settings.className.ok,
1395+
click: args.handler
1396+
}]
1397+
}
1398+
},
1399+
confirm: function () {
1400+
var settings = this.get.settings(),
1401+
args = settings.templates.getArguments(arguments)
1402+
;
1403+
return {
1404+
title : args.title,
1405+
content: args.content,
1406+
actions: [{
1407+
text : settings.text.ok,
1408+
class: settings.className.ok,
1409+
click: function(){args.handler(true)}
1410+
},{
1411+
text: settings.text.cancel,
1412+
class: settings.className.cancel,
1413+
click: function(){args.handler(false)}
1414+
}]
1415+
}
1416+
},
1417+
prompt: function () {
1418+
var $this = this,
1419+
settings = this.get.settings(),
1420+
args = settings.templates.getArguments(arguments),
1421+
input = $($.parseHTML(args.content)).filter('.ui.input')
1422+
;
1423+
if (input.length === 0) {
1424+
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>';
1425+
}
1426+
return {
1427+
title : args.title,
1428+
content: args.content,
1429+
actions: [{
1430+
text: settings.text.ok,
1431+
class: settings.className.ok,
1432+
click: function(){
1433+
var settings = $this.get.settings(),
1434+
inputField = $this.get.element().find(settings.selector.prompt)[0]
1435+
;
1436+
args.handler($(inputField).val());
1437+
}
1438+
},{
1439+
text: settings.text.cancel,
1440+
class: settings.className.cancel,
1441+
click: function(){args.handler(null)}
1442+
}]
1443+
}
1444+
}
1445+
}
13291446

13301447
})( jQuery, window, document );

‎src/definitions/modules/modal.less

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@
4040
will-change: top, left, margin, transform, opacity;
4141
}
4242

43-
.ui.modal > :first-child:not(.icon):not(.dimmer),
43+
.ui.modal > :first-child:not(.close):not(.dimmer),
4444
.ui.modal > i.icon:first-child + *,
45-
.ui.modal > .dimmer:first-child + *:not(.icon),
45+
.ui.modal > .dimmer:first-child + *:not(.close),
4646
.ui.modal > .dimmer:first-child + i.icon + * {
4747
border-top-left-radius: @borderRadius;
4848
border-top-right-radius: @borderRadius;
@@ -477,8 +477,8 @@
477477
border-radius:0;
478478
}
479479
}
480-
.ui.modal > .close.inside + .header,
481-
.ui.fullscreen.modal > .close + .header {
480+
.ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
481+
.ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
482482
padding-right: @closeHitbox;
483483
}
484484
.ui.modal > .close.inside,

0 commit comments

Comments
 (0)