Yaron Koren has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/376452 )
Change subject: date input for spreadsheet display - based on a patch by
Balabky9
......................................................................
date input for spreadsheet display - based on a patch by Balabky9
Also made some unrelated small fixes to PF_jsGrid.js.
Change-Id: I04319040853e5037342407efc81f40c4c5fddf69
---
M includes/PF_FormPrinter.php
M includes/PF_Hooks.php
M libs/PF_jsGrid.js
3 files changed, 146 insertions(+), 11 deletions(-)
Approvals:
Yaron Koren: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/PF_FormPrinter.php b/includes/PF_FormPrinter.php
index cd29a1e..7b4db18 100644
--- a/includes/PF_FormPrinter.php
+++ b/includes/PF_FormPrinter.php
@@ -466,6 +466,8 @@
$gridParamValues['type'] = 'textarea';
} elseif ( $inputType == 'checkbox' ) {
$gridParamValues['type'] = 'checkbox';
+ } elseif ( $inputType == 'date' ) {
+ $gridParamValues['type'] = 'date';
} elseif ( ( $possibleValues =
$formField->getPossibleValues() ) != null ) {
array_unshift( $possibleValues, '' );
$completePossibleValues = array();
diff --git a/includes/PF_Hooks.php b/includes/PF_Hooks.php
index b4d6ce2..67e6c17 100644
--- a/includes/PF_Hooks.php
+++ b/includes/PF_Hooks.php
@@ -157,6 +157,7 @@
global $wgPageFormsGridValues, $wgPageFormsGridParams;
global $wgPageFormsShowOnSelect, $wgPageFormsScriptPath;
global $edgValues, $wgPageFormsEDSettings;
+ global $wgAmericanDates;
//global $wgPageFormsInitJSFunctions,
$wgPageFormsValidationJSFunctions;
$vars['wgPageFormsAutocompleteValues'] =
$wgPageFormsAutocompleteValues;
@@ -170,6 +171,7 @@
$vars['wgPageFormsScriptPath'] = $wgPageFormsScriptPath;
$vars['edgValues'] = $edgValues;
$vars['wgPageFormsEDSettings'] = $wgPageFormsEDSettings;
+ $vars['wgAmericanDates'] = $wgAmericanDates;
//$vars['wgPageFormsInitJSFunctions'] =
$wgPageFormsInitJSFunctions;
//$vars['wgPageFormsValidationJSFunctions'] =
$wgPageFormsValidationJSFunctions;
diff --git a/libs/PF_jsGrid.js b/libs/PF_jsGrid.js
index 5ce6757..0d4b43c 100644
--- a/libs/PF_jsGrid.js
+++ b/libs/PF_jsGrid.js
@@ -2,21 +2,150 @@
* Code to integrate the pfGrid JavaScript library into Page Forms.
*
* @author Yaron Koren
+ * @author Balabky9
*/
-/* global wgPageFormsGridParams, wgPageFormsGridValues */
+/* global jsGrid, mw */
+(function(jsGrid, $, undefined) {
+ /**
+ * The following code handles the 'date' input type within the
grid.
+ * insertTemplate preprocesses the value and returns it to the
grid cell to display;
+ * editTemplate/insertTemplate generate the edition/insertion
forms;
+ * editValue/insertValue is in charge of putting the final
values into the grid.
+ */
+
+ // Global variables to store edit and insert values to be used
+ // by the editValue and insertValue functions to put them into
+ // the date field.
+ var Global_Edit_day_of_month;
+ var Global_Edit_month;
+ var Global_Edit_year;
+ var Global_Insert_day_of_month;
+ var Global_Insert_month;
+ var Global_Insert_year;
+
+ // Create month selector dropdown.
+ function buildSelect( currentMonth ) {
+ var monthNames = mw.config.get('wgMonthNamesShort');
+ var str = '<select class="pf_jsGrid_month" style="
width: 100% !important; font-size:14px;">';
+ for (var val=1; val<=12; val++) {
+ var val2;
+ if (val < 10) { //Adds a leading 0 to single
digit months, ex 01 instead of 1.
+ val2 = "0" + val;
+ } else {
+ val2 = val;
+ }
+ var option = '<option ';
+ if (val === currentMonth) {
+ option += 'selected="selected" ';
+ }
+ option += 'value="' + val2 + '">' +
monthNames[val] + '</option>';
+ str += option;
+ }
+ str += '</select>';
+ return str;
+ }
+
+ var PFDateField = function(config) {
+ jsGrid.Field.call(this, config);
+ };
+
+ PFDateField.prototype = new jsGrid.Field({
+ sorter: function(date1, date2) {
+ return new Date(date1) - new Date(date2);
+ },
+
+ itemTemplate: function(value) {
+ return value;
+ },
+
+ insertTemplate: function(value) {
+ var html_date = '<div style="float:left;
width:19%;"><label style="display:block; text-align:center; font-
size:14px;">DD:</label><input class="pf_jsGrid_day" style=" font-size:14px; "
type="text" value="" placeholder="DD"></input></div>';
+ var html_year = '<div style="float:left;
width:29%;"><label style="display:block; text-align:center; width:29%;
font-size:14px;">YYYY:</label><input class="pf_jsGrid_year" style="
font-size:14px; " type="text" value="" placeholder="YYYY"></input></div>';
+ var html_month = '<div style="float:left;
width:48%; margin-left:2%; margin-right:2%;"><label style="display:block;
text-align:center; font-size:14px;">MM:</label>' + buildSelect(1) + '</div>';
+ var fullDateInputHTML = '<div
class="pf_jsGrid_ymd_form">';
+ if ( mw.config.get('wgAmericanDates') ) {
//check for date-style format.
+ fullDateInputHTML += html_month +
html_date + html_year;
+ } else {
+ fullDateInputHTML += html_date +
html_month + html_year;
+ }
+ fullDateInputHTML += '</div>';
+
+ $('.pfJSGrid').on('click propertychange change
keyup input paste', function() {
+ Global_Insert_day_of_month =
$('.pf_jsGrid_day').val();
+ Global_Insert_year =
$('.pf_jsGrid_year').val();
+ Global_Insert_month =
$('.pf_jsGrid_month').val();
+ });
+
+ return fullDateInputHTML;
+ },
+
+ editTemplate: function(value) {
+ var display_day_of_month = '';
+ var display_year = '';
+ var display_month = 0;
+ if ( value !== null ) {
+ var dateObject = new Date(value);
+ display_day_of_month =
dateObject.getDate();
+ display_year = dateObject.getFullYear();
+ display_month = dateObject.getMonth();
+ }
+ var fullDateInputHTML = '<div
class="pf_jsGrid_ymd_form">';
+ var html_date = '<div style="float:left;
width:19%;"><label style="display:block; text-align:center;
font-size:14px;">DD:</label><input class="pf_jsGrid_day" style="
font-size:14px; " type="text" value=' + display_day_of_month +
'></input></div>';
+ var html_year = '<div style="float:left;
width:29%;"><label style="display:block; text-align:center; width:29%;
font-size:14px;">YYYY:</label><input class="pf_jsGrid_year" style="
font-size:14px; " type="text" value=' + display_year + '></input></div>';
+ var html_month = '<div style="float:left;
width:48%; margin-left:2%; margin-right:2%;"><label style="display:block;
text-align:center; font-size:14px;">MM:</label>' + buildSelect(display_month +
1) + '</div>';
+ if ( mw.config.get('wgAmericanDates') ) {
//check for date-style format.
+ fullDateInputHTML += html_month +
html_date + html_year;
+ } else {
+ fullDateInputHTML += html_date +
html_month + html_year;
+ }
+ fullDateInputHTML += '</div>';
+
+ /*
+ * Always use eq(1) on the edit functions since
jsGrid
+ * has a hidden insert row, so you have to
ignore that
+ * row else you will capture
+ */
+ $('.pfJSGrid').on('click propertychange change
keyup input paste', function() {
+ Global_Edit_day_of_month =
$('.pf_jsGrid_day').eq(1).val();
+ Global_Edit_year =
$('.pf_jsGrid_year').eq(1).val();
+ Global_Edit_month =
$('.pf_jsGrid_month').eq(1).val();
+ });
+
+ return fullDateInputHTML;
+ },
+
+ insertValue: function() {
+ if ( Global_Insert_year === undefined ||
Global_Insert_year === "" ) {
+ return null;
+ }
+ var ret = Global_Insert_year + "-" +
Global_Insert_month + "-" + Global_Insert_day_of_month;
+ return ret;
+ },
+
+ editValue: function(value) {
+ if ( Global_Edit_year === undefined ||
Global_Edit_year === "" ) {
+ return null;
+ }
+ var ret = Global_Edit_year + "-" +
Global_Edit_month + "-" + Global_Edit_day_of_month;
+ return ret;
+ }
+ });
+
+ jsGrid.fields.date = PFDateField;
+}(jsGrid, jQuery));
( function ( $, mw ) {
$( '.pfJSGrid' ).each( function() {
- var wgPageFormsGridParams = mw.config.get(
'wgPageFormsGridParams' ),
- wgPageFormsGridValues = mw.config.get(
'wgPageFormsGridValues' );
+ var gridParams = mw.config.get( 'wgPageFormsGridParams' ),
+ gridValues = mw.config.get( 'wgPageFormsGridValues' );
var $gridDiv = $( this );
var templateName = $gridDiv.attr( 'data-template-name' );
var gridHeight = $gridDiv.attr( 'height' );
if ( gridHeight === undefined ) { gridHeight = '400px'; }
// The slice() is necessary to do a clone, so that
- // wgPageFormsGridParams does not get modified.
- var templateParams =
wgPageFormsGridParams[templateName].slice(0);
+ //gridParams does not get modified.
+ var templateParams = gridParams[templateName].slice(0);
templateParams.push( { type: 'control' } );
$gridDiv.jsGrid({
@@ -27,7 +156,7 @@
inserting: true,
confirmDeleting: false,
- data: wgPageFormsGridValues[templateName],
+ data: gridValues[templateName],
fields: templateParams,
onEditRowCreated: function( args ) {
@@ -64,7 +193,7 @@
});
var $gridData = $gridDiv.find( ".jsgrid-grid-body tbody" );
-
+
// Copied from http://js-grid.com/demos/rows-reordering.html
$gridData.sortable({
update: function( e, ui ) {
@@ -73,7 +202,7 @@
var indexes = $.map( $gridData.sortable(
"toArray", { attribute: "class" } ), function(classes) {
return
clientIndexRegExp.exec(classes)[1];
});
-
+
// arrays of items
var items = $.map( $gridData.find("tr"),
function(row) {
return $(row).data("JSGridItem");
@@ -84,6 +213,8 @@
});
$( "#pfForm" ).submit(function( event ) {
+ var gridParams = mw.config.get( 'wgPageFormsGridParams' );
+
// Add a hidden field for each value in the grid.
$( "div.jsgrid-grid-body" ).each( function() {
var $grid = $( this );
@@ -99,7 +230,7 @@
}
var cellNum = 1;
$row.find( "td" ).each( function() {
- var paramName =
wgPageFormsGridParams[templateName][cellNum - 1].name;
+ var paramName =
gridParams[templateName][cellNum - 1].name;
var value = $( this ).html();
// If this isn't a checkbox, the value
// will be neither true not false - it
@@ -113,7 +244,7 @@
var inputName = templateName + '[' +
rowNum + '][' + paramName + ']';
$('<input>').attr( 'type', 'hidden'
).attr( 'name', inputName ).attr( 'value', value ).appendTo( '#pfForm' );
cellNum++;
- if ( cellNum >
wgPageFormsGridParams[templateName].length ) {
+ if ( cellNum >
gridParams[templateName].length ) {
// Break.
return false;
}
@@ -162,4 +293,4 @@
return this;
};
-}( jQuery, mediaWiki ) );
+}( jQuery, mediaWiki ) );
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/376452
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I04319040853e5037342407efc81f40c4c5fddf69
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/PageForms
Gerrit-Branch: master
Gerrit-Owner: Yaron Koren <yaro...@gmail.com>
Gerrit-Reviewer: Yaron Koren <yaro...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
