disqus-comments.html

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

<!--
Add a Disqus comment thread to your Shadow DOM.

##### Example

    <disqus-comments shortname="divshot"></disqus-comments>

To style paragraphs and links, use the following CSS in a global stylesheet:

    #disqus_thread p {
      color: #333;
    }
    #disqus_thread a {
      color: hotpink;
    }

@element disqus-comments
@blurb Add a Disqus comment thread to your Shadow DOM.
@status alpha
@homepage http://elements.divshot.io/disqus-comments
-->
<polymer-element name="disqus-comments" attributes="shortname identifier title url categoryId https">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <div id="disqus">
      <div id="disqus_thread"></div>
    </div>
  </template>
  <script>
    (function () {
      'use strict';
      Polymer({
        /**
         * A shortname is the unique identifier assigned to a Disqus site.
         * All the comments posted to a site are referenced with the shortname.
         *
         * @attribute shortname
         * @type string
         * @default 'text'
         */
        shortname: '',

        /**
         * A Disqus identifier is a unique string which is used to look up a page's
         * thread in the Disqus system.
         *
         * @attribute identifier
         * @type string
         * @default 'text'
         */
        identifier: '',

        /**
         * Tells the Disqus service the title of the current page.
         * This is used when creating the thread on Disqus for the first time.
         *
         * @attribute title
         * @type string
         * @default 'text'
         */
        title: '',

        /**
         * Tells the Disqus service the URL of the current page.
         * If undefined, Disqus will take the window.location.href.
         *
         * @attribute url
         * @type string
         * @default 'text'
         */
        url: '',

        /**
         * Tells the Disqus service the category to be used for the current page.
         * This is used when creating the thread on Disqus for the first time.
         *
         * @attribute categoryId
         * @type string
         * @default 'text'
         */
        categoryId: '',

        /**
         * Force HTTPS when loading Disqus embed script.
         *
         * @attribute https
         * @type boolean
         * @default false
         */
        https: false,

        attached: function() {
          if (window.DISQUS) {
            this.reset();
            return;
          }

          if (this.shortname) {
            var disqus_shortname = this.shortname;
          } else {
            return console.error('Required: Please provide a Disqus shortname.');
          }

          var el = this;
          var disq = this.shadowRoot.querySelector('#disqus');
          var clone = document.importNode(disq, true);

          document.body.appendChild(clone);
          
          window.disqus_config = function() {
            if (el.identifier) this.page.identifier = el.identifier;
            if (el.title) this.page.title = el.title;
            if (el.url) this.page.url = el.url;
            if (el.categoryId) this.page.category_id = el.categoryId;
            this.callbacks.onReady = [function() {
              el.shadowRoot.appendChild(clone);
            }];
          };

          var dsq = document.createElement('script');
          var http = (this.https) ? 'https' : 'http';
          dsq.type = 'text/javascript';
          dsq.async = true;
          dsq.src = http + '://' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        },
        reset: function() {
          if (window.DISQUS) {
            var el = this;
            var disq = this.shadowRoot.querySelector('#disqus');
            var clone = document.importNode(disq, true);

            document.body.appendChild(clone);

            DISQUS.reset({
              reload: true,
              config: function() {
                if (el.identifier) this.page.identifier = el.identifier;
                if (el.title) this.page.title = el.title;
                if (el.url) this.page.url = el.url;
                if (el.categoryId) this.page.category_id = el.categoryId;
                this.callbacks.onReady = [function() {
                  el.shadowRoot.appendChild(clone);
                }];
              }
            });
          }
        }
      });
    })();
  </script>
</polymer-element>