/**
* Functions dedicated to widgets.
*
* :organization: Logilab
* :copyright: 2003-2010 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
* :contact: http://www.logilab.fr/ -- mailto:contact@logilab.fr
*
*
*/
// widget namespace
Widgets = {};
/**
* .. function:: buildWidget(wdgnode)
*
* this function takes a DOM node defining a widget and
* instantiates / builds the appropriate widget class
*/
function buildWidget(wdgnode) {
var wdgclass = Widgets[wdgnode.getAttribute('cubicweb:wdgtype')];
if (wdgclass) {
return new wdgclass(wdgnode);
}
return null;
}
/**
* .. function:: buildWidgets(root)
*
* This function is called on load and is in charge to build
* JS widgets according to DOM nodes found in the page
*/
function buildWidgets(root) {
root = root || document;
jQuery(root).find('.widget').each(function() {
if (this.getAttribute('cubicweb:loadtype') == 'auto') {
buildWidget(this);
}
});
}
jQuery(document).ready(function() {
buildWidgets();
});
function postJSON(url, data, callback) {
return jQuery.post(url, data, callback, AJAX_BASE_URL);
}
function getJSON(url, data, callback) {
return jQuery.get(url, data, callback, AJAX_BASE_URL);
}
(function ($) {
var defaultSettings = {
initialvalue: '',
multiple: false,
mustMatch: false,
delay: 50,
limit: 50
};
function split(val) { return val.split( /\s*,\s*/ ); }
function extractLast(term) { return split(term).pop(); }
function allButLast(val) {
var terms = split(val);
terms.pop();
return terms;
}
var methods = {
__init__: function(suggestions, options) {
return this.each(function() {
// here, `this` refers to the DOM element (e.g. input) being wrapped
// by cwautomplete plugin
var instanceData = $(this).data('cwautocomplete');
if (instanceData) {
// already initialized
return;
}
var settings = $.extend({}, defaultSettings, options);
instanceData = {
initialvalue: settings.initialvalue,
userInput: this,
hiddenInput: null
};
var hiHandlers = methods.hiddenInputHandlers;
$(this).data('cwautocomplete', instanceData);
// in case of an existing value, the hidden input must be initialized even if
// the value is not changed
if (($(instanceData.userInput).attr('cubicweb:initialvalue') !== undefined) && !instanceData.hiddenInput){
hiHandlers.initializeHiddenInput(instanceData);
}
$.ui.autocomplete.prototype._value = methods._value;
$.data(this, 'settings', settings);
if (settings.multiple) {
$.ui.autocomplete.filter = methods.multiple.makeFilter(this);
$(this).bind({
autocompleteselect: methods.multiple.select,
autocompletefocus: methods.multiple.focus,
keydown: methods.multiple.keydown
});
}
// XXX katia we dont need it if minLength == 0, but by setting minLength = 0
// we probably break the backward compatibility
$(this).bind('blur', methods.blur);
if ($.isArray(suggestions)) { // precomputed list of suggestions
settings.source = hiHandlers.checkSuggestionsDataFormat(instanceData, suggestions);
} else { // url to call each time something is typed
settings.source = function(request, response) {
var d = loadRemote(suggestions, {q: request.term, limit: settings.limit}, 'POST');
d.addCallback(function (suggestions) {
suggestions = hiHandlers.checkSuggestionsDataFormat(instanceData, suggestions);
response(suggestions);
if((suggestions.length) == 0){
methods.resetValues(instanceData);
}
});
};
}
$(this).autocomplete(settings);
if (settings.mustMatch) {
$(this).keypress(methods.ensureExactMatch);
}
});
},
_value: function() {
/* We extend the widget with the ability to lookup and
handle several terms at once ('multiple' option). E.g.:
toto, titi, tu.... The autocompletion must be
performed only on the last of such a list of terms.
*/
var settings = $(this.element).data('settings');
var value = this.valueMethod.apply( this.element, arguments );
if (settings.multiple & arguments.length === 0) {
return extractLast(value);
}
return value
},
multiple: {
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = allButLast(this.value);
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join( ", " );
return false;
},
keydown: function(evt) {
if (evt.keyCode == $.ui.keyCode.TAB) {
evt.preventDefault();
}
},
makeFilter: function(userInput) {
return function(array, term) {
// remove already entered terms from suggestion list
array = cw.utils.difference(array, allButLast(userInput.value));
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( value.label || value.value || value );
});
};
}
},
blur: function(evt){
var instanceData = $(this).data('cwautocomplete');
if($(instanceData.userInput).val().strip().length==0){
methods.resetValues(instanceData);
}
},
ensureExactMatch: function(evt) {
var instanceData = $(this).data('cwautocomplete');
if (evt.keyCode == $.ui.keyCode.ENTER || evt.keyCode == $.ui.keyCode.TAB) {
var validChoices = $.map($('ul.ui-autocomplete li'),
function(li) {return $(li).text();});
if ($.inArray($(instanceData.userInput).val(), validChoices) == -1) {
$(instanceData.userInput).val('');
$(instanceData.hiddenInput).val(instanceData.initialvalue || '');
}
}
},
resetValues: function(instanceData){
$(instanceData.userInput).val('');
$(instanceData.hiddenInput).val('');
},
hiddenInputHandlers: {
/**
* `hiddenInputHandlers` defines all methods specific to handle the
* hidden input created along the standard text input.
* An hiddenInput is necessary when displayed suggestions are
* different from actual values to submit.
* Imagine an autocompletion widget to choose among a list of CWusers.
* Suggestions would be the list of logins, but actual values would
* be the corresponding eids.
* To handle such cases, suggestions list should be a list of JS objects
* with two `label` and `value` properties.
**/
suggestionSelected: function(evt, ui) {
var instanceData = $(this).data('cwautocomplete');
instanceData.hiddenInput.value = ui.item.value;
instanceData.value = ui.item.label;
return false; // stop propagation
},
suggestionFocusChanged: function(evt, ui) {
var instanceData = $(this).data('cwautocomplete');
instanceData.userInput.value = ui.item.label;
return false; // stop propagation
},
needsHiddenInput: function(suggestions) {
return suggestions[0].label !== undefined;
},
initializeHiddenInput: function(instanceData) {
var userInput = instanceData.userInput;
var hiddenInput = INPUT({
type: "hidden",
name: userInput.name,
// XXX katia : this must be handeled in .SuggestField widget, but
// it seems not to be used anymore
value: $(userInput).attr('cubicweb:initialvalue') || userInput.value
});
$(userInput).removeAttr('name').after(hiddenInput);
instanceData.hiddenInput = hiddenInput;
$(userInput).bind({
autocompleteselect: methods.hiddenInputHandlers.suggestionSelected,
autocompletefocus: methods.hiddenInputHandlers.suggestionFocusChanged
});
},
/*
* internal convenience function: old jquery plugin accepted to be fed
* with a list of couples (value, label). The new (jquery-ui) autocomplete
* plugin expects a list of objects with "value" and "label" properties.
*
* This function converts the old format to the new one.
*/
checkSuggestionsDataFormat: function(instanceData, suggestions) {
// check for old (value, label) format
if ($.isArray(suggestions) && suggestions.length &&
$.isArray(suggestions[0])){
if (suggestions[0].length == 2) {
cw.log('[3.10] autocomplete init func should return {label,value} dicts instead of lists');
suggestions = $.map(suggestions, function(sugg) {
return {value: sugg[0], label: sugg[1]};
});
} else {
if(suggestions[0].length == 1){
suggestions = $.map(suggestions, function(sugg) {
return {value: sugg[0], label: sugg[0]};
});
}
}
}
var hiHandlers = methods.hiddenInputHandlers;
if (suggestions.length && hiHandlers.needsHiddenInput(suggestions)
&& !instanceData.hiddenInput) {
hiHandlers.initializeHiddenInput(instanceData);
hiHandlers.fixUserInputInitialValue(instanceData, suggestions);
}
// otherwise, assume data shape is correct
return suggestions;
},
fixUserInputInitialValue: function(instanceData, suggestions) {
// called when the data is loaded to reset the correct displayed
// value in the visible input field (typically replacing an eid
// by a displayable value)
var curvalue = instanceData.userInput.value;
if (!curvalue) {
return;
}
for (var i=0, length=suggestions.length; i < length; i++) {
var sugg = suggestions[i];
if (sugg.value == curvalue) {
instanceData.userInput.value = sugg.label;
return;
}
}
}
}
};
$.fn.cwautocomplete = function(data, options) {
return methods.__init__.apply(this, [data, options]);
};
})(jQuery);
Widgets.SuggestField = defclass('SuggestField', null, {
__init__: function(node, options) {
options = options || {};
var multi = node.getAttribute('cubicweb:multi');
options.multiple = (multi == "yes") ? true: false;
var d = loadRemote(node.getAttribute('cubicweb:dataurl'));
d.addCallback(function(data) {
$(node).cwautocomplete(data, options);
});
}
});
Widgets.StaticFileSuggestField = defclass('StaticSuggestField', [Widgets.SuggestField], {
__init__: function(node) {
Widgets.SuggestField.__init__(this, node, {
method: 'get' // XXX
});
}
});
Widgets.RestrictedSuggestField = defclass('RestrictedSuggestField', [Widgets.SuggestField], {
__init__: function(node) {
Widgets.SuggestField.__init__(this, node, {
mustMatch: true
});
}
});
//remote version of RestrictedSuggestField
Widgets.LazySuggestField = defclass('LazySuggestField', [Widgets.SuggestField], {
__init__: function(node, options) {
var self = this;
options = options || {};
options.delay = 50;
// multiple selection not supported yet (still need to formalize correctly
// initial values / display values)
var initialvalue = cw.evalJSON(node.getAttribute('cubicweb:initialvalue') || 'null');
if (!initialvalue) {
initialvalue = node.value;
}
options.initialvalue = initialvalue;
Widgets.SuggestField.__init__(this, node, options);
}
});
/**
* .. class:: Widgets.SuggestForm
*
* suggestform displays a suggest field and associated validate / cancel buttons
* constructor's argumemts are the same that BaseSuggestField widget
*/
Widgets.SuggestForm = defclass("SuggestForm", null, {
__init__: function(inputid, initfunc, varargs, validatefunc, options) {
this.validatefunc = validatefunc || noop;
this.sgfield = new Widgets.BaseSuggestField(inputid, initfunc, varargs, options);
this.oklabel = options.oklabel || 'ok';
this.cancellabel = options.cancellabel || 'cancel';
bindMethods(this);
connect(this.sgfield, 'validate', this, this.entryValidated);
},
show: function(parentnode) {
var sgnode = this.sgfield.builddom();
var buttons = DIV({
'class': "sgformbuttons"
},
[A({
'href': "javascript: noop();",
'onclick': this.onValidateClicked
},
this.oklabel), ' / ', A({
'href': "javascript: noop();",
'onclick': this.destroy
},
escapeHTML(this.cancellabel))]);
var formnode = DIV({
'class': "sgform"
},
[sgnode, buttons]);
appendChildNodes(parentnode, formnode);
this.sgfield.textinput.focus();
this.formnode = formnode;
return formnode;
},
destroy: function() {
signal(this, 'destroy');
this.sgfield.destroy();
removeElement(this.formnode);
},
onValidateClicked: function() {
this.validatefunc(this, this.sgfield.taglist());
},
/* just an indirection to pass the form instead of the sgfield as first parameter */
entryValidated: function(sgfield, taglist) {
this.validatefunc(this, taglist);
}
});
/**
* .. function:: toggleTree(event)
*
* called when the use clicks on a tree node
* - if the node has a `cubicweb:loadurl` attribute, replace the content of the node
* by the url's content.
* - else, there's nothing to do, let the jquery plugin handle it.
*/
function toggleTree(event) {
var linode = jQuery(this);
var url = linode.attr('cubicweb:loadurl');
if (url) {
linode.find('ul.placeholder').remove();
var d = linode.loadxhtml(url, null, 'post', 'append');
d.addCallback(function(domnode) {
linode.removeAttr('cubicweb:loadurl');
linode.find('> ul.treeview').treeview({
toggle: toggleTree,
prerendered: true
});
return null;
}
);
}
}
/**
* .. class:: Widgets.TimelineWidget
*
* widget based on SIMILE's timeline widget
* http://code.google.com/p/simile-widgets/
*
* Beware not to mess with SIMILE's Timeline JS namepsace !
*/
Widgets.TimelineWidget = defclass("TimelineWidget", null, {
__init__: function(wdgnode) {
var tldiv = DIV({
id: "tl",
style: 'height: 200px; border: 1px solid #ccc;'
});
wdgnode.appendChild(tldiv);
var tlunit = wdgnode.getAttribute('cubicweb:tlunit') || 'YEAR';
var eventSource = new Timeline.DefaultEventSource();
var bandData = {
eventPainter: Timeline.CubicWebEventPainter,
eventSource: eventSource,
width: "100%",
intervalUnit: Timeline.DateTime[tlunit.toUpperCase()],
intervalPixels: 100
};
var bandInfos = [Timeline.createBandInfo(bandData)];
this.tl = Timeline.create(tldiv, bandInfos);
var loadurl = wdgnode.getAttribute('cubicweb:loadurl');
Timeline.loadJSON(loadurl, function(json, url) {
eventSource.loadJSON(json, url);
});
}
});
Widgets.TemplateTextField = defclass("TemplateTextField", null, {
__init__: function(wdgnode) {
this.variables = jQuery(wdgnode).attr('cubicweb:variables').split(',');
this.options = {
name: wdgnode.getAttribute('cubicweb:inputid'),
rows: wdgnode.getAttribute('cubicweb:rows') || 40,
cols: wdgnode.getAttribute('cubicweb:cols') || 80
};
// this.variableRegexp = /%\((\w+)\)s/;
this.errorField = DIV({
'class': "errorMessage"
});
this.textField = TEXTAREA(this.options);
jQuery(this.textField).bind('keyup', {
'self': this
},
this.highlightInvalidVariables);
jQuery('#substitutions').prepend(this.errorField);
jQuery('#substitutions .errorMessage').hide();
wdgnode.appendChild(this.textField);
},
/* signal callbacks */
highlightInvalidVariables: function(event) {
var self = event.data.self;
var text = self.textField.value;
var unknownVariables = [];
var it = 0;
var group = null;
var variableRegexp = /%\((\w+)\)s/g;
// emulates rgx.findAll()
while ( (group = variableRegexp.exec(text)) ) {
if ($.inArray(group[1], self.variables) == -1) {
unknownVariables.push(group[1]);
}
it++;
if (it > 5) {
break;
}
}
var errText = '';
if (unknownVariables.length) {
errText = "Detected invalid variables : " + unknownVariables.join(', ');
jQuery('#substitutions .errorMessage').show();
} else {
jQuery('#substitutions .errorMessage').hide();
}
self.errorField.innerHTML = errText;
}
});
cw.widgets = {
/**
* .. function:: insertText(text, areaId)
*
* inspects textarea with id `areaId` and replaces the current selected text
* with `text`. Cursor is then set at the end of the inserted text.
*/
insertText: function (text, areaId) {
var textarea = jQuery('#' + areaId);
if (document.selection) { // IE
var selLength;
textarea.focus();
var sel = document.selection.createRange();
selLength = sel.text.length;
sel.text = text;
sel.moveStart('character', selLength - text.length);
sel.select();
} else if (textarea.selectionStart || textarea.selectionStart == '0') { // mozilla
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
// insert text so that it replaces the [startPos, endPos] part
textarea.value = textarea.value.substring(0, startPos) + text + textarea.value.substring(endPos, textarea.value.length);
// set cursor pos at the end of the inserted text
textarea.selectionStart = textarea.selectionEnd = startPos + text.length;
textarea.focus();
} else { // safety belt for other browsers
textarea.value += text;
}
}
};
// InOutWidget This contains specific InOutnWidget javascript
// IE things can not handle hide/show options on select, this cloned list solition (should propably have 2 widgets)
(function ($) {
var methods = {
__init__: function(fromSelect, toSelect) {
// closed over state
var state = {'$fromNode' : $(cw.escape('#' + fromSelect)),
'$toNode' : $(cw.escape('#' + toSelect)),
'name' : this.attr('id')};
function sortoptions($optionlist) {
var $sorted = $optionlist.find('option').sort(function(opt1, opt2) {
return $(opt1).text() > $(opt2).text() ? 1 : -1;
});
// this somehow translates to an inplace sort
$optionlist.append($sorted);
};
sortoptions(state.$fromNode);
sortoptions(state.$toNode);
// will move selected options from one list to the other
// and call an option handler on each option
function moveoptions ($fromlist, $tolist, opthandler) {
$fromlist.find('option:selected').each(function(index, option) {
var $option = $(option);
// add a new option to the target list
$tolist.append(OPTION({'value' : $option.val()},
$option.text()));
// process callback on the option
opthandler.call(null, $option);
// remove option from the source list
$option.remove();
});
// re-sort both lists
sortoptions($fromlist);
sortoptions($tolist);
};
function addvalues () {
moveoptions(state.$fromNode, state.$toNode, function ($option) {
// add an hidden input for the edit controller
var hiddenInput = INPUT({
type: 'hidden', name: state.name,
value : $option.val()
});
state.$toNode.parent().append(hiddenInput);
});
};
function removevalues () {
moveoptions(state.$toNode, state.$fromNode, function($option) {
// remove hidden inputs for the edit controller
var selector = 'input[name=' + cw.escape(state.name) + ']'
state.$toNode.parent().find(selector).each(function(index, input) {
if ($(input).val() == $option.val()) {
$(input).remove();
}
});
});
};
var $this = $(this);
$this.find('.cwinoutadd').bind( // 'add >>>' symbol
'click', {'state' : state}, addvalues);
$this.find('.cwinoutremove').bind( // 'remove <<<' symbol
'click', {'state' : state}, removevalues);
state.$fromNode.bind('dblclick', {'state': state}, addvalues);
state.$toNode.bind('dblclick', {'state': state}, removevalues);
}
};
$.fn.cwinoutwidget = function(fromSelect, toSelect) {
return methods.__init__.apply(this, [fromSelect, toSelect]);
};
})(jQuery);