Skip to content

Commit d603416

Browse files
ihukeihuke
committed
Update sample
1 parent d3fa8a5 commit d603416

File tree

5 files changed

+150
-41
lines changed

5 files changed

+150
-41
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ developmentServer is a productivity tool for frontend to improve product develop
77
- lightweight webServer for vs code
88
![command](./doc/open.gif)
99

10-
- livereload when file(js/css/html) updated
11-
12-
- ~~automatically generate .css file for less/sass/scss~~
10+
- livereload
11+
auto refresh browser when js/css/html file updated.
1312

1413
- mock server
1514
* support HTTP Web API
@@ -20,7 +19,8 @@ developmentServer is a productivity tool for frontend to improve product develop
2019
> declare "websocket" section in mock file
2120
![websocket](./doc/mock_websocket.jpg)
2221

23-
- record and generate mock data on real request/response,support xmlhttprequest and websocket
22+
- record toolbar
23+
it can record response data after real request,support xmlhttprequest and websocket.So you can easy generate mock file.
2424

2525
## How to customize
2626
TODO

‎extend/toolbar/toolbar.js

+54-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ window.developmentServer = window.developmentServer || {};
2121
function stop() {
2222
updateStatus(server.recording = false);
2323
toggle(playBtn, stopBtn);
24-
24+
2525
}
2626

2727
function updateStatus(status) {
@@ -100,8 +100,8 @@ window.developmentServer = window.developmentServer || {};
100100
}, 100);
101101
}
102102

