progress
JFH
parent
98d91e686f
commit
878720409e
|
|
@ -1,8 +1,9 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import ListComboBox from 'elix/define/ListComboBox.js';
|
||||
import NumberSpinBox from 'elix/define/NumberSpinBox.js';
|
||||
import {defaultState, template} from 'elix/src/base/internal.js';
|
||||
import {templateFrom} from 'elix/src/core/htmlLiterals.js';
|
||||
import {defaultState} from 'elix/src/base/internal.js';
|
||||
import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js';
|
||||
import {internal} from 'elix';
|
||||
|
||||
/**
|
||||
* @class CustomCombo
|
||||
|
|
@ -14,77 +15,49 @@ class CustomCombo extends ListComboBox {
|
|||
*/
|
||||
get [defaultState] () {
|
||||
return Object.assign(super[defaultState], {
|
||||
inputPartType: NumberSpinBox
|
||||
inputPartType: NumberSpinBox,
|
||||
src: './imags.logo.svg'
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {PlainObject}
|
||||
*/
|
||||
get [template] () {
|
||||
const result = super[template];
|
||||
get [internal.template] () {
|
||||
const result = super[internal.template];
|
||||
const source = result.content.getElementById('source');
|
||||
source.prepend(fragmentFrom.html`
|
||||
<img src="./images/logo.svg" alt="icon" width="18" height="18">
|
||||
</img>
|
||||
`.cloneNode(true));
|
||||
result.content.append(
|
||||
templateFrom.html`
|
||||
<style>
|
||||
:host {
|
||||
float:left;
|
||||
}
|
||||
::part(input) {
|
||||
width: 30px;
|
||||
width: 40px;
|
||||
}
|
||||
[part~="source"] {
|
||||
grid-template-columns: 20px 1fr auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
::slotted(*) {
|
||||
padding: 4px;
|
||||
background: #E8E8E8;
|
||||
border: 1px solid #B0B0B0;
|
||||
margin: 0 0 -1px 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
[part~="popup"] {
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
`.content
|
||||
);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('custom-combo', CustomCombo);
|
||||
|
||||
const mytemplate = document.createElement('template');
|
||||
mytemplate.innerHTML = `
|
||||
<style>
|
||||
.toolset {
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.icon {
|
||||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
::slotted(*) {
|
||||
padding: 4px;
|
||||
background: #E8E8E8;
|
||||
border: 1px solid #B0B0B0;
|
||||
margin: 0 0 -1px 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
custom-combo::part(popup) {
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
<span class="toolset" title="title">
|
||||
<img class="icon" src="./images/logo.svg" alt="icon" width="18" height="18">
|
||||
<custom-combo>
|
||||
<slot></slot>
|
||||
</custom-combo>
|
||||
</span>
|
||||
`;
|
||||
/**
|
||||
* @class Dropdown
|
||||
*/
|
||||
export class Dropdown extends HTMLElement {
|
||||
/**
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({mode: 'open'});
|
||||
this._shadowRoot.appendChild(mytemplate.content.cloneNode(true));
|
||||
this.$dropdown = this._shadowRoot.querySelector('custom-combo');
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
this.$span = this._shadowRoot.querySelector('span');
|
||||
// we retrieve all elements added in the slot (i.e. se-buttons)
|
||||
// this.$elements = this.$menu.lastElementChild.assignedElements();
|
||||
}
|
||||
/**
|
||||
* @function observedAttributes
|
||||
* @returns {any} observed
|
||||
|
|
@ -103,37 +76,57 @@ export class Dropdown extends HTMLElement {
|
|||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'title':
|
||||
{
|
||||
const shortcut = this.getAttribute('shortcut');
|
||||
this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
||||
}
|
||||
console.log({this: this, name, oldValue, newValue});
|
||||
// this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
||||
break;
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
console.log({name, oldValue, newValue});
|
||||
this.src = newValue;
|
||||
break;
|
||||
default:
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
super.attributeChangedCallback(name, oldValue, newValue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.$dropdown.addEventListener('selectedindexchange', (e) => {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('selectedindexchange', (e) => {
|
||||
console.log(e.detail);
|
||||
console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
|
||||
console.log(this);
|
||||
});
|
||||
this.$dropdown.addEventListener('input', (e) => {
|
||||
this.addEventListener('input', (e) => {
|
||||
console.log(e.detail);
|
||||
console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
|
||||
console.log(this);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @function [internal.render]
|
||||
* @param {PlainObject} changed
|
||||
* @returns {void}
|
||||
*/
|
||||
[internal.render] (changed) {
|
||||
super[internal.render](changed);
|
||||
console.log(this, changed, this[internal.firstRender], changed.src);
|
||||
if (this[internal.firstRender]) {
|
||||
this.$img = this.shadowRoot.querySelector('img');
|
||||
}
|
||||
if (changed.src) {
|
||||
this.$img.setAttribute('src', this[internal.state].src);
|
||||
}
|
||||
}
|
||||
get src () {
|
||||
return this[internal.state].src;
|
||||
}
|
||||
set src (src) {
|
||||
this[internal.setState]({src});
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-dropdown', Dropdown);
|
||||
customElements.define('se-dropdown', CustomCombo);
|
||||
|
|
|
|||
|
|
@ -482,14 +482,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<se-dropdown></se-dropdown>
|
||||
<div id="tools_bottom_3">
|
||||
<div id="palette_holder">
|
||||
<div id="palette" title="Click to change fill color, shift-click to change stroke color">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<se-dropdown></se-dropdown>
|
||||
<!-- <div id="copyright"><span id="copyrightLabel">Powered by</span> <a href="https://github.com/SVG-Edit/svgedit" target="_blank">SVG-edit v2.6-beta</a></div> -->
|
||||
</div>
|
||||
<div id="option_lists" class="dropdown">
|
||||
|
|
|
|||
Loading…
Reference in New Issue