Merge branch 'release/2.0.0'

zedesk · Jan 31, 2017 · 22bee14 · 22bee14
2 parents bb61a99 + 703cd1c
commit 22bee14
Show file tree

Hide file tree

Showing 9 changed files with 391 additions and 91 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+
+[*.md]
+indent_style = space
+indent_size = 4
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,13 @@
 
+### v2.0.0
+
+The component no longer allows you to add and remove tabs by internal methods, this should be done by the parent element or by script, which complies better to the mediator pattern.
+
+Fix rendering when using the shadow dom.
+
+  - remove removeTab method
+  - remove addTab method
+
 ### v1.0.2
 
  - add a removeTab method

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "chrome-tabs",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "A chrome-tabs component",
   "license": "LICENSE.md",
   "main": "chrome-tabs.html",
@@ -28,7 +28,9 @@
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-pages": "PolymerElements/iron-pages#^1.0.8",
     "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "chai": "^3.5.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.4.0"
   },
   "ignore": [
     "demo/",

diff --git a/chrome-tab.html b/chrome-tab.html
@@ -207,10 +207,9 @@
        * @event tap-close
        * @param {chrome-tab} item the curent tab
        */
-      _close: function(flag) {
-        if(flag) {
-          this.fire('tab-close', { item: this });
-        }
+      _close: function(evt) {
+        evt.stopPropagation();
+        this.fire('tab-close', { item: this });
       },
 
     });

diff --git a/chrome-tabs.html b/chrome-tabs.html
@@ -35,7 +35,7 @@
 @demo demo/index.html
 -->
 <dom-module id="chrome-tabs">
-  <template>
+  <template strip-whitespace>
     <style>
       :host {
         display: flex;
@@ -56,6 +56,12 @@
         box-sizing: inherit;
         font-family: inherit;
       }
+      :host ::content chrome-tab:not(:first-child) {
+        margin-left: -15px;
+      }
+      [hidden] {
+        display: none !important;
+      }
       .chrome-tabs-bottom-bar {
         position: absolute;
         bottom: 0;
@@ -104,7 +110,6 @@
       .tab-add:hover .tab-add-left {
         border-right-color: var(--tabs-add-hover-color, rgb(105, 101, 101));
       }
-
     </style>
     <div class="chrome-tabs-top"></div>
     <div class="chrome-tabs-content">
@@ -148,28 +153,64 @@
 
       listeners: {
         'iron-select': '_onIronSelect',
-        'tab-close':'_tabClose',
+        'tab-close': '_tabClose',
+      },
+
+      ready: function() {
+        this.selected = 0;
+      },
+
+      attached: function() {
+        Polymer.dom(this).observeNodes((info) => {
+          this._attachedNodes(info.addedNodes);
+          this._removedNodes(info.removedNodes);
+        });
+      },
+
+      _attachedNodes: function(nodes) {
+        const addedTabs = nodes.filter(node => {
+          return node.tagName === "CHROME-TAB";
+        })
+        if (addedTabs.length === 1) {
+          this.selected = this.items.length - 1;
+        }
+      },
+
+      _removedNodes: function(nodes) {
+        const removedTabs = nodes.filter(node => {
+          return node.tagName === "CHROME-TAB";
+        })
+        if (removedTabs.length && this.selected > this.items.length - 1) {
+          this.selected = this.items.length - 1;
+        }
       },
 
       _onIronSelect: function(event) {
-        if(event.detail.item.classList.contains('tab-removed')) {
-          this.selected = Polymer.dom(this).children.indexOf(this._previousTab);
-          return;
+        if (this._previousSelect !== this.selected) {
+          this._previousTab = event.detail.item;
+          this._previousSelect = this.selected;
+        } else if (this._previousTab !== event.detail.item) {
+          const oldIndx = Polymer.dom(this).children.indexOf(this._previousTab);
+          if (oldIndx > -1) {
+            this.selected = oldIndx;
+            this._previousSelect = oldIndx;
+          } else {
+            this._previousTab = event.detail.item;
+          }
         }
-        this._previousTab = event.detail.item;
         this.cancelDebouncer('tab-changed');
       },
 
       /**
-       * remove a tab when receiving a tab-close event
+       * sent when the user click on the close button of a tab
        *
        * @event tab-remove
-       * @param {integer} index index of the removed tab
+       * @param {integer} index index of the tab to remove
        */
       _tabClose: function(evt) {
+        evt.stopPropagation();
         evt.target.classList.add('tab-removed');
         const indx = Polymer.dom(this).children.indexOf(evt.target);
-        this.removeTab(indx);
         this.fire('tab-remove', { index: indx });
       },
 
@@ -178,50 +219,14 @@
       },
 
       /**
-       * on clicking on the add button, create a new tab and
-       * fire a tab-add event
+       * sent when the user click on the add button
        *
        * @event tab-add
-       * @param {chrome-tab} item the created tab.
        */
       _add: function() {
-        const tab = this.addTab();
-        this.fire('tab-add', { item: tab });
-      },
-
-      /**
-       * create a new tab
-       *
-       * the new tab becomes the selected one
-       *
-       * @method addTab
-       * @param  {String} icon  url of the icon
-       * @param  {String} title title of the tab
-       * @return {chrome-tab} the created chrome tab
-       */
-      addTab: function(icon, title) {
-        const tab = document.createElement('chrome-tab');
-        if(icon) { tab.icon = icon; }
-        if(title) { tab.title = title; }
-        Polymer.dom(this).appendChild(tab);
-        this.selected = Polymer.dom(this).children.length - 1;
-        return tab;
+        this.fire('tab-add');
       },
 
-      /**
-       * remove a tab by its index
-       * @method removeTab
-       * @param  {Number}  index the index of the tab to remove
-       */
-      removeTab: function(index) {
-        if( index < 0 || index >= this.items.length ) {
-          throw new Error('bad index');
-        }
-        if(this.selected === index && index === Polymer.dom(this).children.length - 1) {
-          this.selected--;
-        }
-        Polymer.dom(this).removeChild(this.items[index]);
-      }
     });
   </script>
 </dom-module>
diff --git a/demo/index.html b/demo/index.html
@@ -24,7 +24,7 @@
     <div class="vertical-section-container centered">
       <h3>Basic chrome-tabs Demo</h3>
       <demo-snippet>
-        <template>
+        <template is="dom-bind" id="demo">
           <style is="custom-style">
             .content {
               height: 100px;
@@ -39,46 +39,62 @@ <h3>Basic chrome-tabs Demo</h3>
               background: gainsboro;
             }
           </style>
-          <chrome-tabs selected="1" extendable >
-            <chrome-tab unclosable icon="https://www.polymer-project.org/images/logos/p-logo-32.png" title="Tab title"></chrome-tab>
-            <chrome-tab icon="https://assets-cdn.github.com/favicon.ico" title="Tab title"></chrome-tab>
-            <chrome-tab
-              icon='https://www.google.fr/images/branding/product/ico/googleg_lodp.ico'
-              title="Google"></chrome-tab>
-            <chrome-tab title="Tab title"></chrome-tab>
+          <chrome-tabs selected="{{selected}}" extendable id="tabs">
+            <template is="dom-repeat" items={{pages}}>
+              <chrome-tab icon="[[item.icon]]" title="[[item.title]]" unclosable=[[item.unclosable]]></chrome-tab>
+            </template>
           </chrome-tabs>
-          <iron-pages selected="1">
-            <div class="content">
-              content 1
-            </div>
-            <div class="content">
-              content 2
-            </div>
-            <div class="content">
-              content 3
-            </div>
-            <div class="content">
-              content 4
-            </div>
+          <iron-pages selected="{{selected}}">
+            <template is="dom-repeat" items={{pages}}>
+              <div class="content">{{item.content}}</div>
+            </template>
           </iron-pages>
 
           <script>
