codecombat/app/views/play/level/tome/SpellPaletteEntryView.coffee

132 lines
5 KiB
CoffeeScript
Raw Normal View History

CocoView = require 'views/core/CocoView'
2014-01-03 13:32:13 -05:00
template = require 'templates/play/level/tome/spell_palette_entry'
{me} = require 'core/auth'
2014-01-03 13:32:13 -05:00
filters = require 'lib/image_filter'
DocFormatter = require './DocFormatter'
2015-11-10 18:22:09 -05:00
utils = require 'core/utils'
2014-07-17 20:20:11 -04:00
module.exports = class SpellPaletteEntryView extends CocoView
2014-01-03 13:32:13 -05:00
tagName: 'div' # Could also try <code> instead of <div>, but would need to adjust colors
className: 'spell-palette-entry-view'
template: template
popoverPinned: false
overridePopoverTemplate: '<div class="popover spell-palette-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
2014-01-03 13:32:13 -05:00
subscriptions:
2014-06-30 22:16:26 -04:00
'surface:frame-changed': 'onFrameChanged'
'tome:palette-hovered': 'onPaletteHovered'
'tome:palette-pin-toggled': 'onPalettePinToggled'
'tome:spell-debug-property-hovered': 'onSpellDebugPropertyHovered'
2014-01-03 13:32:13 -05:00
events:
'mouseenter': 'onMouseEnter'
'mouseleave': 'onMouseLeave'
2014-01-03 13:32:13 -05:00
'click': 'onClick'
constructor: (options) ->
super options
@thang = options.thang
@docFormatter = new DocFormatter options
@doc = @docFormatter.doc
@doc.initialHTML = @docFormatter.formatPopover()
@aceEditors = []
2014-01-03 13:32:13 -05:00
afterRender: ->
super()
2016-07-14 22:14:18 -04:00
@$el.addClass _.string.slugify @doc.type
placement = -> if $('body').hasClass('dialogue-view-active') then 'top' else 'left'
@$el.popover(
animation: false
2014-01-03 13:32:13 -05:00
html: true
placement: placement
trigger: 'manual' # Hover, until they click, which will then pin it until unclick.
content: @docFormatter.formatPopover()
container: 'body'
template: @overridePopoverTemplate
).on 'shown.bs.popover', =>
2014-02-20 13:39:16 -05:00
Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @
2014-09-11 11:38:30 -04:00
soundIndex = Math.floor(Math.random() * 4)
2015-09-25 09:00:03 -04:00
@playSound "spell-palette-entry-open-#{soundIndex}", 0.75
popover = @$el.data('bs.popover')
popover?.$tip?.i18n()
codeLanguage = @options.language
oldEditor.destroy() for oldEditor in @aceEditors
@aceEditors = []
aceEditors = @aceEditors
# Initialize Ace for each popover code snippet
popover?.$tip?.find('.docs-ace').each ->
2015-11-10 18:22:09 -05:00
aceEditor = utils.initializeACE @, codeLanguage
aceEditors.push aceEditor
onMouseEnter: (e) ->
2014-01-03 13:32:13 -05:00
# Make sure the doc has the updated Thang so it can regenerate its prop value
@$el.data('bs.popover').options.content = @docFormatter.formatPopover()
2014-01-03 13:32:13 -05:00
@$el.popover('setContent')
2014-02-20 13:39:16 -05:00
@$el.popover 'show' unless @popoverPinned or @otherPopoverPinned
onMouseLeave: (e) ->
2014-02-20 13:39:16 -05:00
@$el.popover 'hide' unless @popoverPinned or @otherPopoverPinned
togglePinned: ->
if @popoverPinned
@popoverPinned = false
@$el.add('.spell-palette-popover.popover').removeClass 'pinned'
$('.spell-palette-popover.popover .close').remove()
@$el.popover 'hide'
2015-09-09 17:36:05 -04:00
@playSound 'spell-palette-entry-unpin'
else
@popoverPinned = true
2014-02-20 13:39:16 -05:00
@$el.popover 'show'
@$el.add('.spell-palette-popover.popover').addClass 'pinned'
2014-02-20 13:39:16 -05:00
x = $('<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>')
$('.spell-palette-popover.popover').append x
2014-02-20 13:39:16 -05:00
x.on 'click', @onClick
2015-09-09 17:36:05 -04:00
@playSound 'spell-palette-entry-pin'
2014-02-20 13:39:16 -05:00
Backbone.Mediator.publish 'tome:palette-pin-toggled', entry: @, pinned: @popoverPinned
2014-01-03 13:32:13 -05:00
2014-02-20 13:39:16 -05:00
onClick: (e) =>
if true or @options.level.isType('hero', 'hero-ladder', 'hero-coop', 'course', 'course-ladder', 'game-dev')
# Jiggle instead of pin for hero levels
# Actually, do it all the time, because we recently busted the pin CSS. TODO: restore pinning
jigglyPopover = $('.spell-palette-popover.popover')
jigglyPopover.addClass 'jiggling'
pauseJiggle = =>
jigglyPopover.removeClass 'jiggling'
_.delay pauseJiggle, 1000
return
if key.shift
Backbone.Mediator.publish 'tome:insert-snippet', doc: @options.doc, language: @options.language, formatted: @doc
return
@togglePinned()
2014-02-20 13:39:16 -05:00
Backbone.Mediator.publish 'tome:palette-clicked', thang: @thang, prop: @doc.name, entry: @
2014-01-03 13:32:13 -05:00
onFrameChanged: (e) ->
return unless e.selectedThang?.id is @thang.id
@options.thang = @thang = @docFormatter.options.thang = e.selectedThang # Update our thang to the current version
2014-02-11 14:31:02 -05:00
2014-02-20 13:39:16 -05:00
onPaletteHovered: (e) ->
return if e.entry is @
@togglePinned() if @popoverPinned
onPalettePinToggled: (e) ->
return if e.entry is @
@otherPopoverPinned = e.pinned
onSpellDebugPropertyHovered: (e) ->
matched = e.property is @doc.name and e.owner is @doc.owner
if matched and not @debugHovered
@debugHovered = true
@togglePinned() unless @popoverPinned
else if @debugHovered and not matched
@debugHovered = false
@togglePinned() if @popoverPinned
null
2014-02-11 14:31:02 -05:00
destroy: ->
$('.popover.pinned').remove() if @popoverPinned # @$el.popover('destroy') doesn't work
@togglePinned() if @popoverPinned
@$el.popover 'destroy'
2014-02-11 14:31:02 -05:00
@$el.off()
oldEditor.destroy() for oldEditor in @aceEditors
super()