refactor the presenters + convert the editable_elements partial into a full backbone, coffeescript, handlebar, json stack

app/assets/javascripts/locomotive/models/editable_element.js.coffee

@@ -0,0 +1,13 @@
+class Locomotive.Models.EditableElement extends Backbone.Model
+
+
+class Locomotive.Models.EditableElementsCollection extends Backbone.Collection
+
+  blocks: ->
+    names = _.uniq(@map (editable, index) -> editable.get('block_name'))
+    _.tap [], (list) =>
+      _.each names, (name, index) ->
+        list.push name: name, index: index
+
+  by_block: (name) ->
+    @filter (editable) -> editable.get('block_name') == name

app/assets/javascripts/locomotive/models/page.js.coffee

@@ -0,0 +1,7 @@
+class Locomotive.Models.Page extends Backbone.Model
+
+  initialize: ->
+    @set
+      editable_elements: new Locomotive.Models.EditableElementsCollection(@get('editable_elements'))
+
+class Locomotive.Models.PagesCollection extends Backbone.Collection

app/assets/javascripts/locomotive/utils/handlebar_helpers.js.coffee

@@ -0,0 +1,9 @@
+Handlebars.registerHelper 'each_with_index', (context, block) ->
+  ret = ""
+
+  for num in context
+    data = context[num]
+    data._index = num
+    ret = ret + block(data)
+
+  ret

app/assets/javascripts/locomotive/utils/tinymce_settings.js

@@ -1,18 +0,0 @@
-window.TinyMceDefaultSettings = {
-  theme : 'advanced',
-  skin : 'locomotive',
-  plugins: 'safari,jqueryinlinepopups,locomotive_media,fullscreen',
-  extended_valid_elements: 'iframe[width|height|frameborder|allowfullscreen|src|title]',
-  theme_advanced_buttons1 : 'fullscreen,code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,locomotive_media',
-  theme_advanced_buttons2 : 'formatselect,fontselect,fontsizeselect',
-  theme_advanced_buttons3 : '',
-  theme_advanced_toolbar_location : "top",
-  theme_advanced_toolbar_align : "left",
-  height: '300',
-  width: '709',
-  convert_urls: false,
-  fullscreen_new_window : false,
-  fullscreen_settings : {
-    theme_advanced_path_location : "top"
-  }
-};

app/assets/javascripts/locomotive/utils/tinymce_settings.js.coffee

@@ -0,0 +1,31 @@
+window.Locomotive.tinyMCE =
+
+  defaultSettings:
+    theme: 'advanced'
+    skin: 'locomotive'
+    plugins: 'safari,jqueryinlinepopups,locomotive_media,fullscreen'
+    extended_valid_elements: 'iframe[width|height|frameborder|allowfullscreen|src|title]'
+    theme_advanced_buttons1: 'fullscreen,code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,locomotive_media'
+    theme_advanced_buttons2: 'formatselect,fontselect,fontsizeselect'
+    theme_advanced_buttons3: ''
+    theme_advanced_toolbar_location: 'top'
+    theme_advanced_toolbar_align: 'left'
+    height: '300'
+    width: '709'
+    convert_urls: false
+    fullscreen_new_window: false
+    fullscreen_settings:
+      theme_advanced_path_location: 'top'
+
+  minimalSettings:
+    theme: 'advanced'
+    skin: 'locomotive'
+    plugins: 'safari,jqueryinlinepopups,locomotive_media'
+    theme_advanced_buttons1: 'code,|,bold,italic,strikethrough,|,fontselect,fontsizeselect,|,link,unlink,|,locomotive_media'
+    theme_advanced_buttons2: ''
+    theme_advanced_buttons3: ''
+    theme_advanced_toolbar_location: 'top'
+    theme_advanced_toolbar_align: 'left'
+    height: '20'
+    width: '709'
+    convert_urls: false

app/assets/javascripts/locomotive/utils/uploadify.js.coffee

@@ -1,4 +1,4 @@
-window.LocomotiveUploadify =
+window.Locomotive.Uploadify =
 
   build: (el, options) ->
     multipart_params = @_get_default_multipart_params()

