mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-28 10:06:08 -05:00
104 lines
3.4 KiB
CoffeeScript
104 lines
3.4 KiB
CoffeeScript
CocoView = require 'views/kinds/CocoView'
|
||
template = require 'templates/play/level/tome/spell_palette_entry'
|
||
{me} = require 'lib/auth'
|
||
filters = require 'lib/image_filter'
|
||
DocFormatter = require './doc_formatter'
|
||
|
||
module.exports = class SpellPaletteEntryView extends CocoView
|
||
tagName: 'div' # Could also try <code> instead of <div>, but would need to adjust colors
|
||
className: 'spell-palette-entry-view'
|
||
template: template
|
||
popoverPinned: false
|
||
|
||
subscriptions:
|
||
'surface:frame-changed': 'onFrameChanged'
|
||
'tome:palette-hovered': 'onPaletteHovered'
|
||
'tome:palette-pin-toggled': 'onPalettePinToggled'
|
||
'tome:spell-debug-property-hovered': 'onSpellDebugPropertyHovered'
|
||
|
||
events:
|
||
'mouseenter': 'onMouseEnter'
|
||
'mouseleave': 'onMouseLeave'
|
||
'click': 'onClick'
|
||
|
||
constructor: (options) ->
|
||
super options
|
||
@thang = options.thang
|
||
@docFormatter = new DocFormatter options
|
||
@doc = @docFormatter.doc
|
||
|
||
getRenderData: ->
|
||
c = super()
|
||
c.doc = @doc
|
||
c
|
||
|
||
afterRender: ->
|
||
super()
|
||
@$el.addClass(@doc.type)
|
||
@$el.popover(
|
||
animation: false
|
||
html: true
|
||
placement: 'top'
|
||
trigger: 'manual' # Hover, until they click, which will then pin it until unclick.
|
||
content: @docFormatter.formatPopover()
|
||
container: '#tome-view'
|
||
)
|
||
@$el.on 'show.bs.popover', =>
|
||
Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @
|
||
|
||
onMouseEnter: (e) ->
|
||
# Make sure the doc has the updated Thang so it can regenerate its prop value
|
||
@$el.data('bs.popover').options.content = @docFormatter.formatPopover()
|
||
@$el.popover('setContent')
|
||
@$el.popover 'show' unless @popoverPinned or @otherPopoverPinned
|
||
|
||
onMouseLeave: (e) ->
|
||
@$el.popover 'hide' unless @popoverPinned or @otherPopoverPinned
|
||
|
||
togglePinned: ->
|
||
if @popoverPinned
|
||
@popoverPinned = false
|
||
@$el.add('#tome-view .popover').removeClass 'pinned'
|
||
$('#tome-view .popover .close').remove()
|
||
@$el.popover 'hide'
|
||
else
|
||
@popoverPinned = true
|
||
@$el.popover 'show'
|
||
@$el.add('#tome-view .popover').addClass 'pinned'
|
||
x = $('<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>')
|
||
$('#tome-view .popover').append x
|
||
x.on 'click', @onClick
|
||
Backbone.Mediator.publish 'tome:palette-pin-toggled', entry: @, pinned: @popoverPinned
|
||
|
||
onClick: (e) =>
|
||
@togglePinned()
|
||
Backbone.Mediator.publish 'tome:palette-clicked', thang: @thang, prop: @doc.name, entry: @
|
||
|
||
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
|
||
|
||
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
|
||
|
||
destroy: ->
|
||
$('.popover.pinned').remove() if @popoverPinned # @$el.popover('destroy') doesn't work
|
||
@togglePinned() if @popoverPinned
|
||
@$el.popover 'destroy'
|
||
@$el.off()
|
||
super()
|