diff --git a/duDialog.css b/duDialog.css index 00055f5..09e8105 100644 --- a/duDialog.css +++ b/duDialog.css @@ -131,10 +131,9 @@ .du-dialog .dlg-select-item .dlg-select-lbl { position: relative; display: inline-block; - padding-left: 32px; + padding-left: 40px; margin: 0; cursor: pointer; - text-indent: 8px; } .du-dialog .dlg-select-item .dlg-select-lbl .select-item { diff --git a/duDialog.js b/duDialog.js index df665b6..eee5ee1 100644 --- a/duDialog.js +++ b/duDialog.js @@ -22,6 +22,7 @@ var supports = !!document.querySelector && !!root.addEventListener, // feature test defaults = { + id: null, // id attribute of the dialog container init: false, // determines if initialize only (dialog will not be shown immediately after initialization) okText: 'Ok', // display text for the 'OK' button cancelText: 'Cancel', // display text for the 'Cancel' button @@ -32,6 +33,45 @@ valueField: 'value', // variable name for the select item value; use this for custom object structure (for selection dialog) textField: 'item', // variable name for the select item display text; use this for custom object structure (for selection dialog) callbacks: null // callback functions: okClick, cancelClick, itemSelect (for selection dialog), onSearch (for selection dialog), itemRender (for selection dialog) + }, + /* + * Vanilla JavaScript version of jQuery.extend() + * src: https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ + */ + extendObj = function () { + // Variables + var extended = {}; + var deep = false; + var i = 0; + var length = arguments.length; + + // Check if a deep merge + if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') { + deep = arguments[0]; + i++; + } + + // Merge the object into the extended object + var merge = function (obj) { + for (var prop in obj) { + if (Object.prototype.hasOwnProperty.call(obj, prop)) { + // If deep merge and property is an object, merge properties + if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') { + extended[prop] = extendObj(true, extended[prop], obj[prop]); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + + // Loop through each object and conduct a merge + for (; i < length; i++) { + var obj = arguments[i]; + merge(obj); + } + + return extended; }, duDialog = function () { if (!(this instanceof duDialog)) @@ -61,13 +101,22 @@ return _; }, setAttributes = function(el, attrs) { /* src: http://jsfiddle.net/andr3ww/pvuzgfg6/13/ */ - var recursiveSet = function(at, set) { - for (var prop in at) { - var a = at[prop]; - if ((typeof a === 'object' && a !== null) && a.dataset === undefined && a[0] === undefined) { recursiveSet(a, set[prop]); } - else { set[prop] = a; } - } - } + var recursiveSet = function (at, set) { + for (var prop in at) { + var a = at[prop]; + if ((typeof a === 'object' && a !== null) && a.dataset === undefined && a[0] === undefined) { recursiveSet(a, set[prop]); } + else { + if (prop in set) + if (a !== null) set[prop] = a; + else { + if (a !== null) + set.setAttribute(prop, a); + else + set.removeAttribute(prop); + } + } + } + } recursiveSet(attrs, el); }, removeSpace = function (str) { return str.replace(/\s+/g,''); @@ -76,22 +125,44 @@ if (arr[0] === undefined) return false; return arr.filter(function (x) { return x === item }).length > 0 - }, buildUI = function() { + }, addEventToElem = function (elem, event, handler) { + if (Array.isArray(elem)) { + elem.forEach(function (el) { + el.addEventListener(event, handler, false); + }); + } else { + elem.addEventListener(event, handler, false); + } + }, addEventsToElem = function (el, events, handler) { + events.forEach(function (evt) { + el.addEventListener(evt, handler, false); + }); + }, appendTo = function (elem, to) { + if (Array.isArray(elem)) { + elem.forEach(function (el) { + to.appendChild(el); + }); + } else { + to.appendChild(elem); + } + }, buildUI = function() { if (!supports) return; var _ = this, _callbacks = _.config.callbacks, wrapper, header, content, footer, // createElement helper - createElem = function(tag, className, content, isHtml) { - var el = document.createElement(tag); + createElem = function (tag, attributes, content, isHtml) { + // createElement helper + var el = document.createElement(tag); - el.className = className; - - if (typeof content !== 'undefined') - el[isHtml || false ? 'innerHTML' : 'innerText'] = content; + if (typeof content !== 'undefined') + el[isHtml || false ? 'innerHTML' : 'innerText'] = content; - return el; - }, + if (typeof attributes !== 'undefined') + setAttributes(el, attributes); + + return el; + }, // global event handler evtHandler = function (e) { if (e.type === 'click') { @@ -178,84 +249,75 @@ }; _.docFrag = document.createDocumentFragment(); - _.dialog = createElem('div', 'du-dialog'); - _.docFrag.appendChild(_.dialog); - wrapper = createElem('div', 'dlg-wrapper'); - wrapper.tabIndex = 0; - _.dialog.appendChild(wrapper); + _.dialog = createElem('div', { className: 'du-dialog', id: _.config.id }); + + appendTo(_.dialog, _.docFrag); + + wrapper = createElem('div', { className: 'dlg-wrapper', tabIndex: 0 }); + + appendTo(wrapper, _.dialog); if (_.title) { - header = createElem('div', 'dlg-header', _.title); - wrapper.appendChild(header); + header = createElem('div', { className: 'dlg-header' }, _.title); + + appendTo(header, wrapper); } else { _.dialog.classList.add('dlg--no-title'); } - content = createElem('div', 'dlg-content'); + content = createElem('div', { className: 'dlg-content' }); if (_.config.selection) { if (_.config.allowSearch) { - var searchEl = createElem('input', 'dlg-search'); - searchEl.placeholder = 'Search...'; - header.appendChild(searchEl); + appendTo(createElem('input', { className: 'dlg-search', placeholder: 'Search...' }), header); } for (var idx = 0; idx < _.message.length; idx++) { var item = _.message[idx], iType = typeof item, iVal = iType === 'string' ? item : item[_.config.valueField], iText = iType === 'string' ? item : item[_.config.textField], - sItem = createElem('div', 'dlg-select-item'), - sRadio = createElem('input', _.config.multiple ? 'dlg-select-checkbox' : 'dlg-select-radio'), - sLabel = createElem('label', 'dlg-select-lbl', (_callbacks && _callbacks.itemRender ? _callbacks.itemRender.call(_, item) : '' + iText + ''), true), - itemId = (_.config.multiple ? 'dlg-cb' : 'dlg-radio') + removeSpace(iVal.toString()); - - setAttributes(sRadio, { - id: itemId, - name: 'dlg-selection', - type: _.config.multiple ? 'checkbox' : 'radio', - value: iVal, - checked: _.config.multiple ? (_.config.selectedValue && inArray(_.config.selectedValue, iVal)) : _.config.selectedValue === iVal - }); + itemId = (_.config.multiple ? 'dlg-cb' : 'dlg-radio') + removeSpace(iVal.toString()), + sItem = createElem('div', { className: 'dlg-select-item' }), + sRadio = createElem('input', { + className: _.config.multiple ? 'dlg-select-checkbox' : 'dlg-select-radio', + id: itemId, + name: 'dlg-selection', + type: _.config.multiple ? 'checkbox' : 'radio', + value: iVal, + checked: _.config.multiple ? (_.config.selectedValue && inArray(_.config.selectedValue, iVal)) : _.config.selectedValue === iVal + }), + sLabel = createElem('label', { + className: 'dlg-select-lbl', htmlFor: itemId + }, (_callbacks && _callbacks.itemRender ? _callbacks.itemRender.call(_, item) : '' + iText + ''), true); _.cache[itemId] = item; - sLabel.htmlFor = itemId; - sItem.appendChild(sRadio); - sItem.appendChild(sLabel); - content.appendChild(sItem); + appendTo([sRadio, sLabel], sItem); + appendTo(sItem, content); } } else content.innerHTML = _.message; - wrapper.appendChild(content); + appendTo(content, wrapper); if (_.type !== duDialog.NO_ACTION) { - footer = createElem('div', 'dlg-actions'); - wrapper.appendChild(footer); + footer = createElem('div', { className: 'dlg-actions' }); + appendTo(footer, wrapper); } /* Setup action buttons */ switch(_.type) { case duDialog.OK_CANCEL: - var btnCancel = createElem('button', 'dlg-action cancel-action', _.config.cancelText), - btnOk = createElem('button', 'dlg-action ok-action', _.config.okText); - - btnCancel.tabIndex = 2; - btnOk.tabIndex = 1; - footer.appendChild(btnCancel); - footer.appendChild(btnOk); + appendTo([createElem('button', { className: 'dlg-action cancel-action', tabIndex: 2 }, _.config.cancelText), + createElem('button', { className: 'dlg-action ok-action', tabIndex: 1 }, _.config.okText) + ], footer); break; case duDialog.DEFAULT: - var btnOk = createElem('button', 'dlg-action ok-action', _.config.okText); - - btnOk.tabIndex = 1; - footer.appendChild(btnOk); + appendTo(createElem('button', { className: 'dlg-action ok-action', tabIndex: 1 }, _.config.okText), footer); break; } /* Register event handler */ - content.addEventListener('scroll', evtHandler, false); - _.dialog.addEventListener('click', evtHandler, false); - _.dialog.addEventListener('change', evtHandler, false); - _.dialog.addEventListener('keyup', evtHandler, false); + addEventToElem(content, 'scroll', evtHandler); + addEventsToElem(_.dialog, ['click', 'change', 'keyup'], evtHandler); if (!_.config.init) _.show(); }; @@ -272,7 +334,7 @@ if (_.config.init) buildUI.apply(this); - document.body.appendChild(_.docFrag); + appendTo(_.docFrag, document.body); setTimeout(function () { _.dialog.classList.add('dlg--open'); @@ -312,45 +374,5 @@ }, 200); } - /* - * Vanilla JavaScript version of jQuery.extend() - * src: https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ - */ - function extendObj() { - // Variables - var extended = {}; - var deep = false; - var i = 0; - var length = arguments.length; - - // Check if a deep merge - if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { - deep = arguments[0]; - i++; - } - - // Merge the object into the extended object - var merge = function (obj) { - for ( var prop in obj ) { - if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { - // If deep merge and property is an object, merge properties - if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { - extended[prop] = extend( true, extended[prop], obj[prop] ); - } else { - extended[prop] = obj[prop]; - } - } - } - }; - - // Loop through each object and conduct a merge - for ( ; i < length; i++ ) { - var obj = arguments[i]; - merge(obj); - } - - return extended; - } - return duDialog; }); \ No newline at end of file diff --git a/duDialog.min.css b/duDialog.min.css index f6ca94e..118c19d 100644 --- a/duDialog.min.css +++ b/duDialog.min.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);.du-dialog{font-family:Roboto,sans-serif;position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;visibility:hidden;opacity:0;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;-moz-transition:background-color .2s linear,opacity .2s ease;transition:background-color .2s linear,opacity .2s ease;will-change:background-color,visibility,opacity;overflow-x:hidden;overflow-y:auto;z-index:999999}.du-dialog.dlg--open{background-color:rgba(0,0,0,.35);visibility:visible;opacity:1}.du-dialog.dlg--closing{opacity:0;background-color:transparent}.du-dialog.dlg--pulse{-webkit-animation:dlgPulse .2s;animation:dlgPulse .2s}.du-dialog .dlg-wrapper{position:absolute;min-width:280px;max-width:90%;max-height:90%;display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:column;justify-content:space-around;background-color:#fff;outline:0;-moz-border-radius:4px;border-radius:4px;-moz-transform:scale(.8);transform:scale(.8);-moz-transition:-moz-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);-moz-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.du-dialog.dlg--open .dlg-wrapper{-moz-transform:scale(1);transform:scale(1)}.du-dialog .dlg-header{padding:16px 24px 8px;font-size:20px;font-weight:500;letter-spacing:.02em;line-height:32px}.du-dialog .dlg-header .dlg-search{display:block;font-family:inherit;font-size:16px;font-weight:400;line-height:36px;margin-top:8px;width:100%;border:none;outline:0}.du-dialog .dlg-content{padding:0 24px 20px;color:#757575;font-size:16px;line-height:24px;letter-spacing:.03em;overflow-x:hidden;overflow-y:auto}.du-dialog.dlg--no-title .dlg-content{margin-top:20px}.du-dialog .dlg-content.content--scrolled{border-top:1px solid #e0e0e0}.du-dialog .dlg-select-item{position:relative;margin:0 -24px;padding:0 24px;cursor:pointer;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.du-dialog .dlg-select-item:hover{background-color:#f5f5f5}.du-dialog .dlg-select-item:active{background-color:#e0e0e0}.du-dialog .dlg-select-item.item--nomatch{display:none}.du-dialog .dlg-select-item .dlg-select-checkbox,.du-dialog .dlg-select-item .dlg-select-radio{position:absolute;top:12px;height:18px;width:18px;opacity:0}.du-dialog .dlg-select-item .dlg-select-lbl{position:relative;display:inline-block;padding-left:32px;margin:0;cursor:pointer;text-indent:8px}.du-dialog .dlg-select-item .dlg-select-lbl .select-item{display:block;line-height:48px}.du-dialog .dlg-select-item .dlg-select-checkbox+.dlg-select-lbl:before{content:'';display:block;position:absolute;width:16px;height:16px;top:50%;left:6px;cursor:pointer;border:2px solid #757575;-moz-transform:translateY(-50%);transform:translateY(-50%);-moz-border-radius:2px;border-radius:2px;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transition:all .2s cubic-bezier(0,0,.2,1);transition:all .2s cubic-bezier(0,0,.2,1);will-change:border-color}.du-dialog .dlg-select-item .dlg-select-checkbox:checked+.dlg-select-lbl:before{background-color:#1e88e5;border-color:#1e88e5}.du-dialog .dlg-select-item .dlg-select-checkbox+.dlg-select-lbl:after{content:'';display:block;position:absolute;top:50%;left:9px;width:12px;height:6px;margin-top:-6px;cursor:pointer;border-left:2px solid #FFF;border-bottom:2px solid #FFF;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transition:all .2s cubic-bezier(0,0,.2,1);transition:all .2s cubic-bezier(0,0,.2,1);-moz-transform:rotate(-45deg) scale(0);transform:rotate(-45deg) scale(0);will-change:transform}.du-dialog .dlg-select-item .dlg-select-checkbox:checked+.dlg-select-lbl:after{-moz-transform:rotate(-45deg) scale(1);transform:rotate(-45deg) scale(1)}.du-dialog .dlg-select-item .dlg-select-radio+.dlg-select-lbl:before{content:"";display:block;position:absolute;height:16px;width:16px;top:50%;left:6px;cursor:pointer;border:2px solid #757575;-moz-transform:translateY(-50%);transform:translateY(-50%);-moz-border-radius:50%;border-radius:50%;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transition:all .2s cubic-bezier(0,0,.2,1);transition:all .2s cubic-bezier(0,0,.2,1);will-change:border-color}.du-dialog .dlg-select-item .dlg-select-radio:checked+.dlg-select-lbl:before{border-color:#1e88e5}.du-dialog .dlg-select-item .dlg-select-radio+.dlg-select-lbl:after{content:'';position:absolute;top:50%;left:11px;width:10px;height:10px;margin-top:-5px;cursor:pointer;background-color:#1e88e5;-moz-border-radius:50%;border-radius:50%;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transform:scale(0);transform:scale(0);-moz-transform-origin:center;transform-origin:center;-moz-transition:-moz-transform .28s cubic-bezier(.4,0,.2,1);transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform,background-color}.du-dialog .dlg-select-item .dlg-select-radio:checked+.dlg-select-lbl:after{-moz-transform:scale(1);transform:scale(1)}.du-dialog .dlg-actions{padding:8px;text-align:right}.du-dialog .dlg-action{font-family:inherit;font-size:14px;border:none;cursor:pointer;padding:0 12px;min-width:72px;line-height:36px;letter-spacing:.07em;font-weight:500;color:#3f51b5;text-transform:uppercase;background-color:transparent;border-radius:4px;outline:0;-moz-transition:background-color .28s linear;transition:background-color .28s linear;will-change:background-color}.du-dialog .dlg-action:focus,.du-dialog .dlg-action:hover{background-color:#f5f5f5}.du-dialog .dlg-action:active{background-color:#e0e0e0}.du-dialog .dlg-action+.dlg-action{margin-left:8px}@media (min-width:600px){.du-dialog .dlg-wrapper{max-width:560px}}@-webkit-keyframes dlgPulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes dlgPulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}} \ No newline at end of file +@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);.du-dialog{font-family:Roboto,sans-serif;position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;align-items:center;visibility:hidden;opacity:0;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;-moz-transition:background-color .2s linear,opacity .2s ease;transition:background-color .2s linear,opacity .2s ease;will-change:background-color,visibility,opacity;overflow-x:hidden;overflow-y:auto;z-index:999999}.du-dialog.dlg--open{background-color:rgba(0,0,0,.35);visibility:visible;opacity:1}.du-dialog.dlg--closing{opacity:0;background-color:transparent}.du-dialog.dlg--pulse{-webkit-animation:dlgPulse .2s;animation:dlgPulse .2s}.du-dialog .dlg-wrapper{position:absolute;min-width:280px;max-width:90%;max-height:90%;display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:column;justify-content:space-around;background-color:#fff;outline:0;-moz-border-radius:4px;border-radius:4px;-moz-transform:scale(.8);transform:scale(.8);-moz-transition:-moz-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);-moz-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.du-dialog.dlg--open .dlg-wrapper{-moz-transform:scale(1);transform:scale(1)}.du-dialog .dlg-header{padding:16px 24px 8px;font-size:20px;font-weight:500;letter-spacing:.02em;line-height:32px}.du-dialog .dlg-header .dlg-search{display:block;font-family:inherit;font-size:16px;font-weight:400;line-height:36px;margin-top:8px;width:100%;border:none;outline:0}.du-dialog .dlg-content{padding:0 24px 20px;color:#757575;font-size:16px;line-height:24px;letter-spacing:.03em;overflow-x:hidden;overflow-y:auto}.du-dialog.dlg--no-title .dlg-content{margin-top:20px}.du-dialog .dlg-content.content--scrolled{border-top:1px solid #e0e0e0}.du-dialog .dlg-select-item{position:relative;margin:0 -24px;padding:0 24px;cursor:pointer;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.du-dialog .dlg-select-item:hover{background-color:#f5f5f5}.du-dialog .dlg-select-item:active{background-color:#e0e0e0}.du-dialog .dlg-select-item.item--nomatch{display:none}.du-dialog .dlg-select-item .dlg-select-checkbox,.du-dialog .dlg-select-item .dlg-select-radio{position:absolute;top:12px;height:18px;width:18px;opacity:0}.du-dialog .dlg-select-item .dlg-select-lbl{position:relative;display:inline-block;padding-left:40px;margin:0;cursor:pointer}.du-dialog .dlg-select-item .dlg-select-lbl .select-item{display:block;line-height:48px}.du-dialog .dlg-select-item .dlg-select-checkbox+.dlg-select-lbl:before{content:'';display:block;position:absolute;width:16px;height:16px;top:50%;left:6px;cursor:pointer;border:2px solid #757575;-moz-transform:translateY(-50%);transform:translateY(-50%);-moz-border-radius:2px;border-radius:2px;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transition:all .2s cubic-bezier(0,0,.2,1);transition:all .2s cubic-bezier(0,0,.2,1);will-change:border-color}.du-dialog .dlg-select-item .dlg-select-checkbox:checked+.dlg-select-lbl:before{background-color:#1e88e5;border-color:#1e88e5}.du-dialog .dlg-select-item .dlg-select-checkbox+.dlg-select-lbl:after{content:'';display:block;position:absolute;top:50%;left:9px;width:12px;height:6px;margin-top:-6px;cursor:pointer;border-left:2px solid #FFF;border-bottom:2px solid #FFF;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transition:all .2s cubic-bezier(0,0,.2,1);transition:all .2s cubic-bezier(0,0,.2,1);-moz-transform:rotate(-45deg) scale(0);transform:rotate(-45deg) scale(0);will-change:transform}.du-dialog .dlg-select-item .dlg-select-checkbox:checked+.dlg-select-lbl:after{-moz-transform:rotate(-45deg) scale(1);transform:rotate(-45deg) scale(1)}.du-dialog .dlg-select-item .dlg-select-radio+.dlg-select-lbl:before{content:"";display:block;position:absolute;height:16px;width:16px;top:50%;left:6px;cursor:pointer;border:2px solid #757575;-moz-transform:translateY(-50%);transform:translateY(-50%);-moz-border-radius:50%;border-radius:50%;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transition:all .2s cubic-bezier(0,0,.2,1);transition:all .2s cubic-bezier(0,0,.2,1);will-change:border-color}.du-dialog .dlg-select-item .dlg-select-radio:checked+.dlg-select-lbl:before{border-color:#1e88e5}.du-dialog .dlg-select-item .dlg-select-radio+.dlg-select-lbl:after{content:'';position:absolute;top:50%;left:11px;width:10px;height:10px;margin-top:-5px;cursor:pointer;background-color:#1e88e5;-moz-border-radius:50%;border-radius:50%;-moz-box-sizing:content-box;box-sizing:content-box;-moz-transform:scale(0);transform:scale(0);-moz-transform-origin:center;transform-origin:center;-moz-transition:-moz-transform .28s cubic-bezier(.4,0,.2,1);transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform,background-color}.du-dialog .dlg-select-item .dlg-select-radio:checked+.dlg-select-lbl:after{-moz-transform:scale(1);transform:scale(1)}.du-dialog .dlg-actions{padding:8px;text-align:right}.du-dialog .dlg-action{font-family:inherit;font-size:14px;border:none;cursor:pointer;padding:0 12px;min-width:72px;line-height:36px;letter-spacing:.07em;font-weight:500;color:#3f51b5;text-transform:uppercase;background-color:transparent;border-radius:4px;outline:0;-moz-transition:background-color .28s linear;transition:background-color .28s linear;will-change:background-color}.du-dialog .dlg-action:focus,.du-dialog .dlg-action:hover{background-color:#f5f5f5}.du-dialog .dlg-action:active{background-color:#e0e0e0}.du-dialog .dlg-action+.dlg-action{margin-left:8px}@media (min-width:600px){.du-dialog .dlg-wrapper{max-width:560px}}@-webkit-keyframes dlgPulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}}@keyframes dlgPulse{from,to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}} \ No newline at end of file diff --git a/duDialog.min.js b/duDialog.min.js index 34e2808..7ebdd8e 100644 --- a/duDialog.min.js +++ b/duDialog.min.js @@ -5,4 +5,4 @@ * Author: Dionlee Uy * Email: dionleeuy@gmail.com */ -!function(e,t){"function"==typeof define&&define.amd?define("duDialog",[],t(e)):"object"==typeof exports?module.exports=t(e):e.duDialog=t(e)}("undefined"!=typeof global?global:this.window||this.global,function(e){"use strict";function t(){var e={},t=!1,l=0,i=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],l++);for(var c=function(l){for(var i in l)Object.prototype.hasOwnProperty.call(l,i)&&(t&&"[object Object]"===Object.prototype.toString.call(l[i])?e[i]=extend(!0,e[i],l[i]):e[i]=l[i])};i>l;l++){var o=arguments[l];c(o)}return e}var l=!!document.querySelector&&!!e.addEventListener,i={init:!1,okText:"Ok",cancelText:"Cancel",selection:!1,multiple:!1,allowSearch:!1,selectedValue:null,valueField:"value",textField:"item",callbacks:null},c=function(){if(!(this instanceof c))return c.apply(Object.create(c.prototype),arguments);var e=this,l=arguments,o=typeof l[0],a=typeof l[1],n=typeof l[2];e.config=t(i,"object"===n?l[2]:l[3]);var r=e.config.selection?e.config.multiple?c.OK_CANCEL:c.NO_ACTION:c.DEFAULT;if(e.type="object"===n?r:l[2]||r,"undefined"===o||"string"!==o&&null!==l[0])throw new Error("Dialog title is missing or incorrect format.");if(("undefined"===a||"string"!==a)&&!e.config.selection||!Array.isArray(l[1])&&e.config.selection)throw new Error("Dialog message is missing or incorrect format.");return e.title=l[0],e.message=l[1],e.cache={},e.config.init||d.apply(e),e},o=function(e,t){var l=function(e,t){for(var i in e){var c=e[i];"object"==typeof c&&null!==c&&void 0===c.dataset&&void 0===c[0]?l(c,t[i]):t[i]=c}};l(t,e)},a=function(e){return e.replace(/\s+/g,"")},n=function(e,t){return e?void 0===e[0]?!1:e.filter(function(e){return e===t}).length>0:!1},d=function(){if(l){var e,t,i,d,r=this,s=r.config.callbacks,g=function(e,t,l,i){var c=document.createElement(e);return c.className=t,"undefined"!=typeof l&&(c[i?"innerHTML":"innerText"]=l),c},p=function(e){if("click"===e.type&&(e.target.matches(".du-dialog")&&(r.type===c.NO_ACTION?r.hide():(r.dialog.classList.add("dlg--pulse"),setTimeout(function(){r.dialog.classList.remove("dlg--pulse")},200))),e.target.matches(".dlg-select-item")&&e.target.querySelector(".dlg-select-lbl").click(),e.target.matches(".dlg-action"))){if(e.target.matches(".ok-action"))if(r.config.selection&&r.config.multiple){for(var t=i.querySelectorAll(":scope .dlg-select-checkbox:checked"),l=[],o=[],a=0;a5?"add":"remove"]("content--scrolled"),"keyup"===e.type&&e.target.matches(".dlg-search"))for(var g=e.target.value,p=i.querySelectorAll(":scope .dlg-select-item"),a=0;a=0,f.classList[v?"remove":"add"]("item--nomatch")}};if(r.docFrag=document.createDocumentFragment(),r.dialog=g("div","du-dialog"),r.docFrag.appendChild(r.dialog),e=g("div","dlg-wrapper"),e.tabIndex=0,r.dialog.appendChild(e),r.title?(t=g("div","dlg-header",r.title),e.appendChild(t)):r.dialog.classList.add("dlg--no-title"),i=g("div","dlg-content"),r.config.selection){if(r.config.allowSearch){var f=g("input","dlg-search");f.placeholder="Search...",t.appendChild(f)}for(var u=0;u'+y+"",!0),x=(r.config.multiple?"dlg-cb":"dlg-radio")+a(v.toString());o(C,{id:x,name:"dlg-selection",type:r.config.multiple?"checkbox":"radio",value:v,checked:r.config.multiple?r.config.selectedValue&&n(r.config.selectedValue,v):r.config.selectedValue===v}),r.cache[x]=h,k.htmlFor=x,b.appendChild(C),b.appendChild(k),i.appendChild(b)}}else i.innerHTML=r.message;switch(e.appendChild(i),r.type!==c.NO_ACTION&&(d=g("div","dlg-actions"),e.appendChild(d)),r.type){case c.OK_CANCEL:var L=g("button","dlg-action cancel-action",r.config.cancelText),O=g("button","dlg-action ok-action",r.config.okText);L.tabIndex=2,O.tabIndex=1,d.appendChild(L),d.appendChild(O);break;case c.DEFAULT:var O=g("button","dlg-action ok-action",r.config.okText);O.tabIndex=1,d.appendChild(O)}i.addEventListener("scroll",p,!1),r.dialog.addEventListener("click",p,!1),r.dialog.addEventListener("change",p,!1),r.dialog.addEventListener("keyup",p,!1),r.config.init||r.show()}};return Object.defineProperties(c,{DEFAULT:{value:1},OK_CANCEL:{value:2},NO_ACTION:{value:3}}),c.prototype.show=function(){var e=this;e.config.init&&d.apply(this),document.body.appendChild(e.docFrag),setTimeout(function(){if(e.dialog.classList.add("dlg--open"),e.config.selection&&!e.config.multiple){var t=e.dialog.querySelector(":scope .dlg-content"),l=t.querySelector(":scope .dlg-select-radio:checked");if(l){for(var i=Array.prototype.slice.call(t.childNodes),c=0,o=0;ol;l++){var a=arguments[l];o(a)}return e},i=function(){if(!(this instanceof i))return i.apply(Object.create(i.prototype),arguments);var e=this,t=arguments,o=typeof t[0],a=typeof t[1],n=typeof t[2];e.config=c(l,"object"===n?t[2]:t[3]);var r=e.config.selection?e.config.multiple?i.OK_CANCEL:i.NO_ACTION:i.DEFAULT;if(e.type="object"===n?r:t[2]||r,"undefined"===o||"string"!==o&&null!==t[0])throw new Error("Dialog title is missing or incorrect format.");if(("undefined"===a||"string"!==a)&&!e.config.selection||!Array.isArray(t[1])&&e.config.selection)throw new Error("Dialog message is missing or incorrect format.");return e.title=t[0],e.message=t[1],e.cache={},e.config.init||g.apply(e),e},o=function(e,t){var l=function(e,t){for(var c in e){var i=e[c];"object"==typeof i&&null!==i&&void 0===i.dataset&&void 0===i[0]?l(i,t[c]):c in t&&(null!==i?t[c]=i:null!==i?t.setAttribute(c,i):t.removeAttribute(c))}};l(t,e)},a=function(e){return e.replace(/\s+/g,"")},n=function(e,t){return e?void 0===e[0]?!1:e.filter(function(e){return e===t}).length>0:!1},r=function(e,t,l){Array.isArray(e)?e.forEach(function(e){e.addEventListener(t,l,!1)}):e.addEventListener(t,l,!1)},s=function(e,t,l){t.forEach(function(t){e.addEventListener(t,l,!1)})},d=function(e,t){Array.isArray(e)?e.forEach(function(e){t.appendChild(e)}):t.appendChild(e)},g=function(){if(t){var e,l,c,g,f=this,u=f.config.callbacks,p=function(e,t,l,c){var i=document.createElement(e);return"undefined"!=typeof l&&(i[c?"innerHTML":"innerText"]=l),"undefined"!=typeof t&&o(i,t),i},m=function(e){if("click"===e.type&&(e.target.matches(".du-dialog")&&(f.type===i.NO_ACTION?f.hide():(f.dialog.classList.add("dlg--pulse"),setTimeout(function(){f.dialog.classList.remove("dlg--pulse")},200))),e.target.matches(".dlg-select-item")&&e.target.querySelector(".dlg-select-lbl").click(),e.target.matches(".dlg-action"))){if(e.target.matches(".ok-action"))if(f.config.selection&&f.config.multiple){for(var t=c.querySelectorAll(":scope .dlg-select-checkbox:checked"),l=[],o=[],a=0;a5?"add":"remove"]("content--scrolled"),"keyup"===e.type&&e.target.matches(".dlg-search"))for(var s=e.target.value,d=c.querySelectorAll(":scope .dlg-select-item"),a=0;a=0,g.classList[v?"remove":"add"]("item--nomatch")}};if(f.docFrag=document.createDocumentFragment(),f.dialog=p("div",{className:"du-dialog",id:f.config.id}),d(f.dialog,f.docFrag),e=p("div",{className:"dlg-wrapper",tabIndex:0}),d(e,f.dialog),f.title?(l=p("div",{className:"dlg-header"},f.title),d(l,e)):f.dialog.classList.add("dlg--no-title"),c=p("div",{className:"dlg-content"}),f.config.selection){f.config.allowSearch&&d(p("input",{className:"dlg-search",placeholder:"Search..."}),l);for(var h=0;h'+k+"",!0);f.cache[N]=v,d([x,A],C),d(C,c)}}else c.innerHTML=f.message;switch(d(c,e),f.type!==i.NO_ACTION&&(g=p("div",{className:"dlg-actions"}),d(g,e)),f.type){case i.OK_CANCEL:d([p("button",{className:"dlg-action cancel-action",tabIndex:2},f.config.cancelText),p("button",{className:"dlg-action ok-action",tabIndex:1},f.config.okText)],g);break;case i.DEFAULT:d(p("button",{className:"dlg-action ok-action",tabIndex:1},f.config.okText),g)}r(c,"scroll",m),s(f.dialog,["click","change","keyup"],m),f.config.init||f.show()}};return Object.defineProperties(i,{DEFAULT:{value:1},OK_CANCEL:{value:2},NO_ACTION:{value:3}}),i.prototype.show=function(){var e=this;e.config.init&&g.apply(this),d(e.docFrag,document.body),setTimeout(function(){if(e.dialog.classList.add("dlg--open"),e.config.selection&&!e.config.multiple){var t=e.dialog.querySelector(":scope .dlg-content"),l=t.querySelector(":scope .dlg-select-radio:checked");if(l){for(var c=Array.prototype.slice.call(t.childNodes),i=0,o=0;o