From a349280cde79ca6e07a1389815d90dd234139a8f Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 3 Mar 2021 12:29:32 +0100 Subject: [PATCH] wip #4322 @2.5 --- .../cart/fluidbook.cart.grandvision.js | 100 +- js/libs/jquery/jquery.confirm.min.js | 10 + style/fluidbook.less | 1 + style/lib/jquery.confirm.less | 866 ++++++++++++++++++ 4 files changed, 967 insertions(+), 10 deletions(-) create mode 100644 js/libs/jquery/jquery.confirm.min.js create mode 100644 style/lib/jquery.confirm.less diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js index d933c3f7..8c547cef 100644 --- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js +++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js @@ -64,9 +64,23 @@ FluidbookCartGrandVision.prototype = { }); $(document).on('click', '[data-action="delete"]', function () { - if (window.confirm('Are you sure you want to delete this box ?')) { - $this.removeCurrentBox(); - } + $.confirm({ + backgroundDismiss: true, + title: 'Remove box ?', + content: 'Are you sure you want to delete this box ?', + buttons: { + confirm: { + text: 'Confirm', + btnClass: 'btn-ok', + action: function () { + $this.removeCurrentBox(); + }, + }, + cancel: function () { + + }, + } + }); return false; }); @@ -77,9 +91,39 @@ FluidbookCartGrandVision.prototype = { $(document).on('click', '[data-action="rename"]', function () { var h3 = $('.box>h3:eq(0)'); - $(h3).text(window.prompt('Please enter the box name', $(h3).text())); - $this.save(); - $this.updateBoxesSelector(); + $.confirm({ + title: 'Rename the box', + content: '' + + '
' + + '
' + + '' + + '' + + '
' + + '
', + buttons: { + formSubmit: { + text: 'Submit', + btnClass: 'btn-ok', + action: function () { + $(h3).text(this.$content.find('.name').val()); + $this.save(); + $this.updateBoxesSelector(); + } + }, + cancel: function () { + //close + }, + }, + onContentReady: function () { + // bind to events + var jc = this; + this.$content.find('form').on('submit', function (e) { + // if the user submits the form by pressing enter in the field. + e.preventDefault(); + jc.$$formSubmit.trigger('click'); // reference the button and click it + }); + } + }); return false; }); @@ -185,6 +229,16 @@ FluidbookCartGrandVision.prototype = { } }, + isInBox: function (ean) { + var found = []; + $.each(this.boxes, function (k, box) { + if (box.refs.indexOf(ean) >= 0) { + found.push(box.name); + } + }); + return found; + }, + getTooltipStyle: function () { return 'invert'; }, @@ -264,7 +318,7 @@ FluidbookCartGrandVision.prototype = { }); }); - $("#grandvision-selection .items").perfectScrollbar(); + $("#grandvision-selection .items").perfectScrollbar(); this.setBox(); this.initSortable(); @@ -301,9 +355,29 @@ FluidbookCartGrandVision.prototype = { accept: '#grandvision-selection .item', "ui-droppable-hover": "ui-state-hover", drop: function (event, ui) { - $(event.target).replaceWith($(ui.draggable).clone()); - $this.save(); - $this.initRightSortable(); + var ean = $(ui.draggable).data('ref'); + var found = $this.isInBox(ean); + if (found.length > 0) { + $.confirm({ + backgroundDismiss: true, + title: 'Warning', + content: 'Product already used in another box:
'+found.join('
'), + buttons: { + confirm: { + text: 'Confirm', + btnClass: 'btn-ok', + action: function () { + $this.addToSlot(event.target, ui.draggable); + }, + }, + cancel: function () { + + }, + } + }); + } else { + $this.addToSlot(event.target, ui.draggable); + } } }); } @@ -320,6 +394,12 @@ FluidbookCartGrandVision.prototype = { $("#grandvision-boxes .slots").disableSelection(); }, + addToSlot: function (target, draggable) { + $(target).replaceWith($(draggable).clone()); + this.save(); + this.initRightSortable(); + }, + cartSelection: function () { var $this = this; diff --git a/js/libs/jquery/jquery.confirm.min.js b/js/libs/jquery/jquery.confirm.min.js new file mode 100644 index 00000000..2939dc60 --- /dev/null +++ b/js/libs/jquery/jquery.confirm.min.js @@ -0,0 +1,10 @@ +/*! + * jquery-confirm v3.3.4 (http://craftpip.github.io/jquery-confirm/) + * Author: Boniface Pereira + * Website: www.craftpip.com + * Contact: hey@craftpip.com + * + * Copyright 2013-2019 jquery-confirm + * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) + */ +(function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],factory);}else{if(typeof module==="object"&&module.exports){module.exports=function(root,jQuery){if(jQuery===undefined){if(typeof window!=="undefined"){jQuery=require("jquery");}else{jQuery=require("jquery")(root);}}factory(jQuery);return jQuery;};}else{factory(jQuery);}}}(function($){var w=window;$.fn.confirm=function(options,option2){if(typeof options==="undefined"){options={};}if(typeof options==="string"){options={content:options,title:(option2)?option2:false};}$(this).each(function(){var $this=$(this);if($this.attr("jc-attached")){console.warn("jConfirm has already been attached to this element ",$this[0]);return;}$this.on("click",function(e){e.preventDefault();var jcOption=$.extend({},options);if($this.attr("data-title")){jcOption.title=$this.attr("data-title");}if($this.attr("data-content")){jcOption.content=$this.attr("data-content");}if(typeof jcOption.buttons==="undefined"){jcOption.buttons={};}jcOption["$target"]=$this;if($this.attr("href")&&Object.keys(jcOption.buttons).length===0){var buttons=$.extend(true,{},w.jconfirm.pluginDefaults.defaultButtons,(w.jconfirm.defaults||{}).defaultButtons||{});var firstBtn=Object.keys(buttons)[0];jcOption.buttons=buttons;jcOption.buttons[firstBtn].action=function(){location.href=$this.attr("href");};}jcOption.closeIcon=false;var instance=$.confirm(jcOption);});$this.attr("jc-attached",true);});return $(this);};$.confirm=function(options,option2){if(typeof options==="undefined"){options={};}if(typeof options==="string"){options={content:options,title:(option2)?option2:false};}var putDefaultButtons=!(options.buttons===false);if(typeof options.buttons!=="object"){options.buttons={};}if(Object.keys(options.buttons).length===0&&putDefaultButtons){var buttons=$.extend(true,{},w.jconfirm.pluginDefaults.defaultButtons,(w.jconfirm.defaults||{}).defaultButtons||{});options.buttons=buttons;}return w.jconfirm(options);};$.alert=function(options,option2){if(typeof options==="undefined"){options={};}if(typeof options==="string"){options={content:options,title:(option2)?option2:false};}var putDefaultButtons=!(options.buttons===false);if(typeof options.buttons!=="object"){options.buttons={};}if(Object.keys(options.buttons).length===0&&putDefaultButtons){var buttons=$.extend(true,{},w.jconfirm.pluginDefaults.defaultButtons,(w.jconfirm.defaults||{}).defaultButtons||{});var firstBtn=Object.keys(buttons)[0];options.buttons[firstBtn]=buttons[firstBtn];}return w.jconfirm(options);};$.dialog=function(options,option2){if(typeof options==="undefined"){options={};}if(typeof options==="string"){options={content:options,title:(option2)?option2:false,closeIcon:function(){}};}options.buttons={};if(typeof options.closeIcon==="undefined"){options.closeIcon=function(){};}options.confirmKeys=[13];return w.jconfirm(options);};w.jconfirm=function(options){if(typeof options==="undefined"){options={};}var pluginOptions=$.extend(true,{},w.jconfirm.pluginDefaults);if(w.jconfirm.defaults){pluginOptions=$.extend(true,pluginOptions,w.jconfirm.defaults);}pluginOptions=$.extend(true,{},pluginOptions,options);var instance=new w.Jconfirm(pluginOptions);w.jconfirm.instances.push(instance);return instance;};w.Jconfirm=function(options){$.extend(this,options);this._init();};w.Jconfirm.prototype={_init:function(){var that=this;if(!w.jconfirm.instances.length){w.jconfirm.lastFocused=$("body").find(":focus");}this._id=Math.round(Math.random()*99999);this.contentParsed=$(document.createElement("div"));if(!this.lazyOpen){setTimeout(function(){that.open();},0);}},_buildHTML:function(){var that=this;this._parseAnimation(this.animation,"o");this._parseAnimation(this.closeAnimation,"c");this._parseBgDismissAnimation(this.backgroundDismissAnimation);this._parseColumnClass(this.columnClass);this._parseTheme(this.theme);this._parseType(this.type);var template=$(this.template);template.find(".jconfirm-box").addClass(this.animationParsed).addClass(this.backgroundDismissAnimationParsed).addClass(this.typeParsed);if(this.typeAnimated){template.find(".jconfirm-box").addClass("jconfirm-type-animated");}if(this.useBootstrap){template.find(".jc-bs3-row").addClass(this.bootstrapClasses.row);template.find(".jc-bs3-row").addClass("justify-content-md-center justify-content-sm-center justify-content-xs-center justify-content-lg-center");template.find(".jconfirm-box-container").addClass(this.columnClassParsed);if(this.containerFluid){template.find(".jc-bs3-container").addClass(this.bootstrapClasses.containerFluid);}else{template.find(".jc-bs3-container").addClass(this.bootstrapClasses.container);}}else{template.find(".jconfirm-box").css("width",this.boxWidth);}if(this.titleClass){template.find(".jconfirm-title-c").addClass(this.titleClass);}template.addClass(this.themeParsed);var ariaLabel="jconfirm-box"+this._id;template.find(".jconfirm-box").attr("aria-labelledby",ariaLabel).attr("tabindex",-1);template.find(".jconfirm-content").attr("id",ariaLabel);if(this.bgOpacity!==null){template.find(".jconfirm-bg").css("opacity",this.bgOpacity);}if(this.rtl){template.addClass("jconfirm-rtl");}this.$el=template.appendTo(this.container);this.$jconfirmBoxContainer=this.$el.find(".jconfirm-box-container");this.$jconfirmBox=this.$body=this.$el.find(".jconfirm-box");this.$jconfirmBg=this.$el.find(".jconfirm-bg");this.$title=this.$el.find(".jconfirm-title");this.$titleContainer=this.$el.find(".jconfirm-title-c");this.$content=this.$el.find("div.jconfirm-content");this.$contentPane=this.$el.find(".jconfirm-content-pane");this.$icon=this.$el.find(".jconfirm-icon-c");this.$closeIcon=this.$el.find(".jconfirm-closeIcon");this.$holder=this.$el.find(".jconfirm-holder");this.$btnc=this.$el.find(".jconfirm-buttons");this.$scrollPane=this.$el.find(".jconfirm-scrollpane");that.setStartingPoint();this._contentReady=$.Deferred();this._modalReady=$.Deferred();this.$holder.css({"padding-top":this.offsetTop,"padding-bottom":this.offsetBottom,});this.setTitle();this.setIcon();this._setButtons();this._parseContent();this.initDraggable();if(this.isAjax){this.showLoading(false);}$.when(this._contentReady,this._modalReady).then(function(){if(that.isAjaxLoading){setTimeout(function(){that.isAjaxLoading=false;that.setContent();that.setTitle();that.setIcon();setTimeout(function(){that.hideLoading(false);that._updateContentMaxHeight();},100);if(typeof that.onContentReady==="function"){that.onContentReady();}},50);}else{that._updateContentMaxHeight();that.setTitle();that.setIcon();if(typeof that.onContentReady==="function"){that.onContentReady();}}if(that.autoClose){that._startCountDown();}}).then(function(){that._watchContent();});if(this.animation==="none"){this.animationSpeed=1;this.animationBounce=1;}this.$body.css(this._getCSS(this.animationSpeed,this.animationBounce));this.$contentPane.css(this._getCSS(this.animationSpeed,1));this.$jconfirmBg.css(this._getCSS(this.animationSpeed,1));this.$jconfirmBoxContainer.css(this._getCSS(this.animationSpeed,1));},_typePrefix:"jconfirm-type-",typeParsed:"",_parseType:function(type){this.typeParsed=this._typePrefix+type;},setType:function(type){var oldClass=this.typeParsed;this._parseType(type);this.$jconfirmBox.removeClass(oldClass).addClass(this.typeParsed);},themeParsed:"",_themePrefix:"jconfirm-",setTheme:function(theme){var previous=this.theme;this.theme=theme||this.theme;this._parseTheme(this.theme);if(previous){this.$el.removeClass(previous);}this.$el.addClass(this.themeParsed);this.theme=theme;},_parseTheme:function(theme){var that=this;theme=theme.split(",");$.each(theme,function(k,a){if(a.indexOf(that._themePrefix)===-1){theme[k]=that._themePrefix+$.trim(a);}});this.themeParsed=theme.join(" ").toLowerCase();},backgroundDismissAnimationParsed:"",_bgDismissPrefix:"jconfirm-hilight-",_parseBgDismissAnimation:function(bgDismissAnimation){var animation=bgDismissAnimation.split(",");var that=this;$.each(animation,function(k,a){if(a.indexOf(that._bgDismissPrefix)===-1){animation[k]=that._bgDismissPrefix+$.trim(a);}});this.backgroundDismissAnimationParsed=animation.join(" ").toLowerCase();},animationParsed:"",closeAnimationParsed:"",_animationPrefix:"jconfirm-animation-",setAnimation:function(animation){this.animation=animation||this.animation;this._parseAnimation(this.animation,"o");},_parseAnimation:function(animation,which){which=which||"o";var animations=animation.split(",");var that=this;$.each(animations,function(k,a){if(a.indexOf(that._animationPrefix)===-1){animations[k]=that._animationPrefix+$.trim(a);}});var a_string=animations.join(" ").toLowerCase();if(which==="o"){this.animationParsed=a_string;}else{this.closeAnimationParsed=a_string;}return a_string;},setCloseAnimation:function(closeAnimation){this.closeAnimation=closeAnimation||this.closeAnimation;this._parseAnimation(this.closeAnimation,"c");},setAnimationSpeed:function(speed){this.animationSpeed=speed||this.animationSpeed;},columnClassParsed:"",setColumnClass:function(colClass){if(!this.useBootstrap){console.warn("cannot set columnClass, useBootstrap is set to false");return;}this.columnClass=colClass||this.columnClass;this._parseColumnClass(this.columnClass);this.$jconfirmBoxContainer.addClass(this.columnClassParsed);},_updateContentMaxHeight:function(){var height=$(window).height()-(this.$jconfirmBox.outerHeight()-this.$contentPane.outerHeight())-(this.offsetTop+this.offsetBottom);this.$contentPane.css({"max-height":height+"px"});},setBoxWidth:function(width){if(this.useBootstrap){console.warn("cannot set boxWidth, useBootstrap is set to true");return;}this.boxWidth=width;this.$jconfirmBox.css("width",width);},_parseColumnClass:function(colClass){colClass=colClass.toLowerCase();var p;switch(colClass){case"xl":case"xlarge":p="col-md-12";break;case"l":case"large":p="col-md-8 col-md-offset-2";break;case"m":case"medium":p="col-md-6 col-md-offset-3";break;case"s":case"small":p="col-md-4 col-md-offset-4";break;case"xs":case"xsmall":p="col-md-2 col-md-offset-5";break;default:p=colClass;}this.columnClassParsed=p;},initDraggable:function(){var that=this;var $t=this.$titleContainer;this.resetDrag();if(this.draggable){$t.on("mousedown",function(e){$t.addClass("jconfirm-hand");that.mouseX=e.clientX;that.mouseY=e.clientY;that.isDrag=true;});$(window).on("mousemove."+this._id,function(e){if(that.isDrag){that.movingX=e.clientX-that.mouseX+that.initialX;that.movingY=e.clientY-that.mouseY+that.initialY;that.setDrag();}});$(window).on("mouseup."+this._id,function(){$t.removeClass("jconfirm-hand");if(that.isDrag){that.isDrag=false;that.initialX=that.movingX;that.initialY=that.movingY;}});}},resetDrag:function(){this.isDrag=false;this.initialX=0;this.initialY=0;this.movingX=0;this.movingY=0;this.mouseX=0;this.mouseY=0;this.$jconfirmBoxContainer.css("transform","translate("+0+"px, "+0+"px)");},setDrag:function(){if(!this.draggable){return;}this.alignMiddle=false;var boxWidth=this.$jconfirmBox.outerWidth();var boxHeight=this.$jconfirmBox.outerHeight();var windowWidth=$(window).width();var windowHeight=$(window).height();var that=this;var dragUpdate=1;if(that.movingX%dragUpdate===0||that.movingY%dragUpdate===0){if(that.dragWindowBorder){var leftDistance=(windowWidth/2)-boxWidth/2;var topDistance=(windowHeight/2)-boxHeight/2;topDistance-=that.dragWindowGap;leftDistance-=that.dragWindowGap;if(leftDistance+that.movingX<0){that.movingX=-leftDistance;}else{if(leftDistance-that.movingX<0){that.movingX=leftDistance;}}if(topDistance+that.movingY<0){that.movingY=-topDistance;}else{if(topDistance-that.movingY<0){that.movingY=topDistance;}}}that.$jconfirmBoxContainer.css("transform","translate("+that.movingX+"px, "+that.movingY+"px)");}},_scrollTop:function(){if(typeof pageYOffset!=="undefined"){return pageYOffset;}else{var B=document.body;var D=document.documentElement;D=(D.clientHeight)?D:B;return D.scrollTop;}},_watchContent:function(){var that=this;if(this._timer){clearInterval(this._timer);}var prevContentHeight=0;this._timer=setInterval(function(){if(that.smoothContent){var contentHeight=that.$content.outerHeight()||0;if(contentHeight!==prevContentHeight){prevContentHeight=contentHeight;}var wh=$(window).height();var total=that.offsetTop+that.offsetBottom+that.$jconfirmBox.height()-that.$contentPane.height()+that.$content.height();if(total').html(that.buttons[key].text).addClass(that.buttons[key].btnClass).prop("disabled",that.buttons[key].isDisabled).css("display",that.buttons[key].isHidden?"none":"").click(function(e){e.preventDefault();var res=that.buttons[key].action.apply(that,[that.buttons[key]]);that.onAction.apply(that,[key,that.buttons[key]]);that._stopCountDown();if(typeof res==="undefined"||res){that.close();}});that.buttons[key].el=button_element;that.buttons[key].setText=function(text){button_element.html(text);};that.buttons[key].addClass=function(className){button_element.addClass(className);};that.buttons[key].removeClass=function(className){button_element.removeClass(className);};that.buttons[key].disable=function(){that.buttons[key].isDisabled=true;button_element.prop("disabled",true);};that.buttons[key].enable=function(){that.buttons[key].isDisabled=false;button_element.prop("disabled",false);};that.buttons[key].show=function(){that.buttons[key].isHidden=false;button_element.css("display","");};that.buttons[key].hide=function(){that.buttons[key].isHidden=true;button_element.css("display","none");};that["$_"+key]=that["$$"+key]=button_element;that.$btnc.append(button_element);});if(total_buttons===0){this.$btnc.hide();}if(this.closeIcon===null&&total_buttons===0){this.closeIcon=true;}if(this.closeIcon){if(this.closeIconClass){var closeHtml='';this.$closeIcon.html(closeHtml);}this.$closeIcon.click(function(e){e.preventDefault();var buttonName=false;var shouldClose=false;var str;if(typeof that.closeIcon==="function"){str=that.closeIcon();}else{str=that.closeIcon;}if(typeof str==="string"&&typeof that.buttons[str]!=="undefined"){buttonName=str;shouldClose=false;}else{if(typeof str==="undefined"||!!(str)===true){shouldClose=true;}else{shouldClose=false;}}if(buttonName){var btnResponse=that.buttons[buttonName].action.apply(that);shouldClose=(typeof btnResponse==="undefined")||!!(btnResponse);}if(shouldClose){that.close();}});this.$closeIcon.show();}else{this.$closeIcon.hide();}},setTitle:function(string,force){force=force||false;if(typeof string!=="undefined"){if(typeof string==="string"){this.title=string;}else{if(typeof string==="function"){if(typeof string.promise==="function"){console.error("Promise was returned from title function, this is not supported.");}var response=string();if(typeof response==="string"){this.title=response;}else{this.title=false;}}else{this.title=false;}}}if(this.isAjaxLoading&&!force){return;}this.$title.html(this.title||"");this.updateTitleContainer();},setIcon:function(iconClass,force){force=force||false;if(typeof iconClass!=="undefined"){if(typeof iconClass==="string"){this.icon=iconClass;}else{if(typeof iconClass==="function"){var response=iconClass();if(typeof response==="string"){this.icon=response;}else{this.icon=false;}}else{this.icon=false;}}}if(this.isAjaxLoading&&!force){return;}this.$icon.html(this.icon?'':"");this.updateTitleContainer();},updateTitleContainer:function(){if(!this.title&&!this.icon){this.$titleContainer.hide();}else{this.$titleContainer.show();}},setContentPrepend:function(content,force){if(!content){return;}this.contentParsed.prepend(content);},setContentAppend:function(content){if(!content){return;}this.contentParsed.append(content);},setContent:function(content,force){force=!!force;var that=this;if(content){this.contentParsed.html("").append(content);}if(this.isAjaxLoading&&!force){return;}this.$content.html("");this.$content.append(this.contentParsed);setTimeout(function(){that.$body.find("input[autofocus]:visible:first").focus();},100);},loadingSpinner:false,showLoading:function(disableButtons){this.loadingSpinner=true;this.$jconfirmBox.addClass("loading");if(disableButtons){this.$btnc.find("button").prop("disabled",true);}},hideLoading:function(enableButtons){this.loadingSpinner=false;this.$jconfirmBox.removeClass("loading");if(enableButtons){this.$btnc.find("button").prop("disabled",false);}},ajaxResponse:false,contentParsed:"",isAjax:false,isAjaxLoading:false,_parseContent:function(){var that=this;var e=" ";if(typeof this.content==="function"){var res=this.content.apply(this);if(typeof res==="string"){this.content=res;}else{if(typeof res==="object"&&typeof res.always==="function"){this.isAjax=true;this.isAjaxLoading=true;res.always(function(data,status,xhr){that.ajaxResponse={data:data,status:status,xhr:xhr};that._contentReady.resolve(data,status,xhr);if(typeof that.contentLoaded==="function"){that.contentLoaded(data,status,xhr);}});this.content=e;}else{this.content=e;}}}if(typeof this.content==="string"&&this.content.substr(0,4).toLowerCase()==="url:"){this.isAjax=true;this.isAjaxLoading=true;var u=this.content.substring(4,this.content.length);$.get(u).done(function(html){that.contentParsed.html(html);}).always(function(data,status,xhr){that.ajaxResponse={data:data,status:status,xhr:xhr};that._contentReady.resolve(data,status,xhr);if(typeof that.contentLoaded==="function"){that.contentLoaded(data,status,xhr);}});}if(!this.content){this.content=e;}if(!this.isAjax){this.contentParsed.html(this.content);this.setContent();that._contentReady.resolve();}},_stopCountDown:function(){clearInterval(this.autoCloseInterval);if(this.$cd){this.$cd.remove();}},_startCountDown:function(){var that=this;var opt=this.autoClose.split("|");if(opt.length!==2){console.error("Invalid option for autoClose. example 'close|10000'");return false;}var button_key=opt[0];var time=parseInt(opt[1]);if(typeof this.buttons[button_key]==="undefined"){console.error("Invalid button key '"+button_key+"' for autoClose");return false;}var seconds=Math.ceil(time/1000);this.$cd=$(' ('+seconds+")").appendTo(this["$_"+button_key]);this.autoCloseInterval=setInterval(function(){that.$cd.html(" ("+(seconds-=1)+") ");if(seconds<=0){that["$$"+button_key].trigger("click");that._stopCountDown();}},1000);},_getKey:function(key){switch(key){case 192:return"tilde";case 13:return"enter";case 16:return"shift";case 9:return"tab";case 20:return"capslock";case 17:return"ctrl";case 91:return"win";case 18:return"alt";case 27:return"esc";case 32:return"space";}var initial=String.fromCharCode(key);if(/^[A-z0-9]+$/.test(initial)){return initial.toLowerCase();}else{return false;}},reactOnKey:function(e){var that=this;var a=$(".jconfirm");if(a.eq(a.length-1)[0]!==this.$el[0]){return false;}var key=e.which;if(this.$content.find(":input").is(":focus")&&/13|32/.test(key)){return false;}var keyChar=this._getKey(key);if(keyChar==="esc"&&this.escapeKey){if(this.escapeKey===true){this.$scrollPane.trigger("click");}else{if(typeof this.escapeKey==="string"||typeof this.escapeKey==="function"){var buttonKey;if(typeof this.escapeKey==="function"){buttonKey=this.escapeKey();}else{buttonKey=this.escapeKey;}if(buttonKey){if(typeof this.buttons[buttonKey]==="undefined"){console.warn("Invalid escapeKey, no buttons found with key "+buttonKey);}else{this["$_"+buttonKey].trigger("click");}}}}}$.each(this.buttons,function(key,button){if(button.keys.indexOf(keyChar)!==-1){that["$_"+key].trigger("click");}});},setDialogCenter:function(){console.info("setDialogCenter is deprecated, dialogs are centered with CSS3 tables");},_unwatchContent:function(){clearInterval(this._timer);},close:function(onClosePayload){var that=this;if(typeof this.onClose==="function"){this.onClose(onClosePayload);}this._unwatchContent();$(window).unbind("resize."+this._id);$(window).unbind("keyup."+this._id);$(window).unbind("jcKeyDown."+this._id);if(this.draggable){$(window).unbind("mousemove."+this._id);$(window).unbind("mouseup."+this._id);this.$titleContainer.unbind("mousedown");}that.$el.removeClass(that.loadedClass);$("body").removeClass("jconfirm-no-scroll-"+that._id);that.$jconfirmBoxContainer.removeClass("jconfirm-no-transition");setTimeout(function(){that.$body.addClass(that.closeAnimationParsed);that.$jconfirmBg.addClass("jconfirm-bg-h");var closeTimer=(that.closeAnimation==="none")?1:that.animationSpeed;setTimeout(function(){that.$el.remove();var l=w.jconfirm.instances;var i=w.jconfirm.instances.length-1;for(i;i>=0;i--){if(w.jconfirm.instances[i]._id===that._id){w.jconfirm.instances.splice(i,1);}}if(!w.jconfirm.instances.length){if(that.scrollToPreviousElement&&w.jconfirm.lastFocused&&w.jconfirm.lastFocused.length&&$.contains(document,w.jconfirm.lastFocused[0])){var $lf=w.jconfirm.lastFocused;if(that.scrollToPreviousElementAnimate){var st=$(window).scrollTop();var ot=w.jconfirm.lastFocused.offset().top;var wh=$(window).height();if(!(ot>st&&ot<(st+wh))){var scrollTo=(ot-Math.round((wh/3)));$("html, body").animate({scrollTop:scrollTo},that.animationSpeed,"swing",function(){$lf.focus();});}else{$lf.focus();}}else{$lf.focus();}w.jconfirm.lastFocused=false;}}if(typeof that.onDestroy==="function"){that.onDestroy();}},closeTimer*0.4);},50);return true;},open:function(){if(this.isOpen()){return false;}this._buildHTML();this._bindEvents();this._open();return true;},setStartingPoint:function(){var el=false;if(this.animateFromElement!==true&&this.animateFromElement){el=this.animateFromElement;w.jconfirm.lastClicked=false;}else{if(w.jconfirm.lastClicked&&this.animateFromElement===true){el=w.jconfirm.lastClicked;w.jconfirm.lastClicked=false;}else{return false;}}if(!el){return false;}var offset=el.offset();var iTop=el.outerHeight()/2;var iLeft=el.outerWidth()/2;iTop-=this.$jconfirmBox.outerHeight()/2;iLeft-=this.$jconfirmBox.outerWidth()/2;var sourceTop=offset.top+iTop;sourceTop=sourceTop-this._scrollTop();var sourceLeft=offset.left+iLeft;var wh=$(window).height()/2;var ww=$(window).width()/2;var targetH=wh-this.$jconfirmBox.outerHeight()/2;var targetW=ww-this.$jconfirmBox.outerWidth()/2;sourceTop-=targetH;sourceLeft-=targetW;if(Math.abs(sourceTop)>wh||Math.abs(sourceLeft)>ww){return false;}this.$jconfirmBoxContainer.css("transform","translate("+sourceLeft+"px, "+sourceTop+"px)");},_open:function(){var that=this;if(typeof that.onOpenBefore==="function"){that.onOpenBefore();}this.$body.removeClass(this.animationParsed);this.$jconfirmBg.removeClass("jconfirm-bg-h");this.$body.focus();that.$jconfirmBoxContainer.css("transform","translate("+0+"px, "+0+"px)");setTimeout(function(){that.$body.css(that._getCSS(that.animationSpeed,1));that.$body.css({"transition-property":that.$body.css("transition-property")+", margin"});that.$jconfirmBoxContainer.addClass("jconfirm-no-transition");that._modalReady.resolve();if(typeof that.onOpen==="function"){that.onOpen();}that.$el.addClass(that.loadedClass);},this.animationSpeed);},loadedClass:"jconfirm-open",isClosed:function(){return !this.$el||this.$el.parent().length===0;},isOpen:function(){return !this.isClosed();},toggle:function(){if(!this.isOpen()){this.open();}else{this.close();}}};w.jconfirm.instances=[];w.jconfirm.lastFocused=false;w.jconfirm.pluginDefaults={template:'
',title:"Hello",titleClass:"",type:"default",typeAnimated:true,draggable:true,dragWindowGap:15,dragWindowBorder:true,animateFromElement:true,alignMiddle:true,smoothContent:true,content:"Are you sure to continue?",buttons:{},defaultButtons:{ok:{action:function(){}},close:{action:function(){}}},contentLoaded:function(){},icon:"",lazyOpen:false,bgOpacity:null,theme:"light",animation:"scale",closeAnimation:"scale",animationSpeed:400,animationBounce:1,escapeKey:true,rtl:false,container:"body",containerFluid:false,backgroundDismiss:false,backgroundDismissAnimation:"shake",autoClose:false,closeIcon:null,closeIconClass:false,watchInterval:100,columnClass:"col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1",boxWidth:"50%",scrollToPreviousElement:true,scrollToPreviousElementAnimate:true,useBootstrap:true,offsetTop:40,offsetBottom:40,bootstrapClasses:{container:"container",containerFluid:"container-fluid",row:"row"},onContentReady:function(){},onOpenBefore:function(){},onOpen:function(){},onClose:function(){},onDestroy:function(){},onAction:function(){}};var keyDown=false;$(window).on("keydown",function(e){if(!keyDown){var $target=$(e.target);var pass=false;if($target.closest(".jconfirm-box").length){pass=true;}if(pass){$(window).trigger("jcKeyDown");}keyDown=true;}});$(window).on("keyup",function(){keyDown=false;});w.jconfirm.lastClicked=false;$(document).on("mousedown","button, a, [jc-source]",function(){w.jconfirm.lastClicked=$(this);});})); \ No newline at end of file diff --git a/style/fluidbook.less b/style/fluidbook.less index b2381e4b..18cbf284 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2870,6 +2870,7 @@ ul.chapters.shareList a.level0 .svg-icon { } @import "lib/perfect-scrollbar.less"; +@import "lib/jquery.confirm.less"; @media handled and (orientation: portrait) { #ol { diff --git a/style/lib/jquery.confirm.less b/style/lib/jquery.confirm.less new file mode 100644 index 00000000..6f8a0594 --- /dev/null +++ b/style/lib/jquery.confirm.less @@ -0,0 +1,866 @@ +/*! + * jquery-confirm v3.3.4 (http://craftpip.github.io/jquery-confirm/) + * Author: boniface pereira + * Website: www.craftpip.com + * Contact: hey@craftpip.com + * + * Copyright 2013-2019 jquery-confirm + * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE) + */ +@blue: #3498db; +@blueHover: #2980b9; +@green: #2ecc71; +@greenHover: #27ae60; +@red: #e74c3c; +@redHover: #c0392b; +@orange: #f1c40f; +@orangeHover: #f39c12; +@purple: #9b59b6; +@purpleHover: #8e44ad; +@default: #ecf0f1; +@defaultHover: #bdc3c7; +@dark: #34495e; +@darkHover: #2c3e50; + +@keyframes jconfirm-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +body[class*=jconfirm-no-scroll-] { + overflow: hidden !important; +} + +.jconfirm { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99999999; + font-family: inherit; + overflow: hidden; + + .jconfirm-bg { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + transition: opacity .4s; + + &.jconfirm-bg-h { + opacity: 0 !important; + } + } + + .jconfirm-scrollpane { + //overflow-y: auto; + perspective: 500px; + perspective-origin: center; + + display: table; + width: 100%; + height: 100%; + } + + .jconfirm-row { + display: table-row; + width: 100%; + } + + .jconfirm-cell { + //height: 100%; + display: table-cell; + vertical-align: middle; + } + + .jconfirm-holder { + max-height: 100%; + padding: 50px 0; + } + + .jconfirm-box-container { + transition: transform; + + &.jconfirm-no-transition { + transition: none !important; + } + } + + .jconfirm-box { + max-width: 500px; + background: white; + border-radius: 0; + position: relative; + outline: none; + padding: 15px 15px 0; + overflow: hidden; + margin-left: auto; + margin-right: auto; + + &.jconfirm-type-animated { + animation-duration: 2s; + animation-iteration-count: infinite; + } + + .form-group{ + input{ + display: block; + border: 1px solid; + border-radius: 2px; + padding: 5px; + width: 100%; + font-size: 20px; + margin-top: 5px; + } + } + + &.loading { + height: 120px; + + &:before { + content: ''; + position: absolute; + left: 0; + background: white; + right: 0; + top: 0; + bottom: 0; + border-radius: 10px; + z-index: 1; + } + + &:after { + opacity: 0.6; + content: ''; + height: 30px; + width: 30px; + border: solid 3px transparent; + position: absolute; + left: 50%; + margin-left: -15px; + border-radius: 50%; + animation: jconfirm-spin 1s infinite linear; + border-bottom-color: dodgerblue; + top: 50%; + margin-top: -15px; + z-index: 2; + } + } + + div.jconfirm-closeIcon { + height: 20px; + width: 20px; + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + opacity: .6; + text-align: center; + font-size: 27px !important; + line-height: 14px !important; + display: none; + z-index: 1; + + &:empty { + display: none; + } + + .fa { + font-size: 16px; + } + + .glyphicon { + font-size: 16px; + } + + .zmdi { + font-size: 16px; + } + + &:hover { + opacity: 1; + } + } + + div.jconfirm-title-c { + display: block; + font-size: 22px; + line-height: 20px; + user-select: none; + cursor: default; + padding-bottom: 15px; + + &.jconfirm-hand { + cursor: move; + } + + .jconfirm-icon-c { + font-size: inherit; + //padding-bottom: 15px; + display: inline-block; + vertical-align: middle; + + i { + vertical-align: middle; + } + + &:empty { + display: none; + } + } + + .jconfirm-title { + user-select: none; + font-size: inherit; + font-family: inherit; + display: inline-block; + vertical-align: middle; + //padding-bottom: 15px; + &:empty { + display: none; + } + } + } + + div.jconfirm-content-pane { + margin-bottom: 15px; + height: auto; + transition: height .4s ease-in; + display: inline-block; + width: 100%; + position: relative; + overflow-x: hidden; + overflow-y: auto; + + &.no-scroll { + overflow-y: hidden; + } + + &::-webkit-scrollbar { + width: 3px; + } + + &::-webkit-scrollbar-track { + background: rgba(0, 0, 0, .1); + } + + &::-webkit-scrollbar-thumb { + background: #666; + border-radius: 2px; + } + + .jconfirm-content { + overflow: auto; + + img { + max-width: 100%; + height: auto; + } + + &:empty { + display: none; + } + } + } + + .jconfirm-buttons { + padding-bottom: 11px; + + > button { + margin-bottom: 4px; + margin-left: 2px; + margin-right: 2px; + } + + button { + display: inline-block; + padding: 6px 12px; + font-size: 14px; + font-weight: 400; + line-height: 1.42857143; + text-align: center; + white-space: nowrap; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-radius: 2px; + min-height: 1em; + //outline: blue; + //user-select: none; + transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; + -webkit-tap-highlight-color: transparent; + border: none; + background-image: none; + + &.btn-ok { + .button-hover(); + color:@menu-text; + text-shadow: none; + } + + } + } + + + } + + .jconfirm-clear { + clear: both; + } + + &.jconfirm-rtl { + direction: rtl; + + div.jconfirm-closeIcon { + left: 5px; + right: auto; + } + } + + &.jconfirm-white, &.jconfirm-light { + .jconfirm-bg { + background-color: #444; + opacity: .2; + } + + .jconfirm-box { + box-shadow: 0 2px 6px rgba(0, 0, 0, .2); + border-radius: 0px; + + .jconfirm-title-c .jconfirm-icon-c { + margin-right: 8px; + margin-left: 0px; + } + + .jconfirm-buttons { + float: right; + + button { + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + text-shadow: none; + } + + button.btn-default { + box-shadow: none; + color: #333; + + &:hover { + background: #ddd; + } + } + } + } + + &.jconfirm-rtl { + .jconfirm-title-c .jconfirm-icon-c { + margin-left: 8px; + margin-right: 0px; + } + } + } + + &.jconfirm-black, &.jconfirm-dark { + .jconfirm-bg { + background-color: darkslategray; + opacity: .4; + } + + .jconfirm-box { + box-shadow: 0 2px 6px rgba(0, 0, 0, .2); + background: #444; + border-radius: 0px; + color: white; + + .jconfirm-title-c .jconfirm-icon-c { + margin-right: 8px; + margin-left: 0px; + } + + .jconfirm-buttons { + float: right; + + button { + border: none; + background-image: none; + text-transform: uppercase; + font-size: 14px; + font-weight: bold; + text-shadow: none; + transition: background .1s; + color: white; + } + + button.btn-default { + box-shadow: none; + color: #fff; + background: none; + + &:hover { + background: #666; + } + } + } + } + + &.jconfirm-rtl { + .jconfirm-title-c .jconfirm-icon-c { + margin-left: 8px; + margin-right: 0px; + } + } + } + + .jconfirm-box.hilight { + &.jconfirm-hilight-shake { + animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; + transform: translate3d(0, 0, 0); + } + + &.jconfirm-hilight-glow { + animation: glow 0.82s cubic-bezier(.36, .07, .19, .97) both; + transform: translate3d(0, 0, 0); + } + } +} + +@keyframes shake { + 10%, 90% { + transform: translate3d(-2px, 0, 0); + } + 20%, 80% { + transform: translate3d(4px, 0, 0); + } + 30%, 50%, 70% { + transform: translate3d(-8px, 0, 0); + } + 40%, 60% { + transform: translate3d(8px, 0, 0); + } +} + +@keyframes glow { + 0%, 100% { + box-shadow: 0 0 0px red; + } + 50% { + box-shadow: 0 0 30px red; + } +} + +/*Transition rules*/ +.jconfirm { + perspective: 400px; + + .jconfirm-box { + opacity: 1; + transition-property: all; + + &.jconfirm-animation-top, &.jconfirm-animation-left, &.jconfirm-animation-right, &.jconfirm-animation-bottom, &.jconfirm-animation-opacity, &.jconfirm-animation-zoom, &.jconfirm-animation-scale, &.jconfirm-animation-none, &.jconfirm-animation-rotate, &.jconfirm-animation-rotatex, &.jconfirm-animation-rotatey, &.jconfirm-animation-scaley, &.jconfirm-animation-scalex { + opacity: 0; + } + + &.jconfirm-animation-rotate { + transform: rotate(90deg); + } + + &.jconfirm-animation-rotatex { + transform: rotateX(90deg); + transform-origin: center; + } + + &.jconfirm-animation-rotatexr { + transform: rotateX(-90deg); + transform-origin: center; + } + + &.jconfirm-animation-rotatey { + transform: rotatey(90deg); + transform-origin: center; + } + + &.jconfirm-animation-rotateyr { + transform: rotatey(-90deg); + transform-origin: center; + } + + &.jconfirm-animation-scaley { + transform: scaley(1.5); + transform-origin: center; + } + + &.jconfirm-animation-scalex { + transform: scalex(1.5); + transform-origin: center; + } + + &.jconfirm-animation-top { + transform: translate(0px, -100px); + } + + &.jconfirm-animation-left { + transform: translate(-100px, 0px); + } + + &.jconfirm-animation-right { + transform: translate(100px, 0px); + } + + &.jconfirm-animation-bottom { + transform: translate(0px, 100px); + } + + &.jconfirm-animation-opacity { + + } + + &.jconfirm-animation-zoom { + transform: scale(1.2); + } + + &.jconfirm-animation-scale { + transform: scale(0.5); + } + + &.jconfirm-animation-none { + visibility: hidden; + } + } +} + +.jconfirm.jconfirm-supervan { + .jconfirm-bg { + background-color: rgba(54, 70, 93, .95); + } + + .jconfirm-box { + background-color: transparent; + + &.jconfirm-type-blue { + border: none; + } + + &.jconfirm-type-green { + border: none; + } + + &.jconfirm-type-red { + border: none; + } + + &.jconfirm-type-orange { + border: none; + } + + &.jconfirm-type-purple { + border: none; + } + + &.jconfirm-type-dark { + border: none; + } + + div.jconfirm-closeIcon { + color: white; + } + + div.jconfirm-title-c { + text-align: center; + color: white; + font-size: 28px; + font-weight: normal; + + > * { + padding-bottom: 25px; + } + + .jconfirm-icon-c { + margin-right: 8px; + margin-left: 0px; + } + } + + div.jconfirm-content-pane { + margin-bottom: 25px; + } + + div.jconfirm-content { + text-align: center; + color: white; + + &:empty { + &:before { + + } + + &:after { + + } + } + } + + .jconfirm-buttons { + text-align: center; + + button { + font-size: 16px; + border-radius: 2px; + background: darken(#36465D, 3%); + text-shadow: none; + border: none; + color: white; + padding: 10px; + min-width: 100px; + } + + button + button { + + } + } + + &.hilight { + + } + } + + &.jconfirm-rtl { + .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c { + margin-left: 8px; + margin-right: 0px; + } + } +} + +.jconfirm.jconfirm-material { + .jconfirm-bg { + background-color: rgba(0, 0, 0, .67); + } + + .jconfirm-box { + background-color: white; + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12); + padding: 30px 25px 10px 25px; + + .jconfirm-title-c .jconfirm-icon-c { + margin-right: 8px; + margin-left: 0px; + } + + div.jconfirm-closeIcon { + color: rgba(0, 0, 0, .87); + } + + div.jconfirm-title-c { + color: rgba(0, 0, 0, .87); + font-size: 22px; + font-weight: bold; + } + + div.jconfirm-content { + color: rgba(0, 0, 0, .87); + + &:empty { + &:before { + + } + + &:after { + + } + } + } + + .jconfirm-buttons { + text-align: right; + + button { + text-transform: uppercase; + font-weight: 500; + } + + button + button { + + } + } + + &.hilight { + + } + } + + &.jconfirm-rtl { + .jconfirm-title-c .jconfirm-icon-c { + margin-left: 8px; + margin-right: 0px; + } + } +} + +.jconfirm.jconfirm-bootstrap { + .jconfirm-bg { + background-color: rgba(0, 0, 0, .21); + } + + .jconfirm-box { + background-color: white; + box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2); + border: solid 1px rgba(0, 0, 0, 0.4); + padding: 15px 0 0; + + .jconfirm-title-c .jconfirm-icon-c { + margin-right: 8px; + margin-left: 0px; + } + + div.jconfirm-closeIcon { + color: rgba(0, 0, 0, 0.87); + } + + div.jconfirm-title-c { + color: rgba(0, 0, 0, 0.87); + font-size: 22px; + font-weight: bold; + padding-left: 15px; + padding-right: 15px; + } + + div.jconfirm-content-pane { + + } + + div.jconfirm-content { + color: rgba(0, 0, 0, 0.87); + padding: 0px 15px; + + &:empty { + &:before { + + } + + &:after { + + } + } + } + + .jconfirm-buttons { + text-align: right; + padding: 10px; + margin: -5px 0 0px; + border-top: solid 1px #ddd; + overflow: hidden; + border-radius: 0 0 2px 2px; + + button { + font-weight: 500; + } + + button + button { + + } + } + + &.hilight { + + } + } + + &.jconfirm-rtl { + .jconfirm-title-c .jconfirm-icon-c { + margin-left: 8px; + margin-right: 0px; + } + } +} + +.jconfirm.jconfirm-modern { + .jconfirm-bg { + background-color: slategray; + opacity: .6; + } + + .jconfirm-box { + background-color: white; + box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12); + padding: 30px 30px 15px; + + div.jconfirm-closeIcon { + color: rgba(0, 0, 0, 0.87); + top: 15px; + right: 15px; + } + + div.jconfirm-title-c { + color: rgba(0, 0, 0, .87); + font-size: 24px; + font-weight: bold; + text-align: center; + margin-bottom: 10px; + + .jconfirm-icon-c { + transition: transform .5s; + transform: scale(0); + display: block; + margin-right: 0px; + margin-left: 0px; + margin-bottom: 10px; + font-size: 69px; + color: #aaa; + } + } + + div.jconfirm-content { + text-align: center; + font-size: 15px; + color: #777; + margin-bottom: 25px; + + &:empty { + &:before { + + } + + &:after { + + } + } + } + + .jconfirm-buttons { + text-align: center; + + button { + font-weight: bold; + text-transform: uppercase; + transition: background .1s; + padding: 10px 20px; + + &.btn-success { + + } + } + + button + button { + margin-left: 4px; + } + } + } + + &.jconfirm-open { + .jconfirm-box .jconfirm-title-c .jconfirm-icon-c { + transform: scale(1); + } + } +} \ No newline at end of file -- 2.39.5