Merge pull request #30 from MurhafSousli/dev

v2.3.5

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## 2.3.4
+## 2.3.5
 
 - Fix(no provider for rendered2) closes [#28](https://github.com/MurhafSousli/ngx-disqus/issues/28)
 

lib/README.md

@@ -0,0 +1,107 @@
+<p align="center">
+  <img height="150px" width="150px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-disqus/55fb00f5/src/assets/logo.svg">
+  <h1 align="center">Angular Disqus Module</h1>
+</p>
+
+Add Disqus to your app instantly!
+
+[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-disqus/)
+[![npm](https://img.shields.io/npm/v/ngx-disqus.svg)](https://www.npmjs.com/package/ngx-disqus)
+[![Build Status](https://travis-ci.org/MurhafSousli/ngx-disqus.svg)](https://travis-ci.org/MurhafSousli/ngx-disqus)
+[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)
+
+## Installation
+
+Install it with npm
+
+```bash
+$ npm install --save ngx-disqus
+```
+
+### SystemJS
+
+If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
+
+In your systemjs config file, map needs to tell the System loader where to look for ngx-disqus:
+
+```ts
+map: {
+  'ngx-disqus': 'node_modules/ngx-disqus/bundles/ngx-disqus.umd.js',
+}
+```
+
+Here is a [stackblitz](https://stackblitz.com/edit/ngx-disqus)
+
+## Usage
+
+Import `DisqusModule` in the root module
+
+```ts
+import { DisqusModule } from "ngx-disqus";
+@NgModule({
+  imports: [
+    // ...
+    DisqusModule.forRoot('disqus_shortname')
+  ]
+})
+```
+
+The paramter `shortname` is the unique identifier for your website as registered on Disqus, make sure it is defined in your module.
+
+Now you can add Disqus component
+
+```ts
+@Component({
+  selector: 'any-component',
+  template: `<disqus [identifier]="pageId"></disqus>`
+})
+export class AnyComponent {
+
+  pageId = '/about';
+}
+```
+
+Disqus component requires the `identifier` input to work properly on your app
+For example If the page URL is `localhost:4200/about` then the identifier should be `/about`.
+
+## More Options
+
+See Disqus official documentation ([JavaScript configuration variables](https://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables)) before using these inputs.
+
+```ts
+<disqus [identifier]="pageId" [url]="url" [category]="catId" [lang]="'en'"
+        (onNewComment)="onComment($event)" (onReady)="onReady($event)" (onPaginate)="onPaginate($event)"></disqus>
+```
+
+___
+
+### NOTE
+
+The HashLocationStrategy is not compatible with Disqus
+
+For more info check [DISQUS on ajax sites](https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites)
+
+___
+
+## Issues
+
+If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-disqus/issues). I am excited to see what the community thinks of this project, and I would love your input!
+
+## Author
+
+**Murhaf Sousli**
+
+- [github/murhafsousli](https://github.com/MurhafSousli)
+- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
+
+## More plugins
+
+- [ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons)
+- [ng-gallery](https://github.com/MurhafSousli/ng-gallery)
+- [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar)
+- [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)
+- [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)
+- [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)
+- [ngx-wordpress](https://github.com/MurhafSousli/ngx-wordpress)
+- [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs)
+- [ng-teximate](https://github.com/MurhafSousli/ng-teximate)

lib/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

lib/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/index.ts"
+  },
+  "dest": "../dist",
+  "workingDirectory": "../../.ng_build"
+}

lib/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ngx-disqus",
+  "version": "2.3.6",
+  "description": "Angular Disqus Module",
+  "homepage": "http://github.com/murhafsousli/ngx-disqus",
+  "author": {
+    "name": "Murhaf Sousli",
+    "url": "http://github.com/murhafsousli"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/murhafsousli/ngx-disqus.git"
+  },
+  "bugs": {
+    "url": "http://github.com/murhafsousli/ngx-disqus/issues"
+  },
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "comments",
+    "disqus"
+  ],
+  "private": false,
+  "peerDependencies": {
+    "@angular/common": ">=5.0.0"
+  }
+}

lib/public_api.ts

@@ -0,0 +1 @@
+export * from './src';

lib/src/disqus.component.ts

@@ -0,0 +1,113 @@
+import {
+  Component,
+  Input,
+  Output,
+  OnChanges,
+  OnDestroy,
+  ChangeDetectionStrategy,
+  Renderer2,
+  ElementRef,
+  EventEmitter
+} from '@angular/core';
+import { DisqusService } from './disqus.service';
+import { DisqusComment, DisqusReady } from './disqus.model';
+
+@Component({
+  selector: 'disqus',
+  template: '<div id="disqus_thread"></div>',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class DisqusComponent implements OnChanges, OnDestroy {
+
+  /** DISQUS options */
+  @Input() url: string;
+  @Input() identifier: string;
+  @Input() title: string;
+  @Input() category: string;
+  @Input() language: string;
+
+  /** DISQUS events */
+  @Output() newComment = new EventEmitter<DisqusComment>(true);
+  @Output() ready = new EventEmitter<DisqusReady>(true);
+  @Output() paginate = new EventEmitter<any>(true);
+
+  constructor(private renderer: Renderer2, private el: ElementRef, private dService: DisqusService) { }
+
+  ngOnChanges() {
+    /** Reset Disqus if any input changed */
+
+    if (!this.dService.window.DISQUS) {
+      this.addDisqusScript();
+    } else {
+      this.reset();
+    }
+  }
+
+  /** Add DISQUS script */
+  addDisqusScript() {
+
+    /** Set DISQUS config */
+    this.dService.window.disqus_config = this.getConfig();
+
+    const disqusScript = this.renderer.createElement('script');
+    disqusScript.src = `//${this.dService.shortname}.disqus.com/embed.js`;
+    disqusScript.async = true;
+    disqusScript.type = 'text/javascript';
+    this.renderer.setAttribute(disqusScript, 'data-timestamp', new Date().getTime().toString());
+    this.renderer.appendChild(this.el.nativeElement, disqusScript);
+  }
+
+  /** Reset DISQUS with the new config */
+  reset() {
+    this.dService.window.DISQUS.reset({
+      reload: true,
+      config: this.getConfig()
+    });
+  }
+
+  /** Create DISQUS config from inputs */
+  getConfig() {
+    const self = this;
+    return function () {
+      this.page.identifier = self.identifier;
+      this.page.url = self.validateUrl(self.url);
+      this.page.title = self.title;
+      this.category_id = self.category;
+      this.language = self.language;
+
+      /* Available callbacks are afterRender, onInit, onNewComment, onPaginate, onReady, preData, preInit, preReset */
+      this.callbacks.onNewComment = [(e) => {
+        self.newComment.emit(e);
+      }];
+
+      this.callbacks.onReady = [(e) => {
+        self.ready.emit(e);
+      }];
+
+      this.callbacks.onPaginate = [(e) => {
+        self.paginate.emit(e);
+      }];
+    };
+  }
+
+  validateUrl(url: string) {
+    /** Validate URL input */
+    if (url) {
+      const r = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
+
+      if (r.test(url)) {
+        return url;
+      } else {
+        console.warn('[Disqus]: Invalid URL, return undefined');
+      }
+    }
+    /** DISQUS will fallback to "Window.location.href" when URL is undefined */
+    return undefined;
+  }
+
+  ngOnDestroy() {
+    this.dService.window.DISQUS = undefined;
+    this.dService.window.disqus_config = undefined;
+  }
+}

lib/src/disqus.model.ts

@@ -0,0 +1,7 @@
+export interface DisqusComment {
+  id: number;
+  name: string;
+}
+export interface DisqusReady {
+  height: number;
+}

lib/src/disqus.module.ts

@@ -0,0 +1,29 @@
+import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';
+import { DisqusComponent } from './disqus.component';
+import { DisqusService } from './disqus.service';
+import { SHORTNAME } from './disqus.token';
+
+/** Initialize Disqus with shortname */
+export function DisqusFactory(shortname: string) {
+  return new DisqusService(shortname);
+}
+
+@NgModule({
+  declarations: [DisqusComponent],
+  exports: [DisqusComponent]
+})
+export class DisqusModule {
+  static forRoot(shortname: string): ModuleWithProviders {
+    return {
+      ngModule: DisqusModule,
+      providers: [
+        { provide: SHORTNAME, useValue: shortname },
+        {
+          provide: DisqusService,
+          useFactory: DisqusFactory,
+          deps: [SHORTNAME]
+        }
+      ]
+    };
+  }
+}

lib/src/disqus.service.ts

@@ -0,0 +1,20 @@
+import { Injectable, Inject } from '@angular/core';
+import { SHORTNAME } from './disqus.token';
+
+declare const global: any;
+
+@Injectable()
+export class DisqusService {
+
+  constructor( @Inject(SHORTNAME) public shortname: string) {
+  }
+
+  get window() {
+    return _window();
+  }
+}
+
+function _window() {
+  return typeof window !== 'undefined' ? window : global;
+}
+

lib/src/disqus.token.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const SHORTNAME = new InjectionToken<string>('SHORTNAME');

lib/src/index.ts

@@ -0,0 +1,2 @@
+export { DisqusModule } from './disqus.module';
+export { DisqusComment, DisqusReady } from './disqus.model';