app/assets/javascripts/locomotive/views/application_view.js.coffee

@@ -10,10 +10,11 @@ class Locomotive.Views.ApplicationView extends Backbone.View
     @center_ui_dialog()
 
     if @options.view?
-      @view = new @options.view
+      @view = new @options.view(@options.view_data || {})
       @view.render()
 
-    window.TinyMceDefaultSettings.language = window.locale # set the default tinyMCE language
+    window.Locomotive.tinyMCE.defaultSettings.language = window.locale # set the default tinyMCE language
+    window.Locomotive.tinyMCE.minimalSettings.language = window.locale
 
     return @
 

app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee

@@ -15,7 +15,7 @@ class Locomotive.Views.ContentAssets.PickerView extends Locomotive.Views.Shared.
     @collection.fetch()
 
   build_uploader: (el, link) ->
-    window.LocomotiveUploadify.build el,
+    window.Locomotive.Uploadify.build el,
       url:        link.attr('href')
       data_name:  el.attr('name')
       height:     link.outerHeight()

app/assets/javascripts/locomotive/views/editable_elements/edit_all_view.js.coffee

@@ -0,0 +1,62 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.EditAllView extends Backbone.View
+
+  id: 'editable-elements'
+
+  tagName: 'div'
+
+  _editable_elements_views: []
+
+  render: ->
+    window.foo = @collection
+
+    @blocks = @collection.blocks()
+
+    $(@el).html(ich.editable_elements_edit(blocks: @blocks))
+
+    @render_elements()
+
+    @enable_nav()
+
+    return @
+
+  render_elements: ->
+    index = 0
+
+    _.each @blocks, (block) =>
+      list = @collection.by_block block.name
+
+      _.each list, (element) =>
+        element.set(index: index)
+
+        view_class = switch element.get('type')
+          when 'EditableShortText' then Locomotive.Views.EditableElements.ShortTextView
+          when 'EditableLongText' then Locomotive.Views.EditableElements.LongTextView
+          when 'EditableFile' then Locomotive.Views.EditableElements.FileView
+
+        view = new view_class(model: element)
+        @$("#block-#{block.index} > fieldset > ol").append(view.render().el)
+
+        @_editable_elements_views.push(view)
+
+        index += 1
+
+  enable_nav: ->
+    @$('.nav a').click (event) =>
+      event.stopPropagation() & event.preventDefault()
+
+      link  = $(event.target)
+      index = parseInt(link.attr('href').match(/block-(.+)/)[1])
+
+      @$('.wrapper ul li.block').hide()
+      @$("#block-#{index}").show()
+      @_hide_last_separator()
+
+      link.parent().find('.on').removeClass('on')
+      link.addClass('on')
+
+  _hide_last_separator: ->
+    _.each @$('fieldset'), (fieldset) =>
+      $(fieldset).find('li.last').removeClass('last')
+      $(_.last($(fieldset).find('li.input:visible'))).addClass('last')

app/assets/javascripts/locomotive/views/editable_elements/file_view.js.coffee

@@ -0,0 +1,12 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.FileView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'file input'
+
+  render: ->
+    $(@el).html(ich.editable_file_input(@model.toJSON()))
+
+    return @

app/assets/javascripts/locomotive/views/editable_elements/long_text_view.js.coffee

@@ -0,0 +1,14 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.LongTextView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'text input html'
+
+  render: ->
+    $(@el).html(ich.editable_text_input(@model.toJSON()))
+
+    @$('textarea').tinymce window.Locomotive.tinyMCE.defaultSettings
+
+    return @

app/assets/javascripts/locomotive/views/editable_elements/short_text_view.js.coffee

@@ -0,0 +1,14 @@
+Locomotive.Views.EditableElements ||= {}
+
+class Locomotive.Views.EditableElements.ShortTextView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'text input html'
+
+  render: ->
+    $(@el).html(ich.editable_text_input(@model.toJSON()))
+
+    @$('textarea').tinymce window.Locomotive.tinyMCE.minimalSettings
+
+    return @

