Skip to content

Commit f5dc748

Browse files
guo-yuguo-yu
committed
Add all directives, Update examples
1 parent c30ae99 commit f5dc748

10 files changed

Lines changed: 147 additions & 57 deletions

File tree

examples/index.html renamed to examples/api.html

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Duoshuo Angular SDK</title>
6-
<style>
7-
h3 {
8-
font-size: 16px;
9-
}
10-
.angular-duoshuo {
11-
margin: 50px;
12-
}
13-
.response {
14-
font-size: 12px;
15-
color: #999;
16-
margin-bottom: 20px;
17-
}
18-
</style>
6+
<link rel="stylesheet" href="example.css">
197
</head>
208
<body>
219
<div id="angular-duoshuo" class="angular-duoshuo" ng-controller="duoshuo">
@@ -24,7 +12,6 @@ <h3 ng-show="responseJSON">当前用户数据:</h3>
2412
<div class="threads" ng-repeat="thread in threads">
2513
<h3 ng-bind="thread.title" ng-show="thread.title !== ''"></h3>
2614
</div>
27-
<div duoshuo data-thread-key="{{demokey}}"></div>
2815
</div>
2916
<script>
3017
var duoshuoQuery = {
@@ -33,7 +20,7 @@ <h3 ng-bind="thread.title" ng-show="thread.title !== ''"></h3>
3320
</script>
3421
<script src="http://static.duoshuo.com/embed.unstable.js"></script>
3522
<script src="../bower_components/angular/angular.min.js"></script>
36-
<script src="../dist/duoshuo.min.js"></script>
23+
<script src="../src/duoshuo.js"></script>
3724
<script src="./example.js"></script>
3825
</body>
3926
</html>

‎examples/directives.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="app">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Duoshuo Angular SDK</title>
6+
<link rel="stylesheet" href="example.css">
7+
</head>
8+
<body>
9+
<div class="example">
10+
<h3>Recent Comments</h3>
11+
<div ds-recent-comments></div>
12+
<h3>Recent Visitors</h3>
13+
<div ds-recent-visitors data-num-items="10"></div>
14+
<h3>Top Threads</h3>
15+
<div ds-top-threads data-range="monthly" data-num-items="5"></div>
16+
<h3>Thread Count</h3>
17+
<div ds-thread-count data-thread-key="6023b620-2b62-11e4-8901-7922c35435d6"></div>
18+
<h3>Login</h3>
19+
<div ds-login></div>
20+
</div>
21+
<script>
22+
var duoshuoQuery = {
23+
short_name: 'airpub'
24+
}
25+
</script>
26+
<script src="http://static.duoshuo.com/embed.unstable.js"></script>
27+
<script src="../bower_components/angular/angular.js"></script>
28+
<script src="../src/duoshuo.js"></script>
29+
<script>
30+
angular.module('app', ['duoshuo'])
31+
</script>
32+
</body>
33+
</html>

‎examples/embed-thread.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="app">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Duoshuo Angular SDK</title>
6+
<link rel="stylesheet" href="example.css">
7+
</head>
8+
<body>
9+
<div id="angular-duoshuo" class="angular-duoshuo" ng-controller="duoshuo">
10+
<div ds-thread data-thread-key="{{demokey}}"></div>
11+
</div>
12+
<script>
13+
var duoshuoQuery = {
14+
short_name: 'airpub'
15+
}
16+
</script>
17+
<script src="http://static.duoshuo.com/embed.unstable.js"></script>
18+
<script src="../bower_components/angular/angular.min.js"></script>
19+
<script src="../src/duoshuo.js"></script>
20+
<script>
21+
var app = angular.module('app', ['duoshuo']);
22+
app.controller('duoshuo', function($scope, duoshuo) {
23+
$scope.demokey = 'dede-dede';
24+
});
25+
</script>
26+
</body>
27+
</html>

‎examples/example.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
h3 {
2+
font-size: 16px;
3+
}
4+
.angular-duoshuo {
5+
margin: 50px;
6+
}
7+
.response {
8+
font-size: 12px;
9+
color: #999;
10+
margin-bottom: 20px;
11+
}

‎examples/example.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
var app = angular.module('app', ['duoshuo']);
22

3-
app.controller('duoshuo', function($scope, $duoshuo) {
3+
app.controller('duoshuo', function($scope, duoshuo) {
44
$scope.demokey = 'dede-dede';
55
// inspect current user
6-
$duoshuo.on('ready', function(err, data) {
6+
duoshuo.on('ready', function(err, data) {
77
if (err) return console.error(err);
88
console.log(data);
99
$scope.responseJSON = JSON.stringify(data);
1010
});
1111
// using lowlevel `get` method
12-
$duoshuo.get('threads/list', {
12+
duoshuo.get('threads/list', {
1313
page: 1,
1414
limit: 30
1515
}, function(err, data) {
@@ -23,7 +23,7 @@ app.controller('duoshuo', function($scope, $duoshuo) {
2323
console.log(err);
2424
});
2525
// test membership api
26-
$duoshuo.get('sites/membership', {}, function(err, data) {
26+
duoshuo.get('sites/membership', {}, function(err, data) {
2727
// success callback
2828
if (err) return console.error(err);
2929
console.log(data);

‎src/directives/recent-comments.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
;(function(angular, NProgress) {
1+
;(function(angular) {
22
'use strict';
33

44
if (!angular)
55
throw new Error('angular.js required!');
66

7-
var NProgressExist = NProgress && NProgress.start && NProgress.done;
8-
97
angular
108
.module('duoshuo')
11-
.directive('rencentComments', ['duoshuo', rencentComments]);
9+
.directive('duoshuoRecentComments', rencentComments);
1210

13-
// Todo: Remove direactives wrapper,
14-
function rencentComments(duoshuo) {
11+
function rencentComments() {
1512
return {
1613
restrict: 'AE',
1714
replace: true,
18-
template: '<div class="ds-recent-comments-wrapper"></div>',
15+
template: '<div class="ds-recent-comments"></div>',
1916
link: function(scope, element, attrs) {
20-
// Render comments when DOM has been injected.
21-
angular.element(document).ready(function() {
22-
23-
});
17+
if (!window.DUOSHUO.initSelector)
18+
return;
19+
20+
// Trigger init selector function
21+
window.DUOSHUO
22+
.initSelector(window.DUOSHUO.selectors['.ds-recent-comments'])
2423
}
2524
};
2625
}
2726

28-
})(window.angular, window.NProgress)
27+
})(window.angular)

‎src/directives/recent-visitors.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
;(function(angular) {
2+
'use strict';
3+
4+
if (!angular)
5+
throw new Error('angular.js required!');
6+
7+
angular
8+
.module('duoshuo')
9+
.directive('duoshuoRencentVisitors', rencentVisitors);
10+
11+
function rencentVisitors() {
12+
return {
13+
restrict: 'AE',
14+
replace: true,
15+
template: '<div class="ds-recent-visitors"></div>',
16+
link: function(scope, element, attrs) {
17+
if (!window.DUOSHUO.initSelector)
18+
return;
19+
20+
// Trigger init selector function
21+
window.DUOSHUO
22+
.initSelector(window.DUOSHUO.selectors['.ds-recent-visitors'])
23+
}
24+
};
25+
}
26+
27+
})(window.angular)

‎src/directives/thread-count.js‎

Whitespace-only changes.

‎src/directives/top-threads.js‎

Whitespace-only changes.

‎src/duoshuo.js‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,21 @@
22
'use strict';
33

44
if (!angular)
5-
throw new Error('angular.js required!');
6-
5+
throw new Error('Angular.js required!');
6+
77
var NProgressExist = NProgress && NProgress.start && NProgress.done;
88

99
angular
1010
.module('duoshuo', [])
11+
// API set
1112
.provider('duoshuo', duoshuoProvider)
12-
.directive('duoshuo', ['duoshuo', duoshuoDirective]);
13+
// Directives
14+
.directive('dsThread', createDirective('ds-thread'))
15+
.directive('dsRecentComments', createDirective('ds-recent-comments'))
16+
.directive('dsRecentVisitors', createDirective('ds-recent-visitors'))
17+
.directive('dsThreadCount', createDirective('ds-thread-count'))
18+
.directive('dsTopThreads', createDirective('ds-top-threads'))
19+
.directive('dsLogin', createDirective('ds-login'));
1320

1421
function duoshuoProvider() {
1522
this.config = config;
@@ -80,37 +87,36 @@
8087
};
8188

8289
// Comments renderer
83-
duoshuo.render = function(attrs) {
84-
if (!window.DUOSHUO)
85-
throw new Error('duoshuo embed.js required!');
86-
87-
var data = {};
88-
if (attrs.threadId) data['thread-id'] = attrs.threadId;
89-
if (attrs.threadKey) data['thread-key'] = attrs.threadKey;
90+
duoshuo.render = function(options) {
91+
if (!window.DUOSHUO || !window.DUOSHUO.initSelector)
92+
throw new Error('createDirective(); duoshuo embed.js is required!');
9093

91-
return window.DUOSHUO.createEmbedThread('div', data);
94+
return window.DUOSHUO.initSelector(
95+
window.DUOSHUO.selectors['.ds-thread']
96+
)
9297
};
9398

9499
return duoshuo;
95100
}
96101
];
97102
}
98103

99-
function duoshuoDirective(duoshuo) {
100-
return {
101-
restrict: 'AE',
102-
replace: true,
103-
template: '<div class="ds-thread-wrapper"></div>',
104-
link: function(scope, element, attrs) {
105-
// Render comments when DOM has been injected.
106-
angular.element(document).ready(function() {
107-
// Fired after DOM ready
108-
angular
109-
.element(element[0])
110-
.append(duoshuo.render(attrs));
111-
});
112-
}
113-
};
104+
function createDirective(type) {
105+
return function directive() {
106+
return {
107+
restrict: 'AE',
108+
replace: true,
109+
template: '<div class="' + type + '">',
110+
link: function(scope, element, attrs) {
111+
if (!window.DUOSHUO || !window.DUOSHUO.initSelector)
112+
return;
113+
114+
// Trigger init selector function
115+
window.DUOSHUO
116+
.initSelector(window.DUOSHUO.selectors['.' + type])
117+
}
118+
};
119+
}
114120
}
115121

116122
})(window.angular, window.NProgress);

0 commit comments

Comments
 (0)