Skip to content

Commit 7a6fafe

Browse files
bimohxhbimohxh
committedSep 3, 2017
complete share
·
1.0.0
1 parent 7bb3a19 commit 7a6fafe

File tree

5 files changed

+124
-19
lines changed

5 files changed

+124
-19
lines changed
 

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ A json online viewer and formatter.
1212
- fold and expand the object and array value.
1313
- fold all and expand all.
1414
- identify link tags to `<a>...</a>` .
15-
- diff two json, find the different between them.
1615
- save current json data to local.
1716
- all saved json lists view and fill data to current view and remove it.
18-
- offline visit
17+
- switch between themes
18+
- share to other online
1919

2020

2121
## develop and deploy

‎css/loading.css

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
@-webkit-keyframes ball-pulse-sync {
2+
33% {
3+
-webkit-transform: translateY(6px);
4+
transform: translateY(6px)
5+
}
6+
7+
66% {
8+
-webkit-transform: translateY(-6px);
9+
transform: translateY(-6px)
10+
}
11+
12+
100% {
13+
-webkit-transform: translateY(0);
14+
transform: translateY(0)
15+
}
16+
}
17+
18+
@keyframes ball-pulse-sync {
19+
33% {
20+
-webkit-transform: translateY(6px);
21+
transform: translateY(6px)
22+
}
23+
24+
66% {
25+
-webkit-transform: translateY(-6px);
26+
transform: translateY(-6px)
27+
}
28+
29+
100% {
30+
-webkit-transform: translateY(0);
31+
transform: translateY(0)
32+
}
33+
}
34+
35+
36+
.ball-pulse-sync>div:nth-child(1) {
37+
-webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
38+
animation: ball-pulse-sync .6s -.14s infinite ease-in-out
39+
}
40+
41+
.ball-pulse-sync>div:nth-child(2) {
42+
-webkit-animation: ball-pulse-sync .6s -70ms infinite ease-in-out;
43+
animation: ball-pulse-sync .6s -70ms infinite ease-in-out
44+
}
45+
46+
.ball-pulse-sync>div:nth-child(3) {
47+
-webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
48+
animation: ball-pulse-sync .6s 0s infinite ease-in-out
49+
}
50+
51+
.ball-pulse-sync>div {
52+
width: 8px;
53+
height: 8px;
54+
-webkit-animation-fill-mode: both;
55+
animation-fill-mode: both
56+
}
57+
58+
@-webkit-keyframes ball-scale {
59+
0% {
60+
-webkit-transform: scale(0);
61+
transform: scale(0)
62+
}
63+
64+
100% {
65+
-webkit-transform: scale(1);
66+
transform: scale(1);
67+
opacity: 0
68+
}
69+
}
70+
71+
@keyframes ball-scale {
72+
0% {
73+
-webkit-transform: scale(0);
74+
transform: scale(0)
75+
}
76+
77+
100% {
78+
-webkit-transform: scale(1);
79+
transform: scale(1);
80+
opacity: 0
81+
}
82+
}
83+
84+
.ball-pulse-sync>div,.ball-pulse>div,.ball-scale-random>div,.ball-scale>div {
85+
background-color: #f28969;
86+
border-radius: 100%;
87+
margin: 2px;
88+
display: inline-block
89+
}
90+
91+
.ball-pulse-sync {
92+
display: flex;
93+
}

‎css/main.css

+7-4
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ textarea {
237237
align-items: center;
238238
z-index: 100;
239239
background-color: #FFF;
240+
box-shadow: 1px 1px 1px rgba(244, 243, 243, 0.64)
240241
}
241242

242243

@@ -424,13 +425,15 @@ textarea {
424425
color: #FFF;
425426
}
426427

