Skip to content

Commit d6bd9f6

Browse files
iEgitiEgit
committed
added AMD using requre js and bower.
1 parent 383b0eb commit d6bd9f6

File tree

9 files changed

+164
-131
lines changed

9 files changed

+164
-131
lines changed

‎.bowerrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "libs"
3+
}

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
libs

‎bower.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name": "js-map-task",
3+
"version": "0.0.0",
4+
"dependencies": {
5+
"jquery": "1.9",
6+
"requirejs": null,
7+
"knockout.js": null,
8+
"sammy": null
9+
}
10+
}

‎index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@
55
<meta charset=utf-8>
66
<link rel="stylesheet" type="text/css" href="style.css">
77
<title>js map test</title>
8-
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
9-
<script src="knockout/build/output/knockout-latest.js"></script>
10-
<script type="text/javascript" src="main.js"></script>
8+
<script data-main="main.js" type="text/javascript" src="libs/requirejs/require.js"></script>
119
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
1210
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
13-
<script type="text/javascript" src="sammy/lib/sammy.js"></script>
11+
1412
</head>
1513

1614

‎knockout

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎main.js

Lines changed: 142 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,153 @@
1-
var onload = (function () {
2-
function highlight (url) {
3-
$link = $('#' + (url.path.replace(/[#\/]/g,'') || 'main') + '-link');
4-
$link.parent().toggleClass('active');
5-
$link.parent().siblings().removeClass('active')
6-
}
7-
function template (url) {
8-
return $('#' + (url.path.replace(/[#\/]/g,'') || 'main') + '-template');
9-
}
10-
function reduceFn (previousValue, currentValue, index, array) {
11-
// algorithm of oriented square multiplied by 2
12-
return previousValue +
13-
currentValue['X'] * (array[(index + 1) % array.length]['Y']) -
14-
currentValue['Y'] * (array[(index + 1) % array.length]['X']);
15-
}
16-
17-
function createPath (obj, index) {
18-
path = document.createElementNS('http://www.w3.org/2000/svg',"path");
19-
startObj = obj.shift();
20-
svgData = 'M'+ startObj['X'] + ',' + startObj['Y'];
21-
createPathExpr(obj);
22-
path.setAttributeNS(null, 'd', svgData);
23-
path.setAttributeNS(null, 'style', 'fill:none; stroke:black; stroke-width:1;');
24-
paths.push(path)
25-
$('svg').append(path)
26-
}
27-
function createPathExpr (arr) {
28-
switch (arr.length)
29-
{
30-
case 1:
31-
// 1 point case: plot Q with start
32-
svgData += '\nQ' + arr[0]['X'] + ',' + arr[0]['Y'] + ' ' +
33-
startObj['X'] + ',' + startObj['Y'];
34-
return;
35-
break;
36-
case 2:
37-
// 2 points case: plot C with start
38-
svgData += '\nC' + arr[0]['X'] + ',' + arr[0]['Y'] + ' ' +
39-
arr[1]['X'] + ',' + arr[1]['Y'] + ' ' +
40-
startObj['X'] + ',' + startObj['Y'];
41-
return;
42-
break;
43-
case 3:
44-
// 3 points case: plot two Q
45-
svgData += '\nQ' + arr[0]['X'] + ',' + arr[0]['Y'] + ' ' +
46-
arr[1]['X'] + ',' + arr[1]['Y'] + ' ';
47-
arr.shift();
48-
arr.shift();
49-
createPathExpr(arr);
50-
return;
51-
break;
52-
}
53-
if (arr.length > 3) {
54-
// plot C with 3 dots
55-
svgData += '\nC';
56-
for (var i = 0; i< 3; i++) {
57-
svgData += arr[0]['X'] + ',' + arr[0]['Y'] + ' ';
58-
arr.shift();
1+
//the require library is configuring paths
2+
require.config({
3+
    paths: {
4+
        'jquery': 'libs/jquery/jquery',
5+
'knockout': 'libs/knockout.js/knockout',
6+
'Sammy': 'libs/sammy/lib/min/sammy-latest.min'
7+
    }
8+
});
9+
10+
11+
12+
13+
14+
define(
15+
['jquery', 'knockout', 'Sammy'], function ($, ko, Sammy) {
16+
var onload = (function () {
17+
18+
function highlight (url) {
19+
$link = $('#' + (url.path.replace(/[#\/]/g,'') || 'main') + '-link');
20+
$link.parent().toggleClass('active');
21+
$link.parent().siblings().removeClass('active')
5922
}
60-
createPathExpr(arr)
61-
} else {
62-
// array is empty
63-
return;
64-
}
65-
}
66-
67-
var $link, App, app, main, self, curArr, startObj, path
68-
paths = [],
69-
arrayLen = 0,
70-
svgData = '';
71-
return function() {
72-
main = $('#main');
73-
App = function ContainerViewModel () {
74-
self = this;
75-
self.orientations = ko.observableArray();
76-
// obtain orientation json
77-
$.ajax({
78-
url: 'data/orientation.json',
79-
dataType: 'json',
80-
success: function (res) {
81-
res.forEach(function (obj, index) {
82-
self.orientations.push(obj.reduce(reduceFn, 0));
83-
});
84-
}
85-
});
86-
87-
// obtain bezier json
88-
$.ajax({
89-
url: 'data/Bezier.json',
90-
dataType: 'json',
91-
success: function (res) {
92-
res.forEach(createPath);
23+
function template (url) {
24+
return $('#' + (url.path.replace(/[#\/]/g,'') || 'main') + '-template');
25+
}
26+
function reduceFn (previousValue, currentValue, index, array) {
27+
// algorithm of oriented square multiplied by 2
28+
return previousValue +
29+
currentValue['X'] * (array[(index + 1) % array.length]['Y']) -
30+
currentValue['Y'] * (array[(index + 1) % array.length]['X']);
31+
}
32+
33+
function createPath (obj, index) {
34+
path = document.createElementNS('http://www.w3.org/2000/svg',"path");
35+
startObj = obj.shift();
36+
svgData = 'M'+ startObj['X'] + ',' + startObj['Y'];
37+
createPathExpr(obj);
38+
path.setAttributeNS(null, 'd', svgData);
39+
path.setAttributeNS(null, 'style', 'fill:none; stroke:black; stroke-width:1;');
40+
paths.push(path)
41+
$('svg').append(path)
42+
}
43+
function createPathExpr (arr) {
44+
switch (arr.length)
45+
{
46+
case 1:
47+
// 1 point case: plot Q with start
48+
svgData += '\nQ' + arr[0]['X'] + ',' + arr[0]['Y'] + ' ' +
49+
startObj['X'] + ',' + startObj['Y'];
50+
return;
51+
break;
52+
case 2:
53+
// 2 points case: plot C with start
54+
svgData += '\nC' + arr[0]['X'] + ',' + arr[0]['Y'] + ' ' +
55+
arr[1]['X'] + ',' + arr[1]['Y'] + ' ' +
56+
startObj['X'] + ',' + startObj['Y'];
57+
return;
58+
break;
59+
case 3:
60+
// 3 points case: plot two Q
61+
svgData += '\nQ' + arr[0]['X'] + ',' + arr[0]['Y'] + ' ' +
62+
arr[1]['X'] + ',' + arr[1]['Y'] + ' ';
63+
arr.shift();
64+
arr.shift();
65+
createPathExpr(arr);
66+
return;
67+
break;
9368
}
94-
});
95-
this.paths = ko.observableArray(paths);
96-
97-
// this.htmlStructure = ko.observable($('#index').html());
98-
this.openPage = function (url) {
99-
highlight(url);
100-
main.animate({opacity: 0}, 200, function () {
101-
main.find('section').first().prependTo('body');
102-
main.append(template(url))
103-
main.animate({opacity: 1}, 200);
104-
});
105-
106-
};
69+
if (arr.length > 3) {
70+
// plot C with 3 dots
71+
svgData += '\nC';
72+
for (var i = 0; i< 3; i++) {
73+
svgData += arr[0]['X'] + ',' + arr[0]['Y'] + ' ';
74+
arr.shift();
75+
}
76+
createPathExpr(arr)
77+
} else {
78+
// array is empty
79+
return;
80+
}
81+
}
82+
83+
var $link, App, app, main, self, curArr, startObj, path
84+
paths = [],
85+
arrayLen = 0,
86+
svgData = '';
87+
return function() {
88+
main = $('#main');
89+
App = function ContainerViewModel () {
90+
self = this;
91+
self.orientations = ko.observableArray();
92+
// obtain orientation json
93+
$.ajax({
94+
url: 'data/orientation.json',
95+
dataType: 'json',
96+
success: function (res) {
97+
res.forEach(function (obj, index) {
98+
self.orientations.push(obj.reduce(reduceFn, 0));
99+
});
100+
}
101+
});
107102

103+
// obtain bezier json
104+
$.ajax({
105+
url: 'data/Bezier.json',
106+
dataType: 'json',
107+
success: function (res) {
108+
res.forEach(createPath);
109+
}
110+
});
111+
this.paths = ko.observableArray(paths);
108112

109-
};
110-
app = new App ();
111-
Sammy('#main', function() {
112-
// define a 'route'
113-
this.get('#orientation', function (url) {
114-
app.openPage(url);
113+
// this.htmlStructure = ko.observable($('#index').html());
114+
this.openPage = function (url) {
115+
highlight(url);
116+
main.animate({opacity: 0}, 200, function () {
117+
main.find('section').first().prependTo('body');
118+
main.append(template(url))
119+
main.animate({opacity: 1}, 200);
120+
});
121+
122+
};
115123

116-
});
117-
this.get('#bezier', function (url) {
118-
app.openPage(url);
119124

120-
});
121-
this.get('', function (url) {
122-
app.openPage(url);
125+
};
126+
app = new App ();
127+
Sammy('#main', function() {
128+
// define a 'route'
129+
this.get('#orientation', function (url) {
130+
app.openPage(url);
123131

124-
});
125-
}).run('#/');;
132+
});
133+
this.get('#bezier', function (url) {
134+
app.openPage(url);
135+
136+
});
137+
this.get('', function (url) {
138+
app.openPage(url);
139+
140+
});
141+
}).run('#/');;
142+
143+
144+
145+
ko.applyBindings(app);
146+
}
147+
})();
126148

127-
128-
129-
ko.applyBindings(app);
130-
}
131-
})();
132-
$(onload);
149+
$(onload);
150+
})
133151

134152

135153

‎package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,11 @@
1111
"repository": "https://github.com/iEgit/js-map-task",
1212
"engines": {
1313
"node": "0.10.x"
14+
},
15+
"dependencies": {
16+
"bower": "1.3.x"
17+
},
18+
"scripts": {
19+
"postinstall": "./node_modules/bower/bin/bower install"
1420
}
1521
}

‎sammy

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎server.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ http.createServer(function(request, response) {
88

99
var uri = url.parse(request.url).pathname,
1010
filename = path.join(process.cwd(), uri);
11-
console.log('cwd:' + process.cwd());
1211
path.exists(filename, function(exists) {
1312
if(!exists) {
1413
response.writeHead(404, {"Content-Type": "text/plain"});

0 commit comments

Comments
 (0)