woo 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 170bee29b17ab8526ddfb5b9a80c236c17833448
-  data.tar.gz: 2d3af7b7a0f5a1dbec806a8fa5d52bee3ec0e322
+  metadata.gz: 67652f3d93ec5c4f36788f53de70444e063b79a0
+  data.tar.gz: 8d71a6594c1bcb7a6d101e4e24472e27f2d1e4cb
 SHA512:
-  metadata.gz: ac9a0d9c3798f6ed76fdc06bc8c9169e3e9fdc97f9bbb4317050e52eb647052c0a8040bda872e39254658a2ab980c55f04e37f487226e61d07736c96be1579eb
-  data.tar.gz: 18fbff2d674bfcad50d0c799a5deb8eca0290edf4fc91cc8dcdef6c0e7136bc37ef8087015f00ff55763f65627690c18cfa62e2f10ef2fea9ba160de63e4fd06
+  metadata.gz: 8df13a7473ad8014e0051a0291c341e457044528a779f2304a8d55e47101d79cd8a1015258c0d58dc020e96f057f585d927db04bc8ddc3f3a4742681981b96d5
+  data.tar.gz: 5e6a5bcd50d221ccc331a15d87e91c295757dcc99f284c69336f558553eaf301e85b08169f87e2ecd87c012a1c83e0b722a5b9ddc014e5aef976daa9e670ab16

data/app/assets/javascripts/woo/application.js

