area-select.min.js

"use strict";angular.module("jackrabbitsgroup.angular-area-select",[]).directive("jrgAreaSelect",["$timeout",function($timeout){return{restrict:"A",transclude:!0,scope:{coords:"=",opts:"=?"},template:function(element,attrs){var defaultsAttrs={aspectRatio:0,selectBuffer:50,inline:0,inlineBlock:0};for(var xx in defaultsAttrs)void 0===attrs[xx]&&(attrs[xx]=defaultsAttrs[xx]);var ii,toInt=["aspectRatio","selectBuffer","inline","inlineBlock"];for(ii=0;ii<toInt.length;ii++)attrs[toInt[ii]]=parseInt(attrs[toInt[ii]],10);var html="<div style='position:relative;'>";return html+=attrs.inline?"<div class='jrg-area-select-ele' style='display:inline;' ng-transclude></div>":attrs.inlineBlock?"<div class='jrg-area-select-ele' style='display:inline-block;' ng-transclude></div>":"<div class='jrg-area-select-ele' ng-transclude></div>",html+="<div ng-show='show.blurred'><div class='jrg-area-select-blurred' style='top:{{(coordsTemp.ele.top -offsets.ele.top)}}px; left:{{(coordsTemp.ele.left -offsets.ele.left)}}px; height:{{(coordsTemp.ele.bottom -coordsTemp.ele.top)}}px; width:{{(coordsTemp.select.left -coordsTemp.ele.left)}}px;'>&nbsp;</div><div class='jrg-area-select-blurred' style='top:{{(coordsTemp.ele.top -offsets.ele.top)}}px; left:{{(coordsTemp.select.right -offsets.ele.left)}}px; height:{{(coordsTemp.ele.bottom -coordsTemp.ele.top)}}px; width:{{(coordsTemp.ele.right -coordsTemp.select.right)}}px;'>&nbsp;</div><div class='jrg-area-select-blurred' style='top:{{(coordsTemp.ele.top -offsets.ele.top)}}px; left:{{(coordsTemp.select.left -offsets.ele.left)}}px; height:{{(coordsTemp.select.top -coordsTemp.ele.top)}}px; width:{{(coordsTemp.select.right -coordsTemp.select.left)}}px;'>&nbsp;</div><div class='jrg-area-select-blurred' style='top:{{(coordsTemp.select.bottom -offsets.ele.top)}}px; left:{{(coordsTemp.select.left -offsets.ele.left)}}px; height:{{(coordsTemp.ele.bottom -coordsTemp.select.bottom)}}px; width:{{(coordsTemp.select.right -coordsTemp.select.left)}}px;'>&nbsp;</div></div></div>"},link:function(scope){void 0===scope.opts&&(scope.opts={});var defaultsOpts={instId:"jrgjAreaSelect"+Math.random().toString(36).substring(7)};for(var xx in defaultsOpts)void 0===scope.opts[xx]&&(scope.opts[xx]=defaultsOpts[xx])},controller:function($scope,$element,$attrs){function init(){getEleCoords({}),$scope.show.blurred=!0}function start(evt){var xx=evt.pageX,yy=evt.pageY;xx>=$scope.coordsTemp.ele.left-$attrs.selectBuffer&&xx<=$scope.coordsTemp.ele.right+$attrs.selectBuffer&&yy>=$scope.coordsTemp.ele.top-$attrs.selectBuffer&&yy<=$scope.coordsTemp.ele.bottom+$attrs.selectBuffer&&(xx<$scope.coordsTemp.ele.left?xx=$scope.coordsTemp.ele.left:xx>$scope.coordsTemp.ele.right&&(xx=$scope.coordsTemp.ele.right),yy<$scope.coordsTemp.ele.top?yy=$scope.coordsTemp.ele.top:yy>$scope.coordsTemp.ele.bottom&&(yy=$scope.coordsTemp.ele.bottom),$scope.coordsTemp.start.x=xx,$scope.coordsTemp.start.y=yy,$scope.state.started=!0),$scope.state.ended=!1}function end(evt,params){move(evt,params),$scope.state.started&&(calculateSelectArea({}),$scope.state.ended=!0),$scope.state.started=!1}function move(evt){if($scope.state.started){var xx=evt.pageX,yy=evt.pageY;xx>$scope.coordsTemp.ele.right?xx=$scope.coordsTemp.ele.right:xx<$scope.coordsTemp.ele.left&&(xx=$scope.coordsTemp.ele.left),yy>$scope.coordsTemp.ele.bottom?yy=$scope.coordsTemp.ele.bottom:yy<$scope.coordsTemp.ele.top&&(yy=$scope.coordsTemp.ele.top),$scope.coordsTemp.end.x=xx,$scope.coordsTemp.end.y=yy;var selectTemp={};if($scope.coordsTemp.end.x<$scope.coordsTemp.start.x?(selectTemp.left=$scope.coordsTemp.end.x,selectTemp.right=$scope.coordsTemp.start.x):(selectTemp.left=$scope.coordsTemp.start.x,selectTemp.right=$scope.coordsTemp.end.x),$scope.coordsTemp.end.y<$scope.coordsTemp.start.y?(selectTemp.top=$scope.coordsTemp.end.y,selectTemp.bottom=$scope.coordsTemp.start.y):(selectTemp.top=$scope.coordsTemp.start.y,selectTemp.bottom=$scope.coordsTemp.end.y),$attrs.aspectRatio>0){var curWidth=selectTemp.right-selectTemp.left,curHeight=selectTemp.bottom-selectTemp.top,curRatio=curWidth/curHeight;curRatio>$attrs.aspectRatio?$scope.coordsTemp.end.x<$scope.coordsTemp.start.x?selectTemp.left=selectTemp.right-curHeight*$attrs.aspectRatio:selectTemp.right=selectTemp.left+curHeight*$attrs.aspectRatio:$scope.coordsTemp.end.y<$scope.coordsTemp.start.y?selectTemp.top=selectTemp.bottom-curWidth/$attrs.aspectRatio:selectTemp.bottom=selectTemp.top+curWidth/$attrs.aspectRatio}$scope.coordsTemp.select.top=selectTemp.top,$scope.coordsTemp.select.left=selectTemp.left,$scope.coordsTemp.select.bottom=selectTemp.bottom,$scope.coordsTemp.select.right=selectTemp.right}}function scopeApply(){$scope.$$phase||$scope.$apply()}function calculateSelectArea(){$scope.coords.select={left:$scope.coordsTemp.select.left-$scope.offsets.ele.left,top:$scope.coordsTemp.select.top-$scope.offsets.ele.top,right:$scope.coordsTemp.select.right-$scope.offsets.ele.left,bottom:$scope.coordsTemp.select.bottom-$scope.offsets.ele.top,height:$scope.coordsTemp.select.bottom-$scope.coordsTemp.select.top,width:$scope.coordsTemp.select.right-$scope.coordsTemp.select.left}}function getEleCoords(){$timeout(function(){for(var rect1=eles.main[0].getBoundingClientRect(),el=eles.main[0],_x=0,_y=0;el&&!isNaN(el.offsetLeft)&&!isNaN(el.offsetTop);)_x+=el.offsetLeft,_y+=el.offsetTop,el=el.offsetParent;var rect={left:_x,right:_x+rect1.width,top:_y,bottom:_y+rect1.height};$scope.coordsTemp.ele={left:rect.left,right:rect.right,top:rect.top,bottom:rect.bottom},$scope.offsets.ele={top:rect.top,left:rect.left},$scope.coordsTemp.select={left:rect.left,right:rect.right,top:rect.top,bottom:rect.bottom},$scope.coords.ele={left:0,top:0,right:rect.right-rect.left,bottom:rect.bottom-rect.top,height:rect.bottom-rect.top,width:rect.right-rect.left}},100)}var eles={main:$element.find("div").find("div"),doc:angular.element(document)};$scope.offsets={ele:{top:0,left:0}},$scope.show={blurred:!0},$scope.state={started:!1,ended:!1},$scope.coordsTemp={start:{x:0,y:0},end:{x:0,y:0},ele:{left:0,right:0,top:0,bottom:0},select:{left:0,right:0,top:0,bottom:0}},$scope.coords={ele:{left:0,right:0,top:0,bottom:0,height:0,width:0},select:{left:0,right:0,top:0,bottom:0,height:0,width:0}},eles.doc.on("mousedown",function(evt){start(evt,{}),scopeApply({})}),eles.doc.on("touchstart",function(evt){start(evt,{}),scopeApply({})}),eles.doc.on("mouseup",function(evt){end(evt,{}),scopeApply({})}),eles.doc.on("touchend",function(evt){end(evt,{}),scopeApply({})}),eles.doc.on("mousemove",function(evt){move(evt,{}),scopeApply({})}),eles.doc.on("touchmove",function(evt){move(evt,{}),scopeApply({})}),$scope.$on("jrgAreaSelectReInit",function(evt,params){params.instId==$scope.opts.instId&&init({})}),$scope.$on("jrgAreaSelectHide",function(evt,params){params.instId==$scope.opts.instId&&($scope.show.blurred=!1)}),init({})}}}]);