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

temporary fix (see comment) 

rollup behavior makes svgEditor global variable inaccessible -> dist does not work.
This fix is temporary by removing use of the variable until we solve this rollup config issue or find a different approach
master
JFH 2021-05-20 23:43:31 +02:00
parent 267f0bc14b
commit 1f5134bff3
11 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
/* eslint-disable no-loop-func */
/* eslint-disable prefer-destructuring */
/* eslint-disable no-unsanitized/property */
/* globals svgEditor */
/* gl#bals svgEditor */
/**
* @file jGraduate 0.4
*
@ -237,9 +237,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
$this.classList.add('jGraduate_Picker');
// eslint-disable-next-line no-unsanitized/property
$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_lingrad" id="jGraduate_tab_lingrad" data-type="lg">${svgEditor.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_color jGraduate_tab_current" id="jGraduate_tab_color" data-type="col">#svgEditor.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_radgrad" id="jGraduate_tab_radgrad" data-type="rg">#svgEditor.i18next.t('config.jgraduate_radial_gradient')}</li>
</ul>
<div class="jGraduate_colPick" id="jGraduate_colPick"></div>
<div class="jGraduate_gradPick" id="jGraduate_gradPick"></div>
@ -256,88 +256,88 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) {
</div>
<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">
<div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">${svgEditor.i18next.t('config.jgraduate_begin_point')}</label>
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_begin_point')}</label>
<div class="jGraduate_Form_Section">
<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="#svgEditor.i18next.t('config.jgraduate_enter_starting_x')}"/>
<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="#svgEditor.i18next.t('config.jgraduate_enter_starting_y')}"/>
</div>
</div>
<div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">${svgEditor.i18next.t('config.jgraduate_end_point')}</label>
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_end_point')}</label>
<div class="jGraduate_Form_Section">
<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="#svgEditor.i18next.t('config.jgraduate_enter_ending_x')}"/>
<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="#svgEditor.i18next.t('config.jgraduate_enter_ending_y')}"/>
</div>
</div>
</div>
<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">
<div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">${svgEditor.i18next.t('config.jgraduate_center_point')}</label>
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_center_point')}</label>
<div class="jGraduate_Form_Section">
<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="#svgEditor.i18next.t('config.jgraduate_enter_value_x')}"/>
<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="#svgEditor.i18next.t('config.jgraduate_enter_value_y')}"/>
</div>
</div>
<div class="jGraduate_StopSection">
<label class="jGraduate_Form_Heading">${svgEditor.i18next.t('config.jgraduate_focal_point')}</label>
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_focal_point')}</label>
<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>#svgEditor.i18next.t('config.jgraduate_match_center')} <input type="checkbox" checked="checked" id="${id}_jGraduate_match_ctr"/></label><br/>
<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="#svgEditor.i18next.t('config.jgraduate_enter_focal_x')}"/>
<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="#svgEditor.i18next.t('config.jgraduate_enter_focal_y')}"/>
</div>
</div>
</div>
<div class="jGraduate_StopSection jGraduate_SpreadMethod">
<label class="jGraduate_Form_Heading">${svgEditor.i18next.t('config.jgraduate_spread_method')}</label>
<label class="jGraduate_Form_Heading">#svgEditor.i18next.t('config.jgraduate_spread_method')}</label>
<div class="jGraduate_Form_Section">
<select class="jGraduate_spreadMethod" id="jGraduate_spreadMethod">
<option value=pad selected>${svgEditor.i18next.t('properties.jgraduate_pad')}</option>
<option value=reflect>${svgEditor.i18next.t('properties.jgraduate_reflect')}</option>
<option value=repeat>${svgEditor.i18next.t('properties.jgraduate_repeat')}</option>
<option value=pad selected>#svgEditor.i18next.t('properties.jgraduate_pad')}</option>
<option value=reflect>#svgEditor.i18next.t('properties.jgraduate_reflect')}</option>
<option value=repeat>#svgEditor.i18next.t('properties.jgraduate_repeat')}</option>
</select>
</div>
</div>
<div class="jGraduate_Form">
<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">
<label class="prelabel">${svgEditor.i18next.t('config.jgraduate_radius')}</label>
<div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="${svgEditor.i18next.t('config.jgraduate_set_radius')}">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_radius')}</label>
<div id="${id}_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="#svgEditor.i18next.t('config.jgraduate_set_radius')}">
<img id="${id}_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div>
<label><input type="text" id="${id}_jGraduate_RadiusInput" size="3" value="100"/>%</label>
</div>
<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">
<label class="prelabel">${svgEditor.i18next.t('config.jgraduate_ellip')}</label>
<div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="${svgEditor.i18next.t('config.jgraduate_set_ellip')}">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_ellip')}</label>
<div id="${id}_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="#svgEditor.i18next.t('config.jgraduate_set_ellip')}">
<img id="${id}_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div>
<label><input type="text" id="${id}_jGraduate_EllipInput" size="3" value="0"/>%</label>
</div>
<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">
<label class="prelabel">${svgEditor.i18next.t('config.jgraduate_angle')}</label>
<div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="${svgEditor.i18next.t('config.jgraduate_set_angle')}">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_angle')}</label>
<div id="${id}_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="#svgEditor.i18next.t('config.jgraduate_set_angle')}">
<img id="${id}_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</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"/>#svgEditor.i18next.t('config.jgraduate_deg')}</label>
</div>
<div class="jGraduate_Slider jGraduate_OpacField">
<label class="prelabel">${svgEditor.i18next.t('config.jgraduate_opac')}</label>
<div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="${svgEditor.i18next.t('config.jgraduate_set_opac')}">
<label class="prelabel">#svgEditor.i18next.t('config.jgraduate_opac')}</label>
<div id="${id}_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="#svgEditor.i18next.t('config.jgraduate_set_opac')}">
<img id="${id}_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="${$settings.images.clientPath}rangearrows2.gif">
</div>
<label><input type="text" id="${id}_jGraduate_OpacInput" size="3" value="100"/>%</label>
</div>
</div>
<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_Cancel" class="jGraduate_Cancel" value="${svgEditor.i18next.t("common.cancel")}"/>
<input type="button" id="${id}_jGraduate_Ok" class="jGraduate_Ok" value="#svgEditor.i18next.t("common.ok")}"/>
<input type="button" id="${id}_jGraduate_Cancel" class="jGraduate_Cancel" value="#svgEditor.i18next.t("common.cancel")}"/>
</div>`;
const div = document.createElement('div');
div.innerHTML = html;

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

@ -17,7 +17,7 @@
*/
/* eslint-disable no-bitwise */
/* eslint-disable max-len */
/* globals svgEditor */
/* gl#bals svgEditor */
import ColorValuePicker from './ColorValuePicker.js';
import Slider from './Slider.js';
import { findPos, mergeDeep } from './Util.js';
@ -632,7 +632,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
content.innerHTML = `<span class="Icon" id="jq-ae-Icon">
<span class="Color" id="jq-ae-Color">&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="#svgEditor.i18next.t('config.open_color_picker')}">&nbsp;</span>
<span class="Container" id="Container">&nbsp;</span>
</span>`;
that.insertAdjacentElement('afterend', content);
@ -1329,41 +1329,41 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
<tbody>
${win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : ''}
<tr>
<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">&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 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 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 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 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="${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')}"/>&nbsp;&deg;</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')}"/>&nbsp;&deg;</td>
</tr>
<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="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.s : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_saturation_textbox')}"/>&nbsp;%</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')}"/>&nbsp;%</td>
</tr>
<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="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="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')}"/>&nbsp;%<br/><br/></td>
</tr>
<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="Text"><input type="text" maxlength="3" value="${!isNullish(all) ? all.r : ''}" title="${svgEditor.i18next.t('config.jpicker_tooltip_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="${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>
<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="${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>
<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="${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="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="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="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>
</tr>
<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="#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;'}
</tr>
</tbody></table>`;
if (win.expandable) {

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

@ -1,5 +1,5 @@
/* eslint-disable max-len */
/* globals svgEditor */
/* gl#bals svgEditor */
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js';
@ -643,7 +643,7 @@ div.jGraduate_Slider img {
</style>
<div id="picker">
<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="#svgEditor.i18next.t('config.change_xxx_color')}" id="label"></label>
<div id="block">
</div>
</div>
@ -693,7 +693,7 @@ export class SeColorPicker extends HTMLElement {
this.setAttribute('title', newValue);
break;
case 'type':
this.$label.setAttribute('title', svgEditor.i18next.t('config.pick_paint_opavity', { newValue: newValue }));
this.$label.setAttribute('title', 'config.pick_paint_opavity');
break;
default:
// eslint-disable-next-line no-console

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

@ -1,5 +1,5 @@
/* eslint-disable max-len */
/* globals svgEditor */
/* gl#bals svgEditor */
const palette = [
// Todo: Make into configuration item?
'none', '#000000', '#3f3f3f', '#7f7f7f', '#bfbfbf', '#ffffff',
@ -78,7 +78,8 @@ template.innerHTML = `
}
}
</style>
<div id="palette_holder" title="${svgEditor.i18next.t('ui.palette_info')}">
<div id="palette_holder" title="$
#{svgEditor.i18next.t('ui.palette_info')}">
<div id="js-se-palette">
</div>
</div>

