64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<cat-template>
|
|
<iframe></iframe>
|
|
</cat-template>
|
|
<script>
|
|
(function() {
|
|
let template = document.currentScript.ownerDocument.querySelector('cat-template');
|
|
customElements.define('cat-projectview', class extends HTMLElement {
|
|
static get observedAttributes() { return []; }
|
|
attributeChangedCallback(attr, oldValue, newValue) { this[attr] = newValue; }
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
connectedCallback() {
|
|
template.cloneTo(this);
|
|
}
|
|
templatedCallback() {
|
|
var iframe = this.querySelector('iframe');
|
|
iframe.addEventListener('load', evt => {
|
|
iframe.contentDocument.querySelector('body').onclick = evt => {
|
|
this.focusedElement = evt.target;
|
|
};
|
|
iframe.contentDocument.querySelector('body').onmouseover = evt => {
|
|
//evt.target.style.border = '2px solid blue';
|
|
};
|
|
iframe.contentDocument.querySelector('body').onmouseout = evt => {
|
|
//evt.target.style.border = '';
|
|
};
|
|
this.dispatchEvent(new CustomEvent('loaded'));
|
|
});
|
|
}
|
|
focusProject() {
|
|
this.dispatchEvent(new CustomEvent('focus-project'));
|
|
}
|
|
setContents(data) {
|
|
this.querySelector('iframe').srcdoc = data;
|
|
}
|
|
getContents() {
|
|
let iframe = this.querySelector('iframe');
|
|
return new XMLSerializer().serializeToString(iframe.contentDocument);
|
|
}
|
|
getTitle() {
|
|
let iframe = this.querySelector('iframe');
|
|
let head = iframe.contentDocument.querySelector('head');
|
|
if (!head) return '';
|
|
let title = head.querySelector('title');
|
|
if (!title) return '';
|
|
return title.innerText;
|
|
}
|
|
get focusedElement() {
|
|
return this._focusedElement;
|
|
}
|
|
set focusedElement(el) {
|
|
if (this._focusedElement) {
|
|
this._focusedElement.style.border = '';
|
|
}
|
|
this._focusedElement = el;
|
|
this._focusedElement.style.border = '2px solid green';
|
|
this.dispatchEvent(new CustomEvent('selected-element', {detail: el}));
|
|
}
|
|
});
|
|
})()
|
|
</script>
|