mirror of
https://github.com/e107inc/e107.git
synced 2025-07-31 03:40:37 +02:00
Issue #991: Removed all Selectize JS code from PHP. Additional option (settings) for e107::js(). Integrates Selectize.js using e107::js(settings) and JavaScript behaviors with jQuery Once.
This commit is contained in:
Lóna Lore
@@ -1,9 +1,126 @@
|
||||
// handle secured json string - the Prototype implementation
|
||||
var e107 = e107 || {'settings': {}, 'behaviors': {}};
|
||||
|
||||
// Allow other JavaScript libraries to use $.
|
||||
// TODO: Use jQuery.noConflict(), but for this, need to rewrite all e107 javascript to use wrapper: (function ($) { ... })(jQuery);
|
||||
// jQuery.noConflict();
|
||||
|
||||
(function ($) {
|
||||
|
||||
/**
|
||||
* Attach all registered behaviors to a page element.
|
||||
*
|
||||
* Behaviors are event-triggered actions that attach to page elements, enhancing
|
||||
* default non-JavaScript UIs. Behaviors are registered in the e107.behaviors
|
||||
* object using the method 'attach' and optionally also 'detach' as follows:
|
||||
* @code
|
||||
* e107.behaviors.behaviorName = {
|
||||
* attach: function (context, settings) {
|
||||
* ...
|
||||
* },
|
||||
* detach: function (context, settings, trigger) {
|
||||
* ...
|
||||
* }
|
||||
* };
|
||||
* @endcode
|
||||
*
|
||||
* e107.attachBehaviors is added below to the jQuery ready event and so
|
||||
* runs on initial page load. Developers implementing Ajax in their
|
||||
* solutions should also call this function after new page content has been
|
||||
* loaded, feeding in an element to be processed, in order to attach all
|
||||
* behaviors to the new content.
|
||||
*
|
||||
* Behaviors should use
|
||||
* @code
|
||||
* $(selector).once('behavior-name', function () {
|
||||
* ...
|
||||
* });
|
||||
* @endcode
|
||||
* to ensure the behavior is attached only once to a given element. (Doing so
|
||||
* enables the reprocessing of given elements, which may be needed on occasion
|
||||
* despite the ability to limit behavior attachment to a particular element.)
|
||||
*
|
||||
* @param context
|
||||
* An element to attach behaviors to. If none is given, the document element
|
||||
* is used.
|
||||
* @param settings
|
||||
* An object containing settings for the current context. If none given, the
|
||||
* global e107.settings object is used.
|
||||
*/
|
||||
e107.attachBehaviors = function (context, settings) {
|
||||
context = context || document;
|
||||
settings = settings || e107.settings;
|
||||
// Execute all of them.
|
||||
$.each(e107.behaviors, function () {
|
||||
if ($.isFunction(this.attach)) {
|
||||
this.attach(context, settings);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Detach registered behaviors from a page element.
|
||||
*
|
||||
* Developers implementing AHAH/Ajax in their solutions should call this
|
||||
* function before page content is about to be removed, feeding in an element
|
||||
* to be processed, in order to allow special behaviors to detach from the
|
||||
* content.
|
||||
*
|
||||
* Such implementations should look for the class name that was added in their
|
||||
* corresponding e107.behaviors.behaviorName.attach implementation, i.e.
|
||||
* behaviorName-processed, to ensure the behavior is detached only from
|
||||
* previously processed elements.
|
||||
*
|
||||
* @param context
|
||||
* An element to detach behaviors from. If none is given, the document element
|
||||
* is used.
|
||||
* @param settings
|
||||
* An object containing settings for the current context. If none given, the
|
||||
* global e107.settings object is used.
|
||||
* @param trigger
|
||||
* A string containing what's causing the behaviors to be detached. The
|
||||
* possible triggers are:
|
||||
* - unload: (default) The context element is being removed from the DOM.
|
||||
* - move: The element is about to be moved within the DOM (for example,
|
||||
* during a tabledrag row swap). After the move is completed,
|
||||
* e107.attachBehaviors() is called, so that the behavior can undo
|
||||
* whatever it did in response to the move. Many behaviors won't need to
|
||||
* do anything simply in response to the element being moved, but because
|
||||
* IFRAME elements reload their "src" when being moved within the DOM,
|
||||
* behaviors bound to IFRAME elements (like WYSIWYG editors) may need to
|
||||
* take some action.
|
||||
* - serialize: E.g. when an Ajax form is submitted, this is called with the
|
||||
* form as the context. This provides every behavior within the form an
|
||||
* opportunity to ensure that the field elements have correct content
|
||||
* in them before the form is serialized. The canonical use-case is so
|
||||
* that WYSIWYG editors can update the hidden textarea to which they are
|
||||
* bound.
|
||||
*
|
||||
* @see e107.attachBehaviors
|
||||
*/
|
||||
e107.detachBehaviors = function (context, settings, trigger) {
|
||||
context = context || document;
|
||||
settings = settings || e107.settings;
|
||||
trigger = trigger || 'unload';
|
||||
// Execute all of them.
|
||||
$.each(e107.behaviors, function () {
|
||||
if ($.isFunction(this.detach)) {
|
||||
this.detach(context, settings, trigger);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Attach all behaviors.
|
||||
$(function () {
|
||||
e107.attachBehaviors(document, e107.settings);
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
$.ajaxSetup({
|
||||
dataFilter: function(data, type) {
|
||||
if(type != 'json' || !data) return data;
|
||||
dataFilter: function (data, type) {
|
||||
if (type != 'json' || !data) {
|
||||
return data;
|
||||
}
|
||||
return data.replace(/^\/\*-secure-([\s\S]*)\*\/\s*$/, '$1');
|
||||
},
|
||||
cache: false // Was Really NEeded!
|
||||
|
||||
173
e107_web/js/selectize/js/selectize.init.js
Normal file
173
e107_web/js/selectize/js/selectize.init.js
Normal file
@@ -0,0 +1,173 @@
|
||||
(function ($) {
|
||||
|
||||
/**
|
||||
* Behavior to initialize autocomplete fields with selectize.js
|
||||
*
|
||||
* @type {{attach: e107.behaviors.selectizeInit.attach}}
|
||||
*/
|
||||
e107.behaviors.selectizeInit = {
|
||||
attach: function (context, settings) {
|
||||
if (e107.settings.selectize) {
|
||||
$.each(e107.settings.selectize, function (index, item) {
|
||||
var key = item.id;
|
||||
|
||||
// Inline, popup editor. Initialize selectize after opening popup.
|
||||
if (item.options.e_editable) {
|
||||
$(context).find('#' + item.options.e_editable).once('selectize-editable-init').each(function () {
|
||||
var $eEditable = $('#' + item.options.e_editable);
|
||||
|
||||
$eEditable.click(function () {
|
||||
// Attach success callback for replacing user id with name.
|
||||
$.fn.editable.defaults.success = function (response, newValue) {
|
||||
if (response.status == 'error') return;
|
||||
if ($eEditable.hasClass('editable-userpicker')) {
|
||||
$eEditable.hide();
|
||||
var options = item.options.options ? item.options.options : [];
|
||||
var userName = item.strings.anonymous ? item.strings.anonymous : '';
|
||||
var valueField = item.options.valueField ? item.options.valueField : 'value';
|
||||
var labelField = item.options.labelField ? item.options.labelField : 'label';
|
||||
$.each(options, function (key, value) {
|
||||
if (value[valueField] == newValue) {
|
||||
userName = value[labelField];
|
||||
}
|
||||
});
|
||||
setTimeout(function () {
|
||||
$eEditable.html(userName).show();
|
||||
$.fn.editable.defaults.success = function (response, newValue) {
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(function () {
|
||||
$(context).find('#' + key).once('selectize-editable-init').each(function () {
|
||||
var $item = $(this);
|
||||
|
||||
$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);
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
$(context).find('#' + key).once('selectize-init').each(function () {
|
||||
var $item = $(this);
|
||||
|
||||
$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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user