diff --git a/dist/tingle.js b/dist/tingle.js index 017c916..c047926 100644 --- a/dist/tingle.js +++ b/dist/tingle.js @@ -31,7 +31,8 @@ footer: false, cssClass: [], closeLabel: 'Close', - closeMethods: ['overlay', 'button', 'escape'] + closeMethods: ['overlay', 'button', 'escape'], + closeIcon: null } // extends config @@ -330,16 +331,20 @@ this.modalCloseBtn.type = 'button' this.modalCloseBtn.classList.add('tingle-modal__close') - this.modalCloseBtnIcon = document.createElement('span') - this.modalCloseBtnIcon.classList.add('tingle-modal__closeIcon') - this.modalCloseBtnIcon.innerHTML = closeIcon() + if (!this.opts.closeIcon) { + this.modalCloseBtnIcon = document.createElement('span') + this.modalCloseBtnIcon.classList.add('tingle-modal__closeIcon') + this.modalCloseBtnIcon.innerHTML = closeIcon() - this.modalCloseBtnLabel = document.createElement('span') - this.modalCloseBtnLabel.classList.add('tingle-modal__closeLabel') - this.modalCloseBtnLabel.innerHTML = this.opts.closeLabel + this.modalCloseBtnLabel = document.createElement('span') + this.modalCloseBtnLabel.classList.add('tingle-modal__closeLabel') + this.modalCloseBtnLabel.innerHTML = this.opts.closeLabel - this.modalCloseBtn.appendChild(this.modalCloseBtnIcon) - this.modalCloseBtn.appendChild(this.modalCloseBtnLabel) + this.modalCloseBtn.appendChild(this.modalCloseBtnIcon) + this.modalCloseBtn.appendChild(this.modalCloseBtnLabel) + } else { + this.modalCloseBtn.innerHTML = this.opts.closeIcon + } } // modal diff --git a/dist/tingle.min.js b/dist/tingle.min.js index 0b13eea..f00631b 100644 --- a/dist/tingle.min.js +++ b/dist/tingle.min.js @@ -1 +1 @@ -!function(t,o){"function"==typeof define&&define.amd?define(o):"object"==typeof exports?module.exports=o():t.tingle=o()}(this,function(){var o=!1;function t(t){this.opts=function(){for(var t=1;t',this.modalCloseBtnLabel=document.createElement("span"),this.modalCloseBtnLabel.classList.add("tingle-modal__closeLabel"),this.modalCloseBtnLabel.innerHTML=this.opts.closeLabel,this.modalCloseBtn.appendChild(this.modalCloseBtnIcon),this.modalCloseBtn.appendChild(this.modalCloseBtnLabel));this.modalBox=document.createElement("div"),this.modalBox.classList.add("tingle-modal-box"),this.modalBoxContent=document.createElement("div"),this.modalBoxContent.classList.add("tingle-modal-box__content"),this.modalBox.appendChild(this.modalBoxContent),-1!==this.opts.closeMethods.indexOf("button")&&this.modal.appendChild(this.modalCloseBtn);this.modal.appendChild(this.modalBox)}.call(this),function(){this._events={clickCloseBtn:this.close.bind(this),clickOverlay:function(t){var o=this.modal.offsetWidth-this.modal.clientWidth,e=t.clientX>=this.modal.offsetWidth-15,s=this.modal.scrollHeight!==this.modal.offsetHeight;if("MacIntel"===navigator.platform&&0==o&&e&&s)return;-1!==this.opts.closeMethods.indexOf("overlay")&&!function(t,o){for(;(t=t.parentElement)&&!t.classList.contains(o););return t}(t.target,"tingle-modal")&&t.clientX',this.modalCloseBtnLabel=document.createElement("span"),this.modalCloseBtnLabel.classList.add("tingle-modal__closeLabel"),this.modalCloseBtnLabel.innerHTML=this.opts.closeLabel,this.modalCloseBtn.appendChild(this.modalCloseBtnIcon),this.modalCloseBtn.appendChild(this.modalCloseBtnLabel)));this.modalBox=document.createElement("div"),this.modalBox.classList.add("tingle-modal-box"),this.modalBoxContent=document.createElement("div"),this.modalBoxContent.classList.add("tingle-modal-box__content"),this.modalBox.appendChild(this.modalBoxContent),-1!==this.opts.closeMethods.indexOf("button")&&this.modal.appendChild(this.modalCloseBtn);this.modal.appendChild(this.modalBox)}.call(this),function(){this._events={clickCloseBtn:this.close.bind(this),clickOverlay:function(t){var o=this.modal.offsetWidth-this.modal.clientWidth,e=t.clientX>=this.modal.offsetWidth-15,s=this.modal.scrollHeight!==this.modal.offsetHeight;if("MacIntel"===navigator.platform&&0==o&&e&&s)return;-1!==this.opts.closeMethods.indexOf("overlay")&&!function(t,o){for(;(t=t.parentElement)&&!t.classList.contains(o););return t}(t.target,"tingle-modal")&&t.clientXGive it a try

Below you will find some examples for using tingle:

+ @@ -184,6 +185,11 @@

Options

string Label which appears on the close button (mobile version) + + closeIcon + string or element + Icon to override the default +

CSS

@@ -359,6 +365,33 @@

