Implement a silly breadcrumb for JSON Navigation

LICENSE

@@ -1,5 +1,5 @@
 /*
-* 4chan X - Version 1.4.1 - 2014-03-03
+* 4chan X - Version 1.4.1 - 2014-03-06
 *
 * Licensed under the MIT license.
 * https://github.com/Spittie/4chan-x/blob/master/LICENSE

builds/4chan-X.user.js

@@ -24,7 +24,7 @@
 // ==/UserScript==
 
 /*
-* 4chan X - Version 1.4.1 - 2014-03-03
+* 4chan X - Version 1.4.1 - 2014-03-06
 *
 * Licensed under the MIT license.
 * https://github.com/Spittie/4chan-x/blob/master/LICENSE
@@ -12539,9 +12539,14 @@
         return;
       }
       $.ready(function() {
-        return $.on(window, 'popstate', Navigate.popstate);
+        $.on(window, 'popstate', Navigate.popstate);
+        Navigate.makeBreadCrumb(window.location, g.VIEW, g.BOARD.ID, g.THREADID);
+        return $.add(Index.navLinks, Navigate.el);
       });
       this.title = function() {};
+      this.el = $.el('div', {
+        id: 'breadCrumb'
+      });
       Thread.callbacks.push({
         name: 'Navigate',
         cb: this.thread
@@ -12731,6 +12736,10 @@
       if (e && (e.shiftKey || e.ctrlKey || (e.type === 'click' && e.button !== 0))) {
         return;
       }
+      if (this.pathname === Navigate.path) {
+        e.preventDefault();
+        return;
+      }
       $.addClass(Index.button, 'fa-spin');
       if (Index.isSearching) {
         Index.clearSearch();
@@ -12745,6 +12754,12 @@
       Navigate.title = function() {};
       delete Index.pageNum;
       $.rmAll(Header.hover);
+      if (threadID) {
+        view = 'thread';
+      } else {
+        pageNum = view;
+        view = 'index';
+      }
       path = this.pathname;
       if (this.hash) {
         path += this.hash;
@@ -12753,12 +12768,7 @@
         history.pushState(null, '', path);
       }
       Navigate.path = this.pathname;
-      if (threadID) {
+      Navigate.makeBreadCrumb(this.href, view, boardID, threadID);
-        view = 'thread';
-      } else {
-        pageNum = view;
-        view = 'index';
-      }
       _ref1 = this.dataset, indexMode = _ref1.indexMode, indexSort = _ref1.indexSort;
       if (indexMode && Conf['Index Mode'] !== indexMode) {
         $.set('Index Mode', Conf['Index Mode'] = Index.selectMode.value = indexMode);
@@ -12831,6 +12841,19 @@
         }
       }
     },
+    makeBreadCrumb: function(href, view, boardID, threadID) {
+      var breadCrumb, el;
+      breadCrumb = $.el('span', {
+        className: 'crumb',
+        innerHTML: "<a href=" + href + ">/" + boardID + "/ - " + (view.charAt(0).toUpperCase()) + (view.slice(1)) + (threadID ? " No." + threadID : '') + "</a> &gt; "
+      });
+      $.on(breadCrumb.firstElementChild, 'click', Navigate.navigate);
+      el = Navigate.el;
+      $.add(el, breadCrumb);
+      if (el.children.length > 5) {
+        return $.rm(el.firstChild);
+      }
+    },
     parse: function(data) {
       var OP, board, errors, i, makePost, obj, post, posts, thread, threadRoot;
       posts = [];
@@ -12879,9 +12902,6 @@
     },
     popstate: function() {
       var a;
-      if (window.location.pathname === Navigate.path) {
-        return;
-      }
       a = $.el('a', {
         href: window.location,
         id: 'popState'

builds/crx/script.js

@@ -1,6 +1,6 @@
 // Generated by CoffeeScript
 /*
-* 4chan X - Version 1.4.1 - 2014-03-03
+* 4chan X - Version 1.4.1 - 2014-03-06
 *
 * Licensed under the MIT license.
 * https://github.com/Spittie/4chan-x/blob/master/LICENSE
@@ -12553,9 +12553,14 @@
         return;
       }
       $.ready(function() {
-        return $.on(window, 'popstate', Navigate.popstate);
+        $.on(window, 'popstate', Navigate.popstate);
+        Navigate.makeBreadCrumb(window.location, g.VIEW, g.BOARD.ID, g.THREADID);
+        return $.add(Index.navLinks, Navigate.el);
       });
       this.title = function() {};
+      this.el = $.el('div', {
+        id: 'breadCrumb'
+      });
       Thread.callbacks.push({
         name: 'Navigate',
         cb: this.thread
@@ -12745,6 +12750,10 @@
       if (e && (e.shiftKey || e.ctrlKey || (e.type === 'click' && e.button !== 0))) {
         return;
       }
+      if (this.pathname === Navigate.path) {
+        e.preventDefault();
+        return;
+      }
       $.addClass(Index.button, 'fa-spin');
       if (Index.isSearching) {
         Index.clearSearch();
@@ -12759,6 +12768,12 @@
       Navigate.title = function() {};
       delete Index.pageNum;
       $.rmAll(Header.hover);
+      if (threadID) {
+        view = 'thread';
+      } else {
+        pageNum = view;
+        view = 'index';
+      }
       path = this.pathname;
       if (this.hash) {
         path += this.hash;
@@ -12767,12 +12782,7 @@
         history.pushState(null, '', path);
       }
       Navigate.path = this.pathname;
-      if (threadID) {
+      Navigate.makeBreadCrumb(this.href, view, boardID, threadID);
-        view = 'thread';
-      } else {
-        pageNum = view;
-        view = 'index';
-      }
       _ref1 = this.dataset, indexMode = _ref1.indexMode, indexSort = _ref1.indexSort;
       if (indexMode && Conf['Index Mode'] !== indexMode) {
         $.set('Index Mode', Conf['Index Mode'] = Index.selectMode.value = indexMode);
@@ -12845,6 +12855,19 @@
         }
       }
     },
+    makeBreadCrumb: function(href, view, boardID, threadID) {
+      var breadCrumb, el;
+      breadCrumb = $.el('span', {
+        className: 'crumb',
+        innerHTML: "<a href=" + href + ">/" + boardID + "/ - " + (view.charAt(0).toUpperCase()) + (view.slice(1)) + (threadID ? " No." + threadID : '') + "</a> &gt; "
+      });
+      $.on(breadCrumb.firstElementChild, 'click', Navigate.navigate);
+      el = Navigate.el;
+      $.add(el, breadCrumb);
+      if (el.children.length > 5) {
+        return $.rm(el.firstChild);
+      }
+    },
     parse: function(data) {
       var OP, board, errors, i, makePost, obj, post, posts, thread, threadRoot;
       posts = [];
@@ -12893,9 +12916,6 @@
     },
     popstate: function() {
       var a;
-      if (window.location.pathname === Navigate.path) {
-        return;
-      }
       a = $.el('a', {
         href: window.location,
         id: 'popState'

src/General/Navigate.coffee

@@ -6,8 +6,13 @@ Navigate =
     $.ready ->
       # blink/webkit throw a popstate on page load. Not what we want.
       $.on window, 'popstate', Navigate.popstate
+      Navigate.makeBreadCrumb window.location, g.VIEW, g.BOARD.ID, g.THREADID
+      $.add Index.navLinks, Navigate.el
 
     @title = -> return
+    
+    @el = $.el 'div',
+      id: 'breadCrumb'
 
     Thread.callbacks.push
       name: 'Navigate'
@@ -155,6 +160,9 @@ Navigate =
   navigate: (e) ->
     return if @hostname isnt 'boards.4chan.org' or window.location.hostname is 'rs.4chan.org'
     return if e and (e.shiftKey or e.ctrlKey or (e.type is 'click' and e.button isnt 0)) # Not simply a left click
+    if @pathname is Navigate.path
+      e.preventDefault()
+      return
 
     $.addClass Index.button, 'fa-spin'
     Index.clearSearch() if Index.isSearching
@@ -168,17 +176,19 @@ Navigate =
     delete Index.pageNum
     $.rmAll Header.hover
 
+    if threadID
+      view = 'thread'
+    else
+      pageNum = view
+      view = 'index' # path is "/boardID/". See the problem?
+
     path = @pathname
     path += @hash if @hash
 
     history.pushState null, '', path unless @id is 'popState'
     Navigate.path = @pathname
 
-    if threadID
+    Navigate.makeBreadCrumb @href, view, boardID, threadID
-      view = 'thread'
-    else
-      pageNum = view
-      view = 'index' # path is "/boardID/". See the problem?
 
     {indexMode, indexSort} = @dataset
     if indexMode and Conf['Index Mode'] isnt indexMode
@@ -245,6 +255,17 @@ Navigate =
         new Notice 'error', 'Navigation Failed.', 2
       return
 
+  makeBreadCrumb: (href, view, boardID, threadID) ->
+    breadCrumb = $.el 'span',
+      className: 'crumb'
+      innerHTML: "<a href=#{href}>/#{boardID}/ - #{view.charAt(0).toUpperCase()}#{view.slice 1}#{if threadID then " No.#{threadID}" else ''}</a> &gt; "
+
+    $.on breadCrumb.firstElementChild, 'click', Navigate.navigate
+
+    {el} = Navigate
+    $.add el, breadCrumb
+    $.rm el.firstChild if el.children.length > 5
+
   parse: (data) ->
     posts      = []
     errors     = null
@@ -287,7 +308,6 @@ Navigate =
     Main.handleErrors errors if errors
 
   popstate: ->
-    return if window.location.pathname is Navigate.path
     a = $.el 'a',
       href: window.location
       id:   'popState'