bulma-toast - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/bulma-toast.min.js

@@ -1,2 +0,6 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.bulmaToast={})}(this,function(t){"use strict";var e={message:"Your message here",duration:2e3,position:"top-right"},n=!1,i={},o={};t.toast=function(t){var s;n||(s="width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;",(i={noticesTopLeft:document.createElement("div"),noticesTopRight:document.createElement("div"),noticesBottomLeft:document.createElement("div"),noticesBottomRight:document.createElement("div"),noticesTopCenter:document.createElement("div"),noticesBottomCenter:document.createElement("div"),noticesCenter:document.createElement("div")}).noticesTopLeft.setAttribute("style",s+"left:0;top:0;text-align:left;align-items:flex-start;"),i.noticesTopRight.setAttribute("style",s+"right:0;top:0;text-align:right;align-items:flex-end;"),i.noticesBottomLeft.setAttribute("style",s+"left:0;bottom:0;text-align:left;align-items:flex-start;"),i.noticesBottomRight.setAttribute("style",s+"right:0;bottom:0;text-align:right;align-items:flex-end;"),i.noticesTopCenter.setAttribute("style",s+"top:0;left:0;right:0;text-align:center;align-items:center;"),i.noticesBottomCenter.setAttribute("style",s+"bottom:0;left:0;right:0;text-align:center;align-items:center;"),i.noticesCenter.setAttribute("style",s+"top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;"),Object.keys(i).forEach(function(t){return document.body.appendChild(i[t])}),o={"top-left":i.noticesTopLeft,"top-right":i.noticesTopRight,"top-center":i.noticesTopCenter,"bottom-left":i.noticesBottomLeft,"bottom-right":i.noticesBottomRight,"bottom-center":i.noticesBottomCenter,center:i.noticesCenter},n=!0);var r=Object.assign({},e,t),c=function(t){var e=document.createElement("div"),n="width:auto;opacity:0.8;pointer-events:auto;display:inline-flex;",i=["notification"];if(t.type&&i.push(t.type),e.classList=i.join(" "),t.dismissible){var o=document.createElement("button");o.className="delete",o.addEventListener("click",function(){e.remove()}),e.insertAdjacentElement("afterbegin",o)}else n+="padding: 1.25rem 1.5rem";return e.setAttribute("style",n),e.insertAdjacentText("beforeend",t.message),e}(r);(o[r.position]||o[e.position]).appendChild(c),setTimeout(function(){c.remove()},r.duration)},Object.defineProperty(t,"__esModule",{value:!0})});
-//# sourceMappingURL=bulma-toast.min.js.map
+/*!
+ * bulma-toast 1.1.0 
+ * (c) 2018-present @rfoel <[e-mail]> 
+ * Released under the MIT License.
+ */
+(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.bulmaToast={})})(this,function(a){'use strict';function b(){h={noticesTopLeft:document.createElement('div'),noticesTopRight:document.createElement('div'),noticesBottomLeft:document.createElement('div'),noticesBottomRight:document.createElement('div'),noticesTopCenter:document.createElement('div'),noticesBottomCenter:document.createElement('div'),noticesCenter:document.createElement('div')};h.noticesTopLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;top:0;text-align:left;align-items:flex-start;`),h.noticesTopRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;top:0;text-align:right;align-items:flex-end;`),h.noticesBottomLeft.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}left:0;bottom:0;text-align:left;align-items:flex-start;`),h.noticesBottomRight.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}right:0;bottom:0;text-align:right;align-items:flex-end;`),h.noticesTopCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;text-align:center;align-items:center;`),h.noticesBottomCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}bottom:0;left:0;right:0;text-align:center;align-items:center;`),h.noticesCenter.setAttribute('style',`${'width:100%;z-index:99999;position:fixed;pointer-events:none;display:flex;flex-direction:column;padding:15px;'}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`),Object.keys(h).forEach(a=>document.body.appendChild(h[a])),i={"top-left":h.noticesTopLeft,"top-right":h.noticesTopRight,"top-center":h.noticesTopCenter,"bottom-left":h.noticesBottomLeft,"bottom-right":h.noticesBottomRight,"bottom-center":h.noticesBottomCenter,center:h.noticesCenter},g=!0}function c(a){g||b();let c=Object.assign({},f,a);const e=d(c),h=i[c.position]||i[f.position];h.appendChild(e)}function d(a){const b=document.createElement('div');let c=`width:auto;opacity:0.8;pointer-events:auto;display:inline-flex;`,d=['notification'];if(a.type&&d.push(a.type),b.classList=d.join(' '),a.dismissible){let a=document.createElement('button');a.className='delete',a.addEventListener('click',()=>{b.remove()}),b.insertAdjacentElement('afterbegin',a)}else c+='padding: 1.25rem 1.5rem';a.closeOnClick&&b.addEventListener('click',()=>{b.remove()}),b.setAttribute('style',c),b.insertAdjacentText('beforeend',a.message);const f=new e(()=>{b.remove()},a.duration);return a.pauseOnHover&&(console.log('added pauseOnHover'),b.addEventListener('mouseover',()=>{f.pause()}),b.addEventListener('mouseout',()=>{f.resume()})),b}function e(a,b){let c,d,e=b;this.pause=function(){window.clearTimeout(c),e-=new Date-d},this.resume=function(){d=new Date,window.clearTimeout(c),c=window.setTimeout(a,e)},this.resume()}const f={message:'Your message here',duration:2e3,position:'top-right',closeOnClick:!0};let g=!1,h={},i={};a.toast=c,Object.defineProperty(a,'__esModule',{value:!0})});

package.json

 {
   "name": "bulma-toast",
-  "version": "1.0.2",
-  "description": "",
-  "main": "dist/bulma-toast.min.js",
+  "version": "1.1.0",
+  "description": "Bulma's pure JavaScript extension to display toasts",
+  "main": "dist/bulma-toast.cjs.js",
+  "module": "dist/bulma-toast.esm.js",
+  "browser": "dist/bulma-toast.min.js",
   "scripts": {
-    "dev": "browser-sync start --server . --files \"src/index.js, index.html\"",
-    "build": "bili --format umd,umd-min"
+    "dev": "rollup -c -w",
+    "build": "rollup -c"
   },
@@ -27,4 +29,4 @@ "repository": {
   "devDependencies": {
-    "bili": "^3.1.2",
-    "browser-sync": "^2.24.6"
+    "rollup": "^0.63.5",
+    "rollup-plugin-babel-minify": "^5.0.0"
   },
@@ -37,2 +39,2 @@ "files": [
   ]
-}
+}

README.md

@@ -19,3 +19,5 @@ # bulma-toast
 - `position`: Position where the notification will be shown. The default is `top-right`, so if you want it to be on the top-left just add `top-left` to this option. The available options are: `top-left`, `top-center`, `top-right`, `center`, `bottom-left`, `bottom-center`, and `bottom-right`.
-- `dismissible`: Whether the notification is dismissible or not. Default is `false`.
+- `dismissible`: Whether the notification will have a close button or not. Default is `false`.
+- `pauseOnHover`: Pauses delay when hovering the notification. Default is `false`.
+- `closeOnClick`: Dismisses the notification when clicked. Default is `true`.
 
@@ -32,5 +34,8 @@ ## Install
 
-1.  Link to bulma-toast.min.js `<script src="bulma-toast.min.js"></script>`
+1.  Link to bulma-toast.min.js
+    ```html
+    <script src="bulma-toast.min.js"></script>
+    ```
 
-2.  use bulma-toast to display a toast
+2.  Use bulma-toast to display a toast
     ```js
@@ -37,0 +42,0 @@ bulmaToast.toast({ message: 'Hello There' })

src/index.js

@@ -5,2 +5,3 @@ const defaults = {
   position: 'top-right',
+  closeOnClick: true,
 }
@@ -26,17 +27,17 @@
 
-  containers.noticesTopLeft.setAttribute('style', style + 'left:0;top:0;text-align:left;align-items:flex-start;')
-  containers.noticesTopRight.setAttribute('style', style + 'right:0;top:0;text-align:right;align-items:flex-end;')
-  containers.noticesBottomLeft.setAttribute('style', style + 'left:0;bottom:0;text-align:left;align-items:flex-start;')
-  containers.noticesBottomRight.setAttribute('style', style + 'right:0;bottom:0;text-align:right;align-items:flex-end;')
+  containers.noticesTopLeft.setAttribute('style', `${style}left:0;top:0;text-align:left;align-items:flex-start;`)
+  containers.noticesTopRight.setAttribute('style', `${style}right:0;top:0;text-align:right;align-items:flex-end;`)
+  containers.noticesBottomLeft.setAttribute('style', `${style}left:0;bottom:0;text-align:left;align-items:flex-start;`)
+  containers.noticesBottomRight.setAttribute('style', `${style}right:0;bottom:0;text-align:right;align-items:flex-end;`)
   containers.noticesTopCenter.setAttribute(
     'style',
-    style + 'top:0;left:0;right:0;text-align:center;align-items:center;',
+    `${style}top:0;left:0;right:0;text-align:center;align-items:center;`,
   )
   containers.noticesBottomCenter.setAttribute(
     'style',
-    style + 'bottom:0;left:0;right:0;text-align:center;align-items:center;',
+    `${style}bottom:0;left:0;right:0;text-align:center;align-items:center;`,
   )
   containers.noticesCenter.setAttribute(
     'style',
-    style + 'top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;',
+    `${style}top:0;left:0;right:0;bottom:0;flex-flow:column;justify-content:center;align-items:center;`,
   )
@@ -67,6 +68,2 @@
   container.appendChild(toast)
-
-  setTimeout(() => {
-    toast.remove()
-  }, options.duration)
 }
@@ -90,6 +87,42 @@
   }
+  if (options.closeOnClick) {
+    toast.addEventListener('click', () => {
+      toast.remove()
+    })
+  }
   toast.setAttribute('style', style)
   toast.insertAdjacentText('beforeend', options.message)
 
+  const timer = new Timer(() => {
+    toast.remove()
+  }, options.duration)
+
+  if (options.pauseOnHover) {
+    toast.addEventListener('mouseover', () => {
+      timer.pause()
+    })
+    toast.addEventListener('mouseout', () => {
+      timer.resume()
+    })
+  }
   return toast
 }
+
+function Timer(callback, delay) {
+  let timer,
+    start,
+    remaining = delay
+
+  this.pause = function() {
+    window.clearTimeout(timer)
+    remaining -= new Date() - start
+  }
+
+  this.resume = function() {
+    start = new Date()
+    window.clearTimeout(timer)
+    timer = window.setTimeout(callback, remaining)
+  }
+
+  this.resume()
+}

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

19533

increased by4.51%

Number of lines in readme file

81

increased by6.58%

Worsened metrics

Lines of code

165

decreased by-1.2%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes