Refactor mod version selector to a control

src/client/site/common/mod_version_selector/mod_version_selector.jade

@@ -0,0 +1,10 @@
+.view__mod_version_selector
+    .toggle
+        span.checkbox
+        span.label I have this mod in my modpack
+    .version
+        span I'm using version:
+        select
+    .warning.
+        <b>PLEASE NOTE:</b> By selecting "no", crafting plans, search, and other features will ignore items
+        and recipes from this mod.

src/client/site/common/mod_version_selector/mod_version_selector.scss

@@ -0,0 +1,78 @@
+//
+// Crafting Guide - mod_version_selector.scss
+//
+// Copyright © 2014-2016 by Redwood Labs
+// All rights reserved.
+//
+
+.view__mod_version_selector {
+    .toggle {
+        cursor      : pointer;
+        font-family : $font-family-control;
+        font-size   : $font-size-medium;
+
+        display : flex;
+
+        .checkbox {
+            display      : inline-block;
+            height       : $font-size-medium;
+            margin-right : $size-margin-small;
+            position     : relative;
+            width        : $font-size-medium;
+
+            background : $color-white;
+            border     : $size-border-small solid $color-black;
+        }
+
+        .label {
+            color: $color-gray-medium;
+        }
+
+        &.enabled {
+            .checkbox:before {
+                position: absolute; top: 0; left: 1.5px; // adjust for glyph position
+                content: "✕";
+            }
+
+            .label {
+                color: $color-black;
+            }
+        }
+    }
+
+    .version {
+        margin-top: $size-margin-medium;
+
+        font-family: $font-family-control;
+        font-size: $font-size-medium;
+
+        display: flex;
+        align-items: baseline;
+
+        span {
+            flex: 0 0 auto;
+
+            margin-right: $size-margin-medium;
+        }
+
+        select {
+            flex: 1 1 100%;
+
+            font-family: $font-family-control;
+            font-size: $font-size-medium;
+        }
+    }
+
+    .warning {
+        margin-top: $size-margin-medium;
+
+        color: $color-error;
+        font-family: $font-family-text;
+        font-size: $font-size-small;
+        line-height: $font-size-small * 1.25;
+
+        b {
+            font-weight: bold;
+        }
+    }
+}

src/client/site/common/mod_version_selector/mod_version_selector_controller.coffee

@@ -0,0 +1,101 @@
+#
+# Crafting Guide - mod_version_selector.coffee
+#
+# Copyright © 2014-2016 by Redwood Labs
+# All rights reserved.
+#
+
+BaseController = require '../../base_controller'
+Mod            = require '../../../models/game/mod'
+
+########################################################################################################################
+
+module.exports = class ModVersionSelectorController extends BaseController
+
+    constructor: (options={})->
+        if not options.model? then throw new Error 'options.model is required'
+        options.templateName = 'common/mod_version_selector'
+        super options
+
+    # Event Methods ################################################################################
+
+    onToggleEnabled: ->
+        if @model.activeVersion is Mod.Version.None
+            tracker.trackEvent c.tracking.category.modPack, 'toggle-on', @model.slug
+            @model.activeVersion = Mod.Version.Latest
+        else
+            tracker.trackEvent c.tracking.category.modPack, 'toggle-off', @model.slug
+            @model.activeVersion = Mod.Version.None
+
+        return false
+
+    onVersionChanged: ->
+        @model.activeVersion = @$versionSelector.val()
+        tracker.trackEvent c.tracking.category.modPack, 'select-version', "#{@model.slug}@#{@model.activeVersion}"
+        return false
+
+    # Property Methods #############################################################################
+
+    Object.defineProperties @prototype,
+
+        effectiveModVersion:
+            get: ->
+                modVersion = @model.activeModVersion
+                modVersion ?= @model.getModVersion Mod.Version.Latest
+                modVersion.fetch() if modVersion?
+                return modVersion
+
+    # BaseController Overrides #####################################################################
+
+    onDidRender: ->
+        @$toggleSection   = @$('.toggle')
+        @$versionSection  = @$('.version')
+        @$versionSelector = @$('.version select')
+        @$warning         = @$('.warning')
+        super
+
+    refresh: ->
+        @_refreshEnabled()
+        @_refreshVersionSelector()
+        super
+
+    # Backbone.View Overrides ######################################################################
+
+    events: ->
+        return _.extend super,
+            'change .version select': 'onVersionChanged'
+            'click .toggle':         'onToggleEnabled'
+
+    # Private Methods ##############################################################################
+
+    _refreshEnabled: ->
+        if @model.slug in c.requiredMods
+            @hide @$toggleSection
+        else
+            @show @$toggleSection
+
+        if @model.activeVersion is Mod.Version.None
+            @$toggleSection.removeClass 'enabled'
+            @show @$warning
+        else
+            @$toggleSection.addClass 'enabled'
+            @hide @$warning
+
+    _refreshVersionSelector: ->
+        modVersions = @model.modVersions
+
+        if (@model.activeVersion is Mod.Version.None) or modVersions.length < 2
+            @hide @$versionSection
+        else
+            @show @$versionSection
+
+        selectedModVersion = @effectiveModVersion
+
+        @$versionSelector.empty()
+
+        for modVersion in @model.modVersions
+            $option = $("<option value=\"#{modVersion.version}\">#{modVersion.version}</option>")
+            if modVersion is selectedModVersion
+                $option.attr 'selected', 'true'
+            @$versionSelector.append $option
+        @$versionSelector.css display:''

