declare function CodeMirror(el: Element, config: any): void;
module spine {
export class SpinePlayerEditor {
private static DEFAULT_CODE =
`
`.trim();
private prefix: string =
`
`.trim()
private postfix: string = ``;
private code: any;
private player: HTMLIFrameElement;
constructor(parent: HTMLElement) {
this.render(parent);
}
private render (parent: HTMLElement) {
let dom = /*html*/`
`;
parent.innerHTML = dom;
let codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
this.player = parent.getElementsByClassName("spine-player-editor-player")[0] as HTMLIFrameElement;
requestAnimationFrame(() => {
this.code = CodeMirror(codeElement, {
lineNumbers: true,
tabSize: 3,
indentUnit: 3,
indentWithTabs: true,
scrollBarStyle: "native",
mode: "htmlmixed",
theme: "monokai"
});
this.code.on("change", () => {
this.startPlayer();
});
this.setCode(SpinePlayerEditor.DEFAULT_CODE);
})
}
setPreAndPostfix(prefix: string, postfix: string) {
this.prefix = prefix;
this.postfix = postfix;
this.startPlayer()
}
setCode(code: string) {
this.code.setValue(code);
this.startPlayer();
}
startPlayer() {
let code = this.code.getDoc().getValue();
this.player.src = "data:text/html;charset=utf-8," + this.prefix + code + this.postfix;
}
}
}