NPM, rewrite

Sphinxxxx · Mar 25, 2018 · 173865a · 173865a
1 parent 40bae0f
commit 173865a
Show file tree

Hide file tree

Showing 11 changed files with 736 additions and 61 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+//For gulpfile.babel.js
+//https://github.com/gulpjs/gulp#use-latest-javascript-version-in-your-gulpfile
+{
+  "presets": [ "env" ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,59 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
diff --git a/LICENSE → LICENSE.md b/LICENSE → LICENSE.md
diff --git a/README.md b/README.md
@@ -3,11 +3,46 @@ Add a resize handle to your CodeMirror editor.
 
 Based on an  [example](https://jsfiddle.net/mindplay/rs2L2vtb/2/) by [Rasmus Schultz](https://github.com/mindplay-dk) ([CodeMirror issue](https://github.com/codemirror/CodeMirror/issues/850)), with some extra options.
 
-## Usage ##
+#### Demo
 
-    var myCodeMirror = CodeMirror.fromTextArea(...);  //..or some other way to create a CodeMirror instance
-    cmResize(myCodeMirror);
+https://rawgit.com/Sphinxxxx/cm-resize/master/demo/index.html  
+https://codepen.io/Sphinxxxx/pen/dVPXdX
 
-## Demo ##
 
-https://codepen.io/Sphinxxxx/pen/dVPXdX
+## Getting Started
+
+#### Installing
+
+* NPM:
+
+  + ```npm install cm-resize --save```
+  + ```import cmResize from 'cm-resize';```
+
+* ..or client-side `<script>`:
+
+```html
+<script src='https://unpkg.com/cm-resize'></script>
+```
+
+#### Usage
+
+```javascript
+var myCodeMirror = CodeMirror.fromTextArea(...);  //..or some other way to create a CodeMirror instance
+cmResize(myCodeMirror);
+```
+
+
+## Options
+
+```javascript
+var handle = cmResize(myCodeMirror, {
+    minWidth:  200,               //Minimum size of the CodeMirror editor.
+    minHeight: 100,
+
+    resizableWidth:  true,        //Which direction the editor can be resized (default: both width and height).
+    resizableHeight: true,
+
+    cssClass: 'cm-resize-handle', //CSS class to use on the *default* resize handle.
+    handle:                       //An element to use as the handler instead of the default one (`cssClass` doesn't apply here).
+});
+```
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>cm-resize demo</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.js'></script>
+        <script src="../dist/cm-resize.js"></script>
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.min.css" />
+        <style>
+            .container {
+              display: inline-block; /* or table */
+              position: relative;
+            }
+
+            .handle {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              z-index: 99;
+              width: 3em;
+              height: 3em;
+              margin: -1.5em;
+              border: .5em solid #bada55;
+              border-radius: 100%;
+              box-sizing: border-box;
+              background: tomato;
+              opacity: .7;
+              cursor: pointer;
+              text-align: center;
+            }
+            .handle::after {
+              content: '⇕';
+              color: black;
+              font-size: 2em;
+              line-height: .9;
+            }
+            .handle#handle-w {
+              bottom: 50%;
+            }
+            .handle#handle-w::after {
+              content: '⇔';
+            }
+            .handle#handle-h {
+              right: 50%;
+            }
+
+            /* Not important */
+            body {
+              background: #444;
+              color: #eee;
+              font-family: sans-serif;
+            }
+            body a {
+              color: skyblue;
+            }
+
+            .CodeMirror, .container {
+              display: inline-block;
+              vertical-align: top;
+              margin: .5em;
+            }
+            .CodeMirror .CodeMirror, .container .CodeMirror {
+              display: block;
+              margin: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <h1><a href="https://github.com/Sphinxxxx/cm-resize">cm-resize</a> demo</h1>
+        <main>
+
+            <textarea id="text1">Example with the default handle.&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;...</textarea>
+
+            <div class="container">
+                <textarea id="text2">Example with custom handles,&#10;and resizableWidth/Height only.&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;&#10;...</textarea>
+
+                <div id="handle-w" class="handle"></div>
+                <div id="handle-h" class="handle"></div>
+            </div>
+
+        </main>
+
+        <script >
+            //Default
+            var cm1 = CodeMirror.fromTextArea(document.querySelector('#text1'));
+            cmResize(cm1);
+
+            //Custom
+            var cm2 = CodeMirror.fromTextArea(document.querySelector('#text2'));
+            cmResize(cm2, {
+                handle: document.querySelector('#handle-w'),
+                resizableHeight: false,
+            });
+            cmResize(cm2, {
+                handle: document.querySelector('#handle-h'),
+                resizableWidth: false,
+                //resizableHeight: false,
+                //minWidth: 200,
+                //minHeight: 100,
+                //cssClass: 'cm-resize-handle',
+            });
+        </script>
+    </body>
+</html>