framework7/components/actions.js

Full featured mobile HTML framework for building iOS & Android apps

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