Skip to content

Commit 47b6e7d

Browse files
michaelbromleymichaelbromley
committed
Merge pull request #303 from forCrowd/master
dirDisqus: Single config object instead of separate properties
2 parents 759009c + 7df385c commit 47b6e7d

File tree

2 files changed

+79
-121
lines changed

2 files changed

+79
-121
lines changed

‎src/directives/disqus/README.md‎

Lines changed: 28 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -25,37 +25,43 @@ First, put the directive code in your app, wherever you store your directives.
2525

2626
Wherever you want the Disqus comments to appear, add the following to your template:
2727

28-
```html
29-
<dir-disqus disqus-shortname="YOUR_DISQUS_SHORTNAME"
30-
disqus-identifier="{{ identifier }}"
31-
disqus-url="{{ url }}">
32-
</dir-disqus>
28+
```
29+
<dir-disqus config="disqusConfig"></dir-disqus>
30+
```
31+
32+
And in your controller:
33+
34+
```
35+
$scope.disqusConfig = {
36+
disqus_shortname: 'Your disqus shortname',
37+
disqus_identifier: 'Comments identifier',
38+
disqus_url: 'Comments url'
39+
};
3340
```
3441

3542
The attributes given above are all required. The inclusion of the identifier and URL ensure that identifier conflicts will not occur. See http://help.disqus.com/customer/portal/articles/662547-why-are-the-same-comments-showing-up-on-multiple-pages-
3643

37-
If the identifier and URL and not included as attributes, the directive will throw an exception.
44+
If the identifier and URL and not included as attributes, the directive will not appear.
3845

3946
## Full API
4047

4148
You can optionally specify the other configuration variables by including the as attributes
4249
on the directive's element tag. For more information on the available config vars, see the
4350
[Disqus docs](http://help.disqus.com/customer/portal/articles/472098-javascript-configuration-variables).
4451

45-
```HTML
46-
<dir-disqus disqus-shortname="YOUR_DISQUS_SHORTNAME"
47-
disqus-identifier="{{ post.ID }}"
48-
disqus-title="{{ post.title }}"
49-
disqus-url="{{ post.link }}"
50-
disqus-category-id="{{ post.catId }}"
51-
disqus-disable-mobile="false"
52-
disqus-config-language="{{ post.lang }}"
53-
disqus-remote-auth-s3="{{remote_auth_s3}}"
54-
disqus-api-key="{{public_api_key}}"
55-
disqus-on-ready="ready()"
56-
ready-to-bind="{{ loaded }}"
57-
>
58-
</dir-disqus>
52+
```
53+
$scope.disqusConfig = {
54+
disqus_shortname: 'Your disqus shortname',
55+
disqus_identifier: 'Comments identifier',
56+
disqus_url: 'Comments url',
57+
disqus_title: 'Comments title',
58+
disqus_category_id: 'Comments category id }}',
59+
disqus_disable_mobile: 'false',
60+
disqus_config_language: 'Comments language',
61+
disqus_remote_auth_s3: 'remote_auth_s3',
62+
disqus_api_key: 'public_api_key',
63+
disqus_on_ready: ready()
64+
};
5965
```
6066