-            const tabs = document.querySelector('chrome-tabs');
-            const pages = document.querySelector('iron-pages');
-            let pgnb = 4;
-            tabs.addEventListener('iron-select', (evt) => {
-              pages.selected = evt.target.selected;
+            const pages = [
+              {
+                icon: 'https://www.polymer-project.org/images/logos/p-logo-32.png',
+
+                title: 'Polymer project',
+                content: 'content 1'
+              },
+              {
+                icon: 'https://assets-cdn.github.com/favicon.ico',
+                title: 'Github',
+                unclosable: false,
+                content: 'content 2'
+              },
+              {
+                icon: 'https://www.google.fr/images/branding/product/ico/googleg_lodp.ico',
+                title: 'Google',
+                unclosable: false,
+                content: 'content 3'
+              },
+              {
+                icon: '',
+                title: 'Tab title',
+                unclosable: false,
+                content: 'content 4'
+              },
+            ];
+
+            const demo = document.querySelector('#demo');
+
+            demo.set('pages',pages);
+            Polymer.dom.flush();
+            demo.selected = 1;
+
+            demo.$.tabs.addEventListener('tab-add', () => {
+              const newTab = {
+                icon:'',
+                title:'about:blank',
+                content:`content ${pages.length+1}`
+              };
+              demo.push('pages', newTab);
             });
-            tabs.addEventListener('tab-remove', (evt) => {
-              Polymer.dom(pages).removeChild(pages.children[evt.detail.index]);
-            })
-            tabs.addEventListener('tab-add', (evt) => {
-              // const tab = evt.detail.item;
-              // tab.icon = 'https://secure.gravatar.com/avatar/7ce3d6a27f4bb70d59ca8ecb3092f781?s=52&d=identicon'
-              const page = document.createElement('div');
-              page.classList.add('content')
-              page.innerHTML = `content ${++pgnb}`;
-              Polymer.dom(pages).appendChild(page);
+
+            demo.$.tabs.addEventListener('tab-remove', evt => {
+              demo.splice('pages', evt.detail.index, 1);
             });
           </script>
 
@@ -99,7 +115,7 @@ <h3>customize chrome-tabs style</h3>
             color:white;
           }
           </style>
-          <chrome-tabs class="colorized" extendable selected="1" >
+          <chrome-tabs class="colorized" selected="1" >
             <chrome-tab icon="https://www.polymer-project.org/images/logos/p-logo-32.png" title="Tab title"></chrome-tab>
             <chrome-tab icon="https://assets-cdn.github.com/favicon.ico" title="Tab title"></chrome-tab>
             <chrome-tab title="Tab title"></chrome-tab>

diff --git a/demo/test.html b/demo/test.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+  <head>
+    <title>chrome-tabs demo</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+
+    <link rel="import" href="../chrome-tabs.html">
+    <link rel="import" href="../chrome-tab.html">
+    <link rel="import" href="../../iron-pages/iron-pages.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+    .centered {
+      max-width:90%;
+    }
+    </style>
+  </head>
+  <body>
+    <template is="dom-bind" id="demo">
+      <style is="custom-style">
+        .content {
+          height: 100px;
+          padding: 10px;
+          box-sizing: border-box;
+          border: 1px solid lightgray;
+          border-top: none;
+          background: white;
+        }
+        iron-pages {
+          height: 100px;
+          background: gainsboro;
+        }
+
+      </style>
+      <chrome-tabs selected="{{selected}}" extendable id="tabs">
+        <chrome-tab unclosable icon="https://www.polymer-project.org/images/logos/p-logo-32.png" title="Tab title"></chrome-tab>
+        <chrome-tab icon="https://assets-cdn.github.com/favicon.ico" title="Tab title"></chrome-tab>
+        <chrome-tab
+              icon='https://www.google.fr/images/branding/product/ico/googleg_lodp.ico'
+              title="Google"></chrome-tab>
+        <chrome-tab title="Tab title"></chrome-tab>
+      </chrome-tabs>
+      <script>
+        const demo = document.querySelector('#demo');
+        demo.selected = 1;
+        demo.$.tabs.addEventListener('tab-remove', evt => {
+          const tab = demo.$.tabs.items[evt.detail.index];
+          Polymer.dom(demo.$.tabs).removeChild(tab);
+        });
+
+        demo.$.tabs.addEventListener('tab-add', () => {
+          let newTab = document.createElement('chrome-tab');
+          newTab.icon = '';
+          newTab.title = 'about:blank';
+          Polymer.dom(demo.$.tabs).appendChild(newTab);
+        });
+      </script>
+    </template>
+  </body>
+</html>