api-console-assets/bower_components/clipboard-copy/clipboard-copy.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<!--
An element that copies a text to clipboard.

### Example
```
<clipboard-copy content="test"></clipboard-copy>
```
```
var elm = document.querySelectior('clipboard-copy');
if(elm.copy()) {
  console.info('Content has been copied to the clipboard');
} else {
  console.error('Content copy error. This browser is ancient!');
}
```

### Styling
This element doesn't need styling because it's a logic element without the UI.

@group Logic Elements
@element clipboard-copy
@demo demo/index.html
-->
<dom-module id="clipboard-copy">
  <template>
    <style>
    :host {
      display: none;
    }

    :host([copying]) {
      display: inline;
      width: 0;
      height: 0;
      border: none;
      overflow: hidden;
    }
    </style>
    <div id="content">[[content]]</div>
  </template>
  <script>
  Polymer({
    is: 'clipboard-copy',
    /**
     * Fired when the content has been copied to the clipboard.
     *
     * Note: You can use return value of the `copy()` function. If the return
     * value is `true` then content has been copied to clipboard.
     *
     * @event content-copied
     */
    /**
     * Fired when there was an error copying content to clipboard.
     *
     * Note: You can use return value of the `copy()` function. If the return
     * value is `flase` then content has not been copied to clipboard.
     *
     * @event content-copy-error
     */
    /**
     * Fired when executing copy function.
     * This cancelable event is dispatched before running the actual logic
     * of this element to support platforms that doesn't allow to manage
     * clipboard with `execCommand('copy')`.
     *
     * When the event is canceled then the logic is not executed.
     *
     * @event content-copy
     * @param {String} value A content t be copied to clipboard.
     */
    properties: {
      /**
       * A content to be copied to the clipboard.
       * It must be set before calling the `copy` function.
       */
      content: String
    },

    /**
     * Execute content copy.
     *
     * @return {Boolean} True if the content has been copied to the clipboard
     * and false if there was an error.
     */
    copy: function() {
      if (this._beforeCopy()) {
        return this._notifyCopied();
      }
      this.setAttribute('copying', true);
      var snipRange = document.createRange();
      snipRange.selectNodeContents(this.$.content);
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(snipRange);
      var result = false;
      try {
        result = document.execCommand('copy');
        this._notifyCopied();
      } catch (err) {
        // Copy command is not available
        Polymer.Base._error(err);
        this.fire('content-copy-error', null, {
          bubbles: false
        });
      }
      selection.removeAllRanges();
      this.removeAttribute('copying');
      return result;
    },
    /**
     * Sends the `content-copy` event.
     * If the event is canceled then the logic from this element won't be
     * executed. Useful if current platform doesn't support `execCommand('copy')`
     * and has other way to manage clipboard.
     *
     * @return {Boolean} True if handler executed copy function.
     */
    _beforeCopy: function() {
      var event = this.fire('content-copy', {
        value: this.content
      }, {
        cancelable: true
      });
      return event.defaultPrevented;
    },
    /**
     * Sends the `content-copied` event that is not bubbling.
     */
    _notifyCopied: function() {
      this.fire('content-copied', null, {
        bubbles: false
      });
      return true;
    }
  });
  </script>
</dom-module>