添加书签界面交互方式更新

This commit is contained in:
luchenqun 2017-06-15 19:00:05 +08:00
parent 8889c2d654
commit 229cd0be8d
2 changed files with 74 additions and 16 deletions

View File

@ -1,6 +1,7 @@
app.controller('editCtr', ['$scope', '$state', '$timeout', '$document', 'bookmarkService', 'pubSubService', 'dataService', function($scope, $state, $timeout, $document, bookmarkService, pubSubService, dataService) {
app.controller('editCtr', ['$scope', '$state', '$timeout', '$document', 'ngDialog', 'bookmarkService', 'pubSubService', 'dataService', function($scope, $state, $timeout, $document, ngDialog, bookmarkService, pubSubService, dataService) {
console.log("Hello editCtr");
var maxSelections = 3;
var dialog = null;
init();
$scope.$watch('url', function(newUrl, oldUrl, scope) {
@ -139,6 +140,46 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', '$document', 'bookmar
}
}
$scope.showAddTag = function() {
if ($scope.tags.length < 30) {
console.log('showAddTag..........')
$scope.newTag = "";
dialog = ngDialog.open({
template: './views/dialog-add-tag.html',
className: 'ngdialog-theme-default',
scope: $scope
});
} else {
toastr.error('标签个数总数不能超过30个不允许再添加新分类如有需求请联系管理员。', "提示");
}
}
$scope.addTag = function(tag) {
console.log(tag);
return;
if ($scope.tags.length >= 30) {
toastr.error('标签个数总数不能超过30个不允许再添加新分类如有需求请联系管理员。', "提示");
return;
}
tag = tag.replace(/(^\s*)|(\s*$)/g, '').replace(/\s+/g, ' '); // 去除前后空格,多个空格转为一个空格;
if (tag) {
ngDialog.close(dialog);
var tags = [];
tags.push(tag);
bookmarkService.addTags(tags)
.then((data) => {
toastr.success('[ ' + tag + ' ]插入分类成功!将自动更新分类信息', "提示");
getTags({});
})
.catch((err) => {
toastr.warning('[ ' + tag + ' ]插入分类失败:' + JSON.stringify(err), "提示");
});
} else {
toastr.warning('您可能没有输入分类或者输入的分类有误', "提示");
}
}
pubSubService.subscribe('MenuCtr.showAddBookmarkMoadl', $scope, function(event, params) {
console.log('subscribe MenuCtr.showAddBookmarkMoadl', params);
$('.ui.modal.js-add-bookmark').modal({
@ -241,6 +282,12 @@ app.controller('editCtr', ['$scope', '$state', '$timeout', '$document', 'bookmar
if (a.last_use > b.last_use) return -1;
return 1;
})
data.forEach((tag) => {
tag.clicked = false;
})
if ($scope.add && data.length >= 1) {
data[0].clicked = true;
}
$scope.tags = data;
initJsTags();
$('.ui.modal.js-add-bookmark .ui.dropdown').removeClass('loading');

View File

@ -5,15 +5,19 @@
</div>
<div class="content">
<div class="ui form">
<div class="required field" ng-class="{error:urlError}">
<label>书签链接</label>
<input type="text" placeholder="输粘贴网页地址http://mybookmark.cn/" ng-model="url">
</div>
<div class="required field" ng-class="{error:titleError}">
<label>书签标题</label>
<input type="text" placeholder="" ng-model="title">
</div>
<div class="required field">
<div class="fields">
<div class="required eight wide field" ng-class="{error:urlError}">
<label>书签链接</label>
<input type="text" placeholder="输粘贴网页地址http://mybookmark.cn/" ng-model="url">
</div>
<div class="required eight wide field" ng-class="{error:titleError}">
<label>书签标题</label>
<input type="text" placeholder="" ng-model="title">
</div>
</div>
</div>
<!-- <div class="required field">
<label>已有书签分类</label>
<div class="fields">
<div class="eight wide field" ng-class="{error:tagsError }">
@ -29,16 +33,23 @@
</div>
</div>
</div>
</div> -->
<div class="required field">
<label>已有书签分类选择
<span title="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友情提示:&#10;1、添加新书签根据使用经验默认会选择最后一次使用分类。&#10;2、如果不是的直接去选择其他的就好系统会自动取消。&#10;3、如果你想同时选默认与其他的分类你选了其他分类之后再来选中取消的默认分类即可。">
<i class="info circle icon"></i>
</span>
</label>
<div class="ui label" style="margin:3px 10px 8px 0px;cursor:default;" ng-class="{green:tag.clicked}" ng-repeat="tag in tags">{{ tag.name }}</div>
<div class="ui label" style="margin:3px 10px 8px 0px;cursor:default;" title="添加新分类" ng-click="showAddTag()">
<i style="margin-left:10px;" class="plus icon"></i>
</div>
</div>
<div class="field">
<label>描述</label>
<div
style="border-radius:4px;border:1px solid #DEDEDE;min-height:88px;"
name="text"
ng-model="description"
required
medium-editor
bind-options="{'placeholder': {text: '可以是网站的说明,也可以备忘一下账号或者摘抄内容,就算公开你的链接,这个也只有自己能在详情里面看到'},
<div style="border-radius:4px;border:1px solid #DEDEDE;min-height:88px;" name="text" ng-model="description" required medium-editor bind-options="{'placeholder': {text: '可以是网站的说明也可以备忘一下账号或者摘抄内容就算公开你的链接这个也只有自己能在详情里面看到'},
'buttons': ['bold', 'italic', 'underline', 'header1', 'header2', 'quote', 'orderedlist', 'unorderedlist']}"></div>
</div>
<div class="field">