Forcing the user to use the close button

}); modalTinyNoFooter.setContent(document.querySelector('.tingle-demo-tiny').innerHTML); + /** + * Modal Tiny no footer with custom close button. + */ + + var modalTinyCustomCloseIcon = new tingle.modal({ + onClose: function () { + console.log('close'); + }, + onOpen: function () { + console.log('open'); + }, + beforeOpen: function () { + console.log('before open'); + }, + beforeClose: function () { + console.log('before close'); + return true; + }, + cssClass: ['class1', 'class2'], + closeIcon: '❌', + }); + var btn = document.querySelector('.js-tingle-modal-1-2'); + btn.addEventListener('click', function () { + modalTinyCustomCloseIcon.open(); + }); + modalTinyCustomCloseIcon.setContent(document.querySelector('.tingle-demo-tiny').innerHTML); + /** * Modal tiny with btn */ diff --git a/doc/tingle/tingle.js b/doc/tingle/tingle.js index 017c916..c047926 100644 --- a/doc/tingle/tingle.js +++ b/doc/tingle/tingle.js @@ -31,7 +31,8 @@ footer: false, cssClass: [], closeLabel: 'Close', - closeMethods: ['overlay', 'button', 'escape'] + closeMethods: ['overlay', 'button', 'escape'], + closeIcon: null } // extends config @@ -330,16 +331,20 @@ this.modalCloseBtn.type = 'button' this.modalCloseBtn.classList.add('tingle-modal__close') - this.modalCloseBtnIcon = document.createElement('span') - this.modalCloseBtnIcon.classList.add('tingle-modal__closeIcon') - this.modalCloseBtnIcon.innerHTML = closeIcon() + if (!this.opts.closeIcon) { + this.modalCloseBtnIcon = document.createElement('span') + this.modalCloseBtnIcon.classList.add('tingle-modal__closeIcon') + this.modalCloseBtnIcon.innerHTML = closeIcon() - this.modalCloseBtnLabel = document.createElement('span') - this.modalCloseBtnLabel.classList.add('tingle-modal__closeLabel') - this.modalCloseBtnLabel.innerHTML = this.opts.closeLabel + this.modalCloseBtnLabel = document.createElement('span') + this.modalCloseBtnLabel.classList.add('tingle-modal__closeLabel') + this.modalCloseBtnLabel.innerHTML = this.opts.closeLabel - this.modalCloseBtn.appendChild(this.modalCloseBtnIcon) - this.modalCloseBtn.appendChild(this.modalCloseBtnLabel) + this.modalCloseBtn.appendChild(this.modalCloseBtnIcon) + this.modalCloseBtn.appendChild(this.modalCloseBtnLabel) + } else { + this.modalCloseBtn.innerHTML = this.opts.closeIcon + } } // modal diff --git a/doc/tingle/tingle.min.js b/doc/tingle/tingle.min.js index 0b13eea..f00631b 100644 --- a/doc/tingle/tingle.min.js +++ b/doc/tingle/tingle.min.js @@ -1 +1 @@ -!function(t,o){"function"==typeof define&&define.amd?define(o):"object"==typeof exports?module.exports=o():t.tingle=o()}(this,function(){var o=!1;function t(t){this.opts=function(){for(var t=1;t',this.modalCloseBtnLabel=document.createElement("span"),this.modalCloseBtnLabel.classList.add("tingle-modal__closeLabel"),this.modalCloseBtnLabel.innerHTML=this.opts.closeLabel,this.modalCloseBtn.appendChild(this.modalCloseBtnIcon),this.modalCloseBtn.appendChild(this.modalCloseBtnLabel));this.modalBox=document.createElement("div"),this.modalBox.classList.add("tingle-modal-box"),this.modalBoxContent=document.createElement("div"),this.modalBoxContent.classList.add("tingle-modal-box__content"),this.modalBox.appendChild(this.modalBoxContent),-1!==this.opts.closeMethods.indexOf("button")&&this.modal.appendChild(this.modalCloseBtn);this.modal.appendChild(this.modalBox)}.call(this),function(){this._events={clickCloseBtn:this.close.bind(this),clickOverlay:function(t){var o=this.modal.offsetWidth-this.modal.clientWidth,e=t.clientX>=this.modal.offsetWidth-15,s=this.modal.scrollHeight!==this.modal.offsetHeight;if("MacIntel"===navigator.platform&&0==o&&e&&s)return;-1!==this.opts.closeMethods.indexOf("overlay")&&!function(t,o){for(;(t=t.parentElement)&&!t.classList.contains(o););return t}(t.target,"tingle-modal")&&t.clientX',this.modalCloseBtnLabel=document.createElement("span"),this.modalCloseBtnLabel.classList.add("tingle-modal__closeLabel"),this.modalCloseBtnLabel.innerHTML=this.opts.closeLabel,this.modalCloseBtn.appendChild(this.modalCloseBtnIcon),this.modalCloseBtn.appendChild(this.modalCloseBtnLabel)));this.modalBox=document.createElement("div"),this.modalBox.classList.add("tingle-modal-box"),this.modalBoxContent=document.createElement("div"),this.modalBoxContent.classList.add("tingle-modal-box__content"),this.modalBox.appendChild(this.modalBoxContent),-1!==this.opts.closeMethods.indexOf("button")&&this.modal.appendChild(this.modalCloseBtn);this.modal.appendChild(this.modalBox)}.call(this),function(){this._events={clickCloseBtn:this.close.bind(this),clickOverlay:function(t){var o=this.modal.offsetWidth-this.modal.clientWidth,e=t.clientX>=this.modal.offsetWidth-15,s=this.modal.scrollHeight!==this.modal.offsetHeight;if("MacIntel"===navigator.platform&&0==o&&e&&s)return;-1!==this.opts.closeMethods.indexOf("overlay")&&!function(t,o){for(;(t=t.parentElement)&&!t.classList.contains(o););return t}(t.target,"tingle-modal")&&t.clientX