On 11/12/2010 05:19 PM, Jerome Velociter wrote:
> On Fri, Nov 12, 2010 at 4:29 PM, Ecaterina Moraru (Valica)
> <[email protected]> wrote:
>> On Thu, Nov 4, 2010 at 18:34, jvelociter
>> <[email protected]>wrote:
>>
>>> Author: jvelociter
>>> Date: 2010-11-04 17:34:35 +0100 (Thu, 04 Nov 2010)
>>> New Revision: 32479
>>>
>>> Added:
>>>
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/list/
>>>
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/list/xlist.js
>>> Modified:
>>>
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.css
>>>
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.js
>>>
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/widgets/jumpToPage.js
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/xwiki.js
>>>
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/viewers/tags.js
>>> platform/web/trunk/standard/src/main/webapp/templates/javascript.vm
>>> platform/web/trunk/standard/src/main/webapp/templates/tagedit.vm
>>>
>>> platform/xwiki-applications/trunk/administration/src/main/resources/XWiki/XWikiGroupSheet.xml
>>>
>>> platform/xwiki-applications/trunk/officeimporter/src/main/resources/XWiki/OfficeImporter.xml
>>> Log:
>>> XWIKI-5648 New visual design for the AJAX suggest module
>>> XWIKI-5649 CSS classes to support automatic users and groups suggestions on
>>> field input
>>> XWIKI-3655 Clean the JS code of the ajax suggest - Continued work
>>> XWIKI-5105 When several suggest are used on the same page, suggests results
>>> interfer from one field to another - Fixed
>>>
>>> + some formatting on xwiki.js
>>>
>>>
>>>
>>> Modified:
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.css
>>> ===================================================================
>>> ---
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.css
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.css
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -1,167 +1,60 @@
>>> -body
>>> -{
>>> - position: relative;
>>> -}
>>> +#template('colorThemeInit.vm')
>>>
>>> -div.ajaxsuggest
>>> -{
>>> - position: absolute;
>>> - background-image: url(suggest_img/as_pointer.gif);
>>> - background-position: top;
>>> - background-repeat: no-repeat;
>>> - padding: 10px 0 0 0;
>>> -z-index: 100013;
>>> +.xhover {
>>> + background:red;
>>> }
>>>
>>> -div.ajaxsuggest div.as_header,
>>> -div.ajaxsuggest div.as_footer
>>> -{
>>> - position: relative;
>>> - height: 6px;
>>> - padding: 0 6px;
>>> - background-image: url(suggest_img/ul_corner_tr.gif);
>>> - background-position: top right;
>>> - background-repeat: no-repeat;
>>> - overflow: hidden;
>>> +input[type="text"].suggest {
>>> + border-width: 1px;
>>> }
>>> -div.ajaxsuggest div.as_footer
>>> -{
>>> - background-image: url(suggest_img/ul_corner_br.gif);
>>> -}
>>>
>>> -div.ajaxsuggest div.as_header div.as_corner,
>>> -div.ajaxsuggest div.as_footer div.as_corner
>>> -{
>>> - position: absolute;
>>> - top: 0;
>>> - left: 0;
>>> - height: 6px;
>>> - width: 6px;
>>> - background-image: url(suggest_img/ul_corner_tl.gif);
>>> - background-position: top left;
>>> - background-repeat: no-repeat;
>>> -}
>>> -div.ajaxsuggest div.as_footer div.as_corner
>>> -{
>>> - background-image: url(suggest_img/ul_corner_bl.gif);
>>> -}
>>> -div.ajaxsuggest div.as_header div.as_bar,
>>> -div.ajaxsuggest div.as_footer div.as_bar
>>> -{
>>> - height: 6px;
>>> - overflow: hidden;
>>> - background-color: #333;
>>> -}
>>> -
>>> -
>>> -div.ajaxsuggest ul
>>> -{
>>> - list-style: none;
>>> - margin: 0 0 -4px 0;
>>> - padding: 0;
>>> - overflow: hidden;
>>> - background-color: #333;
>>> -}
>>> -
>>> -div.ajaxsuggest ul li
>>> -{
>>> - color: #ccc;
>>> - padding: 0;
>>> - margin: 0 4px 4px;
>>> - text-align: left;
>>> -}
>>> -
>>> -div.ajaxsuggest ul li a
>>> -{
>>> - color: #ccc;
>>> - display: block;
>>> - text-decoration: none;
>>> - background-color: transparent;
>>> +body {
>>> position: relative;
>>> - padding: 0;
>>> - width: 100%;
>>> }
>>> -div.ajaxsuggest ul li a:hover
>>> -{
>>> - background-color: #444;
>>> -}
>>> -div.ajaxsuggest ul li.as_highlight a:hover
>>> -{
>>> - background-color: #1B5CCD;
>>> -}
>>>
>>> -div.ajaxsuggest ul li a span
>>> -{
>>> - display: block;
>>> - padding: 3px 6px;
>>> - font-weight: bold;
>>> +div.suggestItems {
>>> + position:absolute;
>>> + border: 1px solid $theme.borderColor;
>>> + border-top: none;
>>> + background: white; /* theme color ? */
>>> + z-index: 100013;
>>> + text-align:left;
>>> }
>>>
>>> -div.ajaxsuggest ul li a span small
>>> -{
>>> - font-weight: normal;
>>> - color: #fff;
>>> +div.suggestItems ul {
>>> + margin: 0px;
>>> }
>>>
>>> -div.ajaxsuggest ul li.as_highlight a span small
>>> -{
>>> - color: #ccc;
>>> +ul.suggestList {
>>> + margin:0px !important;
>>> + text-transform:none;
>>> + color:$theme.textColor;
>>> + font-weight:normal;
>>> }
>>>
>>> -div.ajaxsuggest ul li.as_highlight a
>>> -{
>>> - color: #fff;
>>> - background-color: #1B5CCD;
>>> - background-image: url(suggest_img/hl_corner_br.gif);
>>> - background-position: bottom right;
>>> - background-repeat: no-repeat;
>>> +ul.suggestList .xhighlight {
>>> + background-color: $theme.highlightColor;
>>> }
>>>
>>> -div.ajaxsuggest ul li.as_highlight a span
>>> -{
>>> - background-image: url(suggest_img/hl_corner_bl.gif);
>>> - background-position: bottom left;
>>> - background-repeat: no-repeat;
>>> +div.suggestItemName {
>>> + text-indent: 0;
>>> }
>>>
>>> -div.ajaxsuggest ul li a .tl,
>>> -div.ajaxsuggest ul li a .tr
>>> -{
>>> - background-repeat: no-repeat;
>>> - width: 6px;
>>> - height: 6px;
>>> - position: absolute;
>>> - top: 0;
>>> - padding: 0;
>>> - margin: 0;
>>> +div.suggestItemInfo {
>>> + color: #556677;
>>> + font-size: 0.8em;
>>> + padding-left: 20px;
>>> + text-indent: 0;
>>> }
>>> -div.ajaxsuggest ul li a .tr
>>> -{
>>> - right: 0;
>>> -}
>>>
>>> -div.ajaxsuggest ul li.as_highlight a .tl
>>> -{
>>> - left: 0;
>>> - background-image: url(suggest_img/hl_corner_tl.gif);
>>> - background-position: bottom left;
>>> +div.suggestItemName,
>>> +div.suggestItemInfo {
>>> + text-decoration: inherit;
>>> }
>>>
>>> -div.ajaxsuggest ul li.as_highlight a .tr
>>> -{
>>> - right: 0;
>>> - background-image: url(suggest_img/hl_corner_tr.gif);
>>> - background-position: bottom right;
>>> +.highlight {
>>> + background-color: $theme.highlightColor;
>>> + font-weight:bold;
>>> + text-decoration: inherit;
>>> }
>>>
>>> -div.ajaxsuggest ul em
>>> -{
>>> - font-style: normal;
>>> - color: #6EADE7;
>>> -}
>>> -
>>> -div.ajaxsuggest ul li.as_warning
>>> -{
>>> - font-weight: bold;
>>> - text-align: center;
>>> -}
>>>
>>> Modified:
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.js
>>> ===================================================================
>>> ---
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.js
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest/ajaxSuggest.js
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -2,6 +2,12 @@
>>>
>>> var widgets = XWiki.widgets = XWiki.widgets || {};
>>>
>>> + if (typeof widgets.XList == 'undefined') {
>>> + if (typeof console != "undefined"&& typeof console.warn == "function")
>>> {
>>> + console.warn("[Suggest widget] Required class missing:
>>> XWiki.widgets.XList");
>>> + }
>>> + } else {
>>> +
>>> /**
>>> * Suggest class.
>>> * Provide value suggestions to users when starting to type in a text
>>> input.
>>> @@ -18,7 +24,7 @@
>>> className : "ajaxsuggest",
>>> timeout : 2500,
>>> delay : 500,
>>> - offsety : -5,
>>> + offsety : 0,
>>> // Display a "no results" message, or simply hide the suggest box when
>>> no suggestions are available
>>> shownoresults : true,
>>> // The message to display as the "no results" message
>>> @@ -26,6 +32,7 @@
>>> maxheight : 250,
>>> cache : false,
>>> seps : "",
>>> + icon : null,
>>> // The name of the JSON variable or XML element holding the results.
>>> // "results" for the old suggest, "searchResults" for the REST search.
>>> resultsParameter : "results",
>>> @@ -59,8 +66,8 @@
>>> return false;
>>> }
>>>
>>> - // parameters object
>>> - Object.extend(this.options, param || { });
>>> + // Clone default options from the prototype so that they are not
>>> shared and extend options with passed parameters
>>> + this.options = Object.extend(Object.clone(this.options), param || {
>>> });
>>>
>>> // Reset the container if the configured parameter is not valid
>>> if (!$(this.options.parentContainer)) {
>>> @@ -127,7 +134,7 @@
>>> * value inside the target field, Escape closes the suggest dropdown, Up
>>> and Down move the current selection.
>>> */
>>> onKeyPress: function(event) {
>>> - if(!$(this.idAs)) {
>>> + if(!$(this.suggest)) {
>>> // Let the key events pass through if the UI is not displayed
>>> return;
>>> }
>>> @@ -136,7 +143,7 @@
>>> switch(key) {
>>> case Event.KEY_RETURN:
>>> if(this.aSuggestions.length == 1) {
>>> - this.setHighlight(1);
>>> + this.highlightFirst();
>>> }
>>> this.setHighlightedValue();
>>> Event.stop(event);
>>> @@ -234,7 +241,7 @@
>>> requestHeaders: headers,
>>> onSuccess: this.setSuggestions.bindAsEventListener(this),
>>> onFailure: function (response) {
>>> - alert("AJAX error: " + response.statusText);
>>> + new XWiki.widgets.Notification("Failed to retrieve suggestions :
>>> ')" + response.statusText, "error", {timeout: 5});
>>> }
>>> });
>>> },
>>> @@ -281,8 +288,6 @@
>>> }
>>>
>>> }
>>> -
>>> - this.idAs = "as_"+this.fld.id;
>>> this.createList(this.aSuggestions);
>>> },
>>>
>>> @@ -298,8 +303,8 @@
>>> // get rid of old list
>>> // and clear the list removal timeout
>>> //
>>> - if ($(this.idAs)) {
>>> - $(this.idAs).remove();
>>> + if (this.suggest&& this.suggest.parentNode) {
>>> + this.suggest.remove();
>>> }
>>> this.killTimeout();
>>>
>>> @@ -309,69 +314,46 @@
>>>
>>> // create holding div
>>> //
>>> - var div = new Element("div", {
>>> - id: this.idAs,
>>> - className: this.options.className
>>> + var div = new Element("div", { 'class': "suggestItems "+
>>> this.options.className });
>>> +
>>> + // create and populate list
>>> + var list = new XWiki.widgets.XList([], {
>>> + icon: this.options.icon,
>>> + classes: 'suggestList',
>>> + eventListeners: {
>>> + 'click' : function () { pointer.setHighlightedValue(); return
>>> false; },
>>> + 'mouseover' : function () { pointer.setHighlight(
>>> this.getElement() ); }
>>> + }
>>> });
>>>
>>> - var hcorner = new Element("div", {className: "as_corner"});
>>> - var hbar = new Element("div", {className: "as_bar"});
>>> - var header = new Element("div", {className: "as_header"});
>>> - header.appendChild(hcorner);
>>> - header.appendChild(hbar);
>>> - div.appendChild(header);
>>> -
>>> - // create and populate ul
>>> - var ul = new Element("ul", {id: "as_ul"});
>>> -
>>> // loop throught arr of suggestions
>>> - // creating an LI element for each suggestion
>>> + // creating an XlistItem for each suggestion
>>> //
>>> for (var i=0;i<arr.length;i++)
>>> {
>>> // format output with the input enclosed in a EM element
>>> // (as HTML, not DOM)
>>> //
>>> - var val = arr[i].value;
>>> - var st = val.toLowerCase().indexOf( this.sInput.toLowerCase() );
>>> - var output = val.substring(0,st) + "<em>" + val.substring(st,
>>> st+this.sInput.length) + "</em>" + val.substring(st+this.sInput.length);
>>> -
>>> + var val = arr[i].value, st = val.toLowerCase().indexOf(
>>> this.sInput.toLowerCase() );
>>> + var output = val.substring(0,st) + "<span class='highlight'>" +
>>> val.substring(st, st+this.sInput.length) + "</span>" +
>>> val.substring(st+this.sInput.length);
>>> var span = new Element("span").update(output);
>>>
>>> - var a = new Element("a", {href: "#"});
>>> + var item = new XWiki.widgets.XListItem( span , {
>>> + containerClasses: 'suggestItem',
>>> + value: arr[i].value,
>>> + noHighlight: true // we do the highlighting ourselves
>>> + });
>>>
>>> - var tl = new Element("span", {className:"tl"}).update(" ");
>>> - var tr = new Element("span", {className:"tr"}).update(" ");
>>> - a.appendChild(tl);
>>> - a.appendChild(tr);
>>> -
>>> - a.appendChild(span);
>>> -
>>> - a.name = i+1;
>>> - a.onclick = function () { pointer.setHighlightedValue(); return
>>> false; }
>>> - a.onmouseover = function () { pointer.setHighlight(this.name); }
>>> -
>>> - var li = new Element("li").update(a);
>>> -
>>> - ul.appendChild( li );
>>> + list.addItem(item);
>>> }
>>>
>>> // no results
>>> if (arr.length == 0)
>>> {
>>> - var li = new Element("li",
>>> {className:"as_warning"}).update(this.options.noresults);
>>> -
>>> - ul.appendChild( li );
>>> + list.addItem( new XWiki.widgets.XListItem(this.options.noresults,
>>> {'classes' : 'noSuggestion'}))
>>> }
>>> - div.appendChild( ul );
>>> + div.appendChild( list.getElement() );
>>>
>>> - var fcorner = new Element("div", {className: "as_corner"});
>>> - var fbar = new Element("div", {className: "as_bar"});
>>> - var footer = new Element("div", {className: "as_footer"});
>>> - footer.appendChild(fcorner);
>>> - footer.appendChild(fbar);
>>> - div.appendChild(footer);
>>> -
>>> // get position of target textfield
>>> // position holding div below it
>>> // set width of holding div to width of field
>>> @@ -388,7 +370,8 @@
>>> div.onmouseout = function(){ pointer.resetTimeout() }
>>>
>>> // add DIV to document
>>> - $(this.options.parentContainer).appendChild(div);
>>> + $(this.options.parentContainer).insert(div);
>>> + this.suggest = div;
>>>
>>> // currently no item is highlighted
>>> this.iHighlighted = 0;
>>> @@ -405,23 +388,30 @@
>>> */
>>> changeHighlight: function(key)
>>> {
>>> - var list = $("as_ul");
>>> + var list = this.suggest.down('ul');
>>> if (!list)
>>> return false;
>>>
>>> var n;
>>>
>>> - if (key == 40)
>>> - n = this.iHighlighted + 1;
>>> - else if (key == 38)
>>> - n = this.iHighlighted - 1;
>>> + if (this.iHighlighted) {
>>> + if (key == 40)
>>> + elem = this.iHighlighted.next();
>>> + else if (key == 38)
>>> + elem = this.iHighlighted.previous();
>>> + }
>>> + else {
>>> + if (key == 40)
>>> + elem = list.down('li');
>>> + else if (key == 38)
>>> + if (list.select('li')> 0) {
>>> + elem = list.select('li')[list.select('li').length];
>>> + }
>>> + }
>>>
>>> - if (n> list.childNodes.length)
>>> - n = list.childNodes.length;
>>> - if (n< 1)
>>> - n = 1;
>>> -
>>> - this.setHighlight(n);
>>> + if (typeof elem != 'undefined') {
>>> + this.setHighlight(elem);
>>> + }
>>> },
>>>
>>> /**
>>> @@ -429,18 +419,14 @@
>>> *
>>> * @param {Object} n
>>> */
>>> - setHighlight: function(n)
>>> + setHighlight: function(highlightedItem)
>>> {
>>> - var list = $("as_ul");
>>> - if (!list)
>>> - return false;
>>> -
>>> - if (this.iHighlighted> 0)
>>> + if (this.iHighlighted)
>>> this.clearHighlight();
>>>
>>> - this.iHighlighted = Number(n);
>>> + highlightedItem.addClassName("xhighlight");
>>>
>>> - list.childNodes[this.iHighlighted-1].className = "as_highlight";
>>> + this.iHighlighted = highlightedItem;
>>>
>>> this.killTimeout();
>>> },
>>> @@ -450,14 +436,19 @@
>>> */
>>> clearHighlight: function()
>>> {
>>> - var list = $("as_ul");
>>> - if (!list)
>>> - return false;
>>> + if (this.iHighlighted) {
>>> + this.iHighlighted.removeClassName("xhighlight");
>>> + delete this.iHighlighted;
>>> + }
>>> + },
>>>
>>> - if (this.iHighlighted> 0)
>>> - {
>>> - list.childNodes[this.iHighlighted-1].className = "";
>>> - this.iHighlighted = 0;
>>> + highlightFirst: function()
>>> + {
>>> + if (this.suggest&& this.suggest.down('ul')) {
>>> + var first = this.suggest.down('ul').down('li');
>>> + if (first) {
>>> + this.setHighlight(first);
>>> + }
>>> }
>>> },
>>>
>>> @@ -466,7 +457,7 @@
>>> if (this.iHighlighted)
>>> {
>>> if(this.sInput == ""&& this.fld.value == "")
>>> - this.sInput = this.fld.value = this.aSuggestions[
>>> this.iHighlighted-1 ].value;
>>> + this.sInput = this.fld.value =
>>> this.iHighlighted.down(".value").innerHTML;
>>> else {
>>> if(this.seps) {
>>> var lastIndx = -1;
>>> @@ -474,15 +465,15 @@
>>> if(this.fld.value.lastIndexOf(this.seps.charAt(i))> lastIndx)
>>> lastIndx = this.fld.value.lastIndexOf(this.seps.charAt(i));
>>> if(lastIndx == -1)
>>> - this.sInput = this.fld.value = this.aSuggestions[
>>> this.iHighlighted-1 ].value;
>>> + this.sInput = this.fld.value =
>>> this.iHighlighted.down(".value").innerHTML;
>>> else
>>> {
>>> - this.fld.value = this.fld.value.substring(0, lastIndx+1) +
>>> this.aSuggestions[ this.iHighlighted-1 ].value;
>>> + this.fld.value = this.fld.value.substring(0, lastIndx+1) +
>>> this.iHighlighted.down(".value").innerHTML;
>>> this.sInput = this.fld.value.substring(lastIndx+1);
>>> }
>>> }
>>> else
>>> - this.sInput = this.fld.value = this.aSuggestions[
>>> this.iHighlighted-1 ].value;
>>> + this.sInput = this.fld.value =
>>> this.iHighlighted.down(".value").innerHTML;
>>> }
>>>
>>> Event.fire(this.fld, "xwiki:suggest:selected");
>>> @@ -537,12 +528,13 @@
>>> */
>>> clearSuggestions: function() {
>>> this.killTimeout();
>>> - var ele = $(this.idAs);
>>> + var ele = $(this.suggest);
>>> var pointer = this;
>>> if (ele) {
>>> var fade = new Effect.Fade(ele, {duration: "0.25", afterFinish :
>>> function() {
>>> - if($(pointer.idAs)) {
>>> - $(pointer.idAs).remove();
>>> + if($(pointer.suggest)) {
>>> + $(pointer.suggest).remove();
>>> + delete pointer.suggest;
>>> }
>>> }});
>>> }
>>> @@ -550,6 +542,8 @@
>>>
>>> });
>>>
>>> + }
>>> +
>>> return XWiki;
>>>
>>> })(XWiki || {});
>>>
>>> Modified:
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/widgets/jumpToPage.js
>>> ===================================================================
>>> ---
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/widgets/jumpToPage.js
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/widgets/jumpToPage.js
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -57,6 +57,7 @@
>>> // Prefixed with& since the current (as of 1.7) Suggest code does
>>> not automatically append it.
>>> varname: "q",
>>> noresults: "Document not found",
>>> + icon: "${xwiki.getSkinFile('icons/silk/page_white_text.gif')}",
>>> json: true,
>>> resultsParameter : "searchResults",
>>> resultId : "id",
>>>
>>> Modified:
>>> platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/xwiki.js
>>> ===================================================================
>>> --- platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/xwiki.js
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++ platform/web/trunk/standard/src/main/webapp/resources/js/xwiki/xwiki.js
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -537,55 +537,55 @@
>>> },
>>>
>>> cookies: {
>>> - /**
>>> - * Create a cookie, with or without expiration date.
>>> - *
>>> - * @param name Name of the cookie.
>>> - * @param value Value of the cookie.
>>> - * @param days Days to keep the cookie (can be null).
>>> - * @return
>>> - */
>>> - create: function(name,value,days) {
>>> - if (days) {
>>> - var date = new Date();
>>> - date.setTime(date.getTime()+(days*24*60*60*1000));
>>> - var expires = "; expires="+date.toGMTString();
>>> - }
>>> - else var expires = "";
>>> - document.cookie = name+"="+value+expires+"; path=/";
>>> - },
>>> + /**
>>> + * Create a cookie, with or without expiration date.
>>> + *
>>> + * @param name Name of the cookie.
>>> + * @param value Value of the cookie.
>>> + * @param days Days to keep the cookie (can be null).
>>> + * @return
>>> + */
>>> + create: function(name,value,days) {
>>> + if (days) {
>>> + var date = new Date();
>>> + date.setTime(date.getTime()+(days*24*60*60*1000));
>>> + var expires = "; expires="+date.toGMTString();
>>> + }
>>> + else var expires = "";
>>> + document.cookie = name+"="+value+expires+"; path=/";
>>> + },
>>>
>>> - /**
>>> - * Read a cookie.
>>> - *
>>> - * @param name Name of the cookie.
>>> - * @return Value for the given cookie.
>>> - */
>>> - read:function(name) {
>>> - var nameEQ = name + "=";
>>> - var ca = document.cookie.split(';');
>>> - for(var i=0;i< ca.length;i++) {
>>> - var c = ca[i];
>>> - while (c.charAt(0)==' ') {
>>> - c = c.substring(1,c.length);
>>> - }
>>> - if (c.indexOf(nameEQ) == 0) {
>>> - return c.substring(nameEQ.length,c.length);
>>> - }
>>> - }
>>> - return null;
>>> - },
>>> + /**
>>> + * Read a cookie.
>>> + *
>>> + * @param name Name of the cookie.
>>> + * @return Value for the given cookie.
>>> + */
>>> + read:function(name) {
>>> + var nameEQ = name + "=";
>>> + var ca = document.cookie.split(';');
>>> + for(var i=0;i< ca.length;i++) {
>>> + var c = ca[i];
>>> + while (c.charAt(0)==' ') {
>>> + c = c.substring(1,c.length);
>>> + }
>>> + if (c.indexOf(nameEQ) == 0) {
>>> + return c.substring(nameEQ.length,c.length);
>>> + }
>>> + }
>>> + return null;
>>> + },
>>>
>>> - /**
>>> - * Erase a cookie.
>>> - *
>>> - * @param name Name of the cookie to erase.
>>> - * @return
>>> - */
>>> - erase:function(name) {
>>> - XWiki.cookies.create(name,"",-1);
>>> - }
>>> -
>>> + /**
>>> + * Erase a cookie.
>>> + *
>>> + * @param name Name of the cookie to erase.
>>> + * @return
>>> + */
>>> + erase:function(name) {
>>> + XWiki.cookies.create(name,"",-1);
>>> + }
>>> +
>>> },
>>>
>>> /**
>>> @@ -1337,27 +1337,57 @@
>>> /**
>>> * Small JS improvement, which suggests document names (doc.fullName) when
>>> typing in an input.
>>> *
>>> - * To activate this behavior on an input elements, add the
>>> "suggestDocuments" classname to it.
>>> + * To activate this behavior on an input elements, add one of the
>>> following classname to it :
>>> + *<ul>
>>> + *<li><tt>suggestDocuments</tt> to suggest from any available
>>> document</li>
>>> + *<li><tt>suggestUsers</tt> to suggest from documents that contains user
>>> objects</li>
>>> + *<li><tt>suggestGroups</tt> to suggest from documents that contains
>>> group objects</li>
>>> + *</ul>
>>> */
>>> document.observe('xwiki:dom:loaded', function() {
>>> - if (typeof(XWiki.widgets.Suggest) != "undefined") {
>>> - $$("input.suggestDocuments").each(function(item) {
>>> - // Create the Suggest.
>>> - new XWiki.widgets.Suggest(item, {
>>> - // This document also provides the suggestions.
>>> - script:
>>> XWiki.Document.getRestSearchURL("scope=name&number=10&media=json&"),
>>> - varname: "q",
>>> - noresults: "Document not found",
>>> - json: true,
>>> - resultsParameter : "searchResults",
>>> - resultId : "id",
>>> - resultValue : "pageFullName",
>>> - resultInfo : "pageFullName",
>>> - timeout : 30000,
>>> - parentContainer : item.up()
>>> - });
>>> - });
>>> - }
>>> + var suggestionsMapping = {
>>> + "documents" : {
>>> + script:
>>> XWiki.Document.getRestSearchURL("scope=name&number=10&media=json&"),
>>> + varname: "q",
>>> + icon: "$xwiki.getSkinFile('icons/silk/page_white_text.gif')",
>>> + noresults: "Document not found",
>>> + json: true,
>>> + resultsParameter : "searchResults",
>>> + resultId : "id",
>>> + resultValue : "pageFullName",
>>> + resultInfo : "pageFullName"
>>> + },
>>> + "users" : {
>>> + script: XWiki.currentDocument.getURL('get',
>>> 'xpage=uorgsuggest&classname=XWiki.XWikiUsers&wiki=local&uorg=user&'),
>>> + varname: "input",
>>> + icon: "$xwiki.getSkinFile('icons/silk/user.gif')",
>>> + noresults: "User not found",
>>> + },
>>> + "groups" : {
>>> + script: XWiki.currentDocument.getURL('get',
>>> 'xpage=uorgsuggest&classname=XWiki.XWikiGroups&wiki=local&uorg=group&'),
>>> + varname: "input",
>>> + icon: "$xwiki.getSkinFile('icons/silk/group.gif')",
>>> + noresults: "Group not found",
>>> + }
>>> + };
>>> + if (typeof(XWiki.widgets.Suggest) != "undefined") {
>>> + var keys = Object.keys(suggestionsMapping);
>>> + for (var i=0;i<keys.length;i++) {
>>> + var selector = 'input.suggest' + keys[i].capitalize();
>>> + $$(selector).each(function(item) {
>>> + if (!item.hasClassName('initialized')) {
>>> + var options = {
>>> + timeout : 30000,
>>> + parentContainer : item.up()
>>> + };
>>> + Object.extend(options, suggestionsMapping[keys[i]]);
>>> + // Create the Suggest.
>>> + var suggest = new XWiki.widgets.Suggest(item, options);
>>> + item.addClassName('initialized');
>>> + }
>>> + });
>>> + }
>>> + }
>>> });
>>>
>>> /**
>>>
>>> Modified:
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/viewers/tags.js
>>> ===================================================================
>>> ---
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/viewers/tags.js
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/viewers/tags.js
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -157,7 +157,8 @@
>>> script: "${xwiki.getURL('Main.WebHome', 'view',
>>> 'xpage=suggest&classname=XWiki.TagClass&fieldname=tags&firCol=-&secCol=-')}&",
>>> varname: 'input',
>>> seps:
>>> "${xwiki.getDocument('XWiki.TagClass').xWikiClass.tags.getProperty('separators').value}",
>>> - shownoresults : false
>>> + shownoresults : false,
>>> + icon: "${xwiki.getSkinFile('icons/silk/tag_yellow.gif')}"
>>> });
>>> }
>>> });
>>>
>>> Added:
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/list/xlist.js
>>> ===================================================================
>>> ---
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/list/xlist.js
>>> (rev 0)
>>> +++
>>> platform/web/trunk/standard/src/main/webapp/resources/uicomponents/widgets/list/xlist.js
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -0,0 +1,126 @@
>>> +/**
>>> + * Usage :
>>> + *
>>> + * var xlist = new XWiki.widgets.XList(
>>> + * [ // array of initial list elements (or just content it works too
>>> + * new XWiki.widgets.XListItem( "A first element" ),
>>> + * new XWiki.widgets.XListItem( "A second element", {'value' :
>>> '10'} ),
>>> + * "A third item passed as string content",
>>> + * new Element("blink").update('An hip-hop item passed as DOM
>>> element')
>>> + * ],
>>> + * { // options
>>> + * numbered: false,
>>> + * icon: "$xwiki.getSkinFile('icons/silk/sport_basketball.gif')",
>>> + * classes : "myListExtraClass",
>>> + * itemClasses : "myListItemExtraClasses",
>>> + * eventListeners : {
>>> + * // Event listeners defined for each of this list items.
>>> + * // listeners call backs are bound to the list item object
>>> (XWiki.widgets.XListItem) from which they emerge
>>> + * 'click' : function() { console.log('clicked !', this); },
>>> + * 'mouseover' : function() { console.log('mouse over !', this);
>>> }
>>> + * }
>>> + * });
>>> + *
>>> + * $('insertionNode').insert( xlist.getElement() );
>>> + *
>>> + * xlist.addItem(
>>> + * new XWiki.widgets.XListItem('A fifth element added later', {
>>> + * icon : "$xwiki.getSkinFile('icons/silk/bomb.gif')", // this
>>> overrides the one defined for the whole list
>>> + * eventListeners: {
>>> + * // Event listeners defined just for this specific list item
>>> + * 'mouseout' : function() { console.log('just this list item is
>>> bound to this event', this); }
>>> + * }
>>> + * })
>>> + * );
>>> + *
>>> + */
>>> +
>>> +var XWiki = function(XWiki){
>>> +
>>> + var widgets = XWiki.widgets = XWiki.widgets || {};
>>> +
>>> + widgets.XList = Class.create({
>>> + initialize: function(items, options) {
>>> + this.items = items || [];
>>> + this.options = options || {}
>>> + this.listElement = new Element(this.options.ordered ? "ol" :
>>> "ul", {
>>> + 'class' : 'xlist' + (this.options.classes ? (' ' +
>>> this.options.classes) : ''),
>>> + });
>>> + if (this.items&& this.items.length> 0) {
>>> + for (var i=0;i<this.items.length;i++) {
>>> + this.addItem(this.items[i]);
>>> + }
>>> + }
>>> + },
>>> + addItem: function(item){ /* future: position (top, N) */
>>> + if (!item || !(item instanceof XWiki.widgets.XListItem)) {
>>> + item = new XWiki.widgets.XListItem(item);
>>> + }
>>> + var listItemElement = item.getElement();
>>> + if (this.options.itemClasses&&
>>> !this.options.itemClasses.blank()) {
>>> + listItemElement.addClassName(this.options.itemClasses);
>>> + }
>>> + this.listElement.insert(listItemElement);
>>> + if (typeof this.options.eventListeners == 'object') {
>>> + item.bindEventListeners(this.options.eventListeners);
>>> + }
>>> + if (this.options.icon&& !this.options.icon.blank()) {
>>> + item.setIcon(this.options.icon,
>>> this.options.overrideItemIcon);
>>> + }
>>> + item.list = this; // associate list item to this XList
>>> + },
>>> + getElement: function() {
>>> + return this.listElement;
>>> + }
>>> + });
>>> +
>>> + widgets.XListItem = Class.create({
>>> + initialize: function(content, options) {
>>> + this.options = options || {};
>>> + var classes = 'xitem' + (this.options.noHighlight ? '' : '
>>> xhighlight');
>>> + classes += this.options.classes ? this.options.classes: '';
>>> + this.containerElement = new Element("div", {'class':
>>> 'xitemcontainer'}).insert(content || '');
>>> + this.containerElement.addClassName(this.options.containerClasses
>>> || '');
>>> + this.containerElement.setStyle({textIndent: '0px'});
>>> + if (this.options.value) {
>>> + this.containerElement.insert(new Element('div',
>>> {'class':'hidden value'}).insert(this.options.value));
>>> + }
>>> + this.listItemElement = new Element("li", {'class' :
>>> classes}).update( this.containerElement );
>>> + if (this.options.icon&& !this.options.icon.blank()) {
>>> + this.setIcon(this.options.icon);
>>> + this.hasIcon = true;
>>> + }
>>> + if (typeof this.options.eventListeners == 'object') {
>>> + this.bindEventListeners(this.options.eventListeners);
>>> + }
>>> + },
>>> + getElement: function() {
>>> + return this.listItemElement;
>>> + },
>>> + setIcon: function(icon, override) {
>>> + if (!this.hasIcon || override) {
>>> + this.iconImage = new Image();
>>> + this.iconImage.onload = function(){
>>> + this.listItemElement.setStyle({
>>> + backgroundImage: "url(" + this.iconImage.src + ")",
>>> + backgroundRepeat: 'no-repeat',
>>> + });
>>> + this.listItemElement.down(".xitemcontainer").setStyle({
>>> + textIndent:(this.iconImage.width + 5) + 'px',
>>> + height: this.iconImage.height + 'px'
>>> + });
>>>
>>
>> We need to make some standard classes for those types of icons: page, tags,
>> groups, etc and use those classes instead (search, suggest, activity, trees,
>> etc)
>> Not so nice that the image is put in style, is gonna break the wcag. Also,
>> for this type of images (like the one in action menu) we have a
>> background-position: 0 3px.
>
> We already have a class option for xitem, that we could use for
> suggestGroups, suggestUsers, etc. classes, but still this "icon" is
> valid in my opinion, not all developers will want to define classes
> for everything (for example your icon name could be retrieved
> dynamically, etc.)
>
> Does the WCAG validate dynamic DOM changes like suggest ?
>
The WCAG validator, as a tool, only checks the initial HTML. But WCAG
the specification is a set of guidelines to be applied at all moments.
>>
>> Thanks,
>> Caty
>>
>>
>>
>>> + }.bind(this)
>>> + this.iconImage.src = icon;
>>> + }
>>> + },
>>> + bindEventListeners: function(eventListeners) {
>>> + var events = Object.keys(eventListeners);
>>> + for (var i=0;i<events.length;i++) {
>>> + this.listItemElement.observe(events[i],
>>> eventListeners[events[i]].bind(this));
>>> + }
>>> + },
>>> + });
>>> +
>>> + return XWiki;
>>> +
>>> +}(XWiki || {});
>>> \ No newline at end of file
>>>
>>> Modified:
>>> platform/web/trunk/standard/src/main/webapp/templates/javascript.vm
>>> ===================================================================
>>> --- platform/web/trunk/standard/src/main/webapp/templates/javascript.vm
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++ platform/web/trunk/standard/src/main/webapp/templates/javascript.vm
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -1,7 +1,7 @@
>>> ##
>>> ## CSS files related to JS libraries.
>>> ##
>>> -<link href="$xwiki.getSkinFile("js/xwiki/suggest/ajaxSuggest.css")"
>>> rel="stylesheet" type="text/css" />
>>> +<link href="$xwiki.getSkinFile("js/xwiki/suggest/ajaxSuggest.css", true)"
>>> rel="stylesheet" type="text/css" />
>>> <link href="$xwiki.getSkinFile("js/xwiki/lightbox/lightbox.css", true)"
>>> rel="stylesheet" type="text/css" />
>>> <!--[if IE]>
>>> <link href="$xwiki.getSkinFile("js/xwiki/lightbox/lightboxIE.css", true)"
>>> rel="stylesheet" type="text/css" />
>>> @@ -19,9 +19,10 @@
>>> $xwiki.jsfx.use('uicomponents/widgets/confirmedAjaxRequest.js', true)
>>> $xwiki.jsfx.use('uicomponents/widgets/notification.js', true)
>>> $xwiki.ssfx.use('uicomponents/widgets/notification.css', true)
>>> +$xwiki.jsfx.use('uicomponents/widgets/list/xlist.js')
>>> +$xwiki.jsfx.use('js/xwiki/suggest/ajaxSuggest.js')
>>> <script type="text/javascript"
>>> src="$xwiki.getSkinFile("js/prototype/prototype.js")"></script>
>>> <script type="text/javascript"
>>> src="$xwiki.getSkinFile("js/xwiki/xwiki.js", true)"></script>
>>> -<script type="text/javascript"
>>> src="$xwiki.getSkinFile("js/xwiki/suggest/ajaxSuggest.js")"></script>
>>> <script type="text/javascript">
>>> //<![CDATA[
>>> XWiki.webapppath = "${xwiki.webAppPath}";
>>>
>>> Modified: platform/web/trunk/standard/src/main/webapp/templates/tagedit.vm
>>> ===================================================================
>>> --- platform/web/trunk/standard/src/main/webapp/templates/tagedit.vm
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++ platform/web/trunk/standard/src/main/webapp/templates/tagedit.vm
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -93,7 +93,7 @@
>>> #set($seps =
>>> $xwiki.getDocument("XWiki.TagClass").xWikiClass.tags.getProperty('separators').value)
>>> <dl>
>>> <dt><label for="tags">$msg.get("core.tagedit.title")</label></dt>
>>> -<dd><input type="text" id="tags" name="tags" onfocus="new
>>> XWiki.widgets.Suggest(this, {script:'$script', varname: 'input',
>>> seps:'$seps', offsety: 13} );" value="$!tdoc.tags"/></dd>
>>> +<dd><input type="text" id="tags" name="tags" onfocus="new
>>> XWiki.widgets.Suggest(this, {script:'$script', varname: 'input',
>>> seps:'$seps', offsety: 13,
>>> icon:'${xwiki.getSkinFile('icons/silk/tag_yellow.gif')}'"} );"
>>> value="$!tdoc.tags"/></dd>
>>> </dl>
>>> #end
>>> #end
>>>
>>> Modified:
>>> platform/xwiki-applications/trunk/administration/src/main/resources/XWiki/XWikiGroupSheet.xml
>>> ===================================================================
>>> ---
>>> platform/xwiki-applications/trunk/administration/src/main/resources/XWiki/XWikiGroupSheet.xml
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++
>>> platform/xwiki-applications/trunk/administration/src/main/resources/XWiki/XWikiGroupSheet.xml
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -11,15 +11,15 @@
>>> <customClass></customClass>
>>> <contentAuthor>XWiki.Admin</contentAuthor>
>>> <creationDate>1242173909000</creationDate>
>>> -<date>1242173909000</date>
>>> -<contentUpdateDate>1242173909000</contentUpdateDate>
>>> +<date>1288812724000</date>
>>> +<contentUpdateDate>1288812724000</contentUpdateDate>
>>> <version>1.1</version>
>>> <title></title>
>>> <template></template>
>>> <defaultTemplate></defaultTemplate>
>>> <validationScript></validationScript>
>>> <comment></comment>
>>> -<minorEdit>false</minorEdit>
>>> +<minorEdit>true</minorEdit>
>>> <syntaxId>xwiki/2.0</syntaxId>
>>> <hidden>false</hidden>
>>> <object>
>>> @@ -159,10 +159,12 @@
>>>
>>> if (uorg == "user") {
>>> suggesturl += "&uorg=user&";
>>> + icon = "$xwiki.getSkinFile('icons/silk/user.gif')";
>>> } else {
>>> suggesturl += "&uorg=group&";
>>> + icon = "$xwiki.getSkinFile('icons/silk/group.gif')";
>>> }
>>> - return new XWiki.widgets.Suggest(input, { script: suggesturl,
>>> varname:'input' });
>>> + return new XWiki.widgets.Suggest(input, { script: suggesturl,
>>> varname:'input', icon:icon });
>>> },
>>> addNewMember: function(uorg, input) {
>>> if (input) {
>>>
>>> Modified:
>>> platform/xwiki-applications/trunk/officeimporter/src/main/resources/XWiki/OfficeImporter.xml
>>> ===================================================================
>>> ---
>>> platform/xwiki-applications/trunk/officeimporter/src/main/resources/XWiki/OfficeImporter.xml
>>> 2010-11-04 15:22:54 UTC (rev 32478)
>>> +++
>>> platform/xwiki-applications/trunk/officeimporter/src/main/resources/XWiki/OfficeImporter.xml
>>> 2010-11-04 16:34:35 UTC (rev 32479)
>>> @@ -338,7 +338,8 @@
>>> if (typeof(XWiki.widgets.Suggest) != "undefined") {
>>> new XWiki.widgets.Suggest(field, {
>>> script: "$suggestDoc.URL?xpage=plain&type=" + type +
>>> "&number=" + number + "&",
>>> - });
>>> + icon: "$xwiki.getSkinFile('icons/silk/folder.gif')"
>>> + });
>>> }
>>> }
>>>
>>> XWiki.officeImporter.addAutoSuggest(document.getElementById("targetSpaceInputId"),
>>> "spaces", 5);
--
Sergiu Dumitriu
http://purl.org/net/sergiu/
_______________________________________________
devs mailing list
[email protected]
http://lists.xwiki.org/mailman/listinfo/devs
