Update LinkPreview plugin for multiple notice forms.

* main notice form setup now encapsulated into SN.Init.NoticeForm(form) -- this can be monkeypatched by plugins to append their own setup code, as LinkPreview does
* LinkPreview now supports debugging with non-minified JS source when $config['site']['minify'] is false
* tweaked core & neo styles so 'notice-status' class gets same styles as attach-status, so we can more easily add mroe statusy things. (needs more consolidation with geo-status, etc)
* tweaked LinkPreview's preview area to use that style

js/util.js

@@ -612,10 +612,7 @@ var SN = { // StatusNet
                         list.append(replyItem);
 
                         var form = replyForm = $(formEl);
-                        SN.U.NoticeLocationAttach(form);
+                        SN.Init.NoticeFormSetup(form);
-                        SN.U.FormNoticeXHR(form);
-                        SN.U.FormNoticeEnhancements(form);
-                        SN.U.NoticeDataAttach(form);
 
                         nextStep();
                     };
@@ -1310,14 +1307,25 @@ var SN = { // StatusNet
             if ($('body.user_in').length > 0) {
                 $('.ajax-notice').each(function() {
                     var form = $(this);
-                    SN.U.NoticeLocationAttach(form);
+                    SN.Init.NoticeFormSetup(form);
-                    SN.U.FormNoticeXHR(form);
-                    SN.U.FormNoticeEnhancements(form);
-                    SN.U.NoticeDataAttach(form);
                 });
             }
         },
 
+        /**
+         * Encapsulate notice form setup for a single form.
+         * Plugins can add extra setup by monkeypatching this
+         * function.
+         *
+         * @param {jQuery} form
+         */
+        NoticeFormSetup: function(form) {
+            SN.U.NoticeLocationAttach(form);
+            SN.U.FormNoticeXHR(form);
+            SN.U.FormNoticeEnhancements(form);
+            SN.U.NoticeDataAttach(form);
+        },
+
         /**
          * Run setup code for notice timeline views items:
          *

plugins/LinkPreview/LinkPreviewPlugin.php

@@ -51,7 +51,12 @@ class LinkPreviewPlugin extends Plugin
     {
         $user = common_current_user();
         if ($user && common_config('attachments', 'process_links')) {
-            $action->script($this->path('linkpreview.min.js'));
+            if (common_config('site', 'minify')) {
+                $js = 'linkpreview.min.js';
+            } else {
+                $js = 'linkpreview.js';
+            }
+            $action->script($this->path($js));
             $data = json_encode(array(
                 'api' => common_local_url('oembedproxy'),
                 'width' => common_config('attachments', 'thumbwidth'),

plugins/LinkPreview/linkpreview.js

@@ -74,174 +74,197 @@
         }
     };
 
-    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;
-        },
-
-        /**
-         * 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) {
-                    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);
-                    $('#' + id).empty();
-                    $('#' + id).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);
-                }
-            }
-        },
-
-        addPreviewArea: function(col) {
-            var id = 'link-preview-' + col;
-            $('#link-preview').append('<span id="' + id + '"></span>');
-        },
-
-        clearLink: function(col) {
-            var id = 'link-preview-' + col;
-            $('#' + id).html('');
-        },
-
-        markLoading: function(col) {
-            LinkPreview.state[col] = "loading";
-            var id = 'link-preview-' + col;
-            $('#' + id).attr('style', 'opacity: 0.5');
-        },
-
-        markDone: function(col) {
-            LinkPreview.state[col] = "done";
-            var id = 'link-preview-' + col;
-            $('#' + id).removeAttr('style');
-        },
-
-        /**
-         * Clear out any link preview data.
-         */
-        clear: function() {
-            LinkPreview.links = [];
-            $('#link-preview').empty();
-        }
-    };
-
     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;
+    }
 
-        $('#form_notice')
+    // Piggyback on the counter update...
-            .append('<div id="link-preview" class="thumbnails"></div>')
+    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();
             });
 
