2.0 preview (#64)

* port to 2.0 * use demo-pages-shared-styles (reverted) * custom-elements-v1 * use new custom-style syntax * use dom-bind and dom-repeat * update deps * resolve webcomponents v1, remove <content> * variants * script inside dom-module, remove <content> * use wc-ce flag instead of wc-register * update deps and resolutions * Depend on test-fixture v2 * auto-generated: update repo for v2 * remove duplicate scripts * fix safari9 tests * update deps * Point to Polymer 2.0 RC 1 * address feedback * remove test-fixture dependency * Fix demo for tap not being fired. Defer refit. * revert comment indentation * Update travis config * flush and explain why * remove workaround for Polymer/polymer#4509. Clearer comment of why flush * [skip ci] update README * Update travis config * fix rebase errors
PolymerElements · May 12, 2017 · 06f7844 · 06f7844
1 parent 5961303
commit 06f7844
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 98 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,24 +1,26 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g polymer-cli
+  - polymer install --variants
 env:
   global:
     - secure: >-
         L4lSnuQZDY+YcXYzBZSRKjJJ1rZf18Lc/8YDgQPfkMkAItrRHGR8vblBoKiPAmtvgNxztcpZxAXTiDy1vAeVv54QnX9b1JsuOs7rrQxB4BS04Dj7LdT6DDu1p/V09MJBN11lzLVxgpxljbumwGWE4gfpDl2+rjbBt7cRV5VkVnE=
     - secure: >-
         H7dHZ9FQvJszK2UMNZJiZmzOPET3muO/XvlkUc1x3KcUlV5/tD/404V05XfFMowH7DavHFYleZkb89deYjq9PHncO9c4bp4SHD7HKN4FaGyhzfpXjg66v3dZH/OcERjaas337uUE2jo/x1jCq4HJCz2bMVh+bvd4du1C/2OWarc=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
       - google-chrome-stable
+  sauce_connect: true
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
-dist: trusty
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
+dist: trusty
diff --git a/README.md b/README.md
@@ -1,23 +1,9 @@
-
-<!---
-
-This README is automatically generated from the comments in these files:
-iron-fit-behavior.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
-
 [![Build status](https://travis-ci.org/PolymerElements/iron-fit-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-fit-behavior)
 
 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-fit-behavior)_
 
 
-##Polymer.IronFitBehavior
+## Polymer.IronFitBehavior
 
 `Polymer.IronFitBehavior` fits an element in another element using `max-height` and `max-width`, and
 optionally centers it in the window or another element.

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-fit-behavior",
-  "version": "1.2.6",
+  "version": "2.0.0",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "Fits an element inside another element",
   "private": true,
@@ -18,14 +18,26 @@
     "url": "git://github.com/PolymerElements/iron-fit-behavior.git"
   },
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0"
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.0.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   },
   "ignore": []
 }
diff --git a/demo/index.html b/demo/index.html
@@ -23,16 +23,16 @@
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
-  <style is="custom-style" include="demo-pages-shared-styles">
+  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
     .centered {
-      min-width: 500px;
+      min-width: 600px;
     }
     demo-snippet {
       --demo-snippet-code: {
         max-height: 250px;
       }
     }
-  </style>
+  </style></custom-style>
 
 </head>
 
@@ -50,9 +50,9 @@ <h3>
           display: inline-block;
           box-sizing: border-box;
           border: 1px solid;
-          width: 100px;
-          padding: 20px 0;
-          margin: 5px;
+          width: 120px;
+          padding: 26px 0;
+          margin: 8px;
         }
 
         #myFit {
@@ -68,12 +68,11 @@ <h3>
           border-radius: 5px;
           border-width: 1px;
         }
-
         button.selected {
           background-color: #b3e5fc;
         }
       </style>
-      <template is="dom-bind">
+      <dom-bind><template is="dom-bind">
         <template is="dom-repeat" items="[[containers]]">
           <div class="target" on-tap="updatePositionTarget">Target</div>
         </template>
@@ -95,27 +94,18 @@ <h2>Align</h2>
           <button on-tap="toggleDynamicAlign">dynamic align</button>
         </simple-fit>
         <script>
-          var defaultTarget = Polymer.dom(myFit).parentNode;
+
           var template = document.querySelector('template[is="dom-bind"]');
 
           template.containers = new Array(30);
 
           template.updatePositionTarget = function(e) {
             var target = Polymer.dom(e).rootTarget;
-            target = myFit.positionTarget === target ? defaultTarget : target;
+            target = myFit.positionTarget === target ? myFit._defaultPositionTarget : target;
             myFit.positionTarget.style.backgroundColor = '';
             target.style.backgroundColor = 'orange';
             myFit.positionTarget = target;
-            template.refit();
-          };
-
-          template._raf = null;
-          template.refit = function() {
-            template._raf && window.cancelAnimationFrame(template._raf);
-            template._raf = window.requestAnimationFrame(function() {
-              template._raf = null;
-              myFit.refit();
-            });
+            refit();
           };
 
           template.updateAlign = function(e) {
@@ -134,30 +124,47 @@ <h2>Align</h2>
                 toggleClass(children[i], 'selected', children[i] === target);
               }
             }
-            template.refit();
+            refit();
           };
 
           template.toggleNoOverlap = function(e) {
             myFit.noOverlap = !myFit.noOverlap;
             toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.noOverlap);
