Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
9.6 KiB
228 lines
9.6 KiB
11 years ago
|
/* MediaElement
|
||
|
|
================================================== */
|
||
|
|
if(typeof VMM != 'undefined' && typeof VMM.MediaElement == 'undefined') {
|
||
|
|
|
||
|
|
VMM.MediaElement = ({
|
||
|
|
|
||
|
|
init: function() {
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
loadingmessage: function(m) {
|
||
|
|
return "<div class='vco-loading'><div class='vco-loading-container'><div class='vco-loading-icon'></div>" + "<div class='vco-message'><p>" + m + "</p></div></div></div>";
|
||
|
|
},
|
||
|
|
|
||
|
|
thumbnail: function(data, w, h, uid) {
|
||
|
|
var _w = 16,
|
||
|
|
_h = 24,
|
||
|
|
_uid = "";
|
||
|
|
|
||
|
|
if (w != null && w != "") {_w = w};
|
||
|
|
if (h != null && h != "") {_h = h};
|
||
|
|
if (uid != null && uid != "") {_uid = uid};
|
||
|
|
|
||
|
|
if (data.media != null && data.media != "") {
|
||
|
|
var _valid = true,
|
||
|
|
mediaElem = "",
|
||
|
|
m = VMM.MediaType(data.media); //returns an object with .type and .id
|
||
|
|
|
||
|
|
// DETERMINE THUMBNAIL OR ICON
|
||
|
|
if (data.thumbnail != null && data.thumbnail != "") {
|
||
|
|
trace("CUSTOM THUMB");
|
||
|
|
mediaElem = "<div class='thumbnail thumb-custom' id='" + uid + "_custom_thumb'><img src='" + data.thumbnail + "'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "image") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-photo'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "flickr") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-photo' id='" + uid + "_thumb'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "instagram") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-instagram' id='" + uid + "_thumb'><img src='" + VMM.ExternalAPI.instagram.get(m.id, true) + "'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "youtube") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-youtube' id='" + uid + "_thumb'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "googledoc") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-document'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "vimeo") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-vimeo' id='" + uid + "_thumb'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "vine") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-vine'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "dailymotion") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-video'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "twitter"){
|
||
|
|
mediaElem = "<div class='thumbnail thumb-twitter'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "twitter-ready") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-twitter'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "soundcloud") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-audio'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "google-map") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-map'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "googleplus") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-googleplus'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "wikipedia") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-wikipedia'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "storify") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-storify'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "quote") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-quote'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "iframe") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-video'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "unknown") {
|
||
|
|
if (m.id.match("blockquote")) {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-quote'></div>";
|
||
|
|
} else {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-plaintext'></div>";
|
||
|
|
}
|
||
|
|
return mediaElem;
|
||
|
|
} else if (m.type == "website") {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-website' id='" + uid + "_thumb'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
} else {
|
||
|
|
mediaElem = "<div class='thumbnail thumb-plaintext'></div>";
|
||
|
|
return mediaElem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
create: function(data, uid) {
|
||
|
|
var _valid = false,
|
||
|
|
//loading_messege = "<span class='messege'><p>" + VMM.master_config.language.messages.loading + "</p></span>";
|
||
|
|
loading_messege = VMM.MediaElement.loadingmessage(VMM.master_config.language.messages.loading + "...");
|
||
|
|
|
||
|
|
if (data.media != null && data.media != "") {
|
||
|
|
var mediaElem = "", captionElem = "", creditElem = "", _id = "", isTextMedia = false, m;
|
||
|
|
|
||
|
|
m = VMM.MediaType(data.media); //returns an object with .type and .id
|
||
|
|
m.uid = uid;
|
||
|
|
_valid = true;
|
||
|
|
|
||
|
|
// CREDIT
|
||
|
|
if (data.credit != null && data.credit != "") {
|
||
|
|
creditElem = "<div class='credit'>" + VMM.Util.linkify_with_twitter(data.credit, "_blank") + "</div>";
|
||
|
|
}
|
||
|
|
// CAPTION
|
||
|
|
if (data.caption != null && data.caption != "") {
|
||
|
|
captionElem = "<div class='caption'>" + VMM.Util.linkify_with_twitter(data.caption, "_blank") + "</div>";
|
||
|
|
}
|
||
|
|
// IMAGE
|
||
|
|
if (m.type == "image") {
|
||
|
|
if (m.id.match("https://")) {
|
||
|
|
m.id = m.id.replace("https://","http://");
|
||
|
|
}
|
||
|
|
mediaElem = "<div class='media-image media-shadow'><img src='" + m.id + "' class='media-image'></div>";
|
||
|
|
// FLICKR
|
||
|
|
} else if (m.type == "flickr") {
|
||
|
|
//mediaElem = "<div class='media-image media-shadow' id='" + uid + "'>" + loading_messege + "</div>";
|
||
|
|
mediaElem = "<div class='media-image media-shadow'><a href='" + m.link + "' target='_blank'><img id='" + uid + "'></a></div>";
|
||
|
|
VMM.ExternalAPI.flickr.get(m);
|
||
|
|
// INSTAGRAM
|
||
|
|
} else if (m.type == "instagram") {
|
||
|
|
mediaElem = "<div class='media-image media-shadow'><a href='" + m.link + "' target='_blank'><img src='" + VMM.ExternalAPI.instagram.get(m) + "'></a></div>";
|
||
|
|
//VMM.ExternalAPI.instagram.get(m.id, uid);
|
||
|
|
// GOOGLE DOCS
|
||
|
|
} else if (m.type == "googledoc") {
|
||
|
|
mediaElem = "<div class='media-frame media-shadow doc' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
VMM.ExternalAPI.googledocs.get(m);
|
||
|
|
// YOUTUBE
|
||
|
|
} else if (m.type == "youtube") {
|
||
|
|
mediaElem = "<div class='media-shadow'><div class='media-frame video youtube' id='" + m.uid + "'>" + loading_messege + "</div></div>";
|
||
|
|
VMM.ExternalAPI.youtube.get(m);
|
||
|
|
// VIMEO
|
||
|
|
} else if (m.type == "vimeo") {
|
||
|
|
mediaElem = "<div class='media-shadow media-frame video vimeo' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
VMM.ExternalAPI.vimeo.get(m);
|
||
|
|
// DAILYMOTION
|
||
|
|
} else if (m.type == "dailymotion") {
|
||
|
|
mediaElem = "<div class='media-shadow'><iframe class='media-frame video dailymotion' autostart='false' frameborder='0' width='100%' height='100%' src='http://www.dailymotion.com/embed/video/" + m.id + "'></iframe></div>";
|
||
|
|
// VINE
|
||
|
|
} else if (m.type == "vine") {
|
||
|
|
mediaElem = "<div class='media-shadow media-frame video vine' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
VMM.ExternalAPI.vine.get(m);
|
||
|
|
// TWITTER
|
||
|
|
} else if (m.type == "twitter"){
|
||
|
|
mediaElem = "<div class='twitter' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
isTextMedia = true;
|
||
|
|
VMM.ExternalAPI.twitter.get(m);
|
||
|
|
// TWITTER
|
||
|
|
} else if (m.type == "twitter-ready") {
|
||
|
|
isTextMedia = true;
|
||
|
|
mediaElem = m.id;
|
||
|
|
// SOUNDCLOUD
|
||
|
|
} else if (m.type == "soundcloud") {
|
||
|
|
mediaElem = "<div class='media-frame media-shadow soundcloud' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
VMM.ExternalAPI.soundcloud.get(m);
|
||
|
|
// GOOGLE MAPS
|
||
|
|
} else if (m.type == "google-map") {
|
||
|
|
mediaElem = "<div class='media-frame media-shadow map' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
VMM.ExternalAPI.googlemaps.get(m);
|
||
|
|
// GOOGLE PLUS
|
||
|
|
} else if (m.type == "googleplus") {
|
||
|
|
_id = "googleplus_" + m.id;
|
||
|
|
mediaElem = "<div class='googleplus' id='" + _id + "'>" + loading_messege + "</div>";
|
||
|
|
isTextMedia = true;
|
||
|
|
VMM.ExternalAPI.googleplus.get(m);
|
||
|
|
// WIKIPEDIA
|
||
|
|
} else if (m.type == "wikipedia") {
|
||
|
|
mediaElem = "<div class='wikipedia' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
isTextMedia = true;
|
||
|
|
VMM.ExternalAPI.wikipedia.get(m);
|
||
|
|
// STORIFY
|
||
|
|
} else if (m.type == "storify") {
|
||
|
|
isTextMedia = true;
|
||
|
|
mediaElem = "<div class='plain-text-quote'>" + m.id + "</div>";
|
||
|
|
// IFRAME
|
||
|
|
} else if (m.type == "iframe") {
|
||
|
|
isTextMedia = true;
|
||
|
|
mediaElem = "<div class='media-shadow'><iframe class='media-frame video' autostart='false' frameborder='0' width='100%' height='100%' src='" + m.id + "'></iframe></div>";
|
||
|
|
// QUOTE
|
||
|
|
} else if (m.type == "quote") {
|
||
|
|
isTextMedia = true;
|
||
|
|
mediaElem = "<div class='plain-text-quote'>" + m.id + "</div>";
|
||
|
|
// UNKNOWN
|
||
|
|
} else if (m.type == "unknown") {
|
||
|
|
trace("NO KNOWN MEDIA TYPE FOUND TRYING TO JUST PLACE THE HTML");
|
||
|
|
isTextMedia = true;
|
||
|
|
mediaElem = "<div class='plain-text'><div class='container'>" + VMM.Util.properQuotes(m.id) + "</div></div>";
|
||
|
|
// WEBSITE
|
||
|
|
} else if (m.type == "website") {
|
||
|
|
|
||
|
|
mediaElem = "<div class='media-shadow website' id='" + m.uid + "'>" + loading_messege + "</div>";
|
||
|
|
VMM.ExternalAPI.webthumb.get(m);
|
||
|
|
//mediaElem = "<div class='media-shadow website'><a href='" + m.id + "' target='_blank'>" + "<img src='http://api1.thumbalizr.com/?url=" + m.id.replace(/[\./]$/g, "") + "&width=300' class='media-image'></a></div>";
|
||
|
|
|
||
|
|
// NO MATCH
|
||
|
|
} else {
|
||
|
|
trace("NO KNOWN MEDIA TYPE FOUND");
|
||
|
|
trace(m.type);
|
||
|
|
}
|
||
|
|
|
||
|
|
// WRAP THE MEDIA ELEMENT
|
||
|
|
mediaElem = "<div class='media-container' >" + mediaElem + creditElem + captionElem + "</div>";
|
||
|
|
// RETURN
|
||
|
|
if (isTextMedia) {
|
||
|
|
return "<div class='text-media'><div class='media-wrapper'>" + mediaElem + "</div></div>";
|
||
|
|
} else {
|
||
|
|
return "<div class='media-wrapper'>" + mediaElem + "</div>";
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}).init();
|
||
|
|
}
|