Merge branch 'master' of git://github.com/jayant1992/codecombat

app/lib/surface/Camera.coffee

@@ -174,12 +174,12 @@ module.exports = class Camera extends CocoClass
     @zoomTo target, newZoom, 0
 
   onMouseDown: (e) ->
-    return unless e.canvas is @canvas
+    return unless e.canvas is @canvas[0]
     return if @dragDisabled
     @lastPos = {x: e.originalEvent.rawX, y: e.originalEvent.rawY}
 
   onMouseDragged: (e) ->
-    return unless e.canvas is @canvas
+    return unless e.canvas is @canvas[0]
     return if @dragDisabled
     target = @boundTarget(@target, @zoom)
     newPos =

app/lib/surface/CocoSprite.coffee

@@ -501,7 +501,7 @@ module.exports = CocoSprite = class CocoSprite extends CocoClass
     return if @letterboxOn
     p = @imageObject
     p = p.parent while p.parent
-    newEvent = sprite: @, thang: @thang, originalEvent: e, canvas:p
+    newEvent = sprite: @, thang: @thang, originalEvent: e, canvas:p.canvas
     @trigger ourEventName, newEvent
     Backbone.Mediator.publish ourEventName, newEvent
 

app/lib/surface/Surface.coffee

@@ -417,7 +417,7 @@ module.exports = Surface = class Surface extends CocoClass
     @stage.enableMouseOver(10)
     @stage.addEventListener 'stagemousemove', @onMouseMove
     @stage.addEventListener 'stagemousedown', @onMouseDown
-    @stage.addEventListener 'stagemouseup', @onMouseUp
+    @canvas[0].addEventListener 'mouseup', @onMouseUp
     @canvas.on 'mousewheel', @onMouseWheel
     @hookUpChooseControls() if @options.choosing
     createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED

app/styles/editor/level/components_tab.sass

@@ -15,16 +15,21 @@
     top: 0
     bottom: 0
 
+    .editor-nano-container
+      position: relative
+      height: 90%
+      width: 250px
+
       .treema-root
         position: absolute
-      top: 35px
         bottom: 0
         width: 250px
         overflow: scroll
         
         .treema-children .treema-row *
           cursor: pointer !important
-        
+      .nano-pane
+        z-index: 12      
       #components-treema
         z-index: 11
 

app/styles/editor/level/edit.sass

@@ -142,3 +142,10 @@
   .treema-root
     background-color: white
     border-radius: 4px
+
+  .editor-nano-container
+    position: static
+
+  .nano-content
+    outline: thin
+

app/styles/editor/level/scripts_tab.sass

@@ -9,6 +9,7 @@
   .treema-script
     cursor: pointer
   
+  .editor-nano-container
     #scripts-treema
       position: absolute
       top: 0

app/styles/editor/level/systems_tab.sass

@@ -15,9 +15,13 @@
     top: 0
     bottom: 40px
 
+    .editor-nano-container
+      position: relative
+      height: 90%
+      width: 250px
+      
     .treema-root
       position: absolute
-      top: 35px
       bottom: 0
       width: 250px
       overflow: scroll

app/styles/editor/level/thangs_tab.sass

@@ -68,14 +68,20 @@ $mobile: 1050px
     h3
       margin: 0 -20px 0 0
       
+    .editor-nano-container
+      height: 90%
+      position: relative
+      top: 20px
     #thangs-treema
+      height: 100%
+      width: 100%
       position: absolute
-      top: 80px
       left: 0
       right: 0
       bottom: 0
       overflow: scroll
       margin: 0
+      outline: thin
       @media screen and (max-width: $mobile)
         margin: 5px
         top: 40px
@@ -148,6 +154,9 @@ $mobile: 1050px
       @media screen and (max-width: $mobile)
         margin: 0 5px
 
+    #thangs-list-container
+      height: 90%
+
     #thangs-list
       position: relative
       right: 0

app/templates/editor/level/add_thangs.jade

@@ -1,6 +1,7 @@
 h3(data-i18n="editor.level_tab_thangs_add") Add Thangs
 input(type="search", id="thang-search")
