Skip to content

Commit

Permalink
Finishing touches
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArthurianX
ArthurianX committed Oct 23, 2015
1 parent 35a591d commit 1ed7dd8
Show file tree
Hide file tree
Showing 9 changed files with 229 additions and 41 deletions.
32 changes: 28 additions & 4 deletions angular-tagscategorizer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,15 @@
padding: 5px 5px 0px 5px;
font-size: 1.2em;
}
.ar-tags-categorizer .groups-list .remove-group.confirm {
padding: 0 7px 0 10px;
background-color: rgba(220, 20, 60, 0.1);
}

.ar-tags-categorizer .groups-list .remove-group.confirm i {
color: mediumseagreen;
}

.ar-tags-categorizer .groups-list .edit-group {
padding: 5px 2px 0px 5px;
font-size: 1.2em;
Expand Down Expand Up @@ -156,10 +165,6 @@
background-color: #f1f1f1;
padding: 10px 5px 10px 15px;
}
.ar-tags-categorizer .bag .title.editing {
border-top:2px solid mediumseagreen;
}


.ar-tags-categorizer .add-group {
background-color: #f1f1f1;
Expand All @@ -172,6 +177,10 @@
padding-left: 5px;
}

.ar-tags-categorizer .add-group input.ng-invalid-pattern {
border: 2px solid rgba(220, 20, 60, 0.2);
}

.ar-tags-categorizer .add-group button {
outline: none;
float: right;
Expand All @@ -184,4 +193,19 @@
font-size: 1.2em;
}

.ar-tags-categorizer .add-group button:disabled i {
color: #777777;
}

.ar-tags-categorizer .bag .title .confirm-deletion {
padding: 0 7px 0 10px;
background-color: rgba(220, 20, 60, 0.1);
margin: 0 7px 0 0px;
}

.ar-tags-categorizer .bag .tags.confirm-deletion .tag {
background-color: #f21c0a;
border-color: #f21c0a;
opacity: 0.65;
}

43 changes: 36 additions & 7 deletions angular-tagscategorizer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,21 @@
<div class="groups-list col-md-6">

<div class="add-group">
<form name="groupName">

<input type="text"
ng-model="newGroup"
placeholder="Add new group"
ng-keypress="checkAddNew($event)"
ng-pattern="nameRx"
name="gName">
<button ng-click="addNewGroup()"
ng-disabled="groupName.gName.$error.pattern">
<i class="fa fa-plus"></i>
</button>

</form>

<input type="text" ng-model="newGroup" placeholder="Add new group" ng-keypress="checkAddNew($event)">
<button ng-click="addNewGroup()"><i class="fa fa-plus"></i></button>
</div>

<div class="bags" ng-init="makeVisible(0)">
Expand All @@ -18,22 +30,39 @@
data-gid="{{group.id}}"
data-index="{{$index}}">
<!--ng-init="hookGroups($last)"-->
<div class="title clearfix"
ng-class="{'editing': renameGroup[$index]}">
<div class="title clearfix">

<span ng-if="!renameGroup[$index]">{{group.name}}</span>
<input type="text" class="rename" ng-model="group.name" ng-click="stopEvent($event)" ng-if="renameGroup[$index] && group.open">
<input type="text" class="rename"
ng-model="group.name"
ng-click="stopEvent($event)"
ng-keypress="checkRenameGroup($event, $index)"
ng-if="renameGroup[$index] && group.open">
<div class="pull-right">
<span class="edit-group" ng-if="group.open" ng-click="editGroup($event, $index)"><i class="fa fa-pencil-square-o"></i></span>
<span class="remove-group" ng-if="group.open" ng-click="deleteTagGroup($event, $index)"><i class="fa fa-times"></i></span>

<span class="remove-group confirm"
ng-if="deleteConf && group.open"
ng-click="deleteTagGroup($event, $index, true)">
<i class="fa fa-check"></i>
</span>
<span class="remove-group"
ng-class="{'confirm-deletion': deleteConf > 0}"
ng-if="group.open"
ng-click="deleteTagGroup($event, $index)">
<i class="fa fa-times"></i>
</span>

