Added value, mode, theme, tabSize, and lineNumbers attributes

googlearchive · Jan 16, 2014 · bb406bc · bb406bc
1 parent 1fea71c
commit bb406bc
Showing 1 changed file with 40 additions and 10 deletions.
diff --git a/code-mirror.html b/code-mirror.html
@@ -5,19 +5,34 @@
 -->
 <link rel="import" href="../polymer/polymer.html">
 <script src="codemirror-3.14/lib/codemirror.js"></script>
-<script src="codemirror-3.14/mode/javascript/javascript.js"></script>
 <script src="codemirror-3.14/mode/xml/xml.js"></script>
 <script src="codemirror-3.14/mode/javascript/javascript.js"></script>
 <script src="codemirror-3.14/mode/css/css.js"></script>
 <script src="codemirror-3.14/mode/vbscript/vbscript.js"></script>
 <script src="codemirror-3.14/mode/htmlmixed/htmlmixed.js"></script>
 
-<polymer-element name="code-mirror" attributes="value">
+<polymer-element name="code-mirror" attributes="value mode theme tabSize lineNumbers">
   <template>
     <link rel="stylesheet" href="codemirror-3.14/lib/codemirror.css">
     <link href="codemirror-3.14/theme/ambiance.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/xq-light.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/ambiance-mobile.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/blackboard.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/cobalt.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/eclipse.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/elegant.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/erlang-dark.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/lesser-dark.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/midnight.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/monokai.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/neat.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/night.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/rubyblue.css" rel="stylesheet" />
     <link href="codemirror-3.14/theme/solarized.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/twilight.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/vibrant-ink.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/xq-dark.css" rel="stylesheet" />
+    <link href="codemirror-3.14/theme/xq-light.css" rel="stylesheet" />
+
     <style>
       :host {
         display: block;
@@ -29,22 +44,37 @@
   </template>
   <script>
     Polymer('code-mirror', {
-      skin: '',
+      value: '',
+      mode: 'htmlmixed',
+      theme: 'xq-light',
+      tabSize: 2,
+      lineNumbers: true,
       ready: function() {
         this.mirror = CodeMirror(this.shadowRoot, {
-          value: this.textContent,
-          mode: 'htmlmixed',
-          //theme: "solarized light",
-          theme: 'ambiance',
-          tabSize: 2,
-          lineNumbers: true
+          value: this.value,
+          mode: this.mode,
+          theme: this.theme,
+          tabSize: this.tabSize,
+          lineNumbers: this.lineNumbers
         });
       },
       refresh: function() {
         this.mirror.refresh();
       },
       valueChanged: function() {
         this.mirror.setValue(this.value);
+      },
+      modeChanged: function() {
+        this.mirror.setOption('mode', this.mode);
+      },
+      themeChanged: function() {
+        this.mirror.setOption('theme', this.theme);
+      },
+      tabSizeChanged: function() {
+        this.mirror.setOption('tabSize', this.tabSize);
+      },
+      lineNumbersChanged: function() {
+        this.mirror.setOption('lineNumbers', this.lineNumbers);
       }
     });
   </script>