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

完成搜索UI部分

This commit is contained in:
luchenqun 2016-11-17 23:05:03 +08:00
parent ec797dea36
commit 20b06fce23
5 changed files with 113 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -160,6 +160,7 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', 'bookmarkService', 'p
$('.ui.dropdown').dropdown({ $('.ui.dropdown').dropdown({
forceSelection: false, forceSelection: false,
maxSelections: maxSelections, maxSelections: maxSelections,
action: 'hide',
onChange: function(value, text, $choice) { onChange: function(value, text, $choice) {
var selectedTags = $('.ui.modal.js-add-bookmark .ui.dropdown').dropdown('get value'); var selectedTags = $('.ui.modal.js-add-bookmark .ui.dropdown').dropdown('get value');
$timeout(function() { $timeout(function() {

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

@ -1,14 +1,18 @@
app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, bookmarkService, pubSubService) { app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$window', '$timeout', 'bookmarkService', 'pubSubService', function($scope, $state, $stateParams, $filter, $window, $timeout, bookmarkService, pubSubService) {
console.log("Hello searchCtr...", $stateParams); console.log("Hello searchCtr...", $stateParams);
$scope.bookmarks = []; // 书签数据 $scope.bookmarks = []; // 书签数据
$scope.showSearch = false; // 搜索对话框 $scope.showSearch = false; //
$scope.showTags = false; //
$scope.searchWord = ($stateParams && $stateParams.searchWord) || '' $scope.searchWord = ($stateParams && $stateParams.searchWord) || ''
$scope.dateBegin = ''; $scope.dateCreateBegin = '';
$scope.dateEnd = ''; $scope.dateCreateEnd = '';
$scope.dateClickBegin = '';
$scope.dateClickEnd = '';
$scope.clickCount = ''; $scope.clickCount = '';
$scope.username = ''; $scope.username = '';
$scope.userRange = ''; $scope.userRange = '';
$scope.bookmarkCount = 0 $scope.bookmarkCount = 0;
var searchParams = { var searchParams = {
searchWord: $scope.searchWord, searchWord: $scope.searchWord,
} }
@ -42,6 +46,23 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
searchBookmarks(params) searchBookmarks(params)
console.log('search..', $scope.searchWord, $scope.dateBegin, $scope.clickCount, $scope.username, $scope.userRange) console.log('search..', $scope.searchWord, $scope.dateBegin, $scope.clickCount, $scope.username, $scope.userRange)
} }
$scope.updateCreateDate = function() {
console.log($scope.dateCreateBegin, $scope.dateCreateEnd);
if ($scope.dateCreateBegin && $scope.dateCreateEnd) {
$('.js-create-date').dropdown('hide');
$('.js-create-date').dropdown('clear');
$('.js-create-date .text').text($scope.dateCreateBegin + " 至 " + $scope.dateCreateEnd).removeClass('default');
}
}
$scope.updateClickDate = function() {
console.log($scope.dateClickBegin, $scope.dateClickEnd);
if ($scope.dateClickBegin && $scope.dateClickEnd) {
$('.js-click-date').dropdown('hide');
$('.js-click-date').dropdown('clear');
$('.js-click-date .text').text($scope.dateClickBegin + " 至 " + $scope.dateClickEnd).removeClass('default');
}
}
function searchBookmarks(params) { function searchBookmarks(params) {
bookmarkService.searchBookmarks(params) bookmarkService.searchBookmarks(params)
@ -55,34 +76,4 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
}) })
.catch((err) => console.log('getBookmarks err', err)); .catch((err) => console.log('getBookmarks err', err));
} }
$scope.$on('viewContentLoaded', function(elementRenderFinishedEvent) {
$('.ui.dropdown').dropdown();
$('.ui.calendar.js-date-begin').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
},
endCalendar: $('.ui.calendar.js-date-end')
});
$('.ui.calendar.js-date-end').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
},
startCalendar: $('.ui.calendar.js-date-begin')
});
});
}]); }]);

86
public/scripts/directives/js-init-directive.js
View File

