codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-24 08:08:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes for popover behavior.

Browse source
This commit is contained in:
Nick Winter 2014-02-20 10:39:16 -08:00
parent 99de854536
commit f81e0c85ef
3 changed files with 48 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/styles/play/level/tome/tome.sass
View file

@ -6,6 +6,9 @@
> .popover > .popover
// Only those popovers which are our direct children (spell documentation) // Only those popovers which are our direct children (spell documentation)
max-width: 600px
&.pinned
left: auto !important left: auto !important
top: auto !important top: auto !important
right: 100% right: 100%
@ -16,8 +19,20 @@
min-width: 100% min-width: 100%
height: 60% height: 60%
&.pinned .arrow
@include box-shadow(0 0 500px white) display: none
.close
position: absolute
top: 5%
right: 5%
font-size: 28px
font-weight: bold
@include opacity(0.6)
text-shadow: 0 1px 0 white
&:hover
@include opacity(1)
.popover .popover
padding: 10px 10px 30px 10px padding: 10px 10px 30px 10px

2
app/views/play/level/tome/spell_list_tab_entry_view.coffee
View file

@ -64,7 +64,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
@$el.find('code').popover( @$el.find('code').popover(
animation: true animation: true
html: true html: true
placement: 'left' placement: 'bottom'
trigger: 'hover' trigger: 'hover'
content: @formatPopover doc content: @formatPopover doc
container: @$el.parent() container: @$el.parent()

28
app/views/play/level/tome/spell_palette_entry_view.coffee
View file

@ -64,6 +64,8 @@ module.exports = class SpellPaletteEntryView extends View
subscriptions: subscriptions:
'surface:frame-changed': "onFrameChanged" 'surface:frame-changed': "onFrameChanged"
'tome:palette-hovered': "onPaletteHovered"
'tome:palette-pin-toggled': "onPalettePinToggled"
events: events:
'mouseenter': 'onMouseEnter' 'mouseenter': 'onMouseEnter'
@ -100,13 +102,13 @@ module.exports = class SpellPaletteEntryView extends View
@$el.popover( @$el.popover(
animation: false animation: false
html: true html: true
placement: 'left' placement: 'top'
trigger: 'manual' # Hover, until they click, which will then pin it until unclick. trigger: 'manual' # Hover, until they click, which will then pin it until unclick.
content: @formatPopover() content: @formatPopover()
container: '#tome-view' container: '#tome-view'
) )
@$el.on 'show.bs.popover', => @$el.on 'show.bs.popover', =>
Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @
formatPopover: -> formatPopover: ->
content = popoverTemplate doc: @doc, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? []) content = popoverTemplate doc: @doc, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? [])
@ -143,31 +145,45 @@ module.exports = class SpellPaletteEntryView extends View
# Make sure the doc has the updated Thang so it can regenerate its prop value # Make sure the doc has the updated Thang so it can regenerate its prop value
@$el.data('bs.popover').options.content = @formatPopover() @$el.data('bs.popover').options.content = @formatPopover()
@$el.popover('setContent') @$el.popover('setContent')
@$el.popover 'show' unless @popoverPinned @$el.popover 'show' unless @popoverPinned or @otherPopoverPinned
onMouseLeave: (e) -> onMouseLeave: (e) ->
@$el.popover 'hide' unless @popoverPinned @$el.popover 'hide' unless @popoverPinned or @otherPopoverPinned
togglePinned: -> togglePinned: ->
if @popoverPinned if @popoverPinned
@popoverPinned = false @popoverPinned = false
@$el.add('#tome-view .popover').removeClass 'pinned' @$el.add('#tome-view .popover').removeClass 'pinned'
$('#tome-view .popover .close').remove()
@$el.popover 'hide' @$el.popover 'hide'
else else
@popoverPinned = true @popoverPinned = true
@$el.popover 'show'
@$el.add('#tome-view .popover').addClass 'pinned' @$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) -> onClick: (e) =>
unless @popoverPinned unless @popoverPinned
$(e.target).selectText() $(e.target).selectText()
e.stopPropagation() # don't re-focus editor since we might want to select text e.stopPropagation() # don't re-focus editor since we might want to select text
@togglePinned() @togglePinned()
Backbone.Mediator.publish 'tome:palette-clicked', thang: @thang, prop: @doc.name Backbone.Mediator.publish 'tome:palette-clicked', thang: @thang, prop: @doc.name, entry: @
onFrameChanged: (e) -> onFrameChanged: (e) ->
return unless e.selectedThang?.id is @thang.id return unless e.selectedThang?.id is @thang.id
@options.thang = @thang = e.selectedThang # Update our thang to the current version @options.thang = @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
destroy: -> destroy: ->
$('.popover.pinned').remove() if @popoverPinned # @$el.popover('destroy') doesn't work $('.popover.pinned').remove() if @popoverPinned # @$el.popover('destroy') doesn't work
@togglePinned() if @popoverPinned @togglePinned() if @popoverPinned