zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#102 coponent i18n new approach changes

master
Agriya Dev5 2021-05-22 12:53:36 +05:30
parent 61957b7d4e
commit fc2e1fa038
3 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@ -1,7 +1,6 @@
/* eslint-disable no-loop-func */ /* eslint-disable no-loop-func */
/* eslint-disable prefer-destructuring */ /* eslint-disable prefer-destructuring */
/* eslint-disable no-unsanitized/property */ /* eslint-disable no-unsanitized/property */
/* gl#bals svgEditor */
/** /**
* @file jGraduate 0.4 * @file jGraduate 0.4
* *
@ -189,7 +188,7 @@ function mkElem (name, attrs, newparent) {
* @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed * @param {external:jQuery.fn.jGraduate.CancelCallback} [cancelCallback] Called with no arguments when Cancel is pressed
* @returns {external:jQuery} * @returns {external:jQuery}
*/ */
export function jGraduateMethod (elem, options, okCallback, cancelCallback) { export function jGraduateMethod (elem, options, okCallback, cancelCallback, i18next) {
const $this = elem, const $this = elem,
$settings = Object.assign({}, jGraduateDefaults, options || {}), $settings = Object.assign({}, jGraduateDefaults, options || {}),
id = $this.getAttribute('id'), id = $this.getAttribute('id'),
@ -237,9 +236,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
$this.classList.add('jGraduate_Picker'); $this.classList.add('jGraduate_Picker');
// eslint-disable-next-line no-unsanitized/property // eslint-disable-next-line no-unsanitized/property
$this.innerHTML = `<ul class="jGraduate_tabs"> $this.innerHTML = `<ul class="jGraduate_tabs">
<li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">#svgEditor.i18next.t('config.jgraduate_solid_color')}</li> <li class="jGraduate_tab_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">${i18next.t('config.jgraduate_solid_color')}</li>
<li class="jGraduate_tab_lingrad" id="jGraduate_tab_lingrad" data-type="lg">#svgEditor.i18next.t('config.jgraduate_linear_gradient')}</li> <li class="jGraduate_tab_lingrad" id="jGraduate_tab_lingrad" data-type="lg">${i18next.t('config.jgraduate_linear_gradient')}</li>
<li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">#svgEditor.i18next.t('config.jgraduate_radial_gradient')}</li> <li class="jGraduate_tab_radgrad" id="jGraduate_tab_radgrad" data-type="rg">${i18next.t('config.jgraduate_radial_gradient')}</li>
</ul> </ul>
<div class="jGraduate_colPick" id="jGraduate_colPick"></div> <div class="jGraduate_colPick" id="jGraduate_colPick"></div>
<div class="jGraduate_gradPick" id="jGraduate_gradPick"></div> <div class="jGraduate_gradPick" id="jGraduate_gradPick"></div>
@ -256,88 +255,88 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
</div> </div>
<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field"> <div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">
<div class="jGraduate_StopSection"> <div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_begin_point')}</label> <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_begin_point')}</label>
<div class="jGraduate_Form_Section"> <div class="jGraduate_Form_Section">
<label>x:</label> <label>x:</label>
<input type="text" id="${id}_jGraduate_x1" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_starting_x')}"/> <input type="text" id="${id}_jGraduate_x1" size="3" title="${i18next.t('config.jgraduate_enter_starting_x')}"/>
<label>y:</label> <label>y:</label>
<input type="text" id="${id}_jGraduate_y1" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_starting_y')}"/> <input type="text" id="${id}_jGraduate_y1" size="3" title="${i18next.t('config.jgraduate_enter_starting_y')}"/>
</div> </div>
</div> </div>
<div class="jGraduate_StopSection"> <div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_end_point')}</label> <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_end_point')}</label>
<div class="jGraduate_Form_Section"> <div class="jGraduate_Form_Section">
<label>x:</label> <label>x:</label>
<input type="text" id="${id}_jGraduate_x2" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_ending_x')}"/> <input type="text" id="${id}_jGraduate_x2" size="3" title="${i18next.t('config.jgraduate_enter_ending_x')}"/>
<label>y:</label> <label>y:</label>
<input type="text" id="${id}_jGraduate_y2" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_ending_y')}"/> <input type="text" id="${id}_jGraduate_y2" size="3" title="${i18next.t('config.jgraduate_enter_ending_y')}"/>
</div> </div>
</div> </div>
</div> </div>
<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field"> <div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">
<div class="jGraduate_StopSection"> <div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_center_point')}</label> <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_center_point')}</label>
<div class="jGraduate_Form_Section"> <div class="jGraduate_Form_Section">
<label>x:</label> <label>x:</label>
<input type="text" id="${id}_jGraduate_cx" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_value_x')}"/> <input type="text" id="${id}_jGraduate_cx" size="3" title="${i18next.t('config.jgraduate_enter_value_x')}"/>
<label>y:</label> <label>y:</label>
<input type="text" id="${id}_jGraduate_cy" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_value_y')}"/> <input type="text" id="${id}_jGraduate_cy" size="3" title="${i18next.t('config.jgraduate_enter_value_y')}"/>
</div> </div>
</div> </div>
<div class="jGraduate_StopSection"> <div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_focal_point')}</label> <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_focal_point')}</label>
<div class="jGraduate_Form_Section"> <div class="jGraduate_Form_Section">
<label>#svgEditor.i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/> <label>${i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/>
<label>x:</label> <label>x:</label>
<input type="text" id="${id}_jGraduate_fx" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_focal_x')}"/> <input type="text" id="${id}_jGraduate_fx" size="3" title="${i18next.t('config.jgraduate_enter_focal_x')}"/>
<label>y:</label> <label>y:</label>
<input type="text" id="${id}_jGraduate_fy" size="3" title="#svgEditor.i18next.t('config.jgraduate_enter_focal_y')}"/> <input type="text" id="${id}_jGraduate_fy" size="3" title="${i18next.t('config.jgraduate_enter_focal_y')}"/>
</div> </div>
</div> </div>
</div> </div>
<div class="jGraduate_StopSection jGraduate_SpreadMethod"> <div class="jGraduate_StopSection jGraduate_SpreadMethod">
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_spread_method')}</label> <label class="jGraduate_Form_Heading">${i18next.t('config.jgraduate_spread_method')}</label>
<div class="jGraduate_Form_Section"> <div class="jGraduate_Form_Section">
<select class="jGraduate_spreadMethod" id="jGraduate_spreadMethod"> <select class="jGraduate_spreadMethod" id="jGraduate_spreadMethod">
<option value=pad selected>#svgEditor.i18next.t('properties.jgraduate_pad')}</option> <option value=pad selected>${i18next.t('properties.jgraduate_pad')}</option>
<option value=reflect>#svgEditor.i18next.t('properties.jgraduate_reflect')}</option> <option value=reflect>${i18next.t('properties.jgraduate_reflect')}</option>
<option value=repeat>#svgEditor.i18next.t('properties.jgraduate_repeat')}</option> <option value=repeat>${i18next.t('properties.jgraduate_repeat')}</option>
</select> </select>
</div> </div>
</div> </div>
<div class="jGraduate_Form"> <div class="jGraduate_Form">
<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field"> <div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_radius')}</label> <label class="prelabel">${i18next.t('config.jgraduate_radius')}</label>
<div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="#svgEditor.i18next.t('config.jgraduate_set_radius')}"> <div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="${i18next.t('config.jgraduate_set_radius')}">
<img id="${id}_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="${$settings.images.clientPath}rangearrows2.gif"> <img id="${id}_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div> </div>
<label><input type="text" id="${id}_jGraduate_RadiusInput" size="3" value="100"/>%</label> <label><input type="text" id="${id}_jGraduate_RadiusInput" size="3" value="100"/>%</label>
</div> </div>
<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field"> <div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_ellip')}</label> <label class="prelabel">${i18next.t('config.jgraduate_ellip')}</label>
<div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="#svgEditor.i18next.t('config.jgraduate_set_ellip')}"> <div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="${i18next.t('config.jgraduate_set_ellip')}">
<img id="${id}_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="${$settings.images.clientPath}rangearrows2.gif"> <img id="${id}_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div> </div>
<label><input type="text" id="${id}_jGraduate_EllipInput" size="3" value="0"/>%</label> <label><input type="text" id="${id}_jGraduate_EllipInput" size="3" value="0"/>%</label>
</div> </div>
<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field"> <div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_angle')}</label> <label class="prelabel">${i18next.t('config.jgraduate_angle')}</label>
<div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="#svgEditor.i18next.t('config.jgraduate_set_angle')}"> <div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="${i18next.t('config.jgraduate_set_angle')}">
<img id="${id}_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="${$settings.images.clientPath}rangearrows2.gif"> <img id="${id}_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div> </div>
<label><input type="text" id="${id}_jGraduate_AngleInput" size="3" value="0"/>#svgEditor.i18next.t('config.jgraduate_deg')}</label> <label><input type="text" id="${id}_jGraduate_AngleInput" size="3" value="0"/>${i18next.t('config.jgraduate_deg')}</label>
</div> </div>
<div class="jGraduate_Slider jGraduate_OpacField"> <div class="jGraduate_Slider jGraduate_OpacField">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_opac')}</label> <label class="prelabel">${i18next.t('config.jgraduate_opac')}</label>
<div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="#svgEditor.i18next.t('config.jgraduate_set_opac')}"> <div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="${i18next.t('config.jgraduate_set_opac')}">
<img id="${id}_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="${$settings.images.clientPath}rangearrows2.gif"> <img id="${id}_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div> </div>
<label><input type="text" id="${id}_jGraduate_OpacInput" size="3" value="100"/>%</label> <label><input type="text" id="${id}_jGraduate_OpacInput" size="3" value="100"/>%</label>
</div> </div>
</div> </div>
<div class="jGraduate_OkCancel"> <div class="jGraduate_OkCancel">
<input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="#svgEditor.i18next.t("common.ok")}"/> <input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="${i18next.t("common.ok")}"/>
<input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="#svgEditor.i18next.t("common.cancel")}"/> <input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="${i18next.t("common.cancel")}"/>
</div>`; </div>`;
const div = document.createElement('div'); const div = document.createElement('div');
div.innerHTML = html; div.innerHTML = html;
@ -637,7 +636,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
}, null, function () { }, null, function () {
$this.querySelector('#jGraduate_LightBox').style.display = 'none'; $this.querySelector('#jGraduate_LightBox').style.display = 'none';
$this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none'; $this.querySelector('#' + id + '_jGraduate_stopPicker').style.display = 'none';
}); },
i18next
);
}); });
const jqStopEls = curGradient.querySelectorAll('stop'); const jqStopEls = curGradient.querySelectorAll('stop');
for (const jqStopEl of jqStopEls) { for (const jqStopEl of jqStopEls) {
@ -1197,7 +1198,8 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
okClicked(); okClicked();
}, },
null, null,
function () { cancelClicked(); } function () { cancelClicked(); },
i18next
); );
// JFH !!!! // JFH !!!!

