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

Merge branch 'master' of https://github.com/SVG-Edit/svgedit

master
Agriya Dev5 2021-05-22 19:51:29 +05:30
parent 0579213abf 7cf8c8060a
commit 2431c22b7b
7 changed files with 160 additions and 82 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) {

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

@ -1,5 +1,4 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
/* gl#bals svgEditor */
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js'; import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js'; import PaintBox from './PaintBox.js';
@ -643,7 +642,7 @@ div.jGraduate_Slider img {
</style> </style>
<div id="picker"> <div id="picker">
<img src="./images/logo.svg" alt="icon" id="logo"> <img src="./images/logo.svg" alt="icon" id="logo">
<label for="color" title="#svgEditor.i18next.t('config.change_xxx_color')}" id="label"></label> <label for="color" title="" id="label"></label>
<div id="block"> <div id="block">
</div> </div>
</div> </div>
@ -666,15 +665,25 @@ 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');
} }
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (i18next) {
this.i18next = i18next;
this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
}
/** /**
* @function observedAttributes * @function observedAttributes
* @returns {any} observed * @returns {any} observed
*/ */
static get observedAttributes () { static get observedAttributes () {
return [ 'label', 'src', 'type' ]; return [ 'label', 'src', 'type', 'config-change_xxx_color' ];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback
@ -695,6 +704,9 @@ export class SeColorPicker extends HTMLElement {
case 'type': case 'type':
this.$label.setAttribute('title', 'config.pick_paint_opavity'); this.$label.setAttribute('title', 'config.pick_paint_opavity');
break; break;
case 'config-change_xxx_color':
this.$label.setAttribute('title', newValue);
break;
default: default:
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error(`unknown attribute: ${name}`); console.error(`unknown attribute: ${name}`);
@ -797,7 +809,8 @@ export class SeColorPicker extends HTMLElement {
}, },
() => { () => {
this.$color_picker.style.display = 'none'; this.$color_picker.style.display = 'none';
} },
this.i18next
); );
}); });
} }

33
src/editor/components/sePalette.js
View File