src/client/site/mod_page/mod_page.jade

@@ -17,15 +17,7 @@
                 .title
                 .author
                 .description
-                .modpack
+                .view__mod_version_selector
-                    span.checkbox
-                    span.label I have this mod in my modpack
-                .version
-                    span I'm using version:
-                    select
-                .warning.
-                    <b>PLEASE NOTE:</b> By selecting "no", crafting plans, search, and other features will ignore items
-                    and recipes from this mod.
             .right
                 p Official Links:
                 a.homePage(target="home-page") project page

src/client/site/mod_page/mod_page.scss

@@ -1,5 +1,5 @@
 //
-// Crafting Guide - item_page.scss
+// Crafting Guide - mod_page.scss
 //
 // Copyright © 2014-2016 by Redwood Labs
 // All rights reserved.
@@ -49,76 +49,8 @@
                 line-height: $font-size-medium * 1.25;
             }
 
-            .modpack {
+            .view__mod_version_selector {
                 margin-top : $size-margin-large;
-
-                cursor      : pointer;
-                font-family : $font-family-control;
-                font-size   : $font-size-medium;
-
-                display : flex;
-
-                .checkbox {
-                    display      : inline-block;
-                    height       : $font-size-medium;
-                    margin-right : $size-margin-small;
-                    position     : relative;
-                    width        : $font-size-medium;
-
-                    background : $color-white;
-                    border     : $size-border-small solid $color-black;
-                }
-
-                .label {
-                    color: $color-gray-medium;
-                }
-
-                &.enabled {
-                    .checkbox:before {
-                        position: absolute; top: 0; left: 1.5px; // adjust for glyph position
-                        content: "✕";
-                    }
-
-                    .label {
-                        color: $color-black;
-                    }
-                }
-            }
-
-            .version {
-                margin-top: $size-margin-medium;
-
-                font-family: $font-family-control;
-                font-size: $font-size-medium;
-
-                display: flex;
-                align-items: baseline;
-
-                span {
-                    flex: 0 0 auto;
-
-                    margin-right: $size-margin-medium;
-                }
-
-                select {
-                    flex: 1 1 100%;
-
-                    font-family: $font-family-control;
-                    font-size: $font-size-medium;
-                }
-            }
-
-            .warning {
-                margin-top: $size-margin-medium;
-
-                color: $color-error;
-                font-family: $font-family-text;
-                font-size: $font-size-small;
-                line-height: $font-size-small * 1.25;
-
-                b {
-                    font-weight: bold;
-                }
             }
         }
 

src/client/site/mod_page/mod_page_controller.coffee

@@ -5,11 +5,12 @@
 # All rights reserved.
 #
 
