nl_tokens: Resizable directive http : // stackoverflow . com / questions / 18368485 / angular - js - resizable - div - directive
pl_tokens: function ResizableDirective ( $document , $timeout ) { return { restrict : 'A' , scope : { isResizable : '=resizable' , minWidth : '=' , maxWidth : '=' , onResize : '&' } , link : function ( $scope , $element , $attrs ) { if ( $scope . isResizable ) { $element . addClass ( 'resizable' ) ; } var handle = angular . element ( ` ` ) , parent = $element . parent ( ) , prevScreenX ; handle . on ( 'mousedown' , function ( event ) { if ( ! $element [ 0 ] . classList . contains ( 'resizable' ) ) { return false ; } event . stopPropagation ( ) ; event . preventDefault ( ) ; $document . on ( 'mousemove' , mousemove ) ; $document . on ( 'mouseup' , mouseup ) ; } ) ; function mousemove ( event ) { event = event . originalEvent || event ; var width = parent [ 0 ] . clientWidth , movementX = event . movementX || event . mozMovementX || ( event . screenX - prevScreenX ) , newWidth = width + ( movementX || 0 ) ; prevScreenX = event . screenX ; if ( ( ! $scope . minWidth || newWidth >= $scope . minWidth ) && ( ! $scope . maxWidth || newWidth <= $scope . maxWidth ) ) { <mask> . css ( { width : newWidth + 'px' } ) ; } } function mouseup ( ) { if ( $scope . onResize ) { $timeout ( function ( ) { let width = parent [ 0 ] . clientWidth ; if ( width < $scope . minWidth ) { width = $scope . minWidth ; } $scope . onResize ( { width : width } ) ; } ) ; } $document . unbind ( 'mousemove' , mousemove ) ; $document . unbind ( 'mouseup' , mouseup ) ; } $element . append ( handle ) ; } } ; }