38
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@ -603,7 +603,7 @@ const { Color, List, ColorMethods } = jPicker; // local copies for YUI compresso
* @param {module:jPicker.CancelCallback} [cancelCallback] * @param {module:jPicker.CancelCallback} [cancelCallback]
* @returns {void} * @returns {void}
*/ */
export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback) { export function jPickerMethod (elem, options, commitCallback, liveCallback, cancelCallback, i18next) {
let sets = mergeDeep({}, jPickerDefaults); // local copies for YUI compressor let sets = mergeDeep({}, jPickerDefaults); // local copies for YUI compressor
sets = mergeDeep(sets, options); sets = mergeDeep(sets, options);
@ -632,7 +632,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
content.innerHTML = `<span class="Icon" id="jq-ae-Icon"> content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
<span class="Color" id="jq-ae-Color">&nbsp;</span> <span class="Color" id="jq-ae-Color">&nbsp;</span>
<span class="Alpha" id="jq-ae-Alpha">&nbsp;</span> <span class="Alpha" id="jq-ae-Alpha">&nbsp;</span>
<span class="Image" id="jq-ae-Image" title="#svgEditor.i18next.t('config.open_color_picker')}">&nbsp;</span> <span class="Image" id="jq-ae-Image" title="${i18next.t('config.open_color_picker')}">&nbsp;</span>
<span class="Container" id="Container">&nbsp;</span> <span class="Container" id="Container">&nbsp;</span>
</span>`; </span>`;
that.insertAdjacentElement('afterend', content); that.insertAdjacentElement('afterend', content);
@ -1331,39 +1331,39 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
<tr> <tr>
<td rowspan="9"><h2 class="Title">${win.title || 'config.jpicker_title'}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</span><img src="${images.clientPath + images.colorMap.arrow.file}" class="Arrow"/></div></td> <td rowspan="9"><h2 class="Title">${win.title || 'config.jpicker_title'}</h2><div class="Map" id="Map"><span class="Map1" id="MMap1">&nbsp;</span><span class="Map2" id="MMap2">&nbsp;</span><span class="Map3" id="MMap3">&nbsp;</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">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></div></td> <td rowspan="9"><div class="Bar" id="Bar"><span class="Map1" id="Map1">&nbsp;</span><span class="Map2" id="Map2">&nbsp;</span><span class="Map3" id="Map3">&nbsp;</span><span class="Map4" id="Map4">&nbsp;</span><span class="Map5" id="Map5">&nbsp;</span><span class="Map6" id="Map6">&nbsp;</span><img src="${images.clientPath + images.colorBar.arrow.file}" class="Arrow"/></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')}">&nbsp;</span><span class="Current" id="Current" title="#svgEditor.i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>#svgEditor.i18next.t('config.jpicker_current_color')}</td> <td colspan="2" class="Preview" id="Preview">${i18next.t('config.jpicker_new_color')}<div id="preview-div"><span class="Active" id="Active" title="${i18next.t('config.jpicker_tooltip_colors_new_color')}">&nbsp;</span><span class="Current" id="Current" title="${i18next.t('config.jpicker_tooltip_colors_current_color')}">&nbsp;</span></div>${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> <td rowspan="9" class="Button" id="Button"><input type="button" class="Ok" id="Ok" value="${i18next.t('common.ok')}" title="${i18next.t('config.jpicker_tooltip_buttons_ok')}"/><input type="button" class="Cancel" id="Cancel" value="${i18next.t('common.cancel')}" title="${i18next.t('config.jpicker_tooltip_buttons_cancel')}"/><hr/><div class="Grid" id="Grid"></div></td>
</tr> </tr>
<tr class="Hue"> <tr class="Hue">
<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="Radio"><label title="${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')}"/>&nbsp;&deg;</td> <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.h : ''}" title="${i18next.t('config.jpicker_tooltip_hue_textbox')}"/>&nbsp;&deg;</td>
</tr> </tr>
<tr class="Saturation"> <tr class="Saturation">
<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="Radio"><label title="${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')}"/>&nbsp;%</td> <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="${i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</td>
</tr> </tr>
<tr class="Value"> <tr class="Value">
<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="Radio"><label title="${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')}"/>&nbsp;%<br/><br/></td> <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.v : ''}" title="${i18next.t('config.jpicker_tooltip_value_textbox')}"/>&nbsp;%<br/><br/></td>
</tr> </tr>
<tr class="Red"> <tr class="Red">
<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="Radio"><label title="${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> <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="${i18next.t('config.jpicker_tooltip_red_textbox')}"/></td>
</tr> </tr>
<tr class="Green"> <tr class="Green">
<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="Radio"><label title="${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> <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.g : ''}" title="${i18next.t('config.jpicker_tooltip_green_textbox')}"/></td>
</tr> </tr>
<tr class="Blue"> <tr class="Blue">
<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="Radio"><label title="${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> <td class="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.b : ''}" title="${i18next.t('config.jpicker_tooltip_blue_textbox')}"/></td>
</tr> </tr>
<tr class="Alpha"> <tr class="Alpha">
<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>` : '&nbsp;'}</td> <td class="Radio">${win.alphaSupport ? `<label title="${i18next.t('config.jpicker_tooltip_alpha_radio')}"><input type="radio" value="a"${settings.color.mode === 'a' ? ' checked="checked"' : ''}/>A:</label>` : '&nbsp;'}</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')}"/>&nbsp;%` : '&nbsp;'}</td> <td class="Text">${win.alphaSupport ? `<input type="text" maxlength="${3 + win.alphaPrecision}" value="${!isNullish(all) ? toFixedNumeric((all.a * 100) / 255, win.alphaPrecision) : ''}" title="${i18next.t('config.jpicker_tooltip_alpha_textbox')}"/>&nbsp;%` : '&nbsp;'}</td>
</tr> </tr>
<tr class="Hex"> <tr class="Hex">
<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>` : '&nbsp;'} <td colspan="2" class="Text"><label title="${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="${i18next.t('config.jpicker_tooltip_hex_alpha')}"/></td>` : '&nbsp;'}
</tr> </tr>
</tbody></table>`; </tbody></table>`;
if (win.expandable) { if (win.expandable) {

5
src/editor/components/seColorPicker.js
View File

@ -665,6 +665,7 @@ export class SeColorPicker extends HTMLElement {
this.$label = this._shadowRoot.getElementById('label'); this.$label = this._shadowRoot.getElementById('label');
this.$block = this._shadowRoot.getElementById('block'); this.$block = this._shadowRoot.getElementById('block');
this.paintBox = null; this.paintBox = null;
this.i18next = null;
this.$picker = this._shadowRoot.getElementById('picker'); this.$picker = this._shadowRoot.getElementById('picker');
this.$color_picker = this._shadowRoot.getElementById('color_picker'); this.$color_picker = this._shadowRoot.getElementById('color_picker');
} }
@ -674,6 +675,7 @@ export class SeColorPicker extends HTMLElement {
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.i18next = i18next;
this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color')); this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
} }
/** /**
@ -807,7 +809,8 @@ export class SeColorPicker extends HTMLElement {
}, },
() => { () => {
this.$color_picker.style.display = 'none'; this.$color_picker.style.display = 'none';
} },
this.i18next
); );
}); });
} }