curvy-tabs - npm Package Compare versions

Comparing version 2.3.7 to 2.3.8

index.js

@@ -44,2 +44,13 @@ /* eslint-env browser */
 function CurvyTabs(container, selectedContentElement) {
+    // IE 11 missing CustomEvent constructor
+    if ( typeof window.CustomEvent !== "function" ) {
+        window.CustomEvent = function(event, params) {
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
     injectStylesheet();
@@ -210,3 +221,6 @@
     select: function(idxOrNamOrEl) {
-        this.selected = this.getTab(idxOrNamOrEl);
+        var tab = this.getTab(idxOrNamOrEl);
+        if (dispatchEvents.call(this, tab)) {
+            this.selected = tab;
+        }
     },
@@ -291,2 +305,13 @@
         }
+    },
+
+    // forward 'onclick' handler access to container element as well as addEventListener calls
+    get onclick() {
+        return this.container.onclick;
+    },
+    set onclick(handler) {
+        this.container.onclick = handler;
+    },
+    addEventListener: function(type, handler) {
+        this.container.addEventListner(type, handler);
     }
@@ -407,36 +432,35 @@ };
 function clickHandler(event) {
-    this.visibleContentDivs.find(function(content) {
-        var props = this.tabs.get(content);
+    this.visibleContentDivs.find(function(contentDiv) {
+        var props = this.tabs.get(contentDiv);
         var margin = GAP + .25 * this.size;
         var left = props.left + margin;
         if (event.offsetX > left && event.offsetX < left + props.width - margin - margin) {
-            var stopPropagation = false,
-                preventDefault = false,
-                tabEvent = {
-                    content: content,
-                    left: props.left,
-                    width: props.width,
-                    stopPropagation: function() { stopPropagation = true; },
-                    preventDefault: function() { preventDefault = true; }
-                };
+            event.stopPropagation(); // we'll take it from here
+            this.select(contentDiv); // issues: event to tab content el + event to tab bar container el
+            return true; // found tab so quit loop
+        }
+    }, this);
+}
 
-            if (typeof props.onclick === 'function') {
-                props.onclick.call(content, tabEvent);
-            }
+function dispatchEvents(contentDiv) {
+    var props = this.tabs.get(contentDiv);
 
-            if (!stopPropagation && typeof this.onclick === 'function') {
-                this.onclick(tabEvent);
-            }
+    // issue tab event
+    var tabEvent = new CustomEvent('click');
+    contentDiv.dispatchEvent(tabEvent);
 
-            if (!preventDefault) {
-                this.selected = content;
-            }
+    var tabBarEvent = new CustomEvent('click', {
+        detail: {
+            content: contentDiv,
+            left: props.left,
+            width: props.width
+        }
+    });
+    this.container.dispatchEvent(tabBarEvent);
 
-            return true;
-        }
-    }, this);
+    return !(tabEvent.defaultPrevented || tabBarEvent.defaultPrevented);
 }
 
-CurvyTabs.version = '2.3.7';
+CurvyTabs.version = '2.3.8';
 
 module.exports = CurvyTabs;

package.json

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

README.md

