1 | (function () {
|
2 |
|
3 | const $query = $('#query');
|
4 | function filter() {
|
5 | const str = $query.val();
|
6 | if (!str) {
|
7 | $('.demo-thumbnail').show();
|
8 | } else {
|
9 | $('.demo-thumbnail').each(function () {
|
10 | const $thumbnail = $(this);
|
11 | const basename = $thumbnail.data('basename');
|
12 | if (basename.indexOf(str) === -1) {
|
13 | $thumbnail.hide();
|
14 | } else {
|
15 | $thumbnail.show();
|
16 | }
|
17 | });
|
18 | }
|
19 | }
|
20 | $query.on('input', _.debounce(filter));
|
21 |
|
22 |
|
23 | let currentId;
|
24 | const $code = $('#code');
|
25 | const htmlEditor = CodeMirror.fromTextArea($code[0], {
|
26 | mode: "text/html",
|
27 | extraKeys: {
|
28 | 'Ctrl-Space': 'autocomplete'
|
29 | },
|
30 | foldGutter: true,
|
31 | gutters: [
|
32 | 'CodeMirror-linenumbers',
|
33 | 'CodeMirror-foldgutter'
|
34 | ],
|
35 | lineNumbers: true,
|
36 | lineWrapping: false
|
37 | });
|
38 |
|
39 | const $docContainer = $('#doc-container');
|
40 | const $chartPanel = $('#chart-panel');
|
41 | const $codePanel = $('#code-panel');
|
42 |
|
43 | function syncCode(code) {
|
44 | $chartPanel.html('<iframe class="chart-frame" frameborder="0"></iframe>');
|
45 | $chartPanel.find('iframe')[0].contentWindow.document.write(code);
|
46 | htmlEditor.getDoc().setValue(code);
|
47 | }
|
48 |
|
49 | routie({
|
50 | '/:id': id => {
|
51 | $docContainer.show();
|
52 | const $htmlCode = $(`#code-${id}`);
|
53 | const code = $htmlCode.text();
|
54 | syncCode(code)
|
55 | },
|
56 | '': () => {
|
57 | $docContainer.hide();
|
58 | }
|
59 | });
|
60 |
|
61 |
|
62 | $codePanel.resizable({
|
63 | handleSelector: '#resize-handler',
|
64 | resizeWidthFrom: 'right',
|
65 | resizeHeight: false,
|
66 | onDragStart() {
|
67 | $docContainer.css('pointer-events', 'none');
|
68 | $docContainer.css('cursor', 'col-resize');
|
69 | $codePanel.find('.CodeMirror-gutter-elt').css('cursor', 'col-resize');
|
70 | },
|
71 | onDragEnd() {
|
72 | $docContainer.css('pointer-events', 'auto');
|
73 | $docContainer.css('cursor', 'default');
|
74 | $codePanel.find('.CodeMirror-gutter-elt').css('cursor', 'default');
|
75 | },
|
76 | });
|
77 |
|
78 |
|
79 | const BTN_COPY_SELECTOR = '#copy-code';
|
80 | const clipboard = new Clipboard(BTN_COPY_SELECTOR, {
|
81 | text: () => htmlEditor.getValue(),
|
82 | });
|
83 | let timer;
|
84 | clipboard.on('success', e => {
|
85 | e.clearSelection();
|
86 | $(BTN_COPY_SELECTOR).text('Succeed!');
|
87 | clearTimeout(timer);
|
88 | timer = setTimeout(() => {
|
89 | $(BTN_COPY_SELECTOR).text('Copy');
|
90 | }, 2000);
|
91 | });
|
92 | clipboard.on('error', e => {
|
93 | e.clearSelection();
|
94 | $(BTN_COPY_SELECTOR).text('Failed!');
|
95 | clearTimeout(timer);
|
96 | timer = setTimeout(() => {
|
97 | $(BTN_COPY_SELECTOR).text('Copy');
|
98 | }, 2000);
|
99 | });
|
100 |
|
101 |
|
102 | $('#execute').on('click', () => {
|
103 | syncCode(htmlEditor.getValue());
|
104 | });
|
105 | })();
|