Use new item picker for inventory manipulations

src/coffee/controllers/craft_page_controller.coffee

@@ -31,6 +31,7 @@ module.exports = class CraftPageController extends PageController
         super options
 
         @imageLoader = options.imageLoader
+        @modPack     = options.modPack
         @storage     = options.storage
 
     # Event Methods ################################################################################
@@ -56,6 +57,7 @@ module.exports = class CraftPageController extends PageController
             editable:     true
             icon:         '/images/fishing_rod.png'
             imageLoader:  @imageLoader
+            isAcceptable: (item)-> item.isCraftable
             model:        @model.plan.want
             modPack:      @model.modPack
             onChange:     => @_updateLocation()
@@ -67,7 +69,6 @@ module.exports = class CraftPageController extends PageController
             model:       @model.plan.have
             modPack:     @model.modPack
             onChange:    => @_saveHaveInventory()
-            nameFinder:  new NameFinder @model.modPack, includeGatherable:true
             title:       'Items you have'
 
         @needController = @addChild InventoryController, '.need',

src/coffee/controllers/inventory_controller.coffee

@@ -6,12 +6,13 @@ All rights reserved.
 ###
 
 BaseController         = require './base_controller'
+ImageLoader            = require './image_loader'
+ItemSelectorController = require './item_selector_controller'
+NameFinder             = require '../models/name_finder'
+StackController        = require './stack_controller'
 {Duration}             = require '../constants'
 {Event}                = require '../constants'
 {Key}                  = require '../constants'
-ImageLoader     = require './image_loader'
-NameFinder      = require '../models/name_finder'
-StackController = require './stack_controller'
 
 ########################################################################################################################
 
@@ -29,8 +30,8 @@ module.exports = class InventoryController extends BaseController
         @editable     = options.editable     ?= true
         @icon         = options.icon         ?= '/images/chest_front.png'
         @imageLoader  = options.imageLoader
+        @isAcceptable = options.isAcceptable ?= null
         @modPack      = options.modPack
-        @nameFinder  = options.nameFinder  ?= new NameFinder options.modPack
         @onChange     = options.onChange     ?= -> # do nothing
         @title        = options.title        ?= 'Inventory'
 
@@ -43,59 +44,25 @@ module.exports = class InventoryController extends BaseController
 
     # Event Methods ################################################################################
 
-    onAddButtonClicked: ->
-        if @$nameField.val().trim().length is 0
-            @$nameField.focus()
-            return
-
-        item = @modPack.findItemByName @$nameField.val()
-        return unless item?
-
-        @model.add item.slug, 1
-        @$nameField.val ''
-
-        @$scrollbox.scrollTop @$scrollbox.prop 'scrollHeight'
-        @$nameField.autocomplete 'close'
-
-        @onChange()
-
     onClearButtonClicked: ->
         @model.clear()
         @onChange()
 
-    onItemSelected: ->
+    onItemChosen: (itemSlug)->
-        func = =>
+        @model.add itemSlug, 1
-            @onNameFieldChanged()
+        @onChange()
-            @onAddButtonClicked()
-            @$nameField.blur()
-
-        setTimeout func, 10 # needed to allow the autocomplete to finish
-        return true
-
-    onNameFieldBlur: ->
-        item = @modPack.findItemByName @$nameField.val()
-        @$nameField.val if item? then item.name else ''
-        @onNameFieldChanged()
-
-    onNameFieldChanged: ->
-        @_refreshButtonState()
-
-    onNameFieldFocused: ->
-        @$nameField.val ''
-        @$nameField.autocomplete 'search'
-
-    onNameFieldKeyUp: (event)->
-        if event.which is Key.Return
-            @onAddButtonClicked()
 
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @$addButton     = @$('button[name="add"]')
+        @selector = @addChild ItemSelectorController, '.view__item_selector',
+            isAcceptable: @isAcceptable
+            modPack:      @modPack,
+            onChoseItem:  (itemSlug)=> @onItemChosen(itemSlug)
+
         @$clearButton   = @$('button[name="clear"]')
         @$icon          = @$('.icon')
         @$editPanel     = @$('.edit')
