Extension:Page Forms/Select2 for autocompletion/Progress Report

Switching Semantic Forms Autocompletion to Select2[edit]

Public URL: https://www.mediawiki.org/wiki/User:Jatin.me/GSoC14
Bugzilla report: Bug 61974
Announcement: http://lists.wikimedia.org/pipermail/wikitech-l/2014-March/075276.html
Status: https://www.mediawiki.org/wiki/Extension:Semantic_Forms/Select2_for_autocompletion/Progress_Report

Community Bonding Report[edit]

Goals for the first half of the internship[edit]

Introducing the Select2 JS library to the current autocompletion system of Semantic Forms. Having discussed it with my mentors, we have decided to do this in conjunction with the jQuery UI Autocomplete which is used currently in SF for autocompletion.
Making 'combobox' input type in SF use this new Select2 library for autocompletion and see if everything works fine with this.
Make remote autocompletion work for combobox input type.
Switching the #forminput parser function which also supports autocompletion, on possible page names to use Select2 as well - and probably switch it to a combo box interface, for consistency.
Switching 'Semantic property' field in Special:CreateTemplate page also to Select2 combobox.

Communication plan[edit]

Email - I will keep mentor updated about the progress.
Skype and gtalk - Skype and gtalk have been my primary means of communication with mentors.
IRC Channel - I also go on the #semantic-mediawiki channel during the working hours.
Mailing list - semediawiki-user mailing list will be used to communicate progress.

Lessons learned since 21st April[edit]

Report to your mentors regularly about the progress of the project because mentors will help in rectifying flaws, which you may not notice, before its too late.
Do not make things complex, keep them easy and simple.
Prioritize tasks to be done and focus on important deliverables.
Discussions and feedback make thing better.

Weekly Reports[edit]

Week 1: 19 May to 25 May[edit]

I dove into the Semantic Forms code for autocompletion, got myself familiar with it and understood how this all works. Here are some of the related files:
- SemanticForms.php
- includes/SF_AutocompleteAPI.php
- includes/SF_Form.php
- includes/SF_FormField.php
- includes/SF_FormPrinter.php
- includes/SF_ParserFunctions.php
- includes/SF_Utils.php
- includes/forminputs/SF_ComboBoxInput.php
- includes/forminputs/SF_TextAreaWithAutocompleteInput.php
- includes/forminputs/SF_TextInput.php
- includes/forminputs/SF_TextWithAutocompleteInput.php
- libs/SemanticForms.jṡ̇
Included the stuff related to Select2 JS library into the SF extension.

