Enable docs for web-dev levels

app/styles/play/level/tome/spell-palette-view.sass

@@ -113,6 +113,14 @@
         width: -webkit-calc(100% - 38px)
         width: calc(100% - 38px)
 
+  &.web-dev.hero .properties
+    .property-entry-item-group
+      width: 100px
+
+      .spell-palette-entry-view
+        margin-left: 0
+        width: 100px
+
 @media only screen and (max-width: 1100px)
   #spell-palette-view
     // Make sure we have enough room for at least two columns

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

@@ -95,7 +95,7 @@ if !selectedMethod
             else if language == 'io'
               span= (doc.ownerName == 'this' ? '' : doc.ownerName + ' ') + docName + '(' + argumentExamples.join(', ') + ')'
 
-if (doc.type != 'function' && doc.type != 'snippet') || doc.name == 'now'
+if (doc.type != 'function' && doc.type != 'snippet' && doc.owner != 'HTML') || doc.name == 'now'
   p.value
     strong
       span(data-i18n="skill_docs.current_value") Current Value

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

@@ -49,6 +49,8 @@ module.exports = class DocFormatter
       @doc.type = 'snippet'
       @doc.owner = 'snippets'
       @doc.shortName = @doc.shorterName = @doc.title = @doc.name
+    else if @doc.owner is 'HTML'
+      @doc.shortName = @doc.shorterName = @doc.title = @doc.name
     else
       @doc.owner ?= 'this'
       ownerName = @doc.ownerName = if @doc.owner isnt 'this' then @doc.owner else switch @options.language
@@ -186,6 +188,7 @@ module.exports = class DocFormatter
     [docName, args]
 
   formatValue: (v) ->
+    return null if @options.level.isType('web-dev')
     return null if @doc.type is 'snippet'
     return @options.thang.now() if @doc.name is 'now'
     return '[Function]' if not v and @doc.type is 'function'

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

@@ -33,7 +33,7 @@ module.exports = class SpellPaletteEntryView extends CocoView
 
   afterRender: ->
     super()
