Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

zebra_dialog

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zebra_dialog - npm Package Compare versions

Comparing version 3.0.7 to 3.1.0

9

CHANGELOG.md

@@ -0,1 +1,10 @@

## version 3.1.0 (October 22, 2024)
- dialog boxes are now draggable by default; see the newly added `draggable` property; see [#38](https://github.com/stefangabos/Zebra_Dialog/issues/38) and thanks [LukeSavefrogs](https://github.com/LukeSavefrogs) for suggesting this A LONG TIME AGO!
- added the `onOpen` event which triggers **after** the dialog box is made visible; see [#39](https://github.com/stefangabos/Zebra_Dialog/issues/39); thanks [LukeSavefrogs](https://github.com/LukeSavefrogs) for suggesting this A LONG TIME AGO!
- added the `onBeforeClose` event which triggers **before** the dialog is hidden; useful for validating input prompts and not closing the dialog box in case the input is not valid
- added `placeholder` property to be used with `prompt` type dialog boxes
- added `prompt_rows` which when set to a value greater than `1` will turn the `input` element in a `prompt` dialog box to a `textarea`
- fixed bug where page scrolling was not disabled when opening modal dialog boxes even though `disable_page_scrolling` was set to `true` by default
## version 3.0.7 (May 12, 2024)

@@ -2,0 +11,0 @@

2

dist/zebra_dialog.min.js

@@ -1,1 +0,1 @@

!function(D){"use strict";D.Zebra_Dialog=function(){var p,u,b={animation_speed_hide:250,animation_speed_show:0,auto_close:!(this.version="3.0.7"),auto_focus_button:!0,buttons:!0,center_buttons:!1,custom_class:!1,default_value:"",disable_page_scrolling:!0,height:0,keyboard:!0,margin:0,max_height:0,max_width:450,message:"",modal:!0,backdrop_close:!0,backdrop_opacity:".9",position:"center",reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onClose:null},m=this,_={},h=!1,f=!1,y=function(){var t,e=D(window).width(),o=D(window).height(),i=m.dialog.outerWidth(),s=m.dialog.outerHeight(),a=e<768,n=0,r=0;m.dialog_left=undefined,m.dialog_top=undefined,t={left:n=(t=(m.settings.margin+"").match(/^([0-9]+)(\%)?$/))&&(undefined!==t[2]?(n=parseInt(e*parseInt(t[1],10)/100,10),r=parseInt(o*parseInt(t[1],10)/100,10)):n=r=parseInt(t[1],10),isNaN(n))?r=0:n,top:r,right:e-n-i,bottom:o-r-s,center:(e-i)/2,middle:(o-s)/2},D.isArray(m.settings.position)&&2===m.settings.position.length&&"string"==typeof m.settings.position[0]&&m.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof m.settings.position[1]&&m.settings.position[1].match(/^(top|bottom|middle|center)[\s0-9\+\-]*$/)&&(m.settings.position[0]=m.settings.position[0].toLowerCase(),m.settings.position[1]=m.settings.position[1].toLowerCase(),"center"===m.settings.position[1]&&(m.settings.position[1]="middle"),D.each(t,function(t,e){for(var o,i,s=0;s<2;s++)(o=(i=a?m.settings.position[s].replace(/[0-9\+\-\s]/g,""):m.settings.position[s]).replace(t,e))!==i&&(0===s?m.dialog_left=d(o):m.dialog_top=d(o))})),undefined!==m.dialog_left&&undefined!==m.dialog_top||(m.dialog_left=t.center,m.dialog_top=t.middle),m.dialog_top<r&&(m.dialog_top=r),o-2*r<s+r?m.body.css("height",o-2*r-(D(".ZebraDialog_Title",m.dialog).length?D(".ZebraDialog_Title",m.dialog).outerHeight():0)-(D(".ZebraDialog_Buttons",m.dialog).length?D(".ZebraDialog_Buttons",m.dialog).outerHeight():0)-(parseFloat(m.body.css("marginTop"))||0)-(parseFloat(m.body.css("marginBottom"))||0)-(parseFloat(m.body.css("paddingTop"))||0)-(parseFloat(m.body.css("paddingBottom"))||0)-(parseFloat(m.body.css("borderTopWidth"))||0)-(parseFloat(m.body.css("borderBottomWidth"))||0)):f&&m.body.css("height",m.dialog.height()-(D(".ZebraDialog_Title",m.dialog).length?D(".ZebraDialog_Title",m.dialog).outerHeight():0)-(D(".ZebraDialog_Buttons",m.dialog).length?D(".ZebraDialog_Buttons",m.dialog).outerHeight():0)-(parseFloat(m.body.css("marginTop"))||0)-(parseFloat(m.body.css("marginBottom"))||0)-(parseFloat(m.body.css("paddingTop"))||0)-(parseFloat(m.body.css("paddingBottom"))||0)-(parseFloat(m.body.css("borderTopWidth"))||0)-(parseFloat(m.body.css("borderBottomWidth"))||0)),m.iframe&&m.body.css("overflow","hidden"),m.settings.vcenter_short_message&&(e=(n=m.body.find("div:first")).height())<(i=m.body.height())&&n.css("padding-top",(i-e)/2),"boolean"==typeof arguments[0]&&!1===arguments[0]||0===m.settings.reposition_speed?m.dialog.css({left:m.dialog_left,top:m.dialog_top,visibility:"visible",opacity:0}).animate({opacity:"1"},m.settings.animation_speed_show):(m.dialog.stop(!0),m.dialog.css("visibility","visible").animate({left:m.dialog_left,top:m.dialog_top},m.settings.reposition_speed)),undefined===p&&(!1!==m.settings.auto_focus_button?m.dialog.find("a[class^=ZebraDialog_Button]").eq(!0===m.settings.auto_focus_button?0:m.settings.auto_focus_button).focus():m.body.attr("tabindex",1).focus().removeAttr("tabindex"))},v=function(){switch(m.settings.type){case"confirmation":case"error":case"information":case"question":case"warning":case"prompt":return m.settings.type.charAt(0).toUpperCase()+m.settings.type.slice(1).toLowerCase();default:return!1}},d=function(t){var e=0;for(t=t.replace(/\s/g,"").match(/[+\-]?([0-9\.\s]+)/g)||[];t.length;)e+=parseFloat(t.shift());return e};return m.settings={},"string"==typeof arguments[0]&&(_.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(_=D.extend(_,"object"==typeof arguments[0]?arguments[0]:arguments[1])),m.init=function(){var e,o,t,i,s,a,n,r,d,l,g=D("body"),c=0;if(m.settings=D.extend({},b,_),D(".ZebraDialog").each(function(){var t=parseInt(D(this).css("zIndex"),10);t&&c<t&&(c=t)}),m.settings.modal&&(m.backdrop=D("<div>",{"class":"ZebraDialogBackdrop"+(m.settings.custom_class?" "+m.settings.custom_class:"")}).css({position:"fixed",left:0,top:0,opacity:m.settings.backdrop_opacity+""}),0<c&&(m.backdrop.css("zIndex",c+1),D(".ZebraDialogBackdrop").each(function(){var t=D(this);t.data("ZebraDialog_opacity")||t.data("ZebraDialog_opacity",t.css("opacity")).css("opacity",0)}),D(".ZebraDialog").each(function(){D(this).data("ZebraDialog_MuteESC",!0)})),m.settings.backdrop_close&&m.backdrop.on("click",function(){m.close()}),m.backdrop.appendTo(g),m.settings.disable_page_scrolling)&&window.innerWidth>document.body.clientWidth&&!g.hasClass("ZebraDialog_NoScroll")&&g.data("ZebraDialog_vScroll",window.pageYOffset).css({right:(r=D("<div>").css({visibility:"hidden",overflow:"scroll",msOverflowStyle:"scrollbar"}).appendTo(D("body")),d=D("<div>").appendTo(r),l=r.outerWidth()-d.outerWidth(),r.remove(),d.remove(),l),top:-1*D(window).scrollTop()}).addClass("ZebraDialog_NoScroll"),m.dialog=D("<div>",{"class":"ZebraDialog"+(m.settings.custom_class?" "+m.settings.custom_class:"")+(m.settings.modal?"":" ZebraDialog_NotModal")+(!1!==v()?" ZebraDialog_Icon ZebraDialog_"+v():"")}).css({position:"fixed",left:0,top:0,visibility:"hidden"}),0<c&&m.dialog.css("zIndex",c+1),u=Math.floor(9999999*Math.random()),(r=(m.settings.width+"").match(/^([0-9]+)(\%)?$/))&&(r=undefined!==r[2]?parseInt(Math.max(document.documentElement.clientWidth,window.innerWidth||0)*parseInt(r[1],10)/100,10):parseInt(r[1],10),!isNaN(r))&&0<r&&m.dialog.css("width",r),(isNaN(r)||0===r)&&(r=(m.settings.max_width+"").match(/^([0-9]+)(\%)?$/))&&(r=undefined!==r[2]?parseInt(Math.max(document.documentElement.clientWidth,window.innerWidth||0)*parseInt(r[1],10)/100,10):parseInt(r[1],10),!isNaN(r))&&0<r&&m.dialog.css("max-width",r),(r=(m.settings.height+"").match(/^([0-9]+)(\%)?$/))&&(r=undefined!==r[2]?parseInt(Math.max(document.documentElement.clientHeight,window.innerHeight||0)*parseInt(r[1],10)/100,10):parseInt(r[1],10),!isNaN(r))&&0<r&&(m.dialog.css("height",r),f=!0),(isNaN(r)||0===r)&&(r=(m.settings.max_height+"").match(/^([0-9]+)(\%)?$/))&&(r=undefined!==r[2]?parseInt(Math.max(document.documentElement.clientHeight,window.innerHeight||0)*parseInt(r[1],10)/100,10):parseInt(r[1],10),!isNaN(r))&&0<r&&(m.dialog.css("max-height",r),f=!0),m.settings.title?a=D("<h3>",{"class":"ZebraDialog_Title"}).html(m.settings.title).appendTo(m.dialog):m.dialog.addClass("ZebraDialog_NoTitle"),undefined!==m.settings.source.iframe&&(m.settings.vcenter_short_message=!1),m.body=D("<div>",{"class":"ZebraDialog_Body"}),"prompt"===m.settings.type&&(m.settings.message+='<input type="text" name="ZebraDialog_Prompt_Input" value="'+m.settings.default_value+'" class="ZebraDialog_Prompt_Input">'),m.settings.vcenter_short_message?D("<div>").html(m.settings.message).appendTo(m.body):m.body.html(m.settings.message),"prompt"===m.settings.type&&(m.settings.message=D(".ZebraDialog_Prompt_Input",m.body),D(".ZebraDialog_Prompt_Input",m.body).on("keypress",function(t){13===t.keyCode&&(h?h.trigger("click"):m.close(!0,this.value))})),m.settings.source&&"object"==typeof m.settings.source)for(n in o=m.settings.vcenter_short_message?D("div:first",m.body):m.body,m.settings.source)switch(n){case"ajax":t="string"==typeof m.settings.source[n]?{url:m.settings.source[n]}:m.settings.source[n],s=D("<div>").attr("class","ZebraDialog_Spinner").appendTo(o),t.success=function(t){s.remove(),o.append(t),y(!1)},D.ajax(t);break;case"iframe":t=D.extend({width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},"string"==typeof m.settings.source[n]?{src:m.settings.source[n]}:m.settings.source[n]),m.iframe=D("<iframe>").attr(t).on("load",function(){D(".ZebraDialog_Spinner",m.body).remove()}),m.body.append(D("<div>").addClass("ZebraDialog_Spinner ZebraDialog_iFrame")),o.append(m.iframe);break;case"inline":o.append(m.settings.source[n])}return m.body.appendTo(m.dialog),(d=function(){if(!0!==m.settings.buttons&&!D.isArray(m.settings.buttons))return!1;if(!0===m.settings.buttons)switch(m.settings.type){case"question":case"warning":case"prompt":m.settings.buttons=["Ok","Cancel"];break;default:m.settings.buttons=["Ok"]}return m.settings.buttons}())?(e=D("<div>",{"class":"ZebraDialog_Buttons"}).appendTo(m.dialog),D.each(d,function(t,o){t=D("<a>",{href:"javascript:void(0)","class":"ZebraDialog_Button_"+t+(undefined!==o.custom_class&&""!==o.custom_class.toString().trim()?" "+o.custom_class:"")});undefined!==o.caption?t.html(o.caption):t.html(o),t.on("click",function(){var t=!0,e="prompt"===m.settings.type&&D(".ZebraDialog_Prompt_Input",m.body).length?D(".ZebraDialog_Prompt_Input",m.body).val():undefined;!1!==(t=undefined!==o.callback?o.callback(m.dialog,e):t)&&m.close(undefined!==o.caption?o.caption:o,e)}),t.appendTo(e),undefined!==o.default_confirmation&&o.default_confirmation&&(h=t)}),m.settings.center_buttons&&e.addClass("ZebraDialog_Buttons_Centered")):m.dialog.addClass("ZebraDialog_NoButtons"),m.dialog.appendTo(g),m.settings.show_close_button?D('<a href="javascript:void(0)" class="ZebraDialog_Close">&times;</a>').on("click",function(t){t.preventDefault(),m.close()}).appendTo(a||m.body):m.dialog.addClass("ZebraDialog_NoCloseButton"),D(window).on("resize.ZebraDialog_"+u,function(){clearTimeout(p),p=setTimeout(function(){y()},100)}),m.settings.keyboard&&D(document).on("keyup.ZebraDialog_"+u,function(t){if(!m.dialog.data("ZebraDialog_MuteESC"))return 27===t.which&&m.close(),!0}),!1!==m.settings.auto_close&&(m.dialog.on("click",function(){clearTimeout(m.timeout),m.close()}),m.timeout=setTimeout(m.close,m.settings.auto_close)),y(!1),"prompt"===m.settings.type&&(D(".ZebraDialog_Prompt_Input",m.body).focus(),""!==m.settings.default_value)&&(m.settings.message.get(0).setSelectionRange?(i=2*m.settings.default_value.length,setTimeout(function(){m.settings.message.get(0).setSelectionRange(i,i)},1)):m.settings.message.val(m.settings.default_value)),m},m.close=function(t,e){var o=m.settings.animation_speed_hide,i=D(".ZebraDialogBackdrop"),s=D(".ZebraDialog"),a=D("body"),n=i.length;D(document).off(".ZebraDialog_"+u),D(window).off(".ZebraDialog_"+u),m.settings.modal&&m.backdrop&&(1<n&&D(i[n-1]).is(m.backdrop)?((i=D(i[n-2])).css("opacity",i.data("ZebraDialog_opacity")).removeData("ZebraDialog_opacity"),o=0,D(s[n-2]).removeData("ZebraDialog_MuteESC")):1===n&&a.hasClass("ZebraDialog_NoScroll")&&(a.removeClass("ZebraDialog_NoScroll").css({right:"",top:"",height:""}),D(window).scrollTop(a.data("ZebraDialog_vScroll"))),m.backdrop.off("click").animate({opacity:"0"},o,function(){m.backdrop.remove()})),m.dialog.animate({top:"0",opacity:"0"},m.settings.animation_speed_hide,function(){m.dialog.remove(),m.settings.onClose&&"function"==typeof m.settings.onClose&&m.settings.onClose(undefined!==t?t:"",e)})},m.update=function(){clearTimeout(p),p=setTimeout(function(){y()},100)},m.init()}}(jQuery);
!function(k){"use strict";k.Zebra_Dialog=function(){var f,_,h={animation_speed_hide:250,animation_speed_show:0,auto_close:!(this.version="3.1.0"),auto_focus_button:!0,backdrop_close:!0,backdrop_opacity:".9",buttons:!0,center_buttons:!1,custom_class:!1,default_value:"",disable_page_scrolling:!0,draggable:!0,height:0,keyboard:!0,margin:0,max_height:0,max_width:450,message:"",modal:!0,placeholder:"",position:"center",prompt_rows:1,reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onOpen:null,onBeforeClose:null,onClose:null},y=this,D={},v=!1,Z=!1,w=function(){var t,e=k(window).width(),o=k(window).height(),s=y.dialog.outerWidth(),i=y.dialog.outerHeight(),a=e<768,n=0,l=0;y.dialog_left=undefined,y.dialog_top=undefined,t={left:n=(t=(y.settings.margin+"").match(/^([0-9]+)(\%)?$/))&&(undefined!==t[2]?(n=parseInt(e*parseInt(t[1],10)/100,10),l=parseInt(o*parseInt(t[1],10)/100,10)):n=l=parseInt(t[1],10),isNaN(n))?l=0:n,top:l,right:e-n-s,bottom:o-l-i,center:(e-s)/2,middle:(o-i)/2},k.isArray(y.settings.position)&&2===y.settings.position.length&&"string"==typeof y.settings.position[0]&&y.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof y.settings.position[1]&&y.settings.position[1].match(/^(top|bottom|middle|center)[\s0-9\+\-]*$/)&&(y.settings.position[0]=y.settings.position[0].toLowerCase(),y.settings.position[1]=y.settings.position[1].toLowerCase(),"center"===y.settings.position[1]&&(y.settings.position[1]="middle"),k.each(t,function(t,e){for(var o,s,i=0;i<2;i++)(o=(s=a?y.settings.position[i].replace(/[0-9\+\-\s]/g,""):y.settings.position[i]).replace(t,e))!==s&&(0===i?y.dialog_left=r(o):y.dialog_top=r(o))})),undefined!==y.dialog_left&&undefined!==y.dialog_top||(y.dialog_left=t.center,y.dialog_top=t.middle),y.dialog_top<l&&(y.dialog_top=l),o-2*l<i+l?y.body.css("height",o-2*l-(k(".ZebraDialog_Title",y.dialog).length?k(".ZebraDialog_Title",y.dialog).outerHeight():0)-(k(".ZebraDialog_Buttons",y.dialog).length?k(".ZebraDialog_Buttons",y.dialog).outerHeight():0)-(parseFloat(y.body.css("marginTop"))||0)-(parseFloat(y.body.css("marginBottom"))||0)-(parseFloat(y.body.css("paddingTop"))||0)-(parseFloat(y.body.css("paddingBottom"))||0)-(parseFloat(y.body.css("borderTopWidth"))||0)-(parseFloat(y.body.css("borderBottomWidth"))||0)):Z&&y.body.css("height",y.dialog.height()-(k(".ZebraDialog_Title",y.dialog).length?k(".ZebraDialog_Title",y.dialog).outerHeight():0)-(k(".ZebraDialog_Buttons",y.dialog).length?k(".ZebraDialog_Buttons",y.dialog).outerHeight():0)-(parseFloat(y.body.css("marginTop"))||0)-(parseFloat(y.body.css("marginBottom"))||0)-(parseFloat(y.body.css("paddingTop"))||0)-(parseFloat(y.body.css("paddingBottom"))||0)-(parseFloat(y.body.css("borderTopWidth"))||0)-(parseFloat(y.body.css("borderBottomWidth"))||0)),y.iframe&&y.body.css("overflow","hidden"),y.settings.vcenter_short_message&&(e=(n=y.body.find("div:first")).height())<(s=y.body.height())&&n.css("padding-top",(s-e)/2),"boolean"==typeof arguments[0]&&!1===arguments[0]||0===y.settings.reposition_speed?y.dialog.css({left:y.dialog_left,top:y.dialog_top,visibility:"visible",opacity:0}).animate({opacity:"1"},y.settings.animation_speed_show):(y.dialog.stop(!0),y.dialog.css("visibility","visible").animate({left:y.dialog_left,top:y.dialog_top},y.settings.reposition_speed)),y.settings.onOpen&&"function"==typeof y.settings.onOpen&&y.settings.onOpen(y.dialog),undefined===f&&(!1!==y.settings.auto_focus_button?y.dialog.find("a[class^=ZebraDialog_Button]").eq(!0===y.settings.auto_focus_button?0:y.settings.auto_focus_button).focus():y.body.attr("tabindex",1).focus().removeAttr("tabindex"))},T=function(){switch(y.settings.type){case"confirmation":case"error":case"information":case"question":case"warning":case"prompt":return y.settings.type.charAt(0).toUpperCase()+y.settings.type.slice(1).toLowerCase();default:return!1}},r=function(t){var e=0;for(t=t.replace(/\s/g,"").match(/[+\-]?([0-9\.\s]+)/g)||[];t.length;)e+=parseFloat(t.shift());return e};return y.settings={},"string"==typeof arguments[0]&&(D.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(D=k.extend(D,"object"==typeof arguments[0]?arguments[0]:arguments[1])),y.init=function(){var e,o,t,s,i,a,n,l,r,g,d,c,p,u,b=k("body"),m=0;if(y.settings=k.extend({},h,D),k(".ZebraDialog").each(function(){var t=parseInt(k(this).css("zIndex"),10);t&&m<t&&(m=t)}),y.settings.modal&&(y.backdrop=k("<div>",{"class":"ZebraDialogBackdrop"+(y.settings.custom_class?" "+y.settings.custom_class:"")}).css({position:"fixed",left:0,top:0,opacity:y.settings.backdrop_opacity+""}),0<m&&(y.backdrop.css("zIndex",m+1),k(".ZebraDialogBackdrop").each(function(){var t=k(this);t.data("ZebraDialog_opacity")||t.data("ZebraDialog_opacity",t.css("opacity")).css("opacity",0)}),k(".ZebraDialog").each(function(){k(this).data("ZebraDialog_MuteESC",!0)})),y.settings.backdrop_close&&y.backdrop.on("click",function(){y.close()}),y.backdrop.appendTo(b),y.settings.disable_page_scrolling)&&window.innerHeight<document.body.clientHeight&&!b.hasClass("ZebraDialog_NoScroll")&&b.data("ZebraDialog_vScroll",window.pageYOffset).css({right:(l=k("<div>").css({visibility:"hidden",overflow:"scroll",msOverflowStyle:"scrollbar"}).appendTo(k("body")),r=k("<div>").appendTo(l),u=l.outerWidth()-r.outerWidth(),l.remove(),r.remove(),u),top:-1*k(window).scrollTop()}).addClass("ZebraDialog_NoScroll"),y.dialog=k("<div>",{"class":"ZebraDialog"+(y.settings.custom_class?" "+y.settings.custom_class:"")+(y.settings.modal?"":" ZebraDialog_NotModal")+(!1!==T()?" ZebraDialog_Icon ZebraDialog_"+T():"")}).css({position:"fixed",left:0,top:0,visibility:"hidden"}),0<m&&y.dialog.css("zIndex",m+1),_=Math.floor(9999999*Math.random()),(l=(y.settings.width+"").match(/^([0-9]+)(\%)?$/))&&(l=undefined!==l[2]?parseInt(Math.max(document.documentElement.clientWidth,window.innerWidth||0)*parseInt(l[1],10)/100,10):parseInt(l[1],10),!isNaN(l))&&0<l&&y.dialog.css("width",l),(isNaN(l)||0===l)&&(l=(y.settings.max_width+"").match(/^([0-9]+)(\%)?$/))&&(l=undefined!==l[2]?parseInt(Math.max(document.documentElement.clientWidth,window.innerWidth||0)*parseInt(l[1],10)/100,10):parseInt(l[1],10),!isNaN(l))&&0<l&&y.dialog.css("max-width",l),(l=(y.settings.height+"").match(/^([0-9]+)(\%)?$/))&&(l=undefined!==l[2]?parseInt(Math.max(document.documentElement.clientHeight,window.innerHeight||0)*parseInt(l[1],10)/100,10):parseInt(l[1],10),!isNaN(l))&&0<l&&(y.dialog.css("height",l),Z=!0),(isNaN(l)||0===l)&&(l=(y.settings.max_height+"").match(/^([0-9]+)(\%)?$/))&&(l=undefined!==l[2]?parseInt(Math.max(document.documentElement.clientHeight,window.innerHeight||0)*parseInt(l[1],10)/100,10):parseInt(l[1],10),!isNaN(l))&&0<l&&(y.dialog.css("max-height",l),Z=!0),y.settings.title?a=k("<h3>",{"class":"ZebraDialog_Title"}).html(y.settings.title).appendTo(y.dialog):y.dialog.addClass("ZebraDialog_NoTitle"),undefined!==y.settings.source.iframe&&(y.settings.vcenter_short_message=!1),y.body=k("<div>",{"class":"ZebraDialog_Body"}),"prompt"===y.settings.type&&(1===parseInt(y.settings.prompt_rows,10)?y.settings.message+='<input name="ZebraDialog_Prompt_Input" value="'+y.settings.default_value+'"'+(""!==y.settings.placeholder.trim()?' placeholder="'+y.settings.placeholder+'"':"")+' class="ZebraDialog_Prompt_Input">':y.settings.message+='<textarea rows="'+(y.settings.prompt_rows||1)+'" name="ZebraDialog_Prompt_Input"'+(""!==y.settings.placeholder.trim()?' placeholder="'+y.settings.placeholder+'"':"")+' class="ZebraDialog_Prompt_Input">'+y.settings.default_value+"</textarea>"),y.settings.vcenter_short_message?k("<div>").html(y.settings.message).appendTo(y.body):y.body.html(y.settings.message),"prompt"===y.settings.type&&(y.settings.message=k(".ZebraDialog_Prompt_Input",y.body),k(".ZebraDialog_Prompt_Input",y.body).on("keypress",function(t){13!==t.keyCode||k(this).is("textarea")&&!t.shiftKey||(v?v.trigger("click"):y.close(!0,this.value))})),y.settings.source&&"object"==typeof y.settings.source)for(n in o=y.settings.vcenter_short_message?k("div:first",y.body):y.body,y.settings.source)switch(n){case"ajax":t="string"==typeof y.settings.source[n]?{url:y.settings.source[n]}:y.settings.source[n],i=k("<div>").attr("class","ZebraDialog_Spinner").appendTo(o),t.success=function(t){i.remove(),o.append(t),w(!1)},k.ajax(t);break;case"iframe":t=k.extend({width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},"string"==typeof y.settings.source[n]?{src:y.settings.source[n]}:y.settings.source[n]),y.iframe=k("<iframe>").attr(t).on("load",function(){k(".ZebraDialog_Spinner",y.body).remove()}),y.body.append(k("<div>").addClass("ZebraDialog_Spinner ZebraDialog_iFrame")),o.append(y.iframe);break;case"inline":o.append(y.settings.source[n])}return y.body.appendTo(y.dialog),(r=function(){if(!0!==y.settings.buttons&&!k.isArray(y.settings.buttons))return!1;if(!0===y.settings.buttons)switch(y.settings.type){case"question":case"warning":case"prompt":y.settings.buttons=["Ok","Cancel"];break;default:y.settings.buttons=["Ok"]}return y.settings.buttons}())?(e=k("<div>",{"class":"ZebraDialog_Buttons"}).appendTo(y.dialog),k.each(r,function(t,o){t=k("<a>",{href:"javascript:void(0)","class":"ZebraDialog_Button_"+t+(undefined!==o.custom_class&&""!==o.custom_class.toString().trim()?" "+o.custom_class:"")});undefined!==o.caption?t.html(o.caption):t.html(o),t.on("click",function(){var t=!0,e="prompt"===y.settings.type&&k(".ZebraDialog_Prompt_Input",y.body).length?k(".ZebraDialog_Prompt_Input",y.body).val():undefined;!1!==(t=undefined!==o.callback?o.callback(y.dialog,e):t)&&y.close(undefined!==o.caption?o.caption:o,e)}),t.appendTo(e),undefined!==o.default_confirmation&&o.default_confirmation&&(v=t)}),y.settings.center_buttons&&e.addClass("ZebraDialog_Buttons_Centered")):y.dialog.addClass("ZebraDialog_NoButtons"),y.dialog.appendTo(b),y.settings.show_close_button?k('<a href="javascript:void(0)" class="ZebraDialog_Close">&times;</a>').on("click",function(t){t.preventDefault(),y.close()}).appendTo(a||y.body):y.dialog.addClass("ZebraDialog_NoCloseButton"),p=c=d=g=0,u=k(".ZebraDialog_Title",y.dialog),b=y.dialog,b="force"===y.settings.draggable&&0===u.length?b:u,y.settings.draggable&&(b.addClass("ZebraDialog_Draggable"),b.on({mousedown:function(t){var e,a,n;y.dialog.hasClass("ZebraDialog_Dragging")||(e=k(document),a=k(window).width(),n=k(window).height(),t.preventDefault(),y.dialog.addClass("ZebraDialog_Dragging"),g=t.clientX,d=t.clientY,e.on({"mousemove.ZebraDialog_Drag":function(t){var e=y.dialog.get(0),o=e.offsetLeft,s=e.offsetTop,i=e.offsetWidth,e=e.offsetHeight;c=g-t.clientX,p=d-t.clientY,g=t.clientX,d=t.clientY,o-c<0&&(c=o=0),s-p<0&&(p=s=0),a<o+i-c&&(o=a-i,c=0),n<s+e-p&&(s=n-e,p=0),y.dialog.css({left:o-c,top:s-p})},"mouseup.ZebraDialog_Drag":function(){y.dialog.removeClass("ZebraDialog_Dragging"),e.off("mousemove.ZebraDialog_Drag"),e.off("mouseup.ZebraDialog_Drag")}}))}})),k(window).on("resize.ZebraDialog_"+_,function(){clearTimeout(f),f=setTimeout(function(){w()},100)}),y.settings.keyboard&&k(document).on("keyup.ZebraDialog_"+_,function(t){if(!y.dialog.data("ZebraDialog_MuteESC"))return 27===t.which&&y.close(),!0}),!1!==y.settings.auto_close&&(y.dialog.on("click",function(){clearTimeout(y.timeout),y.close()}),y.timeout=setTimeout(y.close,y.settings.auto_close)),w(!1),"prompt"===y.settings.type&&(k(".ZebraDialog_Prompt_Input",y.body).focus(),""!==y.settings.default_value)&&(y.settings.message.get(0).setSelectionRange?(s=2*y.settings.default_value.length,setTimeout(function(){y.settings.message.get(0).setSelectionRange(s,s)},1)):y.settings.message.val(y.settings.default_value)),y},y.close=function(t,e){var o,s=y.settings.animation_speed_hide,i=k(".ZebraDialogBackdrop"),a=k(".ZebraDialog"),n=k("body"),l=i.length;y.settings.onBeforeClose&&"function"==typeof y.settings.onBeforeClose&&(o=y.settings.onBeforeClose(undefined!==t?t:"",e),undefined!==o)&&!o||(k(document).off(".ZebraDialog_"+_),k(window).off(".ZebraDialog_"+_),y.settings.modal&&y.backdrop&&(1<l&&k(i[l-1]).is(y.backdrop)?((o=k(i[l-2])).css("opacity",o.data("ZebraDialog_opacity")).removeData("ZebraDialog_opacity"),s=0,k(a[l-2]).removeData("ZebraDialog_MuteESC")):1===l&&n.hasClass("ZebraDialog_NoScroll")&&(n.removeClass("ZebraDialog_NoScroll").css({right:"",top:"",height:""}),k(window).scrollTop(n.data("ZebraDialog_vScroll"))),y.backdrop.off("click").animate({opacity:"0"},s,function(){y.backdrop.remove()})),y.dialog.animate({top:"0",opacity:"0"},y.settings.animation_speed_hide,function(){y.dialog.remove(),y.settings.onClose&&"function"==typeof y.settings.onClose&&y.settings.onClose(undefined!==t?t:"",e)}))},y.update=function(){clearTimeout(f),f=setTimeout(function(){w()},100)},y.init()}}(jQuery);

61

examples/examples.js
$(document).ready(function() {
var notification_options = {
auto_close: 2000,
auto_close: 1000,
modal: false,

@@ -34,7 +34,9 @@ buttons: false

$('#example1_4').on('click', function() {
new $.Zebra_Dialog('Use prompt dialogs to ask for user input.', {
new $.Zebra_Dialog('Use prompt dialogs to ask for user input.<br><br>In this example we are allowing more user input and therefore we are showing a <code>textarea</code> instead of an <code>input</code> box.<br><br>We did that by setting the <code>prompt_rows</code> property to <code>3</code>.<br><br>', {
auto_focus_button: $('body.materialize').length ? false : true,
default_value: 'A default value can be set',
title: 'Prompt',
type: 'prompt',
default_value: 'A default value can be set',
placeholder: 'Type anything here',
prompt_rows: 3,
onClose: function(caption, prompt) {

@@ -113,2 +115,3 @@ // this is the correct way of checking input:

type: 'prompt',
placeholder: 'Type anything here',
buttons: [

@@ -137,2 +140,49 @@ {

$('#example2_3').on('click', function() {
new $.Zebra_Dialog('The input\'s value will be considered valid <strong>only</strong> if it contains 6 digits.', {
auto_focus_button: $('body.materialize').length ? false : true,
title: 'Prompt',
type: 'prompt',
placeholder: 'Enter a 6 digit number',
onBeforeClose: function(caption, prompt) {
// "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking
// on the "x" button, or pressing the ESC key
//
// additionally, for all the cases above, "caption" will be FALSE.
//
// "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in
// which, because there's no button clicked, the value of "caption" will be boolean TRUE
//
// "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need
// to check if the appropriate button was clicked
//
// note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button
// you are using as the confirmation button
// if user tries to submit the value
if (undefined !== prompt && (caption === true || caption === 'Ok')) {
// if the input is not valid
if (prompt.match(/^[0-9]{6}$/) === null) {
// show an error message and don't close the dialog box
new $.Zebra_Dialog('You must enter 6 digits', $.extend({}, notification_options, { type: 'error' }));
return false;
}
// if input was correct, close the dialog box and show the user's input
new $.Zebra_Dialog('Input value was:<br><br>"' + prompt + '"', $.extend({}, notification_options, { type: 'confirmation' }));
} else
new $.Zebra_Dialog('Input was cancelled', $.extend({}, notification_options, { type: 'information' }));
}
});
});
$('#example3').on('click', function() {

@@ -236,3 +286,4 @@ new $.Zebra_Dialog('We can set as many buttons as we want and we handle the user\'s choice though the callback function attached to the <strong>onClose</strong> event.<br><br>See the next example on how to handle user\'s choice in a different way.', {

new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
auto_focus_button: $('body.materialize').length ? false : true
auto_focus_button: $('body.materialize').length ? false : true,
draggable: 'force'
});

@@ -348,5 +399,5 @@ });

setTimeout(function() {
$.Zebra_Pin($('blockquote.bg-warning'));
new $.Zebra_Pin($('blockquote.bg-warning'));
}, 500);
});

6

package.json

@@ -15,3 +15,3 @@ {

"license": "LGPL-3.0",
"version": "3.0.7",
"version": "3.1.0",
"keywords": [

@@ -33,3 +33,3 @@ "jquery-plugin",

"grunt": "^1.5.3",
"grunt-cli": "^1.4.3",
"grunt-cli": "^1.5.0",
"grunt-contrib-copy": "*",

@@ -45,5 +45,5 @@ "grunt-contrib-cssmin": "^5.0.0",

"grunt-sass": "^3.1.0",
"sass": "^1.77.1",
"sass": "^1.80.2",
"time-grunt": "^2.0.0"
}
}

84

README.md

@@ -9,5 +9,5 @@ <img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right">

A modal window is a child window that requires users to interact with it before they can continue using the parent application. Modal windows are one of the most commonly used user interface elements and are used to command user awareness in order to communicate important information, or to alert of errors or warnings.
A modal dialog box is a focused interface element that prompts users to take action before returning to the main application. These dialogs are commonly used to capture user attention, deliver important information, confirm actions, or highlight warnings and errors. By temporarily blocking interaction with the rest of the page, modal windows ensure that users address critical tasks or notifications before proceeding, making them a fundamental part of modern web applications.
**Zebra Dialog** is a small (~10KB minified, 3KB gzipped), compact (one JavaScript file, no dependencies other than jQuery 1.7.0+), mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert*, *confirm* and *prompt* dialog boxes.
**Zebra Dialog** is a small (~12KB minified, 3KB gzipped), compact (one JavaScript file, no dependencies other than jQuery 1.7.0+), mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert*, *confirm* and *prompt* dialog boxes.

@@ -29,2 +29,3 @@ Can also be used as a notification widget (when configured to show no buttons and to close automatically) for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.

- position the dialog box wherever you want - not just in the middle of the screen
- dialog boxes are draggable
- callback functions can be used for further customisations

@@ -72,4 +73,4 @@ - use callback functions to handle users' choice

```html
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.5.0.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.7.1.js"><\/script>')</script>
```

@@ -89,3 +90,3 @@

<!-- for a specific version -->
<script src="https://cdn.jsdelivr.net/npm/zebra_dialog@3.0.1/dist/zebra_dialog.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zebra_dialog@3.0.6/dist/zebra_dialog.min.js"></script>

@@ -207,3 +208,3 @@ <!-- replacing "min" with "src" will serve you the non-compressed version -->

You can also add custom CSS classes, set which button's callback to be triggered when the user presses ENTER while
inside the input box (for <code>prompt</code> dialog boxes), and/or attach callback functions to individual buttons by using
inside the input box (for <code>prompt</code> dialog boxes and when <code>prompt_rows</code> is <code>1</code>), and/or attach callback functions to individual buttons by using
objects in the form of:<br><br>

@@ -222,4 +223,5 @@ <code>[{</code><br>

which button's callback to trigger when the user presses <code>ENTER</code> while inside the input box. If
not set, you will <strong>have</strong> to handle user input via the <code>onClose</code> event, or you will
not set, you will <strong>have</strong> to handle user input via the <code>onBeforeClose</code> event, or you will
not be able to process user input for this case.<br><br>
<blockquote>The above applies only if <code>prompt_rows</code> is <code>1</code> as otherwise the ENTER key inserts a line-break</blockquote><br>
Callback functions receive as first argument the entire dialog box, as a jQuery object, and as second argument,

@@ -258,3 +260,4 @@ the value entered in the input box - when the dialog box's type is <code>prompt</code>, or <code>undefined</code>

<td valign="top">
Default value to show in the input box when the dialog box type is <code>prompt</code>.
Default value to show in the input box when the dialog box type is <code>prompt</code>.<br><br>
See also the <code>placeholder</code> property.
</td>

@@ -272,2 +275,12 @@ </tr>

<tr>
<td valign="top"><code>draggable</code></td>
<td valign="top"><em>mixed</em></td>
<td valign="top">true for dialog boxes that have a title</td>
<td valign="top">
Whether the dialog box should be draggable or not.<br><br>
Dialog boxes that have a title are draggable by default unless this property is set to <code>false</code>.<br><br>
For dialog boxes not having a title, set this property to <code>force</code> for making them draggable.
</td>
</tr>
<tr>
<td valign="top"><code>height</code></td>

@@ -338,2 +351,11 @@ <td valign="top"><em>mixed</em></td>

<tr>
<td valign="top"><code>placeholder</code></td>
<td valign="top"><em>string</em></td>
<td valign="top">""<br>(empty string)</td>
<td valign="top">
When set to <code>true</code> there will be a semitransparent backdrop behind the dialog box, preventing users from clicking the page's content.<br><br>
See also <code>default_value</code> property.
</td>
</tr>
<tr>
<td valign="top"><code>position</code></td>

@@ -370,2 +392,11 @@ <td valign="top"><em>mixed</em></td>

<tr>
<td valign="top"><code>prompt_rows</code></td>
<td valign="top"><em>integer</em></td>
<td valign="top">1</td>
<td valign="top">
If the dialog box type is <code>prompt</code>, setting this property to a value higher than <code>1</code>
will change the input box to a textarea input having the specified number of rows.
</td>
</tr>
<tr>
<td valign="top"><code>reposition_speed</code></td>

@@ -485,6 +516,15 @@ <td valign="top"><em>integer</em></td>

<tr>
<td valign="top"><code>onClose</code></td>
<td valign="top"><code>onOpen</code></td>
<td valign="top">
Event fired when <em>after</em> the dialog box is closed.<br><br>
For executing functions <em>before</em> the closing of the dialog box, see the <strong>buttons</strong> option.<br><br>
Event fired <em>after</em> the dialog box is opened.<br><br>
The callback function receives as unique argument the dialog box, as a jQuery element.
</td>
</tr>
<tr>
<td valign="top"><code>onBeforeClose</code></td>
<td valign="top">
Event fired <em>before</em> the dialog box is closed.<br><br>
<blockquote>The main difference when compared to the <code>onClose</code> event is that, with this event, by
returning <code>false</code> from the callback function you can prevent the closing of the dialog box - useful
for validating user input.</blockquote><br>
The callback function receives as first argument the caption of the clicked button or boolean <code>FALSE</code>

@@ -504,2 +544,24 @@ if the dialog box is closed by pressing the <code>ESC</code> key, by clicking the dialog box's <code>x</code>

</tr>
<tr>
<td valign="top"><code>onClose</code></td>
<td valign="top">
Event fired <em>after</em> the dialog box is closed.<br><br>
For executing functions <em>before</em> the closing of the dialog box, see the <strong>onBeforeClose</strong>
event or the <strong>buttons</strong> property.<br><br>
<blockquote>For properly validating user input you might want to use the <strong>onBeforeClose</strong> event
or the <strong>buttons</strong> property!</blockquote><br>
The callback function receives as first argument the caption of the clicked button or boolean <code>FALSE</code>
if the dialog box is closed by pressing the <code>ESC</code> key, by clicking the dialog box's <code>x</code>
button, or by clicking the backdrop. The argument can also be boolean <code>TRUE</code> when the dialog box
type is <code>prompt</code> and the <code>ENTER</code> key is pressed while inside the input box.<br><br>
As second argument, the callback function receives the value entered in the input box - when the dialog box
type is <code>prompt</code> and a button was clicked or the <code>ENTER</code> key was pressed while inside
the input box, or <code>undefined</code> for any other case.<br><br>
All this is important when expecting user input as you can say that you have user input <strong>only</strong>
when the value of the first argument is boolean <code>TRUE</code>or the value it's the same as the label of
the button considered as confirmation (i.e. "Ok"), and the value of the second argument is
<code>!==&nbsp;undefined</code>.<br><br>
See the <code>buttons</code> property or the <code>onBeforeClose</code> event for other ways of handling user input.
</td>
</tr>
</tbody>

@@ -506,0 +568,0 @@ </table>

dist/css/classic/zebra_dialog.css

Sorry, the diff of this file is not supported yet

dist/css/classic/zebra_dialog.min.css

Sorry, the diff of this file is not supported yet

dist/css/classic/zebra_dialog.scss

Sorry, the diff of this file is not supported yet

dist/css/flat/zebra_dialog.css

Sorry, the diff of this file is not supported yet

dist/css/flat/zebra_dialog.min.css

Sorry, the diff of this file is not supported yet

dist/css/flat/zebra_dialog.scss

Sorry, the diff of this file is not supported yet

dist/css/materialize/zebra_dialog.css

Sorry, the diff of this file is not supported yet

dist/css/materialize/zebra_dialog.min.css

Sorry, the diff of this file is not supported yet

dist/css/materialize/zebra_dialog.scss

Sorry, the diff of this file is not supported yet

dist/zebra_dialog.src.js

Sorry, the diff of this file is too big to display

examples/flat.html

Sorry, the diff of this file is not supported yet

examples/index.html

Sorry, the diff of this file is not supported yet

examples/materialize.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc