Merge pull request #14 from PoliteJS/ISSUE-12_ace-editor-autosize

marcopeg · marcopeg · commit 67730efefa05 · 2014-11-05T16:52:05.000+01:00
Issue 12 ace editor autosize
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsbox",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "jquery playground plugin for javascript",
   "main": "Gruntfile.js",
   "directories": {
diff --git a/src/autosize.html b/src/autosize.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+        <title>JSBox - editor auto size</title>
+        
+        <style>
+        body {margin: 2% 10%}
+        .hint {border: 2px solid #218ace; margin: 20px 0;padding:0 20px 20px 20px;}
+        .hint p:last-child {margin-bottom:0}
+        .code {background:#eee;color#eee;padding: 10px 20px;border-radius:5px}
+        div[data-jsbox] {position:relative;border:3px dashed #ddd;padding:20px;border-radius:10px;overflow: hidden}
+        div[data-jsbox]:after {content:"Loading JSBox...";position: absolute;top:0;left:0;display:inline-block;width:100%;height:100%;padding-top: 20pt;background: rgba(255,255,255,.9);text-align: center;font-size: 20pt;color:#bbb;}
+        </style>
+        
+    </head>
+    <body>
+        
+        <h1>JSBox Auto Size</h1>
+        
+        <div class="hint">
+<pre class="code">
+&lt;div data-jsbox data-autosize>
+&lt;div data-jsbox data-autosize minHeight=80 maxHeight=150>
+</pre>
+        </div>
+        
+        <h2>Try it you self:</h2>
+        
+        <!-- JSBox -->
+        <div data-jsbox data-autosize>
+            <pre data-js></pre>
+            <pre data-html></pre>
+            <pre data-css></pre>
+        </div>
+        <!-- // JSBox -->
+        
+        
+        <h2>More Info Online!</h2>
+        
+        <p>
+            <a href="http://politejs.com/jsbox">http://PoliteJS/jsbox</a>
+        </p>
+        
+        
+        
+        
+        <!-- Dependencies -->
+        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
+        
+        <!-- JSBox -->
+        <link rel="stylesheet" href="jsbox/jquery.jsbox.css">
+        <script src="jsbox/jquery.jsbox.js"></script>
+        
+        
+       
+    </body>
+</html>
diff --git a/src/index.html b/src/index.html
@@ -55,6 +55,7 @@ <h2>Available Examples</h2>
             <li><a href="async.html">Handle asynchronous code</a></li>
             <li><a href="code-errors.html">Code errors handling</a></li>
             <li><a href="chai.html">Use ChaiJS Assertions</a></li>
+            <li><a href="autosize.html">Editor auto resize</a></li>
         </ul>
         
         <hr>
diff --git a/src/js/editor-ace.js b/src/js/editor-ace.js
@@ -25,8 +25,10 @@ var aceEditorEngine = {
     var AceEditorDefaults = {
         language: 'txt',
         source: '',
-        sourceDelay: 0,
-        autosizeDelay: 0
+        
+        autosize: false,
+        minHeight: false,
+        maxHeight: false
     };
     
     var AceEditor = {
@@ -72,10 +74,19 @@ var aceEditorEngine = {
             this.ace.on('focus', function() {
                 publish(self, 'focus');
             });
+            
             this.ace.on('blur', function() {
                 publish(self, 'blur');
             });
             
+            if (this.options.autosize === true) {
+                setTimeout(function() {
+                    self.ace.on('change', editorAutosize.bind(self));
+                    self.ace.resize(true);
+                    editorAutosize.call(self);
+                }, 0);
+            }
+            
             this.setSource(this.options.source, true);
             
         },
@@ -104,6 +115,18 @@ var aceEditorEngine = {
     };
     
     
+    function editorAutosize() {
+        var height = this.ace.getSession().getScreenLength() * this.ace.renderer.lineHeight + this.ace.renderer.scrollBar.getWidth();
+        if (this.options.minHeight !== false && height < this.options.minHeight) {
+            height = this.options.minHeight;
+        }
+        if (this.options.maxHeight !== false && height > this.options.maxHeight) {
+            height = this.options.maxHeight;
+        }
+        this.el.style.height = height.toString() + 'px';
+        this.ace.resize();
+    }
+    
     
     // Factory Method
     aceEditorEngine.create = function(options) {
diff --git a/src/js/jsbox.js b/src/js/jsbox.js
@@ -190,18 +190,25 @@ function disposeSandbox(box) {
 // ------------------------------------- //
 
 function initEditors(box) {
-    Object.keys(box.options.editors).forEach(function(editorName) {
+    var supportedEditors = ['js','css','html'];
+    Object.keys(box.options.editors).filter(function(editorName) {
+        return supportedEditors.indexOf(editorName) !== -1;
+    }).forEach(function(editorName) {
         if (box.options.editors[editorName] === false) {
             return;
         }
         var source = '';
         if (typeof box.options.editors[editorName] === 'string') {
             source = box.options.editors[editorName];
         }
-        box.editors[editorName] = box.options.engines.editor.create({
+        var options = {
             language: editorName,
-            source: source
-        });
+            source: source,
+            autosize: box.options.editors.autosize,
+            minHeight: box.options.editors.minHeight,
+            maxHeight: box.options.editors.maxHeight
+        };
+        box.editors[editorName] = box.options.engines.editor.create(options);
         box.editors[editorName].on('cmd-execute', box.execute.bind(box));
         box.editors[editorName].on('cmd-reset', box.reset.bind(box));
     });
diff --git a/src/js/plugin.js b/src/js/plugin.js
@@ -167,7 +167,22 @@
             }
         }
         
-//        console.log(config);
+        // autosize
+        
+        if ($el.is('[data-autosize]')) {
+            config.editors.autosize = true;  
+            config.editors.minHeight = 50;
+        }
+        
+        if ($el.is('[data-minHeight]')) {
+            config.editors.minHeight = $el.attr('data-minHeight');
+        }
+        
+        if ($el.is('[data-maxHeight]')) {
+            config.editors.maxHeight = $el.attr('data-maxHeight');
+        }
+        
+        //console.log(config);
         return config;
     }
     

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "jsbox",`
`3`		`- "version": "3.2.1",`
	`3`	`+ "version": "3.2.2",`
`4`	`4`	`"description": "jquery playground plugin for javascript",`
`5`	`5`	`"main": "Gruntfile.js",`
`6`	`6`	`"directories": {`