#1 Closed, Ready for 1.2.0

Author: Philipp

README.md

@@ -12,13 +12,15 @@ In order to make CodeMirror work correctly, do not forget to start your HTML pag
 
 ##### Initialize
 
-`options` can be `null` or contain original CodeMirror settings
+`codemirrorOptions` can be `null` or contain original CodeMirror settings
+
+`jqueryCodemirroOptions` can be `null` (ignored)
 
 ```
- $(...).codemirrorInit(options);
+ $(...).codemirrorInit(codemirrorOptions, jqueryCodemirrorOptions);
 ```
 
-`defaults` are:
+`codemirrorDefaults` are:
 
 ```
 mode: "text/html",
@@ -28,10 +30,29 @@ lineWrapping: true
 
 `NB!` Do not forget to add required mode `mode/xml/xml.js`
 
-You can set configs in DOM element attribute `codemirror-config`
+`jqueryCodemirrorDefaults` are:
+
+```
+height: "auto"; (Set in CSS)
+```
+
+Height options are `auto` and `inherit`
+
+When `auto`, CodeMirror container is auto resized. (Container's CSS parameter `height` value should be `auto`! May have `min-height`, should not ave `max-height`)
+
+When `inherit`, CodeMirror container is not resized, scroll-bar appears. (Container's CSS `height` value should not be `auto`! )
+
+
+You can set CodeMirror configs in DOM element attribute `codemirror-config` or `codemirror`. Latest is preferred.
+
+``` 
+<div codemirror='{"autofocus": true, "value": "Hello world"}'></div>
+```
+
+You can set plugin configs in DOM element attribute `jquery-codemirror-config` or `jquery-codemirror`. Latest is preferred.
 
 ``` 
-<div codemirror-config='{"autofocus": true, "value": "Hello world"}'></div>
+<div jquery-codemirror='{"height": "inherit"}'></div>
 ```
 
 ##### CodeMirror methods

index.html

@@ -22,6 +22,21 @@
         .code-snippet-group-2 {
             margin: 10px;
             width: 802px;
+            height: 150px;
+            border: 1px solid black;
+        }
+
+        .code-snippet-group-2 {
+            margin: 10px;
+            width: 802px;
+            height: 150px;
+            border: 1px solid black;
+        }
+
+        .code-snippet-group-3 {
+            margin: 10px;
+            width: 802px;
+            height: 150px;
             border: 1px solid black;
         }
 
@@ -35,14 +50,18 @@
 
 <h3>'philsweb.jquery-codemirror' Demo</h3>
 
-<div class="code-snippet-group-1" first style="min-height:50px;"></div>
+<div class="code-snippet-group-1" first style="min-height:100px;"></div>
 
 <div class="code-snippet-group-1" second
      codemirror-config='{"cursorHeight": ".5", "autofocus": true, "value": " Hello world"}'></div>
 
-<div class="code-snippet-group-1" third></div>
+<div class="code-snippet-group-1" third jquery-codemirror-config='{"height":"inherit"}' style="height:150px;"></div>
+
 
-<div class="code-snippet-group-2" codemirror-config='{"firstLineNumber": -5}'></div>
+<div class="code-snippet-group-2" jquery-codemirror='{"height":"inherit"}' codemirror='{"firstLineNumber": -5}'></div>
+
+
+<div class="code-snippet-group-3"></div>
 
 </body>
 
@@ -72,5 +91,7 @@ <h3>'philsweb.jquery-codemirror' Demo</h3>
 
 
         $('.code-snippet-group-2').codemirrorInit({value: "<div> Hello world </div>\n\n\n"});
+
+        $('.code-snippet-group-3').codemirrorInit({value: "<div> Hello world </div>\n\n\n"}, {height: "inherit"});
     });
 </script>

philsweb.codemirror.css

@@ -4,7 +4,7 @@
 
 .codemirror-buttons-wrapper {
     position: relative;
-    z-index: 9999; /* @todo Should be configured */
+    z-index: 9999;
     display: none;
 }
 

philsweb.jquery-codemirror.js

@@ -7,7 +7,7 @@
  @license Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
  */
 (function ($) {
-    $.fn.codemirrorInit = function (options) {
+    $.fn.codemirrorInit = function (codemirrorOptions, jqueryCodemirrorOptions) {
 
         $(this).init.prototype = $.extend({}, $(this).init.prototype, {
 
@@ -41,15 +41,30 @@
             }
         });
 
-        var defaults = {
+        // Defaults
+
+        var codemirrorDefaults = {
             mode: "text/html",
             lineNumbers: true,
             lineWrapping: true
         };
 
-        function getLocalConfigs(element) {
-            var configJson = $(element).attr('codemirror-config');
 
+        // Private methods
+
+        function getConfigAttrTitle(element, preferredTitle) {
+            if ($(element).is("[" + preferredTitle + "]")) {
+                return preferredTitle;
+            }
+
+            if ($(element).is("[" + preferredTitle + "-config" + "]")) {
+                return preferredTitle + "-config";
+            }
+
+            return null;
+        }
+
+        function parseJsonConfig(configJson) {
             if (configJson === undefined) {
                 return {};
             }
@@ -67,7 +82,24 @@
             }
 
             return {};
+        }
+
+        function getCodemirrorElementConfigs(element) {
 
+            var codemirrorConfigAttrTitle = getConfigAttrTitle(element, 'codemirror');
+
+            var configJson = (codemirrorConfigAttrTitle === null) ? undefined : $(element).attr(codemirrorConfigAttrTitle);
+
+            return parseJsonConfig(configJson);
+        }
+
+        function getJqueryCodemirrorElementConfigs(element) {
+
+            var codemirrorConfigAttrTitle = getConfigAttrTitle(element, 'jquery-codemirror');
+
+            var configJson = (codemirrorConfigAttrTitle === null) ? undefined : $(element).attr(codemirrorConfigAttrTitle);
+
+            return parseJsonConfig(configJson);
         }
 
         function copyToClipboard(value) {
@@ -79,13 +111,18 @@
             $temp.remove();
         }
 
+        // Element iteration
+
         return this.each(function () {
 
-            var basicConfigs = $.extend({}, defaults, options);
-            var localConfigs = getLocalConfigs(this);
-            var configs = $.extend({}, basicConfigs, localConfigs);
+            var basicCodemirrorConfigs = $.extend({}, codemirrorDefaults, codemirrorOptions);
+            var elementCodemirrorConfigs = getCodemirrorElementConfigs(this);
+            var codemirrorConfigs = $.extend({}, basicCodemirrorConfigs, elementCodemirrorConfigs);
+
+            $.data(this, 'codemirror', CodeMirror(this, codemirrorConfigs));
 
-            $.data(this, 'codemirror', CodeMirror(this, configs));
+            var jqueryCodemirrorConfigs = $.extend({}, jqueryCodemirrorOptions, getJqueryCodemirrorElementConfigs(this));
+            $(this).children('.CodeMirror').css(jqueryCodemirrorConfigs);
 
             // Buttons
             var buttonsWrapper = $('<div>');