app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee

@@ -16,11 +16,17 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
   initialize: ->
     _.bindAll(@, 'insert_image')
 
+    @page = new Locomotive.Models.Page(@options.page)
+
+    window.page = @page
+
     @filled_slug = @touched_url = false
     @image_picker_view = new Locomotive.Views.ThemeAssets.ImagePickerView
       collection: new Locomotive.Models.ThemeAssetsCollection()
       on_select:  @insert_image
 
+    @editable_elements_view = new Locomotive.Views.EditableElements.EditAllView(collection: @page.get('editable_elements'))
+
   render: ->
     super()
 
@@ -38,7 +44,8 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
     @enable_liquid_editing()
 
     # editable elements
-    @enable_editable_elements_nav()
+    @render_editable_elements()
+    # @enable_editable_elements_nav()
 
     return @
 
@@ -64,21 +71,8 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
   after_inputs_fold: ->
     @editor.refresh()
 
-  enable_editable_elements_nav: ->
+  render_editable_elements: ->
-    @$('#editable-elements .nav a').click (event) =>
+    @$('.formtastic fieldset.inputs:first').after(@editable_elements_view.render().el)
-      event.stopPropagation() & event.preventDefault()
-
-      link  = $(event.target)
-      index = parseInt(link.attr('href').match(/block-(.+)/)[1])
-
-      @$('#editable-elements .wrapper ul li.block').hide()
-      $("#block-#{index}").show()
-      @_hide_last_separator()
-
-      link.parent().find('.on').removeClass('on')
-      link.addClass('on')
-
-    @$('#editable-elements textarea').tinymce window.TinyMceDefaultSettings
 
   fill_default_slug: (event) ->
     unless @filled_slug

app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee

@@ -14,7 +14,7 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Locomotive.Views.Shar
     @collection.fetch data: { content_type: 'image' }
 
   build_uploader: (el, link) ->
-    window.LocomotiveUploadify.build el,
+    window.Locomotive.Uploadify.build el,
       url:        link.attr('href')
       data_name:  el.attr('name')
       height:     link.outerHeight()

app/controllers/locomotive/current_site_controller.rb

@@ -1,30 +1,29 @@
 module Locomotive
   class CurrentSiteController < BaseController
 
-    defaults :instance_name => 'site'
-
     sections 'settings', 'site'
 
-    actions :edit, :update
-
     skip_load_and_authorize_resource
 
     load_and_authorize_resource :class => 'Site'
 
     respond_to :json, :only => :update
 
+    def edit
+      @site = current_site
+      respond_with @site
+    end
+
     def update
-      update! do |success, failure|
+      @site = current_site
-        success.html { redirect_to edit_current_site_url(new_host_if_subdomain_changed) }
+      @site.update_attributes(params[:site])
+      respond_with @site do |format|
+        format.html { redirect_to edit_current_site_url(new_host_if_subdomain_changed) }
       end
     end
 
     protected
 
-    def resource
-      @site = current_site
-    end
-
     def new_host_if_subdomain_changed
       if !Locomotive.config.manage_subdomain? || @site.domains.include?(request.host)
         {}

app/controllers/locomotive/pages_controller.rb

@@ -3,13 +3,18 @@ module Locomotive
 
     sections 'contents'
 
-    respond_to  :json, :only => [:update, :sort, :get_path]
+    respond_to  :json, :only => [:show, :update, :sort, :get_path]
 
     def index
       @pages = current_site.all_pages_in_once
       respond_with(@pages)
     end
 
+    def show
+      @page = current_site.pages.find(params[:id])
+      respond_with @page
+    end
+
     def new
       @page = current_site.pages.build
       respond_with @page
@@ -28,16 +33,17 @@ module Locomotive
     def update
       @page = current_site.pages.find(params[:id])
       @page.update_attributes(params[:page])