-        @$nameField     = @$('input[name="name"]')
         @$scrollbox     = @$('.scrollbox')
         @$table         = @$('table')
         @$toolbar       = @$('.toolbar')
@@ -118,7 +85,6 @@ module.exports = class InventoryController extends BaseController
         @$title.html @title
 
         @_refreshStacks()
-        @_refreshNameAutocomplete()
         @_refreshButtonState()
 
         super
@@ -127,35 +93,13 @@ module.exports = class InventoryController extends BaseController
 
     events: ->
         return _.extend super,
-            'blur input[name="name"]':    'onNameFieldBlur'
-            'click button[name="add"]':   'onAddButtonClicked'
             'click button[name="clear"]': 'onClearButtonClicked'
-            'focus input[name="name"]':   'onNameFieldFocused'
-            'input input[name="name"]':   'onNameFieldChanged'
-            'keyup input[name="name"]':   'onNameFieldKeyUp'
 
     # Private Methods ##############################################################################
 
     _refreshButtonState: ->
         if @model.isEmpty then @$clearButton.attr('disabled', 'disabled') else @$clearButton.removeAttr('disabled')
 
-        noText        = @$nameField.val().trim().length is 0
-        itemValid     = @modPack.findItemByName(@$nameField.val())?
-        disable       = not (itemValid or noText)
-        if disable then @$addButton.attr('disabled', 'disabled') else @$addButton.removeAttr('disabled')
-
-    _refreshNameAutocomplete: ->
-        onChanged = => @onNameFieldChanged()
-        onSelected = => @onItemSelected()
-
-        @$nameField.autocomplete
-            source:    (request, callback)=> callback @nameFinder.search request.term
-            delay:     0
-            minLength: 0
-            change:    onChanged
-            close:     onChanged
-            select:    onSelected
-
     _refreshStacks: ->
         @_stackControllers ?= []
         index = 0

src/coffee/controllers/item_selector_controller.coffee

@@ -18,7 +18,8 @@ module.exports = class ItemSelectorController extends BaseController
 
     constructor: (options)->
         if not options.modPack? then throw new Error 'options.modPack is required'
-        options.model        ?= new ItemSelector {}, modPack:options.modPack
+        options.isAcceptable ?= null
+        options.model        ?= new ItemSelector {}, modPack:options.modPack, isAcceptable:options.isAcceptable
         options.onChoseItem  ?= (item)-> # do nothing
         options.templateName  = 'item_selector'
         super options
@@ -66,6 +67,7 @@ module.exports = class ItemSelectorController extends BaseController
         @$popup.on Event.click, (event)=> @onPopupClicked(event)
         @$popup.removeClass 'hiding'
 
+        @$hintField.off 'keyup input'
         @$hintField.on 'keyup', (event)=> @onHintKeyPress(event)
         @$hintField.on 'input', (event)=> @onHintChanged(event)
 
@@ -111,6 +113,11 @@ module.exports = class ItemSelectorController extends BaseController
         @_refreshResults()
         super
 
+    render: ->
+        $buttonContent = @$el.html()
+        super
+        @$el.html $buttonContent
+
     # Backbone.View Overrides ######################################################################
 
     events: ->
@@ -134,6 +141,7 @@ module.exports = class ItemSelectorController extends BaseController
         @$popup.one Event.transitionEnd, =>
             @$screen.css 'display', 'none'
             @$popup.detach()
+            @model.hint = ''
 
     _refreshResults: ->
         index = 0

src/coffee/main.coffee

@@ -43,7 +43,9 @@ client.onStatusChanged = (c, oldStatus, newStatus)->
     logger.info "Crafting Guide server status changed from #{oldStatus} to #{newStatus}"
     client.trigger 'change:status', client, oldStatus, newStatus
     client.trigger 'change', client
-client.checkStatus()
+
+# Disabled until required by some feature -- andrewminer 2015-04-06
+# client.checkStatus()
 
 global.router   = new CraftingGuideRouter client:client
 global.util     = require 'util'
@@ -53,7 +55,9 @@ global.markdown = global.markdown.markdown
 global.feedbackController = new FeedbackController el:'.view__feedback'
 feedbackController.render()
 