427-
428-
.json-link:link, .json-link:visited {
429-
color: #717171;
428+
.json-link:link {
430429
text-decoration: none
431430
}
431+
/* .json-link:link, .json-link:visited {
432+
color: #717171;
433+
text-decoration: none
434+
} */
432435
.json-link:hover, .json-link:active {
433-
color: #3ab54a;
436+
color: #3ab54a!important;
434437
}
435438

436439
.splitx {

‎index.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<meta name="description" content="一款简洁优雅的在线json解析器，可能是目前最好用的json在线查看工具"/>
88
<link href="css/hint.min.css" rel="stylesheet">
99
<!-- <link href="css/diffview.css" rel="stylesheet"> -->
10+
<link href="css/loading.css" rel="stylesheet">
1011
<link href="css/main.css" rel="stylesheet">
1112
</head>
1213

@@ -22,10 +23,7 @@
2223

2324
<div class="top-right">
2425
<a href="https://github.com/bimohxh/jsonon" target="_blank">
25-
GitHub
26-
<!--<svg class="icon">
27-
<use xlink:href="svg/icon.svg#github"></use>
28-
</svg>-->
26+
已开源在 GitHub 上
2927
</a>
3028
</div>
3129
</div>
@@ -84,7 +82,15 @@
8482
</a>
8583
</div>
8684
<div class="pull-right">
87-
<a class="hint--top save-tool copy-btn" data-hint="分享" href="javascript:void(0)" @click="share" data-clipboard-target="#share-input">
85+
<div class="loader" v-show="isSharing">
86+
<div class="ball-pulse-sync">
87+
<div></div>
88+
<div></div>
89+
<div></div>
90+
</div>
91+
</div>
92+
93+
<a class="hint--top save-tool copy-btn" data-hint="分享" href="javascript:void(0)" @click="share" data-clipboard-target="#share-input" v-show="!isSharing">
8894
<svg class="icon">
8995
<use xlink:href="svg/icon.svg#share"></use>
9096
</svg>
@@ -215,7 +221,7 @@
215221
<span class="key" v-show="field" v-bind:style="{color: theme.key}">"{{field}}": </span>
216222
<span v-bind:class="'val val-' + getTyp(val)" v-bind:style="{color: theme[getTyp(val)]}">
217223
<span v-if="!isaLink(val)">{{formatVal(val)}}</span>
218-
<a v-if="isaLink(val)" :href="val" target="_blank" class="json-link" :style="{}">{{formatVal(val)}}</a>
224+
<a v-if="isaLink(val)" :href="val" target="_blank" class="json-link" :style="{color: theme['link-link']}">{{formatVal(val)}}</a>
219225
<span v-if="!isend">,</span>
220226
</span>
221227
</template>

‎js/main.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@
100100

101101
// 主题 [key, String, Number, Boolean, Null, link-link, link-hover]
102102
let themes = [
103-
['#92278f', '#3ab54a', '#25aae2', '#f3934e', '#f34e5c', '#717171', '#3ab54a'],
104-
['rgb(19, 158, 170)', '#cf9f19', '#ec4040', '#7cc500', 'rgb(211, 118, 126)', '#717171', '#3ab54a'],
105-
['#886', '#25aae2', '#e60fc2', '#f43041', 'rgb(180, 83, 244)', '#717171', '#3ab54a'],
106-
['rgb(97, 97, 102)', '#cf4c74', '#20a0d5', '#cd1bc4', '#c1b8b9', '#717171', '#3ab54a']
103+
['#92278f', '#3ab54a', '#25aae2', '#f3934e', '#f34e5c', '#717171'],
104+
['rgb(19, 158, 170)', '#cf9f19', '#ec4040', '#7cc500', 'rgb(211, 118, 126)', 'rgb(15, 189, 170)'],
105+
['#886', '#25aae2', '#e60fc2', '#f43041', 'rgb(180, 83, 244)', 'rgb(148, 164, 13)'],
106+
['rgb(97, 97, 102)', '#cf4c74', '#20a0d5', '#cd1bc4', '#c1b8b9', 'rgb(25, 8, 174)']
107107
]
108108
var App = new Vue({
109109
el: '#app',
@@ -124,7 +124,8 @@
124124
},
125125
themes: themes,
126126
checkedTheme: 0,
127-
shareKey: '' // 分享后返回的ID
127+
shareKey: '', // 分享后返回的ID
128+
isSharing: false
128129
},
129130
methods: {
130131

@@ -301,15 +302,17 @@
301302
if (con.trim() === '') {
302303
return
303304
}
305+
App.isSharing = true
304306
$.ajax({
305307
type: 'POST',
306308
url: 'http://192.168.26.128:5010/json',
307309
contentType: 'application/json; charset=utf-8',
308310
data: JSON.stringify({con: con, key: App.shareKey}),
309311
success: (data) => {
312+
App.isSharing = false
310313
App.shareKey = uuidv1()
311314
if (data.status) {
312-
Helper.alert('分享成功，已将链接复制到剪贴板', 'success')
315+
Helper.alert('分享成功，已将链接复制到剪贴板，只能保存24小时', 'success')
313316
} else {
314317
}
315318
}
@@ -326,7 +329,7 @@
326329
let th = this.themes[this.checkedTheme]
327330
let result = {}
328331
let index = 0
329-
;['key', 'String', 'Number', 'Boolean', 'Null', 'link-link', 'link-hover'].forEach(key => {
332+
;['key', 'String', 'Number', 'Boolean', 'Null', 'link-link'].forEach(key => {
330333
result[key] = th[index]
331334
index++
332335
})

0 commit comments

Comments
 (0)
Please sign in to comment.