-            template.refit();
+            refit();
           };
 
           template.toggleDynamicAlign = function(e) {
             myFit.dynamicAlign = !myFit.dynamicAlign;
             toggleClass(Polymer.dom(e).rootTarget, 'selected', myFit.dynamicAlign);
-            template.refit();
+            refit();
           };
 
+          // Support hybrid mode
+          var templatev1 = document.querySelector('dom-bind');
+          templatev1.containers = template.containers;
+          templatev1.updatePositionTarget = template.updatePositionTarget;
+          templatev1.updateAlign = template.updateAlign;
+          templatev1.toggleNoOverlap = template.toggleNoOverlap;
+          templatev1.toggleDynamicAlign = template.toggleDynamicAlign;
+
           // Listen for resize and scroll on window.
-          window.addEventListener('resize', template.refit);
-          window.addEventListener('scroll', template.refit);
+          window.addEventListener('resize', refit);
+          window.addEventListener('scroll', refit);
+
+          var _raf = null;
+          function refit() {
+            _raf && window.cancelAnimationFrame(_raf);
+            _raf = window.requestAnimationFrame(function() {
+              _raf = null;
+              myFit.refit();
+            });
+          }
 
           function toggleClass(element, cssClass, condition) {
             element.classList[condition ? 'add' : 'remove'](cssClass);
           }
         </script>
-      </template>
+      </template></dom-bind>
     </template>
   </demo-snippet>
 

diff --git a/demo/simple-fit.html b/demo/simple-fit.html
@@ -20,22 +20,14 @@
         text-align: center;
       }
     </style>
-
-    <content></content>
+    <slot></slot>
   </template>
-
+  <script>
+    Polymer({
+      is: 'simple-fit',
+      behaviors: [
+        Polymer.IronFitBehavior
+      ]
+    });
+  </script>
 </dom-module>
-
-<script>
-
-  Polymer({
-
-    is: 'simple-fit',
-
-    behaviors: [
-      Polymer.IronFitBehavior
-    ]
-
-  });
-
-</script>
diff --git a/iron-fit-behavior.html b/iron-fit-behavior.html
@@ -253,19 +253,29 @@
       if (typeof this._isRTL === 'undefined') {
         this._isRTL = window.getComputedStyle(this).direction == 'rtl';
       }
-
       this.positionTarget = this.positionTarget || this._defaultPositionTarget;
       if (this.autoFitOnAttach) {
         if (window.getComputedStyle(this).display === 'none') {
           setTimeout(function() {
             this.fit();
           }.bind(this));
         } else {
+          // NOTE: shadydom applies distribution asynchronously
+          // for performance reasons webcomponents/shadydom#120
+          // Flush to get correct layout info.
+          window.ShadyDOM && ShadyDOM.flush();
           this.fit();
         }
       }
     },
 
+    detached: function() {
+      if (this.__deferredFit) {
+        clearTimeout(this.__deferredFit);
+        this.__deferredFit = null;
+      }
+    },
+
     /**
      * Positions and fits the element into the `fitInto` element.
      */
@@ -378,7 +388,8 @@
         height: rect.height + margin.top + margin.bottom
       };
 
-      var position = this.__getPosition(this._localeHorizontalAlign, this.verticalAlign, size, positionRect, fitRect);
+      var position = this.__getPosition(this._localeHorizontalAlign, this.verticalAlign, size, positionRect,
+        fitRect);
 
       var left = position.left + margin.left;
       var top = position.top + margin.top;
@@ -573,15 +584,15 @@
         // For dynamicAlign and noOverlap we'll have more than one candidate, so
         // we'll have to check the croppedArea to make the best choice.
         if (!this.dynamicAlign && !this.noOverlap &&
-            pos.verticalAlign === vAlign && pos.horizontalAlign === hAlign) {
+          pos.verticalAlign === vAlign && pos.horizontalAlign === hAlign) {
           position = pos;
           break;
         }
 
         // Align is ok if alignment preferences are respected. If no preferences,
         // it is considered ok.
         var alignOk = (!vAlign || pos.verticalAlign === vAlign) &&
-                      (!hAlign || pos.horizontalAlign === hAlign);
+          (!hAlign || pos.horizontalAlign === hAlign);
 
         // Filter out elements that don't match the alignment (if defined).
         // With dynamicAlign, we need to consider all the positions to find the
@@ -609,4 +620,4 @@
     }
 
   };
-</script>
+</script>
diff --git a/test/index.html b/test/index.html
@@ -21,11 +21,11 @@
 
     <script>
       WCT.loadSuites([
-        'iron-fit-behavior.html',
-        'iron-fit-behavior.html?dom=shadow'
+        'iron-fit-behavior.html?wc-shadydom=true&wc-ce=true', //shady
+        'iron-fit-behavior.html?dom=shadow' //shadow
       ]);
     </script>
 
-  
+
 
 </body></html>
diff --git a/test/test-fit.html b/test/test-fit.html
@@ -20,22 +20,14 @@
         padding: 8px;
       }
     </style>
-
-    <content></content>
+    <slot></slot>
   </template>
-
+  <script>
+    Polymer({
+      is: 'test-fit',
+      behaviors: [
+        Polymer.IronFitBehavior
+      ]
+    });
+  </script>
 </dom-module>
-
-<script>
-
-  Polymer({
-
-    is: 'test-fit',
-
-    behaviors: [
-      Polymer.IronFitBehavior
-    ]
-
-  });
-
-</script>