2014-07-23 10:02:45 -04:00
|
|
|
SpellListEntryView = require './SpellListEntryView'
|
|
|
|
ThangAvatarView = require 'views/play/level/ThangAvatarView'
|
2014-01-03 13:32:13 -05:00
|
|
|
template = require 'templates/play/level/tome/spell_list_tab_entry'
|
2014-02-13 19:09:32 -05:00
|
|
|
LevelComponent = require 'models/LevelComponent'
|
2014-07-23 10:02:45 -04:00
|
|
|
DocFormatter = require './DocFormatter'
|
2014-11-08 11:38:25 -05:00
|
|
|
ReloadLevelModal = require 'views/play/level/modal/ReloadLevelModal'
|
2014-01-03 13:32:13 -05:00
|
|
|
|
|
|
|
module.exports = class SpellListTabEntryView extends SpellListEntryView
|
|
|
|
template: template
|
|
|
|
id: 'spell-list-tab-entry-view'
|
|
|
|
|
|
|
|
subscriptions:
|
2014-08-27 15:24:03 -04:00
|
|
|
'level:disable-controls': 'onDisableControls'
|
|
|
|
'level:enable-controls': 'onEnableControls'
|
2014-06-30 22:16:26 -04:00
|
|
|
'tome:spell-loaded': 'onSpellLoaded'
|
|
|
|
'tome:spell-changed': 'onSpellChanged'
|
2014-01-15 16:04:48 -05:00
|
|
|
'god:new-world-created': 'onNewWorld'
|
2014-06-26 01:56:39 -04:00
|
|
|
'tome:spell-changed-language': 'onSpellChangedLanguage'
|
2014-08-27 21:43:17 -04:00
|
|
|
'tome:toggle-maximize': 'onToggleMaximize'
|
2014-01-03 13:32:13 -05:00
|
|
|
|
|
|
|
events:
|
|
|
|
'click .spell-list-button': 'onDropdownClick'
|
|
|
|
'click .reload-code': 'onCodeReload'
|
2014-02-22 20:18:58 -05:00
|
|
|
'click .beautify-code': 'onBeautifyClick'
|
2014-08-27 21:43:17 -04:00
|
|
|
'click .fullscreen-code': 'onToggleMaximize'
|
2016-05-26 20:46:49 -04:00
|
|
|
'click .hints-button': 'onClickHintsButton'
|
2014-01-03 13:32:13 -05:00
|
|
|
|
|
|
|
constructor: (options) ->
|
2016-05-26 20:46:49 -04:00
|
|
|
@hintsState = options.hintsState
|
|
|
|
super(options)
|
2014-01-03 13:32:13 -05:00
|
|
|
|
2014-02-11 17:58:45 -05:00
|
|
|
getRenderData: (context={}) ->
|
2014-01-03 13:32:13 -05:00
|
|
|
context = super context
|
2014-08-27 20:26:56 -04:00
|
|
|
ctrl = if @isMac() then 'Cmd' else 'Ctrl'
|
|
|
|
shift = $.i18n.t 'keyboard_shortcuts.shift'
|
|
|
|
context.beautifyShortcutVerbose = "#{ctrl}+#{shift}+B: #{$.i18n.t 'keyboard_shortcuts.beautify'}"
|
|
|
|
context.maximizeShortcutVerbose = "#{ctrl}+#{shift}+M: #{$.i18n.t 'keyboard_shortcuts.maximize_editor'}"
|
2014-11-16 11:11:39 -05:00
|
|
|
context.includeSpellList = @options.level.get('slug') in ['break-the-prison', 'zone-of-danger', 'k-means-cluster-wars', 'brawlwood', 'dungeon-arena', 'sky-span', 'minimax-tic-tac-toe']
|
2014-09-24 19:29:28 -04:00
|
|
|
context.codeLanguage = @options.codeLanguage
|
|
|
|
context.levelType = @options.level.get 'type', true
|
2014-01-03 13:32:13 -05:00
|
|
|
context
|
|
|
|
|
|
|
|
afterRender: ->
|
|
|
|
super()
|
|
|
|
@$el.addClass 'spell-tab'
|
2014-07-23 09:50:47 -04:00
|
|
|
@attachTransitionEventListener()
|
2014-01-03 13:32:13 -05:00
|
|
|
|
2014-01-15 16:04:48 -05:00
|
|
|
onNewWorld: (e) ->
|
|
|
|
@thang = e.world.thangMap[@thang.id] if @thang
|
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
setThang: (thang) ->
|
|
|
|
return if thang.id is @thang?.id
|
|
|
|
@thang = thang
|
|
|
|
@spellThang = @spell.thangs[@thang.id]
|
|
|
|
@buildAvatar()
|
|
|
|
@buildDocs() unless @docsBuilt
|
|
|
|
|
|
|
|
buildAvatar: ->
|
2014-01-09 17:04:46 -05:00
|
|
|
avatar = new ThangAvatarView thang: @thang, includeName: false, supermodel: @supermodel
|
2014-01-03 13:32:13 -05:00
|
|
|
if @avatar
|
|
|
|
@avatar.$el.replaceWith avatar.$el
|
|
|
|
@avatar.destroy()
|
|
|
|
else
|
|
|
|
@$el.find('.thang-avatar-placeholder').replaceWith avatar.$el
|
|
|
|
@avatar = avatar
|
|
|
|
@avatar.render()
|
|
|
|
|
|
|
|
buildDocs: ->
|
2014-09-23 21:32:07 -04:00
|
|
|
return if @spell.name is 'plan' # Too confusing for beginners
|
2014-01-03 13:32:13 -05:00
|
|
|
@docsBuilt = true
|
2014-02-13 19:09:32 -05:00
|
|
|
lcs = @supermodel.getModels LevelComponent
|
|
|
|
found = false
|
|
|
|
for lc in lcs when not found
|
|
|
|
for doc in lc.get('propertyDocumentation') ? []
|
|
|
|
if doc.name is @spell.name
|
|
|
|
found = true
|
|
|
|
break
|
|
|
|
return unless found
|
2014-09-24 19:29:28 -04:00
|
|
|
docFormatter = new DocFormatter doc: doc, thang: @thang, language: @options.codeLanguage, selectedMethod: true
|
2014-11-07 12:08:30 -05:00
|
|
|
@$el.find('.method-signature').popover(
|
2014-02-13 19:09:32 -05:00
|
|
|
animation: true
|
|
|
|
html: true
|
2014-02-20 13:39:16 -05:00
|
|
|
placement: 'bottom'
|
2014-02-13 19:09:32 -05:00
|
|
|
trigger: 'hover'
|
2014-06-26 01:56:39 -04:00
|
|
|
content: docFormatter.formatPopover()
|
2014-02-13 19:09:32 -05:00
|
|
|
container: @$el.parent()
|
2014-09-11 11:38:30 -04:00
|
|
|
).on 'show.bs.popover', =>
|
2015-09-09 17:36:05 -04:00
|
|
|
@playSound 'spell-tab-entry-open', 0.75
|
2014-02-13 19:09:32 -05:00
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
onMouseEnterAvatar: (e) -> # Don't call super
|
|
|
|
onMouseLeaveAvatar: (e) -> # Don't call super
|
|
|
|
onClick: (e) -> # Don't call super
|
2014-07-23 08:38:12 -04:00
|
|
|
onDisableControls: (e) -> @toggleControls e, false
|
|
|
|
onEnableControls: (e) -> @toggleControls e, true
|
2014-01-03 13:32:13 -05:00
|
|
|
|
2016-05-26 20:46:49 -04:00
|
|
|
onClickHintsButton: ->
|
|
|
|
return unless @hintsState?
|
|
|
|
@hintsState.set('hidden', not @hintsState.get('hidden'))
|
|
|
|
window.tracker?.trackEvent 'Hints Clicked', category: 'Students', levelSlug: @options.level.get('slug'), hintCount: @hintsState.get('hints')?.length ? 0, ['Mixpanel']
|
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
onDropdownClick: (e) ->
|
2014-02-24 14:21:51 -05:00
|
|
|
return unless @controlsEnabled
|
2014-08-27 15:24:03 -04:00
|
|
|
Backbone.Mediator.publish 'tome:toggle-spell-list', {}
|
2015-09-09 17:36:05 -04:00
|
|
|
@playSound 'spell-list-open'
|
2014-01-03 13:32:13 -05:00
|
|
|
|
2014-08-27 20:26:56 -04:00
|
|
|
onCodeReload: (e) ->
|
2014-11-08 11:38:25 -05:00
|
|
|
#return unless @controlsEnabled
|
2014-11-07 22:15:55 -05:00
|
|
|
#Backbone.Mediator.publish 'tome:reload-code', spell: @spell # Old: just reload the current code
|
2014-11-08 11:38:25 -05:00
|
|
|
@openModalView new ReloadLevelModal() # New: prompt them to restart the level
|
|
|
|
|
2014-08-27 20:26:56 -04:00
|
|
|
onBeautifyClick: (e) ->
|
2014-02-24 14:21:51 -05:00
|
|
|
return unless @controlsEnabled
|
2014-08-27 15:24:03 -04:00
|
|
|
Backbone.Mediator.publish 'tome:spell-beautify', spell: @spell
|
2014-02-22 20:18:58 -05:00
|
|
|
|
2014-08-27 21:43:17 -04:00
|
|
|
onToggleMaximize: (e) ->
|
2014-08-14 16:29:57 -04:00
|
|
|
$codearea = $('html')
|
|
|
|
$('#code-area').css 'z-index', 20 unless $codearea.hasClass 'fullscreen-editor'
|
|
|
|
$('html').toggleClass 'fullscreen-editor'
|
2014-07-23 08:38:12 -04:00
|
|
|
$('.fullscreen-code').toggleClass 'maximized'
|
2014-08-27 21:43:17 -04:00
|
|
|
Backbone.Mediator.publish 'tome:maximize-toggled', {}
|
2014-07-09 16:41:42 -04:00
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
updateReloadButton: ->
|
|
|
|
changed = @spell.hasChanged null, @spell.getSource()
|
|
|
|
@$el.find('.reload-code').css('display', if changed then 'inline-block' else 'none')
|
|
|
|
|
|
|
|
onSpellLoaded: (e) ->
|
|
|
|
return unless e.spell is @spell
|
|
|
|
@updateReloadButton()
|
|
|
|
|
|
|
|
onSpellChanged: (e) ->
|
|
|
|
return unless e.spell is @spell
|
|
|
|
@updateReloadButton()
|
|
|
|
|
2014-06-26 01:56:39 -04:00
|
|
|
onSpellChangedLanguage: (e) ->
|
|
|
|
return unless e.spell is @spell
|
2014-09-24 19:29:28 -04:00
|
|
|
@options.codeLanguage = e.language
|
2014-11-07 12:08:30 -05:00
|
|
|
@$el.find('.method-signature').popover 'destroy'
|
2014-06-26 01:56:39 -04:00
|
|
|
@render()
|
|
|
|
@docsBuilt = false
|
|
|
|
@buildDocs() if @thang
|
2014-09-24 19:29:28 -04:00
|
|
|
@updateReloadButton()
|
2014-06-26 01:56:39 -04:00
|
|
|
|
2014-01-03 13:32:13 -05:00
|
|
|
toggleControls: (e, enabled) ->
|
|
|
|
# Don't call super; do it differently
|
|
|
|
return if e.controls and not ('editor' in e.controls)
|
|
|
|
return if enabled is @controlsEnabled
|
|
|
|
@controlsEnabled = enabled
|
|
|
|
@$el.toggleClass 'read-only', not enabled
|
2014-02-11 15:02:49 -05:00
|
|
|
|
2014-07-23 09:50:47 -04:00
|
|
|
attachTransitionEventListener: =>
|
|
|
|
transitionListener = ''
|
|
|
|
testEl = document.createElement 'fakeelement'
|
2014-08-27 15:24:03 -04:00
|
|
|
transitions =
|
2014-07-23 09:50:47 -04:00
|
|
|
'transition':'transitionend'
|
|
|
|
'OTransition':'oTransitionEnd'
|
|
|
|
'MozTransition':'transitionend'
|
|
|
|
'WebkitTransition':'webkitTransitionEnd'
|
|
|
|
for transition, transitionEvent of transitions
|
|
|
|
unless testEl.style[transition] is undefined
|
|
|
|
transitionListener = transitionEvent
|
|
|
|
break
|
|
|
|
$codearea = $('#code-area')
|
|
|
|
$codearea.on transitionListener, =>
|
2015-04-07 11:55:33 -04:00
|
|
|
$codearea.css 'z-index', 2 unless $('html').hasClass 'fullscreen-editor'
|
2014-07-23 09:50:47 -04:00
|
|
|
|
|
|
|
|
2014-02-11 15:02:49 -05:00
|
|
|
destroy: ->
|
|
|
|
@avatar?.destroy()
|
2014-11-07 12:08:30 -05:00
|
|
|
@$el.find('.method-signature').popover 'destroy'
|
2014-02-12 21:54:45 -05:00
|
|
|
super()
|