-      respond_with @page do |format|
+      puts @page.errors.inspect
-        format.html { redirect_to edit_page_url(@page._id) }
+      respond_with @page, :location => edit_page_url(@page._id)
-        format.json do
+      # do |format|
-          render :json => {
+      #   format.json do
-            :notice => t('flash.locomotive.pages.update.notice'),
+      #     render :json => {
-            :editable_elements => @page.template_changed ?
+      #       :notice => t('flash.locomotive.pages.update.notice'),
-              render_to_string(:partial => 'locomotive/pages/editable_elements.html.haml') : ''
+      #       :editable_elements => @page.template_changed ?
-          }
+      #         render_to_string(:partial => 'locomotive/pages/editable_elements.html.haml') : ''
-        end
+      #     }
-      end
+      #   end
+      # end
     end
 
     def destroy

app/helpers/locomotive/base_helper.rb

@@ -55,6 +55,21 @@ module Locomotive::BaseHelper
     end
   end
 
+  def backbone_view_class_name
+    action = case controller.action_name
+    when 'create' then 'New'
+    when 'update' then 'Edit'
+    else
+      controller.action_name
+    end.camelize
+
+    "Locomotive.Views.#{controller.controller_name.camelize}.#{action}View"
+  end
+
+  def backbone_view_data
+    content_for?(:backbone_view_data) ? content_for(:backbone_view_data) : 'null'
+  end
+
   def nocoffee_tag
     link_to 'noCoffee', 'http://www.nocoffee.fr', :id => 'nocoffee'
   end

app/models/locomotive/editable_file.rb

@@ -7,5 +7,9 @@ module Locomotive
       self.source? ? self.source.url : self.default_content
     end
 
+    def as_json(options = {})
+      Locomotive::EditableFilePresenter.new(self).as_json
+    end
+
   end
 end

app/models/locomotive/editable_long_text.rb

@@ -1,5 +1,9 @@
 module Locomotive
   class EditableLongText < EditableShortText
 
+    def as_json(options = {})
+      Locomotive::EditableLongTextPresenter.new(self).as_json
+    end
+
   end
 end

app/models/locomotive/editable_short_text.rb

@@ -10,5 +10,9 @@ module Locomotive
       self.read_attribute(:content).blank? ? self.default_content : self.read_attribute(:content)
     end
 
+    def as_json(options = {})
+      Locomotive::EditableShortTextPresenter.new(self).as_json
+    end
+
   end
 end

app/models/locomotive/extensions/page/editable_elements.rb

@@ -32,9 +32,12 @@ module Locomotive
             self.editable_elements.collect(&:block)
           end
 
+          def enabled_editable_elements
+            self.editable_elements.by_priority.reject { |el| el.disabled? }
+          end
+
           def editable_elements_grouped_by_blocks
-            all_enabled = self.editable_elements.by_priority.reject { |el| el.disabled? }
+            groups = self.enabled_editable_elements.group_by(&:block)
-            groups = all_enabled.group_by(&:block)
             groups.delete_if { |block, elements| elements.empty? }
           end
 
@@ -90,7 +93,7 @@ module Locomotive
             return unless self.editable_elements.any? { |el| el.disabled? }
 
             # super fast way to remove useless elements all in once (TODO callbacks)
-            self.collection.update(self._selector, '$pull' => { 'editable_elements' => { 'disabled' => true } })
+            self.collection.update(self.atomic_selector, '$pull' => { 'editable_elements' => { 'disabled' => true } })
           end
 
           protected

app/models/locomotive/page.rb

@@ -84,6 +84,10 @@ module Locomotive
       Locomotive::Liquid::Drops::Page.new(self)
     end
 
+    def as_json(options = {})
+      Locomotive::PagePresenter.new(self).as_json
+    end
+
     protected
 
     def do_not_remove_index_and_404_pages

app/presenters/locomotive/base_presenter.rb

@@ -7,6 +7,8 @@ class Locomotive::BasePresenter
 
   attr_reader :source
 
+  delegate :created_at, :updated_at, :to => :source
+
   def initialize(object)
     @source = object
   end
@@ -15,8 +17,16 @@ class Locomotive::BasePresenter
     @source._id.to_s
   end
 
