Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(75)

Unified Diff: third_party/polymer/components-chromium/core-collapse/core-collapse-extracted.js

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components-chromium/core-collapse/core-collapse-extracted.js
diff --git a/third_party/polymer/components-chromium/core-collapse/core-collapse-extracted.js b/third_party/polymer/components-chromium/core-collapse/core-collapse-extracted.js
new file mode 100644
index 0000000000000000000000000000000000000000..50b9e6620da4e9623e3c444d69d87d0d0235e18f
--- /dev/null
+++ b/third_party/polymer/components-chromium/core-collapse/core-collapse-extracted.js
@@ -0,0 +1,209 @@
+
+
+ Polymer('core-collapse', {
+ /**
+ * Fired when the target element has been resized as a result of the opened
+ * state changing.
+ *
+ * @event core-resize
+ */
+
+ /**
+ * The target element.
+ *
+ * @attribute target
+ * @type object
+ * @default null
+ */
+ target: null,
+
+ /**
+ * If true, the orientation is horizontal; otherwise is vertical.
+ *
+ * @attribute horizontal
+ * @type boolean
+ * @default false
+ */
+ horizontal: false,
+
+ /**
+ * Set opened to true to show the collapse element and to false to hide it.
+ *
+ * @attribute opened
+ * @type boolean
+ * @default false
+ */
+ opened: false,
+
+ /**
+ * Collapsing/expanding animation duration in second.
+ *
+ * @attribute duration
+ * @type number
+ * @default 0.33
+ */
+ duration: 0.33,
+
+ /**
+ * If true, the size of the target element is fixed and is set
+ * on the element. Otherwise it will try to
+ * use auto to determine the natural size to use
+ * for collapsing/expanding.
+ *
+ * @attribute fixedSize
+ * @type boolean
+ * @default false
+ */
+ fixedSize: false,
+
+ created: function() {
+ this.transitionEndListener = this.transitionEnd.bind(this);
+ },
+
+ ready: function() {
+ this.target = this.target || this;
+ },
+
+ domReady: function() {
+ this.async(function() {
+ this.afterInitialUpdate = true;
+ });
+ },
+
+ detached: function() {
+ if (this.target) {
+ this.removeListeners(this.target);
+ }
+ },
+
+ targetChanged: function(old) {
+ if (old) {
+ this.removeListeners(old);
+ }
+ if (!this.target) {
+ return;
+ }
+ this.isTargetReady = !!this.target;
+ this.classList.toggle('core-collapse-closed', this.target !== this);
+ this.target.style.overflow = 'hidden';
+ this.horizontalChanged();
+ this.addListeners(this.target);
+ // set core-collapse-closed class initially to hide the target
+ this.toggleClosedClass(true);
+ this.update();
+ },
+
+ addListeners: function(node) {
+ node.addEventListener('transitionend', this.transitionEndListener);
+ },
+
+ removeListeners: function(node) {
+ node.removeEventListener('transitionend', this.transitionEndListener);
+ },
+
+ horizontalChanged: function() {
+ this.dimension = this.horizontal ? 'width' : 'height';
+ },
+
+ openedChanged: function() {
+ this.update();
+ },
+
+ /**
+ * Toggle the opened state.
+ *
+ * @method toggle
+ */
+ toggle: function() {
+ this.opened = !this.opened;
+ },
+
+ setTransitionDuration: function(duration) {
+ var s = this.target.style;
+ s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
+ if (duration === 0) {
+ this.async('transitionEnd');
+ }
+ },
+
+ transitionEnd: function() {
+ if (this.opened && !this.fixedSize) {
+ this.updateSize('auto', null);
+ }
+ this.setTransitionDuration(null);
+ this.toggleClosedClass(!this.opened);
+ this.asyncFire('core-resize', null, this.target);
+ },
+
+ toggleClosedClass: function(closed) {
+ this.hasClosedClass = closed;
+ this.target.classList.toggle('core-collapse-closed', closed);
+ },
+
+ updateSize: function(size, duration, forceEnd) {
+ this.setTransitionDuration(duration);
+ this.calcSize();
+ var s = this.target.style;
+ var nochange = s[this.dimension] === size;
+ s[this.dimension] = size;
+ // transitonEnd will not be called if the size has not changed
+ if (forceEnd && nochange) {
+ this.transitionEnd();
+ }
+ },
+
+ update: function() {
+ if (!this.target) {
+ return;
+ }
+ if (!this.isTargetReady) {
+ this.targetChanged();
+ }
+ this.horizontalChanged();
+ this[this.opened ? 'show' : 'hide']();
+ },
+
+ calcSize: function() {
+ return this.target.getBoundingClientRect()[this.dimension] + 'px';
+ },
+
+ getComputedSize: function() {
+ return getComputedStyle(this.target)[this.dimension];
+ },
+
+ show: function() {
+ this.toggleClosedClass(false);
+ // for initial update, skip the expanding animation to optimize
+ // performance e.g. skip calcSize
+ if (!this.afterInitialUpdate) {
+ this.transitionEnd();
+ return;
+ }
+ if (!this.fixedSize) {
+ this.updateSize('auto', null);
+ var s = this.calcSize();
+ this.updateSize(0, null);
+ }
+ this.async(function() {
+ this.updateSize(this.size || s, this.duration, true);
+ });
+ },
+
+ hide: function() {
+ // don't need to do anything if it's already hidden
+ if (this.hasClosedClass && !this.fixedSize) {
+ return;
+ }
+ if (this.fixedSize) {
+ // save the size before hiding it
+ this.size = this.getComputedSize();
+ } else {
+ this.updateSize(this.calcSize(), null);
+ }
+ this.async(function() {
+ this.updateSize(0, this.duration);
+ });
+ }
+
+ });
+

Powered by Google App Engine
This is Rietveld 408576698