Re: [xwiki-devs] [xwiki-notifications] r32479 - in platform: web/trunk/standard/src/main/webapp/resources/js/xwiki web/trunk/standard/src/main/webapp/resources/js/xwiki/suggest web/trunk/standard/src/main/webapp/resources/js/xwiki/widgets web/trunk/standard/src/m
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. 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);
_______________________________________________ notifications mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/notifications
participants (1)
-
Ecaterina Moraru (Valica)