ustyle 1.15.3 → 1.16.1

data/vendor/assets/javascripts/ustyle/tabs.js

@@ -1,120 +1,171 @@
-var setOptions = this.Utils.setOptions;
-
-window.Tabs = (function(options) {
-  var Tabs;
-  return Tabs = (function() {
-    var getSelector;
-
-    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;
-
-      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);
-          }
-
-          return e.preventDefault();
-        };
-      })(this));
+window.Tabs = (function(Utils) {
+
+  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
+  };
+
+  function Tabs(options) {
+    var ref = this.options = setOptions(options, this.defaults);
+    var tabContainer = ref.tabContainer;
+    var tabLinks = ref.tabLinks;
+
+    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();
+
+    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.hashChange = function(target) {
+    if (!this.options.changeUrls) return;
+
+    return window.location.replace("#!" + (getSelector(target).replace(/#/, "")));
+  };
+
+  Tabs.prototype.hashClear = function() {
+    if (!this.options.changeUrls) return;
 
-    Tabs.prototype.init = function() {
-      var $activeTab = this.activeTab();
-      var $initialHash = this.tabFromHash();
+    var url = window.location.pathname + window.location.search;
+    return typeof history.replaceState === "function" ? history.replaceState("", document.title, url) : void 0;
+  };
 
-      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());
+  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);
       }
+    });
+
+    addClass(selected, activeClass);
+    return selected.dispatchEvent(this.activeTabEvent);
+  };
+
+  Tabs.prototype.collapse = function(target) {
+    var selected = document.querySelector(getSelector(target));
+    var activeClass = this.options.activeClass;
 
-      return location.replace("#!" + (getSelector(target).replace(/#/, "")));
-    };
+    forEach(this.tabs, function (index, tab) {
+      removeClass(tab, activeClass);
+    });
 
-    Tabs.prototype.hashClear = function() {
-      if (!this.options.changeUrls) {
-        return;
+    return removeClass(selected, activeClass);
+  };
+
+  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;
       }
+    });
+
+    return matchingTab;
+  };
 
-      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 = $(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");
-    };
-
-    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.tabFromHash = function() {
+    var tabId = window.location.hash.replace("!", "");
+    var filter = this.filter;
+    var matchingTab = null;
+
+    forEach(this.tabs, function (index, tab) {
+      if (tab.getAttribute(filter) === tabId) {
+        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.isActive = function(target) {
+    return getSelector(target) === getSelector(this.activeTab());
+  };
 
-    Tabs.prototype.tabFromHash = function() {
-      var tabId = location.hash.replace("!", "");
-      return this.tabs.filter("[" + this.filter + "='" + tabId + "']");
-    };
+  Tabs.prototype.isAccordion = function() {
+    var tabNav = document.querySelector(this.options.tabNav);
 
-    Tabs.prototype.isActive = function(target) {
-      return getSelector(target) === getSelector(this.activeTab());
-    };
+    return !(tabNav.offsetWidth > 0 || tabNav.offsetHeight > 0);
+  };
 
-    Tabs.prototype.isAccordion = function() {
-      return !$(this.options.tabNav).is(":visible");
-    };
+  var getSelector = function(clicked) {
+    return clicked.getAttribute("data-target") || clicked.getAttribute("href");
+  };
 
-    getSelector = function(clicked) {
-      return clicked.data("target") || clicked.attr("href");
-    };
+  var forEach = function (array, callback, scope) {
+    for (var i = array.length - 1; i >= 0; i--) {
+      callback.call(scope, i, array[i]);
+    }
+  };
 
-    return Tabs;
-  })();
-})();
+  return Tabs;
+})(this.Utils);

data/vendor/assets/stylesheets/ustyle/mixins/_media-query.scss

@@ -99,8 +99,6 @@ $devices: ();
 
 /// Output a media query block for the targeted device and a potential internet explorer fallback
 ///
-/// @require {Variable} devices
-///
 /// @param {String} $device
 ///   The device to match up the media query with. Can be one from the list of `$min-breakpoints` (`small-tablet`, `tablet`, `desktop` etc.)
 ///   or `$max-breakpoints` (`mobile`, `to-small-tablet`, `to-tablet`)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ustyle
 version: !ruby/object:Gem::Version
-  version: 1.15.3
+  version: 1.16.1
 platform: ruby
 authors:
 - uSwitch Limited