-    @$el.addClass(@doc.type)
+    @$el.addClass _.string.slugify @doc.type
     placement = -> if $('body').hasClass('dialogue-view-active') then 'top' else 'left'
     @$el.popover(
       animation: false

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

@@ -87,6 +87,7 @@ module.exports = class SpellPaletteView extends CocoView
             entry.$el.addClass 'first-entry'
       @$el.addClass 'hero'
       @$el.toggleClass 'shortenize', Boolean @shortenize
+      @$el.toggleClass 'web-dev', @options.level.isType('web-dev')
       @updateMaxHeight() unless application.isIPadApp
 
   afterInsert: ->
@@ -100,7 +101,9 @@ module.exports = class SpellPaletteView extends CocoView
     return unless @isHero
     # We figure out how many columns we can fit, width-wise, and then guess how many rows will be needed.
     # We can then assign a height based on the number of rows, and the flex layout will do the rest.
-    columnWidth = if @shortenize then 175 else 212
+    columnWidth = 212
+    columnWidth = 175 if @shortenize
+    columnWidth = 100 if @options.level.isType('web-dev')
     nColumns = Math.floor @$el.find('.properties-this').innerWidth() / columnWidth   # will always have 2 columns, since at 1024px screen we have 424px .properties
     columns = ({items: [], nEntries: 0} for i in [0 ... nColumns])
     orderedColumns = []
@@ -153,6 +156,7 @@ module.exports = class SpellPaletteView extends CocoView
         JSON: 'programmableJSONProperties'
         LoDash: 'programmableLoDashProperties'
         Vector: 'programmableVectorProperties'
+        HTML: 'programmableHTMLProperties'
         snippets: 'programmableSnippets'
     else
       propStorage =
@@ -192,7 +196,7 @@ module.exports = class SpellPaletteView extends CocoView
       return 'more' if entry.doc.owner is 'this' and entry.doc.name in (propGroups.more ? [])
       entry.doc.owner
     @entries = _.sortBy @entries, (entry) ->
-      order = ['this', 'more', 'Math', 'Vector', 'String', 'Object', 'Array', 'Function', 'snippets']
+      order = ['this', 'more', 'Math', 'Vector', 'String', 'Object', 'Array', 'Function', 'HTML', 'snippets']
       index = order.indexOf groupForEntry entry
       index = String.fromCharCode if index is -1 then order.length else index
       index += entry.doc.name
@@ -243,7 +247,7 @@ module.exports = class SpellPaletteView extends CocoView
         console.log @thang.id, "couldn't find item ThangType for", slot, thangTypeName
 
     # Get any Math-, Vector-, etc.-owned properties into their own tabs
-    for owner, storage of propStorage when not (owner in ['this', 'more', 'snippets'])
+    for owner, storage of propStorage when not (owner in ['this', 'more', 'snippets', 'HTML'])
       continue unless @thang[storage]?.length
       @tabs ?= {}
       @tabs[owner] = []
@@ -257,7 +261,7 @@ module.exports = class SpellPaletteView extends CocoView
 
     # Assign any unassigned properties to the hero itself.
     for owner, storage of propStorage
-      continue unless owner in ['this', 'more', 'snippets']
+      continue unless owner in ['this', 'more', 'snippets', 'HTML']
       for prop in _.reject(@thang[storage] ? [], (prop) -> itemsByProp[prop] or prop[0] is '_')  # no private properties
         continue if prop is 'say' and @options.level.get 'hidesSay'  # Hide for Dungeon Campaign
         continue if prop is 'moveXY' and @options.level.get('slug') is 'slalom'  # Hide for Slalom
@@ -282,7 +286,10 @@ module.exports = class SpellPaletteView extends CocoView
           doc ?= prop
         if doc
           @entries.push @addEntry(doc, @shortenize, owner is 'snippets', item, propIndex > 0)
-    @entryGroups = _.groupBy @entries, (entry) -> itemsByProp[entry.doc.name]?.get('name') ? 'Hero'
+    if @options.level.isType('web-dev')
+      @entryGroups = _.groupBy @entries, (entry) -> entry.doc.type
+    else
+      @entryGroups = _.groupBy @entries, (entry) -> itemsByProp[entry.doc.name]?.get('name') ? 'Hero'
     iOSEntryGroups = {}
     for group, entries of @entryGroups
       iOSEntryGroups[group] =

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

@@ -225,7 +225,7 @@ module.exports = class TomeView extends CocoView
     @spellTabView?.setThang thang
 
   updateSpellPalette: (thang, spell) ->
-    return unless thang and @spellPaletteView?.thang isnt thang and thang.programmableProperties or thang.apiProperties
+    return unless thang and @spellPaletteView?.thang isnt thang and (thang.programmableProperties or thang.apiProperties or thang.programmableHTMLProperties)
     useHero = /hero/.test(spell.getSource()) or not /(self[\.\:]|this\.|\@)/.test(spell.getSource())
     @spellPaletteView = @insertSubView new SpellPaletteView { thang, @supermodel, programmable: spell?.canRead(), language: spell?.language ? @options.session.get('codeLanguage'), session: @options.session, level: @options.level, courseID: @options.courseID, courseInstanceID: @options.courseInstanceID, useHero }
     @spellPaletteView.toggleControls {}, spell.view.controlsEnabled if spell?.view   # TODO: know when palette should have been disabled but didn't exist
@@ -266,10 +266,12 @@ module.exports = class TomeView extends CocoView
   createFakeProgrammableThang: ->
     return null unless hero = _.find @options.level.get('thangs'), id: 'Hero Placeholder'
     return null unless programmableConfig = _.find(hero.components, (component) -> component.config?.programmableMethods).config
+    usesHTMLConfig = _.find(hero.components, (component) -> component.config?.programmableHTMLProperties).config
+    console.warn "Couldn't find usesHTML config; is it presented and not defaulted on the Hero Placeholder?" unless usesHTMLConfig
     thang =
       id: 'Hero Placeholder'
       isProgrammable: true
-    thang = _.merge thang, programmableConfig
+    thang = _.merge thang, programmableConfig, usesHTMLConfig
     thang
 
   destroy: ->