Skip to content

Commit

Permalink
feat(modal): js config templates, alert, confirm, prompt
Browse files Browse the repository at this point in the history 
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)
  • Loading branch information
@lubber-de
lubber-de authored Feb 25, 2021
1 parent 58b023c commit bf2f280
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 17 deletions.
143 changes: 130 additions & 13 deletions src/definitions/modules/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,9 @@ $.fn.modal = function(parameters) {
module.observeChanges();
}
module.instantiate();
if(settings.autoShow){
module.show();
}
},

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

create: {
modal: function() {
$module = $('<div/>', {class: 'ui modal'});
$module = $('<div/>', {class: className.modal});
if (settings.closeIcon) {
$close = $('<i/>', {class: className.close})
$module.append($close);
}
if (settings.title !== '') {
$('<div/>', {class: 'header'}).appendTo($module);
$('<div/>', {class: className.title}).appendTo($module);
}
if (settings.content !== '') {
$('<div/>', {class: 'content'}).appendTo($module);
$('<div/>', {class: className.content}).appendTo($module);
}
if (module.has.configActions()) {
$('<div/>', {class: 'actions'}).appendTo($module);
$('<div/>', {class: className.actions}).appendTo($module);
}
$context.append($module);
},
Expand Down Expand Up @@ -300,6 +303,12 @@ $.fn.modal = function(parameters) {
get: {
id: function() {
return (Math.random().toString(16) + '000000000').substr(2, 8);
},
element: function() {
return $module;
},
settings: function() {
return settings;
}
},

Expand Down Expand Up @@ -477,9 +486,9 @@ $.fn.modal = function(parameters) {
$module
.transition({
debug : settings.debug,
animation : settings.transition + ' in',
animation : (settings.transition.showMethod || settings.transition) + ' in',
queue : settings.queue,
duration : settings.duration,
duration : settings.transition.showDuration || settings.duration,
useFailSafe : true,
onComplete : function() {
settings.onVisible.apply(element);
Expand Down Expand Up @@ -527,9 +536,9 @@ $.fn.modal = function(parameters) {
$module
.transition({
debug : settings.debug,
animation : settings.transition + ' out',
animation : (settings.transition.hideMethod || settings.transition) + ' out',
queue : settings.queue,
duration : settings.duration,
duration : settings.transition.hideDuration || settings.duration,
useFailSafe : true,
onStart : function() {
if(!module.others.active() && !module.others.animating() && !keepDimmed) {
Expand Down Expand Up @@ -935,8 +944,8 @@ $.fn.modal = function(parameters) {
closable : 'auto',
useFlex : module.can.useFlex(),
duration : {
show : settings.duration,
hide : settings.duration
show : settings.transition.showDuration || settings.duration,
hide : settings.transition.hideDuration || settings.duration
}
},
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
Expand Down Expand Up @@ -1195,9 +1204,22 @@ $.fn.modal = function(parameters) {

if(methodInvoked) {
if(instance === undefined) {
if ($.isFunction(settings.templates[query])) {
settings.autoShow = true;
settings.className.modal = settings.className.template;
settings = $.extend(true, {}, settings, settings.templates[query].apply(module ,queryArguments));

// reassign shortcuts
className = settings.className;
namespace = settings.namespace;
fields = settings.fields;
error = settings.error;
}
module.initialize();
}
module.invoke(query);
if (!$.isFunction(settings.templates[query])) {
module.invoke(query);
}
}
else {
if(instance !== undefined) {
Expand Down Expand Up @@ -1235,6 +1257,7 @@ $.fn.modal.settings = {
closable : true,
autofocus : true,
restoreFocus : true,
autoShow : false,

inverted : false,
blurring : false,
Expand Down Expand Up @@ -1304,7 +1327,8 @@ $.fn.modal.settings = {
deny : '.actions .negative, .actions .deny, .actions .cancel',
modal : '.ui.modal',
dimmer : '> .ui.dimmer',
bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close'
bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close',
prompt : '.ui.input > input'
},
error : {
dimmer : 'UI Dimmer, a required component is not included in this page',
Expand All @@ -1322,9 +1346,102 @@ $.fn.modal.settings = {
undetached : 'undetached',
front : 'front',
close : 'close icon',
button : 'ui button'
button : 'ui button',
modal : 'ui modal',
title : 'header',
content : 'content',
actions : 'actions',
template : 'ui tiny modal',
ok : 'positive',
cancel : 'negative',
prompt : 'ui fluid input'
},
text: {
ok : 'Ok',
cancel: 'Cancel'
}
};

$.fn.modal.settings.templates = {
getArguments: function(args) {
var queryArguments = [].slice.call(args);
if($.isPlainObject(queryArguments[0])){
return $.extend({
handler:function(){},
content:'',
title: ''
}, queryArguments[0]);
} else {
if(!$.isFunction(queryArguments[queryArguments.length-1])) {
queryArguments.push(function() {});
}
return {
handler: queryArguments.pop(),
content: queryArguments.pop() || '',
title: queryArguments.pop() || ''
};
}
},
alert: function () {
var settings = this.get.settings(),
args = settings.templates.getArguments(arguments)
;
return {
title : args.title,
content: args.content,
actions: [{
text : settings.text.ok,
class: settings.className.ok,
click: args.handler
}]
}
},
confirm: function () {
var settings = this.get.settings(),
args = settings.templates.getArguments(arguments)
;
return {
title : args.title,
content: args.content,
actions: [{
text : settings.text.ok,
class: settings.className.ok,
click: function(){args.handler(true)}
},{
text: settings.text.cancel,
class: settings.className.cancel,
click: function(){args.handler(false)}
}]
}
},
prompt: function () {
var $this = this,
settings = this.get.settings(),
args = settings.templates.getArguments(arguments),
input = $($.parseHTML(args.content)).filter('.ui.input')
;
if (input.length === 0) {
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>';
}
return {
title : args.title,
content: args.content,
actions: [{
text: settings.text.ok,
class: settings.className.ok,
click: function(){
var settings = $this.get.settings(),
inputField = $this.get.element().find(settings.selector.prompt)[0]
;
args.handler($(inputField).val());
}
},{
text: settings.text.cancel,
class: settings.className.cancel,
click: function(){args.handler(null)}
}]
}
}
}

})( jQuery, window, document );
8 changes: 4 additions & 4 deletions src/definitions/modules/modal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@
will-change: top, left, margin, transform, opacity;
}

.ui.modal > :first-child:not(.icon):not(.dimmer),
.ui.modal > :first-child:not(.close):not(.dimmer),
.ui.modal > i.icon:first-child + *,
.ui.modal > .dimmer:first-child + *:not(.icon),
.ui.modal > .dimmer:first-child + *:not(.close),
.ui.modal > .dimmer:first-child + i.icon + * {
border-top-left-radius: @borderRadius;
border-top-right-radius: @borderRadius;
Expand Down Expand Up @@ -477,8 +477,8 @@
border-radius:0;
}
}
.ui.modal > .close.inside + .header,
.ui.fullscreen.modal > .close + .header {
.ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
.ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
padding-right: @closeHitbox;
}
.ui.modal > .close.inside,
Expand Down

0 comments on commit bf2f280

Please sign in to comment.