r79493 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r79492‎ | r79493 | r79494 >
Date:15:16, 2 January 2011
Author:foxtrott
Status:deferred
Tags:
Comment:
registration of initialisation/validation methods for datepicker and regexp

* Initialisation for datepicker put into its own JS file and registered with SF
* Validation for regexp registered with SF
Modified paths:
  • /trunk/extensions/SemanticFormsInputs/SFI_Inputs.php (modified) (history)
  • /trunk/extensions/SemanticFormsInputs/libs/datepicker.js (modified) (history)
  • /trunk/extensions/SemanticFormsInputs/libs/regexp.js (modified) (history)

Diff [purge]

Index: trunk/extensions/SemanticFormsInputs/SFI_Inputs.php
@@ -195,28 +195,13 @@
196196 $message = Xml::encodeJsVar( $message );
197197 $regexp = Xml::encodeJsVar( $regexp );
198198
199 -
200 - // register this input for validation
201 - // $sfgJSValidationCalls are sanitized for HTML by SF before output, no htmlspecialchars() here
202 - if ( array_key_exists( 'part_of_multiple', $other_args ) && $other_args['part_of_multiple'] == 1 ) {
203 - $jstext = "validate_input_with_regexp($sfgFieldNum, {$regexp}, {$inverseString}, {$message}, true)";
204 - } else {
205 - $jstext = "validate_input_with_regexp($sfgFieldNum, {$regexp}, {$inverseString}, {$message}, false)";
206 - }
207 -
208 - // register event to validate regexp on submit
209 - // TODO: Improve so regexp is also validated on preview
 199+ // register event to validate regexp on submit/preview
210200 $jstext = <<<JAVASCRIPT
211 -
212 - jQuery(function($){
213 - $('#sfForm').submit( function() {
214 - return $jstext;
215 - } );
216 - });
217 -
 201+jQuery(function(){
 202+ jQuery('#input_$sfgFieldNum').registerValidation( SFI_RE_validate, {retext: {$regexp}, inverse: {$inverseString}, message: {$message} });
 203+});
218204 JAVASCRIPT;
219205
220 - //$wgOut->addScript( '<script type="text/javascript">' . $jstext . '</script>' );
221206 $wgOut->addInlineScript( $jstext );
222207
223208 // create other_args for base input type
@@ -265,8 +250,8 @@
266251
267252 // set localized messages (use MW i18n, not jQuery i18n)
268253 $jstext =
269 - "jQuery(function($){\n"
270 - . " $.datepicker.regional['wiki'] = {\n"
 254+ "jQuery(function(){\n"
 255+ . " jQuery.datepicker.regional['wiki'] = {\n"
271256 . " closeText: '" . wfMsg( 'semanticformsinputs-close' ) . "',\n"
272257 . " prevText: '" . wfMsg( 'semanticformsinputs-prev' ) . "',\n"
273258 . " nextText: '" . wfMsg( 'semanticformsinputs-next' ) . "',\n"
@@ -327,7 +312,7 @@
328313 . " isRTL: " . ( $wgLang->isRTL() ? "true":"false" ) . ",\n"
329314 . " showMonthAfterYear: false,\n"
330315 . " yearSuffix: ''};\n"
331 - . " $.datepicker.setDefaults($.datepicker.regional['wiki']);\n"
 316+ . " jQuery.datepicker.setDefaults(jQuery.datepicker.regional['wiki']);\n"
332317 . "});\n";
333318
334319
@@ -657,16 +642,8 @@
658643
659644 // set datepicker widget attributes
660645 $jsattribs = array(
661 - 'showOn' => 'both',
 646+ 'currValue' => $cur_value,
662647 'buttonImage' => $sfigSettings->scriptPath . '/images/DatePickerButton.gif',
663 - 'buttonImageOnly' => false,
664 - 'changeMonth' => true,
665 - 'changeYear' => true,
666 - 'altFormat' => "yy/mm/dd",
667 - // Today button does not work (http://dev.jqueryui.com/ticket/4045)
668 - // do not show button panel for now
669 - // TODO: show date picker button panel when bug is fixed
670 - 'showButtonPanel' => false
671648 );
672649
673650 // set first day of the week
@@ -683,7 +660,8 @@
684661 || ( !array_key_exists( 'hide week numbers', $other_args ) && $sfigSettings->datePickerShowWeekNumbers ) ) {
685662
686663 $jsattribs['showWeek'] = true;
687 -
 664+ } else {
 665+ $jsattribs['showWeek'] = false;
688666 }
689667
690668 // set date format
@@ -837,45 +815,20 @@
838816 // build JS code from attributes array
839817 $jsattribsString = Xml::encodeJsVar( $jsattribs );
840818
841 - // assemble JS code to attach datepicker to input field
842 - $jstext = <<<JAVASCRIPT
843 - jQuery("#" + inputId + "_show").datepicker( $jsattribsString );
844 - jQuery("#" + inputId + "_show").datepicker( "option", "altField", "#" + inputId);
845 -JAVASCRIPT;
846 -
847 - // append setting of first date
 819+ // store min date as JS attrib
