modals.js 10.9 KB
define(["css!cmpts/modals/modals.css"],function(){var o=Dom7,a=document.createElement("div");app.modalStack=[],app.modalStackClearQueue=function(){app.modalStack.length&&app.modalStack.shift()()},app.modal=function(e){e=e||{};var t="";if(app.params.modalTemplate)app._compiledTemplates.modal||(app._compiledTemplates.modal=t7.compile(app.params.modalTemplate)),t=app._compiledTemplates.modal(e);else{var l="";if(e.buttons&&e.buttons.length>0)for(var n=0;n<e.buttons.length;n++){var p="";e.buttons[n].color&&(p="style='color:"+e.buttons[n].color+"'"),l+='<span class="modal-button'+(e.buttons[n].bold?" modal-button-bold":"")+'" '+p+">"+e.buttons[n].text+"</span>"}var d=e.title?'<div class="modal-title">'+e.title+"</div>":"",s=e.text?'<div class="modal-text">'+e.text+"</div>":"",i=e.afterText?e.afterText:"",r=e.buttons&&0!==e.buttons.length?"":"modal-no-buttons",m=e.verticalButtons?"modal-buttons-vertical":"",c=e.buttons&&e.buttons.length>0?'<div class="modal-buttons modal-buttons-'+e.buttons.length+" "+m+'">'+l+"</div>":"";t='<div class="modal '+r+" "+(e.cssClass||"")+'"><div class="modal-inner">'+(d+s+i)+"</div>"+c+"</div>"}a.innerHTML=t;var u=o(a).children();return o("body").append(u[0]),u.find(".modal-button").each(function(a,t){o(t).on("click",function(o){e.buttons[a].close!==!1&&app.closeModal(u),e.buttons[a].onClick&&e.buttons[a].onClick(u,o),e.onClick&&e.onClick(u,a)})}),app.openModal(u),u[0]},app.alert=function(o,a,e){return"function"==typeof a&&(e=arguments[1],a=void 0),app.modal({text:o||"",title:"undefined"==typeof a?app.params.modalTitle:a,buttons:[{text:app.params.modalButtonOk,bold:!0,onClick:e}]})},app.confirm=function(o,a,e,t){return"function"==typeof a&&(t=arguments[2],e=arguments[1],a=void 0),app.modal({text:o||"",title:"undefined"==typeof a?app.params.modalTitle:a,buttons:[{text:app.params.modalButtonCancel,onClick:t,color:"green"},{text:app.params.modalButtonOk,bold:!0,onClick:e,color:"#000000"}]})},app.confirmNoClose=function(o,a,e,t,l){return"function"==typeof a&&(l=arguments[2],e=arguments[1],a=void 0),app.modal({text:o||"",title:"undefined"==typeof a?app.params.modalTitle:a,cssClass:t||"",buttons:[{text:app.params.modalButtonCancel,onClick:l,color:"green"},{text:app.params.modalButtonOk,bold:!0,onClick:e,color:"#000000",close:!1}]})},app.prompt=function(a,e,t,l){return"function"==typeof e&&(l=arguments[2],t=arguments[1],e=void 0),app.modal({text:a||"",title:"undefined"==typeof e?app.params.modalTitle:e,afterText:'<div class="input-field"><input type="text" class="modal-text-input"></div>',buttons:[{text:app.params.modalButtonCancel},{text:app.params.modalButtonOk,bold:!0}],onClick:function(a,e){0===e&&l&&l(o(a).find(".modal-text-input").val()),1===e&&t&&t(o(a).find(".modal-text-input").val())}})},app.modalLogin=function(a,e,t,l){return"function"==typeof e&&(l=arguments[2],t=arguments[1],e=void 0),app.modal({text:a||"",title:"undefined"==typeof e?app.params.modalTitle:e,afterText:'<div class="input-field modal-input-double"><input type="text" name="modal-username" placeholder="'+app.params.modalUsernamePlaceholder+'" class="modal-text-input"></div><div class="input-field modal-input-double"><input type="password" name="modal-password" placeholder="'+app.params.modalPasswordPlaceholder+'" class="modal-text-input"></div>',buttons:[{text:app.params.modalButtonCancel},{text:app.params.modalButtonOk,bold:!0}],onClick:function(a,e){var n=o(a).find('.modal-text-input[name="modal-username"]').val(),p=o(a).find('.modal-text-input[name="modal-password"]').val();0===e&&l&&l(n,p),1===e&&t&&t(n,p)}})},app.modalPassword=function(a,e,t,l){return"function"==typeof e&&(l=arguments[2],t=arguments[1],e=void 0),app.modal({text:a||"",title:"undefined"==typeof e?app.params.modalTitle:e,afterText:'<div class="input-field"><input type="password" name="modal-password" placeholder="'+app.params.modalPasswordPlaceholder+'" class="modal-text-input"></div>',buttons:[{text:app.params.modalButtonCancel},{text:app.params.modalButtonOk,bold:!0}],onClick:function(a,e){var n=o(a).find('.modal-text-input[name="modal-password"]').val();0===e&&l&&l(n),1===e&&t&&t(n)}})},app.showPreloader=function(o){return app.modal({title:o||app.params.modalPreloaderTitle,text:'<div class="preloader"></div>',cssClass:"modal-preloader"})},app.hidePreloader=function(){app.closeModal(".modal.modal-in")},app.actions=function(e,t){var l,n,p,d=!1;1===arguments.length?t=e:app.device.ios?app.device.ipad&&(d=!0):o(window).width()>=768&&(d=!0),t=t||[],t.length>0&&!o.isArray(t[0])&&(t=[t]);var s;if(d){var i=app.params.modalActionsToPopoverTemplate||'<div class="popover actions-popover"><div class="popover-inner">{{#each this}}<div class="list-block"><ul>{{#each this}}{{#if label}}<li class="actions-popover-label {{#if color}}color-{{color}}{{/if}} {{#if bold}}actions-popover-bold{{/if}}">{{text}}</li>{{else}}<li><a href="javascript:void(0)" class="item-link list-button {{#if color}}color-{{color}}{{/if}} {{#if bg}}bg-{{bg}}{{/if}} {{#if bold}}actions-popover-bold{{/if}} {{#if disabled}}disabled{{/if}}">{{text}}</a></li>{{/if}}{{/each}}</ul></div>{{/each}}</div></div>';app._compiledTemplates.actionsToPopover||(app._compiledTemplates.actionsToPopover=t7.compile(i));var r=app._compiledTemplates.actionsToPopover(t);l=o(app.popover(r,e,!0)),n=".list-block ul",p=".list-button"}else{if(app.params.modalActionsTemplate)app._compiledTemplates.actions||(app._compiledTemplates.actions=t7.compile(app.params.modalActionsTemplate)),s=app._compiledTemplates.actions(t);else{for(var m="",c=0;c<t.length;c++)for(var u=0;u<t[c].length;u++){0===u&&(m+='<div class="actions-modal-group">');var f=t[c][u],v=f.label?"actions-modal-label":"actions-modal-button";f.bold&&(v+=" actions-modal-button-bold"),f.color&&(v+=" color-"+f.color),f.bg&&(v+=" bg-"+f.bg),f.disabled&&(v+=" disabled"),m+='<div class="'+v+'">'+f.text+"</div>",u===t[c].length-1&&(m+="</div>")}s='<div class="actions-modal">'+m+"</div>"}a.innerHTML=s,l=o(a).children(),o("body").append(l[0]),n=".actions-modal-group",p=".actions-modal-button"}var h=l.find(n);return h.each(function(a,e){var n=a;o(e).children().each(function(a,e){var s,i=a,r=t[n][i];!d&&o(e).is(p)&&(s=o(e)),d&&o(e).find(p).length>0&&(s=o(e).find(p)),s&&s.on("click",function(o){r.close!==!1&&app.closeModal(l),r.onClick&&r.onClick(l,o)})})}),d||app.openModal(l),l[0]},app.popover=function(a,e,t){function l(){a.css({left:"",top:""});var t,l,n,p=a.width(),d=a.height(),s=0;t=a.find(".popover-angle"),s=t.width()/2,t.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""});var i=e.outerWidth(),r=e.outerHeight(),m=e.offset(),c=e.parents(".page");c.length>0&&(m.top=m.top-c[0].scrollTop);var u=o(window).height(),f=o(window).width(),v=0,h=0,b=0,g="top";d+s<m.top?v=m.top-d-s:d+s<u-m.top-r?(g="bottom",v=m.top+r+s):(g="middle",v=r/2+m.top-d/2,b=v,v<=0?v=5:v+d>=u&&(v=u-d-5),b-=v),"top"===g||"bottom"===g?(h=i/2+m.left-p/2,b=h,h<5&&(h=5),h+p>f&&(h=f-p-5),"top"===g&&t.addClass("on-bottom"),"bottom"===g&&t.addClass("on-top"),b-=h,l=p/2-s+b,l=Math.max(Math.min(l,p-2*s-13),13),t.css({left:l+"px"})):"middle"===g&&(h=m.left-p-s,t.addClass("on-right"),(h<5||h+p>f)&&(h<5&&(h=m.left+i+s),h+p>f&&(h=f-p-5),t.removeClass("on-right").addClass("on-left")),n=d/2-s+b,n=Math.max(Math.min(n,d-2*s-13),13),t.css({top:n+"px"})),a.css({top:v+"px",left:h+"px"})}if("undefined"==typeof t&&(t=!0),"string"==typeof a&&a.indexOf("<")>=0){var n=document.createElement("div");if(n.innerHTML=a.trim(),!(n.childNodes.length>0))return!1;a=n.childNodes[0],t&&a.classList.add("remove-on-close"),o("body").append(a)}return a=o(a),e=o(e),0!==a.length&&0!==e.length&&(0===a.parents("body").length&&(t&&a.addClass("remove-on-close"),o("body").append(a[0])),0===a.find(".popover-angle").length&&a.append('<div class="popover-angle"></div>'),a.show(),l(),o(window).on("resize",l),a.on("close",function(){o(window).off("resize",l)}),app.openModal(a),a[0])},app.popup=function(a,e){if("undefined"==typeof e&&(e=!0),"string"==typeof a&&a.indexOf("<")>=0){var t=document.createElement("div");if(t.innerHTML=a.trim(),!(t.childNodes.length>0))return!1;a=t.childNodes[0],e&&a.classList.add("remove-on-close"),o("body").append(a)}return a=o(a),0!==a.length&&(0===a.parents("body").length&&(e&&a.addClass("remove-on-close"),o("body").append(a[0])),a.show(),app.openModal(a),a[0])},app.pickerModal=function(a,e){if("undefined"==typeof e&&(e=!0),"string"==typeof a&&a.indexOf("<")>=0){if(a=o(a),!(a.length>0))return!1;e&&a.addClass("remove-on-close"),o("body").append(a[0])}return a=o(a),0!==a.length&&(0===a.parents("body").length&&(e&&a.addClass("remove-on-close"),o("body").append(a[0])),o(".picker-modal.modal-in:not(.modal-out)").length>0&&!a.hasClass("modal-in")&&app.closeModal(".picker-modal.modal-in:not(.modal-out)"),a.show(),app.openModal(a),a[0])},app.loginScreen=function(a){return a||(a=".login-screen"),a=o(a),0!==a.length&&(o(".login-screen.modal-in:not(.modal-out)").length>0&&!a.hasClass("modal-in")&&app.closeModal(".login-screen.modal-in:not(.modal-out)"),a.show(),app.openModal(a),a[0])},app.openModal=function(a){a=o(a);var e=a.hasClass("modal");if(o(".modal.modal-in:not(.modal-out)").length&&app.params.modalStack&&e)return void app.modalStack.push(function(){app.openModal(a)});if(!0!==a.data("f7-modal-shown")){a.data("f7-modal-shown",!0),a.once("close",function(){a.removeData("f7-modal-shown")});var t=(a.hasClass("popover"),a.hasClass("popup")),l=a.hasClass("login-screen"),n=a.hasClass("picker-modal");e&&(a.show(),a.css({marginTop:-Math.round(a.outerHeight()/2)+"px"}));var p;l||n||(0!==o(".modal-overlay").length||t||o("body").append('<div class="modal-overlay"></div>'),0===o(".popup-overlay").length&&t&&o("body").append('<div class="popup-overlay"></div>'),p=o(t?".popup-overlay":".modal-overlay"));a[0].clientLeft;return a.trigger("open"),n&&o("body").addClass("with-picker-modal"),a.find("."+app.params.viewClass).length>0&&a.find(".navbar").each(function(){app.initNavbarWithCallback(this)}),l||n||p.addClass("modal-overlay-visible"),a.removeClass("modal-out").addClass("modal-in").transitionEnd(function(o){a.hasClass("modal-out")?a.trigger("closed"):a.trigger("opened")}),!0}},app.closeModal=function(a){if(a=o(a||".modal-in"),"undefined"==typeof a||0!==a.length){var e,t=a.hasClass("modal"),l=a.hasClass("popover"),n=a.hasClass("popup"),p=a.hasClass("login-screen"),d=a.hasClass("picker-modal"),s=a.hasClass("remove-on-close");return n?e=o(".popup-overlay"):d||(e=o(".modal-overlay")),n?a.length===o(".popup.modal-in").length&&e.removeClass("modal-overlay-visible"):e&&e.length>0&&e.removeClass("modal-overlay-visible"),a.trigger("close"),d&&(o("body").removeClass("with-picker-modal"),o("body").addClass("picker-modal-closing")),l?(a.removeClass("modal-in modal-out").trigger("closed").hide(),s&&a.remove()):(a.removeClass("modal-in").addClass("modal-out").transitionEnd(function(e){if(a.hasClass("modal-out"))a.trigger("closed");else if(a.trigger("opened"),l)return;d&&o("body").removeClass("picker-modal-closing"),n||p||d||l?(a.removeClass("modal-out").hide(),s&&a.length>0&&a.remove()):a.remove()}),t&&app.params.modalStack&&app.modalStackClearQueue()),!0}}});