diff options
| author | Bryan Newbold <bnewbold@archive.org> | 2021-01-19 19:45:14 -0800 | 
|---|---|---|
| committer | Bryan Newbold <bnewbold@archive.org> | 2021-01-19 19:49:39 -0800 | 
| commit | 7e9742a604baddebacafc052032f63d3d433b5d0 (patch) | |
| tree | 9f9804c306b668144f382cf719aefec5228eecaf | |
| parent | 892da3ccc83f398eb9f92785e79ac624894fbabe (diff) | |
| download | fatcat-scholar-7e9742a604baddebacafc052032f63d3d433b5d0.tar.gz fatcat-scholar-7e9742a604baddebacafc052032f63d3d433b5d0.zip | |
html: remove modal/polyfill code
| -rw-r--r-- | fatcat_scholar/static/dialog-polyfill.css | 37 | ||||
| -rw-r--r-- | fatcat_scholar/static/dialog-polyfill.js | 866 | ||||
| -rw-r--r-- | fatcat_scholar/templates/base.html | 71 | 
3 files changed, 0 insertions, 974 deletions
| diff --git a/fatcat_scholar/static/dialog-polyfill.css b/fatcat_scholar/static/dialog-polyfill.css deleted file mode 100644 index 6b38bf0..0000000 --- a/fatcat_scholar/static/dialog-polyfill.css +++ /dev/null @@ -1,37 +0,0 @@ -dialog { -  position: absolute; -  left: 0; right: 0; -  width: -moz-fit-content; -  width: -webkit-fit-content; -  width: fit-content; -  height: -moz-fit-content; -  height: -webkit-fit-content; -  height: fit-content; -  margin: auto; -  border: solid; -  padding: 1em; -  background: white; -  color: black; -  display: block; -} - -dialog:not([open]) { -  display: none; -} - -dialog + .backdrop { -  position: fixed; -  top: 0; right: 0; bottom: 0; left: 0; -  background: rgba(0,0,0,0.1); -} - -._dialog_overlay { -  position: fixed; -  top: 0; right: 0; bottom: 0; left: 0; -} - -dialog.fixed { -  position: fixed; -  top: 50%; -  transform: translate(0, -50%); -}
\ No newline at end of file diff --git a/fatcat_scholar/static/dialog-polyfill.js b/fatcat_scholar/static/dialog-polyfill.js deleted file mode 100644 index aee7d96..0000000 --- a/fatcat_scholar/static/dialog-polyfill.js +++ /dev/null @@ -1,866 +0,0 @@ -(function (global, factory) { -  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : -  typeof define === 'function' && define.amd ? define(factory) : -  (global = global || self, global.dialogPolyfill = factory()); -}(this, function () { 'use strict'; - -  // nb. This is for IE10 and lower _only_. -  var supportCustomEvent = window.CustomEvent; -  if (!supportCustomEvent || typeof supportCustomEvent === 'object') { -    supportCustomEvent = function CustomEvent(event, x) { -      x = x || {}; -      var ev = document.createEvent('CustomEvent'); -      ev.initCustomEvent(event, !!x.bubbles, !!x.cancelable, x.detail || null); -      return ev; -    }; -    supportCustomEvent.prototype = window.Event.prototype; -  } - -  /** -   * Dispatches the passed event to both an "on<type>" handler as well as via the -   * normal dispatch operation. Does not bubble. -   * -   * @param {!EventTarget} target -   * @param {!Event} event -   * @return {boolean} -   */ -  function safeDispatchEvent(target, event) { -    var check = 'on' + event.type.toLowerCase(); -    if (typeof target[check] === 'function') { -      target[check](event); -    } -    return target.dispatchEvent(event); -  } - -  /** -   * @param {Element} el to check for stacking context -   * @return {boolean} whether this el or its parents creates a stacking context -   */ -  function createsStackingContext(el) { -    while (el && el !== document.body) { -      var s = window.getComputedStyle(el); -      var invalid = function(k, ok) { -        return !(s[k] === undefined || s[k] === ok); -      }; - -      if (s.opacity < 1 || -          invalid('zIndex', 'auto') || -          invalid('transform', 'none') || -          invalid('mixBlendMode', 'normal') || -          invalid('filter', 'none') || -          invalid('perspective', 'none') || -          s['isolation'] === 'isolate' || -          s.position === 'fixed' || -          s.webkitOverflowScrolling === 'touch') { -        return true; -      } -      el = el.parentElement; -    } -    return false; -  } - -  /** -   * Finds the nearest <dialog> from the passed element. -   * -   * @param {Element} el to search from -   * @return {HTMLDialogElement} dialog found -   */ -  function findNearestDialog(el) { -    while (el) { -      if (el.localName === 'dialog') { -        return /** @type {HTMLDialogElement} */ (el); -      } -      if (el.parentElement) { -        el = el.parentElement; -      } else if (el.parentNode) { -        el = el.parentNode.host; -      } else { -        el = null; -      } -    } -    return null; -  } - -  /** -   * Blur the specified element, as long as it's not the HTML body element. -   * This works around an IE9/10 bug - blurring the body causes Windows to -   * blur the whole application. -   * -   * @param {Element} el to blur -   */ -  function safeBlur(el) { -    // Find the actual focused element when the active element is inside a shadow root -    while (el && el.shadowRoot && el.shadowRoot.activeElement) { -      el = el.shadowRoot.activeElement; -    } - -    if (el && el.blur && el !== document.body) { -      el.blur(); -    } -  } - -  /** -   * @param {!NodeList} nodeList to search -   * @param {Node} node to find -   * @return {boolean} whether node is inside nodeList -   */ -  function inNodeList(nodeList, node) { -    for (var i = 0; i < nodeList.length; ++i) { -      if (nodeList[i] === node) { -        return true; -      } -    } -    return false; -  } - -  /** -   * @param {HTMLFormElement} el to check -   * @return {boolean} whether this form has method="dialog" -   */ -  function isFormMethodDialog(el) { -    if (!el || !el.hasAttribute('method')) { -      return false; -    } -    return el.getAttribute('method').toLowerCase() === 'dialog'; -  } - -  /** -   * @param {!DocumentFragment|!Element} hostElement -   * @return {?Element} -   */ -  function findFocusableElementWithin(hostElement) { -    // Note that this is 'any focusable area'. This list is probably not exhaustive, but the -    // alternative involves stepping through and trying to focus everything. -    var opts = ['button', 'input', 'keygen', 'select', 'textarea']; -    var query = opts.map(function(el) { -      return el + ':not([disabled])'; -    }); -    // TODO(samthor): tabindex values that are not numeric are not focusable. -    query.push('[tabindex]:not([disabled]):not([tabindex=""])');  // tabindex != "", not disabled -    var target = hostElement.querySelector(query.join(', ')); - -    if (!target && 'attachShadow' in Element.prototype) { -      // If we haven't found a focusable target, see if the host element contains an element -      // which has a shadowRoot. -      // Recursively search for the first focusable item in shadow roots. -      var elems = hostElement.querySelectorAll('*'); -      for (var i = 0; i < elems.length; i++) { -        if (elems[i].tagName && elems[i].shadowRoot) { -          target = findFocusableElementWithin(elems[i].shadowRoot); -          if (target) { -            break; -          } -        } -      } -    } -    return target; -  } - -  /** -   * Determines if an element is attached to the DOM. -   * @param {Element} element to check -   * @return {boolean} whether the element is in DOM -   */ -  function isConnected(element) { -    return element.isConnected || document.body.contains(element); -  } - -  /** -   * @param {!Event} event -   * @return {?Element} -   */ -  function findFormSubmitter(event) { -    if (event.submitter) { -      return event.submitter; -    } - -    var form = event.target; -    if (!(form instanceof HTMLFormElement)) { -      return null; -    } - -    var submitter = dialogPolyfill.formSubmitter; -    if (!submitter) { -      var target = event.target; -      var root = ('getRootNode' in target && target.getRootNode() || document); -      submitter = root.activeElement; -    } - -    if (!submitter || submitter.form !== form) { -      return null; -    } -    return submitter; -  } - -  /** -   * @param {!Event} event -   */ -  function maybeHandleSubmit(event) { -    if (event.defaultPrevented) { -      return; -    } -    var form = /** @type {!HTMLFormElement} */ (event.target); - -    // We'd have a value if we clicked on an imagemap. -    var value = dialogPolyfill.imagemapUseValue; -    var submitter = findFormSubmitter(event); -    if (value === null && submitter) { -      value = submitter.value; -    } - -    // There should always be a dialog as this handler is added specifically on them, but check just -    // in case. -    var dialog = findNearestDialog(form); -    if (!dialog) { -      return; -    } - -    // Prefer formmethod on the button. -    var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method'); -    if (formmethod !== 'dialog') { -      return; -    } -    event.preventDefault(); - -    if (value != null) { -      // nb. we explicitly check against null/undefined -      dialog.close(value); -    } else { -      dialog.close(); -    } -  } - -  /** -   * @param {!HTMLDialogElement} dialog to upgrade -   * @constructor -   */ -  function dialogPolyfillInfo(dialog) { -    this.dialog_ = dialog; -    this.replacedStyleTop_ = false; -    this.openAsModal_ = false; - -    // Set a11y role. Browsers that support dialog implicitly know this already. -    if (!dialog.hasAttribute('role')) { -      dialog.setAttribute('role', 'dialog'); -    } - -    dialog.show = this.show.bind(this); -    dialog.showModal = this.showModal.bind(this); -    dialog.close = this.close.bind(this); - -    dialog.addEventListener('submit', maybeHandleSubmit, false); - -    if (!('returnValue' in dialog)) { -      dialog.returnValue = ''; -    } - -    if ('MutationObserver' in window) { -      var mo = new MutationObserver(this.maybeHideModal.bind(this)); -      mo.observe(dialog, {attributes: true, attributeFilter: ['open']}); -    } else { -      // IE10 and below support. Note that DOMNodeRemoved etc fire _before_ removal. They also -      // seem to fire even if the element was removed as part of a parent removal. Use the removed -      // events to force downgrade (useful if removed/immediately added). -      var removed = false; -      var cb = function() { -        removed ? this.downgradeModal() : this.maybeHideModal(); -        removed = false; -      }.bind(this); -      var timeout; -      var delayModel = function(ev) { -        if (ev.target !== dialog) { return; }  // not for a child element -        var cand = 'DOMNodeRemoved'; -        removed |= (ev.type.substr(0, cand.length) === cand); -        window.clearTimeout(timeout); -        timeout = window.setTimeout(cb, 0); -      }; -      ['DOMAttrModified', 'DOMNodeRemoved', 'DOMNodeRemovedFromDocument'].forEach(function(name) { -        dialog.addEventListener(name, delayModel); -      }); -    } -    // Note that the DOM is observed inside DialogManager while any dialog -    // is being displayed as a modal, to catch modal removal from the DOM. - -    Object.defineProperty(dialog, 'open', { -      set: this.setOpen.bind(this), -      get: dialog.hasAttribute.bind(dialog, 'open') -    }); - -    this.backdrop_ = document.createElement('div'); -    this.backdrop_.className = 'backdrop'; -    this.backdrop_.addEventListener('mouseup'  , this.backdropMouseEvent_.bind(this)); -    this.backdrop_.addEventListener('mousedown', this.backdropMouseEvent_.bind(this)); -    this.backdrop_.addEventListener('click'    , this.backdropMouseEvent_.bind(this)); -  } - -  dialogPolyfillInfo.prototype = /** @type {HTMLDialogElement.prototype} */ ({ - -    get dialog() { -      return this.dialog_; -    }, - -    /** -     * Maybe remove this dialog from the modal top layer. This is called when -     * a modal dialog may no longer be tenable, e.g., when the dialog is no -     * longer open or is no longer part of the DOM. -     */ -    maybeHideModal: function() { -      if (this.dialog_.hasAttribute('open') && isConnected(this.dialog_)) { return; } -      this.downgradeModal(); -    }, - -    /** -     * Remove this dialog from the modal top layer, leaving it as a non-modal. -     */ -    downgradeModal: function() { -      if (!this.openAsModal_) { return; } -      this.openAsModal_ = false; -      this.dialog_.style.zIndex = ''; - -      // This won't match the native <dialog> exactly because if the user set top on a centered -      // polyfill dialog, that top gets thrown away when the dialog is closed. Not sure it's -      // possible to polyfill this perfectly. -      if (this.replacedStyleTop_) { -        this.dialog_.style.top = ''; -        this.replacedStyleTop_ = false; -      } - -      // Clear the backdrop and remove from the manager. -      this.backdrop_.parentNode && this.backdrop_.parentNode.removeChild(this.backdrop_); -      dialogPolyfill.dm.removeDialog(this); -    }, - -    /** -     * @param {boolean} value whether to open or close this dialog -     */ -    setOpen: function(value) { -      if (value) { -        this.dialog_.hasAttribute('open') || this.dialog_.setAttribute('open', ''); -      } else { -        this.dialog_.removeAttribute('open'); -        this.maybeHideModal();  // nb. redundant with MutationObserver -      } -    }, - -    /** -     * Handles mouse events ('mouseup', 'mousedown', 'click') on the fake .backdrop element, redirecting them as if -     * they were on the dialog itself. -     * -     * @param {!Event} e to redirect -     */ -    backdropMouseEvent_: function(e) { -      if (!this.dialog_.hasAttribute('tabindex')) { -        // Clicking on the backdrop should move the implicit cursor, even if dialog cannot be -        // focused. Create a fake thing to focus on. If the backdrop was _before_ the dialog, this -        // would not be needed - clicks would move the implicit cursor there. -        var fake = document.createElement('div'); -        this.dialog_.insertBefore(fake, this.dialog_.firstChild); -        fake.tabIndex = -1; -        fake.focus(); -        this.dialog_.removeChild(fake); -      } else { -        this.dialog_.focus(); -      } - -      var redirectedEvent = document.createEvent('MouseEvents'); -      redirectedEvent.initMouseEvent(e.type, e.bubbles, e.cancelable, window, -          e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, -          e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget); -      this.dialog_.dispatchEvent(redirectedEvent); -      e.stopPropagation(); -    }, - -    /** -     * Focuses on the first focusable element within the dialog. This will always blur the current -     * focus, even if nothing within the dialog is found. -     */ -    focus_: function() { -      // Find element with `autofocus` attribute, or fall back to the first form/tabindex control. -      var target = this.dialog_.querySelector('[autofocus]:not([disabled])'); -      if (!target && this.dialog_.tabIndex >= 0) { -        target = this.dialog_; -      } -      if (!target) { -        target = findFocusableElementWithin(this.dialog_); -      } -      safeBlur(document.activeElement); -      target && target.focus(); -    }, - -    /** -     * Sets the zIndex for the backdrop and dialog. -     * -     * @param {number} dialogZ -     * @param {number} backdropZ -     */ -    updateZIndex: function(dialogZ, backdropZ) { -      if (dialogZ < backdropZ) { -        throw new Error('dialogZ should never be < backdropZ'); -      } -      this.dialog_.style.zIndex = dialogZ; -      this.backdrop_.style.zIndex = backdropZ; -    }, - -    /** -     * Shows the dialog. If the dialog is already open, this does nothing. -     */ -    show: function() { -      if (!this.dialog_.open) { -        this.setOpen(true); -        this.focus_(); -      } -    }, - -    /** -     * Show this dialog modally. -     */ -    showModal: function() { -      if (this.dialog_.hasAttribute('open')) { -        throw new Error('Failed to execute \'showModal\' on dialog: The element is already open, and therefore cannot be opened modally.'); -      } -      if (!isConnected(this.dialog_)) { -        throw new Error('Failed to execute \'showModal\' on dialog: The element is not in a Document.'); -      } -      if (!dialogPolyfill.dm.pushDialog(this)) { -        throw new Error('Failed to execute \'showModal\' on dialog: There are too many open modal dialogs.'); -      } - -      if (createsStackingContext(this.dialog_.parentElement)) { -        console.warn('A dialog is being shown inside a stacking context. ' + -            'This may cause it to be unusable. For more information, see this link: ' + -            'https://github.com/GoogleChrome/dialog-polyfill/#stacking-context'); -      } - -      this.setOpen(true); -      this.openAsModal_ = true; - -      // Optionally center vertically, relative to the current viewport. -      if (dialogPolyfill.needsCentering(this.dialog_)) { -        dialogPolyfill.reposition(this.dialog_); -        this.replacedStyleTop_ = true; -      } else { -        this.replacedStyleTop_ = false; -      } - -      // Insert backdrop. -      this.dialog_.parentNode.insertBefore(this.backdrop_, this.dialog_.nextSibling); - -      // Focus on whatever inside the dialog. -      this.focus_(); -    }, - -    /** -     * Closes this HTMLDialogElement. This is optional vs clearing the open -     * attribute, however this fires a 'close' event. -     * -     * @param {string=} opt_returnValue to use as the returnValue -     */ -    close: function(opt_returnValue) { -      if (!this.dialog_.hasAttribute('open')) { -        throw new Error('Failed to execute \'close\' on dialog: The element does not have an \'open\' attribute, and therefore cannot be closed.'); -      } -      this.setOpen(false); - -      // Leave returnValue untouched in case it was set directly on the element -      if (opt_returnValue !== undefined) { -        this.dialog_.returnValue = opt_returnValue; -      } - -      // Triggering "close" event for any attached listeners on the <dialog>. -      var closeEvent = new supportCustomEvent('close', { -        bubbles: false, -        cancelable: false -      }); -      safeDispatchEvent(this.dialog_, closeEvent); -    } - -  }); - -  var dialogPolyfill = {}; - -  dialogPolyfill.reposition = function(element) { -    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; -    var topValue = scrollTop + (window.innerHeight - element.offsetHeight) / 2; -    element.style.top = Math.max(scrollTop, topValue) + 'px'; -  }; - -  dialogPolyfill.isInlinePositionSetByStylesheet = function(element) { -    for (var i = 0; i < document.styleSheets.length; ++i) { -      var styleSheet = document.styleSheets[i]; -      var cssRules = null; -      // Some browsers throw on cssRules. -      try { -        cssRules = styleSheet.cssRules; -      } catch (e) {} -      if (!cssRules) { continue; } -      for (var j = 0; j < cssRules.length; ++j) { -        var rule = cssRules[j]; -        var selectedNodes = null; -        // Ignore errors on invalid selector texts. -        try { -          selectedNodes = document.querySelectorAll(rule.selectorText); -        } catch(e) {} -        if (!selectedNodes || !inNodeList(selectedNodes, element)) { -          continue; -        } -        var cssTop = rule.style.getPropertyValue('top'); -        var cssBottom = rule.style.getPropertyValue('bottom'); -        if ((cssTop && cssTop !== 'auto') || (cssBottom && cssBottom !== 'auto')) { -          return true; -        } -      } -    } -    return false; -  }; - -  dialogPolyfill.needsCentering = function(dialog) { -    var computedStyle = window.getComputedStyle(dialog); -    if (computedStyle.position !== 'absolute') { -      return false; -    } - -    // We must determine whether the top/bottom specified value is non-auto.  In -    // WebKit/Blink, checking computedStyle.top == 'auto' is sufficient, but -    // Firefox returns the used value. So we do this crazy thing instead: check -    // the inline style and then go through CSS rules. -    if ((dialog.style.top !== 'auto' && dialog.style.top !== '') || -        (dialog.style.bottom !== 'auto' && dialog.style.bottom !== '')) { -      return false; -    } -    return !dialogPolyfill.isInlinePositionSetByStylesheet(dialog); -  }; - -  /** -   * @param {!Element} element to force upgrade -   */ -  dialogPolyfill.forceRegisterDialog = function(element) { -    if (window.HTMLDialogElement || element.showModal) { -      console.warn('This browser already supports <dialog>, the polyfill ' + -          'may not work correctly', element); -    } -    if (element.localName !== 'dialog') { -      throw new Error('Failed to register dialog: The element is not a dialog.'); -    } -    new dialogPolyfillInfo(/** @type {!HTMLDialogElement} */ (element)); -  }; - -  /** -   * @param {!Element} element to upgrade, if necessary -   */ -  dialogPolyfill.registerDialog = function(element) { -    if (!element.showModal) { -      dialogPolyfill.forceRegisterDialog(element); -    } -  }; - -  /** -   * @constructor -   */ -  dialogPolyfill.DialogManager = function() { -    /** @type {!Array<!dialogPolyfillInfo>} */ -    this.pendingDialogStack = []; - -    var checkDOM = this.checkDOM_.bind(this); - -    // The overlay is used to simulate how a modal dialog blocks the document. -    // The blocking dialog is positioned on top of the overlay, and the rest of -    // the dialogs on the pending dialog stack are positioned below it. In the -    // actual implementation, the modal dialog stacking is controlled by the -    // top layer, where z-index has no effect. -    this.overlay = document.createElement('div'); -    this.overlay.className = '_dialog_overlay'; -    this.overlay.addEventListener('click', function(e) { -      this.forwardTab_ = undefined; -      e.stopPropagation(); -      checkDOM([]);  // sanity-check DOM -    }.bind(this)); - -    this.handleKey_ = this.handleKey_.bind(this); -    this.handleFocus_ = this.handleFocus_.bind(this); - -    this.zIndexLow_ = 100000; -    this.zIndexHigh_ = 100000 + 150; - -    this.forwardTab_ = undefined; - -    if ('MutationObserver' in window) { -      this.mo_ = new MutationObserver(function(records) { -        var removed = []; -        records.forEach(function(rec) { -          for (var i = 0, c; c = rec.removedNodes[i]; ++i) { -            if (!(c instanceof Element)) { -              continue; -            } else if (c.localName === 'dialog') { -              removed.push(c); -            } -            removed = removed.concat(c.querySelectorAll('dialog')); -          } -        }); -        removed.length && checkDOM(removed); -      }); -    } -  }; - -  /** -   * Called on the first modal dialog being shown. Adds the overlay and related -   * handlers. -   */ -  dialogPolyfill.DialogManager.prototype.blockDocument = function() { -    document.documentElement.addEventListener('focus', this.handleFocus_, true); -    document.addEventListener('keydown', this.handleKey_); -    this.mo_ && this.mo_.observe(document, {childList: true, subtree: true}); -  }; - -  /** -   * Called on the first modal dialog being removed, i.e., when no more modal -   * dialogs are visible. -   */ -  dialogPolyfill.DialogManager.prototype.unblockDocument = function() { -    document.documentElement.removeEventListener('focus', this.handleFocus_, true); -    document.removeEventListener('keydown', this.handleKey_); -    this.mo_ && this.mo_.disconnect(); -  }; - -  /** -   * Updates the stacking of all known dialogs. -   */ -  dialogPolyfill.DialogManager.prototype.updateStacking = function() { -    var zIndex = this.zIndexHigh_; - -    for (var i = 0, dpi; dpi = this.pendingDialogStack[i]; ++i) { -      dpi.updateZIndex(--zIndex, --zIndex); -      if (i === 0) { -        this.overlay.style.zIndex = --zIndex; -      } -    } - -    // Make the overlay a sibling of the dialog itself. -    var last = this.pendingDialogStack[0]; -    if (last) { -      var p = last.dialog.parentNode || document.body; -      p.appendChild(this.overlay); -    } else if (this.overlay.parentNode) { -      this.overlay.parentNode.removeChild(this.overlay); -    } -  }; - -  /** -   * @param {Element} candidate to check if contained or is the top-most modal dialog -   * @return {boolean} whether candidate is contained in top dialog -   */ -  dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function(candidate) { -    while (candidate = findNearestDialog(candidate)) { -      for (var i = 0, dpi; dpi = this.pendingDialogStack[i]; ++i) { -        if (dpi.dialog === candidate) { -          return i === 0;  // only valid if top-most -        } -      } -      candidate = candidate.parentElement; -    } -    return false; -  }; - -  dialogPolyfill.DialogManager.prototype.handleFocus_ = function(event) { -    var target = event.composedPath ? event.composedPath()[0] : event.target; - -    if (this.containedByTopDialog_(target)) { return; } - -    if (document.activeElement === document.documentElement) { return; } - -    event.preventDefault(); -    event.stopPropagation(); -    safeBlur(/** @type {Element} */ (target)); - -    if (this.forwardTab_ === undefined) { return; }  // move focus only from a tab key - -    var dpi = this.pendingDialogStack[0]; -    var dialog = dpi.dialog; -    var position = dialog.compareDocumentPosition(target); -    if (position & Node.DOCUMENT_POSITION_PRECEDING) { -      if (this.forwardTab_) { -        // forward -        dpi.focus_(); -      } else if (target !== document.documentElement) { -        // backwards if we're not already focused on <html> -        document.documentElement.focus(); -      } -    } - -    return false; -  }; - -  dialogPolyfill.DialogManager.prototype.handleKey_ = function(event) { -    this.forwardTab_ = undefined; -    if (event.keyCode === 27) { -      event.preventDefault(); -      event.stopPropagation(); -      var cancelEvent = new supportCustomEvent('cancel', { -        bubbles: false, -        cancelable: true -      }); -      var dpi = this.pendingDialogStack[0]; -      if (dpi && safeDispatchEvent(dpi.dialog, cancelEvent)) { -        dpi.dialog.close(); -      } -    } else if (event.keyCode === 9) { -      this.forwardTab_ = !event.shiftKey; -    } -  }; - -  /** -   * Finds and downgrades any known modal dialogs that are no longer displayed. Dialogs that are -   * removed and immediately readded don't stay modal, they become normal. -   * -   * @param {!Array<!HTMLDialogElement>} removed that have definitely been removed -   */ -  dialogPolyfill.DialogManager.prototype.checkDOM_ = function(removed) { -    // This operates on a clone because it may cause it to change. Each change also calls -    // updateStacking, which only actually needs to happen once. But who removes many modal dialogs -    // at a time?! -    var clone = this.pendingDialogStack.slice(); -    clone.forEach(function(dpi) { -      if (removed.indexOf(dpi.dialog) !== -1) { -        dpi.downgradeModal(); -      } else { -        dpi.maybeHideModal(); -      } -    }); -  }; - -  /** -   * @param {!dialogPolyfillInfo} dpi -   * @return {boolean} whether the dialog was allowed -   */ -  dialogPolyfill.DialogManager.prototype.pushDialog = function(dpi) { -    var allowed = (this.zIndexHigh_ - this.zIndexLow_) / 2 - 1; -    if (this.pendingDialogStack.length >= allowed) { -      return false; -    } -    if (this.pendingDialogStack.unshift(dpi) === 1) { -      this.blockDocument(); -    } -    this.updateStacking(); -    return true; -  }; - -  /** -   * @param {!dialogPolyfillInfo} dpi -   */ -  dialogPolyfill.DialogManager.prototype.removeDialog = function(dpi) { -    var index = this.pendingDialogStack.indexOf(dpi); -    if (index === -1) { return; } - -    this.pendingDialogStack.splice(index, 1); -    if (this.pendingDialogStack.length === 0) { -      this.unblockDocument(); -    } -    this.updateStacking(); -  }; - -  dialogPolyfill.dm = new dialogPolyfill.DialogManager(); -  dialogPolyfill.formSubmitter = null; -  dialogPolyfill.imagemapUseValue = null; - -  /** -   * Installs global handlers, such as click listers and native method overrides. These are needed -   * even if a no dialog is registered, as they deal with <form method="dialog">. -   */ -  if (window.HTMLDialogElement === undefined) { - -    /** -     * If HTMLFormElement translates method="DIALOG" into 'get', then replace the descriptor with -     * one that returns the correct value. -     */ -    var testForm = document.createElement('form'); -    testForm.setAttribute('method', 'dialog'); -    if (testForm.method !== 'dialog') { -      var methodDescriptor = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'method'); -      if (methodDescriptor) { -        // nb. Some older iOS and older PhantomJS fail to return the descriptor. Don't do anything -        // and don't bother to update the element. -        var realGet = methodDescriptor.get; -        methodDescriptor.get = function() { -          if (isFormMethodDialog(this)) { -            return 'dialog'; -          } -          return realGet.call(this); -        }; -        var realSet = methodDescriptor.set; -        /** @this {HTMLElement} */ -        methodDescriptor.set = function(v) { -          if (typeof v === 'string' && v.toLowerCase() === 'dialog') { -            return this.setAttribute('method', v); -          } -          return realSet.call(this, v); -        }; -        Object.defineProperty(HTMLFormElement.prototype, 'method', methodDescriptor); -      } -    } - -    /** -     * Global 'click' handler, to capture the <input type="submit"> or <button> element which has -     * submitted a <form method="dialog">. Needed as Safari and others don't report this inside -     * document.activeElement. -     */ -    document.addEventListener('click', function(ev) { -      dialogPolyfill.formSubmitter = null; -      dialogPolyfill.imagemapUseValue = null; -      if (ev.defaultPrevented) { return; }  // e.g. a submit which prevents default submission - -      var target = /** @type {Element} */ (ev.target); -      if ('composedPath' in ev) { -        var path = ev.composedPath(); -        target = path.shift() || target; -      } -      if (!target || !isFormMethodDialog(target.form)) { return; } - -      var valid = (target.type === 'submit' && ['button', 'input'].indexOf(target.localName) > -1); -      if (!valid) { -        if (!(target.localName === 'input' && target.type === 'image')) { return; } -        // this is a <input type="image">, which can submit forms -        dialogPolyfill.imagemapUseValue = ev.offsetX + ',' + ev.offsetY; -      } - -      var dialog = findNearestDialog(target); -      if (!dialog) { return; } - -      dialogPolyfill.formSubmitter = target; - -    }, false); - -    /** -     * Global 'submit' handler. This handles submits of `method="dialog"` which are invalid, i.e., -     * outside a dialog. They get prevented. -     */ -    document.addEventListener('submit', function(ev) { -      var form = ev.target; -      var dialog = findNearestDialog(form); -      if (dialog) { -        return;  // ignore, handle there -      } - -      var submitter = findFormSubmitter(ev); -      var formmethod = submitter && submitter.getAttribute('formmethod') || form.getAttribute('method'); -      if (formmethod === 'dialog') { -        ev.preventDefault(); -      } -    }); - -    /** -     * Replace the native HTMLFormElement.submit() method, as it won't fire the -     * submit event and give us a chance to respond. -     */ -    var nativeFormSubmit = HTMLFormElement.prototype.submit; -    var replacementFormSubmit = function () { -      if (!isFormMethodDialog(this)) { -        return nativeFormSubmit.call(this); -      } -      var dialog = findNearestDialog(this); -      dialog && dialog.close(); -    }; -    HTMLFormElement.prototype.submit = replacementFormSubmit; -  } - -  return dialogPolyfill; - -})); diff --git a/fatcat_scholar/templates/base.html b/fatcat_scholar/templates/base.html index 9fd1351..7f1b2cd 100644 --- a/fatcat_scholar/templates/base.html +++ b/fatcat_scholar/templates/base.html @@ -205,58 +205,6 @@        display: inline-block;      } -    .modal-overlay { -      position: absolute; -      top: 0; -      bottom: 0; -      left: 0; -      right: 0; -      background: rgba(0,0,0,0.5); -      transition: opacity 200ms; -      visibility: hidden; -      opacity: 0; -    } -    .modal-overlay .cancel { -      position: absolute; -      width: 100%; -      height: 100%; -      cursor: default; -    } -    .modal-overlay:target { -      visibility: visible; -      opacity: 1; -    } - -    .modal-popup { -        margin: 75px auto; -        padding: 20px; -        background: #fff; -        border: 1px solid #666; -        width: 300px; -        box-shadow: 0 0 50px rgba(0,0,0,0.5); -        position: relative; -    } -    .modal-popup .close { -        position: absolute; -        width: 20px; -        height: 20px; -        top: 20px; -        right: 20px; -        opacity: 0.8; -        transition: all 200ms; -        font-size: 24px; -        font-weight: bold; -        text-decoration: none; -        color: #666; -    } -    .modal-popup:hover { -      opacity: 1; -    } -    .modal-popup .content { -      max-height: 400px; -      overflow: auto; -    } -      details.access-options summary {          text-decoration: none;          color: inherit; @@ -452,25 +400,6 @@  document.getElementById("search_form").onsubmit = function(){    document.getElementById("search_submit_button").classList.add("loading");  }; - -/* conditionally load polyfill for <dialog> */ -if (!(typeof HTMLDialogElement === 'function')) { -  var js = document.createElement('script'); -  js.src = "/static/dialog-polyfill.js"; -  document.head.appendChild(js); -  var link = document.createElement('link'); -  link.rel = "stylesheet" -  link.type = "text/css" -  link.href= "/static/dialog-polyfill.css"; -  js.onload = function() { -    var dialogs = document.querySelectorAll('dialog'); -    for (i = 0; i < dialogs.length; i++) { -      dialogPolyfill.registerDialog(dialogs[i]); -    } -  }; -  document.head.appendChild(link); - -};  </script>  {% if settings.ENABLE_GOATCOUNTER -%}    {# for local testing: <script>window.goatcounter = {allow_local: true};</script> #} | 
