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