Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
center_popup
Advanced tools
center_popup - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -1,1 +0,1 @@ | ||
| "use strict";!function(e){var t=".popup_out_wrapper{opacity:0;position:fixed;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}.popup_out_wrapper .popup_in_wrapper{text-align:center;height:100%}.popup_out_wrapper .popup_in_wrapper::before{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.popup_out_wrapper .popup_in_wrapper .popup_image_wrapper{width:auto;height:auto;display:inline-block;vertical-align:middle;padding:20px;}",p=document.createElement("style");p.styleSheet?p.styleSheet.cssText=t:p.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(p);var o=function(e,t){var p=this;return p.dom=e,p.opts=t,p};e.Popup=o;var r='<div class="popup_out_wrapper"><div class="popup_in_wrapper"></div></div>',i=function(e,t,p){"image"===p?function(e,t){document.body.insertAdjacentHTML("beforeend",r),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentHTML("beforeend",'<div class="popup_image_wrapper"><img class="popup_image" src="#" alt="#"></div>');var p=document.querySelectorAll(".popup_image")[0],o=Object.assign({},{display:"block","max-height":"600px","object-fit":"scale-down","box-sizing":"border-box"},t);for(var i in o)p.style[i]=o[i];p.src=e.dataset.src,p.onload=function(){this.style.maxWidth=this.width+"px",this.style.width="100%"}}(e,t):(p="custom")&&function(e,t){document.body.insertAdjacentHTML("beforeend",r),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentElement("beforeend",e);var p=Object.assign({},{width:"500px",height:"400px",background:"white","text-align":"left",display:"inline-block","vertical-align":"middle"},t);for(var o in p)e.style[o]=p[o]}(e,t)},n={open:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"image";i(this.dom,this.opts,e),document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"},fadeIn:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:.3,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"image";i(this.dom,this.opts,t),document.querySelectorAll(".popup_out_wrapper")[0].style.transition="all ease-in-out "+e+"s",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"},0)},close:function(){var e=document.querySelectorAll(".popup_out_wrapper")[0];e.parentNode.removeChild(e)},fadeOut:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:.3,t=document.querySelectorAll(".popup_out_wrapper")[0];document.querySelectorAll(".popup_out_wrapper")[0].style.transition="all ease-in-out "+e+"s",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="0"},0),setTimeout(function(){t.parentNode.removeChild(t)},1e3*e)}};for(var a in n)o.prototype[a]=n[a]}(window); | ||
| class Popup{constructor(e,t){this.dom=e,this.opts=t,Popup.template='<div class="popup_out_wrapper"><div class="popup_in_wrapper"></div></div>',Popup.initiate(t)}open(){const e=this;Popup.layout(e.dom,e.opts),document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"}fadeIn(e=.3){const t=this;Popup.layout(t.dom,t.opts),document.querySelectorAll(".popup_out_wrapper")[0].style.transition=e+"s ",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"},0)}close(){let e=document.querySelectorAll(".popup_out_wrapper")[0];e.parentNode.removeChild(e)}fadeOut(e=.3){let t=document.querySelectorAll(".popup_out_wrapper")[0];document.querySelectorAll(".popup_out_wrapper")[0].style.transition=e+"s ",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="0"},0),setTimeout(function(){t.parentNode.removeChild(t)},1e3*e)}static initiate(e){var t=".popup_out_wrapper{opacity:0;position:fixed;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}.popup_out_wrapper .popup_in_wrapper{text-align:center;height:100%}.popup_out_wrapper .popup_in_wrapper::before{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.popup_out_wrapper .popup_in_wrapper .popup_image_wrapper{width:auto;height:auto;display:inline-block;vertical-align:middle;padding:20px;}.popup_image_wrapper .popup_image{display: block;max-height:600px;object-fit:scale-down;box-sizing:border-box;}",p=document.createElement("style");"custom"===e.type&&(t+=e.target+" {width:500px;height:400px;background:#fff;text-align:left;display:inline-block;vertical-align:middle;}"),p.styleSheet?p.styleSheet.cssText=t:p.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(p)}static layout(e,t){"image"===t.type?Popup.image(e):"custom"===t.type&&Popup.custom(e)}static image(e){let t='<div class="popup_image_wrapper"><img class="popup_image" src="#" alt="#"></div>';document.body.insertAdjacentHTML("beforeend",Popup.template),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentHTML("beforeend",t);let p=document.querySelectorAll(".popup_image")[0];p.src=e.dataset.src,p.addEventListener("load",function(){this.style.maxWidth=this.width+"px",this.style.width="100%"})}static custom(e){document.body.insertAdjacentHTML("beforeend",Popup.template),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentElement("beforeend",e)}} |
@@ -6,107 +6,70 @@ /*! | ||
| */ | ||
| (function(global){ | ||
| // set popup_wrapper CSS stylesheet | ||
| var e = ".popup_out_wrapper{opacity:0;position:fixed;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}.popup_out_wrapper .popup_in_wrapper{text-align:center;height:100%}.popup_out_wrapper .popup_in_wrapper::before{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.popup_out_wrapper .popup_in_wrapper .popup_image_wrapper{width:auto;height:auto;display:inline-block;vertical-align:middle;padding:20px;}", t = document.createElement("style"); | ||
| t.styleSheet ? t.styleSheet.cssText = e : t.appendChild(document.createTextNode(e)), document.getElementsByTagName("head")[0].appendChild(t); | ||
| // instance create | ||
| var Popup = function(dom, opts){ | ||
| var self = this; | ||
| self.dom = dom; | ||
| self.opts = opts; | ||
| return self; | ||
| }; | ||
| // callout name defined | ||
| global.Popup = Popup; | ||
| class Popup { | ||
| constructor(dom, opts) { | ||
| this.dom = dom; | ||
| this.opts = opts; | ||
| Popup.template = '<div class="popup_out_wrapper"><div class="popup_in_wrapper"></div></div>'; | ||
| Popup.initiate(opts); | ||
| } | ||
| // default settings | ||
| var template = '<div class="popup_out_wrapper"><div class="popup_in_wrapper"></div></div>'; | ||
| var w_resize = function(f) { | ||
| var o = global.onresize; | ||
| if (typeof o != 'function'){ | ||
| global.onresize = f; | ||
| } else { | ||
| global.onresize = function(){ | ||
| if (o) o(); | ||
| f(); | ||
| }; | ||
| open() { | ||
| const self = this; | ||
| Popup.layout(self.dom, self.opts); | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '1.0'; | ||
| } | ||
| fadeIn(s = 0.3) { | ||
| const self = this; | ||
| Popup.layout(self.dom, self.opts); | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.transition = s + 's '; | ||
| setTimeout(function(){ document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '1.0'; }, 0); | ||
| } | ||
| close() { | ||
| let target = document.querySelectorAll('.popup_out_wrapper')[0]; | ||
| target.parentNode.removeChild(target); | ||
| } | ||
| fadeOut(s = 0.3) { | ||
| let target = document.querySelectorAll('.popup_out_wrapper')[0]; | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.transition = s + 's '; | ||
| setTimeout(function(){ document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '0'; }, 0); | ||
| setTimeout(function(){ target.parentNode.removeChild(target); }, s * 1000); | ||
| } | ||
| static initiate(opts) { | ||
| var e = ".popup_out_wrapper{opacity:0;position:fixed;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}.popup_out_wrapper .popup_in_wrapper{text-align:center;height:100%}.popup_out_wrapper .popup_in_wrapper::before{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.popup_out_wrapper .popup_in_wrapper .popup_image_wrapper{width:auto;height:auto;display:inline-block;vertical-align:middle;padding:20px;}.popup_image_wrapper .popup_image{display: block;max-height:600px;object-fit:scale-down;box-sizing:border-box;}", | ||
| t = document.createElement("style"); | ||
| if (opts.type === 'custom') { | ||
| e += opts.target + ' {width:500px;height:400px;background:#fff;text-align:left;display:inline-block;vertical-align:middle;}'; | ||
| } | ||
| }; | ||
| // type method | ||
| var image = function(dom, opts) { | ||
| var d_opts = { | ||
| 'display': 'block', | ||
| 'max-height': '600px', | ||
| 'object-fit': 'scale-down', | ||
| 'box-sizing': 'border-box' | ||
| }; | ||
| var image = '<div class="popup_image_wrapper"><img class="popup_image" src="#" alt="#"></div>'; | ||
| document.body.insertAdjacentHTML('beforeend', template); | ||
| t.styleSheet ? t.styleSheet.cssText = e : t.appendChild(document.createTextNode(e)), document.getElementsByTagName("head")[0].appendChild(t); | ||
| } | ||
| static layout(dom, opts) { | ||
| if (opts.type === 'image') { | ||
| Popup.image(dom); | ||
| } else if (opts.type === 'custom') { | ||
| Popup.custom(dom); | ||
| } | ||
| } | ||
| static image(dom) { | ||
| let image = '<div class="popup_image_wrapper"><img class="popup_image" src="#" alt="#"></div>'; | ||
| document.body.insertAdjacentHTML('beforeend', Popup.template); | ||
| document.querySelectorAll('.popup_in_wrapper')[0].insertAdjacentHTML('beforeend', image); | ||
| var popup_image = document.querySelectorAll('.popup_image')[0]; | ||
| var o = Object.assign({}, d_opts, opts); | ||
| for (let p in o) { | ||
| popup_image.style[p] = o[p]; | ||
| } | ||
| let popup_image = document.querySelectorAll('.popup_image')[0]; | ||
| popup_image.src = dom.dataset.src; | ||
| popup_image.onload = function(){ | ||
| popup_image.addEventListener('load', function(){ | ||
| this.style.maxWidth = this.width + 'px'; | ||
| this.style.width = '100%'; | ||
| } | ||
| }; | ||
| var custom = function(dom, opts) { | ||
| var d_opts = { | ||
| 'width': '500px', | ||
| 'height': '400px', | ||
| 'background': 'white', | ||
| 'text-align': 'left', | ||
| 'display': 'inline-block', | ||
| 'vertical-align': 'middle' | ||
| }; | ||
| document.body.insertAdjacentHTML('beforeend', template); | ||
| }); | ||
| } | ||
| static custom(dom) { | ||
| document.body.insertAdjacentHTML('beforeend', Popup.template); | ||
| document.querySelectorAll('.popup_in_wrapper')[0].insertAdjacentElement('beforeend', dom); | ||
| var o = Object.assign({}, d_opts, opts); | ||
| for (let p in o) { | ||
| dom.style[p] = o[p]; | ||
| } | ||
| }; | ||
| var layout = function(dom, opts, t) { | ||
| if (t === 'image') { | ||
| image(dom, opts); | ||
| } else if (t = 'custom') { | ||
| custom(dom, opts); | ||
| } | ||
| }; | ||
| // library methods | ||
| var methods = { | ||
| open: function(t = 'image'){ | ||
| layout(this.dom, this.opts, t); | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '1.0'; | ||
| }, | ||
| fadeIn: function(s = 0.3, t = 'image'){ | ||
| layout(this.dom, this.opts, t); | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.transition = 'all ease-in-out '+s+'s'; | ||
| setTimeout(function(){ document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '1.0'; }, 0); | ||
| }, | ||
| close: function(){ | ||
| var target = document.querySelectorAll('.popup_out_wrapper')[0]; | ||
| target.parentNode.removeChild(target); | ||
| }, | ||
| fadeOut: function(s = 0.3){ | ||
| var target = document.querySelectorAll('.popup_out_wrapper')[0]; | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.transition = 'all ease-in-out '+s+'s'; | ||
| setTimeout(function(){ document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '0'; }, 0); | ||
| setTimeout(function(){ target.parentNode.removeChild(target); }, s * 1000); | ||
| } | ||
| }; | ||
| // set methods to prototype | ||
| for (let p in methods) { | ||
| Popup.prototype[p] = methods[p]; | ||
| }; | ||
| })(window); | ||
| } | ||
| } |
@@ -1,1 +0,1 @@ | ||
| "use strict";!function(e){var t=".popup_out_wrapper{opacity:0;position:fixed;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}.popup_out_wrapper .popup_in_wrapper{text-align:center;height:100%}.popup_out_wrapper .popup_in_wrapper::before{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.popup_out_wrapper .popup_in_wrapper .popup_image_wrapper{width:auto;height:auto;display:inline-block;vertical-align:middle;padding:20px;}",p=document.createElement("style");p.styleSheet?p.styleSheet.cssText=t:p.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(p);var o=function(e,t){var p=this;return p.dom=e,p.opts=t,p};e.Popup=o;var r='<div class="popup_out_wrapper"><div class="popup_in_wrapper"></div></div>',i=function(e,t,p){"image"===p?function(e,t){document.body.insertAdjacentHTML("beforeend",r),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentHTML("beforeend",'<div class="popup_image_wrapper"><img class="popup_image" src="#" alt="#"></div>');var p=document.querySelectorAll(".popup_image")[0],o=Object.assign({},{display:"block","max-height":"600px","object-fit":"scale-down","box-sizing":"border-box"},t);for(var i in o)p.style[i]=o[i];p.src=e.dataset.src,p.onload=function(){this.style.maxWidth=this.width+"px",this.style.width="100%"}}(e,t):(p="custom")&&function(e,t){document.body.insertAdjacentHTML("beforeend",r),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentElement("beforeend",e);var p=Object.assign({},{width:"500px",height:"400px",background:"white","text-align":"left",display:"inline-block","vertical-align":"middle"},t);for(var o in p)e.style[o]=p[o]}(e,t)},n={open:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"image";i(this.dom,this.opts,e),document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"},fadeIn:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:.3,t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"image";i(this.dom,this.opts,t),document.querySelectorAll(".popup_out_wrapper")[0].style.transition="all ease-in-out "+e+"s",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"},0)},close:function(){var e=document.querySelectorAll(".popup_out_wrapper")[0];e.parentNode.removeChild(e)},fadeOut:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:.3,t=document.querySelectorAll(".popup_out_wrapper")[0];document.querySelectorAll(".popup_out_wrapper")[0].style.transition="all ease-in-out "+e+"s",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="0"},0),setTimeout(function(){t.parentNode.removeChild(t)},1e3*e)}};for(var a in n)o.prototype[a]=n[a]}(window); | ||
| class Popup{constructor(e,t){this.dom=e,this.opts=t,Popup.template='<div class="popup_out_wrapper"><div class="popup_in_wrapper"></div></div>',Popup.initiate(t)}open(){const e=this;Popup.layout(e.dom,e.opts),document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"}fadeIn(e=.3){const t=this;Popup.layout(t.dom,t.opts),document.querySelectorAll(".popup_out_wrapper")[0].style.transition=e+"s ",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="1.0"},0)}close(){let e=document.querySelectorAll(".popup_out_wrapper")[0];e.parentNode.removeChild(e)}fadeOut(e=.3){let t=document.querySelectorAll(".popup_out_wrapper")[0];document.querySelectorAll(".popup_out_wrapper")[0].style.transition=e+"s ",setTimeout(function(){document.querySelectorAll(".popup_out_wrapper")[0].style.opacity="0"},0),setTimeout(function(){t.parentNode.removeChild(t)},1e3*e)}static initiate(e){var t=".popup_out_wrapper{opacity:0;position:fixed;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.4)}.popup_out_wrapper .popup_in_wrapper{text-align:center;height:100%}.popup_out_wrapper .popup_in_wrapper::before{content:'';display:inline-block;height:100%;width:0;vertical-align:middle}.popup_out_wrapper .popup_in_wrapper .popup_image_wrapper{width:auto;height:auto;display:inline-block;vertical-align:middle;padding:20px;}.popup_image_wrapper .popup_image{display: block;max-height:600px;object-fit:scale-down;box-sizing:border-box;}",p=document.createElement("style");"custom"===e.type&&(t+=e.target+" {width:500px;height:400px;background:#fff;text-align:left;display:inline-block;vertical-align:middle;}"),p.styleSheet?p.styleSheet.cssText=t:p.appendChild(document.createTextNode(t)),document.getElementsByTagName("head")[0].appendChild(p)}static layout(e,t){"image"===t.type?Popup.image(e):"custom"===t.type&&Popup.custom(e)}static image(e){let t='<div class="popup_image_wrapper"><img class="popup_image" src="#" alt="#"></div>';document.body.insertAdjacentHTML("beforeend",Popup.template),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentHTML("beforeend",t);let p=document.querySelectorAll(".popup_image")[0];p.src=e.dataset.src,p.addEventListener("load",function(){this.style.maxWidth=this.width+"px",this.style.width="100%"})}static custom(e){document.body.insertAdjacentHTML("beforeend",Popup.template),document.querySelectorAll(".popup_in_wrapper")[0].insertAdjacentElement("beforeend",e)}} |
| { | ||
| "name": "center_popup", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "A library for creating a centered popup window", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -15,9 +15,9 @@ # center-popup.js | ||
| // custom's opts sets the target choose for creating instance(which is ID popup element) | ||
| var opts = { 'width': '400px', 'height': '300px' }; | ||
| var opts = { target: '#popup', type: 'custom' }; | ||
| var popup = new Popup(document.getElementById('popup'), opts); | ||
| // Open this popup. | ||
| popup.open('custom'); | ||
| popup.open(); | ||
| // or | ||
| popup.fadeIn(0.3, 'custom'); | ||
| popup.fadeIn(0.3); | ||
@@ -37,9 +37,9 @@ // Close this popup. | ||
| // custom's opts sets the image's style(also can be set by default class is 'popup_image') | ||
| var opts = { 'border': '5px solid black' }; | ||
| var opts = { target: '#popup', type: 'image' }; | ||
| var popup = new Popup(document.getElementById('popup'), opts); | ||
| // Open this popup. | ||
| popup.open('image'); | ||
| popup.open(); | ||
| // or | ||
| popup.fadeIn(0.3, 'image'); | ||
| popup.fadeIn(0.3); | ||
@@ -54,25 +54,20 @@ // Close this popup. | ||
| - **width** | ||
| - **target** | ||
| Type: `Number` Default: `500` | ||
| Type: `String` | ||
| The popup css width. | ||
| set for target's dom name, eg. '#popup' | ||
| - **height** | ||
| - **type** | ||
| Type: `Number` Default: `400` | ||
| Type: `String` Value: `custom` or `image` | ||
| The popup css height. | ||
| - **background** | ||
| choose type of the popup window, now only support 'custom' & 'image'. | ||
| Type: `color` Default: `white` | ||
| The popup css background setting | ||
| ## Methods | ||
| - **open(type)** | ||
| - **open()** | ||
| Type: `String` Default: `image`(can only use: `image` or `custom`) | ||
| Type: `String` | ||
@@ -85,8 +80,6 @@ Display a centered popup window. | ||
| - **fadeIn(seconds, type)** | ||
| - **fadeIn(seconds)** | ||
| seconds => Type: `Number` Default: `0.3` | ||
| Type: `Number` Default: `0.3` | ||
| type => Type: `String` Default: `image`(can only use: `image` or `custom`) | ||
| FadeIn the centered popup window in specific time. | ||
@@ -93,0 +86,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-13.07%
11442
- Lines of code
- decreased by-35.92%
66
- Number of lines in readme file
- decreased by-7.07%
92
No dependency changes