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

allow to click the handle to close the flying button

master
jfh 2020-11-10 20:32:23 +01:00
parent d4d122aa3b
commit d66a22fe4e
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,6 +94,7 @@ export class FlyingButton extends HTMLElement {
this._shadowRoot.appendChild(template.content.cloneNode(true)); this._shadowRoot.appendChild(template.content.cloneNode(true));
// locate the component // locate the component
this.$button = this._shadowRoot.querySelector('.menu-button'); this.$button = this._shadowRoot.querySelector('.menu-button');
this.$handle = this._shadowRoot.querySelector('.handle');
this.$overall = this._shadowRoot.querySelector('.overall'); this.$overall = this._shadowRoot.querySelector('.overall');
this.$img = this._shadowRoot.querySelector('img'); this.$img = this._shadowRoot.querySelector('img');
this.$menu = this._shadowRoot.querySelector('.menu'); this.$menu = this._shadowRoot.querySelector('.menu');
@ -209,6 +210,8 @@ export class FlyingButton extends HTMLElement {
this.$img.setAttribute('src', this.activeSlot.getAttribute('src')); this.$img.setAttribute('src', this.activeSlot.getAttribute('src'));
// capture click event on the button to manage the logic // capture click event on the button to manage the logic
const onClickHandler = (ev) => { const onClickHandler = (ev) => {
console.log(ev.target);
ev.stopPropagation();
switch (ev.target.nodeName) { switch (ev.target.nodeName) {
case 'SE-FLYINGBUTTON': case 'SE-FLYINGBUTTON':
if (this.pressed) { if (this.pressed) {
@ -222,11 +225,15 @@ export class FlyingButton extends HTMLElement {
case 'SE-BUTTON': case 'SE-BUTTON':
// change to the current action // change to the current action
this.$img.setAttribute('src', ev.target.getAttribute('src')); this.$img.setAttribute('src', ev.target.getAttribute('src'));
this.currentAction = ev.target; this.activeSlot = ev.target;
this.setAttribute('pressed', 'pressed'); this.setAttribute('pressed', 'pressed');
// and close the menu // and close the menu
this.$menu.classList.remove('open'); this.$menu.classList.remove('open');
break; break;
case 'DIV':
// this is a click on the handle so let's open/close the menu.
this.$menu.classList.toggle('open');
break;
default: default:
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.error('unkonw nodeName for:', ev.target, ev.target.className); console.error('unkonw nodeName for:', ev.target, ev.target.className);
@ -234,6 +241,7 @@ export class FlyingButton extends HTMLElement {
}; };
// capture event from slots // capture event from slots
this.addEventListener('click', onClickHandler); this.addEventListener('click', onClickHandler);
this.$handle.addEventListener('click', onClickHandler);
} }
} }