Skip to content

Commit f6d6b56

Browse files
prograpeprogrape
committed
init
0 parents  commit f6d6b56

18 files changed

+630
-0
lines changed

‎.gitignore

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
### OSX template
2+
.DS_Store
3+
.AppleDouble
4+
.LSOverride
5+
6+
# Icon must end with two \r
7+
Icon
8+
9+
# Thumbnails
10+
._*
11+
12+
# Files that might appear in the root of a volume
13+
.DocumentRevisions-V100
14+
.fseventsd
15+
.Spotlight-V100
16+
.TemporaryItems
17+
.Trashes
18+
.VolumeIcon.icns
19+
20+
# Directories potentially created on remote AFP share
21+
.AppleDB
22+
.AppleDesktop
23+
Network Trash Folder
24+
Temporary Items
25+
.apdisk
26+
27+
# Created by .ignore support plugin (hsz.mobi)
28+
29+
.idea
30+
node_modules
31+
publish.sh

‎dist/bundle.js

+23
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
6+
<title>TODO</title>
7+
<style>
8+
body {
9+
background-color: #efeff4;
10+
-webkit-tap-highlight-color: transparent;
11+
-webkit-touch-callout: none;
12+
-webkit-user-select: none;
13+
-khtml-user-select: none;
14+
-moz-user-select: none;
15+
-ms-user-select: none;
16+
user-select: none;
17+
}
18+
.weui_cells_checkbox > .weui_cell:not(:first-child) > * {
19+
pointer-events: none;
20+
}
21+
</style>
22+
<link href="style.css" rel="stylesheet"></head>
23+
<body ontouchstart>
24+
<div id="container" class="container"></div>
25+
<script src="vendor.bundle.js"></script><script src="bundle.js"></script></body>
26+
</html>

‎dist/style.css

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vendor.bundle.js

+38
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "todo",
3+
"version": "0.1.0",
4+
"description": "a todo application build with weui",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --hot --inline --progress --colors --port 8080 --host 0.0.0.0",
8+
"build": "npm run clean && NODE_ENV=production webpack --progress --colors",
9+
"clean": "rimraf ./dist"
10+
},
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/progrape/todo.git"
14+
},
15+
"keywords": [],
16+
"author": "",
17+
"license": "MIT",
18+
"bugs": {
19+
"url": "https://github.com/progrape/todo/issues"
20+
},
21+
"homepage": "https://github.com/progrape/todo",
22+
"dependencies": {
23+
"art-template": "^3.0.3",
24+
"fastclick": "^1.0.6",
25+
"jquery": "^2.2.1",
26+
"node-uuid": "^1.4.7",
27+
"path-to-regexp": "^1.2.1",
28+
"weui": "^0.4.0",
29+
"weui.js": "^0.1.0"
30+
},
31+
"devDependencies": {
32+
"autoprefixer": "^6.3.3",
33+
"babel-core": "^6.7.0",
34+
"babel-loader": "^6.2.4",
35+
"babel-preset-es2015": "^6.6.0",
36+
"css-loader": "^0.23.1",
37+
"eslint": "^2.3.0",
38+
"extract-text-webpack-plugin": "^1.0.1",
39+
"file-loader": "^0.8.5",
40+
"html-webpack-plugin": "^2.9.0",
41+
"less": "^2.6.1",
42+
"less-loader": "^2.2.2",
43+
"open-browser-webpack-plugin": "0.0.2",
44+
"postcss-loader": "^0.8.1",
45+
"raw-loader": "^0.5.1",
46+
"rimraf": "^2.5.2",
47+
"style-loader": "^0.13.0",
48+
"url-loader": "^0.5.7",
49+
"webpack": "^1.12.14",
50+
"webpack-dev-server": "^1.14.1"
51+
}
52+
}

‎src/app.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import 'weui';
2+
import $ from 'jquery';
3+
import attachFastClick from 'fastclick';
4+
import Router from './lib/router/router';
5+
import todo from './todo/todo';
6+
attachFastClick.attach(document.body);
7+
8+
const router = new Router();
9+
router.push(todo).setDefault('/').init();

‎src/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
6+
<title>TODO</title>
7+
<style>
8+
body {
9+
background-color: #efeff4;
10+
-webkit-tap-highlight-color: transparent;
11+
-webkit-touch-callout: none;
12+
-webkit-user-select: none;
13+
-khtml-user-select: none;
14+
-moz-user-select: none;
15+
-ms-user-select: none;
16+
user-select: none;
17+
}
18+
.weui_cells_checkbox > .weui_cell:not(:first-child) > * {
19+
pointer-events: none;
20+
}
21+
</style>
22+
</head>
23+
<body ontouchstart>
24+
<div id="container" class="container"></div>
25+
</body>
26+
</html>

‎src/lib/api/api.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import $ from 'jquery';
2+
import * as util from '../util/util';
3+
4+
const TODOS = 'todos';
5+
6+
export default {
7+
read(){
8+
return new Promise((resolve, reject) => {
9+
const todos = localStorage.getItem(TODOS);
10+
resolve(JSON.parse(todos));
11+
});
12+
},
13+
write(obj){
14+
return new Promise((resolve, reject) => {
15+
const str = JSON.stringify(obj);
16+
localStorage.setItem(TODOS, str);
17+
resolve(str);
18+
});
19+
}
20+
};

