smock 0.1.213 → 0.1.214

data/app/assets/javascripts/vendor/jquery.menuaim.js

@@ -0,0 +1,323 @@
+/**
+ * menu-aim is a jQuery plugin for dropdown menus that can differentiate
+ * between a user trying hover over a dropdown item vs trying to navigate into
+ * a submenu's contents.
+ *
+ * menu-aim assumes that you have are using a menu with submenus that expand
+ * to the menu's right. It will fire events when the user's mouse enters a new
+ * dropdown item *and* when that item is being intentionally hovered over.
+ *
+ * __________________________
+ * | Monkeys  >|   Gorilla  |
+ * | Gorillas >|   Content  |
+ * | Chimps   >|   Here     |
+ * |___________|____________|
+ *
+ * In the above example, "Gorillas" is selected and its submenu content is
+ * being shown on the right. Imagine that the user's cursor is hovering over
+ * "Gorillas." When they move their mouse into the "Gorilla Content" area, they
+ * may briefly hover over "Chimps." This shouldn't close the "Gorilla Content"
+ * area.
+ *
+ * This problem is normally solved using timeouts and delays. menu-aim tries to
+ * solve this by detecting the direction of the user's mouse movement. This can
+ * make for quicker transitions when navigating up and down the menu. The
+ * experience is hopefully similar to amazon.com/'s "Shop by Department"
+ * dropdown.
+ *
+ * Use like so:
+ *
+ *      $("#menu").menuAim({
+ *          activate: $.noop,  // fired on row activation
+ *          deactivate: $.noop  // fired on row deactivation
+ *      });
+ *
+ *  ...to receive events when a menu's row has been purposefully (de)activated.
+ *
+ * The following options can be passed to menuAim. All functions execute with
+ * the relevant row's HTML element as the execution context ('this'):
+ *
+ *      .menuAim({
+ *          // Function to call when a row is purposefully activated. Use this
+ *          // to show a submenu's content for the activated row.
+ *          activate: function() {},
+ *
+ *          // Function to call when a row is deactivated.
+ *          deactivate: function() {},
+ *
+ *          // Function to call when mouse enters a menu row. Entering a row
+ *          // does not mean the row has been activated, as the user may be
+ *          // mousing over to a submenu.
+ *          enter: function() {},
+ *
+ *          // Function to call when mouse exits a menu row.
+ *          exit: function() {},
+ *
+ *          // Selector for identifying which elements in the menu are rows
+ *          // that can trigger the above events. Defaults to "> li".
+ *          rowSelector: "> li",
+ *
+ *          // You may have some menu rows that aren't submenus and therefore
+ *          // shouldn't ever need to "activate." If so, filter submenu rows w/
+ *          // this selector. Defaults to "*" (all elements).
+ *          submenuSelector: "*",
+ *
+ *          // Direction the submenu opens relative to the main menu. Can be
+ *          // left, right, above, or below. Defaults to "right".
+ *          submenuDirection: "right"
+ *      });
+ *
+ * https://github.com/kamens/jQuery-menu-aim
+*/
+(function($) {
+
+    $.fn.menuAim = function(opts) {
+        // Initialize menu-aim for all elements in jQuery collection
+        this.each(function() {
+            init.call(this, opts);
+        });
+
+        return this;
+    };
+
+    function init(opts) {
+        var $menu = $(this),
+            activeRow = null,
+            mouseLocs = [],
+            lastDelayLoc = null,
+            timeoutId = null,
+            options = $.extend({
+                rowSelector: "> li",
+                submenuSelector: "*",
+                submenuDirection: "right",
+                tolerance: 75,  // bigger = more forgivey when entering submenu
+                enter: $.noop,
+                exit: $.noop,
+                activate: $.noop,
+                deactivate: $.noop,
+                exitMenu: $.noop
+            }, opts);
+
+        var MOUSE_LOCS_TRACKED = 3,  // number of past mouse locations to track
+            DELAY = 300;  // ms delay when user appears to be entering submenu
+
+        /**
+         * Keep track of the last few locations of the mouse.
+         */
+        var mousemoveDocument = function(e) {
+                mouseLocs.push({x: e.pageX, y: e.pageY});
+
+                if (mouseLocs.length > MOUSE_LOCS_TRACKED) {
+                    mouseLocs.shift();
+                }
+            };
+
+        /**
+         * Cancel possible row activations when leaving the menu entirely
+         */
+        var mouseleaveMenu = function() {
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+
+                // If exitMenu is supplied and returns true, deactivate the
+                // currently active row on menu exit.
+                if (options.exitMenu(this)) {
+                    if (activeRow) {
+                        options.deactivate(activeRow);
+                    }
+
+                    activeRow = null;
+                }
+            };
+
+        /**
+         * Trigger a possible row activation whenever entering a new row.
+         */
+        var mouseenterRow = function() {
+                if (timeoutId) {
+                    // Cancel any previous activation delays
+                    clearTimeout(timeoutId);
+                }
+
+                options.enter(this);
+                possiblyActivate(this);
+            },
+            mouseleaveRow = function() {
+                options.exit(this);
+            };
+
+        /*
+         * Immediately activate a row if the user clicks on it.
+         */
+        var clickRow = function() {
+                activate(this);
+            };
+
+        /**
+         * Activate a menu row.
+         */
+        var activate = function(row) {
+                if (row == activeRow) {
+                    return;
+                }
+
+                if (activeRow) {
+                    options.deactivate(activeRow);
+                }
+
+                options.activate(row);
+                activeRow = row;
+            };
+
+        /**
+         * Possibly activate a menu row. If mouse movement indicates that we
+         * shouldn't activate yet because user may be trying to enter
+         * a submenu's content, then delay and check again later.
+         */
+        var possiblyActivate = function(row) {
+                var delay = activationDelay();
+
+                if (delay) {
+                    timeoutId = setTimeout(function() {
+                        possiblyActivate(row);
+                    }, delay);
+                } else {
+                    activate(row);
+                }
+            };
+
+        /**
+         * Return the amount of time that should be used as a delay before the
+         * currently hovered row is activated.
+         *
+         * Returns 0 if the activation should happen immediately. Otherwise,
+         * returns the number of milliseconds that should be delayed before
+         * checking again to see if the row should be activated.
+         */
+        var activationDelay = function() {
+                if (!activeRow || !$(activeRow).is(options.submenuSelector)) {
+                    // If there is no other submenu row already active, then
+                    // go ahead and activate immediately.
+                    return 0;
+                }
+
+                var offset = $menu.offset(),
+                    upperLeft = {
+                        x: offset.left,
+                        y: offset.top - options.tolerance
+                    },
+                    upperRight = {
+                        x: offset.left + $menu.outerWidth(),
+                        y: upperLeft.y
+                    },
+                    lowerLeft = {
+                        x: offset.left,
+                        y: offset.top + $menu.outerHeight() + options.tolerance
+                    },
+                    lowerRight = {
+                        x: offset.left + $menu.outerWidth(),
+                        y: lowerLeft.y
+                    },
+                    loc = mouseLocs[mouseLocs.length - 1],
+                    prevLoc = mouseLocs[0];
+
+                if (!loc) {
+                    return 0;
+                }
+
+                if (!prevLoc) {
+                    prevLoc = loc;
+                }
+
+                if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
+                    prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
+                    // If the previous mouse location was outside of the entire
+                    // menu's bounds, immediately activate.
+                    return 0;
+                }
+
+                if (lastDelayLoc &&
+                        loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
+                    // If the mouse hasn't moved since the last time we checked
+                    // for activation status, immediately activate.
+                    return 0;
+                }
+
+                // Detect if the user is moving towards the currently activated
+                // submenu.
+                //
+                // If the mouse is heading relatively clearly towards
+                // the submenu's content, we should wait and give the user more
+                // time before activating a new row. If the mouse is heading
+                // elsewhere, we can immediately activate a new row.
+                //
+                // We detect this by calculating the slope formed between the
+                // current mouse location and the upper/lower right points of
+                // the menu. We do the same for the previous mouse location.
+                // If the current mouse location's slopes are
+                // increasing/decreasing appropriately compared to the
+                // previous's, we know the user is moving toward the submenu.
+                //
+                // Note that since the y-axis increases as the cursor moves
+                // down the screen, we are looking for the slope between the
+                // cursor and the upper right corner to decrease over time, not
+                // increase (somewhat counterintuitively).
+                function slope(a, b) {
+                    return (b.y - a.y) / (b.x - a.x);
+                };
+
+                var decreasingCorner = upperRight,
+                    increasingCorner = lowerRight;
+
+                // Our expectations for decreasing or increasing slope values
+                // depends on which direction the submenu opens relative to the
+                // main menu. By default, if the menu opens on the right, we
+                // expect the slope between the cursor and the upper right
+                // corner to decrease over time, as explained above. If the
+                // submenu opens in a different direction, we change our slope
+                // expectations.
+                if (options.submenuDirection == "left") {
+                    decreasingCorner = lowerLeft;
+                    increasingCorner = upperLeft;
+                } else if (options.submenuDirection == "below") {
+                    decreasingCorner = lowerRight;
+                    increasingCorner = lowerLeft;
+                } else if (options.submenuDirection == "above") {
+                    decreasingCorner = upperLeft;
+                    increasingCorner = upperRight;
+                }
+
+                var decreasingSlope = slope(loc, decreasingCorner),
+                    increasingSlope = slope(loc, increasingCorner),
+                    prevDecreasingSlope = slope(prevLoc, decreasingCorner),
+                    prevIncreasingSlope = slope(prevLoc, increasingCorner);
+
+                if (decreasingSlope < prevDecreasingSlope &&
+                        increasingSlope > prevIncreasingSlope) {
+                    // Mouse is moving from previous location towards the
+                    // currently activated submenu. Delay before activating a
+                    // new menu row, because user may be moving into submenu.
+                    lastDelayLoc = loc;
+                    return DELAY;
+                }
+
+                lastDelayLoc = null;
+                return 0;
+            };
+
+        /**
+         * Hook up initial menu events
+         */
+        $menu
+            .mouseleave(mouseleaveMenu)
+            .find(options.rowSelector)
+                .mouseenter(mouseenterRow)
+                .mouseleave(mouseleaveRow)
+                .click(clickRow);
+
+        $(document).mousemove(mousemoveDocument);
+
+    };
+})(jQuery);
+

