Merge pull request #398 from glowing-bear/async-plugins

Plugin system improvements, Gist & Tweet plugins

css/glowingbear.css

@@ -38,20 +38,6 @@ a {
     cursor: pointer;
 }
 
-table {
-    width: 100%;
-}
-tr {
-    line-height: 100%;
-}
-tr:hover {
-    background-color: #222222;
-}
-td.time {
-    padding: 1px 5px 1px 1px;
-    vertical-align: top;
-}
-
 .repeated-time {
 }
 .repeated-time .cof-chat_time,
@@ -281,8 +267,19 @@ input[type=text], input[type=password], #sendMessage, .badge {
     -webkit-transition:0.35s ease all;
     transition:0.35s ease all;
 }
-#bufferlines table {
+#bufferlines > table {
   margin-top: 35px;
+    width: 100%;
+}
+tr.bufferline {
+    line-height: 100%;
+}
+tr.bufferline:hover {
+    background-color: #222222;
+}
+td.time {
+    padding: 1px 5px 1px 1px;
+    vertical-align: top;
 }
 
 .withnicklist {

js/glowingbear.js

@@ -1343,6 +1343,12 @@ weechat.directive('plugin', function($rootScope) {
                  * Actual plugin content is only fetched when
                  * content is shown.
                  */
+
+                // If the plugin is asynchronous / lazy, execute it now and store
+                // the result. This ensures that the callback is executed only once
+                if ($scope.plugin.content instanceof Function) {
+                    $scope.plugin.content = $scope.plugin.content();
+                }
                 $scope.displayedContent = $scope.plugin.content;
                 $scope.plugin.visible = true;
 

js/plugins.js

@@ -60,8 +60,14 @@ plugins.service('plugins', ['userPlugins', '$sce', function(userPlugins, $sce) {
                 if (num) {
                     pluginName += " " + num;
                 }
+
+                // If content isn't a callback, it's HTML
+                if (!(content instanceof Function)) {
+                    content = $sce.trustAsHtml(content);
+                }
+
                 message.metadata.push({
-                    'content': $sce.trustAsHtml(content),
+                    'content': content,
                     'nsfw': nsfw,
                     'name': pluginName
                 });
@@ -123,9 +129,37 @@ plugins.service('plugins', ['userPlugins', '$sce', function(userPlugins, $sce) {
  *
  */
 plugins.factory('userPlugins', function() {
+    // standard JSONp origin policy trick
+    var jsonp = function (url, callback) {
+        var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
+        window[callbackName] = function(data) {
+            delete window[callbackName];
+            document.body.removeChild(script);
+            callback(data);
+        };
+
+        var script = document.createElement('script');
+        script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
+        document.body.appendChild(script);
+    };
 
     var urlRegexp = RegExp(/(?:ftp|https?):\/\/\S*[^\s.;,(){}<>]/g);
 
+    var urlPlugin = function(callback) {
+        return function(message) {
+            var urls = message.match(urlRegexp);
+            var content = [];
+
+            for (var i = 0; urls && i < urls.length; i++) {
+                var result = callback(urls[i]);
+                if (result) {
+                    content.push(result);
+                }
+            }
+            return content;
+        };
+    };
+
     /*
      * Spotify Embedded Player
      *
@@ -215,13 +249,8 @@ plugins.factory('userPlugins', function() {
     /*
      * Image Preview
      */
-    var imagePlugin = new Plugin(function(message) {
+    var imagePlugin = new Plugin(
-
+        urlPlugin(function(url) {
-        var urls = message.match(urlRegexp);
-        var content = [];
-
-        for (var i = 0; urls && i < urls.length; i++) {
-            var url  = urls[i];
             if (url.match(/\.(png|gif|jpg|jpeg)$/i)) {
 
                 /* A fukung.net URL may end by an image extension but is not a direct link. */
@@ -232,58 +261,40 @@ plugins.factory('userPlugins', function() {
                     url = url.replace(/http:/, "");
                 }
 
-                content.push('<a target="_blank" href="'+url+'"><img class="embed" src="' + url + '"></a>');
+                return '<a target="_blank" href="'+url+'"><img class="embed" src="' + url + '"></a>';
             }
-        }
+        })
-
+    );
-        return content;
-    });
     imagePlugin.name = 'image';
 
     /*
      * Cloud Music Embedded Players
      */
-    var cloudmusicPlugin = new Plugin(function(message) {
+    var cloudmusicPlugin = new Plugin(
-
+        urlPlugin(function(url) {
-        var urls = message.match(urlRegexp);
-        var content = [];
-
-        for (var i = 0; urls && i < urls.length; i++) {
-            var url = urls[i];
-
             /* SoundCloud http://help.soundcloud.com/customer/portal/articles/247785-what-widgets-can-i-use-from-soundcloud- */
             if (url.match(/^https?:\/\/soundcloud.com\//)) {
-                content.push('<iframe width="100%" height="120" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=' + url + '&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>');
+                return '<iframe width="100%" height="120" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=' + url + '&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>';
             }
 
             /* MixCloud */
             if (url.match(/^https?:\/\/([a-z]+\.)?mixcloud.com\//)) {
-                content.push('<iframe width="480" height="60" src="//www.mixcloud.com/widget/iframe/?feed=' + url + '&mini=1&stylecolor=&hide_artwork=&embed_type=widget_standard&hide_tracklist=1&hide_cover=" frameborder="0"></iframe>');
+                return '<iframe width="480" height="60" src="//www.mixcloud.com/widget/iframe/?feed=' + url + '&mini=1&stylecolor=&hide_artwork=&embed_type=widget_standard&hide_tracklist=1&hide_cover=" frameborder="0"></iframe>';
             }
-        }
+        })
-
+    );
-        return content;
-    });
     cloudmusicPlugin.name = 'cloud music';
 
     /*
      * Google Maps
      */
-    var googlemapPlugin = new Plugin(function(message) {
+    var googlemapPlugin = new Plugin(
-
+        urlPlugin(function(url) {
-        var urls = message.match(urlRegexp);
-        var content = [];
-
-        for (var i = 0; urls && i < urls.length; i++) {
-            var url = urls[i];
-
             if (url.match(/^https?:\/\/maps\.google\./i) || url.match(/^https?:\/\/(?:[\w]+\.)?google\.[\w]+\/maps/i)) {
-                content.push('<iframe width="450" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' + url + '&output=embed"></iframe>');
+                return '<iframe width="450" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' + url + '&output=embed"></iframe>';
             }
-        }
+        })
-
+    );
-        return content;
-    });
     googlemapPlugin.name = 'Google Map';
 
     /*
@@ -300,12 +311,8 @@ plugins.factory('userPlugins', function() {
     });
     asciinemaPlugin.name = "ascii cast";
 
-    var yrPlugin = new Plugin(function(message) {
+    var yrPlugin = new Plugin(
-        var urls = message.match(urlRegexp);
+        urlPlugin(function(url) {
-        var content = [];
-
-        for (var i = 0; urls && i < urls.length; i++) {
-            var url = urls[i];
             var regexp = /^https?:\/\/(?:www\.)?yr\.no\/(place|stad|sted|sadji|paikka)\/(([^\s.;,(){}<>\/]+\/){3,})/;
             var match = url.match(regexp);
             if (match) {
@@ -313,15 +320,67 @@ plugins.factory('userPlugins', function() {
                 var location = match[2];
                 var city = match[match.length - 1].slice(0, -1);
                 url = "http://www.yr.no/" + language + "/" + location + "avansert_meteogram.png";
-                content.push("<img src='" + url + "' alt='Meteogram for " + city + "' />");
+                return "<img src='" + url + "' alt='Meteogram for " + city + "' />";
             }
-        }
+        })
-        return content;
+    );
-    });
     yrPlugin.name = "meteogram";
 
+    // Embed GitHub gists
+    var gistPlugin = new Plugin(
+        urlPlugin(function(url) {
+            var regexp = /^https:\/\/gist\.github.com\/[^.?]+/i;
+            var match = url.match(regexp);
+            if (match) {
+                // get the URL from the match to trim away pseudo file endings and request parameters
+                url = match[0] + '.json';
+                // load gist asynchronously -- return a function here
+                return function() {
+                    var element = document.querySelector('.embed_' + this.$$hashKey);
+                    jsonp(url, function(data) {
+                        // Add the gist stylesheet only once
+                        if (document.querySelectorAll('link[rel=stylesheet][href="' + data.stylesheet + '"]').length < 1) {
+                            var stylesheet = '<link rel="stylesheet" href="' + data.stylesheet + '"></link>';
+                            document.getElementsByTagName('head')[0].innerHTML += stylesheet;
+                        }
+                        element.innerHTML = '<div style="clear:both">' + data.div + '</div>';
+                    });
+                };
+            }
+        })
+    );
+    gistPlugin.name = 'Gist';
+
+    var tweetPlugin = new Plugin(
+        urlPlugin(function(url) {
+            var regexp = /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(?:es)?\/(\d+)/i;
+            var match = url.match(regexp);
+            if (match) {
+                url = 'https://api.twitter.com/1/statuses/oembed.json?id=' + match[2];
+                return function() {
+                    var element = document.querySelector('.embed_' + this.$$hashKey);
+                    jsonp(url, function(data) {
+                        // sepearate the HTML into content and script tag
+                        var scriptIndex = data.html.indexOf("<script ");
+                        var content = data.html.substr(0, scriptIndex);
+                        // Set DNT (Do Not Track)
+                        content = content.replace("<blockquote class=\"twitter-tweet\">", "<blockquote class=\"twitter-tweet\" data-dnt=\"true\">");
+                        element.innerHTML = content;
+
+                        // The script tag needs to be generated manually or the browser won't load it
+                        var scriptElem = document.createElement('script');
+                        // Hardcoding the URL here, I don't suppose it's going to change anytime soon
+                        scriptElem.src = "//platform.twitter.com/widgets.js";
+                        element.appendChild(scriptElem);
+                    });
+                };
+            }
+        })
+    );
+    tweetPlugin.name = 'Tweet';
+
     return {
-        plugins: [youtubePlugin, dailymotionPlugin, allocinePlugin, imagePlugin, spotifyPlugin, cloudmusicPlugin, googlemapPlugin, asciinemaPlugin, yrPlugin]
+        plugins: [youtubePlugin, dailymotionPlugin, allocinePlugin, imagePlugin, spotifyPlugin, cloudmusicPlugin, googlemapPlugin, asciinemaPlugin, yrPlugin, gistPlugin, tweetPlugin]
     };