mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-23 14:02:59 -05:00
d77625bc77
* 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
130 lines
4.9 KiB
CoffeeScript
130 lines
4.9 KiB
CoffeeScript
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()
|