parent
53f3f7e14a
commit
cdc85a515b
|
@ -1,6 +1,41 @@
|
|||
/* globals svgEditor */
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = `
|
||||
|
||||
/**
|
||||
* @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>
|
||||
:host {
|
||||
position:relative;
|
||||
|
@ -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
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -1,7 +1,40 @@
|
|||
/* globals svgEditor */
|
||||
import { t } from '../locale.js'
|
||||
const template = document.createElement('template')
|
||||
template.innerHTML = `
|
||||
|
||||
/**
|
||||
* @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>
|
||||
:host {
|
||||
position:relative;
|
||||
|
@ -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;
|
||||
|
@ -71,37 +104,13 @@ template.innerHTML = `
|
|||
<div class="overall">
|
||||
<div class="menu">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-button">
|
||||
<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
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue