Add a "Random Item" link to the breadcrumb bar

fixes #216

src/client/models/game/mod.coffee

@@ -93,6 +93,12 @@ module.exports = class Mod extends BaseModel
 
     # Item Methods #################################################################################
 
+    chooseRandomItem: ->
+        effectiveModVersion = @_activeModVersion or @getModVersion Mod.Version.Latest
+        return null unless effectiveModVersion?
+
+        return effectiveModVersion.chooseRandomItem()
+
     eachItem: (callback)->
         effectiveModVersion = @_activeModVersion or @getModVersion Mod.Version.Latest
         effectiveModVersion.eachItem callback

src/client/models/game/mod_pack.coffee

@@ -25,6 +25,12 @@ module.exports = class ModPack extends BaseModel
 
     # Item Methods #################################################################################
 
+    chooseRandomItem: ->
+        return null unless @_mods.length > 0
+
+        modIndex = Math.floor Math.random() * @_mods.length
+        return @_mods[modIndex].chooseRandomItem()
+
     findItem: (itemSlug, options={})->
         options.includeDisabled ?= false
 

src/client/models/game/mod_version.coffee

@@ -59,6 +59,10 @@ module.exports = class ModVersion extends BaseModel
         return null if result.length is 0
         return result
 
+    chooseRandomItem: ->
+        itemIndex = Math.floor Math.random() * @_slugs.length
+        return @_slugs[itemIndex]
+
     eachItem: (callback)->
         for slug in @_slugs
             item = @findItem slug

src/client/site/header/header.jade

@@ -21,4 +21,6 @@
         .button.search: .bezel: p Search
         .button.login: .bezel: p Login
 
-    .breadcrumbs
+    .breadcrumb-bar
+        .breadcrumbs
+        .extra-nav

src/client/site/header/header.scss

@@ -15,10 +15,6 @@
         display     : flex;
         align-items : center;
 
-        @include screen-size(mobile) {
-            display : none;
-        }
-
         a {
             flex         : 0 0 auto;
             height       : $size-minecraft-block * 1.5;
@@ -29,30 +25,15 @@
                 position : relative;
                 height   : $size-minecraft-block * 1.5;
                 width    : $size-minecraft-block * 1.5;
-
-                @include screen-size(desktop) {
-                    top    : -$size-minecraft-block * 0.5;
-                    left   : -$size-minecraft-block * 0.5;
-                    height : $size-minecraft-block * 2.0;
-                    width  : $size-minecraft-block * 2.0;
-                }
             }
         }
 
         h1 {
             flex: 1 1 auto;
             white-space: nowrap;
-
-            @include screen-size(tablet) {
-                font-size : $font-size-xlarge;
-            }
         }
 
         .addthis_sharing_toolbox {
-            @include screen-size(mobile) {
-                display: none;
-            }
-
             flex         : 0 0 auto;
             min-height   : 37px; // actual size of addthis component
             min-width    : 144px;
@@ -97,26 +78,40 @@
         }
     }
 
-    .breadcrumbs {
+    .breadcrumb-bar {
         background: $color-screen;
+        padding: 0 ($size-margin-medium + $size-margin-large);
+
         font-family: $font-family-control;
         font-size: $font-size-medium;
-
-        padding-left: $size-margin-medium + $size-margin-large;
         line-height: $font-size-medium + 2 * $size-margin-small;
-        text-indent: -$size-margin-large;
 
-        &:before {
+        display: flex;
-            content: "⟩";
+
-            margin-right: $size-margin-medium;
+        .breadcrumbs {
+            flex: 1 1 75%;
+
+            text-indent: -$size-margin-large;
+
+            &:before {
+                content: "⟩";
+                margin-right: $size-margin-medium;
+            }
+
+            a {
+                text-decoration: underline;
+            }
+
+            span {
+                margin: 0 $size-margin-medium;
+            }
         }
 
-        a {
+        .extra-nav {
-            text-decoration: underline;
+            flex: 1 1 25%;
-        }
+            align-self: flex-end;
 
-        span {
+            text-align: right;
-            margin: 0 $size-margin-medium;
         }
     }
 }
@@ -157,5 +152,11 @@
                 display: none;
             }
         }