@@ -13,7 +13,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-29 00:00:00.000000000 Z
+date: 2018-01-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -142,12 +142,10 @@ files:
 - CONTRIBUTING.md
 - Gemfile
 - Gruntfile.js
-- JAVASCRIPT_STANDARDS.md
 - LICENSE.txt
 - README.md
 - Rakefile
 - bower.json
-- config/.jscsrc
 - config/autoprefixer.yml
 - config/scss-lint.yml
 - dist/icons.svg
@@ -163,6 +161,7 @@ files:
 - grunt/tasks/browser-sync.js
 - grunt/tasks/builder.js
 - grunt/tasks/styleguide.js
+- index.js
 - lib/ustyle.rb
 - lib/ustyle/deploy.rb
 - lib/ustyle/engine.rb
@@ -175,6 +174,7 @@ files:
 - lib/ustyle/sprockets.rb
 - lib/ustyle/utils.rb
 - lib/ustyle/version.rb
+- package-lock.json
 - package.json
 - styleguide/CNAME
 - styleguide/assets/images/CTAs.png
@@ -256,7 +256,6 @@ files:
 - styleguide/assets/images/ux-conventions-recognition.png
 - styleguide/assets/images/ux-conventions-visibility.png
 - styleguide/assets/javascripts/app.js
-- styleguide/assets/javascripts/modules/cleanWhiteSpace.js
 - styleguide/assets/javascripts/modules/stats.js
 - styleguide/assets/javascripts/vendor/highlight.js
 - styleguide/assets/javascripts/vendor/svg4everybody.js

data/JAVASCRIPT_STANDARDS.md

@@ -1,88 +0,0 @@
-# JAVASCRIPT STANDARDS
-
-### INTRODUCTION
-
-We are using [JSCS](http://jscs.info/) to lint our javascript code within uStyle.
-
-### RULES
-
-Our preset is set to use Airbnb as the base set of options.
-
-```javascript
-{
-  "esnext": true,
-  "verbose": true,
-  "requireSpaceAfterKeywords": [
-      "if",
-      "else",
-      "for",
-      "while",
-      "do",
-      "switch",
-      "case",
-      "return",
-      "try",
-      "catch",
-      "typeof"
-  ],
-  "disallowSpacesInNamedFunctionExpression": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowSpacesInFunctionExpression": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowSpacesInAnonymousFunctionExpression": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowSpacesInFunctionDeclaration": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowEmptyBlocks": true,
-  "disallowSpacesInsideArrayBrackets": true,
-  "disallowSpacesInsideParentheses": true,
-  "disallowSpaceAfterObjectKeys": true,
-  "disallowSpaceAfterPrefixUnaryOperators": true,
-  "disallowSpaceBeforePostfixUnaryOperators": true,
-  "disallowSpaceBeforeBinaryOperators": [
-      ","
-  ],
-  "disallowMixedSpacesAndTabs": true,
-  "disallowTrailingWhitespace": true,
-  "requireTrailingComma": { "ignoreSingleLine": true },
-  "disallowYodaConditions": true,
-  "disallowKeywords": [ "with" ],
-  "disallowKeywordsOnNewLine": ["else"],
-  "disallowMultipleLineBreaks": true,
-  "disallowMultipleLineStrings": true,
-  "disallowMultipleVarDecl": true,
-  "disallowSpaceBeforeComma": true,
-  "disallowSpaceBeforeSemicolon": true,
-  "requireSpaceBeforeBlockStatements": true,
-  "requireParenthesesAroundIIFE": true,
-  "requireSpacesInConditionalExpression": true,
-  "requireBlocksOnNewline": 1,
-  "requireCommaBeforeLineBreak": true,
-  "requireSpaceBeforeBinaryOperators": true,
-  "requireSpaceAfterBinaryOperators": true,
-  "requireCamelCaseOrUpperCaseIdentifiers": true,
-  "requireLineFeedAtFileEnd": true,
-  "requireCapitalizedConstructors": true,
-  "requireDotNotation": true,
-  "requireSpacesInForStatement": true,
-  "requireSpaceBetweenArguments": true,
-  "requireCurlyBraces": [
-      "do"
-  ],
-  "requirePaddingNewLinesBeforeLineComments": {
-      "allExcept": "firstAfterCurly"
-  },
-  "requirePaddingNewLinesAfterBlocks": true,
-  "requireSemicolons": true,
-  "safeContextKeyword": "_this",
-  "validateLineBreaks": "LF",
-  "validateIndentation": 2,
-
-  "validateQuoteMarks": "\"",
-  "requireTrailingComma": null
-}
-```

data/config/.jscsrc

@@ -1,76 +0,0 @@
-{
-  "esnext": true,
-  "verbose": true,
-  "requireSpaceAfterKeywords": [
-      "if",
-      "else",
-      "for",
-      "while",
-      "do",
-      "switch",
-      "case",
-      "return",
-      "try",
-      "catch",
-      "typeof"
-  ],
-  "disallowSpacesInNamedFunctionExpression": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowSpacesInFunctionExpression": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowSpacesInAnonymousFunctionExpression": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowSpacesInFunctionDeclaration": {
-      "beforeOpeningRoundBrace": true
-  },
-  "disallowEmptyBlocks": true,
-  "disallowSpacesInsideArrayBrackets": true,
-  "disallowSpacesInsideParentheses": true,
-  "disallowSpaceAfterObjectKeys": true,
-  "disallowSpaceAfterPrefixUnaryOperators": true,
-  "disallowSpaceBeforePostfixUnaryOperators": true,
-  "disallowSpaceBeforeBinaryOperators": [
-      ","
-  ],
-  "disallowMixedSpacesAndTabs": true,
-  "disallowTrailingWhitespace": true,
-  "requireTrailingComma": { "ignoreSingleLine": true },
-  "disallowYodaConditions": true,
-  "disallowKeywords": [ "with" ],
-  "disallowKeywordsOnNewLine": ["else"],
-  "disallowMultipleLineBreaks": true,
-  "disallowMultipleLineStrings": true,
-  "disallowMultipleVarDecl": true,
-  "disallowSpaceBeforeComma": true,
-  "disallowSpaceBeforeSemicolon": true,
-  "requireSpaceBeforeBlockStatements": true,
-  "requireParenthesesAroundIIFE": true,
-  "requireSpacesInConditionalExpression": true,
-  "requireBlocksOnNewline": 1,
-  "requireCommaBeforeLineBreak": true,
-  "requireSpaceBeforeBinaryOperators": true,
-  "requireSpaceAfterBinaryOperators": true,
-  "requireCamelCaseOrUpperCaseIdentifiers": true,
-  "requireLineFeedAtFileEnd": true,
-  "requireCapitalizedConstructors": true,
-  "requireDotNotation": true,
-  "requireSpacesInForStatement": true,
-  "requireSpaceBetweenArguments": true,
-  "requireCurlyBraces": [
-      "do"
-  ],
-  "requirePaddingNewLinesBeforeLineComments": {
-      "allExcept": "firstAfterCurly"
-  },
-  "requirePaddingNewLinesAfterBlocks": true,
-  "requireSemicolons": true,
-  "safeContextKeyword": "_this",
-  "validateLineBreaks": "LF",
-  "validateIndentation": 2,
-
-  "validateQuoteMarks": "\"",
-  "requireTrailingComma": null
-}

data/styleguide/assets/javascripts/modules/cleanWhiteSpace.js

@@ -1,34 +0,0 @@
-function cleanWhiteSpace(codeBlocks){
-    if (!codeBlocks) return;
-
-    for (var i = codeBlocks.length - 1; i >= 0; i--) {
-      var codeBlock = codeBlocks[i],
-          lines, offset;
-
-      var text = codeBlock.textContent || codeBlock.innerText;
-
-      lines = text.split( '\n' );
-
-      if ( lines.length > 1 && lines[ lines.length - 1 ].trim() === '' ){
-        lines.pop();
-      }
-
-      var canClean = lines[1] != undefined;
-
-      if (canClean) {
-          // how much white-space do we need to remove form each line?
-        offset = lines[ 1 ].match( /^\s*/ )[ 0 ].length;
-
-        // remove the excess white-space from the beginning of each line
-        lines = lines.map( function ( line ) {
-            return line.slice( offset );
-        });
-
-        lines.shift();
-
-        codeBlock.textContent = lines.join( '\n' );  
-      }
-
-      hljs.highlightBlock(codeBlock);
-    };
-  }