Skip to content

Commit 3f3375a

Browse files
kaiakzkaiakz
committed
Fix beforeunload.
1 parent d97a2c8 commit 3f3375a

File tree

3 files changed

+251
-5
lines changed

3 files changed

+251
-5
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ You need a browser firstly(Recommends PC with 1920x1080), and then visit [the gi
3131
* Generate C and MicroPython code: includes GUI and Callback.
3232

3333
## Architecture
34-
* A static webpage built with [lv_micropython](https://github.com/littlevgl/lv_micropython)(WASM) and front-end component library.
34+
* A static webpage built with [lv_micropython](https://github.com/littlevgl/lv_micropython)(WASM) and front-end component library, so walv won't send your data to the server.
3535
* WASM part provides a Simulator.
3636
* The front-end component library provides a way to control Simulator: create,delete or modify a widget. Include attribute editor, style editor and animation editor.
3737
* Generate final code by javascript, Use `Blob` to save file.

‎index.r.html

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
<!doctype html>
2+
<!---->
3+
<html lang="en">
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<head>
7+
<style>
8+
/* #mp_js_stdout {
9+
display: inline-block;
10+
max-width: 90%;
11+
height: 20%;
12+
max-height: 600px;
13+
vertical-align: middle;
14+
} */
15+
/* body {
16+
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
17+
} */
18+
[v-cloak] {
19+
display: none;
20+
}
21+
#canvas {
22+
border: 2px grey solid;
23+
border-radius: 2px;
24+
width: 600px;
25+
height: 400px;
26+
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
27+
}
28+
</style>
29+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
30+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/xterm.css" />
31+
32+
</head>
33+
<body>
34+
35+
<div id="walv" v-cloak>
36+
<el-container>
37+
<el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin: 0">
38+
<el-menu class="el-menu-demo" mode="horizontal">
39+
<el-menu-item index="1" active disabled><el-button type="danger" round>WALV</el-button></el-menu-item>
40+
<el-submenu index="2">
41+
<template slot="title">Help</template>
42+
<el-menu-item index="2-1"><el-link href="https://docs.littlevgl.com/en/html/index.html" target="_blank">Docs</el-link></el-menu-item>
43+
<el-menu-item index="2-2"><el-link href="https://github.com/kaiakz/walv/" target="_blank">github@kaiakz</el-link></el-menu-item>
44+
<el-menu-item index="2-3">Comming Soon</el-menu-item>
45+
<el-submenu index="2-4">
46+
<template slot="title">Sites</template>
47+
<el-menu-item index="2-4-1"><el-link href="https://littlevgl.com/" target="_blank">LittlevGL</el-link></el-menu-item>
48+
<el-menu-item index="2-4-2"><el-link href="https://forum.littlevgl.com/" target="_blank">Forum</el-link></el-menu-item>
49+
<el-menu-item index="2-4-3"><el-link href="https://github.com/alibaba/AliOS-Things/" target="_blank">AliOS-Things</el-link></el-menu-item>
50+
</el-submenu>
51+
</el-submenu>
52+
<el-menu-item index="3" disabled>More</el-menu-item>
53+
<el-menu-item>
54+
<el-button icon="el-icon-camera-solid" @click="screenshot"></el-button>
55+
<el-divider direction="vertical"></el-divider>
56+
</el-menu-item>
57+
<el-menu-item>
58+
<el-switch v-model="is_c_mode" active-color="#13ce66" inactive-color="#ff4949" active-text="C" inactive-text="Python"></el-switch>
59+
</el-menu-item>
60+
<el-menu-item>
61+
<el-button-group>
62+
<el-button type="primary" round @click="code_generate">Generate</el-button>
63+
<el-button type="success" round @click="code_export">Export</el-button>
64+
</el-button-group>
65+
</el-menu-item>
66+
</el-menu>
67+
</el-header>
68+
69+
<el-container>
70+
<el-aside width="17%">
71+
<div style="margin-top: 20px;text-align: center">
72+
<el-cascader :options="creator_options" :show-all-levels="false" :props="props" v-model="selected_type"></el-cascader>
73+
<el-badge :value="WidgetNum" class="item">
74+
<el-button type="primary" icon="el-icon-plus" @click="Creator" circle></el-button>
75+
</el-badge>
76+
<div style="margin: 15px;">
77+
<el-row>
78+
<el-tag>{{ CheckedNode.id }}</el-tag>
79+
<el-button type="success" icon="el-icon-view"circle></el-button>
80+
<el-button type="warning" icon="el-icon-refresh-left" circle></el-button>
81+
<el-button type="danger" icon="el-icon-delete" @click="delete_node" circle></el-button>
82+
</el-row>
83+
<el-row style="margin-top: 15px">
84+
</el-row>
85+
</div>
86+
<el-divider></el-divider>
87+
</div>
88+
<el-tree
89+
ref="TreeView"
90+
:data="widget_tree" highlight-current default-expand-all @node-click="node_click_cb" >
91+
</el-tree>
92+
</el-aside>
93+
94+
95+
<el-main>
96+
<el-tabs type="border-card">
97+
<el-tab-pane label="TFT Simulator">
98+
<div id="mp_js_stdout" style="text-align: center">
99+
<canvas id="canvas"
100+
oncontextmenu="event.preventDefault()"
101+
onmousedown="this.style.cursor='move'" onmouseup="this.style.cursor='default'"
102+
@mousemove="cursorXY"
103+
tabindex="-1">
104+
</canvas>
105+
</div>
106+
</el-tab-pane>
107+
<el-tab-pane label="Code Editor">
108+
<div id="code-editor" style="height: 420px"></div>
109+
</el-tab-pane>
110+
<el-tab-pane label="Project">
111+
<el-calendar>
112+
</el-calendar>
113+
</el-tab-pane>
114+
</el-tabs>
115+
116+
<div style="margin: 18px">
117+
<i class="el-icon-monitor">REPL Terminal</i>
118+
<el-switch v-model="term_visible"></el-switch>
119+
<el-button icon="el-icon-refresh" circle @click="refresh_repl"></el-button>
120+
<i style="float: right;">X: {{cursorX}}, Y: {{cursorY}}</i>
121+
</div>
122+
123+
<div id="mpy_repl" v-show="term_visible" style="height:270px"></div>
124+
</el-main>
125+
126+
127+
<el-aside width="17%">
128+
<div style="margin-top : 20px">
129+
<el-row>
130+
<i class="el-icon-set-up"></i>
131+
<el-button-group>
132+
<el-button icon="el-icon-edit" @click="style_visible=true">Style</el-button>
133+
<el-button icon="el-icon-edit">Animation</el-button>
134+
</el-button-group>
135+
</el-row>
136+
137+
<div style="margin: 20px;"></div>
138+
139+
<div id="setting_attribute">
140+
<el-form ref="form" :model="currJSON" label-width="55px">
141+
<el-form-item label="ID">
142+
<el-col :span="10"><em> {{ currJSON.id }} </em></el-col>
143+
<el-col :span="7">
144+
<i class="el-icon-lock"></i><el-switch v-model="currJSON.drag" v-on:input="bind_widget_bool('drag')"></el-switch>
145+
</el-col>
146+
<el-col :span="7"><el-button type="warning" icon="el-icon-plus" @click="InfoPool_setCB(currJSON.id)">CB</el-button></el-col>
147+
</el-form-item>
148+
<el-form-item label="Postion">
149+
<el-col :span="11">
150+
<el-input placeholder="X" v-model="currJSON.x" v-on:input="bind_widget_num('x')">
151+
<template slot="prepend">X</template>
152+
</el-input>
153+
</el-col>
154+
<el-col class="line" :span="2">.</el-col>
155+
<el-col :span="11">
156+
<el-input placeholder="Y" v-model="currJSON.y" v-on:input="bind_widget_num('y')">
157+
<template slot="prepend">Y</template>
158+
</el-input>
159+
</el-col>
160+
</el-form-item>
161+
162+
<el-form-item label="Size">
163+
<el-col :span="11">
164+
<el-input placeholder="Width" v-model="currJSON.width" v-on:input="bind_widget_num('width')">
165+
<template slot="prepend">W</template>
166+
</el-input>
167+
</el-col>
168+
<el-col class="line" :span="2">-</el-col>
169+
<el-col :span="11">
170+
<el-input placeholder="Height" v-model="currJSON.height" v-on:input="bind_widget_num('height')">
171+
<template slot="prepend">H</template>
172+
</el-input>
173+
</el-col>
174+
</el-form-item>
175+
176+
<el-form-item label="Other">
177+
<el-col :span="12">
178+
DRAG<el-switch v-model="currJSON.drag" v-on:input="bind_widget_bool('drag')"></el-switch>
179+
</el-col>
180+
<el-col :span="12">
181+
CLICK<el-switch v-model="currJSON.click" v-on:input="bind_widget_bool('click')"></el-switch>
182+
</el-col>
183+
<el-col :span="12">
184+
HIDDEN<el-switch v-model="currJSON.hidden" v-on:input="bind_widget_bool('hidden')"></el-switch>
185+
</el-col>
186+
<el-col :span="12">
187+
TOP<el-switch v-model="currJSON.top" v-on:input="bind_widget_bool('top')"></el-switch>
188+
</el-col>
189+
</el-form-item>
190+
191+
<el-divider></el-divider>
192+
</el-form>
193+
</div>
194+
195+
<el-drawer
196+
title="Style Editor"
197+
:visible.sync="style_visible"
198+
direction="rtl"
199+
size="20%"
200+
@closed="make_style">
201+
<el-form ref="form" :model="style" label-width="80px">
202+
<h5>Body</h5>
203+
<el-form-item label="main_color">
204+
<el-color-picker v-model="style.body.main_color"></el-color-picker>
205+
</el-form-item>
206+
<h5>Text</h5>
207+
<el-form-item label="color">
208+
<el-color-picker v-model="style.text.color"></el-color-picker>
209+
</el-form-item>
210+
<el-form-item label="font">
211+
<el-radio v-model="style.text.font" label="font_roboto_16">font_roboto_16</el-radio>
212+
<el-radio v-model="style.text.font" label="font_roboto_28">font_roboto_28</el-radio>
213+
</el-form-item>
214+
</el-form>
215+
</el-drawer>
216+
217+
218+
</div>
219+
</el-aside>
220+
</el-container>
221+
222+
</el-container>
223+
</div>
224+
225+
226+
<!-- scripts -->
227+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
228+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
229+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/umd/locale/en.js"></script>
230+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xterm.js"></script>
231+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/addons/fit/fit.js"></script>
232+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js" type="text/javascript" charset="utf-8"></script>
233+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/mode-c_cpp.js" type="text/javascript" charset="utf-8"></script>
234+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/mode-python.js" type="text/javascript" charset="utf-8"></script>
235+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>
236+
<script src="lvgl_mp.js"></script>
237+
<script src="data.js"></script>
238+
<script src="main.js"></script>
239+
<script src="template.js"></script>
240+
<script src="wrapper.js"></script>
241+
<script src="compiler.js"></script>
242+
</body>
243+
</html>
244+

‎main.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ window.onload = function() {
1212
editor_init(vm);
1313

1414
document.title = "WALV: The Online Designer For LittlevGL";
15+
16+
1517
}
1618

1719

@@ -509,7 +511,7 @@ const pool_delete = (pool, list) => {
509511
}
510512
}
511513

512-
513-
window.onbeforeunload = function() {
514-
alert("This page is asking you to confirm that you want to leave - data you have entered may not be saved.");
515-
}
514+
window.addEventListener('beforeunload', (event) => {
515+
event.preventDefault();
516+
event.returnValue = '';
517+
});

0 commit comments

Comments
 (0)