ustyle - npm Package Compare versions

Comparing version 1.15.3 to 1.16.1

dist/ustyle.js

@@ -291,123 +291,174 @@ var slice = [].slice;
 
-var setOptions = this.Utils.setOptions;
+window.Tabs = (function(Utils) {
 
-window.Tabs = (function(options) {
-  var Tabs;
-  return Tabs = (function() {
-    var getSelector;
+  var addClass = Utils.addClass;
+  var hasClass = Utils.hasClass;
+  var removeClass = Utils.removeClass;
+  var setOptions = Utils.setOptions;
 
-    Tabs.prototype.defaults = {
-      tabContainer: ".us-tabs",
-      tabLinks: ".us-tabs-nav-mainlink",
-      tabNav: ".us-tabs-nav",
-      changeUrls: true,
-      activeClass: "active",
-      collapsible: false,
-      autoScroll: true
-    };
+  Tabs.prototype.defaults = {
+    tabContainer: ".us-tabs",
+    tabLinks: ".us-tabs-nav-mainlink",
+    tabNav: ".us-tabs-nav",
+    changeUrls: true,
+    activeClass: "active",
+    collapsible: false,
+    autoScroll: true
+  };
 
-    function Tabs(options) {
-      var ref = this.options = setOptions(options, this.defaults);
-      var tabContainer = ref.tabContainer;
-      var tabLinks = ref.tabLinks;
+  function Tabs(options) {
+    var ref = this.options = setOptions(options, this.defaults);
+    var tabContainer = ref.tabContainer;
+    var tabLinks = ref.tabLinks;
 
-      this.tabs = $(tabContainer).find(tabLinks);
-      this.filter = this.tabs.data("target") ? "data-target" : "href";
-      this.init();
-      this.tabs.on("click.ustyle.tab", (function(_this) {
-        return function(e) {
-          var $target = $(e.currentTarget);
-          if (_this.isAccordion() && _this.options.collapsible && _this.isActive($target)) {
-            _this.collapse($target);
-            _this.hashClear();
-          } else {
-            _this.navigateTo($target);
-            _this.scrollToTab($target);
-            _this.hashChange($target);
-          }
+    this.activeTabEvent = new CustomEvent('ustyle.tab.active');
+    this.tabs = document.querySelectorAll(tabContainer + ' ' + tabLinks);
+    if(!this.tabs.length) return;
+    this.filter = this.tabs.item(0).getAttribute("data-target") ? "data-target" : "href";
+    this.init();
 
-          return e.preventDefault();
-        };
-      })(this));
+    var handleClick = (function (_this) {
+      return function (e) {
+        var target = e.currentTarget;
+        if (_this.isAccordion() && _this.options.collapsible && _this.isActive(target)) {
+          _this.collapse(target);
+          _this.hashClear();
+        } else {
+          _this.navigateTo(target);
+          _this.scrollToTab(target);
+          _this.hashChange(target);
+        }
+
+        return e.preventDefault();
+      }
+    })(this);
+
+    forEach(this.tabs, function (index, tab) {
+      tab.addEventListener('click', handleClick);
+    });
+  }
+
+  Tabs.prototype.init = function() {
+    var activeTab = this.activeTab();
+    var initialHash = this.tabFromHash();
+
+    if (initialHash) {
+      return this.navigateTo(initialHash);
+    } else if (activeTab) {
+      return this.navigateTo(activeTab);
+    } else if (!this.options.collapsible || !this.isAccordion()) {
+      return this.navigateTo(this.tabs.item(0));
     }
+  };
 
-    Tabs.prototype.init = function() {
-      var $activeTab = this.activeTab();
-      var $initialHash = this.tabFromHash();
+  Tabs.prototype.hashChange = function(target) {
+    if (!this.options.changeUrls) return;
 
-      if ($initialHash.length) {
-        return this.navigateTo($initialHash);
-      } else if ($activeTab.length) {
-        return this.navigateTo($activeTab);
-      } else if (!this.options.collapsible || !this.isAccordion()) {
-        return this.navigateTo(this.tabs.first());
+    return window.location.replace("#!" + (getSelector(target).replace(/#/, "")));
+  };
+
+  Tabs.prototype.hashClear = function() {
+    if (!this.options.changeUrls) return;
+
+    var url = window.location.pathname + window.location.search;
+    return typeof history.replaceState === "function" ? history.replaceState("", document.title, url) : void 0;
+  };
+
+  Tabs.prototype.navigateTo = function(target) {
+    var selector = getSelector(target);
+    var selected = document.querySelector(selector);
+    var activeClass = this.options.activeClass;
+    var filter = this.filter;
+
+    forEach(this.tabs, function (index, tab) {
+      removeClass(tab, activeClass);
+    });
+
+    forEach(this.tabs, function (index, tab) {
+      if (tab.getAttribute(filter) === selector) {
+        return addClass(tab, activeClass);
       }
-    };
+    });
 
-    Tabs.prototype.hashChange = function(target) {
-      if (!this.options.changeUrls) {
-        return;
+    forEach(selected.parentNode.children, function (index, child) {
+      if (child !== selected) {
+        removeClass(child, activeClass);
       }
+    });
 
-      return location.replace("#!" + (getSelector(target).replace(/#/, "")));
-    };
+    addClass(selected, activeClass);
+    return selected.dispatchEvent(this.activeTabEvent);
+  };
 
-    Tabs.prototype.hashClear = function() {
-      if (!this.options.changeUrls) {
-        return;
-      }
+  Tabs.prototype.collapse = function(target) {
+    var selected = document.querySelector(getSelector(target));
+    var activeClass = this.options.activeClass;
 
-      var url = window.location.pathname + window.location.search;
-      return typeof history.replaceState === "function" ? history.replaceState("", document.title, url) : void 0;
-    };
+    forEach(this.tabs, function (index, tab) {
+      removeClass(tab, activeClass);
+    });
 
-    Tabs.prototype.navigateTo = function(target) {
-      var selector = getSelector(target);
-      var $selected = $(selector);
-      this.tabs.removeClass(this.options.activeClass).end();
-      this.tabs.filter("[" + this.filter + "='" + selector + "']").addClass(this.options.activeClass);
-      $selected.siblings("." + this.options.activeClass).removeClass(this.options.activeClass).end().addClass(this.options.activeClass);
-      return $selected.trigger("ustyle.tab.active");
-    };
+    return removeClass(selected, activeClass);
+  };
 
-    Tabs.prototype.collapse = function(target) {
-      var $selected = $(getSelector(target));
-      this.tabs.removeClass(this.options.activeClass).end();
-      return $selected.removeClass(this.options.activeClass);
-    };
+  Tabs.prototype.scrollToTab = function(target) {
+    if (!(this.isAccordion() && this.options.autoScroll)) {
+      return;
+    }
 
-    Tabs.prototype.scrollToTab = function(target) {
-      if (!(this.isAccordion() && this.options.autoScroll)) {
-        return;
+    var selected = document.querySelector(getSelector(target));
+    return selected.scrollIntoView();
+  };
+
+  Tabs.prototype.activeTab = function() {
+    var activeTab = null;
+    var activeClass = this.options.activeClass;
+    var matchingTab = null;
+
+    forEach(this.tabs, function (index, tab) {
+      if (hasClass(tab, activeClass)) {
+        return matchingTab = tab;
       }
+    });
 
-      var $selected = $(getSelector(target));
-      return $("html,body").scrollTop($selected.offset().top);
-    };
+    return matchingTab;
+  };
 
-    Tabs.prototype.activeTab = function() {
-      return this.tabs.filter("." + this.options.activeClass);
-    };
+  Tabs.prototype.tabFromHash = function() {
+    var tabId = window.location.hash.replace("!", "");
+    var filter = this.filter;
+    var matchingTab = null;
 
-    Tabs.prototype.tabFromHash = function() {
-      var tabId = location.hash.replace("!", "");
-      return this.tabs.filter("[" + this.filter + "='" + tabId + "']");
-    };
+    forEach(this.tabs, function (index, tab) {
+      if (tab.getAttribute(filter) === tabId) {
+        return matchingTab = tab;
+      }
+    });
 
-    Tabs.prototype.isActive = function(target) {
-      return getSelector(target) === getSelector(this.activeTab());
-    };
+    return matchingTab;
+  };
 
-    Tabs.prototype.isAccordion = function() {
-      return !$(this.options.tabNav).is(":visible");
-    };
+  Tabs.prototype.isActive = function(target) {
+    return getSelector(target) === getSelector(this.activeTab());
+  };
 
-    getSelector = function(clicked) {
-      return clicked.data("target") || clicked.attr("href");
-    };
+  Tabs.prototype.isAccordion = function() {
+    var tabNav = document.querySelector(this.options.tabNav);
 
-    return Tabs;
-  })();
-})();
+    return !(tabNav.offsetWidth > 0 || tabNav.offsetHeight > 0);
+  };
 
+  var getSelector = function(clicked) {
+    return clicked.getAttribute("data-target") || clicked.getAttribute("href");
+  };
+
+  var forEach = function (array, callback, scope) {
+    for (var i = array.length - 1; i >= 0; i--) {
+      callback.call(scope, i, array[i]);
+    }
+  };
+
+  return Tabs;
+})(this.Utils);
+
 window.ClassToggler = (function() {
@@ -414,0 +465,0 @@ var defaults;

dist/ustyle.min.js

@@ -1,1 +0,1 @@
-var slice=[].slice,hasProp={}.hasOwnProperty;null==this.Utils&&(this.Utils={modules:[]});var addClass=function(a,b){return removeClass(a,b),a.className+=" "+b+" "},removeClass=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)","gi");return a.className=a.className.replace(c,"")},hasClass=function(a,b){return new RegExp("(^| )"+b+"( |$)","gi").test(a.className)},merge=function(){var a,b,c,d,e=arguments[0],f=2<=arguments.length?slice.call(arguments,1):[];for(b=0,c=f.length;b<c;b++){a=f[b];for(d in a)hasProp.call(a,d)&&(e[d]=a[d])}return e},setOptions=function(a,b){return merge({},b,a)},deleteUndefined=function(a){var b,c,d=[];for(b in a)c=a[b],null===c||void 0===c?d.push(delete a[b]):d.push(void 0);return d},transformKey=function(){var a,b,c,d=document.createElement("div"),e=["transform","webkitTransform","OTransform","MozTransform","msTransform"];for(a=0,c=e.length;a<c;a++)if(b=e[a],void 0!==d.style[b])return b}(),requestAnimationFrame=function(a){var b,c,d,e=["ms","moz","webkit","o"];for(b=0,c=e.length;b<c&&(d=e[b],!a.requestAnimationFrame);b++)a.requestAnimationFrame=a[d+"RequestAnimationFrame"];return a.requestAnimationFrame||(a.requestAnimationFrame=function(a){return setTimeout(a,1e3/60)})}(window);this.Utils={addClass:addClass,removeClass:removeClass,hasClass:hasClass,merge:merge,setOptions:setOptions,deleteUndefined:deleteUndefined,transformKey:transformKey,requestAnimationFrame:requestAnimationFrame},window.Backdrop=function(){function a(){null==(d=document.querySelector(".us-backdrop"))&&(d=b())}var b,c=0,d=null;return a.prototype.element=d,b=function(){return d=document.createElement("div"),Utils.addClass(d,"us-backdrop"),document.body.appendChild(d)},a.prototype.retain=function(){var a;if(1===++c)return Utils.addClass(d,"us-backdrop--visible"),a=function(){if(c>=1)return Utils.addClass(d,"us-backdrop--active")},Utils.requestAnimationFrame.call(window,a)},a.prototype.release=function(){var a;return 1===c&&(Utils.removeClass(d,"us-backdrop--active"),a=function(){return setTimeout(function(){if(0===c)return Utils.removeClass(d,"us-backdrop--visible")},300)},Utils.requestAnimationFrame.call(window,a)),c=Math.max(0,c-1)},a}(),window.Overlay=function(a){function b(a){if(this.overlay=(this.options=f(a,h)).overlay,null==this.overlay||"undefined"==typeof Backdrop||null===Backdrop)throw new Error("There's no overlay or you haven't included Backdrop");this.backdrop=new Backdrop,this.addEventListeners()}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.requestAnimationFrame,h={bodyActiveClass:"us-overlay--open",activeClass:"us-overlay-parent--active",visibleClass:"us-overlay-parent--visible",overlay:$(".us-overlay-parent"),openButton:".js-open-overlay",closeButton:".js-close-overlay",historyStatus:"#seedeal",history:!1,preventDefault:!0,animationSpeed:300};return b.prototype.addEventListeners=function(){if($(this.options.openButton).on("click.open-overlay",function(a){return function(b){return a.options.preventDefault&&b.preventDefault(),a.show(b)}}(this)),this.overlay.on("click.close-overlay",function(a){return function(b){for(var c=[],d=a.overlay.find(a.options.closeButton).toArray(),e=[a.overlay[0]].concat(d),f=e.length-1;f>=0;f--){var g=e[f];if(b.target===g){a.options.preventDefault&&b.preventDefault(),a.hide(b);break}c.push(void 0)}return c}}(this)),this.hasHistory())return window.onpopstate=function(a){return function(b){if(a.isOpen())return a.hide(b)}}(this)},b.prototype.show=function(a){var b,d=this;if($(document.body).addClass(this.options.bodyActiveClass),this.backdrop.retain(),c(this.overlay[0],this.options.visibleClass),b=function(){return c(d.overlay[0],d.options.activeClass),setTimeout(function(){var b;return"function"==typeof(b=d.options).onOpen?b.onOpen(a):void 0},d.options.animationSpeed)},g.call(window,b),this.hasHistory())return history.pushState("open",window.document.title,this.options.historyStatus)},b.prototype.hide=function(a){var b,c=this;if($(document.body).removeClass(this.options.bodyActiveClass),this.backdrop.release(),b=function(){return e(c.overlay[0],c.options.activeClass),setTimeout(function(){var b;return e(c.overlay[0],c.options.visibleClass),"function"==typeof(b=c.options).onClose?b.onClose(a):void 0},c.options.animationSpeed)},g.call(window,b),this.hasHistory()&&"open"===history.state)return history.back()},b.prototype.isOpen=function(){return d(this.overlay[0],this.options.activeClass)},b.prototype.hasHistory=function(){return this.options.history&&window.history&&window.history.pushState},b}(this.Utils);var setOptions=this.Utils.setOptions;window.Tabs=function(a){return function(){function a(a){var b=this.options=setOptions(a,this.defaults),c=b.tabContainer,d=b.tabLinks;this.tabs=$(c).find(d),this.filter=this.tabs.data("target")?"data-target":"href",this.init(),this.tabs.on("click.ustyle.tab",function(a){return function(b){var c=$(b.currentTarget);return a.isAccordion()&&a.options.collapsible&&a.isActive(c)?(a.collapse(c),a.hashClear()):(a.navigateTo(c),a.scrollToTab(c),a.hashChange(c)),b.preventDefault()}}(this))}var b;return a.prototype.defaults={tabContainer:".us-tabs",tabLinks:".us-tabs-nav-mainlink",tabNav:".us-tabs-nav",changeUrls:!0,activeClass:"active",collapsible:!1,autoScroll:!0},a.prototype.init=function(){var a=this.activeTab(),b=this.tabFromHash();return b.length?this.navigateTo(b):a.length?this.navigateTo(a):this.options.collapsible&&this.isAccordion()?void 0:this.navigateTo(this.tabs.first())},a.prototype.hashChange=function(a){if(this.options.changeUrls)return location.replace("#!"+b(a).replace(/#/,""))},a.prototype.hashClear=function(){if(this.options.changeUrls){var a=window.location.pathname+window.location.search;return"function"==typeof history.replaceState?history.replaceState("",document.title,a):void 0}},a.prototype.navigateTo=function(a){var c=b(a),d=$(c);return this.tabs.removeClass(this.options.activeClass).end(),this.tabs.filter("["+this.filter+"='"+c+"']").addClass(this.options.activeClass),d.siblings("."+this.options.activeClass).removeClass(this.options.activeClass).end().addClass(this.options.activeClass),d.trigger("ustyle.tab.active")},a.prototype.collapse=function(a){var c=$(b(a));return this.tabs.removeClass(this.options.activeClass).end(),c.removeClass(this.options.activeClass)},a.prototype.scrollToTab=function(a){if(this.isAccordion()&&this.options.autoScroll){var c=$(b(a));return $("html,body").scrollTop(c.offset().top)}},a.prototype.activeTab=function(){return this.tabs.filter("."+this.options.activeClass)},a.prototype.tabFromHash=function(){var a=location.hash.replace("!","");return this.tabs.filter("["+this.filter+"='"+a+"']")},a.prototype.isActive=function(a){return b(a)===b(this.activeTab())},a.prototype.isAccordion=function(){return!$(this.options.tabNav).is(":visible")},b=function(a){return a.data("target")||a.attr("href")},a}()}(),window.ClassToggler=function(){function a(a){this.options=Utils.setOptions(a,b),this.options.$target?this.addEventListeners():console.trace("ClassToggle",this.options)}var b;return b={containerClass:null,$target:null,activeClass:"active",inactiveClass:null,toggleOn:"click"},a.prototype.addEventListeners=function(){return this.options.$target.on(this.options.toggleOn,function(a){return function(b){var c=a.options.containerClass?$(b.target).closest(a.options.containerClass):$(b.delegateTarget);return a.isActive(c)?a.hide(c,b):a.show(c,b)}}(this))},a.prototype.isActive=function(a){return a.hasClass(this.options.activeClass)},a.prototype.show=function(a,b){var c;return"function"==typeof(c=this.options).onShow&&c.onShow(a,b),a.addClass(this.options.activeClass)},a.prototype.hide=function(a,b){var c;return"function"==typeof(c=this.options).onHide&&c.onHide(a,b),a.removeClass(this.options.activeClass)},a}(),window.RadioToggle=function(){var a="RadioToggle is now deprecated";window.Raven&&window.Raven.captureMessage(a),console.warn(a)};
+var slice=[].slice,hasProp={}.hasOwnProperty;null==this.Utils&&(this.Utils={modules:[]});var addClass=function(a,b){return removeClass(a,b),a.className+=" "+b+" "},removeClass=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)","gi");return a.className=a.className.replace(c,"")},hasClass=function(a,b){return new RegExp("(^| )"+b+"( |$)","gi").test(a.className)},merge=function(){var a,b,c,d,e=arguments[0],f=2<=arguments.length?slice.call(arguments,1):[];for(b=0,c=f.length;b<c;b++){a=f[b];for(d in a)hasProp.call(a,d)&&(e[d]=a[d])}return e},setOptions=function(a,b){return merge({},b,a)},deleteUndefined=function(a){var b,c,d=[];for(b in a)c=a[b],null===c||void 0===c?d.push(delete a[b]):d.push(void 0);return d},transformKey=function(){var a,b,c,d=document.createElement("div"),e=["transform","webkitTransform","OTransform","MozTransform","msTransform"];for(a=0,c=e.length;a<c;a++)if(b=e[a],void 0!==d.style[b])return b}(),requestAnimationFrame=function(a){var b,c,d,e=["ms","moz","webkit","o"];for(b=0,c=e.length;b<c&&(d=e[b],!a.requestAnimationFrame);b++)a.requestAnimationFrame=a[d+"RequestAnimationFrame"];return a.requestAnimationFrame||(a.requestAnimationFrame=function(a){return setTimeout(a,1e3/60)})}(window);this.Utils={addClass:addClass,removeClass:removeClass,hasClass:hasClass,merge:merge,setOptions:setOptions,deleteUndefined:deleteUndefined,transformKey:transformKey,requestAnimationFrame:requestAnimationFrame},window.Backdrop=function(){function a(){null==(d=document.querySelector(".us-backdrop"))&&(d=b())}var b,c=0,d=null;return a.prototype.element=d,b=function(){return d=document.createElement("div"),Utils.addClass(d,"us-backdrop"),document.body.appendChild(d)},a.prototype.retain=function(){var a;if(1===++c)return Utils.addClass(d,"us-backdrop--visible"),a=function(){if(c>=1)return Utils.addClass(d,"us-backdrop--active")},Utils.requestAnimationFrame.call(window,a)},a.prototype.release=function(){var a;return 1===c&&(Utils.removeClass(d,"us-backdrop--active"),a=function(){return setTimeout(function(){if(0===c)return Utils.removeClass(d,"us-backdrop--visible")},300)},Utils.requestAnimationFrame.call(window,a)),c=Math.max(0,c-1)},a}(),window.Overlay=function(a){function b(a){if(this.overlay=(this.options=f(a,h)).overlay,null==this.overlay||"undefined"==typeof Backdrop||null===Backdrop)throw new Error("There's no overlay or you haven't included Backdrop");this.backdrop=new Backdrop,this.addEventListeners()}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.requestAnimationFrame,h={bodyActiveClass:"us-overlay--open",activeClass:"us-overlay-parent--active",visibleClass:"us-overlay-parent--visible",overlay:$(".us-overlay-parent"),openButton:".js-open-overlay",closeButton:".js-close-overlay",historyStatus:"#seedeal",history:!1,preventDefault:!0,animationSpeed:300};return b.prototype.addEventListeners=function(){if($(this.options.openButton).on("click.open-overlay",function(a){return function(b){return a.options.preventDefault&&b.preventDefault(),a.show(b)}}(this)),this.overlay.on("click.close-overlay",function(a){return function(b){for(var c=[],d=a.overlay.find(a.options.closeButton).toArray(),e=[a.overlay[0]].concat(d),f=e.length-1;f>=0;f--){var g=e[f];if(b.target===g){a.options.preventDefault&&b.preventDefault(),a.hide(b);break}c.push(void 0)}return c}}(this)),this.hasHistory())return window.onpopstate=function(a){return function(b){if(a.isOpen())return a.hide(b)}}(this)},b.prototype.show=function(a){var b,d=this;if($(document.body).addClass(this.options.bodyActiveClass),this.backdrop.retain(),c(this.overlay[0],this.options.visibleClass),b=function(){return c(d.overlay[0],d.options.activeClass),setTimeout(function(){var b;return"function"==typeof(b=d.options).onOpen?b.onOpen(a):void 0},d.options.animationSpeed)},g.call(window,b),this.hasHistory())return history.pushState("open",window.document.title,this.options.historyStatus)},b.prototype.hide=function(a){var b,c=this;if($(document.body).removeClass(this.options.bodyActiveClass),this.backdrop.release(),b=function(){return e(c.overlay[0],c.options.activeClass),setTimeout(function(){var b;return e(c.overlay[0],c.options.visibleClass),"function"==typeof(b=c.options).onClose?b.onClose(a):void 0},c.options.animationSpeed)},g.call(window,b),this.hasHistory()&&"open"===history.state)return history.back()},b.prototype.isOpen=function(){return d(this.overlay[0],this.options.activeClass)},b.prototype.hasHistory=function(){return this.options.history&&window.history&&window.history.pushState},b}(this.Utils),window.Tabs=function(a){function b(a){var b=this.options=f(a,this.defaults),c=b.tabContainer,d=b.tabLinks;if(this.activeTabEvent=new CustomEvent("ustyle.tab.active"),this.tabs=document.querySelectorAll(c+" "+d),this.tabs.length){this.filter=this.tabs.item(0).getAttribute("data-target")?"data-target":"href",this.init();var e=function(a){return function(b){var c=b.currentTarget;return a.isAccordion()&&a.options.collapsible&&a.isActive(c)?(a.collapse(c),a.hashClear()):(a.navigateTo(c),a.scrollToTab(c),a.hashChange(c)),b.preventDefault()}}(this);h(this.tabs,function(a,b){b.addEventListener("click",e)})}}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions;b.prototype.defaults={tabContainer:".us-tabs",tabLinks:".us-tabs-nav-mainlink",tabNav:".us-tabs-nav",changeUrls:!0,activeClass:"active",collapsible:!1,autoScroll:!0},b.prototype.init=function(){var a=this.activeTab(),b=this.tabFromHash();return b?this.navigateTo(b):a?this.navigateTo(a):this.options.collapsible&&this.isAccordion()?void 0:this.navigateTo(this.tabs.item(0))},b.prototype.hashChange=function(a){if(this.options.changeUrls)return window.location.replace("#!"+g(a).replace(/#/,""))},b.prototype.hashClear=function(){if(this.options.changeUrls){var a=window.location.pathname+window.location.search;return"function"==typeof history.replaceState?history.replaceState("",document.title,a):void 0}},b.prototype.navigateTo=function(a){var b=g(a),d=document.querySelector(b),f=this.options.activeClass,i=this.filter;return h(this.tabs,function(a,b){e(b,f)}),h(this.tabs,function(a,d){if(d.getAttribute(i)===b)return c(d,f)}),h(d.parentNode.children,function(a,b){b!==d&&e(b,f)}),c(d,f),d.dispatchEvent(this.activeTabEvent)},b.prototype.collapse=function(a){var b=document.querySelector(g(a)),c=this.options.activeClass;return h(this.tabs,function(a,b){e(b,c)}),e(b,c)},b.prototype.scrollToTab=function(a){if(this.isAccordion()&&this.options.autoScroll){return document.querySelector(g(a)).scrollIntoView()}},b.prototype.activeTab=function(){var a=this.options.activeClass,b=null;return h(this.tabs,function(c,e){if(d(e,a))return b=e}),b},b.prototype.tabFromHash=function(){var a=window.location.hash.replace("!",""),b=this.filter,c=null;return h(this.tabs,function(d,e){if(e.getAttribute(b)===a)return c=e}),c},b.prototype.isActive=function(a){return g(a)===g(this.activeTab())},b.prototype.isAccordion=function(){var a=document.querySelector(this.options.tabNav);return!(a.offsetWidth>0||a.offsetHeight>0)};var g=function(a){return a.getAttribute("data-target")||a.getAttribute("href")},h=function(a,b,c){for(var d=a.length-1;d>=0;d--)b.call(c,d,a[d])};return b}(this.Utils),window.ClassToggler=function(){function a(a){this.options=Utils.setOptions(a,b),this.options.$target?this.addEventListeners():console.trace("ClassToggle",this.options)}var b;return b={containerClass:null,$target:null,activeClass:"active",inactiveClass:null,toggleOn:"click"},a.prototype.addEventListeners=function(){return this.options.$target.on(this.options.toggleOn,function(a){return function(b){var c=a.options.containerClass?$(b.target).closest(a.options.containerClass):$(b.delegateTarget);return a.isActive(c)?a.hide(c,b):a.show(c,b)}}(this))},a.prototype.isActive=function(a){return a.hasClass(this.options.activeClass)},a.prototype.show=function(a,b){var c;return"function"==typeof(c=this.options).onShow&&c.onShow(a,b),a.addClass(this.options.activeClass)},a.prototype.hide=function(a,b){var c;return"function"==typeof(c=this.options).onHide&&c.onHide(a,b),a.removeClass(this.options.activeClass)},a}(),window.RadioToggle=function(){var a="RadioToggle is now deprecated";window.Raven&&window.Raven.captureMessage(a),console.warn(a)};

package.json

 {
   "name": "ustyle",
-  "version": "1.15.3",
+  "version": "1.16.1",
   "description": "A living styleguide and pattern library by uSwitch.",
@@ -21,19 +21,20 @@ "keywords": [
   "license": "Apache-2.0",
-  "author": "uSwitch Limited",
-  "contributors": [
-    "Joe Green <[e-mail]>",
-    "David Annez <[e-mail]>",
-    "Thomas Britton <[e-mail]>",
-    "Ricardo Cerqueira <[e-mail]>",
-    "Ivo Reis <[e-mail]>",
-    "Charlotte Spencer <[e-mail]>"
-  ],
-  "main": "dist/ustyle-latest.css",
+  "author": {
+    "name": "uSwitch Limited",
+    "email": "[e-mail]"
+  },
+  "main": "index.js",
   "files": [
     "dist",
-    "vendor/assets/stylesheets"
+    "vendor/assets/stylesheets",
+    "vendor/assets/images/forms",
+    "index.js"
   ],
   "repository": "uswitch/ustyle",
+  "engines": {
+    "npm": "^5.4.2"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "grunt",
+    "depcheck": "depcheck --specials=grunt --ignores=depcheck,grunt-*"
   },
@@ -43,6 +44,5 @@ "devDependencies": {
     "autoprefixer": "^6.5.0",
-    "bluebird": "^2.9.7",
     "browser-sync": "^1.8.2",
     "cheerio": "^0.20.0",
-    "cssstats": "^1.0.1",
+    "depcheck": "^0.6.7",
     "dss": "^1.0.4",
@@ -52,2 +52,3 @@ "gray-matter": "^2.0.0",
     "grunt-build-control": "^0.3.0",
+    "grunt-cli": "^1.2.0",
     "grunt-contrib-concat": "^0.5.0",
@@ -59,3 +60,2 @@ "grunt-contrib-copy": "^0.8.0",
     "grunt-env": "^0.4.2",
-    "grunt-jscs": "~2.0.0",
     "grunt-newer": "^1.1.0",
@@ -66,18 +66,16 @@ "grunt-postcss": "^0.8.0",
     "grunt-shell": "^1.1.1",
+    "grunt-standard": "^3.1.0",
     "grunt-svgmin": "^2.0.0",
     "grunt-svgstore": "^1.0.0",
     "grunt-version": "^1.0.0",
-    "handlebars": "^2.0.0",
-    "jscs": "~2.1.0",
+    "handlebars": "^4.0.11",
     "load-grunt-tasks": "~3.1.0",
     "lodash": "^2.4.1",
-    "marked": "^0.3.2",
-    "path": "^0.11.14",
+    "marked": "^0.3.9",
+    "node-sass": "^4.5.3",
     "semver": "^4.3.3",
     "simple-git": "^1.3.0",
     "stylestats": "^4.2.2",
-    "svg-to-png": "^2.0.0",
-    "svgo": "^0.5.0",
     "underscore.string": "^3.0.2"
   }
 }

README.md

@@ -14,3 +14,5 @@ # [ustyle](http://ustyle.guide)
 * [Usage](#usage)
-  * [Mixins/Varibales](#mixins-variables)
+  * [Rails / Sprockets apps](#rails--sprockets-apps)
+  * [Node apps](#node-apps)
+  * [Mixins/Variables](#mixins--variables)
 * [Development](#development)
@@ -56,6 +58,4 @@ * [Contributing](#contributing)
 
-
 ### Sinatra
 
-
 Add to your Gemfile:
@@ -84,3 +84,3 @@ ``` ruby
 
-For rails apps, in your `development.rb` file (you do not want this in production)
+For Rails apps, in your `development.rb` file (you do not want this in production)
 ```ruby
@@ -90,3 +90,3 @@ config.middleware.use Ustyle::IconMiddleware
 
-For rack apps (including Sinatra)
+For Rack apps (including Sinatra)
 ```ruby
@@ -120,4 +120,6 @@ configure :development do
 
-If using rails and SASS, just import the base uSwitch styles at the start of your file
+### Rails / Sprockets apps
 
+If using Rails and Sass, just import the base uSwitch styles at the start of your file
+
 ```scss
@@ -129,5 +131,35 @@ @import "ustyle";
 
+### Node apps
+
+uStyle comes with JavaScript implementations of the custom Sass Ruby functions used by Sprockets. To use uStyle's mixins and variables within your own Sass, you'll need to add these functions to the compiler you're using. For example, using [node-sass](https://github.com/sass/node-sass) in a project that also has [Webpack](https://webpack.js.org/), you can do the following:
+
+```javascript
+// In your webpack.config.js
+
+import { SassHelpers } from 'ustyle';
+
+module.exports = {
+  // ...
+  module: {
+    rules: [
+      // ...
+      {
+        test: /.scss$/,
+        use: [{
+          loader: 'sass-loader',
+          options: {
+            functions: SassHelpers
+          }
+        }]
+      }
+      // ...
+    ]
+  }
+  // ...
+};
+```
+
 ### Mixins / Variables
 
-Ustyle comes bundled with a good set of Sass variables and mixins to use in your project.
+uStyle comes bundled with a good set of Sass variables and mixins to use in your project.
 
@@ -138,16 +170,8 @@ For Sass documentation on mixins/variables available to you, please see: https://ustyle.guide/sass/
 
-Development is done using [Grunt](http://gruntjs.com/), but it's just a thin wrapper around the heavy lifting done by some Node modules.
+To preview changes that you make to uStyle's components and documentation, run:
 
-To install development
+    $ npm start
 
-    $ npm install -g grunt-cli
-    $ npm install
-    $ bundle
+This will run the [Grunt](http://gruntjs.com/) default task that builds uStyle, then starts a [Browsersync](https://www.browsersync.io/) server at http://localhost:3000. Changes that you make are live-reloaded in your browser.
 
-To run in development, just run
-
-    grunt
-
-This will open a http://localhost:3000 tab with the styleguide
-
 ## Contributing
@@ -159,4 +183,4 @@
 
-- Source code is licenced under the Apache v2.0 licence
-- All icons, except the uSwitch icon are licenced under [CC - Attribution - No Derivatives 4.0](http://creativecommons.org/licenses/by-nd/4.0/)
-- uSwitch icon is licenced under [CC - Attribution - NonCommercial - NoDerivates 4.0](http://creativecommons.org/licenses/by-nc-nd/4.0/)
+- Source code is licensed under the Apache v2.0 licence
+- All icons, except the uSwitch icon are licensed under [CC - Attribution - No Derivatives 4.0](http://creativecommons.org/licenses/by-nd/4.0/)
+- uSwitch icon is licensed under [CC - Attribution - NonCommercial - NoDerivates 4.0](http://creativecommons.org/licenses/by-nc-nd/4.0/)

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

614904

increased by1.15%

Dev dependency count

34

decreased by-8.11%

Number of package files

80

increased by2.56%

Lines of code

1000

increased by6.72%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

179

increased by15.48%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

No dependency changes