initial test for web components
parent
c9558aa6fc
commit
1edf001956
|
@ -0,0 +1,109 @@
|
|||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host :hover
|
||||
{
|
||||
background-color: #ffc;
|
||||
}
|
||||
:host
|
||||
{
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin: 2px 2px 4px;
|
||||
padding: 3px;
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.svg_icon {
|
||||
border: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: none;
|
||||
}
|
||||
</style>
|
||||
<div title="title">
|
||||
<img class="svg_icon" src="./images/logo.svg" alt="icon">
|
||||
</div>
|
||||
`;
|
||||
/**
|
||||
* @class ToolButton
|
||||
*/
|
||||
export class ToolButton extends HTMLElement {
|
||||
/**
|
||||
* @function constructor
|
||||
*/
|
||||
constructor () {
|
||||
super();
|
||||
// create the shadowDom and insert the template
|
||||
this._shadowRoot = this.attachShadow({mode: 'closed'});
|
||||
this._shadowRoot.appendChild(template.content.cloneNode(true));
|
||||
// locate the component
|
||||
this.$div = this._shadowRoot.querySelector('div');
|
||||
this.$img = this._shadowRoot.querySelector('img');
|
||||
}
|
||||
/**
|
||||
* @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':
|
||||
this.$div.setAttribute('title', newValue);
|
||||
break;
|
||||
case 'src':
|
||||
this.$img.setAttribute('src', newValue);
|
||||
break;
|
||||
default:
|
||||
// eslint-disable-next-line no-console
|
||||
console.error(`unknown attribute: ${name}`);
|
||||
break;
|
||||
}
|
||||
console.log(name, oldValue, newValue);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get title () {
|
||||
return this.getAttribute('title');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set title (value) {
|
||||
this.setAttribute('title', value);
|
||||
}
|
||||
/**
|
||||
* @function get
|
||||
* @returns {any}
|
||||
*/
|
||||
get src () {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
/**
|
||||
* @function set
|
||||
* @returns {void}
|
||||
*/
|
||||
set src (value) {
|
||||
this.setAttribute('src', value);
|
||||
}
|
||||
}
|
||||
|
||||
// Register
|
||||
customElements.define('tool-button', ToolButton);
|
|
@ -0,0 +1 @@
|
|||
import './ToolButton.js';
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 52">
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_40" y="15" x="28.23" font-weight="bold">s</text>
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_47" y="30" x="28.23" font-weight="bold">v</text>
|
||||
<text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_48" y="44" x="28.23" font-weight="bold">g</text>
|
||||
<line stroke-width="3" fill="none" stroke="#aa0000" id="svg_51" y2="43" x2="16" y1="25" x1="5"/>
|
||||
<line id="svg_62" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="16" y1="26" x1="5"/>
|
||||
<line id="svg_63" stroke-width="3" fill="none" stroke="#aa0000" y2="43" x2="39" y1="25" x1="50"/>
|
||||
<line id="svg_64" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="39" y1="26" x1="51"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.0 KiB |
|
@ -120,7 +120,7 @@
|
|||
<div id="tools_top" class="tools_panel">
|
||||
<div id="editor_panel">
|
||||
<div class="tool_sep"></div>
|
||||
<div class="push_button" id="tool_source" title="Edit Source [U]"></div>
|
||||
<tool-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></tool-button>
|
||||
<div class="tool_button" id="tool_wireframe" title="Wireframe Mode [F]"></div>
|
||||
</div>
|
||||
<!-- History buttons -->
|
||||
|
|
|
@ -6,6 +6,7 @@ For default config and extensions (and available options) available to
|
|||
|
||||
import './jquery.min.js';
|
||||
import './jquery-ui/jquery-ui-1.8.17.custom.min.js';
|
||||
import './components/index.js';
|
||||
import svgEditor from './svgedit.js';
|
||||
|
||||
// URL OVERRIDE CONFIG
|
||||
|
|
|
@ -76,7 +76,7 @@ export const setStrings = function (type, obj, ids) {
|
|||
break;
|
||||
|
||||
case 'title':
|
||||
elem.title = val;
|
||||
elem.setAttribute('title', val);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
|
|
|
@ -698,14 +698,10 @@ span.zoom_tool {
|
|||
width: 24px;
|
||||
margin: 2px 2px 4px 2px;
|
||||
padding: 3px;
|
||||
-webkit-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
moz-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
|
||||
background-color: #E8E8E8;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
}
|
||||
|
||||
#main_menu li#tool_open, #main_menu li#tool_import {
|
||||
|
@ -848,7 +844,7 @@ span.zoom_tool {
|
|||
width: 300px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
-webkit-transition: width 150ms ease;
|
||||
transition: width 150ms ease;
|
||||
}
|
||||
|
||||
.expanded #tools_bottom_2 {
|
||||
|
|
|
@ -1059,7 +1059,6 @@ editor.init = () => {
|
|||
open: 'open.png',
|
||||
import: 'import.png',
|
||||
docprops: 'document-properties.png',
|
||||
source: 'source.png',
|
||||
wireframe: 'wireframe.png',
|
||||
|
||||
undo: 'undo.png',
|
||||
|
@ -1121,7 +1120,6 @@ editor.init = () => {
|
|||
'#tool_export div': 'export',
|
||||
'#tool_open div': 'open',
|
||||
'#tool_import div': 'import',
|
||||
'#tool_source': 'source',
|
||||
'#tool_docprops > div': 'docprops',
|
||||
'#tool_editor_prefs > div': 'config',
|
||||
'#tool_editor_homepage > div': 'globe_link',
|
||||
|
@ -4755,7 +4753,7 @@ editor.init = () => {
|
|||
// behave more like buttons being pressed-in and not images
|
||||
(function () {
|
||||
const toolnames = [
|
||||
'clear', 'open', 'save', 'source', 'delete',
|
||||
'clear', 'open', 'save', 'delete',
|
||||
'delete_multi', 'paste', 'clone', 'clone_multi',
|
||||
'move_top', 'move_bottom'
|
||||
];
|
||||
|
@ -4794,11 +4792,11 @@ editor.init = () => {
|
|||
if (button) {
|
||||
const {title} = button;
|
||||
const index = title.indexOf('Ctrl+');
|
||||
button.title = [
|
||||
button.setAttribute('title', [
|
||||
title.substr(0, index),
|
||||
'Cmd+',
|
||||
title.substr(index + 5)
|
||||
].join('');
|
||||
].join(''));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -5569,7 +5567,7 @@ editor.init = () => {
|
|||
keyAssocs[keyval] = opts.sel;
|
||||
// Disregard for menu items
|
||||
if (btn.closest('#main_menu') === null) {
|
||||
btn.title = newTitle;
|
||||
btn.setAttribute('title', newTitle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue