完成查看书签详情功能

public/index.html

@@ -29,6 +29,8 @@
             </div>
             <!-- directive：书签编辑 -->
             <edit></edit>
+            <!-- directive：书签信息 -->
+            <bookmarkinfo></bookmarkinfo>
         </div>
         <script src="/scripts/externe/jquery-3.1.1.min.js"></script>
         <script src="/scripts/externe/toastr.min.js"></script>
@@ -41,6 +43,7 @@
         <script src="/scripts/services/pub-sub-service.js"></script>
         <script src="/scripts/directives/pagination-directive.js"></script>
         <script src="/scripts/directives/edit-directive.js"></script>
+        <script src="/scripts/directives/bookmark-info-directive.js"></script>
         <script src="/scripts/directives/menus-directive.js"></script>
         <script src="/scripts/directives/element-render-finish-directive.js"></script>
         <script src="/scripts/directives/js-init-directive.js"></script>
@@ -52,6 +55,7 @@
         <script src="/scripts/controllers/advice-controller.js"></script>
         <script src="/scripts/controllers/menus-controller.js"></script>
         <script src="/scripts/controllers/edit-controller.js"></script>
+        <script src="/scripts/controllers/bookmark-info-controller.js"></script>
         <script src="/scripts/controllers/search-controller.js"></script>
         <script src="/scripts/externe/semantic.min.js"></script>
         <script src="/scripts/externe/calendar.min.js"></script>

public/scripts/controllers/bookmark-info-controller.js

@@ -0,0 +1,30 @@
+app.controller('bookmarkInfoCtr', ['$scope', '$state', '$timeout', '$sce', 'bookmarkService', 'pubSubService', function($scope, $state, $timeout, $sce, bookmarkService, pubSubService) {
+    console.log("Hello bookmarkInfoCtr");
+    $scope.bookmark = {}
+    $scope.content = '';
+    $scope.loading = false;
+
+    pubSubService.subscribe('TagCtr.showBookmarkInfo', $scope, function(event, bookmark) {
+        console.log('subscribe TagCtr.showBookmarkInfo', bookmark);
+        $('.ui.modal.js-bookmark-info').modal('show');
+        $scope.bookmark = bookmark;
+        $scope.content = '';
+        var params = {
+            url: bookmark.url,
+            requestId: 1
+        }
+        $scope.loading = true;
+        bookmarkService.getArticle(params)
+            .then((data) => {
+                $scope.content = data.content ? $sce.trustAsHtml(data.content) : $sce.trustAsHtml('<p>数据获取失败，可能是服务器不允许获取，或者是https网站！</p>');
+                setTimeout(function(){
+                    $('.ui.modal.js-bookmark-info').modal("refresh");
+                }, 100);
+                $scope.loading = false;
+            })
+            .catch((err) => {
+                $scope.content = $sce.trustAsHtml('<p>数据获取失败:' + JSON.stringify(err) + '</p>');
+                $scope.loading = false;
+            })
+    });
+}]);

public/scripts/controllers/bookmarks-controller.js

@@ -67,8 +67,17 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
         });
     }
 
-    $scope.detailBookmark = function(bookmarkId) {
+    $scope.detailBookmark = function(bookmark) {
-        toastr.warning('功能暂未实现。。。', "警告");
+        if ($scope.showStyle == 'navigate') {
+            bookmark.tags = [{
+                id: bookmark.tag_id,
+                name: bookmark.tag_name
+            }];
+        }
+        pubSubService.publish('TagCtr.showBookmarkInfo', bookmark);
+        bookmarkService.clickBookmark({
+            id: bookmark.id
+        });
     }
     $scope.copyBookmark = function(bookmarkUrl) {
         toastr.warning('功能暂未实现。。。', "警告");

public/scripts/controllers/edit-controller.js

@@ -13,7 +13,7 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
                 var params = {
                     url: newUrl,
                 }
-                bookmarkService.getTitle(params)
+                bookmarkService.getArticle(params)
                     .then((data) => $scope.title = data.title)
                     .catch((err) => console.log('getTitle err', err))
             }

public/scripts/controllers/search-controller.js

@@ -81,8 +81,8 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
         });
     }
 
-    $scope.detailBookmark = function(bookmarkId) {
+    $scope.detailBookmark = function(bookmark) {
-        toastr.warning('功能暂未实现。。。', "警告");
+        pubSubService.publish('TagCtr.showBookmarkInfo', bookmark);
     }
 
     $scope.copyBookmark = function(bookmarkUrl) {

public/scripts/controllers/tags-controller.js

@@ -97,8 +97,11 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', 'book
         });
     }
 