-PageController      = require '../page_controller'
+PageController               = require '../page_controller'
-Item                = require '../../models/game/item'
+Item                         = require '../../models/game/item'
-ItemGroupController = require '../common/item_group/item_group_controller'
+ItemGroupController          = require '../common/item_group/item_group_controller'
-Mod                 = require '../../models/game/mod'
+Mod                          = require '../../models/game/mod'
-TutorialController  = require './tutorial/tutorial_controller'
+ModVersionSelectorController = require '../common/mod_version_selector/mod_version_selector_controller'
+TutorialController           = require './tutorial/tutorial_controller'
 
 ########################################################################################################################
 
@@ -26,23 +27,6 @@ module.exports = class ModPageController extends PageController
         @_modPack     = options.modPack
         @_router      = options.router
 
-    # Event Methods ################################################################################
-
-    onToggleEnabled: ->
-        if @model.activeVersion is Mod.Version.None
-            tracker.trackEvent c.tracking.category.modPack, 'toggle-on', @model.slug
-            @model.activeVersion = Mod.Version.Latest
-        else
-            tracker.trackEvent c.tracking.category.modPack, 'toggle-off', @model.slug
-            @model.activeVersion = Mod.Version.None
-
-        return false
-
-    onVersionChanged: ->
-        @model.activeVersion = @$versionSelector.val()
-        tracker.trackEvent c.tracking.category.modPack, 'select-version', "#{@model.slug}@#{@model.activeVersion}"
-        return false
-
     # Property Methods #############################################################################
 
     Object.defineProperties @prototype,
@@ -68,6 +52,8 @@ module.exports = class ModPageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
+        @modVersionSelector = @addChild ModVersionSelectorController, '.view__mod_version_selector', model:@model
+
         @$author             = @$('.about .author')
         @$description        = @$('.about .description')
         @$documentationLink  = @$('.about .documentation')
@@ -75,29 +61,21 @@ module.exports = class ModPageController extends PageController
         @$homePageLink       = @$('.about .homePage')
         @$itemGroups         = @$(".itemGroups")
         @$logo               = @$('.about img')
-        @$modpackSection     = @$('.modpack')
         @$title              = @$('.about .title')
         @$tutorialsContainer = @$('section.tutorials .panel')
         @$tutorialsSection   = @$('section.tutorials')
-        @$versionSection     = @$('.version')
-        @$versionSelector    = @$('.version select')
-        @$warning            = @$('.warning')
         super
 
     refresh: ->
         @_refreshAboutBlock()
-        @_refreshEnabled()
         @_refreshItemGroups()
         @_refreshTutorials()
-        @_refreshVersionSelector()
         super
 
     # Backbone.View Overrides ######################################################################
 
     events: ->
         return _.extend super,
-            'change .version select': 'onVersionChanged'
-            'click .modpack':         'onToggleEnabled'
             'click .about .right a':  'routeLinkClick'
 
     # Private Methods ##############################################################################
@@ -120,19 +98,6 @@ module.exports = class ModPageController extends PageController
             @$logo.attr 'src', ''
             @$title.text ''
 
-    _refreshEnabled: ->
-        if @model.slug in c.requiredMods
-            @hide @$modpackSection
-        else
-            @show @$modpackSection
-
-        if @model.activeVersion is Mod.Version.None
-            @$modpackSection.removeClass 'enabled'
-            @show @$warning
-        else
-            @$modpackSection.addClass 'enabled'
-            @hide @$warning
-
     _refreshItemGroups: ->
         @_groupControllers ?= []
         groupIndex = 0
@@ -187,22 +152,3 @@ module.exports = class ModPageController extends PageController
             @show @$tutorialsSection
         else
             @hide @$tutorialsSection
-
-    _refreshVersionSelector: ->
-        modVersions = @model.modVersions
-
-        if (@model.activeVersion is Mod.Version.None) or modVersions.length < 2
-            @hide @$versionSection
-        else
-            @show @$versionSection
-
-        selectedModVersion = @effectiveModVersion
-
-        @$versionSelector.empty()
-
-        for modVersion in @model.modVersions
-            $option = $("<option value=\"#{modVersion.version}\">#{modVersion.version}</option>")
-            if modVersion is selectedModVersion
-                $option.attr 'selected', 'true'
-            @$versionSelector.append $option
-        @$versionSelector.css display:''