<button type="button" class="btn btn-info nr-tags">{{group.tags.length}} <i class="fa fa-tags"></i></button>

<i class="arrow glyphicon" ng-class="{'glyphicon-chevron-down': group.open, 'glyphicon-chevron-right': !group.open}"></i>
</div>

</div>

<div class="tags clearfix"
ng-show="group.open">
ng-show="group.open"
ng-class="{'confirm-deletion': deleteConf > 0}">

<span class="tag"
ng-repeat="tag in group.tags track by $index"
Expand Down
31 changes: 26 additions & 5 deletions angular-tagscategorizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@ angular.module('tagsCategorizer')
$scope.newGroup = '';
$scope.renameGroup = [];

// Input Validation
$scope.nameRx = /^[a-zA-Z0-9 ]+$/;

//Actions
$scope.addNewGroup = function(){
if ($scope.newGroup.length > 3) {
if (($scope.newGroup !== undefined)&&($scope.newGroup.length > 3)) {
//$scope.tagsGroups.unshift({name: $scope.newGroup, tags: [], short: $scope.newGroup.toLowerCase()});
$scope.addGroup({group: {name: $scope.newGroup, tags: [], short: $scope.newGroup.toLowerCase()}});
$scope.newGroup = '';
Expand All @@ -43,6 +46,12 @@ angular.module('tagsCategorizer')
}
};

$scope.checkRenameGroup = function(event, index){
if (event.keyCode == 13) {
$scope.editGroup(event, index);
}
};

$scope.editGroup = function(e, index){
e.preventDefault();
e.stopPropagation();
Expand All @@ -60,10 +69,20 @@ angular.module('tagsCategorizer')
e.preventDefault();
};

$scope.deleteTagGroup = function(e, index){
$scope.ungroupedTags = $scope.ungroupedTags.concat($scope.tagsGroups[index].tags);
$scope.tagsGroups.splice(index, 1);
$scope.deleteGroup($scope.tagsGroups[index]);
$scope.deleteConf = 0;
$scope.deleteTagGroup = function(e, index, checker){
$scope.deleteConf += 1;

if ($scope.deleteConf >= 2 && checker) {
$scope.ungroupedTags = $scope.ungroupedTags.concat($scope.tagsGroups[index].tags);
$scope.tagsGroups.splice(index, 1);
$scope.deleteGroup($scope.tagsGroups[index]);
$scope.deleteConf = 0;
}

if ($scope.deleteConf >= 2 && !checker) {
$scope.deleteConf = 0;
}
};

$scope.makeVisible = function(index) {
Expand Down Expand Up @@ -135,6 +154,8 @@ angular.module('tagsCategorizer')

}],
link: function(scope, element, attrs) {

// Main Logic
var currEl;

var applyToModel = function(el, target, source, sibling) {
Expand Down
11 changes: 11 additions & 0 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,20 @@ angular.module('app').controller('DemoCtrl',function($scope,$http, dragulaServic

}, 1500);

var checkDuplicates = function(groups, group){

for (var i = 0; i < groups.length; i++) {
if (groups[i].name == group.name) {
group.name +="1";
}
};

};

$scope.addGroupExt = function(group){
group.id = Math.round(Math.random() * (100 - 10) + 10);
console.log('Added goup', group);
checkDuplicates($scope.tagsGroups, group);
$timeout(function(){
$scope.tagsGroups.unshift(group);
}, 50);
Expand Down
32 changes: 28 additions & 4 deletions dist/angular-tagscategorizer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,15 @@
padding: 5px 5px 0px 5px;
font-size: 1.2em;
}
.ar-tags-categorizer .groups-list .remove-group.confirm {
padding: 0 7px 0 10px;
background-color: rgba(220, 20, 60, 0.1);
}

.ar-tags-categorizer .groups-list .remove-group.confirm i {
color: mediumseagreen;
}

.ar-tags-categorizer .groups-list .edit-group {
padding: 5px 2px 0px 5px;
font-size: 1.2em;
Expand Down Expand Up @@ -156,10 +165,6 @@
background-color: #f1f1f1;
padding: 10px 5px 10px 15px;
}
.ar-tags-categorizer .bag .title.editing {
border-top:2px solid mediumseagreen;
}


.ar-tags-categorizer .add-group {
background-color: #f1f1f1;
Expand All @@ -172,6 +177,10 @@
padding-left: 5px;
}

.ar-tags-categorizer .add-group input.ng-invalid-pattern {
border: 2px solid rgba(220, 20, 60, 0.2);
}

.ar-tags-categorizer .add-group button {
outline: none;
float: right;
Expand All @@ -184,4 +193,19 @@
font-size: 1.2em;
}

.ar-tags-categorizer .add-group button:disabled i {
color: #777777;
}

.ar-tags-categorizer .bag .title .confirm-deletion {
padding: 0 7px 0 10px;
background-color: rgba(220, 20, 60, 0.1);
margin: 0 7px 0 0px;
}

.ar-tags-categorizer .bag .tags.confirm-deletion .tag {
background-color: #f21c0a;
border-color: #f21c0a;
opacity: 0.65;
}

74 changes: 62 additions & 12 deletions dist/angular-tagscategorizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,12 @@ angular.module('tagsCategorizer')
$scope.newGroup = '';
$scope.renameGroup = [];

// Input Validation
$scope.nameRx = /^[a-zA-Z0-9 ]+$/;

//Actions
$scope.addNewGroup = function(){
if ($scope.newGroup.length > 3) {
if (($scope.newGroup !== undefined)&&($scope.newGroup.length > 3)) {
//$scope.tagsGroups.unshift({name: $scope.newGroup, tags: [], short: $scope.newGroup.toLowerCase()});
$scope.addGroup({group: {name: $scope.newGroup, tags: [], short: $scope.newGroup.toLowerCase()}});
$scope.newGroup = '';
Expand All @@ -43,6 +46,12 @@ angular.module('tagsCategorizer')
}
};

$scope.checkRenameGroup = function(event, index){
if (event.keyCode == 13) {
$scope.editGroup(event, index);
}
};

$scope.editGroup = function(e, index){
e.preventDefault();
e.stopPropagation();
Expand All @@ -60,10 +69,20 @@ angular.module('tagsCategorizer')
e.preventDefault();
};

$scope.deleteTagGroup = function(e, index){
$scope.ungroupedTags = $scope.ungroupedTags.concat($scope.tagsGroups[index].tags);
$scope.tagsGroups.splice(index, 1);
$scope.deleteGroup($scope.tagsGroups[index]);
$scope.deleteConf = 0;
$scope.deleteTagGroup = function(e, index, checker){
$scope.deleteConf += 1;

if ($scope.deleteConf >= 2 && checker) {
$scope.ungroupedTags = $scope.ungroupedTags.concat($scope.tagsGroups[index].tags);
$scope.tagsGroups.splice(index, 1);
$scope.deleteGroup($scope.tagsGroups[index]);
$scope.deleteConf = 0;
}

if ($scope.deleteConf >= 2 && !checker) {
$scope.deleteConf = 0;
}
};

$scope.makeVisible = function(index) {
Expand Down Expand Up @@ -135,6 +154,8 @@ angular.module('tagsCategorizer')

}],
link: function(scope, element, attrs) {

// Main Logic
var currEl;

var applyToModel = function(el, target, source, sibling) {
Expand Down Expand Up @@ -271,9 +292,21 @@ angular.module('tagsCategorizer').run(['$templateCache', function($templateCache
" <div class=\"groups-list col-md-6\">\n" +
"\n" +
" <div class=\"add-group\">\n" +
" <form name=\"groupName\">\n" +
"\n" +
" <input type=\"text\"\n" +
" ng-model=\"newGroup\"\n" +
" placeholder=\"Add new group\"\n" +
" ng-keypress=\"checkAddNew($event)\"\n" +
" ng-pattern=\"nameRx\"\n" +
" name=\"gName\">\n" +
" <button ng-click=\"addNewGroup()\"\n" +
" ng-disabled=\"groupName.gName.$error.pattern\">\n" +
" <i class=\"fa fa-plus\"></i>\n" +
" </button>\n" +
"\n" +
" </form>\n" +
"\n" +
" <input type=\"text\" ng-model=\"newGroup\" placeholder=\"Add new group\" ng-keypress=\"checkAddNew($event)\">\n" +
" <button ng-click=\"addNewGroup()\"><i class=\"fa fa-plus\"></i></button>\n" +
" </div>\n" +
"\n" +
" <div class=\"bags\" ng-init=\"makeVisible(0)\">\n" +
Expand All @@ -285,22 +318,39 @@ angular.module('tagsCategorizer').run(['$templateCache', function($templateCache
" data-gid=\"{{group.id}}\"\n" +
" data-index=\"{{$index}}\">\n" +
" <!--ng-init=\"hookGroups($last)\"-->\n" +
" <div class=\"title clearfix\"\n" +
" ng-class=\"{'editing': renameGroup[$index]}\">\n" +
" <div class=\"title clearfix\">\n" +
"\n" +
" <span ng-if=\"!renameGroup[$index]\">{{group.name}}</span>\n" +
" <input type=\"text\" class=\"rename\" ng-model=\"group.name\" ng-click=\"stopEvent($event)\" ng-if=\"renameGroup[$index] && group.open\">\n" +
" <input type=\"text\" class=\"rename\"\n" +
" ng-model=\"group.name\"\n" +
" ng-click=\"stopEvent($event)\"\n" +
" ng-keypress=\"checkRenameGroup($event, $index)\"\n" +
" ng-if=\"renameGroup[$index] && group.open\">\n" +
" <div class=\"pull-right\">\n" +
" <span class=\"edit-group\" ng-if=\"group.open\" ng-click=\"editGroup($event, $index)\"><i class=\"fa fa-pencil-square-o\"></i></span>\n" +
" <span class=\"remove-group\" ng-if=\"group.open\" ng-click=\"deleteTagGroup($event, $index)\"><i class=\"fa fa-times\"></i></span>\n" +
"\n" +
" <span class=\"remove-group confirm\"\n" +
" ng-if=\"deleteConf && group.open\"\n" +
" ng-click=\"deleteTagGroup($event, $index, true)\">\n" +
" <i class=\"fa fa-check\"></i>\n" +
" </span>\n" +
" <span class=\"remove-group\"\n" +
" ng-class=\"{'confirm-deletion': deleteConf > 0}\"\n" +
" ng-if=\"group.open\"\n" +
" ng-click=\"deleteTagGroup($event, $index)\">\n" +
" <i class=\"fa fa-times\"></i>\n" +
" </span>\n" +
"\n" +
" <button type=\"button\" class=\"btn btn-info nr-tags\">{{group.tags.length}} <i class=\"fa fa-tags\"></i></button>\n" +
"\n" +
" <i class=\"arrow glyphicon\" ng-class=\"{'glyphicon-chevron-down': group.open, 'glyphicon-chevron-right': !group.open}\"></i>\n" +
" </div>\n" +
"\n" +
" </div>\n" +
"\n" +
" <div class=\"tags clearfix\"\n" +
" ng-show=\"group.open\">\n" +
" ng-show=\"group.open\"\n" +
" ng-class=\"{'confirm-deletion': deleteConf > 0}\">\n" +
"\n" +
" <span class=\"tag\"\n" +
" ng-repeat=\"tag in group.tags track by $index\"\n" +
Expand Down

0 comments on commit 1ed7dd8

Please sign in to comment.