updated readme, gruntfile, and added maxCollapsedCrumbs

Author: kirkstrobeck

Gruntfile.coffee

@@ -5,8 +5,7 @@ module.exports = (grunt) ->
     pkg:
       grunt.file.readJSON "package.json"
     clean:
-      default:
-        [
+      default: [
           "js"
           "css"
           "index.html"
@@ -65,28 +64,78 @@ module.exports = (grunt) ->
         files: "js/breadcrumbs.min.js":"js/breadcrumbs.js"
       example:
         files: "js/example.min.js":"js/example.js"
+    watch:
+      all:
+        files: [
+          "coffee/**/*.coffee"
+          "less/**/*.less"
+          "jade/**/*.jade"
+        ]
+        tasks: "build"
+      coffee:
+        files: "coffee/**/*.coffee"
+        tasks: "buildCoffee"
+      jade:
+        files: "jade/**/*.jade"
+        tasks: "buildJade"
+      less:
+        files: "less/**/*.less"
+        tasks: "buildLess"
 
-  grunt.loadNpmTasks "grunt-contrib-coffee"
-  grunt.loadNpmTasks "grunt-contrib-less"
   grunt.loadNpmTasks "grunt-contrib-clean"
-  grunt.loadNpmTasks "grunt-contrib-jade"
-  grunt.loadNpmTasks "grunt-contrib-connect"
+  grunt.loadNpmTasks "grunt-contrib-coffee"
   grunt.loadNpmTasks "grunt-contrib-concat"
+  grunt.loadNpmTasks "grunt-contrib-jade"
+  grunt.loadNpmTasks "grunt-contrib-less"
   grunt.loadNpmTasks "grunt-contrib-uglify"
+  grunt.loadNpmTasks "grunt-contrib-watch"
 
-  grunt.registerTask "default", "build"
-  grunt.registerTask "build", [
-    "clean"
-    "concat:jade"
-    "jade"
-    "clean:jade"
+  grunt.registerTask "buildCoffee", [
     "coffee"
     "uglify:breadcrumbs"
     "uglify:example"
     "concat:jsMin"
+  ]
+
+  grunt.registerTask "buildJade", [
+    "concat:jade"
+    "jade"
+    "clean:jade"
+  ]
+
+  grunt.registerTask "buildLess", [
     "less:breadcrumbs"
     "less:breadcrumbsMin"
     "less:template"
     "less:templateMin"
     "less:combinedMin"
   ]
+
+  grunt.registerTask "build", [
+    "clean:default"
+    "buildCoffee"
+    "buildJade"
+    "buildLess"
+  ]
+
+  grunt.registerTask "devAll", [
+    "build"
+    "watch:all"
+  ]
+
+  grunt.registerTask "devCoffee", [
+    "buildCoffee"
+    "watch:coffee"
+  ]
+
+  grunt.registerTask "devLess", [
+    "buildLess"
+    "watch:less"
+  ]
+
+  grunt.registerTask "devJade", [
+    "buildJade"
+    "watch:jade"
+  ]
+
+  grunt.registerTask "default", "build"

README.md

@@ -2,21 +2,13 @@
 
 An easy way to expand or collapse menu items, especially when there are many levels like in folder navigation.
 
-## Build
-
-Clone the repo with its submodules ..
-
-	git clone https://github.com/infowrap/breadcrumbs.git
-	cd breadcrumbs	
-
-Then to build, run ..
-
-    sh install.sh
-    # after the first time you can simply run `grunt`
+## To use
 
-To work on the project with a watcher that builds on save, run ..
+Add jQuery and then ..
 
-	grunt dev
+    $(window).load(function() {
+      $(".infowrap-breadcrumbs").infowrapBreadcrumbs();
+    });
 
 
 ## Examples
@@ -28,3 +20,41 @@ Expanded
 
 Collapsed
 ![](https://raw.github.com/infowrap/breadcrumbs/master/README/collapsed.png)
+
+
+## Build
+
+To install and build, run ..
+
+    sh install.sh
+    # after the first time you can simply run `grunt`
+
+
+To watch and compile specific files, run ..
+
+    # to watch all and compile all
+    grunt devAll
+
+    # to watch and compile coffee files
+    grunt devCoffee
+
+    # to watch and compile jade files
+    grunt devJade
+
+    # to watch and compile less files
+    grunt devLess
+
+
+To build-only specific file types, run ..
+
+    # to watch all and compile all
+    grunt build
+
+    # to compile coffee files
+    grunt buildCoffee
+
+    # to compile jade files
+    grunt buildJade
+
+    # to compile less files
+    grunt buildLess

coffee/breadcrumbs.coffee

@@ -28,7 +28,12 @@ self-invoking anonymous wrapper, which imports jquery on last line
     ###
     save this as a variable so it isn't lost or confused with another this
     ###
-    crumbsObj = this
+    infowrapBreadcrumbsObj = this
+
+    ###
+    cache the .crumbs to an object for later use
+    ###
+    crumbsObj = infowrapBreadcrumbsObj.find ".crumbs"
 
     ###
     allowing formal options overrides to be respected
@@ -43,18 +48,27 @@ self-invoking anonymous wrapper, which imports jquery on last line
     $.fn.infowrapBreadcrumbs.defaultOptions.minWidth = 50;
     $('#helloWorld').infowrapBreadcrumbs();
     $('#goodbyeWorld').infowrapBreadcrumbs();
-
     ###
     options = $.extend {}, $.fn.infowrapBreadcrumbs.defaultOptions, options
 
     ###
     globalizing the variables for the method, so if we have to make a change to
     the varable on its way in, we have a place to address that potential
     ###
+    maxCollapsedCrumbs = options.maxCollapsedCrumbs - 1
     minWidth = options.minWidth
     shaderWidth = options.shaderWidth
     shaderAntumbra = options.shaderAntumbra
 
+    ###
+    the nth crumb that is collapsed counting from the left, and the nth crumb
+    that is expanded counting from the left. the expanded crumb is only detected
+    if no collapsed crumb is found. this prevents an error when on a small
+    screen and all are collapsed
+    ###
+    collapsedCrumb = 0
+    expandedCrumb = 0
+
     ###
     the total number of crumbs
     if 3, then it should be 3
@@ -88,10 +102,10 @@ self-invoking anonymous wrapper, which imports jquery on last line
       ###
       define the crumb object as its used more than once
       ###
-      crumbObj = $(this)
+      crumbObj = $ this
 
       ###
-      cache the crumb to an object for later use
+      cache the crumb to an objects for later use
       ###
       crumbObjs[index + 1] = crumbObj
 
@@ -150,8 +164,7 @@ self-invoking anonymous wrapper, which imports jquery on last line
       over all the crumbs following the currenct crumb
       ###
       afterCrumb = 0
-      for i in [crumb + 1 .. totalCrumbs] by 1
-        afterCrumb += crumbWidths[i]
+      afterCrumb += crumbWidths[i] for i in [crumb + 1 .. totalCrumbs] by 1
 
       ###
       this is the magic, the current crumb width is simlpy the difference
@@ -191,21 +204,54 @@ self-invoking anonymous wrapper, which imports jquery on last line
         crumbObj.outerWidth crumbWidthDiff
 
         ###
-        the shader moves with the window resize to simulate a growing overlap
-        as the objects get tighter.
+        if the maxCollapsedCrumbs is set, then lets make it happen
         ###
-        shaderX = -shaderWidth - shaderAntumbra + crumbWidth - crumbWidthDiff
+        if maxCollapsedCrumbs
+
+          ###
+          when a crumb diff width is equal to or less than the minimum crumb
+          width, then is collapsed, then flag it with a data attribute otherwise
+          set it to false
+          ###
+          if crumbWidthDiff < minWidth
+            crumbObj.attr "data-collapsed", true
+          else
+            crumbObj.attr "data-collapsed", false
+
+          ###
+          look for the first instance of false, in other words the first
+          uncollapsed crumb. todo: optimize this to run once
+          ###
+          collapsedCrumb = crumbsObj.find(""".crumb[data-collapsed="false"]:first""").index()
+
+          if collapsedCrumb < 0
+            collapsedCrumb = totalCrumbs - 1
+            expandedCrumb = crumbsObj.find(""".crumb[data-collapsed="true"]:first""").index()
+
+          ###
+          if the collapsed crumb index is greater than or equal to the
+          maxCollapsedCrumbs option, then there are too many crumbs visible,
+          and the .crumbs container needs to go left and be hidden by the
+          overflow:hidden of the parent, .infowrap-breadcrumbs. the crumbs
+          can go too far right, because of the loose if conditional, so a
+          protection maxes out at 0
+          ###
+          if collapsedCrumb >= maxCollapsedCrumbs or expandedCrumb >= 0
+            crumbsLeft = -minWidth * (collapsedCrumb - maxCollapsedCrumbs)
+            if crumbsLeft > 0 then crumbsLeft = 0
+            crumbsObj.css "left", crumbsLeft
 
         ###
-        the `right` css attribute should not be less than 0
+        the shader moves with the window resize to simulate a growing overlap
+        as the objects get tighter.
         ###
-        if shaderX > 0 then shaderX = 0
+        shaderX = -shaderWidth - shaderAntumbra + crumbWidth - crumbWidthDiff
 
         ###
         the div that creates the shadow should not enter the visible space, it
         should always be cropped out of view by overflow:hidden
         ###
-        if shaderX < shaderWidth then shaderX = -shaderWidth
+        if shaderX > -shaderWidth then shaderX = -shaderWidth
 
         ###
         set the shader x position off the right with position absolute
@@ -245,10 +291,13 @@ self-invoking anonymous wrapper, which imports jquery on last line
     ###
     windowResize is a set of operations used in a couple of places, it has been
     added as a method to call on load and on resize. when the user resizes the
-    page, run the updateCrumb method on each crumb
+    page, run the updateCrumb method on each crumb. One is subtracted from
+    totalCrumbs, because there's no need to adjust the last crumb width as the
+    overflow:hidden will handle it
     ###
     windowResize = ->
-      updateCrumb crumb, crumbsObj.width() for crumb in [1 .. totalCrumbs] by 1
+      for crumb in [1 .. totalCrumbs - 1] by 1
+        updateCrumb crumb, infowrapBreadcrumbsObj.width()
 
     ###
     run the above method on every fire of window resize
@@ -275,6 +324,11 @@ self-invoking anonymous wrapper, which imports jquery on last line
   ###
   $.fn.infowrapBreadcrumbs.defaultOptions =
 
+    ###
+    the maximum number of visible collapsed crumbs counting from the left
+    ###
+    maxCollapsedCrumbs: 3
+
     ###
     the minimum width of a crumb when collapsed
     ###
@@ -289,7 +343,7 @@ self-invoking anonymous wrapper, which imports jquery on last line
     ###
     the distance of your css shadow antumbra in pixels
     ###
-    shaderAntumbra: 20
+    shaderAntumbra: 25
 
 ###
 import jquery into the self-invoking anonymous wrapper

less/boilerplate/mixins.less

@@ -10,3 +10,10 @@
     clear: both;
   }
 }
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}

less/boilerplate/template.less

@@ -17,5 +17,5 @@ html {
 }
 
 .container {
-  padding: 50px;
+  padding: 100px 30px;
 }