Removed styles, Updated example and README.md

io-developer · Nov 8, 2017 · 034f70f · 034f70f
1 parent 8802904
commit 034f70f
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 79 deletions.
diff --git 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
+<!doctype html>
+<html>
+<head>
+    <script type="text/javascript" src="resizable.js"></script>
+    <script type="text/javascript">
+        resizable.initOnDocumentReady();
+    </script>
+    <style>
+        .js-resizable {
+            -moz-user-select: none;
+            -o-user-select: none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select': none;
+        }
+        .js-resizable-corner {
+            position: absolute;
+            right: 0px;
+            bottom: 0px;
+            width: 10px;
+            height: 10px;
+            background: #000;
+        }
+        .outer {
+            display: block;
+            position: relative;
+            width: 640px;
+            height: 480px;
+            margin: 20px;
+            background-color: #EEE;
+        }
+        .inner {
+            display: block;
+            position: absolute;
+            min-width: 100px;
+            min-height: 50px;
+            padding: 20px;
+        }
+        .inner--1 {
+            left: 100px;
+            top: 100px;
+            width: 300px;
+            height: 200px;
+            background-color: #b1b1ff;
+        }
+        .inner--2 {
+            left: 100px;
+            top: 50px;
+            background-color: #92f192;
+        }
+        .inner--3 {
+            left: 400px;
+            top: 200px;
+            background-color: #ec7777;
+        }
+    </style>
+</head>
+<body>
+    <div class="outer js-resizable-limiter">
+        <div class="inner inner--1 resizable js-resizable-limiter">
+            Content A
+
+            <div class="inner inner--2 js-resizable">
+                Sub-content A
+            </div>
+        </div>
+        <div class="inner inner--3 js-resizable">
+            Content B
+        </div>
+    </div>
+</body>
+</html>
+```
diff --git a/example.html b/example.html
@@ -1,44 +1,73 @@
-<!DOCTYPE HTML>
+<!doctype html>
 <html>
-	<head>
-		<link rel="stylesheet" href="resizable.css"/>
-		<script type="text/javascript" src="resizable.js"></script>
-		<script type="text/javascript">
-			resizable.initOnDocumentReady();
-		</script>
-
-		<style type="text/css">
-			.inner {
-				display: block;
-				position: absolute;
-				min-width: 100px;
-				min-height: 50px;
-				padding: 20px;
-				background: #F0F;
-			}
-
-			.outer {
-				display: block;
-				position: relative;
-				background: #EEE;
-				width: 640px;
-				height: 480px;
-				margin: 20px;
-			}
-		</style>
-	</head>
-	<body>
-		<div class="outer resizable-limiter">
-			<div class="inner resizable resizable-limiter" style="left:100px;top:100px;width:300px;height:200px; background:#00F">
-				Content A
-
-				<div class="inner resizable" style="left:100px;top:50px; background:#0F0">
-					Sub-content A
-				</div>
-			</div>
-			<div class="inner resizable" style="left:400px;top:200px; background:#F00">
-				Content B
-			</div>
-		</div>
-	</body>
+<head>
+    <script type="text/javascript" src="resizable.js"></script>
+    <script type="text/javascript">
+        resizable.initOnDocumentReady();
+    </script>
+    <style>
+        .js-resizable {
+            -moz-user-select: none;
+            -o-user-select: none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+            -ms-user-select: none;
+            user-select': none;
+        }
+        .js-resizable-corner {
+            position: absolute;
+            right: 0px;
+            bottom: 0px;
+            width: 10px;
+            height: 10px;
+            background: #000;
+        }
+        .outer {
+            display: block;
+            position: relative;
+            width: 640px;
+            height: 480px;
+            margin: 20px;
+            background-color: #EEE;
+        }
+        .inner {
+            display: block;
+            position: absolute;
+            min-width: 100px;
+            min-height: 50px;
+            padding: 20px;
+        }
+        .inner--1 {
+            left: 100px;
+            top: 100px;
+            width: 300px;
+            height: 200px;
+            background-color: #b1b1ff;
+        }
+        .inner--2 {
+            left: 100px;
+            top: 50px;
+            background-color: #92f192;
+        }
+        .inner--3 {
+            left: 400px;
+            top: 200px;
+            background-color: #ec7777;
+        }
+    </style>
+</head>
+<body>
+    <div class="outer js-resizable-limiter">
+        <div class="inner inner--1 resizable js-resizable-limiter">
+            Content A
+
+            <div class="inner inner--2 js-resizable">
+                Sub-content A
+            </div>
+        </div>
+        <div class="inner inner--3 js-resizable">
+            Content B
+        </div>
+    </div>
+</body>
 </html>
diff --git a/resizable.css b/resizable.css
diff --git 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