[KiwiIRC.git] / client / src / views / mediamessage.js

_kiwi.view.MediaMessage = Backbone.View.extend({
    events: {
        'click .media_close': 'close'
    },

    initialize: function () {
        // Get the URL from the data
        this.url = this.$el.data('url');
    },

    toggle: function () {
        if (!this.$content || !this.$content.is(':visible')) {
            this.open();
        } else {
            this.close();
        }
    },

    // Close the media content and remove it from display
    close: function () {
        var that = this;
        this.$content.slideUp('fast', function () {
            that.$content.remove();
        });
    },

    // Open the media content within its wrapper
    open: function () {
        // Create the content div if we haven't already
        if (!this.$content) {
            this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> ' + _kiwi.global.i18n.translate('client_views_mediamessage_close').fetch() + '</a><br /><div class="content"></div></div>');
            this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) || _kiwi.global.i18n.translate('client_views_mediamessage_notfound').fetch() + ' :(');
        }

        // Now show the content if not already
        if (!this.$content.is(':visible')) {
            // Hide it first so the slideDown always plays
            this.$content.hide();

            // Add the media content and slide it into view
            this.$el.append(this.$content);
            this.$content.slideDown();
        }
    },


    // Generate the media content for each recognised type
    mediaTypes: {
        twitter: function () {
            var tweet_id = this.$el.data('tweetid');
            var that = this;

            $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
                that.$content.find('.content').html(data.html);
            });

            return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_tweet').fetch() + '...</div>');
        },


        image: function () {
            return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
        },


        imgur: function () {
            var that = this;

            $.getJSON('http://api.imgur.com/oembed?url=' + this.url, function (data) {
                var img_html = '<a href="' + data.url + '" target="_blank"><img height="100" src="' + data.url + '" /></a>';
                that.$content.find('.content').html(img_html);
            });

            return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_image').fetch() + '...</div>');
        },


        reddit: function () {
            var that = this;
            var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);

            $.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {
                console.log('Loaded reddit data', data);
                var post = data[0].data.children[0].data;
                var thumb = '';

                // Show a thumbnail if there is one
                if (post.thumbnail) {
                    //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';

                    // Hide the thumbnail if an over_18 image
                    if (post.over_18) {
                        thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
                        thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
                        thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';
                        thumb += '</span>';
                    } else {
                        thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
                    }
                }

                // Build the template string up
                var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. &nbsp;&nbsp; ';
                tmpl += '<i class="icon-arrow-up"></i> <%- ups %> &nbsp;&nbsp; <i class="icon-arrow-down"></i> <%- downs %><br />';
                tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';

                that.$content.find('.content').html(_.template(tmpl, post));
            });

            return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_reddit').fetch() + '...</div>');
        },


        youtube: function () {
            var ytid = this.$el.data('ytid');
            var that = this;
            var yt_html = '<iframe width="480" height="270" src="https://www.youtube.com/embed/'+ ytid +'?feature=oembed" frameborder="0" allowfullscreen=""></iframe>';
            that.$content.find('.content').html(yt_html);

            return $('');
        },


        gist: function () {
            var that = this,
                matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(this.url);

            $.getJSON('https://gist.github.com/'+matches[1]+'.json?callback=?' + (matches[2] || ''), function (data) {
                $('body').append('<link rel="stylesheet" href="' + data.stylesheet + '" type="text/css" />');
                that.$content.find('.content').html(data.div);
            });

            return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_gist').fetch() + '...</div>');
        }
    }
    }, {

    /**
     * Add a media message type to append HTML after a matching URL
     * match() should return true if it wants to handle this URL
     * buildHtml() should return the HTML string to append after the URL in the message
     */
    addType: function(match, buildHtml) {
        if (typeof match !== 'function' || typeof buildHtml !== 'function')
            return;

        this.types = this.types || [];
        this.types.push({match: match, buildHtml: buildHtml});
    },


    // Build the closed media HTML from a URL
    buildHtml: function (url) {
        var html = '', matches;

        _.each(this.types || [], function(type) {
            if (!type.match(url))
                return;

            html += type.buildHtml(url);
        });

        // Is it an image?
        if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
            html += '<span class="media image" data-type="image" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
        }

        // Is this an imgur link not picked up by the images regex?
        matches = (/imgur\.com\/[^/]*(?!=\.[^!.]+($|\?))/ig).exec(url);
        if (matches && !url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
            html += '<span class="media imgur" data-type="imgur" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
        }

        // Is it a tweet?
        matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);
        if (matches) {
            html += '<span class="media twitter" data-type="twitter" data-url="' + url + '" data-tweetid="' + matches[2] + '" title="Show tweet information"><a class="open"><i class="icon-chevron-right"></i></a></span>';
        }

        // Is reddit?
        matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
        if (matches) {
            html += '<span class="media reddit" data-type="reddit" data-url="' + url + '" title="Reddit thread"><a class="open"><i class="icon-chevron-right"></i></a></span>';
        }

        // Is youtube?
        matches = (/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/gi).exec(url);
        if (matches) {
            html += '<span class="media youtube" data-type="youtube" data-url="' + url + '" data-ytid="' + matches[1] + '" title="YouTube Video"><a class="open"><i class="icon-chevron-right"></i></a></span>';
        }

        // Is a github gist?
        matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(url);
        if (matches) {
            html += '<span class="media gist" data-type="gist" data-url="' + url + '" data-gist_id="' + matches[1] + '" title="GitHub Gist"><a class="open"><i class="icon-chevron-right"></i></a></span>';
        }

        return html;
    }
});
Commit	Line	Data
50ac472f D	1	_kiwi.view.MediaMessage = Backbone.View.extend({
	2	events: {
	3	'click .media_close': 'close'
	4	},
	5
	6	initialize: function () {
	7	// Get the URL from the data
	8	this.url = this.$el.data('url');
	9	},
	10
975f9705 D	11	toggle: function () {
	12	if (!this.$content \|\| !this.$content.is(':visible')) {
	13	this.open();
	14	} else {
	15	this.close();
	16	}
	17	},
	18
50ac472f D	19	// Close the media content and remove it from display
	20	close: function () {
	21	var that = this;
	22	this.$content.slideUp('fast', function () {
	23	that.$content.remove();
	24	});
	25	},
	26
	27	// Open the media content within its wrapper
	28	open: function () {
	29	// Create the content div if we haven't already
	30	if (!this.$content) {
247dd7ac N	31	this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> ' + _kiwi.global.i18n.translate('client_views_mediamessage_close').fetch() + '</a><br /><div class="content"></div></div>');
247dd7ac N	32	this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) \|\| _kiwi.global.i18n.translate('client_views_mediamessage_notfound').fetch() + ' :(');
50ac472f D	33	}
	34
	35	// Now show the content if not already
	36	if (!this.$content.is(':visible')) {
	37	// Hide it first so the slideDown always plays
	38	this.$content.hide();
	39
	40	// Add the media content and slide it into view
	41	this.$el.append(this.$content);
	42	this.$content.slideDown();
	43	}
	44	},
	45
	46
	47
	48	// Generate the media content for each recognised type
	49	mediaTypes: {
	50	twitter: function () {
	51	var tweet_id = this.$el.data('tweetid');
	52	var that = this;
	53
	54	$.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {
	55	that.$content.find('.content').html(data.html);
	56	});
	57
247dd7ac	58	return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_tweet').fetch() + '...</div>');
50ac472f D	59	},
	60
	61
	62	image: function () {
	63	return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
	64	},
	65
