Refactor website with new design & structure
This commit is contained in:
Andrew Miner
@@ -0,0 +1,13 @@
|
||||
//-
|
||||
//- Crafting Guide - inventory.jade
|
||||
//-
|
||||
//- Copyright © 2014-2016 by Redwood Labs
|
||||
//- All rights reserved.
|
||||
//-
|
||||
|
||||
.view__inventory
|
||||
.item_container
|
||||
.empty_placeholder nothing
|
||||
.buttons
|
||||
.button.item-selector: .bezel: p add an item...
|
||||
.button.clear: .bezel: p clear
|
||||
@@ -0,0 +1,93 @@
|
||||
//
|
||||
// Crafting Guide - inventory.scss
|
||||
//
|
||||
// Copyright © 2014-2016 by Redwood Labs
|
||||
// All rights reserved.
|
||||
//
|
||||
|
||||
.view__inventory {
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
|
||||
.empty_placeholder {
|
||||
color : $color-gray-light;
|
||||
font-family : $font-family-text;
|
||||
font-size : $font-size-large;
|
||||
margin : $size-margin-large 0;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.item_container {
|
||||
flex: 0 1 100%;
|
||||
|
||||
display: table;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Editable Variant ////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.view__inventory.editable {
|
||||
.buttons {
|
||||
display : flex;
|
||||
flex-direction : row;
|
||||
|
||||
margin-top: $size-margin-large;
|
||||
|
||||
.item-selector {
|
||||
flex : 85%;
|
||||
margin-right : $size-margin-medium;
|
||||
}
|
||||
|
||||
.clear {
|
||||
flex : 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large variant ///////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.view__inventory.large {
|
||||
.view__stack {
|
||||
& > * {
|
||||
&:not(:last-child) {
|
||||
padding-bottom : $size-margin-small;
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
padding-right : $size-margin-medium;
|
||||
input {
|
||||
width: 3em;
|
||||
font-size : $font-size-xlarge;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding-right : $size-margin-medium;
|
||||
|
||||
img {
|
||||
height : $size-minecraft-block * 1.5;
|
||||
width : $size-minecraft-block * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
a {
|
||||
font-family : $font-family-text;
|
||||
font-size : $font-size-xlarge;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
padding-left : $size-margin-small;
|
||||
|
||||
.button {
|
||||
width : $size-button-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
#
|
||||
# Crafting Guide - inventory_controller.coffee
|
||||
#
|
||||
# Copyright © 2014-2016 by Redwood Labs
|
||||
# All rights reserved.
|
||||
#
|
||||
|
||||
BaseController = require '../../base_controller'
|
||||
ItemSelectorController = require '../item_selector/item_selector_controller'
|
||||
StackController = require '../stack/stack_controller'
|
||||
|
||||
########################################################################################################################
|
||||
|
||||
###
|
||||
Events:
|
||||
clear(this)
|
||||
change(this)
|
||||
add(this, itemSlug)
|
||||
button:first(this, itemSlug)
|
||||
button:second(this, itemSlug)
|
||||
###
|
||||
module.exports = class InventoryController extends BaseController
|
||||
|
||||
@MAX_QUANTITY = 9999
|
||||
|
||||
@ONLY_DIGITS = /^[0-9]*$/
|
||||
|
||||
constructor: (options={})->
|
||||
if not options.imageLoader? then throw new Error 'options.imageLoader is required'
|
||||
if not options.modPack? then throw new Error 'options.modPack is required'
|
||||
if not options.router? then throw new Error 'options.router is required'
|
||||
|
||||
@_imageLoader = options.imageLoader
|
||||
@_modPack = options.modPack
|
||||
@_router = options.router
|
||||
|
||||
@_editable = options.editable ?= true
|
||||
@_icon = options.icon ?= '/images/chest_front.png'
|
||||
@_firstButtonType = options.firstButtonType ?= null
|
||||
@_isAcceptable = options.isAcceptable ?= null
|
||||
@_secondButtonType = options.secondButtonType ?= null
|
||||
@_shouldEnableButton = options.shouldEnableButton ?= (model, button)-> true
|
||||
|
||||
options.templateName = 'common/inventory'
|
||||
super options
|
||||
|
||||
@_stackControllers = []
|
||||
|
||||
@listenTo @_modPack, c.event.change, => @tryRefresh()
|
||||
|
||||
# Event Methods ################################################################################
|
||||
|
||||
onClearButtonClicked: ->
|
||||
return unless @model?
|
||||
return if @$clearButton.hasClass 'disabled'
|
||||
|
||||
@model.clear()
|
||||
@trigger c.event.clear, this
|
||||
@trigger c.event.change, this
|
||||
|
||||
onFirstButtonClicked: (stackController)->
|
||||
@trigger c.event.button.first, this, stackController?.model?.itemSlug
|
||||
|
||||
onItemSelectorButtonClicked: ->
|
||||
return unless @model?
|
||||
|
||||
@_selector.launch()
|
||||
.then (itemSlug)=>
|
||||
return unless itemSlug?
|
||||
|
||||
@model.add itemSlug, 1
|
||||
@trigger c.event.add, this, itemSlug
|
||||
@trigger c.event.change, this
|
||||
|
||||
onSecondButtonClicked: (stackController)->
|
||||
@trigger c.event.button.second, this, stackController?.model?.itemSlug
|
||||
|
||||
# BaseController Overrides #####################################################################
|
||||
|
||||
onDidRender: ->
|
||||
@_selector = @addChild ItemSelectorController, null, isAcceptable: @_isAcceptable, modPack: @_modPack
|
||||
|
||||
@$clearButton = @$('.button.clear')
|
||||
@$emptyPlaceholder = @$('.empty_placeholder')
|
||||
@$icon = @$('.icon')
|
||||
@$itemContainer = @$('.item_container')
|
||||
@$title = @$('h2 p')
|
||||
super
|
||||
|
||||
refresh: ->
|
||||
if @_editable
|
||||
@_selector.show()
|
||||
@show @$clearButton
|
||||
else
|
||||
@_selector.hide()
|
||||
@hide @$clearButton
|
||||
|
||||
@$icon.attr 'src', @_icon
|
||||
|
||||
@_refreshStacks()
|
||||
|
||||
if not @model or @model.isEmpty
|
||||
@show @$emptyPlaceholder
|
||||
@$clearButton.addClass 'disabled'
|
||||
else
|
||||
@hide @$emptyPlaceholder
|
||||
@$clearButton.removeClass 'disabled'
|
||||
|
||||
super
|
||||
|
||||
# Backbone.View Overrides ######################################################################
|
||||
|
||||
events: ->
|
||||
return _.extend super,
|
||||
'click .button.item-selector': 'onItemSelectorButtonClicked'
|
||||
'click .button.clear': 'onClearButtonClicked'
|
||||
'click button.first': 'onFirstButtonClicked'
|
||||
'click button.second': 'onSecondButtonClicked'
|
||||
|
||||
# Private Methods ##############################################################################
|
||||
|
||||
_refreshStacks: ->
|
||||
@_stackControllers ?= []
|
||||
index = 0
|
||||
|
||||
if @model?
|
||||
@model.each (stack)=>
|
||||
controller = @_stackControllers[index]
|
||||
if not controller?
|
||||
controller = new StackController
|
||||
editable: @_editable
|
||||
firstButtonType: @_firstButtonType
|
||||
imageLoader: @_imageLoader
|
||||
model: stack
|
||||
modPack: @_modPack
|
||||
router: @_router
|
||||
secondButtonType: @_secondButtonType
|
||||
shouldEnableButton: @_shouldEnableButton
|
||||
controller.on c.event.change, => @trigger c.event.change, this
|
||||
controller.on c.event.button.first, (c)=> @onFirstButtonClicked(c)
|
||||
controller.on c.event.button.second, (c)=> @onSecondButtonClicked(c)
|
||||
controller.render()
|
||||
|
||||
@_stackControllers.push controller
|
||||
@$itemContainer.append controller.$el
|
||||
else
|
||||
controller.model = stack
|
||||
index += 1
|
||||
|
||||
while @_stackControllers.length > index
|
||||
@_stackControllers.pop().remove()
|
||||
Reference in New Issue
Block a user