clean the inline editor js code (namespace toolbar functions, ...etc)
This commit is contained in:
dinedine
parent
dad944d625
commit
eb81a5041f
4
doc/TODO
4
doc/TODO
@ -12,10 +12,10 @@ BOARD:
|
||||
x locale
|
||||
x store page toolbar status in cookie
|
||||
x trim short text content
|
||||
- namespace js functions
|
||||
x namespace js functions
|
||||
- editable elements should wrap a tag: div, h1, ...etc (default span)
|
||||
- also save contents ?
|
||||
- edit images (upload new ones, ...etc)
|
||||
- edit images (upload new ones, ...etc) => wait for aloha or send them an email ?
|
||||
- google analytics tags (only visible in non edit mode)
|
||||
- global regions: keyword in editable element (http://www.mongodb.org/display/DOCS/Updating)
|
||||
- create a repo for a tool "a la" vision
|
||||
|
||||
@ -38,6 +38,7 @@ module Liquid
|
||||
|
||||
output << %{
|
||||
<script src="/javascripts/admin/rails.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="/javascripts/admin/inline_editor_toolbar.js"></script>
|
||||
<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" />
|
||||
}
|
||||
|
||||
@ -1,81 +1,3 @@
|
||||
var foo = bar = null;
|
||||
|
||||
var locale = 'en';
|
||||
|
||||
// var foo = null;
|
||||
|
||||
var allTranslations = {
|
||||
'en': {
|
||||
'home': 'admin',
|
||||
'edit': 'edit',
|
||||
'save': 'save',
|
||||
'cancel': 'cancel',
|
||||
'back': 'edition done',
|
||||
'saving': 'saving'
|
||||
},
|
||||
'fr': {
|
||||
'home': 'admin',
|
||||
'edit': 'editer',
|
||||
'save': 'sauver',
|
||||
'cancel': 'annuler',
|
||||
'back': 'fin mode edition',
|
||||
'saving': 'sauvegarde en cours'
|
||||
}
|
||||
}
|
||||
|
||||
var prepareForm = function(jEvent, aEvent) {
|
||||
// console.log('foo !!!');
|
||||
// console.log(ui.editable.getContents());
|
||||
$('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1)').show();
|
||||
|
||||
var element = $(aEvent.editable.obj[0]);
|
||||
// var id = element.attr('data-element-id');
|
||||
var index = element.attr('data-element-index');
|
||||
|
||||
// console.log('id = ' + id + ', index = ' + index);
|
||||
|
||||
// if ($('#page-toolbar form editable-' + index).length > 0) return;
|
||||
//
|
||||
// $('#page-toolbar form').append("\
|
||||
// <input id='editable-" + index +"' class='auto' type='hidden' name='page[editable_elements_attributes][" + index + "][id]' value='" + id + "' />\
|
||||
// <input class='auto' type='hidden' name='page[editable_elements_attributes][" + index + "][_index]' value='" + index + "' />\
|
||||
// <input class='auto' type='hidden' name='page[editable_elements_attributes][" + index + "][content]' />\
|
||||
// ");
|
||||
|
||||
// $('#page-toolbar form input:last').val(aEvent.editable.getContents());
|
||||
|
||||
var input = $('#page-toolbar form #editable-' + index);
|
||||
|
||||
input.attr('name', input.attr('name').replace('_index', 'content'));
|
||||
input.val(aEvent.editable.getContents().replace(/^\s*/, "").replace(/\s*$/, ""));
|
||||
|
||||
$('#page-toolbar').css('right', 0);
|
||||
$('#page-toolbar .drawer a').removeClass('off');
|
||||
|
||||
// foo = $(this);
|
||||
|
||||
// $(foo.editable.obj[0])
|
||||
|
||||
// console.log($(this).attr('data-element-id'));
|
||||
|
||||
// bar = a;
|
||||
// foo = ui;
|
||||
}
|
||||
|
||||
var displaySpinner = function() {
|
||||
$('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1)').hide();
|
||||
$('#page-toolbar .spinner').show();
|
||||
};
|
||||
|
||||
var resetForm = function() {
|
||||
$('#page-toolbar form input.auto').each(function() {
|
||||
$(this).attr('name', $(this).attr('name').replace('content', '_index'));
|
||||
$(this).val('');
|
||||
});
|
||||
|
||||
$('#page-toolbar li.save, #page-toolbar li.cancel, #page-toolbar li.sep:eq(1), #page-toolbar li.spinner').hide();
|
||||
}
|
||||
|
||||
if (typeof GENTICS != 'undefined') {
|
||||
GENTICS.Aloha.settings = {
|
||||
errorhandling : false,
|
||||
@ -106,120 +28,15 @@ if (typeof GENTICS != 'undefined') {
|
||||
}
|
||||
};
|
||||
|
||||
GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, "editableDeactivated", prepareForm);
|
||||
}
|
||||
|
||||
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');
|
||||
var nbElements = parseInt($('meta[name=page-elements-count]').attr('content'));
|
||||
var translations = allTranslations[locale];
|
||||
|
||||
editingMode = typeof showPageUrl != 'undefined';
|
||||
var style = editingMode ? '' : "style='display: none'"
|
||||
|
||||
var formContentHTML = "<input type='hidden' name='_method' value='put' />";
|
||||
for (var i = 0; i < nbElements; i++) {
|
||||
formContentHTML += "<input class='auto' id='editable-" + i + "' type='hidden' name='page[editable_elements_attributes][" + i + "][_index]' value='' />";
|
||||
}
|
||||
|
||||
$('body').prepend("<div id='page-toolbar'>\
|
||||
<ul>\
|
||||
<li class='drawer'><a href='#'><span> </span></a></li>\
|
||||
<li class='link home'><a href='" + editPageUrl + "'><span>" + translations['home'] + "</span></a></li>\
|
||||
<li class='sep'><span> </span></li>\
|
||||
<li class='link edit' style='" + (editingMode ? 'display: none' : '') + "'><a href='#'><span>" + translations['edit'] + "</span></a></li>\
|
||||
<li class='link save' style='display: none'><a href='#'><span>" + translations['save'] + "</span></a></li>\
|
||||
<li class='link cancel' style='display: none'><a href='#'><span>" + translations['cancel'] + "</span></a></li>\
|
||||
<li class='link spinner' style='display: none'><a href='#'><span><img src='/images/admin/form/spinner.gif' /><em>" + translations['saving'] + "</em></span></a></li>\
|
||||
<li class='sep' style='display: none'><span> </span></li>\
|
||||
<li class='link back' style='" + (editingMode ? '' : 'display: none') + "'><a href='#'><span>" + translations['back'] + "</span></a></li>\
|
||||
</ul>\
|
||||
<form action='" + showPageUrl + "' accept-charset='UTF-8' method='post'>\
|
||||
" + formContentHTML + "\
|
||||
</form>\
|
||||
</div>");
|
||||
|
||||
// build the form
|
||||
$('#page-toolbar form').live('submit', function (e) {
|
||||
$(this).callRemote();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}).bind('ajax:complete', function() {
|
||||
// console.log('ajax:complete');
|
||||
resetForm();
|
||||
}).bind('ajax:loading', function() {
|
||||
// console.log('ajax:failure');
|
||||
displaySpinner();
|
||||
}).bind('ajax:failure', function() {
|
||||
// console.log('ajax:failure');
|
||||
resetForm();
|
||||
});
|
||||
|
||||
// events: save
|
||||
$('#page-toolbar').find('.save').click(function(e) {
|
||||
$('#page-toolbar form').submit();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// events: edit
|
||||
$('#page-toolbar').find('.edit').click(function() {
|
||||
url = window.location.href;
|
||||
if (url.charAt(url.length - 1) == '/') url += 'index';
|
||||
url = url.replace('#', '');
|
||||
window.location.href = url + '/edit';
|
||||
});
|
||||
|
||||
// events: cancel
|
||||
$('#page-toolbar').find('.cancel').click(function(e) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
window.location.href = window.location.href;
|
||||
});
|
||||
|
||||
// events: back
|
||||
$('#page-toolbar').find('.back').click(function(e) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
window.location.href = fullpath;
|
||||
});
|
||||
|
||||
// drawer
|
||||
$('#page-toolbar .drawer a').eq(0).click(function(e) {
|
||||
var self = $(this);
|
||||
var max = $('#page-toolbar').width() - 17;
|
||||
|
||||
if ($(this).hasClass('off'))
|
||||
$('#page-toolbar').animate({ 'right': 0 }, 300, function() {
|
||||
self.removeClass('off');
|
||||
$.cookie('inline_editor_off', '0');
|
||||
});
|
||||
else
|
||||
$('#page-toolbar').animate({ 'right': -max }, 300, function() {
|
||||
self.addClass('off');
|
||||
$.cookie('inline_editor_off', '1');
|
||||
});
|
||||
|
||||
e.stopPropagation(); e.preventDefault();
|
||||
});
|
||||
GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableDeactivated', InlineEditorToolbar.updateForm);
|
||||
}
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
locale = $('meta[name=locale]').attr('content');
|
||||
InlineEditorToolbar.initialize();
|
||||
|
||||
buildPageToolbar();
|
||||
|
||||
if ($.cookie('inline_editor_off') == '1') {
|
||||
var max = $('#page-toolbar').width() - 17;
|
||||
$('#page-toolbar').css('right', -max);
|
||||
$('#page-toolbar .drawer a').addClass('off');
|
||||
}
|
||||
|
||||
if (editingMode) {
|
||||
// set locale
|
||||
GENTICS.Aloha.settings['i18n'] = { 'current': locale };
|
||||
if (InlineEditorToolbar.editingMode) {
|
||||
GENTICS.Aloha.settings['i18n'] = { 'current': InlineEditorToolbar.locale };
|
||||
|
||||
// add 'edit' at the end of each url of the page
|
||||
$('a').each(function() {
|
||||
@ -232,30 +49,16 @@ jQuery(document).ready(function($) {
|
||||
});
|
||||
|
||||
// handle editable long text
|
||||
$('.editable-long-text').each(function(index) {
|
||||
|
||||
var self = $(this);
|
||||
// var postId = self.attr("data-id");
|
||||
// var postField = self.attr("data-field");
|
||||
|
||||
// add callbacks to update post data fields:
|
||||
self.aloha();
|
||||
});
|
||||
$('.editable-long-text').aloha();
|
||||
|
||||
// handle editable short text
|
||||
$('.editable-short-text').each(function() {
|
||||
var self = $(this);
|
||||
|
||||
var link = self.parents('a');
|
||||
if (link.size() == 1) {
|
||||
link = link.eq(0);
|
||||
|
||||
// disable click event and replace it by double click instead
|
||||
var link = $(this).parents('a').eq(0);
|
||||
if (link.size() == 1) { // 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();
|
||||
$(this).aloha();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
167
public/javascripts/admin/inline_editor_toolbar.js
Normal file
167
public/javascripts/admin/inline_editor_toolbar.js
Normal file
@ -0,0 +1,167 @@
|
||||
var InlineEditorToolbar = {
|
||||
|
||||
element: null, // reference to the toolbar element
|
||||
|
||||
form: null, // reference to the form used to post changes
|
||||
|
||||
editingMode: false, // true means that Aloha should be enabled
|
||||
|
||||
drawerButton: null,
|
||||
|
||||
locale: 'en', // default locale
|
||||
|
||||
initialize: function() {
|
||||
this.editingMode = window.location.href.match(/\/edit$/) != null;
|
||||
this.locale = $('meta[name=locale]').attr('content');
|
||||
|
||||
this._buildHTML();
|
||||
|
||||
this.element = $('#page-toolbar');
|
||||
this.form = this.element.find('form');
|
||||
this.drawerButton = this.element.find('.drawer a');
|
||||
|
||||
this._bindEvents();
|
||||
|
||||
if ($.cookie('ie_toolbar_off') == '1') this.hide(0, false);
|
||||
},
|
||||
|
||||
toggle: function(animate) {
|
||||
var duration = (typeof animate == 'undefined') || animate == true ? 300 : 0;
|
||||
|
||||
if (this.drawerButton.hasClass('off')) this.show(duration); else this.hide(duration);
|
||||
},
|
||||
|
||||
show: function(duration, withCookie) {
|
||||
var self = this;
|
||||
|
||||
this.element.animate({ 'right': 0 }, duration, function() {
|
||||
self.drawerButton.removeClass('off');
|
||||
if ((typeof withCookie == 'undefined') || withCookie == true)
|
||||
$.cookie('ie_toolbar_off', '0');
|
||||
});
|
||||
},
|
||||
|
||||
hide: function(duration, withCookie) {
|
||||
var self = this;
|
||||
var max = this.element.width() - 17;
|
||||
|
||||
this.element.animate({ 'right': -max }, duration, function() {
|
||||
self.drawerButton.addClass('off');
|
||||
if ((typeof withCookie == 'undefined') || withCookie == true)
|
||||
$.cookie('ie_toolbar_off', '1');
|
||||
});
|
||||
},
|
||||
|
||||
updateForm: function(jEvent, aEvent) {
|
||||
InlineEditorToolbar.element.find('li.save, li.cancel, li.sep:eq(1)').show();
|
||||
InlineEditorToolbar.element.find('')
|
||||
|
||||
var editableObj = $(aEvent.editable.obj[0]);
|
||||
var index = editableObj.attr('data-element-index');
|
||||
var input = InlineEditorToolbar.form.find('#editable-' + index);
|
||||
|
||||
input.attr('name', input.attr('name').replace('_index', 'content'));
|
||||
input.val(aEvent.editable.getContents().replace(/^\s*/, "").replace(/\s*$/, ""));
|
||||
|
||||
InlineEditorToolbar.show(true, false);
|
||||
},
|
||||
|
||||
displaySpinner: function() {
|
||||
this.element.find('li.save, li.cancel, li.sep:eq(1)').hide();
|
||||
this.element.find('.spinner').show();
|
||||
},
|
||||
|
||||
resetForm: function() {
|
||||
this.form.find('input.auto').each(function() {
|
||||
$(this).attr('name', $(this).attr('name').replace('content', '_index'));
|
||||
$(this).val('');
|
||||
});
|
||||
|
||||
this.element.find('li.save, li.cancel, li.sep:eq(1), li.spinner').hide();
|
||||
},
|
||||
|
||||
/* ___ internal methods ___ */
|
||||
|
||||
_buildHTML: function() {
|
||||
var labels = this._translations[this.locale];
|
||||
|
||||
var showPageUrl = $('meta[name=page-url]').attr('content');
|
||||
var editPageUrl = $('meta[name=edit-page-url]').attr('content');
|
||||
var nbElements = parseInt($('meta[name=page-elements-count]').attr('content'));
|
||||
|
||||
var formContentHTML = "<input type='hidden' name='_method' value='put' />";
|
||||
for (var i = 0; i < nbElements; i++) {
|
||||
formContentHTML += "<input class='auto' id='editable-" + i + "' type='hidden' name='page[editable_elements_attributes][" + i + "][_index]' value='' />";
|
||||
}
|
||||
|
||||
$('body').prepend("<div id='page-toolbar'>\
|
||||
<ul>\
|
||||
<li class='drawer'><a href='#'><span> </span></a></li>\
|
||||
<li class='link home'><a href='" + editPageUrl + "'><span>" + labels['home'] + "</span></a></li>\
|
||||
<li class='sep'><span> </span></li>\
|
||||
<li class='link edit' style='" + (this.editingMode ? 'display: none' : '') + "'><a href='#'><span>" + labels['edit'] + "</span></a></li>\
|
||||
<li class='link save' style='display: none'><a href='#'><span>" + labels['save'] + "</span></a></li>\
|
||||
<li class='link cancel' style='display: none'><a href='#'><span>" + labels['cancel'] + "</span></a></li>\
|
||||
<li class='link spinner' style='display: none'><a href='#'><span><img src='/images/admin/form/spinner.gif' /><em>" + labels['saving'] + "</em></span></a></li>\
|
||||
<li class='sep' style='display: none'><span> </span></li>\
|
||||
<li class='link back' style='" + (this.editingMode ? '' : 'display: none') + "'><a href='#'><span>" + labels['back'] + "</span></a></li>\
|
||||
</ul>\
|
||||
<form action='" + showPageUrl + "' accept-charset='UTF-8' method='post'>\
|
||||
" + formContentHTML + "\
|
||||
</form>\
|
||||
</div>");
|
||||
},
|
||||
|
||||
_bindEvents: function() {
|
||||
var self = this;
|
||||
var fullpath = $('meta[name=page-fullpath]').attr('content');
|
||||
|
||||
this.form.live('submit', function (e) { $(this).callRemote(); e.stopPropagation(); e.preventDefault();
|
||||
}).bind('ajax:complete', function() { self.resetForm();
|
||||
}).bind('ajax:loading', function() { self.displaySpinner();
|
||||
}).bind('ajax:failure', function() { self.resetForm();
|
||||
});
|
||||
|
||||
this.element.find('ul li a').click(function(e) {
|
||||
var classArray = $(this).parent().attr('class').split(' ');
|
||||
switch(classArray[1] || classArray[0]) {
|
||||
case 'edit': // passing in editing mode
|
||||
var url = window.location.href.replace(/\/$/, '/index').replace('#', '');
|
||||
window.location.href = url + '/edit'; break;
|
||||
|
||||
case 'save': // saving changes
|
||||
self.form.submit(); break;
|
||||
|
||||
case 'cancel': // reload the page
|
||||
window.location.href = window.location.href; break;
|
||||
|
||||
case 'back': // back to the non edition mode
|
||||
window.location.href = fullpath; break;
|
||||
|
||||
case 'drawer': // expand / shrink toolbar
|
||||
self.toggle(); break;
|
||||
}
|
||||
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
});
|
||||
},
|
||||
|
||||
_translations: {
|
||||
'en': {
|
||||
'home': 'admin',
|
||||
'edit': 'edit',
|
||||
'save': 'save',
|
||||
'cancel': 'cancel',
|
||||
'back': 'edition done',
|
||||
'saving': 'saving'
|
||||
},
|
||||
'fr': {
|
||||
'home': 'admin',
|
||||
'edit': 'editer',
|
||||
'save': 'sauver',
|
||||
'cancel': 'annuler',
|
||||
'back': 'fin mode edition',
|
||||
'saving': 'sauvegarde en cours'
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user