polymer-core-rails 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (146) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +4 -3
  3. data/app/assets/components/context-free-parser/context-free-parser.js +27 -4
  4. data/app/assets/components/core-a11y-keys/core-a11y-keys.html +4 -4
  5. data/app/assets/components/core-ajax/core-ajax.html +38 -10
  6. data/app/assets/components/core-ajax/core-xhr.html +1 -1
  7. data/app/assets/components/core-animated-pages/core-animated-pages.html +25 -2
  8. data/app/assets/components/core-animation/web-animations.html +1 -1
  9. data/app/assets/components/core-collapse/core-collapse.html +1 -1
  10. data/app/assets/components/core-doc-viewer/elements/core-doc-page.css +26 -1
  11. data/app/assets/components/core-doc-viewer/elements/core-doc-page.html +39 -4
  12. data/app/assets/components/core-doc-viewer/elements/core-doc-toc.css +3 -3
  13. data/app/assets/components/core-drawer-panel/core-drawer-panel.css +14 -6
  14. data/app/assets/components/core-drawer-panel/core-drawer-panel.html +32 -8
  15. data/app/assets/components/core-dropdown/core-dropdown.html +8 -2
  16. data/app/assets/components/core-elements/core-elements.html +1 -0
  17. data/app/assets/components/core-icon/core-icon.html +0 -2
  18. data/app/assets/components/core-icons/av-icons.html +2 -9
  19. data/app/assets/components/core-icons/communication-icons.html +39 -42
  20. data/app/assets/components/core-icons/core-icons.html +231 -235
  21. data/app/assets/components/core-icons/device-icons.html +75 -90
  22. data/app/assets/components/core-icons/editor-icons.html +52 -52
  23. data/app/assets/components/core-icons/hardware-icons.html +40 -41
  24. data/app/assets/components/core-icons/image-icons.html +133 -137
  25. data/app/assets/components/core-icons/maps-icons.html +55 -57
  26. data/app/assets/components/core-icons/notification-icons.html +34 -34
  27. data/app/assets/components/core-icons/social-icons.html +23 -37
  28. data/app/assets/components/core-image/core-image.html +3 -3
  29. data/app/assets/components/core-list/core-list.html +50 -27
  30. data/app/assets/components/core-localstorage/core-localstorage.html +4 -5
  31. data/app/assets/components/core-menu/core-menu.html +8 -3
  32. data/app/assets/components/core-menu/core-submenu.html +2 -2
  33. data/app/assets/components/core-overlay/core-key-helper.html +3 -0
  34. data/app/assets/components/core-overlay/core-overlay-layer.html +3 -0
  35. data/app/assets/components/core-overlay/core-overlay.html +20 -4
  36. data/app/assets/components/core-resizable/core-resizable.html +248 -0
  37. data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html +14 -3
  38. data/app/assets/components/core-scroll-threshold/core-scroll-threshold.html +222 -0
  39. data/app/assets/components/core-scroll-threshold/metadata.html +24 -0
  40. data/app/assets/components/core-selection/core-selection.html +1 -1
  41. data/app/assets/components/core-selector/core-selector.html +26 -26
  42. data/app/assets/components/core-splitter/core-splitter.html +17 -2
  43. data/app/assets/components/core-style/core-style.html +1 -1
  44. data/app/assets/components/core-toolbar/core-toolbar.html +1 -1
  45. data/app/assets/components/core-tooltip/core-tooltip.css +2 -2
  46. data/app/assets/components/core-tooltip/core-tooltip.html +16 -5
  47. data/app/assets/components/core-tooltip/metadata.html +1 -1
  48. data/app/assets/components/google-code-prettify/styles/doxy.css +1 -1
  49. data/app/assets/components/marked/lib/marked.js +11 -5
  50. data/app/assets/components/marked/marked.min.js +6 -0
  51. data/app/assets/components/paper-button/paper-button-base.html +56 -12
  52. data/app/assets/components/paper-button/paper-button.html +22 -5
  53. data/app/assets/components/paper-fab/paper-fab.html +2 -2
  54. data/app/assets/components/paper-ripple/paper-ripple.html +2 -1
  55. data/app/assets/components/paper-shadow/paper-shadow.css +10 -10
  56. data/app/assets/components/paper-shadow/paper-shadow.html +8 -1
  57. data/app/assets/components/sampler-scaffold/sampler-scaffold.css +1 -1
  58. data/app/assets/components/{web-animations-next → web-animations-js}/src/animation-constructor.js +10 -5
  59. data/app/assets/components/{web-animations-next → web-animations-js}/src/animation-node.js +1 -1
  60. data/app/assets/components/{web-animations-next → web-animations-js}/src/animation.js +2 -2
  61. data/app/assets/components/{web-animations-next → web-animations-js}/src/apply-preserving-inline-style.js +2 -3
  62. data/app/assets/components/{web-animations-next → web-animations-js}/src/apply.js +1 -1
  63. data/app/assets/components/{web-animations-next → web-animations-js}/src/box-handler.js +1 -1
  64. data/app/assets/components/{web-animations-next → web-animations-js}/src/color-handler.js +2 -2
  65. data/app/assets/components/{web-animations-next → web-animations-js}/src/deprecation.js +0 -0
  66. data/app/assets/components/{web-animations-next → web-animations-js}/src/dev.js +0 -0
  67. data/app/assets/components/{web-animations-next → web-animations-js}/src/dimension-handler.js +1 -1
  68. data/app/assets/components/{web-animations-next → web-animations-js}/src/effect-callback.js +2 -2
  69. data/app/assets/components/{web-animations-next → web-animations-js}/src/effect.js +1 -1
  70. data/app/assets/components/{web-animations-next → web-animations-js}/src/element-animatable.js +1 -1
  71. data/app/assets/components/{web-animations-next → web-animations-js}/src/font-weight-handler.js +1 -1
  72. data/app/assets/components/{web-animations-next → web-animations-js}/src/group-constructors.js +2 -1
  73. data/app/assets/components/{web-animations-next → web-animations-js}/src/handler-utils.js +1 -1
  74. data/app/assets/components/{web-animations-next → web-animations-js}/src/interpolation.js +1 -1
  75. data/app/assets/components/{web-animations-next → web-animations-js}/src/matrix-decomposition.js +1 -1
  76. data/app/assets/components/{web-animations-next → web-animations-js}/src/matrix-interpolation.js +1 -1
  77. data/app/assets/components/{web-animations-next → web-animations-js}/src/normalize-keyframes.js +1 -1
  78. data/app/assets/components/{web-animations-next → web-animations-js}/src/number-handler.js +1 -1
  79. data/app/assets/components/{web-animations-next → web-animations-js}/src/player.js +1 -1
  80. data/app/assets/components/{web-animations-next → web-animations-js}/src/position-handler.js +1 -1
  81. data/app/assets/components/{web-animations-next → web-animations-js}/src/property-interpolation.js +1 -1
  82. data/app/assets/components/{web-animations-next → web-animations-js}/src/property-names.js +1 -1
  83. data/app/assets/components/{web-animations-next → web-animations-js}/src/scope.js +2 -2
  84. data/app/assets/components/{web-animations-next → web-animations-js}/src/shadow-handler.js +1 -1
  85. data/app/assets/components/{web-animations-next → web-animations-js}/src/shape-handler.js +1 -1
  86. data/app/assets/components/{web-animations-next → web-animations-js}/src/tick.js +1 -1
  87. data/app/assets/components/{web-animations-next → web-animations-js}/src/timeline.js +7 -7
  88. data/app/assets/components/{web-animations-next → web-animations-js}/src/timing-utilities.js +0 -0
  89. data/app/assets/components/{web-animations-next → web-animations-js}/src/transform-handler.js +1 -1
  90. data/app/assets/components/{web-animations-next → web-animations-js}/src/visibility-handler.js +1 -1
  91. data/app/assets/components/{web-animations-next/src/maxifill-player.js → web-animations-js/src/web-animations-next-player.js} +1 -1
  92. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations-next-lite.dev.html +1 -1
  93. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations-next-lite.dev.js +0 -0
  94. data/app/assets/components/web-animations-js/web-animations-next-lite.min.js +17 -0
  95. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations-next.dev.html +1 -1
  96. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations-next.dev.js +0 -0
  97. data/app/assets/components/web-animations-js/web-animations-next.min.js +17 -0
  98. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations.dev.html +0 -0
  99. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations.dev.js +0 -0
  100. data/app/assets/components/{web-animations-next → web-animations-js}/web-animations.html +1 -3
  101. data/app/assets/components/web-animations-js/web-animations.min.js +17 -0
  102. data/app/assets/components/webcomponentsjs/CustomElements.js +634 -0
  103. data/app/assets/components/webcomponentsjs/CustomElements.min.js +11 -0
  104. data/app/assets/components/webcomponentsjs/HTMLImports.js +764 -0
  105. data/app/assets/components/webcomponentsjs/HTMLImports.min.js +11 -0
  106. data/app/assets/components/webcomponentsjs/ShadowDOM.js +4277 -0
  107. data/app/assets/components/webcomponentsjs/ShadowDOM.min.js +13 -0
  108. data/app/assets/components/webcomponentsjs/webcomponents-lite.js +1728 -0
  109. data/app/assets/components/webcomponentsjs/webcomponents-lite.min.js +11 -0
  110. data/app/assets/components/webcomponentsjs/webcomponents.js +6114 -0
  111. data/app/assets/components/webcomponentsjs/webcomponents.min.js +14 -0
  112. data/lib/polymer-core-rails/version.rb +1 -1
  113. metadata +60 -76
  114. data/app/assets/components/context-free-parser/package.json +0 -16
  115. data/app/assets/components/core-ajax/demo-progress.html +0 -65
  116. data/app/assets/components/core-dropdown/metadata.html +0 -62
  117. data/app/assets/components/core-icons/png-icons.html +0 -19
  118. data/app/assets/components/core-overlay/tests/html/core-overlay-basic.html +0 -127
  119. data/app/assets/components/core-overlay/tests/html/core-overlay-positioning-margin.html +0 -153
  120. data/app/assets/components/core-overlay/tests/html/core-overlay-positioning.html +0 -167
  121. data/app/assets/components/core-overlay/tests/html/core-overlay-scroll.html +0 -130
  122. data/app/assets/components/core-overlay/tests/js/htmltests.js +0 -6
  123. data/app/assets/components/core-overlay/tests/runner.html +0 -14
  124. data/app/assets/components/core-overlay/tests/tests.json +0 -6
  125. data/app/assets/components/core-popup-menu/core-popup-menu.css +0 -28
  126. data/app/assets/components/core-popup-menu/core-popup-menu.html +0 -198
  127. data/app/assets/components/core-popup-menu/core-popup-overlay.html +0 -111
  128. data/app/assets/components/core-popup-menu/metadata.html +0 -62
  129. data/app/assets/components/core-shared-lib/tests/html/core-shared-lib.html +0 -47
  130. data/app/assets/components/core-shared-lib/tests/js/htmltests.js +0 -3
  131. data/app/assets/components/core-shared-lib/tests/runner.html +0 -14
  132. data/app/assets/components/core-shared-lib/tests/tests.json +0 -6
  133. data/app/assets/components/marked/LICENSE +0 -19
  134. data/app/assets/components/marked/Makefile +0 -12
  135. data/app/assets/components/marked/package.json +0 -22
  136. data/app/assets/components/platform/platform.js +0 -16
  137. data/app/assets/components/web-animations-js/web-animations.js +0 -5529
  138. data/app/assets/components/web-animations-next/Gruntfile.js +0 -279
  139. data/app/assets/components/web-animations-next/History.md +0 -76
  140. data/app/assets/components/web-animations-next/package.json +0 -33
  141. data/app/assets/components/web-animations-next/target-config.js +0 -124
  142. data/app/assets/components/web-animations-next/target-loader.js +0 -13
  143. data/app/assets/components/web-animations-next/templates/boilerplate +0 -13
  144. data/app/assets/components/web-animations-next/templates/runner.html +0 -26
  145. data/app/assets/components/web-animations-next/templates/web-animations.html +0 -18
  146. data/app/assets/components/web-animations-next/templates/web-animations.js +0 -21
