New: add edit in place with ckeditor

Fix: remove unused jQuery plugin ckeip
This commit is contained in:
Regis Houssin 2011-10-31 16:57:10 +01:00
parent 61bb08dfa5
commit d9eb4cbeb9
8 changed files with 148 additions and 101 deletions

View File

@ -346,7 +346,6 @@ else if ($id)
// Type
print '<tr><td>'.$langs->trans("Type").'</td><td>';
print $form->editInPlace($langs->trans($object->type), 'type', $user->rights->deplacement->creer, 'select', 'types_fees');
//print $langs->trans($object->type);
print '</td></tr>';
// Who
@ -407,7 +406,7 @@ else if ($id)
// Public note
print '<tr><td valign="top">'.$langs->trans("NotePublic").'</td>';
print '<td valign="top" colspan="3">';
print $form->editInPlace($object->note_public, 'note_public', $user->rights->deplacement->creer, 'textarea');
print $form->editInPlace($object->note_public, 'note_public', $user->rights->deplacement->creer, 'ckeditor', 'dolibarr_notes');
print "</td></tr>";
// Private note
@ -415,7 +414,7 @@ else if ($id)
{
print '<tr><td valign="top">'.$langs->trans("NotePrivate").'</td>';
print '<td valign="top" colspan="3">';
print $form->editInPlace($object->note_private, 'note', $user->rights->deplacement->creer, 'textarea');
print $form->editInPlace($object->note_private, 'note', $user->rights->deplacement->creer, 'ckeditor', 'dolibarr_notes');
print "</td></tr>";
}

View File

