diff --git a/doc/TODO b/doc/TODO index 0ef16759..44036f52 100644 --- a/doc/TODO +++ b/doc/TODO @@ -12,6 +12,8 @@ BOARD: - also save contents ? - edit images (upload new ones, ...etc) - google analytics tags (only visible in non edit mode) + - locale +- global regions: keyword in editable element - create a repo for a tool "a la" vision - write my first tutorial about locomotive - add images / files inside long text element (back-office side at first ?) diff --git a/lib/locomotive/liquid/tags/editable/long_text.rb b/lib/locomotive/liquid/tags/editable/long_text.rb index 1fc67f09..b6237742 100644 --- a/lib/locomotive/liquid/tags/editable/long_text.rb +++ b/lib/locomotive/liquid/tags/editable/long_text.rb @@ -9,7 +9,7 @@ module Locomotive def render_element(context, element) if context.registers[:inline_editor] %{ -
+
#{element.content}
} diff --git a/lib/locomotive/liquid/tags/editable/short_text.rb b/lib/locomotive/liquid/tags/editable/short_text.rb index 7f804ffd..814efc58 100644 --- a/lib/locomotive/liquid/tags/editable/short_text.rb +++ b/lib/locomotive/liquid/tags/editable/short_text.rb @@ -13,7 +13,7 @@ module Locomotive def render_element(context, element) if context.registers[:inline_editor] %{ - + #{element.content} } diff --git a/lib/locomotive/liquid/tags/inline_editor.rb b/lib/locomotive/liquid/tags/inline_editor.rb index c9b3a2cf..186dc8de 100644 --- a/lib/locomotive/liquid/tags/inline_editor.rb +++ b/lib/locomotive/liquid/tags/inline_editor.rb @@ -4,19 +4,31 @@ module Liquid class InlineEditor < ::Liquid::Tag def render(context) - if context.registers[:inline_editor] - %{ + if context.registers[:current_admin] + output = %{ + + + + } - - - - - - + if context.registers[:inline_editor] + output << %{ + + + + + + + + } + end + + output << %{ + } end end diff --git a/lib/locomotive/render.rb b/lib/locomotive/render.rb index fdd7ccc9..c41bfa1f 100644 --- a/lib/locomotive/render.rb +++ b/lib/locomotive/render.rb @@ -66,7 +66,13 @@ module Locomotive assigns[@page.content_type.slug.singularize] = @content_instance # just here to help to write readable liquid code end - registers = { :controller => self, :site => current_site, :page => @page, :inline_editor => self.editing_page? } + registers = { + :controller => self, + :site => current_site, + :page => @page, + :inline_editor => self.editing_page?, + :current_admin => current_admin + } ::Liquid::Context.new({}, assigns, registers) end @@ -86,7 +92,7 @@ module Locomotive end def editing_page? - self.params[:editing] == true + self.params[:editing] == true && current_admin end end diff --git a/public/images/admin/inline_editor/action-left.png b/public/images/admin/inline_editor/action-left.png new file mode 100644 index 00000000..c8103b5e Binary files /dev/null and b/public/images/admin/inline_editor/action-left.png differ diff --git a/public/images/admin/inline_editor/action-right.png b/public/images/admin/inline_editor/action-right.png new file mode 100644 index 00000000..a73b6232 Binary files /dev/null and b/public/images/admin/inline_editor/action-right.png differ diff --git a/public/images/admin/inline_editor/bg.png b/public/images/admin/inline_editor/bg.png new file mode 100644 index 00000000..7b00973a Binary files /dev/null and b/public/images/admin/inline_editor/bg.png differ diff --git a/public/images/admin/inline_editor/drawer.png b/public/images/admin/inline_editor/drawer.png new file mode 100644 index 00000000..1a61a13a Binary files /dev/null and b/public/images/admin/inline_editor/drawer.png differ diff --git a/public/javascripts/admin/inline_editor.js b/public/javascripts/admin/inline_editor.js index 1df8d7ac..7dcfa0eb 100644 --- a/public/javascripts/admin/inline_editor.js +++ b/public/javascripts/admin/inline_editor.js @@ -1,70 +1,130 @@ -GENTICS.Aloha.settings = { - errorhandling : false, - ribbon: false, - "i18n": {"current": "en"}, - "plugins": { - // "com.gentics.aloha.plugins.GCN": { - // "enabled": false - // }, - "com.gentics.aloha.plugins.Format": { - config : [ 'b', 'i', 'u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'], - editables : { - '.editable-short-text' : [ 'b', 'i', 'u' ] - } - }, - "com.gentics.aloha.plugins.Link": { - // all elements with no specific configuration may insert links - config : [ 'a' ], - editables : { - '.editable-short-text' : [ ] - } - }, - "com.gentics.aloha.plugins.List": { - config : [ 'ul' ], - editables : { - '.editable-short-text' : [ ] +if (typeof GENTICS != 'undefined') { + GENTICS.Aloha.settings = { + errorhandling : false, + ribbon: false, + "i18n": {"current": "en"}, + "plugins": { + // "com.gentics.aloha.plugins.GCN": { + // "enabled": false + // }, + "com.gentics.aloha.plugins.Format": { + config : [ 'b', 'i', 'u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'], + editables : { + '.editable-short-text' : [ 'b', 'i', 'u' ] + } + }, + "com.gentics.aloha.plugins.Link": { + // all elements with no specific configuration may insert links + config : [ 'a' ], + editables : { + '.editable-short-text' : [ ] + } + }, + "com.gentics.aloha.plugins.List": { + config : [ 'ul' ], + editables : { + '.editable-short-text' : [ ] + } } } - } -}; + }; +} + +var editingMode = false; + +var buildPageToolbar = function() { + var fullpath = $('meta[name=page-fullpath]').attr('content'); + var showPageUrl = $('meta[name=page-url]').attr('content'); + var editPageUrl = $('meta[name=edit-page-url]').attr('content'); + + editingMode = typeof showPageUrl != 'undefined'; + var style = editingMode ? '' : "style='display: none'" + + $('body').prepend("
\ + \ +
"); + + // events + $('#page-toolbar').find('.edit').click(function() { + url = window.location.href; + if (url.charAt(url.length - 1) == '/') url += 'index'; + window.location.href = url + '/edit'; + }); + + $('#page-toolbar').find('.cancel').click(function(e) { + e.preventDefault(); e.stopPropagation(); + window.location.href = window.location.href; + }); + + $('#page-toolbar').find('.back').click(function(e) { + e.preventDefault(); e.stopPropagation(); + window.location.href = fullpath; + }); + + $('#page-toolbar').find('.drawer a').eq(0).click(function() { + var self = $(this); + var max = $('#page-toolbar').width() - 17; + + if ($(this).hasClass('off')) + $('#page-toolbar').animate({ 'right': 0 }, 300, function() { + self.removeClass('off'); + }); + else + $('#page-toolbar').animate({ 'right': -max }, 300, function() { + self.addClass('off'); + }); + }); +} jQuery(document).ready(function($) { - // add 'edit' at the end of each url of the page - $('a').each(function() { - var url = $(this).attr('href'); + buildPageToolbar(); - if (/^(www|http)/.exec(url) == null) { - if (url == '/') url = '/index'; - $(this).attr('href', url + '/edit'); - } - }); + if (editingMode) { + // add 'edit' at the end of each url of the page + $('a').each(function() { + var url = $(this).attr('href'); - // handle editable long text - $('.editable-long-text').each(function(index) { + if (/^(www|http)/.exec(url) == null && /(\/edit)$/.exec(url) == null) { + if (url == '/') url = '/index'; + $(this).attr('href', url + '/edit'); + } + }); - var self = $(this); - // var postId = self.attr("data-id"); - // var postField = self.attr("data-field"); + // handle editable long text + $('.editable-long-text').each(function(index) { - // add callbacks to update post data fields: - self.aloha(); - }); + var self = $(this); + // var postId = self.attr("data-id"); + // var postField = self.attr("data-field"); - // handle editable short text - $('.editable-short-text').each(function() { - var self = $(this); + // add callbacks to update post data fields: + self.aloha(); + }); - var link = self.parents('a'); - if (link.size() == 1) { - link = link.eq(0); + // handle editable short text + $('.editable-short-text').each(function() { + var self = $(this); - // disable click event and replace it by double click instead - link.click(function(e) { e.stopPropagation(); e.preventDefault(); }); - link.dblclick(function(e) { window.location.href = link.attr('href'); }); - } + var link = self.parents('a'); + if (link.size() == 1) { + link = link.eq(0); - self.aloha(); - }); + // disable click event and replace it by double click instead + link.click(function(e) { e.stopPropagation(); e.preventDefault(); }); + link.dblclick(function(e) { window.location.href = link.attr('href'); }); + } + self.aloha(); + }); + + } }); diff --git a/public/stylesheets/admin/inline_editor.css b/public/stylesheets/admin/inline_editor.css index e69de29b..ba938287 100644 --- a/public/stylesheets/admin/inline_editor.css +++ b/public/stylesheets/admin/inline_editor.css @@ -0,0 +1,76 @@ +#page-toolbar { + position: fixed; + top: 0px; + right: 0px; + height: 28px; + background: transparent url('/images/admin/inline_editor/bg.png') repeat-x 0 0; + padding: 0 10px; + font-family: Helvetica; + -webkit-box-shadow: -3px 3px 12px #818181; +} + +#page-toolbar ul { + margin-top: 3px; + list-style: none; +} + +#page-toolbar ul li.link { + float: left; + margin-right: 5px; +} + +#page-toolbar ul li.link a { + display: block; + background: transparent url('/images/admin/inline_editor/action-left.png') no-repeat 0 0; + height: 21px; + padding-left: 24px; + text-decoration: none; + color: #fff; +} + +#page-toolbar ul li.link a:hover span { text-decoration: underline; } + +#page-toolbar ul li.save a { background-position: 0 -21px; } +#page-toolbar ul li.cancel a { background-position: 0 -42px; } +#page-toolbar ul li.copy a { background-position: 0 -63px; } +#page-toolbar ul li.edit a { background-position: 0 -84px; } +#page-toolbar ul li.back a { background-position: 0 -105px; } + +#page-toolbar ul li.link a span { + display: block; + background: transparent url('/images/admin/inline_editor/action-right.png') no-repeat right 0; + height: 20px; + padding: 1px 14px 0 2px; + text-shadow: 1px 1px 1px #000; +} + +#page-toolbar ul li.drawer { + float: left; + margin: 0 10px 0 5px; +} + +#page-toolbar ul li.drawer a { + display: block; + position: relative; + top: 6px; + width: 10px; + height: 10px; + background: transparent url('/images/admin/inline_editor/drawer.png') no-repeat 0 0; + text-decoration: none; +} + +#page-toolbar ul li.drawer a.off { + background-position: 0 -10px; +} + +#page-toolbar ul li.sep { float: left; margin: 0 15px 0 10px; } + +#page-toolbar ul li.sep span { + display: block; + height: 21px; + width: 1px; + background: #3a3b40; + border-left: 1px solid #56575e; +} + +#page-toolbar ul li.clear { clear: both; } \ No newline at end of file