code-with-comment.html

<!--
@license
Copyright (c) 2017 Preview-Code. All rights reserved.
This code may only be used under the BSD style license found in LICENSE.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../comments/add-comment.html">
<link rel="import" href="../comments/comment-list.html">
<link rel="import" href="code-highlighter.html">


<dom-module id="code-with-comment">
  <template>

    <style>
      :host {
        display: block
      }

      [hidden] {
        display: none !important;
      }
    </style>

    <code-highlighter id="highlighter" code="{{code}}" language="[[language]]" before-start="{{beforeStart}}" after-start="{{afterStart}}" can-split="true"></code-highlighter>
    <comment-list list="[[comments]]"></comment-list>
    <add-comment on-add-comment="_addComment" hidden="{{hideAddComments}}" project="[[project]]" line-comment="true"></add-comment>
  </template>

  <script>
    Polymer({
      is: 'code-with-comment',
      listeners: {
        'click-line': '_splitCode',
      },
      properties: {
        code: {
          type: String,
          notify: true
        },
        beforeStart: {
          type: Number,
          notify: true
        },
        afterStart: {
          type: Number,
          notify: true
        },
        hideAddComments: {
          type: Boolean,
          value: true
        },
        startLine: Number,
        comments: Array,
        project: Object,
        language: String
      },

      _splitCode: function (e) {
        e.stopPropagation();

        var lineInfo = e.detail;
        if (lineInfo.lineNumber !== this.$.highlighter.amountLines - 1) {
          var x = this.code.split('\n');
          this.code = x.splice(lineInfo.lineNumber + 1, this.code.length).join('\n');

          var newChunk = {
            startLine: this.startLine,
            beforeStart: this.beforeStart,
            afterStart: this.afterStart,
            code: x.join('\n')
          };

          this.beforeStart = lineInfo.beforeStart;
          this.afterStart = lineInfo.afterStart;
          this.startLine = this.startLine + lineInfo.lineNumber + 1;
          this.fire('add-chunk-with-comment', newChunk);
        } else {
          this.hideAddComments = false;
        }
      },

      _addComment: function (e) {
        var newComment = {};
        newComment.body = e.detail.body;
        newComment.position = this.startLine + this.$.highlighter.amountLines - 1;
        newComment.type = 'line';
        var stop = e.detail.stopLoading;
        e.stopPropagation();

        var submit = function (user) {
          newComment.user = user;
          newComment.created_at = new Date();
          this.push('comments', newComment);
        }.bind(this);

        this.fire('add-comment', { comment: newComment, stopLoading: stop, onSuccess: submit });
      }
    });
  </script>
</dom-module>