@ -149,28 +149,44 @@ class Form
* @param string $value Value to show/edit
* @param string $htmlname DIV ID (field name)
* @param int $condition Condition to edit
* @param string $area Type of edit
* @param string $loadmethod Name of load method
* @param string $inputType Type of input
* @param string $inputOption Input option
* @return string HTML edit in place
*/
function editInPlace($value, $htmlname, $condition, $type='textarea', $loadmethod='')
function editInPlace($value, $htmlname, $condition, $inputType='textarea', $inputOption='')
{
global $conf;
$out='';
// Check parameters
if ($type == 'textarea') $value = dol_nl2br($value);
else if ($type == 'numeric') $value = price($value);
else if ($type == 'datepicker') $value = dol_print_date($value, 'day');
if ($inputType == 'textarea') $value = dol_nl2br($value);
else if ($inputType == 'numeric') $value = price($value);
else if ($inputType == 'datepicker') $value = dol_print_date($value, 'day');
if (! empty($conf->global->MAIN_USE_JQUERY_JEDITABLE) && $condition)
{
// Use for timestamp format
if ($type == 'datepicker') $out.= '<input id="timeStamp" type="hidden"/>';
else if ($type == 'select' && ! empty($loadmethod)) $out.= '<input id="loadmethod" value="'.$loadmethod.'" type="hidden"/>';
if ($inputType == 'datepicker')
{
$out.= '<input id="timeStamp" type="hidden"/>'; // Use for timestamp format
}
else if ($inputType == 'select' && ! empty($inputOption))
{
$out.= '<input id="loadmethod" value="'.$inputOption.'" type="hidden"/>';
}
else if ($inputType == 'ckeditor' && ! empty($inputOption))
{
if (! empty($conf->fckeditor->enabled))
{
$out.= '<input id="toolbar" value="'.$inputOption.'" type="hidden"/>';
}
else
{
$inputType = 'textarea';
}
}
$out.= '<div class="edit_'.$type.'" id="'.$htmlname.'">';
$out.= '<div class="edit_'.$inputType.'" id="'.$htmlname.'">';
$out.= $value;
$out.= '</div>';
}

View File

@ -44,6 +44,36 @@ $(document).ready(function() {
}
}
});
$('.edit_ckeditor').editable(urlSaveInPlace, {
type : 'ckeditor',
id : 'field',
onblur : 'ignore',
tooltip : tooltipInPlace,
placeholder : placeholderInPlace,
cancel : cancelInPlace,
submit : submitInPlace,
indicator : indicatorInPlace,
ckeditor : {
customConfig: ckeditorConfig,
toolbar: $('#toolbar').val()
},
submitdata : {
type: 'ckeditor',
element: element,
table_element: table_element,
fk_element: fk_element
},
callback : function(result, settings) {
var obj = $.parseJSON(result);
if (obj.error) {
$(this).html(this.revert);
$.jnotify(obj.error, "error", true);
} else {
$(this).html(obj.value);
}
}
});
$('.edit_text').editable(urlSaveInPlace, {
type : 'text',
id : 'field',

View File

@ -1,70 +0,0 @@
/*
# CKEDITOR Edit-In Place jQuery Plugin.
# Created By Dave Earley.
# www.Dave-Earley.com
*/
$.fn.ckeip = function (options, callback) {
var original_html = $(this);
var defaults = {
e_height: '10',
data: {}, e_url: '',
e_hover_color: '#eeeeee',
ckeditor_config: '',
e_width: '50'
};
var settings = $.extend({}, defaults, options);
return this.each(function () {
var eip_html = $(this).html();
var u_id = Math.floor(Math.random() * 99999999);
$(this).before("<div id='ckeip_" + u_id + "' style='display:none;'><textarea id ='ckeip_e_" + u_id + "' cols='" + settings.e_width + "' rows='" + settings.e_height + "' >" + eip_html + "</textarea> <br /><a href='#' id='save_ckeip_" + u_id + "'>Save</a> <a href='#' id='cancel_ckeip_" + u_id + "'>Canel </a></div>");
$('#ckeip_e_' + u_id + '').ckeditor(settings.ckeditor_config);
$(this).bind("dblclick", function () {
$(this).hide();
$('#ckeip_' + u_id + '').show();
});
$(this).hover(function () {
$(this).css({
backgroundColor: settings.e_hover_color
});
}, function () {
$(this).css({
backgroundColor: ''
});
});
$("#cancel_ckeip_" + u_id + "").click(function () {
$('#ckeip_' + u_id + '').hide();
$(original_html).fadeIn();
return false;
});
$("#save_ckeip_" + u_id + "").click(function () {
var ckeip_html = $('#ckeip_e_' + u_id + '').val();
$.post(settings.e_url, {
content: ckeip_html,
data: settings.data
}, function (response) {
if (typeof callback == "function") callback(response);
$(original_html).html(ckeip_html);
$('#ckeip_' + u_id + '').hide();
$(original_html).fadeIn();
});;
return false;
});
});
};

View File

@ -0,0 +1,70 @@
/*
* CKEditor input for Jeditable
*
* Adapted from Wysiwyg input for Jeditable by Mike Tuupola
* http://www.appelsiini.net/2008/9/wysiwyg-for-jeditable
*
* Copyright (c) 2009 Jeremy Bell
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Depends on CKEditor:
* http://ckeditor/
*
*/
(function($) {
$.generateId = function() {
return arguments.callee.prefix + arguments.callee.count++;
};
$.generateId.prefix = 'jq$';
$.generateId.count = 0;
$.fn.generateId = function() {
return this.each(function() {
this.id = $.generateId();
});
};
})(jQuery);
(function($) {
$.editable.addInputType('ckeditor', {
/* Use default textarea instead of writing code here again. */
//element : $.editable.types.textarea.element,
element : function(settings, original) {
/* Hide textarea to avoid flicker. */
var textarea = $('<textarea>').css("opacity", "0").generateId();
if (settings.rows) {
textarea.attr('rows', settings.rows);
} else {
textarea.height(settings.height);
}
if (settings.cols) {
textarea.attr('cols', settings.cols);
} else {
textarea.width(settings.width);
}
$(this).append(textarea);
return(textarea);
},
content : function(string, settings, original) {
/* jWYSIWYG plugin uses .text() instead of .val() */
/* For some reason it did not work work with generated */
/* textareas so I am forcing the value here with .text() */
$('textarea', this).text(string);
},
plugin : function(settings, original) {
var self = this;
if (settings.ckeditor) {
setTimeout(function() { CKEDITOR.replace($('textarea', self).attr('id'), settings.ckeditor); }, 0);
} else {
setTimeout(function() { CKEDITOR.replace($('textarea', self).attr('id')); }, 0);
}
},
submit : function(settings, original) {
$('textarea', this).val(CKEDITOR.instances[$('textarea', this).attr('id')].getData());
CKEDITOR.instances[$('textarea', this).attr('id')].destroy();
}
});
})(jQuery);

View File

@ -928,23 +928,6 @@ function top_htmlhead($head, $title='', $disablejs=0, $disablehead=0, $arrayofjs
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jnotify/jquery.jnotify.min.js"></script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/jnotify.js"></script>'."\n";
}
// jQuery jeditable
if (! empty($conf->global->MAIN_USE_JQUERY_JEDITABLE))
{
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.min'.$ext.'"></script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-datepicker.js"></script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-autocomplete.js"></script>'."\n";
print '<script type="text/javascript">'."\n";
print 'var urlSaveInPlace = \''.DOL_URL_ROOT.'/core/ajax/saveinplace.php\';'."\n";
print 'var urlLoadInPlace = \''.DOL_URL_ROOT.'/core/ajax/loadinplace.php\';'."\n";
print 'var tooltipInPlace = \''.$langs->transnoentities('ClickToEdit').'\';'."\n";
print 'var placeholderInPlace = \''.$langs->trans('ClickToEdit').'\';'."\n";
print 'var cancelInPlace = \''.$langs->trans('Cancel').'\';'."\n";
print 'var submitInPlace = \''.$langs->trans('Ok').'\';'."\n";
print 'var indicatorInPlace = \'<img src="'.DOL_URL_ROOT."/theme/".$conf->theme."/img/working.gif".'">\';'."\n";
print '</script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/editinplace.js"></script>'."\n";
}
// Flot
if (empty($conf->global->MAIN_DISABLE_JQUERY_FLOT))
{
@ -960,6 +943,25 @@ function top_htmlhead($head, $title='', $disablejs=0, $disablehead=0, $arrayofjs
print '<script type="text/javascript">var CKEDITOR_BASEPATH = \''.DOL_URL_ROOT.'/includes/ckeditor/\';</script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/ckeditor/ckeditor_basic.js"></script>'."\n";
}
// jQuery jeditable
if (! empty($conf->global->MAIN_USE_JQUERY_JEDITABLE))
{
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.min'.$ext.'"></script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-datepicker.js"></script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-autocomplete.js"></script>'."\n";
print '<script type="text/javascript">'."\n";
print 'var urlSaveInPlace = \''.DOL_URL_ROOT.'/core/ajax/saveinplace.php\';'."\n";
print 'var urlLoadInPlace = \''.DOL_URL_ROOT.'/core/ajax/loadinplace.php\';'."\n";
print 'var tooltipInPlace = \''.$langs->transnoentities('ClickToEdit').'\';'."\n";
print 'var placeholderInPlace = \''.$langs->trans('ClickToEdit').'\';'."\n";
print 'var cancelInPlace = \''.$langs->trans('Cancel').'\';'."\n";
print 'var submitInPlace = \''.$langs->trans('Ok').'\';'."\n";
print 'var indicatorInPlace = \'<img src="'.DOL_URL_ROOT."/theme/".$conf->theme."/img/working.gif".'">\';'."\n";
print 'var ckeditorConfig = \''.dol_buildpath('/theme/'.$conf->theme.'/ckeditor/config.js',1).'\';'."\n";
print '</script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/editinplace.js"></script>'."\n";
print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ckeditor.js"></script>'."\n";
}
// File Upload
if (! empty($conf->global->MAIN_USE_JQUERY_FILEUPLOAD))
{

View File

@ -1693,7 +1693,7 @@ table.cal_event td { border: 0px; padding-<?php print $left; ?>: 0px; padding-<?
/* jQuery - jeditable */
/* ============================================================================== */
.edit_textarea:hover, .edit_text:hover, .edit_numeric:hover, .edit_select:hover {
.edit_textarea:hover, .edit_ckeditor:hover, .edit_text:hover, .edit_numeric:hover, .edit_select:hover {
background: white url(<?php echo dol_buildpath($path.'/theme/eldy/img/edit.png',1) ?>) right top no-repeat;
cursor: pointer;
}