From 8f5635c7710274db53d3436e365315cbd9e674bb Mon Sep 17 00:00:00 2001 From: luchenqun Date: Thu, 16 Mar 2017 17:08:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=83=AD=E9=97=A8=E4=B9=A6?= =?UTF-8?q?=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/style.css | 63 +++++- public/index.html | 1 + public/scripts/app-angular.js | 5 + .../controllers/bookmark-info-controller.js | 2 + .../controllers/bookmarks-controller.js | 1 + public/scripts/controllers/hot-controller.js | 193 ++++++++++++++++++ .../scripts/controllers/menus-controller.js | 6 + public/views/bookmark-info.html | 10 +- public/views/bookmarks.html | 32 ++- public/views/hot.html | 28 +++ 10 files changed, 312 insertions(+), 29 deletions(-) create mode 100644 public/scripts/controllers/hot-controller.js create mode 100644 public/views/hot.html diff --git a/public/css/style.css b/public/css/style.css index bb603de..658edf4 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -6,6 +6,7 @@ body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } + code { background-color: rgba(0, 0, 0, 0.08); border-radius: 3px; @@ -16,6 +17,7 @@ code { padding: 1px 6px; vertical-align: baseline; } + .bookmark { white-space: nowrap; text-overflow: ellipsis; @@ -24,14 +26,20 @@ code { color: #212121; border: 1px solid transparent; } + .bookmarkTitle { + color: #333; + font-size: 16px; + line-height: 24px; + display: -webkit-box; text-overflow: ellipsis; overflow: hidden; + text-overflow: ellipsis; display: -webkit-box; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; - height: 40px; - line-height: 20px; } + .bookmarkNormalHover { white-space: nowrap; text-overflow: ellipsis; @@ -42,12 +50,15 @@ code { cursor: pointer; border: 1px solid transparent; } + .bookmarkOperaterHover { cursor: pointer; } + .tags { cursor: default; } + .bookmarkEditHover { white-space: nowrap; text-overflow: ellipsis; @@ -57,39 +68,81 @@ code { cursor: default; border: 1px dashed #3388FF; } + .bookmarkInfo { - cursor: url('../images/detail.ico'),auto; + cursor: url('../images/detail.ico'), auto; } + .img-fixed-size { width: 16px; height: 16px; } + td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } + table { table-layout: fixed; } + .wrap { white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; } + .js-navigate-bookmark a { color: #212121; } + .ui.menu .selected.item { background: rgba(1, 1, 1, 0.05); } + img.operator { width: 16px; height: 16px } + .js-bookmark-info .content img { - max-width:100%; - max-height:100%; + max-width: 100%; + max-height: 100%; padding-right: 20px; } + +.hot-image { + max-width: 100%; + max-height: 160px; + min-height: 160px; + background-color: yellow; + overflow: hidden; +} + +.sourceName { + display: inline-block; + position: relative; + top: 4px; + max-width: 55px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 12px; + color: #333; +} + +.favCount { + position: relative; + top: 1px; + font-size: 12px; + color: #BFC0C6; +} + +.urlSpan { + word-wrap: break-word; + word-break: break-all; + cursor:default; +} diff --git a/public/index.html b/public/index.html index 35cad58..eb7cf75 100644 --- a/public/index.html +++ b/public/index.html @@ -57,6 +57,7 @@ + diff --git a/public/scripts/app-angular.js b/public/scripts/app-angular.js index 6b0ff01..f8ee529 100644 --- a/public/scripts/app-angular.js +++ b/public/scripts/app-angular.js @@ -14,6 +14,11 @@ app.config(function($stateProvider, $urlRouterProvider, $httpProvider) { }, controller: 'bookmarksCtr' }) + .state('hot', { + url: '/hot', + templateUrl: '/views/hot.html', + controller: 'hotCtr' + }) .state('search', { url: '/search', templateUrl: '/views/search.html', diff --git a/public/scripts/controllers/bookmark-info-controller.js b/public/scripts/controllers/bookmark-info-controller.js index 0af33b3..7014f98 100644 --- a/public/scripts/controllers/bookmark-info-controller.js +++ b/public/scripts/controllers/bookmark-info-controller.js @@ -9,6 +9,8 @@ app.controller('bookmarkInfoCtr', ['$scope', '$state', '$timeout', '$sce', '$win $('.ui.modal.js-bookmark-info').modal({ closable: false, }).modal('setting', 'transition', transition()).modal('show'); + bookmark.favicon = bookmark.favicon || ('http://g.soz.im/'+bookmark.url +'/cdn.ico'); + bookmark.image = bookmark.image || ('./images/snap/'+bookmark.id+'.png'); $scope.bookmark = bookmark; $scope.bookmark.description = $sce.trustAsHtml(bookmark.description); $scope.content = ''; diff --git a/public/scripts/controllers/bookmarks-controller.js b/public/scripts/controllers/bookmarks-controller.js index de43b6c..4bf0b23 100644 --- a/public/scripts/controllers/bookmarks-controller.js +++ b/public/scripts/controllers/bookmarks-controller.js @@ -219,6 +219,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', ' } if (params.showStyle == 'card') { data.bookmarksCreatedAt.forEach(bookmark => { + bookmark.edit = false; $scope.bookmarks.push(bookmark); }) $scope.loadBusy = false; diff --git a/public/scripts/controllers/hot-controller.js b/public/scripts/controllers/hot-controller.js new file mode 100644 index 0000000..a001404 --- /dev/null +++ b/public/scripts/controllers/hot-controller.js @@ -0,0 +1,193 @@ +app.controller('hotCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'ngDialog', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, ngDialog, bookmarkService, pubSubService) { + console.log("Hello hotCtr..."); + $scope.bookmarks = []; // 书签数据 + $scope.bookmarkNormalHover = false; + $scope.bookmarkEditHover = false; + const perPageItems = 20; + $scope.totalPages = 0; + $scope.currentPage = 1; + $scope.inputPage = ''; + $scope.loadBusy = false; + $scope.curDay = 0; + $scope.toastrId = 0; + + bookmarkService.autoLogin() + .then((data) => { + var login = data.logined; + var index = login ? 4 : 2; + pubSubService.publish('Common.menuActive', { + login: login, + index: index + }); + }) + .catch((err) => { + console.log('autoLogin err', err) + }); + + getBookmarks(); + + $scope.jumpToUrl = function(url) { + $window.open(url, '_blank'); + } + + $scope.favoriteBookmark = function(b) { + var bookmark = {} + bookmark.description = ''; + bookmark.title = b.title; + bookmark.url = b.url; + bookmark.public = 1; + bookmark.click_count = 1; + + bookmarkService.favoriteBookmark(bookmark) + .then((data) => { + pubSubService.publish('EditCtr.inserBookmarsSuccess', data); + if (data.title) { + toastr.success('[ ' + data.title + ' ] 收藏成功！', "提示"); + } else { + toastr.error('[ ' + bookmark.title + ' ] 收藏失败！', "提示"); + } + }) + .catch((err) => { + toastr.error('[ ' + bookmark.title + ' ] 收藏失败，' + JSON.stringify(err), "提示"); + }); + } + + $scope.storeBookmark = function(bookmark) { + var b = $.extend(true, {}, bookmark); // 利用jQuery执行深度拷贝 + pubSubService.publish('TagCtr.storeBookmark', b); + } + + $scope.copy = function(id, url) { + var clipboard = new Clipboard('#hoturl' + id, { + text: function() { + return url; + } + }); + + clipboard.on('success', function(e) { + toastr.success(url + '
已复制到您的剪切板', "提示"); + clipboard.destroy(); + }); + + clipboard.on('error', function(e) { + toastr.error(url + '
复制失败', "提示"); + clipboard.destroy(); + }); + } + + $scope.detailBookmark = function(b) { + var bookmark = $.extend(true, {}, b); // 利用jQuery执行深度拷贝 + bookmark.own = false; + bookmark.tags = [{ + id: -1, + name: '热门收藏' + }]; + console.log(JSON.stringify(bookmark)); + pubSubService.publish('TagCtr.showBookmarkInfo', bookmark); + } + + $scope.loadCardData = function() { + console.log('loadCardData.........') + if (!$scope.loadBusy) { + var menusScope = $('div[ng-controller="menuCtr"]').scope(); + var login = (menusScope && menusScope.login) || false; + if (login) { + getBookmarks(); + } else { + toastr.remove(); + $scope.toastrId = toastr.info('想要查看更多热门标签，请先登录！', "提示"); + } + } + } + + function getBookmarks() { + $scope.loadBusy = true; + var requireData = { + userId: null, + lastupdataTime: new Date().getTime(), + pageNo: 1, + pageSize: 1000, + sort: 'desc', + renderType: 0, + date: CurentDate($scope.curDay), + idfa: "d4995f8a0c9b2ad9182369016e376278", + os: "ios", + osv: "9.3.5" + } + var api = "https://api.shouqu.me/api_service/api/v1/daily/dailyMark"; + $.ajax({ + url: api, + type: 'post', + data: requireData, + success: function(json) { + // console.log('success............', json, JSON.stringify(json.data.list[0]) ); + var alterRex = "/mmbiz.qpic.cn|images.jianshu.io|zhimg.com/g"; + var alterImg = "./images/snap/default.png" + $timeout(function() { + $scope.loadBusy = false; + if (json.code == 200) { + var bookmarkList = json.data.list; + bookmarkList.forEach((bookmark) => { + var b = {}; + b.title = bookmark.title; + b.url = bookmark.url; + b.favicon = bookmark.sourceLogo; + b.from = bookmark.sourceName; + b.image = alterImg; + if (bookmark.imageList.length >= 1) { + b.image = (json.data.pageNo == 1 ? (bookmark.imageList[0].url.match(alterRex) != null ? alterImg : bookmark.imageList[0].url) : alterImg); + } + b.click_count = bookmark.favCount; + b.created_at = $filter('date')(new Date(bookmark.updatetime), "yyyy-MM-dd HH:mm:ss"); + b.last_click = $filter('date')(new Date(bookmark.createtime), "yyyy-MM-dd HH:mm:ss"); + b.id = bookmark.id; + + b.edit = false; + $scope.bookmarks.push(b); + }) + $scope.curDay--; + } else { + toastr.error('获取热门书签失败！失败原因：' + json.message, "提示"); + } + }, 100); + }, + error: function(json) { + toastr.error('获取热门书签失败！失败原因：' + json.message, "提示"); + $scope.loadBusy = false; + } + }); + + var menusScope = $('div[ng-controller="menuCtr"]').scope(); + var login = (menusScope && menusScope.login) || false; + var index = login ? 4 : 2; + pubSubService.publish('Common.menuActive', { + login: login, + index: index + }); + } + + function CurentDate(i) { + if (i == undefined) { + i = 0; + } + var now = new Date(); + now.setTime(now.getTime() + i * 24 * 60 * 60 * 1000); + var year = now.getFullYear(); //年 + var month = now.getMonth() + 1; //月 + var day = now.getDate(); //日 + var clock = year + "年" + month + "月" + day + "日"; + return (clock); + } + + function transition() {} + + function animation() { + var data = ['scale', 'fade', 'fade up', 'fade down', 'fade left', 'fade right', 'horizontal flip', + 'vertical flip', 'drop', 'fly left', 'fly right', 'fly up', 'fly down', 'swing left', 'swing right', 'swing up', + 'swing down', 'browse', 'browse right', 'slide down', 'slide up', 'slide left', 'slide right' + ]; + var t = data[parseInt(Math.random() * 1000) % data.length]; + + return t; + } +}]); diff --git a/public/scripts/controllers/menus-controller.js b/public/scripts/controllers/menus-controller.js index 5401fbd..59ddfa2 100644 --- a/public/scripts/controllers/menus-controller.js +++ b/public/scripts/controllers/menus-controller.js @@ -25,6 +25,9 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService', }, { uiSref: 'settings', title: '设置' + }, { + uiSref: 'hot', + title: '热门收藏' }]; // 未登陆显示的菜单数据 @@ -34,6 +37,9 @@ app.controller('menuCtr', ['$scope', '$stateParams', '$state', 'pubSubService', }, { uiSref: 'login', title: '登录|注册' + }, { + uiSref: 'hot', + title: '热门收藏' }]; /** diff --git a/public/views/bookmark-info.html b/public/views/bookmark-info.html index 625a873..4ebd6e3 100644 --- a/public/views/bookmark-info.html +++ b/public/views/bookmark-info.html @@ -6,7 +6,7 @@
- +
@@ -14,13 +14,13 @@
- 网页地址：{{bookmark.url}} + 网页地址：{{bookmark.url}}
diff --git a/public/views/bookmarks.html b/public/views/bookmarks.html index d0db863..04385d0 100644 --- a/public/views/bookmarks.html +++ b/public/views/bookmarks.html @@ -100,33 +100,27 @@
-
-
-
- -
-
+
+
+
{{bookmark.title}}
-
+
+ +
+
{{ tag.name }}
+
-
- - - +
+ + + +
diff --git a/public/views/hot.html b/public/views/hot.html new file mode 100644 index 0000000..23a8f4b --- /dev/null +++ b/public/views/hot.html @@ -0,0 +1,28 @@ +
+
+
+
+
+ {{bookmark.title}} +
+
+
+ +
+
+ + {{ bookmark.from }} + ·{{ bookmark.click_count }}人收藏 + +
+
+ + + + +
+
+
+
+ 正在加载中...
+