ace-element.html

<link rel="import" href="../polymer/polymer.html">

<script type="text/javascript" src="../ace-builds/src-min-noconflict/ace.js"></script>
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

<!--
# &lt;ace-element&gt;  <iframe src="https://ghbtns.com/github-btn.html?user=dmonad&repo=ace-element&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
> Polymer Web Component of the awesome [Ace](https://ace.c9.io/#nav=about) editor!

```
bower i --save ace-element
```

This element exposes often used configurations as properties. You can access the ace instance like this:

```javascript
// element.ace exposes the ace javascript instance
document.querySelector('ace-element').ace.setTheme('ace/mode/javascript')
```

@demo demo/index.html
-->

<dom-module id="ace-element">
  <template>
    <style>
      :host {
        position: relative;
        display: block;
        min-height: 100px;
        width: 100%;
      }
      .absoluteHeight {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
      }
    </style>
    <div id="editorContainer"><content /></div>
  </template>

  <script>
    Polymer({
      ready: function () {
        this.ace = ace.edit(this.$.editorContainer)
        this.ace.setOption('minLines', 5)
        var self = this
        if (this.yText != null) {
          this.bindYText(this.yText)
        }
        this._setHighlightActiveLine()
        this._setTheme()
        this._setMode()
        this._setShowInvisibles()
        this._setHideGutter()
        this._setFontSize()
        this._setReadOnly()
        this._setDynamicHeight()
        this._setWrap()
        this._setPrintMarginColumn()
        this._setTabSize()
        this._setSoftTabs()
        var self = this
        this.addEventListener('iron-resize', function () {
          self.ace.resize()
        })
      },
      detached: function () {
        if (this.ace != null && this.ace.yTextBinding != null) {
          this.ace.yTextBinding.unbindAceAll()
        }
      },
      is: 'ace-element',
      behaviors: [Polymer.IronResizableBehavior],
      properties: {
        /**
         * If set, the element will grow when the number of lines increases
         */
        dynamicHeight: {
          type: Boolean,
          value: false,
          notify: true,
          observer: '_setDynamicHeight'
        },
        /**
         * The Ace theme. E.g. Ambiance, Chrome, ..
         * List of all themes [here](https://github.com/ajaxorg/ace/tree/master/lib/ace/theme)
         */
        theme: {
          type: String,
          notify: true,
          observer: '_setTheme'
        },
        /**
         * Editor mode. E.g. JavaScript, Go, C 
         */
        mode: {
          type: String,
          notify: true,
          observer: '_setMode'
        },
        /**
         * Set font size in pixel
         */
        fontSize: {
          type: Number,
          notify: true,
          observer: '_setFontSize'
        },
        /**
         * Whether this instance is read-only
         */
        readOnly: {
          type: Boolean,
          notify: true,
          observer: '_setReadOnly'
        },
        /**
         *  Share the content of the Ace editor using [Yjs](https://github.com/y-js/yjs) and [y-element](https://github.com/y-js/y-element). E.g.
         *
         * ```
<y-element
  connector-name="websockets-client"
  connector-room="ace-testing"
  db-name="memory">
  <y-type
    name="text"
    type="Text"
    data="{{yText}}"></y-type>
</y-element>
<ace-element y-text="{{yText}}"></ace-element>
         * ```
         */
        yText: {
          type: Object,
          observer: 'bindYText'
        },
        /**
         * Whether to show invisible characters
         */
        showInvisibles: {
          type: Boolean,
          observer: '_setShowInvisibles'
        },
        /**
         * Whether to hide the gutter (hide line numbers)
         */
        hideGutter: {
          type: Boolean,
          observer: '_setHideGutter'
        },
        /**
         * Whether to enable line wrapping
         */
        wrap: {
          type: Boolean,
          value: false,
          observer: '_setWrap'
        },
        /**
         * Whether to highlight the active line
         */
        highlightActiveLine: {
          type: Boolean,
          value: true,
          observer: '_setHighlightActiveLine'
        },
        /**
         * Set -1 to not show the print margin
         */
        printMarginColumn: {
          type: Number,
          observer: '_setPrintMarginColumn'
        },
        softTabs: {
          type: Boolean,
          observer: '_setSoftTabs'
        },
        tabSize: {
          type: Number,
          observer: '_setTabSize'
        }
      },
      _setTabSize: function () {
        if (this.ace != null && this.tabSize != null) {
          this.ace.getSession().setTabSize(this.tabSize)
        }
      },
      _setSoftTabs: function () {
        if (this.ace != null && this.softTabs != null) {
          this.ace.getSession().setUseSoftTabs(this.softTabs)
        }
      },
      _setDynamicHeight: function () {
        if (this.ace != null) {
          if (this.dynamicHeight) {
            this.ace.setOption('maxLines', Infinity)
            this.$.editorContainer.classList.remove('absoluteHeight')
          } else {
            this.ace.setOption('maxLines', null)
            this.$.editorContainer.classList.add('absoluteHeight')
          }
        }
      },
      _setHighlightActiveLine: function () {
        if (this.ace != null && this.highlightActiveLine != null) {
          this.ace.setHighlightActiveLine(this.highlightActiveLine)
        }
      },
      _setWrap: function () {
        if (this.ace != null && this.wrap != null) {
          this.ace.getSession().setUseWrapMode(this.wrap)
        }
      },
      _setHideGutter: function () {
        if (this.ace != null && this.hideGutter != null) {
          this.ace.renderer.setShowGutter(!this.hideGutter)
        }
      },
      _setShowInvisibles: function () {
        if (this.ace != null && this.showInvisibles != null) {
          this.ace.setShowInvisibles(this.showInvisibles)
        }
      },
      _setTheme: function () {
        if (this.ace != null && this.theme != null && this.theme.length > 0) {
          this.ace.setTheme('ace/theme/' + this.theme)
        }
      },
      _setMode: function () {
        if (this.ace != null && this.mode != null && this.mode.length > 0) {
          this.ace.getSession().setMode('ace/mode/' + this.mode)
        }
      },
      _setFontSize: function () {
        if (this.ace != null && this.fontSize != null) {
          this.ace.setFontSize(this.fontSize)
        }
      },
      _setReadOnly: function () {
        if (this.ace != null && this.readOnly != null) {
          this.ace.setReadOnly(this.readOnly)
        }
      },
      _setPrintMarginColumn: function () {
        if (this.ace != null && this.printMarginColumn != null) {
          this.ace.setPrintMarginColumn(this.printMarginColumn)
        }
      },
      /**
       * Bind this editor to a [Y.Text](https://github.com/y-js/y-text) type
       */
      bindYText: function (ytext, old) {
        if (old != null && old.type != null && old.type.unbindAll != null) {
          old.type.unbindAceAll()
        }
        if (ytext != null) {
          if (ytext.type != null) {
            ytext = ytext.type
          }
          if (this.ace != null) {
            ytext.unbindAceAll()
            ytext.bindAce(this.ace)
          }
        } else if (this.ace != null && this.ace.yTextBinding != null) {
          this.ace.yTextBinding.unbindAceAll()
        }
      }
    });
  </script>
</dom-module>