milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update components

Browse source
This commit is contained in:
Luke Pulverenti 2016-01-29 21:43:11 -05:00
parent b4ae58347b
commit d90d4de2b0
42 changed files with 1514 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

127
dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-behavior.html vendored
View file

@ -80,8 +80,8 @@ context. You should place this element as a child of `<body>` whenever possible.
* Set to true to display a backdrop behind the overlay.
*/
withBackdrop: {
type: Boolean,
value: false
observer: '_withBackdropChanged',
type: Boolean
},
/**
@ -148,17 +148,13 @@ context. You should place this element as a child of `<body>` whenever possible.
* @type Node
*/
get backdropElement() {
return this._backdrop;
return this._manager.backdropElement;
},
get _focusNode() {
return Polymer.dom(this).querySelector('[autofocus]') || this;
},
registered: function() {
this._backdrop = document.createElement('iron-overlay-backdrop');
},
ready: function() {
this._ensureSetup();
},
@ -172,7 +168,7 @@ context. You should place this element as a child of `<body>` whenever possible.
detached: function() {
this.opened = false;
this._completeBackdrop();
this._manager.trackBackdrop(this);
this._manager.removeOverlay(this);
},
@ -180,6 +176,7 @@ context. You should place this element as a child of `<body>` whenever possible.
* Toggle the opened state of the overlay.
*/
toggle: function() {
this._setCanceled(false);
this.opened = !this.opened;
},
@ -187,16 +184,16 @@ context. You should place this element as a child of `<body>` whenever possible.
* Open the overlay.
*/
open: function() {
this._setCanceled(false);
this.opened = true;
this.closingReason = {canceled: false};
},
/**
* Close the overlay.
*/
close: function() {
this.opened = false;
this._setCanceled(false);
this.opened = false;
},
/**
@ -208,8 +205,8 @@ context. You should place this element as a child of `<body>` whenever possible.
return;
}
this.opened = false;
this._setCanceled(true);
this.opened = false;
},
_ensureSetup: function() {
@ -226,6 +223,7 @@ context. You should place this element as a child of `<body>` whenever possible.
this.removeAttribute('aria-hidden');
} else {
this.setAttribute('aria-hidden', 'true');
Polymer.dom(this).unobserveNodes(this._observer);
}
// wait to call after ready only if we're initially open
@ -233,30 +231,32 @@ context. You should place this element as a child of `<body>` whenever possible.
this._callOpenedWhenReady = this.opened;
return;
}
if (this._openChangedAsync) {
this.cancelAsync(this._openChangedAsync);
}
this._toggleListeners();
this._manager.trackBackdrop(this);
if (this.opened) {
this._prepareRenderOpened();
}
// async here to allow overlay layer to become visible.
if (this._openChangedAsync) {
this.cancelAsync(this._openChangedAsync);
}
// Async here to allow overlay layer to become visible, and to avoid
// listeners to immediately close via a click.
this._openChangedAsync = this.async(function() {
// overlay becomes visible here
this.style.display = '';
// force layout to ensure transitions will go
/** @suppress {suspiciousCode} */ this.offsetWidth;
// Force layout to ensure transition will go. Set offsetWidth to itself
// so that compilers won't remove it.
this.offsetWidth = this.offsetWidth;
if (this.opened) {
this._renderOpened();
} else {
this._renderClosed();
}
this._toggleListeners();
this._openChangedAsync = null;
});
}, 1);
},
_canceledChanged: function() {
@ -264,6 +264,21 @@ context. You should place this element as a child of `<body>` whenever possible.
this.closingReason.canceled = this.canceled;
},
_withBackdropChanged: function() {
if (this.opened) {
this._manager.trackBackdrop(this);
if (this.withBackdrop) {
this.backdropElement.prepare();
// Give time to be added to document.
this.async(function(){
this.backdropElement.open();
}, 1);
} else {
this.backdropElement.close();
}
}
},
_toggleListener: function(enable, node, event, boundListener, capture) {
if (enable) {
// enable document-wide tap recognizer
@ -280,30 +295,22 @@ context. You should place this element as a child of `<body>` whenever possible.
}
},
_toggleListeners: function() {
if (this._toggleListenersAsync) {
this.cancelAsync(this._toggleListenersAsync);
}
// async so we don't auto-close immediately via a click.
this._toggleListenersAsync = this.async(function() {
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
this._toggleListener(this.opened, document, 'keydown', this._boundOnCaptureKeydown, true);
this._toggleListenersAsync = null;
}, 1);
_toggleListeners: function () {
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
this._toggleListener(this.opened, document, 'keydown', this._boundOnCaptureKeydown, true);
},
// tasks which must occur before opening; e.g. making the element visible
_prepareRenderOpened: function() {
this._manager.addOverlay(this);
if (this.withBackdrop) {
this.backdropElement.prepare();
this._manager.trackBackdrop(this);
}
this._preparePositioning();
this.fit();
this._finishPositioning();
if (this.withBackdrop) {
this.backdropElement.prepare();
}
},
// tasks which cause the overlay to actually open; typically play an
@ -322,52 +329,24 @@ context. You should place this element as a child of `<body>` whenever possible.
this._finishRenderClosed();
},
_onTransitionend: function(event) {
// make sure this is our transition event.
if (event && event.target !== this) {
return;
}
if (this.opened) {
this._finishRenderOpened();
} else {
this._finishRenderClosed();
}
},
_finishRenderOpened: function() {
// focus the child node with [autofocus]
if (!this.noAutoFocus) {
this._focusNode.focus();
}
this._applyFocus();
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
this.fire('iron-overlay-opened');
this._squelchNextResize = true;
this.async(this.notifyResize);
},
_finishRenderClosed: function() {
// hide the overlay and remove the backdrop
this.resetFit();
this.style.display = 'none';
this._completeBackdrop();
this._manager.removeOverlay(this);
this._focusNode.blur();
// focus the next overlay, if there is one
this._manager.focusOverlay();
this._applyFocus();
this.notifyResize();
this.fire('iron-overlay-closed', this.closingReason);
this._squelchNextResize = true;
this.async(this.notifyResize);
},
_completeBackdrop: function() {
if (this.withBackdrop) {
this._manager.trackBackdrop(this);
this.backdropElement.complete();
}
},
_preparePositioning: function() {
@ -396,8 +375,8 @@ context. You should place this element as a child of `<body>` whenever possible.
},
_onCaptureClick: function(event) {
if (!this.noCancelOnOutsideClick &&
this._manager.currentOverlay() === this &&
if (this._manager.currentOverlay() === this &&
!this.noCancelOnOutsideClick &&
Polymer.dom(event).path.indexOf(this) === -1) {
this.cancel();
}
@ -405,18 +384,14 @@ context. You should place this element as a child of `<body>` whenever possible.
_onCaptureKeydown: function(event) {
var ESC = 27;
if (!this.noCancelOnEscKey && (event.keyCode === ESC)) {
if (this._manager.currentOverlay() === this &&
!this.noCancelOnEscKey &&
event.keyCode === ESC) {
this.cancel();
event.stopPropagation();
event.stopImmediatePropagation();
}
},
_onIronResize: function() {
if (this._squelchNextResize) {
this._squelchNextResize = false;
return;
}
if (this.opened) {
this.refit();
}