24
src/editor/dialogs/cmenuDialog.js
View File

@ -1,4 +1,4 @@
/* globals svgEditor */
/* gl#bals svgEditor */
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
@ -68,53 +68,53 @@ template.innerHTML = `
<ul id="cmenu_canvas" class="contextMenu">
<li>
<a href="#cut" id="se-cut">
${svgEditor.i18next.t('tools.cut')}<span class="shortcut">META+X</span>
#{svgEditor.i18next.t('tools.cut')}<span class="shortcut">META+X</span>
</a>
</li>
<li>
<a href="#copy" id="se-copy">
${svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
#{svgEditor.i18next.t('tools.copy')}<span class="shortcut">META+C</span>
</a>
</li>
<li>
<a href="#paste" id="se-paste">${svgEditor.i18next.t('tools.paste')}</a>
<a href="#paste" id="se-paste">#{svgEditor.i18next.t('tools.paste')}</a>
</li>
<li>
<a href="#paste_in_place" id="se-paste-in-place">${svgEditor.i18next.t('tools.paste_in_place')}</a>
<a href="#paste_in_place" id="se-paste-in-place">#{svgEditor.i18next.t('tools.paste_in_place')}</a>
</li>
<li class="separator">
<a href="#delete" id="se-delete">
${svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
#{svgEditor.i18next.t('tools.delete')}<span class="shortcut">BACKSPACE</span>
</a>
</li>
<li class="separator">
<a href="#group" id="se-group">
${svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
#{svgEditor.i18next.t('tools.group')}<span class="shortcut">G</span>
</a>
</li>
<li>
<a href="#ungroup" id="se-ungroup">
${svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
#{svgEditor.i18next.t('tools.ungroup')}<span class="shortcut">G</span>
</a>
</li>
<li class="separator">
<a href="#move_front" id="se-move-front">
${svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
#{svgEditor.i18next.t('tools.move_front')}<span class="shortcut">CTRL+SHFT+]</span>
</a>
</li>
<li>
<a href="#move_up" id="se-move-up">
${svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
#{svgEditor.i18next.t('tools.move_up')}<span class="shortcut">CTRL+]</span>
</a>
</li>
<li>
<a href="#move_down" id="se-move-down">
${svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
#{svgEditor.i18next.t('tools.move_down')}<span class="shortcut">CTRL+[</span>
</a>
</li>
<li>
<a href="#move_back" id="se-move-back">
${svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
#{svgEditor.i18next.t('tools.move_back')}<span class="shortcut">CTRL+SHFT+[</span>
</a>
</li>
</ul>

10
src/editor/dialogs/cmenuLayersDialog.js
View File

@ -1,4 +1,4 @@
/* globals svgEditor */
/* gl#bals svgEditor */
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
@ -66,10 +66,10 @@ template.innerHTML = `
}
</style>
<ul id="cmenu_layers" class="contextMenu">
<li><a href="#dupe" id="se-dupe">${svgEditor.i18next.t('layers.dupe')}</a></li>
<li><a href="#delete" id="se-layer-delete">${svgEditor.i18next.t('layers.del')}</a></li>
<li><a href="#merge_down" id="se-merge-down">${svgEditor.i18next.t('layers.merge_down')}</a></li>
<li><a href="#merge_all" id="se-merge-all">${svgEditor.i18next.t('layers.merge_all')}</a></li>
<li><a href="#dupe" id="se-dupe">#{svgEditor.i18next.t('layers.dupe')}</a></li>
<li><a href="#delete" id="se-layer-delete">#{svgEditor.i18next.t('layers.del')}</a></li>
<li><a href="#merge_down" id="se-merge-down">#{svgEditor.i18next.t('layers.merge_down')}</a></li>
<li><a href="#merge_all" id="se-merge-all">#{svgEditor.i18next.t('layers.merge_all')}</a></li>
</ul>
`;
/**

40
src/editor/dialogs/editorPreferencesDialog.js
View File

@ -1,4 +1,4 @@
/* globals svgEditor */
/* gl#bals svgEditor */
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
@ -150,16 +150,16 @@ template.innerHTML = `
<div id="svg_prefs_container">
<div id="tool_prefs_back" class="toolbar_button">
<button id="tool_prefs_save">
${svgEditor.i18next.t('common.ok')}
#{svgEditor.i18next.t('common.ok')}
</button>
<button id="tool_prefs_cancel">
${svgEditor.i18next.t('common.cancel')}
#{svgEditor.i18next.t('common.cancel')}
</button>
</div>
<fieldset>
<legend id="svginfo_editor_prefs">${svgEditor.i18next.t('config.editor_prefs')}</legend>
<legend id="svginfo_editor_prefs">#{svgEditor.i18next.t('config.editor_prefs')}</legend>
<label>
<span id="svginfo_lang">${svgEditor.i18next.t('config.language')}</span>
<span id="svginfo_lang">#{svgEditor.i18next.t('config.language')}</span>
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
<select id="lang_select">
<option id="lang_ar" value="ar">العربية</option>
@ -185,46 +185,46 @@ template.innerHTML = `
</select>
</label>
<label>
<span id="svginfo_icons">${svgEditor.i18next.t('config.icon_size')}</span>
<span id="svginfo_icons">#{svgEditor.i18next.t('config.icon_size')}</span>
<select id="iconsize">
<option id="icon_small" value="s">${svgEditor.i18next.t('config.icon_small')}</option>
<option id="icon_medium" value="m" selected="selected">${svgEditor.i18next.t('config.icon_medium')}</option>
<option id="icon_large" value="l">${svgEditor.i18next.t('config.icon_large')}</option>
<option id="icon_xlarge" value="xl">${svgEditor.i18next.t('config.icon_xlarge')}</option>
<option id="icon_small" value="s">#{svgEditor.i18next.t('config.icon_small')}</option>
<option id="icon_medium" value="m" selected="selected">#{svgEditor.i18next.t('config.icon_medium')}</option>
<option id="icon_large" value="l">#{svgEditor.i18next.t('config.icon_large')}</option>
<option id="icon_xlarge" value="xl">#{svgEditor.i18next.t('config.icon_xlarge')}</option>
</select>
</label>
<fieldset id="change_background">
<legend id="svginfo_change_background">${svgEditor.i18next.t('config.background')}</legend>
<legend id="svginfo_change_background">#{svgEditor.i18next.t('config.background')}</legend>
<div id="bg_blocks"></div>
<label>
<span id="svginfo_bg_url">${svgEditor.i18next.t('common.url')}</span>
<span id="svginfo_bg_url">#{svgEditor.i18next.t('common.url')}</span>
<input type="text" id="canvas_bg_url" />
</label>
<p id="svginfo_bg_note">${svgEditor.i18next.t('config.editor_bg_note')}</p>
<p id="svginfo_bg_note">#{svgEditor.i18next.t('config.editor_bg_note')}</p>
</fieldset>
<fieldset id="change_grid">
<legend id="svginfo_grid_settings">${svgEditor.i18next.t('config.grid')}</legend>
<legend id="svginfo_grid_settings">#{svgEditor.i18next.t('config.grid')}</legend>
<label for="svginfo_snap_onoff">
<span id="svginfo_snap_onoff">${svgEditor.i18next.t('config.snapping_onoff')}</span>
<span id="svginfo_snap_onoff">#{svgEditor.i18next.t('config.snapping_onoff')}</span>
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
</label>
<label for="grid_snapping_step">
<span id="svginfo_snap_step">${svgEditor.i18next.t('config.snapping_stepsize')}</span>
<span id="svginfo_snap_step">#{svgEditor.i18next.t('config.snapping_stepsize')}</span>
<input type="text" id="grid_snapping_step" size="3" value="10" />
</label>
<label>
<span id="svginfo_grid_color">${svgEditor.i18next.t('config.grid_color')}</span>
<span id="svginfo_grid_color">#{svgEditor.i18next.t('config.grid_color')}</span>
<input type="text" id="grid_color" size="3" value="#000" />
</label>
</fieldset>
<fieldset id="units_rulers">
<legend id="svginfo_units_rulers">${svgEditor.i18next.t('config.units_and_rulers')}</legend>
<legend id="svginfo_units_rulers">#{svgEditor.i18next.t('config.units_and_rulers')}</legend>
<label>
<span id="svginfo_rulers_onoff">${svgEditor.i18next.t('config.show_rulers')}</span>
<span id="svginfo_rulers_onoff">#{svgEditor.i18next.t('config.show_rulers')}</span>
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
</label>
<label>
<span id="svginfo_unit">${svgEditor.i18next.t('config.base_unit')}</span>
<span id="svginfo_unit">#{svgEditor.i18next.t('config.base_unit')}</span>
<select id="base_unit">
<option value="px">Pixels</option>
<option value="cm">Centimeters</option>

10
src/editor/dialogs/exportDialog.js
View File

@ -1,4 +1,4 @@
/* globals svgEditor */
/* gl#bals svgEditor */
import './se-elix/define/NumberSpinBox.js';
const template = document.createElement('template');
@ -59,7 +59,7 @@ template.innerHTML = `
<div id="dialog_container">
<div id="dialog_content">
<p class="se-select">
${svgEditor.i18next.t('ui.export_type_label')}
#{svgEditor.i18next.t('ui.export_type_label')}
</p>
<p class="se-select">
<select id="se-storage-pref">
@ -70,14 +70,14 @@ template.innerHTML = `
<option value="PDF">PDF</option>
</select>
</p>
<p id="se-quality">${svgEditor.i18next.t('ui.quality')}<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
<p id="se-quality">#{svgEditor.i18next.t('ui.quality')}<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
</div>
<div id="dialog_buttons">
<button id="export_ok">
${svgEditor.i18next.t('common.ok')}
#{svgEditor.i18next.t('common.ok')}
</button>
<button id="export_cancel">
${svgEditor.i18next.t('common.cancel')}
#{svgEditor.i18next.t('common.cancel')}
</button>
</div>
</div>

26
src/editor/dialogs/imagePropertiesDialog.js
View File

@ -1,4 +1,4 @@
/* globals svgEditor */
/* gl#bals svgEditor */
import { isValidUnit } from '../../common/units.js';
const template = document.createElement('template');
@ -71,46 +71,46 @@ template.innerHTML = `
<elix-dialog id="svg_docprops" aria-label="Sample dialog" closed>
<div id="svg_docprops_container">
<div id="tool_docprops_back" class="toolbar_button">
<button id="tool_docprops_save">${svgEditor.i18next.t('common.ok')}</button>
<button id="tool_docprops_cancel">${svgEditor.i18next.t('common.cancel')}</button>
<button id="tool_docprops_save">#{svgEditor.i18next.t('common.ok')}</button>
<button id="tool_docprops_cancel">#{svgEditor.i18next.t('common.cancel')}</button>
</div>
<fieldset id="svg_docprops_docprops">
<legend id="svginfo_image_props">${svgEditor.i18next.t('config.image_props')}</legend>
<legend id="svginfo_image_props">#{svgEditor.i18next.t('config.image_props')}</legend>
<label>
<span id="svginfo_title">${svgEditor.i18next.t('config.doc_title')}</span>
<span id="svginfo_title">#{svgEditor.i18next.t('config.doc_title')}</span>
<input type="text" id="canvas_title" />
</label>
<fieldset id="change_resolution">
<legend id="svginfo_dim">${svgEditor.i18next.t('config.doc_dims')}</legend>
<legend id="svginfo_dim">#{svgEditor.i18next.t('config.doc_dims')}</legend>
<label>
<span id="svginfo_width">${svgEditor.i18next.t('common.width')}</span>
<span id="svginfo_width">#{svgEditor.i18next.t('common.width')}</span>
<input type="text" id="canvas_width" size="6" />
</label>
<label>
<span id="svginfo_height">${svgEditor.i18next.t('common.height')}</span>
<span id="svginfo_height">#{svgEditor.i18next.t('common.height')}</span>
<input type="text" id="canvas_height" size="6" />
</label>
<label>
<select id="resolution">
<option id="selectedPredefined" selected="selected">${svgEditor.i18next.t('config.select_predefined')}</option>
<option id="selectedPredefined" selected="selected">#{svgEditor.i18next.t('config.select_predefined')}</option>
<option>640x480</option>
<option>800x600</option>
<option>1024x768</option>
<option>1280x960</option>
<option>1600x1200</option>
<option id="fitToContent" value="content">${svgEditor.i18next.t('tools.fitToContent')}</option>
<option id="fitToContent" value="content">#{svgEditor.i18next.t('tools.fitToContent')}</option>
</select>
</label>
</fieldset>
<fieldset id="image_save_opts">
<legend id="includedImages">${svgEditor.i18next.t('config.included_images')}</legend>
<legend id="includedImages">#{svgEditor.i18next.t('config.included_images')}</legend>
<label>
<input type="radio" id="image_embed" name="image_opt" value="embed" checked="checked" />
<span id="image_opt_embed">${svgEditor.i18next.t('config.image_opt_embed')}</span>
<span id="image_opt_embed">#{svgEditor.i18next.t('config.image_opt_embed')}</span>
</label>
<label>
<input type="radio" id="image_ref" name="image_opt" value="ref" />
<span id="image_opt_ref">${svgEditor.i18next.t('config.image_opt_ref')}</span>
<span id="image_opt_ref">#{svgEditor.i18next.t('config.image_opt_ref')}</span>
</label>
</fieldset>
</fieldset>

