framework7/components/dialog.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var n=document,t=(window,o.$),a=(o.Template7,o.utils),l=(o.device,o.support,o.Class,o.Modal),i=(o.ConstructorMethods,o.ModalMethods),r=function(o){function e(e,l){var i=a.extend({title:e.params.dialog.title,text:void 0,content:"",buttons:[],verticalButtons:!1,onClick:void 0,cssClass:void 0,destroyOnClose:!1,on:{}},l);void 0===i.closeByBackdropClick&&(i.closeByBackdropClick=e.params.dialog.closeByBackdropClick),void 0===i.backdrop&&(i.backdrop=e.params.dialog.backdrop),o.call(this,e,i);var r,s,d,c=this,p=i.title,u=i.text,g=i.content,f=i.buttons,v=i.verticalButtons,m=i.cssClass,k=i.backdrop;if(c.params=i,c.params.el)r=t(c.params.el);else{var y=["dialog"];0===f.length&&y.push("dialog-no-buttons"),f.length>0&&y.push("dialog-buttons-"+f.length),v&&y.push("dialog-buttons-vertical"),m&&y.push(m);var C="";f.length>0&&(C='\n          <div class="dialog-buttons">\n            '+f.map((function(o){return'\n              <span class="dialog-button'+(o.bold?" dialog-button-bold":"")+(o.color?" color-"+o.color:"")+(o.cssClass?" "+o.cssClass:"")+'">'+o.text+"</span>\n            "})).join("")+"\n          </div>\n        ");var b='\n        <div class="'+y.join(" ")+'">\n          <div class="dialog-inner">\n            '+(p?'<div class="dialog-title">'+p+"</div>":"")+"\n            "+(u?'<div class="dialog-text">'+u+"</div>":"")+"\n            "+g+"\n          </div>\n          "+C+"\n        </div>\n      ";r=t(b)}if(r&&r.length>0&&r[0].f7Modal)return r[0].f7Modal;if(0===r.length)return c.destroy();function h(o){var e=t(this).index(),n=f[e];n.onClick&&n.onClick(c,o),c.params.onClick&&c.params.onClick(c,e),!1!==n.close&&c.close()}function x(o){var e=o.keyCode;f.forEach((function(t,a){t.keyCodes&&t.keyCodes.indexOf(e)>=0&&(n.activeElement&&n.activeElement.blur(),t.onClick&&t.onClick(c,o),c.params.onClick&&c.params.onClick(c,a),!1!==t.close&&c.close())}))}function w(o){var e=o.target;0===t(e).closest(c.el).length&&c.params.closeByBackdropClick&&c.backdropEl&&c.backdropEl===e&&c.close()}return k&&0===(s=e.root.children(".dialog-backdrop")).length&&(s=t('<div class="dialog-backdrop"></div>'),e.root.append(s)),f&&f.length>0&&(c.on("open",(function(){r.find(".dialog-button").each((function(o,e){f[o].keyCodes&&(d=!0),t(e).on("click",h)})),!d||e.device.ios||e.device.android||e.device.cordova||t(n).on("keydown",x)})),c.on("close",(function(){r.find(".dialog-button").each((function(o,e){t(e).off("click",h)})),!d||e.device.ios||e.device.android||e.device.cordova||t(n).off("keydown",x),d=!1}))),a.extend(c,{app:e,$el:r,el:r[0],$backdropEl:s,backdropEl:s&&s[0],type:"dialog",setProgress:function(o,n){return e.progressbar.set(r.find(".progressbar"),o,n),c},setText:function(o){var e=r.find(".dialog-text");return 0===e.length&&(e=t('<div class="dialog-text"></div>'),void 0!==p?e.insertAfter(r.find(".dialog-title")):r.find(".dialog-inner").prepend(e)),e.html(o),c.params.text=o,c},setTitle:function(o){var e=r.find(".dialog-title");return 0===e.length&&(e=t('<div class="dialog-title"></div>'),r.find(".dialog-inner").prepend(e)),e.html(o),c.params.title=o,c}}),c.on("opened",(function(){c.params.closeByBackdropClick&&e.on("click",w)})),c.on("close",(function(){c.params.closeByBackdropClick&&e.off("click",w)})),r[0].f7Modal=c,c.params.destroyOnClose&&c.once("closed",(function(){setTimeout((function(){c.destroy()}),0)})),c}return o&&(e.__proto__=o),e.prototype=Object.create(o&&o.prototype),e.prototype.constructor=e,e}(l),s={name:"dialog",params:{dialog:{title:void 0,buttonOk:"OK",buttonCancel:"Cancel",usernamePlaceholder:"Username",passwordPlaceholder:"Password",preloaderTitle:"Loading... ",progressTitle:"Loading... ",backdrop:!0,closeByBackdropClick:!1,destroyPredefinedDialogs:!0,keyboardActions:!0,autoFocus:!0}},static:{Dialog:r},create:function(){var o=this;function e(){return o.params.dialog.title||o.name}var n=o.params.dialog.destroyPredefinedDialogs,t=o.params.dialog.keyboardActions,l=o.params.dialog.autoFocus?{on:{opened:function(o){o.$el.find("input").eq(0).focus()}}}:{};o.dialog=a.extend(i({app:o,constructor:r,defaultSelector:".dialog.modal-in"}),{alert:function(){for(var a,l=[],i=arguments.length;i--;)l[i]=arguments[i];var s=l[0],d=l[1],c=l[2];return 2===l.length&&"function"==typeof l[1]&&(s=(a=l)[0],c=a[1],d=a[2]),new r(o,{title:void 0===d?e():d,text:s,buttons:[{text:o.params.dialog.buttonOk,bold:!0,onClick:c,keyCodes:t?[13,27]:null}],destroyOnClose:n}).open()},prompt:function(){for(var a,i=[],s=arguments.length;s--;)i[s]=arguments[s];var d=i[0],c=i[1],p=i[2],u=i[3],g=i[4];return"function"==typeof i[1]&&(d=(a=i)[0],p=a[1],u=a[2],g=a[3],c=a[4]),g=null==g?"":g,new r(o,Object.assign({},{title:void 0===c?e():c,text:d,content:'<div class="dialog-input-field input"><input type="text" class="dialog-input" value="'+g+'"></div>',buttons:[{text:o.params.dialog.buttonCancel,keyCodes:t?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,keyCodes:t?[13]:null}],onClick:function(o,e){var n=o.$el.find(".dialog-input").val();0===e&&u&&u(n),1===e&&p&&p(n)},destroyOnClose:n},l)).open()},confirm:function(){for(var a,l=[],i=arguments.length;i--;)l[i]=arguments[i];var s=l[0],d=l[1],c=l[2],p=l[3];return"function"==typeof l[1]&&(s=(a=l)[0],c=a[1],p=a[2],d=a[3]),new r(o,{title:void 0===d?e():d,text:s,buttons:[{text:o.params.dialog.buttonCancel,onClick:p,keyCodes:t?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,onClick:c,keyCodes:t?[13]:null}],destroyOnClose:n}).open()},login:function(){for(var a,i=[],s=arguments.length;s--;)i[s]=arguments[s];var d=i[0],c=i[1],p=i[2],u=i[3];return"function"==typeof i[1]&&(d=(a=i)[0],p=a[1],u=a[2],c=a[3]),new r(o,Object.assign({},{title:void 0===c?e():c,text:d,content:'\n              <div class="dialog-input-field dialog-input-double input">\n                <input type="text" name="dialog-username" placeholder="'+o.params.dialog.usernamePlaceholder+'" class="dialog-input">\n              </div>\n              <div class="dialog-input-field dialog-input-double input">\n                <input type="password" name="dialog-password" placeholder="'+o.params.dialog.passwordPlaceholder+'" class="dialog-input">\n              </div>',buttons:[{text:o.params.dialog.buttonCancel,keyCodes:t?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,keyCodes:t?[13]:null}],onClick:function(o,e){var n=o.$el.find('[name="dialog-username"]').val(),t=o.$el.find('[name="dialog-password"]').val();0===e&&u&&u(n,t),1===e&&p&&p(n,t)},destroyOnClose:n},l)).open()},password:function(){for(var a,i=[],s=arguments.length;s--;)i[s]=arguments[s];var d=i[0],c=i[1],p=i[2],u=i[3];return"function"==typeof i[1]&&(d=(a=i)[0],p=a[1],u=a[2],c=a[3]),new r(o,Object.assign({},{title:void 0===c?e():c,text:d,content:'\n              <div class="dialog-input-field input">\n                <input type="password" name="dialog-password" placeholder="'+o.params.dialog.passwordPlaceholder+'" class="dialog-input">\n              </div>',buttons:[{text:o.params.dialog.buttonCancel,keyCodes:t?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,keyCodes:t?[13]:null}],onClick:function(o,e){var n=o.$el.find('[name="dialog-password"]').val();0===e&&u&&u(n),1===e&&p&&p(n)},destroyOnClose:n},l)).open()},preloader:function(e,t){var l=a[o.theme+"PreloaderContent"]||"";return new r(o,{title:null==e?o.params.dialog.preloaderTitle:e,content:'<div class="preloader'+(t?" color-"+t:"")+'">'+l+"</div>",cssClass:"dialog-preloader",destroyOnClose:n}).open()},progress:function(){for(var e,t,a,l=[],i=arguments.length;i--;)l[i]=arguments[i];var s=l[0],d=l[1],c=l[2];2===l.length?"number"==typeof l[0]?(d=(e=l)[0],c=e[1],s=e[2]):"string"==typeof l[0]&&"string"==typeof l[1]&&(s=(t=l)[0],c=t[1],d=t[2]):1===l.length&&"number"==typeof l[0]&&(d=(a=l)[0],s=a[1],c=a[2]);var p=void 0===d,u=new r(o,{title:void 0===s?o.params.dialog.progressTitle:s,cssClass:"dialog-progress",content:'\n              <div class="progressbar'+(p?"-infinite":"")+(c?" color-"+c:"")+'">\n                '+(p?"":"<span></span>")+"\n              </div>\n            ",destroyOnClose:n});return p||u.setProgress(d),u.open()}})}};if(e){if(o.prototype.modules&&o.prototype.modules[s.name])return;o.use(s),o.instance&&(o.instance.useModuleParams(s,o.instance.params),o.instance.useModule(s))}return s}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))