move to standard linter for simpler configuration
This commit is contained in:
JFH
@@ -1,6 +1,6 @@
|
||||
import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js';
|
||||
import { template } from 'elix/src/base/internal.js';
|
||||
import { fragmentFrom } from 'elix/src/core/htmlLiterals.js';
|
||||
import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js'
|
||||
import { template } from 'elix/src/base/internal.js'
|
||||
import { fragmentFrom } from 'elix/src/core/htmlLiterals.js'
|
||||
|
||||
/**
|
||||
* @class SePlainAlertDialog
|
||||
@@ -11,9 +11,9 @@ export default class SePlainAlertDialog extends PlainAlertDialog {
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [template] () {
|
||||
const result = super[template];
|
||||
const result = super[template]
|
||||
// Replace the default slot with a new default slot and a button container.
|
||||
const defaultSlot = result.content.querySelector('#frameContent');
|
||||
const defaultSlot = result.content.querySelector('#frameContent')
|
||||
if (defaultSlot) {
|
||||
defaultSlot.replaceWith(fragmentFrom.html`
|
||||
<div id="alertDialogContent">
|
||||
@@ -22,7 +22,7 @@ export default class SePlainAlertDialog extends PlainAlertDialog {
|
||||
</div>
|
||||
<div id="choiceButtonContainer" part="choice-button-container"></div>
|
||||
</div>
|
||||
`);
|
||||
`)
|
||||
}
|
||||
result.content.append(
|
||||
fragmentFrom.html`
|
||||
@@ -60,9 +60,9 @@ export default class SePlainAlertDialog extends PlainAlertDialog {
|
||||
}
|
||||
</style>
|
||||
`
|
||||
);
|
||||
return result;
|
||||
)
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('se-elix-alert-dialog', SePlainAlertDialog);
|
||||
customElements.define('se-elix-alert-dialog', SePlainAlertDialog)
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import cMenuDialogHTML from './cmenuDialog.html';
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = cMenuDialogHTML;
|
||||
import cMenuDialogHTML from './cmenuDialog.html'
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = cMenuDialogHTML
|
||||
/**
|
||||
* @class SeCMenuDialog
|
||||
*/
|
||||
@@ -10,52 +9,55 @@ export class SeCMenuDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this._shadowRoot.append(template.content.cloneNode(true));
|
||||
this._workarea = document.getElementById('workarea');
|
||||
this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas');
|
||||
this.$copyLink = this._shadowRoot.querySelector('#se-copy');
|
||||
this.$cutLink = this._shadowRoot.querySelector('#se-cut');
|
||||
this.$pasteLink = this._shadowRoot.querySelector('#se-paste');
|
||||
this.$pasteInPlaceLink = this._shadowRoot.querySelector('#se-paste-in-place');
|
||||
this.$deleteLink = this._shadowRoot.querySelector('#se-delete');
|
||||
this.$groupLink = this._shadowRoot.querySelector('#se-group');
|
||||
this.$ungroupLink = this._shadowRoot.querySelector('#se-ungroup');
|
||||
this.$moveFrontLink = this._shadowRoot.querySelector('#se-move-front');
|
||||
this.$moveUpLink = this._shadowRoot.querySelector('#se-move-up');
|
||||
this.$moveDownLink = this._shadowRoot.querySelector('#se-move-down');
|
||||
this.$moveBackLink = this._shadowRoot.querySelector('#se-move-back');
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this._shadowRoot.append(template.content.cloneNode(true))
|
||||
this._workarea = document.getElementById('workarea')
|
||||
this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas')
|
||||
this.$copyLink = this._shadowRoot.querySelector('#se-copy')
|
||||
this.$cutLink = this._shadowRoot.querySelector('#se-cut')
|
||||
this.$pasteLink = this._shadowRoot.querySelector('#se-paste')
|
||||
this.$pasteInPlaceLink = this._shadowRoot.querySelector('#se-paste-in-place')
|
||||
this.$deleteLink = this._shadowRoot.querySelector('#se-delete')
|
||||
this.$groupLink = this._shadowRoot.querySelector('#se-group')
|
||||
this.$ungroupLink = this._shadowRoot.querySelector('#se-ungroup')
|
||||
this.$moveFrontLink = this._shadowRoot.querySelector('#se-move-front')
|
||||
this.$moveUpLink = this._shadowRoot.querySelector('#se-move-up')
|
||||
this.$moveDownLink = this._shadowRoot.querySelector('#se-move-down')
|
||||
this.$moveBackLink = this._shadowRoot.querySelector('#se-move-back')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function init
|
||||
* @param {any} name
|
||||
* @returns {void}
|
||||
*/
|
||||
init (i18next) {
|
||||
this.setAttribute('tools-cut', i18next.t('tools.cut'));
|
||||
this.setAttribute('tools-copy', i18next.t('tools.copy'));
|
||||
this.setAttribute('tools-paste', i18next.t('tools.paste'));
|
||||
this.setAttribute('tools-paste_in_place', i18next.t('tools.paste_in_place'));
|
||||
this.setAttribute('tools-delete', i18next.t('tools.delete'));
|
||||
this.setAttribute('tools-group', i18next.t('tools.group'));
|
||||
this.setAttribute('tools-ungroup', i18next.t('tools.ungroup'));
|
||||
this.setAttribute('tools-move_front', i18next.t('tools.move_front'));
|
||||
this.setAttribute('tools-move_up', i18next.t('tools.move_up'));
|
||||
this.setAttribute('tools-move_down', i18next.t('tools.move_down'));
|
||||
this.setAttribute('tools-move_back', i18next.t('tools.move_back'));
|
||||
this.setAttribute('tools-cut', i18next.t('tools.cut'))
|
||||
this.setAttribute('tools-copy', i18next.t('tools.copy'))
|
||||
this.setAttribute('tools-paste', i18next.t('tools.paste'))
|
||||
this.setAttribute('tools-paste_in_place', i18next.t('tools.paste_in_place'))
|
||||
this.setAttribute('tools-delete', i18next.t('tools.delete'))
|
||||
this.setAttribute('tools-group', i18next.t('tools.group'))
|
||||
this.setAttribute('tools-ungroup', i18next.t('tools.ungroup'))
|
||||
this.setAttribute('tools-move_front', i18next.t('tools.move_front'))
|
||||
this.setAttribute('tools-move_up', i18next.t('tools.move_up'))
|
||||
this.setAttribute('tools-move_down', i18next.t('tools.move_down'))
|
||||
this.setAttribute('tools-move_back', i18next.t('tools.move_back'))
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut',
|
||||
return ['disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut',
|
||||
'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group',
|
||||
'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down',
|
||||
'tools-move_back' ];
|
||||
'tools-move_back']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -64,85 +66,86 @@ export class SeCMenuDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
let eles = [];
|
||||
let textnode;
|
||||
const sdowRoot = this._shadowRoot;
|
||||
let eles = []
|
||||
let textnode
|
||||
const sdowRoot = this._shadowRoot
|
||||
switch (name) {
|
||||
case 'disableallmenu':
|
||||
if (newValue === 'true') {
|
||||
const elesli = sdowRoot.querySelectorAll('li');
|
||||
elesli.forEach(function (eleli) {
|
||||
eleli.classList.add('disabled');
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'enablemenuitems':
|
||||
eles = newValue.split(',');
|
||||
eles.forEach(function (ele) {
|
||||
const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]');
|
||||
selEle.parentElement.classList.remove('disabled');
|
||||
});
|
||||
break;
|
||||
case 'disablemenuitems':
|
||||
eles = newValue.split(',');
|
||||
eles.forEach(function (ele) {
|
||||
const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]');
|
||||
selEle.parentElement.classList.add('disabled');
|
||||
});
|
||||
break;
|
||||
case 'tools-cut':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$cutLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-copy':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$copyLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-paste':
|
||||
this.$pasteLink.textContent = newValue;
|
||||
break;
|
||||
case 'tools-paste_in_place':
|
||||
this.$pasteInPlaceLink.textContent = newValue;
|
||||
break;
|
||||
case 'tools-delete':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$deleteLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-group':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$groupLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-ungroup':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$ungroupLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-move_front':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$moveFrontLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-move_up':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$moveUpLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-move_down':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$moveDownLink.prepend(textnode);
|
||||
break;
|
||||
case 'tools-move_back':
|
||||
textnode = document.createTextNode(newValue);
|
||||
this.$moveBackLink.prepend(textnode);
|
||||
break;
|
||||
default:
|
||||
case 'disableallmenu':
|
||||
if (newValue === 'true') {
|
||||
const elesli = sdowRoot.querySelectorAll('li')
|
||||
elesli.forEach(function (eleli) {
|
||||
eleli.classList.add('disabled')
|
||||
})
|
||||
}
|
||||
break
|
||||
case 'enablemenuitems':
|
||||
eles = newValue.split(',')
|
||||
eles.forEach(function (ele) {
|
||||
const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]')
|
||||
selEle.parentElement.classList.remove('disabled')
|
||||
})
|
||||
break
|
||||
case 'disablemenuitems':
|
||||
eles = newValue.split(',')
|
||||
eles.forEach(function (ele) {
|
||||
const selEle = sdowRoot.querySelector('a[href*="' + ele + '"]')
|
||||
selEle.parentElement.classList.add('disabled')
|
||||
})
|
||||
break
|
||||
case 'tools-cut':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$cutLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-copy':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$copyLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-paste':
|
||||
this.$pasteLink.textContent = newValue
|
||||
break
|
||||
case 'tools-paste_in_place':
|
||||
this.$pasteInPlaceLink.textContent = newValue
|
||||
break
|
||||
case 'tools-delete':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$deleteLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-group':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$groupLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-ungroup':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$ungroupLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-move_front':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$moveFrontLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-move_up':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$moveUpLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-move_down':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$moveDownLink.prepend(textnode)
|
||||
break
|
||||
case 'tools-move_back':
|
||||
textnode = document.createTextNode(newValue)
|
||||
this.$moveBackLink.prepend(textnode)
|
||||
break
|
||||
default:
|
||||
// super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get disableallmenu () {
|
||||
return this.getAttribute('disableallmenu');
|
||||
return this.getAttribute('disableallmenu')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -150,14 +153,15 @@ export class SeCMenuDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set disableallmenu (value) {
|
||||
this.setAttribute('disableallmenu', value);
|
||||
this.setAttribute('disableallmenu', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get enablemenuitems () {
|
||||
return this.getAttribute('enablemenuitems');
|
||||
return this.getAttribute('enablemenuitems')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -165,14 +169,15 @@ export class SeCMenuDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set enablemenuitems (value) {
|
||||
this.setAttribute('enablemenuitems', value);
|
||||
this.setAttribute('enablemenuitems', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get disablemenuitems () {
|
||||
return this.getAttribute('disablemenuitems');
|
||||
return this.getAttribute('disablemenuitems')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -180,59 +185,62 @@ export class SeCMenuDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set disablemenuitems (value) {
|
||||
this.setAttribute('disablemenuitems', value);
|
||||
this.setAttribute('disablemenuitems', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
const current = this;
|
||||
const current = this
|
||||
const onMenuOpenHandler = (e) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault()
|
||||
// Detect mouse position
|
||||
let x = e.pageX;
|
||||
let y = e.pageY;
|
||||
let x = e.pageX
|
||||
let y = e.pageY
|
||||
|
||||
const xOff = screen.width - 250; // menu width
|
||||
const yOff = screen.height - (276 + 150); // menu height + bottom panel height and scroll bar
|
||||
const xOff = screen.width - 250 // menu width
|
||||
const yOff = screen.height - (276 + 150) // menu height + bottom panel height and scroll bar
|
||||
|
||||
if (x > xOff) {
|
||||
x = xOff;
|
||||
x = xOff
|
||||
}
|
||||
if (y > yOff) {
|
||||
y = yOff;
|
||||
y = yOff
|
||||
}
|
||||
current.$dialog.style.top = y + 'px';
|
||||
current.$dialog.style.left = x + 'px';
|
||||
current.$dialog.style.display = 'block';
|
||||
};
|
||||
current.$dialog.style.top = y + 'px'
|
||||
current.$dialog.style.left = x + 'px'
|
||||
current.$dialog.style.display = 'block'
|
||||
}
|
||||
const onMenuCloseHandler = (e) => {
|
||||
if (e.button !== 2) {
|
||||
current.$dialog.style.display = 'none';
|
||||
current.$dialog.style.display = 'none'
|
||||
}
|
||||
};
|
||||
}
|
||||
const onMenuClickHandler = (e, action) => {
|
||||
const triggerEvent = new CustomEvent('change', { detail: {
|
||||
trigger: action
|
||||
} });
|
||||
this.dispatchEvent(triggerEvent);
|
||||
};
|
||||
this._workarea.addEventListener('contextmenu', onMenuOpenHandler);
|
||||
this._workarea.addEventListener('mousedown', onMenuCloseHandler);
|
||||
this.$cutLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'cut'));
|
||||
this.$copyLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'copy'));
|
||||
this.$pasteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste'));
|
||||
this.$pasteInPlaceLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste_in_place'));
|
||||
this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete'));
|
||||
this.$groupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'group'));
|
||||
this.$ungroupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'ungroup'));
|
||||
this.$moveFrontLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_front'));
|
||||
this.$moveUpLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_up'));
|
||||
this.$moveDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_down'));
|
||||
this.$moveBackLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_back'));
|
||||
const triggerEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
trigger: action
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(triggerEvent)
|
||||
}
|
||||
this._workarea.addEventListener('contextmenu', onMenuOpenHandler)
|
||||
this._workarea.addEventListener('mousedown', onMenuCloseHandler)
|
||||
this.$cutLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'cut'))
|
||||
this.$copyLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'copy'))
|
||||
this.$pasteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste'))
|
||||
this.$pasteInPlaceLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'paste_in_place'))
|
||||
this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete'))
|
||||
this.$groupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'group'))
|
||||
this.$ungroupLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'ungroup'))
|
||||
this.$moveFrontLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_front'))
|
||||
this.$moveUpLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_up'))
|
||||
this.$moveDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_down'))
|
||||
this.$moveBackLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'move_back'))
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-cmenu_canvas-dialog', SeCMenuDialog);
|
||||
customElements.define('se-cmenu_canvas-dialog', SeCMenuDialog)
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import cMenuLayersDialog from './cmenuLayersDialog.html';
|
||||
import cMenuLayersDialog from './cmenuLayersDialog.html'
|
||||
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = cMenuLayersDialog;
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = cMenuLayersDialog
|
||||
/**
|
||||
* @class SeCMenuLayerDialog
|
||||
*/
|
||||
@@ -11,37 +10,40 @@ export class SeCMenuLayerDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this._shadowRoot.append(template.content.cloneNode(true));
|
||||
this.source = '';
|
||||
this._workarea = undefined;
|
||||
this.$sidePanels = document.getElementById('sidepanels');
|
||||
this.$dialog = this._shadowRoot.querySelector('#cmenu_layers');
|
||||
this.$duplicateLink = this._shadowRoot.querySelector('#se-dupe');
|
||||
this.$deleteLink = this._shadowRoot.querySelector('#se-layer-delete');
|
||||
this.$mergeDownLink = this._shadowRoot.querySelector('#se-merge-down');
|
||||
this.$mergeAllLink = this._shadowRoot.querySelector('#se-merge-all');
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this._shadowRoot.append(template.content.cloneNode(true))
|
||||
this.source = ''
|
||||
this._workarea = undefined
|
||||
this.$sidePanels = document.getElementById('sidepanels')
|
||||
this.$dialog = this._shadowRoot.querySelector('#cmenu_layers')
|
||||
this.$duplicateLink = this._shadowRoot.querySelector('#se-dupe')
|
||||
this.$deleteLink = this._shadowRoot.querySelector('#se-layer-delete')
|
||||
this.$mergeDownLink = this._shadowRoot.querySelector('#se-merge-down')
|
||||
this.$mergeAllLink = this._shadowRoot.querySelector('#se-merge-all')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function init
|
||||
* @param {any} name
|
||||
* @returns {void}
|
||||
*/
|
||||
init (i18next) {
|
||||
this.setAttribute('layers-dupe', i18next.t('layers.dupe'));
|
||||
this.setAttribute('layers-del', i18next.t('layers.del'));
|
||||
this.setAttribute('layers-merge_down', i18next.t('layers.merge_down'));
|
||||
this.setAttribute('layers-merge_all', i18next.t('layers.merge_all'));
|
||||
this.setAttribute('layers-dupe', i18next.t('layers.dupe'))
|
||||
this.setAttribute('layers-del', i18next.t('layers.del'))
|
||||
this.setAttribute('layers-merge_down', i18next.t('layers.merge_down'))
|
||||
this.setAttribute('layers-merge_all', i18next.t('layers.merge_all'))
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return [ 'value', 'leftclick', 'layers-dupe', 'layers-del', 'layers-merge_down', 'layers-merge_all' ];
|
||||
return ['value', 'leftclick', 'layers-dupe', 'layers-del', 'layers-merge_down', 'layers-merge_all']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -50,37 +52,38 @@ export class SeCMenuLayerDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
if (oldValue === newValue) return
|
||||
switch (name) {
|
||||
case 'value':
|
||||
this.source = newValue;
|
||||
if (newValue !== '' && newValue !== undefined) {
|
||||
this._workarea = document.getElementById(this.source);
|
||||
}
|
||||
break;
|
||||
case 'layers-dupe':
|
||||
this.$duplicateLink.textContent = newValue;
|
||||
break;
|
||||
case 'layers-del':
|
||||
this.$deleteLink.textContent = newValue;
|
||||
break;
|
||||
case 'layers-merge_down':
|
||||
this.$mergeDownLink.textContent = newValue;
|
||||
break;
|
||||
case 'layers-merge_all':
|
||||
this.$mergeAllLink.textContent = newValue;
|
||||
break;
|
||||
default:
|
||||
case 'value':
|
||||
this.source = newValue
|
||||
if (newValue !== '' && newValue !== undefined) {
|
||||
this._workarea = document.getElementById(this.source)
|
||||
}
|
||||
break
|
||||
case 'layers-dupe':
|
||||
this.$duplicateLink.textContent = newValue
|
||||
break
|
||||
case 'layers-del':
|
||||
this.$deleteLink.textContent = newValue
|
||||
break
|
||||
case 'layers-merge_down':
|
||||
this.$mergeDownLink.textContent = newValue
|
||||
break
|
||||
case 'layers-merge_all':
|
||||
this.$mergeAllLink.textContent = newValue
|
||||
break
|
||||
default:
|
||||
// super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get value () {
|
||||
return this.getAttribute('value');
|
||||
return this.getAttribute('value')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -88,14 +91,15 @@ export class SeCMenuLayerDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set value (value) {
|
||||
this.setAttribute('value', value);
|
||||
this.setAttribute('value', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get leftclick () {
|
||||
return this.getAttribute('leftclick');
|
||||
return this.getAttribute('leftclick')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -103,47 +107,50 @@ export class SeCMenuLayerDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set leftclick (value) {
|
||||
this.setAttribute('leftclick', value);
|
||||
this.setAttribute('leftclick', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
const current = this;
|
||||
const current = this
|
||||
const onMenuOpenHandler = (e) => {
|
||||
e.preventDefault();
|
||||
current.$dialog.style.top = e.pageY + 'px';
|
||||
current.$dialog.style.left = e.pageX - 126 + 'px';
|
||||
current.$dialog.style.display = 'block';
|
||||
};
|
||||
e.preventDefault()
|
||||
current.$dialog.style.top = e.pageY + 'px'
|
||||
current.$dialog.style.left = e.pageX - 126 + 'px'
|
||||
current.$dialog.style.display = 'block'
|
||||
}
|
||||
const onMenuCloseHandler = (e) => {
|
||||
if (e.button !== 2) {
|
||||
current.$dialog.style.display = 'none';
|
||||
current.$dialog.style.display = 'none'
|
||||
}
|
||||
};
|
||||
const onMenuClickHandler = (e, action, id) => {
|
||||
const triggerEvent = new CustomEvent('change', { detail: {
|
||||
trigger: action,
|
||||
source: id
|
||||
} });
|
||||
this.dispatchEvent(triggerEvent);
|
||||
current.$dialog.style.display = 'none';
|
||||
};
|
||||
if (this._workarea !== undefined) {
|
||||
this._workarea.addEventListener('contextmenu', onMenuOpenHandler);
|
||||
if (this.getAttribute('leftclick') === 'true') {
|
||||
this._workarea.addEventListener('click', onMenuOpenHandler);
|
||||
}
|
||||
this._workarea.addEventListener('mousedown', onMenuCloseHandler);
|
||||
this.$sidePanels.addEventListener('mousedown', onMenuCloseHandler);
|
||||
}
|
||||
this.$duplicateLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'dupe', this.source));
|
||||
this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete', this.source));
|
||||
this.$mergeDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_down', this.source));
|
||||
this.$mergeAllLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_all', this.source));
|
||||
const onMenuClickHandler = (e, action, id) => {
|
||||
const triggerEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
trigger: action,
|
||||
source: id
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(triggerEvent)
|
||||
current.$dialog.style.display = 'none'
|
||||
}
|
||||
if (this._workarea !== undefined) {
|
||||
this._workarea.addEventListener('contextmenu', onMenuOpenHandler)
|
||||
if (this.getAttribute('leftclick') === 'true') {
|
||||
this._workarea.addEventListener('click', onMenuOpenHandler)
|
||||
}
|
||||
this._workarea.addEventListener('mousedown', onMenuCloseHandler)
|
||||
this.$sidePanels.addEventListener('mousedown', onMenuCloseHandler)
|
||||
}
|
||||
this.$duplicateLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'dupe', this.source))
|
||||
this.$deleteLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'delete', this.source))
|
||||
this.$mergeDownLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_down', this.source))
|
||||
this.$mergeAllLink.addEventListener('click', (evt) => onMenuClickHandler(evt, 'merge_all', this.source))
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-cmenu-layers', SeCMenuLayerDialog);
|
||||
customElements.define('se-cmenu-layers', SeCMenuLayerDialog)
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import editorPreferencesDialog from './editorPreferencesDialog.html';
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = editorPreferencesDialog;
|
||||
import editorPreferencesDialog from './editorPreferencesDialog.html'
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = editorPreferencesDialog
|
||||
/**
|
||||
* @class SeEditPrefsDialog
|
||||
*/
|
||||
@@ -10,52 +9,55 @@ export class SeEditPrefsDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this.colorBlocks = [ '#FFF', '#888', '#000', 'chessboard' ];
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this._shadowRoot.append(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.$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');
|
||||
this.colorBlocks = ['#FFF', '#888', '#000', 'chessboard']
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this._shadowRoot.append(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.$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 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('config-editor_prefs', i18next.t('config.editor_prefs'));
|
||||
this.setAttribute('config-language', i18next.t('config.language'));
|
||||
this.setAttribute('config-background', i18next.t('config.background'));
|
||||
this.setAttribute('common-url', i18next.t('common.url'));
|
||||
this.setAttribute('config-editor_bg_note', i18next.t('config.editor_bg_note'));
|
||||
this.setAttribute('config-grid', i18next.t('config.grid'));
|
||||
this.setAttribute('config-snapping_onoff', i18next.t('config.snapping_onoff'));
|
||||
this.setAttribute('config-snapping_stepsize', i18next.t('config.snapping_stepsize'));
|
||||
this.setAttribute('config-grid_color', i18next.t('config.grid_color'));
|
||||
this.setAttribute('config-units_and_rulers', i18next.t('config.units_and_rulers'));
|
||||
this.setAttribute('config-show_rulers', i18next.t('config.show_rulers'));
|
||||
this.setAttribute('config-base_unit', i18next.t('config.base_unit'));
|
||||
this.setAttribute('common-ok', i18next.t('common.ok'))
|
||||
this.setAttribute('common-cancel', i18next.t('common.cancel'))
|
||||
this.setAttribute('config-editor_prefs', i18next.t('config.editor_prefs'))
|
||||
this.setAttribute('config-language', i18next.t('config.language'))
|
||||
this.setAttribute('config-background', i18next.t('config.background'))
|
||||
this.setAttribute('common-url', i18next.t('common.url'))
|
||||
this.setAttribute('config-editor_bg_note', i18next.t('config.editor_bg_note'))
|
||||
this.setAttribute('config-grid', i18next.t('config.grid'))
|
||||
this.setAttribute('config-snapping_onoff', i18next.t('config.snapping_onoff'))
|
||||
this.setAttribute('config-snapping_stepsize', i18next.t('config.snapping_stepsize'))
|
||||
this.setAttribute('config-grid_color', i18next.t('config.grid_color'))
|
||||
this.setAttribute('config-units_and_rulers', i18next.t('config.units_and_rulers'))
|
||||
this.setAttribute('config-show_rulers', i18next.t('config.show_rulers'))
|
||||
this.setAttribute('config-base_unit', i18next.t('config.base_unit'))
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
// eslint-disable-next-line max-len
|
||||
return [ 'dialog', 'lang', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit', 'common-ok', 'common-cancel', 'config-editor_prefs', 'config-language', 'config-background', 'common-url', 'config-editor_bg_note', 'config-grid', 'config-snapping_onoff', 'config-snapping_stepsize', 'config-grid_color', 'config-units_and_rulers', 'config-show_rulers', 'config-base_unit' ];
|
||||
return ['dialog', 'lang', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit', 'common-ok', 'common-cancel', 'config-editor_prefs', 'config-language', 'config-background', 'common-url', 'config-editor_bg_note', 'config-grid', 'config-snapping_onoff', 'config-snapping_stepsize', 'config-grid_color', 'config-units_and_rulers', 'config-show_rulers', 'config-base_unit']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -64,128 +66,129 @@ export class SeEditPrefsDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
const blocks = this.$bgBlocks.querySelectorAll('div');
|
||||
const curBg = 'cur_background';
|
||||
let node;
|
||||
if (oldValue === newValue) return
|
||||
const blocks = this.$bgBlocks.querySelectorAll('div')
|
||||
const curBg = 'cur_background'
|
||||
let node
|
||||
switch (name) {
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open();
|
||||
} else {
|
||||
this.$dialog.close();
|
||||
}
|
||||
break;
|
||||
case 'lang':
|
||||
this.$langSelect.value = newValue;
|
||||
break;
|
||||
case 'canvasbg':
|
||||
if (!newValue) {
|
||||
if (blocks.length > 0) {
|
||||
blocks[0].classList.add(curBg);
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open()
|
||||
} else {
|
||||
this.$dialog.close()
|
||||
}
|
||||
} else {
|
||||
blocks.forEach(function (blk) {
|
||||
const isBg = blk.dataset.bgColor === newValue;
|
||||
if (isBg) {
|
||||
blk.classList.add(curBg);
|
||||
} else {
|
||||
blk.classList.remove(curBg);
|
||||
break
|
||||
case 'lang':
|
||||
this.$langSelect.value = newValue
|
||||
break
|
||||
case 'canvasbg':
|
||||
if (!newValue) {
|
||||
if (blocks.length > 0) {
|
||||
blocks[0].classList.add(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;
|
||||
case 'common-ok':
|
||||
this.$saveBtn.textContent = newValue;
|
||||
break;
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue;
|
||||
break;
|
||||
case 'config-editor_prefs':
|
||||
node = this._shadowRoot.querySelector('#svginfo_editor_prefs');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-language':
|
||||
node = this._shadowRoot.querySelector('#svginfo_lang');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-background':
|
||||
node = this._shadowRoot.querySelector('#svginfo_change_background');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'common-url':
|
||||
node = this._shadowRoot.querySelector('#svginfo_bg_url');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-editor_bg_note':
|
||||
node = this._shadowRoot.querySelector('#svginfo_bg_note');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-grid':
|
||||
node = this._shadowRoot.querySelector('#svginfo_grid_settings');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-snapping_onoff':
|
||||
node = this._shadowRoot.querySelector('#svginfo_snap_onoff');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-snapping_stepsize':
|
||||
node = this._shadowRoot.querySelector('#svginfo_snap_step');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-grid_color':
|
||||
node = this._shadowRoot.querySelector('#svginfo_grid_color');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-units_and_rulers':
|
||||
node = this._shadowRoot.querySelector('#svginfo_units_rulers');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-show_rulers':
|
||||
node = this._shadowRoot.querySelector('#svginfo_rulers_onoff');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-base_unit':
|
||||
node = this._shadowRoot.querySelector('#svginfo_unit');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
} 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
|
||||
case 'common-ok':
|
||||
this.$saveBtn.textContent = newValue
|
||||
break
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue
|
||||
break
|
||||
case 'config-editor_prefs':
|
||||
node = this._shadowRoot.querySelector('#svginfo_editor_prefs')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-language':
|
||||
node = this._shadowRoot.querySelector('#svginfo_lang')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-background':
|
||||
node = this._shadowRoot.querySelector('#svginfo_change_background')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'common-url':
|
||||
node = this._shadowRoot.querySelector('#svginfo_bg_url')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-editor_bg_note':
|
||||
node = this._shadowRoot.querySelector('#svginfo_bg_note')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-grid':
|
||||
node = this._shadowRoot.querySelector('#svginfo_grid_settings')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-snapping_onoff':
|
||||
node = this._shadowRoot.querySelector('#svginfo_snap_onoff')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-snapping_stepsize':
|
||||
node = this._shadowRoot.querySelector('#svginfo_snap_step')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-grid_color':
|
||||
node = this._shadowRoot.querySelector('#svginfo_grid_color')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-units_and_rulers':
|
||||
node = this._shadowRoot.querySelector('#svginfo_units_rulers')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-show_rulers':
|
||||
node = this._shadowRoot.querySelector('#svginfo_rulers_onoff')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-base_unit':
|
||||
node = this._shadowRoot.querySelector('#svginfo_unit')
|
||||
node.textContent = newValue
|
||||
break
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get lang () {
|
||||
return this.getAttribute('lang');
|
||||
return this.getAttribute('lang')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -193,173 +196,194 @@ export class SeEditPrefsDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set lang (value) {
|
||||
this.setAttribute('lang', value);
|
||||
this.setAttribute('lang', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get canvasbg () {
|
||||
return this.getAttribute('canvasbg');
|
||||
return this.getAttribute('canvasbg')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set canvasbg (value) {
|
||||
this.setAttribute('canvasbg', value);
|
||||
this.setAttribute('canvasbg', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get bgurl () {
|
||||
return this.getAttribute('bgurl');
|
||||
return this.getAttribute('bgurl')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set bgurl (value) {
|
||||
this.setAttribute('bgurl', value);
|
||||
this.setAttribute('bgurl', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.getAttribute('dialog');
|
||||
return this.getAttribute('dialog')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set dialog (value) {
|
||||
this.setAttribute('dialog', value);
|
||||
this.setAttribute('dialog', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get gridsnappingon () {
|
||||
return this.getAttribute('gridsnappingon');
|
||||
return this.getAttribute('gridsnappingon')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set gridsnappingon (value) {
|
||||
this.setAttribute('gridsnappingon', value);
|
||||
this.setAttribute('gridsnappingon', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get gridsnappingstep () {
|
||||
return this.getAttribute('gridsnappingstep');
|
||||
return this.getAttribute('gridsnappingstep')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set gridsnappingstep (value) {
|
||||
this.setAttribute('gridsnappingstep', value);
|
||||
this.setAttribute('gridsnappingstep', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get gridcolor () {
|
||||
return this.getAttribute('gridcolor');
|
||||
return this.getAttribute('gridcolor')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set gridcolor (value) {
|
||||
this.setAttribute('gridcolor', value);
|
||||
this.setAttribute('gridcolor', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get showrulers () {
|
||||
return this.getAttribute('showrulers');
|
||||
return this.getAttribute('showrulers')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set showrulers (value) {
|
||||
this.setAttribute('showrulers', value);
|
||||
this.setAttribute('showrulers', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get baseunit () {
|
||||
return this.getAttribute('baseunit');
|
||||
return this.getAttribute('baseunit')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set baseunit (value) {
|
||||
this.setAttribute('baseunit', value);
|
||||
this.setAttribute('baseunit', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
const onCancelHandler = () => {
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
dialog: 'closed'
|
||||
} });
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
dialog: 'closed'
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(closeEvent)
|
||||
}
|
||||
const onSaveHandler = () => {
|
||||
const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF';
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
lang: this.$langSelect.value,
|
||||
dialog: 'close',
|
||||
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);
|
||||
};
|
||||
const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF'
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
lang: this.$langSelect.value,
|
||||
dialog: 'close',
|
||||
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 currentObj = this;
|
||||
const currentObj = this
|
||||
this.colorBlocks.forEach(function (e) {
|
||||
const newdiv = document.createElement('div');
|
||||
const newdiv = document.createElement('div')
|
||||
if (e === 'chessboard') {
|
||||
newdiv.dataset.bgColor = e;
|
||||
newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)';
|
||||
newdiv.classList.add('color_block');
|
||||
newdiv.dataset.bgColor = e
|
||||
newdiv.style.backgroundImage = 'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP///9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG+gq4jM3IFLJgpswNly/XkcBpIiVaInlLJr9FZWAQA7)'
|
||||
newdiv.classList.add('color_block')
|
||||
} else {
|
||||
newdiv.dataset.bgColor = e; // setAttribute('data-bgcolor', e);
|
||||
newdiv.style.backgroundColor = e;
|
||||
newdiv.classList.add('color_block');
|
||||
newdiv.dataset.bgColor = e // setAttribute('data-bgcolor', e);
|
||||
newdiv.style.backgroundColor = e
|
||||
newdiv.classList.add('color_block')
|
||||
}
|
||||
currentObj.$bgBlocks.append(newdiv);
|
||||
});
|
||||
const blocks = this.$bgBlocks.querySelectorAll('div');
|
||||
const curBg = 'cur_background';
|
||||
currentObj.$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);
|
||||
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);
|
||||
customElements.define('se-edit-prefs-dialog', SeEditPrefsDialog)
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import './se-elix/define/NumberSpinBox.js';
|
||||
import './se-elix/define/NumberSpinBox.js'
|
||||
|
||||
import exportDialogHTML from './exportDialog.html';
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = exportDialogHTML;
|
||||
import exportDialogHTML from './exportDialog.html'
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = exportDialogHTML
|
||||
/**
|
||||
* @class SeExportDialog
|
||||
*/
|
||||
@@ -12,36 +11,39 @@ export class SeExportDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this._shadowRoot.append(template.content.cloneNode(true));
|
||||
this.$dialog = this._shadowRoot.querySelector('#export_box');
|
||||
this.$okBtn = this._shadowRoot.querySelector('#export_ok');
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel');
|
||||
this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref');
|
||||
this.$qualityCont = this._shadowRoot.querySelector('#se-quality');
|
||||
this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
|
||||
this.value = 1;
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this._shadowRoot.append(template.content.cloneNode(true))
|
||||
this.$dialog = this._shadowRoot.querySelector('#export_box')
|
||||
this.$okBtn = this._shadowRoot.querySelector('#export_ok')
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel')
|
||||
this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref')
|
||||
this.$qualityCont = this._shadowRoot.querySelector('#se-quality')
|
||||
this.$input = this._shadowRoot.querySelector('elix-number-spin-box')
|
||||
this.value = 1
|
||||
}
|
||||
|
||||
/**
|
||||
* @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('ui-quality', i18next.t('ui.quality'));
|
||||
this.setAttribute('ui-export_type_label', i18next.t('ui.export_type_label'));
|
||||
this.setAttribute('common-ok', i18next.t('common.ok'))
|
||||
this.setAttribute('common-cancel', i18next.t('common.cancel'))
|
||||
this.setAttribute('ui-quality', i18next.t('ui.quality'))
|
||||
this.setAttribute('ui-export_type_label', i18next.t('ui.export_type_label'))
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return [ 'dialog', 'common-ok', 'common-cancel', 'ui-quality', 'ui-export_type_label' ];
|
||||
return ['dialog', 'common-ok', 'common-cancel', 'ui-quality', 'ui-export_type_label']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -50,86 +52,91 @@ export class SeExportDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
let node;
|
||||
let node
|
||||
switch (name) {
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open();
|
||||
} else {
|
||||
this.$dialog.close();
|
||||
}
|
||||
break;
|
||||
case 'common-ok':
|
||||
this.$okBtn.textContent = newValue;
|
||||
break;
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue;
|
||||
break;
|
||||
case 'ui-quality':
|
||||
node = this._shadowRoot.querySelector('#se-quality');
|
||||
node.prepend(newValue);
|
||||
break;
|
||||
case 'ui-export_type_label':
|
||||
node = this._shadowRoot.querySelector('#export_select');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
default:
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open()
|
||||
} else {
|
||||
this.$dialog.close()
|
||||
}
|
||||
break
|
||||
case 'common-ok':
|
||||
this.$okBtn.textContent = newValue
|
||||
break
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue
|
||||
break
|
||||
case 'ui-quality':
|
||||
node = this._shadowRoot.querySelector('#se-quality')
|
||||
node.prepend(newValue)
|
||||
break
|
||||
case 'ui-export_type_label':
|
||||
node = this._shadowRoot.querySelector('#export_select')
|
||||
node.textContent = newValue
|
||||
break
|
||||
default:
|
||||
// super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.getAttribute('dialog');
|
||||
return this.getAttribute('dialog')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set dialog (value) {
|
||||
this.setAttribute('dialog', value);
|
||||
this.setAttribute('dialog', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.$input.addEventListener('change', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
e.preventDefault()
|
||||
this.value = e.target.value
|
||||
})
|
||||
this.$input.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.value = e.target.value;
|
||||
});
|
||||
e.preventDefault()
|
||||
this.value = e.target.value
|
||||
})
|
||||
const onSubmitHandler = (e, action) => {
|
||||
if (action === 'cancel') {
|
||||
document.getElementById('se-export-dialog').setAttribute('dialog', 'close');
|
||||
document.getElementById('se-export-dialog').setAttribute('dialog', 'close')
|
||||
} else {
|
||||
const triggerEvent = new CustomEvent('change', { detail: {
|
||||
trigger: action,
|
||||
imgType: this.$exportOption.value,
|
||||
quality: this.value
|
||||
} });
|
||||
this.dispatchEvent(triggerEvent);
|
||||
document.getElementById('se-export-dialog').setAttribute('dialog', 'close');
|
||||
const triggerEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
trigger: action,
|
||||
imgType: this.$exportOption.value,
|
||||
quality: this.value
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(triggerEvent)
|
||||
document.getElementById('se-export-dialog').setAttribute('dialog', 'close')
|
||||
}
|
||||
};
|
||||
}
|
||||
const onChangeHandler = (e) => {
|
||||
if (e.target.value === 'PDF') {
|
||||
this.$qualityCont.style.display = 'none';
|
||||
this.$qualityCont.style.display = 'none'
|
||||
} else {
|
||||
this.$qualityCont.style.display = 'block';
|
||||
this.$qualityCont.style.display = 'block'
|
||||
}
|
||||
};
|
||||
this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
|
||||
this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
|
||||
this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt));
|
||||
}
|
||||
this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'))
|
||||
this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'))
|
||||
this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt))
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-export-dialog', SeExportDialog);
|
||||
customElements.define('se-export-dialog', SeExportDialog)
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import { isValidUnit } from '../../common/units.js';
|
||||
import imagePropertiesDialogHTML from './imagePropertiesDialog.html';
|
||||
import { isValidUnit } from '../../common/units.js'
|
||||
import imagePropertiesDialogHTML from './imagePropertiesDialog.html'
|
||||
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = imagePropertiesDialogHTML;
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = imagePropertiesDialogHTML
|
||||
/**
|
||||
* @class SeImgPropDialog
|
||||
*/
|
||||
@@ -12,39 +11,40 @@ export class SeImgPropDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this.eventlisten = false;
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this._shadowRoot.append(template.content.cloneNode(true));
|
||||
this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save');
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel');
|
||||
this.$resolution = this._shadowRoot.querySelector('#resolution');
|
||||
this.$canvasTitle = this._shadowRoot.querySelector('#canvas_title');
|
||||
this.$canvasWidth = this._shadowRoot.querySelector('#canvas_width');
|
||||
this.$canvasHeight = this._shadowRoot.querySelector('#canvas_height');
|
||||
this.$imageOptEmbed = this._shadowRoot.querySelector('#image_embed');
|
||||
this.$imageOptRef = this._shadowRoot.querySelector('#image_ref');
|
||||
this.$dialog = this._shadowRoot.querySelector('#svg_docprops');
|
||||
this.eventlisten = false
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this._shadowRoot.append(template.content.cloneNode(true))
|
||||
this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save')
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel')
|
||||
this.$resolution = this._shadowRoot.querySelector('#resolution')
|
||||
this.$canvasTitle = this._shadowRoot.querySelector('#canvas_title')
|
||||
this.$canvasWidth = this._shadowRoot.querySelector('#canvas_width')
|
||||
this.$canvasHeight = this._shadowRoot.querySelector('#canvas_height')
|
||||
this.$imageOptEmbed = this._shadowRoot.querySelector('#image_embed')
|
||||
this.$imageOptRef = this._shadowRoot.querySelector('#image_ref')
|
||||
this.$dialog = this._shadowRoot.querySelector('#svg_docprops')
|
||||
}
|
||||
|
||||
/**
|
||||
* @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('config-image_props', i18next.t('config.image_props'));
|
||||
this.setAttribute('config-doc_title', i18next.t('config.doc_title'));
|
||||
this.setAttribute('config-doc_dims', i18next.t('config.doc_dims'));
|
||||
this.setAttribute('common-width', i18next.t('common.width'));
|
||||
this.setAttribute('common-height', i18next.t('common.height'));
|
||||
this.setAttribute('config-select_predefined', i18next.t('config.select_predefined'));
|
||||
this.setAttribute('tools-fit-to-content', i18next.t('tools.fitToContent'));
|
||||
this.setAttribute('config-included_images', i18next.t('config.included_images'));
|
||||
this.setAttribute('config-image_opt_embed', i18next.t('config.image_opt_embed'));
|
||||
this.setAttribute('config-image_opt_ref', i18next.t('config.image_opt_ref'));
|
||||
this.setAttribute('common-ok', i18next.t('common.ok'))
|
||||
this.setAttribute('common-cancel', i18next.t('common.cancel'))
|
||||
this.setAttribute('config-image_props', i18next.t('config.image_props'))
|
||||
this.setAttribute('config-doc_title', i18next.t('config.doc_title'))
|
||||
this.setAttribute('config-doc_dims', i18next.t('config.doc_dims'))
|
||||
this.setAttribute('common-width', i18next.t('common.width'))
|
||||
this.setAttribute('common-height', i18next.t('common.height'))
|
||||
this.setAttribute('config-select_predefined', i18next.t('config.select_predefined'))
|
||||
this.setAttribute('tools-fit-to-content', i18next.t('tools.fitToContent'))
|
||||
this.setAttribute('config-included_images', i18next.t('config.included_images'))
|
||||
this.setAttribute('config-image_opt_embed', i18next.t('config.image_opt_embed'))
|
||||
this.setAttribute('config-image_opt_ref', i18next.t('config.image_opt_ref'))
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -52,12 +52,13 @@ export class SeImgPropDialog extends HTMLElement {
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return [ 'title', 'width', 'height', 'save', 'dialog', 'embed', 'common-ok',
|
||||
return ['title', 'width', 'height', 'save', 'dialog', 'embed', 'common-ok',
|
||||
'common-cancel', 'config-image_props', 'config-doc_title', 'config-doc_dims',
|
||||
'common-width', 'common-height', 'config-select_predefined',
|
||||
'tools-fit-to-content', 'config-included_images', 'config-image_opt_embed',
|
||||
'config-image_opt_ref' ];
|
||||
'config-image_opt_ref']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -66,117 +67,118 @@ export class SeImgPropDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
let node ;
|
||||
if (oldValue === newValue) return
|
||||
let node
|
||||
switch (name) {
|
||||
case 'title':
|
||||
this.$canvasTitle.value = newValue;
|
||||
break;
|
||||
case 'width':
|
||||
if (newValue === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasWidth.value = 100;
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = 100;
|
||||
} else {
|
||||
this.$canvasWidth.value = newValue;
|
||||
}
|
||||
break;
|
||||
case 'height':
|
||||
if (newValue === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasWidth.value = 100;
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = 100;
|
||||
} else {
|
||||
this.$canvasHeight.value = newValue;
|
||||
}
|
||||
break;
|
||||
case 'dialog':
|
||||
if (this.eventlisten) {
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open();
|
||||
case 'title':
|
||||
this.$canvasTitle.value = newValue
|
||||
break
|
||||
case 'width':
|
||||
if (newValue === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled')
|
||||
this.$canvasWidth.value = 100
|
||||
this.$canvasHeight.removeAttribute('disabled')
|
||||
this.$canvasHeight.value = 100
|
||||
} else {
|
||||
this.$dialog.close();
|
||||
this.$canvasWidth.value = newValue
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'save':
|
||||
if (newValue === 'ref') {
|
||||
this.$imageOptEmbed.setAttribute('checked', false);
|
||||
this.$imageOptRef.setAttribute('checked', true);
|
||||
} else {
|
||||
this.$imageOptEmbed.setAttribute('checked', true);
|
||||
this.$imageOptRef.setAttribute('checked', false);
|
||||
}
|
||||
break;
|
||||
case 'embed':
|
||||
if (newValue.includes('one')) {
|
||||
const data = newValue.split('|');
|
||||
if (data.length > 1) {
|
||||
this._shadowRoot.querySelector('#image_opt_embed').setAttribute('title', data[1]);
|
||||
this._shadowRoot.querySelector('#image_opt_embed').setAttribute('disabled', 'disabled');
|
||||
this._shadowRoot.querySelector('#image_opt_embed').style.color = '#666';
|
||||
break
|
||||
case 'height':
|
||||
if (newValue === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled')
|
||||
this.$canvasWidth.value = 100
|
||||
this.$canvasHeight.removeAttribute('disabled')
|
||||
this.$canvasHeight.value = 100
|
||||
} else {
|
||||
this.$canvasHeight.value = newValue
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'common-ok':
|
||||
this.$saveBtn.textContent = newValue;
|
||||
break;
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue;
|
||||
break;
|
||||
case 'config-image_props':
|
||||
node = this._shadowRoot.querySelector('#svginfo_image_props');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-doc_title':
|
||||
node = this._shadowRoot.querySelector('#svginfo_title');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-doc_dims':
|
||||
node = this._shadowRoot.querySelector('#svginfo_dim');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'common-width':
|
||||
node = this._shadowRoot.querySelector('#svginfo_width');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'common-height':
|
||||
node = this._shadowRoot.querySelector('#svginfo_height');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-select_predefined':
|
||||
node = this._shadowRoot.querySelector('#selectedPredefined');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'tools-fit-to-content':
|
||||
node = this._shadowRoot.querySelector('#fitToContent');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-included_images':
|
||||
node = this._shadowRoot.querySelector('#includedImages');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-image_opt_embed':
|
||||
node = this._shadowRoot.querySelector('#image_opt_embed');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-image_opt_ref':
|
||||
node = this._shadowRoot.querySelector('#image_opt_ref');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
break
|
||||
case 'dialog':
|
||||
if (this.eventlisten) {
|
||||
if (newValue === 'open') {
|
||||
this.$dialog.open()
|
||||
} else {
|
||||
this.$dialog.close()
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'save':
|
||||
if (newValue === 'ref') {
|
||||
this.$imageOptEmbed.setAttribute('checked', false)
|
||||
this.$imageOptRef.setAttribute('checked', true)
|
||||
} else {
|
||||
this.$imageOptEmbed.setAttribute('checked', true)
|
||||
this.$imageOptRef.setAttribute('checked', false)
|
||||
}
|
||||
break
|
||||
case 'embed':
|
||||
if (newValue.includes('one')) {
|
||||
const data = newValue.split('|')
|
||||
if (data.length > 1) {
|
||||
this._shadowRoot.querySelector('#image_opt_embed').setAttribute('title', data[1])
|
||||
this._shadowRoot.querySelector('#image_opt_embed').setAttribute('disabled', 'disabled')
|
||||
this._shadowRoot.querySelector('#image_opt_embed').style.color = '#666'
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'common-ok':
|
||||
this.$saveBtn.textContent = newValue
|
||||
break
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue
|
||||
break
|
||||
case 'config-image_props':
|
||||
node = this._shadowRoot.querySelector('#svginfo_image_props')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-doc_title':
|
||||
node = this._shadowRoot.querySelector('#svginfo_title')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-doc_dims':
|
||||
node = this._shadowRoot.querySelector('#svginfo_dim')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'common-width':
|
||||
node = this._shadowRoot.querySelector('#svginfo_width')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'common-height':
|
||||
node = this._shadowRoot.querySelector('#svginfo_height')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-select_predefined':
|
||||
node = this._shadowRoot.querySelector('#selectedPredefined')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'tools-fit-to-content':
|
||||
node = this._shadowRoot.querySelector('#fitToContent')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-included_images':
|
||||
node = this._shadowRoot.querySelector('#includedImages')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-image_opt_embed':
|
||||
node = this._shadowRoot.querySelector('#image_opt_embed')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-image_opt_ref':
|
||||
node = this._shadowRoot.querySelector('#image_opt_ref')
|
||||
node.textContent = newValue
|
||||
break
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get title () {
|
||||
return this.getAttribute('title');
|
||||
return this.getAttribute('title')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -184,78 +186,89 @@ export class SeImgPropDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set title (value) {
|
||||
this.setAttribute('title', value);
|
||||
this.setAttribute('title', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get width () {
|
||||
return this.getAttribute('width');
|
||||
return this.getAttribute('width')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set width (value) {
|
||||
this.setAttribute('width', value);
|
||||
this.setAttribute('width', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get height () {
|
||||
return this.getAttribute('height');
|
||||
return this.getAttribute('height')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set height (value) {
|
||||
this.setAttribute('height', value);
|
||||
this.setAttribute('height', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get save () {
|
||||
return this.getAttribute('save');
|
||||
return this.getAttribute('save')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set save (value) {
|
||||
this.setAttribute('save', value);
|
||||
this.setAttribute('save', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.getAttribute('dialog');
|
||||
return this.getAttribute('dialog')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set dialog (value) {
|
||||
this.setAttribute('dialog', value);
|
||||
this.setAttribute('dialog', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get embed () {
|
||||
return this.getAttribute('embed');
|
||||
return this.getAttribute('embed')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set embed (value) {
|
||||
this.setAttribute('embed', value);
|
||||
this.setAttribute('embed', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
@@ -264,72 +277,76 @@ export class SeImgPropDialog extends HTMLElement {
|
||||
const onChangeHandler = (ev) => {
|
||||
if (!ev.target.selectedIndex) {
|
||||
if (this.$canvasWidth.getAttribute('value') === 'fit') {
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasWidth.value = 100;
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = 100;
|
||||
this.$canvasWidth.removeAttribute('disabled')
|
||||
this.$canvasWidth.value = 100
|
||||
this.$canvasHeight.removeAttribute('disabled')
|
||||
this.$canvasHeight.value = 100
|
||||
}
|
||||
} else if (ev.target.value === 'content') {
|
||||
this.$canvasWidth.setAttribute('disabled', 'disabled');
|
||||
this.$canvasWidth.value = 'fit';
|
||||
this.$canvasHeight.setAttribute('disabled', 'disabled');
|
||||
this.$canvasHeight.value = 'fit';
|
||||
this.$canvasWidth.setAttribute('disabled', 'disabled')
|
||||
this.$canvasWidth.value = 'fit'
|
||||
this.$canvasHeight.setAttribute('disabled', 'disabled')
|
||||
this.$canvasHeight.value = 'fit'
|
||||
} else {
|
||||
const dims = ev.target.value.split('x');
|
||||
this.$canvasWidth.value = dims[0];
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasHeight.value = dims[1];
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
const dims = ev.target.value.split('x')
|
||||
this.$canvasWidth.value = dims[0]
|
||||
this.$canvasWidth.removeAttribute('disabled')
|
||||
this.$canvasHeight.value = dims[1]
|
||||
this.$canvasHeight.removeAttribute('disabled')
|
||||
}
|
||||
};
|
||||
}
|
||||
const onSaveHandler = () => {
|
||||
let saveOpt = '';
|
||||
const w = this.$canvasWidth.value;
|
||||
const h = this.$canvasHeight.value;
|
||||
let saveOpt = ''
|
||||
const w = this.$canvasWidth.value
|
||||
const h = this.$canvasHeight.value
|
||||
if (w !== 'fit' && !isValidUnit('width', w)) {
|
||||
this.$canvasWidth.parentElement.classList.add('error');
|
||||
this.$canvasWidth.parentElement.classList.add('error')
|
||||
} else {
|
||||
this.$canvasWidth.parentElement.classList.remove('error');
|
||||
this.$canvasWidth.parentElement.classList.remove('error')
|
||||
}
|
||||
if (h !== 'fit' && !isValidUnit('height', w)) {
|
||||
this.$canvasHeight.parentElement.classList.add('error');
|
||||
this.$canvasHeight.parentElement.classList.add('error')
|
||||
} else {
|
||||
this.$canvasHeight.parentElement.classList.remove('error');
|
||||
this.$canvasHeight.parentElement.classList.remove('error')
|
||||
}
|
||||
if (this.$imageOptEmbed.getAttribute('checked') === 'true') {
|
||||
saveOpt = 'embed';
|
||||
saveOpt = 'embed'
|
||||
}
|
||||
if (this.$imageOptRef.getAttribute('checked') === 'true') {
|
||||
saveOpt = 'ref';
|
||||
saveOpt = 'ref'
|
||||
}
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
title: this.$canvasTitle.value,
|
||||
w: this.$canvasWidth.value,
|
||||
h: this.$canvasHeight.value,
|
||||
save: saveOpt,
|
||||
dialog: 'close'
|
||||
} });
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$resolution.selectedIndex = 0;
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
title: this.$canvasTitle.value,
|
||||
w: this.$canvasWidth.value,
|
||||
h: this.$canvasHeight.value,
|
||||
save: saveOpt,
|
||||
dialog: 'close'
|
||||
}
|
||||
})
|
||||
this.$canvasWidth.removeAttribute('disabled')
|
||||
this.$canvasHeight.removeAttribute('disabled')
|
||||
this.$resolution.selectedIndex = 0
|
||||
this.dispatchEvent(closeEvent)
|
||||
}
|
||||
const onCancelHandler = () => {
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
dialog: 'closed'
|
||||
} });
|
||||
this.$canvasWidth.removeAttribute('disabled');
|
||||
this.$canvasHeight.removeAttribute('disabled');
|
||||
this.$resolution.selectedIndex = 0;
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
this.$resolution.addEventListener('change', onChangeHandler);
|
||||
this.$saveBtn.addEventListener('click', onSaveHandler);
|
||||
this.$cancelBtn.addEventListener('click', onCancelHandler);
|
||||
this.$dialog.addEventListener('close', onCancelHandler);
|
||||
this.eventlisten = true;
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
dialog: 'closed'
|
||||
}
|
||||
})
|
||||
this.$canvasWidth.removeAttribute('disabled')
|
||||
this.$canvasHeight.removeAttribute('disabled')
|
||||
this.$resolution.selectedIndex = 0
|
||||
this.dispatchEvent(closeEvent)
|
||||
}
|
||||
this.$resolution.addEventListener('change', onChangeHandler)
|
||||
this.$saveBtn.addEventListener('click', onSaveHandler)
|
||||
this.$cancelBtn.addEventListener('click', onCancelHandler)
|
||||
this.$dialog.addEventListener('close', onCancelHandler)
|
||||
this.eventlisten = true
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-img-prop-dialog', SeImgPropDialog);
|
||||
customElements.define('se-img-prop-dialog', SeImgPropDialog)
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import 'elix/define/Dialog.js';
|
||||
import './imagePropertiesDialog.js';
|
||||
import './editorPreferencesDialog.js';
|
||||
import './svgSourceDialog.js';
|
||||
import './cmenuDialog.js';
|
||||
import './cmenuLayersDialog.js';
|
||||
import './seSelectDialog.js';
|
||||
import './seConfirmDialog.js';
|
||||
import './sePromptDialog.js';
|
||||
import './seAlertDialog.js';
|
||||
import './exportDialog.js';
|
||||
import 'elix/define/Dialog.js'
|
||||
import './imagePropertiesDialog.js'
|
||||
import './editorPreferencesDialog.js'
|
||||
import './svgSourceDialog.js'
|
||||
import './cmenuDialog.js'
|
||||
import './cmenuLayersDialog.js'
|
||||
import './seSelectDialog.js'
|
||||
import './seConfirmDialog.js'
|
||||
import './sePromptDialog.js'
|
||||
import './seAlertDialog.js'
|
||||
import './exportDialog.js'
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import PlainNumberSpinBox from '../src/plain/PlainNumberSpinBox.js';
|
||||
import PlainNumberSpinBox from '../src/plain/PlainNumberSpinBox.js'
|
||||
/**
|
||||
* @class ElixNumberSpinBox
|
||||
*/
|
||||
export default class ElixNumberSpinBox extends PlainNumberSpinBox {}
|
||||
|
||||
|
||||
customElements.define('elix-number-spin-box', ElixNumberSpinBox);
|
||||
customElements.define('elix-number-spin-box', ElixNumberSpinBox)
|
||||
|
||||
@@ -3,10 +3,10 @@ import {
|
||||
setState,
|
||||
state,
|
||||
stateEffects
|
||||
} from 'elix/src/base/internal.js';
|
||||
} from 'elix/src/base/internal.js'
|
||||
import {
|
||||
SpinBox
|
||||
} from 'elix/src/base/SpinBox.js';
|
||||
} from 'elix/src/base/SpinBox.js'
|
||||
|
||||
/**
|
||||
* @class NumberSpinBox
|
||||
@@ -21,15 +21,16 @@ class NumberSpinBox extends SpinBox {
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (name === 'max') {
|
||||
this.max = parseFloat(newValue);
|
||||
this.max = parseFloat(newValue)
|
||||
} else if (name === 'min') {
|
||||
this.min = parseFloat(newValue);
|
||||
this.min = parseFloat(newValue)
|
||||
} else if (name === 'step') {
|
||||
this.step = parseFloat(newValue);
|
||||
this.step = parseFloat(newValue)
|
||||
} else {
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
super.attributeChangedCallback(name, oldValue, newValue)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
@@ -39,7 +40,7 @@ class NumberSpinBox extends SpinBox {
|
||||
max: null,
|
||||
min: null,
|
||||
step: 1
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -54,7 +55,7 @@ class NumberSpinBox extends SpinBox {
|
||||
* @returns {number}
|
||||
*/
|
||||
formatValue (value, precision) {
|
||||
return Number(value).toFixed(precision);
|
||||
return Number(value).toFixed(precision)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -64,8 +65,9 @@ class NumberSpinBox extends SpinBox {
|
||||
* @default 1
|
||||
*/
|
||||
get max () {
|
||||
return this[state].max;
|
||||
return this[state].max
|
||||
}
|
||||
|
||||
/**
|
||||
* The maximum allowable value of the `value` property.
|
||||
*
|
||||
@@ -75,7 +77,7 @@ class NumberSpinBox extends SpinBox {
|
||||
set max (max) {
|
||||
this[setState]({
|
||||
max
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -85,8 +87,9 @@ class NumberSpinBox extends SpinBox {
|
||||
* @default 1
|
||||
*/
|
||||
get min () {
|
||||
return this[state].min;
|
||||
return this[state].min
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
@@ -94,7 +97,7 @@ class NumberSpinBox extends SpinBox {
|
||||
set min (min) {
|
||||
this[setState]({
|
||||
min
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -104,9 +107,10 @@ class NumberSpinBox extends SpinBox {
|
||||
* @returns {int}
|
||||
*/
|
||||
parseValue (value, precision) {
|
||||
const parsed = precision === 0 ? parseInt(value) : parseFloat(value);
|
||||
return isNaN(parsed) ? 0 : parsed;
|
||||
const parsed = precision === 0 ? parseInt(value) : parseFloat(value)
|
||||
return isNaN(parsed) ? 0 : parsed
|
||||
}
|
||||
|
||||
/**
|
||||
* @function stateEffects
|
||||
* @param {any} state
|
||||
@@ -114,19 +118,19 @@ class NumberSpinBox extends SpinBox {
|
||||
* @returns {any}
|
||||
*/
|
||||
[stateEffects] (state, changed) {
|
||||
const effects = super[stateEffects];
|
||||
const effects = super[stateEffects]
|
||||
// If step changed, calculate its precision (number of digits after
|
||||
// the decimal).
|
||||
if (changed.step) {
|
||||
const {
|
||||
step
|
||||
} = state;
|
||||
const decimalRegex = /\.(\d)+$/;
|
||||
const match = decimalRegex.exec(String(step));
|
||||
const precision = match && match[1] ? match[1].length : 0;
|
||||
} = state
|
||||
const decimalRegex = /\.(\d)+$/
|
||||
const match = decimalRegex.exec(String(step))
|
||||
const precision = match && match[1] ? match[1].length : 0
|
||||
Object.assign(effects, {
|
||||
precision
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
if (changed.max || changed.min || changed.value) {
|
||||
@@ -140,41 +144,41 @@ class NumberSpinBox extends SpinBox {
|
||||
min,
|
||||
precision,
|
||||
value
|
||||
} = state;
|
||||
const parsed = parseInt(value, precision);
|
||||
} = state
|
||||
const parsed = parseInt(value, precision)
|
||||
if (value !== '' && isNaN(parsed)) {
|
||||
Object.assign(effects, {
|
||||
valid: false,
|
||||
validationMessage: 'Value must be a number'
|
||||
});
|
||||
})
|
||||
} else if (!(max === null || parsed <= max)) {
|
||||
Object.assign(effects, {
|
||||
valid: false,
|
||||
validationMessage: `Value must be less than or equal to ${max}.`
|
||||
});
|
||||
})
|
||||
} else if (!(min === null || parsed >= min)) {
|
||||
Object.assign(effects, {
|
||||
valid: false,
|
||||
validationMessage: `Value must be greater than or equal to ${min}.`
|
||||
});
|
||||
})
|
||||
} else {
|
||||
Object.assign(effects, {
|
||||
valid: true,
|
||||
validationMessage: ''
|
||||
});
|
||||
})
|
||||
}
|
||||
// We can only go up if we're below max.
|
||||
Object.assign(effects, {
|
||||
canGoUp: isNaN(parsed) || state.max === null || parsed <= state.max
|
||||
});
|
||||
})
|
||||
|
||||
// We can only go down if we're above min.
|
||||
Object.assign(effects, {
|
||||
canGoDown: isNaN(parsed) || state.min === null || parsed >= state.min
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
return effects;
|
||||
return effects
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -182,8 +186,9 @@ class NumberSpinBox extends SpinBox {
|
||||
* @returns {any}
|
||||
*/
|
||||
get step () {
|
||||
return this[state].step;
|
||||
return this[state].step
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
@@ -192,7 +197,7 @@ class NumberSpinBox extends SpinBox {
|
||||
if (!isNaN(step)) {
|
||||
this[setState]({
|
||||
step
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -201,21 +206,21 @@ class NumberSpinBox extends SpinBox {
|
||||
* @returns {void}
|
||||
*/
|
||||
stepDown () {
|
||||
super.stepDown();
|
||||
super.stepDown()
|
||||
const {
|
||||
max,
|
||||
precision,
|
||||
value
|
||||
} = this[state];
|
||||
let result = this.parseValue(value, precision) - this.step;
|
||||
} = this[state]
|
||||
let result = this.parseValue(value, precision) - this.step
|
||||
if (max !== null) {
|
||||
result = Math.min(result, max);
|
||||
result = Math.min(result, max)
|
||||
}
|
||||
const {
|
||||
min
|
||||
} = this[state];
|
||||
} = this[state]
|
||||
if (min === null || result >= min) {
|
||||
this.value = this.formatValue(result, precision);
|
||||
this.value = this.formatValue(result, precision)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,23 +229,23 @@ class NumberSpinBox extends SpinBox {
|
||||
* @returns {void}
|
||||
*/
|
||||
stepUp () {
|
||||
super.stepUp();
|
||||
super.stepUp()
|
||||
const {
|
||||
min,
|
||||
precision,
|
||||
value
|
||||
} = this[state];
|
||||
let result = this.parseValue(value, precision) + this.step;
|
||||
} = this[state]
|
||||
let result = this.parseValue(value, precision) + this.step
|
||||
if (min !== null) {
|
||||
result = Math.max(result, min);
|
||||
result = Math.max(result, min)
|
||||
}
|
||||
const {
|
||||
max
|
||||
} = this[state];
|
||||
} = this[state]
|
||||
if (max === null || result <= max) {
|
||||
this.value = this.formatValue(result, precision);
|
||||
this.value = this.formatValue(result, precision)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default NumberSpinBox;
|
||||
export default NumberSpinBox
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import PlainSpinBoxMixin from 'elix/src/plain/PlainSpinBoxMixin.js';
|
||||
import NumberSpinBox from '../base/NumberSpinBox.js';
|
||||
import PlainSpinBoxMixin from 'elix/src/plain/PlainSpinBoxMixin.js'
|
||||
import NumberSpinBox from '../base/NumberSpinBox.js'
|
||||
|
||||
/**
|
||||
* @class PlainNumberSpinBox
|
||||
*/
|
||||
class PlainNumberSpinBox extends PlainSpinBoxMixin(NumberSpinBox) {}
|
||||
|
||||
export default PlainNumberSpinBox;
|
||||
export default PlainNumberSpinBox
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js'
|
||||
|
||||
const seAlert = (text) => {
|
||||
const dialog = new SePlainAlertDialog();
|
||||
dialog.textContent = text;
|
||||
dialog.choices = [ 'Ok' ];
|
||||
dialog.open();
|
||||
};
|
||||
const dialog = new SePlainAlertDialog()
|
||||
dialog.textContent = text
|
||||
dialog.choices = ['Ok']
|
||||
dialog.open()
|
||||
}
|
||||
|
||||
window.seAlert = seAlert;
|
||||
window.seAlert = seAlert
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js'
|
||||
|
||||
const seConfirm = async (text, choices) => {
|
||||
const dialog = new SePlainAlertDialog();
|
||||
dialog.textContent = text;
|
||||
dialog.choices = (choices === undefined) ? [ 'Ok', 'Cancel' ] : choices;
|
||||
dialog.open();
|
||||
const response = await dialog.whenClosed();
|
||||
return response.choice;
|
||||
};
|
||||
const dialog = new SePlainAlertDialog()
|
||||
dialog.textContent = text
|
||||
dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices
|
||||
dialog.open()
|
||||
const response = await dialog.whenClosed()
|
||||
return response.choice
|
||||
}
|
||||
|
||||
window.seConfirm = seConfirm;
|
||||
window.seConfirm = seConfirm
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js'
|
||||
/**
|
||||
* @class SePromptDialog
|
||||
*/
|
||||
@@ -7,18 +7,20 @@ export class SePromptDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this.dialog = new SePlainAlertDialog();
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this.dialog = new SePlainAlertDialog()
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return [ 'title', 'close' ];
|
||||
return ['title', 'close']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -28,32 +30,33 @@ export class SePromptDialog extends HTMLElement {
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
switch (name) {
|
||||
case 'title':
|
||||
if (this.dialog.opened) {
|
||||
this.dialog.close();
|
||||
}
|
||||
this.dialog.textContent = newValue;
|
||||
this.dialog.choices = [ 'Cancel' ];
|
||||
this.dialog.open();
|
||||
break;
|
||||
case 'close':
|
||||
if (this.dialog.opened) {
|
||||
this.dialog.close();
|
||||
} else {
|
||||
this.dialog.open();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.error('unknown attr for:', name, 'newValue =', newValue);
|
||||
break;
|
||||
case 'title':
|
||||
if (this.dialog.opened) {
|
||||
this.dialog.close()
|
||||
}
|
||||
this.dialog.textContent = newValue
|
||||
this.dialog.choices = ['Cancel']
|
||||
this.dialog.open()
|
||||
break
|
||||
case 'close':
|
||||
if (this.dialog.opened) {
|
||||
this.dialog.close()
|
||||
} else {
|
||||
this.dialog.open()
|
||||
}
|
||||
break
|
||||
default:
|
||||
console.error('unknown attr for:', name, 'newValue =', newValue)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get title () {
|
||||
return this.getAttribute('title');
|
||||
return this.getAttribute('title')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -61,14 +64,15 @@ export class SePromptDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
set title (value) {
|
||||
this.setAttribute('title', value);
|
||||
this.setAttribute('title', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get close () {
|
||||
return this.getAttribute('close');
|
||||
return this.getAttribute('close')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -78,12 +82,12 @@ export class SePromptDialog extends HTMLElement {
|
||||
set close (value) {
|
||||
// boolean value => existence = true
|
||||
if (value) {
|
||||
this.setAttribute('close', 'true');
|
||||
this.setAttribute('close', 'true')
|
||||
} else {
|
||||
this.removeAttribute('close');
|
||||
this.removeAttribute('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-prompt-dialog', SePromptDialog);
|
||||
customElements.define('se-prompt-dialog', SePromptDialog)
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js';
|
||||
import SePlainAlertDialog from './SePlainAlertDialog.js'
|
||||
|
||||
const seSelect = async (text, choices) => {
|
||||
const dialog = new SePlainAlertDialog();
|
||||
dialog.textContent = text;
|
||||
dialog.choices = choices;
|
||||
dialog.open();
|
||||
const response = await dialog.whenClosed();
|
||||
return response.choice;
|
||||
};
|
||||
const dialog = new SePlainAlertDialog()
|
||||
dialog.textContent = text
|
||||
dialog.choices = choices
|
||||
dialog.open()
|
||||
const response = await dialog.whenClosed()
|
||||
return response.choice
|
||||
}
|
||||
|
||||
window.seSelect = seSelect;
|
||||
window.seSelect = seSelect
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import svgSourceDialogHTML from './svgSourceDialog.html';
|
||||
import svgSourceDialogHTML from './svgSourceDialog.html'
|
||||
|
||||
const template = document.createElement('template');
|
||||
// eslint-disable-next-line no-unsanitized/property
|
||||
template.innerHTML = svgSourceDialogHTML;
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = svgSourceDialogHTML
|
||||
/**
|
||||
* @class SeSvgSourceEditorDialog
|
||||
*/
|
||||
@@ -11,36 +10,39 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
super()
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
this._shadowRoot.append(template.content.cloneNode(true));
|
||||
this.$dialog = this._shadowRoot.querySelector('#svg_source_editor');
|
||||
this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done');
|
||||
this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save');
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#tool_source_cancel');
|
||||
this.$sourceTxt = this._shadowRoot.querySelector('#svg_source_textarea');
|
||||
this.$copySec = this._shadowRoot.querySelector('#save_output_btns');
|
||||
this.$applySec = this._shadowRoot.querySelector('#tool_source_back');
|
||||
this._shadowRoot = this.attachShadow({ mode: 'open' })
|
||||
this._shadowRoot.append(template.content.cloneNode(true))
|
||||
this.$dialog = this._shadowRoot.querySelector('#svg_source_editor')
|
||||
this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done')
|
||||
this.$saveBtn = this._shadowRoot.querySelector('#tool_source_save')
|
||||
this.$cancelBtn = this._shadowRoot.querySelector('#tool_source_cancel')
|
||||
this.$sourceTxt = this._shadowRoot.querySelector('#svg_source_textarea')
|
||||
this.$copySec = this._shadowRoot.querySelector('#save_output_btns')
|
||||
this.$applySec = this._shadowRoot.querySelector('#tool_source_back')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function init
|
||||
* @param {any} name
|
||||
* @returns {void}
|
||||
*/
|
||||
init (i18next) {
|
||||
this.setAttribute('tools-source_save', i18next.t('tools.source_save'));
|
||||
this.setAttribute('common-cancel', i18next.t('common.cancel'));
|
||||
this.setAttribute('notification-source_dialog_note', i18next.t('notification.source_dialog_note'));
|
||||
this.setAttribute('config-done', i18next.t('config.done'));
|
||||
this.setAttribute('tools-source_save', i18next.t('tools.source_save'))
|
||||
this.setAttribute('common-cancel', i18next.t('common.cancel'))
|
||||
this.setAttribute('notification-source_dialog_note', i18next.t('notification.source_dialog_note'))
|
||||
this.setAttribute('config-done', i18next.t('config.done'))
|
||||
}
|
||||
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return [ 'dialog', 'value', 'applysec', 'copysec', 'tools-source_save', 'common-cancel', 'notification-source_dialog_note', 'config-done' ];
|
||||
return ['dialog', 'value', 'applysec', 'copysec', 'tools-source_save', 'common-cancel', 'notification-source_dialog_note', 'config-done']
|
||||
}
|
||||
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
@@ -49,51 +51,51 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
let node;
|
||||
if (oldValue === newValue) return
|
||||
let node
|
||||
switch (name) {
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$sourceTxt.focus();
|
||||
this.$dialog.open();
|
||||
} else {
|
||||
this.$dialog.close();
|
||||
this.$sourceTxt.blur();
|
||||
}
|
||||
break;
|
||||
case 'applysec':
|
||||
if (newValue === 'false') {
|
||||
this.$applySec.style.display = 'none';
|
||||
} else {
|
||||
this.$applySec.style.display = 'block';
|
||||
}
|
||||
break;
|
||||
case 'copysec':
|
||||
if (newValue === 'false') {
|
||||
this.$copySec.style.display = 'none';
|
||||
} else {
|
||||
this.$copySec.style.display = 'block';
|
||||
}
|
||||
break;
|
||||
case 'value':
|
||||
this.$sourceTxt.value = newValue;
|
||||
break;
|
||||
case 'tools-source_save':
|
||||
this.$saveBtn.textContent = newValue;
|
||||
break;
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue;
|
||||
break;
|
||||
case 'notification-source_dialog_note':
|
||||
node = this._shadowRoot.querySelector('#copy_save_note');
|
||||
node.textContent = newValue;
|
||||
break;
|
||||
case 'config-done':
|
||||
this.$copyBtn.textContent = newValue;
|
||||
break;
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
case 'dialog':
|
||||
if (newValue === 'open') {
|
||||
this.$sourceTxt.focus()
|
||||
this.$dialog.open()
|
||||
} else {
|
||||
this.$dialog.close()
|
||||
this.$sourceTxt.blur()
|
||||
}
|
||||
break
|
||||
case 'applysec':
|
||||
if (newValue === 'false') {
|
||||
this.$applySec.style.display = 'none'
|
||||
} else {
|
||||
this.$applySec.style.display = 'block'
|
||||
}
|
||||
break
|
||||
case 'copysec':
|
||||
if (newValue === 'false') {
|
||||
this.$copySec.style.display = 'none'
|
||||
} else {
|
||||
this.$copySec.style.display = 'block'
|
||||
}
|
||||
break
|
||||
case 'value':
|
||||
this.$sourceTxt.value = newValue
|
||||
break
|
||||
case 'tools-source_save':
|
||||
this.$saveBtn.textContent = newValue
|
||||
break
|
||||
case 'common-cancel':
|
||||
this.$cancelBtn.textContent = newValue
|
||||
break
|
||||
case 'notification-source_dialog_note':
|
||||
node = this._shadowRoot.querySelector('#copy_save_note')
|
||||
node.textContent = newValue
|
||||
break
|
||||
case 'config-done':
|
||||
this.$copyBtn.textContent = newValue
|
||||
break
|
||||
default:
|
||||
super.attributeChangedCallback(name, oldValue, newValue)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@@ -102,14 +104,15 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
|
||||
* @returns {any}
|
||||
*/
|
||||
get dialog () {
|
||||
return this.getAttribute('dialog');
|
||||
return this.getAttribute('dialog')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set dialog (value) {
|
||||
this.setAttribute('dialog', value);
|
||||
this.setAttribute('dialog', value)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -117,14 +120,15 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
|
||||
* @returns {any}
|
||||
*/
|
||||
get value () {
|
||||
return this.getAttribute('value');
|
||||
return this.getAttribute('value')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set value (value) {
|
||||
this.setAttribute('value', value);
|
||||
this.setAttribute('value', value)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -132,14 +136,15 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
|
||||
* @returns {any}
|
||||
*/
|
||||
get applysec () {
|
||||
return this.getAttribute('applysec');
|
||||
return this.getAttribute('applysec')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set applysec (value) {
|
||||
this.setAttribute('applysec', value);
|
||||
this.setAttribute('applysec', value)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -147,48 +152,54 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
|
||||
* @returns {any}
|
||||
*/
|
||||
get copysec () {
|
||||
return this.getAttribute('copysec');
|
||||
return this.getAttribute('copysec')
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set copysec (value) {
|
||||
this.setAttribute('copysec', value);
|
||||
this.setAttribute('copysec', value)
|
||||
}
|
||||
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
const onCancelHandler = () => {
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
dialog: 'closed'
|
||||
} });
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
dialog: 'closed'
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(closeEvent)
|
||||
}
|
||||
const onCopyHandler = () => {
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
copy: 'click',
|
||||
value: this.$sourceTxt.value
|
||||
}
|
||||
});
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
})
|
||||
this.dispatchEvent(closeEvent)
|
||||
}
|
||||
const onSaveHandler = () => {
|
||||
const closeEvent = new CustomEvent('change', { detail: {
|
||||
value: this.$sourceTxt.value,
|
||||
dialog: 'close'
|
||||
} });
|
||||
this.dispatchEvent(closeEvent);
|
||||
};
|
||||
this.$copyBtn.addEventListener('click', onCopyHandler);
|
||||
this.$saveBtn.addEventListener('click', onSaveHandler);
|
||||
this.$cancelBtn.addEventListener('click', onCancelHandler);
|
||||
this.$dialog.addEventListener('close', onCancelHandler);
|
||||
const closeEvent = new CustomEvent('change', {
|
||||
detail: {
|
||||
value: this.$sourceTxt.value,
|
||||
dialog: 'close'
|
||||
}
|
||||
})
|
||||
this.dispatchEvent(closeEvent)
|
||||
}
|
||||
this.$copyBtn.addEventListener('click', onCopyHandler)
|
||||
this.$saveBtn.addEventListener('click', onSaveHandler)
|
||||
this.$cancelBtn.addEventListener('click', onCancelHandler)
|
||||
this.$dialog.addEventListener('close', onCancelHandler)
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-svg-source-editor-dialog', SeSvgSourceEditorDialog);
|
||||
customElements.define('se-svg-source-editor-dialog', SeSvgSourceEditorDialog)
|
||||
|
||||
Reference in New Issue
Block a user