diff --git a/README.md b/README.md index 6790558..3142da2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,81 @@ -resizable.js -============ +# resizable -Pure JS dom element resizing +Pure JS resizing for any binded DOM element. +You can mixin behavior with lib __js-dragndrop__ + +## Example +```html + + + + + + + + +
+
+ Content A + +
+ Sub-content A +
+
+
+ Content B +
+
+ + +``` \ No newline at end of file diff --git a/example.html b/example.html index 67f50bb..c81ee55 100644 --- a/example.html +++ b/example.html @@ -1,44 +1,73 @@ - + - - - - - - - - -
-
- Content A - -
- Sub-content A -
-
-
- Content B -
-
- + + + + + + +
+
+ Content A + +
+ Sub-content A +
+
+
+ Content B +
+
+ \ No newline at end of file diff --git a/resizable.css b/resizable.css deleted file mode 100644 index 5bcf398..0000000 --- a/resizable.css +++ /dev/null @@ -1,20 +0,0 @@ -.resizable { - -moz-user-select: none; - -o-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select': none; -} - -.resizable-limiter { -} - -.resizable-corner { - position: absolute; - right: 0px; - bottom: 0px; - width: 10px; - height: 10px; - background: #000; -} diff --git a/resizable.js b/resizable.js index 2f5694a..899ffab 100644 --- a/resizable.js +++ b/resizable.js @@ -1,7 +1,3 @@ -/** - * repo: https://github.com/io-developer/resizable.js - */ - var resizable = function( elem, limitByParent ) { var cornerElem = document.createElement("div"); cornerElem.className = resizable.resizeCornerClass; @@ -112,9 +108,9 @@ var resizable = function( elem, limitByParent ) { } -resizable.resizableClass = "resizable"; -resizable.resizeLimiterClass = "resizable-limiter"; -resizable.resizeCornerClass = "resizable-corner"; +resizable.resizableClass = "js-resizable"; +resizable.resizeLimiterClass = "js-resizable-limiter"; +resizable.resizeCornerClass = "js-resizable-corner"; resizable.init = function() { diff --git a/resizable.min.js b/resizable.min.js deleted file mode 100644 index 00be608..0000000 --- a/resizable.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * repo: https://github.com/io-developer/resizable.js - */ -var resizable=function(b,e){function f(a,b){return parseFloat(a.getPropertyValue(b).replace(/px/gi,""))}function m(){g=window.getComputedStyle(b,null);c=b.parentNode;h=e;void 0===h&&c&&(h=c.classList.contains(resizable.resizeLimiterClass));c&&(window.getComputedStyle(c,null),n=c.offsetWidth,p=c.offsetHeight)}function q(a,d){if(h){var c=n-b.offsetLeft,e=p-b.offsetTop;a=a>c?c:a;d=d>e?e:d}a-=f(g,"padding-left");a-=f(g,"padding-right");d-=f(g,"padding-top");d-=f(g,"padding-bottom");b.style.width=(0>a? -0:a)+"px";b.style.height=(0>d?0:d)+"px"}function r(a){k(a);document.removeEventListener("mouseup",r);document.removeEventListener("mousemove",k)}function k(a){q(s+a.screenX-t,u+a.screenY-v);a=document.createEvent("Event");a.initEvent("change",!0,!1);for(var d=b.childNodes,c=d.length;c--;)d[c].dispatchEvent(a);b.dispatchEvent(a)}var l=document.createElement("div");l.className=resizable.resizeCornerClass;b.appendChild(l);b.addEventListener("change",function(a){m();q(b.offsetWidth,b.offsetHeight)}); -l.addEventListener("mousedown",function(a){a.stopPropagation();m();s=b.offsetWidth;u=b.offsetHeight;t=a.screenX;v=a.screenY;document.addEventListener("mouseup",r);document.addEventListener("mousemove",k)});var s,u,t,v,g,c,n,p,h};resizable.resizableClass="resizable";resizable.resizeLimiterClass="resizable-limiter";resizable.resizeCornerClass="resizable-corner";resizable.init=function(){for(var b=document.querySelectorAll("."+resizable.resizableClass),e=-1,f=b.length;++e