6167
If using the `disqus-config-language` setting, please see [this Disqus article on multi-lingual websites](https://help.disqus.com/customer/portal/articles/466249-multi-lingual-websites)
@@ -65,42 +71,8 @@ for which languages are supported.
6571
If using the `disqus-remote-auth-s3 and disqus-api-key` setting, please see [Integrating Single Sign-On](https://help.disqus.com/customer/portal/articles/236206#sso-script)
6672
to know how to generate a remote_auth_s3 and public_api_key.
6773

68-
note:Single Sign-on (SSO) allows users to sign into a site and be able to use Disqus Comments without having to re-authenticate Disqus. SSO will create a site-specific user profile on Disqus, in a way that will prevent conflict with existing Disqus users.
69-
70-
71-
## `ready-to-bind` attribute
72-
73-
If you are loading the page asynchronously, the model data (`$scope.article` in the above example) used to populate the config variables above
74-
will probably not be defined at the time the page is loaded. This will result in your config settings
75-
being all undefined. To get around this, you can specify a scope variable that should be set to (or evaluate to) `false`
76-
until your data is loaded, at which point you can set it to `true`. The directive watches this property and once it changes
77-
to `true`, any config attributes which are bound to your model should be available and used to load up the Disqus widget.
78-
79-
For example:
80-
81-
```JavaScript
82-
// simple example of controller loading async data
83-
function myController($scope, $http) {
84-
$scope.contentLoaded = false;
85-
86-
$http.get('api/article/1').then(function(result) {
87-
$scope.article = result.article;
88-
$scope.contentLoaded = true; // this tells the directive that it should load the Disqus widget now
89-
})
90-
}
91-
```
92-
```html
93-
// in your view code
94-
<dir-disqus disqus-shortname="YOUR_DISQUS_SHORTNAME"
95-
disqus-identifier="{{ article.id }}"
96-
disqus-url="{{ article.url }}"
97-
ready-to-bind="{{ contentLoaded }}">
98-
</dir-disqus>
99-
```
100-
101-
If you omit the `ready-to-bind` attribute, the Disqus widget will be created immediately. This is okay so long as you don't rely on interpolated data which is not available on page load.
74+
Note: Single Sign-on (SSO) allows users to sign into a site and be able to use Disqus Comments without having to re-authenticate Disqus. SSO will create a site-specific user profile on Disqus, in a way that will prevent conflict with existing Disqus users.
10275

10376
## `disqus-on-ready` attribute
10477

105-
If Disqus is rendered, `disqus-on-ready` function will be called. Callback is registered to disqus by similar technique
106-
as explained in [this post](https://help.disqus.com/customer/portal/articles/466258-capturing-disqus-commenting-activity-via-callbacks).
78+
If Disqus is rendered, `disqus-on-ready` function will be called. Callback is registered to disqus by similar technique as explained in [this post](https://help.disqus.com/customer/portal/articles/466258-capturing-disqus-commenting-activity-via-callbacks).

‎src/directives/disqus/dirDisqus.js‎

Lines changed: 51 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
/**
1+
/**
22
* A directive to embed a Disqus comments widget on your AngularJS page.
33
*
44
* Created by Michael on 22/01/14.
5+
* Modified by Serkan "coni2k" Holat on 24/02/16.
56
* Copyright Michael Bromley 2014
67
* Available under the MIT license.
78
*/
89

9-
(function() {
10+
(function () {
1011

1112
/**
1213
* Config
@@ -19,84 +20,69 @@
1920
var module;
2021
try {
2122
module = angular.module(moduleName);
22-
} catch(err) {
23+
} catch (err) {
2324
// named module does not exist, so create one
2425
module = angular.module(moduleName, []);
2526
}
2627

27-
module.directive('dirDisqus', ['$window', function($window) {
28+
module.directive('dirDisqus', ['$window', function ($window) {
2829
return {
2930
restrict: 'E',
3031
scope: {
31-
disqus_shortname: '@disqusShortname',
32-
disqus_identifier: '@disqusIdentifier',
33-
disqus_title: '@disqusTitle',
34-
disqus_url: '@disqusUrl',
35-
disqus_category_id: '@disqusCategoryId',
36-
disqus_disable_mobile: '@disqusDisableMobile',
37-
disqus_config_language : '@disqusConfigLanguage',
38-
disqus_remote_auth_s3 : '@disqusRemoteAuthS3',
39-
disqus_api_key : '@disqusApiKey',
40-
disqus_on_ready: "&disqusOnReady",
41-
readyToBind: "@"
32+
config: '='
4233
},
43-
template: '<div id="disqus_thread"></div><a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>',
44-
link: function(scope) {
34+
template: '<div id="disqus_thread"></div><a href="http://disqus.com" class="dsq-brlink"></a>',
35+
link: function (scope) {
4536

46-
// ensure that the disqus_identifier and disqus_url are both set, otherwise we will run in to identifier conflicts when using URLs with "#" in them
47-
// see http://help.disqus.com/customer/portal/articles/662547-why-are-the-same-comments-showing-up-on-multiple-pages-
48-
if (typeof scope.disqus_identifier === 'undefined' || typeof scope.disqus_url === 'undefined') {
49-
throw "Please ensure that the `disqus-identifier` and `disqus-url` attributes are both set.";
50-
}
37+
scope.$watch('config', configChanged, true);
5138

52-
scope.$watch("readyToBind", function(isReady) {
39+
function configChanged() {
5340

54-
// If the directive has been called without the 'ready-to-bind' attribute, we
55-
// set the default to "true" so that Disqus will be loaded straight away.
56-
if ( !angular.isDefined( isReady ) ) {
57-
isReady = "true";
41+
// Ensure that the disqus_identifier and disqus_url are both set, otherwise we will run in to identifier conflicts when using URLs with "#" in them
42+
// see http://help.disqus.com/customer/portal/articles/662547-why-are-the-same-comments-showing-up-on-multiple-pages-
43+
if (!scope.config.disqus_shortname ||
44+
!scope.config.disqus_identifier ||
45+
!scope.config.disqus_url) {
46+
return;
5847
}
59-
if (scope.$eval(isReady)) {
60-
console.log('remote'+scope.disqus_remote_auth_s3);
61-
// put the config variables into separate global vars so that the Disqus script can see them
62-
$window.disqus_shortname = scope.disqus_shortname;
63-
$window.disqus_identifier = scope.disqus_identifier;
64-
$window.disqus_title = scope.disqus_title;
65-
$window.disqus_url = scope.disqus_url;
66-
$window.disqus_category_id = scope.disqus_category_id;
67-
$window.disqus_disable_mobile = scope.disqus_disable_mobile;
68-
$window.disqus_config = function () {
69-
this.language = scope.disqus_config_language;
70-
this.page.remote_auth_s3 = scope.disqus_remote_auth_s3;
71-
this.page.api_key = scope.disqus_api_key;
72-
if (scope.disqus_on_ready) {
73-
this.callbacks.onReady = [function () {
74-
scope.disqus_on_ready();
75-
}];
76-
}
77-
};
78-
// get the remote Disqus script and insert it into the DOM, but only if it not already loaded (as that will cause warnings)
79-
if (!$window.DISQUS) {
80-
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
81-
dsq.src = '//' + scope.disqus_shortname + '.disqus.com/embed.js';
82-
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
83-
} else {
84-
$window.DISQUS.reset({
85-
reload: true,
86-
config: function () {
87-
this.page.identifier = scope.disqus_identifier;
88-
this.page.url = scope.disqus_url;
89-
this.page.title = scope.disqus_title;
90-
this.language = scope.disqus_config_language;
91-
this.page.remote_auth_s3=scope.disqus_remote_auth_s3;
92-
this.page.api_key=scope.disqus_api_key;
93-
}
94-
});
48+
49+
$window.disqus_shortname = scope.config.disqus_shortname;
50+
$window.disqus_identifier = scope.config.disqus_identifier;
51+
$window.disqus_url = scope.config.disqus_url;
52+
$window.disqus_title = scope.config.disqus_title;
53+
$window.disqus_category_id = scope.config.disqus_category_id;
54+
$window.disqus_disable_mobile = scope.config.disqus_disable_mobile;
55+
$window.disqus_config = function () {
56+
this.language = scope.config.disqus_config_language;
57+
this.page.remote_auth_s3 = scope.config.disqus_remote_auth_s3;
58+
this.page.api_key = scope.config.disqus_api_key;
59+
if (scope.config.disqus_on_ready) {
60+
this.callbacks.onReady = [function () {
61+
scope.config.disqus_on_ready();
62+
}];
9563
}
64+
};
65+
66+
// Get the remote Disqus script and insert it into the DOM, but only if it not already loaded (as that will cause warnings)
67+
if (!$window.DISQUS) {
68+
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
69+
dsq.src = '//' + scope.config.disqus_shortname + '.disqus.com/embed.js';
70+
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
71+
} else {
72+
$window.DISQUS.reset({
73+
reload: true,
74+
config: function () {
75+
this.page.identifier = scope.config.disqus_identifier;
76+
this.page.url = scope.config.disqus_url;
77+
this.page.title = scope.config.disqus_title;
78+
this.language = scope.config.disqus_config_language;
79+
this.page.remote_auth_s3 = scope.config.disqus_remote_auth_s3;
80+
this.page.api_key = scope.config.disqus_api_key;
81+
}
82+
});
9683
}
97-
});
84+
}
9885
}
9986
};
10087
}]);
101-
10288
})();

0 commit comments

Comments
 (0)