-  # def as_json(options = {})
+  def included_methods
-  #   @source.as_json(options)
+    %w(id created_at updated_at)
-  # end
+  end
+
+  def as_json
+    {}.tap do |hash|
+      self.included_methods.map(&:to_sym).each do |meth|
+        hash[meth] = self.send(meth) rescue nil
+      end
+    end
+  end
 
 end

app/presenters/locomotive/content_asset_presenter.rb

@@ -1,6 +1,8 @@
 module Locomotive
   class ContentAssetPresenter < BasePresenter
 
+    delegate :content_type, :vignette_url, :to => :source
+
     def full_filename
       self.source.source_filename
     end
@@ -17,10 +19,6 @@ module Locomotive
       truncate(self.source.extname, :length => 3)
     end
 
-    def content_type
-      self.source.content_type
-    end
-
     def content_type_text
       value = self.source.content_type.to_s == 'other' ? self.extname : self.source.content_type
       value.blank? ? '?' : value
@@ -30,16 +28,8 @@ module Locomotive
       self.source.source.url
     end
 
-    def vignette_url
+    def included_methods
-      self.source.vignette_url
+      super + %w(full_filename filename short_name extname content_type content_type_text url vignette_url)
-    end
-
-    def as_json
-      {}.tap do |hash|
-        %w(id full_filename filename short_name extname content_type content_type_text url vignette_url).map(&:to_sym).each do |meth|
-          hash[meth] = self.send(meth)
-        end
-      end
     end
 
   end

app/presenters/locomotive/editable_element_presenter.rb

@@ -0,0 +1,28 @@
+module Locomotive
+  class EditableElementPresenter < BasePresenter
+
+    delegate :slug, :block, :default_content, :default_attribute, :hint, :priority, :disabled, :assignable, :from_parent, :to => :source
+
+    def label
+      self.slug.humanize
+    end
+
+    def type
+      self.source._type.to_s.demodulize
+    end
+
+    def block_name
+      if self.source.block
+        self.source.block.gsub('\'', '').humanize
+      else
+        I18n.t('locomotive.pages.form.default_block')
+      end
+    end
+
+    def included_methods
+      super + %w(type label slug block_name block default_content default_attribute hint priority disabled assignable from_parent)
+    end
+
+  end
+end
+

app/presenters/locomotive/editable_file_presenter.rb

@@ -0,0 +1,15 @@
+module Locomotive
+  class EditableFilePresenter < EditableElementPresenter
+
+    delegate :url, :to => :source
+
+    def filename
+      File.basename(self.source.url)
+    end
+
+    def included_methods
+      super + %w(filename url)
+    end
+
+  end
+end

app/presenters/locomotive/editable_long_text_presenter.rb

@@ -0,0 +1,5 @@
+module Locomotive
+  class EditableLongTextPresenter < EditableShortTextPresenter
+
+  end
+end

app/presenters/locomotive/editable_short_text_presenter.rb

@@ -0,0 +1,11 @@
+module Locomotive
+  class EditableShortTextPresenter < EditableElementPresenter
+
+    delegate :content, :to => :source
+
+    def included_methods
+      super + %w(content)
+    end
+
+  end
+end

app/presenters/locomotive/page_presenter.rb

@@ -0,0 +1,15 @@
+module Locomotive
+  class PagePresenter < BasePresenter
+
+    delegate :title, :slug, :fullpath, :raw_template, :published, :template_changed, :cache_strategy, :to => :source
+
+    def editable_elements
+      self.source.enabled_editable_elements
+    end
+
+    def included_methods
+      super + %w(title slug fullpath raw_template published published cache_strategy template_changed editable_elements)
+    end
+
+  end
+end

app/presenters/locomotive/theme_asset_presenter.rb

@@ -17,12 +17,8 @@ module Locomotive
       I18n.l(self.source.updated_at, :format => :short)
     end
 
-    def as_json
+    def included_methods
-      {}.tap do |hash|
+      super + %w(local_path url size updated_at)
-        %w(local_path url size updated_at).map(&:to_sym).each do |meth|
-          hash[meth] = self.send(meth)
-        end
-      end
     end
 
   end

