Merge branch 'pr/1383'

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

app/lib/image_filter.coffee

@@ -28,10 +28,12 @@ Filters.brightness = (pixels, adjustment) ->
     i+=4
   return pixels
 
-module.exports.darkenImage = darkenImage = (img, pct=0.5) ->
+module.exports.darkenImage = darkenImage = (img, borderImageSelector, pct=0.5) ->
   jqimg = $(img)
   cachedValue = jqimg.data('darkened')
-  return img.src = cachedValue if cachedValue
+  if cachedValue
+    $(borderImageSelector).css 'border-image-source', 'url(' + cachedValue + ')'
+    return img.src = cachedValue 
   jqimg.data('original', img.src) unless jqimg.data('original')
   if not (img.naturalWidth > 0 and img.naturalHeight > 0)
     console.warn 'Tried to darken image', img, 'but it has natural dimensions', img.naturalWidth, img.naturalHeight
@@ -41,9 +43,11 @@ module.exports.darkenImage = darkenImage = (img, pct=0.5) ->
   ctx = c.getContext('2d')
   ctx.putImageData(imageData, 0, 0)
   img.src = c.toDataURL()
+  $(borderImageSelector).css 'border-image-source', 'url(' + img.src + ')'
   jqimg.data('darkened', img.src)
 
-module.exports.revertImage = revertImage = (img) ->
+module.exports.revertImage = revertImage = (img, borderImageSelector) ->
   jqimg = $(img)
   return unless jqimg.data('original')
+  $(borderImageSelector).css 'border-image-source', 'url(' + jqimg.data('original') + ')'
   img.src = jqimg.data('original')

app/styles/play/level.sass

@@ -42,7 +42,6 @@ body.is-playing
       position: fixed
       width: 100%
       height: 100%
-      z-index: 20
     
   #pointer
     position: absolute

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

@@ -8,7 +8,7 @@
   right: 10px
   background: transparent
   border: 0
-  padding: 18px 35px 18px 14px
+  padding: 7px 20px
   text-shadow: none
   color: white
   word-wrap: break-word
@@ -46,7 +46,8 @@ html.no-borderimage
     border-image: none
     background: transparent url(/images/level/code_editor_error_background.png) no-repeat
     background-size: 100% 100%
-  
+    padding: 18px 35px 18px 14px
+
     &.alert-warning
       background-image: url(/images/level/code_editor_warning_background.png)
       

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

@@ -28,8 +28,8 @@
     width: 100%
     
   span.code-background
-    border-width: 22px
-    border-image: url(/images/level/code_editor_background.png) 22 fill round
+    border-width: 40px
+    border-image: url(/images/level/code_editor_background.png) 40 fill round
 
   img.code-background
     display: none

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

@@ -76,3 +76,11 @@ html.no-borderimage
       background: transparent url(/images/level/popover_background.png)
       background-size: 100% 100%
       border: 0
+
+#code-area.fullscreen-editor
+  #tome-view
+    .popover.pinned
+      min-width: 600px
+      bottom: inherit
+      right: 50%
+      margin-right: -300px

app/templates/play/level/tome/spell_list_tab_entry.jade

@@ -1,3 +1,5 @@
+img(src="/images/level/code_editor_tab_background.png").spell-tab-image-hidden.hidden
+
 .btn.btn-small.spell-list-button(title="See all spells you can edit")
   i.icon-chevron-down
 .thang-avatar-placeholder

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

@@ -3,12 +3,15 @@ ThangAvatarView = require 'views/play/level/ThangAvatarView'
 template = require 'templates/play/level/tome/spell_list_tab_entry'
 LevelComponent = require 'models/LevelComponent'
 DocFormatter = require './DocFormatter'
+filters = require 'lib/image_filter'
 
 module.exports = class SpellListTabEntryView extends SpellListEntryView
   template: template
   id: 'spell-list-tab-entry-view'
 
   subscriptions:
+    'level-disable-controls': 'onDisableControls'
+    'level-enable-controls': 'onEnableControls'
     'tome:spell-loaded': 'onSpellLoaded'
     'tome:spell-changed': 'onSpellChanged'
     'god:new-world-created': 'onNewWorld'
@@ -31,6 +34,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
   afterRender: ->
     super()
     @$el.addClass 'spell-tab'
+    @attachTransitionEventListener()
 
   onNewWorld: (e) ->
     @thang = e.world.thangMap[@thang.id] if @thang
