nomenclature improvements

- current tab => active tab - just-dragged => was-just-dragged - currently-dragged => is-dragging - related changes
stoarca · Jan 16, 2019 · ee40805 · ee40805
1 parent 4465dc9
commit ee40805
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 51 deletions.
diff --git a/css/chrome-tabs-dark-theme.css b/css/chrome-tabs-dark-theme.css
@@ -8,13 +8,13 @@
 .chrome-tabs.chrome-tabs-dark-theme .chrome-tab .chrome-tab-background > svg .chrome-tab-geometry {
   fill: #292b2e;
 }
-.chrome-tabs.chrome-tabs-dark-theme .chrome-tab.chrome-tab-current .chrome-tab-background > svg .chrome-tab-geometry {
+.chrome-tabs.chrome-tabs-dark-theme .chrome-tab[active] .chrome-tab-background > svg .chrome-tab-geometry {
   fill: #323639;
 }
 .chrome-tabs.chrome-tabs-dark-theme .chrome-tab .chrome-tab-title {
   color: #9ca1a7;
 }
-.chrome-tabs.chrome-tabs-dark-theme .chrome-tab.chrome-tab-current .chrome-tab-title {
+.chrome-tabs.chrome-tabs-dark-theme .chrome-tab[active] .chrome-tab-title {
   color: #f1f3f4;
 }
 .chrome-tabs.chrome-tabs-dark-theme .chrome-tab .chrome-tab-close {

diff --git a/css/chrome-tabs-dark-theme.styl b/css/chrome-tabs-dark-theme.styl
@@ -14,13 +14,13 @@ activeTabBackgroundColor = #323639
     .chrome-tab-background > svg .chrome-tab-geometry
       fill #292b2e
 
-    &.chrome-tab-current .chrome-tab-background > svg .chrome-tab-geometry
+    &[active] .chrome-tab-background > svg .chrome-tab-geometry
       fill activeTabBackgroundColor
 
     .chrome-tab-title
       color #9ca1a7
 
-    &.chrome-tab-current .chrome-tab-title
+    &[active] .chrome-tab-title
       color #f1f3f4
 
     .chrome-tab-close

diff --git a/css/chrome-tabs.css b/css/chrome-tabs.css
@@ -90,26 +90,26 @@
 .chrome-tabs .chrome-tab .chrome-tab-background > svg .chrome-tab-geometry {
   fill: #f4f5f6;
 }
-.chrome-tabs .chrome-tab.chrome-tab-current {
+.chrome-tabs .chrome-tab[active] {
   z-index: 5;
 }
-.chrome-tabs .chrome-tab.chrome-tab-current .chrome-tab-background > svg .chrome-tab-geometry {
+.chrome-tabs .chrome-tab[active] .chrome-tab-background > svg .chrome-tab-geometry {
   fill: #fff;
 }
-.chrome-tabs .chrome-tab:not(.chrome-tab-current) .chrome-tab-background {
+.chrome-tabs .chrome-tab:not([active]) .chrome-tab-background {
   transition: opacity 0.2s ease;
   opacity: 0;
 }
-.chrome-tabs .chrome-tab:not(.chrome-tab-current):hover {
+.chrome-tabs .chrome-tab:not([active]):hover {
   z-index: 2;
 }
-.chrome-tabs .chrome-tab:not(.chrome-tab-current):hover .chrome-tab-background,
-.chrome-tabs .chrome-tab:not(.chrome-tab-current).chrome-tab-currently-dragged .chrome-tab-background {
+.chrome-tabs .chrome-tab:not([active]):hover .chrome-tab-background,
+.chrome-tabs .chrome-tab:not([active]).chrome-tab-is-dragging .chrome-tab-background {
   opacity: 1;
 }
-.chrome-tabs .chrome-tab.chrome-tab-just-added {
+.chrome-tabs .chrome-tab.chrome-tab-was-just-added {
   top: 10px;
-  animation: chrome-tab-just-added 120ms forwards ease-in-out;
+  animation: chrome-tab-was-just-added 120ms forwards ease-in-out;
 }
 .chrome-tabs .chrome-tab .chrome-tab-content {
   position: absolute;
@@ -140,11 +140,11 @@
 .chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon {
   margin-left: 0;
 }
-.chrome-tabs .chrome-tab[is-mini]:not(.chrome-tab-current) .chrome-tab-favicon {
+.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-favicon {
   margin-left: auto;
   margin-right: auto;
 }
-.chrome-tabs .chrome-tab[is-mini].chrome-tab-current .chrome-tab-favicon {
+.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-favicon {
   display: none;
 }
 .chrome-tabs .chrome-tab .chrome-tab-title {
@@ -168,7 +168,7 @@
 .chrome-tabs .chrome-tab[is-mini] .chrome-tab-title {
   display: none;
 }
-.chrome-tabs .chrome-tab.chrome-tab-current .chrome-tab-title {
+.chrome-tabs .chrome-tab[active] .chrome-tab-title {
   color: #45474a;
 }
 .chrome-tabs .chrome-tab .chrome-tab-drag-handle {
@@ -198,46 +198,46 @@
 .chrome-tabs .chrome-tab .chrome-tab-close:hover:active {
   background-color: #dadce0;
 }
-.chrome-tabs .chrome-tab:not(.chrome-tab-current) .chrome-tab-close:not(:hover):not(:active) {
+.chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) {
   opacity: 0.8;
 }
 .chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close {
   margin-left: auto;
 }
-.chrome-tabs .chrome-tab[is-mini]:not(.chrome-tab-current) .chrome-tab-close {
+.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-close {
   display: none;
 }
-.chrome-tabs .chrome-tab[is-mini].chrome-tab-current .chrome-tab-close {
+.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-close {
   margin-left: auto;
   margin-right: auto;
 }
-@-moz-keyframes chrome-tab-just-added {
+@-moz-keyframes chrome-tab-was-just-added {
   to {
     top: 0;
   }
 }
-@-webkit-keyframes chrome-tab-just-added {
+@-webkit-keyframes chrome-tab-was-just-added {
   to {
     top: 0;
   }
 }
-@-o-keyframes chrome-tab-just-added {
+@-o-keyframes chrome-tab-was-just-added {
   to {
     top: 0;
   }
 }
-@keyframes chrome-tab-just-added {
+@keyframes chrome-tab-was-just-added {
   to {
     top: 0;
   }
 }
-.chrome-tabs.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-currently-dragged),
-.chrome-tabs:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-just-dragged {
+.chrome-tabs.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-is-dragging),
+.chrome-tabs:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-was-just-dragged {
   transition: transform 120ms ease-in-out;
 }
 @supports (-webkit-overflow-scrolling: touch) {
-  .chrome-tabs.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-currently-dragged),
-  .chrome-tabs:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-just-dragged {
+  .chrome-tabs.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-is-dragging),
+  .chrome-tabs:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-was-just-dragged {
     transition: none;
   }
 }

diff --git a/css/chrome-tabs.styl b/css/chrome-tabs.styl
@@ -87,13 +87,13 @@ activeTabBackgroundColor = #fff
         .chrome-tab-geometry
           fill #f4f5f6
 
-    &.chrome-tab-current
+    &[active]
       z-index 5
 
       .chrome-tab-background > svg .chrome-tab-geometry
         fill activeTabBackgroundColor
 
-    &:not(.chrome-tab-current)
+    &:not([active])
 
       .chrome-tab-background
         transition opacity .2s ease
@@ -102,7 +102,7 @@ activeTabBackgroundColor = #fff
       &:hover
         z-index 2
 
-      &:hover, &.chrome-tab-currently-dragged
+      &:hover, &.chrome-tab-is-dragging
 
         .chrome-tab-background
           opacity 1
@@ -144,11 +144,11 @@ activeTabBackgroundColor = #fff
     &[is-small] .chrome-tab-favicon
       margin-left 0
 
-    &[is-mini]:not(.chrome-tab-current) .chrome-tab-favicon
+    &[is-mini]:not([active]) .chrome-tab-favicon
       margin-left auto
       margin-right auto
 
-    &[is-mini].chrome-tab-current .chrome-tab-favicon
+    &[is-mini][active] .chrome-tab-favicon
       display none
 
     .chrome-tab-title
@@ -172,7 +172,7 @@ activeTabBackgroundColor = #fff
     &[is-mini] .chrome-tab-title
       display none
 
-    &.chrome-tab-current .chrome-tab-title
+    &[active] .chrome-tab-title
       color #45474a
 
     .chrome-tab-drag-handle
@@ -202,21 +202,21 @@ activeTabBackgroundColor = #fff
         &:active
           background-color #dadce0
 
-    &:not(.chrome-tab-current) .chrome-tab-close:not(:hover):not(:active)
+    &:not([active]) .chrome-tab-close:not(:hover):not(:active)
       opacity .8
 
     &[is-smaller] .chrome-tab-close
       margin-left auto
 
-    &[is-mini]:not(.chrome-tab-current) .chrome-tab-close
+    &[is-mini]:not([active]) .chrome-tab-close
       display none
 
-    &[is-mini].chrome-tab-current .chrome-tab-close
+    &[is-mini][active] .chrome-tab-close
       margin-left auto
       margin-right auto
 
-  &.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-currently-dragged)
-  &:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-just-dragged
+  &.chrome-tabs-sorting .chrome-tab:not(.chrome-tab-is-dragging)
+  &:not(.chrome-tabs-sorting) .chrome-tab.chrome-tab-was-just-dragged
     transition transform 120ms ease-in-out
 
     @supports (-webkit-overflow-scrolling: touch)

diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
               <div class="chrome-tab-close"></div>
             </div>
           </div>
-          <div class="chrome-tab chrome-tab-current">
+          <div class="chrome-tab" active>
             <div class="chrome-tab-dividers"></div>
             <div class="chrome-tab-background">
               <svg version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><symbol id="chrome-tab-geometry-left" viewBox="0 0 214 34" ><path d="M17 0h197v34H0c5 0 9-3 9-8V8c0-5 3-8 8-8z"/></symbol><symbol id="chrome-tab-geometry-right" viewBox="0 0 214 34"><use xlink:href="#chrome-tab-geometry-left"/></symbol><clipPath id="crop"><rect class="mask" width="100%" height="100%" x="0"/></clipPath></defs><svg width="50%" height="100%"><use xlink:href="#chrome-tab-geometry-left" width="214" height="34" class="chrome-tab-geometry"/></svg><g transform="scale(-1, 1)"><svg width="50%" height="100%" x="-100%" y="0"><use xlink:href="#chrome-tab-geometry-right" width="214" height="34" class="chrome-tab-geometry"/></svg></g></svg>
@@ -70,8 +70,8 @@
         <div class="buttons">
           <button data-theme-toggle>Toggle dark theme</button>
           <button data-add-tab>Add new tab</button>
-          <button data-remove-tab>Remove current tab</button>
           <button data-add-background-tab>Add tab in the background</button>
+          <button data-remove-tab>Remove active tab</button>
         </div>
       </div>
     </div>
@@ -109,7 +109,7 @@
       })
 
       document.querySelector('button[data-remove-tab]').addEventListener('click', _ => {
-        chromeTabs.removeTab(el.querySelector('.chrome-tab-current'))
+        chromeTabs.removeTab(chromeTabs.activeTabEl)
       })
 
       document.querySelector('button[data-theme-toggle]').addEventListener('click', _ => {

diff --git a/js/chrome-tabs.js b/js/chrome-tabs.js
@@ -203,16 +203,24 @@
       tabEl.querySelector('.chrome-tab-close').addEventListener('click', _ => this.removeTab(tabEl))
     }
 
+    get activeTabEl() {
+      return this.el.querySelector('.chrome-tab[active]')
+    }
+
+    hasActiveTab() {
+      return !!this.activeTabEl
+    }
+
     setCurrentTab(tabEl) {
-      const currentTab = this.el.querySelector('.chrome-tab-current')
-      if (currentTab === tabEl) return
-      if (currentTab) currentTab.classList.remove('chrome-tab-current')
-      tabEl.classList.add('chrome-tab-current')
+      const activeTabEl = this.activeTabEl
+      if (activeTabEl === tabEl) return
+      if (activeTabEl) activeTabEl.removeAttribute('active')
+      tabEl.setAttribute('active', '')
       this.emit('activeTabChange', { tabEl })
     }
 
     removeTab(tabEl) {
-      if (tabEl.classList.contains('chrome-tab-current')) {
+      if (tabEl === this.activeTabEl) {
         if (tabEl.nextElementSibling) {
           this.setCurrentTab(tabEl.nextElementSibling)
         } else if (tabEl.previousElementSibling) {
@@ -237,7 +245,7 @@
     }
 
     cleanUpPreviouslyDraggedTabs() {
-      this.tabEls.forEach((tabEl) => tabEl.classList.remove('chrome-tab-just-dragged'))
+      this.tabEls.forEach((tabEl) => tabEl.classList.remove('chrome-tab-was-just-dragged'))
     }
 
     setupDraggabilly() {
@@ -262,8 +270,8 @@
 
         draggabillyInstance.on('dragStart', () => {
           this.cleanUpPreviouslyDraggedTabs()
-          tabEl.classList.add('chrome-tab-currently-dragged')
-          this.el.classList.add('chrome-tabs-sorting')
+          tabEl.classList.add('chrome-tab-is-dragging')
+          this.el.classList.add('chrome-tabs-is-sorting')
         })
 
         draggabillyInstance.on('dragEnd', () => {
@@ -276,10 +284,10 @@
             tabEl.style.transform = `translate3d(${ finalTranslateX }px, 0, 0)`
 
             requestAnimationFrame(() => {
-              tabEl.classList.remove('chrome-tab-currently-dragged')
-              this.el.classList.remove('chrome-tabs-sorting')
+              tabEl.classList.remove('chrome-tab-is-dragging')
+              this.el.classList.remove('chrome-tabs-is-sorting')
 
-              tabEl.classList.add('chrome-tab-just-dragged')
+              tabEl.classList.add('chrome-tab-was-just-dragged')
 
               requestAnimationFrame(() => {
                 tabEl.style.transform = ''