liweichun
/
my-bookmark
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加热门书签

This commit is contained in:
luchenqun 2017-03-16 17:08:04 +08:00
parent 1c22f88085
commit 8f5635c771
10 changed files with 312 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
public/css/style.css
View File

@ -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;
}

1
public/index.html
View File

@ -57,6 +57,7 @@
<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/controllers/hot-controller.js"></script>
<script src="/scripts/externe/semantic.min.js"></script>
<script src="/scripts/externe/calendar.min.js"></script>
<script src="/scripts/externe/jquery.uploadfile.min.js"></script>

5
public/scripts/app-angular.js
View File

@ -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',

2
public/scripts/controllers/bookmark-info-controller.js
View File

@ -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 = '';

1
public/scripts/controllers/bookmarks-controller.js
View File

@ -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;

193
public/scripts/controllers/hot-controller.js Normal file
View File

@ -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 + '<br/>已复制到您的剪切板', "提示");
clipboard.destroy();
});
clipboard.on('error', function(e) {
toastr.error(url + '<br/>复制失败', "提示");
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;
}
}]);

6
public/scripts/controllers/menus-controller.js
View File

@ -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: '热门收藏'
}];
/**

10
public/views/bookmark-info.html
View File

@ -6,7 +6,7 @@
<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"/>
<img class="bordered" ng-src="{{bookmark.image}}" err-src="./images/snap/default.png"/>
</div>
<div class="one wide column"></div>
<div class="nine wide column">
@ -14,13 +14,13 @@
<div class="one column row">
<div class="column">
<img
class="ui ui middle aligned tiny image"
ng-src="http://g.soz.im/{{bookmark.url}}/cdn.ico"
style="width:16px;height:16px;cursor:pointer;"
class="ui middle aligned mini image"
ng-src="{{bookmark.favicon}}"
style="width:16px;height:16px;padding:0;cursor:pointer;"
ng-click="jumpToUrl(bookmark.url, bookmark.id)"
favicon-err="./images/favicon/{{bookmark.id}}.ico"
title="点击跳转到原页面">
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer;" title="点击跳转到原页面">网页地址</span>：<span title="点击复制链接" ng-click="copy(bookmark.id, bookmark.url)" id="detailurl{{bookmark.id}}" style="cursor:default;">{{bookmark.url}}<span>
<span ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer;" title="点击跳转到原页面">网页地址</span>：<span title="点击复制链接" ng-click="copy(bookmark.id, bookmark.url)" id="detailurl{{bookmark.id}}" class="urlSpan">{{bookmark.url}}<span>
</div>
</div>
<div class="two column row">

32
public/views/bookmarks.html
View File

@ -100,33 +100,27 @@
</tfoot>
</table>
<div class="ui segment js-segment-card" ng-if="showStyle === 'card'">
<div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks">
<div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
<img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
</div>
<div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
<div class="ui five stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks" id="{{bookmark.id}}">
<div class="content" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="max-height:70px;cursor:pointer">
<div class="description bookmarkTitle">
{{bookmark.title}}
</div>
</div>
<div class="extra content tags">
<div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)" style="cursor:pointer">
<img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
</div>
<div class="extra content tags" ng-show="!bookmark.edit" style="height:50px;">
<div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="jumpToTags(tag.id)">
{{ tag.name }}
</div>
<i class="ellipsis horizontal icon right floated" style="margin-top:6px;" ng-mouseover="bookmark.edit=true;"></i>
</div>
<div class="extra content bookmarkInfo" ng-click="detailBookmark(bookmark);$event.stopPropagation()" title="点击进入书签详情页面">
<span class="left floated like">
<i class="add to calendar icon"></i>
{{ bookmark.created_at }}
</span>
<!-- <span class="left floated like">
<i class="pointing up icon"></i>
{{ bookmark.click_count }}
</span> -->
<!-- <span class="right floated">
<img class="ui mini spaced image" style="cursor:default;width:16px;height:16px;margin:0 1px" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark);$event.stopPropagation()" title="详情">
</span> -->
<div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;" style="height:50px;">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/delete.png" ng-click="delBookmark(bookmark)" title="删除书签">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" 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 8px;margin-top:4px;" ng-src="./images/copy.png" id="url{{bookmark.id}}" ng-click="copy(bookmark.id, bookmark.url)" title="复制链接">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情">
</div>
</div>
</div>

28
public/views/hot.html Normal file
View File

@ -0,0 +1,28 @@
<div class="ui segment js-hot-card" style="min-height:300px;">
<div class="ui five stackable cards" infinite-scroll='loadCardData()' infinite-scroll-immediate-check="false">
<div class="card" ng-repeat="bookmark in bookmarks">
<div class="content" style="max-height:70px;cursor:pointer" ng-click="jumpToUrl(bookmark.url)">
<div class="description bookmarkTitle">
{{bookmark.title}}
</div>
</div>
<div class="image hot-image" href="{{ bookmark.url }}" style="cursor:pointer" ng-click="jumpToUrl(bookmark.url)">
<img ng-src="{{bookmark.image}}" err-src="./images/snap/default.png" />
</div>
<div class="extra content" ng-show="!bookmark.edit">
<img class="ui avatar image" style="width:16px;height:16px;" ng-src="{{bookmark.favicon}}">
<span class="sourceName">{{ bookmark.from }}</span>
<span class="favCount">·{{ bookmark.click_count }}人收藏</span>
<i class="ellipsis horizontal icon right floated" style="margin-top:6px;"ng-mouseover="bookmark.edit=true;"></i>
</div>
<div class="extra content" ng-show="bookmark.edit" ng-mouseleave="bookmark.edit=false;">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/favorite.png" ng-click="favoriteBookmark(bookmark)" title="一键收藏">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/store-bookmark.png" ng-click="storeBookmark(bookmark)" title="转存到我的书签">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/copy.png" id="hoturl{{$index}}" ng-click="copy($index, bookmark.url)" title="复制链接">
<img class="ui mini spaced image" style="width:16px;height:16px;margin:0 8px;margin-top:4px;" ng-src="./images/detail.png" ng-click="detailBookmark(bookmark)" title="书签详情">
</div>
</div>
</div>
<div class="ui massive text centered inline loader" ng-class="{active:loadBusy, disabled:!loadBusy}" style="top:10px;">
正在加载中...</div>
</div>