Add image support to blergmedia, and fix functionality in Firefox

diff --git a/www/jssrc/lib/blergmedia.js b/www/jssrc/lib/blergmedia.js
index cdd3e80..c53ec5c 100644 (file)
--- a/www/jssrc/lib/blergmedia.js
+++ b/www/jssrc/lib/blergmedia.js
@@ -1,6 +1,7 @@
 var BlergMedia = {
     audioExtensions: [],
-    videoExtensions: []
+    videoExtensions: [],
+    imageExtensions: ['jpg', 'jpeg', 'gif', 'png']
 };
 
 BlergMedia.media_init = function() {
@@ -41,11 +42,14 @@ BlergMedia.media_init = function() {
         BlergMedia.videoTypeRegex =      new RegExp("video:(" + BlergMedia.videoExtensions.join('|') + ")$");
         BlergMedia.videoExtensionRegex = new RegExp("\\.(" + BlergMedia.videoExtensions.join('|') + ")$");
     }
+
+    BlergMedia.imageTypeRegex      = new RegExp("image:(" + BlergMedia.imageExtensions.join('|') + ")$");
+    BlergMedia.imageExtensionRegex = new RegExp("\\.(" + BlergMedia.imageExtensions.join('|') + ")$");
 }
 
-BlergMedia.play_audio = function() {
-    var e = event.target.parentElement;
-    var url = event.target.parentElement.href;
+BlergMedia.play_audio = function(ev) {
+    var e = ev.target.parentElement;
+    var url = ev.target.parentElement.href;
     var audio_element = document.createElement('audio');
     audio_element.src = url;
     audio_element.controls = 1;
@@ -53,9 +57,9 @@ BlergMedia.play_audio = function() {
     e.parentElement.replaceChild(audio_element, e);
 }
 
-BlergMedia.play_video = function() {
-    var e = event.target.parentElement;
-    var url = event.target.parentElement.href;
+BlergMedia.play_video = function(ev) {
+    var e = ev.target.parentElement;
+    var url = ev.target.parentElement.href;
     var p = document.createElement('p');
     var video_element = document.createElement('video');
     video_element.src = url;
@@ -65,13 +69,29 @@ BlergMedia.play_video = function() {
     e.parentElement.replaceChild(video_element, e);
 }
 
+BlergMedia.show_image = function(ev) {
+    var img = ev.target;
+    var medialink = img.parentElement;
+    var url = medialink.href;
+    var anchor = medialink.previousElementSibling;
+    var title = anchor.firstChild.data;
+    img.src = url;
+    img.title = img.alt = title;
+    // Get rid of whitespace between anchor and medialink
+    medialink.parentElement.removeChild(medialink.previousSibling);
+    anchor.parentElement.removeChild(anchor);
+}
+
 BlergMedia.process = function(data) {
-    if (BlergMedia.audioExtensionRegex.test(data.url) ||
-        (data.extra && BlergMedia.audioTypeRegex.test(data.extra))) {
-        data.widget = '<a href="' + data.url + '" onclick="BlergMedia.play_audio(); return false"><img src="/images/play.png"></a>';
+    if (BlergMedia.imageExtensionRegex.test(data.url) ||
+        (data.extra && BlergMedia.imageExtensionRegex.test(data.extra))) {
+        data.widget = '<a href="' + data.url + '" onclick="BlergMedia.show_image(event); return false"><img src="/images/play.png"></a>';
+    } else if (BlergMedia.audioExtensionRegex.test(data.url) ||
+               (data.extra && BlergMedia.audioTypeRegex.test(data.extra))) {
+        data.widget = '<a href="' + data.url + '" onclick="BlergMedia.play_audio(event); return false"><img src="/images/play.png"></a>';
     } else if (BlergMedia.videoExtensionRegex.test(data.url) ||
                (data.extra && BlergMedia.videoTypeRegex.test(data.extra))) {
-        data.widget = '<a href="' + data.url + '" onclick="BlergMedia.play_video(); return false"><img src="/images/play.png"></a>';
+        data.widget = '<a href="' + data.url + '" onclick="BlergMedia.play_video(event); return false"><img src="/images/play.png"></a>';
     }
 
     return data;