+
+        .breadcrumb-bar {
+            .extra-nav {
+                display: none;
+            }
+        }
     }
 }

src/client/site/header/header_controller.coffee

@@ -64,6 +64,7 @@ module.exports = class HeaderController extends BaseController
             @$('.addthis_sharing_toolbox').addClass 'placeholder'
 
         @$breadcrumbs      = @$('.breadcrumbs')
+        @$extraNav         = @$('.extra-nav')
         @$loginButtonLabel = @$('.button.login p')
         @$title            = $('title')
         super
@@ -77,6 +78,7 @@ module.exports = class HeaderController extends BaseController
         @$loginButtonLabel.text if global.site.user? then "Logout" else "Login"
 
         @_refreshBreadcrumbs()
+        @_refreshExtraNav()
         @_refreshSelectedNavButton()
         @_refreshTitle()
         super
@@ -85,12 +87,12 @@ module.exports = class HeaderController extends BaseController
 
     events: ->
         _.extend super,
-            'click .craft':         'onCraft'
+            'click .craft':            'onCraft'
-            'click .browse':        'onBrowse'
+            'click .browse':           'onBrowse'
-            'click .login':         'onLogin'
+            'click .login':            'onLogin'
-            'click .news':          'onNews'
+            'click .news':             'onNews'
-            'click .search':        'onSearch'
+            'click .search':           'onSearch'
-            'click .breadcrumbs a': 'routeLinkClick'
+            'click .breadcrumb-bar a': 'routeLinkClick'
 
     # Private Methods ##############################################################################
 
@@ -109,6 +111,17 @@ module.exports = class HeaderController extends BaseController
         else
             @hide @$breadcrumbs
 
+    _refreshExtraNav: ->
+        extraNavContent = @model?.controller?.getExtraNav()
+
+        if extraNavContent?
+            @$extraNav.empty()
+            @$extraNav.append extraNavContent
+            @show @$extraNav
+        else
+            @hide @$extraNav
+
+
     _refreshSelectedNavButton: ->
         return unless @model?.page?
 

src/client/site/item_page/item_page_controller.coffee

@@ -68,6 +68,15 @@ module.exports = class ItemPageController extends PageController
             $("<b>#{display.itemName}</b>")
         ]
 
+    getExtraNav: ->
+        console.warn "getExtraNav()"
+        itemSlug = @_modPack.chooseRandomItem()
+        console.warn "    itemSlug: #{itemSlug}"
+        return null unless itemSlug?
+
+        itemDisplay = @_modPack.findItemDisplay itemSlug
+        return $("<a href='#{itemDisplay.itemUrl}'>Random Item</a>")
+
     getMetaDescription: ->
         return null unless @_itemSlug?
         display = @_modPack.findItemDisplay @_itemSlug
@@ -83,6 +92,10 @@ module.exports = class ItemPageController extends PageController
 
     # BaseController Overrides #####################################################################
 
+    onDidModelChange: ->
+        @trigger c.event.change
+        super
+
     onDidRender: ->
         options                      = imageLoader:@_imageLoader, modPack:@_modPack, router:@_router, show:false
         @_multiblockController       = @addChild MultiblockViewerController, '.view__multiblock_viewer', options

src/client/site/page_controller.coffee

@@ -19,6 +19,10 @@ module.exports = class PageController extends BaseController
     getBreadcrumbs: ->
         return []
 
+    getExtraNav: ->
+        # subclasses may override this to provide extra content in the right-hand side of the breadcrumb bar
+        return null
+
     getMetaDescription: ->
         # subclasses should override this to return the page-specific text for the meta description tag
         return null