data/app/assets/stylesheets/modules/_categories_dropdown.sass

@@ -21,8 +21,8 @@
   overflow: hidden
   +transition( height 0.05s ease-in)
 
-.category-dropdown__categories__item__subcategories.show-me
-  display: none
+.category-dropdown__categories--expanded
+  width: 590px
 
 .category-dropdown__categories__list
   +space(min-height, 9)
@@ -47,3 +47,4 @@
   +space(top)
   right: 0
   width: 45%
+  height: 100%

data/examples/pages/homepage.html

@@ -34,9 +34,9 @@
           <a class="category-dropdown__control th-double-line th-inverse" href="#">Browse Categories</a>
           <div class="category-dropdown__categories th-size-normal ch-white-background">
             <ul class="category-dropdown__categories__list">
-              <li>
+              <li data-submenu-id="1">
                 <a href="#" class="th-size-medium th-double-line">Business &amp; Marketing</a>
-                <ul class="category-dropdown__categories__item__subcategories show-me">
+                <ul id="1" class="category-dropdown__categories__item__subcategories show-me">
                   <li><a href="#">Inforgraphic Design</a></li>
                   <li><a href="#">Caricatures &amp; Cartoon Design</a></li>
                   <li><a href="#">eBooks &amp; Digital Publishing</a></li>
