| Index: trunk/phase3/skins/common/shared.css |
| — | — | @@ -161,6 +161,7 @@ |
| 162 | 162 | left: 0px; |
| 163 | 163 | width: 0px; |
| 164 | 164 | background-color: white; |
| | 165 | + background-color: Window; |
| 165 | 166 | border-style: solid; |
| 166 | 167 | border-color: #AAAAAA; |
| 167 | 168 | border-width: 1px; |
| Index: trunk/phase3/skins/common/mwsuggest.js |
| — | — | @@ -31,6 +31,16 @@ |
| 32 | 32 | var os_is_stopped = false; |
| 33 | 33 | // max lines to show in suggest table |
| 34 | 34 | var os_max_lines_per_suggest = 7; |
| | 35 | +// number of steps to animate expansion/contraction of container width |
| | 36 | +var os_animation_steps = 6; |
| | 37 | +// num of pixels of smallest step |
| | 38 | +var os_animation_min_step = 2; |
| | 39 | +// delay between steps (in ms) |
| | 40 | +var os_animation_delay = 30; |
| | 41 | +// max width of container in percent of normal size (1 == 100%) |
| | 42 | +var os_container_max_width = 2; |
| | 43 | +// currently active animation timer |
| | 44 | +var os_animation_timer = null; |
| 35 | 45 | |
| 36 | 46 | /** Timeout timer class that will fetch the results */ |
| 37 | 47 | function os_Timer(id,r,query){ |
| — | — | @@ -39,6 +49,18 @@ |
| 40 | 50 | this.query = query; |
| 41 | 51 | } |
| 42 | 52 | |
| | 53 | +/** Timer user to animate expansion/contraction of container width */ |
| | 54 | +function os_AnimationTimer(r, target){ |
| | 55 | + this.r = r; |
| | 56 | + var current = document.getElementById(r.container).offsetWidth; |
| | 57 | + this.inc = Math.round((target-current) / os_animation_steps); |
| | 58 | + if(this.inc < os_animation_min_step && this.inc >=0) |
| | 59 | + this.inc = os_animation_min_step; // minimal animation step |
| | 60 | + if(this.inc > -os_animation_min_step && this.inc <0) |
| | 61 | + this.inc = -os_animation_min_step; |
| | 62 | + this.target = target; |
| | 63 | +} |
| | 64 | + |
| 43 | 65 | /** Property class for single search box */ |
| 44 | 66 | function os_Results(name, formname){ |
| 45 | 67 | this.searchform = formname; // id of the searchform |
| — | — | @@ -84,9 +106,9 @@ |
| 85 | 107 | function os_operaWidthFix(x){ |
| 86 | 108 | // TODO: better css2 incompatibility detection here |
| 87 | 109 | if(is_opera || is_khtml || navigator.userAgent.toLowerCase().indexOf('firefox/1')!=-1){ |
| 88 | | - return x - 30; // opera&konqueror & old firefox don't understand overflow-x, estimate scrollbar width |
| | 110 | + return 30; // opera&konqueror & old firefox don't understand overflow-x, estimate scrollbar width |
| 89 | 111 | } |
| 90 | | - return x; |
| | 112 | + return 0; |
| 91 | 113 | } |
| 92 | 114 | |
| 93 | 115 | function os_encodeQuery(value){ |
| — | — | @@ -217,11 +239,41 @@ |
| 218 | 240 | } |
| 219 | 241 | /** If some entries are longer than the box, replace text with "..." */ |
| 220 | 242 | function os_trimResultText(r){ |
| | 243 | + // find max width, first see if we could expand the container to fit it |
| | 244 | + var maxW = 0; |
| | 245 | + for(var i=0;i<r.resultCount;i++){ |
| | 246 | + var e = document.getElementById(r.resultText+i); |
| | 247 | + if(e.offsetWidth > maxW) |
| | 248 | + maxW = e.offsetWidth; |
| | 249 | + } |
| 221 | 250 | var w = document.getElementById(r.container).offsetWidth; |
| | 251 | + var fix = 0; |
| 222 | 252 | if(r.containerCount < r.resultCount){ |
| 223 | | - w -= 20; // give 20px for scrollbar |
| | 253 | + fix = 20; // give 20px for scrollbar |
| 224 | 254 | } else |
| 225 | | - w = os_operaWidthFix(w); |
| | 255 | + fix = os_operaWidthFix(w); |
| | 256 | + if(fix < 4) |
| | 257 | + fix = 4; // basic padding |
| | 258 | + maxW += fix; |
| | 259 | + |
| | 260 | + // resize container to fit more data if permitted |
| | 261 | + var normW = document.getElementById(r.searchbox).offsetWidth; |
| | 262 | + var prop = maxW / normW; |
| | 263 | + if(prop > os_container_max_width) |
| | 264 | + prop = os_container_max_width; |
| | 265 | + else if(prop < 1) |
| | 266 | + prop = 1; |
| | 267 | + var newW = Math.round( normW * prop ); |
| | 268 | + if( w != newW ){ |
| | 269 | + w = newW; |
| | 270 | + if( os_animation_timer != null ) |
| | 271 | + clearInterval(os_animation_timer.id) |
| | 272 | + os_animation_timer = new os_AnimationTimer(r,w); |
| | 273 | + os_animation_timer.id = setInterval("os_animateChangeWidth()",os_animation_delay); |
| | 274 | + w -= fix; // this much is reserved |
| | 275 | + } |
| | 276 | + |
| | 277 | + // trim results |
| 226 | 278 | if(w < 10) |
| 227 | 279 | return; |
| 228 | 280 | for(var i=0;i<r.resultCount;i++){ |
| — | — | @@ -245,6 +297,25 @@ |
| 246 | 298 | } |
| 247 | 299 | } |
| 248 | 300 | |
| | 301 | +/** Invoked on timer to animate change in container width */ |
| | 302 | +function os_animateChangeWidth(){ |
| | 303 | + var r = os_animation_timer.r; |
| | 304 | + var c = document.getElementById(r.container); |
| | 305 | + var w = c.offsetWidth; |
| | 306 | + var inc = os_animation_timer.inc; |
| | 307 | + var target = os_animation_timer.target; |
| | 308 | + var nw = w + inc; |
| | 309 | + if( (inc > 0 && nw >= target) || (inc <= 0 && nw <= target) ){ |
| | 310 | + // finished ! |
| | 311 | + c.style.width = target+"px"; |
| | 312 | + clearInterval(os_animation_timer.id) |
| | 313 | + os_animation_timer = null; |
| | 314 | + } else{ |
| | 315 | + // in-progress |
| | 316 | + c.style.width = nw+"px"; |
| | 317 | + } |
| | 318 | +} |
| | 319 | + |
| 249 | 320 | /** Handles data from XMLHttpRequest, and updates the suggest results */ |
| 250 | 321 | function os_updateResults(r, query, text, cacheKey){ |
| 251 | 322 | os_cache[cacheKey] = text; |
| — | — | @@ -271,6 +342,7 @@ |
| 272 | 343 | var t = document.getElementById(r.resultTable); |
| 273 | 344 | r.containerTotal = t.offsetHeight; |
| 274 | 345 | r.containerRow = t.offsetHeight / r.resultCount; |
| | 346 | + os_fitContainer(r); |
| 275 | 347 | os_trimResultText(r); |
| 276 | 348 | os_showResults(r); |
| 277 | 349 | } catch(e){ |
| — | — | @@ -284,7 +356,7 @@ |
| 285 | 357 | /** Create the result table to be placed in the container div */ |
| 286 | 358 | function os_createResultTable(r, results){ |
| 287 | 359 | var c = document.getElementById(r.container); |
| 288 | | - var width = os_operaWidthFix(c.offsetWidth); |
| | 360 | + var width = c.offsetWidth - os_operaWidthFix(c.offsetWidth); |
| 289 | 361 | var html = "<table class=\"os-suggest-results\" id=\""+r.resultTable+"\" style=\"width: "+width+"px;\">"; |
| 290 | 362 | r.results = new Array(); |
| 291 | 363 | r.resultCount = results.length; |
| Index: trunk/phase3/RELEASE-NOTES |
| — | — | @@ -180,6 +180,7 @@ |
| 181 | 181 | tables, and have been disabled by default. |
| 182 | 182 | * (bug 15482) Special:Recentchangeslinked has no longer two submit buttons |
| 183 | 183 | * (bug 15292) New message notification for unregistred users now works again |
| | 184 | +* (bug 14398) mwsuggest.js: Let width of container be configurable |
| 184 | 185 | |
| 185 | 186 | |
| 186 | 187 | === API changes in 1.14 === |