Implement a silly breadcrumb for JSON Navigation

2014-03-06 09:49:36 -07:00 · 2014-03-06 09:49:36 -07:00 · 1d56914bcb
commit 1d56914bcb
parent 63b0f2a9fa
4 changed files with 89 additions and 29 deletions
--- a/2
+++ b/2
@ -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
--- a/builds/4chan-X.user.js
+++ b/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) {
-        view = 'thread';
-      } else {
-        pageNum = view;
-        view = 'index';
-      }
+      Navigate.makeBreadCrumb(this.href, view, boardID, threadID);
      _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'
--- a/builds/crx/script.js
+++ b/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) {
-        view = 'thread';
-      } else {
-        pageNum = view;
-        view = 'index';
-      }
+      Navigate.makeBreadCrumb(this.href, view, boardID, threadID);
      _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'
--- a/src/General/Navigate.coffee
+++ b/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
-      view = 'thread'
-    else
-      pageNum = view
-      view = 'index' # path is "/boardID/". See the problem?
+    Navigate.makeBreadCrumb @href, view, boardID, threadID

    {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'