@@ -20,6 +20,14 @@ may be reused with a new model at any time. Particularly, any state that
20
20
  may change as the result of a user interaction with the list item must be
21
21
  bound to the model to avoid view state inconsistency.
22
22
 
23
+ IMPORTANT: `core-list` must ether be explicitly sized, or delegate scrolling to
24
+ an explicitly sized parent. By "explicitly sized", we mean it either has an
25
+ explicit CSS `height` property set via a class or inline style, or else is sized
26
+ by other layout means (e.g. `flex` or `fit`). Alternatively, `core-list` can
27
+ delegate scrolling to a scrollable element that contains the list by setting the
28
+ `scrollTarget` property, and the same explicit sizing requiremets will apply
29
+ to that element.
30
+
23
31
  ### Template model
24
32
 
25
33
  List item templates should bind to template models of the following structure:
@@ -162,11 +170,13 @@ the following abstract API:
162
170
 
163
171
  @group Polymer Core Elements
164
172
  @element core-list
173
+ @mixins Polymer.CoreResizable https://github.com/polymer/core-resizable
165
174
  -->
166
175
  <link rel="import" href="../polymer/polymer.html">
167
176
  <link rel="import" href="../core-selection/core-selection.html">
177
+ <link rel="import" href="../core-resizable/core-resizable.html">
168
178
 
