the has_many ui component is done

This commit is contained in:
did 2012-02-02 16:53:26 +01:00
parent 1703c05693
commit 9e9fe49ccf
39 changed files with 343 additions and 135 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

View File

@ -28,4 +28,21 @@ window.Locomotive.tinyMCE =
theme_advanced_toolbar_align: 'left'
height: '20'
width: '709'
convert_urls: false
convert_urls: false
popupSettings:
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: '545'
convert_urls: false
fullscreen_new_window: false
fullscreen_settings:
theme_advanced_path_location: 'top'

View File

@ -14,7 +14,7 @@ class Locomotive.Views.ContentEntries.FormView extends Locomotive.Views.Shared.F
'submit': 'save'
initialize: ->
@model = new Locomotive.Models.ContentEntry(@options.content_entry)
@model ||= new Locomotive.Models.ContentEntry(@options.content_entry)
window.foo = @model
@ -45,7 +45,7 @@ class Locomotive.Views.ContentEntries.FormView extends Locomotive.Views.Shared.F
enable_richtexteditor: ->
_.each @$('li.input.rte textarea.html'), (textarea) =>
settings = _.extend {}, window.Locomotive.tinyMCE.defaultSettings,
settings = _.extend {}, @tinyMCE_settings(),
onchange_callback: (editor) =>
$(textarea).val(editor.getBody().innerHTML).trigger('change')
@ -62,7 +62,8 @@ class Locomotive.Views.ContentEntries.FormView extends Locomotive.Views.Shared.F
enable_has_many_fields: ->
_.each @model.get('_has_many_fields'), (field) =>
name = field[0]; inverse_of = field[1]
view = new Locomotive.Views.Shared.Fields.HasManyView model: @model, name: name, inverse_of: inverse_of
new_entry = new Locomotive.Models.ContentEntry(@options["#{name}_new_entry"])
view = new Locomotive.Views.Shared.Fields.HasManyView model: @model, name: name, new_entry: new_entry, inverse_of: inverse_of
@_has_many_field_views.push(view)
@ -74,8 +75,21 @@ class Locomotive.Views.ContentEntries.FormView extends Locomotive.Views.Shared.F
refresh_file_fields: ->
_.each @_file_field_views, (view) => view.refresh()
refresh: ->
@$('li.input.toggle input[type=checkbox]').checkToggle('sync')
_.each @_file_field_views, (view) => view.refresh()
reset: ->
@$('li.input.string input[type=text], li.input.text textarea, li.input.date input[type=text]').val('').trigger('change')
_.each @$('li.input.rte textarea.html'), (textarea) => $(textarea).tinymce().setContent(''); $(textarea).trigger('change')
_.each @_file_field_views, (view) => view.reset()
@$('li.input.toggle input[type=checkbox]').checkToggle('sync')
remove: ->
_.each @_file_field_views, (view) => view.remove()
_.each @_has_many_field_views, (view) => view.remove()
super
tinyMCE_settings: ->
window.Locomotive.tinyMCE.defaultSettings

View File

