Merge pull request #1442 from dkundel/master

Fixing most of the issues described in #18

app/styles/play/level.sass

@@ -38,10 +38,6 @@ body.is-playing
     top: 0px
     bottom: 0
     transition: width 0.5s ease-in-out
-    &.fullscreen-editor
-      position: fixed
-      width: 100%
-      height: 100%
     
   #pointer
     position: absolute
@@ -153,3 +149,10 @@ body.is-playing
       a
         color: white
         text-decoration: underline
+
+html.fullscreen-editor
+  #level-view
+    #code-area
+      position: fixed
+      width: 100%
+      height: 100%

app/styles/play/level/tome/spell_palette_entry.sass

@@ -30,3 +30,75 @@
   &.undefined
     color: rgb(197, 6, 11)
 
+.spell-palette-popover.popover
+  // Only those popovers which are our direct children (spell documentation)
+  max-width: 600px
+
+  &.pinned
+    left: auto !important
+    top: 50px !important
+    right: 45%
+    // bottom: 151px
+    @include user-select(text)
+    // Wish I could set max-width and max-height (and override Bootstrap's stuff)
+    // but without explicitly setting height, child overflow-y: scroll doesn't work
+    min-width: 45%
+    height: 60%
+
+    .arrow
+      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)
+
+  padding: 10px 10px 30px 10px
+  border-image: url(/images/level/popover_background.png) 18 fill round
+  border-width: 15px
+  @include box-shadow(0 0 0 #000)
+
+  h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace
+
+  .popover-title
+    background-color: transparent
+    margin: 0 14px
+    padding: 8px 0
+    border-bottom-color: #ccc
+
+  .popover-content
+    max-height: 100%
+    overflow-y: auto
+    margin-right: 10px
+    img
+      float: right
+
+  &.top .arrow
+    bottom: -2%
+  &.bottom .arrow
+    top: -2%
+  &.left .arrow
+    right: 0%
+  &.right .arrow
+    left: -3%
+
+html.no-borderimage
+  .spell-palette-popover.popover
+    background: transparent url(/images/level/popover_background.png)
+    background-size: 100% 100%
+    border: 0
+
+html.fullscreen-editor
+  .spell-palette-popover.popover.pinned
+    min-width: 600px
+    bottom: inherit
+    right: 50%
+    margin-right: -300px

app/styles/play/level/tome/tome.sass

@@ -70,6 +70,10 @@
     display: inline-block
     padding: 5px
 
+// Set z-index of autocomplete popup smaller than the one of popovers
+.ace_editor.ace_autocomplete 
+  z-index: 20 !important
+
 html.no-borderimage
   #tome-view
     .popover

app/views/play/level/tome/SpellListTabEntryView.coffee

@@ -95,9 +95,9 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
     Backbone.Mediator.publish 'spell-beautify', spell: @spell
 
   onFullscreenClick: ->
-    $codearea = $('#code-area')
+    $codearea = $('html')
-    $codearea.css 'z-index', 20 unless $codearea.hasClass 'fullscreen-editor'
+    $('#code-area').css 'z-index', 20 unless $codearea.hasClass 'fullscreen-editor'
-    $('#code-area').toggleClass 'fullscreen-editor'
+    $('html').toggleClass 'fullscreen-editor'
     $('.fullscreen-code').toggleClass 'maximized'
 
   updateReloadButton: ->
@@ -151,7 +151,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
         break
     $codearea = $('#code-area')
     $codearea.on transitionListener, =>
-      $codearea.css 'z-index', 1 unless $codearea.hasClass 'fullscreen-editor'
+      $codearea.css 'z-index', 1 unless $('html').hasClass 'fullscreen-editor'
 
 
   destroy: ->

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

@@ -9,6 +9,7 @@ module.exports = class SpellPaletteEntryView extends CocoView
   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'
@@ -41,8 +42,10 @@ module.exports = class SpellPaletteEntryView extends CocoView
       placement: 'top'
       trigger: 'manual'  # Hover, until they click, which will then pin it until unclick.
       content: @docFormatter.formatPopover()
-      container: '#tome-view'
+      container: 'body'
+      template: @overridePopoverTemplate
     )
+    window.element = @$el
     @$el.on 'show.bs.popover', =>
       Backbone.Mediator.publish 'tome:palette-hovered', thang: @thang, prop: @doc.name, entry: @
 
@@ -58,15 +61,15 @@ module.exports = class SpellPaletteEntryView extends CocoView
   togglePinned: ->
     if @popoverPinned
       @popoverPinned = false
-      @$el.add('#tome-view .popover').removeClass 'pinned'
+      @$el.add('.spell-palette-popover.popover').removeClass 'pinned'
-      $('#tome-view .popover .close').remove()
+      $('.spell-palette-popover.popover .close').remove()
       @$el.popover 'hide'
     else
       @popoverPinned = true
       @$el.popover 'show'
-      @$el.add('#tome-view .popover').addClass 'pinned'
+      @$el.add('.spell-palette-popover.popover').addClass 'pinned'
       x = $('<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>')
-      $('#tome-view .popover').append x
+      $('.spell-palette-popover.popover').append x
       x.on 'click', @onClick
     Backbone.Mediator.publish 'tome:palette-pin-toggled', entry: @, pinned: @popoverPinned
 

app/views/play/level/tome/SpellView.coffee

@@ -50,6 +50,7 @@ module.exports = class SpellView extends CocoView
     'tome:update-snippets': 'addZatannaSnippets'
     'tome:insert-snippet': 'onInsertSnippet'
     'spell-beautify': 'onSpellBeautify'
+    'script:state-changed': 'onScriptStateChange'
 
   events:
     'mouseout': 'onMouseOut'
@@ -124,10 +125,15 @@ module.exports = class SpellView extends CocoView
     addCommand
       name: 'end-current-script'
       bindKey: {win: 'Shift-Space', mac: 'Shift-Space'}
-      passEvent: true  # https://github.com/ajaxorg/ace/blob/master/lib/ace/keyboard/keybinding.js#L114
+      # passEvent: true  # https://github.com/ajaxorg/ace/blob/master/lib/ace/keyboard/keybinding.js#L114
       # No easy way to selectively cancel shift+space, since we don't get access to the event.
       # Maybe we could temporarily set ourselves to read-only if we somehow know that a script is active?
-      exec: -> Backbone.Mediator.publish 'level:shift-space-pressed'
+      exec: => 
+        if @scriptRunning
+          Backbone.Mediator.publish 'level:shift-space-pressed'
+        else 
+          @ace.insert ' '
+
     addCommand
       name: 'end-all-scripts'
       bindKey: {win: 'Escape', mac: 'Escape'}
@@ -193,7 +199,7 @@ module.exports = class SpellView extends CocoView
             tabTrigger: doc.snippets[e.language].tab
           snippetEntries.push entry
 
-    # window.zatanna = @zatanna
+    # window.zatannaInstance = @zatanna
     # window.snippetEntries = snippetEntries
     lang = @editModes[e.language].substr 'ace/mode/'.length
     @zatanna.addSnippets snippetEntries, lang
@@ -683,6 +689,9 @@ module.exports = class SpellView extends CocoView
     @spell.hasChangedSignificantly @getSource(), null, (hasChanged) =>
       @recompile() if hasChanged
 
+  onScriptStateChange: (e) ->
+    @scriptRunning = if e.currentScript is null then false else true
+
   destroy: ->
     $(@ace?.container).find('.ace_gutter').off 'click', '.ace_error, .ace_warning, .ace_info', @onAnnotationClick
     @firepad?.dispose()

bower.json

@@ -44,7 +44,7 @@
     "bootstrap": "~3.1.1",
     "validated-backbone-mediator": "~0.1.3",
     "jquery.browser": "~0.0.6",
-    "zatanna": "~0.0.4",
+    "zatanna": "~0.0.5",
     "modernizr": "~2.8.3"
   },
   "overrides": {