-global.router.loadCurrentUser()
+# Disabled until required by some feature. -- andrewminer 2015-04-06
+# global.router.loadCurrentUser()
+
 global.router.loadDefaultModPack()
 
 logger.info -> "CraftingGuide is ready"

src/coffee/models/item_selector.coffee

@@ -14,9 +14,10 @@ module.exports = class ItemSelector extends BaseModel
 
     constructor: (attributes={}, options={})->
         if not options.modPack? then throw new Error 'options.modPack is required'
-
+        options.isAcceptable ?= (itemSlug)-> return true # accept everything by default
         super attributes, options
 
+        @_isAcceptable  = options.isAcceptable
         @_maxResults    = 100
         @_minHintLength = 3
         @_modPack       = options.modPack
@@ -46,7 +47,7 @@ module.exports = class ItemSelector extends BaseModel
 
     # Private Methods ##############################################################################
 
-    _isMatch: (name)->
+    _isMatch: (name, itemSlug)->
         hintIndex  = 0
         hintLetter = @_hint[hintIndex]
         name       = name.toLowerCase()
@@ -54,7 +55,10 @@ module.exports = class ItemSelector extends BaseModel
         for nameIndex in [0...name.length] by 1
             if name.charAt(nameIndex) is hintLetter
                 hintIndex += 1
-                return true if hintIndex is @_hint.length
+                if hintIndex is @_hint.length
+                    item = @_modPack.findItem itemSlug
+                    return false unless item?
+                    return @_isAcceptable item
                 hintLetter = @_hint[hintIndex]
 
         return false
@@ -68,11 +72,12 @@ module.exports = class ItemSelector extends BaseModel
         if @_hint.length >= @_minHintLength
             @_modPack.eachMod (mod)=>
                 return if count >= @_maxResults
+                return unless mod.enabled
 
                 mod.eachName (name, itemSlug)=>
                     return if count >= @_maxResults
 
-                    if @_isMatch name
+                    if @_isMatch name, itemSlug
                         if itemSlug.isQualified
                             newResults[itemSlug] = itemSlug
                             count += 1

src/jade/includes/_header.jade

@@ -30,4 +30,4 @@
             p Craft
             .dot
 
-        .view__item_selector
+        .view__item_selector: p.placeholder find an item...

src/jade/templates/inventory.jade

@@ -13,9 +13,6 @@
         .scrollbox
             table
                 tr.edit.hideable.hidden
-                    td.quantity
+                    td.name(colspan="4", width="*"): .view__item_selector: p.button-label add an item...
-                    td.icon
-                    td.name(width="*"): input(name="name")
-                    td.action: button(name="add") add
         .toolbar.hideable.hidden
             button(name="clear") clear

src/scss/templates/inventory.scss

@@ -31,6 +31,18 @@ All rights reserved.
         border-top: 1px solid $color-gray-light;
     }
 
+    .view__item_selector {
+        height: 2.5em; width: 80%;
+        background: $color-gray-faint;
+        margin: 0 auto;
+
+        transition: background $animate-normal;
+
+        &:hover {
+            background: $color-background-panel;
+        }
+    }
+
     button[name="clear"] {
         position: absolute; bottom: 0.5em; right: 0.5em;
     }

src/scss/templates/item_selector.scss

@@ -12,14 +12,24 @@ All rights reserved.
     cursor: pointer;
     padding: 0 0.75em;
 
-    p.placeholder {
+    p {
         position: relative; top: 50%; width: 100%;
         @include transform(translateY(-50%));
 
+        &.placeholder {
             color: $color-gray-medium;
             font-family: $font-family-input;
             font-size: $font-size-normal;
         }
+
+        &.button-label {
+            color: $color-active;
+            font-family: $font-family-normal;
+            font-size: $font-size-normal;
+            font-weight: bold;
+            text-align: center;
+        }
+    }
 }
 
 .view__item_selector_popup {

src/scss/templates/item_selector_element.scss

@@ -6,8 +6,8 @@ All rights reserved.
 */
 
 .view__item_selector_element {
-    height: 3.6em;
+    height: 4.0em;
-    padding: 0.3em 1em;
+    padding: 0.2em 1em;
     clear: both;
 
     transition: background $animate-fast, color $animate-fast;