@ -0,0 +1,77 @@
#= require ../shared/form_view
Locomotive.Views.ContentEntries ||= {}
class Locomotive.Views.ContentEntries.PopupFormView extends Locomotive.Views.ContentEntries.FormView
initialize: ->
@create_dialog()
super()
render: ->
super()
return @
save: (event) ->
@save_in_ajax event,
headers: { 'X-Flash': true }
on_success: (response, xhr) =>
entry = new Locomotive.Models.ContentEntry(response)
@options.parent_view.insert_or_update_entry(entry)
@close()
on_error: =>
@shake()
create_dialog: ->
@dialog = $(@el).dialog
autoOpen: false
modal: true
zIndex: 998
width: 770,
create: (event, ui) =>
$('.ui-widget-overlay').bind 'click', => @close()
$(@el).prev().find('.ui-dialog-title').html(@$('h2').html())
@$('h2').remove()
actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
actions.find('#close-link').click (event) => @close(event)
actions.find('input[type=submit]').click (event) => @save(event)
open: (event, ui, extra) =>
# nothing to do
open: ->
parent_el = $(@el).parent()
if @model.isNew()
parent_el.find('.edit-section').hide()
parent_el.find('.new-section').show()
else
parent_el.find('.new-section').hide()
parent_el.find('.edit-section').show()
$(@el).dialog('open')
close: (event) ->
event.stopPropagation() & event.preventDefault() if event?
$(@el).dialog('close')
shake: ->
$(@el).parents('.ui-dialog').effect('shake', { times: 4 }, 100)
center: ->
$(@el).dialog('option', 'position', 'center')
reset: (entry) =>
@model.set entry.attributes
if entry.isNew()
@model.id = null
super()
else
@refresh()
tinyMCE_settings: ->
window.Locomotive.tinyMCE.popupSettings

View File

@ -39,13 +39,14 @@ class Locomotive.Views.Shared.Fields.FileView extends Backbone.View
return @
refresh: ->
# @remove()
@$('input[type=file]').unbind 'change'
@states = { 'change': false, 'delete': false }
@render()
# @$('input[type=file]').unbind 'change'
# @states = { 'change': false, 'delete': false }
# @render()
reset: ->
@model.set_attribute @options.name, null
@model.set_attribute "#{@options.name}_url", null
@refresh()
toggle_change: (event) ->
@_toggle event, 'change',

View File

@ -8,6 +8,8 @@ class Locomotive.Views.Shared.Fields.HasManyView extends Backbone.View
className: 'list'
events:
'click p.actions a.add': 'open_new_entry_view'
'click ul span.actions a.edit': 'edit_entry'
'click ul span.actions a.remove': 'remove_entry'
template: ->
@ -21,8 +23,7 @@ class Locomotive.Views.Shared.Fields.HasManyView extends Backbone.View
@collection = @model.get(@options.name)
window.model = @model
window.bar = @collection
@build_target_entry_view()
render: ->
$(@el).html(@template()())
@ -40,9 +41,12 @@ class Locomotive.Views.Shared.Fields.HasManyView extends Backbone.View
@$('.empty').show()
insert_entry: (entry) ->
unless @collection.get(entry.get('_id'))?
@collection.add(entry)
@$('.empty').hide()
entry_html = $(@entry_template()(label: entry.get('_label')))
entry_html.data('data-entry-cid', entry.cid)
entry_html.data('data-entry-id', entry.id)
@$('> ul').append(entry_html)
make_entries_sortable: ->
@ -54,20 +58,63 @@ class Locomotive.Views.Shared.Fields.HasManyView extends Backbone.View
refresh_position_entries: ->
@$('> ul > li').each (index, entry_html) =>
cid = $(entry_html).data('data-entry-cid')
entry = @collection.getByCid(cid)
id = $(entry_html).data('data-entry-id')
entry = @collection.get(id)
entry.set_attribute "position_in_#{@options.inverse_of}", index
build_target_entry_view: ->
@target_entry_view = new Locomotive.Views.ContentEntries.PopupFormView
el: $("##{@options.name}-template-entry")
parent_view: @
model: @options.new_entry.clone() # by default, it does not matter
@target_entry_view.render()
edit_entry: (event) ->
event.stopPropagation() & event.preventDefault()
entry = @get_entry_from_element($(event.target))
@target_entry_view.reset(entry)
@target_entry_view.open()
update_entry: (entry) ->
entry_html = $(_.detect @$('> ul > li'), (_entry_html) -> $(_entry_html).data('data-entry-id') == entry.id)
new_entry_html = $(@entry_template()(label: entry.get('_label')))
new_entry_html.data('data-entry-id', entry.id)
entry_html.replaceWith(new_entry_html)
insert_or_update_entry: (entry) ->
if @collection.get(entry.id)?
@update_entry(entry)
else
@insert_entry(entry)
remove_entry: (event) ->
event.stopPropagation() & event.preventDefault()
if confirm($(event.target).attr('data-confirm'))
entry_html = $(event.target).closest('li')
cid = $(entry_html).data('data-entry-cid')
entry = @collection.getByCid(cid)
entry = @get_entry_from_element($(event.target))
entry.set _destroy: true
entry_html.remove()
$(event.target).closest('li').remove()
@$('.empty').show() if @$('> ul > li').size() == 0
@refresh_position_entries()
open_new_entry_view: (event) ->
event.stopPropagation() & event.preventDefault()
@target_entry_view.reset(@options.new_entry.clone())
@target_entry_view.open()
get_entry_from_element: (element) =>
entry_html = $(element).closest('li')
id = $(entry_html).data('data-entry-id')
@collection.get(id)

