From 9d3d2025fe926cead52077fd115f57cbb0b5ea9b Mon Sep 17 00:00:00 2001 From: Jared Reich Date: Sat, 4 Mar 2017 23:15:16 -0700 Subject: [PATCH] Implement customizable positions (top/bottom) for every component. --- README.md | 24 ++++++++--- dist/notie.js | 107 +++++++++++++++++++++++++++------------------- dist/notie.min.js | 2 +- package.json | 2 +- src/notie.js | 95 ++++++++++++++++++++++++---------------- 5 files changed, 142 insertions(+), 88 deletions(-) diff --git a/README.md b/README.md index ab05c6d..8188f8d 100644 --- a/README.md +++ b/README.md @@ -79,13 +79,15 @@ notie.alert({ type: Number|String, // optional, default = 4, enum: [1, 2, 3, 4, 5, 'success', 'warning', 'error', 'info', 'neutral'] text: String, stay: Boolean, // optional, default = false - time: Number // optional, default = 3, minimum = 1 + time: Number, // optional, default = 3, minimum = 1, + position: String // optional, default = 'top', enum: ['top', 'bottom'] }) notie.force({ type: Number|String, // optional, default = 5, enum: [1, 2, 3, 4, 5, 'success', 'warning', 'error', 'info', 'neutral'] text: String, buttonText: String, // optional, default = 'OK' + position: String, // optional, default = 'top', enum: ['top', 'bottom'] callback: Function // optional }, callbackOptional()) @@ -93,6 +95,7 @@ notie.confirm({ text: String, submitText: String, // optional, default = 'Yes' cancelText: String, // optional, default = 'Cancel' + position: String, // optional, default = 'top', enum: ['top', 'bottom'] submitCallback: Function, // optional cancelCallback: Function // optional }, submitCallbackOptional(), cancelCallbackOptional()) @@ -100,7 +103,8 @@ notie.confirm({ notie.input({ text: String, submitText: String, // optional, default = 'Submit' - cancelText: String // optional, default = 'Cancel' + cancelText: String, // optional, default = 'Cancel' + position: String, // optional, default = 'top', enum: ['top', 'bottom'] submitCallback: Function(value), // optional cancelCallback: Function(value), // optional autocapitalize: 'words', // default: 'none' @@ -122,7 +126,7 @@ notie.input({ notie.select({ text: String, cancelText: String, // optional, default = 'Cancel' - cancelCallback: Function, // optional + position: String, // optional, default = 'bottom', enum: ['top', 'bottom'] choices: [ { type: Number|String, // optional, default = 1 @@ -130,13 +134,15 @@ notie.select({ handler: Function } ... - ] + ], + cancelCallback: Function // optional }, cancelCallbackOptional()) notie.date({ value: Date, submitText: String, // optional, default = 'OK' cancelText: String, // optional, default = 'Cancel' + position: String, // optional, default = 'top', enum: ['top', 'bottom'] submitCallback: Function(date), // optional cancelCallback: Function(date) // optional }, submitCallbackOptional(date), cancelCallbackOptional(date)) @@ -149,7 +155,7 @@ notie.alert({ type: 1, text: 'Success!', stay: true }) // Never hides unless cli notie.alert({ type: 'success', text: 'Success!', time: 2 }) // Hides after 2 seconds notie.alert({ type: 2, text: 'Warning
with
HTML
included.' }) notie.alert({ type: 'warning', text: 'Watch it...' }) -notie.alert({ type: 3, text: 'Error.' }) +notie.alert({ type: 3, text: 'Error.', position: 'bottom' }) notie.alert({ type: 'error', text: 'Oops!' }) notie.alert({ type: 4, text: 'Information.' }) notie.alert({ type: 'info', text: 'FYI, blah blah blah.' }) @@ -334,6 +340,14 @@ notie.setOptions({ }, ids: { overlay: 'notie-overlay' + }, + positions: { + alert: 'top', + force: 'top', + confirm: 'top', + input: 'top', + select: 'bottom', + date: 'top' } }) ``` diff --git a/dist/notie.js b/dist/notie.js index 1147771..658a5f6 100644 --- a/dist/notie.js +++ b/dist/notie.js @@ -97,6 +97,11 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob // options // ==================== +var positions = { + top: 'top', + bottom: 'bottom' +}; + var options = { alertTime: 3, dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], @@ -128,13 +133,22 @@ var options = { }, ids: { overlay: 'notie-overlay' + }, + positions: { + alert: positions.top, + force: positions.top, + confirm: positions.top, + input: positions.top, + select: positions.bottom, + date: positions.top } }; var setOptions = exports.setOptions = function setOptions(newOptions) { options = _extends({}, options, newOptions, { classes: _extends({}, options.classes, newOptions.classes), - ids: _extends({}, options.ids, newOptions.ids) + ids: _extends({}, options.ids, newOptions.ids), + positions: _extends({}, options.positions, newOptions.positions) }); }; @@ -191,28 +205,24 @@ var escapeClicked = function escapeClicked(event) { return event.keyCode === 27; }; -var addToDocument = function addToDocument(element) { - var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top'; - +var addToDocument = function addToDocument(element, position) { element.classList.add(options.classes.container); - element.style[from] = '-10000px'; + element.style[position] = '-10000px'; document.body.appendChild(element); - element.style[from] = '-' + element.offsetHeight + 'px'; + element.style[position] = '-' + element.offsetHeight + 'px'; if (element.listener) window.addEventListener('keydown', element.listener); tick().then(function () { element.style.transition = getTransition(); - element.style[from] = 0; + element.style[position] = 0; }); }; -var removeFromDocument = function removeFromDocument(id) { - var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top'; - +var removeFromDocument = function removeFromDocument(id, position) { var element = document.getElementById(id); if (!element) return; - element.style[from] = '-' + element.offsetHeight + 'px'; + element.style[position] = '-' + element.offsetHeight + 'px'; if (element.listener) window.removeEventListener('keydown', element.listener); @@ -221,7 +231,7 @@ var removeFromDocument = function removeFromDocument(id) { }); }; -var addOverlayToDocument = function addOverlayToDocument(owner, from) { +var addOverlayToDocument = function addOverlayToDocument(owner, position) { var element = document.createElement('div'); element.id = options.ids.overlay; element.classList.add(options.classes.overlay); @@ -229,7 +239,7 @@ var addOverlayToDocument = function addOverlayToDocument(owner, from) { element.style.opacity = 0; if (owner && options.overlayClickDismiss) { element.onclick = function () { - removeFromDocument(owner.id, from); + removeFromDocument(owner.id, position); removeOverlayFromDocument(); }; } @@ -255,7 +265,7 @@ var hideAlerts = exports.hideAlerts = function hideAlerts(callback) { if (alertsShowing.length) { for (var i = 0; i < alertsShowing.length; i++) { var _alert = alertsShowing[i]; - removeFromDocument(_alert.id); + removeFromDocument(_alert.id, _alert.position); } if (callback) wait(options.transitionDuration).then(function () { return callback(); @@ -274,7 +284,9 @@ var alert = exports.alert = function alert(_ref) { _ref$time = _ref.time, time = _ref$time === undefined ? options.alertTime : _ref$time, _ref$stay = _ref.stay, - stay = _ref$stay === undefined ? false : _ref$stay; + stay = _ref$stay === undefined ? false : _ref$stay, + _ref$position = _ref.position, + position = _ref$position === undefined ? options.positions.alert || position.top : _ref$position; blur(); hideAlerts(); @@ -282,23 +294,24 @@ var alert = exports.alert = function alert(_ref) { var element = document.createElement('div'); var id = generateRandomId(); element.id = id; + element.position = position; element.classList.add(options.classes.textbox); element.classList.add(typeToClassLookup[type]); element.classList.add(options.classes.alert); element.innerHTML = '
' + text + '
'; element.onclick = function () { - return removeFromDocument(id); + return removeFromDocument(id, position); }; element.listener = function (event) { if (enterClicked(event) || escapeClicked(event)) hideAlerts(); }; - addToDocument(element); + addToDocument(element, position); if (time && time < 1) time = 1; if (!stay && time) wait(time).then(function () { - return removeFromDocument(id); + return removeFromDocument(id, position); }); }; @@ -308,7 +321,9 @@ var force = exports.force = function force(_ref2, callbackArg) { text = _ref2.text, _ref2$buttonText = _ref2.buttonText, buttonText = _ref2$buttonText === undefined ? 'OK' : _ref2$buttonText, - callback = _ref2.callback; + callback = _ref2.callback, + _ref2$position = _ref2.position, + position = _ref2$position === undefined ? options.positions.force || position.top : _ref2$position; blur(); hideAlerts(); @@ -327,7 +342,7 @@ var force = exports.force = function force(_ref2, callbackArg) { elementButton.classList.add(typeToClassLookup[type]); elementButton.innerHTML = buttonText; elementButton.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (callback) callback();else if (callbackArg) callbackArg(); }; @@ -339,7 +354,7 @@ var force = exports.force = function force(_ref2, callbackArg) { if (enterClicked(event)) elementButton.click(); }; - addToDocument(element); + addToDocument(element, position); addOverlayToDocument(); }; @@ -351,7 +366,9 @@ var confirm = exports.confirm = function confirm(_ref3, submitCallbackArg, cance _ref3$cancelText = _ref3.cancelText, cancelText = _ref3$cancelText === undefined ? 'Cancel' : _ref3$cancelText, submitCallback = _ref3.submitCallback, - cancelCallback = _ref3.cancelCallback; + cancelCallback = _ref3.cancelCallback, + _ref3$position = _ref3.position, + position = _ref3$position === undefined ? options.positions.confirm || position.top : _ref3$position; blur(); hideAlerts(); @@ -371,7 +388,7 @@ var confirm = exports.confirm = function confirm(_ref3, submitCallbackArg, cance elementButtonLeft.classList.add(options.classes.backgroundSuccess); elementButtonLeft.innerHTML = submitText; elementButtonLeft.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (submitCallback) submitCallback();else if (submitCallbackArg) submitCallbackArg(); }; @@ -382,7 +399,7 @@ var confirm = exports.confirm = function confirm(_ref3, submitCallbackArg, cance elementButtonRight.classList.add(options.classes.backgroundError); elementButtonRight.innerHTML = cancelText; elementButtonRight.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (cancelCallback) cancelCallback();else if (cancelCallbackArg) cancelCallbackArg(); }; @@ -395,9 +412,9 @@ var confirm = exports.confirm = function confirm(_ref3, submitCallbackArg, cance if (enterClicked(event)) elementButtonLeft.click();else if (escapeClicked(event)) elementButtonRight.click(); }; - addToDocument(element); + addToDocument(element, position); - addOverlayToDocument(element); + addOverlayToDocument(element, position); }; var input = function input(_ref4, submitCallbackArg, cancelCallbackArg) { @@ -408,7 +425,9 @@ var input = function input(_ref4, submitCallbackArg, cancelCallbackArg) { cancelText = _ref4$cancelText === undefined ? 'Cancel' : _ref4$cancelText, submitCallback = _ref4.submitCallback, cancelCallback = _ref4.cancelCallback, - settings = _objectWithoutProperties(_ref4, ['text', 'submitText', 'cancelText', 'submitCallback', 'cancelCallback']); + _ref4$position = _ref4.position, + position = _ref4$position === undefined ? options.positions.input || position.top : _ref4$position, + settings = _objectWithoutProperties(_ref4, ['text', 'submitText', 'cancelText', 'submitCallback', 'cancelCallback', 'position']); blur(); hideAlerts(); @@ -466,7 +485,7 @@ var input = function input(_ref4, submitCallbackArg, cancelCallbackArg) { elementButtonLeft.classList.add(options.classes.backgroundSuccess); elementButtonLeft.innerHTML = submitText; elementButtonLeft.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (submitCallback) submitCallback(elementInput.value);else if (submitCallbackArg) submitCallbackArg(elementInput.value); }; @@ -477,7 +496,7 @@ var input = function input(_ref4, submitCallbackArg, cancelCallbackArg) { elementButtonRight.classList.add(options.classes.backgroundError); elementButtonRight.innerHTML = cancelText; elementButtonRight.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (cancelCallback) cancelCallback(elementInput.value);else if (cancelCallbackArg) cancelCallbackArg(elementInput.value); }; @@ -491,11 +510,11 @@ var input = function input(_ref4, submitCallbackArg, cancelCallbackArg) { if (enterClicked(event)) elementButtonLeft.click();else if (escapeClicked(event)) elementButtonRight.click(); }; - addToDocument(element); + addToDocument(element, position); elementInput.focus(); - addOverlayToDocument(element); + addOverlayToDocument(element, position); }; exports.input = input; @@ -504,13 +523,13 @@ var select = exports.select = function select(_ref5, cancelCallbackArg) { _ref5$cancelText = _ref5.cancelText, cancelText = _ref5$cancelText === undefined ? 'Cancel' : _ref5$cancelText, cancelCallback = _ref5.cancelCallback, - choices = _ref5.choices; + choices = _ref5.choices, + _ref5$position = _ref5.position, + position = _ref5$position === undefined ? options.positions.select || position.top : _ref5$position; blur(); hideAlerts(); - var from = 'bottom'; - var element = document.createElement('div'); var id = generateRandomId(); element.id = id; @@ -541,7 +560,7 @@ var select = exports.select = function select(_ref5, cancelCallbackArg) { elementChoice.innerHTML = text; elementChoice.onclick = function () { - removeFromDocument(id, from); + removeFromDocument(id, position); removeOverlayFromDocument(); handler(); }; @@ -554,7 +573,7 @@ var select = exports.select = function select(_ref5, cancelCallbackArg) { elementCancel.classList.add(options.classes.button); elementCancel.innerHTML = cancelText; elementCancel.onclick = function () { - removeFromDocument(id, from); + removeFromDocument(id, position); removeOverlayFromDocument(); if (cancelCallback) cancelCallback();else if (cancelCallbackArg) cancelCallbackArg(); }; @@ -565,9 +584,9 @@ var select = exports.select = function select(_ref5, cancelCallbackArg) { if (escapeClicked(event)) elementCancel.click(); }; - addToDocument(element, from); + addToDocument(element, position); - addOverlayToDocument(element, from); + addOverlayToDocument(element, position); }; var date = exports.date = function date(_ref7, submitCallbackArg, cancelCallbackArg) { @@ -578,7 +597,9 @@ var date = exports.date = function date(_ref7, submitCallbackArg, cancelCallback _ref7$cancelText = _ref7.cancelText, cancelText = _ref7$cancelText === undefined ? 'Cancel' : _ref7$cancelText, submitCallback = _ref7.submitCallback, - cancelCallback = _ref7.cancelCallback; + cancelCallback = _ref7.cancelCallback, + _ref7$position = _ref7.position, + position = _ref7$position === undefined ? options.positions.date || position.top : _ref7$position; blur(); hideAlerts(); @@ -718,7 +739,7 @@ var date = exports.date = function date(_ref7, submitCallbackArg, cancelCallback elementButtonLeft.classList.add(options.classes.backgroundSuccess); elementButtonLeft.innerHTML = submitText; elementButtonLeft.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (submitCallback) submitCallback(value);else if (submitCallbackArg) submitCallbackArg(value); }; @@ -729,7 +750,7 @@ var date = exports.date = function date(_ref7, submitCallbackArg, cancelCallback elementButtonRight.classList.add(options.classes.backgroundError); elementButtonRight.innerHTML = cancelText; elementButtonRight.onclick = function () { - removeFromDocument(id); + removeFromDocument(id, position); removeOverlayFromDocument(); if (cancelCallback) cancelCallback(value);else if (cancelCallbackArg) cancelCallbackArg(value); }; @@ -752,9 +773,9 @@ var date = exports.date = function date(_ref7, submitCallbackArg, cancelCallback if (enterClicked(event)) elementButtonLeft.click();else if (escapeClicked(event)) elementButtonRight.click(); }; - addToDocument(element); + addToDocument(element, position); - addOverlayToDocument(element); + addOverlayToDocument(element, position); }; exports.default = { diff --git a/dist/notie.min.js b/dist/notie.min.js index f8ec1f2..1f6cd08 100644 --- a/dist/notie.min.js +++ b/dist/notie.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.notie=t():e.notie=t()}(this,function(){return function(e){function t(s){if(n[s])return n[s].exports;var a=n[s]={i:s,l:!1,exports:{}};return e[s].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,s){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:s})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t,n){"use strict";(function(e){var n,s,a,c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(i,r){"object"===c(t)&&"object"===c(e)?e.exports=r():(s=[],n=r,a="function"==typeof n?n.apply(t,s):n,!(void 0!==a&&(e.exports=a)))}(void 0,function(){return function(e){function t(s){if(n[s])return n[s].exports;var a=n[s]={i:s,l:!1,exports:{}};return e[s].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,s){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:s})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){function s(e,t){var n={};for(var s in e)t.indexOf(s)>=0||Object.prototype.hasOwnProperty.call(e,s)&&(n[s]=e[s]);return n}Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"===c(Symbol.iterator)?function(e){return"undefined"==typeof e?"undefined":c(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":"undefined"==typeof e?"undefined":c(e)},i=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:"top";e.classList.add(r.classes.container),e.style[t]="-10000px",document.body.appendChild(e),e.style[t]="-"+e.offsetHeight+"px",e.listener&&window.addEventListener("keydown",e.listener),o().then(function(){e.style.transition=m(),e.style[t]=0})},y=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"top",n=document.getElementById(e);n&&(n.style[t]="-"+n.offsetHeight+"px",n.listener&&window.removeEventListener("keydown",n.listener),d(r.transitionDuration).then(function(){n.parentNode&&n.parentNode.removeChild(n)}))},L=function(e,t){var n=document.createElement("div");n.id=r.ids.overlay,n.classList.add(r.classes.overlay),n.classList.add(r.classes.backgroundOverlay),n.style.opacity=0,e&&r.overlayClickDismiss&&(n.onclick=function(){y(e.id,t),g()}),document.body.appendChild(n),o().then(function(){n.style.transition=m(),n.style.opacity=r.overlayOpacity})},g=function(){var e=document.getElementById(r.ids.overlay);e.style.opacity=0,d(r.transitionDuration).then(function(){e.parentNode&&e.parentNode.removeChild(e)})},h=t.hideAlerts=function(e){var t=document.getElementsByClassName(r.classes.alert);if(t.length){for(var n=0;n'+s+"",o.onclick=function(){return y(m)},o.listener=function(e){(v(e)||b(e))&&h()},x(o),c&&c<1&&(c=1),!l&&c&&d(c).then(function(){return y(m)})},C=t.force=function(e,t){var n=e.type,s=void 0===n?5:n,a=e.text,c=e.buttonText,i=void 0===c?"OK":c,l=e.callback;u(),h();var o=document.createElement("div"),d=f();o.id=d;var m=document.createElement("div");m.classList.add(r.classes.textbox),m.classList.add(r.classes.backgroundInfo),m.innerHTML='
'+a+"
";var b=document.createElement("div");b.classList.add(r.classes.button),b.classList.add(p[s]),b.innerHTML=i,b.onclick=function(){y(d),g(),l?l():t&&t()},o.appendChild(m),o.appendChild(b),o.listener=function(e){v(e)&&b.click()},x(o),L()},E=t.confirm=function(e,t,n){var s=e.text,a=e.submitText,c=void 0===a?"Yes":a,i=e.cancelText,l=void 0===i?"Cancel":i,o=e.submitCallback,d=e.cancelCallback;u(),h();var p=document.createElement("div"),m=f();p.id=m;var k=document.createElement("div");k.classList.add(r.classes.textbox),k.classList.add(r.classes.backgroundInfo),k.innerHTML='
'+s+"
";var C=document.createElement("div");C.classList.add(r.classes.button),C.classList.add(r.classes.elementHalf),C.classList.add(r.classes.backgroundSuccess),C.innerHTML=c,C.onclick=function(){y(m),g(),o?o():t&&t()};var E=document.createElement("div");E.classList.add(r.classes.button),E.classList.add(r.classes.elementHalf),E.classList.add(r.classes.backgroundError),E.innerHTML=l,E.onclick=function(){y(m),g(),d?d():n&&n()},p.appendChild(k),p.appendChild(C),p.appendChild(E),p.listener=function(e){v(e)?C.click():b(e)&&E.click()},x(p),L(p)},T=function(e,t,n){var c=e.text,i=e.submitText,l=void 0===i?"Submit":i,o=e.cancelText,d=void 0===o?"Cancel":o,p=e.submitCallback,m=e.cancelCallback,k=s(e,["text","submitText","cancelText","submitCallback","cancelCallback"]);u(),h();var C=document.createElement("div"),E=f();C.id=E;var T=document.createElement("div");T.classList.add(r.classes.textbox),T.classList.add(r.classes.backgroundInfo),T.innerHTML='
'+c+"
";var M=document.createElement("input");M.classList.add(r.classes.inputField),M.setAttribute("autocapitalize",k.autocapitalize||"none"),M.setAttribute("autocomplete",k.autocomplete||"off"),M.setAttribute("autocorrect",k.autocorrect||"off"),M.setAttribute("autofocus",k.autofocus||"true"),M.setAttribute("inputmode",k.inputmode||"verbatim"),M.setAttribute("max",k.max||""),M.setAttribute("maxlength",k.maxlength||""),M.setAttribute("min",k.min||""),M.setAttribute("minlength",k.minlength||""),M.setAttribute("placeholder",k.placeholder||""),M.setAttribute("spellcheck",k.spellcheck||"default"),M.setAttribute("step",k.step||"any"),M.setAttribute("type",k.type||"text"),M.value=k.value||"",k.allowed&&(M.oninput=function(){var e=void 0;if(Array.isArray(k.allowed)){for(var t="",n=k.allowed,s=0;s'+n+"",o.appendChild(m),i.forEach(function(e,t){var n=e.type,s=void 0===n?1:n,a=e.text,c=e.handler,u=document.createElement("div");u.classList.add(p[s]),u.classList.add(r.classes.button),u.classList.add(r.classes.selectChoice);var f=i[t+1];f&&!f.type&&(f.type=1),f&&f.type===s&&u.classList.add(r.classes.selectChoiceRepeated),u.innerHTML=a,u.onclick=function(){y(d,l),g(),c()},o.appendChild(u)});var v=document.createElement("div");v.classList.add(r.classes.backgroundNeutral),v.classList.add(r.classes.button),v.innerHTML=a,v.onclick=function(){y(d,l),g(),c?c():t&&t()},o.appendChild(v),o.listener=function(e){b(e)&&v.click()},x(o,l),L(o,l)},H=t.date=function(e,t,n){var s=e.value,a=void 0===s?new Date:s,c=e.submitText,i=void 0===c?"OK":c,l=e.cancelText,o=void 0===l?"Cancel":l,d=e.submitCallback,p=e.cancelCallback;u(),h();var m="▾",k=document.createElement("div"),C=document.createElement("div"),E=document.createElement("div"),T=function(e){k.innerHTML=r.dateMonths[e.getMonth()],C.innerHTML=e.getDate(),E.innerHTML=e.getFullYear()},M=function(e){var t=new Date(a.getFullYear(),a.getMonth()+1,0).getDate(),n=e.target.textContent.replace(/^0+/,"").replace(/[^\d]/g,"").slice(0,2);Number(n)>t&&(n=t.toString()),e.target.textContent=n,Number(n)<1&&(n="1"),a.setDate(Number(n))},H=function(e){var t=e.target.textContent.replace(/^0+/,"").replace(/[^\d]/g,"").slice(0,4);e.target.textContent=t,a.setFullYear(Number(t))},S=function(e){T(a)},w=function(e){var t=new Date(a.getFullYear(),a.getMonth()+e+1,0).getDate();a.getDate()>t&&a.setDate(t),a.setMonth(a.getMonth()+e),T(a)},O=function(e){a.setDate(a.getDate()+e),T(a)},A=function(e){var t=a.getFullYear()+e;t<0?a.setFullYear(0):a.setFullYear(a.getFullYear()+e),T(a)},D=document.createElement("div"),I=f();D.id=I;var j=document.createElement("div");j.classList.add(r.classes.backgroundInfo);var N=document.createElement("div");N.classList.add(r.classes.dateSelectorInner);var P=document.createElement("div");P.classList.add(r.classes.button),P.classList.add(r.classes.elementThird),P.classList.add(r.classes.dateSelectorUp),P.innerHTML=m;var F=document.createElement("div");F.classList.add(r.classes.button),F.classList.add(r.classes.elementThird),F.classList.add(r.classes.dateSelectorUp),F.innerHTML=m;var Y=document.createElement("div");Y.classList.add(r.classes.button),Y.classList.add(r.classes.elementThird),Y.classList.add(r.classes.dateSelectorUp),Y.innerHTML=m,k.classList.add(r.classes.element),k.classList.add(r.classes.elementThird),k.innerHTML=r.dateMonths[a.getMonth()],C.classList.add(r.classes.element),C.classList.add(r.classes.elementThird),C.setAttribute("contentEditable",!0),C.addEventListener("input",M),C.addEventListener("blur",S),C.innerHTML=a.getDate(),E.classList.add(r.classes.element),E.classList.add(r.classes.elementThird),E.setAttribute("contentEditable",!0),E.addEventListener("input",H),E.addEventListener("blur",S),E.innerHTML=a.getFullYear();var _=document.createElement("div");_.classList.add(r.classes.button),_.classList.add(r.classes.elementThird),_.innerHTML=m;var z=document.createElement("div");z.classList.add(r.classes.button),z.classList.add(r.classes.elementThird),z.innerHTML=m;var U=document.createElement("div");U.classList.add(r.classes.button),U.classList.add(r.classes.elementThird),U.innerHTML=m,P.onclick=function(){return w(1)},F.onclick=function(){return O(1)},Y.onclick=function(){return A(1)},_.onclick=function(){return w(-1)},z.onclick=function(){return O(-1)},U.onclick=function(){return A(-1)};var B=document.createElement("div");B.classList.add(r.classes.button),B.classList.add(r.classes.elementHalf),B.classList.add(r.classes.backgroundSuccess),B.innerHTML=i,B.onclick=function(){y(I),g(),d?d(a):t&&t(a)};var J=document.createElement("div");J.classList.add(r.classes.button),J.classList.add(r.classes.elementHalf),J.classList.add(r.classes.backgroundError),J.innerHTML=o,J.onclick=function(){y(I),g(),p?p(a):n&&n(a)},N.appendChild(P),N.appendChild(F),N.appendChild(Y),N.appendChild(k),N.appendChild(C),N.appendChild(E),N.appendChild(_),N.appendChild(z),N.appendChild(U),j.appendChild(N),D.appendChild(j),D.appendChild(B),D.appendChild(J),D.listener=function(e){v(e)?B.click():b(e)&&J.click()},x(D),L(D)};t.default={alert:k,force:C,confirm:E,input:T,select:M,date:H,setOptions:l,hideAlerts:h}}])})}).call(t,n(0)(e))}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.notie=t():e.notie=t()}(this,function(){return function(e){function t(s){if(n[s])return n[s].exports;var a=n[s]={i:s,l:!1,exports:{}};return e[s].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,s){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:s})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t,n){"use strict";(function(e){var n,s,a,i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(c,o){"object"===i(t)&&"object"===i(e)?e.exports=o():(s=[],n=o,a="function"==typeof n?n.apply(t,s):n,!(void 0!==a&&(e.exports=a)))}(void 0,function(){return function(e){function t(s){if(n[s])return n[s].exports;var a=n[s]={i:s,l:!1,exports:{}};return e[s].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,s){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:s})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){function s(e,t){var n={};for(var s in e)t.indexOf(s)>=0||Object.prototype.hasOwnProperty.call(e,s)&&(n[s]=e[s]);return n}Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"===i(Symbol.iterator)?function(e){return"undefined"==typeof e?"undefined":i(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":"undefined"==typeof e?"undefined":i(e)},c=Object.assign||function(e){for(var t=1;t'+s+"",v.onclick=function(){return L(g,d)},v.listener=function(e){(b(e)||x(e))&&k()},y(v,d),i&&i<1&&(i=1),!o&&i&&u(i).then(function(){return L(g,d)})},E=t.force=function(e,t){var n=e.type,s=void 0===n?5:n,a=e.text,i=e.buttonText,c=void 0===i?"OK":i,o=e.callback,l=e.position,d=void 0===l?r.positions.force||d.top:l;p(),k();var u=document.createElement("div"),v=f();u.id=v;var x=document.createElement("div");x.classList.add(r.classes.textbox),x.classList.add(r.classes.backgroundInfo),x.innerHTML='
'+a+"
";var C=document.createElement("div");C.classList.add(r.classes.button),C.classList.add(m[s]),C.innerHTML=c,C.onclick=function(){L(v,d),h(),o?o():t&&t()},u.appendChild(x),u.appendChild(C),u.listener=function(e){b(e)&&C.click()},y(u,d),g()},T=t.confirm=function(e,t,n){var s=e.text,a=e.submitText,i=void 0===a?"Yes":a,c=e.cancelText,o=void 0===c?"Cancel":c,l=e.submitCallback,d=e.cancelCallback,u=e.position,m=void 0===u?r.positions.confirm||m.top:u;p(),k();var v=document.createElement("div"),C=f();v.id=C;var E=document.createElement("div");E.classList.add(r.classes.textbox),E.classList.add(r.classes.backgroundInfo),E.innerHTML='
'+s+"
";var T=document.createElement("div");T.classList.add(r.classes.button),T.classList.add(r.classes.elementHalf),T.classList.add(r.classes.backgroundSuccess),T.innerHTML=i,T.onclick=function(){L(C,m),h(),l?l():t&&t()};var M=document.createElement("div");M.classList.add(r.classes.button),M.classList.add(r.classes.elementHalf),M.classList.add(r.classes.backgroundError),M.innerHTML=o,M.onclick=function(){L(C,m),h(),d?d():n&&n()},v.appendChild(E),v.appendChild(T),v.appendChild(M),v.listener=function(e){b(e)?T.click():x(e)&&M.click()},y(v,m),g(v,m)},M=function(e,t,n){var i=e.text,c=e.submitText,o=void 0===c?"Submit":c,l=e.cancelText,d=void 0===l?"Cancel":l,u=e.submitCallback,m=e.cancelCallback,v=e.position,C=void 0===v?r.positions.input||C.top:v,E=s(e,["text","submitText","cancelText","submitCallback","cancelCallback","position"]);p(),k();var T=document.createElement("div"),M=f();T.id=M;var H=document.createElement("div");H.classList.add(r.classes.textbox),H.classList.add(r.classes.backgroundInfo),H.innerHTML='
'+i+"
";var S=document.createElement("input");S.classList.add(r.classes.inputField),S.setAttribute("autocapitalize",E.autocapitalize||"none"),S.setAttribute("autocomplete",E.autocomplete||"off"),S.setAttribute("autocorrect",E.autocorrect||"off"),S.setAttribute("autofocus",E.autofocus||"true"),S.setAttribute("inputmode",E.inputmode||"verbatim"),S.setAttribute("max",E.max||""),S.setAttribute("maxlength",E.maxlength||""),S.setAttribute("min",E.min||""),S.setAttribute("minlength",E.minlength||""),S.setAttribute("placeholder",E.placeholder||""),S.setAttribute("spellcheck",E.spellcheck||"default"),S.setAttribute("step",E.step||"any"),S.setAttribute("type",E.type||"text"),S.value=E.value||"",E.allowed&&(S.oninput=function(){var e=void 0;if(Array.isArray(E.allowed)){for(var t="",n=E.allowed,s=0;s'+n+"",d.appendChild(v),c.forEach(function(e,t){var n=e.type,s=void 0===n?1:n,a=e.text,i=e.handler,o=document.createElement("div");o.classList.add(m[s]),o.classList.add(r.classes.button),o.classList.add(r.classes.selectChoice);var p=c[t+1];p&&!p.type&&(p.type=1),p&&p.type===s&&o.classList.add(r.classes.selectChoiceRepeated),o.innerHTML=a,o.onclick=function(){L(u,l),h(),i()},d.appendChild(o)});var b=document.createElement("div");b.classList.add(r.classes.backgroundNeutral),b.classList.add(r.classes.button),b.innerHTML=a,b.onclick=function(){L(u,l),h(),i?i():t&&t()},d.appendChild(b),d.listener=function(e){x(e)&&b.click()},y(d,l),g(d,l)},S=t.date=function(e,t,n){var s=e.value,a=void 0===s?new Date:s,i=e.submitText,c=void 0===i?"OK":i,o=e.cancelText,l=void 0===o?"Cancel":o,d=e.submitCallback,u=e.cancelCallback,m=e.position,v=void 0===m?r.positions.date||v.top:m;p(),k();var C="▾",E=document.createElement("div"),T=document.createElement("div"),M=document.createElement("div"),H=function(e){E.innerHTML=r.dateMonths[e.getMonth()],T.innerHTML=e.getDate(),M.innerHTML=e.getFullYear()},S=function(e){var t=new Date(a.getFullYear(),a.getMonth()+1,0).getDate(),n=e.target.textContent.replace(/^0+/,"").replace(/[^\d]/g,"").slice(0,2);Number(n)>t&&(n=t.toString()),e.target.textContent=n,Number(n)<1&&(n="1"),a.setDate(Number(n))},w=function(e){var t=e.target.textContent.replace(/^0+/,"").replace(/[^\d]/g,"").slice(0,4);e.target.textContent=t,a.setFullYear(Number(t))},O=function(e){H(a)},A=function(e){var t=new Date(a.getFullYear(),a.getMonth()+e+1,0).getDate();a.getDate()>t&&a.setDate(t),a.setMonth(a.getMonth()+e),H(a)},D=function(e){a.setDate(a.getDate()+e),H(a)},I=function(e){var t=a.getFullYear()+e;t<0?a.setFullYear(0):a.setFullYear(a.getFullYear()+e),H(a)},j=document.createElement("div"),N=f();j.id=N;var P=document.createElement("div");P.classList.add(r.classes.backgroundInfo);var F=document.createElement("div");F.classList.add(r.classes.dateSelectorInner);var Y=document.createElement("div");Y.classList.add(r.classes.button),Y.classList.add(r.classes.elementThird),Y.classList.add(r.classes.dateSelectorUp),Y.innerHTML=C;var _=document.createElement("div");_.classList.add(r.classes.button),_.classList.add(r.classes.elementThird),_.classList.add(r.classes.dateSelectorUp),_.innerHTML=C;var z=document.createElement("div");z.classList.add(r.classes.button),z.classList.add(r.classes.elementThird),z.classList.add(r.classes.dateSelectorUp),z.innerHTML=C,E.classList.add(r.classes.element),E.classList.add(r.classes.elementThird),E.innerHTML=r.dateMonths[a.getMonth()],T.classList.add(r.classes.element),T.classList.add(r.classes.elementThird),T.setAttribute("contentEditable",!0),T.addEventListener("input",S),T.addEventListener("blur",O),T.innerHTML=a.getDate(),M.classList.add(r.classes.element),M.classList.add(r.classes.elementThird),M.setAttribute("contentEditable",!0),M.addEventListener("input",w),M.addEventListener("blur",O),M.innerHTML=a.getFullYear();var U=document.createElement("div");U.classList.add(r.classes.button),U.classList.add(r.classes.elementThird),U.innerHTML=C;var B=document.createElement("div");B.classList.add(r.classes.button),B.classList.add(r.classes.elementThird),B.innerHTML=C;var J=document.createElement("div");J.classList.add(r.classes.button),J.classList.add(r.classes.elementThird),J.innerHTML=C,Y.onclick=function(){return A(1)},_.onclick=function(){return D(1)},z.onclick=function(){return I(1)},U.onclick=function(){return A(-1)},B.onclick=function(){return D(-1)},J.onclick=function(){return I(-1)};var R=document.createElement("div");R.classList.add(r.classes.button),R.classList.add(r.classes.elementHalf),R.classList.add(r.classes.backgroundSuccess),R.innerHTML=c,R.onclick=function(){L(N,v),h(),d?d(a):t&&t(a)};var W=document.createElement("div");W.classList.add(r.classes.button),W.classList.add(r.classes.elementHalf),W.classList.add(r.classes.backgroundError),W.innerHTML=l,W.onclick=function(){L(N,v),h(),u?u(a):n&&n(a)},F.appendChild(Y),F.appendChild(_),F.appendChild(z),F.appendChild(E),F.appendChild(T),F.appendChild(M),F.appendChild(U),F.appendChild(B),F.appendChild(J),P.appendChild(F),j.appendChild(P),j.appendChild(R),j.appendChild(W),j.listener=function(e){b(e)?R.click():x(e)&&W.click()},y(j,v),g(j,v)};t.default={alert:C,force:E,confirm:T,input:M,select:H,date:S,setOptions:l,hideAlerts:k}}])})}).call(t,n(0)(e))}])}); \ No newline at end of file diff --git a/package.json b/package.json index 82f8d8c..fbbcd5d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "notie", "description": "notie - a clean and simple notification, input, and selection suite for javascript, with no dependencies", "author": "Jared Reich", - "version": "4.2.1", + "version": "4.3.0", "main": "./dist/notie.min.js", "files": [ "dist/", diff --git a/src/notie.js b/src/notie.js index 6ca66ea..03d1d27 100644 --- a/src/notie.js +++ b/src/notie.js @@ -2,6 +2,11 @@ // options // ==================== +const positions = { + top: 'top', + bottom: 'bottom' +} + let options = { alertTime: 3, dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', @@ -34,6 +39,14 @@ let options = { }, ids: { overlay: 'notie-overlay' + }, + positions: { + alert: positions.top, + force: positions.top, + confirm: positions.top, + input: positions.top, + select: positions.bottom, + date: positions.top } } @@ -42,7 +55,8 @@ export const setOptions = newOptions => { ...options, ...newOptions, classes: { ...options.classes, ...newOptions.classes }, - ids: { ...options.ids, ...newOptions.ids } + ids: { ...options.ids, ...newOptions.ids }, + positions: { ...options.positions, ...newOptions.positions } } } @@ -87,24 +101,24 @@ const getTransition = () => ( const enterClicked = event => event.keyCode === 13 const escapeClicked = event => event.keyCode === 27 -const addToDocument = (element, from = 'top') => { +const addToDocument = (element, position) => { element.classList.add(options.classes.container) - element.style[from] = '-10000px' + element.style[position] = '-10000px' document.body.appendChild(element) - element.style[from] = `-${element.offsetHeight}px` + element.style[position] = `-${element.offsetHeight}px` if (element.listener) window.addEventListener('keydown', element.listener) tick().then(() => { element.style.transition = getTransition() - element.style[from] = 0 + element.style[position] = 0 }) } -const removeFromDocument = (id, from = 'top') => { +const removeFromDocument = (id, position) => { const element = document.getElementById(id) if (!element) return - element.style[from] = `-${element.offsetHeight}px` + element.style[position] = `-${element.offsetHeight}px` if (element.listener) window.removeEventListener('keydown', element.listener) @@ -113,7 +127,7 @@ const removeFromDocument = (id, from = 'top') => { }) } -const addOverlayToDocument = (owner, from) => { +const addOverlayToDocument = (owner, position) => { const element = document.createElement('div') element.id = options.ids.overlay element.classList.add(options.classes.overlay) @@ -121,7 +135,7 @@ const addOverlayToDocument = (owner, from) => { element.style.opacity = 0 if (owner && options.overlayClickDismiss) { element.onclick = () => { - removeFromDocument(owner.id, from) + removeFromDocument(owner.id, position) removeOverlayFromDocument() } } @@ -147,7 +161,7 @@ export const hideAlerts = callback => { if (alertsShowing.length) { for (let i = 0; i < alertsShowing.length; i++) { const alert = alertsShowing[i] - removeFromDocument(alert.id) + removeFromDocument(alert.id, alert.position) } if (callback) wait(options.transitionDuration).then(() => callback()) } @@ -161,7 +175,8 @@ export const alert = ({ type = 4, text, time = options.alertTime, - stay = false + stay = false, + position = options.positions.alert || position.top }) => { blur() hideAlerts() @@ -169,27 +184,29 @@ export const alert = ({ const element = document.createElement('div') const id = generateRandomId() element.id = id + element.position = position element.classList.add(options.classes.textbox) element.classList.add(typeToClassLookup[type]) element.classList.add(options.classes.alert) element.innerHTML = `
${text}
` - element.onclick = () => removeFromDocument(id) + element.onclick = () => removeFromDocument(id, position) element.listener = event => { if (enterClicked(event) || escapeClicked(event)) hideAlerts() } - addToDocument(element) + addToDocument(element, position) if (time && time < 1) time = 1 - if (!stay && time) wait(time).then(() => removeFromDocument(id)) + if (!stay && time) wait(time).then(() => removeFromDocument(id, position)) } export const force = ({ type = 5, text, buttonText = 'OK', - callback + callback, + position = options.positions.force || position.top }, callbackArg) => { blur() hideAlerts() @@ -208,7 +225,7 @@ export const force = ({ elementButton.classList.add(typeToClassLookup[type]) elementButton.innerHTML = buttonText elementButton.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (callback) callback() else if (callbackArg) callbackArg() @@ -221,7 +238,7 @@ export const force = ({ if (enterClicked(event)) elementButton.click() } - addToDocument(element) + addToDocument(element, position) addOverlayToDocument() } @@ -231,7 +248,8 @@ export const confirm = ({ submitText = 'Yes', cancelText = 'Cancel', submitCallback, - cancelCallback + cancelCallback, + position = options.positions.confirm || position.top }, submitCallbackArg, cancelCallbackArg) => { blur() hideAlerts() @@ -251,7 +269,7 @@ export const confirm = ({ elementButtonLeft.classList.add(options.classes.backgroundSuccess) elementButtonLeft.innerHTML = submitText elementButtonLeft.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (submitCallback) submitCallback() else if (submitCallbackArg) submitCallbackArg() @@ -263,7 +281,7 @@ export const confirm = ({ elementButtonRight.classList.add(options.classes.backgroundError) elementButtonRight.innerHTML = cancelText elementButtonRight.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (cancelCallback) cancelCallback() else if (cancelCallbackArg) cancelCallbackArg() @@ -278,9 +296,9 @@ export const confirm = ({ else if (escapeClicked(event)) elementButtonRight.click() } - addToDocument(element) + addToDocument(element, position) - addOverlayToDocument(element) + addOverlayToDocument(element, position) } export const input = ({ @@ -289,6 +307,7 @@ export const input = ({ cancelText = 'Cancel', submitCallback, cancelCallback, + position = options.positions.input || position.top, ...settings }, submitCallbackArg, cancelCallbackArg) => { blur() @@ -349,7 +368,7 @@ export const input = ({ elementButtonLeft.classList.add(options.classes.backgroundSuccess) elementButtonLeft.innerHTML = submitText elementButtonLeft.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (submitCallback) submitCallback(elementInput.value) else if (submitCallbackArg) submitCallbackArg(elementInput.value) @@ -361,7 +380,7 @@ export const input = ({ elementButtonRight.classList.add(options.classes.backgroundError) elementButtonRight.innerHTML = cancelText elementButtonRight.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (cancelCallback) cancelCallback(elementInput.value) else if (cancelCallbackArg) cancelCallbackArg(elementInput.value) @@ -377,24 +396,23 @@ export const input = ({ else if (escapeClicked(event)) elementButtonRight.click() } - addToDocument(element) + addToDocument(element, position) elementInput.focus() - addOverlayToDocument(element) + addOverlayToDocument(element, position) } export const select = ({ text, cancelText = 'Cancel', cancelCallback, - choices + choices, + position = options.positions.select || position.top }, cancelCallbackArg) => { blur() hideAlerts() - const from = 'bottom' - const element = document.createElement('div') const id = generateRandomId() element.id = id @@ -420,7 +438,7 @@ export const select = ({ elementChoice.innerHTML = text elementChoice.onclick = () => { - removeFromDocument(id, from) + removeFromDocument(id, position) removeOverlayFromDocument() handler() } @@ -433,7 +451,7 @@ export const select = ({ elementCancel.classList.add(options.classes.button) elementCancel.innerHTML = cancelText elementCancel.onclick = () => { - removeFromDocument(id, from) + removeFromDocument(id, position) removeOverlayFromDocument() if (cancelCallback) cancelCallback() else if (cancelCallbackArg) cancelCallbackArg() @@ -445,9 +463,9 @@ export const select = ({ if (escapeClicked(event)) elementCancel.click() } - addToDocument(element, from) + addToDocument(element, position) - addOverlayToDocument(element, from) + addOverlayToDocument(element, position) } export const date = ({ @@ -455,7 +473,8 @@ export const date = ({ submitText = 'OK', cancelText = 'Cancel', submitCallback, - cancelCallback + cancelCallback, + position = options.positions.date || position.top }, submitCallbackArg, cancelCallbackArg) => { blur() hideAlerts() @@ -598,7 +617,7 @@ export const date = ({ elementButtonLeft.classList.add(options.classes.backgroundSuccess) elementButtonLeft.innerHTML = submitText elementButtonLeft.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (submitCallback) submitCallback(value) else if (submitCallbackArg) submitCallbackArg(value) @@ -610,7 +629,7 @@ export const date = ({ elementButtonRight.classList.add(options.classes.backgroundError) elementButtonRight.innerHTML = cancelText elementButtonRight.onclick = () => { - removeFromDocument(id) + removeFromDocument(id, position) removeOverlayFromDocument() if (cancelCallback) cancelCallback(value) else if (cancelCallbackArg) cancelCallbackArg(value) @@ -635,9 +654,9 @@ export const date = ({ else if (escapeClicked(event)) elementButtonRight.click() } - addToDocument(element) + addToDocument(element, position) - addOverlayToDocument(element) + addOverlayToDocument(element, position) } export default {