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' + });