@@ -44,57 +44,57 @@
                   <li><a href="#">Website Customization &amp; Updates</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="2">
                 <a href="#" class="th-size-medium th-double-line">Mobile &amp; Apps</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="2" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="3">
                 <a href="#" class="th-size-medium th-double-line">Ecommerce &amp; CMS Development</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="3" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="4">
                 <a href="#" class="th-size-medium th-double-line">Websites &amp; Programming</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="4" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="5">
                 <a href="#" class="th-size-medium th-double-line">Design &amp; Graphics</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="5" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="6">
                 <a href="#" class="th-size-medium th-double-line">Logos &amp; Branding</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="6" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="7">
                 <a href="#" class="th-size-medium th-double-line">WordPress</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="7" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                 </ul>
               </li>
-              <li class="category-dropdown__categories__item">
+              <li data-submenu-id="8">
                 <a href="#" class="th-size-medium th-double-line">Video &amp; Animation</a>
-                <ul class="category-dropdown__categories__item__subcategories">
+                <ul id="8" class="category-dropdown__categories__item__subcategories">
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
                   <li class="category-dropdown__categories__item__subcategories__item"><a href="#">Inforgraphic Design</a></li>
@@ -578,5 +578,8 @@
 </footer>
 
 <script src="../../smock.js"></script>
+<script type="text/javascript" charset="utf-8">
+  var dropdown = new Smock.CategoryDropdown().ready();
+</script>
 </body>
 </html>

data/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "devDependencies": {
-  	"webpack": "~1.4.15"
+  	"webpack": "~1.4.15",
   	"coffee-script": "~1.8.0"
   }
 }

data/webpack.config.js

@@ -2,15 +2,23 @@ var webpack = require("webpack");
 var path = require("path");
 
 module.exports = {
-  entry: "./app/assets/javascripts/smock.coffee",
+  entry: {
+    "smock": "./app/assets/javascripts/smock.coffee"
+  },
   devtool: "source-map",
   output: {
-    filename: "smock.js"
+    filename: "[name].js"
   },
   module: {
     loaders: [
       { test: /\.coffee$/, loader: "coffee-loader" },
     ]
-  }
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      "$": "./jquery.js",
+      "jQuery": "./jquery.js"
+    })
+  ]
 };