progress on Dropdow using Elix lib
JFH
parent
78bd2c882d
commit
a284ddf61d
|
|
@ -9074,6 +9074,12 @@
|
|||
"integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
|
||||
"dev": true
|
||||
},
|
||||
"elix": {
|
||||
"version": "14.1.1",
|
||||
"resolved": "https://registry.npmjs.org/elix/-/elix-14.1.1.tgz",
|
||||
"integrity": "sha512-o+6YAp1qhn0Itz2LzEAQtzi9se43eiXdrdSVvXpTrj3bsp4p/c1bY6VVeYfdaJy9a8QRnMkH9WrLGdFbRcFsuA==",
|
||||
"dev": true
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.3",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
|
||||
|
|
|
|||
|
|
@ -170,6 +170,7 @@
|
|||
"cypress-multi-reporters": "1.4.0",
|
||||
"cypress-plugin-snapshots": "1.4.4",
|
||||
"deparam": "git+https://github.com/brettz9/deparam.git#updates",
|
||||
"elix": "^14.1.1",
|
||||
"es-dev-commonjs-transformer": "0.2.0",
|
||||
"es-dev-server": "1.57.8",
|
||||
"es-dev-server-rollup": "0.0.8",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import './seButton.js';
|
||||
import './seFlyingButton.js';
|
||||
import './seExplorerButton.js';
|
||||
import './seDropdown.js';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
/* eslint-disable node/no-unpublished-import */
|
||||
import ListComboBox from 'elix/define/ListComboBox.js';
|
||||
import SpinBox from 'elix/define/NumberSpinBox.js';
|
||||
import {defaultState, template} from 'elix/src/base/internal.js';
|
||||
import {templateFrom} from 'elix/src/core/htmlLiterals.js';
|
||||
|
||||
class MyCombo extends ListComboBox {
|
||||
get [defaultState] () {
|
||||
return Object.assign(super[defaultState], {
|
||||
inputPartType: SpinBox
|
||||
});
|
||||
}
|
||||
get [template] () {
|
||||
const result = super[template];
|
||||
result.content.append(
|
||||
templateFrom.html`
|
||||
<style>
|
||||
::part(input) {
|
||||
width: 30px;
|
||||
}
|
||||
</style>
|
||||
`.content
|
||||
);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('my-combo', MyCombo);
|
||||
|
||||
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;
|
||||
}
|
||||
my-combo::part(popup) {
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
<span class="toolset" title="title">
|
||||
<img class="icon" src="./images/logo.svg" alt="icon" width="18" height="18">
|
||||
<my-combo>
|
||||
<slot></slot>
|
||||
</my-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('my-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
|
||||
*/
|
||||
static get observedAttributes () {
|
||||
return ['title', 'src'];
|
||||
}
|
||||
/**
|
||||
* @function attributeChangedCallback
|
||||
* @param {string} name
|
||||
* @param {string} oldValue
|
||||
* @param {string} newValue
|
||||
* @returns {void}
|
||||
*/
|
||||
attributeChangedCallback (name, oldValue, newValue) {
|
||||
if (oldValue === newValue) return;
|
||||
switch (name) {
|
||||
case 'title':
|
||||
{
|
||||
const shortcut = this.getAttribute('shortcut');
|
||||
this.$span.setAttribute('title', `${newValue} ${shortcut ? `[${shortcut}]` : ''}`);
|
||||
}
|
||||
break;
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
break;
|
||||
default:
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @function connectedCallback
|
||||
* @returns {void}
|
||||
*/
|
||||
connectedCallback () {
|
||||
this.$dropdown.addEventListener('selectedindexchange', (e) => {
|
||||
console.log(e.detail);
|
||||
console.log(this.children[e.detail.selectedIndex].getAttribute('value'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('se-dropdown', Dropdown);
|
||||
|
|
@ -411,29 +411,18 @@
|
|||
</div> <!-- tools_left -->
|
||||
<div id="tools_bottom" class="tools_panel">
|
||||
<!-- Zoom buttons -->
|
||||
<div id="zoom_panel" class="toolset" title="Change zoom level">
|
||||
<label>
|
||||
<span id="zoomLabel" class="zoom_tool icon_label"></span>
|
||||
<input id="zoom" size="3" value="100" type="text" />
|
||||
</label>
|
||||
<div id="zoom_dropdown" class="dropdown">
|
||||
<button></button>
|
||||
<ul>
|
||||
<li>1000%</li>
|
||||
<li>400%</li>
|
||||
<li>200%</li>
|
||||
<li>100%</li>
|
||||
<li>50%</li>
|
||||
<li>25%</li>
|
||||
<li id="fit_to_canvas" data-val="canvas">Fit to canvas</li>
|
||||
<li id="fit_to_sel" data-val="selection">Fit to selection</li>
|
||||
<li id="fit_to_layer_content" data-val="layer">Fit to layer content</li>
|
||||
<li id="fit_to_all" data-val="content">Fit to all content</li>
|
||||
<li>100%</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tool_sep"></div>
|
||||
</div>
|
||||
<se-dropdown src="./images/zoom.svg" title="Change zoom level">
|
||||
<div value="1000">1000%</div>
|
||||
<div value="400">400%</div>
|
||||
<div value="200">200%</div>
|
||||
<div value="100">100%</div>
|
||||
<div value="50">50%</div>
|
||||
<div value="25">25%</div>
|
||||
<div value="canvas">Fit to canvas</div>
|
||||
<div value="selection">Fit to selection</div>
|
||||
<div value="layer">Fit to layer content</div>
|
||||
<div value="content">Fit to all content</div>
|
||||
</se-dropdown>
|
||||
<div id="tools_bottom_2">
|
||||
<div id="color_tools">
|
||||
<div class="color_tool" id="tool_fill">
|
||||
|
|
@ -493,12 +482,14 @@
|
|||
</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