Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: localize draw #2068

Merged
merged 4 commits into from
Nov 15, 2024
Merged

feature: localize draw #2068

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2a1de6d
feat: localize draw and make measure work correctly again
Grammostola Nov 1, 2024
65f9ddd
fix: spell "circle" properly
Grammostola Nov 12, 2024
ee83900
fix: x marks the cross
Grammostola Nov 14, 2024
40fcfe1
fix: x is a cross in english, plus is a cross in swedish
Grammostola Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 35 additions & 29 deletions src/controls/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@ import exportToFile from '../utils/exporttofile';
import validate from '../utils/validate';

const Draw = function Draw(options = {}) {
const localization = options.localization;

function localize(key) {
return localization.getStringByKeys({ targetParentKey: 'draw', targetKey: key });
}

const {
buttonText = 'Rita',
buttonText = localize('title'),
placement = ['menu'],
icon = '#fa-pencil',
annotation,
Expand All @@ -21,9 +27,9 @@ const Draw = function Draw(options = {}) {
} = options;

const drawDefaults = {
layerTitle: 'Ritlager',
layerTitle: localize('drawLayerTitleDefault'),
groupName: 'none',
groupTitle: 'Ritlager',
groupTitle: localize('drawGroupTitleDefault'),
visible: true,
styleByAttribute: true,
queryable: false,
Expand Down Expand Up @@ -105,19 +111,19 @@ const Draw = function Draw(options = {}) {
cls: 'margin-small icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_save_24px',
text: 'Spara'
text: localize('popupSaveButton')
});

const cancelButton = Button({
cls: 'margin-small icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_close_24px',
text: 'Avbryt'
text: localize('popupCancelButton')
});

const inputEl = Input({
cls: 'no-margin',
placeholderText: 'Ange popuptext',
placeholderText: localize('popupPlaceholderText'),
value: val
});

Expand All @@ -127,7 +133,7 @@ const Draw = function Draw(options = {}) {
});

const modal = Modal({
title: 'Popuptext',
title: localize('popupTextModalTitle'),
contentCmp: modalContent,
target: viewer.getId()
});
Expand Down Expand Up @@ -175,7 +181,7 @@ const Draw = function Draw(options = {}) {

const inputEl = Input({
cls: 'margin-right',
placeholderText: 'Ange lagernamn',
placeholderText: localize('layerDialogLayerNamePlaceholder'),
value: layerTitle
});

Expand All @@ -191,7 +197,7 @@ const Draw = function Draw(options = {}) {
drawHandler.setActiveLayer(drawLayer);
thisForm.dispatch('activeLayerChange', { layername: layerName });
},
tooltipText: 'Aktivera ritlager',
tooltipText: localize('layerDialogActivateLayerTooltip'),
tooltipPlacement: 'west'
});

Expand All @@ -203,13 +209,13 @@ const Draw = function Draw(options = {}) {
cls: 'padding-small icon-smaller round light box-shadow relative o-tooltip',
icon: '#ic_delete_24px',
async click() {
if (window.confirm('Vill du radera det här ritlagret?') === true) {
if (window.confirm(localize('layerDialogDeleteLayerConfirm')) === true) {
await map.removeLayer(drawLayer);
modal.closeModal();
thisForm.show();
}
},
tooltipText: 'Radera ritlager',
tooltipText: localize('layerDialogDeleteLayerTooltip'),
tooltipPlacement: 'west'
});

Expand All @@ -223,7 +229,7 @@ const Draw = function Draw(options = {}) {
filename: drawLayer.get('title') || 'export'
});
},
tooltipText: 'Ladda ner ritlager',
tooltipText: localize('layerDialogDownloadLayerTooltip'),
tooltipPlacement: 'west'
});

