#100 components i18n translatio changes
Agriya Dev5
parent
ba5cc7bed9
commit
27a5f1293e
|
|
@ -17,6 +17,7 @@
|
|||
*/
|
||||
/* eslint-disable no-bitwise */
|
||||
/* eslint-disable max-len */
|
||||
/* globals svgEditor */
|
||||
import ColorValuePicker from './ColorValuePicker.js';
|
||||
import Slider from './Slider.js';
|
||||
import { findPos, mergeDeep } from './Util.js';
|
||||
|
|
@ -627,10 +628,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
if (settings.window.expandable) {
|
||||
const content = document.createElement('span');
|
||||
content.classList.add('jPicker');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
|
||||
<span class="Color" id="jq-ae-Color"> </span>
|
||||
<span class="Alpha" id="jq-ae-Alpha"> </span>
|
||||
<span class="Image" id="jq-ae-Image" title="Click To Open Color Picker"> </span>
|
||||
<span class="Image" id="jq-ae-Image" title="${svgEditor.i18next.t('config.open_color_picker')}"> </span>
|
||||
<span class="Container" id="Container"> </span>
|
||||
</span>`;
|
||||
that.insertAdjacentElement('afterend', content);
|
||||
|
|
@ -1322,45 +1324,46 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
|
|||
const all = color.active.val('all');
|
||||
if (win.alphaPrecision < 0) win.alphaPrecision = 0;
|
||||
else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
const controlHtml = `<table class="jPicker" id="jPicker-table" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
${win.expandable ? '<tr><td class="Move" colspan="5"> </td></tr>' : ''}
|
||||
<tr>
|
||||
<td rowspan="9"><h2 class="Title">${win.title || localization.text.title}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1"> </span><span class="Map2" id="MMap2"> </span><span class="Map3" id="MMap3"> </span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
|
||||
<td rowspan="9"><h2 class="Title">${win.title || svgEditor.i18next.t('config.jpicker_title')}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1"> </span><span class="Map2" id="MMap2"> </span><span class="Map3" id="MMap3"> </span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td>
|
||||
<td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1"> </span><span class="Map2" id="Map2"> </span><span class="Map3" id="Map3"> </span><span class="Map4" id="Map4"> </span><span class="Map5" id="Map5"> </span><span class="Map6" id="Map6"> </span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td>
|
||||
<td colspan="2" class="Preview" id="Preview">${localization.text.newColor}<div id="preview-div"><span class="Active" id="Active" title="${localization.tooltips.colors.newColor}"> </span><span class="Current" id="Current" title="${localization.tooltips.colors.currentColor}"> </span></div>${localization.text.currentColor}</td>
|
||||
<td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${localization.text.ok}" title="${localization.tooltips.buttons.ok}"/><input type="button" class="Cancel" id="Cancel" value="${localization.text.cancel}" title="${localization.tooltips.buttons.cancel}"/><hr/><div class="Grid" id="Grid"></div></td>
|
||||
<td colspan="2" class="Preview" id="Preview">${svgEditor.i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="${svgEditor.i18next.t('config.jpicker_tooltip_colors_new_color')}"> </span><span class="Current" id="Current" title="${svgEditor.i18next.t('config.jpicker_tooltip_colors_current_color')}"> </span></div>${svgEditor.i18next.t('config.jpicker_current_color')}</td>
|
||||
<td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${svgEditor.i18next.t('common.ok')}" title="${svgEditor.i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="${svgEditor.i18next.t('common.cancel')}" title="${svgEditor.i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
|
||||
</tr>
|
||||
<tr class="Hue">
|
||||
<td class="Radio"><label title="${localization.tooltips.hue.radio}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="${localization.tooltips.hue.textbox}"/> °</td>
|
||||
<td class="Radio"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_hue_radio')}"><input type="radio" value="h"${settings.color.mode === 'h' ? ' checked="checked"' : ''}/>H:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_hue_textbox')}"/> °</td>
|
||||
</tr>
|
||||
<tr class="Saturation">
|
||||
<td class="Radio"><label title="${localization.tooltips.saturation.radio}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="${localization.tooltips.saturation.textbox}"/> %</td>
|
||||
<td class="Radio"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_saturation_radio')}"><input type="radio" value="s"${settings.color.mode === 's' ? ' checked="checked"' : ''}/>S:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_saturation_textbox')}"/> %</td>
|
||||
</tr>
|
||||
<tr class="Value">
|
||||
<td class="Radio"><label title="${localization.tooltips.value.radio}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="${localization.tooltips.value.textbox}"/> %<br/><br/></td>
|
||||
<td class="Radio"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_value_radio')}"><input type="radio" value="v"${settings.color.mode === 'v' ? ' checked="checked"' : ''}/>V:</label><br/><br/></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_value_textbox')}"/> %<br/><br/></td>
|
||||
</tr>
|
||||
<tr class="Red">
|
||||
<td class="Radio"><label title="${localization.tooltips.red.radio}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="${localization.tooltips.red.textbox}"/></td>
|
||||
<td class="Radio"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_red_radio')}"><input type="radio" value="r"${settings.color.mode === 'r' ? ' checked="checked"' : ''}/>R:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
|
||||
</tr>
|
||||
<tr class="Green">
|
||||
<td class="Radio"><label title="${localization.tooltips.green.radio}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="${localization.tooltips.green.textbox}"/></td>
|
||||
<td class="Radio"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_green_radio')}"><input type="radio" value="g"${settings.color.mode === 'g' ? ' checked="checked"' : ''}/>G:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
|
||||
</tr>
|
||||
<tr class="Blue">
|
||||
<td class="Radio"><label title="${localization.tooltips.blue.radio}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="${localization.tooltips.blue.textbox}"/></td>
|
||||
<td class="Radio"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_blue_radio')}"><input type="radio" value="b"${settings.color.mode === 'b' ? ' checked="checked"' : ''}/>B:</label></td>
|
||||
<td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_blue_textbox')}"/></td>
|
||||
</tr>
|
||||
<tr class="Alpha">
|
||||
<td class="Radio">${win.alphaSupport ? `<label title="${localization.tooltips.alpha.radio}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : ' '}</td>
|
||||
<td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="${localization.tooltips.alpha.textbox}"/> %` : ' '}</td>
|
||||
<td class="Radio">${win.alphaSupport ? `<label title="${svgEditor.i18next.t('config.jpicker_tooltip_alpha_radio')}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : ' '}</td>
|
||||
<td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_alpha_textbox')}"/> %` : ' '}</td>
|
||||
</tr>
|
||||
<tr class="Hex">
|
||||
<td colspan="2" class="Text"><label title="${localization.tooltips.hex.textbox}">#:<input type="text" maxlength="6" class="Hex" value="${!isNullish(all) ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${!isNullish(all) ? all.ahex.substring(6) : ''}" title="${localization.tooltips.hex.alpha}"/></td>` : ' '}
|
||||
<td colspan="2" class="Text"><label title="${svgEditor.i18next.t('config.jpicker_tooltip_hex_textbox')}">#:<input type="text" maxlength="6" class="Hex" value="${!isNullish(all) ? all.hex : ''}"/></label>${win.alphaSupport ? `<input type="text" maxlength="2" class="AHex" value="${!isNullish(all) ? all.ahex.substring(6) : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_hex_alpha')}"/></td>` : ' '}
|
||||
</tr>
|
||||
</tbody></table>`;
|
||||
if (win.expandable) {
|
||||
|
|
@ -1871,56 +1874,5 @@ export const jPickerDefaults = {
|
|||
width: 25,
|
||||
height: 24
|
||||
}
|
||||
},
|
||||
localization: {
|
||||
text: {
|
||||
title: 'Drag Markers To Pick A Color',
|
||||
newColor: 'new',
|
||||
currentColor: 'current',
|
||||
ok: 'OK',
|
||||
cancel: 'Cancel'
|
||||
},
|
||||
tooltips: {
|
||||
colors: {
|
||||
newColor: 'New Color - Press “OK” To Commit',
|
||||
currentColor: 'Click To Revert To Original Color'
|
||||
},
|
||||
buttons: {
|
||||
ok: 'Commit To This Color Selection',
|
||||
cancel: 'Cancel And Revert To Original Color'
|
||||
},
|
||||
hue: {
|
||||
radio: 'Set To “Hue” Color Mode',
|
||||
textbox: 'Enter A “Hue” Value (0-360°)'
|
||||
},
|
||||
saturation: {
|
||||
radio: 'Set To “Saturation” Color Mode',
|
||||
textbox: 'Enter A “Saturation” Value (0-100%)'
|
||||
},
|
||||
value: {
|
||||
radio: 'Set To “Value” Color Mode',
|
||||
textbox: 'Enter A “Value” Value (0-100%)'
|
||||
},
|
||||
red: {
|
||||
radio: 'Set To “Red” Color Mode',
|
||||
textbox: 'Enter A “Red” Value (0-255)'
|
||||
},
|
||||
green: {
|
||||
radio: 'Set To “Green” Color Mode',
|
||||
textbox: 'Enter A “Green” Value (0-255)'
|
||||
},
|
||||
blue: {
|
||||
radio: 'Set To “Blue” Color Mode',
|
||||
textbox: 'Enter A “Blue” Value (0-255)'
|
||||
},
|
||||
alpha: {
|
||||
radio: 'Set To “Alpha” Color Mode',
|
||||
textbox: 'Enter A “Alpha” Value (0-100)'
|
||||
},
|
||||
hex: {
|
||||
textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
|
||||
alpha: 'Enter A “Alpha” Value (#00-#ff)'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
|
|||
import PaintBox from './PaintBox.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
.jPicker .Icon {
|
||||
|
|
|
|||
|
|
@ -209,7 +209,31 @@ export default {
|
|||
grid_color: 'Grid color:',
|
||||
done: "Done",
|
||||
change_xxx_color: 'Change xxx color',
|
||||
pick_paint_opavity: 'Pick a {{newValue}} Paint and Opacity'
|
||||
pick_paint_opavity: 'Pick a {{newValue}} Paint and Opacity',
|
||||
open_color_picker: 'Click To Open Color Picker',
|
||||
jpicker_title: 'Drag Markers To Pick A Color',
|
||||
jpicker_new_color: 'new',
|
||||
jpicker_current_color: 'current',
|
||||
jpicker_tooltip_colors_new_color: 'New Color - Press “OK” To Commit',
|
||||
jpicker_tooltip_colors_current_color: 'Click To Revert To Original Color',
|
||||
jpicker_tooltip_buttons_ok: 'Commit To This Color Selection',
|
||||
jpicker_tooltip_buttons_cancel: 'Cancel And Revert To Original Color',
|
||||
jpicker_tooltip_hue_radio: 'Set To “Hue” Color Mode',
|
||||
jpicker_tooltip_hue_textbox: 'Enter A “Hue” Value (0-360°)',
|
||||
jpicker_tooltip_saturation_radio: 'Set To “Saturation” Color Mode',
|
||||
jpicker_tooltip_saturation_textbox: 'Enter A “Saturation” Value (0-100%)',
|
||||
jpicker_tooltip_value_radio: 'Set To “Value” Color Mode',
|
||||
jpicker_tooltip_value_textbox: 'Enter A “Value” Value (0-100%)',
|
||||
jpicker_tooltip_red_radio: 'Set To “Red” Color Mode',
|
||||
jpicker_tooltip_red_textbox: 'Enter A “Red” Value (0-255)',
|
||||
jpicker_tooltip_green_radio: 'Set To “Green” Color Mode',
|
||||
jpicker_tooltip_green_textbox: 'Enter A “Green” Value (0-255)',
|
||||
jpicker_tooltip_blue_radio: 'Set To “Blue” Color Mode',
|
||||
jpicker_tooltip_blue_textbox: 'Enter A “Blue” Value (0-255)',
|
||||
jpicker_tooltip_alpha_radio: 'Set To “Alpha” Color Mode',
|
||||
jpicker_tooltip_alpha_textbox: 'Enter A “Alpha” Value (0-100)',
|
||||
jpicker_tooltip_hex_textbox: 'Enter A “Hex” Color Value (#000000-#ffffff)',
|
||||
jpicker_tooltip_hex_alpha: 'Enter A “Alpha” Value (#00-#ff)'
|
||||
},
|
||||
notification: {
|
||||
invalidAttrValGiven: 'Invalid value given',
|
||||
|
|
|
|||
Loading…
Reference in New Issue