refactoring the snippet forms (wip)

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

@@ -0,0 +1,9 @@
+class Locomotive.Models.Snippet extends Backbone.Model
+
+  paramRoot: 'snippet'
+
+  urlRoot: "#{Locomotive.mount_on}/snippets"
+
+  initialize: ->
+
+class Locomotive.Models.SnippetsCollection extends Backbone.Collection

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

@@ -0,0 +1,54 @@
+#= require ../shared/form_view
+
+Locomotive.Views.Snippets ||= {}
+
+class Locomotive.Views.Snippets.FormView extends Locomotive.Views.Shared.FormView
+
+  el: '#content'
+
+  events:
+    'click    a#image-picker-link': 'open_image_picker'
+    'submit':                       'save'
+
+  initialize: ->
+    _.bindAll(@, 'insert_image')
+
+    @model = new Locomotive.Models.Snippet(@options.snippet)
+
+    @image_picker_view = new Locomotive.Views.ThemeAssets.ImagePickerView
+      collection: new Locomotive.Models.ThemeAssetsCollection()
+      on_select:  @insert_image
+
+    Backbone.ModelBinding.bind @
+
+  render: ->
+    super()
+
+    # liquid code textarea
+    @enable_liquid_editing()
+
+    return @
+
+  open_image_picker: (event) ->
+    event.stopPropagation() & event.preventDefault()
+    @image_picker_view.editor = @editor
+    @image_picker_view.render()
+
+  insert_image: (path) ->
+    text = "{{ '#{path}' | theme_image_url }}"
+    @editor.replaceSelection(text)
+    @image_picker_view.close()
+
+  enable_liquid_editing: ->
+    input = @$('#snippet_template')
+    @editor = CodeMirror.fromTextArea input.get()[0],
+      mode:             'liquid'
+      autoMatchParens:  false
+      lineNumbers:      false
+      passDelay:        50
+      tabMode:          'shift'
+      theme:            'default'
+      onChange: (editor) => @model.set(raw_template: editor.getValue())
+
+  after_inputs_fold: ->
+    @editor.refresh()

app/assets/javascripts/locomotive/views/snippets/new_view.js.coffee

@@ -0,0 +1,8 @@
+Locomotive.Views.Snippets ||= {}
+
+class Locomotive.Views.Snippets.NewView extends Locomotive.Views.Snippets.FormView
+
+  save: (event) ->
+    @save_in_ajax event,
+      on_success: (response, xhr) ->
+        window.location.href = xhr.getResponseHeader('location')

app/controllers/locomotive/snippets_controller.rb

@@ -3,7 +3,7 @@ module Locomotive
 
     sections 'settings', 'theme_assets'
 
-    respond_to :json, :only => :update
+    respond_to :json, :only => [:create, :update]
 
     def new
       @snippet = current_site.snippets.new
@@ -12,7 +12,8 @@ module Locomotive
 
     def create
       @snippet = current_site.snippets.create(params[:snippet])
-      respond_with @snippet, :location => edit_snippet_url(@snippet)
+      Rails.logger.debug "[SNIPPET] creating..."
+      respond_with @snippet, :location => edit_snippet_url(@snippet._id)
     end
 
     def edit
@@ -23,7 +24,7 @@ module Locomotive
     def update
       @snippet = current_site.snippets.find(params[:id])
       @snippet.update_attributes(params[:id])
-      respond_with @snippet, :location => edit_snippet_url(@snippet)
+      respond_with @snippet, :location => edit_snippet_url(@snippet._id)
     end
 
     def destroy

app/inputs/locomotive/code_input.rb

@@ -22,7 +22,7 @@ module Locomotive
       return '' if options.delete(:picker) == false
       template.content_tag(:div,
         template.link_to(template.t('locomotive.image_picker.link'), template.theme_assets_path, :id => 'image-picker-link', :class => 'picture'),
-        :class => 'more')
+        :class => 'more error-anchor')
     end
 
   end

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

