Refactor mod version selector to a control

2017-03-31 20:32:28 -07:00
parent ee6887e803
commit 3d9895a6d5
6 changed files with 200 additions and 141 deletions
@@ -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.
@@ -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;
+        }
+    }
+}
@@ -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:''