‎src/lib/dataManager/dataManager.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
let data = {};
2+
3+
export default {
4+
TODOS: 'todos',
5+
/**
6+
* set data
7+
* @param {String} key
8+
* @param value
9+
*/
10+
setData (key, value){
11+
data[key] = value;
12+
return this;
13+
},
14+
/**
15+
* get data
16+
* @param {String} key
17+
* @param defaultValue
18+
* @returns {*}
19+
*/
20+
getData (key, defaultValue = null){
21+
return data[key] || defaultValue;
22+
}
23+
};

‎src/lib/router/router.js

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
import pathToRegexp from 'path-to-regexp';
2+
import * as util from './util';
3+
4+
/**
5+
* simple router
6+
*/
7+
class Router {
8+
/**
9+
* constructor
10+
* @param options
11+
*/
12+
constructor(options) {
13+
this._options = util.extend({
14+
container: '#container',
15+
enter: 'enter',
16+
enterActive: 'enter-active',
17+
enterTimeout: 0,
18+
leave: 'leave',
19+
leaveActive: 'leave-active',
20+
leaveTimeout: 0
21+
}, options);
22+
this._$contaienr = document.querySelector(this._options.container);
23+
this._routes = [];
24+
this._default = null;
25+
}
26+
27+
/**
28+
* initial
29+
* @returns {Router}
30+
*/
31+
init() {
32+
window.addEventListener('hashchange', (event) => {
33+
const hash = util.getHash(event.newURL);
34+
this.go(hash);
35+
}, false);
36+
37+
const hash = util.getHash(location.href);
38+
const route = this._getRoute(hash);
39+
if (route) {
40+
this.go(hash);
41+
}
42+
else {
43+
this.go(this._default);
44+
}
45+
46+
return this;
47+
}
48+
49+
/**
50+
* push route config into routes array
51+
* @param route
52+
* @returns {Router}
53+
*/
54+
push(route) {
55+
route = util.extend({
56+
url: '*',
57+
className: '',
58+
render: util.noop,
59+
bind: util.noop
60+
}, route);
61+
this._routes.push(route);
62+
return this;
63+
}
64+
65+
/**
66+
* set default url when no matcher was found
67+
* @param url
68+
* @returns {Router}
69+
*/
70+
setDefault(url) {
71+
this._default = url;
72+
return this;
73+
}
74+
75+
/**
76+
* go to the url
77+
* @param hash
78+
* @returns {Router}
79+
*/
80+
go(hash) {
81+
const route = this._getRoute(hash);
82+
if (route) {
83+
const html = typeof route.render === 'function' ? route.render(route.params) : '';
84+
85+
// if have child already
86+
const hasChildren = this._$contaienr.hasChildNodes();
87+
if (hasChildren) {
88+
let child = this._$contaienr.childNodes[0];
89+
child.classList.add(this._options.leave);
90+
child.classList.add(this._options.leaveActive);
91+
92+
if (this._options.leaveTimeout > 0) {
93+
setTimeout(() => {
94+
child.parentNode.removeChild(child);
95+
}, this._options.leaveTimeout);
96+
}
97+
else {
98+
child.parentNode.removeChild(child);
99+
}
100+
101+
}
102+
103+
let node = document.createElement('div');
104+
105+
// add class name
106+
if (route.className){
107+
node.classList.add(route.className);
108+
}
109+
// add class
110+
if (hasChildren) {
111+
node.classList.add(this._options.enter);
112+
}
113+
node.innerHTML = html;
114+
this._$contaienr.appendChild(node);
115+
if (hasChildren) {
116+
node.classList.add(this._options.enterActive);
117+
}
118+
119+
if (this._options.enterTimeout > 0) {
120+
setTimeout(() => {
121+
node.classList.remove(this._options.enter);
122+
node.classList.remove(this._options.enterActive);
123+
}, this._options.enterTimeout);
124+
}
125+
else {
126+
node.classList.remove(this._options.enter);
127+
node.classList.remove(this._options.enterActive);
128+
}
129+
130+
131+
location.hash = `#${hash}`;
132+
133+
if (typeof route.bind === 'function' && !route.__isBind) {
134+
route.bind();
135+
route.__isBind = true;
136+
}
137+
}
138+
else {
139+
throw new Error(`url ${hash} was not found`);
140+
}
141+
return this;
142+
}
143+
144+
/**
145+
* get route config by hash
146+
* @param hash
147+
* @returns {*}
148+
* @private
149+
*/
150+
_getRoute(hash) {
151+
for (let i = 0, len = this._routes.length; i < len; i++) {
152+
let route = this._routes[i];
153+
let keys = [];
154+
const regex = pathToRegexp(route.url, keys);
155+
const match = regex.exec(hash);
156+
if (match) {
157+
route.params = {};
158+
for (let j = 0, l = keys.length; j < l; j++) {
159+
const key = keys[j];
160+
const name = key.name;
161+
route.params[name] = match[j + 1];
162+
}
163+
return route;
164+
}
165+
}
166+
return null;
167+
}
168+
}
169+
170+
export default Router;

0 commit comments

Comments
 (0)