Add image support to blergmedia, and fix functionality in Firefox

[blerg.git] / www / jssrc / lib / blergmedia.js

diff --git a/www/jssrc/lib/blergmedia.js b/www/jssrc/lib/blergmedia.js
index 0528a9b..c53ec5c 100644 (file)
--- a/www/jssrc/lib/blergmedia.js
+++ b/www/jssrc/lib/blergmedia.js
@@ -1,9 +1,10 @@
 var BlergMedia = {
     audioExtensions: [],
-    videoExtensions: []
+    videoExtensions: [],
+    imageExtensions: ['jpg', 'jpeg', 'gif', 'png']
 };
 
-function media_init() {
+BlergMedia.media_init = function() {
     var e = document.createElement('audio');
     if (!!e.canPlayType) {
         BlergMedia.has_audio = true;
@@ -19,6 +20,8 @@ function media_init() {
             BlergMedia.has_wav = true;
             BlergMedia.audioExtensions.push('wav');
         }
+        BlergMedia.audioTypeRegex =      new RegExp("audio:(" + BlergMedia.audioExtensions.join('|') + ")$");
+        BlergMedia.audioExtensionRegex = new RegExp("\\.(" + BlergMedia.audioExtensions.join('|') + ")$");
     }
 
     var e = document.createElement('video');
@@ -36,23 +39,60 @@ function media_init() {
             BlergMedia.has_webm = true;
             BlergMedia.videoExtensions.push('webm');
         }
+        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(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;
+    audio_element.autoplay = 1;
+    e.parentElement.replaceChild(audio_element, e);
 }
 
-function play_audio() {
-    var e = event.target.parentElement;
-    var url = event.target.parentElement.href;
-    var audio_element = new Element('audio', {src: url, controls: 1, autoplay: 1});
-    e.replace(audio_element);
+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;
+    video_element.controls = 1;
+    video_element.autoplay = 1;
+    p.appendChild(video_element);
+    e.parentElement.replaceChild(video_element, e);
 }
 
-function play_video() {
-    var e = event.target.parentElement;
-    var url = event.target.parentElement.href;
-    var p = new Element('p');
-    var video_element = new Element('video', {src: url, controls: 1, autoplay: 1});
-    p.insert(video_element);
-    e.replace(p);
+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);
 }
 
-window.addEventListener('load', media_init, false);
+BlergMedia.process = function(data) {
+    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(event); return false"><img src="/images/play.png"></a>';
+    }
+
+    return data;
+}