polymer-quill-bubble-firebase.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../polymer/lib/utils/async.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="polymer-quill-import.html">
<link rel="import" href="polymer-quill-styles-bubble.html">
<link rel="import" href="polymer-quill-styles.html">
<link rel="import" href="firebase-upload.html">
<link rel="import" href="polymer-quill-icons.html">

<!--
## Polymer Quill Rich Text Editor - Bubble toolbar like Medium WIP

`<polymer-quill-bubble-firebase>` creates a Polymer Quill Rich Text Editor - Bubble popup toolbar like Medium.
Max-height is set to `auto` and padding-bottom to `50px` so toolbar will popup correctly.

Quill is a free, open source WYSIWYG editor built for the modern web.
With its modular architecture and expressive API, it is completely customizable to fit any need.
Learn more at http://quilljs.com/.

### Examples

#### Defaults (stores as Deltas every 2 seconds, does not show results, 100px height)

    <polymer-quill-bubble-firebase
      content='{"ops":[{"insert":"Hello World"},{"attributes":{"header":2},"insert":"\n"}]}'>
    </polymer-quill-bubble-firebase>

#### Custom (stores as HTML every 5 seconds, show results)

    <polymer-quill-bubble-firebase
      content="<h2>Hello World</h2>"
      store-as="html"
      store-interval="5000"
      show-results>
    </polymer-quill-bubble-firebase>

#### Demo example

```html
<style is="custom-style">
  polymer-quill.grow {
    --polymer-quill-editor-min-height: 200px;
  }
</style>
<h2>Standard Toolbar, Show Results, Auto Grow, Custom min-height (200px), Save as Deltas, Save every 1 second</h2>
<polymer-quill-bubble-firebase
  content='{"ops":[{"insert":"Hello World! - Store as Delta"},{"attributes":{"header":2},"insert":"\n"}]}'
  class="grow"
  store-as="delta"
  save-interval="1000"
  show-results
  file-path="files/">
</polymer-quill-bubble-firebase>

<h2>Standard Toolbar, Hide Results, Default height (50px), Save as HTML, Save every 2 seconds</h2>
<polymer-quill-bubble-firebase
  content="<h2>Hello World! - Store as HTML</h2>"
  store-as="html"
  file-path="files/">
</polymer-quill-bubble-firebase>
```


### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--polymer-quill-scrolling-height`     | Custom height for scrolling container         | `100%`
`--polymer-quill-scrolling-min-height` | Custom min-height for scrolling container     | `100%`
`--polymer-quill-editor-padding`    | Custom padding for editor        | `20px`
`--polymer-quill-editor-height`     | Custom height for editor         | `auto`
`--polymer-quill-editor-max-height` | Custom max-height for editor     | `none`
`--polymer-quill-editor-min-height` | Custom min-height for editor     | `50px`
`--polymer-quill-editor-border`     | Custom min-height for editor     | `solid 1px #ccc`
`--polymer-quill`                   | Mixin applied to the editor      | `{}`

Not used anymore `--polymer-quill-editor-overflow`   | Custom overflow for editor       | `scroll`

### Install

    bower install --save polymer-quill

@demo demo/firebase.html
-->

