Yaron Koren has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/333116 )
Change subject: Made "tokens" clickable/editable
......................................................................
Made "tokens" clickable/editable
Patch created with help from Tom Fellows
Change-Id: I4f3a6625594824607bb9a2dd010e189963cd6710
---
M libs/ext.pf.select2.tokens.js
1 file changed, 67 insertions(+), 23 deletions(-)
Approvals:
Yaron Koren: Looks good to me, approved
jenkins-bot: Verified
diff --git a/libs/ext.pf.select2.tokens.js b/libs/ext.pf.select2.tokens.js
index 9d1f03e..36d422b 100644
--- a/libs/ext.pf.select2.tokens.js
+++ b/libs/ext.pf.select2.tokens.js
@@ -8,6 +8,7 @@
*
* @licence GNU GPL v2+
* @author Jatin Mehta
+ * @author Yaron Koren
*/
( function( $, mw, pf ) {
@@ -48,6 +49,7 @@
this.sortable(element);
element.on( "change", this.onChange );
element.val(cur_val);
+ element.parent().on( "dblclick", "li.select2-search-choice",
pfTokensTurnIntoInput );
};
/*
* Returns options to be set by select2
@@ -274,34 +276,16 @@
return ajaxOpts;
};
+
/*
* Used to set the value of the HTMLInputElement
* when there is a change in the select2 value
*
*/
tokens_proto.onChange = function() {
- var self = this;
- var data = $(this).select2( "data" );
- var tokens = new pf.select2.tokens();
- var delim = tokens.getDelimiter( $(this) );
- var namespace = $(this).attr( "data-namespace" );
-
- if (data !== null) {
- var tokens_value = "";
- data.forEach( function( token ) {
- var val = token.text.trim();
- if ( namespace && data.id === data.text ) {
- if (val.indexOf( namespace + ':' ) !==
0 ) {
- val = namespace + ':' + val;
- }
- }
- tokens_value += val + delim + " ";
- });
- $(this).val( tokens_value );
- } else {
- $(this).val( '' );
- }
+ pfTokensSaveFullValue( $(this).parent(), $(this) );
};
+
/*
* Returns delimiter for the token field
*
@@ -312,7 +296,7 @@
var field_values = element.attr('autocompletesettings').split(
',' );
var delimiter = ",";
if (field_values[1] === 'list' && field_values[2] !== undefined
&& field_values[2] !== "") {
- delimiter = field_values[2];
+ delimiter = field_values[2];
}
return delimiter;
@@ -333,4 +317,64 @@
pf.select2.tokens.prototype = tokens_proto;
-}( jQuery, mediaWiki, pageforms ) );
+ // The following functions, for making tokens editable, are loosely
+ // based on the example at:
+ // https://github.com/select2/select2/issues/116#issuecomment-37440758
+ // @TODO - some or all of these functions should ideally be part of
+ // the pf.select2.tokens "class", but I wasn't able to get that
+ // working.
+ function pfTokensSaveFullValue( tokensInput, inputControl ) {
+ var data = "";
+ var tokens = new pf.select2.tokens();
+ var publicInput = tokensInput.find( 'input.pfTokens' );
+ var delim = tokens.getDelimiter( publicInput );
+ var namespace = inputControl.attr( "data-namespace" );
+ tokensInput.find("li.select2-search-choice").each(function() {
+ var val = $(this).children("div").html().trim();
+ if ( namespace && data.id === data.text ) {
+ if (val.indexOf( namespace + ':' ) !== 0 ) {
+ val = namespace + ':' + val;
+ }
+ }
+ if (data !== "") {
+ data += delim + " ";
+ }
+ data += val;
+ });
+ publicInput.val(data);
+ }
+
+ function pfTokensSaveSelect( tokensInput, inputControl ) {
+ inputControl.parent().html(inputControl.val());
+ pfTokensSaveFullValue( tokensInput, inputControl );
+ }
+
+ function pfTokensTurnIntoInput( event ) {
+ var currentSelect = $(event.target);
+ var tokensInput =
$(currentSelect).parent().parent().parent().parent();
+ var itemValue = currentSelect.html();
+ if ( itemValue.indexOf("<input type") === -1 ) {
+ currentSelect.html("<input type=\"text\" value=\"" +
itemValue + "\">");
+ var inputControl = currentSelect.children("input");
+ inputControl.focus()
+ // Normally, a click anywhere in the Select2 input will
+ // move the focus to the end of the tokens. Prevent
+ // that happening in this "sub-input".
+ .click(function(event) {
+ event.stopPropagation();
+ })
+ // Exit and save if the user clicks away, or hits
+ // "enter".
+ .blur(function() {
+ pfTokensSaveSelect( tokensInput, inputControl );
+ })
+ .keypress( function( event ) {
+ var keycode = (event.keyCode ? event.keyCode :
event.which);
+ if ( keycode === 13 ) {
+ pfTokensSaveSelect( tokensInput,
inputControl );
+ }
+ });
+ }
+ }
+
+}( jQuery, mediaWiki, pageforms ) );
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/333116
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4f3a6625594824607bb9a2dd010e189963cd6710
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/PageForms
Gerrit-Branch: master
Gerrit-Owner: Yaron Koren <[email protected]>
Gerrit-Reviewer: Yaron Koren <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
