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.4 to 1.0.5
@@ -1,1 +0,1 @@ | ||
| module.exports = 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)}} | ||
| "use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,n){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).Popup=n()}(void 0,function(){function r(e){if("undefined"!=typeof console&&console.error)return console.error.call(console,e)}function i(e){return(new DOMParser).parseFromString(e,"text/html").body.childNodes[0]}function u(){return document.querySelectorAll(".popup-wrapper")[0]}function a(e){return e.parentNode.removeChild(e)}function s(e){return document.body.insertAdjacentElement("beforeend",e)}return function(e,n){var t=1<arguments.length&&void 0!==n?n:{},o=this;o.openStatus=!1,o.node=function(e){return null!==e&&"object"===_typeof(e)}(e)?e:i(e),o.options=Object.assign({display:"block",success:function(){}},t),o.node.style.display="none",o.options.success.call(o),function(){var e=".popup-wrapper{position:fixed;width:100vw;height:100vh;top:0;left:0;background:rgba(0, 0, 0, 0.7)}.popup-wrapper .popup-inner{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;margin:auto;background:#fff;max-width:576px;max-height:90%;overflow:auto}@media (max-width: 768px){.popup-wrapper .popup-inner{max-width:320px}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}",n=document.createElement("style");n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(n)}();function p(e){var n=i('<div class="popup-wrapper"></div>'),t=i('<div class="popup-inner"></div>');return e.style.display=o.options.display,t.insertAdjacentElement("beforeend",e),n.insertAdjacentElement("beforeend",t),n}o.open=function(){if(o.openStatus)return r("Popup is now openned!");var e=p(o.node);return o.openStatus=!0,s(e)},o.close=function(){if(!o.openStatus)return r("Popup is now closed!");var e=u();o.openStatus=!1,a(e)},o.fadeIn=function(e){if(o.openStatus)return r("Popup is now openned!");var n=p(o.node);return o.openStatus=!0,n.style.animation="fadeIn "+e+"s",s(n)},o.fadeOut=function(e){if(!o.openStatus)return r("Popup is now closed!");var n=u();n.addEventListener("animationend",function(){a(n)}),o.openStatus=!1,n.style.animation="fadeOut "+e+"s"}}}); |
| /*! | ||
| * center-popup.js | ||
| * https://github.com/johnnywang1994/center-popup.js | ||
| * Under the MIT License | (c) 2019 Johnny Wang | ||
| * center-popup.js v1.0.4 | ||
| * (c) 2019 Johnny Wang | ||
| * Released under the MIT License. | ||
| */ | ||
| module.exports = 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); | ||
| (function (global, factory){ | ||
| // Nodejs 環境 | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| // AMD 環境 | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| // Browser 環境 | ||
| (global = global || self, global.Popup = factory()); | ||
| }(this, function() { 'use strict'; | ||
| /* */ | ||
| const error = msg => { | ||
| if (typeof console !== 'undefined' && console.error) { | ||
| return console.error.call(console, msg); | ||
| } | ||
| } | ||
| open() { | ||
| const self = this; | ||
| Popup.layout(self.dom, self.opts); | ||
| document.querySelectorAll('.popup_out_wrapper')[0].style.opacity = '1.0'; | ||
| const isObject = v => { | ||
| return v !== null && typeof v === 'object'; | ||
| } | ||
| 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); | ||
| /* */ | ||
| const getNode = str => { | ||
| return new DOMParser().parseFromString(str, 'text/html').body.childNodes[0]; | ||
| } | ||
| close() { | ||
| let target = document.querySelectorAll('.popup_out_wrapper')[0]; | ||
| target.parentNode.removeChild(target); | ||
| const getWrapper = () => { | ||
| return document.querySelectorAll('.popup-wrapper')[0]; | ||
| } | ||
| 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); | ||
| const removeNode = w => { | ||
| return w.parentNode.removeChild(w); | ||
| } | ||
| 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;}", | ||
| const appendToBody = t => { | ||
| return document.body.insertAdjacentElement('beforeend', t); | ||
| } | ||
| const setStyle = function() { | ||
| var e = ".popup-wrapper{position:fixed;width:100vw;height:100vh;top:0;left:0;background:rgba(0, 0, 0, 0.7)}.popup-wrapper .popup-inner{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;margin:auto;background:#fff;max-width:576px;max-height:90%;overflow:auto}@media (max-width: 768px){.popup-wrapper .popup-inner{max-width:320px}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}", | ||
| 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;}'; | ||
| } | ||
| t.styleSheet ? t.styleSheet.cssText = e : t.appendChild(document.createTextNode(e)), document.getElementsByTagName("head")[0].appendChild(t); | ||
| } | ||
| /* */ | ||
| const Popup = function(node, options = {}) { | ||
| const self = this; | ||
| self.openStatus = false; // 開啟狀態 | ||
| self.node = isObject(node) ? node : getNode(node); | ||
| self.options = Object.assign({ | ||
| display: 'block', // 目標顯示類型，預設 block | ||
| success: function() {} // 事件處理，對自創元素添加事件使用 | ||
| }, options); | ||
| // Auto Hide | ||
| self.node.style.display = 'none'; | ||
| // Add Events on Node | ||
| self.options.success.call(self); | ||
| // Set CSS Styles | ||
| setStyle(); | ||
| // Create popup's element | ||
| const temp = node => { | ||
| const wrapper = getNode('<div class="popup-wrapper"></div>'), | ||
| inner = getNode('<div class="popup-inner"></div>'); | ||
| static layout(dom, opts) { | ||
| if (opts.type === 'image') { | ||
| Popup.image(dom); | ||
| } else if (opts.type === 'custom') { | ||
| Popup.custom(dom); | ||
| node.style.display = self.options.display; | ||
| inner.insertAdjacentElement('beforeend', node); | ||
| wrapper.insertAdjacentElement('beforeend', inner); | ||
| return wrapper; | ||
| } | ||
| // 事件 Events | ||
| self.open = function() { | ||
| if (self.openStatus) return error('Popup is now openned!'); | ||
| const template = temp(self.node); | ||
| self.openStatus = true; | ||
| return appendToBody(template); | ||
| } | ||
| self.close = function() { | ||
| if (!self.openStatus) return error('Popup is now closed!'); | ||
| const wrapper = getWrapper(); | ||
| self.openStatus = false; | ||
| removeNode(wrapper); | ||
| } | ||
| self.fadeIn = function(s) { | ||
| if (self.openStatus) return error('Popup is now openned!'); | ||
| const template = temp(self.node); | ||
| self.openStatus = true; | ||
| template.style.animation = 'fadeIn '+s+'s'; | ||
| return appendToBody(template); | ||
| } | ||
| self.fadeOut = function(s) { | ||
| if (!self.openStatus) return error('Popup is now closed!'); | ||
| const wrapper = getWrapper(); | ||
| wrapper.addEventListener('animationend', function() { | ||
| removeNode(wrapper); | ||
| }) | ||
| self.openStatus = false; | ||
| wrapper.style.animation = 'fadeOut '+s+'s'; | ||
| } | ||
| } | ||
| 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); | ||
| let popup_image = document.querySelectorAll('.popup_image')[0]; | ||
| popup_image.src = dom.dataset.src; | ||
| popup_image.addEventListener('load', function(){ | ||
| this.style.maxWidth = this.width + 'px'; | ||
| this.style.width = '100%'; | ||
| }); | ||
| } | ||
| static custom(dom) { | ||
| document.body.insertAdjacentHTML('beforeend', Popup.template); | ||
| document.querySelectorAll('.popup_in_wrapper')[0].insertAdjacentElement('beforeend', dom); | ||
| } | ||
| } | ||
| return Popup; | ||
| })); |
@@ -1,1 +0,1 @@ | ||
| module.exports = 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)}} | ||
| "use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,n){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).Popup=n()}(void 0,function(){function r(e){if("undefined"!=typeof console&&console.error)return console.error.call(console,e)}function i(e){return(new DOMParser).parseFromString(e,"text/html").body.childNodes[0]}function u(){return document.querySelectorAll(".popup-wrapper")[0]}function a(e){return e.parentNode.removeChild(e)}function s(e){return document.body.insertAdjacentElement("beforeend",e)}return function(e,n){var t=1<arguments.length&&void 0!==n?n:{},o=this;o.openStatus=!1,o.node=function(e){return null!==e&&"object"===_typeof(e)}(e)?e:i(e),o.options=Object.assign({display:"block",success:function(){}},t),o.node.style.display="none",o.options.success.call(o),function(){var e=".popup-wrapper{position:fixed;width:100vw;height:100vh;top:0;left:0;background:rgba(0, 0, 0, 0.7)}.popup-wrapper .popup-inner{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;margin:auto;background:#fff;max-width:576px;max-height:90%;overflow:auto}@media (max-width: 768px){.popup-wrapper .popup-inner{max-width:320px}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}",n=document.createElement("style");n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e)),document.getElementsByTagName("head")[0].appendChild(n)}();function p(e){var n=i('<div class="popup-wrapper"></div>'),t=i('<div class="popup-inner"></div>');return e.style.display=o.options.display,t.insertAdjacentElement("beforeend",e),n.insertAdjacentElement("beforeend",t),n}o.open=function(){if(o.openStatus)return r("Popup is now openned!");var e=p(o.node);return o.openStatus=!0,s(e)},o.close=function(){if(!o.openStatus)return r("Popup is now closed!");var e=u();o.openStatus=!1,a(e)},o.fadeIn=function(e){if(o.openStatus)return r("Popup is now openned!");var n=p(o.node);return o.openStatus=!0,n.style.animation="fadeIn "+e+"s",s(n)},o.fadeOut=function(e){if(!o.openStatus)return r("Popup is now closed!");var n=u();n.addEventListener("animationend",function(){a(n)}),o.openStatus=!1,n.style.animation="fadeOut "+e+"s"}}}); |
| { | ||
| "name": "center_popup", | ||
| "version": "1.0.4", | ||
| "version": "1.0.5", | ||
| "description": "A library for creating a centered popup window", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -11,3 +11,2 @@ # center-popup.js | ||
| ```js | ||
| import Popup from 'center_popup'; | ||
| const Popup = require('center_popup'); | ||
@@ -18,60 +17,69 @@ ``` | ||
| As a native plugin: | ||
| define the html element to use | ||
| ```js | ||
| // 1. Use for type "custom" | ||
| // define the html element to use | ||
| ```html | ||
| <div id="popup">Hello World</div> | ||
| ``` | ||
| // custom's opts sets the target choose for creating instance(which is ID popup element) | ||
| var opts = { target: '#popup', type: 'custom' }; | ||
| var popup = new Popup(document.getElementById('popup'), opts); | ||
| Create Instance | ||
| // Open this popup. | ||
| ```js | ||
| // will automatically hide the target | ||
| var popup = new Popup(document.getElementById('popup')); | ||
| // easily open it by | ||
| popup.open(); | ||
| // or | ||
| popup.fadeIn(0.3); | ||
| popup.fadeIn(.3); | ||
| // Close this popup. | ||
| // easily close it by | ||
| popup.close(); | ||
| // or | ||
| popup.fadeOut(0.3); | ||
| popup.fadeOut(.3); | ||
| ``` | ||
| You can also use string HTML as input | ||
| ```js | ||
| var popup = new Popup('<p>Hello World</p>'); | ||
| // 2. Use for type "image" | ||
| popup.open(); | ||
| ``` | ||
| // define the html element to use | ||
| <div id="popup" data-src="./example.jpg">Hello World</div> | ||
| Add event to string input, and dont have to addEvent every time you open | ||
| // custom's opts sets the image's style(also can be set by default class is 'popup_image') | ||
| var opts = { target: '#popup', type: 'image' }; | ||
| var popup = new Popup(document.getElementById('popup'), opts); | ||
| the popup window. | ||
| // Open this popup. | ||
| popup.open(); | ||
| // or | ||
| popup.fadeIn(0.3); | ||
| // Close this popup. | ||
| popup.close(); | ||
| // or | ||
| popup.fadeOut(0.3); | ||
| ```js | ||
| var popup = new Popup('<p>Hello World</p>', { | ||
| success() { | ||
| console.log(this); // Popup instance | ||
| this.node.addEventListener('click', function() { | ||
| alert('Trigger!'); | ||
| }); | ||
| } | ||
| }) | ||
| ``` | ||
| ## Options | ||
| - **target** | ||
| default: {} | ||
| - **display** | ||
| Type: `String` | ||
| set for target's dom name, eg. '#popup' | ||
| Default: block | ||
| - **type** | ||
| CSS display property for target to show. | ||
| Type: `String` Value: `custom` or `image` | ||
| - **success** | ||
| choose type of the popup window, now only support 'custom' & 'image'. | ||
| Type: `Function` | ||
| function which execute after node has been created, you can use this to | ||
| add events to you string input element | ||
@@ -78,0 +86,0 @@ ## Methods |
Sorry, the diff of this file is not supported yet
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
Improved metrics
- Total package byte prevSize
- increased by2.73%
11939
- Lines of code
- increased by46.97%
97
- Number of lines in readme file
- increased by7.77%
111
No dependency changes