Merge pull request #2 from fluxio/0811-merge-juicy-polymer-1.0

08-11 merge juicy polymer 1.0
fluxio · Aug 12, 2015 · a320a4d · a320a4d
2 parents ee8704f + 92ffe9a
commit a320a4d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # &lt;juicy-ace-editor&gt;
 
-> Even <strong>more</strong> embeddable code editor. 
-> Custom Element - just one tag, and no JS needed to provide 
+> Even <strong>more</strong> embeddable code editor.
+> Custom Element - just one tag, and no JS needed to provide
 > [Ace](http://ace.c9.io/) - The High Performance Code Editor
 
 ## Demo
@@ -21,6 +21,9 @@ Besides Ace features, `<juicy-ace-editor>` does:
 
 You can still fiddle with Ace editor programmatically using `<juicy-ace-editor>.editor`.
 
+## Polymer 1.0
+
+It works in Polymer 1.0 as well, you can checkout [polymer_1.0](https://github.com/Juicy/juicy-ace-editor/tree/polymer_1.0) branch
 
 ## Install
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "juicy-ace-editor",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Custom Element with Ace(http://ace.c9.io/) code editor",
   "license": "MIT",
   "main": "src/juicy-ace-editor.html",
@@ -17,8 +17,7 @@
     "ace/src-noconflict",
     "img"
   ],
-  "devDependencies": {
-    "polymer": "Polymer/polymer#~1.0.6",
+  "dependencies": {
     "webcomponentsjs": "~0.7.10"
   },
 

diff --git a/kitchen-sink.html b/kitchen-sink.html
@@ -14,7 +14,7 @@
     <link rel="import" href="src/juicy-ace-editor.html">
 </head>
 <body>
-<template bind>
+<template is="dom-bind">
 <div id="optionsPanel" style="position:absolute;height:100%;width:260px;text-align:right;">
   <a href="http://juicy.github.io/juicy-ace-editor/" style="color:white;text-decoration:none;">
     <img id="c9-logo" src="http://ace.c9.io/doc/site/images/ace-logo.png" style="width:134px;margin:8px 0 -3px 63px;" alt="Ace Editor">
@@ -36,7 +36,7 @@
     <tr>-->
       <td >
         <label for="mode">Mode</label>
-      </td><td><select id="mode" size="1" value="{{mode}}">
+      </td><td><select id="mode" size="1" value="{{model.mode::change}}">
         <option value="ace/mode/abap">ABAP</option><option value="ace/mode/actionscript">ActionScript</option><option value="ace/mode/ada">ADA</option><option value="ace/mode/apache_conf">Apache Conf</option><option value="ace/mode/asciidoc">AsciiDoc</option><option value="ace/mode/assembly_x86">Assembly x86</option><option value="ace/mode/autohotkey">AutoHotKey</option><option value="ace/mode/batchfile">BatchFile</option><option value="ace/mode/c9search">C9Search</option><option value="ace/mode/c_cpp">C/C++</option><option value="ace/mode/cirru">Cirru</option><option value="ace/mode/clojure">Clojure</option><option value="ace/mode/cobol">Cobol</option><option value="ace/mode/coffee">CoffeeScript</option><option value="ace/mode/coldfusion">ColdFusion</option><option value="ace/mode/csharp">C#</option><option value="ace/mode/css">CSS</option><option value="ace/mode/curly">Curly</option><option value="ace/mode/d">D</option><option value="ace/mode/dart">Dart</option><option value="ace/mode/diff">Diff</option><option value="ace/mode/dot">Dot</option><option value="ace/mode/erlang">Erlang</option><option value="ace/mode/ejs">EJS</option><option value="ace/mode/forth">Forth</option><option value="ace/mode/ftl">FreeMarker</option><option value="ace/mode/gherkin">Gherkin</option><option value="ace/mode/glsl">Glsl</option><option value="ace/mode/golang">Go</option><option value="ace/mode/groovy">Groovy</option><option value="ace/mode/haml">HAML</option><option value="ace/mode/handlebars">Handlebars</option><option value="ace/mode/haskell">Haskell</option><option value="ace/mode/haxe">haXe</option><option value="ace/mode/html">HTML</option><option value="ace/mode/html_ruby">HTML (Ruby)</option><option value="ace/mode/ini">INI</option><option value="ace/mode/jack">Jack</option><option value="ace/mode/jade">Jade</option><option value="ace/mode/java">Java</option><option value="ace/mode/javascript">JavaScript</option><option value="ace/mode/json">JSON</option><option value="ace/mode/jsoniq">JSONiq</option><option value="ace/mode/jsp">JSP</option><option value="ace/mode/jsx">JSX</option><option value="ace/mode/julia">Julia</option><option value="ace/mode/latex">LaTeX</option><option value="ace/mode/less">LESS</option><option value="ace/mode/liquid">Liquid</option><option value="ace/mode/lisp">Lisp</option><option value="ace/mode/livescript">LiveScript</option><option value="ace/mode/logiql">LogiQL</option><option value="ace/mode/lsl">LSL</option><option value="ace/mode/lua">Lua</option><option value="ace/mode/luapage">LuaPage</option><option value="ace/mode/lucene">Lucene</option><option value="ace/mode/makefile">Makefile</option><option value="ace/mode/matlab">MATLAB</option><option value="ace/mode/markdown">Markdown</option><option value="ace/mode/mel">MEL</option><option value="ace/mode/mysql">MySQL</option><option value="ace/mode/mushcode">MUSHCode</option><option value="ace/mode/nix">Nix</option><option value="ace/mode/objectivec">Objective-C</option><option value="ace/mode/ocaml">OCaml</option><option value="ace/mode/pascal">Pascal</option><option value="ace/mode/perl">Perl</option><option value="ace/mode/pgsql">pgSQL</option><option value="ace/mode/php">PHP</option><option value="ace/mode/powershell">Powershell</option><option value="ace/mode/prolog">Prolog</option><option value="ace/mode/properties">Properties</option><option value="ace/mode/protobuf">Protobuf</option><option value="ace/mode/python">Python</option><option value="ace/mode/r">R</option><option value="ace/mode/rdoc">RDoc</option><option value="ace/mode/rhtml">RHTML</option><option value="ace/mode/ruby">Ruby</option><option value="ace/mode/rust">Rust</option><option value="ace/mode/sass">SASS</option><option value="ace/mode/scad">SCAD</option><option value="ace/mode/scala">Scala</option><option value="ace/mode/smarty">Smarty</option><option value="ace/mode/scheme">Scheme</option><option value="ace/mode/scss">SCSS</option><option value="ace/mode/sh">SH</option><option value="ace/mode/sjs">SJS</option><option value="ace/mode/space">Space</option><option value="ace/mode/snippets">snippets</option><option value="ace/mode/soy_template">Soy Template</option><option value="ace/mode/sql">SQL</option><option value="ace/mode/stylus">Stylus</option><option value="ace/mode/svg">SVG</option><option value="ace/mode/tcl">Tcl</option><option value="ace/mode/tex">Tex</option><option value="ace/mode/text">Text</option><option value="ace/mode/textile">Textile</option><option value="ace/mode/toml">Toml</option><option value="ace/mode/twig">Twig</option><option value="ace/mode/typescript">Typescript</option><option value="ace/mode/vbscript">VBScript</option><option value="ace/mode/velocity">Velocity</option><option value="ace/mode/verilog">Verilog</option><option value="ace/mode/xml">XML</option><option value="ace/mode/xquery">XQuery</option><option value="ace/mode/yaml">YAML</option></select>
       </td>
     </tr>
@@ -55,7 +55,7 @@
       <td >
         <label for="theme">Theme</label>
       </td><td>
-        <select id="theme" size="1" value="{{theme}}">
+        <select id="theme" size="1" value="{{model.theme::change}}">
 
                 <optgroup label="Bright"><option value="ace/theme/chrome">Chrome</option><option value="ace/theme/clouds">Clouds</option><option value="ace/theme/crimson_editor">Crimson Editor</option><option value="ace/theme/dawn">Dawn</option><option value="ace/theme/dreamweaver">Dreamweaver</option><option value="ace/theme/eclipse">Eclipse</option><option value="ace/theme/github">GitHub</option><option value="ace/theme/solarized_light">Solarized Light</option><option value="ace/theme/textmate">TextMate</option><option value="ace/theme/tomorrow">Tomorrow</option><option value="ace/theme/xcode">XCode</option><option value="ace/theme/kuroir">Kuroir</option><option value="ace/theme/katzenmilch">KatzenMilch</option></optgroup><optgroup label="Dark"><option value="ace/theme/ambiance">Ambiance</option><option value="ace/theme/chaos">Chaos</option><option value="ace/theme/clouds_midnight">Clouds Midnight</option><option value="ace/theme/cobalt">Cobalt</option><option value="ace/theme/idle_fingers">idle Fingers</option><option value="ace/theme/kr_theme">krTheme</option><option value="ace/theme/merbivore">Merbivore</option><option value="ace/theme/merbivore_soft">Merbivore Soft</option><option value="ace/theme/mono_industrial">Mono Industrial</option><option value="ace/theme/monokai">Monokai</option><option value="ace/theme/pastel_on_dark">Pastel on dark</option><option value="ace/theme/solarized_dark">Solarized Dark</option><option value="ace/theme/terminal">Terminal</option><option value="ace/theme/tomorrow_night">Tomorrow Night</option><option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option><option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option><option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option><option value="ace/theme/twilight">Twilight</option><option value="ace/theme/vibrant_ink">Vibrant Ink</option></optgroup></select>
       </td>
@@ -64,7 +64,7 @@
       <td>
         <label for="fontsize">Font Size</label>
       </td><td>
-        <select id="fontsize" size="1" value="{{fontsize}}">
+        <select id="fontsize" size="1" value="{{model.fontsize::change}}">
           <option value="10px">10px</option>
           <option value="11px">11px</option>
           <option value="12px" selected="selected">12px</option>
@@ -177,14 +177,14 @@
       <td >
         <label for="soft_tab">Use Soft Tab</label>
       </td><td>
-        <input type="checkbox" id="soft_tab" checked="{{softtabs}}">
+        <input type="checkbox" id="soft_tab" checked="{{model.softtabs::click}}">
       </td>
     </tr>
     <tr>
       <td >
         <label for="tabsize">Tab Size</label>
       </td><td>
-        <input type="text" id="tabsize" value="{{tabsize}}" placeholder="4">
+        <input type="text" id="tabsize" value="{{model.tabsize::input}}" placeholder="4">
       </td>
     </tr>
     <!--
@@ -241,7 +241,7 @@
         <label for="read_only">Read-only</label>
       </td>
       <td>
-        <input type="checkbox" id="read_only" checked="{{readonly}}">
+        <input type="checkbox" id="read_only" checked="{{model.readonly::click}}">
       </td>
     </tr>
     <!-- <tr>
@@ -267,20 +267,20 @@
 </div>
   <juicy-ace-editor
       id="editor-container"
-      theme="{{theme}}"
-      mode="{{mode}}"
-      fontsize="{{fontsize}}"
-      readonly="{{readonly}}"
-      softtabs="{{softtabs}}"
-      tabsize="{{tabsize}}">Type your code here, to test.
+      theme$="{{model.theme}}"
+      mode$="{{model.mode}}"
+      fontsize$="{{model.fontsize}}"
+      readonly$="{{model.readonly}}"
+      softtabs$="{{model.softtabs}}"
+      tabsize$="{{model.tabsize}}">Type your code here, to test.
 
    &lt;juicy-ace-editor
-      theme="{{theme}}"
-      mode="{{mode}}"
-      fontsize="{{fontsize}}"
-      readonly="{{readonly}}"
-      softtabs="{{softtabs}}"
-      tabsize="{{tabsize}}"
+      theme$="{{model.theme}}"
+      mode$="{{model.mode}}"
+      fontsize$="{{model.fontsize}}"
+      readonly$="{{model.readonly}}"
+      softtabs$="{{model.softtabs}}"
+      tabsize$="{{model.tabsize}}"
     &gt;Type your code here... &lt;/juicy-ace-editor&gt;
 
   &lt;strong&gt;Please, note that all those attributes are optional.&lt;/strong&gt;
@@ -298,12 +298,10 @@
 
 </template>
 <script type="text/javascript">
-document.addEventListener("polymer-ready", function(){
-    document.querySelector("template").model = {
-      softtabs: true,
-      mode: "ace/mode/html"
-    };
-});
+document.querySelector("template").model = {
+  softtabs: true,
+  mode: "ace/mode/html"
+};
 </script>
 
 </body>

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.0.5",
+	"version": "1.0.1",
 	"private": true,
 	"devDependencies": {
 		"grunt": "^0.4.5",

diff --git a/src/juicy-ace-editor.html b/src/juicy-ace-editor.html
@@ -1,7 +1,7 @@
 <!--
     Custom Element with Ace code editor
     http://juicy.github.io/juicy-ace-editor/
-    version: 0.1.0
+    version: 1.0.1
 -->
 <script src="../ace/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <!-- <script src="../ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script> -->
@@ -92,7 +92,7 @@
         // Could be buggy as editor was also added to Light DOM;
             var observer = new MutationObserver(function(mutations) {
               mutations.forEach(function(mutation) {
-                console.log("observation", mutation.type, arguments, mutations, editor, text);
+                // console.log("observation", mutation.type, arguments, mutations, editor, text);
                 if(mutation.type == "characterData"){
                     editor.setValue(text.data);
                 }