@@ -10,36 +10,3 @@
 
     - if manage_domains?
       = f.input :domains, :as => :'Locomotive::Empty'
-
-
-/ - if manage_subdomain_or_domains?
-/   = f.foldable_inputs :name => :access_points, :class => 'editable-list off' do
-/
-/     = f.custom_input :subdomain, :css => 'path' do
-/       %em
-/         http://
-/       = f.text_field :subdomain
-/       \.
-/       %em
-/         = application_domain
-/
-/     - if manage_domains?
-/       - @site.domains_without_subdomain.each_with_index do |name, index|
-/         %li{ :class => "item added #{'last' if index == @site.domains.size - 1}" }
-/           %em
-/             http://
-/           = text_field_tag 'site[domains][]', name, :class => 'string label void domain'
-/            
-/           = error_on_domain(@site, name)
-/           %span.actions
-/             = link_to image_tag('admin/form/icons/trash.png'), '#', :class => 'remove first', :confirm => t('locomotive.messages.confirm')
-/
-/       %li.item.template
-/         %em
-/           http://
-/         = text_field_tag 'label', t('formtastic.hints.site.domain_name'), :class => 'string label void domain'
-/          
-/         %span.actions
-/           = link_to image_tag('admin/form/icons/trash.png'), '#', :class => 'remove first', :confirm => t('locomotive.messages.confirm')
-/           %button{ :class => 'button light add', :type => 'button' }
-/             %span!= t('locomotive.buttons.new_item')

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

@@ -1,6 +1,9 @@
 - content_for :head do
-  / = include_javascripts :image_picker, :snippets
+  = render '/locomotive/theme_assets/picker'
-  / = include_stylesheets :fancybox
+
+- content_for :backbone_view_data do
+  :plain
+    { snippet: #{@snippet.persisted? ? @snippet.to_json : 'null'} }
 
 = f.inputs :name => :information do
   = f.input :name, :wrapper_html => { :class => 'highlighted' }

doc/TODO

@@ -23,8 +23,9 @@ x edit my site
 - fix other sections
   x edit my account
   x create a new site
-  x create a new account
+  x create a new accounts
   - theme assets
+    - snippets
     - polish the page
     - upload many files at once
     - delete in ajax

vendor/assets/javascripts/slugify.js

@@ -0,0 +1,55 @@
+(function($) {
+  $.fn.slug = function(o) {
+    var d = {
+      slug: 'slug', // Class used for slug destination input and span. The span must exists on the page
+      hide: false,  // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span.
+      customizable: true, // Boolean - customizable
+      separate: '-', // Character - defult value set to '-'
+      write: 'input', // String - the tag name for wrinting personalized slug default is set to input
+      read: 'span' // String - the tag name for reading the slug default is set to span
+    };
+    var o = $.extend(d, o);
+    return this.each(function() {
+      $t = $(this);
+      $w = $(o.write + "." + o.slug);
+      $r = $(o.read + "." + o.slug)
+      $().ready(function() {
+        if (o.hide) {
+          inputSlug(true);
+        }
+      });
+      if (o.customizable) {
+        $w.live('blur', function() {
+          inputSlug(true)
+        });
+        $r.live('click', function() {
+          inputSlug(false);
+        });
+      }
+
+      function inputSlug(show) {
+        $r.text($w.val());
+        if (show) {
+          $r.show();
+          $w.hide();
+        }
+        else {
+          $r.hide();
+          $w.show().focus();
+        }
+      }
+
+      makeSlug = function() {
+        s = s.replace(/\s/g, o.separate);
+        s = s.replace(eval("/[^a-z0-9" + o.separate + "]/g"), '');
+        s = s.replace(eval("/" + o.separate + "{2,}/g"), o.separate);
+        s = s.replace(eval("/(^" + o.separate + ")|(" + o.separate + "$)/g"), '');
+        $w.val(s);
+        $r.text(s);
+      }
+
+      $t.keyup(makeSlug);
+      return $t;
+    });
+  };
+})(jQuery);