10
src/editor/dialogs/svgSourceDialog.js
View File

@ -1,4 +1,4 @@
/* globals svgEditor */
/* gl#bals svgEditor */
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
template.innerHTML = `
@ -63,17 +63,17 @@ template.innerHTML = `
<div id="svg_source_container">
<div id="tool_source_back" class="toolbar_button">
<button id="tool_source_save">
${svgEditor.i18next.t('tools.source_save')}
#{svgEditor.i18next.t('tools.source_save')}
</button>
<button id="tool_source_cancel">
${svgEditor.i18next.t('common.cancel')}
#{svgEditor.i18next.t('common.cancel')}
</button>
</div>
<div id="save_output_btns">
<p id="copy_save_note">
${svgEditor.i18next.t('notification.source_dialog_note')}
#{svgEditor.i18next.t('notification.source_dialog_note')}
</p>
<button id="copy_save_done">${svgEditor.i18next.t('config.done')}</button>
<button id="copy_save_done">#{svgEditor.i18next.t('config.done')}</button>
</div>
<form>
<textarea id="svg_source_textarea" spellcheck="false" rows="5" cols="80"></textarea>

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

@ -1,6 +1,5 @@
/* eslint-disable max-len */
/* globals svgEditor */
import 'elix/define/Dialog.js';
const template = document.createElement('template');
const notification = svgEditor.i18next.t('notification.editorPreferencesMsg');
const prefs_and_content = svgEditor.i18next.t('properties.prefs_and_content');