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

Fix image paths (#813) 

* Update seExplorerButton.js

* Update seFlyingButton.js

* Fix linter
master
pmkrawczyk 2022-07-05 22:02:32 +02:00 committed by GitHub
parent 53f3f7e14a
commit cdc85a515b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 201 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,39 @@
/* globals svgEditor */
/**
* @class ExplorerButton
*/
export class ExplorerButton extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super()
// create the shadowDom and insert the template
// create the shadowDom and insert the template
this.imgPath = svgEditor.configObj.curConfig.imgPath
this.template = this.createTemplate(this.imgPath)
this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(this.template.content.cloneNode(true))
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button')
this.$overall = this._shadowRoot.querySelector('.overall')
this.$img = this._shadowRoot.querySelector('.menu-button img')
this.$menu = this._shadowRoot.querySelector('.menu')
this.$handle = this._shadowRoot.querySelector('.handle')
this.$lib = this._shadowRoot.querySelector('.image-lib')
this.files = []
this.request = new XMLHttpRequest()
this.imgPath = svgEditor.configObj.curConfig.imgPath
}
/**
* @function createTemplate
* @param {string} imgPath
* @returns {any} template
*/
createTemplate (imgPath) {
const template = document.createElement('template')
template.innerHTML = `
<style>
@ -40,7 +75,7 @@ template.innerHTML = `
.handle {
height: 8px;
width: 8px;
background-image: url(./images/handle.svg);
background-image: url(${imgPath}/handle.svg);
position:absolute;
bottom: 0px;
right: 0px;
@ -95,31 +130,8 @@ template.innerHTML = `
<div class="menu">
<div class="menu-item">menu</div>
</div>
</div>
`
/**
* @class ExplorerButton
*/
export class ExplorerButton extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super()
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(template.content.cloneNode(true))
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button')
this.$overall = this._shadowRoot.querySelector('.overall')
this.$img = this._shadowRoot.querySelector('.menu-button img')
this.$menu = this._shadowRoot.querySelector('.menu')
this.$handle = this._shadowRoot.querySelector('.handle')
this.$lib = this._shadowRoot.querySelector('.image-lib')
this.files = []
this.request = new XMLHttpRequest()
this.imgPath = svgEditor.configObj.curConfig.imgPath
</div>`
return template
}
/**

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

@ -1,5 +1,38 @@
/* globals svgEditor */
import { t } from '../locale.js'
/**
* @class FlyingButton
*/
export class FlyingButton extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super()
// create the shadowDom and insert the template
this.imgPath = svgEditor.configObj.curConfig.imgPath
this.template = this.createTemplate(this.imgPath)
this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(this.template.content.cloneNode(true))
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button')
this.$handle = this._shadowRoot.querySelector('.handle')
this.$overall = this._shadowRoot.querySelector('.overall')
this.$img = this._shadowRoot.querySelector('img')
this.$menu = this._shadowRoot.querySelector('.menu')
// 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()
}
/**
* @function createTemplate
* @param {string} imgPath
* @returns {any} template
*/
createTemplate (imgPath) {
const template = document.createElement('template')
template.innerHTML = `
<style>
@ -40,7 +73,7 @@ template.innerHTML = `
.handle {
height: 8px;
width: 8px;
background-image: url(./images/handle.svg);
background-image: url(${imgPath}/handle.svg);
position:absolute;
bottom: 0px;
right: 0px;
@ -76,32 +109,8 @@ template.innerHTML = `
<img class="button-icon" src="logo.svg" alt="icon">
<div class="handle"></div>
</div>
</div>
`
/**
* @class FlyingButton
*/
export class FlyingButton extends HTMLElement {
/**
* @function constructor
*/
constructor () {
super()
// create the shadowDom and insert the template
this._shadowRoot = this.attachShadow({ mode: 'open' })
this._shadowRoot.append(template.content.cloneNode(true))
// locate the component
this.$button = this._shadowRoot.querySelector('.menu-button')
this.$handle = this._shadowRoot.querySelector('.handle')
this.$overall = this._shadowRoot.querySelector('.overall')
this.$img = this._shadowRoot.querySelector('img')
this.$menu = this._shadowRoot.querySelector('.menu')
// 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.imgPath = svgEditor.configObj.curConfig.imgPath
</div>`
return template
}
/**