]> git.mxchange.org Git - quix0rs-gnu-social.git/blobdiff - plugins/LinkPreview/js/linkpreview.js
Preparing plugins for no-minify-in-core-policy
[quix0rs-gnu-social.git] / plugins / LinkPreview / js / linkpreview.js
diff --git a/plugins/LinkPreview/js/linkpreview.js b/plugins/LinkPreview/js/linkpreview.js
new file mode 100644 (file)
index 0000000..e6e98bd
--- /dev/null
@@ -0,0 +1,270 @@
+/**
+ * (c) 2010 StatusNet, Inc.
+ */
+
+(function() {
+    /**
+     * Quickie wrapper around ooembed JSON lookup
+     */
+    var oEmbed = {
+        api: 'https://noembed.com/embed',
+        width: 100,
+        height: 75,
+        cache: {},
+        callbacks: {},
+
+        /**
+         * Do a cached oEmbed lookup for the given URL.
+         *
+         * @param {String} url
+         * @param {function} callback
+         */
+        lookup: function(url, callback)
+        {
+            if (typeof oEmbed.cache[url] == "object") {
+                // We already have a successful lookup.
+                callback(oEmbed.cache[url]);
+            } else if (typeof oEmbed.callbacks[url] == "undefined") {
+                // No lookup yet... Start it!
+                oEmbed.callbacks[url] = [callback];
+
+                oEmbed.rawLookup(url, function(data) {
+                    oEmbed.cache[url] = data;
+                    var callbacks = oEmbed.callbacks[url];
+                    oEmbed.callbacks[url] = undefined;
+                    for (var i = 0; i < callbacks.length; i++) {
+                        callbacks[i](data);
+                    }
+                });
+            } else {
+                // A lookup is in progress.
+                oEmbed.callbacks[url].push(callback);
+            }
+        },
+
+        /**
+         * Do an oEmbed lookup for the given URL.
+         *
+         * @fixme proxy through ourselves if possible?
+         * @fixme use the global thumbnail size settings
+         *
+         * @param {String} url
+         * @param {function} callback
+         */
+        rawLookup: function(url, callback)
+        {
+            var params = {
+                url: url,
+                format: 'json',
+                maxwidth: oEmbed.width,
+                maxheight: oEmbed.height,
+                token: $('#token').val()
+            };
+            $.ajax({
+                url: oEmbed.api,
+                data: params,
+                dataType: 'json',
+                success: function(data, xhr) {
+                    callback(data);
+                },
+                error: function(xhr, textStatus, errorThrown) {
+                    callback(null);
+                }
+            });
+        }
+    };
+
+    SN.Init.LinkPreview = function(params) {
+        if (params.api) oEmbed.api = params.api;
+        if (params.width) oEmbed.width = params.width;
+        if (params.height) oEmbed.height = params.height;
+    }
+
+    // Piggyback on the counter update...
+    var origCounter = SN.U.Counter;
+    SN.U.Counter = function(form) {
+        var preview = form.data('LinkPreview');
+        if (preview) {
+            preview.previewLinks(form.find('.notice_data-text:first').val());
+        }
+        return origCounter(form);
+    }
+
+    // Customize notice form init...
+    var origSetup = SN.Init.NoticeFormSetup;
+    SN.Init.NoticeFormSetup = function(form) {
+        origSetup(form);
+
+        form
+            .bind('reset', function() {
+                LinkPreview.clear();
+            });
+
+        var LinkPreview = {
+            links: [],
+            state: [],
+            refresh: [],
+
+            /**
+             * Find URL links from the source text that may be interesting.
+             *
+             * @param {String} text
+             * @return {Array} list of URLs
+             */
+            findLinks: function (text)
+            {
+                // @fixme match this to core code
+                var re = /(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;
+                var links = [];
+                var matches;
+                while ((matches = re.exec(text)) !== null) {
+                    links.push(matches[1]);
+                }
+                return links;
+            },
+
+            ensureArea: function() {
+                if (form.find('.link-preview').length < 1) {
+                    form.append('<div class="notice-status link-preview thumbnails"></div>');
+                }
+            },
+
+            /**
+             * Start looking up info for a link preview...
+             * May start async data loads.
+             *
+             * @param {number} col: column number to insert preview into
+             */
+            prepLinkPreview: function(col)
+            {
+                var id = 'link-preview-' + col;
+                var url = LinkPreview.links[col];
+                LinkPreview.refresh[col] = false;
+                LinkPreview.markLoading(col);
+
+                oEmbed.lookup(url, function(data) {
+                    var thumb = null;
+                    var width = 100;
+                    if (data && typeof data.thumbnail_url == "string") {
+                        thumb = data.thumbnail_url;
+                        if (typeof data.thumbnail_width !== "undefined") {
+                            if (data.thumbnail_width < width) {
+                                width = data.thumbnail_width;
+                            }
+                        }
+                    } else if (data && data.type == 'photo' && typeof data.url == "string") {
+                        thumb = data.url;
+                        if (typeof data.width !== "undefined") {
+                            if (data.width < width) {
+                                width = data.width;
+                            }
+                        }
+                    }
+
+                    if (thumb) {
+                        LinkPreview.ensureArea();
+                        var link = $('<span class="inline-attachment"><a><img/></a></span>');
+                        link.find('a')
+                                .attr('href', url)
+                                .attr('target', '_blank')
+                                .last()
+                            .find('img')
+                                .attr('src', thumb)
+                                .attr('width', width)
+                                .attr('title', data.title || data.url || url);
+                        form.find('.' + id)
+                            .empty()
+                            .append(link);
+                    } else {
+                        // No thumbnail available or error retriving it.
+                        LinkPreview.clearLink(col);
+                    }
+
+                    if (LinkPreview.refresh[col]) {
+                        // Darn user has typed more characters.
+                        // Go fetch another link!
+                        LinkPreview.prepLinkPreview(col);
+                    } else {
+                        LinkPreview.markDone(col);
+                    }
+                });
+            },
+
+            /**
+             * Update the live preview section with links found in the given text.
+             * May start async data loads.
+             *
+             * @param {String} text: free-form input text
+             */
+            previewLinks: function(text)
+            {
+                var i;
+                var old = LinkPreview.links;
+                var links = LinkPreview.findLinks(text);
+                LinkPreview.links = links;
+
+                // Check for existing common elements...
+                for (i = 0; i < old.length && i < links.length; i++) {
+                    if (links[i] != old[i]) {
+                        if (LinkPreview.state[i] == "loading") {
+                            // Slate this column for a refresh when this one's done.
+                            LinkPreview.refresh[i] = true;
+                        } else {
+                            // Change an existing entry!
+                            LinkPreview.prepLinkPreview(i);
+                        }
+                    }
+                }
+                if (links.length > old.length) {
+                    // Adding new entries, whee!
+                    for (i = old.length; i < links.length; i++) {
+                        LinkPreview.addPreviewArea(i);
+                        LinkPreview.prepLinkPreview(i);
+                    }
+                } else if (old.length > links.length) {
+                    // Remove preview entries for links that have been removed.
+                    for (i = links.length; i < old.length; i++) {
+                        LinkPreview.clearLink(i);
+                    }
+                }
+                if (links.length == 0) {
+                    LinkPreview.clear();
+                }
+            },
+
+            addPreviewArea: function(col) {
+                LinkPreview.ensureArea();
+                var id = 'link-preview-' + col;
+                if (form.find('.' + id).length < 1) {
+                    form.find('.link-preview').append('<span class="' + id + '"></span>');
+                }
+            },
+
+            clearLink: function(col) {
+                var id = 'link-preview-' + col;
+                form.find('.' + id).html('');
+            },
+
+            markLoading: function(col) {
+                LinkPreview.state[col] = "loading";
+                var id = 'link-preview-' + col;
+                form.find('.' + id).attr('style', 'opacity: 0.5');
+            },
+
+            markDone: function(col) {
+                LinkPreview.state[col] = "done";
+                var id = 'link-preview-' + col;
+                form.find('.' + id).removeAttr('style');
+            },
+
+            /**
+             * Clear out any link preview data.
+             */
+            clear: function() {
+                LinkPreview.links = [];
+                form.find('.link-preview').remove();
+            }
+        };
+        form.data('LinkPreview', LinkPreview);
+    }
+})();