app/views/locomotive/current_site/_form.html.haml

@@ -1,22 +1,22 @@
-= f.foldable_inputs :name => :information, :style => "#{'display: none' unless @site.new_record?}" do
+= f.inputs :name => :information, :style => "#{'display: none' unless @site.new_record?}" do
   = f.input :name, :required => false
 
-= f.foldable_inputs :name => :seo do
+= f.inputs :name => :seo, :class => "inputs foldable #{'folded' if inputs_folded?(@site)}" do
   = f.input :seo_title
   = f.input :meta_keywords
   = f.input :meta_description
 
 - if can?(:point, Locomotive::Site)
   - if manage_subdomain_or_domains?
-    = f.foldable_inputs :name => :access_points, :class => 'editable-list off' do
+    = f.inputs :name => :access_points do
 
-      = f.custom_input :subdomain, :css => 'path' do
+      / = f.custom_input :subdomain, :css => 'path' do
-        %em
+      /   %em
-          http://
+      /     http://
-        = f.text_field :subdomain, :readonly => !manage_subdomain?
+      /   = f.text_field :subdomain, :readonly => !manage_subdomain?
-        \.
+      /   \.
-        %em
+      /   %em
-          = application_domain
+      /     = application_domain
 
       - if manage_domains?
         - @site.domains_without_subdomain.each_with_index do |name, index|
@@ -41,7 +41,7 @@
 
 - if can?(:index, Locomotive::Membership)
 
-  = f.foldable_inputs :name => :memberships, :class => 'memberships off' do
+  = f.inputs :name => :memberships do
     = f.semantic_fields_for :memberships do |fm|
 
       - membership, account = fm.object, fm.object.account
@@ -69,8 +69,8 @@
 
 - if can?(:manage, current_site)
 
-  = f.foldable_inputs :name => :robots_txt do
+  = f.inputs :name => :robots_txt, :class => "inputs foldable #{'folded' if inputs_folded?(@site)}" do
-    = f.custom_input :robots_txt, :css => 'code full', :with_label => false do
+    / = f.custom_input :robots_txt, :css => 'code full', :with_label => false do
-      = f.label :robots_txt
+    /   = f.label :robots_txt
-      %code{ :class => 'html' }
+    /   %code{ :class => 'html' }
-        = f.text_area :robots_txt, :class => 'small'
+    /     = f.text_area :robots_txt, :class => 'small'

app/views/locomotive/current_site/edit.html.haml

@@ -12,8 +12,8 @@
 
 %p!= t('.help')
 
-= semantic_form_for @site, :url => current_site_url, :html => { :class => 'save-with-shortcut' } do |f|
+= semantic_form_for @site, :url => current_site_url, :html => { :class => 'save-with-shortcut' } do |form|
 
-  = render 'form', :f => f
+  = render 'form', :f => form
 
   = render 'locomotive/shared/form_actions', :button_label => :update

app/views/locomotive/pages/_editable_elements.html.haml

@@ -1,35 +1,77 @@
-- grouped_editable_elements = @page.editable_elements_grouped_by_blocks
+%script{ :type => 'text/html', :id => 'editable_elements_edit' }
 
-= semantic_fields_for(@page) do |f|
-  - unless grouped_editable_elements.empty?
-    #editable-elements
   .nav
