From 2d08af94652f8dd2c16cf60e141f899a84d87b79 Mon Sep 17 00:00:00 2001 From: Jared Reich Date: Sun, 26 Feb 2017 10:24:14 -0700 Subject: [PATCH] Add dist files. --- dist/notie.css | 107 +++++++ dist/notie.js | 673 +++++++++++++++++++++++++++++++++++++++++++++ dist/notie.min.css | 1 + dist/notie.min.js | 1 + 4 files changed, 782 insertions(+) create mode 100644 dist/notie.css create mode 100644 dist/notie.js create mode 100644 dist/notie.min.css create mode 100644 dist/notie.min.js diff --git a/dist/notie.css b/dist/notie.css new file mode 100644 index 0000000..68ba711 --- /dev/null +++ b/dist/notie.css @@ -0,0 +1,107 @@ +.notie-container { + font-size: 1.3rem; + height: auto; + left: 0; + position: fixed; + text-align: center; + width: 100%; + z-index: 2147483647; + box-sizing: border-box; + -o-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); + -ms-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); } + @media screen and (max-width: 900px) { + .notie-container { + font-size: 1.2rem; } } + @media screen and (max-width: 750px) { + .notie-container { + font-size: 1.1rem; } } + @media screen and (max-width: 400px) { + .notie-container { + font-size: 1rem; } } + +.notie-background-success { + background-color: #57BF57; } + +.notie-background-warning { + background-color: #D6A14D; } + +.notie-background-error { + background-color: #E1715B; } + +.notie-background-info { + background-color: #4D82D6; } + +.notie-background-neutral { + background-color: #A0A0A0; } + +.notie-background-overlay { + background-color: #FFFFFF; } + +.notie-textbox { + color: #FFFFFF; + padding: 20px; } + +.notie-textbox-inner { + margin: 0 auto; + max-width: 900px; } + +.notie-overlay { + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 2147483646; } + +.notie-button { + color: #FFFFFF; + padding: 10px; + cursor: pointer; } + +.notie-element { + color: #FFFFFF; + padding: 10px; } + +.notie-element-half { + display: inline-block; + width: 50%; + box-sizing: border-box; } + +.notie-element-third { + display: inline-block; + width: 33.3333%; + box-sizing: border-box; } + +.notie-alert { + cursor: pointer; } + +.notie-input-field { + background-color: #FFFFFF; + border: 0; + font-family: inherit; + font-size: inherit; + outline: 0; + padding: 10px; + text-align: center; + width: 100%; + box-sizing: border-box; } + +.notie-select-choice-repeated { + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + box-sizing: border-box; } + +.notie-date-selector-inner { + margin: 0 auto; + max-width: 900px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; } + +.notie-date-selector-up { + transform: rotate(180deg); } diff --git a/dist/notie.js b/dist/notie.js new file mode 100644 index 0000000..282410a --- /dev/null +++ b/dist/notie.js @@ -0,0 +1,673 @@ +(function (global, factory) { + if (typeof define === "function" && define.amd) { + define(['exports'], factory); + } else if (typeof exports !== "undefined") { + factory(exports); + } else { + var mod = { + exports: {} + }; + factory(mod.exports); + global.notie = mod.exports; + } +})(this, function (exports) { + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + + function _objectWithoutProperties(obj, keys) { + var target = {}; + + for (var i in obj) { + if (keys.indexOf(i) >= 0) continue; + if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; + target[i] = obj[i]; + } + + return target; + } + + var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + // ==================== + // options + // ==================== + + var options = { + alertTime: 3, + dateMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], + overlayClickDismiss: true, + overlayOpacity: 0.75, + transitionCurve: 'ease', + transitionDuration: 0.3, + transitionSelector: 'all', + classes: { + container: 'notie-container', + textbox: 'notie-textbox', + textboxInner: 'notie-textbox-inner', + button: 'notie-button', + element: 'notie-element', + elementHalf: 'notie-element-half', + elementThird: 'notie-element-third', + overlay: 'notie-overlay', + backgroundSuccess: 'notie-background-success', + backgroundWarning: 'notie-background-warning', + backgroundError: 'notie-background-error', + backgroundInfo: 'notie-background-info', + backgroundNeutral: 'notie-background-neutral', + backgroundOverlay: 'notie-background-overlay', + alert: 'notie-alert', + inputField: 'notie-input-field', + selectChoiceRepeated: 'notie-select-choice-repeated', + dateSelectorInner: 'notie-date-selector-inner', + dateSelectorUp: 'notie-date-selector-up' + }, + ids: { + overlay: 'notie-overlay' + } + }; + + var setOptions = exports.setOptions = function setOptions(newOptions) { + options = _extends({}, options, newOptions, { + classes: _extends({}, options.classes, newOptions.classes), + ids: _extends({}, options.ids, newOptions.ids) + }); + }; + + // ==================== + // helpers + // ==================== + + var tick = function tick() { + return new Promise(function (resolve) { + return setTimeout(resolve, 0); + }); + }; + var wait = function wait(time) { + return new Promise(function (resolve) { + return setTimeout(resolve, time * 1000); + }); + }; + + var blur = function blur() { + document.activeElement && document.activeElement.blur(); + }; + + var generateRandomId = function generateRandomId() { + // RFC4122 version 4 compliant UUID + var id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = Math.random() * 16 | 0; + var v = c === 'x' ? r : r & 0x3 | 0x8; + return v.toString(16); + }); + return 'notie-' + id; + }; + + var typeToClassLookup = { + 1: options.classes.backgroundSuccess, + success: options.classes.backgroundSuccess, + 2: options.classes.backgroundWarning, + warning: options.classes.backgroundWarning, + 3: options.classes.backgroundError, + error: options.classes.backgroundError, + 4: options.classes.backgroundInfo, + info: options.classes.backgroundInfo, + 5: options.classes.backgroundNeutral, + neutral: options.classes.backgroundNeutral + }; + + var getTransitionStyle = function getTransitionStyle() { + return options.transitionSelector + ' ' + options.transitionDuration + 's ' + options.transitionCurve; + }; + + var enterClicked = function enterClicked(event) { + return event.keyCode === 13; + }; + 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'; + + element.classList.add(options.classes.container); + element.style[from] = '-10000px'; + document.body.appendChild(element); + element.style[from] = '-' + element.offsetHeight + 'px'; + + if (element.listener) window.addEventListener('keydown', element.listener); + + tick().then(function () { + element.style.transition = getTransitionStyle(); + element.style[from] = 0; + }); + }; + + var removeFromDocument = function removeFromDocument(id) { + var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top'; + + var element = document.getElementById(id); + if (!element) return; + element.style[from] = '-' + element.offsetHeight + 'px'; + + if (element.listener) window.removeEventListener('keydown', element.listener); + + wait(options.transitionDuration).then(function () { + if (element.parentNode) element.parentNode.removeChild(element); + }); + }; + + var addOverlayToDocument = function addOverlayToDocument(owner, from) { + var element = document.createElement('div'); + element.id = options.ids.overlay; + element.classList.add(options.classes.overlay); + element.classList.add(options.classes.backgroundOverlay); + element.style.opacity = 0; + if (owner && options.overlayClickDismiss) { + element.onclick = function () { + removeFromDocument(owner.id, from); + removeOverlayFromDocument(); + }; + } + + document.body.appendChild(element); + + tick().then(function () { + element.style.transition = getTransitionStyle(); + element.style.opacity = options.overlayOpacity; + }); + }; + + var removeOverlayFromDocument = function removeOverlayFromDocument() { + var element = document.getElementById(options.ids.overlay); + element.style.opacity = 0; + wait(options.transitionDuration).then(function () { + if (element.parentNode) element.parentNode.removeChild(element); + }); + }; + + var hideAlerts = exports.hideAlerts = function hideAlerts(callback) { + var alertsShowing = document.getElementsByClassName(options.classes.alert); + if (alertsShowing.length) { + for (var i = 0; i < alertsShowing.length; i++) { + var _alert = alertsShowing[i]; + removeFromDocument(_alert.id); + } + if (callback) wait(options.transitionDuration).then(function () { + return callback(); + }); + } + }; + + // ==================== + // exports + // ==================== + + var alert = exports.alert = function alert(_ref) { + var _ref$type = _ref.type, + type = _ref$type === undefined ? 4 : _ref$type, + text = _ref.text, + _ref$time = _ref.time, + time = _ref$time === undefined ? options.alertTime : _ref$time, + _ref$stay = _ref.stay, + stay = _ref$stay === undefined ? false : _ref$stay; + + blur(); + hideAlerts(); + + var element = document.createElement('div'); + var id = generateRandomId(); + element.id = id; + 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); + }; + + element.listener = function (event) { + if (enterClicked(event) || escapeClicked(event)) hideAlerts(); + }; + + addToDocument(element); + + if (time && time < 1) time = 1; + if (!stay && time) wait(time).then(function () { + return removeFromDocument(id); + }); + }; + + var force = exports.force = function force(_ref2, callback) { + var _ref2$type = _ref2.type, + type = _ref2$type === undefined ? 5 : _ref2$type, + text = _ref2.text, + _ref2$buttonText = _ref2.buttonText, + buttonText = _ref2$buttonText === undefined ? 'OK' : _ref2$buttonText; + + blur(); + hideAlerts(); + + var element = document.createElement('div'); + var id = generateRandomId(); + element.id = id; + + var elementMessage = document.createElement('div'); + elementMessage.classList.add(options.classes.textbox); + elementMessage.classList.add(options.classes.backgroundInfo); + elementMessage.innerHTML = '
' + text + '
'; + + var elementButton = document.createElement('div'); + elementButton.classList.add(options.classes.button); + elementButton.classList.add(typeToClassLookup[type]); + elementButton.innerHTML = buttonText; + elementButton.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (callback) callback(); + }; + + element.appendChild(elementMessage); + element.appendChild(elementButton); + + element.listener = function (event) { + if (enterClicked(event)) elementButton.click(); + }; + + addToDocument(element); + + addOverlayToDocument(); + }; + + var confirm = exports.confirm = function confirm(_ref3, yesCallback, noCallback) { + var text = _ref3.text, + _ref3$yesText = _ref3.yesText, + yesText = _ref3$yesText === undefined ? 'Yes' : _ref3$yesText, + _ref3$noText = _ref3.noText, + noText = _ref3$noText === undefined ? 'Cancel' : _ref3$noText; + + blur(); + hideAlerts(); + + var element = document.createElement('div'); + var id = generateRandomId(); + element.id = id; + + var elementMessage = document.createElement('div'); + elementMessage.classList.add(options.classes.textbox); + elementMessage.classList.add(options.classes.backgroundInfo); + elementMessage.innerHTML = '
' + text + '
'; + + var elementButtonLeft = document.createElement('div'); + elementButtonLeft.classList.add(options.classes.button); + elementButtonLeft.classList.add(options.classes.elementHalf); + elementButtonLeft.classList.add(options.classes.backgroundSuccess); + elementButtonLeft.innerHTML = yesText; + elementButtonLeft.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (yesCallback) yesCallback(); + }; + + var elementButtonRight = document.createElement('div'); + elementButtonRight.classList.add(options.classes.button); + elementButtonRight.classList.add(options.classes.elementHalf); + elementButtonRight.classList.add(options.classes.backgroundError); + elementButtonRight.innerHTML = noText; + elementButtonRight.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (noCallback) noCallback(); + }; + + element.appendChild(elementMessage); + element.appendChild(elementButtonLeft); + element.appendChild(elementButtonRight); + + element.listener = function (event) { + if (enterClicked(event)) elementButtonLeft.click();else if (escapeClicked(event)) elementButtonRight.click(); + }; + + addToDocument(element); + + addOverlayToDocument(element); + }; + + var input = function input(_ref4, submitCallback, cancelCallback) { + var text = _ref4.text, + _ref4$submitText = _ref4.submitText, + submitText = _ref4$submitText === undefined ? 'Submit' : _ref4$submitText, + _ref4$cancelText = _ref4.cancelText, + cancelText = _ref4$cancelText === undefined ? 'Cancel' : _ref4$cancelText, + settings = _objectWithoutProperties(_ref4, ['text', 'submitText', 'cancelText']); + + blur(); + hideAlerts(); + + var element = document.createElement('div'); + var id = generateRandomId(); + element.id = id; + + var elementMessage = document.createElement('div'); + elementMessage.classList.add(options.classes.textbox); + elementMessage.classList.add(options.classes.backgroundInfo); + elementMessage.innerHTML = '
' + text + '
'; + + var elementInput = document.createElement('input'); + elementInput.classList.add(options.classes.inputField); + + elementInput.setAttribute('autocapitalize', settings.autocapitalize || 'none'); + elementInput.setAttribute('autocomplete', settings.autocomplete || 'off'); + elementInput.setAttribute('autocorrect', settings.autocorrect || 'off'); + elementInput.setAttribute('autofocus', settings.autofocus || 'true'); + elementInput.setAttribute('inputmode', settings.inputmode || 'verbatim'); + elementInput.setAttribute('max', settings.max || ''); + elementInput.setAttribute('maxlength', settings.maxlength || ''); + elementInput.setAttribute('min', settings.min || ''); + elementInput.setAttribute('minlength', settings.minlength || ''); + elementInput.setAttribute('placeholder', settings.placeholder || ''); + elementInput.setAttribute('spellcheck', settings.spellcheck || 'default'); + elementInput.setAttribute('step', settings.step || 'any'); + elementInput.setAttribute('type', settings.type || 'text'); + + elementInput.value = settings.value || ''; + + // As-you-type input restrictions + if (settings.allowed) { + elementInput.oninput = function () { + var regex = void 0; + if (Array.isArray(settings.allowed)) { + var regexString = ''; + var allowed = settings.allowed; + for (var i = 0; i < allowed.length; i++) { + if (allowed[i] === 'an') regexString += '0-9a-zA-Z';else if (allowed[i] === 'a') regexString += 'a-zA-Z';else if (allowed[i] === 'n') regexString += '0-9'; + if (allowed[i] === 's') regexString += ' '; + } + regex = new RegExp('[^' + regexString + ']', 'g'); + } else if (_typeof(settings.allowed) === 'object') { + regex = settings.allowed; + } + elementInput.value = elementInput.value.replace(regex, ''); + }; + } + + var elementButtonLeft = document.createElement('div'); + elementButtonLeft.classList.add(options.classes.button); + elementButtonLeft.classList.add(options.classes.elementHalf); + elementButtonLeft.classList.add(options.classes.backgroundSuccess); + elementButtonLeft.innerHTML = submitText; + elementButtonLeft.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (submitCallback) submitCallback(elementInput.value); + }; + + var elementButtonRight = document.createElement('div'); + elementButtonRight.classList.add(options.classes.button); + elementButtonRight.classList.add(options.classes.elementHalf); + elementButtonRight.classList.add(options.classes.backgroundError); + elementButtonRight.innerHTML = cancelText; + elementButtonRight.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (cancelCallback) cancelCallback(elementInput.value); + }; + + element.appendChild(elementMessage); + element.appendChild(elementInput); + element.appendChild(elementButtonLeft); + element.appendChild(elementButtonRight); + + element.listener = function (event) { + if (enterClicked(event)) elementButtonLeft.click();else if (escapeClicked(event)) elementButtonRight.click(); + }; + + addToDocument(element); + + elementInput.focus(); + + addOverlayToDocument(element); + }; + + exports.input = input; + var select = exports.select = function select(_ref5) { + var text = _ref5.text, + _ref5$cancelText = _ref5.cancelText, + cancelText = _ref5$cancelText === undefined ? 'Cancel' : _ref5$cancelText, + choices = _ref5.choices; + + blur(); + hideAlerts(); + + var from = 'bottom'; + + var element = document.createElement('div'); + var id = generateRandomId(); + element.id = id; + + var elementMessage = document.createElement('div'); + elementMessage.classList.add(options.classes.textbox); + elementMessage.classList.add(options.classes.backgroundInfo); + elementMessage.innerHTML = '
' + text + '
'; + + element.appendChild(elementMessage); + + choices.forEach(function (_ref6, index) { + var _ref6$type = _ref6.type, + type = _ref6$type === undefined ? 1 : _ref6$type, + text = _ref6.text, + handler = _ref6.handler; + + var elementChoice = document.createElement('div'); + elementChoice.classList.add(typeToClassLookup[type]); + elementChoice.classList.add(options.classes.button); + elementChoice.classList.add(options.classes.selectChoice); + + var nextChoice = choices[index + 1]; + if (nextChoice && !nextChoice.type) nextChoice.type = 1; + if (nextChoice && nextChoice.type === type) { + elementChoice.classList.add(options.classes.selectChoiceRepeated); + } + + elementChoice.innerHTML = text; + elementChoice.onclick = function () { + removeFromDocument(id, from); + removeOverlayFromDocument(); + handler(); + }; + + element.appendChild(elementChoice); + }); + + var elementCancel = document.createElement('div'); + elementCancel.classList.add(options.classes.backgroundNeutral); + elementCancel.classList.add(options.classes.button); + elementCancel.innerHTML = cancelText; + elementCancel.onclick = function () { + removeFromDocument(id, from); + removeOverlayFromDocument(); + }; + + element.appendChild(elementCancel); + + element.listener = function (event) { + if (escapeClicked(event)) elementCancel.click(); + }; + + addToDocument(element, from); + + addOverlayToDocument(element, from); + }; + + var date = exports.date = function date(_ref7, submitCallback, cancelCallback) { + var _ref7$value = _ref7.value, + value = _ref7$value === undefined ? new Date() : _ref7$value, + _ref7$submitText = _ref7.submitText, + submitText = _ref7$submitText === undefined ? 'OK' : _ref7$submitText, + _ref7$cancelText = _ref7.cancelText, + cancelText = _ref7$cancelText === undefined ? 'Cancel' : _ref7$cancelText; + + blur(); + hideAlerts(); + + var arrow = '▾'; + + var element = document.createElement('div'); + var id = generateRandomId(); + element.id = id; + + var elementDateSelector = document.createElement('div'); + elementDateSelector.classList.add(options.classes.backgroundInfo); + + var elementDateSelectorInner = document.createElement('div'); + elementDateSelectorInner.classList.add(options.classes.dateSelectorInner); + + var elementDateUpMonth = document.createElement('div'); + elementDateUpMonth.classList.add(options.classes.button); + elementDateUpMonth.classList.add(options.classes.elementThird); + elementDateUpMonth.classList.add(options.classes.dateSelectorUp); + elementDateUpMonth.innerHTML = arrow; + + var elementDateUpDay = document.createElement('div'); + elementDateUpDay.classList.add(options.classes.button); + elementDateUpDay.classList.add(options.classes.elementThird); + elementDateUpDay.classList.add(options.classes.dateSelectorUp); + elementDateUpDay.innerHTML = arrow; + + var elementDateUpYear = document.createElement('div'); + elementDateUpYear.classList.add(options.classes.button); + elementDateUpYear.classList.add(options.classes.elementThird); + elementDateUpYear.classList.add(options.classes.dateSelectorUp); + elementDateUpYear.innerHTML = arrow; + + var elementDateMonth = document.createElement('div'); + elementDateMonth.classList.add(options.classes.element); + elementDateMonth.classList.add(options.classes.elementThird); + elementDateMonth.innerHTML = options.dateMonths[value.getMonth()]; + + var elementDateDay = document.createElement('div'); + elementDateDay.classList.add(options.classes.element); + elementDateDay.classList.add(options.classes.elementThird); + elementDateDay.innerHTML = value.getDate(); + + var elementDateYear = document.createElement('div'); + elementDateYear.classList.add(options.classes.element); + elementDateYear.classList.add(options.classes.elementThird); + elementDateYear.innerHTML = value.getFullYear(); + + var elementDateDownMonth = document.createElement('div'); + elementDateDownMonth.classList.add(options.classes.button); + elementDateDownMonth.classList.add(options.classes.elementThird); + elementDateDownMonth.innerHTML = arrow; + + var elementDateDownDay = document.createElement('div'); + elementDateDownDay.classList.add(options.classes.button); + elementDateDownDay.classList.add(options.classes.elementThird); + elementDateDownDay.innerHTML = arrow; + + var elementDateDownYear = document.createElement('div'); + elementDateDownYear.classList.add(options.classes.button); + elementDateDownYear.classList.add(options.classes.elementThird); + elementDateDownYear.innerHTML = arrow; + + var setValueHTML = function setValueHTML(date) { + elementDateMonth.innerHTML = options.dateMonths[date.getMonth()]; + elementDateDay.innerHTML = date.getDate(); + elementDateYear.innerHTML = date.getFullYear(); + }; + + elementDateUpMonth.onclick = function () { + value.setMonth(value.getMonth() - 1); + setValueHTML(value); + }; + + elementDateUpDay.onclick = function () { + value.setDate(value.getDate() - 1); + setValueHTML(value); + }; + + elementDateUpYear.onclick = function () { + value.setFullYear(value.getFullYear() - 1); + setValueHTML(value); + }; + + elementDateDownMonth.onclick = function () { + value.setMonth(value.getMonth() + 1); + setValueHTML(value); + }; + + elementDateDownDay.onclick = function () { + value.setDate(value.getDate() + 1); + setValueHTML(value); + }; + + elementDateDownYear.onclick = function () { + value.setFullYear(value.getFullYear() + 1); + setValueHTML(value); + }; + + var elementButtonLeft = document.createElement('div'); + elementButtonLeft.classList.add(options.classes.button); + elementButtonLeft.classList.add(options.classes.elementHalf); + elementButtonLeft.classList.add(options.classes.backgroundSuccess); + elementButtonLeft.innerHTML = submitText; + elementButtonLeft.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (submitCallback) submitCallback(value); + }; + + var elementButtonRight = document.createElement('div'); + elementButtonRight.classList.add(options.classes.button); + elementButtonRight.classList.add(options.classes.elementHalf); + elementButtonRight.classList.add(options.classes.backgroundError); + elementButtonRight.innerHTML = cancelText; + elementButtonRight.onclick = function () { + removeFromDocument(id); + removeOverlayFromDocument(); + if (cancelCallback) cancelCallback(value); + }; + + elementDateSelectorInner.appendChild(elementDateUpMonth); + elementDateSelectorInner.appendChild(elementDateUpDay); + elementDateSelectorInner.appendChild(elementDateUpYear); + elementDateSelectorInner.appendChild(elementDateMonth); + elementDateSelectorInner.appendChild(elementDateDay); + elementDateSelectorInner.appendChild(elementDateYear); + elementDateSelectorInner.appendChild(elementDateDownMonth); + elementDateSelectorInner.appendChild(elementDateDownDay); + elementDateSelectorInner.appendChild(elementDateDownYear); + elementDateSelector.appendChild(elementDateSelectorInner); + element.appendChild(elementDateSelector); + element.appendChild(elementButtonLeft); + element.appendChild(elementButtonRight); + + element.listener = function (event) { + if (enterClicked(event)) elementButtonLeft.click();else if (escapeClicked(event)) elementButtonRight.click(); + }; + + addToDocument(element); + + addOverlayToDocument(element); + }; +}); \ No newline at end of file diff --git a/dist/notie.min.css b/dist/notie.min.css new file mode 100644 index 0000000..ef50308 --- /dev/null +++ b/dist/notie.min.css @@ -0,0 +1 @@ +.notie-container{font-size:1.3rem;height:auto;left:0;position:fixed;text-align:center;width:100%;z-index:2;box-sizing:border-box;-o-box-shadow:0 0 5px 0 rgba(0,0,0,.5);-ms-box-shadow:0 0 5px 0 rgba(0,0,0,.5);box-shadow:0 0 5px 0 rgba(0,0,0,.5)}@media screen and (max-width:900px){.notie-container{font-size:1.2rem}}@media screen and (max-width:750px){.notie-container{font-size:1.1rem}}@media screen and (max-width:400px){.notie-container{font-size:1rem}}.notie-background-success{background-color:#57bf57}.notie-background-warning{background-color:#d6a14d}.notie-background-error{background-color:#e1715b}.notie-background-info{background-color:#4d82d6}.notie-background-neutral{background-color:#a0a0a0}.notie-background-overlay{background-color:#fff}.notie-textbox{color:#fff;padding:20px}.notie-textbox-inner{margin:0 auto;max-width:900px}.notie-overlay{height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:1}.notie-button{cursor:pointer}.notie-button,.notie-element{color:#fff;padding:10px}.notie-element-half{width:50%}.notie-element-half,.notie-element-third{display:inline-block;box-sizing:border-box}.notie-element-third{width:33.3333%}.notie-alert{cursor:pointer}.notie-input-field{background-color:#fff;border:0;font-family:inherit;font-size:inherit;outline:0;padding:10px;text-align:center;width:100%;box-sizing:border-box}.notie-select-choice-repeated{border-bottom:1px solid hsla(0,0%,100%,.2);box-sizing:border-box}.notie-date-selector-inner{margin:0 auto;max-width:900px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.notie-date-selector-up{transform:rotate(180deg)} \ No newline at end of file diff --git a/dist/notie.min.js b/dist/notie.min.js new file mode 100644 index 0000000..81578dc --- /dev/null +++ b/dist/notie.min.js @@ -0,0 +1 @@ +!function(e,t){if("function"==typeof define&&define.amd)define(["exports"],t);else if("undefined"!=typeof exports)t(exports);else{var s={exports:{}};t(s.exports),e.notie=s.exports}}(this,function(e){"use strict";function t(e,t){var s={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(s[n]=e[n]);return s}Object.defineProperty(e,"__esModule",{value:!0});var s="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},n=Object.assign||function(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:"top";e.classList.add(a.classes.container),e.style[t]="-10000px",document.body.appendChild(e),e.style[t]="-"+e.offsetHeight+"px",e.listener&&window.addEventListener("keydown",e.listener),c().then(function(){e.style.transition=r(),e.style[t]=0})},p=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"top",s=document.getElementById(e);s&&(s.style[t]="-"+s.offsetHeight+"px",s.listener&&window.removeEventListener("keydown",s.listener),i(a.transitionDuration).then(function(){s.parentNode&&s.parentNode.removeChild(s)}))},f=function(e,t){var s=document.createElement("div");s.id=a.ids.overlay,s.classList.add(a.classes.overlay),s.classList.add(a.classes.backgroundOverlay),s.style.opacity=0,e&&a.overlayClickDismiss&&(s.onclick=function(){p(e.id,t),b()}),document.body.appendChild(s),c().then(function(){s.style.transition=r(),s.style.opacity=a.overlayOpacity})},b=function(){var e=document.getElementById(a.ids.overlay);e.style.opacity=0,i(a.transitionDuration).then(function(){e.parentNode&&e.parentNode.removeChild(e)})},x=e.hideAlerts=function(e){var t=document.getElementsByClassName(a.classes.alert);if(t.length){for(var s=0;s'+n+"",L.onclick=function(){return p(h)},L.listener=function(e){(u(e)||v(e))&&x()},m(L),r&&r<1&&(r=1),!b&&r&&i(r).then(function(){return p(h)})},e.force=function(e,t){var s=e.type,n=void 0===s?5:s,c=e.text,i=e.buttonText,r=void 0===i?"OK":i;l(),x();var v=document.createElement("div"),L=o();v.id=L;var h=document.createElement("div");h.classList.add(a.classes.textbox),h.classList.add(a.classes.backgroundInfo),h.innerHTML='
'+c+"
";var y=document.createElement("div");y.classList.add(a.classes.button),y.classList.add(d[n]),y.innerHTML=r,y.onclick=function(){p(L),b(),t&&t()},v.appendChild(h),v.appendChild(y),v.listener=function(e){u(e)&&y.click()},m(v),f()},e.confirm=function(e,t,s){var n=e.text,c=e.yesText,i=void 0===c?"Yes":c,d=e.noText,r=void 0===d?"Cancel":d;l(),x();var L=document.createElement("div"),h=o();L.id=h;var y=document.createElement("div");y.classList.add(a.classes.textbox),y.classList.add(a.classes.backgroundInfo),y.innerHTML='
'+n+"
";var g=document.createElement("div");g.classList.add(a.classes.button),g.classList.add(a.classes.elementHalf),g.classList.add(a.classes.backgroundSuccess),g.innerHTML=i,g.onclick=function(){p(h),b(),t&&t()};var k=document.createElement("div");k.classList.add(a.classes.button),k.classList.add(a.classes.elementHalf),k.classList.add(a.classes.backgroundError),k.innerHTML=r,k.onclick=function(){p(h),b(),s&&s()},L.appendChild(y),L.appendChild(g),L.appendChild(k),L.listener=function(e){u(e)?g.click():v(e)&&k.click()},m(L),f(L)},function(e,n,c){var i=e.text,d=e.submitText,r=void 0===d?"Submit":d,L=e.cancelText,h=void 0===L?"Cancel":L,y=t(e,["text","submitText","cancelText"]);l(),x();var g=document.createElement("div"),k=o();g.id=k;var T=document.createElement("div");T.classList.add(a.classes.textbox),T.classList.add(a.classes.backgroundInfo),T.innerHTML='
'+i+"
";var E=document.createElement("input");E.classList.add(a.classes.inputField),E.setAttribute("autocapitalize",y.autocapitalize||"none"),E.setAttribute("autocomplete",y.autocomplete||"off"),E.setAttribute("autocorrect",y.autocorrect||"off"),E.setAttribute("autofocus",y.autofocus||"true"),E.setAttribute("inputmode",y.inputmode||"verbatim"),E.setAttribute("max",y.max||""),E.setAttribute("maxlength",y.maxlength||""),E.setAttribute("min",y.min||""),E.setAttribute("minlength",y.minlength||""),E.setAttribute("placeholder",y.placeholder||""),E.setAttribute("spellcheck",y.spellcheck||"default"),E.setAttribute("step",y.step||"any"),E.setAttribute("type",y.type||"text"),E.value=y.value||"",y.allowed&&(E.oninput=function(){var e=void 0;if(Array.isArray(y.allowed)){for(var t="",n=y.allowed,a=0;a'+t+"",r.appendChild(L),c.forEach(function(e,t){var s=e.type,n=void 0===s?1:s,l=e.text,o=e.handler,v=document.createElement("div");v.classList.add(d[n]),v.classList.add(a.classes.button),v.classList.add(a.classes.selectChoice);var m=c[t+1];m&&!m.type&&(m.type=1),m&&m.type===n&&v.classList.add(a.classes.selectChoiceRepeated),v.innerHTML=l,v.onclick=function(){p(u,i),b(),o()},r.appendChild(v)});var h=document.createElement("div");h.classList.add(a.classes.backgroundNeutral),h.classList.add(a.classes.button),h.innerHTML=n,h.onclick=function(){p(u,i),b()},r.appendChild(h),r.listener=function(e){v(e)&&h.click()},m(r,i),f(r,i)},e.date=function(e,t,s){var n=e.value,c=void 0===n?new Date:n,i=e.submitText,d=void 0===i?"OK":i,r=e.cancelText,L=void 0===r?"Cancel":r;l(),x();var h="▾",y=document.createElement("div"),g=o();y.id=g;var k=document.createElement("div");k.classList.add(a.classes.backgroundInfo);var T=document.createElement("div");T.classList.add(a.classes.dateSelectorInner);var E=document.createElement("div");E.classList.add(a.classes.button),E.classList.add(a.classes.elementThird),E.classList.add(a.classes.dateSelectorUp),E.innerHTML=h;var C=document.createElement("div");C.classList.add(a.classes.button),C.classList.add(a.classes.elementThird),C.classList.add(a.classes.dateSelectorUp),C.innerHTML=h;var M=document.createElement("div");M.classList.add(a.classes.button),M.classList.add(a.classes.elementThird),M.classList.add(a.classes.dateSelectorUp),M.innerHTML=h;var H=document.createElement("div");H.classList.add(a.classes.element),H.classList.add(a.classes.elementThird),H.innerHTML=a.dateMonths[c.getMonth()];var S=document.createElement("div");S.classList.add(a.classes.element),S.classList.add(a.classes.elementThird),S.innerHTML=c.getDate();var A=document.createElement("div");A.classList.add(a.classes.element),A.classList.add(a.classes.elementThird),A.innerHTML=c.getFullYear();var w=document.createElement("div");w.classList.add(a.classes.button),w.classList.add(a.classes.elementThird),w.innerHTML=h;var I=document.createElement("div");I.classList.add(a.classes.button),I.classList.add(a.classes.elementThird),I.innerHTML=h;var D=document.createElement("div");D.classList.add(a.classes.button),D.classList.add(a.classes.elementThird),D.innerHTML=h;var O=function(e){H.innerHTML=a.dateMonths[e.getMonth()],S.innerHTML=e.getDate(),A.innerHTML=e.getFullYear()};E.onclick=function(){c.setMonth(c.getMonth()-1),O(c)},C.onclick=function(){c.setDate(c.getDate()-1),O(c)},M.onclick=function(){c.setFullYear(c.getFullYear()-1),O(c)},w.onclick=function(){c.setMonth(c.getMonth()+1),O(c)},I.onclick=function(){c.setDate(c.getDate()+1),O(c)},D.onclick=function(){c.setFullYear(c.getFullYear()+1),O(c)};var N=document.createElement("div");N.classList.add(a.classes.button),N.classList.add(a.classes.elementHalf),N.classList.add(a.classes.backgroundSuccess),N.innerHTML=d,N.onclick=function(){p(g),b(),t&&t(c)};var F=document.createElement("div");F.classList.add(a.classes.button),F.classList.add(a.classes.elementHalf),F.classList.add(a.classes.backgroundError),F.innerHTML=L,F.onclick=function(){p(g),b(),s&&s(c)},T.appendChild(E),T.appendChild(C),T.appendChild(M),T.appendChild(H),T.appendChild(S),T.appendChild(A),T.appendChild(w),T.appendChild(I),T.appendChild(D),k.appendChild(T),y.appendChild(k),y.appendChild(N),y.appendChild(F),y.listener=function(e){u(e)?N.click():v(e)&&F.click()},m(y),f(y)}}); \ No newline at end of file