-#thangs-list
+div.editor-nano-container.nano
+  #thangs-list.nano-content
     for group in groups
       h4= group.name
       for thangType in group.thangs

app/templates/editor/level/components_tab.jade

@@ -2,7 +2,8 @@
   h3(data-i18n="editor.level_component_tab_title") Current Components
   button.navbar-toggle.toggle.btn-primary(type="button" data-toggle="collapse" data-target="#components-treema")
     span.icon-list
-  #components-treema
+  .editor-nano-container.nano
+    #components-treema.nano-content
 
 .edit-component-container
   if me.isAdmin()

app/templates/editor/level/scripts_tab.jade

@@ -1,6 +1,8 @@
 button.navbar-toggle.toggle.btn-primary(type="button", data-toggle="collapse", data-target="#scripts-treema")
   span.icon-list
 
-#scripts-treema
+.editor-nano-container.nano
+  #scripts-treema.nano-content
 
-#script-treema
+.editor-nano-container.nano
+  #script-treema.nano-content

app/templates/editor/level/settings_tab.jade

@@ -1 +1,2 @@
-#settings-treema
+.editor-nano-container.nano
+  #settings-treema.nano-content

app/templates/editor/level/systems_tab.jade

@@ -2,7 +2,8 @@
   button.navbar-toggle.toggle.btn-primary(type="button" data-toggle="collapse" data-target="#systems-treema")
     span.icon-list
   h3(data-i18n="editor.level_systems_tab_title") Current Systems
-  #systems-treema
+  .editor-nano-container.nano
+    #systems-treema.nano-content
 
 .edit-system-container
   if me.isAdmin()

app/templates/editor/level/thangs_tab.jade

@@ -17,7 +17,8 @@ button.navbar-toggle.toggle.btn-primary#thangs-palette-toggle(type="button", dat
       i.icon-leaf
     button.btn.btn-primary(value="Misc", title="Misc")
       i.icon-question-sign
-  #thangs-treema(title="Double click to configure a thang")
+  .editor-nano-container.nano
+    #thangs-treema.nano-content(title="Double click to configure a thang")
 
 .world-container.thangs-column
   h3(data-i18n="editor.level_tab_thangs_conditions") Starting Conditions

app/views/editor/level/edit.coffee

@@ -113,6 +113,7 @@ module.exports = class EditorLevelView extends View
     button.find('> span').toggleClass('secret')
     
   toggleTab: (e) ->
+    @renderScrollbar()
     return unless $(document).width() <= 800
     li = $(e.target).closest('li')
     if li.hasClass('active')

app/views/editor/level/thangs_tab_view.coffee

@@ -250,7 +250,7 @@ module.exports = class ThangsTabView extends View
 #      @thangsTreema.deselectAll()
 
   selectAddThang: (e) =>
-    return unless e? and $(e.target).closest('#editor-level-thangs-tab-view').length
+    return unless e? and $(e.target).closest('#editor-level-thangs-tab-view').length or key.isPressed('esc')
     if e then target = $(e.target) else target = @$el.find('.add-thangs-palette')  # pretend to click on background if no event
     return true if target.attr('id') is 'surface'
     target = target.closest('.add-thang-palette-icon')

app/views/kinds/CocoView.coffee

@@ -115,6 +115,11 @@ module.exports = class CocoView extends Backbone.View
     context
 
   afterRender: ->
+    @renderScrollbar()
+
+  renderScrollbar: ->
+    #Defer the call till the content actually gets rendered, nanoscroller requires content to be visible
+    _.defer => @$el.find('.nano').nanoScroller()
 
   updateProgress: (progress) ->
     @loadProgress.progress = progress if progress > @loadProgress.progress

app/views/kinds/RootView.coffee

@@ -35,10 +35,6 @@ module.exports = class RootView extends CocoView
     $el ?= @$el.find('.main-content-area')
     super($el)
 
-  renderScrollbar: ->
-    $('.nano-pane').css('display','none')
-    $ -> $('.nano').nanoScroller()
-
   afterInsert: ->
     # force the browser to scroll to the hash
     # also messes with the browser history, so perhaps come up with a better solution