Expand All @@ -240,7 +246,7 @@ const Draw = function Draw(options = {}) {
cls: 'icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_add_24px',
text: 'Nytt ritlager',
text: localize('layerDialogAddLayerButton'),
async click() {
let title = drawOptions.layerTitle;
if (viewer.getLayersByProperty('title', title).length > 0) {
Expand Down Expand Up @@ -295,15 +301,15 @@ const Draw = function Draw(options = {}) {
inputEl.value = null;
inputEl.click();
},
text: 'Importera ritlager',
ariaLabel: 'Importera ritlager'
text: localize('layerDialogImportLayerButton'),
ariaLabel: localize('layerDialogImportLayerButton')
});

const okButton = Button({
cls: 'icon-smaller light box-shadow',
style: 'border-radius: 3px',
icon: '#ic_check_24px',
text: 'OK',
text: localize('layerDialogOkButton'),
click() {
modal.closeModal();
}
Expand All @@ -324,7 +330,7 @@ const Draw = function Draw(options = {}) {
});

modal = Modal({
title: 'Ritlager',
title: localize('layerDialogTitle'),
contentCmp: modalContent,
target: viewer.getId(),
style: 'max-width:100%;width:400px;'
Expand All @@ -344,7 +350,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_place_24px',
tooltipText: 'Punkt',
tooltipText: localize('pointButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'inactive'
Expand All @@ -360,7 +366,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_timeline_24px',
tooltipText: 'Linje',
tooltipText: localize('lineButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -375,7 +381,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#o_polygon_24px',
tooltipText: 'Polygon',
tooltipText: localize('polygonButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -390,7 +396,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_title_24px',
tooltipText: 'Text',
tooltipText: localize('textButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -404,7 +410,7 @@ const Draw = function Draw(options = {}) {
attributeForm.show();
},
icon: '#ic_textsms_24px',
tooltipText: 'Attribut',
tooltipText: localize('attributeButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'disabled'
Expand All @@ -423,7 +429,7 @@ const Draw = function Draw(options = {}) {
} else { this.setState('active'); }
},
icon: '#ic_palette_24px',
tooltipText: 'Stil',
tooltipText: localize('styleButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -437,7 +443,7 @@ const Draw = function Draw(options = {}) {
layerForm.show();
},
icon: '#ic_layers_24px',
tooltipText: 'Lager',
tooltipText: localize('layerButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -452,7 +458,7 @@ const Draw = function Draw(options = {}) {
thisComponent.dispatch('saveFeatures', true);
},
icon: '#ic_save_24px',
tooltipText: 'Spara',
tooltipText: localize('saveButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'disabled'
Expand All @@ -473,7 +479,7 @@ const Draw = function Draw(options = {}) {
});
},
icon: '#ic_download_24px',
tooltipText: 'Ladda ner',
tooltipText: localize('downloadButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand All @@ -488,7 +494,7 @@ const Draw = function Draw(options = {}) {
}
},
icon: '#ic_delete_24px',
tooltipText: 'Ta bort',
tooltipText: localize('deleteButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;',
state: 'disabled'
Expand All @@ -505,7 +511,7 @@ const Draw = function Draw(options = {}) {
viewer.dispatch('toggleClickInteraction', { name: 'draw', active: false });
},
icon: '#ic_close_24px',
tooltipText: 'Stäng',
tooltipText: localize('closeButtonTooltip'),
tooltipPlacement: 'south',
tooltipStyle: 'bottom:-5px;'
});
Expand Down Expand Up @@ -549,7 +555,7 @@ const Draw = function Draw(options = {}) {
Text: textButton
};
const extraTools = drawOptions.drawTools || [];
drawExtraTools(extraTools, viewer, drawTools);
drawExtraTools({ extraTools, viewer, toolCmps: drawTools, localize });
},
onAdd(evt) {
viewer = evt.target;
Expand Down
20 changes: 9 additions & 11 deletions src/controls/draw/drawtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,17 @@ import utils from '../../utils';

const createElement = utils.createElement;

let viewer;

const drawToolsSelector = function drawToolsSelector(extraTools, v, toolCmps) {
const drawToolsSelector = function drawToolsSelector({ extraTools, viewer, toolCmps, localize }) {
const toolNames = {
Polygon: 'Polygon',
Point: 'Punkt',
LineString: 'Linje',
box: 'Rektangel',
square: 'Kvadrat',
circle: 'Cirkel',
freehand: 'Frihandsläge'
Polygon: localize('drawPolygon'),
Point: localize('drawPoint'),
LineString: localize('drawLine'),
box: localize('drawBox'),
square: localize('drawSquare'),
circle: localize('drawCircle'),
freehand: localize('drawFreehand')
};
viewer = v;

const drawCmp = viewer.getControlByName('draw');
let drawTools;
const map = viewer.getMap();
Expand Down
4 changes: 2 additions & 2 deletions src/controls/measure.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,11 @@ const Measure = function Measure({
if (!drawType || drawType === geomType) {
if (geomType === 'Polygon') {
point = geometry.getInteriorPoint();
label = drawStyles.formatArea(geometry, useHectare, projection, 0, localization);
label = drawStyles.formatArea({ polygon: geometry, useHectare, projection, featureArea: 0, localization });
line = new LineString(geometry.getCoordinates()[0]);
} else if (geomType === 'LineString') {
point = new Point(geometry.getLastCoordinate());
label = drawStyles.formatLength(geometry, projection, localization);
label = drawStyles.formatLength({ line: geometry, projection, localization });
line = geometry;
}
}
Expand Down
66 changes: 65 additions & 1 deletion src/loc/en_US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,42 @@
"portraitAriaLabel": "Portrait",
"landscape": "Landscape",
"landscapeAriaLabel": "Landscape"
},
"draw": {
"title": "Draw",
"popupSaveButton": "Save",
"popupCancelButton": "Cancel",
"popupPlaceholderText": "Enter popup text",
"popupTextModalTitle": "Popup text",
"layerDialogLayerNamePlaceholder": "Enter layer name",
"layerDialogActivateLayerTooltip": "Activate layer",
"layerDialogDeleteLayerConfirm": "Delete draw layer?",
"layerDialogDeleteLayerTooltip": "Delete draw layer",
"layerDialogDownloadLayerTooltip": "Download draw layer",
"layerDialogAddLayerButton": "New",
"layerDialogImportLayerButton": "Import",
"layerDialogOkButton": "OK",
"layerDialogTitle": "Draw layers",
"pointButtonTooltip": "Point",
"lineButtonTooltip": "Line",
"polygonButtonTooltip": "Polygon",
"textButtonTooltip": "Text",
"attributeButtonTooltip": "Attributes",
"styleButtonTooltip": "Style",
"layerButtonTooltip": "Layers",
"saveButtonTooltip": "Save",
"downloadButtonTooltip": "Download",
"deleteButtonTooltip": "Delete",
"closeButtonTooltip": "Close",
"drawLayerTitleDefault": "Draw layer",
"drawGroupTitleDefault": "Draw layers",
"drawPolygon": "Polygon",
"drawPoint": "Point",
"drawLine": "Line",
"drawBox": "Rectangle",
"drawSquare": "Square",
"drawCircle": "Circle",
"drawFreehand": "Freehand"
}
},
"style": {
Expand All @@ -80,7 +116,35 @@

},
"styleTemplate": {

"fillColor": "Fill",
"backgroundFillColor": "Background fill",
"opacity": "Opacity",
"strokeWidth": "Line width",
"textSize": "Text size",
"pointSize": "Point size",
"showLengthArea": "Show length/area",
"showSegments": "Show segments",
"stroke": "Line",
"strokeTypeSolid": "Solid line",
"strokeTypeDotted": "Dotted line",
"strokeTypeDashed" : "Dashed line",
"strokeTypeDashedDotted" : "Dash-dotted line",
"dimensions": "Dimensions",
"margins": "Margins",
"rotation": "Rotation",
"degreesRotation": "Degrees",
"marginForText": "Margin",
"frame": "Frame",
"margin": "Margin",
"point": "Point",
"pointTypePoint": "Point",
"pointTypeCircle": "Circle",
"pointTypeX": "X",
"pointTypePlus": "Cross",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"pointTypePlus": "Cross" should be "pointTypePlus": "Plus"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got ya. Should the sv_SE translation be "pointTypePlus": "Plus" or are we used to "Kors"?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Kors" works in swedish and "Plus" would also be appropriate in swedish, so I don't know which is best.

"pointTypeStar": "Star",
"pointTypeTriangle": "Triangle",
"pointTypeSquare": "Square",
"pointTypeMarker": "Marker"
}
}
}
Loading
Loading