Add colors to signal when a suggest input has been validated or not

extensions/wikidata/module/MOD-INF/controller.js

@@ -57,6 +57,7 @@ function init() {
         "scripts/menu-bar-extension.js",
         "scripts/warningsrenderer.js",
         "scripts/langsuggest.js",
+        "scripts/bettersuggest.js",
         "scripts/dialogs/schema-alignment-dialog.js",
         "scripts/dialogs/manage-account-dialog.js",
         "scripts/dialogs/perform-edits-dialog.js",

extensions/wikidata/module/langs/translation-en.json

@@ -9,11 +9,10 @@
         },
         "wikidata-schema": {
                 "dialog-header": "Align to Wikidata",
-                "dialog-explanation": "The Wikidata schema below specifies how your tabular data will be transformed into Wikidata edits. You can drag and drop columns in most input boxes: for each row, the values in these columns will generate Wikidata edits.",
+                "dialog-explanation": "The Wikidata schema below specifies how your tabular data will be transformed into Wikidata edits. You can drag and drop the column names below in most input boxes: for each row, edits will be generated with the values in these columns.",
                 "schema-tab-header": "Schema",
                 "warnings-tab-header": "Issues",
                 "qs-preview-tab-header": "QuickStatements preview",
-                "draggable-columns-header": "Columns:",
                 "statements-header": "Statements",
                 "terms-header": "Terms",
                 "empty-statements": "no statements added",

extensions/wikidata/module/scripts/bettersuggest.js

@@ -0,0 +1,22 @@
+
+/**
+ * Adds a few tweaks to a suggest widget, mostly to indicate
+ * the status of the validation.
+ */
+var fixSuggestInput = function(input) {
+   input.bind("fb-select", function(evt, data) {
+       input.addClass('wbs-validated-input');
+       input.blur();
+   }).bind("fb-textchange", function(evt, data) {
+       input.removeClass('wbs-validated-input');
+   }).blur(function() {
+       setTimeout(function() {
+        if(! input.hasClass('wbs-validated-input')) {
+            input.addClass('wbs-unvalidated-input');
+        }
+       }, 100);
+   }).focus(function() {
+       input.removeClass('wbs-unvalidated-input');
+   });
+}
+

extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.html

@@ -1,7 +1,6 @@
 <div class="dialog-frame" style="width: 800px;">
   <div class="dialog-header" bind="dialogHeader"></div>
   <div class="dialog-body" bind="dialogBody">
-    <p class="body-text" bind="dialogExplanation"></p>
     <div id="schema-alignment-tabs" class="refine-tabs">
       <ul>
           <li><a href="#schema-alignment-tabs-schema" bind="schemaTabHeader"></a></li>
@@ -9,8 +8,8 @@
           <li><a href="#schema-alignment-tabs-preview-qs" bind="qsPreviewTabHeader"></a></li>
       </ul>
       <div id="schema-alignment-tabs-schema">
+          <p class="body-text" bind="dialogExplanation"></p>
           <div class="schema-alignment-dialog-canvas">
-            <p class="schema-alignment-columns-header" bind="draggableColumnsHeader"></p>
             <div class="schema-alignment-dialog-columns-area">
             </div>
             <div class="schema-alignment-dialog-statements-area">

extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js

@@ -118,7 +118,6 @@ SchemaAlignmentDialog._createDialog = function() {
   this._elmts.schemaTabHeader.text($.i18n._('wikidata-schema')["schema-tab-header"]);
   this._elmts.warningsTabHeader.text($.i18n._('wikidata-schema')["warnings-tab-header"]);
   this._elmts.qsPreviewTabHeader.text($.i18n._('wikidata-schema')["qs-preview-tab-header"]);
-  this._elmts.draggableColumnsHeader.text($.i18n._('wikidata-schema')["draggable-columns-header"]);
   SchemaAlignmentDialog._plusButton($.i18n._('wikidata-schema')["add-item-button"], this._elmts.addItemButton);
   this._elmts.invalidSchemaWarningIssues.text($.i18n._('wikidata-schema')["invalid-schema-warning-issues"]);
   this._elmts.invalidSchemaWarningQs.text($.i18n._('wikidata-schema')["invalid-schema-warning-qs"]);
@@ -382,6 +381,8 @@ SchemaAlignmentDialog._addStatementGroup = function(item, json) {
         addValueButton.show();
         removeButton.hide();
      }
+  } else {
+     inputContainer.find('input').focus();
   }
      
 }
@@ -635,12 +636,15 @@ SchemaAlignmentDialog._initPropertyField = function(inputContainer, targetContai
         addValueButtons.hide();
         removeGroupButton.show();
     });
+   // adds tweaks to display the validation status more clearly, like in Wikidata
+   fixSuggestInput(input);
   }
 
   // Init with the provided initial value.
   if (initialValue) {
      if (initialValue.type === "wbpropconstant") {
         input.val(initialValue.label);
+        input.addClass('wbs-validated-input');
      } 
      inputContainer.data("jsonValue", initialValue);
   }
@@ -674,6 +678,8 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
         });
         changedCallback();
     });
+    // adds tweaks to display the validation status more clearly, like in Wikidata
+    fixSuggestInput(input);
 
   } else if (this._reconService !== null && mode === "wikibase-property") {
     var endpoint = null;
@@ -691,6 +697,8 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
         });
         changedCallback();
     });
+    // adds tweaks to display the validation status more clearly, like in Wikidata
+    fixSuggestInput(input);
 
   } else if (mode === "time") {
      input.attr("placeholder", "YYYY(-MM(-DD))...");
@@ -733,6 +741,7 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
         });
         changedCallback();
      });
+     fixSuggestInput(input);
 
    } else if (mode === "monolingualtext") {
      input.remove();
@@ -886,8 +895,9 @@ SchemaAlignmentDialog._initField = function(inputContainer, mode, initialValue,
 
   // Init with the provided initial value.
   if (initialValue) {
-     if (initialValue.type === "wbitemconstant") {
+     if (initialValue.type === "wbitemconstant" || initialValue.type === "wbpropconstant") {
         input.val(initialValue.label);
+        input.addClass("wbs-validated-input");
      } else if (initialValue.type == "wbitemvariable") {
         var cell = SchemaAlignmentDialog._createDraggableColumn(initialValue.columnName, true);
         acceptDraggableColumn(cell);

extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less

@@ -86,6 +86,15 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     box-shadow: inset 0 0 10px #a7cdff;
 }
 
+.wbs-validated-input {
+   border: 1px solid green !important;
+}
+
+.wbs-unvalidated-input {
+   border: 1px solid red !important;
+   background-color: #ffbfbf;
+}
+
 // The following three rules are taken from Wikibase
 .wbs-icon {
     background-position: center;