From 0372d9f8c2ed4c174b470b0bf5b4dae7e8f813e6 Mon Sep 17 00:00:00 2001 From: ilan cohen Date: Sun, 4 Mar 2018 15:19:03 +0200 Subject: [PATCH 1/5] Added watcher for changing directions --- angular-resizable.min.js | 2 +- src/angular-resizable.js | 86 ++++++++++++++++++---------------------- 2 files changed, 39 insertions(+), 49 deletions(-) diff --git a/angular-resizable.min.js b/angular-resizable.min.js index eb0f450..018f1e3 100644 --- a/angular-resizable.min.js +++ b/angular-resizable.min.js @@ -1 +1 @@ -angular.module("angularResizable",[]).directive("resizable",function(){function e(e){void 0===t?(t=e,setTimeout(function(){t(),t=void 0},100)):t=e}var t;return{restrict:"AE",scope:{rDirections:"=",rCenteredX:"=",rCenteredY:"=",rWidth:"=",rHeight:"=",rFlex:"=",rGrabber:"@",rDisabled:"@"},link:function(t,n,r){var i="flexBasis"in document.documentElement.style?"flexBasis":"webkitFlexBasis"in document.documentElement.style?"webkitFlexBasis":"msFlexPreferredSize"in document.documentElement.style?"msFlexPreferredSize":"flexBasis";t.$watch("rWidth",function(e){n[0].style[t.rFlex?i:"width"]=t.rWidth+"px"}),t.$watch("rHeight",function(e){n[0].style[t.rFlex?i:"height"]=t.rHeight+"px"}),n.addClass("resizable");var s,o,a,u,l,d=window.getComputedStyle(n[0],null),c=t.rDirections,h=t.rCenteredX?2:1,m=t.rCenteredY?2:1,v=t.rGrabber?t.rGrabber:"",p={},f=function(e){p.width=!1,p.height=!1,"x"===l?p.width=parseInt(n[0].style[t.rFlex?i:"width"]):p.height=parseInt(n[0].style[t.rFlex?i:"height"]),p.id=n[0].id,p.evt=e},x=function(e){return e.touches?e.touches[0].clientX:e.clientX},g=function(e){return e.touches?e.touches[0].clientY:e.clientY},b=function(r){var d,c="x"===l?a-x(r):a-g(r);switch(u){case"top":d=t.rFlex?i:"height",n[0].style[d]=o+c*m+"px";break;case"bottom":d=t.rFlex?i:"height",n[0].style[d]=o-c*m+"px";break;case"right":d=t.rFlex?i:"width",n[0].style[d]=s-c*h+"px";break;case"left":d=t.rFlex?i:"width",n[0].style[d]=s+c*h+"px"}f(r),e(function(){t.$emit("angular-resizable.resizing",p)})},y=function(e){f(),t.$emit("angular-resizable.resizeEnd",p),t.$apply(),document.removeEventListener("mouseup",y,!1),document.removeEventListener("mousemove",b,!1),document.removeEventListener("touchend",y,!1),document.removeEventListener("touchmove",b,!1),n.removeClass("no-transition")},E=function(e,r){u=r,l="left"===u||"right"===u?"x":"y",a="x"===l?x(e):g(e),s=parseInt(d.getPropertyValue("width")),o=parseInt(d.getPropertyValue("height")),n.addClass("no-transition"),document.addEventListener("mouseup",y,!1),document.addEventListener("mousemove",b,!1),document.addEventListener("touchend",y,!1),document.addEventListener("touchmove",b,!1),e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.returnValue=!1,f(e),t.$emit("angular-resizable.resizeStart",p),t.$apply()};c.forEach(function(e){var r=document.createElement("div");r.setAttribute("class","rg-"+e),r.innerHTML=v,n[0].appendChild(r),r.ondragstart=function(){return!1};var i=function(n){var r="true"===t.rDisabled;r||1!==n.which&&!n.touches||E(n,e)};r.addEventListener("mousedown",i,!1),r.addEventListener("touchstart",i,!1)})}}}); \ No newline at end of file +angular.module("angularResizable",[]).directive("resizable",function(){function e(e){void 0===t?(t=e,setTimeout(function(){t(),t=void 0},100)):t=e}var t,r=[];return{restrict:"AE",scope:{rDirections:"=",rCenteredX:"=",rCenteredY:"=",rWidth:"=",rHeight:"=",rFlex:"=",rGrabber:"@",rDisabled:"@"},link:function(t,n,i){var a="flexBasis"in document.documentElement.style?"flexBasis":"webkitFlexBasis"in document.documentElement.style?"webkitFlexBasis":"msFlexPreferredSize"in document.documentElement.style?"msFlexPreferredSize":"flexBasis";t.$watch("rWidth",function(e){n[0].style.width=t.rWidth+"px"}),t.$watch("rHeight",function(e){n[0].style.height=t.rHeight+"px"}),t.$watch("rDirections",function(){w()}),n.addClass("resizable");var s,o,l,u,c,d=window.getComputedStyle(n[0],null),h=t.rCenteredX?2:1,m=t.rCenteredY?2:1,p=t.rGrabber?t.rGrabber:"",f={},g=function(e){f.width=!1,f.height=!1,"x"===c?f.width=parseInt(n[0].style[t.rFlex?a:"width"]):f.height=parseInt(n[0].style[t.rFlex?a:"height"]),f.id=n[0].id,f.evt=e},v=function(r){var i,d="x"===c?l-r.clientX:l-r.clientY;switch(u){case"top":i=t.rFlex?a:"height",n[0].style[i]=o+d*m+"px";break;case"bottom":i=t.rFlex?a:"height",n[0].style[i]=o-d*m+"px";break;case"right":i=t.rFlex?a:"width",n[0].style[i]=s-d*h+"px";break;case"left":i=t.rFlex?a:"width",n[0].style[i]=s+d*h+"px"}g(r),e(function(){t.$emit("angular-resizable.resizing",f)})},x=function(e){g(),t.$emit("angular-resizable.resizeEnd",f),t.$apply(),document.removeEventListener("mouseup",x,!1),document.removeEventListener("mousemove",v,!1),n.removeClass("no-transition")},b=function(e,r){u=r,c="left"===u||"right"===u?"x":"y",l="x"===c?e.clientX:e.clientY,s=parseInt(d.getPropertyValue("width")),o=parseInt(d.getPropertyValue("height")),n.addClass("no-transition"),document.addEventListener("mouseup",x,!1),document.addEventListener("mousemove",v,!1),e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),e.cancelBubble=!0,e.returnValue=!1,g(e),t.$emit("angular-resizable.resizeStart",f),t.$apply()},w=function(){var e=t.rDirections;r.forEach(function(e){e.remove()}),r=[],e.forEach(function(e){var i=document.createElement("div");i.setAttribute("class","rg-"+e),i.innerHTML=p,n[0].appendChild(i),i.ondragstart=function(){return!1},i.addEventListener("mousedown",function(r){var n="true"===t.rDisabled;n||1!==r.which||b(r,e)},!1),r.push(i)})};w()}}}); \ No newline at end of file diff --git a/src/angular-resizable.js b/src/angular-resizable.js index 4a6e24a..3138e41 100644 --- a/src/angular-resizable.js +++ b/src/angular-resizable.js @@ -1,6 +1,7 @@ angular.module('angularResizable', []) .directive('resizable', function() { var toCall; + var grabbers = []; function throttle(fun) { if (toCall === undefined) { toCall = fun; @@ -22,23 +23,22 @@ angular.module('angularResizable', []) rHeight: '=', rFlex: '=', rGrabber: '@', - rDisabled: '@', - rNoThrottle: '=', - resizable: '@', + rDisabled: '@' }, link: function(scope, element, attr) { - if (scope.resizable === 'false') return; - var flexBasis = 'flexBasis' in document.documentElement.style ? 'flexBasis' : 'webkitFlexBasis' in document.documentElement.style ? 'webkitFlexBasis' : - 'msFlexPreferredSize' in document.documentElement.style ? 'msFlexPreferredSize' : 'flexBasis'; + 'msFlexPreferredSize' in document.documentElement.style ? 'msFlexPreferredSize' : 'flexBasis'; // register watchers on width and height attributes if they are set scope.$watch('rWidth', function(value){ - element[0].style[scope.rFlex ? flexBasis : 'width'] = scope.rWidth + 'px'; + element[0].style.width = scope.rWidth + 'px'; }); scope.$watch('rHeight', function(value){ - element[0].style[scope.rFlex ? flexBasis : 'height'] = scope.rHeight + 'px'; + element[0].style.height = scope.rHeight + 'px'; + }); + scope.$watch('rDirections', function(){ + setupDirections(); }); element.addClass('resizable'); @@ -46,7 +46,6 @@ angular.module('angularResizable', []) var style = window.getComputedStyle(element[0], null), w, h, - dir = scope.rDirections || ['right'], vx = scope.rCenteredX ? 2 : 1, // if centered double velocity vy = scope.rCenteredY ? 2 : 1, // if centered double velocity inner = scope.rGrabber ? scope.rGrabber : '', @@ -65,16 +64,8 @@ angular.module('angularResizable', []) info.evt = e; }; - var getClientX = function(e) { - return e.touches ? e.touches[0].clientX : e.clientX; - }; - - var getClientY = function(e) { - return e.touches ? e.touches[0].clientY : e.clientY; - }; - var dragging = function(e) { - var prop, offset = axis === 'x' ? start - getClientX(e) : start - getClientY(e); + var prop, offset = axis === 'x' ? start - e.clientX : start - e.clientY; switch(dragDir) { case 'top': prop = scope.rFlex ? flexBasis : 'height'; @@ -94,14 +85,7 @@ angular.module('angularResizable', []) break; } updateInfo(e); - function resizingEmit(){ - scope.$emit('angular-resizable.resizing', info); - } - if (scope.rNoThrottle) { - resizingEmit(); - } else { - throttle(resizingEmit); - } + throttle(function() { scope.$emit('angular-resizable.resizing', info);}); }; var dragEnd = function(e) { updateInfo(); @@ -109,14 +93,12 @@ angular.module('angularResizable', []) scope.$apply(); document.removeEventListener('mouseup', dragEnd, false); document.removeEventListener('mousemove', dragging, false); - document.removeEventListener('touchend', dragEnd, false); - document.removeEventListener('touchmove', dragging, false); element.removeClass('no-transition'); }; var dragStart = function(e, direction) { dragDir = direction; axis = dragDir === 'left' || dragDir === 'right' ? 'x' : 'y'; - start = axis === 'x' ? getClientX(e) : getClientY(e); + start = axis === 'x' ? e.clientX : e.clientY; w = parseInt(style.getPropertyValue('width')); h = parseInt(style.getPropertyValue('height')); @@ -125,8 +107,6 @@ angular.module('angularResizable', []) document.addEventListener('mouseup', dragEnd, false); document.addEventListener('mousemove', dragging, false); - document.addEventListener('touchend', dragEnd, false); - document.addEventListener('touchmove', dragging, false); // Disable highlighting while dragging if(e.stopPropagation) e.stopPropagation(); @@ -139,25 +119,35 @@ angular.module('angularResizable', []) scope.$apply(); }; - dir.forEach(function (direction) { - var grabber = document.createElement('div'); + var setupDirections = function() { + var dir = scope.rDirections; - // add class for styling purposes - grabber.setAttribute('class', 'rg-' + direction); - grabber.innerHTML = inner; - element[0].appendChild(grabber); - grabber.ondragstart = function() { return false; }; + grabbers.forEach(function(g){ + g.remove(); + }); + grabbers = []; + dir.forEach(function (direction) { + var grabber = document.createElement('div'); - var down = function(e) { - var disabled = (scope.rDisabled === 'true'); - if (!disabled && (e.which === 1 || e.touches)) { - // left mouse click or touch screen - dragStart(e, direction); - } - }; - grabber.addEventListener('mousedown', down, false); - grabber.addEventListener('touchstart', down, false); - }); + // add class for styling purposes + grabber.setAttribute('class', 'rg-' + direction); + grabber.innerHTML = inner; + element[0].appendChild(grabber); + grabber.ondragstart = function () { + return false; + }; + grabber.addEventListener('mousedown', function (e) { + var disabled = (scope.rDisabled === 'true'); + if (!disabled && e.which === 1) { + // left mouse click + dragStart(e, direction); + } + }, false); + grabbers.push(grabber) + }); + } + + setupDirections(); } }; }); From f9448cc4413ea2bc1f49adf728d295283129f4b6 Mon Sep 17 00:00:00 2001 From: ilan cohen Date: Sun, 4 Mar 2018 15:25:46 +0200 Subject: [PATCH 2/5] Fixed name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4a63be9..06bd4f8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "angular-resizable", + "name": "angular-resizable-directive", "version": "1.2.0", "description": "A directive for creating resizable containers in angular.", "keywords": [ From cfb4938169465f5df44bc41d58ffeadaf1c7b6bc Mon Sep 17 00:00:00 2001 From: ilan cohen Date: Sun, 4 Mar 2018 15:26:36 +0200 Subject: [PATCH 3/5] Fixed name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 06bd4f8..4a63be9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "angular-resizable-directive", + "name": "angular-resizable", "version": "1.2.0", "description": "A directive for creating resizable containers in angular.", "keywords": [ From cec6688a74f15d5e2103b70facf69ef6657ec0fa Mon Sep 17 00:00:00 2001 From: ilan cohen Date: Sun, 4 Mar 2018 15:31:14 +0200 Subject: [PATCH 4/5] Fixed name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4a63be9..06bd4f8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "angular-resizable", + "name": "angular-resizable-directive", "version": "1.2.0", "description": "A directive for creating resizable containers in angular.", "keywords": [ From 5c4eaa2e7fdb9ef929d7044d19727df4e54ce007 Mon Sep 17 00:00:00 2001 From: ilan cohen Date: Sun, 4 Mar 2018 15:33:07 +0200 Subject: [PATCH 5/5] Fixed name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 06bd4f8..4a63be9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "angular-resizable-directive", + "name": "angular-resizable", "version": "1.2.0", "description": "A directive for creating resizable containers in angular.", "keywords": [