diff --git a/app/assets/javascripts/locomotive/models/page.js.coffee b/app/assets/javascripts/locomotive/models/page.js.coffee
index f833f93d..c690d47f 100644
--- a/app/assets/javascripts/locomotive/models/page.js.coffee
+++ b/app/assets/javascripts/locomotive/models/page.js.coffee
@@ -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'))
diff --git a/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee b/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee
index 56eff726..ab108378 100644
--- a/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee
+++ b/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee
@@ -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')
diff --git a/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee b/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee
index 6e9d2866..85e40b3a 100644
--- a/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee
+++ b/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee
@@ -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
\ No newline at end of file
diff --git a/app/assets/stylesheets/locomotive/inline_editor/toolbar.css.scss b/app/assets/stylesheets/locomotive/inline_editor/toolbar.css.scss
index a85b912d..1cfe640c 100644
--- a/app/assets/stylesheets/locomotive/inline_editor/toolbar.css.scss
+++ b/app/assets/stylesheets/locomotive/inline_editor/toolbar.css.scss
@@ -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
}
}
\ No newline at end of file
diff --git a/app/presenters/locomotive/page_presenter.rb b/app/presenters/locomotive/page_presenter.rb
index 339dc2de..af6571e7 100644
--- a/app/presenters/locomotive/page_presenter.rb
+++ b/app/presenters/locomotive/page_presenter.rb
@@ -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
diff --git a/app/views/locomotive/public/pages/show_toolbar.html.haml b/app/views/locomotive/public/pages/show_toolbar.html.haml
index ab1cb742..9a0714ea 100644
--- a/app/views/locomotive/public/pages/show_toolbar.html.haml
+++ b/app/views/locomotive/public/pages/show_toolbar.html.haml
@@ -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
diff --git a/config/locales/admin_ui.en.yml b/config/locales/admin_ui.en.yml
index e6a27bfb..23f0fa39 100644
--- a/config/locales/admin_ui.en.yml
+++ b/config/locales/admin_ui.en.yml
@@ -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 here)."
back_to_default_template: "Click here 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
diff --git a/lib/locomotive/liquid/tags/inline_editor.rb b/lib/locomotive/liquid/tags/inline_editor.rb
index 927b0b12..2939d0d3 100644
--- a/lib/locomotive/liquid/tags/inline_editor.rb
+++ b/lib/locomotive/liquid/tags/inline_editor.rb
@@ -7,7 +7,7 @@ module Liquid
if context.registers[:current_locomotive_account] && context.registers[:inline_editor]
%{
}
else
diff --git a/lib/locomotive/render.rb b/lib/locomotive/render.rb
index 557fd6bd..2da956fb 100644
--- a/lib/locomotive/render.rb
+++ b/lib/locomotive/render.rb
@@ -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