-    $scope.detailBookmark = function(bookmarkId) {
+    $scope.detailBookmark = function(bookmark) {
-        toastr.warning('功能暂未实现。。。', "警告");
+        pubSubService.publish('TagCtr.showBookmarkInfo', bookmark);
+        bookmarkService.clickBookmark({
+            id: bookmark.id
+        });
     }
 
     $scope.copyBookmark = function(bookmarkUrl) {

public/scripts/directives/bookmark-info-directive.js

@@ -0,0 +1,7 @@
+app.directive('bookmarkinfo', function() {
+    return {
+        restrict: 'EAC',
+        templateUrl: '/views/bookmark-info.html',
+        replace: true
+    }
+});

public/scripts/services/bookmark-service.js

@@ -1,16 +1,16 @@
 app.factory('bookmarkService', ['$http', '$q', function($http, $q) {
     // service interface
     var service = {
-        getTitle: function(params) {
+        getArticle: function(params) {
             var def = $q.defer();
-            $http.post('/api/getTitle/', {
+            $http.post('/api/getArticle/', {
                     params: params
                 })
                 .success(function(data) {
                     def.resolve(data);
                 })
                 .error(function(data) {
-                    def.reject('getTitle error');
+                    def.reject('getArticle error');
                 });
             return def.promise;
         },

public/views/bookmark-info.html

@@ -0,0 +1,60 @@
+<div class="ui long modal js-bookmark-info" ng-controller="bookmarkInfoCtr">
+    <i class="close icon"></i>
+    <div class="header">
+        {{bookmark.title}}
+    </div>
+    <div class="content">
+        <div class="ui grid">
+            <div class="six wide column">
+                <img class="bordered" ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
+            </div>
+            <div class="one wide column"></div>
+            <div class="nine wide column">
+                <div class="ui  vertically divided grid">
+                    <div class="one column row">
+                        <div class="column">
+                            <i class="internet explorer icon"></i>网页地址：{{bookmark.url}}
+                        </div>
+                    </div>
+                    <div class="two column row">
+                        <div class="column">
+                            <i class="add to calendar icon"></i>创建日期：{{bookmark.created_at}}
+                        </div>
+                        <div class="column">
+                            <i class="calendar icon"></i>最后使用：{{bookmark.last_click}}
+                        </div>
+                    </div>
+                    <div class="two column row">
+                        <div class="column">
+                            <i class="hand pointer icon"></i>点击次数：{{bookmark.click_count}}
+                        </div>
+                        <div class="column">
+                            <i class="tags icon"></i>书签分类：
+                            <div class="ui label" ng-repeat="tag in bookmark.tags">
+                                {{ tag.name }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="ui divider"></div>
+    <div class="content" style="padding:0 0 0 20px">
+        <div class="description">
+            <div class="ui header"> 描述信息 </div>
+            <p>{{ bookmark.description }}</p>
+        </div>
+    </div>
+    <div class="ui divider"></div>
+    <div class="content" style="padding:0 0 0 20px">
+        <div class="description">
+            <div class="ui header"> 内容摘抄 </div>
+            <p ng-bind-html="content"></p>
+            <img class="ui centered medium image" src="/images/loading.gif" ng-show="loading">
+        </div>
+    </div>
+    <div class="actions">
+        <button class="positive ui right button">确定</button>
+    </div>
+</div>

public/views/bookmarks.html

@@ -30,7 +30,7 @@
                             id="{{bookmark.id}}">
                             <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px" ng-src="./images/{{ bookmarkEditHover ? 'delete-hover' : 'delete'}}.png" ng-if="edit" ng-click="delBookmark(bookmark.id)">
                             <img class="ui ui middle aligned tiny image bookmarkOperaterHover" style="width:16px;height:16px;float:right;" ng-src="./images/{{ bookmarkEditHover ? 'edit-bookmark-hover' : 'edit-bookmark'}}.png" ng-if="edit" ng-click="editBookmark(bookmark.id)">
-                            <img class="ui ui middle aligned tiny image" ng-src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px" ng-if="!edit">
+                            <img class="ui ui middle aligned tiny image" ng-src=" http://favicon.byi.pw/?url={{bookmark.url}}" style="width:16px;height:16px;cursor:default;" ng-click="detailBookmark(bookmark);$event.stopPropagation()" ng-if="!edit">
                             <span>{{ bookmark.title}}</span>
                         </div>
                     </div>
@@ -75,7 +75,7 @@
             <td>
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark.id)" title="删除">
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)" title="编辑">
-                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark.id)" title="详情">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="详情">
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/copy.png" ng-click="copyBookmark(bookmark.url)" title="复制链接">
             </td>
         </tr>

public/views/search.html

@@ -149,7 +149,7 @@
             <td>
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark.id)">
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)">
-                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark.id)">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)">
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/copy.png" ng-click="copyBookmark(bookmark.url)" title="复制链接">
             </td>
         </tr>

public/views/tags.html

@@ -45,7 +45,7 @@
             <td>
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/delete.png" ng-click="delBookmark(bookmark.id)">
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/edit-bookmark.png" ng-click="editBookmark(bookmark.id)">
-                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark.id)">
+                <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)">
                 <img class="ui mini spaced image" style="width:16px;height:16px;margin:0 1px" ng-src="./images/copy.png" ng-click="copyBookmark(bookmark.url)" title="复制链接">
             </td>
         </tr>

routes/api.js

@@ -614,14 +614,22 @@ api.post('/addTags', function(req, res) {
         .catch((err) => console.log('addTags err', err));
 });
 
-api.post('/getTitle', function(req, response) {
+api.post('/getArticle', function(req, response) {
     var params = req.body.params;
     var url = params.url;
+    var requestId = params.requestId || 0;
     read(url, function(err, article, meta) {
         console.log(article.title || 'Get title failed');
+        if (requestId == 0) {
             response.json({
                 title: article.title || '',
             });
+        } else if(requestId == 1) {
+            response.json({
+                content: article.content,
+            });
+        }
+
         article.close();
     });
 })