d513dc2c	66
390de62e	67	imgur: function () {
	68	var that = this;
	69
	70	$.getJSON('http://api.imgur.com/oembed?url=' + this.url, function (data) {
8ffcb297	71	var img_html = '<a href="' + data.url + '" target="_blank"><img height="100" src="' + data.url + '" /></a>';
390de62e	72	that.$content.find('.content').html(img_html);
390de62e	73	});
50ac472f	74
247dd7ac	75	return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_image').fetch() + '...</div>');
390de62e	76	},
390de62e	77
d513dc2c	78
50ac472f D	79	reddit: function () {
	80	var that = this;
	81	var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);
	82
	83	$.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {
	84	console.log('Loaded reddit data', data);
	85	var post = data[0].data.children[0].data;
	86	var thumb = '';
	87
	88	// Show a thumbnail if there is one
	89	if (post.thumbnail) {
	90	//post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';
	91
	92	// Hide the thumbnail if an over_18 image
	93	if (post.over_18) {
	94	thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';
	95	thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';
	96	thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';
	97	thumb += '</span>';
	98	} else {
	99	thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';
	100	}
	101	}
	102
	103	// Build the template string up
	104	var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>.    ';
	105	tmpl += '<i class="icon-arrow-up"></i> <%- ups %>    <i class="icon-arrow-down"></i> <%- downs %><br />';
	106	tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';
	107
	108	that.$content.find('.content').html(_.template(tmpl, post));
	109	});
	110
