r87301 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r87300‎ | r87301 | r87302 >
Date:21:34, 2 May 2011
Author:foxtrott
Status:deferred
Tags:
Comment:
fix bug 26756 (MenuSelect does not work in FloatEdit), fix bug 26709 (Menuselect broken in Google Chrome), streamlining menuselect
Modified paths:
  • /trunk/extensions/SemanticFormsInputs/COPYING (modified) (history)
  • /trunk/extensions/SemanticFormsInputs/SFI_Inputs.php (modified) (history)
  • /trunk/extensions/SemanticFormsInputs/libs/menuselect.js (modified) (history)
  • /trunk/extensions/SemanticFormsInputs/skins/SFI_Menuselect.css (modified) (history)

Diff [purge]

Index: trunk/extensions/SemanticFormsInputs/skins/SFI_Menuselect.css
——@@ -18,20 +18,14 @@
1919 .SFI_menuselect ul { /* all lists */
2020 margin: 0px;
2121 padding: 0px;
22 - /*margin: -20px;
23 - padding: 20px;*/
24 - list-style: none;
 22+ list-style: none none outside;
2523 position: absolute;
2624 display: inline;
2725 }
2826
2927 .SFI_menuselect ul ul { /* sub-item lists only */
30 - margin-left: 2px;
31 - margin-right: 2px;
32 - margin-top: -2px;
33 - /*margin-left: -18px;
34 - margin-right: -18px;
35 - margin-top: -22px;*/
 28+ margin-left: 3px;
 29+ margin-right: 3px;
3630 }
3731
3832
——@@ -39,21 +33,23 @@
4034 margin: 1px 0px;
4135 padding: 0px 0px;
4236 text-align: left;
43 - /*position: static;*/
44 - /*display:inline;*/
45 - /*min-width: 100px;*/
 37+ position: fixed;
 38+ list-style-image: none;
4639 }
4740
48 -.SFI_menuselect li>span { /* all entries */
49 - display:inline-block;
50 - width:100%;
 41+.SFI_menuselect table {
 42+ background: transparent;
 43+ border-collapse: collapse;
 44+ display: inline;
5145 }
5246
53 -.SFI_menuselect li>span>div.cont {
 47+.SFI_menuselect .cont {
5448 padding:0px 2px;
 49+ width: 100%;
 50+ vertical-align: baseline;
5551 }
5652
57 -.SFI_menuselect li>span>div.arrow {
58 - float:right;
 53+.SFI_menuselect .arrow {
 54+ padding: 0px;
5955 }
6056
Index: trunk/extensions/SemanticFormsInputs/COPYING
——@@ -1,9 +1,11 @@
2 -The license text below "----" applies to all files within this distribution, other
3 -than those that are in a directory which contains files named "LICENSE" or
4 -"COPYING", or a subdirectory thereof. For those files, the license text contained in
5 -said file overrides any license information contained in directories of smaller depth.
6 -Alternative licenses are typically used for software that is provided by external
7 -parties, and merely packaged with the Semantic Forms release for convenience.
 2+The license text below "----" applies to all files within this distribution,
 3+other than those that are in a directory which contains files named "LICENSE"
 4+or "COPYING", or a subdirectory thereof. For those files, the license text
 5+contained in said file overrides any license information contained in
 6+directories of smaller depth. Alternative licenses are typically used for
 7+software that is provided by external parties, and merely packaged with the
 8+Semantic Forms Inputs release for convenience.
 9+
810 ----
911
1012 GNU GENERAL PUBLIC LICENSE
Index: trunk/extensions/SemanticFormsInputs/SFI_Inputs.php
——@@ -1274,22 +1274,17 @@
12751275 $html .= "<span class='SFI_menuselect' id='span_{$sfgFieldNum}_tree'>";
12761276
12771277
1278 - // if ( array_key_exists( 'delimiter', $other_args ) ) $delimiter = $other_args[ 'delimiter' ];
1279 - // else $delimiter = ' ';
1280 -
12811278 // parse menu structure
12821279
1283 - $options = ParserOptions::newFromUser( $wgUser );
 1280+ $parser = new Parser();
12841281
1285 - $oldStripState = $wgParser->mStripState;
1286 - $wgParser->mStripState = new StripState();
1287 -
12881282 // FIXME: SF does not parse options correctly. Users have to replace | by {{!}}
12891283 $structure = str_replace( '{{!}}', '|', $other_args["structure"] );
 1284+ $options = ParserOptions::newFromUser( $wgUser );
12901285
1291 - $structure = $wgParser->parse( $structure, $wgTitle, $options )->getText();
 1286+ $structure = $parser->parse( $structure, $wgTitle, $options )->getText();
12921287
1293 - $wgParser->mStripState = $oldStripState;
 1288+// $wgParser->mStripState = $oldStripState;
12941289
12951290
12961291 $html .= str_replace( '<li', '<li class=\'ui-state-default\'', $structure );
Index: trunk/extensions/SemanticFormsInputs/libs/menuselect.js
——@@ -12,93 +12,90 @@
1313 */
1414 function SFI_MS_init( inputID, params ) {
1515
16 - jQuery('#' + inputID + "_show").one('focus', function(){
 16+ var inputShow = jQuery('#' + inputID + "_show");
 17+
 18+ inputShow.one('focus', function(){
 19+
1720 var treeid = "#" + inputID.replace(/input/,"span") + "_tree"
 21+ var tree = jQuery( treeid );
 22+ var treeRoot = tree.children( "ul" );
 23+ var treeAllLists = tree.find( "ul" );
1824
19 - jQuery(treeid).css("visibility","hidden");
 25+ // wrap content in table to separate content from sub-menus and to
 26+ // support animating the list item width later;
 27+ // ensure list items have constant width,
 28+ // TODO: prevent layout changes when list item width is changed
 29+ // set position static ( was set to fixed to calculate text width )
 30+ treeAllLists
 31+ .each( function() {
2032
21 - // wrap content in span to separate content from sub-menus,
22 - // wrap content in div to support animating the list item width later
23 - jQuery( treeid + " li" ).each(
24 - function() {
 33+ var maxwidth = 0;
 34+ var listitems = jQuery(this).children("li");
2535
26 - jQuery( this ).contents().not( "ul" )
27 - .wrapAll( '<span />' )
28 - .wrapAll( '<div class="cont"/>' );
 36+ listitems
 37+ .each( function() {
2938
30 - jQuery( this ).contents().not( "ul" )
31 - .find("div.cont")
32 - .css({
33 - position:'fixed',
34 - top: '0px',
35 - left: '0px'
36 - });
 39+ var item = jQuery( this );
 40+ var contents = item.contents().not( "ul" );
3741
 42+ contents
 43+ .wrapAll( '<table><tbody><tr><td class="cont"/>' );
 44+
3845 // insert the arrows indicating submenus
39 - if ( jQuery( this ).children( "ul" ).length > 0 ) {
40 - jQuery( this ).children( "span" ).children( "div" )
41 - .before( '<div class="arrow" ><img src="' + sfigScriptPath + '/images/MenuSelectArrow.gif" /></div>' )
 46+ if ( item.children( "ul" ).length > 0 ) {
 47+ contents.parent()
 48+ .after( '<td class="arrow" ><img src="' + sfigScriptPath + '/images/MenuSelectArrow.gif" /></td>' )
4249 }
4350
44 - } );
 51+ maxwidth = Math.max( item.outerWidth(false) + 10, maxwidth );
4552
46 - // ensure labels of list item have constant width regardless of width of list item
47 - // prevents layout changes when list item width is changed
48 - // set position static ( was set to fixed to calculate text width )
49 - jQuery( treeid + " li>span>div.cont" ).each( function() {
50 - jQuery( this ).width( jQuery( this ).outerWidth(true) + jQuery( this ).siblings("div.arrow").outerWidth(true) + 5);
51 - jQuery( this ).css( "position", "static" );
52 - } );
 53+ item.css('position', 'static');
5354
54 - // add class for default state and fix dimensions
55 - jQuery( treeid + " li" )
56 - .addClass( "ui-state-default" )
57 - .each(
58 - function() {
59 - jQuery(this).height(jQuery(this).height());
60 - jQuery(this).width(jQuery(this).width());
 55+ } )
6156
62 - // to be used for restoring width after mouse leves this item
63 - jQuery(this).data("width", jQuery(this).width());
64 - }
65 - );
 57+ if ( jQuery.browser.msie && document.documentMode <= "7" ) {
 58+ maxwidth = 100;
 59+ jQuery( this )
 60+ .width( window.screen.width )
 61+ .height( window.screen.height );
 62+ } else if ( jQuery.browser.webkit || jQuery.browser.safari ) {
 63+ maxwidth = 100;
 64+ };
6665
67 - // initially hide everything
68 - jQuery( treeid + " ul" )
69 - .css({"z-index":1})
70 - .hide()
71 - .fadeTo(0, 0 );
7266
73 - // some crap "browsers" need special treatment
74 - if ( jQuery.browser.msie ) {
75 - jQuery( treeid + " ul" ).css({ "position":"relative" });
76 - }
 67+ listitems
 68+ .width( maxwidth )
 69+ .data( "width", maxwidth );
 70+ })
 71+ .fadeTo( 0, 0 );
7772
 73+
7874 // sanitize links
79 - jQuery( treeid ).find( "a" )
 75+ tree.find( "a" )
8076 .each(
8177 function() {
8278
 79+ var link = jQuery( this );
 80+
8381 // find title of target page
84 - if ( jQuery( this ).hasClass( 'new' ) ) { // for red links get it from the href
 82+ if ( link.hasClass( 'new' ) ) { // for red links get it from the href
8583
8684 regexp = /.*title=([^&]*).*/;
87 - res = regexp.exec( jQuery( this ).attr( 'href' ) );
 85+ res = regexp.exec( link.attr( 'href' ) );
8886
8987 title = unescape( res[1] );
9088
91 - jQuery( this ).data( 'title', title ); // save title in data
 89+ link.data( 'title', title ); // save title in data
9290
9391 } else { // for normal links title is in the links title attribute
94 - jQuery( this )
95 - .data( 'title', jQuery( this ).attr( 'title' ) ); // save title in data
 92+ link.data( 'title', link.attr( 'title' ) ); // save title in data
9693 }
9794
98 - jQuery( this )
 95+ link
9996 .removeAttr( 'title' ) // remove title to prevent tooltips on links
10097 .bind( "click", function( event ) {
10198 event.preventDefault();
102 - } ) // prevent following links
 99+ } ); // prevent following links
103100
104101 }
105102 );
——@@ -106,131 +103,127 @@
107104 // attach event handlers
108105
109106 // mouse entered list item
110 - jQuery( treeid + " li" )
 107+ tree.find( "li" )
111108 .mouseenter( function( evt ) {
112109
 110+ var target = jQuery( evt.currentTarget );
 111+
113112 // switch classes to change display style
114 - jQuery( evt.currentTarget )
 113+ target
115114 .removeClass( "ui-state-default" )
116115 .addClass( "ui-state-hover" );
117116
118 - // if we reentered (i.e. moved mouse from item to sub-item)
119 - if (jQuery( evt.currentTarget ).data( "timeout" ) != null) {
 117+ // if list item has sub-items...
 118+ if ( target.children( "ul" ).length > 0 ) {
120119
121 - // clear any timeout that may still run on the list item
122 - // (i.e. do not fade out submenu)
123 - clearTimeout( jQuery( evt.currentTarget ).data( "timeout" ) );
124 - jQuery( evt.currentTarget ).data( "timeout", null );
 120+ // if we reentered (i.e. moved mouse from item to sub-item)
 121+ if ( target.data( "timeout" ) != null) {
125122
126 - // abort further actions (just leave the submenu open)
127 - return;
128 - }
 123+ // clear any timeout that may still run on the list item
 124+ // (i.e. do not fade out submenu)
 125+ clearTimeout( target.data( "timeout" ) );
 126+ target.data( "timeout", null );
129127
 128+ } else {
130129
131 - // if list item has sub-items...
132 - if ( jQuery( evt.currentTarget ).children( "ul" ).length > 0 ) {
 130+ // set timeout to show sub-items
 131+ target
 132+ .data( "timeout", setTimeout(
 133+ function() {
133134
134 - // set timeout to show sub-items
135 - jQuery( evt.currentTarget )
136 - .data( "timeout", setTimeout(
137 - function() {
 135+ var pos = target.position();
138136
139 - // clear timeout data
140 - jQuery( evt.currentTarget ).data( "timeout", null );
 137+ // clear timeout data
 138+ target
 139+ .data( "timeout", null )
141140
142 - // some crap "browsers" need special treatment
143 - if ( jQuery.browser.msie ) {
144 - jQuery( evt.currentTarget ).children( "ul" )
 141+ // animate list item width
 142+ .animate( {"width": target.width() + 10}, 100, function(){
 143+
 144+ // fade in sub-menu
 145+ // can not use fadeIn, it sets display:block
 146+ target.children( "ul" )
145147 .css( {
146 - "top": -jQuery( evt.currentTarget ).outerHeight(),
147 - "left": jQuery( evt.currentTarget ).outerWidth() + 10
 148+ "display":"inline",
 149+ "z-index":100,
 150+ "top" : pos.top,
 151+ "left" : pos.left + target.width()
 152+ } )
 153+ .fadeTo( 400, 100 );
148154 } );
149 - }
150 -
151 - // fade in sub-menu
152 - // can not use fadeIn, it sets display:block
153 - jQuery( evt.currentTarget ).children( "ul" )
154 - .css( {
155 - "display":"inline",
156 - "z-index":100
157 - } )
158 - .fadeTo( 400, 1 );
159 -
160 - w = jQuery( evt.currentTarget ).width();
161 -
162 - // animate list item width
163 - jQuery( evt.currentTarget )
164 - .animate( { "width": w + 10 }, 100 );
165 -
166 - }, 400 )
167 - );
 155+ }, 400 )
 156+ );
 157+ }
168158 }
169159
170 - } );
 160+ } )
171161
172162 // mouse left list item
173 - jQuery( treeid + " li" )
174163 .mouseleave( function( evt ) {
175164
 165+ var target = jQuery( evt.currentTarget );
 166+
176167 // switch classes to change display style
177 - jQuery( evt.currentTarget )
 168+ target
178169 .removeClass( "ui-state-hover" )
179170 .addClass( "ui-state-default" )
180171
181 - // if we just moved in and out of the item (without really hovering)
182 - if (jQuery( evt.currentTarget ).data( "timeout" ) != null) {
 172+ // if list item has sub-items...
 173+ if ( target.children( "ul" ).length > 0 ) {
183174
184 - // clear any timeout that may still run on the list item
185 - // (i.e. do not fade in submenu)
186 - clearTimeout( jQuery( evt.currentTarget ).data( "timeout" ) );
187 - jQuery( evt.currentTarget ).data( "timeout", null );
 175+ // if we just moved in and out of the item (without really hovering)
 176+ if ( target.data( "timeout" ) != null ) {
188177
189 - // abort further actions (no need to close)
190 - return;
191 - }
 178+ // clear any timeout that may still run on the list item
 179+ // (i.e. do not fade in submenu)
 180+ clearTimeout( target.data( "timeout" ) );
 181+ target.data( "timeout", null );
192182
193 - // if list item has sub-items...
194 - if ( jQuery( evt.currentTarget ).children( "ul" ).length > 0 ) {
 183+ } else {
195184
196 - // hide sub-items after a short pause
197 - jQuery( evt.currentTarget ).data( "timeout", setTimeout(
198 - function() {
 185+ // hide sub-items after a short pause
 186+ target.data( "timeout", setTimeout(
 187+ function() {
199188
200 - // clear timeout data
201 - jQuery( evt.currentTarget ).data( "timeout", null );
 189+ // clear timeout data
 190+ target.data( "timeout", null )
202191
203 - // fade out sub-menu
204 - // when finished set display:none and put list item back in
205 - // line ( i.e. animate to original width )
206 - jQuery( evt.currentTarget ).children( "ul" )
207 - .css( "z-index", 1 )
208 - .fadeTo( 400, 0,
209 - function() {
 192+ // fade out sub-menu
 193+ // when finished set display:none and put list item back in
 194+ // line ( i.e. animate to original width )
 195+ .children( "ul" )
 196+ .css( "z-index", 1 )
 197+ .fadeTo( 400, 0,
 198+ function() {
210199
211 - jQuery( this ).css( "display", "none" );
 200+ jQuery( this )
 201+ .css( "display", "none" )
212202
213 - // animate list item width
214 - jQuery( this ).parent()
215 - .animate( { "width": jQuery( this ).parent().data( "width" ) }, 100 );
216 - }
217 - );
 203+ // animate list item width
 204+ .parent()
 205+ .animate( {"width": jQuery( this ).parent().data( "width" )}, 100 );
 206+ }
 207+ );
218208
219 - }, 400 )
220 - );
 209+ }, 400 )
 210+ );
 211+ }
221212 }
222213
223 - } );
 214+ } )
224215
225216 // clicked list item
226 - jQuery( treeid + " li" )
227217 .mousedown( function() {
228218
 219+ var content = jQuery( this ).children( "table" ).find( ".cont" );
 220+
229221 // set visible value and leave input
230 - jQuery( "#" + inputID + "_show" ).attr( "value", jQuery( this )
231 - .children( "span" ).find( "div.cont" ).text() ).blur();
 222+ inputShow
 223+ .attr( "value", content.text() )
 224+ .blur();
232225
233226 // set hidden value that gets sent back to the server
234 - link = jQuery( this ).children( "span" ).find( "div.cont>a" );
 227+ var link = content.children( "a" );
235228
236229 // if content is link
237230 if ( link.length == 1 ) {
——@@ -241,7 +234,7 @@
242235 } else {
243236
244237 // just use text of list item
245 - jQuery( "#" + inputID ).attr( "value", jQuery( this ).children( "span" ).find( "div.cont" ).text() );
 238+ jQuery( "#" + inputID ).attr( "value", content.text() );
246239
247240 }
248241 return false;
——@@ -249,23 +242,30 @@
250243 } );
251244
252245 // show top menu when input gets focus
253 - jQuery( "#" + inputID + "_show" )
 246+ inputShow
254247 .focus( function() {
255 - jQuery( treeid + ">ul" ).css( "display", "inline" ).fadeTo( 400, 1 );
256 - } );
 248+ treeRoot
 249+ .css( "display", "inline" )
 250+ .fadeTo( 400, 1 );
 251+ } )
257252
258253 // hide all menus when input loses focus
259 - jQuery( "#" + inputID + "_show" )
260254 .blur( function() {
261255
262 - jQuery( treeid + " ul" ).fadeTo( 400, 0,
 256+ treeAllLists
 257+ .fadeTo( 400, 0,
263258 function() {
264 - jQuery( this ).css( "display", "none" );
 259+ jQuery( this )
 260+ .css( "display", "none" );
265261 } );
266262 } );
267263
268 - jQuery( treeid ).css("visibility","visible");
269 - jQuery( treeid + ">ul" ).css( "display", "inline" ).fadeTo( 400, 1 );
 264+ tree
 265+ .css("visibility","visible");
270266
 267+ treeRoot
 268+ .css( "display", "inline" )
 269+ .fadeTo( 400, 1 );
 270+
271271 });
272272 }
\ No newline at end of file