Added first version of hashGenerator option

Author: Mat Ryer

src/javascripts/jquery.tocify.js

@@ -23,7 +23,7 @@
     $.widget("toc.tocify", {
 
         //Plugin version
-        version: "1.2.0",
+        version: "1.2.1",
 
         // These options will be used as defaults
         options: {
@@ -94,7 +94,16 @@
 
             // **history**: Accepts a boolean: true or false
             // Adds a hash to the page url to maintain history
-            history: true
+            history: true,
+
+            // **hashGenerator**: How the hash value (the anchor segment of the URL, following the
+            // # character) will be generated.
+            //
+            // "compact" (default) - #CompressesEverythingTogether
+            // "pretty" - #looks-like-a-nice-url-and-is-easily-readable
+            // function(text){} - Your own hash generation function that accepts the text as an
+            // argument, and returns the hash value.
+            hashGenerator: "compact"
 
         },
 
@@ -301,13 +310,15 @@
 
             }
 
+            var hashValue = this._generateHashValue(arr, self, index);
+
             // Appends a list item HTML element to the last unordered list HTML element found within the HTML element calling the plugin
             item = $("<li/>", {
 
                 // Sets a common class name to the list item
                 "class": "item",
 
-                "data-unique": (!arr.length ? self.text() : self.text() + index).replace(/\s/g, "")
+                "data-unique": hashValue
 
             }).append($("<a/>", {
 
@@ -319,16 +330,53 @@
             self.before($("<div/>", {
 
                 // Sets a name attribute on the anchor tag to the text of the currently traversed HTML element (also making sure that all whitespace is replaced with an underscore)
-                "name": self.text().replace(/\s/g, ""),
+                "name": hashValue,
 
-                "data-unique": (!arr.length ? self.text() : self.text() + index).replace(/\s/g, "")
+                "data-unique": hashValue
 
             }));
 
             return item;
 
         },
 
+        // _generateHashValue
+        // ------------------
+        //      Generates the hash value that will be used to refer to each item.
+        _generateHashValue: function(arr, self, index) {
+
+            var hashValue = "";
+
+            if (this.options.hashGenerator == "pretty") {
+
+                // pretify the text
+                var hashValue = self.text().toLowerCase().replace(/\s/g, "-");
+
+                // fix double hyphens
+                while (hashValue.indexOf("--") > -1) {
+                    hashValue = hashValue.replace(/--/g, "-");
+                }
+
+            } else if (typeof this.options.hashGenerator == "function") {
+
+                // call the function
+                hashValue = this.options.hashGenerator(self.text(), self);
+
+            } else {
+
+                // compact - the default
+                hashValue = self.text().replace(/\s/g, "");
+
+            }
+
+            // add the index if we need to
+            if (arr.length) { hashValue += ""+index; }
+
+            // return the value
+            return hashValue;
+
+        },
+
         // _appendElements
         // ---------------
         //      Helps create the table of contents list by appending subheader elements

test/spec/javascripts/fixtures/tocifyFixture.html

@@ -54,7 +54,7 @@ <h4>History.js</h4>
 Note: If you do not include History.js, then Tocify will not have history support, but it will still be functional.
 </p>
 <br />
-<h1>Getting Started</h1>
+<h1 class="getting-started-test-marker">Getting Started</h1>
 <br />
 <h3>Downloads</h3>
 <br />

test/spec/tocifySpec.js

@@ -38,5 +38,69 @@ describe("Tocify jQuery Plugin", function () {
 
     });
 
+    describe("Hash generation", function(){
+
+        it("Should add an index if there are duplicate values", function(){
+
+            loadFixtures("tocifyFixture.html");
+
+            // set all H1s to the same text
+            $("h1").text("The same value");
+
+            toc = $("#toc").tocify({ hashGenerator: "pretty", context: ".documentation", selectors: "h1, h3, h4" });
+
+            expect($("h1.getting-started-test-marker").eq(0).prev("div").eq(0).attr("name")).toBe("the-same-value3");
+
+        });
+
+        it("Should default to 'original'", function(){
+            expect(toc.data("tocify").options["hashGenerator"]).toBe("compact");
+        });
+
+        it("Should support the 'pretty' hashGenerator option", function(){
+
+            loadFixtures("tocifyFixture.html");
+            toc = $("#toc").tocify({ hashGenerator: "pretty", context: ".documentation", selectors: "h1, h3, h4" });
+            expect($("h1.getting-started-test-marker").eq(0).prev("div").eq(0).attr("name")).toBe("getting-started");
+
+        });
+
+        it("Should fix double hyphens in the 'pretty' hashGenerator option", function(){
+
+            loadFixtures("tocifyFixture.html");
+            $("h1.getting-started-test-marker").text("Getting    started")
+            toc = $("#toc").tocify({ hashGenerator: "pretty", context: ".documentation", selectors: "h1, h3, h4" });
+            expect($("h1.getting-started-test-marker").eq(0).prev("div").eq(0).attr("name")).toBe("getting-started");
+
+        });
+
+        it("Should support a function hashGenerator option", function(){
+
+            loadFixtures("tocifyFixture.html");
+            var args = [];
+
+            toc = $("#toc").tocify({ hashGenerator: function(text, element){
+
+                // record this call
+                args.push(arguments);
+
+                // return a test value
+                return text + "(TEST)";
+
+            }, context: ".documentation", selectors: "h1, h3, h4" });
+      
+            expect($("h1.getting-started-test-marker").eq(0).prev("div").eq(0).attr("name")).toBe($("h1.getting-started-test-marker").text() + "(TEST)");
+            
+            // check the correct arguments were passed to the function too
+
+            // text
+            expect(args[0][0], $("h1.getting-started-test-marker").text());
+
+            // element
+            expect(args[0][1].attr("class"), "getting-started-test-marker");
+
+        });
+
+    });
 
 });