247dd7ac	111	return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_reddit').fetch() + '...</div>');
9ff10506	112	},
d513dc2c D	113
d513dc2c D	114
1cee8867	115	youtube: function () {
1cee8867	116	var ytid = this.$el.data('ytid');
9ff10506	117	var that = this;
b99b615e	118	var yt_html = '<iframe width="480" height="270" src="https://www.youtube.com/embed/'+ ytid +'?feature=oembed" frameborder="0" allowfullscreen=""></iframe>';
1cee8867	119	that.$content.find('.content').html(yt_html);
390de62e	120
390de62e	121	return $('');
5b01f32b D	122	},
	123
	124
	125	gist: function () {
	126	var that = this,
	127	matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(this.url);
	128
	129	$.getJSON('https://gist.github.com/'+matches[1]+'.json?callback=?' + (matches[2] \|\| ''), function (data) {
	130	$('body').append('<link rel="stylesheet" href="' + data.stylesheet + '" type="text/css" />');
	131	that.$content.find('.content').html(data.div);
	132	});
	133
247dd7ac	134	return $('<div>' + _kiwi.global.i18n.translate('client_views_mediamessage_load_gist').fetch() + '...</div>');
50ac472f D	135	}
50ac472f D	136	}
390de62e	137	}, {
50ac472f	138
f1452889 D	139	/**
	140	* Add a media message type to append HTML after a matching URL
	141	* match() should return true if it wants to handle this URL
	142	* buildHtml() should return the HTML string to append after the URL in the message
	143	*/
	144	addType: function(match, buildHtml) {
	145	if (typeof match !== 'function' \|\| typeof buildHtml !== 'function')
	146	return;
	147
	148	this.types = this.types \|\| [];
	149	this.types.push({match: match, buildHtml: buildHtml});
	150	},
	151
	152
50ac472f D	153	// Build the closed media HTML from a URL
	154	buildHtml: function (url) {
	155	var html = '', matches;
	156
f1452889 D	157	_.each(this.types \|\| [], function(type) {
	158	if (!type.match(url))
	159	return;
	160
	161	html += type.buildHtml(url);
	162	});
	163
50ac472f D	164	// Is it an image?
	165	if (url.match(/(\.jpe?g\|\.gif\|\.bmp\|\.png)\??$/i)) {
	166	html += '<span class="media image" data-type="image" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
	167	}
d513dc2c D	168
d513dc2c D	169	// Is this an imgur link not picked up by the images regex?
390de62e	170	matches = (/imgur\.com\/[^/]*(?!=\.[^!.]+($\|\?))/ig).exec(url);
d513dc2c D	171	if (matches && !url.match(/(\.jpe?g\|\.gif\|\.bmp\|\.png)\??$/i)) {
	172	html += '<span class="media imgur" data-type="imgur" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
	173	}
50ac472f D	174
	175	// Is it a tweet?
	176	matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);
	177	if (matches) {
	178	html += '<span class="media twitter" data-type="twitter" data-url="' + url + '" data-tweetid="' + matches[2] + '" title="Show tweet information"><a class="open"><i class="icon-chevron-right"></i></a></span>';
	179	}
	180
	181	// Is reddit?
	182	matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);
	183	if (matches) {
	184	html += '<span class="media reddit" data-type="reddit" data-url="' + url + '" title="Reddit thread"><a class="open"><i class="icon-chevron-right"></i></a></span>';
	185	}
d513dc2c	186
9ff10506	187	// Is youtube?
1cee8867	188	matches = (/(?:youtube\.com\/(?:[^\/]+\/.+\/\|(?:v\|e(?:mbed)?)\/\|.*[?&]v=)\|youtu\.be\/)([^"&?\/ ]{11})/gi).exec(url);
9ff10506	189	if (matches) {
1cee8867	190	html += '<span class="media youtube" data-type="youtube" data-url="' + url + '" data-ytid="' + matches[1] + '" title="YouTube Video"><a class="open"><i class="icon-chevron-right"></i></a></span>';
9ff10506	191	}
390de62e	192
5b01f32b D	193	// Is a github gist?
	194	matches = (/https?:\/\/gist\.github\.com\/(?:[a-z0-9-]*\/)?([a-z0-9]+)(\#(.+))?$/i).exec(url);
	195	if (matches) {
	196	html += '<span class="media gist" data-type="gist" data-url="' + url + '" data-gist_id="' + matches[1] + '" title="GitHub Gist"><a class="open"><i class="icon-chevron-right"></i></a></span>';
	197	}
	198
50ac472f D	199	return html;
50ac472f D	200	}
9ff10506	201	});