From 2779eb97da68e2e5d29b12718a318d4317c33f7a Mon Sep 17 00:00:00 2001 From: Antonin Delpeuch Date: Mon, 19 Mar 2018 17:55:33 +0000 Subject: [PATCH] Add colors to signal when a suggest input has been validated or not --- .../wikidata/module/MOD-INF/controller.js | 1 + .../wikidata/module/langs/translation-en.json | 3 +-- .../wikidata/module/scripts/bettersuggest.js | 22 +++++++++++++++++++ .../dialogs/schema-alignment-dialog.html | 3 +-- .../dialogs/schema-alignment-dialog.js | 14 ++++++++++-- .../dialogs/schema-alignment-dialog.less | 9 ++++++++ 6 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 extensions/wikidata/module/scripts/bettersuggest.js diff --git a/extensions/wikidata/module/MOD-INF/controller.js b/extensions/wikidata/module/MOD-INF/controller.js index eea0bae25..1f14b8615 100644 --- a/extensions/wikidata/module/MOD-INF/controller.js +++ b/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", diff --git a/extensions/wikidata/module/langs/translation-en.json b/extensions/wikidata/module/langs/translation-en.json index fe5c0e855..0bdeb0960 100644 --- a/extensions/wikidata/module/langs/translation-en.json +++ b/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", diff --git a/extensions/wikidata/module/scripts/bettersuggest.js b/extensions/wikidata/module/scripts/bettersuggest.js new file mode 100644 index 000000000..58fb8bec3 --- /dev/null +++ b/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'); + }); +} + diff --git a/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.html b/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.html index 5136e9af3..80be6b4da 100644 --- a/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.html +++ b/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.html @@ -1,7 +1,6 @@
-

    • @@ -9,8 +8,8 @@
+

-

diff --git a/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js b/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js index fd5f3461d..ef7a2f7e4 100644 --- a/extensions/wikidata/module/scripts/dialogs/schema-alignment-dialog.js +++ b/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); diff --git a/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less b/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less index f8cfb6df4..986719d7f 100644 --- a/extensions/wikidata/module/styles/dialogs/schema-alignment-dialog.less +++ b/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;