New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
zebra_dialog
Advanced tools
zebra_dialog - npm Package Compare versions
Comparing version 2.0.0 to 2.1.0
@@ -0,1 +1,8 @@ | ||
| ## version 2.1.0 (June 03, 2019) | ||
| - added [prompt](https://stefangabos.github.io/Zebra_Dialog/flat.html#handling-input) dialog box type; thanks to [Sebi Popa](https://github.com/sebipopa)! | ||
| - added `height` property for setting custom heights to dialog boxes | ||
| - added `update` method for adjusting the dialog box's position when content is changed dynamically, at run-time | ||
| - the overlay can now have a different parent than the `body` element, via the newly added `overlay_container` property | ||
| ## version 2.0.0 (August 01, 2018) | ||
@@ -2,0 +9,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(m){"use strict";m.Zebra_Dialog=function(){var c,d={animation_speed_hide:250,animation_speed_show:0,auto_close:!(this.version="2.0.0"),auto_focus_button:!0,buttons:!0,center_buttons:!1,custom_class:!1,keyboard:!0,max_height:0,message:"",modal:!0,overlay_close:!0,overlay_opacity:".9",position:"center",reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onClose:null},p=this,u={},h=function(){var t,e,i,s=m(window).width(),o=m(window).height(),n=p.dialog.width(),a=p.dialog.height(),r={left:0,top:0,right:s-n,bottom:o-a,center:(s-n)/2,middle:(o-a)/2};p.dialog_left=void 0,p.dialog_top=void 0,m.isArray(p.settings.position)&&2===p.settings.position.length&&"string"==typeof p.settings.position[0]&&p.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof p.settings.position[1]&&p.settings.position[1].match(/^(top|bottom|middle)[\s0-9\+\-]*$/)&&(p.settings.position[0]=p.settings.position[0].toLowerCase(),p.settings.position[1]=p.settings.position[1].toLowerCase(),m.each(r,function(t,e){var i,s;for(i=0;i<2;i++)(s=p.settings.position[i].replace(t,e))!==p.settings.position[i]&&(0===i?p.dialog_left=l(s):p.dialog_top=l(s))})),void 0!==p.dialog_left&&void 0!==p.dialog_top||(p.dialog_left=r.center,p.dialog_top=r.middle),p.dialog_top<0&&(p.dialog_top=0),o<a&&p.body.css("height",o-(m(".ZebraDialog_Title",p.dialog)?m(".ZebraDialog_Title",p.dialog).outerHeight():0)-(m(".ZebraDialog_Buttons",p.dialog)?m(".ZebraDialog_Buttons",p.dialog).outerHeight():0)-(parseFloat(p.body.css("paddingTop"))||0)-(parseFloat(p.body.css("paddingBottom"))||0)-(parseFloat(p.body.css("borderTopWidth"))||0)-(parseFloat(p.body.css("borderBottomWidth"))||0)),p.settings.vcenter_short_message&&(e=(t=p.body.find("div:first")).height())<(i=p.body.height())&&t.css("padding-top",(i-e)/2),"boolean"==typeof arguments[0]&&!1===arguments[0]||0===p.settings.reposition_speed?p.dialog.css({left:p.dialog_left,top:p.dialog_top,visibility:"visible",opacity:0}).animate({opacity:"1"},p.settings.animation_speed_show):(p.dialog.stop(!0),p.dialog.css("visibility","visible").animate({left:p.dialog_left,top:p.dialog_top},p.settings.reposition_speed)),void 0===c&&(!1!==p.settings.auto_focus_button?p.dialog.find("a[class^=ZebraDialog_Button]").eq(!0===p.settings.auto_focus_button?0:p.settings.auto_focus_button).focus():p.body.attr("tabindex",1).focus().removeAttr("tabindex")),p.isIE6&&setTimeout(_,500)},_=function(){var t=m(window).scrollTop(),e=m(window).scrollLeft();p.settings.modal&&p.overlay.css({top:t,left:e}),p.dialog.css({left:p.dialog_left+e,top:p.dialog_top+t})},f=function(){switch(p.settings.type){case"confirmation":case"error":case"information":case"question":case"warning":return p.settings.type.charAt(0).toUpperCase()+p.settings.type.slice(1).toLowerCase();default:return!1}},l=function(t){var e=0;for(t=t.replace(/\s/g,"").match(/[+\-]?([0-9\.\s]+)/g)||[];t.length;)e+=parseFloat(t.shift());return e},b={init:function(){this.name=this.searchString(this.dataBrowser)||"",this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||""},searchString:function(t){var e,i,s;for(e=0;e<t.length;e++)if(i=t[e].string,s=t[e].prop,this.versionSearchString=t[e].versionSearch||t[e].identity,i){if(-1!==i.indexOf(t[e].subString))return t[e].identity}else if(s)return t[e].identity},searchVersion:function(t){var e=t.indexOf(this.versionSearchString);if(-1!==e)return parseFloat(t.substring(e+this.versionSearchString.length+1))},dataBrowser:[{string:navigator.userAgent,subString:"MSIE",identity:"explorer",versionSearch:"MSIE"}]};return p.settings={},"string"==typeof arguments[0]&&(u.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(u=m.extend(u,"object"==typeof arguments[0]?arguments[0]:arguments[1])),p.init=function(){var t,s,e,i,o,n,a,r,l,g;if(p.settings=m.extend({},d,u),p.isIE6="explorer"===b.name&&6===b.version||!1,p.settings.modal&&(p.overlay=m("<div>",{"class":"ZebraDialogOverlay"}).css({position:p.isIE6?"absolute":"fixed",left:0,top:0,opacity:p.settings.overlay_opacity+""}),p.settings.overlay_close&&p.overlay.on("click",function(){p.close()}),p.overlay.appendTo("body")),p.dialog=m("<div>",{"class":"ZebraDialog"+(p.settings.custom_class?" "+p.settings.custom_class:"")+(!1!==f()?" ZebraDialog_Icon ZebraDialog_"+f():"")}).css({position:p.isIE6?"absolute":"fixed",left:0,top:0,visibility:"hidden"}),!p.settings.buttons&&p.settings.auto_close&&p.dialog.attr("id","ZebraDialog_"+Math.floor(9999999*Math.random())),l=parseInt(p.settings.width,10),!isNaN(l)&&l===p.settings.width&&l.toString()===p.settings.width.toString()&&0<l&&p.dialog.css("width",p.settings.width),p.settings.title?r=m("<h3>",{"class":"ZebraDialog_Title"}).html(p.settings.title).appendTo(p.dialog):p.dialog.addClass("ZebraDialog_NoTitle"),e=function(){if(!0!==p.settings.buttons&&!m.isArray(p.settings.buttons))return!1;if(!0===p.settings.buttons)switch(p.settings.type){case"question":case"warning":p.settings.buttons=["Ok","Cancel"];break;default:p.settings.buttons=["Ok"]}return p.settings.buttons}(),p.body=m("<div>",{"class":"ZebraDialog_Body"}),0<p.settings.max_height&&(p.body.css("max-height",p.settings.max_height),p.isIE6&&p.body.attr("style","height: expression(this.scrollHeight > "+p.settings.max_height+' ? "'+p.settings.max_height+'px" : "85px")')),p.settings.vcenter_short_message?m("<div>").html(p.settings.message).appendTo(p.body):p.body.html(p.settings.message),p.settings.source&&"object"==typeof p.settings.source)for(g in i=p.settings.vcenter_short_message?m("div:first",p.body):p.body,p.settings.source)switch(g){case"ajax":t="string"==typeof p.settings.source[g]?{url:p.settings.source[g]}:p.settings.source[g],a=m("<div>").attr("class","ZebraDialog_Preloader").appendTo(i),t.success=function(t){a.remove(),i.append(t),h(!1)},m.ajax(t);break;case"iframe":o={width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},n=m.extend(o,"string"==typeof p.settings.source[g]?{src:p.settings.source[g]}:p.settings.source[g]),i.append(m("<iframe>").attr(n));break;case"inline":i.append(p.settings.source[g])}return p.body.appendTo(p.dialog),e?(e.reverse(),s=m("<div>",{"class":"ZebraDialog_Buttons"}).appendTo(p.dialog),m.each(e,function(t,e){var i=m("<a>",{href:"javascript:void(0)","class":"ZebraDialog_Button_"+t+(void 0!==e.custom_class&&""!==e.custom_class.toString().trim()?" "+e.custom_class:"")});void 0!==e.caption?i.html(e.caption):i.html(e),i.on("click",function(){var t=!0;void 0!==e.callback&&(t=e.callback(p.dialog)),!1!==t&&p.close(void 0!==e.caption?e.caption:e)}),i.appendTo(s)}),p.settings.center_buttons&&s.addClass("ZebraDialog_Buttons_Centered")):p.dialog.addClass("ZebraDialog_NoButtons"),p.dialog.appendTo("body"),p.settings.show_close_button?m('<a href="javascript:void(0)" class="ZebraDialog_Close">×</a>').on("click",function(t){t.preventDefault(),p.close()}).appendTo(r||p.body):p.dialog.addClass("ZebraDialog_NoCloseButton"),m(window).on("resize.Zebra_Dialog",function(){clearTimeout(c),c=setTimeout(function(){h()},100)}),p.settings.keyboard&&m(document).on("keyup.Zebra_Dialog",function(t){return 27===t.which&&p.close(),!0}),p.isIE6&&m(window).on("scroll.Zebra_Dialog",function(){_()}),!1!==p.settings.auto_close&&(p.dialog.on("click",function(){clearTimeout(p.timeout),p.close()}),p.timeout=setTimeout(p.close,p.settings.auto_close)),h(!1),p},p.close=function(t){m(document).off(".Zebra_Dialog"),m(window).off(".Zebra_Dialog"),p.overlay&&p.overlay.animate({opacity:"0"},p.settings.animation_speed_hide,function(){p.overlay.remove()}),p.dialog.animate({top:"0",opacity:"0"},p.settings.animation_speed_hide,function(){p.dialog.remove(),p.settings.onClose&&"function"==typeof p.settings.onClose&&p.settings.onClose(void 0!==t?t:"")})},b.init(),p.init()}}(jQuery); | ||
| !function(D){"use strict";D.Zebra_Dialog=function(){var u,h={animation_speed_hide:250,animation_speed_show:0,auto_close:!(this.version="2.1.0"),auto_focus_button:!0,buttons:!0,center_buttons:!1,custom_class:!1,height:0,keyboard:!0,max_height:0,message:"",modal:!0,overlay_close:!0,overlay_container:"body",overlay_opacity:".9",position:"center",reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onClose:null},_=this,f={},b=!1,m=function(){var t,e,i,o=D(window).width(),s=D(window).height(),n=_.dialog.width(),a=_.dialog.height(),r={left:0,top:0,right:o-n,bottom:s-a,center:(o-n)/2,middle:(s-a)/2};_.dialog_left=void 0,_.dialog_top=void 0,D.isArray(_.settings.position)&&2===_.settings.position.length&&"string"==typeof _.settings.position[0]&&_.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof _.settings.position[1]&&_.settings.position[1].match(/^(top|bottom|middle)[\s0-9\+\-]*$/)&&(_.settings.position[0]=_.settings.position[0].toLowerCase(),_.settings.position[1]=_.settings.position[1].toLowerCase(),D.each(r,function(t,e){var i,o;for(i=0;i<2;i++)(o=_.settings.position[i].replace(t,e))!==_.settings.position[i]&&(0===i?_.dialog_left=g(o):_.dialog_top=g(o))})),void 0!==_.dialog_left&&void 0!==_.dialog_top||(_.dialog_left=r.center,_.dialog_top=r.middle),_.dialog_top<0&&(_.dialog_top=0),s<a&&_.body.css("height",s-(D(".ZebraDialog_Title",_.dialog)?D(".ZebraDialog_Title",_.dialog).outerHeight():0)-(D(".ZebraDialog_Buttons",_.dialog)?D(".ZebraDialog_Buttons",_.dialog).outerHeight():0)-(parseFloat(_.body.css("paddingTop"))||0)-(parseFloat(_.body.css("paddingBottom"))||0)-(parseFloat(_.body.css("borderTopWidth"))||0)-(parseFloat(_.body.css("borderBottomWidth"))||0)),_.settings.vcenter_short_message&&(e=(t=_.body.find("div:first")).height())<(i=_.body.height())&&t.css("padding-top",(i-e)/2),"boolean"==typeof arguments[0]&&!1===arguments[0]||0===_.settings.reposition_speed?_.dialog.css({left:_.dialog_left,top:_.dialog_top,visibility:"visible",opacity:0}).animate({opacity:"1"},_.settings.animation_speed_show):(_.dialog.stop(!0),_.dialog.css("visibility","visible").animate({left:_.dialog_left,top:_.dialog_top},_.settings.reposition_speed)),void 0===u&&(!1!==_.settings.auto_focus_button?_.dialog.find("a[class^=ZebraDialog_Button]").eq(!0===_.settings.auto_focus_button?0:_.settings.auto_focus_button).focus():_.body.attr("tabindex",1).focus().removeAttr("tabindex")),_.isIE6&&setTimeout(y,500)},y=function(){var t=D(window).scrollTop(),e=D(window).scrollLeft();_.settings.modal&&_.overlay.css({top:t,left:e}),_.dialog.css({left:_.dialog_left+e,top:_.dialog_top+t})},v=function(){switch(_.settings.type){case"confirmation":case"error":case"information":case"question":case"warning":case"prompt":return _.settings.type.charAt(0).toUpperCase()+_.settings.type.slice(1).toLowerCase();default:return!1}},g=function(t){var e=0;for(t=t.replace(/\s/g,"").match(/[+\-]?([0-9\.\s]+)/g)||[];t.length;)e+=parseFloat(t.shift());return e},w={init:function(){this.name=this.searchString(this.dataBrowser)||"",this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||""},searchString:function(t){var e,i,o;for(e=0;e<t.length;e++)if(i=t[e].string,o=t[e].prop,this.versionSearchString=t[e].versionSearch||t[e].identity,i){if(-1!==i.indexOf(t[e].subString))return t[e].identity}else if(o)return t[e].identity},searchVersion:function(t){var e=t.indexOf(this.versionSearchString);if(-1!==e)return parseFloat(t.substring(e+this.versionSearchString.length+1))},dataBrowser:[{string:navigator.userAgent,subString:"MSIE",identity:"explorer",versionSearch:"MSIE"}]};return _.settings={},"string"==typeof arguments[0]&&(f.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(f=D.extend(f,"object"==typeof arguments[0]?arguments[0]:arguments[1])),_.init=function(){var t,o,e,i,s,n,a,r,g,l,c,d,p=0;if(_.settings=D.extend({},h,f),_.isIE6="explorer"===w.name&&6===w.version||!1,_.settings.modal&&(_.overlay=D("<div>",{"class":"ZebraDialogOverlay"}).css({position:_.isIE6?"absolute":"fixed",left:0,top:0,opacity:_.settings.overlay_opacity+""}),"body"!==_.settings.overlay_container&&(d=(c=_.settings.overlay_container).offset(),_.overlay.css({left:d.left,top:d.top,width:c.outerWidth(),height:c.outerHeight()})),_.settings.overlay_close&&_.overlay.on("click",function(){_.close()}),_.overlay.appendTo(_.settings.overlay_container)),_.dialog=D("<div>",{"class":"ZebraDialog"+(_.settings.custom_class?" "+_.settings.custom_class:"")+(!1!==v()?" ZebraDialog_Icon ZebraDialog_"+v():"")}).css({position:_.isIE6?"absolute":"fixed",left:0,top:0,visibility:"hidden"}),D(".ZebraDialog").each(function(){var t=D(this).css("zIndex");t&&p<t&&(p=t)}),0<p&&_.dialog.css("zIndex",p+1),!_.settings.buttons&&_.settings.auto_close&&_.dialog.attr("id","ZebraDialog_"+Math.floor(9999999*Math.random())),g=parseInt(_.settings.width,10),!isNaN(g)&&g===_.settings.width&&g.toString()===_.settings.width.toString()&&0<g&&_.dialog.css("width",_.settings.width),_.settings.title?r=D("<h3>",{"class":"ZebraDialog_Title"}).html(_.settings.title).appendTo(_.dialog):_.dialog.addClass("ZebraDialog_NoTitle"),_.body=D("<div>",{"class":"ZebraDialog_Body"}),0<_.settings.height&&_.body.css("height",_.settings.height),0<_.settings.max_height&&(_.body.css("max-height",_.settings.max_height),_.isIE6&&_.body.attr("style","height: expression(this.scrollHeight > "+_.settings.max_height+' ? "'+_.settings.max_height+'px" : "85px")')),"prompt"===_.settings.type&&(_.settings.message+='<input type="text" name="ZebraDialog_Prompt_Input" class="ZebraDialog_Prompt_Input">'),_.settings.vcenter_short_message?D("<div>").html(_.settings.message).appendTo(_.body):_.body.html(_.settings.message),"prompt"===_.settings.type&&D(".ZebraDialog_Prompt_Input",_.body).on("keypress",function(t){13===t.keyCode&&(b?b.trigger("click"):_.close(!0,this.value))}),_.settings.source&&"object"==typeof _.settings.source)for(l in i=_.settings.vcenter_short_message?D("div:first",_.body):_.body,_.settings.source)switch(l){case"ajax":t="string"==typeof _.settings.source[l]?{url:_.settings.source[l]}:_.settings.source[l],a=D("<div>").attr("class","ZebraDialog_Preloader").appendTo(i),t.success=function(t){a.remove(),i.append(t),m(!1)},D.ajax(t);break;case"iframe":s={width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},n=D.extend(s,"string"==typeof _.settings.source[l]?{src:_.settings.source[l]}:_.settings.source[l]),i.append(D("<iframe>").attr(n));break;case"inline":i.append(_.settings.source[l])}return _.body.appendTo(_.dialog),(e=function(){if(!0!==_.settings.buttons&&!D.isArray(_.settings.buttons))return!1;if(!0===_.settings.buttons)switch(_.settings.type){case"question":case"warning":case"prompt":_.settings.buttons=["Ok","Cancel"];break;default:_.settings.buttons=["Ok"]}return _.settings.buttons}())?(o=D("<div>",{"class":"ZebraDialog_Buttons"}).appendTo(_.dialog),D.each(e,function(t,i){var e=D("<a>",{href:"javascript:void(0)","class":"ZebraDialog_Button_"+t+(void 0!==i.custom_class&&""!==i.custom_class.toString().trim()?" "+i.custom_class:"")});void 0!==i.caption?e.html(i.caption):e.html(i),e.on("click",function(){var t=!0,e="prompt"===_.settings.type&&D(".ZebraDialog_Prompt_Input",_.body).length?D(".ZebraDialog_Prompt_Input",_.body).val():void 0;void 0!==i.callback&&(t=i.callback(_.dialog,e)),!1!==t&&_.close(void 0!==i.caption?i.caption:i,e)}),e.appendTo(o),void 0!==i.default_confirmation&&i.default_confirmation&&(b=e)}),_.settings.center_buttons&&o.addClass("ZebraDialog_Buttons_Centered")):_.dialog.addClass("ZebraDialog_NoButtons"),_.dialog.appendTo("body"),_.settings.show_close_button?D('<a href="javascript:void(0)" class="ZebraDialog_Close">×</a>').on("click",function(t){t.preventDefault(),_.close()}).appendTo(r||_.body):_.dialog.addClass("ZebraDialog_NoCloseButton"),D(window).on("resize.Zebra_Dialog",function(){clearTimeout(u),u=setTimeout(function(){m()},100)}),_.settings.keyboard&&D(document).on("keyup.Zebra_Dialog",function(t){return 27===t.which&&_.close(),!0}),_.isIE6&&D(window).on("scroll.Zebra_Dialog",function(){y()}),!1!==_.settings.auto_close&&(_.dialog.on("click",function(){clearTimeout(_.timeout),_.close()}),_.timeout=setTimeout(_.close,_.settings.auto_close)),m(!1),"prompt"===_.settings.type&&D(".ZebraDialog_Prompt_Input",_.body).focus(),_},_.close=function(t,e){D(document).off(".Zebra_Dialog"),D(window).off(".Zebra_Dialog"),_.overlay&&_.overlay.animate({opacity:"0"},_.settings.animation_speed_hide,function(){_.overlay.remove()}),_.dialog.animate({top:"0",opacity:"0"},_.settings.animation_speed_hide,function(){_.dialog.remove(),_.settings.onClose&&"function"==typeof _.settings.onClose&&_.settings.onClose(void 0!==t?t:"",e)})},_.update=function(){clearTimeout(u),u=setTimeout(function(){m()},100)},w.init(),_.init()}}(jQuery); |
| $(document).ready(function() { | ||
| $('#example1_1').on('click', function() { | ||
| new $.Zebra_Dialog('Use confirmation messages to let the user know that an action has completed successfully.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Confirmation', | ||
| type: 'confirmation' | ||
| }); | ||
| }); | ||
| $('#example1_2').on('click', function() { | ||
| new $.Zebra_Dialog('Use error messages to let the user know that an action has not completed successfully and show the reason why that happened.', { | ||
@@ -11,11 +19,31 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example1_2').on('click', function() { | ||
| new $.Zebra_Dialog('Show warning messages like this when you are about to perform a sensitive operation and you want to make sure that the user understands the implications.', { | ||
| $('#example1_3').on('click', function() { | ||
| new $.Zebra_Dialog('Use information boxes to show information or help messages that the user requested.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Warning', | ||
| type: 'warning', | ||
| title: 'Information', | ||
| type: 'information' | ||
| }); | ||
| }); | ||
| $('#example1_3').on('click', function() { | ||
| $('#example1_4').on('click', function() { | ||
| new $.Zebra_Dialog('Use prompt dialogs to ask for user input.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Prompt', | ||
| type: 'prompt', | ||
| onClose: function(caption, prompt) { | ||
| // this is the correct way of checking input: | ||
| // "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, 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 - 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 | ||
| if (undefined !== prompt && (caption === true || caption === 'Ok')) alert('Input value was: "' + prompt + '"'); | ||
| else alert('Input cancelled'); | ||
| } | ||
| }); | ||
| }); | ||
| $('#example1_5').on('click', function() { | ||
| new $.Zebra_Dialog('Show confirmation dialogs like this when you want the user\'s accept for non-critical actions.', { | ||
@@ -28,19 +56,74 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example1_4').on('click', function() { | ||
| new $.Zebra_Dialog('Use information boxes to show information or help messages that the user requested.', { | ||
| $('#example1_6').on('click', function() { | ||
| new $.Zebra_Dialog('Show warning messages like this when you are about to perform a sensitive operation and you want to make sure that the user understands the implications.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Information', | ||
| type: 'information' | ||
| title: 'Warning', | ||
| type: 'warning' | ||
| }); | ||
| }); | ||
| $('#example1_5').on('click', function() { | ||
| new $.Zebra_Dialog('Use confirmation messages to let the user know that an action has completed successfully.', { | ||
| $('#example2_1').on('click', function() { | ||
| new $.Zebra_Dialog('Type something in the input box and then try closing this dialog box by clicking on the overlay, ' + | ||
| 'by clicking on the "x" button, by pressing the ESC key, or by clicking on the <em>Cancel</em> button.<br><br>' + | ||
| 'You should be able to get the input\'s value <strong>only</strong> when pressing ENTER while inside the input' + | ||
| ' box, or when clicking the <em>Ok</em> button.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Confirmation', | ||
| type: 'confirmation' | ||
| title: 'Prompt', | ||
| type: 'prompt', | ||
| onClose: 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 (undefined !== prompt && (caption === true || caption === 'Ok')) | ||
| alert('Input value was: "' + prompt + '"'); | ||
| else | ||
| alert('Input cancelled'); | ||
| } | ||
| }); | ||
| }); | ||
| $('#example2').on('click', function() { | ||
| $('#example2_2').on('click', function() { | ||
| new $.Zebra_Dialog('Type something in the input box and then try closing this dialog box by clicking on the overlay, ' + | ||
| 'by clicking on the "x" button, by pressing the ESC key, or by clicking on the <em>Cancel</em> button.<br><br>' + | ||
| 'You should be able to get the input\'s value <strong>only</strong> when pressing ENTER while inside the input' + | ||
| ' box, or when clicking the <em>Ok</em> button.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Prompt', | ||
| type: 'prompt', | ||
| buttons: [ | ||
| 'Cancel', | ||
| { | ||
| caption: 'Ok', | ||
| // | ||
| // SETTING THIS IS VERY IMPORTANT! | ||
| // | ||
| // this tells the library which button's callback to trigger when the users presses ENTER while | ||
| // inside the input box. | ||
| // | ||
| // if you do not set this, you will not be able to handle user input for this case; you will have | ||
| // to use the "onClose" event - see previous example | ||
| default_confirmation: true, | ||
| callback: function($dialog, prompt) { | ||
| alert('Input value was: "' + prompt + '"'); | ||
| } | ||
| } | ||
| ] | ||
| }); | ||
| }); | ||
| $('#example3').on('click', function() { | ||
| 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 to handle user\'s choice in a different way.', { | ||
@@ -57,3 +140,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example3').on('click', function() { | ||
| $('#example4').on('click', function() { | ||
| new $.Zebra_Dialog('We can set as many buttons as we want and we can handle the user\'s choice though the callback functions attached to the buttons.', { | ||
@@ -71,3 +154,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example4_1').on('click', function() { | ||
| $('#example5_1').on('click', function() { | ||
| new $.Zebra_Dialog('I am positioned in the <strong>top-left</strong> corner, 20 pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'left + 20\', \'top + 20\']</code>', { | ||
@@ -81,3 +164,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example4_2').on('click', function() { | ||
| $('#example5_2').on('click', function() { | ||
| new $.Zebra_Dialog('I am positioned in the <strong>top-right</strong> corner, 20 pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'right - 20\', \'top + 20\']</code>', { | ||
@@ -91,3 +174,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example4_3').on('click', function() { | ||
| $('#example5_3').on('click', function() { | ||
| new $.Zebra_Dialog('I am positioned in the <strong>bottom-right</strong> corner, 20 pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'right - 20\', \'bottom - 20\']</code>', { | ||
@@ -101,3 +184,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example4_4').on('click', function() { | ||
| $('#example5_4').on('click', function() { | ||
| new $.Zebra_Dialog('I am positioned in the <strong>bottom-left</strong> corner, 20 pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'left + 20\', \'bottom - 20\']</code>', { | ||
@@ -111,3 +194,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example4_5').on('click', function() { | ||
| $('#example5_5').on('click', function() { | ||
| new $.Zebra_Dialog('I am positioned in the <strong>center</strong> of the screen. Here\'s how it\'s done:<br><code>position: [\'center\', \'center\']</code>', { | ||
@@ -121,3 +204,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example4_6').on('click', function() { | ||
| $('#example5_6').on('click', function() { | ||
| new $.Zebra_Dialog('I am centered horizontally and 50 pixels from the top edge. Here\'s how it\'s done:<br><code>position: [\'center\', \'top + 50\']</code>', { | ||
@@ -131,3 +214,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example5').on('click', function() { | ||
| $('#example6').on('click', function() { | ||
| new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', { | ||
@@ -138,3 +221,3 @@ auto_focus_button: $('body.materialize').length ? false : true | ||
| $('#example6').on('click', function() { | ||
| $('#example7').on('click', function() { | ||
| new $.Zebra_Dialog('I am a notification widget. No buttons, no overlay, I am positioned in the top-right corner and I stay on screen for 2 seconds.', { | ||
@@ -149,3 +232,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example7').on('click', function() { | ||
| $('#example8').on('click', function() { | ||
| new $.Zebra_Dialog({ | ||
@@ -161,3 +244,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example8').on('click', function() { | ||
| $('#example9').on('click', function() { | ||
| new $.Zebra_Dialog({ | ||
@@ -173,3 +256,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example9').on('click', function() { | ||
| $('#example10').on('click', function() { | ||
| new $.Zebra_Dialog({ | ||
@@ -188,3 +271,3 @@ auto_focus_button: $('body.materialize').length ? false : true, | ||
| $('#example10').on('click', function() { | ||
| $('#example11').on('click', function() { | ||
| new $.Zebra_Dialog('I love coffee!', { | ||
@@ -191,0 +274,0 @@ auto_focus_button: $('body.materialize').length ? false : true, |
| { | ||
| "name": "zebra_dialog", | ||
| "description": "A small, compact and highly configurable dialog box plugin for jQuery meant to replace JavaScript's native alert and confirmation windows", | ||
| "description": "A small, compact, and highly configurable dialog box plugin for jQuery meant to replace JavaScript's native alert and confirmation windows", | ||
| "author": { | ||
@@ -15,3 +15,3 @@ "name": "Stefan Gabos", | ||
| "license": "LGPL-3.0", | ||
| "version": "2.0.0", | ||
| "version": "2.1.0", | ||
| "keywords": [ | ||
@@ -18,0 +18,0 @@ "jquery-plugin", |
@@ -11,3 +11,3 @@ <img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right"> | ||
| **Zebra Dialog** is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) , and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert* and *confirmation* dialog boxes. | ||
| **Zebra Dialog** is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) , and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert*, *confirmation* and *prompt* dialog boxes. | ||
@@ -23,3 +23,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. | ||
| - great looking dialog boxes, out of the box, with 3 beautiful themes included | ||
| - 5 types of dialog boxes available: *confirmation*, *information*, *warning*, *error* and *question* | ||
| - 6 types of dialog boxes available: *confirmation*, *error*, *information*, *prompt*, *question* and *warning* | ||
| - content can also be added through AJAX calls, iFrames or from inline elements (together with attached events) | ||
@@ -38,3 +38,3 @@ - easily customisable appearance by editing the CSS file | ||
| For the [materialize theme](https://stefangabos.github.io/Zebra_Dialog/flat.html) theme, the icons used are taken from [Google's Material Design](https://material.io/tools/icons/?style=baseline) *"design language"*. | ||
| For the [materialize theme](https://stefangabos.github.io/Zebra_Dialog/materialize.html) theme, the icons used are taken from [Google's Material Design](https://material.io/tools/icons/?style=baseline) *"design language"*. | ||
@@ -112,2 +112,3 @@ ## Demo | ||
| ``` | ||
| Now, within the DOM-ready event do | ||
@@ -183,9 +184,12 @@ | ||
| Use this for localization and for adding custom buttons.<br><br> | ||
| If set to <code>true</code>, the default buttons will be used, depending on the type of the dialog box: <code>['Ok', 'Cancel']</code> for <em>warning</em> and <em>question</em> and types, and <code>['Ok']</code> for the other types of dialog boxes.<br><br> | ||
| If set to <code>true</code>, the default buttons will be used, depending on the type of the dialog box: <code>['Ok', 'Cancel']</code> for <code>prompt</code>, <code>question</code> and <code>warning</code> types, and <code>['Ok']</code> for the other types of dialog boxes.<br><br> | ||
| For custom buttons, use an array containing the captions of the buttons to display: <code>['My button 1', 'My button 2']</code>.<br><br> | ||
| Set to <code>false</code> if you want no buttons.<br><br> | ||
| You can also add custom CSS classes and/or attach callback functions to individual buttons by providing an array of objects like:<br><br> | ||
| 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 | ||
| objects in the form of:<br><br> | ||
| <code>[{</code><br> | ||
| <code> caption: 'My button 1',</code><br> | ||
| <code> custom_class: 'foo',</code><br> | ||
| <code> default_confirmation: true,</code><br> | ||
| <code> callback: function() { // code }</code><br> | ||
@@ -197,3 +201,11 @@ <code>},{</code><br> | ||
| <code>}]</code><br><br> | ||
| Callback functions get as argument the entire dialog box jQuery object.<br><br> | ||
| For <code>prompt</code> dialog box types use the <code>default_confirmation</code> property to tell the library | ||
| 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 be able to process user input for this case.<br><br> | ||
| Callback functions receive as first argument the entire dialog box, as a jQuery object, and as second argument, | ||
| the value entered in the input box - when the dialog box's type is <code>prompt</code>, or <code>undefined</code> | ||
| for the other dialog types.<br><br> | ||
| A callback function attache to a button is executed as soon as the button is clicked rather than <strong>after | ||
| </strong> the dialog box is closed, as it is the case with the <code>onClose</code> event.<br><br> | ||
| <blockquote>A callback function returning FALSE will prevent the dialog box from closing.</blockquote> | ||
@@ -223,2 +235,11 @@ </td> | ||
| <tr> | ||
| <td valign="top"><code>height</code></td> | ||
| <td valign="top"><em>integer</em></td> | ||
| <td valign="top">0</td> | ||
| <td valign="top"> | ||
| By default, the height of the dialog box is automatically set and it is also influenced by the <code>max_height</code> | ||
| property. Use this to set a fixed height, in pixels, for the dialog box.<br><br> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>keyboard</code></td> | ||
@@ -335,3 +356,3 @@ <td valign="top"><em>boolean</em></td> | ||
| <code>}</code><br><br> | ||
| <blockquote>Note that you cannot use the "success" property as it will always be overwritten by the library; use the "complete" property instead, if you have to</blockquote><br> | ||
| <blockquote>Note that you cannot use the <code>success</code> property as it will always be overwritten by the library; use the <code>complete</code> property instead, if you have to</blockquote><br> | ||
| </li> | ||
@@ -349,3 +370,3 @@ <li> | ||
| <code>}</code><br><br> | ||
| <blockquote>Note that you should always set the iFrame's width and height and adjust the dialog box's "width" property accordingly</blockquote><br> | ||
| <blockquote>Note that you should always set the iFrame's width and height and adjust the dialog box's <code>width</code> property accordingly</blockquote><br> | ||
| </li> | ||
@@ -419,5 +440,16 @@ <li> | ||
| <td valign="top"> | ||
| Event fired when <em>after</em> the dialog box is closed.<br> | ||
| For executing functions <em>before</em> the closing of the dialog box, see the <strong>buttons</strong> option.<br> | ||
| The callback function takes as argument the caption of the clicked button, or <code>false</code> if the dialog box was closed by pressing the ESC key or by clicking on the overlay. | ||
| 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> | ||
| 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 overlay. 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>!== undefined</code>.<br><br> | ||
| See the <code>buttons</code> property for another way of handling user input. | ||
| </td> | ||
@@ -440,2 +472,15 @@ </tr> | ||
| ### `update()` | ||
| Use this method to adjust the dialog box's position after content is changed dynamically, at run-time. | ||
| ```javascript | ||
| var dialog = new $.Zebra_Dialog('This is some information'); | ||
| // change the content in the dialog box | ||
| $('.ZebraDialog_Body').html('New content'); | ||
| dialog.update(); | ||
| ``` | ||
| ## Support the development of this project | ||
@@ -442,0 +487,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Number of lines in readme file
- increased by10.25%
484
Worsened metrics
- Total package byte prevSize
- decreased by-19.99%
309316
- Lines of code
- decreased by-6.99%
1729
No dependency changes