On Fri, Nov 12, 2010 at 5:34 PM, Sergiu Dumitriu <[email protected]> wrote:
> 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.
OK it makes sense.
Still I believe the WCAG non-compliant "icon" option has its uses. But
on our side we should try to use it as little as possible if not at
all.
Jerome.
>
>>>
>>> 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
>
_______________________________________________
devs mailing list
[email protected]
http://lists.xwiki.org/mailman/listinfo/devs
