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

给所有页面加上了高大上的动画

This commit is contained in:
luchenqun 2017-03-02 11:30:10 +08:00
parent 263d556c17
commit a1b354ad2d
14 changed files with 155 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/scripts/controllers/advice-controller.js
View File

@ -35,6 +35,9 @@ app.controller('adviceCtr', ['$scope', '$state', '$timeout', 'bookmarkService',
function getAdvices(params) {
bookmarkService.getAdvices(params)
.then((data) => {
if ($scope.advices.length == 0) {
transition();
}
$scope.advices = data;
pubSubService.publish('Common.menuActive', {
login: true,
@ -52,4 +55,21 @@ app.controller('adviceCtr', ['$scope', '$state', '$timeout', 'bookmarkService',
getAdvices({});
}, 100)
$('.js-segment-advice').transition('hide');
function transition() {
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];
var className = 'js-segment-advice';
$('.' + className).transition('hide');
$('.' + className).transition({
animation: t,
duration: 500,
});
}
}]);

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

@ -106,7 +106,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
}
$scope.copy = function(id, url) {
var clipboard = new Clipboard('#url'+id, {
var clipboard = new Clipboard('#url' + id, {
text: function() {
return url;
}
@ -141,8 +141,14 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
}
$scope.closeMsg = function() {
$('.js-msg').transition({
animation: animation(),
duration: '500ms',
onComplete: function() {
$(".js-msg").remove();
}
});
}
$scope.loadCardData = function() {
console.log('loadCardData.........')
@ -198,6 +204,7 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
login: true,
index: 0
});
transition();
})
.catch((err) => console.log('getBookmarks err', err));
@ -205,6 +212,9 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
function transition() {
if ($scope.showStyle == 'card' && $scope.currentPage > 1) {
return;
}
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'
@ -223,6 +233,18 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
duration: 500,
});
}
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;
}
// TODO: 我要将编辑按钮固定在容器的右上角
$(window).resize(updateEditPos);
updateEditPos();

16
public/scripts/controllers/home-controller.js
View File

@ -16,9 +16,25 @@ app.controller('homeCtr', ['$scope', '$stateParams', '$filter', '$state', '$wind
login: false,
index: 0
});
transition();
}
})
.catch((err) => {
console.log('autoLogin err', err)
});
function transition() {
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];
var className = 'js-segment-home';
$('.' + className).transition('hide');
$('.' + className).transition({
animation: t,
duration: 500,
});
}
}]);

25
public/scripts/controllers/login-controller.js
View File

@ -16,14 +16,6 @@ app.controller('loginCtr', ['$scope', '$filter', '$state', '$cookieStore', 'book
$scope.passwordRegister1 = "";
$scope.passwordRegister2 = "";
$scope.myKeyup = function(e) {
var keycode = window.event ? e.keyCode : e.which;
if (keycode == 13) {
$scope.login();
}
};
$scope.login = function() {
var autoLogin = $('.ui.checkbox.js-auto-login').checkbox('is checked');
if (!$scope.username || !$scope.password) {
@ -62,7 +54,7 @@ app.controller('loginCtr', ['$scope', '$filter', '$state', '$cookieStore', 'book
$scope.showRegister = function() {
$('.ui.modal.js-register').modal({
closable: false,
}).modal('show');
}).modal('setting', 'transition', transition()).modal('show');
$scope.emailRegister = "";
$scope.usernameRegister = "";
@ -113,4 +105,19 @@ app.controller('loginCtr', ['$scope', '$filter', '$state', '$cookieStore', 'book
toastr.error('注册失败：' + JSON.stringify(err), "错误");
});
}
var className = 'js-form-login';
$('.' + className).transition('hide');
$('.' + className).transition({
animation: transition(),
duration: 500,
});
function transition() {
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'
];
return data[parseInt(Math.random() * 1000) % data.length];
}
}]);

17
public/scripts/controllers/search-controller.js
View File

@ -199,10 +199,27 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
$scope.bookmarkCount = data.totalItems;
$scope.totalPages = Math.ceil($scope.bookmarkCount / perPageItems);
$scope.loading = false;
transition();
})
.catch((err) => {
console.log('getBookmarks err', err);
$scope.loading = false;
});
}
function transition() {
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];
var className = 'js-table-search';
$('.' + className).transition('hide');
$('.' + className).transition({
animation: t,
duration: 500,
});
}
}]);

17
public/scripts/controllers/settings-controller.js
View File

@ -76,4 +76,21 @@ app.controller('settingsCtr', ['$scope', '$stateParams', '$filter', '$state', '$
login: true,
index: 3
});
transition();
function transition() {
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];
var className = 'js-segment-settings';
$('.' + className).transition('hide');
$('.' + className).transition({
animation: t,
duration: 500,
});
}
}]);

31
public/scripts/controllers/tags-controller.js
View File

@ -15,7 +15,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
$scope.currentPage = 1;
$scope.inputPage = '';
$scope.currentTagId = ($stateParams && $stateParams.tagId) || '';
$scope.edit = false;
$scope.editMode = false;
$scope.newTag = '';
$scope.waitDelTag = {};
$scope.waitDelBookmark = {};
@ -57,6 +57,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
login: true,
index: 1
});
transition();
})
.catch((err) => {
console.log('getTags err', err);
@ -74,7 +75,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}
$scope.jumpToUrl = function(url, id) {
if (!$scope.edit) {
if (!$scope.editMode) {
$window.open(url, '_blank');
bookmarkService.clickBookmark({
id: id
@ -127,7 +128,7 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}
$scope.copy = function(id, url) {
var clipboard = new Clipboard('#tagurl'+id, {
var clipboard = new Clipboard('#tagurl' + id, {
text: function() {
return url;
}
@ -145,11 +146,13 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}
$scope.toggleMode = function() {
$scope.edit = !$scope.edit;
if (!$scope.edit) {
$scope.editMode = !$scope.editMode;
if (!$scope.editMode) {
getTags({});
} else {
$('.js-tags-table').transition('hide');
}
setTimeout(updateEditPos, 100);
updateEditPos();
}
$scope.editTag = function(tag) {
@ -323,7 +326,9 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}
if ($scope.currentTagId) {
if (!$scope.editMode) {
$scope.getBookmarks($scope.currentTagId, $scope.currentPage);
}
} else {
toastr.info('您还没有书签分类，请点击菜单栏的添加按钮进行添加', "提示");
}
@ -381,4 +386,18 @@ app.controller('tagsCtr', ['$scope', '$filter', '$window', '$stateParams', '$tim
}
}
function transition() {
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];
var className = 'js-tags-table';
$('.' + className).transition('hide');
$('.' + className).transition({
animation: t,
duration: 500,
});
}
}]);

2
public/views/advice.html
View File

@ -1,4 +1,4 @@
<div class="ui segment">
<div class="ui segment js-segment-advice">
<div class="ui form">
<div class="required field">
<label>留言分类</label>

2
public/views/home.html
View File

@ -1,4 +1,4 @@
<div class="ui segment">
<div class="ui segment js-segment-home">
<div class="ui container">
<h2 class="ui dividing header">为什么要做个网络书签</h2>
<p>每个浏览器上面都会有个书签可以供你收藏你以后可能还要用到的网址。但是这个书签有以下几个缺点我没法忍受（由于浏览器我只用Google Chrome，下面的观点我都是基于该浏览器）：</p>

7
public/views/login.html
View File

@ -1,4 +1,4 @@
<form class="ui form segment" ng-class={error:showErr}>
<form class="ui form segment js-form-login" ng-class={error:showErr}>
<div class="ui error message">
<div class="header">错误提示</div>
<p>
@ -7,14 +7,14 @@
<div class="required field">
<label>用户名</label>
<div class="ui icon input">
<input type="text" ng-model="username" ng-keyup="myKeyup($event)">
<input type="text" ng-model="username" ng-keypress="($event.which === 13)?login():0">
<i class="user icon"></i>
</div>
</div>
<div class="required field">
<label>密码</label>
<div class="ui icon input">
<input type="password" ng-model="password" ng-keyup="myKeyup($event)">
<input type="password" ng-model="password" ng-keypress="($event.which === 13)?login():0">
<i class="lock icon"></i>
</div>
</div>
@ -32,6 +32,7 @@
</span>
</div>
</form>
<div class="ui modal js-register">
<div class="header">
账号注册

2
public/views/menus.html
View File

@ -45,6 +45,6 @@
</div>
</div>
<div class="ui huge menu js-not-login-in" ng-if="!login">
<a class="item" ng-class="{selected:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
<a class="item" ng-class="{selected:$index==selectNotLoginIndex}" ui-sref="{{ menu.uiSref}}" ui-sref-opts="{reload: true}" ng-repeat="menu in notLoginMenus">{{ menu.title}}</a>
</div>
</div>

2
public/views/search.html
View File

@ -115,7 +115,7 @@
</div>
</div>
</div>
<table class="ui celled table" ng-show="!loading">
<table class="ui celled table js-table-search" ng-show="!loading">
<thead>
<tr>
<th>标题</th>

2
public/views/settings.html
View File

@ -1,4 +1,4 @@
<div class="ui segment">
<div class="ui segment js-segment-settings">
<div class="ui grid">
<div class="four wide stretched column">
<div class="ui secondary vertical pointing menu">

13
public/views/tags.html
View File

@ -1,15 +1,14 @@
<div class="ui segment js-tags">
<div class="ui container" ng-show="!edit">
<div class="ui container" ng-show="!editMode">
<div class="ui grid">
<div class="two wide column" ng-class="" ng-mouseover="" ng-mouseleave="" ng-repeat="tag in tags">
<div class="ui small label" ng-class="{green:tag.bookmarkClicked}" ng-click="getBookmarks(tag.id, 1)">
{{ tag.name }}
({{ tag.cnt || 0 }})
{{ tag.name }} ({{ tag.cnt || 0 }})
</div>
</div>
</div>
</div>
<div class="ui container" ng-show="edit" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
<div class="ui container" ng-show="editMode" ng-mousedown="storeTagIndex()" ng-mouseup="updateTagIndex()">
<p>提示：拖拽分类即可进行排序</p>
<div class="ui six stackable cards" sv-root sv-part="tags">
<div class="card" ng-repeat="tag in tags" sv-element>
@ -41,14 +40,14 @@
</div>
</div>
</div>
<div style="width:22px;height:22px;" class="js-edit" ng-click="toggleMode()" title="{{edit ? '退出编辑模式' : '点我进入编辑模式'}}">
<img class="ui ui middle aligned tiny image" ng-src="./images/{{ edit ? 'back' : 'edit'}}.png" ng-show="!loadTags">
<div style="width:22px;height:22px;" class="js-edit" ng-click="toggleMode()" title="{{editMode ? '退出编辑模式' : '点我进入编辑模式'}}">
<img class="ui ui middle aligned tiny image" ng-src="./images/{{ editMode ? 'back' : 'edit'}}.png" ng-show="!loadTags">
</div>
</div>
<div class="ui huge text centered inline loader" ng-class="{active:loadBookmarks, disabled: !loadBookmarks}">
正在加载中...
</div>
<table class="ui celled table" ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks && !edit">
<table class="ui celled table js-tags-table"ng-if="bookmarkCount > 0" style="margin-top:-14px;" ng-show="!loadBookmarks && !editMode">
<thead>
<tr>
<th>标题</th>