使用对话框显示微信内容

public/scripts/controllers/weixin-article-controller.js

@@ -98,13 +98,16 @@ app.controller('weixinArticleCtr', ['$scope', '$state', '$sce', '$stateParams',
             $scope.jumpToUrl(b.url);
             return;
         }
-        // 假装等待一下。。。。。。
-        $scope.loadBusy = true;
         $scope.bookmark = b;
+        $('.js-weixin-content').modal({ blurring: true }).modal('setting', 'transition', dataService.animation()).modal('show')
         $timeout(function() {
-            $('body,html').animate({scrollTop:0},100);
+            $('.js-main-content').animate({scrollTop:0},100);
-            $scope.loadBusy = false;
+            $('.js-weixin-content').modal("refresh");
-        }, 200)
+        }, 10)
+    }
+
+    $scope.read = function() {
+        $('.js-weixin-content').modal('setting', 'transition', dataService.animation()).modal('hide');
     }
 
     // 快捷键r随机推荐
@@ -209,7 +212,7 @@ app.controller('weixinArticleCtr', ['$scope', '$state', '$sce', '$stateParams',
     }
 
     function getHotBookmarksbyAPI() {
-        $scope.loadBusy = true;
+        // $scope.loadBusy = true;
         var requireData = {
             userId: null,
             lastupdataTime: new Date().getTime(),
@@ -363,14 +366,5 @@ app.controller('weixinArticleCtr', ['$scope', '$state', '$sce', '$stateParams',
         }, 10);
     }
 
-    $document.bind("keydown", function(event) {
-        $scope.$apply(function() {
-            // Esc按键，退出
-            if (event.keyCode == 27) {
-                $scope.bookmark = {};
-            }
-        })
-    });
-
     $scope.getWeixinArticles($scope.channelId, $scope.currentPage);
 }]);

public/scripts/services/data-service.js

@@ -52,7 +52,7 @@ app.factory('dataService', [function() {
             ];
 
             var t = data[parseInt(Math.random() * 1000) % data.length];
-            return 'fade' || t; // 去掉一些有攻击性的动画
+            return t; // 去掉一些有攻击性的动画
         },
         transition: function(selector, params) {
             var data = {};

public/views/weixin-article.html

@@ -12,7 +12,7 @@
         正在加载中...</div>
 
     <div class="ui divider" style="margin: 3px 0px 8px 0px;"></div>
-    <div class="ui five stackable cards" ng-if="!bookmark.content && !loadBusy">
+    <div class="ui five stackable cards" ng-if="!loadBusy">
         <div class="card" ng-repeat="bookmark in bookmarks" ng-mouseover="setHoverBookmark(bookmark)" ng-mouseleave="setHoverBookmark(null)">
             <div class="content" style="max-height:70px;cursor:pointer" ng-click="detailBookmark(bookmark)">
                 <div class="description bookmarkTitle" title="{{bookmark.title}}">
@@ -39,46 +39,45 @@
             </div>
         </div>
     </div>
-    <div class="ui container" ng-if="bookmark.content && !loadBusy">
+    <div class="ui longer modal js-weixin-content">
-        <div class="ui center aligned container" style="font-size:30px;">
+        <i class="close icon"></i>
-            {{bookmark.title}}
+        <div class="header">{{ bookmark.title }}</div>
-        </div>
+        <div class="scrolling content js-main-content">
-        <div class="ui center aligned container" style="margin: 10px 0px">
+            <div class="ui center aligned container" style="margin: 10px 0px">
-            <span style="color: #4383BF" title="公众号名称">{{bookmark.created_by}}</span>
+                <span style="color: #4383BF" title="公众号名称">{{bookmark.created_by}}</span>
-            &nbsp;&nbsp;
+                &nbsp;&nbsp;
-            <span title="公众号账号">{{bookmark.account}}</span>
+                <span title="公众号账号">{{bookmark.account}}</span>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <span>{{bookmark.created_at}}</span>
+                <span>{{bookmark.created_at}}</span>
-        </div>
+            </div>
-        <div class="ui divider"></div>
+            <div class="ui divider"></div>
-        <div class="content js-weixin-content" style="padding:0 5px">
+            <p ng-bind-html="bookmark.content"></p>
-            <div class="description js-content">
+            <div class="ui divider"></div>
-                <p ng-bind-html="bookmark.content"></p>
+            <div class="ui container">
+                <img class="ui middle aligned mini image" ng-src="{{bookmark.favicon_url}}" style="width:16px;height:16px;padding:0;cursor:pointer;"
+                    ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="点击跳转到原页面(如果过期，需要在微信中才能打开)">
+                <span title="点击复制链接" ng-click="copy(bookmark.url)" class="urlSpan">{{bookmark.url}}
+                </span>
+            </div>
+            <div class="ui divider"></div>
+            <div class="ui grid" ng-if="bookmark.content">
+                <div class="eight wide column">
+                    <div style="float: left;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i
+                            class="chevron left icon"></i>
+                        {{ bookmarks[bookmark.index-1].title }}</div>
+                </div>
+                <div class="eight wide column">
+                    <div style="float: right;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index+1])" ng-if="bookmarks[bookmark.index+1]">
+                        {{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
+                </div>
             </div>
         </div>
-        <div class="ui divider"></div>
+        <div class="actions">
-        <div class="ui container">
+            <div class="ui green button" ng-click="read()">已阅</div>
-            <img class="ui middle aligned mini image" ng-src="{{bookmark.favicon_url}}" style="width:16px;height:16px;padding:0;cursor:pointer;"
-                ng-click="jumpToUrl(bookmark.url, bookmark.id)" title="点击跳转到原页面(如果过期，需要在微信中才能打开)">
-            <span title="点击复制链接" ng-click="copy(bookmark.url)" class="urlSpan">{{bookmark.url}}
-            </span>
         </div>
     </div>
-    <div class="ui divider" ng-if="!loadBusy"></div>
-    <div class="ui grid" ng-if="bookmark.content && !loadBusy">
-        <div class="eight wide column">
-            <div style="float: left;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index-1])" ng-if="bookmarks[bookmark.index-1]"><i class="chevron left icon"></i>
-                {{ bookmarks[bookmark.index-1].title }}</div>
-        </div>
-        <div class="eight wide column">
-            <div style="float: right;cursor: pointer" ng-click="detailBookmark(bookmarks[bookmark.index+1])" ng-if="bookmarks[bookmark.index+1]">
-                {{ bookmarks[bookmark.index+1].title }} <i class="chevron right icon"></i></div>
-        </div>
-    </div>
-    <div class="ui divider" ng-if="bookmark.content && !loadBusy"></div>
     <div class="ui grid">
         <div class="four wide column">
-            <i title="返回文章列表。按 ESC 键亦可返回" class="reply icon black big" style="padding-top:10px;" ng-click="bookmark.content=''" ng-show="bookmark.content"></i>
         </div>
         <div class="twelve wide column">
             <pagination></pagination>