You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.2 KiB
59 lines
1.2 KiB
4 years ago
|
import SpriteSymbol from './symbol';
|
||
|
|
import parse from './utils/parse';
|
||
|
|
import wrapInSvgString from './utils/wrap-in-svg-string';
|
||
|
|
|
||
|
|
export default class BrowserSpriteSymbol extends SpriteSymbol {
|
||
|
|
get isMounted() {
|
||
|
|
return !!this.node;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {Element} node
|
||
|
|
* @return {BrowserSpriteSymbol}
|
||
|
|
*/
|
||
|
|
static createFromExistingNode(node) {
|
||
|
|
return new BrowserSpriteSymbol({
|
||
|
|
id: node.getAttribute('id'),
|
||
|
|
viewBox: node.getAttribute('viewBox'),
|
||
|
|
content: node.outerHTML
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
destroy() {
|
||
|
|
if (this.isMounted) {
|
||
|
|
this.unmount();
|
||
|
|
}
|
||
|
|
super.destroy();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {Element|string} target
|
||
|
|
* @return {Element}
|
||
|
|
*/
|
||
|
|
mount(target) {
|
||
|
|
if (this.isMounted) {
|
||
|
|
return this.node;
|
||
|
|
}
|
||
|
|
|
||
|
|
const mountTarget = typeof target === 'string' ? document.querySelector(target) : target;
|
||
|
|
const node = this.render();
|
||
|
|
this.node = node;
|
||
|
|
|
||
|
|
mountTarget.appendChild(node);
|
||
|
|
|
||
|
|
return node;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @return {Element}
|
||
|
|
*/
|
||
|
|
render() {
|
||
|
|
const content = this.stringify();
|
||
|
|
return parse(wrapInSvgString(content)).childNodes[0];
|
||
|
|
}
|
||
|
|
|
||
|
|
unmount() {
|
||
|
|
this.node.parentNode.removeChild(this.node);
|
||
|
|
}
|
||
|
|
}
|