center_popup - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

lib/center-popup.js

@@ -45,3 +45,3 @@ /*!
   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}}",
+    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 popupFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes popupFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes popupFadeInDown{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1}}",
         t = document.createElement("style");
@@ -89,3 +89,3 @@
     // 事件 Events
-    self.open = function() {
+    self.open = function(fn) {
       if (self.openStatus) return error('Popup is now openned!');
@@ -95,2 +95,3 @@
       self.openStatus = true;
+      fn !== void 0 && typeof fn === 'function' && fn(template);
       return appendToBody(template);
@@ -110,8 +111,12 @@ }
     self.fadeIn = function(s = .3) {
-      if (self.openStatus) return error('Popup is now openned!');
+      self.open(template => {
+        template.style.animation = 'popupFadeIn '+s+'s';
+      });
+    }
 
-      const template = temp(self.node);
-      self.openStatus = true;
-      template.style.animation = 'fadeIn '+s+'s';
-      return appendToBody(template);
+    self.fadeInDown = function(s = .3) {
+      self.open(template => {
+        template.style.animation = 'popupFadeIn '+s+'s';
+        self.node.parentNode.style.animation = 'popupFadeInDown '+s+'s';
+      });
     }
@@ -128,3 +133,3 @@
       self.openStatus = false;
-      wrapper.style.animation = 'fadeOut '+s+'s';
+      wrapper.style.animation = 'popupFadeOut '+s+'s';
     }
@@ -131,0 +136,0 @@

package.json

 {
   "name": "center_popup",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A library for creating a centered popup window",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -86,3 +86,3 @@ # center-popup.js
 
-- **open()**
+- **open(fn)**
 
@@ -92,2 +92,18 @@ Type: `String`
   Display a centered popup window.
+
+  fn => A function, which execute before append popup window into body, 
+
+  you can use this function to do anything you like to the popup window.
+
+  it receives one argument, that argument is the popup window you are going to append.
+
+  ```js
+  const popup = new Popup('<p>Hello World</p>');
+
+  popup.open(template => {
+    console.log(template);
+  })
+
+  // <div class="popup-wrapper">...</div>
+  ```
   
@@ -104,2 +120,8 @@ - **close()**
 
+- **fadeInDown(seconds)**
+
+  Type: `Number` Default: `0.3`
+
+  FadeInDown the centered popup window in specific time.
+
 - **fadeOut(seconds)**
@@ -106,0 +128,0 @@

New alerts

License Policy Violation

License

This 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

License

This 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

12741

increased by6.52%

Lines of code

103

increased by6.19%

Number of lines in readme file

133

increased by19.82%

No dependency changes