103-
function registerEvent(element, func) {
104-
element.addEventListener('click', func, false);
103+
function registerEvent(element, func, type) {
104+
element.addEventListener(type || 'click', func, false);
105105
}
106106

107107
/**
@@ -144,5 +144,56 @@ window.developmentServer = window.developmentServer || {};
144144
registerEvent(stopBtn = document.querySelector('.developmentServer_toolbar .js-stop'), stop);
145145
registerEvent(document.querySelector('.developmentServer_toolbar .js-download'), save);
146146
update();
147+
new Drag();
147148
});
149+
150+
function cancelDocumentSelection(event) {
151+
event.preventDefault && event.preventDefault();
152+
event.stopPropagation && event.stopPropagation();
153+
event.returnValue = false;
154+
return false;
155+
}
156+
157+
function Drag() {
158+
this.oDiv = document.querySelector('.developmentServer_toolbar');
159+
this.handler = document.querySelector('.developmentServer_toolbar .drag-area');
160+
this.disX = 0;
161+
this.disY = 0;
162+
163+
var _this = this;
164+
this.handler.onmousedown = function (ev) {
165+
var oEvent = ev || event;
166+
_this.fnDown(oEvent);
167+
_this.oDiv.setCapture && _this.oDiv.setCapture();
168+
return false;
169+
};
170+
}
171+
172+
Drag.prototype.fnDown = function (ev) {
173+
var oEvent = ev || event;
174+
var _this = this;
175+
176+
this.disX = oEvent.clientX - this.oDiv.offsetLeft;
177+
this.disY = oEvent.clientY - this.oDiv.offsetTop;
178+
179+
document.onmousemove = function (ev) {
180+
var oEvent = ev || event;
181+
_this.fnMove(oEvent);
182+
};
183+
document.onmouseup = function () {
184+
_this.fnUp();
185+
};
186+
}
187+
188+
Drag.prototype.fnMove = function (ev) {
189+
var oEvent = ev || event;
190+
191+
this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
192+
}
193+
194+
Drag.prototype.fnUp = function () {
195+
document.onmousemove = null;
196+
document.onmouseup = null;
197+
this.oDiv.releaseCapture && this.oDiv.releaseCapture();
198+
}
148199
})(window.developmentServer);

‎sample/index.js

+28-13
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,11 @@
2525
function sendMessage() {
2626
if (client) {
2727
client.send(JSON.stringify({
28-
command: 'ws',
29-
data: 'request'
28+
command: 'add',
29+
data: {
30+
v1: 5,
31+
v2: 8
32+
}
3033
}));
3134
}
3235
}
@@ -41,11 +44,22 @@
4144

4245
function handleMessage(e) {
4346
if (e && e.data) {
47+
var temp = JSON.parse(e.data);
4448
console.log(e.data);
45-
updateElement(e.data.result);
49+
updateElement(getTime(), 'WebSocket', 'Value is ' + temp.result);
4650
}
4751
}
4852

53+
function getTime() {
54+
var time = new Date();
55+
var hour = time.getHours(),
56+
minute = time.getMinutes(),
57+
second = time.getSeconds();
58+
return (hour < 10 ? ('0' + hour) : hour) + ':' +
59+
(minute < 10 ? ('0' + minute) : minute) + ':' +
60+
(second < 10 ? ('0' + second) : second);
61+
}
62+
4963
function getChecked() {
5064
var items = document.querySelectorAll('input');
5165
for (var i = 0; i < items.length; i++) {
@@ -64,21 +78,21 @@
6478
}
6579

6680
function get() {
67-
$.get('/api/get', function (result) {
68-
console.log('/api/get result:');
81+
$.get('/api/user', function (result) {
82+
console.log('/api/user result:');
6983
console.log(result);
70-
updateElement(result.data);
84+
updateElement(getTime(), 'HTTP-GET', 'User name is ' + result.data.name);
7185
})
7286
.fail(function () {
7387
alert("http[get] error!");
7488
});
7589
}
7690

7791
function post() {
78-
$.post('/api/post', function (result) {
79-
console.log('/api/post result:');
92+
$.post('/api/update', function (result) {
93+
console.log('/api/update result:');
8094
console.log(result);
81-
updateElement(result.warp.data);
95+
updateElement(getTime(), 'HTTP-POST', 'Register User Tom ' + (result.code === 100 ? 'success' : 'failed'));
8296
})
8397
.fail(function () {
8498
alert("http[post] error!");
@@ -96,10 +110,11 @@
96110
}
97111
});
98112

99-
function updateElement(data){
100-
var li = document.createElement('li');
101-
var container = document.createElement('div');
102-
container.innerHTML = '<div>' + data + '</div>';
113+
function updateElement(time, type, data) {
114+
var li = document.createElement('li'),
115+
container = document.createElement('div');
116+
container.innerHTML = '<div class="message-title"><span>' + time + '</span><span style="margin-left:3px">' +
117+
type + '</span></div><div class="message-body">[Server] ' + data + '</div>';
103118
li.appendChild(container);
104119
messageList = messageList || document.querySelector('.message-list');
105120
messageList.appendChild(li);

‎sample/mock.js

+13-15
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
module.exports = exports = {
22
http: {
3-
'/api/get': {
3+
'/api/user': {
44
method: 'get',
5-
info: {
6-
summary: 'It\'s a test api',
7-
parameter: {
8-
9-
}
10-
},
115
type: 'jsonp',
126
response: {
13-
data : 'HTTP[get] Result.',
7+
data : {
8+
name: 'Edward'
9+
},
1410
status : 0
1511
}
1612
},
17-
'/api/post': {
13+
'/api/update': {
1814
method: 'post',
1915
response: {
20-
data: 'HTTP[post] Result.',
21-
status: 0
16+
command: 'updated'
2217
},
2318
onResult: function (result) {
2419
return {
25-
code: 100,
20+
code: 200,
2621
warp: result
2722
};
2823
}
@@ -31,11 +26,14 @@ module.exports = exports = {
3126
websocket: {
3227
data: [{
3328
request: {
34-
command: 'ws',
35-
data: 'request'
29+
command: 'add',
30+
data: {
31+
v1 : 5,
32+
v2 : 8
33+
}
3634
},
3735
response: {
38-
result: 'WebSocket Result'
36+
result: 13
3937
}
4038
}]
4139
}

‎sample/style.css

+51-6
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ nav {
5959
box-sizing: border-box;
6060
margin: 5px 0 0 0;
6161
border: 1px solid #cdc6c6;
62-
overflow: auto;
62+
overflow-y: auto;
63+
overflow-x: hidden;
6364
}
6465

6566
nav>a {
@@ -156,8 +157,8 @@ article {
156157
}
157158
.message-list::before{
158159
content: '';
159-
width: 3px;
160-
background: #00c72b;
160+
width: 2px;
161+
background: #cdc6c6;
161162
position: absolute;
162163
top: 0;
163164
bottom: 0;
@@ -168,10 +169,54 @@ article {
168169

169170
.message-list li::before{
170171
content: '';
171-
width: 10px;
172-
height: 10px;
173-
background-color: orange;
172+
width: 16px;
173+
height: 16px;
174+
background-color: #46a4da;
174175
border-radius: 50%;
175176
position: absolute;
176177
top: 0;
178+
179+
180+
181+
line-height: 16px;
182+
183+
color: #fff;
184+
background: #46a4da;
185+
box-shadow: 0 0 0 8px #afdcf8;
186+
text-align: center;
187+
left: -6px;
188+
top: 0;
189+
/*margin: 0 0 0 -25px;*/
190+
}
191+
192+
.message-list li::after{
193+
content: '';
194+
height: 20px;
195+
display: table;
196+
}
197+
198+
.message-list li:last-child::after{
199+
height: 5px;
200+
}
201+
202+
.message-list li>div{
203+
position: relative;
204+
left: 30px;
205+
padding: 20px;
206+
font-size: 13px;
207+
}
208+
209+
.message-list li >div .message-title{
210+
position: absolute;
211+
top:-5px;
212+
background: rgba(217,100,17,1.0);
213+
padding: .5em 1.5em .55em;
214+
border-radius: 2em;
215+
color: #FFF;
216+
}
217+
218+
.message-list li > div .message-body{
219+
position: relative;
220+
top: 13px;
221+
left: 20px;
177222
}

0 commit comments

Comments
 (0)