github-migration
/
engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page toolbar for live editing

This commit is contained in:
dinedine 2010-09-04 01:47:28 +02:00
parent 9967e9d3d3
commit 1e8376d18f
11 changed files with 223 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/TODO
View File

@ -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 ?)

2
lib/locomotive/liquid/tags/editable/long_text.rb
View File

@ -9,7 +9,7 @@ module Locomotive
def render_element(context, element)
if context.registers[:inline_editor]
%{
<div class='editable-long-text' data-page-id='#{element.page.id}' data-element-id='#{element.id}'>
<div class='editable-long-text' data-element-id='#{element.id}' data-element-index='#{element._index}'>
#{element.content}
</div>
}

2
lib/locomotive/liquid/tags/editable/short_text.rb
View File

@ -13,7 +13,7 @@ module Locomotive
def render_element(context, element)
if context.registers[:inline_editor]
%{
<span class='editable-short-text' data-page-id='#{element.page.id}' data-element-id='#{element.id}'>
<span class='editable-short-text' data-element-id='#{element.id}' data-element-index='#{element._index}'>
#{element.content}
</span>
}

28
lib/locomotive/liquid/tags/inline_editor.rb
View File

@ -4,19 +4,31 @@ module Liquid
class InlineEditor < ::Liquid::Tag
def render(context)
if context.registers[:inline_editor]
%{
if context.registers[:current_admin]
output = %{
<meta name="page-fullpath" content="/#{context.registers[:page].fullpath}" />
<meta name="edit-page-url" content="#{context.registers[:controller].send(:edit_admin_page_url, context.registers[:page])}" />
<script src="/javascripts/admin/jquery.js" type="text/javascript"></script>
<script src="/javascripts/admin/rails.js" type="text/javascript"></script>
}
<script type="text/javascript" src="/javascripts/admin/aloha/aloha.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>
if context.registers[:inline_editor]
output << %{
<meta name="page-url" content="#{context.registers[:controller].send(:admin_page_url, context.registers[:page])}" />
<script type="text/javascript" src="/javascripts/admin/aloha/aloha.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js"></script>
<script type="text/javascript" src="/javascripts/admin/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>
}
end
output << %{
<script type="text/javascript" src="/javascripts/admin/inline_editor.js"></script>
<link href="/stylesheets/admin/inline_editor.css" media="screen" rel="stylesheet" type="text/css" />
}
end
end

10
lib/locomotive/render.rb
View File

@ -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

BIN
public/images/admin/inline_editor/action-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/images/admin/inline_editor/action-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
public/images/admin/inline_editor/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 235 B

BIN
public/images/admin/inline_editor/drawer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 525 B

170
public/javascripts/admin/inline_editor.js
View File

@ -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("<div id='page-toolbar'>\
<ul>\
<li class='drawer'><a href='#'><span>&nbsp;</span></a></li>\
<li class='link home'><a href='" + editPageUrl + "'><span>admin</span></a></li>\
<li class='sep'><span>&nbsp;</span></li>\
<li class='link edit' style='" + (editingMode ? 'display: none' : '') + "'><a href='#'><span>edit</span></a></li>\
<li class='link save' style='display: none'><a href='#'><span>save</span></a></li>\
<li class='link cancel' style='display: none'><a href='#'><span>cancel</span></a></li>\
<li class='link back' style='" + (editingMode ? '' : 'display: none') + "'><a href='#'><span>back</span></a></li>\
</ul>\
</div>");
// 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();
});
}
});

76
public/stylesheets/admin/inline_editor.css
View File

@ -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; }