Igor Kulikov
7 years ago
7 changed files with 270 additions and 117 deletions
@ -0,0 +1,180 @@ |
|||
/* |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
export default angular.module('thingsboard.directives.mdChipDraggable', []) |
|||
.directive('tbChipDraggable', function () { |
|||
return { |
|||
restrict: 'A', |
|||
scope: {}, |
|||
bindToController: true, |
|||
controllerAs: 'vm', |
|||
controller: ['$document', '$scope', '$element', '$timeout', |
|||
function ($document, $scope, $element, $timeout) { |
|||
var options = { |
|||
axis: 'horizontal', |
|||
}; |
|||
var handle = $element[0]; |
|||
var draggingClassName = 'dragging'; |
|||
var droppingClassName = 'dropping'; |
|||
var droppingBeforeClassName = 'dropping--before'; |
|||
var droppingAfterClassName = 'dropping--after'; |
|||
var dragging = false; |
|||
var preventDrag = false; |
|||
var dropPosition; |
|||
var dropTimeout; |
|||
|
|||
var move = function (from, to) { |
|||
this.splice(to, 0, this.splice(from, 1)[0]); |
|||
}; |
|||
|
|||
$element = angular.element($element[0].closest('md-chip')); |
|||
|
|||
$element.attr('draggable', true); |
|||
|
|||
$element.on('mousedown', function (event) { |
|||
if (event.target !== handle) { |
|||
preventDrag = true; |
|||
} |
|||
}); |
|||
|
|||
$document.on('mouseup', function () { |
|||
preventDrag = false; |
|||
}); |
|||
|
|||
$element.on('dragstart', function (event) { |
|||
if (preventDrag) { |
|||
event.preventDefault(); |
|||
|
|||
} else { |
|||
dragging = true; |
|||
|
|||
$element.addClass(draggingClassName); |
|||
|
|||
var dataTransfer = event.dataTransfer || event.originalEvent.dataTransfer; |
|||
|
|||
dataTransfer.effectAllowed = 'copyMove'; |
|||
dataTransfer.dropEffect = 'move'; |
|||
dataTransfer.setData('text/plain', $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip)); |
|||
} |
|||
}); |
|||
|
|||
$element.on('dragend', function () { |
|||
dragging = false; |
|||
|
|||
$element.removeClass(draggingClassName); |
|||
}); |
|||
|
|||
var dragOverHandler = function (event) { |
|||
if (dragging) { |
|||
return; |
|||
} |
|||
|
|||
event.preventDefault(); |
|||
|
|||
var bounds = $element[0].getBoundingClientRect(); |
|||
|
|||
var props = { |
|||
width: bounds.right - bounds.left, |
|||
height: bounds.bottom - bounds.top, |
|||
x: (event.originalEvent || event).clientX - bounds.left, |
|||
y: (event.originalEvent || event).clientY - bounds.top, |
|||
}; |
|||
|
|||
var offset = options.axis === 'vertical' ? props.y : props.x; |
|||
var midPoint = (options.axis === 'vertical' ? props.height : props.width) / 2; |
|||
|
|||
$element.addClass(droppingClassName); |
|||
|
|||
if (offset < midPoint) { |
|||
dropPosition = 'before'; |
|||
$element.removeClass(droppingAfterClassName); |
|||
$element.addClass(droppingBeforeClassName); |
|||
|
|||
} else { |
|||
dropPosition = 'after'; |
|||
$element.removeClass(droppingBeforeClassName); |
|||
$element.addClass(droppingAfterClassName); |
|||
} |
|||
}; |
|||
|
|||
var dropHandler = function (event) { |
|||
event.preventDefault(); |
|||
|
|||
var droppedItemIndex = parseInt((event.dataTransfer || event.originalEvent.dataTransfer).getData('text/plain'), 10); |
|||
var currentIndex = $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip); |
|||
var newIndex = null; |
|||
|
|||
if (dropPosition === 'before') { |
|||
if (droppedItemIndex < currentIndex) { |
|||
newIndex = currentIndex - 1; |
|||
} else { |
|||
newIndex = currentIndex; |
|||
} |
|||
} else { |
|||
if (droppedItemIndex < currentIndex) { |
|||
newIndex = currentIndex; |
|||
} else { |
|||
newIndex = currentIndex + 1; |
|||
} |
|||
} |
|||
|
|||
// prevent event firing multiple times in firefox
|
|||
$timeout.cancel(dropTimeout); |
|||
dropTimeout = $timeout(function () { |
|||
dropPosition = null; |
|||
|
|||
move.apply($scope.$parent.$mdChipsCtrl.items, [droppedItemIndex, newIndex]); |
|||
|
|||
$scope.$apply(function () { |
|||
$scope.$emit('mdChipDraggable:change', { |
|||
collection: $scope.$parent.$mdChipsCtrl.items, |
|||
item: $scope.$parent.$mdChipsCtrl.items[droppedItemIndex], |
|||
from: droppedItemIndex, |
|||
to: newIndex, |
|||
}); |
|||
}); |
|||
|
|||
$element.removeClass(droppingClassName); |
|||
$element.removeClass(droppingBeforeClassName); |
|||
$element.removeClass(droppingAfterClassName); |
|||
|
|||
$element.off('drop', dropHandler); |
|||
}, 1000 / 16); |
|||
}; |
|||
|
|||
$element.on('dragenter', function () { |
|||
if (dragging) { |
|||
return; |
|||
} |
|||
|
|||
$element.off('dragover', dragOverHandler); |
|||
$element.off('drop', dropHandler); |
|||
|
|||
$element.on('dragover', dragOverHandler); |
|||
$element.on('drop', dropHandler); |
|||
}); |
|||
|
|||
$element.on('dragleave', function () { |
|||
$element.removeClass(droppingClassName); |
|||
$element.removeClass(droppingBeforeClassName); |
|||
$element.removeClass(droppingAfterClassName); |
|||
}); |
|||
|
|||
}], |
|||
}; |
|||
}) |
|||
.name; |
|||
|
|||
/* eslint-enable angular/angularelement */ |
|||
Loading…
Reference in new issue