Autorefresh

README.md

@@ -27,6 +27,7 @@ The best way to know how to use this library is to go through the examples in th
 This example demonstrates how to use the library from a website. It simply filters every jQuery ajax calls and echoes it on the server. That way the ajax call get the results back. To run the code, simply upload the demo on your server or run a local Apache server.
 
 Thanks to [this thread](http://stackoverflow.com/a/12683591/334209) for the php script.
+Also "bryanwoods/autolink-js" for the regex for matching urls.
 
 ### chrome-extension
 
@@ -41,7 +42,7 @@ Call the library via javascript:
 $('.element').linkpreview()
 ```
 
-$('.element') can point to `<input>`, `<textarea>` or `<a>`. Without any parameters, this will load the URL(s) and generate the preview just after the element(s).
+$('.element') can point to `<input>`, `<textarea>` or `<a>`. Without any parameters, this will detect url's on each keyup and will load the URL(s) and generate the preview just after the element(s).
 
 ### Options
 
@@ -87,6 +88,12 @@ $('.element').linkpreview({
     <td>Selector</td>
     <td></td>
     <td>Button refreshing the preview</td>
+  </tr>
+   <tr>
+    <th>autoRefresh</th>
+    <td>(true, false)</td>
+    <td>Null | False</td>
+    <td>When set to `true` refreshes the previewContainerClass on keyup event</td>
   </tr>
   <tr>
     <th>errorMessage</th>

demos/php-proxy/js/bootstrap-linkpreview.js

@@ -38,6 +38,20 @@
  * limitations under the License.
  * ========================================================= */
 
+
+  /* AUTO LINKING */
+(function() {
+    var autoLink = function() {
+        var pattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
+
+        return this.match(pattern)[0].trim();
+    };
+
+  String.prototype['autoLink'] = autoLink;
+
+}).call(this);
+
+
 (function($) {
 
     var LinkPreview = function(element, options) {
@@ -53,6 +67,7 @@
         $element: null,
         $previewContainer: null,
         $refreshButton: null,
+        $autoRefresh: null,
 
         init: function(element, options) {
 
@@ -77,6 +92,19 @@
                 });
             }
 
+
+            if (options && options.autoRefresh) {
+                this.$autoRefresh = $(options.autoRefresh);
+
+                var that = this;
+                this.$element.keyup(function(event) {
+                    that.emptyPreviewContainer();
+                    that.initUrlValue();
+                    var urli = that.url.autoLink();
+                    that.getSource(String(urli), that.renderPreview, that.renderError);
+                });
+            }
+
             this.getSource(this.url, this.renderPreview, this.renderError);
         },
 
@@ -148,7 +176,7 @@
         renderPreview: function(url, data, that) {
 
             // old request
-            if (that.url !== url) {
+            if (that.url.autoLink() !== url.autoLink()) {
                 return;
             }
 
@@ -215,18 +243,21 @@
         },
 
         findTitleInDom: function($dom) {
-            return $dom.find("title").text() ||
-                $dom.find("meta[name=title]").attr("content");
+            return $dom.find("meta[property='og:title']").attr("content") ||
+                   $dom.find("title").text() ||
+                   $dom.find("meta[name=title]").attr("content");
         },
 
         findDescriptionInDom: function($dom) {
-            return $dom.find("meta[name=description]").attr("content");
+            return  $dom.find("meta[property='og:description']").attr("content") ||
+                    $dom.find("meta[name=description]").attr("content") ||
+                    $dom.find("div .description").text();
         },
 
         findImageInDom: function($dom) {
-            var imageSrc = $dom.find("meta[itemprop=image]").attr("content") ||
-                $dom.find("link[rel=image_src]").attr("content") ||
+            var imageSrc = $dom.find("meta[property='og:image'").attr("content") ||
                 $dom.find("meta[itemprop=image]").attr("content") ||
+                $dom.find("link[rel=image_src]").attr("content") ||
                 this.findFirstImageInBody($dom.find("body"));
 
             // maybe the returned url is relative
@@ -268,6 +299,7 @@
         },
 
         validateUrl: function(value) {
+            value = value.autoLink().trim();
             return (/^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i).test(value);
         }
     };

demos/php-proxy/js/main.js

@@ -1,12 +1,13 @@
 $(function() {
-    $("a").linkpreview({
-        previewContainer: "#preview-container"
-    });
+    // $("a").linkpreview({
+    //     previewContainer: "#preview-container"
+    // });
     $("input").linkpreview({
         previewContainer: "#preview-container2",
         refreshButton: "#refresh-button",
         previewContainerClass: "row-fluid",
         errorMessage: "Invalid URL",
+        autoRefresh: true,
         preProcess: function() {
             console.log("preProcess");
         },

library/js/bootstrap-linkpreview.js

@@ -38,6 +38,20 @@
  * limitations under the License.
  * ========================================================= */
 
+
+  /* AUTO LINKING */
+(function() {
+    var autoLink = function() {
+        var pattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
+
+        return this.match(pattern)[0].trim();
+    };
+
+  String.prototype['autoLink'] = autoLink;
+
+}).call(this);
+
+
 (function($) {
 
     var LinkPreview = function(element, options) {
@@ -53,6 +67,7 @@
         $element: null,
         $previewContainer: null,
         $refreshButton: null,
+        $autoRefresh: null,
 
         init: function(element, options) {
 
@@ -77,6 +92,19 @@
                 });
             }
 
+
+            if (options && options.autoRefresh) {
+                this.$autoRefresh = $(options.autoRefresh);
+
+                var that = this;
+                this.$element.keyup(function(event) {
+                    that.emptyPreviewContainer();
+                    that.initUrlValue();
+                    var urli = that.url.autoLink();
+                    that.getSource(String(urli), that.renderPreview, that.renderError);
+                });
+            }
+
             this.getSource(this.url, this.renderPreview, this.renderError);
         },
 
@@ -148,7 +176,7 @@
         renderPreview: function(url, data, that) {
 
             // old request
-            if (that.url !== url) {
+            if (that.url.autoLink() !== url.autoLink()) {
                 return;
             }
 
@@ -271,6 +299,7 @@
         },
 
         validateUrl: function(value) {
+            value = value.autoLink().trim();
             return (/^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i).test(value);
         }
     };