<dom-module id="polymer-quill-bubble-firebase">
  <template>
    <style include="polymer-quill-styles-bubble polymer-quill-styles">
      :host {
        --calculated-polymer-quill-scrolling-height: var(--polymer-quill-scrolling-height, 100%);
        --calculated-polymer-quill-scrolling-min-height: var(--polymer-quill-scrolling-min-height, 100%);
        --calculated-polymer-quill-editor-height: var(--polymer-quill-editor-height, auto);
        --calculated-polymer-quill-editor-max-height: var(--polymer-quill-editor-max-height, none);
        --calculated-polymer-quill-editor-min-height: var(--polymer-quill-editor-min-height, 100px);
        --calculated-polymer-quill-editor-border: var(--polymer-quill-editor-border, solid 1px #ccc);
        --calculated-polymer-quill-editor-padding: var(--polymer-quill-editor-padding, 30px 20px);
        /*--calculated-polymer-quill-editor-overflow: var(--polymer-quill-editor-overflow, scroll);*/
        display: block;
        @apply --polymer-quill;
      }
      /* Specify our own scrolling container */
      #scrollingContainer {
        height: var(--calculated-polymer-quill-scrolling-height);
        min-height: var(--calculated-polymer-quill-scrolling-min-height);
        overflow-y: auto;
        border: var(--calculated-polymer-quill-editor-border);
        padding: 2px;
      }
      #editor {
        height: var(--calculated-polymer-quill-editor-height);
        max-height: var(--calculated-polymer-quill-editor-max-height);
        min-height: var(--calculated-polymer-quill-editor-min-height);
        /*overflow: var(--calculated-polymer-quill-editor-overflow);*/
        padding: var(--calculated-polymer-quill-editor-padding);
      }
      #editor .ql-editor {
        overflow-y: visible; 
      }
      .results {
        padding: 20px 10px;
        overflow-x: scroll;
      }
      .disabled {
        /*border: 1px solid #ccc !important;*/
        opacity: 0.85;
      }

      #dialogBody {
        font-size: 18px;
        line-height: 38px;
        color: #3f51b5;
        text-align: center;
      }
      paper-icon-button {
        color: #ff8f00;
        margin-left: 5px;
      }

      #helpContainer {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 90%; 
        max-width: 680px;
        color: #ff8f00;
      }
      #helpSteps {
        position: absolute;
        top: 1px;
        right: 30px
      }
      #helpClear {
        position: absolute;
        top: 165px;
        right: 37px
      }

    </style>

    <paper-dialog id="dialogUpload" always-on-top="true" mode="true" style="width: 90%; max-width: 680px;">
      <h2 id="dialogHeader">Upload Image
        <paper-icon-button class="helpButton" icon="polymer-quill-icons:help" title="Help Toggle" on-click="toggleHelp"></paper-icon-button>
      </h2>
      <div id="dialogBody">
        <firebase-upload id="firebaseUpload" url="{{url}}" 
          max-file-size="{{maxFileSize}}" max-files="{{maxFiles}}" 
          download-url="{{downloadUrl}}" file-path="{{filePath}}"
          app-name="{{appName}}" plan-id="{{planId}}">
        </firebase-upload>
      <div title="Max Image size in Kilobytes" style="color: black; font-size: 14px;" hidden>Max file size: {{convertToKB(maxFileSize)}}</div>
      <img src="{{downloadUrl}}" title="{{downloadUrl}}" height="98px;" style="margin-top: 20px;">
      <div title="Image size in Kilobytes" style="font-size: 14px;">{{size}}</div>
      </div>
      <div class="buttons">
        <paper-button dialog-dismiss autofocus>Cancel</paper-button>
        <paper-button dialog-confirm on-click="uploadOk" raised>Insert Image</paper-button>
      </div>
      <div id="helpContainer" hidden$="{{hideHelp}}">
        <div id="helpSteps">
          <div>1. Press SELECT FILE button or Drop file (to upload image)</div>
          <div>2. Press INSERT IMAGE button to insert image</div>
          <div> Or press CANCEL button NOT to insert image</div>
        </div>
        <div id="helpClear">Tap X button to clear image ↑</div>
      </div>
    </paper-dialog>
    
    <div id="scrollingContainer"> 
      <div id="editor" class$="{{disabledClass}}">{{content}}</div>
    </div>
    <div id="results" class="results" hidden$="[[!showResults]]">RESULTS: {{content}}</div>
    <div id="resultsHTML" class="results" hidden$="[[!showHtml]]">HTML: {{html}}</div>

  </template>

  <script>
    Polymer({

      is: 'polymer-quill-bubble-firebase',

      /**
        * Fired when element is attached.
        *
        * @event attached
        */

      /**
        * Fired when content has changed.
        *
        * @event change
        */

      /**
        * Fired when element is ready.
        *
        * @event ready
        */

      listeners: {
        'download-url-change': 'downloadUrlChange',
        'paste': 'onPaste'
      },  
      properties: {
        /**
         * Content which is in Deltas or HTML format.
         */
        content: {
          type: String,
          value: '',
          notify: true,
          // reflectToAttribute: true,
          observer: '_contentChanged'
        },
        /**
         * Content which is in HTML format.
         */
        html: {
          type: String,
          value: '',
          notify: true,
          // reflectToAttribute: true,
        },
        /**
         * Store as Quill Deltas or HTML.
         * Options are `delta`, `html`.
         */
        storeAs: {
          type: String,
          value: 'delta',
          notify: true,
        },
        /**
         * Save Interval in milliseconds.
         * Default is `2000`.
         */
        saveInterval: {
          type: Number,
          value: 2000,
          notify: true,
        },
        /**
         * Delay load of content in milliseconds.
         * Provide time for loading data from polymerfire or iron-ajax.
         * Default is `10`.
         */
        delay: {
          type: Number,
          value: 10,
          notify: true,
        },
        /**
         * Show Results below editor of saves in Delta or HMTL format.
         * Default is `false`.
         */
        showResults: {
          type: Boolean,
          value: false,
          notify: true,
        },
        /**
         * Show Results below editor of saves in HMTL format.
         * Default is `false`.
         */
        showHtml: {
          type: Boolean,
          value: false,
          notify: true,
        },
        /**
         * Set ability for user to edit, via input devices like the mouse or keyboard. Does not affect capabilities of API calls.
         * Default is `true`.
         */
        enable: {
          type: String,
          value: 'true',
          notify: true,
        },
        /**
         * Whether to instantiate the editor to read-only mode.
         * Default is `false`.
         */
        readOnly: {
          type: Boolean,
          value: false,
          notify: true,
        },
        /**
         * Disable Class title.
         * Default is ``.
         */
        disabledClass: {
          type: String,
          value: 'style-scope polymer-quill ql-container ql-bubble'
        },
        /**
         * Whether to use content reset for two way data binding.
         * Default is `false`.
         */
        useContentReset: {
          type: Boolean,
          value: false,
          notify: true,
        },
        /**
         * Placeholder for empty editor.
         * Default is `Compose an epic...`.
         */
        placeholder: {
          type: String,
          value: 'Compose an epic...',
          notify: true,
        },
        /**
         * Toolbar Options.
         * Default is `above`.
         */
        toolbarOptions: {
          type: Object,
          notify: true,
          value: [
            [{ header: [1, 2, 3, 4, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'align': [] }],
            [{ 'indent': '-1'}, { 'indent': '+1' }], 
            ['link', 'blockquote', 'code-block', 'image', 'video'],
            [{ 'color': [] }, { 'background': [] }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['clean']
          ],
        },
        /**
         * Link for Uploaded Image.
         * Default is `null`.
         */
        downloadUrl: {
          type: String,
          notify: true
        },
        /**
         * Size in Kilobytes for Uploaded Image.
         * Default is `null`.
         */
        size: {
          type: String,
          value: null,
          notify: true
        },
        /**
        * Specifies file path for upload. Default is 
        * 'root'.
        */
        filePath: {
          type: String,
          value: '',
          notify: true
        },
        /**
        * Specifies the types of files that the server accepts.
        * Syntax: file_extension|audio/*|video/*|image/*|media_type
        */
        accept: {
          type: String,
          value: 'image/*'
        },
        /**
        * Limit of files to upload, by default it is unlimited. If the value is
        * one, nomultiple is true.
        */
        maxFiles: {
          type: Number,
          value: Infinity
        },
        /**
        * Specifies the maximum file size allowed to upload. Default is
        * unlimited.
        */
        maxFileSize: {
          type: Number,
          value: Infinity
        },
        /**
        * Hide or show help. Default is
        * true.
        */
        hideHelp: {
          type: Boolean,
          value: true,
          notify: true
        },
        /**
        * Specifies Firebase App Name. Default is
        * 'polymer-quill'.
        */
        appName: {
          type: String,
          value: 'polymer-quill',
          notify: true
        },
        /**
        * Firebase URL. https://<YOUR FIREBASE>.firebaseio.com.
        */
        url: {
          type: String,
          value: '',
          notify: true
        },
        /**
        * Plan ID for upload.
        */
        planId: {
          type: String
        }
      },

      ready: function() {
        // console.log('bubble firebase ready');
        var Delta = Quill.import('delta');
        this.quill = new Quill(this.$.editor, {
          modules: {
            toolbar: this.toolbarOptions
          },
          theme: 'bubble',
          strict: false,
          readOnly: this.readOnly,
          placeholder: this.placeholder,
          scrollingContainer: this.$.scrollingContainer, 
          bounds: this.$.scrollingContainer
        });

        var toolbar = this.quill.getModule('toolbar');
        toolbar.addHandler('image', this.imageHandler.bind(this));

        // Set if editor is disabled
        if (this.enable === 'false') {
          this.quill.enable(false);
          this.disabledClass = 'style-scope polymer-quill ql-container ql-bubble disabled';
          this.readOnly = true;
        }

        // Set initial content
        this.async(function() {
          try { // try with initial delay
            var notset = true;
            if (this.content && this.content.length > 1 && this.content != undefined && this.content !="<p>undefined</p>" ) {
              if (this.storeAs === 'delta') {
                this.quill.setContents(JSON.parse(this.content),'api');
              } else { // HTML
                this.quill.root.innerHTML = this.content;
              }
              notset = false;
              this.html = this.quill.root.innerHTML;
            }
            if (notset) {
              throw 'notset';
            }
          }
          catch (notset) {
            // try again after doubling the delay
            this.delay = this.delay * 2;
            this.setContent();
          }
        },this.delay);

        // Store accumulated changes
        var change = new Delta();
        this.quill.on('text-change', function(delta,oldDeta,source) {
          // Autolink URLs when typing
          var regex = /https?:\/\/[^\s]+$/;
          if (delta.ops.length === 2 && delta.ops[0].retain && this.isWhitespace(delta.ops[1].insert)) {
            var endRetain = delta.ops[0].retain;
            var text = this.quill.getText().substr(0, endRetain);
            var match = text.match(regex);

            if (match !== null) {
              var url = match[0];

              var ops = [];
              if (endRetain > url.length) {
                ops.push({ retain: endRetain - url.length });
              }

              ops = ops.concat([
                { delete: url.length },
                { insert: url, attributes: { link: url } }
              ]);

              this.quill.updateContents({
                ops: ops
              });
            }
          }
          change = change.compose(delta);
        }.bind(this));

        // Save periodically
        setInterval(function() {
          if (change.length() > 0) {
            // if (this.showResults) {
            //   console.log('Saving changes', change);
            // }
            if (this.storeAs === 'delta') {
              this.content = JSON.stringify(this.quill.getContents());
            } else { // html
              this.content = this.quill.root.innerHTML;
            }
            this.html = this.quill.root.innerHTML;

            // Fire custom event change
            this.fire('change', {delta: change, change: JSON.stringify(change), content: this.content, html: this.html, entireDelta: this.quill.getContents()});
            change = new Delta();
          }
        }.bind(this), this.saveInterval);

        // Check for unsaved data
        window.onbeforeunload = function() {
          if (change.length() > 0) {
            return 'There are unsaved changes. Are you sure you want to leave?';
          }
        };

        // Autolink URLs when pasting
        this.quill.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) {
          var regex = /https?:\/\/[^\s]+/g;
          if (typeof(node.data) !== 'string') return;
          var matches = node.data.match(regex);
          if (matches && matches.length > 0) {
            var ops = [];
            var str = node.data;
            matches.forEach(function(match) {
              var split = str.split(match);
              var beforeLink = split.shift();
              ops.push({ insert: beforeLink });
              ops.push({ insert: match, attributes: { link: match } });
              str = split.join(match);
            });
            delta.ops = ops;
          }
          return delta;
        });

      },

      isWhitespace: function(ch) {
        var whiteSpace = false
        if ((ch == ' ') || (ch == '\t') || (ch == '\n')) {
          whiteSpace = true;
        }
        return whiteSpace;
      },

      setContent: function() {
        this.async(function() {
          var notset = true;
          if (this.content && this.content.length > 1 && this.content != undefined && this.content !="<p>undefined</p>" ) {
            if (this.storeAs === 'delta') {
              this.quill.setContents(JSON.parse(this.content),'api');
            } else { // HTML
              this.quill.root.innerHTML = this.content;
            }
            notset = false;
            this.html = this.quill.root.innerHTML;
          }
          return notset;
        },this.delay);
      },

      attached: function() {
        this.fire('attached');
      },

      _hideUploadChange: function(newValue, oldValue) {
        console.log('_hideUploadChange',newValue,oldValue,this.hideUpload);
      },

      imageHandler: function() {
        this.hideUpload = false;
        // var range = this.quill.getSelection();
        // console.log('imageHandler',this.hideUpload,range);
        this.$.dialogUpload.open();
      },

      downloadUrlChange: function(event) {
        this.downloadUrl = event.detail.downloadURL;
        this.size = (event.detail.size > 0 ) ? 'File size:' + this.convertToKB(event.detail.size) : '';
      },

      uploadOk: function(event) {
        this.async(function() {
          // console.log('uploadOk',this.downloadUrl);
          var range = this.quill.getSelection();
          var index = 0;
          if (range === null) {  // Fix for Safari
            index = this.quill.selection.savedRange.index + this.quill.selection.savedRange.length;
          } else {
            index = range.index;
          }
          // console.log(' -',range,index);
          if (this.downloadUrl) {
            this.quill.insertEmbed(index, 'image', this.downloadUrl, Quill.sources.USER);
          }          
        },100);
      },

      // Convert Deltas to HTML, source should be deltas string
      getHTML: function(source) {
        var inputDelta = this.content;
        if (source) {
          inputDelta = source;
        }
        var html = '';
        if (this.storeAs === 'delta') {
          var tempHtml = document.createElement("div");
          var quillHtml = new Quill(tempHtml);
          quillHtml.setContents(JSON.parse(inputDelta),'api');
          html = quillHtml.root.innerHTML;
          quillHtml = null;
          tempHtml = null;
        } else {
          html = this.content;
        }
        return html;
      },

      // Content Change
      _contentChanged: function(newValue, oldValue) {
        if (this.useContentReset && newValue != undefined) {
          this.resetContent(newValue);
        }
      },

      // Reset Content
      resetContent: function(content){
        // Set content
        this.async(function() {
          if (this.storeAs === 'delta') {
            if (this.content.length > 1) {
              this.quill.setContents(JSON.parse(this.content),'api');
            }
          } else { // HTML
            this.quill.root.innerHTML = this.content;
          }
          this.html = this.quill.root.innerHTML;
        },this.delay);
      },

      // Toogle Editor Enable (show toolbar and enables editing), Disabled (hide toolbar and disables editing)
      toggleEnable: function() {
        if (this.enable  === 'true') {
          this.disableEditor();
        } else {
          this.enableEditor();
        }
        return this.enable;
      },

      // Enable Editor (show toolbar and enable editing)
      enableEditor: function() {
        this.enable = 'true';
        this.quill.enable(true);
        this.disabledClass = 'style-scope polymer-quill ql-container ql-bubble';
        this.readOnly = false;
      },

      // Disabled Editor (hide toolbar and disable editing)
      disableEditor: function() {
        this.enable = 'false';
        this.quill.enable(false);
        this.disabledClass = 'style-scope polymer-quill ql-container ql-bubble disabled';
        this.readOnly = true;
      },

      convertToKB: function(maxFileSize) {
        if (maxFileSize >= 1000000) {
          return (Math.round(maxFileSize / 1000000)).toString() + 'MB';
        } else {
          return (Math.round(maxFileSize / 1000)).toString() + 'KB';
        }
      },

      toggleHelp: function(event) {
        // console.log('toggleHelp:',this.hideHelp);
        this.hideHelp = !this.hideHelp;
      },

      onPaste: function(event) {
        // console.log('onPaste:',event);
        // console.log('onPaste:',this.quill.scrollingContainer.scrollHeight, this.quill.scrollingContainer.scrollTop);
        // this.quill.focus();    
        // this.quill.scrollingContainer.

        // 38 up and 40 down
        // Doing up arrow then down arrow will get you to end of paste
        // this is not working
        // var kbe = new KeyboardEvent('keydown',{'keyCode':119,'which':119});
        // console.log('onPaste:',kbe);
        // document.dispatchEvent(kbe);

        // var e = new Event('keydown');
        // e.key='a';    // just enter the char you want to send 
        // e.keyCode=e.key.charCodeAt(0);
        // e.keyCode = 38;
        // e.which=e.keyCode;
        // e.altKey=false;
        // e.ctrlKey=true;
        // e.shiftKey=false;
        // e.metaKey=false;
        // e.bubbles=true;
        // this.async(function() {
        //   console.log('onPaste:',e);
        //   this.quill.scrollingContainer.focus();
        //   this.quill.scrollingContainer.dispatchEvent(e);
        // },10);
      },

    });
  </script>
</dom-module>