$GLOBALS['wgResourceModules'] += array(
    'ext.semanticforms.select2' => $sfgResourceTemplate + array(
	'scripts' => array(
		'libs/select2.js',
		'libs/ext.sf.select2.js',
	),
	'styles' => array(
		'skins/select2/select2.css',
		'skins/select2/select2-bootstrap.css',
		'skins/ext.sf.select2.css',
	),
	'dependencies' => array(
		'ext.semanticforms',
	),
	'messages' => array(
		'sf-select2-no-matches',
		'sf-select2-searching',
		'sf-select2-input-too-short',
		'sf-select2-input-too-long',
		'sf-select2-selection-too-big',
		'sf-select2-load-more',
	),
);

Tested if the Select2 library is successfully included and working fine with SF.
Started working on making 'combobox' input type use Select2 for autocompletion.

Week 2: 26 May to 1 June[edit]

Tested 'combobox' using Select2 for autocompletion.
Combo box using Select2 for autocompletion

Added a new attribute 'placeholder' to 'combobox'.
Started working on remote autocompletion for combobox.
Learnt Modular Javascript and started writing JS modules for making combobox use Select2 for autocompletion. I also wrote a small blog about Modular JS (see here).

Week 3: 2 June to 8 June[edit]

Completed module for autocompletion of combobox from local values.
Understood how Select2 does remote autocompletion and tried to integrate it to the module of combobox for autocompletion.
Integration successful, now combobox can do remote autocompletion if 'remote autocompletion' parameter is specified in the field tag.
Worked on the 'values from url' parameter for the combobox, now values for autocompletion can also be fetched from outside the wiki (other wikis or some other external url).

Week 4: 9 June to 15 June[edit]

Started working on switching #forminput to Select2 for autocompletion.
Found some bugs in the existing code of #forminput in SFParserFunctions::renderFormInput() function. It produces some weird outputs when some parameters are not given in specific order. This problem is occurring due to the support for unnamed parameters by #forminput.
Having discussed with my mentor, we have decided to get rid of these unnamed parameters and remove its support by the #forminput.
We also discussed about removing 'remote autocompletion' parameter and letting code SF decide itself whether to do local or remote autocompletion based on the number of values for autocompletion, if there are more than a certain number of values, which is settable via LocalSettings.php, then switch to remote autocompletion.
Working on the above two points discussed with the mentors.

Week 5: 16 June to 22 June[edit]

Removed support for unnamed parameters by #forminput.
Made 'remote autocompletion' parameter optional. Introduced a global variable $sfgMaxLocalAutocompleteValues which is settable via LocalSettings.php, this variable will decide when to switch to remote autocompletion and when to keep it local.
Switched 'Semantic property' field in Special:CreateTemplate page to Select2 combobox.
Worked on making 'values dependent on' parameter supported by new Select2 combobox.

Week 6: 23 June to 29 June[edit]

Completed GSoC mid term evaluation.

Restored the support of unnamed parameters by #forminput, because removing them would break some wikis.
Also, removed Select2 combobox for #forminput, because that added two more steps for creating a new page with the form.
'values dependent on' parameter is now fully supported by the combobox.
Submitted the final patch for Select2 combobox.

Week 7: 30 June to 6 July[edit]

Started working on adding a new input type - tokens, this input type can be used wherever multiple values are allowed.
Changed the structure of Select2 files for autocompletion by introducing a new base class that has some basic properties which can be inherited and extended by combobox and tokens.
Worked on a unified solution for making 'values dependent on' parameter supported by tokens and combobox, .
Found some issues with existing 'dependent field' autocompletion, like for same substring many calls were made to the API, this slowed down the forms.

Week 8: 7 July to 13 July[edit]

Fixed the issue of SF making more than 1 API calls for a single substring in the case of 'dependent field'.
Introduced new input type 'Tokens' with basic functionality.
Made the values in "tokens" re-arrangable, using drag-and-drop; this is done using jQuery UI's sortable().
Solved an issue with the handling of "values dependent on" - it wasn't working correctly when editing an existing page.
Solved an issue with combobox input, it only autocomplete on the first letter of the whole string, not the first letter of every word.

Week 9: 14 July to 20 July[edit]

Added accent-folding functionality for characters with accent - it doesn’t matter whether users searches for cafe, café or even çåFé; the results will be the same.
Submitted the final patch for Select2 tokens.
Started working on displaying additional data like thumbnail image and description along with autocomplete values in combobox and tokens.
After a lot of discussion with the mentor, we came up with a solution that requires involving External Data(ED) extension to fetch data from any url and use that data to display the results. The fact that we are using ED is because it supports a large number of formats like JSON, CSV, XML and data from LDAP or databases.

Week 10: 21 July to 27 July[edit]

Worked on integrating feature for displaying additional data in autocompletion for a field of input type combobox.
Introduced new parameters - values from external data= <title_variable_name>, image= <image_variable_name> and description= <description_variable_name> to be used while autocompleting on external data.
Integration successful, now values fetched using ED extension can be used for autocompletion :). patch

Week 11: 28 July to 3 August[edit]

Extended autocompletion on external data to tokens input type, now it can also autocomplete on values fetched using ED. patch
Solved some minor bugs related to external data autocompletion - If in the values fetched using ED has a field for images and instead of full image URL only image name is retrieved, then it will search local wiki for its full URL.

Week 12: 4 August to 10 August[edit]

Reviewed the code and solved minor bugs related to the new functionalities added. patch
Worked on general clean up of javascript code - made SF javascript files pass JSHint test.

Week 13: 11 August to 18 August[edit]

Worked on documentation and other minor bugs.