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
-->
<dom-module name="disqus-comments">
	<style>
		:host {
			display: block;
		}
	</style>
  <template>
    <div id="disqus">
      <div id="disqus_thread"></div>
    </div>
  </template>
</dom-module>

<script>
	(function () {
		'use strict';
		Polymer({
			is: 'disqus-comments',
			properties: {
				/**
				 * 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: {
					type: String,
					value: '',
					notify: true
				},

				/**
				 * 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:  {
					type: String,
					value: '',
					notify: true
				},

				/**
				 * 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:  {
					type: String,
					value: '',
					notify: true
				},

				/**
				 * 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:  {
					type: String,
					value: '',
					notify: true
				},

				/**
				 * 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:  {
					type: String,
					value: '',
					notify: true
				},

				/**
				 * Force HTTPS when loading Disqus embed script.
				 *
				 * @attribute https
				 * @type boolean
				 * @default false
				 */
				https:  {
					type: Boolean,
					value: false,
					notify: true
				}
			},
			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.root.querySelector('#disqus');
				var clone = document.createTextNode("");

				if(disq)
					clone = disq.cloneNode(true);

				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.root.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.root.querySelector('#disqus');
					var clone = document.createTextNode("");

					if(disq)
						clone = disq.cloneNode(true);

					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.root.appendChild(clone);
							}];
						}
					});
				}
			}
		});
	})();
</script>