169
- <polymer-element name="core-list" on-tap="{{tapHandler}}" tabindex="-1">
179
+ <polymer-element name="core-list" tabindex="-1">
170
180
  <template>
171
181
  <core-selection id="selection" multi="{{multi}}" on-core-select="{{selectedHandler}}"></core-selection>
172
182
  <link rel="stylesheet" href="core-list.css">
@@ -178,7 +188,7 @@ the following abstract API:
178
188
  var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
179
189
  var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
180
190
 
181
- Polymer('core-list', {
191
+ Polymer(Polymer.mixin({
182
192
 
183
193
  publish: {
184
194
  /**
@@ -328,11 +338,16 @@ the following abstract API:
328
338
 
329
339
  },
330
340
 
341
+ eventDelegates: {
342
+ tap: 'tapHandler',
343
+ 'core-resize': 'updateSize'
344
+ },
345
+
331
346
  // Local cache of scrollTop
332
347
  _scrollTop: 0,
333
348
 
334
349
  observe: {
335
- 'data grid width template scrollTarget': 'initialize',
350
+ 'isAttached data grid width template scrollTarget': 'initialize',
336
351
  'multi selectionEnabled': '_resetSelection'
337
352
  },
338
353
 
@@ -357,33 +372,36 @@ the following abstract API:
357
372
  this._nestedGroups = false;
358
373
  this._groupStart = 0;
359
374
  this._groupStartIndex = 0;
360
-
361
- this._boundResizeHandler = this.updateSize.bind(this);
362
- window.addEventListener('resize', this._boundResizeHandler);
363
375
  },
364
376
 
365
377
  attached: function() {
378
+ this.isAttached = true;
366
379
  this.template = this.querySelector('template');
367
380
  if (!this.template.bindingDelegate) {
368
381
  this.template.bindingDelegate = this.element.syntax;
369
382
  }
383
+ this.resizableAttachedHandler();
370
384
  },
371
385
 
372
386
  detached: function() {
373
- this.removeEventListener(this._boundScrollHandler);
374
- this.removeEventListener(this._boundResizeHandler);
387
+ this.isAttached = false;
388
+ if (this._target) {
389
+ this._target.removeEventListener('scroll', this._boundScrollHandler);
390
+ }
391
+ this.resizableDetachedHandler();
375
392
  },
376
393
 
377
394
  /**
378
- * To be called by the user when the list is resized or shown
379
- * after being hidden. Note, `core-list` calls this automatically
380
- * when the window is resized.
395
+ * To be called by the user when the list is manually resized
396
+ * or shown after being hidden.
381
397
  *
382
398
  * @method updateSize
383
399
  */
384
400
  updateSize: function() {
385
- this._resetIndex(this._getFirstVisibleIndex());
386
- this.initializeData();
401
+ if (!this._positionPending && !this._needItemInit) {
402
+ this._resetIndex(this._getFirstVisibleIndex() || 0);
403
+ this.initialize();
404
+ }
387
405
  },
388
406
 
389
407
  _resetSelection: function() {
@@ -436,7 +454,7 @@ the following abstract API:
436
454
  }
437
455
  // Adjust offset/scroll position based on total number of items changed
438
456
  if (this._virtualStart < this._physicalCount) {
439
- this._resetIndex(this._getFirstVisibleIndex());
457
+ this._resetIndex(this._getFirstVisibleIndex() || 0);
440
458
  } else {
441
459
  totalDelta = Math.max((totalDelta / this._rowFactor) * this._physicalAverage, -this._physicalOffset);
442
460
  this._physicalOffset += totalDelta;
@@ -456,13 +474,12 @@ the following abstract API:
456
474
 
457
475
  groupsChanged: function() {
458
476
  if (!!this.groups != this._grouped) {
459
- this.initialize();
460
- this._resetIndex(this._getFirstVisibleIndex() || this._virtualStart);
477
+ this.updateSize();
461
478
  }
462
479
  },
463
480
 
464
481
  initialize: function() {
465
- if (!this.template) {
482
+ if (!this.template || !this.isAttached) {
466
483
  return;
467
484
  }
468
485
 
@@ -530,6 +547,7 @@ the following abstract API:
530
547
  if (getComputedStyle(this._target).position == 'static') {
531
548
  this._target.style.position = 'relative';
532
549
  }
550
+ this._target.style.boxSizing = this._target.style.mozBoxSizing = 'border-box';
533
551
  this.style.overflowY = (target == this) ? 'auto' : null;
534
552
  },
535
553
 
@@ -598,8 +616,10 @@ the following abstract API:
598
616
  if (!this.width) {
599
617
  throw 'Grid requires the `width` property to be set';
600
618
  }
601
- this._rowFactor = Math.floor(this._target.offsetWidth / this.width) || 1;
602
- this._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width)) / 2;
619
+ var cs = getComputedStyle(this._target);
620
+ var padding = parseInt(cs.paddingLeft || 0) + parseInt(cs.paddingRight || 0);
621
+ this._rowFactor = Math.floor((this._target.offsetWidth - padding) / this.width) || 1;
622
+ this._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width) - padding) / 2;
603
623
  } else {
604
624
  this._rowFactor = 1;
605
625
  this._rowMargin = 0;
@@ -647,7 +667,11 @@ the following abstract API:
647
667
 
648
668
  // Add physical items up to a max based on data length, viewport size, and extra item overhang
649
669
  var currentCount = this._physicalCount || 0;
650
- this._physicalCount = Math.min(Math.ceil(this._target.offsetHeight / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount);
670
+ var height = this._target.offsetHeight;
671
+ if (!height && this._target.offsetParent) {
672
+ console.warn('core-list must either be sized or be inside an overflow:auto div that is sized');
673
+ }
674
+ this._physicalCount = Math.min(Math.ceil(height / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount);
651
675
  this._physicalCount = Math.max(currentCount, this._physicalCount);
652
676
  this._physicalData = this._physicalData || new Array(this._physicalCount);
653
677
  var needItemInit = false;
@@ -779,10 +803,9 @@ the following abstract API:
779
803
 
780
804
  // Measure content in scroller before virtualized items
781
805
  if (this._target != this) {
782
- el1 = this.previousElementSibling;
783
- this._aboveSize = el1 ? el1.offsetTop + el1.offsetHeight : 0;
806
+ this._aboveSize = this.offsetTop;
784
807
  } else {
785
- this._aboveSize = 0;
808
+ this._aboveSize = parseInt(getComputedStyle(this._target).paddingTop);
786
809
  }
787
810
 
788
811
  // Calculate average height
@@ -1232,7 +1255,7 @@ the following abstract API:
1232
1255
  var virtualIndex = this._virtualStart + i;
1233
1256
  var physicalIndex = this._virtualToPhysical(virtualIndex);
1234
1257
  var item = this._physicalItems[physicalIndex];
1235
- if (item._translateY >= this._scrollTop) {
1258
+ if (!item.hidden && item._translateY >= this._scrollTop - this._aboveSize) {
1236
1259
  return virtualIndex;
1237
1260
  }
1238
1261
  }
@@ -1242,8 +1265,8 @@ the following abstract API:
1242
1265
  index = Math.min(index, this._virtualCount-1);
1243
1266
  index = Math.max(index, 0);
1244
1267
  this.changeStartIndex(index - this._virtualStart);
1245
- this._scrollTop = this.setScrollTop((index / this._rowFactor) * this._physicalAverage);
1246
- this._physicalOffset = this._scrollTop;
1268
+ this._scrollTop = this.setScrollTop(this._aboveSize + (index / this._rowFactor) * this._physicalAverage);
1269
+ this._physicalOffset = this._scrollTop - this._aboveSize;
1247
1270
  this._dir = 0;
1248
1271
  },
1249
1272
 
@@ -1286,7 +1309,7 @@ the following abstract API:
1286
1309
  this.refresh();
1287
1310
  }
1288
1311
 
1289
- });
1312
+ }, Polymer.CoreResizable));
1290
1313
 
