codecombat/app/views/play/level/tome/SpellPaletteEntryView.coffee
Nick Winter d77625bc77 Game dev levels ()
* Tweak API doc behavior and styling

* Instead of moving to the left during active dialogues, just move to the top
* Allow pointer events
* Adjust close button
* Re-enable pinning API docs for game-dev and web-dev levels

* Make sidebar in PlayGameDevLevelView stretch, better layout columns

* Set up content of PlayGameDevLevelView sidebar to scroll

* Add rest of PlayGameDevLevelView sidebar content, rework what loading looks like

* Finish PlayGameDevLevelView

* Add share area below
* Cover the brown background, paint it gray

* Tweak PlayGameDevLevelView

* Have progress bar show everything
* Fix Surface resize handling

* Fix PlayGameDevLevelView resizing incorrectly when playing

* Add GameDevVictoryModal to PlayGameDevLevelView

* Don't show missing-doctype annotation in Ace

* Hook up GameDevVictoryModal copy button

* Fix onChangeAnnotation runtime error

* Fix onLevelLoaded runtime error

* Have CourseVictoryModal link to /courses when course is done

* Trim, update CourseDetailsView

* Remove last vestiges of teacherMode
* Remove giant navigation buttons at top
* Quick switch to flat style

* Add analytics for game-dev

* Update Analytics events for gamedev

* Prefix event names with context
* Send to Mixpanel
* Include more properties

* Mostly set up indefinite play and autocast for game-dev levels

* Set up cast buttons and shortcut for game-dev

* Add rudimentary instructions when students play game-dev levels

* Couple tweaks

* fix a bit of code that expects frames to always stick around
* have PlayGameDevLevelView render a couple frames on load

* API Docs use 'game' instead of 'hero'

* Move tags to head without combining

* Add HTML comment-start string

Fixes missing entry point arrows

* Fix some whitespace
2016-07-28 13:39:58 -07:00

130 lines
4.9 KiB
CoffeeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

CocoView = require 'views/core/CocoView'
template = require 'templates/play/level/tome/spell_palette_entry'
{me} = require 'core/auth'
filters = require 'lib/image_filter'
DocFormatter = require './DocFormatter'
utils = require 'core/utils'
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
overridePopoverTemplate: '<div class="popover spell-palette-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
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
@doc.initialHTML = @docFormatter.formatPopover()
@aceEditors = []
afterRender: ->
super()
@$el.addClass _.string.slugify @doc.type
placement = -> if $('body').hasClass('dialogue-view-active') then 'top' else 'left'
@$el.popover(
animation: false
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', =>
Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @
soundIndex = Math.floor(Math.random() * 4)
@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 ->
aceEditor = utils.initializeACE @, codeLanguage
aceEditors.push aceEditor
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('.spell-palette-popover.popover').removeClass 'pinned'
$('.spell-palette-popover.popover .close').remove()
@$el.popover 'hide'
@playSound 'spell-palette-entry-unpin'
else
@popoverPinned = true
@$el.popover 'show'
@$el.add('.spell-palette-popover.popover').addClass 'pinned'
x = $('<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>')
$('.spell-palette-popover.popover').append x
x.on 'click', @onClick
@playSound 'spell-palette-entry-pin'
Backbone.Mediator.publish 'tome:palette-pin-toggled', entry: @, pinned: @popoverPinned
onClick: (e) =>
if @options.level.isType('hero', 'hero-ladder', 'hero-coop', 'course', 'course-ladder')
# Jiggle instead of pin for hero/course levels
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()
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()
oldEditor.destroy() for oldEditor in @aceEditors
super()