#se-edit-prefs-dialog edit preference dialog change to webcomponent
Agriya Dev5
parent
c28461b974
commit
f5565c3aaa
|
|
@ -0,0 +1,539 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import 'elix/define/Dialog.js';
|
||||
import {isValidUnit} from '../../common/units.js';
|
||||
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:not(:defined) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Force the scroll bar to appear so we see it hide when overlay opens. */
|
||||
body::-webkit-scrollbar {
|
||||
background: lightgray;
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: darkgray;
|
||||
}
|
||||
.toolbar_button button {
|
||||
border:1px solid #dedede;
|
||||
line-height:130%;
|
||||
float: left;
|
||||
background: #E8E8E8 none;
|
||||
padding:5px 10px 5px 7px; /* Firefox */
|
||||
line-height:17px; /* Safari */
|
||||
margin: 5px 20px 0 0;
|
||||
border: 1px #808080 solid;
|
||||
border-top-color: #FFF;
|
||||
border-left-color: #FFF;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar_button button:hover {
|
||||
border: 1px #e0a874 solid;
|
||||
border-top-color: #fcd9ba;
|
||||
border-left-color: #fcd9ba;
|
||||
background-color: #FFC;
|
||||
}
|
||||
.toolbar_button button:active {
|
||||
background-color: #F4E284;
|
||||
border-left: 1px solid #663300;
|
||||
border-top: 1px solid #663300;
|
||||
}
|
||||
|
||||
.toolbar_button button .svg_icon {
|
||||
margin: 0 3px -3px 0 !important;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.color_block {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.color_block svg {
|
||||
display: block;
|
||||
}
|
||||
#bg_blocks {
|
||||
overflow: auto;
|
||||
margin-left: 30px;
|
||||
}
|
||||
#bg_blocks .color_block {
|
||||
position: static;
|
||||
}
|
||||
#svginfo_bg_note {
|
||||
font-size: .9em;
|
||||
font-style: italic;
|
||||
color: #444;
|
||||
}
|
||||
#svg_prefs #svg_prefs_container {
|
||||
padding: 10px;
|
||||
background-color: #B0B0B0;
|
||||
border: 1px outset #777;
|
||||
opacity: 1.0;
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
font-size: .8em;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
#tool_prefs_back {
|
||||
margin-left: 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#svg_prefs #svg_docprops_prefs {
|
||||
float: left;
|
||||
width: 221px;
|
||||
margin: 5px .7em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#svg_prefs_container fieldset + fieldset {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#svg_prefs legend {
|
||||
max-width: 195px;
|
||||
}
|
||||
|
||||
#svg_prefs_container > fieldset > legend {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#svg_prefs fieldset {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
|
||||
#svg_prefs_container label {
|
||||
display: block;
|
||||
margin: .5em;
|
||||
}
|
||||
#svg_prefs_container div.color_block {
|
||||
float: left;
|
||||
margin: 2px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#change_background div.cur_background {
|
||||
border: 2px solid blue;
|
||||
padding: 18px;
|
||||
}
|
||||
#canvas_bg_url {
|
||||
display: block;
|
||||
width: 96%;
|
||||
}
|
||||
#svg_prefs button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
|
||||
<div id="svg_prefs_container">
|
||||
<div id="tool_prefs_back" class="toolbar_button">
|
||||
<button id="tool_prefs_save">
|
||||
<img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
|
||||
OK
|
||||
</button>
|
||||
<button id="tool_prefs_cancel">
|
||||
<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
|
||||
<label>
|
||||
<span id="svginfo_lang">Language:</span>
|
||||
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
|
||||
<select id="lang_select">
|
||||
<option id="lang_ar" value="ar">العربية</option>
|
||||
<option id="lang_cs" value="cs">Čeština</option>
|
||||
<option id="lang_de" value="de">Deutsch</option>
|
||||
<option id="lang_en" value="en" selected="selected">English</option>
|
||||
<option id="lang_es" value="es">Español</option>
|
||||
<option id="lang_fa" value="fa">فارسی</option>
|
||||
<option id="lang_fr" value="fr">Français</option>
|
||||
<option id="lang_fy" value="fy">Frysk</option>
|
||||
<option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
|
||||
<option id="lang_it" value="it">Italiano</option>
|
||||
<option id="lang_ja" value="ja">日本語</option>
|
||||
<option id="lang_nl" value="nl">Nederlands</option>
|
||||
<option id="lang_pl" value="pl">Polski</option>
|
||||
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
|
||||
<option id="lang_ro" value="ro">Română</option>
|
||||
<option id="lang_ru" value="ru">Русский</option>
|
||||
<option id="lang_sk" value="sk">Slovenčina</option>
|
||||
<option id="lang_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</option>
|
||||
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_icons">Icon size:</span>
|
||||
<select id="iconsize">
|
||||
<option id="icon_small" value="s">Small</option>
|
||||
<option id="icon_medium" value="m" selected="selected">Medium</option>
|
||||
<option id="icon_large" value="l">Large</option>
|
||||
<option id="icon_xlarge" value="xl">Extra Large</option>
|
||||
</select>
|
||||
</label>
|
||||
<fieldset id="change_background">
|
||||
<legend id="svginfo_change_background">Editor Background</legend>
|
||||
<div id="bg_blocks"></div>
|
||||
<label>
|
||||
<span id="svginfo_bg_url">URL:</span>
|
||||
<input type="text" id="canvas_bg_url" />
|
||||
</label>
|
||||
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
|
||||
</fieldset>
|
||||
<fieldset id="change_grid">
|
||||
<legend id="svginfo_grid_settings">Grid</legend>
|
||||
<label>
|
||||
<span id="svginfo_snap_onoff">Snapping on/off</span>
|
||||
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_snap_step">Snapping Step-Size:</span>
|
||||
<input type="text" id="grid_snapping_step" size="3" value="10" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_grid_color">Grid color:</span>
|
||||
<input type="text" id="grid_color" size="3" value="#000" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="units_rulers">
|
||||
<legend id="svginfo_units_rulers">Units & Rulers</legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">Show rulers</span>
|
||||
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_unit">Base Unit:</span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</elix-dialog>
|
||||
`;
|
||||
/**
|
||||
* @class SeEditPrefsDialog
|
||||
*/
|
||||
export class SeEditPrefsDialog extends HTMLElement {
|
||||
/**
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this.colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
|
||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
this.$dialog = this._shadowRoot.querySelector('#svg_prefs');
|
||||
this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save');
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel');
|
||||
this.$langSelect = this._shadowRoot.querySelector('#lang_select');
|
||||
this.$iconSize = this._shadowRoot.querySelector('#iconsize');
|
||||
this.$bgBlocks = this._shadowRoot.querySelector('#bg_blocks');
|
||||
this.$bgURL = this._shadowRoot.querySelector('#canvas_bg_url');
|
||||
this.$gridSnappingOn = this._shadowRoot.querySelector('#grid_snapping_on');
|
||||
this.$gridSnappingStep = this._shadowRoot.querySelector('#grid_snapping_step');
|
||||
this.$gridColor = this._shadowRoot.querySelector('#grid_color');
|
||||
this.$showRulers = this._shadowRoot.querySelector('#show_rulers');
|
||||
this.$baseUnit = this._shadowRoot.querySelector('#base_unit');
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
// eslint-disable-next-line max-len
|
||||
return ['dialog', 'lang', 'iconsize', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
const blocks = this.$bgBlocks.querySelectorAll('div');
|
||||
const curBg = 'cur_background';
|
||||
switch (name) {
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open();
|
||||
} else {
|
||||
this.$dialog.close();
|
||||
}
|
||||
break;
|
||||
case 'lang':
|
||||
this.$langSelect.value = newValue;
|
||||
break;
|
||||
case 'iconsize':
|
||||
this.$iconSize.value = newValue;
|
||||
break;
|
||||
case 'canvasbg':
|
||||
if (!newValue) {
|
||||
if (blocks.length > 0) {
|
||||
blocks[0].classList.add(curBg);
|
||||
}
|
||||
} else {
|
||||
blocks.forEach(function (blk) {
|
||||
const isBg = blk.dataset.bgColor === newValue;
|
||||
if (isBg) {
|
||||
blk.classList.add(curBg);
|
||||
} else {
|
||||
blk.classList.remove(curBg);
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'bgurl':
|
||||
this.$bgURL.value = newValue;
|
||||
break;
|
||||
case 'gridsnappingon':
|
||||
if (newValue === 'true') {
|
||||
this.$gridSnappingOn.checked = true;
|
||||
} else if (newValue === 'false') {
|
||||
this.$gridSnappingOn.checked = false;
|
||||
}
|
||||
break;
|
||||
case 'gridsnappingstep':
|
||||
this.$gridSnappingStep.value = newValue;
|
||||
break;
|
||||
case 'gridcolor':
|
||||
this.$gridColor.value = newValue;
|
||||
break;
|
||||
case 'showrulers':
|
||||
if (newValue === 'true') {
|
||||
this.$showRulers.checked = true;
|
||||
} else if (newValue === 'false') {
|
||||
this.$showRulers.checked = false;
|
||||
}
|
||||
break;
|
||||
case 'baseunit':
|
||||
this.$baseUnit.value = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get lang () {
|
||||
return this.getAttribute('lang');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set lang (value) {
|
||||
this.setAttribute('lang', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get iconsize () {
|
||||
return this.getAttribute('iconsize');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set iconsize (value) {
|
||||
this.setAttribute('iconsize', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get canvasbg () {
|
||||
return this.getAttribute('canvasbg');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set canvasbg (value) {
|
||||
this.setAttribute('canvasbg', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get bgurl () {
|
||||
return this.getAttribute('bgurl');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set bgurl (value) {
|
||||
this.setAttribute('bgurl', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.getAttribute('dialog');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set dialog (value) {
|
||||
this.setAttribute('dialog', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get gridsnappingon () {
|
||||
return this.getAttribute('gridsnappingon');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set gridsnappingon (value) {
|
||||
this.setAttribute('gridsnappingon', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get gridsnappingstep () {
|
||||
return this.getAttribute('gridsnappingstep');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set gridsnappingstep (value) {
|
||||
this.setAttribute('gridsnappingstep', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get gridcolor () {
|
||||
return this.getAttribute('gridcolor');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set gridcolor (value) {
|
||||
this.setAttribute('gridcolor', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get showrulers () {
|
||||
return this.getAttribute('showrulers');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set showrulers (value) {
|
||||
this.setAttribute('showrulers', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get baseunit () {
|
||||
return this.getAttribute('baseunit');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set baseunit (value) {
|
||||
this.setAttribute('baseunit', value);
|
||||
}
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
const onCancelHandler = (ev) => {
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
dialog: 'closed'
|
||||
}});
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
const onSaveHandler = (ev) => {
|
||||
const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF';
|
||||
const closeEvent = new CustomEvent('change', {detail: {
|
||||
lang: this.$langSelect.value,
|
||||
dialog: 'close',
|
||||
iconsize: this.$iconSize.value,
|
||||
bgcolor: color,
|
||||
bgurl: this.$bgURL.value,
|
||||
gridsnappingon: this.$gridSnappingOn.checked,
|
||||
gridsnappingstep: this.$gridSnappingStep.value,
|
||||
showrulers: this.$showRulers.checked,
|
||||
baseunit: this.$baseUnit.value
|
||||
}});
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
// Set up editor background functionality
|
||||
const self = this;
|
||||
this.colorBlocks.forEach(function (e, i) {
|
||||
const newdiv = document.createElement('div');
|
||||
if (e === 'chessboard') {
|
||||
newdiv.dataset.bgColor = e;
|
||||
// eslint-disable-next-line max-len
|
||||
newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjGgq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)';
|
||||
newdiv.classList.add('color_block');
|
||||
} else {
|
||||
newdiv.dataset.bgColor = e; // setAttribute('data-bgcolor', e);
|
||||
newdiv.style.backgroundColor = e;
|
||||
newdiv.classList.add('color_block');
|
||||
}
|
||||
self.$bgBlocks.append(newdiv);
|
||||
});
|
||||
const blocks = this.$bgBlocks.querySelectorAll('div');
|
||||
const curBg = 'cur_background';
|
||||
blocks.forEach(function (blk) {
|
||||
blk.addEventListener('click', function () {
|
||||
blocks.forEach((el) => el.classList.remove(curBg));
|
||||
blk.classList.add(curBg);
|
||||
});
|
||||
});
|
||||
this.$saveBtn.addEventListener('click', onSaveHandler);
|
||||
this.$cancelBtn.addEventListener('click', onCancelHandler);
|
||||
this.$dialog.addEventListener('close', onCancelHandler);
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-edit-prefs-dialog', SeEditPrefsDialog);
|
||||
|
|
@ -233,7 +233,7 @@ export class SeImgPropDialog extends HTMLElement {
|
|||
* @returns {any}
|
||||
*/
|
||||
get width () {
|
||||
return this.hasAttribute('width');
|
||||
return this.getAttribute('width');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
|
|
@ -247,7 +247,7 @@ export class SeImgPropDialog extends HTMLElement {
|
|||
* @returns {any}
|
||||
*/
|
||||
get height () {
|
||||
return this.hasAttribute('height');
|
||||
return this.getAttribute('height');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
|
|
@ -261,7 +261,7 @@ export class SeImgPropDialog extends HTMLElement {
|
|||
* @returns {any}
|
||||
*/
|
||||
get save () {
|
||||
return this.hasAttribute('save');
|
||||
return this.getAttribute('save');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
|
|
@ -275,7 +275,7 @@ export class SeImgPropDialog extends HTMLElement {
|
|||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.hasAttribute('dialog');
|
||||
return this.getAttribute('dialog');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
|
|
@ -289,7 +289,7 @@ export class SeImgPropDialog extends HTMLElement {
|
|||
* @returns {any}
|
||||
*/
|
||||
get embed () {
|
||||
return this.hasAttribute('embed');
|
||||
return this.getAttribute('embed');
|
||||
}
|
||||
/**
|
||||
* @function set
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
import './imagePropertiesDialog.js';
|
||||
import './editorPreferencesDialog.js';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient y2="0.65625" x2="0.94141" y1="0.43359" x1="0.42969" id="svg_9">
|
||||
<stop stop-opacity="1" stop-color="#ff3838" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#7a0c0c" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path stroke="#550000" fill="url(#svg_9)" id="svg_101" d="m2.10526,10.52632l7.36842,0l0,-7.36842l3.68421,0l0,7.36842l7.36842,0l0,3.68421l-7.36842,0l0,7.36842l-3.68421,0l0,-7.36842l-7.36842,0l0,-3.68421z" transform="rotate(45, 11.3, 12.3)"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 742 B |
|
|
@ -0,0 +1,9 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<linearGradient y2="0.65625" x2="0.94141" y1="0.43359" x1="0.42969" id="svg_106">
|
||||
<stop stop-opacity="1" stop-color="#38ff45" offset="0"/>
|
||||
<stop stop-opacity="1" stop-color="#127c0c" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path transform="rotate(45, 12, 10)" stroke="#005500" fill="url(#svg_106)" id="svg_101" d="m7.9,15.9l4.9,-0.05l0,-13.75l3.8,0l0,17.6l-8.7,0l0,-3.8z"/>
|
||||
</svg></svg>
|
||||
|
After Width: | Height: | Size: 669 B |
|
|
@ -440,118 +440,6 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="svg_prefs">
|
||||
<div class="overlay"></div>
|
||||
<div id="svg_prefs_container">
|
||||
<div id="tool_prefs_back" class="toolbar_button">
|
||||
<button id="tool_prefs_save">OK</button>
|
||||
<button id="tool_prefs_cancel">Cancel</button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend id="svginfo_editor_prefs">Editor Preferences</legend>
|
||||
<label>
|
||||
<span id="svginfo_lang">Language:</span>
|
||||
<!-- Source: https://en.wikipedia.org/wiki/Language_names -->
|
||||
<select id="lang_select">
|
||||
<option id="lang_ar" value="ar">العربية</option>
|
||||
<option id="lang_cs" value="cs">Čeština</option>
|
||||
<option id="lang_de" value="de">Deutsch</option>
|
||||
<option id="lang_en" value="en" selected="selected">English</option>
|
||||
<option id="lang_es" value="es">Español</option>
|
||||
<option id="lang_fa" value="fa">فارسی</option>
|
||||
<option id="lang_fr" value="fr">Français</option>
|
||||
<option id="lang_fy" value="fy">Frysk</option>
|
||||
<option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
|
||||
<option id="lang_it" value="it">Italiano</option>
|
||||
<option id="lang_ja" value="ja">日本語</option>
|
||||
<option id="lang_nl" value="nl">Nederlands</option>
|
||||
<option id="lang_pl" value="pl">Polski</option>
|
||||
<option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
|
||||
<option id="lang_ro" value="ro">Română</option>
|
||||
<option id="lang_ru" value="ru">Русский</option>
|
||||
<option id="lang_sk" value="sk">Slovenčina</option>
|
||||
<option id="lang_sl" value="sl">Slovenščina</option>
|
||||
<option id="lang_zh-CN" value="zh-CN">简体中文</option>
|
||||
<option id="lang_zh-TW" value="zh-TW">繁體中文</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_icons">Icon size:</span>
|
||||
<select id="iconsize">
|
||||
<option id="icon_small" value="s">Small</option>
|
||||
<option id="icon_medium" value="m" selected="selected">Medium</option>
|
||||
<option id="icon_large" value="l">Large</option>
|
||||
<option id="icon_xlarge" value="xl">Extra Large</option>
|
||||
</select>
|
||||
</label>
|
||||
<fieldset id="change_background">
|
||||
<legend id="svginfo_change_background">Editor Background</legend>
|
||||
<div id="bg_blocks"></div>
|
||||
<label>
|
||||
<span id="svginfo_bg_url">URL:</span>
|
||||
<input type="text" id="canvas_bg_url" />
|
||||
</label>
|
||||
<p id="svginfo_bg_note">Note: Background will not be saved with image.</p>
|
||||
</fieldset>
|
||||
<fieldset id="change_grid">
|
||||
<legend id="svginfo_grid_settings">Grid</legend>
|
||||
<label>
|
||||
<span id="svginfo_snap_onoff">Snapping on/off</span>
|
||||
<input type="checkbox" value="snapping_on" id="grid_snapping_on" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_snap_step">Snapping Step-Size:</span>
|
||||
<input type="text" id="grid_snapping_step" size="3" value="10" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_grid_color">Grid color:</span>
|
||||
<input type="text" id="grid_color" size="3" value="#000" />
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset id="units_rulers">
|
||||
<legend id="svginfo_units_rulers">Units & Rulers</legend>
|
||||
<label>
|
||||
<span id="svginfo_rulers_onoff">Show rulers</span>
|
||||
<input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
|
||||
</label>
|
||||
<label>
|
||||
<span id="svginfo_unit">Base Unit:</span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</label>
|
||||
<!-- Should this be an export option instead? -->
|
||||
<!--
|
||||
<span id="svginfo_unit_system">Unit System:</span>
|
||||
<label>
|
||||
<input type="radio" name="unit_system" value="single" checked="checked"/>
|
||||
<span id="svginfo_single_type_unit">Single type unit</span>
|
||||
<small id="svginfo_single_type_unit_sub">
|
||||
CSS unit type is set on root element.
|
||||
If a different unit type is entered in a text
|
||||
field, it is converted back to user units on export.
|
||||
</small>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="unit_system" value="multi"/>
|
||||
<span id="svginfo_multi_units">Multiple CSS units</span>
|
||||
<small id="svginfo_single_type_unit_sub">
|
||||
Attributes can be given different CSS units, which may
|
||||
lead to inconsistant results among viewers.
|
||||
</small>
|
||||
</label>
|
||||
-->
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dialog_box">
|
||||
<div class="overlay"></div>
|
||||
<div id="dialog_container">
|
||||
|
|
|
|||
|
|
@ -614,10 +614,14 @@ editor.init = () => {
|
|||
const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
|
||||
newSeImgPropDialog.setAttribute('id', 'se-img-prop');
|
||||
document.body.append(newSeImgPropDialog);
|
||||
// editor prefences dialoag added to DOM
|
||||
const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
|
||||
newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
|
||||
document.body.append(newSeEditPrefsDialog);
|
||||
} catch (err) {}
|
||||
|
||||
// get list of languages from options in the HTML
|
||||
const goodLangs = [...document.querySelectorAll('#lang_select option')].map((option) => option.value);
|
||||
// eslint-disable-next-line max-len
|
||||
const goodLangs = ['ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'zh-CN', 'zh-TW'];
|
||||
|
||||
/**
|
||||
* Sets up current preferences based on defaults.
|
||||
|
|
@ -894,7 +898,8 @@ editor.init = () => {
|
|||
// return;
|
||||
|
||||
editor.pref('iconsize', size);
|
||||
$('#iconsize').val(size);
|
||||
const $editDialog = document.getElementById('se-edit-prefs');
|
||||
$editDialog.setAttribute('iconsize', size);
|
||||
|
||||
// Note that all rules will be prefixed with '#svg_editor' when parsed
|
||||
const cssResizeRules = {
|
||||
|
|
@ -2685,7 +2690,7 @@ editor.init = () => {
|
|||
svgCanvas.textActions.setInputElem($('#text')[0]);
|
||||
|
||||
// Set up editor background functionality
|
||||
const colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
|
||||
/* const colorBlocks = ['#FFF', '#888', '#000', 'chessboard'];
|
||||
let str = '';
|
||||
$.each(colorBlocks, function (i, e) {
|
||||
str += (e === 'chessboard')
|
||||
|
|
@ -2702,7 +2707,7 @@ editor.init = () => {
|
|||
blocks.removeClass(curBg);
|
||||
$(this).addClass(curBg);
|
||||
});
|
||||
});
|
||||
}); */
|
||||
|
||||
setBackground(editor.pref('bkgd_color'), editor.pref('bkgd_url'));
|
||||
|
||||
|
|
@ -3825,25 +3830,19 @@ editor.init = () => {
|
|||
const showPreferences = function () {
|
||||
if (preferences) { return; }
|
||||
preferences = true;
|
||||
const $editDialog = document.getElementById('se-edit-prefs');
|
||||
$('#main_menu').hide();
|
||||
|
||||
// Update background color with current one
|
||||
const canvasBg = curPrefs.bkgd_color;
|
||||
const url = editor.pref('bkgd_url');
|
||||
blocks.each(function () {
|
||||
const blk = $(this);
|
||||
const isBg = blk.data('bgcolor') === canvasBg;
|
||||
blk.toggleClass(curBg, isBg);
|
||||
});
|
||||
if (!canvasBg) { blocks.eq(0).addClass(curBg); }
|
||||
if (url) {
|
||||
$('#canvas_bg_url').val(url);
|
||||
$editDialog.setAttribute('bgurl', url);
|
||||
}
|
||||
$('#grid_snapping_on').prop('checked', curConfig.gridSnapping);
|
||||
$('#grid_snapping_step').attr('value', curConfig.snappingStep);
|
||||
$('#grid_color').attr('value', curConfig.gridColor);
|
||||
|
||||
$('#svg_prefs').show();
|
||||
$editDialog.setAttribute('gridsnappingon', curConfig.gridSnapping);
|
||||
$editDialog.setAttribute('gridsnappingstep', curConfig.snappingStep);
|
||||
$editDialog.setAttribute('gridcolor', curConfig.gridColor);
|
||||
$editDialog.setAttribute('canvasbg', canvasBg);
|
||||
$editDialog.setAttribute('dialog', 'open');
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -3908,7 +3907,8 @@ editor.init = () => {
|
|||
* @returns {void}
|
||||
*/
|
||||
const hidePreferences = function () {
|
||||
$('#svg_prefs').hide();
|
||||
const $editDialog = document.getElementById('se-edit-prefs');
|
||||
$editDialog.setAttribute('dialog', 'close');
|
||||
preferences = false;
|
||||
};
|
||||
|
||||
|
|
@ -3946,33 +3946,31 @@ editor.init = () => {
|
|||
* @function module:SVGEditor.savePreferences
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const savePreferences = editor.savePreferences = async function () {
|
||||
const savePreferences = editor.savePreferences = async function (e) {
|
||||
const {lang, iconsize, bgcolor, bgurl, gridsnappingon, gridsnappingstep, gridcolor, showrulers, baseunit} = e.detail;
|
||||
// Set background
|
||||
const color = $('#bg_blocks div.cur_background').data('bgcolor') || '#FFF';
|
||||
setBackground(color, $('#canvas_bg_url').val());
|
||||
setBackground(bgcolor, bgurl);
|
||||
|
||||
// set language
|
||||
const lang = $('#lang_select').val();
|
||||
if (lang && lang !== editor.pref('lang')) {
|
||||
const {langParam, langData} = await editor.putLocale(lang, goodLangs);
|
||||
await setLang(langParam, langData);
|
||||
}
|
||||
|
||||
// set icon size
|
||||
setIconSize($('#iconsize').val());
|
||||
setIconSize(iconsize);
|
||||
|
||||
// set grid setting
|
||||
curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
|
||||
curConfig.snappingStep = $('#grid_snapping_step').val();
|
||||
curConfig.gridColor = $('#grid_color').val();
|
||||
curConfig.showRulers = $('#show_rulers')[0].checked;
|
||||
curConfig.gridSnapping = gridsnappingon;
|
||||
curConfig.snappingStep = gridsnappingstep;
|
||||
curConfig.gridColor = gridcolor;
|
||||
curConfig.showRulers = showrulers;
|
||||
|
||||
$('#rulers').toggle(curConfig.showRulers);
|
||||
if (curConfig.showRulers) { updateRulers(); }
|
||||
curConfig.baseUnit = $('#base_unit').val();
|
||||
curConfig.baseUnit = baseunit;
|
||||
|
||||
svgCanvas.setConfig(curConfig);
|
||||
|
||||
updateCanvas();
|
||||
hidePreferences();
|
||||
};
|
||||
|
|
@ -3999,10 +3997,6 @@ editor.init = () => {
|
|||
} else {
|
||||
hideSourceEditor();
|
||||
}
|
||||
} else if (docprops) {
|
||||
hideDocProperties();
|
||||
} else if (preferences) {
|
||||
hidePreferences();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -4623,7 +4617,13 @@ editor.init = () => {
|
|||
saveDocProperties(e);
|
||||
}
|
||||
});
|
||||
|
||||
$id('se-edit-prefs').addEventListener('change', function (e) {
|
||||
if (e.detail.dialog === 'closed') {
|
||||
hidePreferences();
|
||||
} else {
|
||||
savePreferences(e);
|
||||
}
|
||||
});
|
||||
const toolButtons = [
|
||||
{
|
||||
key: ['esc', false, false],
|
||||
|
|
@ -4639,7 +4639,6 @@ editor.init = () => {
|
|||
{sel: dialogSelectors.join(','), fn: cancelOverlays, evt: 'click',
|
||||
key: ['esc', false, false], hidekey: true},
|
||||
{sel: '#tool_source_save', fn: saveSourceEditor, evt: 'click'},
|
||||
{sel: '#tool_prefs_save', fn: savePreferences, evt: 'click'},
|
||||
{sel: '#tool_node_link', fn: linkControlPoints, evt: 'click'},
|
||||
{sel: '#tool_ungroup', fn: clickGroup, evt: 'click'},
|
||||
{sel: '#tool_unlink_use', fn: clickGroup, evt: 'click'},
|
||||
|
|
@ -4826,6 +4825,7 @@ editor.init = () => {
|
|||
const preTool = document.getElementById(`tool_${curConfig.initTool}`);
|
||||
const regTool = document.getElementById(curConfig.initTool);
|
||||
const selectTool = document.getElementById('tool_select');
|
||||
const $editDialog = document.getElementById('se-edit-prefs');
|
||||
const mouseupEvent = new Event('mouseup');
|
||||
if (preTool) {
|
||||
preTool.click();
|
||||
|
|
@ -4849,23 +4849,23 @@ editor.init = () => {
|
|||
$('#rulers').toggle(Boolean(curConfig.showRulers));
|
||||
|
||||
if (curConfig.showRulers) {
|
||||
$('#show_rulers')[0].checked = true;
|
||||
$editDialog.setAttribute('showrulers', true);
|
||||
}
|
||||
|
||||
if (curConfig.baseUnit) {
|
||||
$('#base_unit').val(curConfig.baseUnit);
|
||||
$editDialog.setAttribute('baseunit', curConfig.baseUnit);
|
||||
}
|
||||
|
||||
if (curConfig.gridSnapping) {
|
||||
$('#grid_snapping_on')[0].checked = true;
|
||||
$editDialog.setAttribute('gridsnappingon', true);
|
||||
}
|
||||
|
||||
if (curConfig.snappingStep) {
|
||||
$('#grid_snapping_step').val(curConfig.snappingStep);
|
||||
$editDialog.setAttribute('gridsnappingstep', curConfig.snappingStep);
|
||||
}
|
||||
|
||||
if (curConfig.gridColor) {
|
||||
$('#grid_color').val(curConfig.gridColor);
|
||||
$editDialog.setAttribute('gridcolor', curConfig.gridColor);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -5191,7 +5191,8 @@ editor.init = () => {
|
|||
const setLang = editor.setLang = function (lang, allStrings) {
|
||||
editor.langChanged = true;
|
||||
editor.pref('lang', lang);
|
||||
$('#lang_select').val(lang);
|
||||
const $editDialog = document.getElementById('se-edit-prefs');
|
||||
$editDialog.setAttribute('lang', lang);
|
||||
if (!allStrings) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue