Skip to content

Instantly share code, notes, and snippets.

@pjaspers
Last active December 31, 2015 22:39
Show Gist options
  • Save pjaspers/8054714 to your computer and use it in GitHub Desktop.
Save pjaspers/8054714 to your computer and use it in GitHub Desktop.
Expand various image providers, without having a lot of duplicate code. Install by hand, like an animal, or use [gasoline](https://github.com/pjaspers/gasoline)
//
// Expand various image providers, without having a lot of duplicate code.
//
// Install by hand, like an animal, or use [gasoline](https://github.com/pjaspers/gasoline)
//
Campfire.UniversalImageExpander = Class.create({
initialize: function(chat) {
this.chat = chat;
this.services = {
dribbble: /^https?:\/\/[www.]?dribbble.com\/shots\/([A-Za-z0-9]+)/,
cloudapp: /^https?:\/\/(cl.ly|cloud.fousa.be)\/(image\/)?([A-Za-z0-9]+)\/?$/,
flickr: /^https?:\/\/(www.)?flickr.com\/[A-Za-z0-9]+\/[A-Za-z0-9]+\/[A-Za-z0-9]+\/?$/,
instagram: /^https?:\/\/(instagr.am|instagram.com)\/p\/[A-Za-z0-9_]+\/?$/,
imgur: /^https?:\/\/imgur.com\/gallery\/[A-Za-z0-9_]+\/?$/
};
var messages = this.chat.transcript.messages;
for (var i = 0; i < messages.length; i++) {
this.detectImageURL(messages[i]);
}
},
fetchJSON: function(messageID, url, service) {
console.log("Fetching %s: %s", service, url);
var s = service.capitalize();
window.propane.requestJSON(messageID, url, 'window.chat.universalimageexpander', 'on' + s + 'Loaded', 'on' + s + 'Failed');
},
fetchDribbble: function(messageID, match) {
var url = "http://api.dribbble.com/shots/" + match[1];
this.fetchJSON(messageID, url, 'dribbble');
},
onDribbbleLoaded: function(messageID, data) {
var imageURL = data['image_url'];
this.insertImageURL(messageID, imageURL);
},
fetchImgur: function(messageID, match) {
var url = "http://noembed.com/embed?url=" + match[0];
this.fetchJSON(messageID, url, 'imgur');
},
onImgurLoaded: function(messageID, data) {
var imageURL = data['media_url'];
this.insertImageURL(messageID, imageURL);
},
fetchCloudapp: function(messageID, match) {
var url = match[0];
this.fetchJSON(messageID, url, 'cloudapp');
},
onCloudappLoaded: function(messageID, data) {
var imageURL = data['content_url'];
this.insertImageURL(messageID, imageURL);
},
fetchFlickr: function(messageID, match) {
var url = "http://www.flickr.com/services/oembed/?url=" + match[0] + "&format=json";
this.fetchJSON(messageID, url, 'flickr');
},
onFlickrLoaded: function(messageID, data) {
var imageURL = data['url'];
this.insertImageURL(messageID, imageURL);
},
fetchInstagram: function(messageID, match) {
var url = "http://api.instagram.com/oembed?url=" + match[0];
this.fetchJSON(messageID, url, 'instagram');
},
onInstagramLoaded: function(messageID, data) {
var imageURL = data['url'];
this.insertImageURL(messageID, imageURL);
},
detectImageURL: function(message) {
/* we are going to use the messageID to uniquely identify our requestJSON request
so we don't check pending messages */
if (message.pending()) return;
if (message.kind !== 'text') return;
var links = message.bodyElement().select('a:not(image)');
if (links.length != 1) return;
var href = links[0].getAttribute('href');
var match = null;
for (var service in this.services) {
match = href.match(this.services[service])
if (!match) continue;
var fetcher = this["fetch" + service.capitalize()];
if (!fetcher) {
console.log("No fetcher found for " + service);
} else {
fetcher.call(this, message.id(), match);
}
break;
}
},
insertImageURL: function(messageID, imageURL) {
var message = window.chat.transcript.getMessageById(messageID);
if (!message) return;
message.resize((function() {
message.bodyCell.insert({bottom: '<div style="width:100%; margin-top:5px; padding-top: 5px; border-top:1px dotted #ccc;"><a href="'+imageURL+'" class="image loading" target="_blank">' + '<img src="'+imageURL+'" onload="$dispatch(&quot;inlineImageLoaded&quot;, this)" onerror="$dispatch(&quot;inlineImageLoadFailed&quot;, this)" /></a></div>'});
}).bind(this));
},
onEmbedDataFailed: function(messageID) {
/* No cleanup required, we only alter the HTML after we get back a succesful load from the data */
},
onMessagesInsertedBeforeDisplay: function(messages) {
for (var i = 0; i < messages.length; i++) {
this.detectImageURL(messages[i]);
}
},
onMessageAccepted: function(message, messageID) {
this.detectImageURL(message);
}
});
Campfire.Responders.push("UniversalImageExpander");
window.chat.installPropaneResponder("UniversalImageExpander", "universalimageexpander");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment