diff --git a/README.md b/README.md index 89cae77..b6cee7e 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,84 @@ A jquery plugin for creating a timed modal dialog * Under development +## Getting started + +Install the jQuery and the jQuery timed dialog. + +### Using npm + +```bash +npm i jquery +npm i @armino-dev/jquery-timed-dialog +``` + +Import the components into your script. + +```js +import $ from 'jquery'; +import timedDialog from '@armino-dev/jquery-timed-dialog'; +``` + +Import the css into your stylesheet. + +```css +import '@armino-dev/jquery-timed-dialog/dist/timed-dialog.min.css'; +``` + +### Directly into your html from node_modules + +```html + + + +``` + +### Directly into your html from cdn +```html + + + +``` + +## Use it + +```js + +const myCallback = () => { + console.log('The callback was executed!'); +} + +const options = { + type: 'confirmation', + title: 'Confirm callback execution', + body: '

Are you sure you want to execute myCallback?
Check the console

', + width: 400, + height: 280, + timeout: 10, + closeOnTimer: true, + btnConfirm: { + text: 'Execute my callback', + action: () => myCallback(), + } +}; + +document.addEventListener("DOMContentLoaded", () => { + // add a button to dom + const button = document.createElement('button'); + button.textContent = 'Show dialog'; + + // add a click event listener to the button + button.addEventListener("click", () => { + $().timedDialog(options); + }); + + // add the button to page + document.body.appendChild(button); +}); +``` + +### **Please take a look at [this working example on CodePen](https://codepen.io/armino-dev/pen/zYbjdJw).** + ## Demo Demo can be viewed on [here](https://armino-dev.github.io/jquery-timed-dialog/demo/) diff --git a/css/timed-dialog.css b/css/timed-dialog.css deleted file mode 100644 index c35ec58..0000000 --- a/css/timed-dialog.css +++ /dev/null @@ -1,125 +0,0 @@ -/** - * jQuery Timed Dialog Plugin style sheet - * Author: Armino Popp, - */ -.timed-dialog-overlay { - background-color: rgba(155, 155, 155, 0.8); -} - -[type=button], -[type=reset], -[type=submit], -button { - -webkit-appearance: button; - padding: 0; -} - -.timed-dialog { - font-size: 16px; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; -} -.timed-dialog * { - font-size: 16px; - font-family: sans-serif; -} -.timed-dialog .header { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - background-color: #1055aa; - color: white; - padding: 5px 10px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} -.timed-dialog .header .icon { - display: flex; - font-weight: bold; - padding: 0; - align-content: center; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - background-color: white; - color: #1055aa; - border-radius: 100%; -} -.timed-dialog .header .title { - font-size: 1.2rem; - padding: 0 10px; -} -.timed-dialog .body { - min-height: 100px; - flex-direction: column; -} -.timed-dialog .action { - flex-direction: row; -} -.timed-dialog .action, -.timed-dialog .body { - display: flex; - background-color: #fff; - padding: 10px; -} -.timed-dialog .btn { - width: 100%; - border: 0; - padding: 10px; - line-height: 16px; - color: white; - background-color: #555; - margin-right: 10px; -} -.timed-dialog .btn:last-child { - margin-right: 0; -} -.timed-dialog .btn.btn-primary { - background-color: #1055aa !important; -} -.timed-dialog .btn.btn-primary:hover { - background-color: #3486ec !important; -} -.timed-dialog .btn span.text { - position: relative; - width: 100%; - height: 100%; - z-index: 10; -} -.timed-dialog .btn span.meter { - position: absolute; - z-index: 9; - left: 0; - top: 0; - height: 100%; - background-color: rgba(52, 134, 236, 0.7); -} -.timed-dialog .btn span.meter.hover { - background-color: rgba(7, 38, 77, 0.7) !important; -} -.timed-dialog .btn.btn-close { - display: flex; - margin: 0; - padding: 0; - align-content: center; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - background-color: transparent; - color: white; - border: 2px solid white; - border-radius: 100%; -} -.timed-dialog .btn.btn-close:hover { - background-color: rgba(52, 134, 236, 0.7) !important; -} -.timed-dialog .btn:hover { - background-color: #aaa; - color: white; -} diff --git a/demo/index.css b/demo/index.css index 04625b7..b262556 100644 --- a/demo/index.css +++ b/demo/index.css @@ -1,5 +1,5 @@ @import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap'); -@import "../css/timed-dialog.css"; +@import "../dist/css/timed-dialog.min.css"; body { font-family: 'Noto Serif', serif; diff --git a/dist/timed-dialog.min.js b/dist/timed-dialog.min.js index efbb8d4..c351471 100644 --- a/dist/timed-dialog.min.js +++ b/dist/timed-dialog.min.js @@ -1,4 +1,4 @@ -(()=>{(function(t){t.fn.timedDialog=function(p){this.defaults={type:"info",title:"Info",body:"This is the default body text. You might replace this with your own.",width:320,height:240,appendTo:"body",closeOnEscape:!0,closeOnTimer:!1,timeout:10,timeoutAnimation:!0,isModal:!0,btnDismiss:{text:"Dismiss",class:""},btnConfirm:{text:"Confirm",action:()=>{},class:""}};let i=t.extend({},this.defaults,p),h=document.body,c=document.documentElement,D=[h.scrollHeight,h.offsetHeight,c.clientHeight,c.scrollHeight,c.offsetHeight],O=[h.scrollWidth,h.offsetWidth,c.clientWidth,c.scrollWidth,c.offsetWidth],b=Math.max(...D),g=Math.max(...O),W={info:{icon:{src:"i"},style:"info"},confirmation:{icon:{src:"?"},style:"info"}},m=0;i.icon=W[i.type].icon.src;let k={position:"absolute",top:0,left:0,width:g+"px",height:b+"px","z-index":"2000"},z={position:"absolute",width:i.width+"px",height:i.height+"px","line-height":"20px","z-index":"2001"},d=H(5),w="timed-dialog-"+d,a=t(`
`),n=t(` +(()=>{(function(t){t.fn.timedDialog=function(p){this.defaults={type:"info",title:"Info",body:"This is the default body text. You might replace this with your own.",width:320,height:240,appendTo:"body",closeOnEscape:!0,closeOnTimer:!1,timeout:10,timeoutAnimation:!0,isModal:!0,btnDismiss:{text:"Dismiss",class:""},btnConfirm:{text:"Confirm",action:()=>{},class:""}};let i=t.extend({},this.defaults,p),m=document.body,d=document.documentElement,A=[m.scrollHeight,m.offsetHeight,d.clientHeight,d.scrollHeight,d.offsetHeight],O=[m.scrollWidth,m.offsetWidth,d.clientWidth,d.scrollWidth,d.offsetWidth],b=Math.max(...A),g=Math.max(...O),W={info:{icon:{src:"i"},style:"info"},confirmation:{icon:{src:"?"},style:"info"}},f=0;i.icon=W[i.type].icon.src;let k={position:"absolute",top:0,left:0,width:g+"px",height:b+"px","z-index":"2000"},z={position:"absolute",width:i.width+"px",height:i.height+"px","line-height":"20px","z-index":"2001"},c=H(5),w="timed-dialog-"+c,s=t(`
`),n=t(`
${i.icon}
@@ -10,12 +10,12 @@ `),o=t(` `),y=t(` - `),v=t(``);if(this.length>1)return this.each(function(){t(this).timedDialog(p)}),this;function H(e){let s="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let r=0;r{t(a).remove()})}t(window).on("resize",()=>{x()}),t(document).on("scroll",()=>{x()});function I(e){let s=t(o).children("span.text").html();t(o).children("span.text").html(s+` (${e})`);let l=setInterval(()=>{e--,t(o).children("span.text").html(s+` (${e})`),e<1&&(clearInterval(l),t(o).trigger("click"))},1e3)}function M(){t(o).on("click",()=>{f()}),t(o).on("mouseenter",()=>{t("span.meter").addClass("hover")}),t(o).on("mouseleave",()=>{t("span.meter").removeClass("hover")}),t(v).on("click",()=>{f()}),t(y).on("click",()=>{if(typeof i.btnConfirm.action=="function"){try{i.btnConfirm.action()}catch(e){console.error(e)}f()}else throw new Error("Confirmation button action must be a callback")}),t(a).on("click",e=>{n.not(e.target)&&n.has(e.target).length===0&&f()})}function E(){let e=t(o).width(),s=t('');t(s).appendTo(o);let l=1e3*i.timeout,r=e,u,C=T=>{u===void 0&&(u=T);let A=T-u;t(s).width(r),r=e*(1-A/l),A{if(!t(".timed-dialog-overlay").length)return t("body").append(a),i.isModal&&a.css(k),t(n).appendTo(a),t(n).css(z),t(window).trigger("resize"),t(v).appendTo(n.children("div.header")),t(o).appendTo(n.children(".action")),i.type=="confirmation"&&t(y).appendTo(n.children(".action")),M(),t(n).hide().fadeIn(300,()=>{i.closeOnTimer&&(I(i.timeout),i.timeoutAnimation&&E())}),this},this.initialize()}})(jQuery);})(); + `),v=t(``);if(this.length>1)return this.each(function(){t(this).timedDialog(p)}),this;function H(e){let a="",l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let h=0;h{t(s).remove()})}t(window).on("resize",()=>{x()}),t(document).on("scroll",()=>{x()});function I(e){let a=t(o).children("span.text").html();t(o).children("span.text").html(a+` (${e})`);let l=setInterval(()=>{e--,t(o).children("span.text").html(a+` (${e})`),e<1&&(clearInterval(l),t(o).trigger("click"))},1e3)}function M(){t(o).on("click",()=>{r()}),t(o).on("mouseenter",()=>{t("span.meter").addClass("hover")}),t(o).on("mouseleave",()=>{t("span.meter").removeClass("hover")}),t(v).on("click",()=>{r()}),t(y).on("click",()=>{if(typeof i.btnConfirm.action=="function"){try{i.btnConfirm.action()}catch(e){console.error(e)}r()}else throw new Error("Confirmation button action must be a callback")}),t(s).on("click",e=>{n.not(e.target)&&n.has(e.target).length===0&&r()})}function E(){let e=t(o).width(),a=t('');t(a).appendTo(o);let l=1e3*i.timeout,h=e,u,C=T=>{u===void 0&&(u=T);let D=T-u;t(a).width(h),h=e*(1-D/l),D{if(!t(".timed-dialog-overlay").length)return t("body").append(s),i.isModal&&s.css(k),t(n).appendTo(s),t(n).css(z),t(window).trigger("resize"),t(v).appendTo(n.children("div.header")),t(o).appendTo(n.children(".action")),i.type=="confirmation"&&t(y).appendTo(n.children(".action")),M(),t(n).hide().fadeIn(300,()=>{i.closeOnTimer&&(I(i.timeout),i.timeoutAnimation&&E())}),this},this.initialize()}})(jQuery);})(); diff --git a/karma.conf.js b/karma.conf.js index c7b27bb..7a87a76 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -17,9 +17,7 @@ module.exports = function (config) { // list of files / patterns to load in the browser files: [ 'https://code.jquery.com/jquery-3.4.1.min.js', - 'demo/index.html', - 'demo/index.css', - 'css/timed-dialog.css', + 'dist/css/timed-dialog.min.css', 'src/**/*.js', 'specs/**/*.js' ], diff --git a/package-lock.json b/package-lock.json index 0624c6f..05990b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@armino-dev/jquery-timed-dialog", - "version": "1.1.0", + "version": "1.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@armino-dev/jquery-timed-dialog", - "version": "1.1.0", + "version": "1.1.1", "license": "MIT", "dependencies": { "jquery": "^3.7.1" diff --git a/package.json b/package.json index 5b1e61e..b958121 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@armino-dev/jquery-timed-dialog", "title": "jQuery Timed Dialog", - "version": "1.1.0", + "version": "1.1.1", "description": "A jQuery timed dialog UI", "homepage": "https://github.com/armino-dev/jquery-timed-dialog#readme", "main": "dist/timed-dialog.min.js", diff --git a/specs/timed-dialogSpec.js b/specs/timed-dialogSpec.js index fe09ed0..16f4eb9 100644 --- a/specs/timed-dialogSpec.js +++ b/specs/timed-dialogSpec.js @@ -63,10 +63,9 @@ describe("jQuery Timed Dialog Plugin", () => { it("Should close on dialog btnDismiss click", (done) => { let dialog = $().timedDialog(options); const random = dialog.random; - - let btnDismiss = $(document.querySelector(`#btn-dismiss-${random}`)); - btnDismiss.trigger('click'); - + + let btnDismiss = document.querySelector(`#btn-dismiss-${random}`); + btnDismiss.click(); setTimeout(() => { expect($(`#timed-dialog-${random}`).length).toBeLessThan(1); done(); diff --git a/src/timed-dialog.js b/src/timed-dialog.js index b606cd2..9221e7b 100644 --- a/src/timed-dialog.js +++ b/src/timed-dialog.js @@ -242,6 +242,9 @@ } this.random = random; + this.overlay = overlay; + this.dialog = dialog; + this.dismissDialog = dismissDialog; this.initialize = () => { const isAlreadyOpen = $('.timed-dialog-overlay').length;