Use the umbConfirmAction directive when deleting tags (#2795)
This commit is contained in:
BatJan
committed by
Sebastiaan Janssen
Sebastiaan Janssen
parent
e0c0eecaac
commit
9b9173d64f
@@ -3,20 +3,20 @@
|
||||
// --------------------------------------------------
|
||||
.umb-editor {
|
||||
min-width:66.6%;
|
||||
|
||||
|
||||
&-pull {
|
||||
float:left;
|
||||
width:66.6%;
|
||||
}
|
||||
|
||||
|
||||
&-push {
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.umb-editor-tiny {
|
||||
width: 60px;
|
||||
|
||||
|
||||
&.umb-editor-push {
|
||||
width:30%;
|
||||
min-width:0;
|
||||
@@ -53,7 +53,7 @@
|
||||
float:right;
|
||||
width:35%;
|
||||
}
|
||||
|
||||
|
||||
&--pull, &--push {
|
||||
.umb-editor {
|
||||
min-width:0;
|
||||
@@ -372,7 +372,7 @@ ul.color-picker li a {
|
||||
> li:not(.unsortable) {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.umb-sortable-thumbnails li:hover .umb-sortable-thumbnails__actions {
|
||||
opacity: 1;
|
||||
@@ -902,10 +902,39 @@ ul.color-picker li a {
|
||||
//
|
||||
// Tags
|
||||
// --------------------------------------------------
|
||||
.umb-tags{border: @gray-10 solid 1px; padding: 10px; font-size: 13px; text-shadow: none;}
|
||||
.umb-tags .tag{cursor: pointer; margin: 7px; padding: 7px; background: @turquoise}
|
||||
.umb-tags .tag i{padding: 2px;}
|
||||
.umb-tags input{border: none; background: @white}
|
||||
.umb-tags{
|
||||
border: @gray-10 solid 1px;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
text-shadow: none;
|
||||
|
||||
.tag{
|
||||
cursor: default;
|
||||
margin: 7px;
|
||||
padding: 10px;
|
||||
background: @turquoise;
|
||||
position: relative;
|
||||
|
||||
.icon-trash{
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.umb_confirm-action__overlay.-left{
|
||||
top: 6px;
|
||||
left: auto;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
input{
|
||||
border: none;
|
||||
background: @white;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Date/time picker
|
||||
|
||||
@@ -5,11 +5,11 @@ angular.module("umbraco")
|
||||
var $typeahead;
|
||||
|
||||
$scope.isLoading = true;
|
||||
$scope.tagToAdd = "";
|
||||
|
||||
$scope.tagToAdd = "";
|
||||
|
||||
function setModelValue(val) {
|
||||
|
||||
$scope.model.value = val || $scope.model.value;
|
||||
|
||||
$scope.model.value = val || $scope.model.value;
|
||||
if ($scope.model.value) {
|
||||
if (!$scope.model.config.storageType || $scope.model.config.storageType !== "Json") {
|
||||
//it is csv
|
||||
@@ -20,9 +20,9 @@ angular.module("umbraco")
|
||||
if($scope.model.value.length > 0) {
|
||||
// split the csv string, and remove any duplicate values
|
||||
var tempArray = $scope.model.value.split(',').map(function(v) {
|
||||
return v.trim();
|
||||
return v.trim();
|
||||
});
|
||||
|
||||
|
||||
$scope.model.value = tempArray.filter(function(v, i, self) {
|
||||
return self.indexOf(v) === i;
|
||||
});
|
||||
@@ -40,7 +40,7 @@ angular.module("umbraco")
|
||||
$scope.isLoading = false;
|
||||
|
||||
//load current value
|
||||
setModelValue();
|
||||
setModelValue();
|
||||
|
||||
// Method required by the valPropertyValidator directive (returns true if the property editor has at least one tag selected)
|
||||
$scope.validateMandatory = function () {
|
||||
@@ -64,7 +64,7 @@ angular.module("umbraco")
|
||||
|
||||
$scope.addTagOnEnter = function (e) {
|
||||
var code = e.keyCode || e.which;
|
||||
if (code == 13) { //Enter keycode
|
||||
if (code == 13) { //Enter keycode
|
||||
if ($element.find('.tags-' + $scope.model.alias).parent().find(".tt-dropdown-menu .tt-cursor").length === 0) {
|
||||
//this is required, otherwise the html form will attempt to submit.
|
||||
e.preventDefault();
|
||||
@@ -83,17 +83,38 @@ angular.module("umbraco")
|
||||
$typeahead.typeahead('val', '');
|
||||
};
|
||||
|
||||
|
||||
// Set the visible prompt to -1 to ensure it will not be visible
|
||||
$scope.promptIsVisible = "-1";
|
||||
|
||||
$scope.removeTag = function (tag) {
|
||||
var i = $scope.model.value.indexOf(tag);
|
||||
|
||||
if (i >= 0) {
|
||||
// Make sure to hide the prompt so it does not stay open because another item gets a new number in the array index
|
||||
$scope.promptIsVisible = "-1";
|
||||
|
||||
// Remove the tag from the index
|
||||
$scope.model.value.splice(i, 1);
|
||||
|
||||
//this is required to re-validate
|
||||
$scope.propertyForm.tagCount.$setViewValue($scope.model.value.length);
|
||||
}
|
||||
};
|
||||
|
||||
$scope.showPrompt = function (idx, tag){
|
||||
|
||||
var i = $scope.model.value.indexOf(tag);
|
||||
|
||||
// Make the prompt visible for the clicked tag only
|
||||
if (i === idx) {
|
||||
$scope.promptIsVisible = i;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.hidePrompt = function(){
|
||||
$scope.promptIsVisible = "-1";
|
||||
}
|
||||
|
||||
//vice versa
|
||||
$scope.model.onValueChanged = function (newVal, oldVal) {
|
||||
//update the display val again if it has changed from the server
|
||||
|
||||
@@ -1,27 +1,35 @@
|
||||
<div ng-controller="Umbraco.PropertyEditors.TagsController" class="umb-editor umb-tags">
|
||||
|
||||
<div ng-if="isLoading">
|
||||
<localize key="loading">Loading</localize>...
|
||||
</div>
|
||||
|
||||
<div ng-if="!isLoading">
|
||||
<div ng-if="isLoading">
|
||||
<localize key="loading">Loading</localize>...
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="tagCount" ng-model="model.value.length" val-property-validator="validateMandatory" />
|
||||
<div ng-if="!isLoading">
|
||||
|
||||
<span ng-repeat="tag in model.value track by $index" ng-click="$parent.removeTag(tag)" class="label label-primary tag">
|
||||
<span ng-bind-html="tag"></span>
|
||||
<i class="icon icon-delete"></i>
|
||||
</span>
|
||||
<input type="hidden" name="tagCount" ng-model="model.value.length" val-property-validator="validateMandatory" />
|
||||
|
||||
<input type="text"
|
||||
id="{{model.alias}}"
|
||||
class="typeahead tags-{{model.alias}}"
|
||||
ng-model="$parent.tagToAdd"
|
||||
ng-keydown="$parent.addTagOnEnter($event)"
|
||||
on-blur="$parent.addTag()"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterTags" />
|
||||
<span ng-repeat="tag in model.value track by $index" class="label label-primary tag">
|
||||
<span ng-bind-html="tag"></span>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<i class="icon-trash" ng-click="$parent.showPrompt($index, tag)" localize="title" title="@buttons_deleteTag"></i>
|
||||
|
||||
<umb-confirm-action
|
||||
ng-if="$parent.promptIsVisible === $index"
|
||||
direction="left"
|
||||
on-confirm="$parent.removeTag(tag)"
|
||||
on-cancel="$parent.hidePrompt()">
|
||||
</umb-confirm-action>
|
||||
</span>
|
||||
|
||||
<input type="text"
|
||||
id="{{model.alias}}"
|
||||
class="typeahead tags-{{model.alias}}"
|
||||
ng-model="$parent.tagToAdd"
|
||||
ng-keydown="$parent.addTagOnEnter($event)"
|
||||
on-blur="$parent.addTag()"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterTags" />
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user