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

#631 globals svgEditor to get imgpath and set changes

Browse Source
This commit is contained in:
agriyadev5
2021-09-22 12:17:21 +05:30
parent 8df8efedf0
commit b958009e16
23 changed files with 46 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
/* globals svgEditor */
import { t } from '../locale.js';
const template = document.createElement('template');
// eslint-disable-next-line no-unsanitized/property
@@ -55,18 +56,7 @@ export class ToolButton extends HTMLElement {
// locate the component
this.$div = this._shadowRoot.querySelector('div');
this.$img = this._shadowRoot.querySelector('img');
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -83,7 +73,7 @@ export class ToolButton extends HTMLElement {
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue && name !== 'src') return;
if (oldValue === newValue) return;
switch (name) {
case 'title':
{
@@ -97,9 +87,8 @@ export class ToolButton extends HTMLElement {
case 'src':
if (newValue.indexOf("data:") !== -1) {
this.$img.setAttribute('src', newValue);
} else if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$img.setAttribute('src', imgPath + "/" + newValue);
} else {
this.$img.setAttribute('src', this.imgPath + "/" + newValue);
}
break;
case 'pressed':

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

@@ -1,3 +1,4 @@
/* globals svgEditor */
/* eslint-disable max-len */
import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js';
import PaintBox from './PaintBox.js';
@@ -666,20 +667,16 @@ export class SeColorPicker extends HTMLElement {
this.i18next = null;
this.$picker = this._shadowRoot.getElementById('picker');
this.$color_picker = this._shadowRoot.getElementById('color_picker');
this.editor = null;
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (i18next, editor) {
init (i18next) {
this.i18next = i18next;
this.setAttribute('config-change_xxx_color', t('config.change_xxx_color'));
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
}
/**
* @function observedAttributes
@@ -696,13 +693,10 @@ export class SeColorPicker extends HTMLElement {
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue && name !== 'src') return;
if (oldValue === newValue) return;
switch (name) {
case 'src':
if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$logo.setAttribute('src', imgPath + '/' + newValue);
}
this.$logo.setAttribute('src', this.imgPath + '/' + newValue);
break;
case 'label':
this.setAttribute('title', t(newValue));

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

@@ -1,3 +1,4 @@
/* globals svgEditor */
/* eslint-disable no-unsanitized/property */
const template = document.createElement('template');
template.innerHTML = `
@@ -119,18 +120,7 @@ export class ExplorerButton extends HTMLElement {
this.$lib = this._shadowRoot.querySelector('.image-lib');
this.files = [];
this.request = new XMLHttpRequest();
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -147,7 +137,7 @@ export class ExplorerButton extends HTMLElement {
* @returns {void}
*/
async attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue && name !== 'src') return;
if (oldValue === newValue) return;
switch (name) {
case 'title':
{
@@ -184,10 +174,7 @@ export class ExplorerButton extends HTMLElement {
}
break;
case 'src':
if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$img.setAttribute('src', imgPath + '/' + newValue);
}
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
break;
default:
// eslint-disable-next-line no-console

18
src/editor/components/seFlyingButton.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import { t } from '../locale.js';
const template = document.createElement('template');
template.innerHTML = `
@@ -100,18 +101,7 @@ export class FlyingButton extends HTMLElement {
// the last element of the div is the slot
// we retrieve all elements added in the slot (i.e. se-buttons)
this.$elements = this.$menu.lastElementChild.assignedElements();
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
// initialize currentAction with the first slot of the list
const { imgPath } = this.editor.configObj.curConfig;
this.$img.setAttribute('src', imgPath + '/' + this.activeSlot.getAttribute('src'));
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -246,10 +236,10 @@ export class FlyingButton extends HTMLElement {
*/
connectedCallback () {
this.activeSlot = this.shadowRoot.querySelector('slot').assignedElements()[0];
this.$img.setAttribute('src', this.imgPath + '/' + this.activeSlot.getAttribute('src'));
// capture click event on the button to manage the logic
const onClickHandler = (ev) => {
ev.stopPropagation();
const { imgPath } = this.editor.configObj.curConfig;
switch (ev.target.nodeName) {
case 'SE-FLYINGBUTTON':
if (this.pressed) {
@@ -262,7 +252,7 @@ export class FlyingButton extends HTMLElement {
break;
case 'SE-BUTTON':
// change to the current action
this.$img.setAttribute('src', imgPath + '/' + ev.target.getAttribute('src'));
this.$img.setAttribute('src', this.imgPath + '/' + ev.target.getAttribute('src'));
this.activeSlot = ev.target;
this.setAttribute('pressed', 'pressed');
// and close the menu

4
src/editor/components/seList.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import 'elix/define/DropdownList.js';
import { t } from '../locale.js';
@@ -46,6 +47,7 @@ export class SeList extends HTMLElement {
this.$label = this._shadowRoot.querySelector('label');
this.$selction = this.$dropdown.shadowRoot.querySelector('#source').querySelector('#value');
this.items = this.querySelectorAll("se-list-item");
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -85,7 +87,7 @@ export class SeList extends HTMLElement {
while(currentObj.$selction.firstChild)
currentObj.$selction.removeChild(currentObj.$selction.firstChild);
const img = document.createElement('img');
img.src = './images/' + element.getAttribute("src");
img.src = currentObj.imgPath + '/' + element.getAttribute("src");
img.style.height = element.getAttribute("img-height");
img.setAttribute('title', t(element.getAttribute("title")));
currentObj.$selction.append(img);

23
src/editor/components/seListItem.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import 'elix/define/Option.js';
import { t } from '../locale.js';
@@ -34,18 +35,7 @@ export class SeListItem extends HTMLElement {
this.$svg.setAttribute('style', 'display: none;');
this.$img = this._shadowRoot.querySelector('img');
this.$img.setAttribute('style', 'display: none;');
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -63,18 +53,15 @@ export class SeListItem extends HTMLElement {
* @returns {void}
*/
attributeChangedCallback (name, oldValue, newValue) {
if (oldValue === newValue && name !== 'src') return;
if (oldValue === newValue) return;
switch (name) {
case 'option':
this.$menuitem.setAttribute('option', newValue);
this.$menuitem.textContent = t(newValue);
break;
case 'src':
if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$img.setAttribute('style', 'display: block;');
this.$img.setAttribute('src', imgPath + '/' + newValue);
}
this.$img.setAttribute('style', 'display: block;');
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
break;
case 'title':
this.$img.setAttribute('title', t(newValue));

27
src/editor/components/seMenu.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import 'elix/define/MenuItem.js';
import './sePlainMenuButton.js';
@@ -43,18 +44,7 @@ export class SeMenu extends HTMLElement {
this._shadowRoot.append(template.content.cloneNode(true));
this.$menu = this._shadowRoot.querySelector('elix-menu-button');
this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot;
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -73,16 +63,13 @@ export class SeMenu extends HTMLElement {
*/
attributeChangedCallback (name, oldValue, newValue) {
const image = new Image();
if (oldValue === newValue && name !== 'src') return;
if (oldValue === newValue) return;
switch (name) {
case 'src':
if (this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
image.src = imgPath + '/' + newValue;
image.width = 24;
image.height = 24;
this.$label.prepend(image);
}
image.src = this.imgPath + '/' + newValue;
image.width = 24;
image.height = 24;
this.$label.prepend(image);
break;
case 'label':
this.$label.prepend(newValue);

23
src/editor/components/seMenuItem.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import 'elix/define/Menu.js';
import 'elix/define/MenuItem.js';
import { t } from '../locale.js';
@@ -29,18 +30,7 @@ export class SeMenuItem extends HTMLElement {
this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
this.$svg.setAttribute('style', 'display: none;');
this.editor = null;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -58,14 +48,11 @@ export class SeMenuItem extends HTMLElement {
*/
attributeChangedCallback (name, oldValue, newValue) {
let shortcut = '';
if (oldValue === newValue && name !== 'src') return;
if (oldValue === newValue) return;
switch (name) {
case 'src':
if(this.editor !== null) {
const { imgPath } = this.editor.configObj.curConfig;
this.$img.style.display = 'inline-block';
this.$img.setAttribute('src', imgPath + '/' + newValue);
}
this.$img.style.display = 'inline-block';
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
break;
case 'label':
shortcut = this.getAttribute('shortcut');

4
src/editor/components/seSpinInput.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import '../dialogs/se-elix/define/NumberSpinBox.js';
import { t } from '../locale.js';
@@ -68,6 +69,7 @@ export class SESpinInput extends HTMLElement {
this.$label = this.shadowRoot.getElementById('label');
this.$event = new CustomEvent('change');
this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
this.imgPath = svgEditor.configObj.curConfig.imgPath;
}
/**
* @function observedAttributes
@@ -93,7 +95,7 @@ export class SESpinInput extends HTMLElement {
}
break;
case 'src':
this.$img.setAttribute('src', './images/' + newValue);
this.$img.setAttribute('src', this.imgPath + '/' + newValue);
this.$label.remove();
this.$div.classList.add('imginside');
break;

16
src/editor/components/seZoom.js
View File

@@ -1,3 +1,4 @@
/* globals svgEditor */
import ListComboBox from 'elix/define/ListComboBox.js';
import * as internal from 'elix/src/base/internal.js';
import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js';
@@ -59,17 +60,6 @@ class Zoom extends ListComboBox {
);
return result;
}
/**
* @function init
* @param {any} name
* @returns {void}
*/
init (editor) {
this.editor = editor;
if (this.hasAttribute("src")) {
this.setAttribute('src', this.getAttribute("src"));
}
}
/**
* @function observedAttributes
* @returns {any} observed
@@ -91,8 +81,8 @@ class Zoom extends ListComboBox {
// this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
break;
case 'src':
if (this.editor !== null && this.editor !== undefined) {
const { imgPath } = this.editor.configObj.curConfig;
{
const { imgPath } = svgEditor.configObj.curConfig;
this.src = imgPath + '/' + newValue;
}
break;