@@ -75,6 +79,8 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
   onMouseEnterAvatar: (e) ->  # Don't call super
   onMouseLeaveAvatar: (e) ->  # Don't call super
   onClick: (e) ->  # Don't call super
+  onDisableControls: (e) -> @toggleControls e, false
+  onEnableControls: (e) -> @toggleControls e, true
 
   onDropdownClick: (e) ->
     return unless @controlsEnabled
@@ -89,12 +95,10 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
     Backbone.Mediator.publish 'spell-beautify', spell: @spell
 
   onFullscreenClick: ->
-    unless $('.fullscreen-code').hasClass 'maximized'
-      $('#code-area').addClass 'fullscreen-editor'
-      $('.fullscreen-code').addClass 'maximized'
-    else
-      $('#code-area').removeClass 'fullscreen-editor'
-      $('.fullscreen-code').removeClass 'maximized'
+    $codearea = $('#code-area')
+    $codearea.css 'z-index', 20 unless $codearea.hasClass 'fullscreen-editor'
+    $('#code-area').toggleClass 'fullscreen-editor'
+    $('.fullscreen-code').toggleClass 'maximized'
 
   updateReloadButton: ->
     changed = @spell.hasChanged null, @spell.getSource()
@@ -122,6 +126,33 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
     return if enabled is @controlsEnabled
     @controlsEnabled = enabled
     @$el.toggleClass 'read-only', not enabled
+    @toggleBackground()
+
+  toggleBackground: =>
+    # TODO: make the palette background an actual background and do the CSS trick
+    # used in spell_list_entry.sass for disabling
+    background = @$el.find('img.spell-tab-image-hidden')[0]
+    if background.naturalWidth is 0  # not loaded yet
+      return _.delay @toggleBackground, 100
+    filters.revertImage background, '.spell-list-entry-view.spell-tab' if @controlsEnabled
+    filters.darkenImage background, '.spell-list-entry-view.spell-tab', 0.8 unless @controlsEnabled
+
+  attachTransitionEventListener: =>
+    transitionListener = ''
+    testEl = document.createElement 'fakeelement'
+    transitions = 
+      'transition':'transitionend'
+      'OTransition':'oTransitionEnd'
+      'MozTransition':'transitionend'
+      'WebkitTransition':'webkitTransitionEnd'
+    for transition, transitionEvent of transitions
+      unless testEl.style[transition] is undefined
+        transitionListener = transitionEvent
+        break
+    $codearea = $('#code-area')
+    $codearea.on transitionListener, =>
+      $codearea.css 'z-index', 1 unless $codearea.hasClass 'fullscreen-editor'
+
 
   destroy: ->
     @avatar?.destroy()

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

@@ -150,11 +150,11 @@ module.exports = class SpellPaletteView extends CocoView
   toggleBackground: =>
     # TODO: make the palette background an actual background and do the CSS trick
     # used in spell_list_entry.sass for disabling
-    background = @$el.find('.code-palette-background')[0]
+    background = @$el.find('img.code-palette-background')[0]
     if background.naturalWidth is 0  # not loaded yet
       return _.delay @toggleBackground, 100
-    filters.revertImage background if @controlsEnabled
-    filters.darkenImage background, 0.8 unless @controlsEnabled
+    filters.revertImage background, 'span.code-palette-background' if @controlsEnabled
+    filters.darkenImage background, 'span.code-palette-background', 0.8 unless @controlsEnabled
 
   onFrameChanged: (e) ->
     return unless e.selectedThang?.id is @thang.id

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

@@ -634,11 +634,11 @@ module.exports = class SpellView extends CocoView
   toggleBackground: =>
     # TODO: make the background an actual background and do the CSS trick
     # used in spell_list_entry.sass for disabling
-    background = @$el.find('.code-background')[0]
+    background = @$el.find('img.code-background')[0]
     if background.naturalWidth is 0  # not loaded yet
       return _.delay @toggleBackground, 100
-    filters.revertImage background if @controlsEnabled
-    filters.darkenImage background, 0.8 unless @controlsEnabled
+    filters.revertImage background, 'span.code-background' if @controlsEnabled
+    filters.darkenImage background, 'span.code-background', 0.8 unless @controlsEnabled
 
   onSpellBeautify: (e) ->
     return unless @spellThang and (@ace.isFocused() or e.spell is @spell)

bower.json

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