@ -1,5 +1,4 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
/* gl#bals svgEditor */
const palette = [ const palette = [
// Todo: Make into configuration item? // Todo: Make into configuration item?
'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff', 'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
@ -78,8 +77,7 @@ template.innerHTML = `
} }
} }
</style> </style>
<div id="palette_holder" title="$ <div id="palette_holder" title="">
#{svgEditor.i18next.t('ui.palette_info')}">
<div id="js-se-palette"> <div id="js-se-palette">
</div> </div>
</div> </div>
@ -127,6 +125,35 @@ export class SEPalette extends HTMLElement {
}); });
} }
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (i18next) {
this.setAttribute('ui-palette_info', i18next.t('ui.palette_info'));
}
/**
* @function observedAttributes
* @returns {any} observed
*/
static get observedAttributes () {
return [ 'ui-palette_info' ];
}
/**
* @function attributeChangedCallback
* @param {string} name
* @param {string} oldValue
* @param {string} newValue
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
let node;
if (name === 'ui-palette_info') {
node = this._shadowRoot.querySelector('#palette_holder');
node.setAttribute('title', newValue);
}
}
/** /**
* @function connectedCallback * @function connectedCallback
* @returns {void} * @returns {void}

1
src/editor/extensions/ext-storage/ext-storage.js
View File

@ -83,6 +83,7 @@ export default {
const storageBox = document.createElement('se-storage-dialog'); const storageBox = document.createElement('se-storage-dialog');
storageBox.setAttribute('id', 'se-storage-dialog'); storageBox.setAttribute('id', 'se-storage-dialog');
document.body.append(storageBox); document.body.append(storageBox);
storageBox.init(svgEditor.i18next);
// manage the change in the storageDialog // manage the change in the storageDialog

74
src/editor/extensions/ext-storage/storageDialog.js
View File

@ -1,15 +1,5 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
/* globals svgEditor */
const template = document.createElement('template'); const template = document.createElement('template');
const notification = svgEditor.i18next.t('notification.editorPreferencesMsg');
const prefs_and_content = svgEditor.i18next.t('properties.prefs_and_content');
const prefs_only = svgEditor.i18next.t('properties.prefs_only');
const no_prefs_or_content = svgEditor.i18next.t('properties.no_prefs_or_content');
const remember_this_choice = svgEditor.i18next.t('tools.remember_this_choice');
const remember_this_choice_title = svgEditor.i18next.t('tools.remember_this_choice_title');
const ok = svgEditor.i18next.t('common.ok');
const cancel = svgEditor.i18next.t('common.cancel');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = ` template.innerHTML = `
<style> <style>
@ -59,26 +49,22 @@ template.innerHTML = `
<div class="overlay"></div> <div class="overlay"></div>
<div id="dialog_container"> <div id="dialog_container">
<div id="dialog_content"> <div id="dialog_content">
<p> <p id="notificationNote"> </p>
${notification}
</p>
<select id="se-storage-pref"> <select id="se-storage-pref">
<option value="prefsAndContent">${prefs_and_content}</option> <option value="prefsAndContent" id="prefsAndContent"></option>
<option value="prefsOnly">${prefs_only}</option> <option value="prefsOnly" id="prefsOnly"></option>
<option value="noPrefsOrContent">${no_prefs_or_content}</option> <option value="noPrefsOrContent" id="noPrefsOrContent"></option>
</select> </select>
<label title="${remember_this_choice_title}"> <label title="" id="se-remember-title">
${remember_this_choice}<input type="checkbox" id="se-remember" value="" checked> <input type="checkbox" id="se-remember" value="" checked>
</label> </label>
</div> </div>
<div id="dialog_buttons"> <div id="dialog_buttons">
<button id="storage_ok"> <button id="storage_ok">
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" /> <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
${ok}
</button> </button>
<button id="storage_cancel"> <button id="storage_cancel">
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" /> <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
${cancel}
</button> </button>
</div> </div>
</div> </div>
@ -103,12 +89,27 @@ export class SeStorageDialog extends HTMLElement {
this.$storageInput = this._shadowRoot.querySelector('#se-storage-pref'); this.$storageInput = this._shadowRoot.querySelector('#se-storage-pref');
this.$rememberInput = this._shadowRoot.querySelector('#se-remember'); this.$rememberInput = this._shadowRoot.querySelector('#se-remember');
} }
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('notify-editor_pref_msg', i18next.t('notification.editorPreferencesMsg'));
this.setAttribute('properties-prefs_and_content', i18next.t('properties.prefs_and_content'));
this.setAttribute('properties-prefs_only', i18next.t('properties.prefs_only'));
this.setAttribute('properties-no_prefs_or_content', i18next.t('properties.no_prefs_or_content'));
this.setAttribute('tools-remember_this_choice', i18next.t('tools.remember_this_choice'));
this.setAttribute('tools-remember_this_choice_title', i18next.t('tools.remember_this_choice_title'));
}
/** /**
* @function observedAttributes * @function observedAttributes
* @returns {any} observed * @returns {any} observed
*/ */
static get observedAttributes () { static get observedAttributes () {
return [ 'dialog', 'storage' ]; return [ 'dialog', 'storage', 'common-ok', 'common-cancel', 'notify-editor_pref_msg', 'properties-prefs_and_content', 'tools-remember_this_choice', 'tools-remember_this_choice_title', 'properties-prefs_only', 'properties-no_prefs_or_content' ];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback
@ -118,6 +119,7 @@ export class SeStorageDialog extends HTMLElement {
* @returns {void} * @returns {void}
*/ */
attributeChangedCallback (name, oldValue, newValue) { attributeChangedCallback (name, oldValue, newValue) {
let node;
switch (name) { switch (name) {
case 'dialog': case 'dialog':
if (newValue === 'open') { if (newValue === 'open') {
@ -133,6 +135,36 @@ export class SeStorageDialog extends HTMLElement {
this.$storageInput.options[0].disabled = true; this.$storageInput.options[0].disabled = true;
} }
break; break;
case 'common-ok':
this.$okBtn.append(newValue);
break;
case 'common-cancel':
this.$cancelBtn.append(newValue);
break;
case 'notify-editor_pref_msg':
node = this._shadowRoot.querySelector('#notificationNote');
node.textContent = newValue;
break;
case 'properties-prefs_and_content':
node = this._shadowRoot.querySelector('#prefsAndContent');
node.textContent = newValue;
break;
case 'properties-prefs_only':
node = this._shadowRoot.querySelector('#prefsOnly');
node.textContent = newValue;
break;
case 'properties-no_prefs_or_content':
node = this._shadowRoot.querySelector('#noPrefsOrContent');
node.textContent = newValue;
break;
case 'tools-remember_this_choice':
node = this._shadowRoot.querySelector('#se-remember-title');
node.prepend(newValue);
break;
case 'tools-remember_this_choice_title':
node = this._shadowRoot.querySelector('#se-remember-title');
node.setAttribute('title', newValue);
break;
default: default:
// super.attributeChangedCallback(name, oldValue, newValue); // super.attributeChangedCallback(name, oldValue, newValue);
break; break;

3
src/editor/panels/BottomPanel.js
View File

@ -215,6 +215,7 @@ class BottomPanel {
`; `;
this.editor.$svgEditor.append(template.content.cloneNode(true)); this.editor.$svgEditor.append(template.content.cloneNode(true));
$id('palette').addEventListener('change', this.handlePalette.bind(this)); $id('palette').addEventListener('change', this.handlePalette.bind(this));
$id('palette').init(i18next);
const { curConfig } = this.editor.configObj; const { curConfig } = this.editor.configObj;
$id('fill_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color })); $id('fill_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initFill.color }));
$id('stroke_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initStroke.color })); $id('stroke_color').setPaint(new jGraduate.Paint({ alpha: 100, solidColor: curConfig.initStroke.color }));
@ -226,6 +227,8 @@ class BottomPanel {
$id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt)); $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
$id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt)); $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
$id('opacity').addEventListener('change', this.handleOpacity.bind(this)); $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
$id('fill_color').init(i18next);
$id('stroke_color').init(i18next);
} }
/** /**
* @type {module} * @type {module}