-        - grouped_editable_elements.keys.each_with_index do |name, index|
+    {{#each blocks}}
-          = link_to (name.try(:humanize) || t('locomotive.pages.form.default_block')).gsub('\'', ''), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}"
+    = link_to '{{name}}', '#block-{{index}}', :class => '{{#unless index}}on{{/unless}}'
+    {{/each}}
     .clear
 
   .wrapper
-        %ul{ :id => "blocks" }
+    %ul
-          - grouped_editable_elements.keys.each_with_index do |name, index|
+      {{#each blocks}}
-            - elements = grouped_editable_elements[name]
+      %li{ :id => 'block-{{index}}', :class => 'block', :style => 'display: {{#if index}}none{{else}}block{{/if}}' }
-            %li{ :id => "block-#{index}", :class => 'block', :style => "display: #{index == 0 ? 'block' : 'none' }" }
         %fieldset.inputs
           %ol
-                  - elements.each do |el|
+      {{/each}}
-                    = f.fields_for 'editable_elements', el, :child_index => el._index do |g|
+
-                      - case el
+%script{ :type => 'text/html', :id => 'editable_text_input' }
-                        - when ::Locomotive::EditableLongText
+
-                          = g.input :content, :label => el.slug.humanize, :hint => el.hint, :as => :text, :input_html => { :class => 'html' }
+  %label{ :for => 'page_editable_elements_attributes_{{index}}_content' } {{label}}
-                        - when ::Locomotive::EditableShortText
+
-                          = g.input :content, :label => el.slug.humanize, :hint => el.hint
+  = text_area_tag 'page[editable_elements_attributes][{{index}}][content]', '{{content}}', :id => 'page_editable_elements_attributes_{{index}}_content'
-                        - when ::Locomotive::EditableFile
+
-                          = g.custom_input :source, :label => el.slug.humanize, :hint => el.hint, :css => 'file' do
+  {{#if hint}}
-                            = g.file_field :source
+  %p.inline-hints {{hint}}
-                            - if el.source?
+  {{/if}}
-                              %p.remove
+
-                                %strong
+  = hidden_field_tag 'page[editable_elements_attributes][{{index}}][id]', '{{id}}', :id => 'page_editable_elements_attributes_{{index}}_id'
-                                  = link_to File.basename(el.source.url), el.source.url
+
-                                %span
+%script{ :type => 'text/html', :id => 'editable_file_input' }
-                                   / 
+
-                                  != t('locomotive.pages.form.delete_file')
+  %label{ :for => 'page_editable_elements_attributes_{{index}}_content' } {{label}}
-                                  = g.check_box :remove_source
+
+  = file_field_tag 'page[editable_elements_attributes][{{index}}][source]', :id => 'page_editable_elements_attributes_{{index}}_source'
+
+  {{#if hint}}
+  %p.inline-hints {{hint}}
+  {{/if}}
+
+  = hidden_field_tag 'page[editable_elements_attributes][{{index}}][id]', '{{id}}', :id => 'page_editable_elements_attributes_{{index}}_id'
+
+
+/ - grouped_editable_elements = @page.editable_elements_grouped_by_blocks
+/
+/ = semantic_fields_for(@page) do |f|
+/   - unless grouped_editable_elements.empty?
+/     #editable-elements
+/       .nav
+/         - grouped_editable_elements.keys.each_with_index do |name, index|
+/           = link_to (name.try(:humanize) || t('locomotive.pages.form.default_block')).gsub('\'', ''), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}"
+/         .clear
+/
+/       .wrapper
+/         %ul{ :id => "blocks" }
+/           - grouped_editable_elements.keys.each_with_index do |name, index|
+/             - elements = grouped_editable_elements[name]
+/             %li{ :id => "block-#{index}", :class => 'block', :style => "display: #{index == 0 ? 'block' : 'none' }" }
+/               %fieldset.inputs
+/                 %ol
+/                   - elements.each do |el|
+/                     = f.fields_for 'editable_elements', el, :child_index => el._index do |g|
+/                       - case el
+/                         - when ::Locomotive::EditableLongText
+/                           = g.input :content, :label => el.slug.humanize, :hint => el.hint, :as => :text, :input_html => { :class => 'html' }
+/                         - when ::Locomotive::EditableShortText
+/                           = g.input :content, :label => el.slug.humanize, :hint => el.hint
+/                         - when ::Locomotive::EditableFile
+/                           = g.input :source, :label => el.slug.humanize, :hint => el.hint, :css => 'file'
+/                           / do
+/                           /                            = g.file_field :source
+/                           /                            - if el.source?
+/                           /                              %p.remove
+/                           /                                %strong
+/                           /                                  = link_to File.basename(el.source.url), el.source.url
+/                           /                                %span
+/                           /                                   / 
+/                           /                                  != t('locomotive.pages.form.delete_file')
+/                           /                                  = g.check_box :remove_source

app/views/locomotive/pages/_form.html.haml

@@ -1,6 +1,11 @@
 - content_for :head do
-  = render :partial => '/locomotive/content_assets/picker'
+  = render '/locomotive/content_assets/picker'
-  = render :partial => '/locomotive/theme_assets/picker'
+  = render '/locomotive/theme_assets/picker'
+  = render 'editable_elements'
+
+- content_for :backbone_view_data do
+  :plain
+    { page: #{@page.to_json} }
 
 - if can?(:manage, @page)
 
@@ -13,8 +18,6 @@
 
     = f.input :slug, :required => false, :hint => @page.slug.blank? ? t('.empty_slug') : public_page_url(@page), :input_html => { :'data-url' => get_path_pages_url, :disabled => @page.index? || @page.not_found? }, :wrapper_html => { :style => "#{'display: none' if @page.templatized?};", :class => 'em-inline-hints' }
 
-= render 'editable_elements', :page => @page
-
 = f.inputs :name => :seo, :class => "inputs foldable #{'folded' if inputs_folded?(@page)}" do
 
   = f.input :seo_title

app/views/locomotive/shared/_head.html.haml

@@ -24,7 +24,8 @@
 
       window.application_view = new Locomotive.Views.ApplicationView({
         flash:      #{flash.to_json},
-        view:   Locomotive.Views.#{controller.controller_name.camelize}.#{controller.action_name.camelize}View
+        view:       #{backbone_view_class_name},
+        view_data:  #{backbone_view_data}
       });
       window.application_view.render();
 

app/views/locomotive/theme_assets/_asset.html.haml

@@ -2,7 +2,7 @@
 
 %li{ :class => (asset.new_record? ? 'new-asset' : 'asset') }
   %em
-  %strong= link_to asset.local_path(!edit), edit ? edit_admin_theme_asset_path(asset) : asset.source.url, :'data-local-path' => asset.local_path
+  %strong= link_to asset.local_path(!edit), edit ? edit_theme_asset_path(asset) : asset.source.url, :'data-local-path' => asset.local_path
   .more
     %span.size= number_to_human_size(asset.size)
     —
@@ -10,4 +10,4 @@
     %span.date= l asset.updated_at, :format => :short
 
     - if edit && can?(:destroy, asset)
-      = link_to image_tag('admin/list/icons/trash.png'), admin_theme_asset_path(asset), :class => 'remove', :confirm => t('locomotive.messages.confirm'), :method => :delete
+      = link_to image_tag('admin/list/icons/trash.png'), theme_asset_path(asset), :class => 'remove', :confirm => t('locomotive.messages.confirm'), :method => :delete

doc/TODO

@@ -1,13 +1,14 @@
 BOARD:
 
 x namespace assets
-- bugs:
+x bugs:
   x toggler
   x advanced options (redirect url missing)
   x locomotive_media (not animating on open)
-- editable_elements => view + mustache template
+  x undefined method `_selector' for #<Locomotive::Page:0x00000107434768>
-- editable_short_text => tinymce
+x editable_elements => view + handlebar template
-- editable_image => new formtastic inputs
+x editable_short_text => tinymce
+- editable_file => new formtastic inputs
 - create/edit page in ajax
 - fix other pages
   - content types

lib/locomotive/engine.rb

@@ -5,7 +5,7 @@ module Locomotive
 
     isolate_namespace Locomotive
 
-    config.autoload_once_paths += %W( #{config.root}/app/controllers #{config.root}/app/models #{config.root}/app/helpers #{config.root}/app/uploaders)
+    # config.autoload_once_paths += %W( #{config.root}/app/controllers #{config.root}/app/models #{config.root}/app/helpers #{config.root}/app/uploaders)
 
     # initializer 'locomotive.load_controllers_and_models' do |app|
     #   puts "[locomotive/initializer] locomotive.load_controllers_and_models"