@@ -277,2 +277,5 @@ See the [demo](https://joneit.github.io/curvy-tabs/2.1.1).
 ## Version History
+* `2.3.8` (10/12/2018)
+   * Fix events to work as advertised
+   * Add `CustomEvent` polyfill for IE 11
 * `2.3.7` (10/11/2018)
@@ -279,0 +282,0 @@ * Ignore hidden tabs in click handler

umd/curvy-tabs.js

@@ -45,2 +45,13 @@ (function(){
 function CurvyTabs(container, selectedContentElement) {
+    // IE 11 missing CustomEvent constructor
+    if ( typeof window.CustomEvent !== "function" ) {
+        window.CustomEvent = function(event, params) {
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
     injectStylesheet();
@@ -211,3 +222,6 @@
     select: function(idxOrNamOrEl) {
-        this.selected = this.getTab(idxOrNamOrEl);
+        var tab = this.getTab(idxOrNamOrEl);
+        if (dispatchEvents.call(this, tab)) {
+            this.selected = tab;
+        }
     },
@@ -292,2 +306,13 @@
         }
+    },
+
+    // forward 'onclick' handler access to container element as well as addEventListener calls
+    get onclick() {
+        return this.container.onclick;
+    },
+    set onclick(handler) {
+        this.container.onclick = handler;
+    },
+    addEventListener: function(type, handler) {
+        this.container.addEventListner(type, handler);
     }
@@ -408,37 +433,36 @@ };
 function clickHandler(event) {
-    this.visibleContentDivs.find(function(content) {
-        var props = this.tabs.get(content);
+    this.visibleContentDivs.find(function(contentDiv) {
+        var props = this.tabs.get(contentDiv);
         var margin = GAP + .25 * this.size;
         var left = props.left + margin;
         if (event.offsetX > left && event.offsetX < left + props.width - margin - margin) {
-            var stopPropagation = false,
-                preventDefault = false,
-                tabEvent = {
-                    content: content,
-                    left: props.left,
-                    width: props.width,
-                    stopPropagation: function() { stopPropagation = true; },
-                    preventDefault: function() { preventDefault = true; }
-                };
+            event.stopPropagation(); // we'll take it from here
+            this.select(contentDiv); // issues: event to tab content el + event to tab bar container el
+            return true; // found tab so quit loop
+        }
+    }, this);
+}
 
-            if (typeof props.onclick === 'function') {
-                props.onclick.call(content, tabEvent);
-            }
+function dispatchEvents(contentDiv) {
+    var props = this.tabs.get(contentDiv);
 
-            if (!stopPropagation && typeof this.onclick === 'function') {
-                this.onclick(tabEvent);
-            }
+    // issue tab event
+    var tabEvent = new CustomEvent('click');
+    contentDiv.dispatchEvent(tabEvent);
 
-            if (!preventDefault) {
-                this.selected = content;
-            }
+    var tabBarEvent = new CustomEvent('click', {
+        detail: {
+            content: contentDiv,
+            left: props.left,
+            width: props.width
+        }
+    });
+    this.container.dispatchEvent(tabBarEvent);
 
-            return true;
-        }
-    }, this);
+    return !(tabEvent.defaultPrevented || tabBarEvent.defaultPrevented);
 }
 
-CurvyTabs.version = '2.3.7';
+CurvyTabs.version = '2.3.8';
 
 window.CurvyTabs = CurvyTabs;
 })();

