First real version of item detail page
* Split the InventoryTable view/controller out from the existing inventory view/controller. This is a simpler component which only includes the table itself, and not the scrollbox, panel or header used on the crafting page. * Create the FullRecipe view/controller to represent the expanded version of a recipe shown on the item page (as compared to the terser version on the crafting page). * Rename the existing Recipe view/controller to MinimalRecipe to avoid confusing the two. * Refactor the CSS for the Stack view/controller so that it can be shared between the Inventory and InventoryTable views. * Incorporate all these new controllers into the item page and hook up the necessary model logic to drive them.
This commit is contained in:
Andrew Miner
@@ -0,0 +1,183 @@
|
||||
###
|
||||
Crafting Guide - inventory_table_controller.coffee
|
||||
|
||||
Copyright (c) 2014-2015 by Redwood Labs
|
||||
All rights reserved.
|
||||
###
|
||||
|
||||
BaseController = require './base_controller'
|
||||
{Duration} = require '../constants'
|
||||
{Key} = require '../constants'
|
||||
ImageLoader = require './image_loader'
|
||||
NameFinder = require '../models/name_finder'
|
||||
StackController = require './stack_controller'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
module.exports = class InventoryTableController extends BaseController
|
||||
|
||||
@ONLY_DIGITS = /^[0-9]*$/
|
||||
|
||||
constructor: (options={})->
|
||||
if not options.model? then throw new Error 'options.model is required'
|
||||
if not options.modPack? then throw new Error 'options.modPack is required'
|
||||
|
||||
@editable = options.editable ?= true
|
||||
@imageLoader = options.imageLoader ?= new ImageLoader defaultUrl:'/images/unknown.png'
|
||||
@modPack = options.modPack
|
||||
@nameFinder = options.nameFinder ?= new NameFinder options.modPack
|
||||
@onChange = options.onChange ?= -> # do nothing
|
||||
|
||||
options.templateName = 'inventory_table'
|
||||
super options
|
||||
|
||||
@_stackControllers = []
|
||||
|
||||
@listenTo @modPack, 'change', => @refresh()
|
||||
|
||||
# Event Methods ################################################################################
|
||||
|
||||
onAddButtonClicked: ->
|
||||
name = @$nameField.val()
|
||||
return unless @modPack.isValidName name
|
||||
|
||||
@model.add _.slugify(name), parseInt(@$quantityField.val())
|
||||
@$nameField.val ''
|
||||
@$quantityField.val '1'
|
||||
|
||||
@$scrollbox.scrollTop @$scrollbox.prop 'scrollHeight'
|
||||
@$nameField.autocomplete 'close'
|
||||
|
||||
@onChange()
|
||||
|
||||
onClearButtonClicked: ->
|
||||
@model.clear()
|
||||
@onChange()
|
||||
|
||||
onItemSelected: ->
|
||||
func = =>
|
||||
@onNameFieldChanged()
|
||||
@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: ->
|
||||
item = @modPack.findItemByName @$nameField.val()
|
||||
@_updateButtonState()
|
||||
|
||||
onNameFieldFocused: ->
|
||||
@$nameField.val ''
|
||||
@$nameField.autocomplete('search')
|
||||
|
||||
onNameFieldKeyUp: (event)->
|
||||
if event.which is Key.Return
|
||||
@onAddButtonClicked()
|
||||
|
||||
onQuantityFieldBlur: ->
|
||||
value = @$quantityField.val().replace /[^0-9]/g, ''
|
||||
if value.length is 0 then value = '1'
|
||||
value = Math.min value, 64
|
||||
@$quantityField.val value
|
||||
@onQuantityFieldChanged()
|
||||
|
||||
onQuantityFieldChanged: ->
|
||||
if not @$quantityField.val().match /^[0-9]*$/
|
||||
@$quantityField.addClass 'error', 0
|
||||
@$quantityField.addClass 'error-new', 0
|
||||
@$quantityField.removeClass 'error-new', Duration.slow
|
||||
@$quantityField.focus()
|
||||
return
|
||||
|
||||
@$quantityField.removeClass 'error', Duration.fast
|
||||
@$quantityField.removeClass 'error-new', Duration.fast
|
||||
@_updateButtonState()
|
||||
|
||||
onQuantityFieldFocused: ->
|
||||
@$quantityField.val ''
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@$addButton = @$('button[name="add"]')
|
||||
@$clearButton = @$('button[name="clear"]')
|
||||
@$editPanel = @$('.edit')
|
||||
@$nameField = @$('input[name="name"]')
|
||||
@$quantityField = @$('input[name="quantity"]')
|
||||
@$scrollbox = @$('.scrollbox')
|
||||
@$table = @$('table')
|
||||
@$toolbar = @$('.toolbar')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
@$editPanel.css display:(if @editable then 'table-row' else 'none')
|
||||
@$toolbar.css display:(if @editable then 'block' else 'none')
|
||||
@$scrollbox.css bottom:(if @editable then @$toolbar.height() else '0')
|
||||
|
||||
if _.isEmpty(@$quantityField.val()) then @$quantityField.val '1'
|
||||
|
||||
@$table.find('tr:not(:last-child)').remove()
|
||||
$lastRow = @$table.find 'tr:last-child'
|
||||
@_stackControllers = []
|
||||
@model.each (stack)=>
|
||||
options =
|
||||
editable: @editable
|
||||
imageLoader: @imageLoader
|
||||
model: stack
|
||||
modPack: @modPack
|
||||
onRemove: if not @editable then null else (stack)=> @_removeStack(stack)
|
||||
|
||||
controller = new StackController options
|
||||
controller.render()
|
||||
controller.$el.insertBefore $lastRow
|
||||
@_stackControllers.push controller
|
||||
|
||||
@_updateNameAutocomplete()
|
||||
@_updateButtonState()
|
||||
|
||||
super
|
||||
|
||||
# Backbone.View Overrides ######################################################################
|
||||
|
||||
events: ->
|
||||
return _.extend super,
|
||||
'blur input[name="name"]': 'onNameFieldBlur'
|
||||
'blur input[name="quantity"]': 'onQuantityFieldBlur'
|
||||
'click button[name="add"]': 'onAddButtonClicked'
|
||||
'click button[name="clear"]': 'onClearButtonClicked'
|
||||
'focus input[name="name"]': 'onNameFieldFocused'
|
||||
'focus input[name="quantity"]': 'onQuantityFieldFocused'
|
||||
'input input[name="name"]': 'onNameFieldChanged'
|
||||
'input input[name="quantity"]': 'onQuantityFieldChanged'
|
||||
'keyup input[name="name"]': 'onNameFieldKeyUp'
|
||||
|
||||
# Private Methods ##############################################################################
|
||||
|
||||
_removeStack: (stack)->
|
||||
@model.remove stack.slug, stack.quantity
|
||||
|
||||
_updateNameAutocomplete: ->
|
||||
onChanged = => @onNameFieldChanged()
|
||||
onSelected = => @onItemSelected()
|
||||
|
||||
@$nameField.autocomplete
|
||||
source: (request, callback)=> callback @nameFinder.search request.term
|
||||
delay: 0
|
||||
minLength: 0
|
||||
change: onChanged
|
||||
close: onChanged
|
||||
select: onSelected
|
||||
|
||||
_updateButtonState: ->
|
||||
if @model.isEmpty then @$clearButton.attr('disabled', 'disabled') else @$clearButton.removeAttr('disabled')
|
||||
|
||||
itemValid = @modPack.findItemByName(@$nameField.val())?
|
||||
quantityValid = @$quantityField.val().match(InventoryTableController.ONLY_DIGITS)
|
||||
disable = not (itemValid and quantityValid)
|
||||
if disable then @$addButton.attr('disabled', 'disabled') else @$addButton.removeAttr('disabled')
|
||||
Reference in New Issue
Block a user