-        // Piggyback on the counter update...
+        var LinkPreview = {
-        var origCounter = SN.U.Counter;
+            links: [],
-        SN.U.Counter = function(form) {
+            state: [],
-            LinkPreview.previewLinks($('#notice_data-text').val());
+            refresh: [],
-            return origCounter(form);
+
-        }
+            /**
+             * 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);
     }
 })();

plugins/LinkPreview/linkpreview.min.js

@@ -1 +1 @@
-(function(){var a={api:"http://oohembed.com/oohembed",width:100,height:75,cache:{},callbacks:{},lookup:function(c,d){if(typeof a.cache[c]=="object"){d(a.cache[c])}else{if(typeof a.callbacks[c]=="undefined"){a.callbacks[c]=[d];a.rawLookup(c,function(g){a.cache[c]=g;var f=a.callbacks[c];a.callbacks[c]=undefined;for(var e=0;e<f.length;e++){f[e](g)}})}else{a.callbacks[c].push(d)}}},rawLookup:function(c,e){var d={url:c,format:"json",maxwidth:a.width,maxheight:a.height,token:$("#token").val()};$.ajax({url:a.api,data:d,dataType:"json",success:function(f,g){e(f)},error:function(g,h,f){e(null)}})}};var b={links:[],state:[],refresh:[],findLinks:function(f){var d=/(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;var c=[];var e;while((e=d.exec(f))!==null){c.push(e[1])}return c},prepLinkPreview:function(d){var e="link-preview-"+d;var c=b.links[d];b.refresh[d]=false;b.markLoading(d);a.lookup(c,function(i){var f=null;var g=100;if(i&&typeof i.thumbnail_url=="string"){f=i.thumbnail_url;if(typeof i.thumbnail_width!=="undefined"){if(i.thumbnail_width<g){g=i.thumbnail_width}}}else{if(i&&i.type=="photo"&&typeof i.url=="string"){f=i.url;if(typeof i.width!=="undefined"){if(i.width<g){g=i.width}}}}if(f){var h=$('<span class="inline-attachment"><a><img/></a></span>');h.find("a").attr("href",c).attr("target","_blank").last().find("img").attr("src",f).attr("width",g).attr("title",i.title||i.url||c);$("#"+e).empty();$("#"+e).append(h)}else{b.clearLink(d)}if(b.refresh[d]){b.prepLinkPreview(d)}else{b.markDone(d)}})},previewLinks:function(f){var e;var c=b.links;var d=b.findLinks(f);b.links=d;for(e=0;e<c.length&&e<d.length;e++){if(d[e]!=c[e]){if(b.state[e]=="loading"){b.refresh[e]=true}else{b.prepLinkPreview(e)}}}if(d.length>c.length){for(e=c.length;e<d.length;e++){b.addPreviewArea(e);b.prepLinkPreview(e)}}else{if(c.length>d.length){for(e=d.length;e<c.length;e++){b.clearLink(e)}}}},addPreviewArea:function(c){var d="link-preview-"+c;$("#link-preview").append('<span id="'+d+'"></span>')},clearLink:function(c){var d="link-preview-"+c;$("#"+d).html("")},markLoading:function(c){b.state[c]="loading";var d="link-preview-"+c;$("#"+d).attr("style","opacity: 0.5")},markDone:function(c){b.state[c]="done";var d="link-preview-"+c;$("#"+d).removeAttr("style")},clear:function(){b.links=[];$("#link-preview").empty()}};SN.Init.LinkPreview=function(c){if(c.api){a.api=c.api}if(c.width){a.width=c.width}if(c.height){a.height=c.height}$("#form_notice").append('<div id="link-preview" class="thumbnails"></div>').bind("reset",function(){b.clear()});var d=SN.U.Counter;SN.U.Counter=function(e){b.previewLinks($("#notice_data-text").val());return d(e)}}})();
+(function(){var b={api:"http://oohembed.com/oohembed",width:100,height:75,cache:{},callbacks:{},lookup:function(d,e){if(typeof b.cache[d]=="object"){e(b.cache[d])}else{if(typeof b.callbacks[d]=="undefined"){b.callbacks[d]=[e];b.rawLookup(d,function(h){b.cache[d]=h;var g=b.callbacks[d];b.callbacks[d]=undefined;for(var f=0;f<g.length;f++){g[f](h)}})}else{b.callbacks[d].push(e)}}},rawLookup:function(d,f){var e={url:d,format:"json",maxwidth:b.width,maxheight:b.height,token:$("#token").val()};$.ajax({url:b.api,data:e,dataType:"json",success:function(g,h){f(g)},error:function(h,i,g){f(null)}})}};SN.Init.LinkPreview=function(d){if(d.api){b.api=d.api}if(d.width){b.width=d.width}if(d.height){b.height=d.height}};var c=SN.U.Counter;SN.U.Counter=function(d){var e=d.data("LinkPreview");if(e){e.previewLinks(d.find(".notice_data-text:first").val())}return c(d)};var a=SN.Init.NoticeFormSetup;SN.Init.NoticeFormSetup=function(d){a(d);d.bind("reset",function(){e.clear()});var e={links:[],state:[],refresh:[],findLinks:function(i){var g=/(?:^| )(https?:\/\/.+?\/.+?)(?= |$)/mg;var f=[];var h;while((h=g.exec(i))!==null){f.push(h[1])}return f},ensureArea:function(){if(d.find(".link-preview").length<1){d.append('<div class="notice-status link-preview thumbnails"></div>')}},prepLinkPreview:function(g){var h="link-preview-"+g;var f=e.links[g];e.refresh[g]=false;e.markLoading(g);b.lookup(f,function(l){var i=null;var j=100;if(l&&typeof l.thumbnail_url=="string"){i=l.thumbnail_url;if(typeof l.thumbnail_width!=="undefined"){if(l.thumbnail_width<j){j=l.thumbnail_width}}}else{if(l&&l.type=="photo"&&typeof l.url=="string"){i=l.url;if(typeof l.width!=="undefined"){if(l.width<j){j=l.width}}}}if(i){e.ensureArea();var k=$('<span class="inline-attachment"><a><img/></a></span>');k.find("a").attr("href",f).attr("target","_blank").last().find("img").attr("src",i).attr("width",j).attr("title",l.title||l.url||f);d.find("."+h).empty().append(k)}else{e.clearLink(g)}if(e.refresh[g]){e.prepLinkPreview(g)}else{e.markDone(g)}})},previewLinks:function(j){var h;var f=e.links;var g=e.findLinks(j);e.links=g;for(h=0;h<f.length&&h<g.length;h++){if(g[h]!=f[h]){if(e.state[h]=="loading"){e.refresh[h]=true}else{e.prepLinkPreview(h)}}}if(g.length>f.length){for(h=f.length;h<g.length;h++){e.addPreviewArea(h);e.prepLinkPreview(h)}}else{if(f.length>g.length){for(h=g.length;h<f.length;h++){e.clearLink(h)}}}if(g.length==0){e.clear()}},addPreviewArea:function(f){e.ensureArea();var g="link-preview-"+f;if(d.find("."+g).length<1){d.find(".link-preview").append('<span class="'+g+'"></span>')}},clearLink:function(f){var g="link-preview-"+f;d.find("."+g).html("")},markLoading:function(f){e.state[f]="loading";var g="link-preview-"+f;d.find("."+g).attr("style","opacity: 0.5")},markDone:function(f){e.state[f]="done";var g="link-preview-"+f;d.find("."+g).removeAttr("style")},clear:function(){e.links=[];d.find(".link-preview").remove()}};d.data("LinkPreview",e)}})();

theme/base/css/display.css

@@ -646,7 +646,8 @@ float:left;
 max-width:322px;
 }
 .form_notice .error,
-.form_notice .success {
+.form_notice .success,
+.form_notice .notice-status {
 float:left;
 clear:both;
 width:81.5%;
@@ -661,7 +662,8 @@ overflow:auto;
 margin-right:2.5%;
 font-size:1.1em;
 }
-.form_notice .attach-status button.close {
+.form_notice .attach-status button.close,
+.form_notice .notice-status button.close,{
 float:right;
 font-size:0.8em;
 }

theme/neo/css/display.css

@@ -180,7 +180,8 @@ address {
 }
 
 .form_notice .error,
-.form_notice .success {
+.form_notice .success,
+.form_notice .notice-status {
     width: 341px;
 }
 
@@ -480,14 +481,14 @@ td.entity_profile { /* cf directory table */
     margin-bottom: 10px;
 }
 
-.error, .success {
+.error, .success, .notice-status {
     background-color: #F7E8E8;
     padding: 4px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
 }
-.success {
+.success, .notice-status {
     background-color: #f2f2f2;
 }
 

theme/rebase/css/display.css

@@ -298,7 +298,8 @@ address .poweredby {
 }
 
 .form_notice .error,
-.form_notice .success {
+.form_notice .success,
+.form_notice .notice-status {
     clear: left;
     float: left;
     overflow: auto;
@@ -319,7 +320,8 @@ address .poweredby {
     padding: 6px 2px 6px 5px;
 }
 
-.form_notice .attach-status button.close {
+.form_notice .attach-status button.close,
+.form_notice .notice-status button.close {
     float:right;
     font-size:0.8em;
 }