1291
1314
  })();
1292
1315
  </script>
@@ -72,16 +72,15 @@ triggered only when value is a different instance.
72
72
  */
73
73
  autoSaveDisabled: false,
74
74
 
75
- attached: function() {
76
- // wait for bindings are all setup
77
- this.async('load');
78
- },
79
-
80
75
  valueChanged: function() {
81
76
  if (this.loaded && !this.autoSaveDisabled) {
82
77
  this.save();
83
78
  }
84
79
  },
80
+
81
+ nameChanged: function() {
82
+ this.load();
83
+ },
85
84
 
86
85
  load: function() {
87
86
  var v = localStorage.getItem(this.name);
@@ -15,7 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
15
15
  <core-item icon="dialog" label="Dialog"></core-item>
16
16
  <core-item icon="search" label="Search"></core-item>
17
17
  </core-menu>
18
-
18
+
19
19
  When an item is selected the `core-selected` class is added to it. The user can
20
20
  use the class to add more stylings to the selected item.
21
21
 
@@ -56,13 +56,18 @@ The `core-select` event signals selection change.
56
56
  -->
57
57
 
58
58
  <link rel="import" href="../core-selector/core-selector.html">
59
+ <link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
59
60
 
60
61
  <polymer-element name="core-menu" extends="core-selector" noscript>
61
62
  <template>
62
63
 
63
64
  <link rel="stylesheet" href="core-menu.css">
64
-
65
+
66
+ <core-a11y-keys target="{{}}" keys="up" on-keys-pressed="{{ selectPrevious }}"></core-a11y-keys>
67
+ <core-a11y-keys target="{{}}" keys="down" on-keys-pressed="{{ selectNext }}"></core-a11y-keys>
68
+ <core-a11y-keys target="{{}}" keys="enter" on-keys-pressed="{{ validateSelected }}"></core-a11y-keys>
69
+
65
70
  <shadow></shadow>
66
-
71
+
67
72
  </template>
68
73
  </polymer-element>
@@ -61,7 +61,7 @@ The above will style `Topic1` and `Topic2` to have font color red.
61
61
  <link rel="import" href="../core-menu/core-menu.html">
62
62
  <link rel="import" href="../core-collapse/core-collapse.html">
63
63
 
64
- <polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr">
64
+ <polymer-element name="core-submenu" attributes="selected selectedItem selectedAttribute label icon src valueattr">
65
65
  <template>
66
66
 
67
67
  <link rel="stylesheet" href="core-submenu.css">
@@ -70,7 +70,7 @@ The above will style `Topic1` and `Topic2` to have font color red.
70
70
  <content select=".item-content"></content>
71
71
  </core-item>
72
72
 
73
- <core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" valueattr="{{valueattr}}">
73
+ <core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedAttribute="{{selectedAttribute}}" valueattr="{{valueattr}}">
74
74
  <content></content>
75
75
  </core-menu>
76
76
 
@@ -9,6 +9,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
9
9
 
10
10
  <link rel="import" href="../polymer/polymer.html">
11
11
 
12
+ <!--
13
+ @element core-key-helper
14
+ -->
12
15
  <polymer-element name="core-key-helper">
13
16
  <script>
14
17
  Polymer('core-key-helper', {
@@ -8,6 +8,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
8
8
  -->
9
9
  <link rel="import" href="../polymer/polymer.html">
10
10
 
11
+ <!--
12
+ @element core-overlay-layer
13
+ -->
11
14
  <polymer-element name="core-overlay-layer">
12
15
  <template>
13
16
  <style>
@@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
9
9
 
10
10
  <link rel="import" href="../polymer/polymer.html">
11
11
  <link rel="import" href="../core-transition/core-transition.html">
12
+ <link rel="import" href="../core-resizable/core-resizable.html">
12
13
  <link rel="import" href="core-key-helper.html">
13
14
  <link rel="import" href="core-overlay-layer.html">
14
15
 
@@ -61,6 +62,7 @@ that, for example, a drop shadow is always visible around the overlay.
61
62
 
62
63
  @group Core Elements
63
64
  @element core-overlay
65
+ @mixins Polymer.CoreResizer https://github.com/polymer/core-resizable
64
66
  @homepage github.io
65
67
  -->
66
68
  <!--
@@ -115,7 +117,7 @@ object like this: `{v: 'top', h: 'right'}`.
115
117
  <script>
116
118
  (function() {
117
119
 
118
- Polymer('core-overlay', {
120
+ Polymer(Polymer.mixin({
119
121
 
120
122
  publish: {
121
123
  /**
@@ -236,7 +238,19 @@ object like this: `{v: 'top', h: 'right'}`.
236
238
  'keydown': 'keydownHandler',
237
239
  'core-transitionend': 'transitionend'
238
240
  },
239
-
241
+
242
+ attached: function() {
243
+ this.resizerAttachedHandler();
244
+ },
245
+
246
+ detached: function() {
247
+ this.resizerDetachedHandler();
248
+ },
249
+
250
+ resizerShouldNotify: function() {
251
+ return this.opened;
252
+ },
253
+
240
254
  registerCallback: function(element) {
241
255
  this.layer = document.createElement('core-overlay-layer');
242
256
  this.keyHelper = document.createElement('core-key-helper');
@@ -387,6 +401,7 @@ object like this: `{v: 'top', h: 'right'}`.
387
401
  // tasks which cause the overlay to actually open; typically play an
388
402
  // animation
389
403
  renderOpened: function() {
404
+ this.notifyResize();
390
405
  var transition = this.getTransition();
391
406
  if (transition) {
392
407
  transition.go(this.target, {opened: this.opened});
@@ -675,8 +690,9 @@ object like this: `{v: 'top', h: 'right'}`.
675
690
  };
676
691
  }
677
692
  return this[bound];
678
- },
679
- });
693
+ }
694
+
695
+ }, Polymer.CoreResizer));
680
696
 
681
697
  // TODO(sorvell): This should be an element with private state so it can
682
698
  // be independent of overlay.
@@ -0,0 +1,248 @@
1
+ <!--
2
+ Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3
+ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4
+ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5
+ The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6
+ Code distributed by Google as part of the polymer project is also
7
+ subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8
+ -->
9
+
10
+ <!--
11
+ * @group Polymer Mixins
12
+ -->
13
+
14
+ <link rel="import" href="../polymer/polymer.html">
15
+
16
+ <script>
17
+
18
+ (function(scope) {
19
+
20
+ /**
21
+ `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
22
+ in Polymer elements to coordinate the flow of resize events between "resizers" (elements
23
+ that control the size or hidden state of their children) and "resizables" (elements that
24
+ need to be notified when they are resized or un-hidden by their parents in order to take
25
+ action on their new measurements).
26
+
27
+ Elements that perform measurement should add the `Core.Resizable` mixin to their
28
+ Polymer prototype definition and listen for the `core-resize` event on themselves.
29
+ This event will be fired when they become showing after having been hidden,
30
+ when they are resized explicitly by a `CoreResizer`, or when the window has been resized.
31
+ Note, the `core-resize` event is non-bubbling.
32
+
33
+ `CoreResizable`'s must manually call the `resizableAttachedHandler` from the element's
34
+ `attached` callback and `resizableDetachedHandler` from the element's `detached`
35
+ callback.
36
+
37
+ @element CoreResizable
38
+ @status beta
39
+ @homepage github.io
40
+ */
41
+
42
+ scope.CoreResizable = {
43
+
44
+ /**
45
+ * User must call from `attached` callback
46
+ *
47
+ * @method resizableAttachedHandler
48
+ */
49
+ resizableAttachedHandler: function(cb) {
50
+ cb = cb || this._notifyResizeSelf;
51
+ this.async(function() {
52
+ var detail = {callback: cb, hasParentResizer: false};
53
+ this.fire('core-request-resize', detail);
54
+ if (!detail.hasParentResizer) {
55
+ this._boundWindowResizeHandler = cb.bind(this);
56
+ // log('adding window resize handler', null, this);
57
+ window.addEventListener('resize', this._boundWindowResizeHandler);
58
+ }
59
+ }.bind(this));
60
+ },
61
+
62
+ /**
63
+ * User must call from `detached` callback
64
+ *
65
+ * @method resizableDetachedHandler
66
+ */
67
+ resizableDetachedHandler: function() {
68
+ this.fire('core-request-resize-cancel', null, this, false);
69
+ if (this._boundWindowResizeHandler) {
70
+ window.removeEventListener('resize', this._boundWindowResizeHandler);
71
+ }
72
+ },
73
+
74
+ // Private: fire non-bubbling resize event to self; returns whether
75
+ // preventDefault was called, indicating that children should not
76
+ // be resized
77
+ _notifyResizeSelf: function() {
78
+ return this.fire('core-resize', null, this, false).defaultPrevented;
79
+ }
80
+
81
+ };
82
+
83
+ /**
84
+ `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
85
+ in Polymer elements to coordinate the flow of resize events between "resizers" (elements
86
+ that control the size or hidden state of their children) and "resizables" (elements that
87
+ need to be notified when they are resized or un-hidden by their parents in order to take
88
+ action on their new measurements).
89
+
90
+ Elements that cause their children to be resized (e.g. a splitter control) or hide/show
91
+ their children (e.g. overlay) should add the `Core.CoreResizer` mixin to their
92
+ Polymer prototype definition and then call `this.notifyResize()` any time the element
93
+ resizes or un-hides its children.
94
+
95
+ `CoreResizer`'s must manually call the `resizerAttachedHandler` from the element's
96
+ `attached` callback and `resizerDetachedHandler` from the element's `detached`
97
+ callback.
98
+
99
+ Note: `CoreResizer` extends `CoreResizable`, and can listen for the `core-resize` event
100
+ on itself if it needs to perform resize work on itself before notifying children.
101
+ In this case, returning `false` from the `core-resize` event handler (or calling
102
+ `preventDefault` on the event) will prevent notification of children if required.
103
+
104
+ @element CoreResizer
105
+ @extends CoreResizable
106
+ @status beta
107
+ @homepage github.io
108
+ */
109
+
110
+ scope.CoreResizer = Polymer.mixin({
111
+
112
+ /**
113
+ * User must call from `attached` callback
114
+ *
115
+ * @method resizerAttachedHandler
116
+ */
117
+ resizerAttachedHandler: function() {
118
+ this.resizableAttachedHandler(this.notifyResize);
119
+ this._boundResizeRequested = this._boundResizeRequested || this._handleResizeRequested.bind(this);
120
+ var listener;
121
+ if (this.resizerIsPeer) {
122
+ listener = this.parentElement || (this.parentNode && this.parentNode.host);
123
+ listener._resizerPeers = listener._resizerPeers || [];
124
+ listener._resizerPeers.push(this);
125
+ } else {
126
+ listener = this;
127
+ }
128
+ listener.addEventListener('core-request-resize', this._boundResizeRequested);
129
+ this._resizerListener = listener;
130
+ },
131
+
132
+ /**
133
+ * User must call from `detached` callback
134
+ *
135
+ * @method resizerDetachedHandler
136
+ */
137
+ resizerDetachedHandler: function() {
138
+ this.resizableDetachedHandler();
139
+ this._resizerListener.removeEventListener('core-request-resize', this._boundResizeRequested);
140
+ },
141
+
142
+ /**
143
+ * User should call when resizing or un-hiding children
144
+ *
145
+ * @method notifyResize
146
+ */
147
+ notifyResize: function() {
148
+ // Notify self
149
+ if (!this._notifyResizeSelf()) {
150
+ // Notify requestors if default was not prevented
151
+ var r = this.resizeRequestors;
152
+ if (r) {
153
+ for (var i=0; i<r.length; i++) {
154
+ var ri = r[i];
155
+ if (!this.resizerShouldNotify || this.resizerShouldNotify(ri.target)) {
156
+ // log('notifying resize', null, ri.target, true);
157
+ ri.callback.apply(ri.target);
158
+ // logEnd();
159
+ }
160
+ }
161
+ }
162
+ }
163
+ },
164
+
165
+ /**
166
+ * User should implement to introduce filtering when notifying children.
167
+ * Generally, children that are hidden by the CoreResizer (e.g. non-active
168
+ * pages) need not be notified during resize, since they will be notified
169
+ * again when becoming un-hidden.
170
+ *
171
+ * Return `true` if CoreResizable passed as argument should be notified of
172
+ * resize.
173
+ *
174
+ * @method resizeerShouldNotify
175
+ * @param {Element} el
176
+ */
177
+ // resizeerShouldNotify: function(el) { } // User to implement if needed
178
+
179
+ /**
180
+ * Set to `true` if the resizer is actually a peer to the elements it
181
+ * resizes (e.g. splitter); in this case it will listen for resize requests
182
+ * events from its peers on its parent.
183
+ *
184
+ * @property resizerIsPeer
185
+ * @type Boolean
186
+ * @default false
187
+ */
188
+
189
+ // Private: Handle requests for resize
190
+ _handleResizeRequested: function(e) {
191
+ var target = e.path[0];
192
+ if ((target == this) ||
193
+ (target == this._resizerListener) ||
194
+ (this._resizerPeers && this._resizerPeers.indexOf(target) < 0)) {
195
+ return;
196
+ }
197
+ // log('resize requested', target, this);
198
+ if (!this.resizeRequestors) {
199
+ this.resizeRequestors = [];
200
+ }
201
+ this.resizeRequestors.push({target: target, callback: e.detail.callback});
202
+ target.addEventListener('core-request-resize-cancel', this._cancelResizeRequested.bind(this));
203
+ e.detail.hasParentResizer = true;
204
+ e.stopPropagation();
205
+ },
206
+
207
+ // Private: Handle cancellation requests for resize
208
+ _cancelResizeRequested: function(e) {
209
+ // Exit early if we're already out of the DOM (resizeRequestors will already be null)
210
+ if (this.resizeRequestors) {
211
+ for (var i=0; i<this.resizeRequestors.length; i++) {
212
+ if (this.resizeRequestors[i].target == e.target) {
213
+ // log('resizeCanceled', e.target, this);
214
+ this.resizeRequestors.splice(i, 1);
215
+ break;
216
+ }
217
+ }
218
+ }
219
+ }
220
+
221
+ }, Polymer.CoreResizable);
222
+
223
+ // function prettyName(el) {
224
+ // return el.localName + (el.id ? '#' : '') + el.id;
225
+ // }
226
+
227
+ // function log(what, from, to, group) {
228
+ // var args = [what];
229
+ // if (from) {
230
+ // args.push('from ' + prettyName(from));
231
+ // }
232
+ // if (to) {
233
+ // args.push('to ' + prettyName(to));
234
+ // }
235
+ // if (group) {
236
+ // console.group.apply(console, args);
237
+ // } else {
238
+ // console.log.apply(console, args);
239
+ // }
240
+ // }
241
+
242
+ // function logEnd() {
243
+ // console.groupEnd();
244
+ // }
245
+
246
+ })(Polymer);
247
+
248
+ </script>
@@ -46,10 +46,12 @@ that represents a header by adding a `core-header` class to it.
46
46
 
47
47
  @group Polymer Core Elements
48
48
  @element core-scroll-header-panel
49
+ @mixins Polymer.CoreResizable https://github.com/polymer/core-resizable
49
50
  @homepage github.io
50
51
  -->
51
52
 
52
53
  <link rel="import" href="../polymer/polymer.html">
54
+ <link rel="import" href="../core-resizable/core-resizable.html">
53
55
 
54
56
  <polymer-element name="core-scroll-header-panel">
55
57
  <template>
@@ -77,7 +79,7 @@ that represents a header by adding a `core-header` class to it.
77
79
  <script>
78
80
  (function() {
79
81
 
80
- Polymer('core-scroll-header-panel', {
82
+ Polymer(Polymer.mixin({
81
83
 
82
84
  /**
83
85
  * Fired when the content has been scrolled.
@@ -184,7 +186,15 @@ that represents a header by adding a `core-header` class to it.
184
186
  observe: {
185
187
  'headerMargin fixed': 'setup'
186
188
  },
187
-
189
+
190
+ eventDelegates: {
191
+ 'core-resize': 'measureHeaderHeight'
192
+ },
193
+
194
+ attached: function() {
195
+ this.resizableAttachedHandler();
196
+ },
197
+
188
198
  ready: function() {
189
199
  this._scrollHandler = this.scroll.bind(this);
190
200
  this.scroller.addEventListener('scroll', this._scrollHandler);
@@ -192,6 +202,7 @@ that represents a header by adding a `core-header` class to it.
192
202
 
193
203
  detached: function() {
194
204
  this.scroller.removeEventListener('scroll', this._scrollHandler);
205
+ this.resizableDetachedHandler();
195
206
  },
196
207
 
197
208
  domReady: function() {
@@ -330,7 +341,7 @@ that represents a header by adding a `core-header` class to it.
330
341
  }
331
342
  }
332
343
 
333
- });
344
+ }, Polymer.CoreResizable));
334
345
 
335
346
  //determine proper transform mechanizm
336
347
  if (document.documentElement.style.transform !== undefined) {