mirror/php-e107
1
0
Fork 0
mirror of https://github.com/e107inc/e107.git synced 2025-08-02 12:48:26 +02:00
Code Issues Releases Wiki Activity

Issue #991: Rewrited js code and better field id handling.

Browse Source
This commit is contained in:
Lóna Lore
2015-12-03 09:01:59 +01:00
parent 2cd5f1525f
commit dbf6ad8ef6
2 changed files with 84 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
e107_handlers/form_handler.php
View File

@@ -3712,9 +3712,13 @@ class e_form
// Inline Editing. // Inline Editing.
if(!vartrue($attributes['noedit']) && vartrue($parms['editable']) && !vartrue($parms['link'])) // avoid bad markup, better solution coming up if(!vartrue($attributes['noedit']) && vartrue($parms['editable']) && !vartrue($parms['link'])) // avoid bad markup, better solution coming up
{ {
$tpl = $this->userpicker($field, '', $ttl, $id, array('selectize' => array('e_editable' => $field . '_' . $row_id))); // Need a Unique Field ID to store field settings using e107::js('settings').
$fieldID = $field . '_' . str_replace('.', '', microtime(true));
// Unique ID for each rows.
$eEditableID = $fieldID . '_' . $row_id;
$tpl = $this->userpicker($field, '', $ttl, $id, array('id' => $fieldID, 'selectize' => array('e_editable' => $eEditableID)));
$mode = preg_replace('/[^\w]/', '', vartrue($_GET['mode'], '')); $mode = preg_replace('/[^\w]/', '', vartrue($_GET['mode'], ''));
$value = "<a id='" . $field . '_' . $row_id . "' class='e-tip e-editable editable-click editable-userpicker' data-clear='false' data-tpl='" . str_replace("'", '"', $tpl) . "' data-name='" . $field . "' title=\"" . LAN_EDIT . " " . $attributes['title'] . "\" data-type='text' data-pk='" . $row_id . "' data-value='" . $id . "' data-url='" . e_SELF . "?mode={$mode}&amp;action=inline&amp;id={$row_id}&amp;ajax_used=1' href='#'>" . $ttl . "</a>"; $value = "<a id='" . $eEditableID . "' class='e-tip e-editable editable-click editable-userpicker' data-clear='false' data-tpl='" . str_replace("'", '"', $tpl) . "' data-name='" . $field . "' title=\"" . LAN_EDIT . " " . $attributes['title'] . "\" data-type='text' data-pk='" . $row_id . "' data-value='" . $id . "' data-url='" . e_SELF . "?mode={$mode}&amp;action=inline&amp;id={$row_id}&amp;ajax_used=1' href='#'>" . $ttl . "</a>";
} }
break; break;

199
e107_web/js/selectize/js/selectize.init.js
View File

@@ -1,16 +1,14 @@
(function ($) { (function ($) {
/** /**
* Behavior to initialize autocomplete fields with selectize.js * Behavior to initialize click event on inline edit (selectize) fields.
* *
* @type {{attach: e107.behaviors.selectizeInit.attach}} * @type {{attach: e107.behaviors.selectizeEditableInit.attach}}
*/ */
e107.behaviors.selectizeInit = { e107.behaviors.selectizeEditableInit = {
attach: function (context, settings) { attach: function (context, settings) {
if (e107.settings.selectize) { if (e107.settings.selectize) {
$.each(e107.settings.selectize, function (index, item) { $.each(e107.settings.selectize, function (index, item) {
var key = item.id;
// Inline, popup editor. Initialize selectize after opening popup. // Inline, popup editor. Initialize selectize after opening popup.
if (item.options.e_editable) { if (item.options.e_editable) {
$(context).find('#' + item.options.e_editable).once('selectize-editable-init').each(function () { $(context).find('#' + item.options.e_editable).once('selectize-editable-init').each(function () {
@@ -22,15 +20,18 @@
if (response.status == 'error') return; if (response.status == 'error') return;
if ($eEditable.hasClass('editable-userpicker')) { if ($eEditable.hasClass('editable-userpicker')) {
$eEditable.hide(); $eEditable.hide();
var options = item.options.options ? item.options.options : []; var options = item.options.options ? item.options.options : [];
var userName = item.strings.anonymous ? item.strings.anonymous : ''; var userName = item.strings.anonymous ? item.strings.anonymous : '';
var valueField = item.options.valueField ? item.options.valueField : 'value'; var valueField = item.options.valueField ? item.options.valueField : 'value';
var labelField = item.options.labelField ? item.options.labelField : 'label'; var labelField = item.options.labelField ? item.options.labelField : 'label';
$.each(options, function (key, value) { $.each(options, function (key, value) {
if (value[valueField] == newValue) { if (value[valueField] == newValue) {
userName = value[labelField]; userName = value[labelField];
} }
}); });
setTimeout(function () { setTimeout(function () {
$eEditable.html(userName).show(); $eEditable.html(userName).show();
$.fn.editable.defaults.success = function (response, newValue) { $.fn.editable.defaults.success = function (response, newValue) {
@@ -40,130 +41,86 @@
}; };
setTimeout(function () { setTimeout(function () {
$(context).find('#' + key).once('selectize-editable-init').each(function () { // After inline editing popup opened, run behaviors to initialize selectize.js.
var $item = $(this); e107.attachBehaviors();
$item.selectize({
// General options.
items: item.options.items ? item.options.items : [],
delimiter: item.options.delimiter ? item.options.delimiter : ',',
diacritics: item.options.diacritics ? item.options.diacritics : false,
create: item.options.create ? item.options.create : false,
createOnBlur: item.options.createOnBlur ? item.options.createOnBlur : false,
highlight: item.options.highlight ? item.options.highlight : false,
persist: item.options.persist ? item.options.persist : false,
openOnFocus: item.options.openOnFocus ? item.options.openOnFocus : false,
maxOptions: item.options.maxOptions ? item.options.maxOptions : null,
maxItems: item.options.maxItems ? item.options.maxItems : null,
hideSelected: item.options.hideSelected ? item.options.hideSelected : false,
closeAfterSelect: item.options.closeAfterSelect ? item.options.closeAfterSelect : false,
allowEmptyOption: item.options.allowEmptyOption ? item.options.allowEmptyOption : false,
scrollDuration: item.options.scrollDuration ? item.options.scrollDuration : 60,
loadThrottle: item.options.loadThrottle ? item.options.loadThrottle : 300,
loadingClass: item.options.loadingClass ? item.options.loadingClass : 'loading',
preload: item.options.preload ? item.options.preload : false,
dropdownParent: item.options.dropdownParent ? item.options.dropdownParent : null,
addPrecedence: item.options.addPrecedence ? item.options.addPrecedence : false,
selectOnTab: item.options.selectOnTab ? item.options.selectOnTab : false,
mode: item.options.mode ? item.options.mode : 'multi',
plugins: item.options.plugins ? item.options.plugins : [],
// Data / Searching.
options: item.options.options ? item.options.options : [],
valueField: item.options.valueField ? item.options.valueField : 'value',
labelField: item.options.labelField ? item.options.labelField : 'label',
searchField: item.options.searchField ? item.options.searchField : 'label',
// Callbacks.
load: function (query, callback) {
var loadPath = item.options.loadPath ? item.options.loadPath : '';
if (loadPath == '') return callback([]);
if (!query.length) return callback([]);
$.ajax({
url: loadPath,
type: 'POST',
dataType: 'json',
data: {
q: query,
l: item.options.maxOptions ? item.options.maxOptions : 10
},
error: function () {
callback([]);
},
success: function (data) {
// Update items in options array of this field.
item.options.options = data;
callback(data);
}
});
}
});
});
}, 300); }, 300);
}); });
}); });
} }
else { });
$(context).find('#' + key).once('selectize-init').each(function () { }
var $item = $(this); }
};
$item.selectize({ /**
// General options. * Behavior to initialize autocomplete fields with selectize.js
items: item.options.items ? item.options.items : [], *
delimiter: item.options.delimiter ? item.options.delimiter : ',', * @type {{attach: e107.behaviors.selectizeInit.attach}}
diacritics: item.options.diacritics ? item.options.diacritics : false, */
create: item.options.create ? item.options.create : false, e107.behaviors.selectizeInit = {
createOnBlur: item.options.createOnBlur ? item.options.createOnBlur : false, attach: function (context, settings) {
highlight: item.options.highlight ? item.options.highlight : false, if (e107.settings.selectize) {
persist: item.options.persist ? item.options.persist : false, $.each(e107.settings.selectize, function (index, item) {
openOnFocus: item.options.openOnFocus ? item.options.openOnFocus : false, $(context).find('#' + item.id).once('selectize-init').each(function () {
maxOptions: item.options.maxOptions ? item.options.maxOptions : null, var $item = $(this);
maxItems: item.options.maxItems ? item.options.maxItems : null,
hideSelected: item.options.hideSelected ? item.options.hideSelected : false,
closeAfterSelect: item.options.closeAfterSelect ? item.options.closeAfterSelect : false,
allowEmptyOption: item.options.allowEmptyOption ? item.options.allowEmptyOption : false,
scrollDuration: item.options.scrollDuration ? item.options.scrollDuration : 60,
loadThrottle: item.options.loadThrottle ? item.options.loadThrottle : 300,
loadingClass: item.options.loadingClass ? item.options.loadingClass : 'loading',
preload: item.options.preload ? item.options.preload : false,
dropdownParent: item.options.dropdownParent ? item.options.dropdownParent : null,
addPrecedence: item.options.addPrecedence ? item.options.addPrecedence : false,
selectOnTab: item.options.selectOnTab ? item.options.selectOnTab : false,
mode: item.options.mode ? item.options.mode : 'multi',
plugins: item.options.plugins ? item.options.plugins : [],
// Data / Searching. $item.selectize({
options: item.options.options ? item.options.options : [], // General options.
valueField: item.options.valueField ? item.options.valueField : 'value', items: item.options.items ? item.options.items : [],
labelField: item.options.labelField ? item.options.labelField : 'label', delimiter: item.options.delimiter ? item.options.delimiter : ',',
searchField: item.options.searchField ? item.options.searchField : 'label', diacritics: item.options.diacritics ? item.options.diacritics : false,
create: item.options.create ? item.options.create : false,
createOnBlur: item.options.createOnBlur ? item.options.createOnBlur : false,
highlight: item.options.highlight ? item.options.highlight : false,
persist: item.options.persist ? item.options.persist : false,
openOnFocus: item.options.openOnFocus ? item.options.openOnFocus : false,
maxOptions: item.options.maxOptions ? item.options.maxOptions : null,
maxItems: item.options.maxItems ? item.options.maxItems : null,
hideSelected: item.options.hideSelected ? item.options.hideSelected : false,
closeAfterSelect: item.options.closeAfterSelect ? item.options.closeAfterSelect : false,
allowEmptyOption: item.options.allowEmptyOption ? item.options.allowEmptyOption : false,
scrollDuration: item.options.scrollDuration ? item.options.scrollDuration : 60,
loadThrottle: item.options.loadThrottle ? item.options.loadThrottle : 300,
loadingClass: item.options.loadingClass ? item.options.loadingClass : 'loading',
preload: item.options.preload ? item.options.preload : false,
dropdownParent: item.options.dropdownParent ? item.options.dropdownParent : null,
addPrecedence: item.options.addPrecedence ? item.options.addPrecedence : false,
selectOnTab: item.options.selectOnTab ? item.options.selectOnTab : false,
mode: item.options.mode ? item.options.mode : 'multi',
plugins: item.options.plugins ? item.options.plugins : [],
// Callbacks. // Data / Searching.
load: function (query, callback) { options: item.options.options ? item.options.options : [],
var loadPath = item.options.loadPath ? item.options.loadPath : ''; valueField: item.options.valueField ? item.options.valueField : 'value',
if (loadPath == '') return callback([]); labelField: item.options.labelField ? item.options.labelField : 'label',
if (!query.length) return callback([]); searchField: item.options.searchField ? item.options.searchField : 'label',
$.ajax({
url: loadPath, // Callbacks.
type: 'POST', load: function (query, callback) {
dataType: 'json', var loadPath = item.options.loadPath ? item.options.loadPath : '';
data: { if (loadPath == '') return callback([]);
q: query, if (!query.length) return callback([]);
l: item.options.maxOptions ? item.options.maxOptions : 10
}, $.ajax({
error: function () { url: loadPath,
callback([]); type: 'POST',
}, dataType: 'json',
success: function (data) { data: {
// Update items in options array of this field. q: query,
item.options.options = data; l: item.options.maxOptions ? item.options.maxOptions : 10
callback(data); },
} error: function () {
}); callback([]);
} },
}); success: function (data) {
// Update items in options array of this field.
e107.settings.selectize[index].options.options = data;
callback(data);
}
});
}
}); });
} });
}); });
} }