Spaces:
Sleeping
Sleeping
import CodeMirror from 'codemirror' | |
import 'codemirror/mode/javascript/javascript' | |
import nextTick from 'licia/nextTick' | |
import copy from 'licia/copy' | |
import beautify from 'js-beautify' | |
import stripIndent from 'licia/stripIndent' | |
export default function (eruda) { | |
let { evalCss } = eruda.util | |
class Code extends eruda.Tool { | |
constructor() { | |
super() | |
this.name = 'code' | |
this.displayName = 'コード' | |
this._style = evalCss(require('./style.scss')) | |
this._CodeMirrorStyle = evalCss( | |
require('codemirror/lib/codemirror.css') + | |
require('codemirror/theme/material-darker.css') | |
) | |
this._CodeMirrorCustomStyle = evalCss(require('./CodeMirror.css')) | |
this._editor = null | |
} | |
init($el, container) { | |
super.init($el, container) | |
$el.html(stripIndent`<textarea class="eruda-editor">function fib(num) { | |
if (num <= 2) return 1; | |
return fib(num - 1) + fib(num - 2); | |
} | |
console.log(fib(5));</textarea> | |
<div class="eruda-bottom-bar"> | |
<div class="eruda-btn eruda-beautify"> | |
整形 | |
</div> | |
<div class="eruda-btn eruda-copy"> | |
コピー | |
</div> | |
<div class="eruda-btn eruda-clear"> | |
クリア | |
</div> | |
<div class="eruda-btn eruda-run"> | |
実行 | |
</div> | |
</div>`) | |
this._bindEvent() | |
} | |
show() { | |
super.show() | |
if (!this._editor) { | |
let container = this._$el.find('.eruda-editor').get(0) | |
this._editor = CodeMirror.fromTextArea(container, { | |
lineNumbers: 'true', | |
mode: 'javascript', | |
}) | |
nextTick(() => this._editor.refresh()) | |
} | |
} | |
hide() { | |
super.hide() | |
} | |
run() { | |
try { | |
evalJs(this._editor.getValue()) | |
} catch (e) { | |
/* eslint-disable no-console */ | |
console.error(e) | |
} | |
} | |
beautify() { | |
let editor = this._editor | |
let value = editor.getValue() | |
editor.setValue(beautify(value)) | |
} | |
copy() { | |
copy(this._editor.getValue()) | |
eruda.get().notify('コピーしました', { icon: 'success' }) | |
} | |
clear() { | |
this._editor.setValue('') | |
} | |
destroy() { | |
super.destroy() | |
evalCss.remove(this._style) | |
evalCss.remove(this._CodeMirrorStyle) | |
evalCss.remove(this._CodeMirrorCustomStyle) | |
} | |
_bindEvent() { | |
this._$el | |
.on('click', '.eruda-run', () => this.run()) | |
.on('click', '.eruda-beautify', () => this.beautify()) | |
.on('click', '.eruda-clear', () => this.clear()) | |
.on('click', '.eruda-copy', () => this.copy()) | |
} | |
} | |
let evalJs = (code) => { | |
let ret | |
try { | |
ret = eval.call(window, `(${code})`) | |
} catch (e) { | |
ret = eval.call(window, code) | |
} | |
return ret | |
} | |
return new Code() | |
} | |