inline editor work in progress
This commit is contained in:
did
parent
7169abb8c2
commit
e210953d01
@ -7,6 +7,9 @@ class Locomotive.Models.Page extends Backbone.Model
|
||||
initialize: ->
|
||||
@_normalize()
|
||||
|
||||
@set
|
||||
edit_url: "#{Locomotive.mounted_on}/pages/#{@id}/edit"
|
||||
|
||||
_normalize: ->
|
||||
@set
|
||||
editable_elements: new Locomotive.Models.EditableElementsCollection(@get('editable_elements'))
|
||||
|
||||
@ -20,11 +20,15 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
|
||||
|
||||
set_page: (attributes) ->
|
||||
@page = new Locomotive.Models.Page(attributes)
|
||||
|
||||
window.foo = @page
|
||||
|
||||
@toolbar_view.model = @page
|
||||
|
||||
@$('#toolbar .inner').html(@toolbar_view.refresh().render().el)
|
||||
if @$('#toolbar .inner .toolbar-view').size() == 0
|
||||
@$('#toolbar .inner').html(@toolbar_view.render().el) # first time we render it
|
||||
else
|
||||
@toolbar_view.refresh()
|
||||
|
||||
decorate_iframe: ->
|
||||
iframe = @iframe
|
||||
@ -36,9 +40,29 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
|
||||
window.addJavascript doc, '/assets/locomotive/aloha/lib/aloha.js',
|
||||
'data-aloha-plugins': 'common/format,common/highlighteditables,common/list,common/link,common/undo,common/paste'
|
||||
onload: =>
|
||||
console.log('loading target iframe')
|
||||
|
||||
# wake up the toolbar
|
||||
@toolbar_view.enable()
|
||||
|
||||
# keep the user in the admin mode
|
||||
_$ = iframe[0].contentWindow.Aloha.jQuery
|
||||
_$('a').each ->
|
||||
link = _$(this)
|
||||
url = link.attr('href')
|
||||
if url != '#' && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null
|
||||
url = '/index' if url == '/'
|
||||
if url.indexOf('?') > 0
|
||||
link.attr('href', url.replace('?', '/_edit?'))
|
||||
else
|
||||
link.attr('href', "#{url}/_edit")
|
||||
|
||||
link.bind 'click', ->
|
||||
window.history.pushState('Object', 'Title', link.attr('href').replace('_edit', '_admin'))
|
||||
|
||||
# notify the toolbar about changes
|
||||
iframe[0].contentWindow.Aloha.bind 'aloha-editable-deactivated', (event, editable) =>
|
||||
@toolbar_view.change_editable_element editable.editable
|
||||
@toolbar_view.notify editable.editable
|
||||
|
||||
# bind the resize event. When the iFrame's size changes, update its height
|
||||
iframe_content = iframe.contents().find('body')
|
||||
|
||||
@ -8,6 +8,7 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
||||
|
||||
events:
|
||||
'change .editing-mode input[type=checkbox]': 'toggle_editing_mode'
|
||||
'click .back a': 'back'
|
||||
'click .element-actions a.save': 'save_modifications'
|
||||
'click .element-actions a.cancel': 'cancel_modifications'
|
||||
|
||||
@ -22,8 +23,8 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
||||
|
||||
@
|
||||
|
||||
change_editable_element: (aloha_editable) ->
|
||||
console.log('changing editable_element...')
|
||||
notify: (aloha_editable) ->
|
||||
console.log('editable_element has been modified...')
|
||||
|
||||
window.bar = aloha_editable
|
||||
|
||||
@ -47,20 +48,29 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
||||
|
||||
cancel_modifications: (event) ->
|
||||
event.stopPropagation() & event.preventDefault()
|
||||
@options.target[0].contentWindow.location.href = @options.target[0].contentWindow.location.href;
|
||||
@options.target[0].contentWindow.location.href = @options.target[0].contentWindow.location.href
|
||||
|
||||
back: (event) ->
|
||||
event.stopPropagation() & event.preventDefault()
|
||||
window.location.href = @model.get('edit_url')
|
||||
|
||||
enable: ->
|
||||
@options.target[0].contentWindow.Aloha.settings.locale = window.locale;
|
||||
@$('.editing-mode').show()
|
||||
|
||||
toggle_editing_mode: (event) ->
|
||||
return if @editable_elements() == null
|
||||
|
||||
if $(event.target).is(':checked')
|
||||
@editable_elements().aloha()
|
||||
else
|
||||
@editable_elements().removeClass('aloha-editable-highlight').mahalo()
|
||||
|
||||
editable_elements: ->
|
||||
@options.target[0].contentWindow.Aloha.jQuery('.editable-long-text, .editable-short-text')
|
||||
if @options.target[0].contentWindow.Aloha
|
||||
@options.target[0].contentWindow.Aloha.jQuery('.editable-long-text, .editable-short-text')
|
||||
else
|
||||
null
|
||||
|
||||
enable_editing_mode_checkbox: ->
|
||||
@$('.editing-mode input[type=checkbox]').checkToggle
|
||||
@ -68,8 +78,15 @@ class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
|
||||
off_label_color: '#bbb'
|
||||
|
||||
refresh: ->
|
||||
console.log('refreshing...')
|
||||
@
|
||||
console.log('refreshing toolbar...')
|
||||
|
||||
@$('h1').html(@model.get('title'))
|
||||
|
||||
if @$('.editing-mode input[type=checkbox]').is(':checked')
|
||||
@$('.editing-mode div.switchArea').trigger('click')
|
||||
|
||||
@$('.element-actions').hide()
|
||||
|
||||
|
||||
remove: ->
|
||||
super
|
||||
@ -49,18 +49,33 @@
|
||||
}
|
||||
|
||||
.col {
|
||||
float: right;
|
||||
|
||||
line-height: 50px;
|
||||
|
||||
margin-right: 10px;
|
||||
padding-left: 14px;
|
||||
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.3);
|
||||
@include box-shadow(rgba(255, 255, 255, 0.1) 1px 0 0 0 inset);
|
||||
|
||||
label {
|
||||
@include single-text-shadow(#000, 0px, 1px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
a {
|
||||
color: #1F82BC;
|
||||
@include single-text-shadow(#000, 0px, 1px, 0px);
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editing-mode {
|
||||
float: right;
|
||||
|
||||
line-height: 50px;
|
||||
|
||||
.toggleSwitch {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
@ -74,21 +89,16 @@
|
||||
}
|
||||
|
||||
.element-actions {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
line-height: 50px;
|
||||
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
|
||||
margin: 0 5px;
|
||||
padding: 0 14px;
|
||||
|
||||
@include border-radius(16px);
|
||||
@include border-radius(14px);
|
||||
@include background-image(linear-gradient(#303138, #1e1e24));
|
||||
@include box-shadow(rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(255, 255, 255, 0.1) 0 1px 0 0);
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
@ -96,7 +106,11 @@
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.6);
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
// font-size: 13px;
|
||||
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
@include single-text-shadow(rgba(0, 0, 0, 1), 1px, 1px, 1px);
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
@ -108,12 +122,6 @@
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
@include single-text-shadow(rgba(0, 0, 0, 1), 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.4);
|
||||
@ -126,7 +134,27 @@
|
||||
@include background-image(linear-gradient(#1e1e24, #212229));
|
||||
@include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.save {
|
||||
@include single-text-shadow(rgba(0, 0, 0, 0.6), 1px, 1px, 1px);
|
||||
|
||||
@include background-image(linear-gradient(#2abaf1, #228dda));
|
||||
@include box-shadow(rgba(255, 255, 255, 0.4) 0 1px 0 0 inset, rgba(127, 177, 211, 0.3) 0 1px 0 0);
|
||||
border: 1px solid rgba(13, 56, 87, 1);
|
||||
border-top: 1px solid rgba(13, 56, 87, 1);
|
||||
border-bottom: 1px solid rgba(13, 56, 87, 1);
|
||||
|
||||
&.on, &:active {
|
||||
@include box-shadow(rgba(0, 0, 0, 0) 0 1px 0 0 inset, rgba(255, 255, 255, 0.2) 0 1px 0 0);
|
||||
@include background-image(linear-gradient(#26a1e9, #26a1e9));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
} // .button
|
||||
} // .element-actions
|
||||
}
|
||||
}
|
||||
@ -12,7 +12,7 @@ module Locomotive
|
||||
end
|
||||
|
||||
def included_methods
|
||||
super + %w(title slug fullpath raw_template published listed templatized redirect redirect_url cache_strategy template_changed editable_elements)
|
||||
super + %w(title slug fullpath raw_template published listed templatized redirect redirect_url cache_strategy template_changed editable_elements edit_url)
|
||||
end
|
||||
|
||||
def as_json_for_html_view
|
||||
|
||||
@ -33,14 +33,17 @@
|
||||
|
||||
%h1 {{title}}
|
||||
|
||||
.back.col
|
||||
= link_to t('.buttons.back'), '#', :class => 'button back'
|
||||
|
||||
.editing-mode.col{ :style => 'display: none' }
|
||||
%label Editing mode:
|
||||
%label= t('.editing_mode')
|
||||
= check_box_tag 'edit', '1', false
|
||||
|
||||
.element-actions.col
|
||||
%label= t('.update_elements')
|
||||
= link_to t('.save'), '#', :class => 'button save'
|
||||
= link_to t('.cancel'), '#', :class => 'button cancel'
|
||||
.element-actions.col{ :style => 'display: none' }
|
||||
%label= t('.save_modifications')
|
||||
= link_to t('.buttons.confirm'), '#', :class => 'button save'
|
||||
= link_to t('.buttons.cancel'), '#', :class => 'button cancel'
|
||||
|
||||
%body
|
||||
#page
|
||||
|
||||
@ -302,3 +302,13 @@ en:
|
||||
explanations: "If you already uploaded the default site template (see instructions), you can use it right away. Or you can upload a site template as a zip file (free available templates <a href=\"http://www.locomotivecms.com/support/themes\">here</a>)."
|
||||
back_to_default_template: "Click <a href='#'>here</a> to select the default site template instead"
|
||||
next: Create site
|
||||
|
||||
public:
|
||||
pages:
|
||||
show_toolbar:
|
||||
save_modifications: "Save modifications: "
|
||||
editing_mode: "Editing mode: "
|
||||
buttons:
|
||||
back: Return to back-office
|
||||
confirm: Confirm
|
||||
cancel: Cancel
|
||||
|
||||
@ -7,7 +7,7 @@ module Liquid
|
||||
if context.registers[:current_locomotive_account] && context.registers[:inline_editor]
|
||||
%{
|
||||
<script type="text/javascript">
|
||||
window.parent.application_view.set_page(#{context.registers[:page].to_json});
|
||||
window.parent.application_view.set_page(#{context.registers[:page].to_presenter.as_json_for_html_view.to_json});
|
||||
</script>
|
||||
}
|
||||
else
|
||||
|
||||
@ -33,7 +33,7 @@ module Locomotive
|
||||
path.gsub!(/\.[a-zA-Z][a-zA-Z0-9]{2,}$/, '') # remove the page extension
|
||||
path.gsub!(/^\//, '') # remove the leading slash
|
||||
|
||||
path = 'index' if path.blank? || path == 'edit'
|
||||
path = 'index' if path.blank? || path == '_edit'
|
||||
|
||||
if path != 'index'
|
||||
dirname = File.dirname(path).gsub(/^\.$/, '') # also look for templatized page path
|
||||
|
||||
Loading…
Reference in New Issue
Block a user