c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update field motors editor to support localized languages (#803)

Browse Source 
* Use the value for options, and hardcode localized versions of first dropdown
This commit is contained in:
Sam El-Husseini
2018-09-25 10:28:34 -07:00
committed by GitHub
parent 74eb77a9ae
commit 2fdce16685
1 changed files with 50 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
fieldeditors/field_motors.ts
View File

@@ -133,14 +133,27 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
this.setText(text); this.setText(text);
} }
getFirstValue(text: string) { getFirstValue(value: string) {
// Get first set of words up until last space const typeValue = value.indexOf('large') != -1 ? 'large' : 'medium';
return this.normalizeText_(text.substring(0, text.lastIndexOf(' '))); const portValue = this.getSecondValue(value);
const isDual = portValue.length > 1;
return `${typeValue} motor${isDual ? 's' : ''}`;
} }
getSecondValue(text: string) { getSecondValue(value: string) {
// Get last word return (value.indexOf('large') != -1) ?
return this.normalizeText_(text.match(/\S*$/)[0]); value.substring(value.indexOf('large') + 5) :
value.substring(value.indexOf('medium') + 6);
}
getFirstValueI11n(value: string) {
const firstValue = this.getFirstValue(value);
const motorOptions = {
'medium motor': lf('medium motor'),
'large motor': lf('large motor'),
'large motors': lf('large motors')
}
return motorOptions[firstValue];
} }
private normalizeText_(text: string) { private normalizeText_(text: string) {
@@ -198,8 +211,8 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
if (text === null) { if (text === null) {
return text; return text;
} }
if (text.indexOf(' ') == -1) { if (text.indexOf('|') == -1) {
text = `large motors ${text}`; text = this.sourceBlock_.RTL ? `${text}|${lf("large motors")}` : `${lf("large motors")}|${text}`;
} }
return text; return text;
} }
@@ -296,16 +309,14 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
goog.dom.removeChildren(/** @type {!Element} */(this.textElement_)); goog.dom.removeChildren(/** @type {!Element} */(this.textElement_));
goog.dom.removeChildren(/** @type {!Element} */(this.textElement2_)); goog.dom.removeChildren(/** @type {!Element} */(this.textElement2_));
var text = this.text_;
text = this.patchDualMotorText(text);
// First dropdown // First dropdown
const textNode1 = document.createTextNode(this.getFirstValue(text)); // Use one of the following options, medium motor, large motor or large motors (translated)
const textNode1 = document.createTextNode(this.getFirstValueI11n(this.value_));
this.textElement_.appendChild(textNode1); this.textElement_.appendChild(textNode1);
// Second dropdown // Second dropdown, no need to translate. Only port numbers
if (this.textElement2_) { if (this.textElement2_) {
const textNode2 = document.createTextNode(this.getSecondValue(text)); const textNode2 = document.createTextNode(this.getSecondValue(this.value_));
this.textElement2_.appendChild(textNode2); this.textElement2_.appendChild(textNode2);
} }
this.updateWidth(); this.updateWidth();
@@ -402,29 +413,28 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
contentDiv.setAttribute('aria-haspopup', 'true'); contentDiv.setAttribute('aria-haspopup', 'true');
let options = this.getOptions(); let options = this.getOptions();
// Hashmap of options
let opts = {}; let opts = {};
let conts = {}; let conts = {};
let vals = {}; let vals = {};
// Go through all option values and split them into groups
for (let opt = 0; opt < options.length; opt++) { for (let opt = 0; opt < options.length; opt++) {
let text = options[opt][0].alt ? options[opt][0].alt : options[opt][0];
if (text.indexOf(' ') == -1) {
// Patch dual motors as they don't have prefixes.
text = this.patchDualMotorText(text);
if (options[opt][0].alt) options[opt][0].alt = text;
}
const value = options[opt][1]; const value = options[opt][1];
const firstValue = this.getFirstValue(text); const motorValue = value.substring(value.indexOf('.') + 1);
const secondValue = this.getSecondValue(text); const typeValue = motorValue.indexOf('large') == 0 ? 'large' : 'medium';
if (!opts[firstValue]) opts[firstValue] = [secondValue]; const portValue = motorValue.indexOf('large') == 0 ? motorValue.substring(5) : motorValue.substring(6);
else opts[firstValue].push(secondValue); const isDual = portValue.length > 1;
// Store a hash of the original key value pairs for later
const text = `${typeValue} motor${isDual ? 's' : ''}|${portValue}`;
const key = `${typeValue} motor${isDual ? 's' : ''}`;
if (!opts[key]) opts[key] = [];
opts[key].push(portValue);
conts[text] = options[opt][0]; conts[text] = options[opt][0];
vals[text] = value; vals[text] = value;
} }
const currentFirst = this.getFirstValue(this.text_); const currentFirst = this.getFirstValue(this.value_);
const currentSecond = this.getSecondValue(this.text_); const currentSecond = this.getSecondValue(this.value_);
if (!this.isFirst_) { if (!this.isFirst_) {
options = opts[currentFirst]; options = opts[currentFirst];
@@ -432,9 +442,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
options = Object.keys(opts); options = Object.keys(opts);
// Flip the first and second options to make it sorted the way we want it (medium, large, dual) // Flip the first and second options to make it sorted the way we want it (medium, large, dual)
if (options.length == 3) { if (options.length == 3) {
const temp = options[1]; options = [lf("medium motor"), lf("large motor"), lf("large motors")];
options[1] = options[0];
options[0] = temp;
} else { } else {
options.reverse(); options.reverse();
} }
@@ -448,7 +456,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
const columns = options.length; const columns = options.length;
for (let i = 0, option: any; option = options[i]; i++) { for (let i = 0, option: any; option = options[i]; i++) {
let text = this.isFirst_ ? option + ' ' + opts[option][0] : currentFirst + ' ' + option; let text = this.isFirst_ ? option + '|' + (option.indexOf('motors') != -1 ? 'BC' : 'A') : currentFirst + '|' + option;
text = text.replace(/\xA0/g, ' '); text = text.replace(/\xA0/g, ' ');
const content: any = conts[text]; const content: any = conts[text];
const value = vals[text]; const value = vals[text];
@@ -466,7 +474,7 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
button.setAttribute('id', ':' + i); // For aria-activedescendant button.setAttribute('id', ':' + i); // For aria-activedescendant
button.setAttribute('role', 'menuitem'); button.setAttribute('role', 'menuitem');
button.setAttribute('class', 'blocklyDropDownButton'); button.setAttribute('class', 'blocklyDropDownButton');
button.title = this.isFirst_ ? this.getFirstValue(content.alt) : content.alt; button.title = this.isFirst_ ? this.getFirstValueI11n(value) : this.getSecondValue(value);
button.style.width = ((this.itemWidth_) - 8) + 'px'; button.style.width = ((this.itemWidth_) - 8) + 'px';
button.style.height = ((this.itemWidth_) - 8) + 'px'; button.style.height = ((this.itemWidth_) - 8) + 'px';
let backgroundColor = this.backgroundColour_; let backgroundColor = this.backgroundColour_;
@@ -495,7 +503,15 @@ export class FieldMotors extends Blockly.FieldDropdown implements Blockly.FieldC
contentDiv.removeAttribute('aria-activedescendant'); contentDiv.removeAttribute('aria-activedescendant');
}); });
let buttonImg = document.createElement('img'); let buttonImg = document.createElement('img');
buttonImg.src = this.isFirst_ ? isFirstUrl[option.replace(/\xA0/g, ' ')] : content.src; let imgSrc = content.src;
if (this.isFirst_) {
const motorValue = value.substring(value.indexOf('.') + 1);
// Find out what kind of motor this is based on it's value, possible values: mediumX, largeX, and largeXY
if (motorValue.indexOf('medium') == 0) imgSrc = isFirstUrl['medium motor'];
else if (motorValue.length == 6) imgSrc = isFirstUrl['large motor'];
else imgSrc = isFirstUrl['large motors'];
}
buttonImg.src = imgSrc;
//buttonImg.alt = icon.alt; //buttonImg.alt = icon.alt;
// Upon click/touch, we will be able to get the clicked element as e.target // Upon click/touch, we will be able to get the clicked element as e.target
// Store a data attribute on all possible click targets so we can match it to the icon. // Store a data attribute on all possible click targets so we can match it to the icon.