diff --git a/src/client/site/common/mod_version_selector/mod_version_selector.jade b/src/client/site/common/mod_version_selector/mod_version_selector.jade
new file mode 100644
index 000000000..6d268d0f2
--- /dev/null
+++ b/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.
+ PLEASE NOTE: By selecting "no", crafting plans, search, and other features will ignore items
+ and recipes from this mod.
diff --git a/src/client/site/common/mod_version_selector/mod_version_selector.scss b/src/client/site/common/mod_version_selector/mod_version_selector.scss
new file mode 100644
index 000000000..a635d6339
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/client/site/common/mod_version_selector/mod_version_selector_controller.coffee b/src/client/site/common/mod_version_selector/mod_version_selector_controller.coffee
new file mode 100644
index 000000000..4c8a8c20f
--- /dev/null
+++ b/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 = $("")
+ if modVersion is selectedModVersion
+ $option.attr 'selected', 'true'
+ @$versionSelector.append $option
+ @$versionSelector.css display:''
diff --git a/src/client/site/mod_page/mod_page.jade b/src/client/site/mod_page/mod_page.jade
index 6451171f5..957aa5fb0 100644
--- a/src/client/site/mod_page/mod_page.jade
+++ b/src/client/site/mod_page/mod_page.jade
@@ -17,15 +17,7 @@
.title
.author
.description
- .modpack
- span.checkbox
- span.label I have this mod in my modpack
- .version
- span I'm using version:
- select
- .warning.
- PLEASE NOTE: By selecting "no", crafting plans, search, and other features will ignore items
- and recipes from this mod.
+ .view__mod_version_selector
.right
p Official Links:
a.homePage(target="home-page") project page
diff --git a/src/client/site/mod_page/mod_page.scss b/src/client/site/mod_page/mod_page.scss
index 0f059d5ab..13be8004b 100644
--- a/src/client/site/mod_page/mod_page.scss
+++ b/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;
- }
}
}
diff --git a/src/client/site/mod_page/mod_page_controller.coffee b/src/client/site/mod_page/mod_page_controller.coffee
index 3bc5ce730..fbe13d48a 100644
--- a/src/client/site/mod_page/mod_page_controller.coffee
+++ b/src/client/site/mod_page/mod_page_controller.coffee
@@ -5,11 +5,12 @@
# All rights reserved.
#
-PageController = require '../page_controller'
-Item = require '../../models/game/item'
-ItemGroupController = require '../common/item_group/item_group_controller'
-Mod = require '../../models/game/mod'
-TutorialController = require './tutorial/tutorial_controller'
+PageController = require '../page_controller'
+Item = require '../../models/game/item'
+ItemGroupController = require '../common/item_group/item_group_controller'
+Mod = require '../../models/game/mod'
+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 = $("")
- if modVersion is selectedModVersion
- $option.attr 'selected', 'true'
- @$versionSelector.append $option
- @$versionSelector.css display:''