craftingguide/website
1
0
Fork 0
Code Pull Requests Actions Activity

Refactor mod version selector to a control

Browse Source
This commit is contained in:
Andrew Miner
2017-03-31 20:32:28 -07:00
parent ee6887e803
commit 3d9895a6d5
6 changed files with 200 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/site/common/mod_version_selector/mod_version_selector.jade
+10
View File
@@ -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
+78
View File
@@ -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
+101
View File
@@ -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
+1 -9
View File
@@ -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.
<b>PLEASE NOTE:</b> 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
src/client/site/mod_page/mod_page.scss
+2 -70
View File
@@ -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
+3 -57
View File
@@ -9,6 +9,7 @@ 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 = $("<option value=\"#{modVersion.version}\">#{modVersion.version}</option>")
if modVersion is selectedModVersion
$option.attr 'selected', 'true'
@$versionSelector.append $option
@$versionSelector.css display:''