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({
forceSelection: false,
maxSelections: maxSelections,
action: 'hide',
onChange: function(value, text, $choice) {
var selectedTags = $('.ui.modal.js-add-bookmark .ui.dropdown').dropdown('get value');
$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) {
console.log("Hello searchCtr...", $stateParams);
$scope.bookmarks = []; // 书签数据
$scope.showSearch = false; // 搜索对话框
$scope.showSearch = false; //
$scope.showTags = false; //
$scope.searchWord = ($stateParams && $stateParams.searchWord) || ''
$scope.dateBegin = '';
$scope.dateEnd = '';
$scope.dateCreateBegin = '';
$scope.dateCreateEnd = '';
$scope.dateClickBegin = '';
$scope.dateClickEnd = '';
$scope.clickCount = '';
$scope.username = '';
$scope.userRange = '';
$scope.bookmarkCount = 0
$scope.bookmarkCount = 0;
var searchParams = {
searchWord: $scope.searchWord,
}
@ -42,6 +46,23 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
searchBookmarks(params)
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) {
bookmarkService.searchBookmarks(params)
@ -55,34 +76,4 @@ app.controller('searchCtr', ['$scope', '$state', '$stateParams', '$filter', '$wi
})
.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 {
restrict: 'A',
link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-create-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;
}
date: date
},
onChange: function(date, text) {
console.log($scope.username);
$('.ui.calendar.js-date-create-begin :input').val(text).trigger("change");
},
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({
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;
}
date: date
},
onChange: function(date, text) {
$('.ui.calendar.js-date-create-end :input').val(text).trigger("change");
},
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 {
restrict: 'A',
link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-click-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;
}
date: date
},
onChange: function(date, text) {
$('.ui.calendar.js-date-click-begin :input').val(text).trigger("change");
},
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('jsDataClickEndInit', function($compile) {
app.directive('jsDropdownUserRangeInit', function($compile) {
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
$('.ui.calendar.js-date-click-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;
}
$('.ui.dropdown.js-user-range').dropdown({
onChange: function(value, text, $choice) {
$scope.showTags = (value === '1');
console.log(value, text, $choice, $scope.showTags, $scope.username);
$scope.$apply();
},
startCalendar: $('.ui.calendar.js-date-click-begin')
});
},
};

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

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

66
public/views/search.html
View File

@ -7,30 +7,28 @@
<span ng-click="showSearch = !showSearch">搜索工具</span>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui dropdown" js-dropdown-init>
<div class="text">自己书签</div>
<div class="ui dropdown js-user-range" js-dropdown-user-range-init>
<div class="text" data-value="1">搜索范围</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">自己书签</div>
<div class="item">全站书签</div>
<div class="active item" data-value="1">自己书签</div>
<div class="item" data-value="2">全站书签</div>
</div>
</div>
</div>
<div class="two wide column" ng-show="showSearch">
<div class="ui dropdown item" js-dropdown-init>
<div class="three wide column" ng-show="showSearch">
<div class="ui dropdown item js-create-date" js-data-create-init>
<div class="text">创建时间不限</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">创建时间设定</div>
<div class="item">时间不限</div>
<div class="item">一周内</div>
<div class="item">一月内</div>
<div class="item">一年内</div>
<div class="active item" data-value='0'>时间不限</div>
<div class="item" data-value='7'>一周内</div>
<div class="item" data-value='30'>一月内</div>
<div class="item" data-value='365'>一年内</div>
<div class="divider"></div>
<div class="header">自定义</div>
<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">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateCreateBegin">
@ -38,7 +36,7 @@
</div>
</div>
<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">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateCreateEnd">
@ -46,25 +44,24 @@
</div>
</div>
<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 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>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">点击时间设定</div>
<div class="item">时间不限</div>
<div class="item">一周内</div>
<div class="item">一月内</div>
<div class="item">一年内</div>
<div class="active item" data-value='0'>时间不限</div>
<div class="item" data-value='7'>一周内</div>
<div class="item" data-value='30'>一月内</div>
<div class="item" data-value='365'>一年内</div>
<div class="divider"></div>
<div class="header">自定义</div>
<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">
<i class="calendar icon"></i>
<input type="text" placeholder="开始日期" ng-model="dateClickBegin">
@ -72,7 +69,7 @@
</div>
</div>
<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">
<i class="calendar icon"></i>
<input type="text" placeholder="结束日期" ng-model="dateClickEnd">
@ -80,17 +77,27 @@
</div>
</div>
<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 class="two wide column" ng-show="showSearch">
<div class="ui transparent icon input">
<div class="three wide column" ng-show="showSearch">
<div class="ui transparent icon input" ng-show="!showTags">
<input class="prompt" type="text" placeholder="用户账号" ng-model="username">
</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 class="four wide column" ng-show="showSearch">
<div class="two wide column" ng-show="showSearch">
<div class="ui transparent input">
<input type="text" placeholder="标题，链接..." ng-model="searchWord">
</div>
@ -99,11 +106,10 @@
<i class="search icon" title="搜索" ng-click="search()"></i>
</div>
<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" >
<span ng-click="showSearch = !showSearch" >收起</span>
<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>
</div>
</div>
<table class="ui celled table">
<thead>
<tr>