diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..526aba3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# http://editorconfig.org +root = true + +[*] +indent_style = space +charset = utf-8 + +[*.js] +indent_size = 4 + +[*.css] +indent_size = 2 + diff --git a/.gitignore b/.gitignore index 8cec646..cbfb003 100644 --- a/.gitignore +++ b/.gitignore @@ -6,7 +6,7 @@ *.exe *.o *.so - + # Packages # ############ # it's better to unpack these files and commit the raw source @@ -19,13 +19,13 @@ *.rar *.tar *.zip - + # Logs and databases # ###################### *.log *.sql *.sqlite - + # OS generated files # ###################### .DS_Store @@ -36,4 +36,5 @@ ehthumbs.db Thumbs.db -node_modules \ No newline at end of file +node_modules +.idea \ No newline at end of file diff --git a/angular-resizable.min.js b/angular-resizable.min.js index eb0f450..03770d6 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 +!function(){"use strict";function e(){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:"@",rNoThrottle:"=",rMinWidth:"=",rMinHeight:"=",rMaxWidth:"=",rMaxHeight:"="},link:function(t,r,n){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){r[0].style[t.rFlex?i:"width"]=t.rWidth+"px"}),t.$watch("rHeight",function(e){r[0].style[t.rFlex?i:"height"]=t.rHeight+"px"}),r.addClass("resizable");var a,o,s,d,u,l=window.getComputedStyle(r[0],null),c=t.rDirections||["right"],h=t.rCenteredX?2:1,m=t.rCenteredY?2:1,g=t.rGrabber?t.rGrabber:"",x={},v=function(e){x.width=!1,x.height=!1,"x"===u?x.width=parseInt(r[0].style[t.rFlex?i:"width"]):x.height=parseInt(r[0].style[t.rFlex?i:"height"]),x.id=r[0].id,x.evt=e},p=function(e){return e.touches?e.touches[0].clientX:e.clientX},f=function(e){return e.touches?e.touches[0].clientY:e.clientY},b=function(n){function l(){t.$emit("angular-resizable.resizing",x)}var c,g,b,y="x"===u?s-p(n):s-f(n);switch(d){case"top":g=o+y*m,c=t.rFlex?i:"height",r[0].style[c]=t.rMaxHeight&&t.rMaxHeightg?t.rMinHeight:g+"px";break;case"right":b=a-y*h,c=t.rFlex?i:"width",r[0].style[c]=t.rMaxWidth&&t.rMaxWidthg?t.rMinWidth:b+"px"}v(n),t.rNoThrottle?l():e(l)},y=function(e){v(),t.$emit("angular-resizable.resizeEnd",x),t.$apply(),document.removeEventListener("mouseup",y,!1),document.removeEventListener("mousemove",b,!1),document.removeEventListener("touchend",y,!1),document.removeEventListener("touchmove",b,!1),r.removeClass("no-transition")},E=function(e,n){d=n,u="left"===d||"right"===d?"x":"y",s="x"===u?p(e):f(e),a=parseInt(l.getPropertyValue("width")),o=parseInt(l.getPropertyValue("height")),r.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,v(e),t.$emit("angular-resizable.resizeStart",x),t.$apply()};c.forEach(function(e){var n=document.createElement("div");n.setAttribute("class","rg-"+e),n.innerHTML=g,r[0].appendChild(n),n.ondragstart=function(){return!1};var i=function(r){var n="true"===t.rDisabled;n||1!==r.which&&!r.touches||E(r,e)};n.addEventListener("mousedown",i,!1),n.addEventListener("touchstart",i,!1)})}}}angular.module("angularResizable",[]).directive("resizable",e)}(); \ No newline at end of file diff --git a/src/angular-resizable.css b/src/angular-resizable.css index 275f22d..4ea69d8 100644 --- a/src/angular-resizable.css +++ b/src/angular-resizable.css @@ -1,6 +1,7 @@ .resizable { position: relative; } + .resizable.no-transition { transition: none !important; } @@ -18,6 +19,7 @@ user-select: none; background: transparent; } + .rg-right span, .rg-left span, .rg-top span, .rg-bottom span { position: absolute; box-sizing: border-box; diff --git a/src/angular-resizable.js b/src/angular-resizable.js index 22866f2..c280ef0 100644 --- a/src/angular-resizable.js +++ b/src/angular-resizable.js @@ -1,10 +1,16 @@ -angular.module('angularResizable', []) - .directive('resizable', function() { +(function () { + 'use strict'; + + angular.module('angularResizable', []) + .directive('resizable', resizable); + + function resizable () { var toCall; - function throttle(fun) { + + function throttle (fun) { if (toCall === undefined) { toCall = fun; - setTimeout(function() { + setTimeout(function () { toCall(); toCall = undefined; }, 100); @@ -12,6 +18,7 @@ angular.module('angularResizable', []) toCall = fun; } } + return { restrict: 'AE', scope: { @@ -23,18 +30,22 @@ angular.module('angularResizable', []) rFlex: '=', rGrabber: '@', rDisabled: '@', - rNoThrottle: '=' + rNoThrottle: '=', + rMinWidth: '=', + rMinHeight: '=', + rMaxWidth: '=', + rMaxHeight: '=' }, - link: function(scope, element, attr) { + link: function (scope, element, attr) { var flexBasis = 'flexBasis' in document.documentElement.style ? 'flexBasis' : 'webkitFlexBasis' in document.documentElement.style ? 'webkitFlexBasis' : 'msFlexPreferredSize' in document.documentElement.style ? 'msFlexPreferredSize' : 'flexBasis'; // register watchers on width and height attributes if they are set - scope.$watch('rWidth', function(value){ + scope.$watch('rWidth', function (value) { element[0].style[scope.rFlex ? flexBasis : 'width'] = scope.rWidth + 'px'; }); - scope.$watch('rHeight', function(value){ + scope.$watch('rHeight', function (value) { element[0].style[scope.rFlex ? flexBasis : 'height'] = scope.rHeight + 'px'; }); @@ -52,9 +63,10 @@ angular.module('angularResizable', []) axis, info = {}; - var updateInfo = function(e) { - info.width = false; info.height = false; - if(axis === 'x') + var updateInfo = function (e) { + info.width = false; + info.height = false; + if (axis === 'x') info.width = parseInt(element[0].style[scope.rFlex ? flexBasis : 'width']); else info.height = parseInt(element[0].style[scope.rFlex ? flexBasis : 'height']); @@ -62,45 +74,52 @@ angular.module('angularResizable', []) info.evt = e; }; - var getClientX = function(e) { + var getClientX = function (e) { return e.touches ? e.touches[0].clientX : e.clientX; }; - var getClientY = function(e) { + 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); - switch(dragDir) { + var dragging = function (e) { + var prop, newHeight, newWidth, offset = axis === 'x' ? start - getClientX(e) : start - getClientY(e); + switch (dragDir) { case 'top': + newHeight = h + (offset * vy); prop = scope.rFlex ? flexBasis : 'height'; - element[0].style[prop] = h + (offset * vy) + 'px'; + element[0].style[prop] = (scope.rMaxHeight && scope.rMaxHeight < newHeight) ? scope.rMaxHeight : newHeight + 'px'; break; case 'bottom': + newHeight = h - (offset * vy); prop = scope.rFlex ? flexBasis : 'height'; - element[0].style[prop] = h - (offset * vy) + 'px'; + element[0].style[prop] = (scope.rMinHeight && scope.rMinHeight > newHeight) ? scope.rMinHeight : newHeight + 'px'; break; case 'right': + newWidth = w - (offset * vx); prop = scope.rFlex ? flexBasis : 'width'; - element[0].style[prop] = w - (offset * vx) + 'px'; + element[0].style[prop] = (scope.rMaxWidth && scope.rMaxWidth < newHeight) ? scope.rMaxWidth : newWidth + 'px'; break; case 'left': + newWidth = w + (offset * vx); prop = scope.rFlex ? flexBasis : 'width'; - element[0].style[prop] = w + (offset * vx) + 'px'; + element[0].style[prop] = (scope.rMinWidth && scope.rMinWidth > newHeight) ? scope.rMinWidth : newWidth + 'px'; break; } updateInfo(e); - function resizingEmit(){ + + function resizingEmit () { scope.$emit('angular-resizable.resizing', info); } + if (scope.rNoThrottle) { resizingEmit(); } else { throttle(resizingEmit); } }; - var dragEnd = function(e) { + + var dragEnd = function (e) { updateInfo(); scope.$emit('angular-resizable.resizeEnd', info); scope.$apply(); @@ -110,7 +129,8 @@ angular.module('angularResizable', []) document.removeEventListener('touchmove', dragging, false); element.removeClass('no-transition'); }; - var dragStart = function(e, direction) { + + var dragStart = function (e, direction) { dragDir = direction; axis = dragDir === 'left' || dragDir === 'right' ? 'x' : 'y'; start = axis === 'x' ? getClientX(e) : getClientY(e); @@ -126,8 +146,8 @@ angular.module('angularResizable', []) document.addEventListener('touchmove', dragging, false); // Disable highlighting while dragging - if(e.stopPropagation) e.stopPropagation(); - if(e.preventDefault) e.preventDefault(); + if (e.stopPropagation) e.stopPropagation(); + if (e.preventDefault) e.preventDefault(); e.cancelBubble = true; e.returnValue = false; @@ -143,9 +163,11 @@ angular.module('angularResizable', []) grabber.setAttribute('class', 'rg-' + direction); grabber.innerHTML = inner; element[0].appendChild(grabber); - grabber.ondragstart = function() { return false; }; + grabber.ondragstart = function () { + return false; + }; - var down = function(e) { + var down = function (e) { var disabled = (scope.rDisabled === 'true'); if (!disabled && (e.which === 1 || e.touches)) { // left mouse click or touch screen @@ -157,4 +179,5 @@ angular.module('angularResizable', []) }); } }; - }); + } +})();