848820 if ( $minDate ) {
849 -
850 - $minDateString = $minDate->format( 'Y-m-d' );
851 - $jstext .= <<<JAVASCRIPT
852 - jQuery("#" + inputId + "_show").datepicker( "option", "minDate", jQuery.datepicker.parseDate("yy/mm/dd", "$minDateString", null) );
853 -
854 -JAVASCRIPT;
 821+ $jsattribs['minDate'] = $minDate->format( 'Y/m/d' );
855822 }
856823
857 - // append setting of last date
 824+ // store max date as JS attrib
858825 if ( $maxDate ) {
859 -
860 - $maxDateString = $maxDate->format( 'Y-m-d' );
861 -
862 - $jstext .= <<<JAVASCRIPT
863 - jQuery("#" + inputId + "_show").datepicker( "option", "maxDate", jQuery.datepicker.parseDate("yy/mm/dd", "$maxDateString", null) );
864 -
865 -JAVASCRIPT;
 826+ $jsattribs['maxDate'] = $maxDate->format( 'Y/m/d' );
866827 }
867828
868829
869830 // add user-defined class(es) to all datepicker components
870831 if ( array_key_exists( 'class', $other_args ) ) {
871 -
872 - // sanitize names of user-defined classes
873 - $userClasses = Xml::encodeJsVar ( $userClasses );
874 -
875 - $jstext .= <<<JAVASCRIPT
876 - jQuery("#" + inputId + "_show").datepicker("widget").addClass({$userClasses});
877 - jQuery("#" + inputId + "_show + button").addClass({$userClasses});
878 -
879 -JAVASCRIPT;
 832+ $jsattribs['userClass'] = $userClasses;
880833 }
881834
882835 // attach event handler to handle disabled and highlighted dates
@@ -885,7 +838,7 @@
886839 if ( count( $disabledDates ) ) {
887840
888841 // convert the PHP array of date ranges into a JS array definition
889 - $disabledDatesString = '[' . implode( ',', array_map( create_function ( '$range', '
 842+ $jsattribs["disabledDates"] = array_map( create_function ( '$range', '
890843
891844 $y0 = $range[0]->format( "Y" );
892845 $m0 = $range[0]->format( "m" ) - 1;
@@ -895,19 +848,15 @@
896849 $m1 = $range[1]->format( "m" ) - 1;
897850 $d1 = $range[1]->format( "d" );
898851
899 - return "[new Date({$y0}, {$m0}, {$d0}), new Date({$y1}, {$m1}, {$d1})]";
900 - ' ) , $disabledDates ) ) . ']';
901 -
902 - // register array of disabled dates with datepicker
903 - $jstext .= " jQuery(\"#\" + inputId + \"_show\").datepicker(\"option\", \"disabledDates\", $disabledDatesString);\n";
904 -
 852+ return array($y0, $m0, $d0, $y1, $m1, $d1);
 853+ ' ) , $disabledDates );
905854 }
906855
907856 // then register highlighted dates with datepicker
908857 if ( count( $highlightedDates ) > 0 ) {
909858
910859 // convert the PHP array of date ranges into a JS array definition
911 - $highlightedDatesString = '[' . implode( ',', array_map( create_function ( '$range', '
 860+ $jsattribs["highlightedDates"] = array_map( create_function ( '$range', '
912861
913862 $y0 = $range[0]->format( "Y" );
914863 $m0 = $range[0]->format( "m" ) - 1;
@@ -917,53 +866,27 @@
918867 $m1 = $range[1]->format( "m" ) - 1;
919868 $d1 = $range[1]->format( "d" );
920869
921 - return "[new Date({$y0}, {$m0}, {$d0}), new Date({$y1}, {$m1}, {$d1})]";
922 - ' ) , $highlightedDates ) ) . ']';
923 -
924 - // register array of highlighted dates with datepicker
925 - $jstext .= " jQuery(\"#\" + inputId + \"_show\").datepicker(\"option\", \"highlightedDates\", $highlightedDatesString);\n";
926 -
 870+ return array($y0, $m0, $d0, $y1, $m1, $d1);
 871+ ' ) , $highlightedDates );
927872 }
928873
929874 // register disabled days of week with datepicker
930875 if ( count( $disabledDays ) ) {
931 - $disabledDaysString = Xml::encodeJsVar( $disabledDays );
932 - $jstext .= " jQuery(\"#\" + inputId + \"_show\").datepicker(\"option\", \"disabledDays\", $disabledDaysString);\n";
 876+ $jsattribs["disabledDays"] = $disabledDays;
933877 }
934878
935879 // register highlighted days of week with datepicker
936880 if ( count( $highlightedDays ) ) {
937 - $highlightedDaysString = Xml::encodeJsVar( $highlightedDays );
938 - $jstext .= " jQuery(\"#\" + inputId + \"_show\").datepicker(\"option\", \"highlightedDays\", $highlightedDaysString);\n";
 881+ $jsattribs["highlightedDays"] = $highlightedDays;
939882 }
940 -
941 - // attach the event handler to the datepicker's beforeShowDay event
942 - // the actual handler function is loaded separately and uses the
943 - // data atached to the datepicker above
944 - $jstext .= <<<JAVASCRIPT
945 -
946 - jQuery("#" + inputId + "_show").datepicker("option", "beforeShowDay", function (date) {return SFI_DP_checkDate(this, date);});
947 -
948 -JAVASCRIPT;
949883 }
950884
951 - // set value of datepicker and wrap the JS code fragment in a
952 - // function which can be called by SF for deferred init
953 - $jstext = <<<JAVASCRIPT
954 - function initInput$sfgFieldNum(inputId) {
955 -$jstext
956 - try {
957 - re = /\d{4}\/\d{2}\/\d{2}/
958 - if ( ! re.test("$cur_value") ) {throw "Wrong date format!";}
959 - jQuery("#" + inputId + "_show").datepicker( "setDate", jQuery.datepicker.parseDate("yy/mm/dd", "$cur_value", null) );
960 - } catch (e) {
961 - jQuery("#" + inputId + "_show").attr("value", "$cur_value");
962 - jQuery("#" + inputId).attr("value", "$cur_value");
963 - }
 885+ // build JS code from attributes array
 886+ $jsattribsString = Xml::encodeJsVar( $jsattribs );
964887
965 - }
966 -
967 - addOnloadHook(function(){initInput$sfgFieldNum("input_$sfgFieldNum");});
 888+ // wrap the JS code fragment in a function for deferred init
 889+ $jstext = <<<JAVASCRIPT
 890+jQuery(function(){ jQuery('#input_$sfgFieldNum').registerInitialisation(SFI_DP_init, $jsattribsString ); });
968891 JAVASCRIPT;
969892
970893
@@ -972,8 +895,7 @@
973896 // add span for error messages (e.g. used for mandatory inputs)
974897 $html .= Xml::element( "span", array( "id" => "info_$sfgFieldNum", "class" => "errorMessage" ) );
975898
976 - // directly insert the code of the JS init function into the pages code
977 - // there seemed to be issues when this code was piped through SF
 899+ // insert the code of the JS init function into the pages code
978900 $wgOut->addScript( '<script type="text/javascript">' . $jstext . '</script>' );
979901
980902 return array( $html, "", "initInput$sfgFieldNum" );
@@ -1214,7 +1136,6 @@
12151137 $wgOut->addScript( '<script type="text/javascript">' . $jstext . '</script>' );
12161138
12171139 // return HTML and name of JS init function
1218 - //return array( $html, "", "initInput$sfgFieldNum" );
12191140 return $html;
12201141
12211142 } else {
@@ -1276,13 +1197,13 @@
12771198 'name' => $input_name,
12781199 'value' => $cur_value
12791200 ) );
1280 -
1281 -
 1201+
 1202+
12821203 $html .= "<span class='SFI_menuselect' id='input_{$sfgFieldNum}_tree'>";
12831204
12841205
1285 - //if ( array_key_exists( 'delimiter', $other_args ) ) $delimiter = $other_args[ 'delimiter' ];
1286 - //else $delimiter = ' ';
 1206+ // if ( array_key_exists( 'delimiter', $other_args ) ) $delimiter = $other_args[ 'delimiter' ];
 1207+ // else $delimiter = ' ';
12871208
12881209 // parse menu structure
12891210
@@ -1291,15 +1212,15 @@
12921213 $oldStripState = $wgParser->mStripState;
12931214 $wgParser->mStripState = new StripState();
12941215
1295 - //FIXME: SF does not parse options correctly. Users have to replace | by {{!}}
1296 - $structure = str_replace('{{!}}','|',$other_args["structure"]);
 1216+ // FIXME: SF does not parse options correctly. Users have to replace | by {{!}}
 1217+ $structure = str_replace( '{{!}}', '|', $other_args["structure"] );
12971218
1298 - $structure = $wgParser->parse($structure, $wgTitle, $options )->getText();
 1219+ $structure = $wgParser->parse( $structure, $wgTitle, $options )->getText();
12991220
13001221 $wgParser->mStripState = $oldStripState;
13011222
13021223
1303 - $html .= str_replace('<li', '<li class=\'ui-state-default\'', $structure);
 1224+ $html .= str_replace( '<li', '<li class=\'ui-state-default\'', $structure );
13041225
13051226 $html .= "</span>";
13061227
Index: trunk/extensions/SemanticFormsInputs/libs/regexp.js
@@ -9,48 +9,23 @@
1010 /**
1111 * Validates inputs of type regexp.
1212 *
13 - * @param input_number (Number) the number of the input to check
14 - * @param retext (String) the regular expression the input's value has to match
15 - * @param inverse (Boolean) if the check result shall be inverted
16 - * @param message (String) the message too be printed if the input's value does not match
17 - * @param multiple (Boolean) if the input is inside a multiple-instance formular
 13+ * @param input_id (String) the id string of the input to check
 14+ * @param params (Object) the parameter object for the check, contains
 15+ * retext: (String) regular expression the input's value has to match
 16+ * inverse: (Boolean) if the check result shall be inverted
 17+ * message: (String) the message too be printed if the input's value does not match
1818 * @return (Boolean) true, if the input's value matches the regular expression in
1919 * retext, false otherwise; the value is inverted if inverse is true
2020 */
21 -function validate_input_with_regexp( input_number, retext, inverse, message, multiple ){
 21+function SFI_RE_validate ( input_id, params ) { //input_number, retext, inverse, message, multiple
2222
23 - var decoded = jQuery( "<div/>" ).html( retext ).text();
24 - var re = new RegExp( decoded );
 23+ var re = new RegExp( jQuery( "<div/>" ).html( params.retext ).text() );
 24+ var match = re.test( jQuery('#' + input_id).attr("value") );
2525
26 - if ( multiple ) {
27 - res = true;
28 - for ( i = 1; i <= num_elements; i++ ) {
29 - field = document.getElementById( 'input_' + i + "_" + input_number );
30 - if ( field ) {
31 - match = re.test( field.value );
32 -
33 - if ( !( match && !inverse ) && !( !match && inverse ) ) {
34 - infobox = document.getElementById( 'info_' + i + "_" + input_number );
35 - infobox.innerHTML += " " + message;
36 - res=false;
37 - }
38 - }
39 - }
40 - return res;
 26+ if ( ( match && ! params.inverse ) || ( ! match && params.inverse ) ) {
 27+ return true;
4128 } else {
42 - field = document.getElementById( 'input_' + input_number );
43 -
44 - jQuery( '#input_' + input_number ).parent().children( '.sfiErrorMessage' ).remove();
45 -
46 - match = re.test( field.value );
47 -
48 - if ( ( match && !inverse ) || ( !match && inverse ) ) {
49 - return true;
50 - } else {
51 - jQuery(field).after( '<span class="sfiErrorMessage"> ' + message + '</span>');
52 - //infobox = document.getElementById( 'info_' + input_number );
53 - //infobox.innerHTML += " " + message;
54 - return false;
55 - }
 29+ jQuery( '#' + input_id ).parent().addErrorMessage(params.message);
 30+ return false;
5631 }
5732 }
Index: trunk/extensions/SemanticFormsInputs/libs/datepicker.js
@@ -6,6 +6,86 @@
77 *
88 */
99
 10+function SFI_DP_init ( input_id, params ) {
 11+
 12+ var input = jQuery("#" + input_id + "_show");
 13+
 14+ input.datepicker( {
 15+ "showOn": "both",
 16+ "buttonImage": params.buttonImage,
 17+ "buttonImageOnly": false,
 18+ "changeMonth": true,
 19+ "changeYear": true,
 20+ "altFormat": "yy/mm/dd",
 21+ // Today button does not work (http://dev.jqueryui.com/ticket/4045)
 22+ // do not show button panel for now
 23+ // TODO: show date picker button panel when bug is fixed
 24+ "showButtonPanel": false,
 25+ "firstDay": params.firstDay,
 26+ "showWeek": params.showWeek,
 27+ "dateFormat": params.dateFormat,
 28+ "altField": "#" + input_id,
 29+ "beforeShowDay": function (date) {return SFI_DP_checkDate("#" + input_id + "_show", date);}
 30+ } );
 31+
 32+ if ( params.minDate ) {
 33+ input.datepicker( "option", "minDate",
 34+ jQuery.datepicker.parseDate("yy/mm/dd", params.minDate, null) );
 35+ }
 36+
 37+ if ( params.maxDate ) {
 38+ input.datepicker( "option", "maxDate",
 39+ jQuery.datepicker.parseDate("yy/mm/dd", params.maxDate, null) );
 40+ }
 41+
 42+ if ( params.userClass ) {
 43+ input.datepicker("widget").addClass( params.userClass );
 44+ jQuery("#" + input_id + "_show + button").addClass( params.userClass );
 45+ }
 46+
 47+ if ( params.disabledDates ) {
 48+
 49+ var disabledDates = params.disabledDates.map(function(range) {
 50+ return [new Date(range[0], range[1], range[2]), new Date(range[3], range[4], range[5])]
 51+ });
 52+
 53+ input.datepicker("option", "disabledDates", disabledDates);
 54+ }
 55+
 56+ if ( params.highlightedDates ) {
 57+
 58+ var highlightedDates = params.highlightedDates.map(function(range) {
 59+ return [new Date(range[0], range[1], range[2]), new Date(range[3], range[4], range[5])]
 60+ });
 61+
 62+ input.datepicker("option", "highlightedDates", highlightedDates);
 63+ }
 64+
 65+ if (params.disabledDays) {
 66+ input.datepicker("option", "disabledDays", params.disabledDays);
 67+ }
 68+
 69+ if (params.highlightedDays) {
 70+ input.datepicker("option", "highlightedDays", params.highlightedDays);
 71+ }
 72+
 73+ //input.datepicker("option", "beforeShowDay", function (date) {return SFI_DP_checkDate("#" + input_id + "_show", date);});
 74+
 75+ try {
 76+
 77+ var re = /\d{4}\/\d{2}\/\d{2}/
 78+ if ( ! re.test( params.currValue ) ) {
 79+ throw "Wrong date format!";
 80+ }
 81+ input.datepicker( "setDate", jQuery.datepicker.parseDate( "yy/mm/dd", params.currValue, null ) );
 82+
 83+ } catch (e) {
 84+ input.attr( "value", params.currValue );
 85+ jQuery( "#" + input_id).attr( "value", params.currValue );
 86+ }
 87+
 88+}
 89+
1090 /**
1191 * Checks a date if it is to be enabled or highlighted
1292 *
@@ -18,9 +98,9 @@
1999 */
20100 function SFI_DP_checkDate( input, date ) {
21101
22 - enable = true
 102+ var enable = true
23103
24 - disabledDates = jQuery( input ).datepicker( "option", "disabledDates" );
 104+ var disabledDates = jQuery( input ).datepicker( "option", "disabledDates" );
25105
26106 if ( disabledDates ) {
27107 for ( i = 0; i < disabledDates.length; ++i ) {
@@ -31,17 +111,17 @@
32112 }
33113 }
34114
35 - disabledDays = jQuery( input ).datepicker( "option", "disabledDays" );
 115+ var disabledDays = jQuery( input ).datepicker( "option", "disabledDays" );
36116
37117 if ( disabledDays ) {
38118 enable = enable && !disabledDays[ date.getDay() ];
39119 }
40120
41 - highlightedDates = jQuery( input ).datepicker( "option", "highlightedDates" );
42 - highlight = "";
 121+ var highlightedDates = jQuery( input ).datepicker( "option", "highlightedDates" );
 122+ var highlight = "";
43123
44124 if ( highlightedDates ) {
45 - for ( i = 0; i < highlightedDates.length; ++i ) {
 125+ for ( var i = 0; i < highlightedDates.length; ++i ) {
46126 if ( ( date >= highlightedDates[i][0] ) && ( date <= highlightedDates[i][1] ) ) {
47127 highlight = "ui-state-highlight";
48128 break;
@@ -49,7 +129,7 @@
50130 }
51131 }
52132
53 - highlightedDays = jQuery( input ).datepicker( "option", "highlightedDays" );
 133+ var highlightedDays = jQuery( input ).datepicker( "option", "highlightedDays" );
54134
55135 if ( highlightedDays ) {
56136 if ( highlightedDays[ date.getDay() ] ) {

Status & tagging log