@ -1,84 +1,82 @@
app.directive('jsDataCreateBeginInit', function($compile) { function date(date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
};
app.directive('jsDataCreateInit', function($compile) {
return { return {
restrict: 'A', restrict: 'A',
link: function($scope, $element, $attrs) { link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-create-begin').calendar({ $('.ui.calendar.js-date-create-begin').calendar({
type: 'date', type: 'date',
formatter: { formatter: {
date: function(date, settings) { date: date
if (!date) return ''; },
var day = date.getDate(); onChange: function(date, text) {
var month = date.getMonth() + 1; console.log($scope.username);
var year = date.getFullYear(); $('.ui.calendar.js-date-create-begin :input').val(text).trigger("change");
return year + '/' + month + '/' + day;
}
}, },
endCalendar: $('.ui.calendar.js-date-create-end') endCalendar: $('.ui.calendar.js-date-create-end')
}); });
},
};
});
app.directive('jsDataCreateEndInit', function($compile) {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-create-end').calendar({ $('.ui.calendar.js-date-create-end').calendar({
type: 'date', type: 'date',
formatter: { formatter: {
date: function(date, settings) { date: date
if (!date) return ''; },
var day = date.getDate(); onChange: function(date, text) {
var month = date.getMonth() + 1; $('.ui.calendar.js-date-create-end :input').val(text).trigger("change");
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
}, },
startCalendar: $('.ui.calendar.js-date-create-begin') startCalendar: $('.ui.calendar.js-date-create-begin')
}); });
$('.js-create-date').dropdown('set value', 0);
}, },
}; };
}); });
app.directive('jsDataClickBeginInit', function($compile) { app.directive('jsDataClickInit', function($compile) {
return { return {
restrict: 'A', restrict: 'A',
link: function($scope, $element, $attrs) { link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-click-begin').calendar({ $('.ui.calendar.js-date-click-begin').calendar({
type: 'date', type: 'date',
formatter: { formatter: {
date: function(date, settings) { date: date
if (!date) return ''; },
var day = date.getDate(); onChange: function(date, text) {
var month = date.getMonth() + 1; $('.ui.calendar.js-date-click-begin :input').val(text).trigger("change");
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
}, },
endCalendar: $('.ui.calendar.js-date-click-end') endCalendar: $('.ui.calendar.js-date-click-end')
}); });
$('.ui.calendar.js-date-click-end').calendar({
type: 'date',
formatter: {
date: date
},
onChange: function(date, text) {
$('.ui.calendar.js-date-click-end :input').val(text).trigger("change");
},
startCalendar: $('.ui.calendar.js-date-click-begin')
});
$('.js-click-date').dropdown('set value', 0);
}, },
}; };
}); });
app.directive('jsDropdownUserRangeInit', function($compile) {
app.directive('jsDataClickEndInit', function($compile) {
return { return {
restrict: 'A', restrict: 'A',
link: function($scope, $element, $attrs) { link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-click-end').calendar({ $('.ui.dropdown.js-user-range').dropdown({
type: 'date', onChange: function(value, text, $choice) {
formatter: { $scope.showTags = (value === '1');
date: function(date, settings) { console.log(value, text, $choice, $scope.showTags, $scope.username);
if (!date) return ''; $scope.$apply();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '/' + month + '/' + day;
}
}, },
startCalendar: $('.ui.calendar.js-date-click-begin')
}); });
}, },
}; };

12
public/scripts/services/data-service.js
View File

@ -1,12 +1,16 @@
app.factory('dataService', [function() { app.factory('dataService', [function() {
var service = { const service = {
Enum: {
UserSelf: 1,
},
loginParams: function() { loginParams: function() {
return { return {
username:'', username: '',
password:'', password: '',
autoLogin:true, autoLogin: true,
}; };
}, },
}; };
return service; return service;

68
public/views/search.html
View File

@ -3,34 +3,32 @@
共为您找到相关书签约{{bookmarkCount}}个 共为您找到相关书签约{{bookmarkCount}}个
</div> </div>
<div class="left floated right aligned two wide column" ng-show="!showSearch"> <div class="left floated right aligned two wide column" ng-show="!showSearch">
<img class="ui ui middle aligned tiny image" ng-src="./images/cocktail.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch"> <img class="ui ui middle aligned tiny image" ng-src="./images/cocktail.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch">
<span ng-click="showSearch = !showSearch">搜索工具</span> <span ng-click="showSearch = !showSearch">搜索工具</span>
</div> </div>
<div class="two wide column" ng-show="showSearch"> <div class="two wide column" ng-show="showSearch">
<div class="ui dropdown" js-dropdown-init> <div class="ui dropdown js-user-range" js-dropdown-user-range-init>
<div class="text">自己书签</div> <div class="text" data-value="1">搜索范围</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<div class="item">自己书签</div> <div class="active item" data-value="1">自己书签</div>
<div class="item">全站书签</div> <div class="item" data-value="2">全站书签</div>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column" ng-show="showSearch">
<div class="two wide column" ng-show="showSearch"> <div class="ui dropdown item js-create-date" js-data-create-init>
<div class="ui dropdown item" js-dropdown-init>
<div class="text">创建时间不限</div> <div class="text">创建时间不限</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<div class="header">创建时间设定</div> <div class="active item" data-value='0'>时间不限</div>
<div class="item">时间不限</div> <div class="item" data-value='7'>一周内</div>
<div class="item">一周内</div> <div class="item" data-value='30'>一月内</div>
<div class="item">一月内</div> <div class="item" data-value='365'>一年内</div>
<div class="item">一年内</div>
<div class="divider"></div> <div class="divider"></div>
<div class="header">自定义</div> <div class="header">自定义</div>
<div class="ui transparent input"> <div class="ui transparent input">
<div class="ui calendar js-date-create-begin" js-data-create-begin-init> <div class="ui calendar js-date-create-begin">
<div class="ui transparent input left icon"> <div class="ui transparent input left icon">
<i class="calendar icon"></i> <i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateCreateBegin"> <input type="text" placeholder="开始日期" ng-model="dateCreateBegin">
@ -38,7 +36,7 @@
</div> </div>
</div> </div>
<div class="ui transparent input"> <div class="ui transparent input">
<div class="ui calendar js-date-create-end" js-data-create-end-init> <div class="ui calendar js-date-create-end">
<div class="ui transparent input left icon"> <div class="ui transparent input left icon">
<i class="calendar icon"></i> <i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateCreateEnd"> <input type="text" placeholder="结束日期" ng-model="dateCreateEnd">
@ -46,25 +44,24 @@
</div> </div>
</div> </div>
<div class="ui transparent input"> <div class="ui transparent input">
<div class="ui basic button">确定</div> <div class="ui basic button" ng-click="updateCreateDate()">确定</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="three wide column" ng-show="showSearch"> <div class="three wide column" ng-show="showSearch">
<div class="ui dropdown item" js-dropdown-init> <div class="ui dropdown item js-click-date" js-data-click-init>
<div class="text">点击时间不限</div> <div class="text">点击时间不限</div>
<i class="dropdown icon"></i> <i class="dropdown icon"></i>
<div class="menu"> <div class="menu">
<div class="header">点击时间设定</div> <div class="active item" data-value='0'>时间不限</div>
<div class="item">时间不限</div> <div class="item" data-value='7'>一周内</div>
<div class="item">一周内</div> <div class="item" data-value='30'>一月内</div>
<div class="item">一月内</div> <div class="item" data-value='365'>一年内</div>
<div class="item">一年内</div>
<div class="divider"></div> <div class="divider"></div>
<div class="header">自定义</div> <div class="header">自定义</div>
<div class="ui transparent input"> <div class="ui transparent input">
<div class="ui calendar js-date-click-begin" js-data-click-begin-init> <div class="ui calendar js-date-click-begin">
<div class="ui transparent input left icon"> <div class="ui transparent input left icon">
<i class="calendar icon"></i> <i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateClickBegin"> <input type="text" placeholder="开始日期" ng-model="dateClickBegin">
@ -72,7 +69,7 @@
</div> </div>
</div> </div>
<div class="ui transparent input"> <div class="ui transparent input">
<div class="ui calendar js-date-click-end" js-data-click-end-init> <div class="ui calendar js-date-click-end">
<div class="ui transparent input left icon"> <div class="ui transparent input left icon">
<i class="calendar icon"></i> <i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateClickEnd"> <input type="text" placeholder="结束日期" ng-model="dateClickEnd">
@ -80,17 +77,27 @@
</div> </div>
</div> </div>
<div class="ui transparent input"> <div class="ui transparent input">
<div class="ui basic button">确定</div> <div class="ui basic button" ng-click="updateClickDate()">确定</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="two wide column" ng-show="showSearch"> <div class="three wide column" ng-show="showSearch">
<div class="ui transparent icon input"> <div class="ui transparent icon input" ng-show="!showTags">
<input class="prompt" type="text" placeholder="用户账号" ng-model="username"> <input class="prompt" type="text" placeholder="用户账号" ng-model="username">
</div> </div>
<select class="ui fluid search dropdown" multiple="" ng-show="showTags">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
</select>
</div> </div>
<div class="four wide column" ng-show="showSearch"> <div class="two wide column" ng-show="showSearch">
<div class="ui transparent input"> <div class="ui transparent input">
<input type="text" placeholder="标题，链接..." ng-model="searchWord"> <input type="text" placeholder="标题，链接..." ng-model="searchWord">
</div> </div>
@ -99,11 +106,10 @@
<i class="search icon" title="搜索" ng-click="search()"></i> <i class="search icon" title="搜索" ng-click="search()"></i>
</div> </div>
<div class="left floated right aligned two wide column" ng-show="showSearch"> <div class="left floated right aligned two wide column" ng-show="showSearch">
<img class="ui ui middle aligned tiny image" ng-src="./images/hide.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch" > <img class="ui ui middle aligned tiny image" ng-src="./images/hide.png" style="width:16px;height:16px" ng-click="showSearch = !showSearch">
<span ng-click="showSearch = !showSearch" >收起</span> <span ng-click="showSearch = !showSearch">收起</span>
</div> </div>
</div> </div>
<table class="ui celled table"> <table class="ui celled table">
<thead> <thead>
<tr> <tr>