View File

@ -23,11 +23,12 @@ class Locomotive.Views.Shared.FormView extends Backbone.View
@clear_errors()
options ||= { on_success: null, on_error: null }
options ||= { headers: {}, on_success: null, on_error: null }
previous_attributes = _.clone @model.attributes
@model.save {},
headers: options.headers
success: (model, response, xhr) =>
model.attributes = previous_attributes

View File

@ -60,7 +60,7 @@
.ui-dialog-content {
position: relative;
z-index: 101;
z-index: 999;
text-align: left;
@ -71,6 +71,22 @@
overflow: auto;
height: 360px;
}
form.formtastic {
fieldset {
legend, ol {
width: 748px;
}
ol {
li.string {
input[type=text] {
width: 530px;
}
} // li.string
}
}
} // .form.formtastic
} // .ui-dialog-content
@ -104,7 +120,7 @@
z-index: 1003;
a {
a, input[type=submit] {
@include light-button;
}

View File

@ -127,7 +127,7 @@ form.formtastic {
padding-left: 10px;
}
a.remove, a.toggle, a.drag {
a.edit, a.remove, a.toggle, a.drag {
display: inline-block;
width: 16px;
height: 16px;
@ -138,6 +138,13 @@ form.formtastic {
outline: none;
text-indent: -9999px;
&.edit {
background: transparent image-url("locomotive/list/icons/pencil_off.png") repeat 0 0;
&:hover {
background-image: image-url("locomotive/list/icons/pencil.png");
}
}
&.remove {
background: transparent image-url("locomotive/list/icons/trash_off.png") repeat 0 0;
&:hover {

View File

@ -59,7 +59,7 @@ module Locomotive::BaseHelper
end
def backbone_view_data
content_for?(:backbone_view_data) ? content_for(:backbone_view_data) : 'null'
content_for?(:backbone_view_data) ? content_for(:backbone_view_data) : ''
end
def nocoffee_tag

View File

@ -1,11 +1,7 @@
module Locomotive::ContentEntriesHelper
def options_for_belongs_to_custom_field(class_name)
content_type = nil
if class_name =~ /^Locomotive::Entry(.*)/
content_type = current_site.content_types.find($1)
end
content_type = Locomotive::ContentType.class_name_to_content_type(class_name, current_site)
if content_type
content_type.ordered_entries.map { |entry| [entry._label, entry._id] }

View File

@ -74,6 +74,26 @@ module Locomotive
end
end
def class_name_to_content_type(class_name)
self.class.class_name_to_content_type(class_name, self.site)
end
# Retrieve from a class name the associated content type within the scope of a site.
# If no content type is found, the method returns nil
#
# @param [ String ] class_name The class name
# @param [ Locomotive::Site ] site The Locomotive site
#
# @return [ Locomotive::ContentType ] The content type matching the class_name
#
def self.class_name_to_content_type(class_name, site)
if class_name =~ /^Locomotive::Entry(.*)/
site.content_types.find($1)
else
nil
end
end
def to_presenter
Locomotive::ContentTypePresenter.new(self)
end

View File

@ -86,7 +86,6 @@ module Locomotive
when :date then "formatted_#{name}"
when :file then "#{name}_url"
when :belongs_to then "#{name}_id"
# when :has_many then nil
else
name
end

View File

@ -3,7 +3,7 @@
- content_for :backbone_view_data do
:plain
{ content_entry: #{@content_entry.to_json} }
content_entry: #{@content_entry.to_json}
= f.inputs :name => :attributes do
- @content_type.ordered_entries_custom_fields.each_with_index do |field, index|

View File

@ -3,10 +3,8 @@
- content_for :backbone_view_data do
:plain
{
content_type: #{@content_type.persisted? ? @content_type.to_json : 'null'},
inverse_of_list: #{options_for_content_type_inverse_of.to_json}
}
content_type: #{@content_type.persisted? ? @content_type.to_json : 'null'},
inverse_of_list: #{options_for_content_type_inverse_of.to_json}
= f.inputs :name => :information do

View File

@ -4,7 +4,8 @@
- content_for :backbone_view_data do
:plain
{ site: #{@site.to_json(:current_account => current_locomotive_account, :current_site => current_site)}, errors: #{@site.errors.to_json} }
site: #{@site.to_json(:current_account => current_locomotive_account, :current_site => current_site)},
errors: #{@site.errors.to_json}
= f.inputs :name => :information do
= f.input :name, :wrapper_html => { :style => 'display: none' }

View File

@ -38,7 +38,7 @@
= g.input :hint, :input_html => { :class => 'hint' }
= g.input :localized, :as => :'Locomotive::Toggle', :wrapper_html => { :class => 'extra localized' }, :input_html => { :class => 'localized' }
= g.input :localized, :as => :'Locomotive::Toggle', :wrapper_html => { :class => 'localized' }, :input_html => { :class => 'localized' }
= g.input :select_options, :as => :'Locomotive::Empty', :wrapper_html => { :class => 'extra select-options', :style => 'display: none' }

View File

@ -1,4 +1,4 @@
= f.input name,
:label => field.label,
:hint => field.hint,
:as => :'Locomotive::Toggle'
:as => :'Locomotive::Toggle'

View File

@ -1,5 +1,8 @@
- if !f.object.new_record? && field.ui_enabled?
- target_content_type = Locomotive::ContentType.class_name_to_content_type(field.class_name, current_site)
- new_target_content_entry = target_content_type.entries.build(field.inverse_of => f.object)
= f.input name.to_sym,
:label => field.label,
:hint => field.hint,
@ -16,8 +19,8 @@
%hr
%p
= link_to t('.new_entry'), '#'
%p.actions
= link_to t('.new_entry'), '#', :class => 'add'
%script{ :type => 'text/html', :id => "#{name}_entry" }
%li
@ -28,43 +31,40 @@
{{label}}
%span.actions
= link_to 'e', '#', :class => 'edit'
= link_to 'x', '#', :class => 'remove', :confirm => t('locomotive.messages.confirm')
/ - collection = f.object.send(name.to_sym)
- content_for :backbone_view_data do
:plain
, #{name}_new_entry: #{new_target_content_entry.to_json}
- content_for :foot do
%div{ :id => "#{name}-template-entry", :style => 'display: none' }
%h2
%span.new-section= t('locomotive.content_entries.new.title', :type => name.capitalize).html_safe
%span.edit-section= t('locomotive.content_entries.edit.title', :type => name.capitalize).html_safe
= semantic_form_for new_target_content_entry, :as => :content_entry, :url => content_entries_url(target_content_type.slug), :html => { :multipart => true } do |form|
= form.inputs :name => :attributes do
- target_content_type.ordered_entries_custom_fields.each_with_index do |_field, index|
- next if _field.name == field.inverse_of || _field.type == 'has_many'
= render "locomotive/custom_fields/types/#{_field.type}",
:f => form,
:name => _field.name.to_sym,
:field => _field,
:highlighted => _field._id == target_content_type.label_field_id
.dialog-actions
= link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
.button-wrapper
%span.new-section= submit_tag t('locomotive.shared.form_actions.create')
%span.edit-section= submit_tag t('locomotive.shared.form_actions.update')
/ = form.custom_input field._alias.to_sym, :label => field.label, :hint => field.hint, :css => 'has-many', :required => required do
/
/ .has-many-selector
/
/ %p{ :style => form.object.send(field._alias.to_sym).empty? ? '' : 'display: none' }
/ = t('.empty')
/
/ %ul
/
/ %script{ :type => 'text/x-mustache-template', :name => 'template', :'data-base-input-name' => "content[#{field._alias.to_sym}]" }
/ %li{ :class => "item {{behaviour_flag}}" }
/ %span.handle
/ = image_tag 'admin/form/icons/drag.png'
/
/ {{^if_template}}
/ %input{ :name => '{{base_name}}[]', :value => '{{{id}}}', :type => 'hidden', :'data-field' => 'id' }
/ {{/if_template}}
/
/ %strong {{label}}
/
/ {{#if_template}}
/ = select_tag 'label', ''
/ {{/if_template}}
/
/ %span.actions
/ - if field.reverse_lookup?
/ = link_to image_tag('admin/form/pen.png'), '#', :class => 'edit first'
/ = link_to image_tag('admin/form/icons/trash.png'), '#', :class => 'remove'
/ %button{ :class => 'button light mini add', :type => 'button' }
/ %span!= t('locomotive.buttons.new_item')
/
/ %script{ :type => 'text/javascript', :name => 'data' }
/ != has_many_data_to_js(field, form.object)

View File

@ -1,14 +0,0 @@
- field.target.constantize.reload_parent! # to make sure all the contents from the parent are loaded
- if breadcrumb_root && params[:breadcrumb_alias] == field._alias
= form.hidden_field field._name.to_sym
= hidden_field_tag 'breadcrumb_alias', field._alias
- else
- selected_id = form.object.send(field._alias.to_sym).try(:_id)
= form.input field._alias.to_sym, :label => field.label, :hint => field.hint, :input_html => { :class => 'has_one' }, :as => :select, :collection => options_for_has_one(field, selected_id), :selected => selected_id, :required => required

View File

@ -1,4 +1,4 @@
= f.input name,
:label => field.label,
:hint => field.hint,
:wrapper_html => { :class => "#{'highlighted' if highlighted}" }
:wrapper_html => { :class => "#{'highlighted' if highlighted}" }

View File

@ -29,4 +29,6 @@
= yield
#footer
= render 'locomotive/shared/footer'
= render 'locomotive/shared/footer'
= yield :foot

View File

@ -2,7 +2,7 @@
- content_for :backbone_view_data do
:plain
{ account: #{@account.to_json} }
account: #{@account.to_json}
- content_for :submenu do
= render_cell 'locomotive/settings_menu', :show

View File

@ -5,7 +5,7 @@
- content_for :backbone_view_data do
:plain
{ page: #{@page.to_presenter.as_json_for_html_view.to_json} }
page: #{@page.to_presenter.as_json_for_html_view.to_json}
- if can?(:manage, @page)

View File

@ -23,7 +23,7 @@
window.application_view = new Locomotive.Views.ApplicationView({
flash: #{flash.to_json},
view: #{backbone_view_class_name},
view_data: #{backbone_view_data}
view_data: { #{backbone_view_data} }
});
window.application_view.render();

View File

@ -3,7 +3,7 @@
- content_for :backbone_view_data do
:plain
{ snippet: #{@snippet.persisted? ? @snippet.to_presenter.as_json_for_html_view.to_json : 'null'} }
snippet: #{@snippet.persisted? ? @snippet.to_presenter.as_json_for_html_view.to_json : 'null'}
= f.inputs :name => :information do
= f.input :name, :wrapper_html => { :class => 'highlighted' }

View File

@ -3,7 +3,7 @@
- content_for :backbone_view_data do
:plain
{ theme_asset: #{@theme_asset.persisted? ? @theme_asset.to_json : 'null'} }
theme_asset: #{@theme_asset.persisted? ? @theme_asset.to_json : 'null'}
= f.hidden_field :performing_plain_text

View File

@ -16,13 +16,11 @@
- content_for :backbone_view_data do
:plain
{
snippets: #{can?(:manage, Locomotive::Snippet) ? @snippets.to_json : 'null'},
images: #{@assets[:images].to_json},
media: #{@assets[:media].to_json},
js_and_css_assets: #{can?(:manage, Locomotive::ThemeAsset) ? @js_and_css_assets.to_json : 'null'},
fonts: #{can?(:manage, Locomotive::ThemeAsset) ? @assets[:fonts].to_json : 'null'}
}
snippets: #{can?(:manage, Locomotive::Snippet) ? @snippets.to_json : 'null'},
images: #{@assets[:images].to_json},
media: #{@assets[:media].to_json},
js_and_css_assets: #{can?(:manage, Locomotive::ThemeAsset) ? @js_and_css_assets.to_json : 'null'},
fonts: #{can?(:manage, Locomotive::ThemeAsset) ? @assets[:fonts].to_json : 'null'}
- content_for :submenu do
= render_cell 'locomotive/settings_menu', :show

View File

@ -80,7 +80,9 @@ en:
file:
delete_file: Delete file
has_many:
empty: Empty
empty: The list is empty
new_entry: + Add a new entry
form:
required: Required
optional: Optional

View File

@ -107,7 +107,7 @@ x script to migrate existing site
- upgrade to rails 3.2 (https://github.com/locomotivecms/engine/pull/281/files)
- missing custom_fields
x belongs_to
- has_many
x has_many
- many_to_many
- heroku module for locomotive
- refactoring

View File

@ -8,6 +8,10 @@ module CustomFields
class Field
field :ui_enabled, :type => Boolean, :default => true
def class_name_to_content_type
self._parent.send :class_name_to_content_type, self.class_name
end
protected
def ensure_class_name_security

View File

@ -183,7 +183,10 @@ Backbone.ModelBinding = (function(Backbone, _, $){
}
// console.log(attribute_name);
var modelChange = function(changed_model, val){ element.val(val); };
var modelChange = function(changed_model, val){
val = val == null ? '' : val;
element.val(val);
};
var setModelValue = function(attr_name, value){
var data = {};

View File

@ -26,7 +26,12 @@
* @param Bool settings[bypass_skin] Flags whether to bypass the inclusion of the skin.css file. Used if you've included the skin styles somewhere else already.
*/
$.fn.checkToggle = function(settings) {
$.fn.checkToggle = function(action, settings) {
if (typeof(action) == 'object' || typeof(action) == 'undefined') {
settings = action || {};
action = 'initialize';
}
settings = $.extend({
on_label : 'Yes',
@ -48,14 +53,24 @@
settings.off_label = 'Non';
}
// append the skin styles
// if(settings.bypass_skin == false){
// $("head").append('<link type="text/css" rel="stylesheet" href="'+settings.skin_dir+'skin.css" media="screen" />');
// }
function showUncheckedState(element) {
element.parent().prev().css("color",settings.off_label_color);
element.parent().next().css("color",settings.on_label_color);
element.parent().css("background-color", settings.off_bg_color).removeClass('on');
element.parent().parent().prev().removeAttr("checked").trigger('change');
element.removeClass("left").addClass("right");
}
function showCheckedState(element) {
element.parent().prev().css("color",settings.on_label_color);
element.parent().next().css("color",settings.off_label_color);
element.parent().css("background-color", settings.on_bg_color).addClass('on');
element.parent().parent().prev().attr("checked", "checked").trigger('change');
element.removeClass("right").addClass("left");
}
function toggle(element){
var checked = $(element).parent().parent().prev().attr("checked");
var checked = $(element).parent().parent().prev().is(':checked');
// if it's set to on
if(checked){
@ -64,11 +79,7 @@
// callback function
function(){
$(element).parent().prev().css("color",settings.off_label_color);
$(element).parent().next().css("color",settings.on_label_color);
$(element).parent().css("background-color", settings.off_bg_color).removeClass('on');
$(element).parent().parent().prev().removeAttr("checked").trigger('change');
$(element).removeClass("left").addClass("right");
showUncheckedState($(element));
if (typeof $.fn.publish != 'undefined')
$.publish('toggle.' + $(element).parent().parent().prev().attr('id') + '.unchecked', []);
@ -76,48 +87,56 @@
settings.off_callback();
});
}else{
} else {
$(element).animate({marginLeft: '15px'}, 100,
// callback function
function(){
$(element).parent().prev().css("color",settings.on_label_color);
$(element).parent().next().css("color",settings.off_label_color);
$(element).parent().css("background-color", settings.on_bg_color).addClass('on');
$(element).parent().parent().prev().attr("checked", "checked").trigger('change');
$(element).removeClass("right").addClass("left");
showCheckedState($(element));
if (typeof $.fn.publish != 'undefined')
$.publish('toggle.' + $(element).parent().parent().prev().attr('id') + '.checked', []);
settings.on_callback();
});
}
};
return this.each(function () {
if ($(this).hasClass('simple')) return;
if (action == 'initialize') {// initialize the UI element
// hide the checkbox
$(this).css('display','none');
if ($(this).hasClass('simple')) return;
// insert the new toggle markup
if($(this).attr("checked") == "checked" || $(this).attr("checked") == true){
$(this).after('<div class="toggleSwitch"><span class="leftLabel">'+settings.on_label+'<\/span><div class="switchArea on" style="background-color: '+settings.on_bg_color+'"><span class="switchHandle left" style="margin-left: 15px;"><\/span><\/div><span class="rightLabel" style="color:#cccccc">'+settings.off_label+'<\/span><\/div>');
}else{
$(this).after('<div class="toggleSwitch"><span class="leftLabel" style="color:#cccccc;">'+settings.on_label+'<\/span><div class="switchArea" style="background-color: '+settings.off_bg_color+'"><span class="switchHandle right" style="margin-left:0px"><\/span><\/div><span class="rightLabel">'+settings.off_label+'<\/span><\/div>');
// hide the checkbox
$(this).css('display','none');
// insert the new toggle markup
if($(this).attr("checked") == "checked" || $(this).attr("checked") == true){
$(this).after('<div class="toggleSwitch"><span class="leftLabel">'+settings.on_label+'<\/span><div class="switchArea on" style="background-color: '+settings.on_bg_color+'"><span class="switchHandle left" style="margin-left: 15px;"><\/span><\/div><span class="rightLabel" style="color:#cccccc">'+settings.off_label+'<\/span><\/div>');
}else{
$(this).after('<div class="toggleSwitch"><span class="leftLabel" style="color:#cccccc;">'+settings.on_label+'<\/span><div class="switchArea" style="background-color: '+settings.off_bg_color+'"><span class="switchHandle right" style="margin-left:0px"><\/span><\/div><span class="rightLabel">'+settings.off_label+'<\/span><\/div>');
}
// Bind the switchHandle click events to the internal toggle function
$(this).next().find('div.switchArea').bind("click", function () {
toggle($(this).find('.switchHandle'));
})
} else if (action == 'sync') {
element = $(this).next().find('.switchHandle');
if ($(this).is(':checked'))
showCheckedState(element);
else
showUncheckedState(element);
} else {
console.log('unknown action for the checkToggle plugin')
}
// Bind the switchHandle click events to the internal toggle function
$(this).next().find('div.switchArea').bind("click", function () {
toggle($(this).find('.switchHandle')); })
});
};
})(jQuery);