diff --git a/dist/odm.min.css b/dist/odm.min.css
index e0a3ffb..f33d13f 100644
--- a/dist/odm.min.css
+++ b/dist/odm.min.css
@@ -1 +1 @@
-@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.odm-main,.odm-main .odm-closer,.odm-main .odm-layer{margin:0;padding:0;top:0;left:0;bottom:auto;right:auto;width:100%;height:100%;position:absolute;display:block}.odm-main{position:fixed;display:none;background:rgba(0,0,0,.7);z-index:50;transition:opacity .3s linear 0s}.odm-main.no-fixed{position:absolute}.odm-main table.odm-table{margin:0 auto;padding:0;height:100%;border-spacing:0;border-collapse:collapse}.odm-main.no-fixed table.odm-table{height:auto}.odm-main td.odm-table,.odm-main th.odm-table,.odm-main tr.odm-table{margin:0;padding:0;background:0 0;border:0 none}.odm-main td.odm-table{vertical-align:middle}.odm-main .odm-block{margin:0;padding:.25em;display:block;position:relative;border:1px solid #666;background:#222;overflow:hidden;z-index:45;border-radius:.25em}.odm-main .odm-close{margin:0;padding:0;top:0;right:0;position:absolute;display:block;background:#444;border:none;border-radius:0;border-bottom-left-radius:.25em;font-size:inherit;z-index:1}.odm-main .odm-close:hover{background:#666}.odm-main .odm-close i{padding:0 .3em;color:#fff;line-height:1.2em;font-size:1.8em;font-weight:700;font-style:normal;font-family:Arial,sans-serif;display:inline-block}.odm-main .odm-top-bar .odm-title{padding:0;margin:0;font-size:1em}.odm-main .odm-top-bar{padding-bottom:.25em;padding-left:.25em;padding-right:2.25em;color:#ddd;height:1.5em;line-height:1.5em;font-size:1.1em;font-weight:700;text-align:left;display:none}.odm-main.odm-top-bar-displayed .odm-top-bar{display:block}.odm-main .odm-top-bar .odm-resources{margin-left:.25em;float:right;display:block}.odm-main .odm-bottom-bar{padding-top:.25em;color:#ddd;text-align:right;display:none}.odm-main .odm-bottom-bar button{vertical-align:middle;font-size:inherit}.odm-main .odm-bottom-bar button+button{margin-left:.5em}.odm-main.odm-bottom-bar-displayed .odm-bottom-bar{display:block}.odm-main .odm-element-place{position:relative;overflow:hidden;border-radius:.2em}.odm-main .odm-hover-loading{top:20px;left:20px;position:absolute;display:none;border:1px solid #666;background:rgba(0,0,0,.7);border-radius:.35em}.odm-main.odm-hover-loading-displayed .odm-hover-loading{display:block}.odm-main .odm-hover-loading div{padding:8px 16px;line-height:32px;color:#ccc;font-size:.9em;font-weight:700}.odm-main .odm-hover-loading div:before{margin-right:.2em;content:" ";font-size:4em;font-weight:700;display:inline-block;vertical-align:middle;border:.1em solid #888;border-top:.1em solid #eee;border-radius:50%;width:.5em;height:.5em;animation:spin 2s linear infinite}.odm-main .odm-element-content{position:relative}.odm-main .odm-element-padding{padding:10px}.odm-main .odm-element{min-width:150px;min-height:20px;vertical-align:top;transition:opacity .3s linear 0s}.odm-main img.odm-element{max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic}.odm-main iframe.odm-element{padding:0;border:0 none;vertical-align:top}.odm-main div.odm-element,.odm-main form.odm-element{padding:.5em}.odm-main div.odm-element,.odm-main form.odm-element,.odm-main iframe.odm-element{margin:0;background:#fff;color:#000;text-align:left;overflow:auto}.odm-main div.odm-element.odm-error,.odm-main div.odm-element.odm-loading{padding:45px;background:0 0;color:#ccc;font-weight:700;font-size:1.3em;transition:none}.odm-main div.odm-element.odm-error:before,.odm-main div.odm-element.odm-loading:before{margin-right:.2em;font-size:4em;font-weight:700;display:inline-block;vertical-align:middle}.odm-main div.odm-element.odm-error:before{content:"⚠";color:#fa2}.odm-main div.odm-element.odm-loading:before{content:" ";border:.1em solid #888;border-top:.1em solid #eee;border-radius:50%;width:.5em;height:.5em;animation:spin 2s linear infinite}.odm-main .odm-next,.odm-main .odm-previous{top:.25em;bottom:.25em;left:.25em;right:.25em;position:absolute;width:181px;display:none;text-align:center;line-height:4em;cursor:pointer;overflow:hidden;background:0 0;border:0 none;appearance:none;-moz-appearance:none;-webkit-appearance:none}.odm-main .odm-previous{right:auto}.odm-main .odm-next{left:auto}.odm-main .odm-next span,.odm-main .odm-previous span{margin-top:-80px;padding:32px 0;left:0;right:0;top:50%;position:absolute;border:1px solid #666;color:#ccc;background:rgba(0,0,0,.7);display:none}.odm-main .odm-next:hover span,.odm-main .odm-previous:hover span{display:block}.odm-main .odm-previous span{right:60px;border-left:0 none;border-top-right-radius:.35em;border-bottom-right-radius:.35em}.odm-main .odm-next span{left:60px;border-right:0 none;border-top-left-radius:.35em;border-bottom-left-radius:.35em}.odm-main .odm-next b,.odm-main .odm-next i,.odm-main .odm-previous b,.odm-main .odm-previous i{font-style:normal;font-weight:700;display:block}.odm-main .odm-next i,.odm-main .odm-previous i{font-size:6em}.odm-main .odm-next b,.odm-main .odm-previous b{font-size:1.5em}
\ No newline at end of file
+@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.odm-main{--odm-block-container-color:#FBFBFB;--odm-block-on-container-color:#161616;--odm-close-hover-color:#EEEEEE;--odm-block-radius:28px;--odm-main-container-color:rgba(0, 0, 0, 0.7);--odm-main-on-container-color:#CCCCCC;--odm-loading-buffer-color:#888888;--odm-loading-track-color:#EEEEEE;--odm-warning-icon-color:#FFAA22}.odm-main,.odm-main .odm-closer,.odm-main .odm-layer{margin:0;padding:0;top:0;left:0;bottom:auto;right:auto;width:100%;height:100%;position:absolute;display:block}.odm-main{position:fixed;display:none;background:var(--odm-main-container-color);z-index:50;transition:opacity .3s linear 0s}.odm-main.no-fixed{position:absolute}.odm-main table.odm-table{margin:0 auto;padding:0;height:100%;border-spacing:0;border-collapse:collapse;border-color:transparent}.odm-main.no-fixed table.odm-table{height:auto}.odm-main td.odm-table,.odm-main th.odm-table,.odm-main tr.odm-table{margin:0;padding:0;background:0 0;border:0 none}.odm-main td.odm-table{vertical-align:middle}.odm-main .odm-block{margin:8px;display:block;position:relative;color:var(--odm-block-on-container-color);background:var(--odm-block-container-color);overflow:hidden;z-index:45;border-radius:var(--odm-block-radius)}.odm-main .odm-close{margin:0;padding:.3em;top:11px;right:11px;position:absolute;display:block;border:none;border-radius:100%;font-size:inherit;z-index:1}.odm-main .odm-close:hover{cursor:pointer}.odm-main .odm-close i{padding:0 .3em;color:var(--odm-block-on-container-color);line-height:1.2em;font-size:1.8em;font-weight:700;font-style:normal;font-family:Arial,sans-serif;display:inline-block}.odm-main .odm-top-bar .odm-title{padding:0;margin:0;font-size:1.5em}.odm-main .odm-top-bar{padding:16px 24px;padding-bottom:8px;padding-right:34px;height:1.5em;line-height:1.5em;font-size:1.1em;font-weight:700;text-align:left;display:none}.odm-main.odm-top-bar-displayed .odm-top-bar{display:block}.odm-main .odm-top-bar .odm-resources{margin-right:1.5em;float:right;display:block}.odm-main .odm-bottom-bar{padding:16px 24px;padding-top:8px;text-align:right;display:none}.odm-main .odm-bottom-bar button{vertical-align:middle;font-size:inherit}.odm-main .odm-bottom-bar button+button{margin-left:.5em}.odm-main.odm-bottom-bar-displayed .odm-bottom-bar{display:block}.odm-main .odm-element-place{position:relative;overflow:hidden;padding:8px 24px}.odm-main .odm-hover-loading{top:20px;left:20px;position:absolute;display:none;background:var(--odm-main-container-color);border-radius:.35em}.odm-main.odm-hover-loading-displayed .odm-hover-loading{display:block}.odm-main .odm-hover-loading div{padding:8px 16px;line-height:32px;color:var(--odm-main-on-container-color);font-size:.9em;font-weight:700}.odm-main .odm-hover-loading div:before{margin-right:.2em;content:" ";font-size:4em;font-weight:700;display:inline-block;vertical-align:middle;border:.1em solid var(--odm-loading-buffer-color);border-top:.1em solid var(--odm-loading-track-color);border-radius:50%;width:.5em;height:.5em;animation:spin 2s linear infinite}.odm-main .odm-element-content{position:relative}.odm-main .odm-element-padding{padding:10px}.odm-main .odm-element{min-width:150px;min-height:20px;vertical-align:top;transition:opacity .3s linear 0s}.odm-main img.odm-element{max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic}.odm-main iframe.odm-element{padding:0;border:0 none;vertical-align:top}.odm-main div.odm-element,.odm-main form.odm-element,.odm-main iframe.odm-element{margin:0;text-align:left;overflow:auto}.odm-main div.odm-element.odm-error,.odm-main div.odm-element.odm-loading{padding:45px;font-weight:700;font-size:1.3em;transition:none}.odm-main div.odm-element.odm-error:before,.odm-main div.odm-element.odm-loading:before{margin-right:.2em;font-size:4em;font-weight:700;display:inline-block;vertical-align:middle}.odm-main div.odm-element.odm-error:before{content:"⚠";color:var(--odm-warning-icon-color)}.odm-main div.odm-element.odm-loading:before{content:" ";border:.1em solid var(--odm-loading-buffer-color);border-top:.1em solid var(--odm-loading-track-color);border-radius:50%;width:.5em;height:.5em;animation:spin 2s linear infinite}.odm-main .odm-next,.odm-main .odm-previous{top:.25em;bottom:.25em;left:.25em;right:.25em;position:absolute;width:181px;display:none;text-align:center;line-height:4em;cursor:pointer;overflow:hidden;background:0 0;border:0 none;appearance:none;-moz-appearance:none;-webkit-appearance:none}.odm-main .odm-previous{right:auto}.odm-main .odm-next{left:auto}.odm-main .odm-next span,.odm-main .odm-previous span{margin-top:-80px;padding:32px 0;left:0;right:0;top:50%;position:absolute;color:var(--odm-main-on-container-color);background:var(--odm-main-container-color);display:none}.odm-main .odm-next:hover span,.odm-main .odm-previous:hover span{display:block}.odm-main .odm-previous span{right:60px;border-left:0 none;border-top-right-radius:.35em;border-bottom-right-radius:.35em}.odm-main .odm-next span{left:60px;border-right:0 none;border-top-left-radius:.35em;border-bottom-left-radius:.35em}.odm-main .odm-next b,.odm-main .odm-next i,.odm-main .odm-previous b,.odm-main .odm-previous i{font-style:normal;font-weight:700;display:block}.odm-main .odm-next i,.odm-main .odm-previous i{font-size:6em}.odm-main .odm-next b,.odm-main .odm-previous b{font-size:1.5em}
\ No newline at end of file
diff --git a/dist/odm.min.js b/dist/odm.min.js
index bfea958..b554e40 100644
--- a/dist/odm.min.js
+++ b/dist/odm.min.js
@@ -1 +1 @@
-function OverlayDisplayManager(e){const t=["id","language","defaultButtonsClass","overlaySelectorPlace","hideOnEscape","margin","elementPadding","topBarHeight","bottomBarHeight","zIndex"];if(this.id=1,this.language="en",this.defaultButtonsClass="",this.overlaySelectorPlace="body",this.hideOnEscape=!0,this.margin=2,this.elementPadding=1,this.topBarHeight=1.75,this.bottomBarHeight=2,this.zIndex=null,this.pendingShowParams=null,this.messages={},this.widget=null,this.maxWidth=0,this.maxHeight=0,this.image=null,this.elementPlace=null,this.displayed=!1,this.displayedElement=null,this.elementPaddingDisplayed=!1,this.topBarDisplayed=!1,this.bottomBarDisplayed=!1,this.displayMode=null,this.title="",this.resources=[],this.currentIndex=0,this.currentResource=null,this.locked=!1,this.noFixed=!1,this.elementFirstFocused=null,this.lastFocus=null,this.ignoreUntilFocusChanges=!1,window.jsu&&(this.language=window.jsu.getCurrentLang()),e){let i;for(i in e)t.indexOf(i)<0?console.error("Unknown attribute given to OverlayDisplayManager: "+i):this[i]=e[i]}this.setLanguage(this.language),"complete"===document.readyState||"interactive"===document.readyState?setTimeout(this._init.bind(this),1):document.addEventListener("DOMContentLoaded",this._init.bind(this)),window.addEventListener("resize",this.onResize.bind(this))}OverlayDisplayManager.version=3,OverlayDisplayManager.prototype._init=function(){isNaN(this.id)||(window.odmIdCount?(window.odmIdCount++,this.id=window.odmIdCount):(window.odmIdCount=1,this.id=1));let e=[];"body"==this.overlaySelectorPlace&&"iPad"!=navigator.platform&&"iPhone"!=navigator.platform&&"iPod"!=navigator.platform||(this.noFixed=!0,e.push("no-fixed")),window.odmConf&&window.odmConf.extraCssClasses&&(e=e.concat(window.odmConf.extraCssClasses)),this.widget=document.createElement("div"),this.widget.setAttribute("id","odm_"+this.id),this.widget.setAttribute("class","odm-main "+e.join(" ")),this.zIndex&&this.widget.setAttribute("style","z-index:"+this.zIndex),this.widget.innerHTML='
'+this.messages.loading+' |
',document.querySelector(this.overlaySelectorPlace).appendChild(this.widget),this.elementPlace=this.widget.querySelector(".odm-element-content");const t=this;this.widget.querySelector(".odm-previous").addEventListener("click",function(){t.previous()}),this.widget.querySelector(".odm-next").addEventListener("click",function(){t.next()}),this.widget.querySelector(".odm-close").addEventListener("click",function(){t.locked||t.hide()}),this.widget.querySelector(".odm-closer").addEventListener("click",function(){t.locked||t.hide()}),this.widget.querySelector(".odm-element-content").addEventListener("click",function(){!t.locked&&"image"==t.displayMode&&t.resources.length<2&&t.image&&!t.image.loadingFailed&&t.hide()}),window.addEventListener("keydown",function(e){if(t.displayed)switch(e.key){case"Escape":!t.locked&&t.hideOnEscape&&(e.stopImmediatePropagation(),t.hide());break;case"ArrowLeft":e.stopImmediatePropagation(),t.previous();break;case"ArrowRight":e.stopImmediatePropagation(),t.next()}}),this.onResize(),this.pendingShowParams&&this.show(this.pendingShowParams)},OverlayDisplayManager.prototype.trapFocus=function(e){this.ignoreUntilFocusChanges||(this.widget.querySelector(".odm-block").contains(e.target)?this.lastFocus=e.target:(this.focusFirstDescendant(this.widget.querySelector(".odm-block")),this.lastFocus==document.activeElement&&this.focusLastDescendant(this.widget.querySelector(".odm-block")),this.lastFocus=document.activeElement))},OverlayDisplayManager.prototype.focusLastDescendant=function(e){for(let t=e.childNodes.length-1;t>=0;t--){const i=e.childNodes[t];if(this.attemptFocus(i)||this.focusLastDescendant(i))return!0}return!1},OverlayDisplayManager.prototype.focusFirstDescendant=function(e){for(let t=0;t0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!=e.rel;case"INPUT":return"hidden"!=e.type&&"file"!=e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},OverlayDisplayManager.prototype.setLanguage=function(e){"fr"==e?(this.language="fr",this.messages={close:"Fermer",loading:"Chargement...",notFound:"Image introuvable",unknownResource:"Type de ressource inconnu",previous:"Précédent",next:"Suivant"}):(this.language="en",this.messages={close:"Close",loading:"Loading...",notFound:"Image not found",unknownResource:"Unknown resource type",previous:"Previous",next:"Next"}),this.widget&&(this.widget.querySelector(".odm-close").setAttribute("title",this.messages.close),this.widget.querySelector(".odm-close").setAttribute("aria-label",this.messages.close),this.widget.querySelector(".odm-hover-loading div").innerHTML=this.messages.loading,this.widget.querySelector(".odm-previous b").innerHTML=this.messages.previous,this.widget.querySelector(".odm-next b").innerHTML=this.messages.next)},OverlayDisplayManager.prototype.onResize=function(){let e;this.displayedElement&&this.displayedElement.parentElement==this.elementPlace&&(e=this.displayedElement);let t=15;if(e)try{const i=window.getComputedStyle(e).getPropertyValue("fontSize");i.indexOf("px")>0&&(t=parseFloat(i.replace(/[^0-9.]+/g,"")))}catch(e){}const i=this.margin;let s=this.margin;if(this.topBarDisplayed&&(s+=this.topBarHeight),this.bottomBarDisplayed&&(s+=this.bottomBarHeight),"body"!=this.overlaySelectorPlace){const e=document.querySelector(this.overlaySelectorPlace);this.maxWidth=e.offsetWidth-i*t,this.maxHeight=e.offsetHeight-s*t}else this.maxWidth=window.innerWidth-i*t,this.maxHeight=window.innerHeight-s*t;const o=this.elementPaddingDisplayed?this.elementPadding*t:0;e&&(this.maxWidth>0&&e.style.setProperty("max-width",this.maxWidth-o+"px"),this.maxHeight>0&&e.style.setProperty("max-height",this.maxHeight-o+"px"))},OverlayDisplayManager.prototype._setResources=function(e){if(this.widget&&!this.displayed){this.loadingDisplayed=!0;const e=document.createElement("div");e.setAttribute("class","odm-element odm-loading"),e.innerHTML=this.messages.loading,this._displayElement(e),this.image=null,this.currentResource=null}if(this.resources=[],"string"!=typeof e&&void 0!==e.length)for(let t=0;t1?(e.index&&e.index>0&&e.index0?this.widget.querySelector(".odm-previous").style.setProperty("display","block"):this.widget.querySelector(".odm-previous").style.setProperty("display","none"),this.currentIndex1;t&&!this.topBarDisplayed?(this.topBarDisplayed=!0,this.widget.classList.add("odm-top-bar-displayed"),this.onResize()):!t&&this.topBarDisplayed&&(this.topBarDisplayed=!1,this.widget.classList.remove("odm-top-bar-displayed"),this.onResize())},OverlayDisplayManager.prototype._checkButtonsDisplay=function(e){const t=e.buttons;if(t){if(!t.loaded){this.widget.querySelector(".odm-buttons").innerHTML="";for(let e=0;e=this.resources.length||e<0||(this.widget.querySelector(".odm-resources").innerHTML=e+1+" / "+this.resources.length,e>0?this.widget.querySelector(".odm-previous").style.setProperty("display","block"):this.widget.querySelector(".odm-previous").style.setProperty("display",""),e0&&this.currentIndex+10&&this.currentIndex-1>=0&&this.goToIndex(this.currentIndex-1)},OverlayDisplayManager.prototype._displayElement=function(e,t){const i=this.elementPlace;if(this.displayedElement&&this.displayedElement!=e){const e=this.displayedElement,t=function(){e.parentElement==i&&e.parentElement.removeChild(e),e.style.setProperty("opacity",""),e.style.setProperty("position",""),e.classList.remove("odm-element")};!this.displayed||e.classList.contains("odm-loading")||e.classList.contains("odm-error")?t():(e.style.setProperty("opacity","0"),e.style.setProperty("position","absolute"),setTimeout(t,300))}this.elementPaddingDisplayed=Boolean(t),this.displayedElement=e,e&&e.parentElement!=i&&i.appendChild(e)},OverlayDisplayManager.prototype._refreshElement=function(){this._displayElement(this.displayedElement,this.elementPaddingDisplayed)},OverlayDisplayManager.prototype._displayError=function(e){const t=document.createElement("div");t.innerHTML=''+(e in this.messages?this.messages[e]:e)+"
",this._displayElement(t)},OverlayDisplayManager.prototype._showLoading=function(){if(this.loadingDisplayed)return;this.loadingDisplayed=!0,null!==this.loadingTimeoutId&&(clearTimeout(this.loadingTimeoutId),this.loadingTimeoutId=null);const e=this;this.loadingTimeoutId=setTimeout(function(){e.widget.classList.add("odm-hover-loading-displayed")},300)},OverlayDisplayManager.prototype._hideLoading=function(){this.loadingDisplayed&&(this.loadingDisplayed=!1,null!==this.loadingTimeoutId&&(clearTimeout(this.loadingTimeoutId),this.loadingTimeoutId=null),this.widget.classList.remove("odm-hover-loading-displayed"))},OverlayDisplayManager.prototype._loadImage=function(e,t){if("image"!=this.displayMode){this.displayMode="image",this.loadingDisplayed=!0;const e=document.createElement("div");e.setAttribute("class","odm-element odm-loading"),e.innerHTML=this.messages.loading,this._displayElement(e)}else if(this.image&&this.image.oriSrc==e.image)return void(t&&t(Boolean(this.image.loadingFailed)));this.image=new Image,this.image.odm=this,this.image.odmCallback=t;const i=e.alt||"";this._showLoading(),this.image.onload=function(){const e=document.createElement("img");e.setAttribute("class","odm-element"),e.setAttribute("alt",i),e.setAttribute("src",this.src),e.setAttribute("style","max-width: "+this.odm.maxWidth+"px; max-height: "+this.odm.maxHeight+"px;"),this.odm._hideLoading(),this.odm._displayElement(e),this.odmCallback&&this.odmCallback(!0)},this.image.onabort=this.image.onload,this.image.onerror=function(){this.loadingFailed=!0,this.odm._hideLoading(),this.odm._displayError("notFound"),this.odmCallback&&this.odmCallback(!1)},this.image.oriSrc=e.image,this.image.src=e.image},OverlayDisplayManager.prototype._loadIframe=function(e,t){"iframe"!=this.displayMode&&(this.displayMode="iframe");const i=e.width?e.width:this.maxWidth+"px",s=e.height?e.height:this.maxHeight+"px",o=document.createElement("iframe");o.setAttribute("class","odm-element"),o.setAttribute("src",e.iframe),o.setAttribute("style","width: "+i+"; height: "+s+";"),this._displayElement(o),t&&t(!0)},OverlayDisplayManager.prototype._loadHTML=function(e,t){let i;"html"!=this.displayMode&&(this.displayMode="html"),"string"==typeof e.html?(i=document.createElement("div")).innerHTML=e.html:(i="detach"in e.html?e.html[0]:e.html).parentElement&&i.parentElement.removeChild(i),i.classList.add("odm-element"),i.style.setProperty("max-width",this.maxWidth-this.elementPadding+"px"),i.style.setProperty("max-height",this.maxHeight-this.elementPadding+"px"),i.style.setProperty("opacity",""),i.style.setProperty("position",""),this._displayElement(i,!0),t&&t(!0)};
\ No newline at end of file
+function OverlayDisplayManager(e){const t=["id","language","defaultButtonsClass","overlaySelectorPlace","hideOnEscape","margin","zIndex"];if(this.id=1,this.language="en",this.defaultButtonsClass="",this.overlaySelectorPlace="body",this.hideOnEscape=!0,this.zIndex=null,this.pendingShowParams=null,this.messages={},this.widget=null,this.maxWidth=0,this.maxHeight=0,this.image=null,this.elementPlace=null,this.displayed=!1,this.displayedElement=null,this.topBarDisplayed=!1,this.bottomBarDisplayed=!1,this.displayMode=null,this.title="",this.resources=[],this.currentIndex=0,this.currentResource=null,this.locked=!1,this.noFixed=!1,this.elementFirstFocused=null,this.lastFocus=null,this.ignoreUntilFocusChanges=!1,window.jsu&&(this.language=window.jsu.getCurrentLang()),e){let i;for(i in e)t.indexOf(i)<0?console.error("Unknown attribute given to OverlayDisplayManager: "+i):this[i]=e[i]}this.setLanguage(this.language),"complete"===document.readyState||"interactive"===document.readyState?setTimeout(this._init.bind(this),1):document.addEventListener("DOMContentLoaded",this._init.bind(this)),window.addEventListener("resize",this.onResize.bind(this))}OverlayDisplayManager.version=3,OverlayDisplayManager.prototype._init=function(){isNaN(this.id)||(window.odmIdCount?(window.odmIdCount++,this.id=window.odmIdCount):(window.odmIdCount=1,this.id=1));let e=[];"body"==this.overlaySelectorPlace&&"iPad"!=navigator.platform&&"iPhone"!=navigator.platform&&"iPod"!=navigator.platform||(this.noFixed=!0,e.push("no-fixed")),window.odmConf&&window.odmConf.extraCssClasses&&(e=e.concat(window.odmConf.extraCssClasses)),this.widget=document.createElement("div"),this.widget.setAttribute("id","odm_"+this.id),this.widget.setAttribute("class","odm-main "+e.join(" ")),this.zIndex&&this.widget.setAttribute("style","z-index:"+this.zIndex),this.widget.innerHTML=''+this.messages.loading+' |
',document.querySelector(this.overlaySelectorPlace).appendChild(this.widget),this.elementPlace=this.widget.querySelector(".odm-element-content");const t=this;this.widget.querySelector(".odm-previous").addEventListener("click",function(){t.previous()}),this.widget.querySelector(".odm-next").addEventListener("click",function(){t.next()}),this.widget.querySelector(".odm-close").addEventListener("click",function(){t.locked||t.hide()}),this.widget.querySelector(".odm-closer").addEventListener("click",function(){t.locked||t.hide()}),this.widget.querySelector(".odm-element-content").addEventListener("click",function(){!t.locked&&"image"==t.displayMode&&t.resources.length<2&&t.image&&!t.image.loadingFailed&&t.hide()}),window.addEventListener("keydown",function(e){if(t.displayed)switch(e.key){case"Escape":!t.locked&&t.hideOnEscape&&(e.stopImmediatePropagation(),t.hide());break;case"ArrowLeft":e.stopImmediatePropagation(),t.previous();break;case"ArrowRight":e.stopImmediatePropagation(),t.next()}}),this.onResize(),this.pendingShowParams&&this.show(this.pendingShowParams)},OverlayDisplayManager.prototype.trapFocus=function(e){this.ignoreUntilFocusChanges||(this.widget.querySelector(".odm-block").contains(e.target)?this.lastFocus=e.target:(this.focusFirstDescendant(this.widget.querySelector(".odm-block")),this.lastFocus==document.activeElement&&this.focusLastDescendant(this.widget.querySelector(".odm-block")),this.lastFocus=document.activeElement))},OverlayDisplayManager.prototype.focusLastDescendant=function(e){for(let t=e.childNodes.length-1;t>=0;t--){const i=e.childNodes[t];if(this.attemptFocus(i)||this.focusLastDescendant(i))return!0}return!1},OverlayDisplayManager.prototype.focusFirstDescendant=function(e){for(let t=0;t0||0===e.tabIndex&&null!==e.getAttribute("tabIndex"))return!0;if(e.disabled)return!1;switch(e.nodeName){case"A":return!!e.href&&"ignore"!=e.rel;case"INPUT":return"hidden"!=e.type&&"file"!=e.type;case"BUTTON":case"SELECT":case"TEXTAREA":return!0;default:return!1}},OverlayDisplayManager.prototype.setLanguage=function(e){"fr"==e?(this.language="fr",this.messages={close:"Fermer",loading:"Chargement...",notFound:"Image introuvable",unknownResource:"Type de ressource inconnu",previous:"Précédent",next:"Suivant"}):(this.language="en",this.messages={close:"Close",loading:"Loading...",notFound:"Image not found",unknownResource:"Unknown resource type",previous:"Previous",next:"Next"}),this.widget&&(this.widget.querySelector(".odm-close").setAttribute("title",this.messages.close),this.widget.querySelector(".odm-close").setAttribute("aria-label",this.messages.close),this.widget.querySelector(".odm-hover-loading div").innerHTML=this.messages.loading,this.widget.querySelector(".odm-previous b").innerHTML=this.messages.previous,this.widget.querySelector(".odm-next b").innerHTML=this.messages.next)},OverlayDisplayManager.prototype._getElementPropertyPixelValue=function(e,t){if(!e)return 0;try{const i=window.getComputedStyle(e).getPropertyValue(t);if(i.indexOf("px")>0)return parseFloat(i.replace(/[^0-9.]+/g,""))}catch(e){}return 0},OverlayDisplayManager.prototype.onResize=function(){let e=0,t=0;const i=this.widget.querySelector(".odm-block"),s=this._getElementPropertyPixelValue(i,"margin");e=2*s,t=2*s;const o=this.widget.querySelector(".odm-block .odm-element-place");if(e+=2*this._getElementPropertyPixelValue(o,"padding-left"),t+=2*this._getElementPropertyPixelValue(o,"padding-top"),this.topBarDisplayed){t+=this.widget.querySelector(".odm-block .odm-top-bar").offsetHeight}if(this.bottomBarDisplayed){t+=this.widget.querySelector(".odm-block .odm-bottom-bar").offsetHeight}if("body"!=this.overlaySelectorPlace){const i=document.querySelector(this.overlaySelectorPlace);this.maxWidth=i.offsetWidth-e,this.maxHeight=i.offsetHeight-t}else this.maxWidth=window.innerWidth-e,this.maxHeight=window.innerHeight-t;this.displayedElement&&this.displayedElement.parentElement==this.elementPlace&&(this.maxWidth>0&&this.displayedElement.style.setProperty("max-width",this.maxWidth+"px"),this.maxHeight>0&&this.displayedElement.style.setProperty("max-height",this.maxHeight+"px"))},OverlayDisplayManager.prototype._setResources=function(e){if(this.widget&&!this.displayed){this.loadingDisplayed=!0;const e=document.createElement("div");e.setAttribute("class","odm-element odm-loading"),e.innerHTML=this.messages.loading,this._displayElement(e),this.image=null,this.currentResource=null}if(this.resources=[],"string"!=typeof e&&void 0!==e.length)for(let t=0;t1?(e.index&&e.index>0&&e.index0?this.widget.querySelector(".odm-previous").style.setProperty("display","block"):this.widget.querySelector(".odm-previous").style.setProperty("display","none"),this.currentIndex1;t&&!this.topBarDisplayed?(this.topBarDisplayed=!0,this.widget.classList.add("odm-top-bar-displayed"),this.onResize()):!t&&this.topBarDisplayed&&(this.topBarDisplayed=!1,this.widget.classList.remove("odm-top-bar-displayed"),this.onResize())},OverlayDisplayManager.prototype._checkButtonsDisplay=function(e){const t=e.buttons;if(t){if(!t.loaded){this.widget.querySelector(".odm-buttons").innerHTML="";for(let e=0;e=this.resources.length||e<0||(this.widget.querySelector(".odm-resources").innerHTML=e+1+" / "+this.resources.length,e>0?this.widget.querySelector(".odm-previous").style.setProperty("display","block"):this.widget.querySelector(".odm-previous").style.setProperty("display",""),e0&&this.currentIndex+10&&this.currentIndex-1>=0&&this.goToIndex(this.currentIndex-1)},OverlayDisplayManager.prototype._displayElement=function(e){const t=this.elementPlace;if(this.displayedElement&&this.displayedElement!=e){const e=this.displayedElement,i=function(){e.parentElement==t&&e.parentElement.removeChild(e),e.style.setProperty("opacity",""),e.style.setProperty("position",""),e.classList.remove("odm-element")};!this.displayed||e.classList.contains("odm-loading")||e.classList.contains("odm-error")?i():(e.style.setProperty("opacity","0"),e.style.setProperty("position","absolute"),setTimeout(i,300))}this.displayedElement=e,e&&e.parentElement!=t&&t.appendChild(e)},OverlayDisplayManager.prototype._refreshElement=function(){this._displayElement(this.displayedElement)},OverlayDisplayManager.prototype._displayError=function(e){const t=document.createElement("div");t.innerHTML=''+(e in this.messages?this.messages[e]:e)+"
",this._displayElement(t)},OverlayDisplayManager.prototype._showLoading=function(){if(this.loadingDisplayed)return;this.loadingDisplayed=!0,null!==this.loadingTimeoutId&&(clearTimeout(this.loadingTimeoutId),this.loadingTimeoutId=null);const e=this;this.loadingTimeoutId=setTimeout(function(){e.widget.classList.add("odm-hover-loading-displayed")},300)},OverlayDisplayManager.prototype._hideLoading=function(){this.loadingDisplayed&&(this.loadingDisplayed=!1,null!==this.loadingTimeoutId&&(clearTimeout(this.loadingTimeoutId),this.loadingTimeoutId=null),this.widget.classList.remove("odm-hover-loading-displayed"))},OverlayDisplayManager.prototype._loadImage=function(e,t){if("image"!=this.displayMode){this.displayMode="image",this.loadingDisplayed=!0;const e=document.createElement("div");e.setAttribute("class","odm-element odm-loading"),e.innerHTML=this.messages.loading,this._displayElement(e)}else if(this.image&&this.image.oriSrc==e.image)return void(t&&t(Boolean(this.image.loadingFailed)));this.image=new Image,this.image.odm=this,this.image.odmCallback=t;const i=e.alt||"";this._showLoading(),this.image.onload=function(){const e=document.createElement("img");e.setAttribute("class","odm-element"),e.setAttribute("alt",i),e.setAttribute("src",this.src),e.setAttribute("style","max-width: "+this.odm.maxWidth+"px; max-height: "+this.odm.maxHeight+"px;"),this.odm._hideLoading(),this.odm._displayElement(e),this.odmCallback&&this.odmCallback(!0)},this.image.onabort=this.image.onload,this.image.onerror=function(){this.loadingFailed=!0,this.odm._hideLoading(),this.odm._displayError("notFound"),this.odmCallback&&this.odmCallback(!1)},this.image.oriSrc=e.image,this.image.src=e.image},OverlayDisplayManager.prototype._loadIframe=function(e,t){"iframe"!=this.displayMode&&(this.displayMode="iframe");const i=e.width?e.width:this.maxWidth+"px",s=e.height?e.height:this.maxHeight+"px",o=document.createElement("iframe");o.setAttribute("class","odm-element"),o.setAttribute("src",e.iframe),o.setAttribute("style","width: "+i+"; height: "+s+";"),this._displayElement(o),t&&t(!0)},OverlayDisplayManager.prototype._loadHTML=function(e,t){let i;"html"!=this.displayMode&&(this.displayMode="html"),"string"==typeof e.html?(i=document.createElement("div")).innerHTML=e.html:(i="detach"in e.html?e.html[0]:e.html).parentElement&&i.parentElement.removeChild(i),i.classList.add("odm-element"),i.style.setProperty("max-width",this.maxWidth+"px"),i.style.setProperty("max-height",this.maxHeight+"px"),i.style.setProperty("opacity",""),i.style.setProperty("position",""),this._displayElement(i),t&&t(!0)};
\ No newline at end of file
diff --git a/src/odm.css b/src/odm.css
index 9e143cc..29596da 100644
--- a/src/odm.css
+++ b/src/odm.css
@@ -3,7 +3,17 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
-
+.odm-main {
+ --odm-block-container-color: #FBFBFB;
+ --odm-block-on-container-color: #161616;
+ --odm-close-hover-color: #EEEEEE;
+ --odm-block-radius: 28px;
+ --odm-main-container-color: rgba(0, 0, 0, 0.7);
+ --odm-main-on-container-color: #CCCCCC;
+ --odm-loading-buffer-color: #888888;
+ --odm-loading-track-color: #EEEEEE;
+ --odm-warning-icon-color: #FFAA22;
+}
.odm-main,
.odm-main .odm-layer,
.odm-main .odm-closer {
@@ -21,7 +31,7 @@
.odm-main {
position: fixed;
display: none;
- background: rgba(0, 0, 0, 0.7);
+ background: var(--odm-main-container-color);
z-index: 50;
transition: opacity 0.3s linear 0s;
}
@@ -34,6 +44,7 @@
height: 100%;
border-spacing: 0;
border-collapse: collapse;
+ border-color: transparent;
}
.odm-main.no-fixed table.odm-table {
height: auto;
@@ -50,38 +61,35 @@
vertical-align: middle;
}
.odm-main .odm-block {
- margin: 0;
- padding: 0.25em;
+ margin: 8px;
display: block;
position: relative;
- border: 1px solid #666;
- background: #222;
+ color: var(--odm-block-on-container-color);
+ background: var(--odm-block-container-color);
overflow: hidden;
z-index: 45;
- border-radius: 0.25em;
+ border-radius: var(--odm-block-radius);
}
/* close button */
.odm-main .odm-close {
margin: 0;
- padding: 0;
- top: 0;
- right: 0;
+ padding: .3em;
+ top: 11px;
+ right: 11px;
position: absolute;
display: block;
- background: #444;
border: none;
- border-radius: 0;
- border-bottom-left-radius: 0.25em;
+ border-radius: 100%;
font-size: inherit;
z-index: 1;
}
.odm-main .odm-close:hover {
- background: #666;
+ cursor: pointer;
}
.odm-main .odm-close i {
padding: 0 0.3em;
- color: white;
+ color: var(--odm-block-on-container-color);
line-height: 1.2em;
font-size: 1.8em;
font-weight: bold;
@@ -94,13 +102,12 @@
.odm-main .odm-top-bar .odm-title {
padding: 0;
margin: 0;
- font-size: 1em;
+ font-size: 1.5em;
}
.odm-main .odm-top-bar {
- padding-bottom: 0.25em;
- padding-left: 0.25em;
- padding-right: 2.25em;
- color: #ddd;
+ padding: 16px 24px;
+ padding-bottom: 8px;
+ padding-right: 34px;
height: 1.5em;
line-height: 1.5em;
font-size: 1.1em;
@@ -112,14 +119,14 @@
display: block;
}
.odm-main .odm-top-bar .odm-resources {
- margin-left: 0.25em;
+ margin-right: 1.5em;
float: right;
display: block;
}
/* bottom-bar */
.odm-main .odm-bottom-bar {
- padding-top: 0.25em;
- color: #ddd;
+ padding: 16px 24px;
+ padding-top: 8px;
text-align: right;
display: none;
}
@@ -138,15 +145,14 @@
.odm-main .odm-element-place {
position: relative;
overflow: hidden;
- border-radius: 0.2em;
+ padding: 8px 24px;
}
.odm-main .odm-hover-loading {
top: 20px;
left: 20px;
position: absolute;
display: none;
- border: 1px solid #666;
- background: rgba(0, 0, 0, 0.7);
+ background: var(--odm-main-container-color);
border-radius: 0.35em;
}
.odm-main.odm-hover-loading-displayed .odm-hover-loading {
@@ -155,7 +161,7 @@
.odm-main .odm-hover-loading div {
padding: 8px 16px;
line-height: 32px;
- color: #ccc;
+ color: var(--odm-main-on-container-color);
font-size: 0.9em;
font-weight: bold;
}
@@ -166,8 +172,8 @@
font-weight: bold;
display: inline-block;
vertical-align: middle;
- border: 0.1em solid #888;
- border-top: 0.1em solid #eee;
+ border: 0.1em solid var(--odm-loading-buffer-color);
+ border-top: 0.1em solid var(--odm-loading-track-color);
border-radius: 50%;
width: 0.5em;
height: 0.5em;
@@ -196,15 +202,9 @@
vertical-align: top;
}
.odm-main div.odm-element,
-.odm-main form.odm-element {
- padding: 0.5em;
-}
-.odm-main div.odm-element,
.odm-main form.odm-element,
.odm-main iframe.odm-element {
margin: 0;
- background: #fff;
- color: #000;
text-align: left;
overflow: auto;
}
@@ -213,8 +213,6 @@
.odm-main div.odm-element.odm-error,
.odm-main div.odm-element.odm-loading {
padding: 45px;
- background: transparent;
- color: #ccc;
font-weight: bold;
font-size: 1.3em;
transition: none;
@@ -229,12 +227,12 @@
}
.odm-main div.odm-element.odm-error:before {
content: "⚠";
- color: #fa2;
+ color: var(--odm-warning-icon-color);
}
.odm-main div.odm-element.odm-loading:before {
content: " ";
- border: 0.1em solid #888;
- border-top: 0.1em solid #eee;
+ border: 0.1em solid var(--odm-loading-buffer-color);
+ border-top: 0.1em solid var(--odm-loading-track-color);
border-radius: 50%;
width: 0.5em;
height: 0.5em;
@@ -275,9 +273,8 @@
right: 0;
top: 50%;
position: absolute;
- border: 1px solid #666;
- color: #ccc;
- background: rgba(0, 0, 0, 0.7);
+ color: var(--odm-main-on-container-color);
+ background: var(--odm-main-container-color);
display: none;
}
.odm-main .odm-previous:hover span,
diff --git a/src/odm.js b/src/odm.js
index 52cf4cf..e809b9f 100644
--- a/src/odm.js
+++ b/src/odm.js
@@ -14,9 +14,6 @@ function OverlayDisplayManager (options) {
'overlaySelectorPlace',
'hideOnEscape',
'margin',
- 'elementPadding',
- 'topBarHeight',
- 'bottomBarHeight',
'zIndex'
];
// params
@@ -26,10 +23,6 @@ function OverlayDisplayManager (options) {
this.overlaySelectorPlace = 'body';
this.hideOnEscape = true;
// size are in em unit
- this.margin = 2;
- this.elementPadding = 1;
- this.topBarHeight = 1.75;
- this.bottomBarHeight = 2;
this.zIndex = null;
// vars
@@ -42,7 +35,6 @@ function OverlayDisplayManager (options) {
this.elementPlace = null;
this.displayed = false;
this.displayedElement = null;
- this.elementPaddingDisplayed = false;
this.topBarDisplayed = false;
this.bottomBarDisplayed = false;
this.displayMode = null;
@@ -283,47 +275,58 @@ OverlayDisplayManager.prototype.setLanguage = function (lang) {
this.widget.querySelector('.odm-next b').innerHTML = this.messages.next;
}
};
-
-OverlayDisplayManager.prototype.onResize = function () {
- let dpEle;
- if (this.displayedElement && this.displayedElement.parentElement == this.elementPlace) {
- dpEle = this.displayedElement;
- }
- let emFactor = 15;
- if (dpEle) {
- try {
- // get number of px of one em
- const fontSize = window.getComputedStyle(dpEle).getPropertyValue('fontSize');
- if (fontSize.indexOf('px') > 0) {
- emFactor = parseFloat(fontSize.replace(/[^0-9.]+/g,''));
- }
- } catch (e) {
- // ignore error and use default value
+OverlayDisplayManager.prototype._getElementPropertyPixelValue = function (element, name) {
+ if (!element) {
+ return 0;
+ }
+ try {
+ // get number of px of one em
+ const styleProperty = window.getComputedStyle(element).getPropertyValue(name);
+ if (styleProperty.indexOf('px') > 0) {
+ return parseFloat(styleProperty.replace(/[^0-9.]+/g,''));
}
+ } catch (e) {
+ // ignore error and use default value
}
- const widthUsed = this.margin;
- let heightUsed = this.margin;
+ return 0;
+};
+OverlayDisplayManager.prototype.onResize = function () {
+ let widthUsed = 0;
+ let heightUsed = 0;
+
+ const odmBlockElement = this.widget.querySelector('.odm-block');
+ const margin = this._getElementPropertyPixelValue(odmBlockElement, 'margin');
+ widthUsed = margin * 2;
+ heightUsed = margin * 2;
+
+ const elementPlace = this.widget.querySelector('.odm-block .odm-element-place');
+ const paddingLeft = this._getElementPropertyPixelValue(elementPlace, 'padding-left');
+ const paddingTop = this._getElementPropertyPixelValue(elementPlace, 'padding-top');
+ widthUsed += paddingLeft * 2;
+ heightUsed += paddingTop * 2;
+
if (this.topBarDisplayed) {
- heightUsed += this.topBarHeight;
+ const topBarElement = this.widget.querySelector('.odm-block .odm-top-bar');
+ heightUsed += topBarElement.offsetHeight;
}
if (this.bottomBarDisplayed) {
- heightUsed += this.bottomBarHeight;
+ const bottomBarElement = this.widget.querySelector('.odm-block .odm-bottom-bar');
+ heightUsed += bottomBarElement.offsetHeight;
}
if (this.overlaySelectorPlace != 'body') {
const placeEle = document.querySelector(this.overlaySelectorPlace);
- this.maxWidth = placeEle.offsetWidth - (widthUsed * emFactor);
- this.maxHeight = placeEle.offsetHeight - (heightUsed * emFactor);
+ this.maxWidth = placeEle.offsetWidth - widthUsed;
+ this.maxHeight = placeEle.offsetHeight - heightUsed;
} else {
- this.maxWidth = window.innerWidth - (widthUsed * emFactor);
- this.maxHeight = window.innerHeight - (heightUsed * emFactor);
+ this.maxWidth = window.innerWidth - widthUsed;
+ this.maxHeight = window.innerHeight - heightUsed;
}
- const padding = this.elementPaddingDisplayed ? this.elementPadding * emFactor : 0;
- if (dpEle) {
+ if (this.displayedElement && this.displayedElement.parentElement == this.elementPlace) {
if (this.maxWidth > 0) {
- dpEle.style.setProperty('max-width', (this.maxWidth - padding) + 'px');
+ this.displayedElement.style.setProperty('max-width', this.maxWidth + 'px');
}
if (this.maxHeight > 0) {
- dpEle.style.setProperty('max-height', (this.maxHeight - padding) + 'px');
+ this.displayedElement.style.setProperty('max-height', this.maxHeight + 'px');
}
}
};
@@ -548,9 +551,7 @@ OverlayDisplayManager.prototype.show = function (params) {
this._refreshElement();
}
if (this.noFixed) {
- if (this.overlaySelectorPlace != 'body') {
- this.widget.querySelector('.odm-table').style.setProperty('margin-top', '10px');
- } else {
+ if (this.overlaySelectorPlace == 'body') {
const scrollY = window.scrollY !== undefined ? window.scrollY : 0;
this.widget.querySelector('.odm-table').style.setProperty('margin-top', (scrollY + 10) + 'px');
}
@@ -568,6 +569,7 @@ OverlayDisplayManager.prototype.show = function (params) {
// if no focusable element is in content, try to focus any button in the top block
obj.focusFirstDescendant(obj.widget.querySelector('.odm-block'));
}
+ window.dispatchEvent(new Event('resize'));
}, 300);
};
OverlayDisplayManager.prototype.hide = function () {
@@ -631,7 +633,7 @@ OverlayDisplayManager.prototype.previous = function () {
};
// Element display
-OverlayDisplayManager.prototype._displayElement = function (element, padding) {
+OverlayDisplayManager.prototype._displayElement = function (element) {
const elementPlace = this.elementPlace;
// hide previous element
if (this.displayedElement && this.displayedElement != element) {
@@ -653,14 +655,13 @@ OverlayDisplayManager.prototype._displayElement = function (element, padding) {
}
}
// show new element
- this.elementPaddingDisplayed = Boolean(padding);
this.displayedElement = element;
if (element && element.parentElement != elementPlace) {
elementPlace.appendChild(element);
}
};
OverlayDisplayManager.prototype._refreshElement = function () {
- this._displayElement(this.displayedElement, this.elementPaddingDisplayed);
+ this._displayElement(this.displayedElement);
};
// Error and loading management
@@ -780,11 +781,11 @@ OverlayDisplayManager.prototype._loadHTML = function (resource, callback) {
}
}
htEle.classList.add('odm-element');
- htEle.style.setProperty('max-width', (this.maxWidth - this.elementPadding) + 'px');
- htEle.style.setProperty('max-height', (this.maxHeight - this.elementPadding) + 'px');
+ htEle.style.setProperty('max-width', this.maxWidth + 'px');
+ htEle.style.setProperty('max-height', this.maxHeight + 'px');
htEle.style.setProperty('opacity', '');
htEle.style.setProperty('position', '');
- this._displayElement(htEle, true);
+ this._displayElement(htEle);
if (callback) {
callback(true);
}
diff --git a/test/index.html b/test/index.html
index 1c36445..92f157a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -120,7 +120,7 @@