refactoring the snippet forms (wip)
This commit is contained in:
did
parent
37684654ac
commit
07b302beaa
|
|
@ -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
|
||||
|
|
@ -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()
|
||||
|
|
@ -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')
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -9,37 +9,4 @@
|
|||
= f.input :subdomain, :as => :'Locomotive::Subdomain', :domain => application_domain, :input_html => { :readonly => !manage_subdomain? }
|
||||
|
||||
- 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')
|
||||
= f.input :domains, :as => :'Locomotive::Empty'
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
- content_for :head do
|
||||
/ = include_javascripts :image_picker, :snippets
|
||||
/ = include_stylesheets :fancybox
|
||||
= render '/locomotive/theme_assets/picker'
|
||||
|
||||
- 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' }
|
||||
|
|
|
|||
3
doc/TODO
3
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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
Loading…
Reference in New Issue