umd/curvy-tabs.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var r,c=".curvy-tabs-container {position: relative;width: 500px;height: 500px;}\n.curvy-tabs-container > div {position: absolute;left: 0;bottom: 0;right: 0;border: 1px solid #aaa;border-radius: 7px;}\n.curvy-tabs-container > div > * {position: absolute;display: block;visibility: hidden;padding: 8px;top: 0;bottom: 0;left: 0;right: 0;overflow: scroll;border-radius: 7px;}\n.curvy-tabs-container > canvas {position: absolute;}\n",d=4,u=4,f="rgba(0, 0, 0, 0)";function l(t,e){!function(){if(!document.head.querySelector("style#injected-stylesheet-curvy-tabs")){var t=document.createElement("style");t.id="injected-stylesheet-curvy-tabs",t.innerHTML=c,document.head.insertBefore(t,document.head.firstElementChild)}}();var i=Array.prototype.slice.call(t.children);this.container=t,this._minWidth=0,this._curviness=1,this._font="10pt sans-serif",this._selected=e||i[0];var s=this.contents=document.createElement("div");i.forEach(function(t){t.dataset.display=window.getComputedStyle(t).display,s.appendChild(t)}),t.appendChild(s);var n=this.tabs=new WeakMap;this.contentDivs.forEach(function(t){n.set(t,{})}),g.call(this);var o=t.getBoundingClientRect(),h=this.canvas=document.createElement("canvas"),a=this.gc=h.getContext("2d");r=(window.devicePixelRatio||1)/(a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1),t.appendChild(h),this.width=o.width,this.size=l.size,this.height=this.height,h.addEventListener("click",function(a){this.visibleContentDivs.find(function(t){var e=this.tabs.get(t),i=d+.25*this.size,s=e.left+i;if(a.offsetX>s&&a.offsetX<s+e.width-i-i){var n=!1,o=!1,h={content:t,left:e.left,width:e.width,stopPropagation:function(){n=!0},preventDefault:function(){o=!0}};return"function"==typeof e.onclick&&e.onclick.call(t,h),n||"function"!=typeof this.onclick||this.onclick(h),o||(this.selected=t),!0}},this)}.bind(this))}function s(t,e,i){var s=t.style;if("object"!=typeof e||Array.isArray(e)){if(3===arguments.length)s[e]=i;else if(2===arguments.length)return Array.isArray(e)?e.reduce(function(t,e){return t[e]=s[e],t},{}):window.getComputedStyle(t)[e]}else Object.keys(e).forEach(function(t){s[t]=e[t]})}function g(){var e=this.contents.style.borderRadius;this.contentDivs.forEach(function(t){t.style.borderRadius=e})}function v(){return window.getComputedStyle(this.contents)}function p(){return parseFloat(v.call(this).borderWidth)}function n(t,e,i){for(var s=this.gc,n=this.size-1,o=.5*n,h=.8*this.curviness*o,a=t.getAttribute("name"),r=Math.max(this.minWidth,u+s.measureText(a).width+u),c=t,l=f;l===f;c=c.parentElement)if(l=window.getComputedStyle(c).backgroundColor,c===document.body){l===f&&(l="white");break}return s.save(),s.translate(e+.5,.5),s.lineWidth=p.call(this),i&&(s.beginPath(),s.moveTo(d,n),s.lineTo(d+o+r+o,n),s.strokeStyle=l,s.stroke()),s.beginPath(),s.moveTo(0,n),s.lineTo(d,n),s.translate(d,0),s.bezierCurveTo(h,n,o-h,0,o,0),s.lineTo(o+r,0),s.translate(o+r,0),s.bezierCurveTo(h,0,o-h,n,o,n),s.lineTo(o+d,n),i||s.closePath(),s.fillStyle=l,s.fill(),s.fillStyle="black",s.fillText(a,-r/2,2*n/3),s.strokeStyle=v.call(this).borderColor,s.stroke(),s.restore(),d+o+r+o+d}l.size=29,l.prototype={constructor:l,addTab:function(t,e,i){var s=document.createElement("div");s.setAttribute("name",t),e&&(s.innerHTML=e),i&&(s.style.backgroundColor=i),s.dataset.display=window.getComputedStyle(s).display,this.tabs.set(s,{}),this.contents.appendChild(s),this.selected=s,this.paint()},getTab:function(t){var e;if(t instanceof HTMLElement)e=t;else if(!(e="number"==typeof t?this.contents.children[t]:this.contents.querySelector('[name="'+t+'"]')))throw new ReferenceError("Cannot find specified tab: "+t);return e},get contentDivs(){return Array.prototype.slice.call(this.contents.children)},forEach:function(t){this.contenDivs.forEach(t)},get minWidth(){return this._minWidth},set minWidth(t){this._minWidth=t,this.paint()},get width(){return this._width},set width(t){t=Math.floor(t),this._width=t,this.canvas.width=t*r,this.container.style.width=t+"px",this.gc.scale(r,r),this.paint()},get size(){return this._height},set size(t){t=Math.floor(t),this._height=t,this.canvas.height=t*r,this.canvas.style.height=t+"px",this.gc.scale(r,r),this.contents.style.top=t-1+"px",this.paint()},get height(){return this.container.getBoundingClientRect().height},set height(t){this.container.style.height=t+"px",this.contents.style.top=this.size-p.call(this)+"px",this.paint()},get curviness(){return this._curviness},set curviness(t){this._curviness=t,this.paint(),this.contents.style.borderRadius=7*t+"px",g.call(this)},get font(){return this._font},set font(t){this._font=t,this.paint()},get selected(){return this._selected},set selected(t){this._selected=t,this.paint()},select:function(t){this.selected=this.getTab(t)},clear:function(t){for(var e=this.getTab(t);e.hasChildNodes();)e.removeChild(e.lastChild)},hide:function(t){this.toggle(t,!1)},show:function(t){this.toggle(t,!0)},toggle:function(t,e){var i=this.getTab(t);void 0===e&&(e=!this.visible(i)),e||i!==this.selected?(i.style.display=e?"block":"none",this.paint()):console.warn("Attempt to hide currently selected tab ignored.")},visible:function(t){var e=this.getTab(t);return"block"===window.getComputedStyle(e).display},get visibleContentDivs(){return this.contentDivs.filter(function(t){return this.visible(t)},this)},reset:function(e){this.contentDivs.forEach(function(t){e?t.dataset.display=window.getComputedStyle(t).display:this.toggle(t,"none"!==t.dataset.display)},this)},css:function(t,e){s.call(this,this.contents,t,e),this.height=this.height},contentCss:function(e,i){this.contentDivs.forEach(function(t){s.call(this,t,e,i)})},paint:function(){var i=8;this.gc.textAlign="center",this.gc.clearRect(0,0,this.canvas.width,this.size),this.gc.font=this.font;var t=this.visibleContentDivs;t.length&&(t.forEach(function(t){var e=this.tabs.get(t);i+=e.width=n.call(this,t,e.left=i),i-=(.8-.11*this.curviness)*this.size},this),n.call(this,this.selected,this.tabs.get(this.selected).left,!0),function(){this.wasSelected&&(this.wasSelected.style.visibility="hidden");this.selected.style.visibility="visible",this.wasSelected=this.selected}.call(this))}},l.version="2.3.7",window.CurvyTabs=l}();
+!function(){"use strict";var h,c=".curvy-tabs-container {position: relative;width: 500px;height: 500px;}\n.curvy-tabs-container > div {position: absolute;left: 0;bottom: 0;right: 0;border: 1px solid #aaa;border-radius: 7px;}\n.curvy-tabs-container > div > * {position: absolute;display: block;visibility: hidden;padding: 8px;top: 0;bottom: 0;left: 0;right: 0;overflow: scroll;border-radius: 7px;}\n.curvy-tabs-container > canvas {position: absolute;}\n",d=4,u=4,f="rgba(0, 0, 0, 0)";function l(t,e){"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i},window.CustomEvent.prototype=window.Event.prototype),function(){if(!document.head.querySelector("style#injected-stylesheet-curvy-tabs")){var t=document.createElement("style");t.id="injected-stylesheet-curvy-tabs",t.innerHTML=c,document.head.insertBefore(t,document.head.firstElementChild)}}();var i=Array.prototype.slice.call(t.children);this.container=t,this._minWidth=0,this._curviness=1,this._font="10pt sans-serif",this._selected=e||i[0];var n=this.contents=document.createElement("div");i.forEach(function(t){t.dataset.display=window.getComputedStyle(t).display,n.appendChild(t)}),t.appendChild(n);var s=this.tabs=new WeakMap;this.contentDivs.forEach(function(t){s.set(t,{})}),v.call(this);var o=t.getBoundingClientRect(),a=this.canvas=document.createElement("canvas"),r=this.gc=a.getContext("2d");h=(window.devicePixelRatio||1)/(r.webkitBackingStorePixelRatio||r.mozBackingStorePixelRatio||r.msBackingStorePixelRatio||r.oBackingStorePixelRatio||r.backingStorePixelRatio||1),t.appendChild(a),this.width=o.width,this.size=l.size,this.height=this.height,a.addEventListener("click",function(s){this.visibleContentDivs.find(function(t){var e=this.tabs.get(t),i=d+.25*this.size,n=e.left+i;if(s.offsetX>n&&s.offsetX<n+e.width-i-i)return s.stopPropagation(),this.select(t),!0},this)}.bind(this))}function n(t,e,i){var n=t.style;if("object"!=typeof e||Array.isArray(e)){if(3===arguments.length)n[e]=i;else if(2===arguments.length)return Array.isArray(e)?e.reduce(function(t,e){return t[e]=n[e],t},{}):window.getComputedStyle(t)[e]}else Object.keys(e).forEach(function(t){n[t]=e[t]})}function v(){var e=this.contents.style.borderRadius;this.contentDivs.forEach(function(t){t.style.borderRadius=e})}function g(){return window.getComputedStyle(this.contents)}function p(){return parseFloat(g.call(this).borderWidth)}function s(t,e,i){for(var n=this.gc,s=this.size-1,o=.5*s,a=.8*this.curviness*o,r=t.getAttribute("name"),h=Math.max(this.minWidth,u+n.measureText(r).width+u),c=t,l=f;l===f;c=c.parentElement)if(l=window.getComputedStyle(c).backgroundColor,c===document.body){l===f&&(l="white");break}return n.save(),n.translate(e+.5,.5),n.lineWidth=p.call(this),i&&(n.beginPath(),n.moveTo(d,s),n.lineTo(d+o+h+o,s),n.strokeStyle=l,n.stroke()),n.beginPath(),n.moveTo(0,s),n.lineTo(d,s),n.translate(d,0),n.bezierCurveTo(a,s,o-a,0,o,0),n.lineTo(o+h,0),n.translate(o+h,0),n.bezierCurveTo(a,0,o-a,s,o,s),n.lineTo(o+d,s),i||n.closePath(),n.fillStyle=l,n.fill(),n.fillStyle="black",n.fillText(r,-h/2,2*s/3),n.strokeStyle=g.call(this).borderColor,n.stroke(),n.restore(),d+o+h+o+d}l.size=29,l.prototype={constructor:l,addTab:function(t,e,i){var n=document.createElement("div");n.setAttribute("name",t),e&&(n.innerHTML=e),i&&(n.style.backgroundColor=i),n.dataset.display=window.getComputedStyle(n).display,this.tabs.set(n,{}),this.contents.appendChild(n),this.selected=n,this.paint()},getTab:function(t){var e;if(t instanceof HTMLElement)e=t;else if(!(e="number"==typeof t?this.contents.children[t]:this.contents.querySelector('[name="'+t+'"]')))throw new ReferenceError("Cannot find specified tab: "+t);return e},get contentDivs(){return Array.prototype.slice.call(this.contents.children)},forEach:function(t){this.contenDivs.forEach(t)},get minWidth(){return this._minWidth},set minWidth(t){this._minWidth=t,this.paint()},get width(){return this._width},set width(t){t=Math.floor(t),this._width=t,this.canvas.width=t*h,this.container.style.width=t+"px",this.gc.scale(h,h),this.paint()},get size(){return this._height},set size(t){t=Math.floor(t),this._height=t,this.canvas.height=t*h,this.canvas.style.height=t+"px",this.gc.scale(h,h),this.contents.style.top=t-1+"px",this.paint()},get height(){return this.container.getBoundingClientRect().height},set height(t){this.container.style.height=t+"px",this.contents.style.top=this.size-p.call(this)+"px",this.paint()},get curviness(){return this._curviness},set curviness(t){this._curviness=t,this.paint(),this.contents.style.borderRadius=7*t+"px",v.call(this)},get font(){return this._font},set font(t){this._font=t,this.paint()},get selected(){return this._selected},set selected(t){this._selected=t,this.paint()},select:function(t){var e=this.getTab(t);(function(t){var e=this.tabs.get(t),i=new CustomEvent("click");t.dispatchEvent(i);var n=new CustomEvent("click",{detail:{content:t,left:e.left,width:e.width}});return this.container.dispatchEvent(n),!(i.defaultPrevented||n.defaultPrevented)}).call(this,e)&&(this.selected=e)},clear:function(t){for(var e=this.getTab(t);e.hasChildNodes();)e.removeChild(e.lastChild)},hide:function(t){this.toggle(t,!1)},show:function(t){this.toggle(t,!0)},toggle:function(t,e){var i=this.getTab(t);void 0===e&&(e=!this.visible(i)),e||i!==this.selected?(i.style.display=e?"block":"none",this.paint()):console.warn("Attempt to hide currently selected tab ignored.")},visible:function(t){var e=this.getTab(t);return"block"===window.getComputedStyle(e).display},get visibleContentDivs(){return this.contentDivs.filter(function(t){return this.visible(t)},this)},reset:function(e){this.contentDivs.forEach(function(t){e?t.dataset.display=window.getComputedStyle(t).display:this.toggle(t,"none"!==t.dataset.display)},this)},css:function(t,e){n.call(this,this.contents,t,e),this.height=this.height},contentCss:function(e,i){this.contentDivs.forEach(function(t){n.call(this,t,e,i)})},paint:function(){var i=8;this.gc.textAlign="center",this.gc.clearRect(0,0,this.canvas.width,this.size),this.gc.font=this.font;var t=this.visibleContentDivs;t.length&&(t.forEach(function(t){var e=this.tabs.get(t);i+=e.width=s.call(this,t,e.left=i),i-=(.8-.11*this.curviness)*this.size},this),s.call(this,this.selected,this.tabs.get(this.selected).left,!0),function(){this.wasSelected&&(this.wasSelected.style.visibility="hidden");this.selected.style.visibility="visible",this.wasSelected=this.selected}.call(this))},get onclick(){return this.container.onclick},set onclick(t){this.container.onclick=t},addEventListener:function(t,e){this.container.addEventListner(t,e)}},l.version="2.3.8",window.CurvyTabs=l}();

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

48344

increased by5.11%

Lines of code

780

increased by5.98%

Number of lines in readme file

321

increased by0.94%

No dependency changes