Add colors to signal when a suggest input has been validated or not
This commit is contained in:
Antonin Delpeuch
parent
a4ece8ef6a
commit
2779eb97da
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
22
extensions/wikidata/module/scripts/bettersuggest.js
Normal file
22
extensions/wikidata/module/scripts/bettersuggest.js
Normal file
@ -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');
|
||||
});
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user