reload-0.0.0.1: web/bower_components/juicy-ace-editor/kitchen-sink.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><juicy-ace-editor> Kitchen Sink</title>
<script src="//cdn.jsdelivr.net/webcomponentsjs/0.7.10/webcomponents.min.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="stylesheet" href="http://ace.c9.io/demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<script async="true" src="https://use.edgefonts.net/source-code-pro.js"></script>
<link rel="import" href="juicy-ace-editor.html">
</head>
<body>
<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">
<img src="img/icon-customelements.png" alt="Custom Element" style="position:relative;left:-29px;bottom:-9px;">
by Juicy
</a>
<div style="position: absolute; overflow: hidden; top:100px; bottom:0">
<div style="width: 120%; height:100%; overflow-y: scroll">
<table id="controls">
<!-- <tr>
<td>
<label for="doc">Document</label>
</td><td>
<select id="doc" size="1">
</select>
</td>
</tr>
<tr>-->
<td >
<label for="mode">Mode</label>
</td><td><select id="mode" size="1" value="{{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>
<!--<tr>
<td>
<label for="split">Split</label>
</td><td>
<select id="split" size="1">
<option value="none">None</option>
<option value="below">Below</option>
<option value="beside">Beside</option>
</select>
</td>
</tr> -->
<tr>
<td >
<label for="theme">Theme</label>
</td><td>
<select id="theme" size="1" value="{{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>
</tr>
<tr>
<td>
<label for="fontsize">Font Size</label>
</td><td>
<select id="fontsize" size="1" value="{{fontsize::change}}">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px" selected="selected">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>
</td>
</tr>
<!-- <tr>
<td>
<label for="folding">Code Folding</label>
</td><td>
<select id="folding" size="1">
<option value="manual">manual</option>
<option value="markbegin" selected="selected">mark begin</option>
<option value="markbeginend">mark begin and end</option>
</select>
</td>
</tr>
<tr>
<td >
<label for="keybinding">Key Binding</label>
</td><td>
<select id="keybinding" size="1">
<option value="ace">Ace</option>
<option value="vim">Vim</option>
<option value="emacs">Emacs</option>
<option value="custom">Custom</option>
</select>
</td>
</tr> -->
<tr>
<td >
<label for="wrapmode">Wrap Mode</label>
</td><td>
<input type="checkbox" id="wrapmode" checked="{{wrapmode::click}}">
</td>
</tr>
<!-- <tr>
<td >
<label for="soft_wrap">Soft Wrap</label>
</td><td>
<select id="soft_wrap" size="1">
<option value="off">Off</option>
<option value="40">40 Chars</option>
<option value="80">80 Chars</option>
<option value="free">Free</option>
</select>
</td>
</tr>
<tr><td colspan="2">
<table id="more-controls">
<tr>
<td>
<label for="select_style">Full Line Selection</label>
</td><td>
<input type="checkbox" name="select_style" id="select_style" checked>
</td>
</tr>
<tr>
<td>
<label for="highlight_active">Highlight Active Line</label>
</td><td>
<input type="checkbox" name="highlight_active" id="highlight_active" checked>
</td>
</tr>
<tr>
<td >
<label for="show_hidden">Show Invisibles</label>
</td><td>
<input type="checkbox" name="show_hidden" id="show_hidden" checked>
</td>
</tr>
<tr>
<td >
<label for="display_indent_guides">Show Indent Guides</label>
</td><td>
<input type="checkbox" name="display_indent_guides" id="display_indent_guides" checked>
</td>
</tr>
<tr>
<td >
<label for="show_hscroll">Persistent HScroll</label>
</td><td>
<input type="checkbox" name="show_hscroll" id="show_hscroll">
<label for="show_hscroll">VScroll</label>
<input type="checkbox" name="show_vscroll" id="show_vscroll">
</td>
</tr>
<tr>
<td >
<label for="animate_scroll">Animate scrolling</label>
</td><td>
<input type="checkbox" name="animate_scroll" id="animate_scroll">
</td>
</tr>
<tr>
<td >
<label for="show_gutter">Show Gutter</label>
</td><td>
<input type="checkbox" id="show_gutter" checked>
</td>
</tr>
<tr>
<td >
<label for="show_print_margin">Show Print Margin</label>
</td><td>
<input type="checkbox" id="show_print_margin" checked>
</td>
</tr>-->
<tr>
<td >
<label for="soft_tab">Use Soft Tab</label>
</td><td>
<input type="checkbox" id="soft_tab" checked="{{softtabs::click}}">
</td>
</tr>
<tr>
<td >
<label for="tabsize">Tab Size</label>
</td><td>
<input type="text" id="tabsize" value="{{tabsize::input}}" placeholder="4">
</td>
</tr>
<!--
<tr>
<td >
<label for="highlight_selected_word">Highlight selected word</label>
</td>
<td>
<input type="checkbox" id="highlight_selected_word" checked>
</td>
</tr>
<tr>
<td >
<label for="enable_behaviours">Enable Behaviours</label>
</td>
<td>
<input type="checkbox" id="enable_behaviours">
</td>
</tr>
<tr>
<td >
<label for="fade_fold_widgets">Fade Fold Widgets</label>
</td>
<td>
<input type="checkbox" id="fade_fold_widgets">
</td>
</tr>
<tr>
<td >
<label for="elastic_tabstops">Enable Elastic Tabstops</label>
</td>
<td>
<input type="checkbox" id="elastic_tabstops">
</td>
</tr>
<tr>
<td >
<label for="isearch">Incremental Search</label>
</td>
<td>
<input type="checkbox" id="isearch">
</td>
</tr>
<tr>
<td >
<label for="highlight_token">Show token info</label>
</td>
<td>
<input type="checkbox" id="highlight_token">
</td>
</tr> -->
<tr>
<td >
<label for="read_only">Read-only</label>
</td>
<td>
<input type="checkbox" id="read_only" checked="{{readonly::click}}">
</td>
</tr>
<!-- <tr>
<td >
<label for="scrollPastEnd">Scroll Past End</label>
</td>
<td>
<input type="checkbox" id="scrollPastEnd" checked>
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Edit Snippets" onclick="env.editSnippets()">
</td>
</tr>
</table>
</td></tr> -->
<tr>
<td colspan="2">
<input type="button" value="Stamp values" on-click="stampValues">
</td>
</tr>
</table>
</div>
</div>
</div>
<juicy-ace-editor
id="editor-container"
theme$="{{theme}}"
mode$="{{mode}}"
fontsize$="{{fontsize}}"
readonly$="{{readonly}}"
softtabs$="{{softtabs}}"
tabsize$="{{tabsize}}"
wrapmode$="{{wrapmode}}"
>[[text]]</juicy-ace-editor>
</template>
<script type="text" id="editorInnerHTML">Type your code here, to test.
<juicy-ace-editor{{theme}}{{mode}}{{fontsize}}{{readonly}}{{softtabs}}{{tabsize}}{{wrapmode}}
>Type your code here... </juicy-ace-editor>
<strong>Please, note that all those attributes are optional.</strong>
Sorry I was to lazy to get through http://ace.c9.io/build/kitchen-sink/demo.js ;)
</script>
<script type="text/javascript">
var domBind = document.querySelector("template")
domBind.softtabs= true;
domBind.mode= "ace/mode/html";
var templateText = document.querySelector("#editorInnerHTML").innerText;
domBind.stampValues = function(){
domBind.text = templateText.replace(/{{([^}]+)}}/g, function(pat, match){
return domBind[match] !== undefined ? "\n\t " +match + '="' + domBind[match] +'"' : "";
});
};
domBind.stampValues();
</script>
</body>
</html>