curvy-tabs - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

index.js

@@ -54,2 +54,3 @@ /* eslint-env browser */
     children.forEach(function(child) {
+        child.dataset.display = window.getComputedStyle(child).display;
         contents.appendChild(child);
@@ -82,23 +83,30 @@ });
     addTab: function(name, html, color) {
-        var content = document.createElement('div');
-        content.setAttribute('name', name);
+        var el = document.createElement('div');
+        el.setAttribute('name', name);
         if (html) {
-            content.innerHTML = html;
+            el.innerHTML = html;
         }
         if (color) {
-            content.style.backgroundColor = color;
+            el.style.backgroundColor = color;
         }
-        this.tabs.set(content, {});
-        this.contents.appendChild(content);
-        this.selected = content;
+        el.dataset.display = window.getComputedStyle(el).display;
+        this.tabs.set(el, {});
+        this.contents.appendChild(el);
+        this.selected = el;
         this.paint();
     },
 
-    getTab: function(indexOrName) {
-        var tab = typeof indexOrName === 'number'
-            ? this.contents.children[indexOrName]
-            : this.contents.querySelector('[name="' + indexOrName + '"]');
+    getTab: function(idxOrNamOrEl) {
+        var tab;
 
-        if (!tab) {
-            throw new ReferenceError('Cannot find specified tab: ' + indexOrName);
+        if (idxOrNamOrEl instanceof HTMLElement) {
+            tab = idxOrNamOrEl;
+        } else {
+            tab = typeof idxOrNamOrEl === 'number'
+                ? this.contents.children[idxOrNamOrEl]
+                : this.contents.querySelector('[name="' + idxOrNamOrEl + '"]');
+
+            if (!tab) {
+                throw new ReferenceError('Cannot find specified tab: ' + indexOrName);
+            }
         }
@@ -178,8 +186,8 @@
 
-    select: function(indexOrName) {
-        this.selected = this.getTab(indexOrName);
+    select: function(idxOrNamOrEl) {
+        this.selected = this.getTab(idxOrNamOrEl);
     },
 
-    clear: function(indexOrName) {
-        var tab = this.getTab(indexOrName);
+    clear: function(idxOrNamOrEl) {
+        var tab = this.getTab(idxOrNamOrEl);
         while (tab.hasChildNodes()) {
@@ -190,19 +198,33 @@ tab.removeChild(tab.lastChild);
 
-    hide: function(indexOrName) {
-        this.toggle(indexOrName, false);
+    hide: function(idxOrNamOrEl) {
+        this.toggle(idxOrNamOrEl, false);
     },
 
-    show: function(indexOrName) {
-        this.toggle(indexOrName, true);
+    show: function(idxOrNamOrEl) {
+        this.toggle(idxOrNamOrEl, true);
     },
 
-    toggle: function(indexOrName, visibility) {
-        var tab = this.getTab(indexOrName);
+    toggle: function(idxOrNamOrEl, visibility) {
+        var tab = this.getTab(idxOrNamOrEl);
         if (visibility === undefined) {
             visibility = window.getComputedStyle(tab).display === 'none';
         }
-        tab.style.display = visibility ? 'block' : 'none';
-        this.paint();
+        if (!visibility && tab === this.selected) {
+            console.warn('Attempt to hide currently selected tab ignored.');
+        } else {
+            tab.style.display = visibility ? 'block' : 'none';
+            this.paint();
+        }
     },
 
+    reset: function(save) {
+        this.contentDivs.forEach(function(el) {
+            if (save) {
+                el.dataset.display = window.getComputedStyle(el).display;
+            } else {
+                this.toggle(el, el.dataset.display !== 'none');
+            }
+        }, this);
+    },
+
     css: function(keyOrObject, value) {
@@ -209,0 +231,0 @@ css.call(this, this.contents, keyOrObject, value);

package.json

 {
   "name": "curvy-tabs",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Tab bar with fancy tabs",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -47,3 +47,3 @@ See the [demo](https://joneit.github.io/curvy-tabs/2.1.1).
 
-#### `CurvyTabs.prototype.getTab(indexOrName)` method
+#### `CurvyTabs.prototype.getTab(idxOrNamOrEl)` method
 
@@ -57,2 +57,3 @@ To get a content element by index or name.
 ```
+Note that `tabBar.getTab(tab) === tab`.
 
@@ -67,3 +68,3 @@ #### `CurvyTabs.prototype.selected` property
 ```
-#### `CurvyTabs.prototype.select(indexOrName)` method
+#### `CurvyTabs.prototype.select(idxOrNamOrEl)` method
 Or, use the `select` convenience method to set the `selected` property:
@@ -73,5 +74,6 @@ ```js
 tabBar.select('Tab B'); // by name
+tabBar.select(tabEl); // when you already have a reference to a tab element
 ```
 
-#### `CurvyTabs.prototype.clear(indexOrName)` method
+#### `CurvyTabs.prototype.clear(idxOrNamOrEl)` method
 
@@ -82,2 +84,3 @@ To "clear" (removes all child elements from) the 2nd tab’s content element:
 tabBar.clear('Tab B'); // by name
+tabBar.clear(tabEl); // when you already have a reference to a tab element
 ```
@@ -104,28 +107,25 @@
 
-##### `CurvyTabs.prototype.hide(indexOrName)` method
-Given:
+##### `CurvyTabs.prototype.hide(idxOrNamOrEl)` method
 ```js
-var indexOrName = 1; // by zero-based index
-var indexOrName = 'Tab B'; // by name
+var idxOrNamOrEl = 1; // by zero-based index
+var idxOrNamOrEl = 'Tab B'; // by name
+var idxOrNamOrEl = tabEl; // when you already have a reference to a tab element
+tabBar.hide(idxOrNamOrEl);
 ```
-Either of:
-```js
-tabBar.hide(indexOrName);
-```
+<strong>Caveat:</strong> Attempts to hide the current tab are ignored with a console warning. Be sure to switch to a visible tab first.
 
-##### `CurvyTabs.prototype.show(indexOrName)` method
-Either of:
+##### `CurvyTabs.prototype.show(idxOrNamOrEl)` method
 ```js
-tabBar.show(indexOrName);
+tabBar.show(idxOrNamOrEl);
 ```
 
-##### `CurvyTabs.prototype.toggle(indexOrName, isVisible)` method
+##### `CurvyTabs.prototype.toggle(idxOrNamOrEl, isVisible)` method
 To hide if visible or show if hidden:
 ```js
-tabBar.toggle(indexOrName);
+tabBar.toggle(idxOrNamOrEl);
 ```
 The optional second parameter `isVisible` forces visibility:
 ```js
-tabBar.toggle(indexOrName, false); // same as tabBar.hide(indexOrName)
-tabBar.toggle(indexOrName, true); // same as tabBar.show(indexOrName)
+tabBar.toggle(idxOrNamOrEl, false); // same as tabBar.hide(idxOrNamOrEl)
+tabBar.toggle(idxOrNamOrEl, true); // same as tabBar.show(idxOrNamOrEl)
 ```
@@ -137,3 +137,3 @@
 ```js
-tabBar.curviness = 0; // not curvy at all (looks exactly like Chrome's tabs)
+tabBar.curviness = 0; // not curvy at all, exactly like Chrome's tabs (prior to version 69)
 tabBar.curviness = 0.5; // somewhat curvy
@@ -242,2 +242,8 @@ tabBar.curviness = 1; // fully curvy (default)
 
+#### `CurvyTabs.prototype.reset(save)` method
+
+Two overloads:
+* `reset()` — Resets each tab to its visibility based on the value of its `display` style at the time the tab was loaded, or the last time `tabBar.reset(true)` was called
+* `reset(true)` — Saves the state of each tab’s `display` style for future reference by a `reset()` call.
+
 ### Event Handlers
@@ -273,3 +279,10 @@ #### `tabBar.onclick`
 
+## See Also
+* [`curvy-tab-pager`](curvy-tab-pager) which implements paged content for a curvy-tab tab bar.
+
 ## Version History
+* `2.3.0`
+   * Attempts to hide the current tab with the [`hide`](#curvytabsprototypehideidxornamorel-method), [`toggle`](#curvytabsprototypetoggleidxornamorel-isvisible-method), or [`reset`](#curvytabsprototyperesetidxornamorel-method) methods are ignored with a console warning.
+   * Add [`reset`](#curbytabsprototypereset-method) method
+   * All methods that previously had `indexOrName` overloads now have `idxOrNamOrEl` overloads — meaning that they all now accept an already known tab element in addition to its index or name. Previously if you already had the element, you couldn't just pass `el`; you would have had to pass `el.getAttribute('name')`. This would deref the name just so `getTab` could then search for the element by name.
 * `2.2.0`
@@ -282,3 +295,3 @@ * Add [`forEach`](#curvytabsprototypeforeachiterator-method) method
 * `2.1.0`
-   * Add & document [`getTab`](#curvytabsprototypegettabindexorname-method), [`select`](#curvytabsprototypeselectindexorname-method), [`clear`](#curvytabsprototypeclearindexorname-method), [`hide`](#curvytabsprototypehideindexorname-method), [`show`](#curvytabsprototypeshowindexorname-method), and [`toggle`](#curvytabsprototypetoggleindexorname-isvisible-method) methods
+   * Add & document [`getTab`](#curvytabsprototypegettabidxornamorel-method), [`select`](#curvytabsprototypeselectidxornamorel-method), [`clear`](#curvytabsprototypeclearidxornamorel-method), [`hide`](#curvytabsprototypehideidxornamorel-method), [`show`](#curvytabsprototypeshowidxornamorel-method), and [`toggle`](#curvytabsprototypetoggleidxornamorel-isvisible-method) methods
    * Tab visibility now respects content div's `display` style
@@ -285,0 +298,0 @@ * Document how to hide a tab by setting content div's `display` style

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25057

increased by10.27%

Lines of code

342

increased by6.21%

Number of lines in readme file

297

increased by4.58%

No dependency changes