UNPKG

chicago

Version:

A front-end JavaScript library for user-interface developers.

16 lines (15 loc) 5.67 kB
/*! * Chicago - A front-end JavaScript library for user-interface developers. * * Copyright (c) 2015 Erik Nielsen * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * https://nielse63.github.io/Chicago/ * * Version: 1.1.0 * */ !function(a,b){var c,d=a.Chicago||null;d&&(c=b(d,a,a.document)),"function"==typeof define&&define.amd&&define("chicago-modal",["chicago"],function(){return c||b(d,a,a.document)})}("undefined"!=typeof window?window:"undefined"!=typeof this.window?this.window:this,function(a,b,c){a.module("modal",{defaults:{keyboard:!0,backgroundClose:!0,transition:"drop"},template:{options:{id:"",close:!0,title:"",content:"",footer:""},html:function(){var a=['<section class="modal" id="{{id}}">','<div class="modal-dialog">',"{{#close}}",'<a href="#" class="close"></a>',"{{/close}}","{{#title && title.length}}",'<header class="modal-header">',"<h2>{{title}}</h2>","</header>","{{/title}}",'<div class="modal-body">',"{{content}}","</div>","{{#footer && footer.length}}",'<footer class="modal-footer">',"{{footer}}","</footer>","{{/footer}}","</div>","</section>"];return a.join("")}(),css:{".modal, .modal *":{"box-sizing":"border-box"},".modal":{position:"fixed","z-index":1e3,top:0,right:0,bottom:0,left:0,display:"none","overflow-y":"auto",transition:"opacity 200ms linear",opacity:0,"background-color":"rgba(0, 0, 0, 0.5)","touch-action":"cross-slide-y pinch-zoom double-tap-zoom"},".modal-page, .modal-page body":{overflow:"hidden"},".modal-dialog":{width:600,"max-width":"calc(100% - 20px)",padding:"20px",margin:"50px auto",position:"relative",transition:"opacity 300ms linear, transform 300ms ease-out, top 300ms ease-out",transform:"translate3d(0, -100px, 0)",opacity:0,"background-color":"#fff","box-shadow":"0 0 10px rgba(0, 0, 0, .3)"},".close":{position:"absolute",display:"block",width:12,height:12,top:10,right:10,opacity:.75,color:"inherit"},".close:before":{content:'"\\00d7"',"font-size":20,"font-family":"Helvetica, Arial, sans-serif",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",height:12,"line-height":.6,width:12},".modal-header, .modal-footer":{margin:"-20px -20px 15px",padding:20,"border-bottom":"1px solid #e5e5e5","border-radius":"4px 4px 0 0","background-color":"#fafafa","background-clip":"padding-box"},".modal-footer":{margin:"15px -20px -20px","border-bottom":0,"border-top":"1px solid #e5e5e5"},".open .modal-dialog":{transform:"translate3d(0, 0, 0)",opacity:1},".modal.open":{opacity:1},".modal-header h2":{margin:0},".modal-drop .modal-dialog":{transform:"translate3d(0, -100px, 0)"},".modal-drop.open .modal-dialog":{transform:"translate3d(0, 0, 0)"},".modal-scale .modal-dialog":{transform:"scale(0.7)"},".modal-scale.open .modal-dialog":{transform:"scale(1)"},".modal-fall .modal-dialog":{transform:"scale(1.3)"},".modal-fall.open .modal-dialog":{transform:"scale(1)"},".modal-slide-right .modal-dialog":{transform:"translate3d(100%, 0, 0)"},".modal-slide-right.open .modal-dialog":{transform:"translate3d(0, 0, 0)"},".modal-slide-right.hiding .modal-dialog":{transform:"translate3d(-100%, 0, 0)"},".modal-slide-left .modal-dialog":{transform:"translate3d(-100%, 0, 0)"},".modal-slide-left.open .modal-dialog":{transform:"translate3d(0, 0, 0)"},".modal-slide-left.hiding .modal-dialog":{transform:"translate3d(100%, 0, 0)"},".modal-flip-horizontal":{perspective:1300},".modal-flip-horizontal .modal-dialog":{"transform-style":"preserve-3d",transform:"rotateY(-90deg)"},".modal-flip-horizontal.open .modal-dialog":{transform:"rotateY(0deg)"},".modal-flip-vertical":{perspective:1300},".modal-flip-vertical .modal-dialog":{"transform-style":"preserve-3d",transform:"rotateX(-90deg)"},".modal-flip-vertical.open .modal-dialog":{transform:"rotateX(0deg)"}}},is:{active:!1},boot:function(){},init:function(){this.paddingdir="padding-"+("ltr"===a.langdirection?"right":"left"),this.dialog=this.element.find(".modal-dialog"),this.element.addClass("modal-"+this.options.transition),this._setAria(),this.on("click",function(b){return function(c){var d=a.$(c.target);return b.options.close&&d.hasClass("close")?(c.preventDefault(),b.hide()):d[0]===b.element[0]&&b.options.backgroundClose?b.hide():void 0}}(this))},destroy:function(){return this.is.active?(this.one("didhide",function(a){return function(){a.is.active=!1,a.destroy()}}(this)),this.hide()):(this.element.remove(),void(a.elements.modal=null))},show:function(){return this.element.length&&!this.is.active?(this.is.active=!0,a.elements.modal?a.elements.modal.one("didhide",function(a){return function(){a.show()}}(this)).hide():(a.elements.modal=this,this.trigger("willshow"),this.element.addClass("showing"),this.one(a.support.transition.end,function(a){return function(){a._setAria(),a._resize(),a.element.removeClass("showing"),a.trigger("didshow")}}(this)),this.element.removeClass("open").show(),this._resize(),a.$html.addClass("modal-page").height(),this.element.addClass("open"),this)):void 0},hide:function(){return this.element.length&&this.is.active?(this.trigger("willhide"),this.element.addClass("hiding"),this.one(a.support.transition.end,function(b){return function(){b._setAria(),b.element.hide(),b.element.removeClass("hiding"),a.$html.removeClass("modal-page").height(),a.$body.css(b.paddingdir,""),a.elements.modal=null,b.is.active=!1,b.trigger("didhide")}}(this)),this.element.removeClass("open"),this):void 0},_resize:function(){var c=b.innerWidth-a.$body.width();a.$body.css(this.paddingdir,c),this.element.css("overflow-y",c?"scroll":"auto")},_setAria:function(){this.element.attr("aria-hidden",!this.element.hasClass("open"))}})});