framework7/components/actions.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,a=o.$,s=(o.Template7,o.utils),i=(o.device,o.support,o.Class,o.Modal),r=(o.ConstructorMethods,o.ModalMethods),l=function(o){function e(e,i){var r=s.extend({on:{}},e.params.actions,i);o.call(this,e,r);var l,c,p,d=this;if(d.params=r,d.params.buttons&&(l=d.params.buttons,Array.isArray(l[0])||(l=[l])),d.groups=l,d.params.el?c=a(d.params.el).eq(0):d.params.content?c=a(d.params.content).filter((function(o,e){return 1===e.nodeType})).eq(0):d.params.buttons&&(d.params.convertToPopover&&(d.popoverHtml=d.renderPopover()),d.actionsHtml=d.render()),c&&c.length>0&&c[0].f7Modal)return c[0].f7Modal;if(c&&0===c.length&&!d.actionsHtml&&!d.popoverHtml)return d.destroy();d.params.backdrop&&d.params.backdropEl?p=a(d.params.backdropEl):d.params.backdrop&&0===(p=e.root.children(".actions-backdrop")).length&&(p=a('<div class="actions-backdrop"></div>'),e.root.append(p));var u,m=d.open,v=d.close;function f(o){var e,n,t=a(this);if(t.hasClass("list-button")||t.hasClass("item-link")?(e=t.parents("li").index(),n=t.parents(".list").index()):(e=t.index(),n=t.parents(".actions-group").index()),void 0!==l){var s=l[n][e];s.onClick&&s.onClick(d,o),d.params.onClick&&d.params.onClick(d,o),!1!==s.close&&d.close()}}function b(o){var n=o.target,s=a(n);!e.device.desktop&&e.device.cordova&&(t.Keyboard&&t.Keyboard.isVisible||t.cordova.plugins&&t.cordova.plugins.Keyboard&&t.cordova.plugins.Keyboard.isVisible)||0===s.closest(d.el).length&&(d.params.closeByBackdropClick&&d.params.backdrop&&d.backdropEl&&d.backdropEl===n||d.params.closeByOutsideClick)&&d.close()}function h(o){27===o.keyCode&&d.params.closeOnEscape&&d.close()}return d.open=function(o){var n=!1,t=d.params,i=t.targetEl,r=t.targetX,l=t.targetY,c=t.targetWidth,p=t.targetHeight;return d.params.convertToPopover&&(i||void 0!==r&&void 0!==l)&&(d.params.forceToPopover||e.device.ios&&e.device.ipad||e.width>=768||e.device.desktop&&"aurora"===e.theme)&&(n=!0),n&&d.popoverHtml?((u=e.popover.create({content:d.popoverHtml,backdrop:d.params.backdrop,targetEl:i,targetX:r,targetY:l,targetWidth:c,targetHeight:p,on:{open:function(){d.$el||(d.$el=u.$el),d.$el.trigger("modal:open "+d.type.toLowerCase()+":open"),d.emit("local::open modalOpen "+d.type+"Open",d)},opened:function(){d.$el||(d.$el=u.$el),d.$el.trigger("modal:opened "+d.type.toLowerCase()+":opened"),d.emit("local::opened modalOpened "+d.type+"Opened",d)},close:function(){d.$el||(d.$el=u.$el),d.$el.trigger("modal:close "+d.type.toLowerCase()+":close"),d.emit("local::close modalClose "+d.type+"Close",d)},closed:function(){d.$el||(d.$el=u.$el),d.$el.trigger("modal:closed "+d.type.toLowerCase()+":closed"),d.emit("local::closed modalClosed "+d.type+"Closed",d)}}})).open(o),u.once("popoverOpened",(function(){u.$el.find(".list-button, .item-link").each((function(o,e){a(e).on("click",f)}))})),u.once("popoverClosed",(function(){u.$el.find(".list-button, .item-link").each((function(o,e){a(e).off("click",f)})),s.nextTick((function(){u.destroy(),u=void 0}))}))):(d.$el=d.actionsHtml?a(d.actionsHtml):d.$el,d.$el[0].f7Modal=d,d.groups&&(d.$el.find(".actions-button").each((function(o,e){a(e).on("click",f)})),d.once("actionsClosed",(function(){d.$el.find(".actions-button").each((function(o,e){a(e).off("click",f)}))}))),d.el=d.$el[0],m.call(d,o)),d},d.close=function(o){return u?u.close(o):v.call(d,o),d},s.extend(d,{app:e,$el:c,el:c?c[0]:void 0,$backdropEl:p,backdropEl:p&&p[0],type:"actions"}),d.params.closeOnEscape&&(d.on("open",(function(){a(n).on("keydown",h)})),d.on("close",(function(){a(n).off("keydown",h)}))),d.on("opened",(function(){(d.params.closeByBackdropClick||d.params.closeByOutsideClick)&&e.on("click",b)})),d.on("close",(function(){(d.params.closeByBackdropClick||d.params.closeByOutsideClick)&&e.off("click",b)})),c&&(c[0].f7Modal=d),d}return o&&(e.__proto__=o),e.prototype=Object.create(o&&o.prototype),e.prototype.constructor=e,e.prototype.render=function(){if(this.params.render)return this.params.render.call(this,this);var o=this.groups,e=this.params.cssClass;return('\n      <div class="actions-modal'+(this.params.grid?" actions-grid":"")+" "+(e||"")+'">\n        '+o.map((function(o){return'<div class="actions-group">\n            '+o.map((function(o){var e=["actions-"+(o.label?"label":"button")],n=o.color,t=o.bg,a=o.bold,s=o.disabled,i=o.label,r=o.text,l=o.icon;return n&&e.push("color-"+n),t&&e.push("bg-color-"+t),a&&e.push("actions-button-bold"),s&&e.push("disabled"),i?'<div class="'+e.join(" ")+'">'+r+"</div>":('\n                <div class="'+e.join(" ")+'">\n                  '+(l?'<div class="actions-button-media">'+l+"</div>":"")+'\n                  <div class="actions-button-text">'+r+"</div>\n                </div>").trim()})).join("")+"\n          </div>"})).join("")+"\n      </div>\n    ").trim()},e.prototype.renderPopover=function(){if(this.params.renderPopover)return this.params.renderPopover.call(this,this);var o=this.groups;return('\n      <div class="popover popover-from-actions '+(this.params.cssClass||"")+'">\n        <div class="popover-inner">\n          '+o.map((function(o){return'\n            <div class="list">\n              <ul>\n                '+o.map((function(o){var e=[],n=o.color,t=o.bg,a=o.bold,s=o.disabled,i=o.label,r=o.text,l=o.icon;return n&&e.push("color-"+n),t&&e.push("bg-color-"+t),a&&e.push("popover-from-actions-bold"),s&&e.push("disabled"),i?(e.push("popover-from-actions-label"),'<li class="'+e.join(" ")+'">'+r+"</li>"):l?(e.push("item-link item-content"),'\n                      <li>\n                        <a class="'+e.join(" ")+'">\n                          <div class="item-media">\n                            '+l+'\n                          </div>\n                          <div class="item-inner">\n                            <div class="item-title">\n                              '+r+"\n                            </div>\n                          </div>\n                        </a>\n                      </li>\n                    "):(e.push("list-button"),'\n                    <li>\n                      <a class="'+e.join(" ")+'">'+r+"</a>\n                    </li>\n                  ")})).join("")+"\n              </ul>\n            </div>\n          "})).join("")+"\n        </div>\n      </div>\n    ").trim()},e}(i),c={name:"actions",params:{actions:{convertToPopover:!0,forceToPopover:!1,backdrop:!0,backdropEl:void 0,cssClass:null,closeByBackdropClick:!0,closeOnEscape:!1,render:null,renderPopover:null}},static:{Actions:l},create:function(){this.actions=r({app:this,constructor:l,defaultSelector:".actions-modal.modal-in"})},clicks:{".actions-open":function(o,e){void 0===e&&(e={});this.actions.open(e.actions,e.animate,o)},".actions-close":function(o,e){void 0===e&&(e={});this.actions.close(e.actions,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[c.name])return;o.use(c),o.instance&&(o.instance.useModuleParams(c,o.instance.params),o.instance.useModule(c))}return c}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))