Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
zebra_dialog
Advanced tools
zebra_dialog - npm Package Compare versions
Comparing version 2.1.1 to 3.0.0
@@ -0,1 +1,17 @@ | ||
| ## version 3.0.0 (TBA, 2019) | ||
| - page scrolling behind an open dialog box is now disabled by default | ||
| - added `margin` property to prevent the dialog box from touching the viewport's limits when stretched 100% horizontally and/or vertically | ||
| - added `max_width` property which, together with the existing `max_height` property, can now be specified as percentage | ||
| - added the `default_value` property to be used for `prompt` type dialog boxes | ||
| - `width` and `height` properties can now be specified as percentages, too | ||
| - `custom_class` is now also added to the overlay, not just to the dialog box | ||
| - the word `center` can also be used when specifying vertical position (alongside `middle`) | ||
| - when using iFrames, the width and height is now automatically computed to fit those of the dialog box; additionally, now a spinner is also shown while the iFrame content is loading | ||
| - the library now automatically does backdrop management when opening multiple modal dialog boxes | ||
| - dropped IE6 support | ||
| - fixed bug where the positioning of the dialog box was incorrect it had borders | ||
| - removed the `backdrop_container` property | ||
| - minor tweaks to all the templates | ||
| ## version 2.1.0 (June 03, 2019) | ||
@@ -89,3 +105,3 @@ | ||
| - fixed a bug where if the "reposition_speed" property was > 0 and the browser window was manually resized, the animations for repositioning the window would queue up and slow down the process to almost a complete halt; | ||
| - changed the name of the "animaton_speed" property to "animation_speed_hide" and added a new "animation_speed_show" used to set the speed by which the dialog box will fade in when appearing; | ||
| - changed the name of the "animation_speed" property to "animation_speed_hide" and added a new "animation_speed_show" used to set the speed by which the dialog box will fade in when appearing; | ||
@@ -92,0 +108,0 @@ ## version 1.3.1 (May 06, 2013) |
@@ -1,1 +0,1 @@ | ||
| !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.1"),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); | ||
| !function(T){"use strict";T.Zebra_Dialog=function(){var _,h,f={animation_speed_hide:250,animation_speed_show:0,auto_close:!(this.version="3.0.0"),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},y=this,v={},D=!1,Z=!1,w=function(){var t,e,o,i,s,a=T(window).width(),n=T(window).height(),r=y.dialog.outerWidth(),l=y.dialog.outerHeight(),d=a<768,g=0,c=0;y.dialog_left=void 0,y.dialog_top=void 0,(s=(y.settings.margin+"").match(/^([0-9]+)(\%)?$/))&&(void 0!==s[2]?(g=parseInt(a*parseInt(s[1],10)/100,10),c=parseInt(n*parseInt(s[1],10)/100,10)):g=c=parseInt(s[1],10),isNaN(g)&&(g=c=0)),t={left:g,top:c,right:a-g-r,bottom:n-c-l,center:(a-r)/2,middle:(n-l)/2},T.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"),T.each(t,function(t,e){var o,i,s;for(o=0;o<2;o++)(i=(s=d?y.settings.position[o].replace(/[0-9\+\-\s]/g,""):y.settings.position[o]).replace(t,e))!==s&&(0===o?y.dialog_left=p(i):y.dialog_top=p(i))})),void 0!==y.dialog_left&&void 0!==y.dialog_top||(y.dialog_left=t.center,y.dialog_top=t.middle),y.dialog_top<c&&(y.dialog_top=c),n-2*c<l+c?y.body.css("height",n-2*c-(T(".ZebraDialog_Title",y.dialog)?T(".ZebraDialog_Title",y.dialog).outerHeight():0)-(T(".ZebraDialog_Buttons",y.dialog)?T(".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()-(T(".ZebraDialog_Title",y.dialog)?T(".ZebraDialog_Title",y.dialog).outerHeight():0)-(T(".ZebraDialog_Buttons",y.dialog)?T(".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.iframe.css("height",y.body.height()-5),y.settings.vcenter_short_message&&(o=(e=y.body.find("div:first")).height())<(i=y.body.height())&&e.css("padding-top",(i-o)/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)),void 0===_&&(!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"))},k=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}},p=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]&&(v.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(v=T.extend(v,"object"==typeof arguments[0]?arguments[0]:arguments[1])),y.init=function(){var t,i,e,o,s,a,n,r,l,d,g,c,p,u,b=T("body"),m=0;if(y.settings=T.extend({},f,v),T(".ZebraDialog").each(function(){var t=parseInt(T(this).css("zIndex"),10);t&&m<t&&(m=t)}),y.settings.modal&&(y.backdrop=T("<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),T(".ZebraDialogBackdrop").each(function(){var t=T(this);t.data("ZebraDialog_opacity")||t.data("ZebraDialog_opacity",t.css("opacity")).css("opacity",0)}),T(".ZebraDialog").each(function(){T(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&&!b.hasClass("ZebraDialog_NoScroll")&&b.data("ZebraDialog_vScroll",window.pageYOffset).css({right:(c=T("<div>").css({visibility:"hidden",overflow:"scroll",msOverflowStyle:"scrollbar"}).appendTo(T("body")),p=T("<div>").appendTo(c),u=c.outerWidth()-p.outerWidth(),c.remove(),p.remove(),u),top:-1*T(window).scrollTop()}).addClass("ZebraDialog_NoScroll")),y.dialog=T("<div>",{"class":"ZebraDialog"+(y.settings.custom_class?" "+y.settings.custom_class:"")+(y.settings.modal?"":" ZebraDialog_NotModal")+(!1!==k()?" ZebraDialog_Icon ZebraDialog_"+k():"")}).css({position:"fixed",left:0,top:0,visibility:"hidden"}),0<m&&y.dialog.css("zIndex",m+1),h=Math.floor(9999999*Math.random()),(d=(y.settings.width+"").match(/^([0-9]+)(\%)?$/))&&(d=void 0!==d[2]?parseInt(Math.max(document.documentElement.clientWidth,window.innerWidth||0)*parseInt(d[1],10)/100,10):parseInt(d[1],10),!isNaN(d)&&0<d&&y.dialog.css("width",d)),(isNaN(d)||0===d)&&(d=(y.settings.max_width+"").match(/^([0-9]+)(\%)?$/))&&(d=void 0!==d[2]?parseInt(Math.max(document.documentElement.clientWidth,window.innerWidth||0)*parseInt(d[1],10)/100,10):parseInt(d[1],10),!isNaN(d)&&0<d&&y.dialog.css("max-width",d)),(d=(y.settings.height+"").match(/^([0-9]+)(\%)?$/))&&(d=void 0!==d[2]?parseInt(Math.max(document.documentElement.clientHeight,window.innerHeight||0)*parseInt(d[1],10)/100,10):parseInt(d[1],10),!isNaN(d)&&0<d&&(y.dialog.css("height",d),Z=!0)),(isNaN(d)||0===d)&&(d=(y.settings.max_height+"").match(/^([0-9]+)(\%)?$/))&&(d=void 0!==d[2]?parseInt(Math.max(document.documentElement.clientHeight,window.innerHeight||0)*parseInt(d[1],10)/100,10):parseInt(d[1],10),!isNaN(d)&&0<d&&(y.dialog.css("max-height",d),Z=!0)),y.settings.title?l=T("<h3>",{"class":"ZebraDialog_Title"}).html(y.settings.title).appendTo(y.dialog):y.dialog.addClass("ZebraDialog_NoTitle"),y.body=T("<div>",{"class":"ZebraDialog_Body"}),"prompt"===y.settings.type&&(y.settings.message+='<input type="text" name="ZebraDialog_Prompt_Input" value="'+y.settings.default_value+'" class="ZebraDialog_Prompt_Input">'),y.settings.vcenter_short_message?T("<div>").html(y.settings.message).appendTo(y.body):y.body.html(y.settings.message),"prompt"===y.settings.type&&(y.settings.message=T(".ZebraDialog_Prompt_Input",y.body),T(".ZebraDialog_Prompt_Input",y.body).on("keypress",function(t){13===t.keyCode&&(D?D.trigger("click"):y.close(!0,this.value))})),y.settings.source&&"object"==typeof y.settings.source)for(g in o=y.settings.vcenter_short_message?T("div:first",y.body):y.body,y.settings.source)switch(g){case"ajax":t="string"==typeof y.settings.source[g]?{url:y.settings.source[g]}:y.settings.source[g],r=T("<div>").attr("class","ZebraDialog_Spinner").appendTo(o),t.success=function(t){r.remove(),o.append(t),w(!1)},T.ajax(t);break;case"iframe":s={width:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},a=T.extend(s,"string"==typeof y.settings.source[g]?{src:y.settings.source[g]}:y.settings.source[g]),y.iframe=T("<iframe>").attr(a).on("load",function(){T(".ZebraDialog_Spinner",y.body).remove()}),y.body.append(T("<div>").addClass("ZebraDialog_Spinner ZebraDialog_iFrame")),o.append(y.iframe);break;case"inline":o.append(y.settings.source[g])}return y.body.appendTo(y.dialog),(e=function(){if(!0!==y.settings.buttons&&!T.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}())?(i=T("<div>",{"class":"ZebraDialog_Buttons"}).appendTo(y.dialog),T.each(e,function(t,o){var e=T("<a>",{href:"javascript:void(0)","class":"ZebraDialog_Button_"+t+(void 0!==o.custom_class&&""!==o.custom_class.toString().trim()?" "+o.custom_class:"")});void 0!==o.caption?e.html(o.caption):e.html(o),e.on("click",function(){var t=!0,e="prompt"===y.settings.type&&T(".ZebraDialog_Prompt_Input",y.body).length?T(".ZebraDialog_Prompt_Input",y.body).val():void 0;void 0!==o.callback&&(t=o.callback(y.dialog,e)),!1!==t&&y.close(void 0!==o.caption?o.caption:o,e)}),e.appendTo(i),void 0!==o.default_confirmation&&o.default_confirmation&&(D=e)}),y.settings.center_buttons&&i.addClass("ZebraDialog_Buttons_Centered")):y.dialog.addClass("ZebraDialog_NoButtons"),y.dialog.appendTo(b),y.settings.show_close_button?T('<a href="javascript:void(0)" class="ZebraDialog_Close">×</a>').on("click",function(t){t.preventDefault(),y.close()}).appendTo(l||y.body):y.dialog.addClass("ZebraDialog_NoCloseButton"),T(window).on("resize.ZebraDialog_"+h,function(){clearTimeout(_),_=setTimeout(function(){w()},100)}),y.settings.keyboard&&T(document).on("keyup.ZebraDialog_"+h,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&&(T(".ZebraDialog_Prompt_Input",y.body).focus(),""!==y.settings.default_value&&(y.settings.message.get(0).setSelectionRange?(n=2*y.settings.default_value.length,setTimeout(function(){y.settings.message.get(0).setSelectionRange(n,n)},1)):y.settings.message.val(y.settings.default_value))),y},y.close=function(t,e){var o,i=y.settings.animation_speed_hide,s=T(".ZebraDialogBackdrop"),a=T(".ZebraDialog"),n=T("body"),r=s.length;T(document).off(".ZebraDialog_"+h),T(window).off(".ZebraDialog_"+h),y.settings.modal&&y.backdrop&&(1<r&&T(s[r-1]).is(y.backdrop)?((o=T(s[r-2])).css("opacity",o.data("ZebraDialog_opacity")).removeData("ZebraDialog_opacity"),i=0,T(a[r-2]).removeData("ZebraDialog_MuteESC")):1===r&&n.hasClass("ZebraDialog_NoScroll")&&(n.removeClass("ZebraDialog_NoScroll").css({right:"",top:"",height:""}),T(window).scrollTop(n.data("ZebraDialog_vScroll"))),y.backdrop.off("click").animate({opacity:"0"},i,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(void 0!==t?t:"",e)})},y.update=function(){clearTimeout(_),_=setTimeout(function(){w()},100)},y.init()}}(jQuery); |
| $(document).ready(function() { | ||
| var notification_options = { | ||
| auto_close: 2000, | ||
| modal: false, | ||
| buttons: false | ||
| } | ||
| $('#example1_1').on('click', function() { | ||
@@ -20,3 +26,3 @@ new $.Zebra_Dialog('Use confirmation messages to let the user know that an action has completed successfully.', { | ||
| $('#example1_3').on('click', function() { | ||
| new $.Zebra_Dialog('Use information boxes to show information or help messages that the user requested.', { | ||
| new $.Zebra_Dialog('Use these types of dialog boxes to convey information to the user.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
@@ -31,2 +37,3 @@ title: 'Information', | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| default_value: 'A default value can be set', | ||
| title: 'Prompt', | ||
@@ -43,4 +50,6 @@ type: 'prompt', | ||
| // to check if the appropriate button was clicked | ||
| if (undefined !== prompt && (caption === true || caption === 'Ok')) alert('Input value was: "' + prompt + '"'); | ||
| else alert('Input cancelled'); | ||
| if (undefined !== prompt && (caption === true || caption === 'Ok')) | ||
| 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: 'error' })); | ||
| } | ||
@@ -69,5 +78,6 @@ }); | ||
| '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.', { | ||
| 'The input\'s value will be returned <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, | ||
| default_value: 'A default value can be set', | ||
| title: 'Prompt', | ||
@@ -90,7 +100,6 @@ type: 'prompt', | ||
| // you are using as the confirmation button | ||
| if (undefined !== prompt && (caption === true || caption === 'Ok')) | ||
| alert('Input value was: "' + prompt + '"'); | ||
| new $.Zebra_Dialog('Input value was:<br><br>"' + prompt + '"', $.extend({}, notification_options, { type: 'confirmation' })); | ||
| else | ||
| alert('Input cancelled'); | ||
| new $.Zebra_Dialog('Input was cancelled', $.extend({}, notification_options, { type: 'error' })); | ||
| } | ||
@@ -103,4 +112,4 @@ }); | ||
| '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.', { | ||
| 'The input\'s value will be returned <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, | ||
@@ -110,3 +119,2 @@ title: 'Prompt', | ||
| buttons: [ | ||
| 'Cancel', | ||
| { | ||
@@ -126,5 +134,6 @@ caption: 'Ok', | ||
| callback: function($dialog, prompt) { | ||
| alert('Input value was: "' + prompt + '"'); | ||
| new $.Zebra_Dialog('Input value was:<br><br>"' + prompt + '"', $.extend({}, notification_options, { type: 'confirmation' })); | ||
| } | ||
| } | ||
| }, | ||
| 'Cancel' | ||
| ] | ||
@@ -135,3 +144,3 @@ }); | ||
| $('#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.', { | ||
| 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.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
@@ -142,3 +151,3 @@ title: 'Custom buttons', | ||
| onClose: function(caption) { | ||
| alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked'); | ||
| new $.Zebra_Dialog((caption != '' ? '"' + caption + '"' : 'no') + ' button was clicked', notification_options); | ||
| } | ||
@@ -149,3 +158,3 @@ }); | ||
| $('#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.', { | ||
| 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.<br><br>See the previous example on how to handle user\'s choice in a different way.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
@@ -155,5 +164,23 @@ title: 'Custom buttons', | ||
| buttons: [ | ||
| {caption: 'Yes', callback: function() { alert('"Yes" was clicked')}}, | ||
| {caption: 'No', callback: function() { alert('"No" was clicked')}}, | ||
| {caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}} | ||
| {caption: 'Yes', callback: function() { | ||
| new $.Zebra_Dialog('"Yes" button was clicked', { | ||
| auto_close: 2000, | ||
| modal: false, | ||
| buttons: false | ||
| }); | ||
| }}, | ||
| {caption: 'No', callback: function() { | ||
| new $.Zebra_Dialog('"No" button was clicked', { | ||
| auto_close: 2000, | ||
| modal: false, | ||
| buttons: false | ||
| }); | ||
| }}, | ||
| {caption: 'Cancel', callback: function() { | ||
| new $.Zebra_Dialog('"Cancel" button was clicked', { | ||
| auto_close: 2000, | ||
| modal: false, | ||
| buttons: false | ||
| }); | ||
| }}, | ||
| ] | ||
@@ -164,7 +191,7 @@ }); | ||
| $('#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>', { | ||
| 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><br><br><em><span class="label label-info">Tip:</span> You can click anywhere on the backdrop to quickly dismiss me</em>', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| position: ['left + 20', 'top + 20'], | ||
| title: 'Custom positioning', | ||
| width: 460, | ||
| position: ['left + 20', 'top + 20'] | ||
| width: 460 | ||
| }); | ||
@@ -174,7 +201,7 @@ }); | ||
| $('#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>', { | ||
| 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><br><br><em><span class="label label-info">Tip:</span> You can click anywhere on the backdrop to quickly dismiss me</em>', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| position: ['right - 20', 'top + 20'], | ||
| title: 'Custom positioning', | ||
| width: 460, | ||
| position: ['right - 20', 'top + 20'] | ||
| width: 460 | ||
| }); | ||
@@ -184,7 +211,7 @@ }); | ||
| $('#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>', { | ||
| 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><br><br><em><span class="label label-info">Tip:</span> You can click anywhere on the backdrop to quickly dismiss me</em>', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| position: ['right - 20', 'bottom - 20'], | ||
| title: 'Custom positioning', | ||
| width: 460, | ||
| position: ['right - 20', 'bottom - 20'] | ||
| width: 460 | ||
| }); | ||
@@ -194,7 +221,7 @@ }); | ||
| $('#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>', { | ||
| 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><br><br><em><span class="label label-info">Tip:</span> You can click anywhere on the backdrop to quickly dismiss me</em>', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| position: ['left + 20', 'bottom - 20'], | ||
| title: 'Custom positioning', | ||
| width: 460, | ||
| position: ['left + 20', 'bottom - 20'] | ||
| width: 460 | ||
| }); | ||
@@ -204,7 +231,6 @@ }); | ||
| $('#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>', { | ||
| new $.Zebra_Dialog('I am positioned in the <strong>center</strong> of the screen. Here\'s how it\'s done:<br><code>position: [\'center\', \'middle\']</code><br><br><em><span class="label label-info">Tip:</span> You can click anywhere on the backdrop to quickly dismiss me</em>', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| title: 'Custom positioning', | ||
| width: 460, | ||
| position: ['center', 'center'] | ||
| width: 460 | ||
| }); | ||
@@ -214,7 +240,7 @@ }); | ||
| $('#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>', { | ||
| 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><br><br><em><span class="label label-info">Tip:</span> You can click anywhere on the backdrop to quickly dismiss me</em>', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| position: ['center', 'top + 50'], | ||
| title: 'Custom positioning', | ||
| width: 460, | ||
| position: ['center', 'top + 50'] | ||
| width: 460 | ||
| }); | ||
@@ -230,8 +256,8 @@ }); | ||
| $('#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.', { | ||
| 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 8 seconds. You can dismiss me earlier than that by clicking on me.', { | ||
| auto_close: 8000, | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| buttons: false, | ||
| modal: false, | ||
| position: ['right - 20', 'top + 20'], | ||
| auto_close: 2000 | ||
| position: ['right - 20', 'top + 20'] | ||
| }); | ||
@@ -246,4 +272,4 @@ }); | ||
| }, | ||
| width: 600, | ||
| title: 'Content loaded from an element on the page' | ||
| title: 'Content loaded from an element on the page', | ||
| width: 600 | ||
| }); | ||
@@ -258,4 +284,4 @@ }); | ||
| }, | ||
| width: 600, | ||
| title: 'Content loaded via AJAX' | ||
| title: 'Content loaded via AJAX', | ||
| width: 600 | ||
| }); | ||
@@ -267,10 +293,12 @@ }); | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| custom_class: 'ZebraDialog_iFrame', | ||
| source: { | ||
| iframe: { | ||
| src: 'https://en.m.wikipedia.org/wiki/Dialog_box', | ||
| height: 500 | ||
| src: 'https://en.m.wikipedia.org/wiki/Dialog_box' | ||
| } | ||
| }, | ||
| title: 'External content loaded in an iFrame', | ||
| type: false, | ||
| width: 800, | ||
| title: 'External content loaded in an iFrame' | ||
| height: 800 | ||
| }); | ||
@@ -280,7 +308,56 @@ }); | ||
| $('#example11').on('click', function() { | ||
| new $.Zebra_Dialog('This is the first dialog box. Try opening another one.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| buttons: [ | ||
| 'Close', | ||
| { | ||
| caption: 'Open another dialog box', | ||
| callback: function() { | ||
| new $.Zebra_Dialog('This is the second dialog box. Notice that the backdrops are not overlapping. Pressing ESC or clicking on the backdrop will close this dialog box but not the first one.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| buttons: [ | ||
| 'Close', | ||
| { | ||
| caption: 'Open yet another dialog box', | ||
| callback: function() { | ||
| new $.Zebra_Dialog('This is the third dialog box. Notice that the backdrops are not overlapping. Pressing ESC or clicking on the backdrop will close this dialog box but not the other ones.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| buttons: [ | ||
| 'Close', | ||
| { | ||
| caption: 'Open the last dialog box', | ||
| callback: function() { | ||
| new $.Zebra_Dialog('This is the fourth dialog box. Notice that the backdrops are not overlapping. Pressing ESC or clicking on the backdrop will close this dialog box but not the other ones.', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| position: ['left + 20', 'top + 20'], | ||
| title: 'Fourth dialog box' | ||
| }); | ||
| return false; | ||
| } | ||
| } | ||
| ], | ||
| position: ['left + 20', 'bottom - 20'], | ||
| title: 'Third dialog box' | ||
| }); | ||
| return false; | ||
| } | ||
| } | ||
| ], | ||
| position: ['right - 20', 'top + 20'], | ||
| title: 'Second dialog box' | ||
| }); | ||
| return false; | ||
| } | ||
| } | ||
| ], | ||
| title: 'First dialog box' | ||
| }); | ||
| }); | ||
| $('#example12').on('click', function() { | ||
| new $.Zebra_Dialog('I love coffee!', { | ||
| auto_focus_button: $('body.materialize').length ? false : true, | ||
| custom_class: 'myclass', | ||
| title: 'Customizing the appearance', | ||
| width: 300 | ||
| title: 'Customizing the appearance' | ||
| }); | ||
@@ -287,0 +364,0 @@ }); |
@@ -15,3 +15,3 @@ { | ||
| "license": "LGPL-3.0", | ||
| "version": "2.1.1", | ||
| "version": "3.0.0", | ||
| "keywords": [ | ||
@@ -18,0 +18,0 @@ "jquery-plugin", |
129
README.md
@@ -5,3 +5,3 @@ <img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right"> | ||
| *A small, compact and highly configurable jQuery plugin for creating responsive modal dialog boxes* | ||
| *A small, compact, mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes* | ||
@@ -12,3 +12,3 @@ [](https://www.npmjs.com/package/zebra_dialog) [](https://www.npmjs.com/package/zebra_dialog) [](https://www.npmjs.com/package/zebra_dialog) [](https://www.jsdelivr.com/package/npm/zebra_dialog) [](https://github.com/stefangabos/Zebra_Dialog/blob/master/LICENSE.md) | ||
| **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. | ||
| **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. | ||
@@ -32,2 +32,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. | ||
| - use callback functions to handle users' choice | ||
| - works on mobile devices | ||
| - works in pretty much any browser (Chrome, Firefox, Safari, Edge, Opera, Internet Explorer 6+) | ||
@@ -146,3 +147,3 @@ | ||
| <td valign="top"> | ||
| The speed, in milliseconds, by which the overlay and the dialog box will be animated when closing. | ||
| The speed, in milliseconds, by which the backdrop and the dialog box will be animated when closing. | ||
| </td> | ||
@@ -155,3 +156,3 @@ </tr> | ||
| <td valign="top"> | ||
| The speed, in milliseconds, by which the overlay and the dialog box will be animated when appearing. | ||
| The speed, in milliseconds, by which the backdrop and the dialog box will be animated when appearing. | ||
| </td> | ||
@@ -180,2 +181,18 @@ </tr> | ||
| <tr> | ||
| <td valign="top"><code>backdrop_close</code></td> | ||
| <td valign="top"><em>boolean</em></td> | ||
| <td valign="top">true</td> | ||
| <td valign="top"> | ||
| Should the dialog box close when the backdrop is clicked? | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>backdrop_opacity</code></td> | ||
| <td valign="top"><em>double</em></td> | ||
| <td valign="top">.9</td> | ||
| <td valign="top"> | ||
| The opacity of the backdrop (between <code>0</code> and <code>1</code>) | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>buttons</code></td> | ||
@@ -219,3 +236,3 @@ <td valign="top"><em>mixed</em></td> | ||
| <td valign="top"> | ||
| Setting this property to <code>true</code> will instruct the plugin to center any available buttons instead of floating them to the right | ||
| Setting this property to <code>true</code> will instruct the plugin to center any available buttons instead of aligning them to the right | ||
| </td> | ||
@@ -228,3 +245,3 @@ </tr> | ||
| <td valign="top"> | ||
| An extra class to add to the dialog box's container, useful for further customizing dialog boxes<br><br> | ||
| An extra class to add to the dialog box's container and to the backdrop (when present).<br><br> | ||
| For example, setting this value to <code>mycustom</code> and in the CSS file having something like<br><br> | ||
@@ -237,8 +254,26 @@ <code>.mycustom .ZebraDialog_Title { background: red }</code><br><br> | ||
| <tr> | ||
| <td valign="top"><code>default_value</code></td> | ||
| <td valign="top"><em>string</em></td> | ||
| <td valign="top">""<br>(empty string)</td> | ||
| <td valign="top"> | ||
| Default value to show in the input box when the dialog box type is <code>prompt</code>. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>disable_page_scrolling</code></td> | ||
| <td valign="top"><em>boolean</em></td> | ||
| <td valign="top">true</td> | ||
| <td valign="top"> | ||
| Prevents scrolling of the page behind the dialog box, when the dialog box is open.<br><br> | ||
| <blockquote>This has effect only when the <code>modal</code> property is set to <code>true</code>.</blockquote> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>height</code></td> | ||
| <td valign="top"><em>integer</em></td> | ||
| <td valign="top">0</td> | ||
| <td valign="top"><em>mixed</em></td> | ||
| <td valign="top">0<br>(automatically set)</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> | ||
| By default, the height of the dialog box is automatically computed to fit the content (but not exceed viewport).<br><br> | ||
| Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).<br><br> | ||
| <blockquote>If <code>max_height</code> is set to valid value greater than <code>0</code>, then this property will be ignored!</blockquote> | ||
| </td> | ||
@@ -255,40 +290,46 @@ </tr> | ||
| <tr> | ||
| <td valign="top"><code>max_height</code></td> | ||
| <td valign="top"><em>integer</em></td> | ||
| <td valign="top"><code>margin</code></td> | ||
| <td valign="top"><em>mixed</em></td> | ||
| <td valign="top">0</td> | ||
| <td valign="top"> | ||
| The maximum height, in pixels, before the content in the dialog box is scrolled.<br><br> | ||
| If set to <code>0</code> the dialog box's height will automatically adjust to fit the entire content. | ||
| Margin of the dialog box relative to the viewport's limits (a single value, applied both horizontally and/or vertically)<br><br>This is used when the dialog box is stretched 100% horizontally and/or vertically and <code>width</code> and <code>max_width</code> are not set (when stretched horizontally) and <code>height</code> and <code>max_height</code> are not set (when stretched vertically).<br><br> | ||
| This propery is also taken into account when using the <code>position</code> property.<br><br> | ||
| Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport). | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>message</code></td> | ||
| <td valign="top"><em>string</em></td> | ||
| <td valign="top"></td> | ||
| <td valign="top"><code>max_height</code></td> | ||
| <td valign="top"><em>mixed</em></td> | ||
| <td valign="top">0</td> | ||
| <td valign="top"> | ||
| The message in the dialog box - this is passed as argument when the plugin is called. | ||
| The maximum height of the dialog box.<br><br> | ||
| Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).<br><br> | ||
| <blockquote>If this property is set to valid value greater than <code>0</code>, then the <code>height</code> property will be ignored.</blockquote> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>modal</code></td> | ||
| <td valign="top"><em>boolean</em></td> | ||
| <td valign="top">true</td> | ||
| <td valign="top"><code>max_width</code></td> | ||
| <td valign="top"><em>mixed</em></td> | ||
| <td valign="top">450</td> | ||
| <td valign="top"> | ||
| When set to <code>true</code> there will be a semitransparent overlay behind the dialog box, preventing users from clicking the page's content. | ||
| The maximum width of the dialog box.<br><br> | ||
| Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).<br><br> | ||
| <blockquote>If this property is set to valid value greater than <code>0</code>, then the <code>width</code> property will be ignored.</blockquote> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>overlay_close</code></td> | ||
| <td valign="top"><em>boolean</em></td> | ||
| <td valign="top">true</td> | ||
| <td valign="top"><code>message</code></td> | ||
| <td valign="top"><em>string</em></td> | ||
| <td valign="top"></td> | ||
| <td valign="top"> | ||
| Should the dialog box close when the overlay is clicked? | ||
| The text (or HTML) to be displayed in the dialog box.<br><br> | ||
| See the <code>source</code> property on how to add content via AJAX, iFrames or from inline elements. | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td valign="top"><code>overlay_opacity</code></td> | ||
| <td valign="top"><em>double</em></td> | ||
| <td valign="top">.9</td> | ||
| <td valign="top"><code>modal</code></td> | ||
| <td valign="top"><em>boolean</em></td> | ||
| <td valign="top">true</td> | ||
| <td valign="top"> | ||
| The opacity of the overlay (between <code>0</code> and <code>1</code>) | ||
| When set to <code>true</code> there will be a semitransparent backdrop behind the dialog box, preventing users from clicking the page's content. | ||
| </td> | ||
@@ -299,6 +340,6 @@ </tr> | ||
| <td valign="top"><em>mixed</em></td> | ||
| <td valign="top">['center', 'middle']</td> | ||
| <td valign="top">'center'</td> | ||
| <td valign="top"> | ||
| Position of the dialog box.<br><br> | ||
| Can be either <code>center</code> or an array with 2 elements, in the form of<br><br> | ||
| Can be either <code>center</code> (which would center the dialog box both horizontally and vertically), or an array with 2 elements, in the form of<br><br> | ||
| <code>// notice that everything is enclosed in quotes</code><br> | ||
@@ -313,3 +354,5 @@ <code>['horizontal_position +/- offset',</code><br> | ||
| </ul> | ||
| <blockquote>Positions are relative to the viewport</blockquote> | ||
| <blockquote>Positions are relative to the viewport (the area of the browser that is visible to the user) and | ||
| the value of the <code>margin</code> property is taken into account!</blockquote> | ||
| Examples:<br><br> | ||
| <code>// position the dialog box in the top-left corner</code><br> | ||
@@ -324,2 +367,3 @@ <code>// shifted 20 pixels inside</code><br> | ||
| <code>['center', 'top + 20']</code><br><br> | ||
| <blockquote>Note that when the width of the viewport is less than 768 pixels, any arithmetics will be ignored (so, things like <code>left + 20</code> will be interpreted as just <code>left</code>)</blockquote> | ||
| </td> | ||
@@ -330,3 +374,3 @@ </tr> | ||
| <td valign="top"><em>integer</em></td> | ||
| <td valign="top">100</td> | ||
| <td valign="top">500</td> | ||
| <td valign="top"> | ||
@@ -369,10 +413,8 @@ The duration (in milliseconds) of the animation used to reposition the dialog box when the browser window is resized. | ||
| <code>source: {</code><br> | ||
| <code> // iFrame's width and height are automatically set</code><br> | ||
| <code> // to fit the dialog box's width and height</code><br> | ||
| <code> iframe: {</code><br> | ||
| <code> src: 'http://myurl.com/',</code><br> | ||
| <code> width: 480,</code><br> | ||
| <code> height: 320,</code><br> | ||
| <code> scrolling: 'no'</code><br> | ||
| <code> src: 'http://myurl.com/'</code><br> | ||
| <code> }</code><br> | ||
| <code>}</code><br><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> | ||
@@ -405,2 +447,3 @@ <li> | ||
| <li>information</li> | ||
| <li>prompt</li> | ||
| <li>question</li> | ||
@@ -426,5 +469,5 @@ <li>warning</li> | ||
| <td valign="top"> | ||
| Width of the dialog box<br><br> | ||
| By default, the width of the dialog box is set in the theme file. Use this property to override the default width at run-time.<br><br> | ||
| Must be an integer, greater than <code>0</code>. Anything else will instruct the script to use the default value, as set in the theme file. Value should be no less than <code>200</code> for optimal output. | ||
| By default, the width of the dialog box is automatically computed in order to fit the content (but not exceed viewport.<br><br> | ||
| Can be specified as a numeric value (which will be interpreted as a value in pixels) or as a percentage (of the viewport).<br><br> | ||
| <blockquote>If <code>max_width</code> is set to valid value greater than <code>0</code>, then this property will be ignored.</blockquote> | ||
| </td> | ||
@@ -452,3 +495,3 @@ </tr> | ||
| 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 | ||
| 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> | ||
@@ -455,0 +498,0 @@ As second argument, the callback function receives the value entered in the input box - when the dialog box |
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
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by49.17%
461158
- Number of package files
- increased by9.09%
48
- Lines of code
- increased by30.65%
2255
- Number of lines in readme file
- increased by8.88%
527
No dependency changes