diff --git a/src/components/dialoghelper/dialogHelper.js b/src/components/dialoghelper/dialogHelper.js deleted file mode 100644 index 36bb23bfd7..0000000000 --- a/src/components/dialoghelper/dialogHelper.js +++ /dev/null @@ -1,486 +0,0 @@ -define(['appRouter', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'dom', 'css!./dialoghelper.css', 'scrollStyles'], function (appRouter, focusManager, browser, layoutManager, inputManager, dom) { - 'use strict'; - - var globalOnOpenCallback; - - function enableAnimation() { - - // too slow - if (browser.tv) { - return false; - } - - return browser.supportsCssAnimation(); - } - - function removeCenterFocus(dlg) { - - if (layoutManager.tv) { - if (dlg.classList.contains('scrollX')) { - centerFocus(dlg, true, false); - } - else if (dlg.classList.contains('smoothScrollY')) { - centerFocus(dlg, false, false); - } - } - } - - function tryRemoveElement(elem) { - var parentNode = elem.parentNode; - if (parentNode) { - - // Seeing crashes in edge webview - try { - parentNode.removeChild(elem); - } catch (err) { - console.log('Error removing dialog element: ' + err); - } - } - } - - function DialogHashHandler(dlg, hash, resolve) { - - var self = this; - self.originalUrl = window.location.href; - var activeElement = document.activeElement; - var removeScrollLockOnClose = false; - - function onHashChange(e) { - - var isBack = self.originalUrl === window.location.href; - - if (isBack || !isOpened(dlg)) { - window.removeEventListener('popstate', onHashChange); - } - - if (isBack) { - self.closedByBack = true; - closeDialog(dlg); - } - } - - function onBackCommand(e) { - - if (e.detail.command === 'back') { - self.closedByBack = true; - e.preventDefault(); - e.stopPropagation(); - closeDialog(dlg); - } - } - - function onDialogClosed() { - - if (!isHistoryEnabled(dlg)) { - inputManager.off(dlg, onBackCommand); - } - - window.removeEventListener('popstate', onHashChange); - - removeBackdrop(dlg); - dlg.classList.remove('opened'); - - if (removeScrollLockOnClose) { - document.body.classList.remove('noScroll'); - } - - if (!self.closedByBack && isHistoryEnabled(dlg)) { - var state = history.state || {}; - if (state.dialogId === hash) { - history.back(); - } - } - - if (layoutManager.tv) { - focusManager.focus(activeElement); - } - - if (dlg.getAttribute('data-removeonclose') !== 'false') { - removeCenterFocus(dlg); - - var dialogContainer = dlg.dialogContainer; - if (dialogContainer) { - tryRemoveElement(dialogContainer); - dlg.dialogContainer = null; - } else { - tryRemoveElement(dlg); - } - } - - //resolve(); - // if we just called history.back(), then use a timeout to allow the history events to fire first - setTimeout(function () { - resolve({ - element: dlg, - closedByBack: self.closedByBack - }); - }, 1); - } - - dlg.addEventListener('close', onDialogClosed); - - var center = !dlg.classList.contains('dialog-fixedSize'); - if (center) { - dlg.classList.add('centeredDialog'); - } - - dlg.classList.remove('hide'); - - addBackdropOverlay(dlg); - - dlg.classList.add('opened'); - dlg.dispatchEvent(new CustomEvent('open', { - bubbles: false, - cancelable: false - })); - - if (dlg.getAttribute('data-lockscroll') === 'true' && !document.body.classList.contains('noScroll')) { - document.body.classList.add('noScroll'); - removeScrollLockOnClose = true; - } - - animateDialogOpen(dlg); - - if (isHistoryEnabled(dlg)) { - appRouter.pushState({ dialogId: hash }, "Dialog", '#' + hash); - - window.addEventListener('popstate', onHashChange); - } else { - inputManager.on(dlg, onBackCommand); - } - } - - function addBackdropOverlay(dlg) { - - var backdrop = document.createElement('div'); - backdrop.classList.add('dialogBackdrop'); - - var backdropParent = dlg.dialogContainer || dlg; - backdropParent.parentNode.insertBefore(backdrop, backdropParent); - dlg.backdrop = backdrop; - - // trigger reflow or the backdrop will not animate - void backdrop.offsetWidth; - backdrop.classList.add('dialogBackdropOpened'); - - dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) { - if (e.target === dlg.dialogContainer) { - close(dlg); - } - }, { - passive: true - }); - } - - function isHistoryEnabled(dlg) { - return dlg.getAttribute('data-history') === 'true'; - } - - function open(dlg) { - - if (globalOnOpenCallback) { - globalOnOpenCallback(dlg); - } - - var parent = dlg.parentNode; - if (parent) { - parent.removeChild(dlg); - } - - var dialogContainer = document.createElement('div'); - dialogContainer.classList.add('dialogContainer'); - dialogContainer.appendChild(dlg); - dlg.dialogContainer = dialogContainer; - document.body.appendChild(dialogContainer); - - return new Promise(function (resolve, reject) { - - new DialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve); - }); - } - - function isOpened(dlg) { - - //return dlg.opened; - return !dlg.classList.contains('hide'); - } - - function close(dlg) { - - if (isOpened(dlg)) { - if (isHistoryEnabled(dlg)) { - history.back(); - } else { - closeDialog(dlg); - } - } - } - - function closeDialog(dlg) { - - if (!dlg.classList.contains('hide')) { - - dlg.dispatchEvent(new CustomEvent('closing', { - bubbles: false, - cancelable: false - })); - - var onAnimationFinish = function () { - focusManager.popScope(dlg); - - dlg.classList.add('hide'); - dlg.dispatchEvent(new CustomEvent('close', { - bubbles: false, - cancelable: false - })); - }; - - animateDialogClose(dlg, onAnimationFinish); - } - } - - function animateDialogOpen(dlg) { - - var onAnimationFinish = function () { - focusManager.pushScope(dlg); - if (dlg.getAttribute('data-autofocus') === 'true') { - focusManager.autoFocus(dlg); - } - }; - - if (enableAnimation()) { - - var onFinish = function () { - dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { - once: true - }); - onAnimationFinish(); - }; - dom.addEventListener(dlg, dom.whichAnimationEvent(), onFinish, { - once: true - }); - return; - } - - onAnimationFinish(); - } - - function animateDialogClose(dlg, onAnimationFinish) { - - if (enableAnimation()) { - - var animated = true; - - switch (dlg.animationConfig.exit.name) { - - case 'fadeout': - dlg.style.animation = 'fadeout ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; - break; - case 'scaledown': - dlg.style.animation = 'scaledown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; - break; - case 'slidedown': - dlg.style.animation = 'slidedown ' + dlg.animationConfig.exit.timing.duration + 'ms ease-out normal both'; - break; - default: - animated = false; - break; - } - var onFinish = function () { - dom.removeEventListener(dlg, dom.whichAnimationEvent(), onFinish, { - once: true - }); - onAnimationFinish(); - }; - dom.addEventListener(dlg, dom.whichAnimationEvent(), onFinish, { - once: true - }); - - if (animated) { - return; - } - } - - onAnimationFinish(); - } - - var supportsOverscrollBehavior = 'overscroll-behavior-y' in document.body.style; - - function shouldLockDocumentScroll(options) { - - if (supportsOverscrollBehavior && (options.size || !browser.touch)) { - return false; - } - - if (options.lockScroll != null) { - return options.lockScroll; - } - - if (options.size === 'fullscreen') { - return true; - } - - if (options.size) { - return true; - } - - return browser.touch; - } - - function removeBackdrop(dlg) { - - var backdrop = dlg.backdrop; - - if (!backdrop) { - return; - } - - dlg.backdrop = null; - - var onAnimationFinish = function () { - tryRemoveElement(backdrop); - }; - - if (enableAnimation()) { - - backdrop.classList.remove('dialogBackdropOpened'); - - // this is not firing animatonend - setTimeout(onAnimationFinish, 300); - return; - } - - onAnimationFinish(); - } - - function centerFocus(elem, horiz, on) { - require(['scrollHelper'], function (scrollHelper) { - var fn = on ? 'on' : 'off'; - scrollHelper.centerFocus[fn](elem, horiz); - }); - } - - function createDialog(options) { - - options = options || {}; - - // If there's no native dialog support, use a plain div - // Also not working well in samsung tizen browser, content inside not clickable - // Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog - var dlg = document.createElement('div'); - - dlg.classList.add('focuscontainer'); - dlg.classList.add('hide'); - - if (shouldLockDocumentScroll(options)) { - dlg.setAttribute('data-lockscroll', 'true'); - } - - if (options.enableHistory !== false && appRouter.enableNativeHistory()) { - dlg.setAttribute('data-history', 'true'); - } - - // without this safari will scroll the background instead of the dialog contents - // but not needed here since this is already on top of an existing dialog - // but skip it in IE because it's causing the entire browser to hang - // Also have to disable for firefox because it's causing select elements to not be clickable - if (options.modal !== false) { - dlg.setAttribute('modal', 'modal'); - } - - if (options.autoFocus !== false) { - dlg.setAttribute('data-autofocus', 'true'); - } - - var defaultEntryAnimation; - var defaultExitAnimation; - - defaultEntryAnimation = 'scaleup'; - defaultExitAnimation = 'scaledown'; - var entryAnimation = options.entryAnimation || defaultEntryAnimation; - var exitAnimation = options.exitAnimation || defaultExitAnimation; - - // If it's not fullscreen then lower the default animation speed to make it open really fast - var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280); - var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 120 : 220); - - dlg.animationConfig = { - // scale up - 'entry': { - name: entryAnimation, - timing: { - duration: entryAnimationDuration, - easing: 'ease-out' - } - }, - // fade out - 'exit': { - name: exitAnimation, - timing: { - duration: exitAnimationDuration, - easing: 'ease-out', - fill: 'both' - } - } - }; - - dlg.classList.add('dialog'); - - if (options.scrollX) { - dlg.classList.add('scrollX'); - dlg.classList.add('smoothScrollX'); - - if (layoutManager.tv) { - centerFocus(dlg, true, true); - } - } - else if (options.scrollY !== false) { - dlg.classList.add('smoothScrollY'); - - if (layoutManager.tv) { - centerFocus(dlg, false, true); - } - } - - if (options.removeOnClose) { - dlg.setAttribute('data-removeonclose', 'true'); - } - - if (options.size) { - dlg.classList.add('dialog-fixedSize'); - dlg.classList.add('dialog-' + options.size); - } - - if (enableAnimation()) { - - switch (dlg.animationConfig.entry.name) { - - case 'fadein': - dlg.style.animation = 'fadein ' + entryAnimationDuration + 'ms ease-out normal'; - break; - case 'scaleup': - dlg.style.animation = 'scaleup ' + entryAnimationDuration + 'ms ease-out normal both'; - break; - case 'slideup': - dlg.style.animation = 'slideup ' + entryAnimationDuration + 'ms ease-out normal'; - break; - case 'slidedown': - dlg.style.animation = 'slidedown ' + entryAnimationDuration + 'ms ease-out normal'; - break; - default: - break; - } - } - - return dlg; - } - - return { - open: open, - close: close, - createDialog: createDialog, - setOnOpen: function (val) { - globalOnOpenCallback = val; - } - }; -}); \ No newline at end of file diff --git a/src/components/dialoghelper/dialoghelper.css b/src/components/dialoghelper/dialoghelper.css deleted file mode 100644 index 2cc20b5ff2..0000000000 --- a/src/components/dialoghelper/dialoghelper.css +++ /dev/null @@ -1,173 +0,0 @@ -.dialogContainer { - display: flex; - align-items: center; - justify-content: center; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999999 !important; - contain: strict; - overflow: hidden; - overscroll-behavior: contain; -} - -.dialog { - margin: 0; - border-radius: .2em; - -webkit-font-smoothing: antialiased; - border: 0; - padding: 0; - will-change: transform, opacity; - /* Strict does not work well with actionsheet */ - contain: style paint; - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); -} - -.dialog-fixedSize { - border-radius: 0; - max-height: none; - max-width: none; - contain: layout style paint; -} - -.dialog-fullscreen { - /* Needed due to formDialog style */ - position: fixed !important; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: 0; - box-shadow: none; -} - -@keyframes scaledown { - from { - opacity: 1; - transform: none; - } - - to { - opacity: 0; - transform: scale(.5); - } -} - -@keyframes scaleup { - from { - transform: scale(.5); - opacity: 0; - } - - to { - transform: none; - opacity: 1; - } -} - -@keyframes fadein { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -@keyframes fadeout { - - from { - opacity: 1; - } - - to { - opacity: 0; - } -} - -@keyframes slideup { - from { - opacity: 0; - transform: translate3d(0, 30%, 0); - } - - to { - opacity: 1; - transform: none; - } -} - -@keyframes slidedown { - - from { - opacity: 1; - transform: none; - } - - to { - opacity: 0; - transform: translate3d(0, 20%, 0); - } -} - -@media all and (max-width: 80em), all and (max-height: 45em) { - - .dialog-fixedSize, .dialog-fullscreen-lowres { - position: fixed !important; - top: 0 !important; - bottom: 0 !important; - left: 0 !important; - right: 0 !important; - margin: 0 !important; - box-shadow: none; - } -} - -@media all and (min-width: 80em) and (min-height: 45em) { - - .dialog-medium { - width: 80%; - height: 80%; - } - - .dialog-medium-tall { - width: 80%; - height: 90%; - } - - .dialog-small { - width: 60%; - height: 80%; - } - - .dialog-fullscreen-border { - width: 90%; - height: 90%; - } -} - -.noScroll { - overflow-x: hidden !important; - overflow-y: hidden !important; -} - -.dialogBackdrop { - background-color: #000; - opacity: 0; - position: fixed !important; - top: 0 !important; - bottom: 0 !important; - left: 0 !important; - right: 0 !important; - margin: 0 !important; - z-index: 999999 !important; - transition: opacity ease-out 0.2s; - will-change: opacity; -} - -.dialogBackdropOpened { - opacity: .5; -} diff --git a/src/components/dialoghelper/package.json b/src/components/dialoghelper/package.json deleted file mode 100644 index 71863d045f..0000000000 --- a/src/components/dialoghelper/package.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "main": "dialogHelper.js" -} \ No newline at end of file