@polymer/iron-overlay-behavior
Advanced tools
Comparing version 3.0.0-pre.4 to 3.0.0-pre.6
@@ -1,7 +0,6 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import { IronOverlayBehavior } from '../iron-overlay-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import '../../polymer/polymer.js'; | ||
| import '../iron-overlay-behavior.js'; | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -21,4 +20,4 @@ :host { | ||
| behaviors: [ | ||
| IronOverlayBehavior | ||
| Polymer.IronOverlayBehavior | ||
| ] | ||
| }); |
| import '../polymer/polymer.js'; | ||
| import { dom } from '../polymer/lib/legacy/polymer.dom.js'; | ||
@@ -8,3 +7,3 @@ var p = Element.prototype; | ||
| export const IronFocusablesHelper = { | ||
| Polymer.IronFocusablesHelper = { | ||
@@ -119,6 +118,6 @@ /** | ||
| if (element.localName === 'content' || element.localName === 'slot') { | ||
| children = dom(element).getDistributedNodes(); | ||
| children = Polymer.dom(element).getDistributedNodes(); | ||
| } else { | ||
| // Use shadow root if possible, will check for distributed nodes. | ||
| children = dom(element.root || element).children; | ||
| children = Polymer.dom(element.root || element).children; | ||
| } | ||
@@ -125,0 +124,0 @@ for (var i = 0; i < children.length; i++) { |
@@ -1,7 +0,5 @@ | ||
| import { html } from '../polymer/polymer.js'; | ||
| import { Polymer } from '../polymer/lib/legacy/polymer-fn.js'; | ||
| import { dom } from '../polymer/lib/legacy/polymer.dom.js'; | ||
| import '../polymer/polymer.js'; | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -65,3 +63,3 @@ :host { | ||
| if (this.opened && !this.parentNode) { | ||
| dom(document.body).appendChild(this); | ||
| Polymer.dom(document.body).appendChild(this); | ||
| } | ||
@@ -89,3 +87,3 @@ }, | ||
| if (!this.opened && this.parentNode === document.body) { | ||
| dom(this.parentNode).removeChild(this); | ||
| Polymer.dom(this.parentNode).removeChild(this); | ||
| } | ||
@@ -92,0 +90,0 @@ }, |
| import '../polymer/polymer.js'; | ||
| import { IronFitBehavior } from '../iron-fit-behavior/iron-fit-behavior.js'; | ||
| import { IronResizableBehavior } from '../iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { IronOverlayManager } from './iron-overlay-manager.js'; | ||
| import { IronScrollManager } from './iron-scroll-manager.js'; | ||
| import { IronFocusablesHelper } from './iron-focusables-helper.js'; | ||
| import { dom } from '../polymer/lib/legacy/polymer.dom.js'; | ||
| import '../iron-fit-behavior/iron-fit-behavior.js'; | ||
| import '../iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import './iron-overlay-manager.js'; | ||
| import './iron-scroll-manager.js'; | ||
| import './iron-focusables-helper.js'; | ||
| export const IronOverlayBehaviorImpl = { | ||
| /** @polymerBehavior */ | ||
| Polymer.IronOverlayBehaviorImpl = { | ||
@@ -120,3 +120,3 @@ properties: { | ||
| type: Object, | ||
| value: IronOverlayManager | ||
| value: Polymer.IronOverlayManager | ||
| }, | ||
@@ -155,3 +155,3 @@ | ||
| get _focusNode() { | ||
| return this._focusedChild || dom(this).querySelector('[autofocus]') || this; | ||
| return this._focusedChild || Polymer.dom(this).querySelector('[autofocus]') || this; | ||
| }, | ||
@@ -170,3 +170,3 @@ | ||
| get _focusableNodes() { | ||
| return IronFocusablesHelper.getTabbableNodes(this); | ||
| return Polymer.IronFocusablesHelper.getTabbableNodes(this); | ||
| }, | ||
@@ -199,7 +199,7 @@ | ||
| } | ||
| this._observer = dom(this).observeNodes(this._onNodesChange); | ||
| this._observer = Polymer.dom(this).observeNodes(this._onNodesChange); | ||
| }, | ||
| detached: function() { | ||
| dom(this).unobserveNodes(this._observer); | ||
| Polymer.dom(this).unobserveNodes(this._observer); | ||
| this._observer = null; | ||
@@ -431,3 +431,3 @@ for (var cb in this.__rafs) { | ||
| if (activeElement === document.body || | ||
| dom(this).deepContains(activeElement)) { | ||
| Polymer.dom(this).deepContains(activeElement)) { | ||
| this.__restoreFocusNode.focus(); | ||
@@ -467,3 +467,3 @@ } | ||
| } | ||
| var path = dom(event).path; | ||
| var path = Polymer.dom(event).path; | ||
| if (path.indexOf(this) === -1) { | ||
@@ -621,3 +621,3 @@ event.stopPropagation(); | ||
| if (!isAttached || !opened || !this.__isValidScrollAction(scrollAction)) { | ||
| IronScrollManager.removeScrollLock(this); | ||
| Polymer.IronScrollManager.removeScrollLock(this); | ||
| this.__removeScrollListeners(); | ||
@@ -627,3 +627,3 @@ } else { | ||
| this.__saveScrollPosition(); | ||
| IronScrollManager.pushScrollLock(this); | ||
| Polymer.IronScrollManager.pushScrollLock(this); | ||
| } | ||
@@ -697,3 +697,3 @@ this.__addScrollListeners(); | ||
| // Check if scroll outside the overlay. | ||
| if (dom(event).path.indexOf(this) >= 0) { | ||
| if (Polymer.dom(event).path.indexOf(this) >= 0) { | ||
| return; | ||
@@ -749,2 +749,64 @@ } | ||
| export const IronOverlayBehavior = [IronFitBehavior, IronResizableBehavior, IronOverlayBehaviorImpl]; | ||
| /** | ||
| Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or shown, and displays | ||
| on top of other content. It includes an optional backdrop, and can be used to implement a variety | ||
| of UI controls including dialogs and drop downs. Multiple overlays may be displayed at once. | ||
| See the [demo source code](https://github.com/PolymerElements/iron-overlay-behavior/blob/master/demo/simple-overlay.html) | ||
| for an example. | ||
| ### Closing and canceling | ||
| An overlay may be hidden by closing or canceling. The difference between close and cancel is user | ||
| intent. Closing generally implies that the user acknowledged the content on the overlay. By default, | ||
| it will cancel whenever the user taps outside it or presses the escape key. This behavior is | ||
| configurable with the `no-cancel-on-esc-key` and the `no-cancel-on-outside-click` properties. | ||
| `close()` should be called explicitly by the implementer when the user interacts with a control | ||
| in the overlay element. When the dialog is canceled, the overlay fires an 'iron-overlay-canceled' | ||
| event. Call `preventDefault` on this event to prevent the overlay from closing. | ||
| ### Positioning | ||
| By default the element is sized and positioned to fit and centered inside the window. You can | ||
| position and size it manually using CSS. See `Polymer.IronFitBehavior`. | ||
| ### Backdrop | ||
| Set the `with-backdrop` attribute to display a backdrop behind the overlay. The backdrop is | ||
| appended to `<body>` and is of type `<iron-overlay-backdrop>`. See its doc page for styling | ||
| options. | ||
| In addition, `with-backdrop` will wrap the focus within the content in the light DOM. | ||
| Override the [`_focusableNodes` getter](#Polymer.IronOverlayBehavior:property-_focusableNodes) | ||
| to achieve a different behavior. | ||
| ### Limitations | ||
| The element is styled to appear on top of other content by setting its `z-index` property. You | ||
| must ensure no element has a stacking context with a higher `z-index` than its parent stacking | ||
| context. You should place this element as a child of `<body>` whenever possible. | ||
| @demo demo/index.html | ||
| @polymerBehavior | ||
| */ | ||
| Polymer.IronOverlayBehavior = [Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl]; | ||
| /** | ||
| * Fired after the overlay opens. | ||
| * @event iron-overlay-opened | ||
| */ | ||
| /** | ||
| * Fired when the overlay is canceled, but before it is closed. | ||
| * @event iron-overlay-canceled | ||
| * @param {Event} event The closing of the overlay can be prevented | ||
| * by calling `event.preventDefault()`. The `event.detail` is the original event that | ||
| * originated the canceling (e.g. ESC keyboard event or click event outside the overlay). | ||
| */ | ||
| /** | ||
| * Fired after the overlay closes. | ||
| * @event iron-overlay-closed | ||
| * @param {Event} event The `event.detail` is the `closingReason` property | ||
| * (contains `canceled`, whether the overlay was canceled). | ||
| */ |
| import '../polymer/polymer.js'; | ||
| import { IronA11yKeysBehavior } from '../iron-a11y-keys-behavior/iron-a11y-keys-behavior.js'; | ||
| import '../iron-a11y-keys-behavior/iron-a11y-keys-behavior.js'; | ||
| import './iron-overlay-backdrop.js'; | ||
| import * as gestures from '../polymer/lib/utils/gestures.js'; | ||
| import { dom } from '../polymer/lib/legacy/polymer.dom.js'; | ||
| export const IronOverlayManagerClass = function() { | ||
| /** | ||
| * @struct | ||
| * @constructor | ||
| * @private | ||
| */ | ||
| /** | ||
| @license | ||
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | ||
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt | ||
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | ||
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt | ||
| Code distributed by Google as part of the polymer project is also | ||
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt | ||
| */ | ||
| Polymer.IronOverlayManagerClass = function() { | ||
| /** | ||
@@ -34,3 +45,3 @@ * Used to keep track of the opened overlays. | ||
| // https://github.com/Microsoft/ChakraCore/issues/3863 | ||
| gestures.add(document.documentElement, 'tap', function() {}); | ||
| Polymer.Gestures.add(document.documentElement, 'tap', function() {}); | ||
| document.addEventListener('tap', this._onCaptureClick.bind(this), true); | ||
@@ -41,5 +52,5 @@ document.addEventListener('focus', this._onCaptureFocus.bind(this), true); | ||
| IronOverlayManagerClass.prototype = { | ||
| Polymer.IronOverlayManagerClass.prototype = { | ||
| constructor: IronOverlayManagerClass, | ||
| constructor: Polymer.IronOverlayManagerClass, | ||
@@ -70,4 +81,4 @@ /** | ||
| } | ||
| while (active.root && dom(active.root).activeElement) { | ||
| active = dom(active.root).activeElement; | ||
| while (active.root && Polymer.dom(active.root).activeElement) { | ||
| active = Polymer.dom(active.root).activeElement; | ||
| } | ||
@@ -317,3 +328,3 @@ return active; | ||
| if (i === -1) return; | ||
| var path = dom(event).path; | ||
| var path = Polymer.dom(event).path; | ||
| var overlay; | ||
@@ -351,5 +362,5 @@ // Check if clicked outside of overlay. | ||
| if (overlay) { | ||
| if (IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'esc')) { | ||
| if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'esc')) { | ||
| overlay._onCaptureEsc(event); | ||
| } else if (IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'tab')) { | ||
| } else if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'tab')) { | ||
| overlay._onCaptureTab(event); | ||
@@ -373,2 +384,2 @@ } | ||
| export const IronOverlayManager = new IronOverlayManagerClass(); | ||
| Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass(); |
| import '../polymer/polymer.js'; | ||
| import { dom } from '../polymer/lib/legacy/polymer.dom.js'; | ||
| /** | ||
@@ -35,4 +34,10 @@ * Used to calculate the scroll direction during touch events. | ||
| export const IronScrollManager = { | ||
| /** | ||
| * The IronScrollManager is intended to provide a central source | ||
| * of authority and control over which elements in a document are currently | ||
| * allowed to scroll. | ||
| */ | ||
| Polymer.IronScrollManager = { | ||
| /** | ||
@@ -164,7 +169,7 @@ * The current element that defines the DOM boundaries of the | ||
| contentElements = dom(element).querySelectorAll('content,slot'); | ||
| contentElements = Polymer.dom(element).querySelectorAll('content,slot'); | ||
| for (contentIndex = 0; contentIndex < contentElements.length; ++contentIndex) { | ||
| distributedNodes = dom(contentElements[contentIndex]).getDistributedNodes(); | ||
| distributedNodes = Polymer.dom(contentElements[contentIndex]).getDistributedNodes(); | ||
@@ -234,6 +239,6 @@ for (nodeIndex = 0; nodeIndex < distributedNodes.length; ++nodeIndex) { | ||
| // update during touchmove. | ||
| var target = dom(event).rootTarget; | ||
| var target = Polymer.dom(event).rootTarget; | ||
| if (event.type !== 'touchmove' && lastRootTarget !== target) { | ||
| lastRootTarget = target; | ||
| lastScrollableNodes = this._getScrollableNodes(dom(event).path); | ||
| lastScrollableNodes = this._getScrollableNodes(Polymer.dom(event).path); | ||
| } | ||
@@ -240,0 +245,0 @@ |
| { | ||
| "name": "@polymer/iron-overlay-behavior", | ||
| "flat": true, | ||
| "version": "3.0.0-pre.4", | ||
| "version": "3.0.0-pre.6", | ||
| "description": "Provides a behavior for making an element an overlay", | ||
@@ -22,13 +22,13 @@ "contributors": [ | ||
| "dependencies": { | ||
| "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.4", | ||
| "@polymer/iron-fit-behavior": "^3.0.0-pre.4", | ||
| "@polymer/iron-resizable-behavior": "^3.0.0-pre.4", | ||
| "@polymer/polymer": "^3.0.0-pre.4" | ||
| "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.6", | ||
| "@polymer/iron-fit-behavior": "^3.0.0-pre.6", | ||
| "@polymer/iron-resizable-behavior": "^3.0.0-pre.6", | ||
| "@polymer/polymer": "^3.0.0-pre.6" | ||
| }, | ||
| "devDependencies": { | ||
| "@polymer/iron-component-page": "^3.0.0-pre.4", | ||
| "@polymer/iron-demo-helpers": "^3.0.0-pre.4", | ||
| "@polymer/iron-flex-layout": "^3.0.0-pre.4", | ||
| "@polymer/iron-test-helpers": "^3.0.0-pre.4", | ||
| "wct-browser-legacy": "0.0.1-pre.10", | ||
| "@polymer/iron-component-page": "^3.0.0-pre.6", | ||
| "@polymer/iron-demo-helpers": "^3.0.0-pre.6", | ||
| "@polymer/iron-flex-layout": "^3.0.0-pre.6", | ||
| "@polymer/iron-test-helpers": "^3.0.0-pre.6", | ||
| "wct-browser-legacy": "0.0.1-pre.11", | ||
| "@webcomponents/webcomponentsjs": "^1.0.0" | ||
@@ -35,0 +35,0 @@ }, |
@@ -1,4 +0,3 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import '../../polymer/polymer.js'; | ||
| import './test-buttons.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| /** | ||
@@ -14,3 +13,3 @@ @license | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -17,0 +16,0 @@ :host { |
@@ -1,3 +0,2 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import '../../polymer/polymer.js'; | ||
| /** | ||
@@ -13,3 +12,3 @@ @license | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -16,0 +15,0 @@ :host { |
@@ -1,6 +0,5 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import '../../polymer/polymer.js'; | ||
| import './test-overlay.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <button id="trigger" on-click="toggle">Open</button> | ||
@@ -7,0 +6,0 @@ <test-overlay id="overlay"> |
@@ -1,7 +0,6 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import { IronOverlayBehavior, IronOverlayBehaviorImpl } from '../iron-overlay-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import '../../polymer/polymer.js'; | ||
| import '../iron-overlay-behavior.js'; | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -40,3 +39,3 @@ :host { | ||
| behaviors: [ | ||
| IronOverlayBehavior | ||
| Polymer.IronOverlayBehavior | ||
| ], | ||
@@ -56,3 +55,3 @@ | ||
| } else { | ||
| IronOverlayBehaviorImpl._renderOpened.apply(this, arguments); | ||
| Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments); | ||
| } | ||
@@ -69,3 +68,3 @@ }, | ||
| } else { | ||
| IronOverlayBehaviorImpl._renderClosed.apply(this, arguments); | ||
| Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments); | ||
| } | ||
@@ -72,0 +71,0 @@ }, |
@@ -1,7 +0,6 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import { IronOverlayBehavior } from '../iron-overlay-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import '../../polymer/polymer.js'; | ||
| import '../iron-overlay-behavior.js'; | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -23,3 +22,3 @@ :host { | ||
| behaviors: [ | ||
| IronOverlayBehavior | ||
| Polymer.IronOverlayBehavior | ||
| ], | ||
@@ -26,0 +25,0 @@ |
@@ -1,7 +0,6 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import '../../polymer/polymer.js'; | ||
| import './test-overlay.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -8,0 +7,0 @@ #scrollable, #overlay { |
@@ -1,3 +0,2 @@ | ||
| import { html } from '../../polymer/polymer.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import '../../polymer/polymer.js'; | ||
| /** | ||
@@ -13,3 +12,3 @@ @license | ||
| Polymer({ | ||
| _template: html` | ||
| _template: Polymer.html` | ||
| <style> | ||
@@ -16,0 +15,0 @@ :host { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.49%
181444
- Lines of code
- increased by2.73%
1996