-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.html
79 lines (79 loc) · 2.73 KB
/
main.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="static/index.min.css">
</head>
<body>
<div id="app">
<div id="editor">
<ul class="tab">
<li class="item run" @click="run"><div class="label">RUN ▶</div></li>
<li
v-for="(index, item) in items"
class="item cloak"
:class="item.active ? 'active' : ''"
:title="item.title"
@click="focus(index)"
@mouseover="onMouseover(index)"
@mouseout="onMouseout(index)"
v-cloak
>
<div class="label">{{ item.title }}</div>
<tooltip class="tooltip" v-cloak>
<tooltip-item
v-show="item.tooltipVisible"
transition="tooltip"
@click.stop="rename(index)"
>Rename</tooltip-item>
<tooltip-item
v-show="item.tooltipVisible"
transition="tooltip"
@click.stop="del(index)"
>Delete</tooltip-item>
</tooltip>
</li>
<li class="item add" @click="add"><div class="label">＋</div></li>
</ul>
<ul class="field">
<li v-for="item in items" class="item" :class="item.active ? 'active' : ''">
<editor
class="codemirror-container"
:content.sync="item.content"
:active="item.active"
:mode="item.mode"
></editor>
</li>
</ul>
</div>
<div id="preview" hook-src="static/hook.min.js">
<view class="iframe" :html="html" v-ref:view></view>
</div>
<div id="overlay">
<div class="shade" v-show="visible" transition="fade">
<div class="plate" v-show="visible" transition="popup" v-cloak>
<div class="label" v-cloak>{{ config.label }}</div>
<div v-show="config.type === 'prompt'">
<input class="title" type="text" v-model="config.title" v-el:title @keydown.enter="hide(true)"></input>
<div class="message filetype">File type: <span class='bold'>{{ filetype }}</span></div>
<div class="message error" v-show="error"><span class='bold'>{{ error }}</span></div>
</div>
<div class="horizontal">
<div
class="button"
:class="[config.buttons.left.class]"
@click="hide(false)"
>{{ config.buttons.left.label }}</div>
<div
class="button"
:class="[config.buttons.right.class, error ? 'disabled' : '']"
@click="!error && hide(true)"
>{{ config.buttons.right.label }}</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="static/index.min.js"></script>
</body>
</html>