@@ -18485,29 +18485,53 @@ window.hljs = hljs = require('highlight.js');
 Woo = (function() {
   Woo.prototype.menuPreviewTolerance = 150;
 
+  Woo.prototype.menuOpenTolerance = 10;
+
+  Woo.prototype.previousMousePosition = {};
+
   function Woo() {
     this.closeMenuEventually = __bind(this.closeMenuEventually, this);
+    this.maybePreview = __bind(this.maybePreview, this);
+    this.maybeOpen = __bind(this.maybeOpen, this);
     this.openMenu = __bind(this.openMenu, this);
     hljs.initHighlighting();
     this.setupEvents();
     this.bindWidthPickers();
     this.activateCodeShowing();
     this.executeColorTransmogrification();
+    this._maybeOpen = _.debounce(this.maybeOpen, 10, true);
+    this._maybePreview = _.debounce(this.maybePreview, 10, true);
   }
 
   Woo.prototype.openMenu = function() {
     $('body').addClass('open');
+    $('body nav .menu').addClass('close');
     if (this.delayedClose) {
       return clearTimeout(this.delayedClose);
     }
   };
 
+  Woo.prototype.maybeOpen = function(mousePosition) {
+    if (mousePosition.x < this.previousMousePosition.x && mousePosition.x <= this.menuOpenTolerance) {
+      return this.openMenu();
+    }
+  };
+
+  Woo.prototype.maybePreview = function(mousePosition) {
+    if (mousePosition.x < this.previousMousePosition.x && mousePosition.x <= this.menuPreviewTolerance) {
+      return $('body nav').addClass('near-menu');
+    } else if (mousePosition.x >= this.menuPreviewTolerance) {
+      return $('body nav').removeClass('near-menu');
+    }
+  };
+
   Woo.prototype.closeMenuEventually = function() {
     return this.delayedClose = _.delay(this.closeMenu, 300);
   };
 
-  Woo.prototype.closeMenu = function() {
-    return $('body').removeClass('open');
+  Woo.prototype.closeMenu = function(e) {
+    $('body').removeClass('open');
+    return $('body nav .menu').removeClass('close');
   };
 
   Woo.prototype.bindWidthPickers = function() {
@@ -18533,20 +18557,28 @@ Woo = (function() {
   };
 
   Woo.prototype.setupEvents = function() {
-    $('body').on('mouseleave', 'nav', this.closeMenuEventually);
-    $('body').on('mouseover', 'nav', this.openMenu);
-    $('body nav').on('click', '.menu', this.closeMenu);
-    $('nav .nav-item-list [href]').on('click', this.closeMenu);
+    var notSelectors;
+    notSelectors = 'nav, .menu, .nav-item, .nav-item-title, .nav-item-icon';
+    $("body #woo-styleguide :not(" + notSelectors + ")").on('click', this.closeMenu);
+    $('body nav').on('click', '.menu', this.openMenu);
+    $('body nav').on('click', '.close', this.closeMenu);
+    $('body').on('mouseleave', (function(_this) {
+      return function() {
+        return _this.previousMousePosition.x = 0;
+      };
+    })(this));
     $('body').on('mousemove', (function(_this) {
       return function(e) {
-        if (e.pageX <= _this.menuPreviewTolerance) {
-          return $('body nav').addClass('near-menu');
-        } else {
-          return $('body nav').removeClass('near-menu');
-        }
+        var mousePosition;
+        mousePosition = {
+          x: e.pageX
+        };
+        _this._maybeOpen(mousePosition);
+        _this._maybePreview(mousePosition);
+        return _this.previousMousePosition = mousePosition;
       };
     })(this));
-    return $('nav .nav-item .nav-item-title').on('click', this.openNavItem);
+    return $('nav .nav-item').on('click', '.nav-item-title, .nav-item-icon', this.openNavItem);
   };
 
   Woo.prototype.openNavItem = function(e) {

data/app/assets/stylesheets/woo/application.css.scss

@@ -18,3 +18,5 @@
 
 // partials
 @import "woo/partials/main";
+@import "woo/partials/navigation";
+@import "woo/partials/block";

data/app/assets/stylesheets/woo/partials/_block.scss

@@ -0,0 +1,70 @@
+//
+// BLOCK
+// ******************************************************************
+
+$styleguide-padding: 20px 0;
+
+#woo-styleguide {
+
+  dl.styleguide {
+    margin: 0;
+    padding: $styleguide-padding;
+    position: relative;
+
+    a[name] {
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+    dt.page-title {
+      background-color: rgba($white, .95);
+      color: $black;
+      display: block;
+      font-size: 2em;
+      font-weight: 100;
+      margin: 2em 0 0;
+      padding: 10px 0;
+      text-align: center;
+    }
+
+    dd {
+      margin: 0 auto;
+      padding-top: 4em;
+      padding-bottom: 4em;
+      position: relative;
+      overflow: hidden;
+
+      &.notes {
+        background: $notes-section-background-color;
+        padding-top: 2em;
+        padding-bottom: 2em;
+        .wrapper {
+          background: $notes-background-color;
+          padding: 4em;
+        }
+        .notes-title {
+          box-shadow: 0 1px 0 0 rgba($black, .08);
+          color: rgba($black, .35);
+          font-size: rem-calc(14);
+          font-weight: 100;
+          font-style: italic;
+          padding-bottom: .35em;
+          position: relative;
+        }
+
+        h1, h2, h3, h4, h5, h6, p {
+          color: lighten($black, 15%);
+          font-weight: 200;
+        }
+
+      }
+      &.preview {
+        background: $body-background-color;
+      }
+      &.location-title {
+        padding: 0;
+      }
+    }
+  }
+
+}

data/app/assets/stylesheets/woo/partials/_main.scss

@@ -10,7 +10,11 @@ $notes-background-color: $white;
 
 body {
   &.open #woo-styleguide nav,
-  nav.near-menu { border-left: 5px solid $primary-color; }
+  #woo-styleguide nav.near-menu {
+    .preview {
+      width: 5px;
+    }
+  }
 
   &.open #woo-styleguide {
     nav {
@@ -38,204 +42,6 @@ body {
   box-sizing: border-box;
   position: relative;
 
-  //
-  // NAVIGATION
-  // ******************************************************************
-  nav {
-    @include transition(all .3s ease);
-    background-color: transparent;
-    border-left: 0px solid $nav-border-color;
-    display: block;
-    font-size: 0.8em;
-    left: 0;
-    bottom: 0;
-    padding: 0;
-    position: fixed;
-    text-align: left;
-    top: 0;
-    width: 10px;
-    z-index: 1000;
-
-    a.menu {
-      @include transition(all .3s ease);
-      @include inline-icon('menu');
-
-      pointer-events: auto;
-      color: $nav-menu-icon-color;
-      display: block;
-      font-size: 1.2em;
-      line-height: 2em;
-      margin-right: 0;
-      text-align: right;
-      z-index: 1000;
-      span { display: none; }
-
-      &:hover { box-shadow: none; }
-    }
-
-    .nav-item {
-      @include transition(all .3s ease .2s);
-      cursor: pointer;
-      position: relative;
-      opacity: 0;
-
-      &.open,
-      &:hover {
-        .nav-item-title { color: $nav-link-hover-color; }
-        .nav-item-icon:after { background: $nav-link-hover-color; }
-      }
-
-      &.open {
-        .nav-item-icon {
-          &:after {
-            @include icon('arrow-down');
-            background: none;
-            color: $nav-link-hover-color;
-            top: 20px;
-            right: 23px;
-          }
-        }
-        ul.nav-item-list { display: block; }
-      }
-
-      .nav-item-title {
-        @include transition(all .3s ease);
-        font-weight: 500;
-        margin-bottom: 1px;
-        text-transform: uppercase;
-      }
-
-      .nav-item-icon {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        top: 0;
-        width: 40px;
-        &:after {
-          content: '';
-          height: 1px;
-          width: 12px;
-          background: rgba($nav-link-color, .5);
-          top: 26px;
-          position: absolute;
-          right: 22px;
-          line-height: 100%;
-        }
-      }
-    }
-
-    a {
-      @include transition(all .3s ease);
-      box-shadow: 0 1px 0 0 transparent;
-      color: $nav-link-color;
-      font-family: $header-font;
-      font-size: 1em;
-      display: block;
-      padding: 20px;
-      &:hover {
-        color: $nav-link-hover-color;
-      }
-    }
-
-    .nav-item-list {
-      @include transition(all .3s ease);
-      background-color: transparent;
-      display: none;
-      overflow: hidden;
-      padding: 10px 0;
-      margin: 0;
-
-      li {
-        display: block;
-        &:last-child { margin-right: 0; }
-
-        a {
-          font-size: 13px;
-          padding-left: 45px;
-          position: relative;
-          &:before {
-            box-shadow: inset 0 0 0 1px $nav-link-hr-color;
-            border-radius: 1000px;
-            left: 25px;
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            content: '';
-            font-size: 10px;
-            vertical-align: top;
-            margin-top: 4px;
-          }
-        }
-      }
-    }
-  }
-
-
-  //
-  // BLOCK
-  // ******************************************************************
-
-  dl.styleguide {
-    margin: 0;
-    padding: 200px 0;
-    position: relative;
-
-    a[name] {
-      height: 0;
-      padding: 0;
-      margin: 0;
-    }
-    dt.page-title {
-      background-color: rgba($white, .95);
-      color: $black;
-      display: block;
-      font-size: 2em;
-      font-weight: 100;
-      margin: 2em 0 0;
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    dd {
-      margin: 0 auto;
-      padding-top: 4em;
-      padding-bottom: 4em;
-      position: relative;
-      overflow: hidden;
-
-      &.notes {
-        background: $notes-section-background-color;
-        padding-top: 2em;
-        padding-bottom: 2em;
-        .wrapper {
-          background: $notes-background-color;
-          padding: 4em;
-        }
-        .notes-title {
-          box-shadow: 0 1px 0 0 rgba($black, .08);
-          color: rgba($black, .35);
-          font-size: rem-calc(14);
-          font-weight: 100;
-          font-style: italic;
-          padding-bottom: .35em;
-          position: relative;
-        }
-
-        h1, h2, h3, h4, h5, h6, p {
-          color: lighten($black, 15%);
-          font-weight: 200;
-        }
-
-      }
-      &.preview {
-        background: $body-background-color;
-      }
-      &.location-title {
-        padding: 0;
-      }
-    }
-  }
-
   .location {
     background-color: rgba($white, .95);
     color: rgba($black, .45);

data/app/assets/stylesheets/woo/partials/_navigation.scss

@@ -0,0 +1,152 @@
+//
+// NAVIGATION
+// ******************************************************************
+
+
+
+
+
+
+
+
+#woo-styleguide {
+  nav {
+    @include transition(all .3s ease);
+    background-color: transparent;
+    display: block;
+    font-size: 0.8em;
+    left: 0;
+    bottom: 0;
+    padding: 0;
+    position: fixed;
+    text-align: left;
+    top: 0;
+    width: 10px;
+    z-index: 1000;
+
+    .preview {
+      @include transition(all .3s ease);
+      background-color: $primary-color;
+      bottom: 0;
+      left: 0;
+      position: fixed;
+      top: 0;
+      width: 0px;
+      z-index: 1000;
+    }
+
+    a.menu {
+      @include transition(all .3s ease);
+      @include inline-icon('menu');
+      cursor: pointer;
+      pointer-events: auto;
+      color: $nav-menu-icon-color;
+      display: block;
+      font-size: 1.2em;
+      line-height: 2em;
+      margin-right: 0;
+      text-align: right;
+      z-index: 1000;
+      span { display: none; }
+
+      &:hover { box-shadow: none; }
+    }
+
+    .nav-item {
+      @include transition(all .3s ease .2s);
+      cursor: pointer;
+      overflow: hidden;
+      position: relative;
+      opacity: 0;
+
+      &.open,
+      &:hover {
+        .nav-item-title { color: $nav-link-hover-color; }
+        .nav-item-icon:after { background: $nav-link-hover-color; }
+      }
+
+      &.open {
+        .nav-item-icon {
+          &:after {
+            @include icon('arrow-down');
+            background: none;
+            color: $nav-link-hover-color;
+            top: 20px;
+            right: 23px;
+          }
+        }
+        ul.nav-item-list { display: block; }
+      }
+
+      .nav-item-title {
+        @include transition(all .3s ease);
+        font-weight: 500;
+        margin-bottom: 1px;
+        text-transform: uppercase;
+      }
+
+      .nav-item-icon {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        top: 0;
+        width: 40px;
+        &:after {
+          content: '';
+          height: 1px;
+          width: 12px;
+          background: rgba($nav-link-color, .5);
+          top: 26px;
+          position: absolute;
+          right: 22px;
+          line-height: 100%;
+        }
+      }
+    }
+
+    a {
+      @include transition(all .3s ease);
+      box-shadow: 0 1px 0 0 transparent;
+      color: $nav-link-color;
+      font-family: $header-font;
+      font-size: 1em;
+      display: block;
+      padding: 20px;
+      &:hover {
+        color: $nav-link-hover-color;
+      }
+    }
+
+    .nav-item-list {
+      @include transition(all .3s ease);
+      background-color: transparent;
+      display: none;
+      overflow: hidden;
+      padding: 10px 0;
+      margin: 0;
+
+      li {
+        display: block;
+        &:last-child { margin-right: 0; }
+
+        a {
+          font-size: 13px;
+          padding-left: 45px;
+          position: relative;
+          &:before {
+            box-shadow: inset 0 0 0 1px $nav-link-hr-color;
+            border-radius: 1000px;
+            left: 25px;
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            content: '';
+            font-size: 10px;
+            vertical-align: top;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+  }
+}

data/app/views/woo/shared/_navigation.html.haml

@@ -1,4 +1,5 @@
 %nav
+  .preview
   %a.menu
     %span Menu
   - navigation_hash.each do |folder_name, folder_contents|

data/lib/woo/version.rb

@@ -1,3 +1,3 @@
 module Woo
-  VERSION = "0.1.7"
+  VERSION = "0.1.8"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: woo
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.1.8
 platform: ruby
 authors:
 - Kevin Altman
@@ -176,7 +176,9 @@ files:
 - app/assets/stylesheets/woo/lib/_icon-factory.scss
 - app/assets/stylesheets/woo/mixins/_color-block.scss
 - app/assets/stylesheets/woo/mixins/_hover-border.scss
+- app/assets/stylesheets/woo/partials/_block.scss
 - app/assets/stylesheets/woo/partials/_main.scss
+- app/assets/stylesheets/woo/partials/_navigation.scss
 - app/controllers/woo/application_controller.rb
 - app/controllers/woo/styleguide_controller.rb
 - app/helpers/woo/application_helper.rb