Replace jQuery animations with CSS animations

This commit is contained in:
Andrew Miner
2015-03-21 19:00:46 -07:00
parent 3d0908c421
commit 9956e64af0
32 changed files with 385 additions and 369 deletions
+16 -5
View File
@@ -20,10 +20,10 @@ exports.DefaultMods =
thermal_expansion: { defaultVersion: '4.0.0B8-23' }
exports.Duration = Duration = {}
Duration.snap = 200
Duration.fast = Duration.snap * 2
Duration.normal = Duration.fast * 2
Duration.slow = Duration.normal * 2
Duration.snap = 100
Duration.fast = 200
Duration.normal = 400
Duration.slow = 1200
exports.Event = Event = {}
Event.add = 'add' # collection, item...
@@ -38,7 +38,18 @@ Event.request = 'request' # model
Event.route = 'route'
Event.sort = 'sort'
Event.sync = 'sync' # model, response
Event.transitionEnd = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'
Event.transitionEnd = (->
transitions =
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MSTransition': 'msTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
el = document.createElement 'fakeelement'
for styleName, eventName of transitions
return eventName if el.style[styleName]?
)()
exports.Key = Key = {}
Key.Return = 13
+64 -11
View File
@@ -6,6 +6,7 @@ All rights reserved.
###
views = require '../views'
{Event} = require '../constants'
########################################################################################################################
@@ -31,13 +32,31 @@ module.exports = class BaseController extends Backbone.View
options.parent = this
child = new Controller options
child.render()
child.render options
@_children.push child
return child
hide: (args...)->
{$el, callback} = @_resolveShowHideArgs args
$el.addClass 'hideable' unless $el.hasClass 'hideable'
if $el.hasClass('hiding') or $el.hasClass('hidden')
_.defer => callback this
else
$el.one Event.transitionEnd, =>
$el.addClass 'hidden'
$el.removeClass 'hiding'
callback this
$el.addClass 'hiding'
refresh: ->
logger.verbose => "#{this} refreshing"
remove: ->
@hide -> @$el.remove()
routeLinkClick: (event)->
event.preventDefault()
href = $(event.target).attr 'href'
@@ -45,6 +64,23 @@ module.exports = class BaseController extends Backbone.View
logger.info "Re-routing link to internal navigation: #{href}"
router.navigate href, trigger:true
show: (args...)->
{$el, callback} = @_resolveShowHideArgs args
$el.addClass 'hideable' unless $el.hasClass 'hideable'
if $el.hasClass('hiding') or $el.hasClass('hidden')
$el.one Event.transitionEnd, =>
callback this
$el.removeClass 'hiding'
$el.removeClass 'hidden'
else
_.defer => callback this
unrender: ->
@undelegateEvents()
@$el.empty()
# Event Methods ################################################################################
onDidModelChange: ->
@@ -68,7 +104,7 @@ module.exports = class BaseController extends Backbone.View
if newModel?.on?
@listenTo newModel, 'sync', (e)=> @onDidModelSync e
@listenTo newModel, 'change', (e)=> @onDidModelChange e
return true
return newModel
# Property Methods #############################################################################
@@ -77,8 +113,8 @@ module.exports = class BaseController extends Backbone.View
setModel: (newModel)->
return if @model is newModel
return unless @onWillChangeModel @_model, newModel
newModel = @onWillChangeModel @_model, newModel
@_model = newModel
@tryRefresh()
@@ -88,23 +124,27 @@ module.exports = class BaseController extends Backbone.View
return {}
render: (options={})->
options.force ?= false
options.show ?= true
return this unless not @_rendered or options.force
data = (@model?.toHash? and @model.toHash()) or @model or {}
if not @_template?
logger.error => "Default render called for #{@constructor.name} without a template"
return this
data = (@model?.toHash? and @model.toHash()) or @model or {}
logger.verbose => "#{this} rendering with data: #{data}"
$renderedEl = $($(@_template(data))[0])
@onWillRender()
$oldEl = @$el
$newEl = Backbone.$(@_template(data))
if $oldEl
$oldEl.replaceWith $newEl
$newEl.addClass $oldEl.attr 'class'
@hide()
@unrender()
@$el.append $renderedEl.children()
@$el.addClass $renderedEl.attr 'class'
@delegateEvents()
@show() if options.show
@setElement $newEl
@_rendered = true
@onDidRender()
@@ -121,6 +161,19 @@ module.exports = class BaseController extends Backbone.View
if templateName?
@_template = views[templateName]
_resolveShowHideArgs: (args)->
if args.length is 0
return $el:@$el, callback:->
else if args.length is 1
if _.isFunction args[0]
return $el:@$el, callback:args[0]
else
return $el:args[0], callback:->
else if args.length is 2
return $el:args[0], callback:args[1]
else
throw new Error "expected to get 0, 1, or 2 args"
_tryRefresh: ->
return unless @_rendered
@refresh()
@@ -54,7 +54,6 @@ module.exports = class BrowsePageController extends PageController
while @_controllers.length > controllerIndex
controller = @_controllers.pop()
controller.$el.addClass 'removing'
controller.$el.one Event.transitionEnd -> controller.$el.remove()
controller.hide -> controller.$el.remove()
super
@@ -79,9 +79,9 @@ module.exports = class CraftingTableController extends BaseController
@$multiplier.html ''
if not (@model.hasSteps and global.feedbackController?)
@$problemControl.hide duration:Duration.snap
@$problemControl.addClass 'hidden'
else
@$problemControl.show duration:Duration.snap
@$problemControl.removeClass 'hidden'
super
@@ -49,9 +49,9 @@ module.exports = class FeedbackController extends BaseController
@model.send(message)
.then =>
@onToggle()
@$error.slideUp duration:Duration.normal
@$error.addClass 'hidden'
.catch (error)=>
@$error.slideDown duration:Duration.normal
@$error.removeClass 'hidden'
.finally =>
@$sendButton.removeAttr 'disabled'
@@ -164,18 +164,16 @@ module.exports = class InventoryController extends BaseController
modPack: @modPack
onChange: @onChange
onRemove: if not @editable then null else (stack)=> @_removeStack(stack)
controller.render()
controller.$el.hide()
controller.$el.insertBefore $lastRow
controller.$el.slideDown duration:Duration.fast
@_stackControllers.push controller
controller.$el.insertBefore $lastRow
controller.render()
else
controller.model = stack
index += 1
while @_stackControllers.length > index
controller = @_stackControllers.pop()
controller.$el.fadeOut duration:Duration.fast, complete:-> @remove()
@_stackControllers.pop().remove()
_removeStack: (stack)->
@model.remove stack.itemSlug, stack.quantity
@@ -72,7 +72,7 @@ module.exports = class InventoryTableController extends BaseController
onNameFieldChanged: ->
item = @modPack.findItemByName @$nameField.val()
@_updateButtonState()
@_refreshButtonState()
onNameFieldFocused: ->
@$nameField.val ''
@@ -99,7 +99,7 @@ module.exports = class InventoryTableController extends BaseController
@$quantityField.removeClass 'error', Duration.normal
@$quantityField.removeClass 'error-new', Duration.normal
@_updateButtonState()
@_refreshButtonState()
onQuantityFieldFocused: ->
@$quantityField.val ''
@@ -125,22 +125,10 @@ module.exports = class InventoryTableController extends BaseController
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)=>
controller = new StackController
editable: @editable
imageLoader: @imageLoader
model: stack
modPack: @modPack
onRemove: if not @editable then null else (stack)=> @_removeStack(stack)
controller.render()
controller.$el.insertBefore $lastRow
@_stackControllers.push controller
@_updateNameAutocomplete()
@_updateButtonState()
@_refreshNameAutocomplete()
@_refreshButtonState()
@_refreshStacks()
super
@@ -160,10 +148,15 @@ module.exports = class InventoryTableController extends BaseController
# Private Methods ##############################################################################
_removeStack: (stack)->
@model.remove stack.itemSlug, stack.quantity
_refreshButtonState: ->
if @model.isEmpty then @$clearButton.attr('disabled', 'disabled') else @$clearButton.removeAttr('disabled')
_updateNameAutocomplete: ->
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')
_refreshNameAutocomplete: ->
onChanged = => @onNameFieldChanged()
onSelected = => @onItemSelected()
@@ -175,10 +168,31 @@ module.exports = class InventoryTableController extends BaseController
close: onChanged
select: onSelected
_updateButtonState: ->
if @model.isEmpty then @$clearButton.attr('disabled', 'disabled') else @$clearButton.removeAttr('disabled')
_refreshStacks: ->
@_stackControllers ?= []
index = 0
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')
$lastRow = @$table.find 'tr:last-child'
@model.each (stack)=>
controller = @_stackControllers[index]
if not controller?
controller = new StackController
editable: @editable
imageLoader: @imageLoader
model: stack
modPack: @modPack
onRemove: if not @editable then null else (stack)=> @_removeStack(stack)
@_stackControllers.push controller
controller.$el.insertBefore $lastRow
controller.render()
else
controller.model = stack
index += 1
while @_stackControllers.length > index
@_stackControllers.pop().remove()
_removeStack: (stack)->
@model.remove stack.itemSlug, stack.quantity
@@ -6,10 +6,10 @@ All rights reserved.
###
BaseController = require './base_controller'
{Duration} = require '../constants'
{Event} = require '../constants'
Item = require '../models/item'
ItemController = require './item_controller'
{Duration} = require '../constants'
{Event} = require '../constants'
########################################################################################################################
@@ -18,19 +18,15 @@ module.exports = class ItemGroupController extends BaseController
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'
options.model ?= []
options.title ?= ''
options.templateName = 'item_group'
super options
@_delayStep = 20
@_imageLoader = options.imageLoader
@_itemControllers = []
@_modPack = options.modPack
@_title = options.title
Object.defineProperties this,
title: {get:@getTitle, set:@setTitle}
# Property Methods #############################################################################
getTitle: ->
@@ -40,6 +36,9 @@ module.exports = class ItemGroupController extends BaseController
@_title = title
@tryRefresh()
Object.defineProperties @prototype,
title: {get:@prototype.getTitle, set:@prototype.setTitle}
# BaseController Overrides #####################################################################
onDidRender: ->
@@ -47,37 +46,37 @@ module.exports = class ItemGroupController extends BaseController
@$items = @$('.panel')
super
onWillChangeModel: (oldModel, newModel)->
newModel ?= []
return super oldModel, newModel
refresh: ->
if @model.length > 0
@$title.html @_title
@_refreshItems()
@show()
else
@hide()
super
# Private Methods ##############################################################################
_createItemController: (item, delay)->
controller = new ItemController imageLoader:@_imageLoader, model:item, modPack:@_modPack
@_itemControllers.push controller
attachController = =>
controller.render()
@$items.append controller.$el
_.delay attachController, delay
_refreshItems: ->
@_itemControllers ?= []
controllerIndex = 0
delay = 0
if @model?
for item in @model
controller = @_itemControllers[controllerIndex]
if not controller?
@_createItemController item, delay
delay += @_delayStep
controller = new ItemController imageLoader:@_imageLoader, model:item, modPack:@_modPack
@_itemControllers.push controller
@$items.append controller.$el
controller.render()
else
controller.model = item
controllerIndex += 1
while @_itemControllers.length > controllerIndex
controller = @_itemControllers.pop()
controller.$el.slideUp duration:Duration.normal, complete:-> @remove()
@_itemControllers.pop().remove()
@@ -43,6 +43,7 @@ module.exports = class ItemPageController extends PageController
craftingPlanButtonClicked: ->
display = @modPack.findItemDisplay @model.item.slug
logger.debug "button clicked, going to: #{display.craftingUrl}"
router.navigate display.craftingUrl, trigger:true
return false
@@ -56,21 +57,13 @@ module.exports = class ItemPageController extends PageController
onDidRender: ->
@adsenseController = @addChild AdsenseController, '.view__adsense', model:'sidebar_skyscraper'
@_similarItemsController = @addChild ItemGroupController, '.similar .view__item_group',
imageLoader: @imageLoader
modPack: @modPack
@_usedAsToolToMakeController = @addChild ItemGroupController, '.usedAsToolToMake .view__item_group',
imageLoader: @imageLoader
modPack: @modPack
@_usedToMakeController = @addChild ItemGroupController, '.usedToMake .view__item_group',
imageLoader: @imageLoader
modPack: @modPack
options = imageLoader:@imageLoader, modPack:@modPack, show:false
@_similarItemsController = @addChild ItemGroupController, '.view__item_group.similar', options
@_usedAsToolToMakeController = @addChild ItemGroupController, '.view__item_group.usedAsToolToMake', options
@_usedToMakeController = @addChild ItemGroupController, '.view__item_group.usedToMake', options
@$byline = @$('.byline')
@$bylineLink = @$('.byline a')
@$craftingPlanButton = @$('button.craftingPlan')
@$descriptionPanel = @$('.description .panel')
@$descriptionSection = @$('.description')
@$name = @$('h1.name')
@@ -92,20 +85,18 @@ module.exports = class ItemPageController extends PageController
if @model.item?
display = @modPack.findItemDisplay @model.item.slug
@$craftingPlanButton.fadeIn duration:Duration.fast
@imageLoader.load display.iconUrl, @$titleImage
@$name.html display.itemName
if @model.item.officialUrl?
@$officialPageLink.attr 'href', @model.item.officialUrl
@$officialPageLink.fadeIn duration:Duration.normal
@show @$officialPageLink
else
@$officialPageLink.fadeOut duration:Duration.normal
@hide @$officialPageLink
@$el.slideDown duration:Duration.normal
@show()
else
@$craftingPlanButton.fadeOut duration:Duration.fast
@$el.slideUp duration:Duration.normal
@hide()
@_refreshByline()
@_refreshDescription()
@@ -124,7 +115,7 @@ module.exports = class ItemPageController extends PageController
'click a.craftingPlan': 'routeLinkClick'
'click .byline a': 'routeLinkClick'
'click .markdown': 'routeLinkClick'
'click button.craftingPlan': 'craftingPlanButtonClicked'
'click button': 'craftingPlanButtonClicked'
# Private Methods ##############################################################################
@@ -133,25 +124,25 @@ module.exports = class ItemPageController extends PageController
if mod?.name?.length > 0
@$bylineLink.attr 'href', Url.mod modSlug:mod.slug
@$bylineLink.html mod.name
@$byline.fadeIn duration:Duration.fast
@show @$byline
else
@$byline.fadeOut duration:Duration.fast
@hide @$byline
_refreshDescription: ->
description = @model.compileDescription()
if description?
@$descriptionPanel.html description
@$descriptionSection.slideDown duration:Duration.normal
@show @$descriptionPanel
else
@$descriptionSection.slideUp duration:Duration.normal
@hide @$descriptionPanel
_refreshRecipes: ->
@_recipeControllers ?= []
index = 0
recipes = @model.findRecipes()
if recipes?
@$recipesSection.slideDown duration:Duration.normal
if recipes?.length > 0
@$recipesSectionTitle.html if recipes.length is 1 then 'Recipe' else 'Recipes'
for recipe in @model.findRecipes()
@@ -159,17 +150,18 @@ module.exports = class ItemPageController extends PageController
if not controller?
controller = new FullRecipeController imageLoader:@imageLoader, modPack:@modPack, model:recipe
@_recipeControllers.push controller
controller.render()
@$recipeContainer.append controller.$el
controller.render()
else
controller.model = recipe
index++
@show @$recipesSection
else
@$recipesSection.slideUp duration:Duration.normal
@hide @$recipesSection
while @_recipeControllers.length > index
controller = @_recipeControllers.pop()
controller.$el.slideUp duration:Duration.normal, complete:-> controller.$el.remove()
@_recipeControllers.pop().remove()
_refreshSimilarItems: ->
group = @model.item?.group
@@ -179,28 +171,13 @@ module.exports = class ItemPageController extends PageController
else
@_similarItemsController.model = null
if @_similarItemsController.model?
@$similarSection.slideDown duration:Duration.normal
else
@$similarSection.slideUp duration:Duration.normal
_refreshUsedAsToolToMake: ->
@_usedAsToolToMakeController.title = 'Used as Tool to Make'
@_usedAsToolToMakeController.model = @model.findToolForRecipes()
if @_usedAsToolToMakeController.model?
@$usedAsToolToMakeSection.slideDown duration:Duration.normal
else
@$usedAsToolToMakeSection.slideUp duration:Duration.normal
_refreshUsedToMake: ->
@_usedToMakeController.title = 'Used to Make'
@_usedToMakeController.model = @model.findComponentInItems()
if @_usedToMakeController.model?
@$usedToMakeSection.slideDown duration:Duration.normal
else
@$usedToMakeSection.slideUp duration:Duration.normal
_refreshVideos: ->
@_videoControllers ?= []
@@ -208,7 +185,6 @@ module.exports = class ItemPageController extends PageController
videos = @model?.item?.videos or []
if videos? and videos.length > 0
@$videosSection.slideDown duration:Duration.normal
@$videosSectionTitle.html if videos.length is 1 then 'Video' else 'Videos'
for video in videos
@@ -221,12 +197,13 @@ module.exports = class ItemPageController extends PageController
else
controller.model = video
index++
@show @$videosSection
else
@$videosSection.slideUp duration:Duration.normal
@hide @$videosSection
while @_videoControllers.length > index
controller = @_videoControllers.pop()
controller.$el.slideUp duration:Duration.normal, complete:-> controller.$el.remove()
@_videoControllers.pop().remove()
_resolveItemSlug: ->
return if @model.item?
+1 -5
View File
@@ -13,6 +13,7 @@ BaseController = require './base_controller'
module.exports = class ModController extends BaseController
constructor: (options={})->
if not options.model? then throw new Error 'options.model is required'
options.templateName = 'mod'
super options
@@ -26,15 +27,10 @@ module.exports = class ModController extends BaseController
super
refresh: ->
if @model?
@$el.removeClass 'empty'
@$link.attr 'href', Url.mod modSlug:@model.slug
@$logo.attr 'src', Url.modIcon modSlug:@model.slug
@$name.html @model.name
@$description.html @model.description
else
@$el.addClass 'empty'
# Backbone.View Overrides ######################################################################
@@ -34,9 +34,6 @@ module.exports = class ModPageController extends PageController
@_effectiveModVersion = null
@_groupControllers = []
Object.defineProperties this,
effectiveModVersion: {get:@_getEffectiveModVersion}
# Event Methods ################################################################################
onVersionChanged: ->
@@ -46,6 +43,21 @@ module.exports = class ModPageController extends PageController
if modVersion? then modVersion.fetch()
@refresh()
# Property Methods #############################################################################
getEffectiveModVersion: ->
return @_effectiveModVersion if @_effectiveModVersion?
return null unless @model?
modVersion = @model.activeModVersion
modVersion ?= @model.getModVersion Mod.Version.Latest
modVersion.fetch() if modVersion?
return modVersion
Object.defineProperties @prototype,
effectiveModVersion: {get:@prototype.getEffectiveModVersion}
# PageController Overrides #####################################################################
getTitle: ->
@@ -64,6 +76,7 @@ module.exports = class ModPageController extends PageController
@$homePageLink = @$('.homePage')
@$groupContainer = @$('.itemGroups')
@$titleImage = @$('.titleImage img')
@$titleImageContainer = @$('.titleImage')
@$tutorialsSection = @$('.tutorials')
@$tutorialsContainer = @$('.tutorials .panel')
@$versionSelector = @$('select.version')
@@ -71,19 +84,19 @@ module.exports = class ModPageController extends PageController
super
refresh: ->
if @model?
@$name.html @model.name
if @model?.isLoaded and @effectiveModVersion?.isLoaded
@$byline.html "by #{@model.author}"
@$titleImage.attr 'src', Url.modIcon modSlug:@model.slug
@$description.html @model.description
@$name.html @model.name
@$titleImage.attr 'src', Url.modIcon modSlug:@model.slug
@$el.slideDown duration:Duration.normal
@show()
else
@$el.slideUp duration:Duration.normal
@hide()
@_refreshLink @$homePageLink, @model.homePageUrl
@_refreshLink @$documentationLink, @model.documentationUrl
@_refreshLink @$downloadLink, @model.downloadUrl
@_refreshLink @$homePageLink, @model?.homePageUrl
@_refreshLink @$documentationLink, @model?.documentationUrl
@_refreshLink @$downloadLink, @model?.downloadUrl
@_refreshItemGroups()
@_refreshTutorials()
@@ -97,33 +110,25 @@ module.exports = class ModPageController extends PageController
# Private Methods ##############################################################################
_getEffectiveModVersion: ->
return @_effectiveModVersion if @_effectiveModVersion?
return null unless @model?
modVersion = @model.activeModVersion
modVersion ?= @model.getModVersion Mod.Version.Latest
modVersion.fetch() if modVersion?
return modVersion
_refreshItemGroups: ->
@_groupControllers ?= []
groupIndex = 0
modVersion = @effectiveModVersion
if modVersion?
modVersion.eachGroup (group)=>
controller = @_groupControllers[groupIndex]
items = modVersion.allItemsInGroup group
if not controller?
title = if group is Item.Group.Other then 'Items' else group
controller = new ItemGroupController
imageLoader: @imageLoader
model: items
modPack: @modPack
title: title
controller.render()
title: if group is Item.Group.Other then 'Items' else group
@_groupControllers.push controller
@$groupContainer.append controller.$el
@_groupControllers[groupIndex] = controller
controller.render()
else
controller.modVersion = modVersion
controller.model = items
@@ -132,32 +137,28 @@ module.exports = class ModPageController extends PageController
while @_groupControllers.length > groupIndex + 1
controller = @_groupControllers.pop()
controller.$el.slideUp duration:Duration.normal, complete:-> @remove()
controller.hide -> controller.$el.remove()
_refreshLink: ($link, url)->
if url?
$link.slideDown duration:Duration.normal
$link.attr 'href', url
$link.removeClass 'hidden'
else
$link.slideUp duration:Duration.normal
$link.addClass 'hidden'
_refreshTutorials: ->
@_tutorialControllers ?= []
index = 0
tutorials = @model.tutorials
if tutorials.length is 0
@$tutorialsSection.addClass 'hidden'
else
@$tutorialsSection.removeClass 'hidden'
index = 0
if tutorials.length > 0
for tutorial in tutorials
controller = @_tutorialControllers[index]
if not controller?
controller = new TutorialController model:tutorial
controller.render()
@$tutorialsContainer.append controller.$el
@_tutorialControllers.push controller
@$tutorialsContainer.append controller.$el
controller.render()
else
controller.model = model
@@ -165,12 +166,18 @@ module.exports = class ModPageController extends PageController
while @_tutorialControllers.length > index
controller = @_tutorialControllers.pop()
controller.$el.slideUp duration:Duration.normal, complete:-> @remove()
controller.hide -> controller.$el.remove()
@show @$tutorialsSection
else
@hide @tutorialsSection
_refreshVersions: ->
@$versionSelector.empty()
return unless @model?
@$versionSelector.removeClass 'hiding'
effectiveModVersion = @effectiveModVersion
versionCount = 0
@model.eachModVersion (modVersion)=>
@@ -1,5 +1,5 @@
###
Crafting Guide - mod_controller.coffee
Crafting Guide - mod_selector_controller.coffee
Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
@@ -1,25 +0,0 @@
###
Crafting Guide - recipe_step_controller.coffee
Copyright (c) 2014-2015 by Redwood Labs
All rights reserved.
###
BaseController = require './base_controller'
########################################################################################################################
module.exports = class RecipeStepController extends BaseController
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'
options.templateName = 'recipe_step'
super options
# BaseController Overrides #####################################################################
onDidRender: ->
@$slotImages = (@$slots.push $(el) for el in @$('.table-slot img'))
@$output = @$('.output')
super
@@ -25,6 +25,7 @@ module.exports = class StackController extends BaseController
options.editable ?= false
options.onChange ?= -> # do nothing
options.onRemove ?= (stack)-> # do nothing
options.tagName = 'tr'
options.templateName = 'stack'
super options
@@ -95,6 +96,8 @@ module.exports = class StackController extends BaseController
super
refresh: ->
if not @model? then throw new Error "must have a model to render"
display = @modPack.findItemDisplay @model.itemSlug
@_imageLoader.load display.iconUrl, @$image
@@ -53,54 +53,46 @@ module.exports = class TutorialPageController extends BaseController
refresh: ->
if @model? and @model.isLoaded
@$el.removeClass 'hidden'
else
@$el.addClass 'hidden'
@_refreshByline()
@_refreshOfficialUrl()
@_refreshSections()
@_refreshTitle()
@_refreshVideos()
@show()
else
@hide()
super
# Private Methods ##############################################################################
_refreshByline: ->
if @model?
@$byline.removeClass 'hidden'
@$bylineLink.html @modPack.getMod(@modSlug).name
@$bylineLink.attr 'href', Url.mod modSlug:@modSlug
else
@$byline.addClass 'hidden'
_refreshOfficialUrl: ->
if @model?.officialUrl?
if @model.officialUrl?
@$officialLink.attr 'href', @model.officialUrl
@$officialLink.removeClass 'hidden'
@show @$officialLink
else
@$officialLink.addClass 'hidden'
@hide @$officialLink
_refreshTitle: ->
if @model?
@$title.html @model.name
@$titleImage.attr 'src', Url.tutorialIcon modSlug:@modSlug, tutorialSlug:@tutorialSlug
else
@$title.empty()
@$titleImage.removeAttr 'src'
_refreshSections: ->
@_sectionControllers ?= []
index = 0
if @model?
for section in @model.sections
controller = @_sectionControllers[index]
if not controller?
controller = new MarkdownSectionController title:section.title, model:section.content
controller.render()
@$sectionsContainer.append controller.$el
@_sectionControllers.push controller
@$sectionsContainer.append controller.$el
controller.render()
else
controller.title = section.title
controller.model = section.model
@@ -109,8 +101,7 @@ module.exports = class TutorialPageController extends BaseController
index += 1
while @_sectionControllers.length > index
controller = @_sectionController.pop()
controller.$el.fadeOut duration:Duration.normal, complete:-> @remove()
@_sectionController.pop().remove()
_refreshVideos: ->
@_videoControllers ?= []
@@ -118,7 +109,6 @@ module.exports = class TutorialPageController extends BaseController
videos = @model?.videos or []
if videos? and videos.length > 0
@$videosSection.slideDown duration:Duration.normal
@$videosSectionTitle.html if videos.length is 1 then 'Video' else 'Videos'
for video in videos
@@ -126,17 +116,19 @@ module.exports = class TutorialPageController extends BaseController
if not controller?
controller = new VideoController model:video
@_videoControllers.push controller
controller.render()
@$videosSectionPanel.append controller.$el
controller.render()
else
controller.model = video
index++
index += 1
@show @$videosSection
else
@$videosSection.slideUp duration:Duration.normal
@hide @$videosSection
while @_videoControllers.length > index
controller = @_videoControllers.pop()
controller.$el.slideUp duration:Duration.normal, complete:-> controller.$el.remove()
@_videoControllers.pop().remove()
_resolveTutorial: ->
return if @model?
+11 -11
View File
@@ -163,27 +163,27 @@ module.exports = class CraftingGuideRouter extends Backbone.Router
@headerController.model = page
showDuration = Duration.normal
show = =>
switchToNextController = (event)=>
logger.debug "show called: #{event}"
@_resetGlobals()
@_controller.unrender() if @_controller?
@_page = page
@_controller = controller
$pageContent = $('.page')
$pageContent.attr 'class', 'page hideable hidden'
window.scrollTo 0, 0
controller.onWillShow()
controller.$el = $pageContent
controller.render()
$pageContent = $('.page')
controller.$el.addClass 'page'
$pageContent.replaceWith controller.$el
controller.$el.slideDown showDuration, ->
controller.onDidShow()
if @_controller?
showDuration = showDuration / 2
@_controller.$el.slideUp showDuration, show
@_controller.hide -> switchToNextController()
else
show()
switchToNextController()
_resetGlobals: ->
if global.env in ProductionEnvs
+5
View File
@@ -87,6 +87,11 @@ module.exports = class ModVersion extends BaseModel
# Group Methods ################################################################################
getAllGroups: ->
result = []
@eachGroup (group)-> result.push group
return result
eachGroup: (callback)->
groupNames = _.keys @_groups
groupNames.sort (a, b)->
+1 -1
View File
@@ -23,7 +23,7 @@ html
.content
include ./includes/_header.jade
.page
.page.hideable
include ./includes/_footer.jade
block scripts
+1 -1
View File
@@ -15,5 +15,5 @@
.view__minimal_recipe
.next
.problem
.problem.hideable
a report a problem
+1 -1
View File
@@ -12,7 +12,7 @@
label(name="comment") Comment:
textarea(name="comment")
button(name="send") send
.error: p Sending failed. Please try again later.
.error.hideable.hidden: p Sending failed. Please try again later.
.label
img(src="/images/paper.png")
+20 -25
View File
@@ -47,6 +47,26 @@
.section
h2 What's new?
.panel
h3 2015-03-20
.entry
p.
Recently, I've been working on allowing mod authors to add more detail to the item pages here on
Crafting Guide. To that end, there are a couple of new features to announce. First, item detail
pages can now show text and pictures to describe the item (check out the <a
href="/browse/buildcraft/assembly_table">Assembly Table</a> for an example). Second, mods can
now include tutorial pages containing similar text and pictures to describe tricky concepts,
complex builds, or anything else their mod has to offer (see <a
href="/browse/buildcraft/tutorials/gates_wires_and_chips">Gates, Wires, and Chips</a> for an
example). Finally, both item pages and tutorial pages can display a list of YouTube videos. Only
a few pages in the Buildcraft section have been updated so far, but keep an eye out for
more to come!
p.
And... the second piece of news is that Crafting Guide now supports <a
href="/browse/thermal_dynamics">Thermal Dynamics</a>! This mod is an off-shoot from <a
href="/browse/thermal_expansion">Thermal Expansion</a> which contains all the ducts (item, fluid
and redstone flux) you're used to from TE3 plus some extras both for higher capacity throughput
and combining item ducts with redstone flux ducts.
h3 2015-03-13
.entry
p.
@@ -126,28 +146,3 @@
| smelting ore directly in a furnace
li recipes for vanilla items added by mods are now available (e.g., smelting Iron Dust into Iron
| ingots)
h3 2015-02-10
.entry
p.
I just pushed up some fixes to avoid confusing various items of the same name from different
mods. The best example of this are the two Wrenches from Buildcraft and IC2, but there are a
bunch of others.
h3 2015-02-09
.entry
p.
This release fixes a number of small issues and improves performance in a number of places. Most
especially, all links within the site have been changed to update the page in place without the
need to re-download anything. This should make browsing between item pages <i>much</i> faster.
h3 2015-02-08
.entry
p.
This is the singlest largest expansion of the website yet! Each item from each mod now has its
own page! This will expand in the future, but for now this shows all the recipes for the item as
well as all the closely related items and the others items that can be made using the item.
p.
This also changes things so that links to Crafting Guide from other sites will first go to the
item's page (instead of to the crafting plan). Not to worry though... there's still a direct
link from each item to the full crafting plan for that item.
+1 -1
View File
@@ -5,7 +5,7 @@
//- All rights reserved.
//-
.view__item
.view__item.hideable.hidden
a
table
tr
+1 -1
View File
@@ -5,6 +5,6 @@
//- All rights reserved.
//-
.view__item_group.section
.view__item_group.section.hideable.hidden
h2
.panel
+8 -8
View File
@@ -8,7 +8,7 @@
.view__item_page
.sidebar
.titleImage: a: img
a.officialPage.externalLink(target="new"): p Offical Documentation
a.officialPage.externalLink.hideable.hidden(target="new"): p Offical Documentation
button.large.craftingPlan See Crafting Plan
@@ -16,22 +16,22 @@
.mainBody
h1.name
.byline: p from <a></a>
.byline.hideable.hidden: p from <a></a>
.recipes.section
.recipes.section.hideable.hidden
h2 Recipes
.panel
.description.section
.description.section.hideable.hidden
h2 Description
.panel.markdown
.videos.section
.videos.section.hideable.hidden
h2 Videos
.panel
.usedToMake: .view__item_group
.view__item_group.usedToMake
.usedAsToolToMake: .view__item_group
.view__item_group.usedAsToolToMake
.similar: .view__item_group
.view__item_group.similar
+4 -4
View File
@@ -9,9 +9,9 @@
.sidebar
.titleImage: a: img
select.version
a.homePage.externalLink(target="new"): p Offical Home Page
a.documentation.externalLink(target="new"): p Documentation
a.download.externalLink(target="new"): p Download
a.homePage.externalLink.hideable.hidden(target="new"): p Offical Home Page
a.documentation.externalLink.hideable.hidden(target="new"): p Documentation
a.download.externalLink.hideable.hidden(target="new"): p Download
.view__adsense
@@ -20,7 +20,7 @@
.byline: p
.description: p
.tutorials.section
.tutorials.section.hideable.hidden
h2 Tutorials
.panel
+2 -2
View File
@@ -8,7 +8,7 @@
.view__tutorial_page
.sidebar
.titleImage: a: img
a.officialPage.externalLink(target="new"): p Offical Documentation
a.officialPage.externalLink.hideable.hidden(target="new"): p Offical Documentation
.view__adsense
@@ -18,6 +18,6 @@
.sections
.videos.section
.videos.section.hideable.hidden
h2
.panel
+11 -5
View File
@@ -32,11 +32,20 @@ All rights reserved.
.error-new { background: $color-error-new !important; }
.hidden {
max-height: 0;
.hideable {
opacity: 1;
transition: opacity $animate-normal;
}
.hiding {
opacity: 0;
}
.hidden {
opacity: 0;
display: none;
}
.mainBody {
position: relative; width: 81.25%;
@@ -67,7 +76,6 @@ All rights reserved.
.externalLink {
position: relative; width: 80%;
margin: 0.5em 10%;
display: none;
p {
font-family: $font-family-normal;
@@ -104,8 +112,6 @@ All rights reserved.
}
.videos {
display: none;
.panel {
text-align: center;
}
+3 -3
View File
@@ -28,9 +28,9 @@ All rights reserved.
// Animation Speeds ////////////////////////////////////////////////////////////////////////////////
$animate-fast: 0.1s;
$animate-normal: 0.25s;
$animate-slow: 0.6s;
$animate-fast: 0.200s;
$animate-normal: 0.400s;
$animate-slow: 1.200s;
// Font Faces //////////////////////////////////////////////////////////////////////////////////////
-15
View File
@@ -6,18 +6,12 @@ All rights reserved.
*/
.view__item_page {
display: none;
& > div {
vertical-align: top;
display: inline-block;
}
.sidebar {
.externalLink {
display: none;
}
button.large {
width: 100%;
}
@@ -26,7 +20,6 @@ All rights reserved.
.mainBody {
.recipes {
display: none;
.view__full_recipe {
width: 100%;
@@ -37,14 +30,6 @@ All rights reserved.
}
}
}
.similar {
display: none;
}
.usedToMake {
display: none;
}
}
.view__item {
-2
View File
@@ -6,8 +6,6 @@ All rights reserved.
*/
.view__mod_page {
display: none;
& > div {
vertical-align: top;
display: inline-block;
+22 -19
View File
@@ -32,14 +32,29 @@ see full recipe lists, related items, recipes added by each tool, and even which
made from the item you're looking at.</a></p><p><a class="section-link" href="/craft">Craft</a><a> any number of items from your mod pack to see a
full list of raw ingredients, and recipe-by-recipe instructions on how to make everything on
your list. No item is too complex, and no build is too big.
</a></p></div></div></div><div class="section"><h2><a>What's new?</a></h2><div class="panel"><h3><a>2015-03-09</a></h3><div class="entry"><p><a>It may seem like not much has been happening lately, but that's because all the changes have
</a></p></div></div></div><div class="section"><h2><a>What's new?</a></h2><div class="panel"><h3><a>2015-03-20</a></h3><div class="entry"><p><a>Recently, I've been working on allowing mod authors to add more detail to the item pages here on
Crafting Guide. To that end, there are a couple of new features to announce. First, item detail
pages can now show text and pictures to describe the item (check out the </a><a href="/browse/buildcraft/assembly_table">Assembly Table</a> for an example). Second, mods can
now include tutorial pages containing similar text and pictures to describe tricky concepts,
complex builds, or anything else their mod has to offer (see <a href="/browse/buildcraft/tutorials/gates_wires_and_chips">Gates, Wires, and Chips</a> for an
example). Finally, both item pages and tutorial pages can display a list of YouTube videos. Only
a few pages in the Buildcraft section have been updated so far, but keep an eye out for
more to come!</p><p>And... the second piece of news is that Crafting Guide now supports <a href="/browse/thermal_dynamics">Thermal Dynamics</a>! This mod is an off-shoot from <a href="/browse/thermal_expansion">Thermal Expansion</a> which contains all the ducts (item, fluid
and redstone flux) you're used to from TE3 plus some extras both for higher capacity throughput
and combining item ducts with redstone flux ducts.
</p></div><h3>2015-03-13</h3><div class="entry"><p>Happy Friday! For the weekend, you get <a href="/browse/big_reactors/">Big Reactors!</a> Enjoy!
</p></div><h3>2015-03-12</h3><div class="entry"><p>Thanks to the extraordinary generosity and effort of <a href="https://github.com/sheldongriffin">Sheldon Griffin</a>, Crafting Guide now supports
Forestry! Forestry is <i>not</i> a small mod, but he put in a huge effort, and it looks great.
If you'd like to help out too, head over to the <a href="https://github.com/andrewminer/crafting-guide/wiki/Adding-support-for-a-new-Mod">GitHub
Wiki</a> for full instructions: no programming required!</p><p>Also in the works is another significant expansion to the item pages. I've got the coding part
finished (you can peek at the final result <a href="/browse/buildcraft/advanced_crafting_table/">here</a>), and
now there's a lot of entering data left to be done... any volunteers?
</p></div><h3>2015-03-09</h3><div class="entry"><p>It may seem like not much has been happening lately, but that's because all the changes have
been behind the scenes, and focused on making Google happier with the site. This will make the
site show up better is search results, and will make it load a bit faster.
As a result of this work, the site also now qualifies for AdSense. I absolutely don't want to
site show up better is search results, and will make it load a bit faster.</p><p>As a result of this work, the site also now qualifies for AdSense. I absolutely don't want to
choke the site with ads as other big sites do, but it will be nice to pay the bills!
</a></p></div><h3><a>2015-03-01</a></h3><div class="entry"><p><a>This release delivers the second major expansion of Crafting Guide! Here's the list of what's
new:</a></p><ul><li><a>New home page!</a></li><li><a>Moved the crafting planner (the old home page) to its own </a><a href="/craft">Craft</a> page</li><li>Moved mod pack management to the new <a href="/configure">Configure</a> page</li><li>Added a <a href="/browse">Browse</a> page where you can peruse the list of supported mods</li></ul></div><h3>2015-02-26</h3><div class="entry"><p>This release adds a new section to the item pages called "Used as Tool to Make". The new section
</p></div><h3>2015-03-01</h3><div class="entry"><p>This release delivers the second major expansion of Crafting Guide! Here's the list of what's
new:</p><ul><li>New home page!</li><li>Moved the crafting planner (the old home page) to its own <a href="/craft">Craft</a> page</li><li>Moved mod pack management to the new <a href="/configure">Configure</a> page</li><li>Added a <a href="/browse">Browse</a> page where you can peruse the list of supported mods</li></ul></div><h3>2015-02-26</h3><div class="entry"><p>This release adds a new section to the item pages called "Used as Tool to Make". The new section
shows all the other items which can be made by that tool. For example, the IC2 Macerator shows
a bunch of things like Iron Dust, Gold Dust, etc.
</p></div><h3>2015-02-24</h3><div class="entry"><p>This release changes the crafting page to let you modify the quantity of items in the "Items You
@@ -54,19 +69,7 @@ plans don't take so long.
that there are a few things you should notice:</p><ol><li>it will favor recipes which produce more of an item versus those which produce fewer (e.g.,
IC2 plates get made with the Block Cutter instead of the Forge Hammer)</li><li>metal ingots will frequently (but not always) get crafted using 2x recipes instead of
smelting ore directly in a furnace</li><li>recipes for vanilla items added by mods are now available (e.g., smelting Iron Dust into Iron
ingots)</li></ol></div><h3>2015-02-10</h3><div class="entry"><p>I just pushed up some fixes to avoid confusing various items of the same name from different
mods. The best example of this are the two Wrenches from Buildcraft and IC2, but there are a
bunch of others.
</p></div><h3>2015-02-09</h3><div class="entry"><p>This release fixes a number of small issues and improves performance in a number of places. Most
especially, all links within the site have been changed to update the page in place without the
need to re-download anything. This should make browsing between item pages <i>much</i> faster.
</p></div><h3>2015-02-08</h3><div class="entry"><p>This is the singlest largest expansion of the website yet! Each item from each mod now has its
own page! This will expand in the future, but for now this shows all the recipes for the item as
well as all the closely related items and the others items that can be made using the item.</p><p>This also changes things so that links to Crafting Guide from other sites will first go to the
item's page (instead of to the crafting plan). Not to worry though... there's still a direct
link from each item to the full crafting plan for that item.
</p></div><h3>2015-02-02</h3><div class="entry"><p>Crafting Guide now has support for EnderIO! I tend to add new mods in order of those with the
most votes, so remember to suggest your favorites!</p></div></div></div></div></div>
ingots)</li></ol></div></div></div></div></div>
<div class="view__footer">
<div class="divider top"></div>
<div class="left">