Embedded tweets in Markdown posts.

master
Nick Sergeant 2013-04-03 00:07:54 -04:00
parent 7ab815b387
commit 172e0855c3
8 changed files with 51 additions and 3 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -898,6 +898,10 @@ article.snipt {
min-height: 0;
margin: 20px 0 !important;
}
iframe.twitter-tweet {
margin: 20px 0 !important;
width: 100%;
}
}
a.expand, a.view-full {
background: #FFF url('/static/img/expand.png') 15px 18px no-repeat;

View File

@ -142,6 +142,7 @@ if(this.$body.hasClass('login')){$('input#id_username').focus();}
if(window.gittip_username){this.$aside_main.html(this.$aside_main.html().replace(/\[\[.*gittip.*\]\]/,'<iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/'+window.gittip_username+'/widget.html" width="48pt" height="22pt"></iframe>'));$('iframe',this.$aside_main).parent('p').prev('p').css('margin-bottom','10px');}
$('div.markdown pre code').each(function(i,e){hljs.highlightBlock(e);});if(this.$body.hasClass('homepage')){setTimeout(function(){var $facesInner=$('div.faces div.inner');var $faces=$('a',$facesInner);for(var i=0;i<$faces.length;i++){var $face=$faces.eq(i);var imageWidth=$('img',$face).width();if(imageWidth!=50){$face.remove();}}
$facesInner.hide();$facesInner.css('text-indent','0');$facesInner.fadeIn(400);},700);}
var $embeddedTweets=$('div.embedded-tweet');if($embeddedTweets.length){$.each($embeddedTweets,function(){var $tweetPlaceholder=$(this);var tweetID=$tweetPlaceholder.attr('data-tweet-id');$.ajax({url:'https://api.twitter.com/1/statuses/oembed.json?id='+tweetID+'&align=center',dataType:'jsonp',type:'get',success:function(resp){$tweetPlaceholder.replaceWith($(resp.html));}});});}
window.ui_halted=false;},events:{'showKeyboardShortcuts':'showKeyboardShortcuts','click a.mini-profile':'toggleMiniProfile'},keyboardShortcuts:function(){var $body=this.$body;var that=this;$search_queries=this.$search_queries;$search_page_query=this.$search_page_query;$search_query=this.$search_query;$document=$(document);$document.bind('keydown','/',function(e){if(!window.ui_halted){e.preventDefault();if($body.hasClass('search')){$search_page_query.focus();}else{$search_query.focus();}}});$document.bind('keydown','h',function(e){if(!window.ui_halted){window.ui_halted=true;$body.trigger('showKeyboardShortcuts');}else{if(that.$keyboard_shortcuts.is(':visible')){that.$keyboard_shortcuts.modal('hide');}}});$document.bind('keydown','t',function(e){if(!window.ui_halted){window.open('','_blank');}});$document.bind('keydown','r',function(e){if(!window.ui_halted){location.reload(true);}});$document.bind('keydown','Ctrl+h',function(e){if(!window.ui_halted){history.go(-1);}});$document.bind('keydown','Ctrl+l',function(e){if(!window.ui_halted){history.go(1);}});this.$search_queries.bind('keydown','esc',function(e){if(!window.ui_halted){e.preventDefault();this.blur();}});},showKeyboardShortcuts:function(){this.$keyboard_shortcuts.modal('toggle');},toggleMiniProfile:function(e){this.$aside_nav.toggleClass('open');return false;},inFieldLabels:function(){$('div.infield label',this.$body).inFieldLabels({fadeDuration:200});},stripeResponseHandler:function(status,response){var $form=$('form#pro-signup');if(response.error){$('button[type="submit"]',$form).removeAttr('disabled');$('.payment-loading').hide();$('.payment-errors').text(response.error.message).show();}else{var token=response.id;$('input#name').val('');$('input#number').val('');$('select#exp-month').val('');$('select#exp-year').val('');$('input#cvc').val('');$form.append("<input type='hidden' name='token' value='"+token+"'/>");$form.get(0).submit();}}});})(snipt.module('site'));
(function(Snipt){Snipt.SniptModel=Backbone.Model.extend({toSafe:function(){var snipt=this.toJSON();snipt.code=this.escape('code');snipt.title=this.escape('title');snipt.tags_list=this.escape('tags_list');if(typeof snipt.tags==='object'){for(var i;i<snipt.tags.length;i++){snipt.tags[i].name=_.escape(snipt.tags[i].name);}}
return snipt;}});Snipt.SniptView=Backbone.View.extend({tagName:'article',initialize:function(){this.model.view=this;this.model.bind('change',this.render,this);this.template=_.template($('#snipt').html());this.editTemplate=_.template($('#edit').html());this.initLocalVars();this.initLineNumbers();},events:{'click a.copy':'copyFromClick','click a.edit':'edit','click a.favorite':'favoriteToggle','click a.embed':'embedFromClick','click a.expand':'expand','click .container':'selectFromClick','copyClose':'copyClose','copyRaw':'copy','detail':'detail','deselect':'deselect','destroy':'destroy','edit':'edit','embed':'embed','embedClose':'embedClose','expand':'expand','fadeAndRemove':'fadeAndRemove','goToAuthor':'goToAuthor','next':'next','prev':'prev','selectSnipt':'select'},copy:function(){$('textarea',this.$copyModal).remove();window.ui_halted=true;this.$copyModalBody.append('<textarea class="raw"></textarea>');$textarea=$('textarea.raw',this.$copyModalBody).val(this.model.get('code'));this.$copyModal.modal('show');$textarea.select();},copyClose:function(){$('textarea',this.$copyModal).remove();},copyFromClick:function(){this.copy();return false;},deselect:function(){this.$el.removeClass('selected');window.$selected=false;},detail:function(){window.location=this.model.get('absolute_url');},destroy:function(){this.model.destroy();},edit:function(){window.editing=true;window.ui_halted=true;this.select();that=this;var editPane=this.editTemplate({snipt:this.model.toSafe()});window.site.$main.hide();window.site.$body.addClass('detail editing');window.site.$main_edit.html(editPane);$('option[value="'+this.model.get('lexer')+'"]',window.site.$main_edit).attr('selected','selected');var $selectLexer=$('select#id_lexer',window.site.$main_edit);$selectLexer.chosen();$('label.blog-post input',window.site.$main_edit).on('change',function(){var $checkbox=$(this);var $label=$checkbox.parent();var $publish_date=$label.siblings('label.publish-date');if($checkbox.attr('checked')){$label.removeClass('is-not-blog-post').addClass('is-blog-post');$publish_date.show();}else{$label.addClass('is-not-blog-post').removeClass('is-blog-post');$publish_date.hide();}
@ -153,7 +154,7 @@ this.setupCodeMirrorFullScreen();}
$('button.delete',window.site.$main_edit).on('click',function(){if(confirm('Are you sure you want to delete this snipt?')){that.model.destroy();window.site.snipt_list.escapeUI(true);}
return false;});$('button.cancel',window.site.$main_edit).on('click',function(){window.site.snipt_list.escapeUI();return false;});$('button.save',window.site.$main_edit).on('click',function(){$('button.cancel').text('Close');that.save();return false;});$('button.save-and-close',window.site.$main_edit).on('click',function(){that.save();window.site.snipt_list.escapeUI();return false;});window.scrollTo(0,0);return false;},embed:function(){$('textarea',this.$embedModal).remove();window.ui_halted=true;this.$embedModalBody.append('<textarea class="raw"></textarea>');$textarea=$('textarea.raw',this.$embedModalBody).val('<script type="text/javascript" src="'+this.model.get('embed_url')+'"></script>');this.$embedModal.modal('show');$textarea.select();},embedFromClick:function(){this.embed();return false;},embedClose:function(){$('textarea',this.$embedModal).remove();},expand:function(){this.$container.toggleClass('expanded',100);this.$tags.toggleClass('expanded');this.select();return false;},fadeAndRemove:function(){var $toRemove=$(this.el);var $nextSnipt=$toRemove.next('article.snipt');window.$selected=false;$toRemove.fadeOut('fast',function(){$(this).remove();$nextSnipt.trigger('selectSnipt');});return false;},goToAuthor:function(){window.location=this.model.get('user').absolute_url;},guessCodeMirrorLexer:function(val){if(val==='html'){return'htmlmixed';}
if(val==='js')return'javascript';if(val==='rb')return'ruby';return val;},favoriteToggle:function(){var that=this;if(this.$el.hasClass('favorited')){$.ajax('/api/private/favorite/'+this.model.get('favorite_id')+'/',{type:'delete',success:function(){that.$el.removeClass('favorited');that.$favorite.text('Favorite');},headers:{'Authorization':'ApiKey '+window.user+':'+window.api_key}});}else{$.ajax('/api/private/favorite/',{data:'{"snipt": '+this.model.get('id')+'}',contentType:'application/json',type:'post',success:function(resp){that.$el.addClass('favorited');that.model.set({'favorite_id':resp.id},{'silent':true});that.$favorite.text('Favorited');},headers:{'Authorization':'ApiKey '+window.user+':'+window.api_key}});}
return false;},initLineNumbers:function(){var lines=$('span.special',this.$el);var that=this;$.each(lines,function(){var l=$(this);var num=l.text().trim();var url=that.model.get('absolute_url');l.replaceWith('<a href="'+url+'#line-'+num+'">'+num+'</a>');});},initLocalVars:function(){this.$aside=$('aside',this.$el);this.$container=$('div.container',this.$el);this.$copyModal=$('div.copy-modal',this.$el);this.$copyModalBody=$('div.modal-body',this.$copyModal);this.$embedModal=$('div.embed-modal',this.$el);this.$embedModalBody=$('div.modal-body',this.$embedModal);this.$favorite=$('a.favorite',this.$el);this.$h1=$('header h1 a',this.$el);this.$tags=$('section.tags ul',this.$aside);this.$copyModal.on('hidden',function(e){$(this).parent().trigger('copyClose');window.ui_halted=false;window.from_modal=true;});this.$embedModal.on('hidden',function(e){$(this).parent().trigger('embedClose');window.ui_halted=false;window.from_modal=true;});},next:function(){if(!window.ui_halted){nextSnipt=this.$el.next('article.snipt');if(nextSnipt.length){return nextSnipt.trigger('selectSnipt');}}},prev:function(){if(!window.ui_halted){prevSnipt=this.$el.prev('article.snipt');if(prevSnipt.length){return prevSnipt.trigger('selectSnipt');}}},remove:function(){return false;},render:function(){this.$el.html(this.template({snipt:this.model.toSafe()}));this.initLocalVars();this.initLineNumbers();if(this.model.get('blog_post')===true){this.$el.addClass('blog-post');}else{this.$el.removeClass('blog-post');}
return false;},initEmbeddedTweets:function(){var $embeddedTweets=$('div.embedded-tweet');if($embeddedTweets.length){$.each($embeddedTweets,function(){var $tweetPlaceholder=$(this);var tweetID=$tweetPlaceholder.attr('data-tweet-id');$.ajax({url:'https://api.twitter.com/1/statuses/oembed.json?id='+tweetID+'&align=center',dataType:'jsonp',type:'get',success:function(resp){$tweetPlaceholder.replaceWith($(resp.html));}});});}},initLineNumbers:function(){var lines=$('span.special',this.$el);var that=this;$.each(lines,function(){var l=$(this);var num=l.text().trim();var url=that.model.get('absolute_url');l.replaceWith('<a href="'+url+'#line-'+num+'">'+num+'</a>');});},initLocalVars:function(){this.$aside=$('aside',this.$el);this.$container=$('div.container',this.$el);this.$copyModal=$('div.copy-modal',this.$el);this.$copyModalBody=$('div.modal-body',this.$copyModal);this.$embedModal=$('div.embed-modal',this.$el);this.$embedModalBody=$('div.modal-body',this.$embedModal);this.$favorite=$('a.favorite',this.$el);this.$h1=$('header h1 a',this.$el);this.$tags=$('section.tags ul',this.$aside);this.$copyModal.on('hidden',function(e){$(this).parent().trigger('copyClose');window.ui_halted=false;window.from_modal=true;});this.$embedModal.on('hidden',function(e){$(this).parent().trigger('embedClose');window.ui_halted=false;window.from_modal=true;});},next:function(){if(!window.ui_halted){nextSnipt=this.$el.next('article.snipt');if(nextSnipt.length){return nextSnipt.trigger('selectSnipt');}}},prev:function(){if(!window.ui_halted){prevSnipt=this.$el.prev('article.snipt');if(prevSnipt.length){return prevSnipt.trigger('selectSnipt');}}},remove:function(){return false;},render:function(){this.$el.html(this.template({snipt:this.model.toSafe()}));this.initLocalVars();this.initLineNumbers();this.initEmbeddedTweets();if(this.model.get('blog_post')===true){this.$el.addClass('blog-post');}else{this.$el.removeClass('blog-post');}
if(this.model.get('public')===true){this.$el.removeClass('private-snipt');}else{this.$el.addClass('private-snipt');}
if(this.model.get('user').username===window.user){this.$el.addClass('editable');}else{this.$el.removeClass('editable');}
if(this.model.get('line_count')>8&&!window.detail){this.$el.addClass('expandable');}else{this.$el.removeClass('expandable');}

View File

@ -191,6 +191,24 @@
}, 700);
}
// Populate any embedded tweets.
var $embeddedTweets = $('div.embedded-tweet');
if ($embeddedTweets.length) {
$.each($embeddedTweets, function() {
var $tweetPlaceholder = $(this);
var tweetID = $tweetPlaceholder.attr('data-tweet-id');
$.ajax({
url: 'https://api.twitter.com/1/statuses/oembed.json?id=' + tweetID + '&align=center',
dataType: 'jsonp',
type: 'get',
success: function(resp) {
$tweetPlaceholder.replaceWith($(resp.html));
}
});
});
}
window.ui_halted = false;
},
events: {

View File

@ -12,4 +12,5 @@ if(this.$body.hasClass('login')){$('input#id_username').focus();}
if(window.gittip_username){this.$aside_main.html(this.$aside_main.html().replace(/\[\[.*gittip.*\]\]/,'<iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/'+window.gittip_username+'/widget.html" width="48pt" height="22pt"></iframe>'));$('iframe',this.$aside_main).parent('p').prev('p').css('margin-bottom','10px');}
$('div.markdown pre code').each(function(i,e){hljs.highlightBlock(e);});if(this.$body.hasClass('homepage')){setTimeout(function(){var $facesInner=$('div.faces div.inner');var $faces=$('a',$facesInner);for(var i=0;i<$faces.length;i++){var $face=$faces.eq(i);var imageWidth=$('img',$face).width();if(imageWidth!=50){$face.remove();}}
$facesInner.hide();$facesInner.css('text-indent','0');$facesInner.fadeIn(400);},700);}
var $embeddedTweets=$('div.embedded-tweet');if($embeddedTweets.length){$.each($embeddedTweets,function(){var $tweetPlaceholder=$(this);var tweetID=$tweetPlaceholder.attr('data-tweet-id');$.ajax({url:'https://api.twitter.com/1/statuses/oembed.json?id='+tweetID+'&align=center',dataType:'jsonp',type:'get',success:function(resp){$tweetPlaceholder.replaceWith($(resp.html));}});});}
window.ui_halted=false;},events:{'showKeyboardShortcuts':'showKeyboardShortcuts','click a.mini-profile':'toggleMiniProfile'},keyboardShortcuts:function(){var $body=this.$body;var that=this;$search_queries=this.$search_queries;$search_page_query=this.$search_page_query;$search_query=this.$search_query;$document=$(document);$document.bind('keydown','/',function(e){if(!window.ui_halted){e.preventDefault();if($body.hasClass('search')){$search_page_query.focus();}else{$search_query.focus();}}});$document.bind('keydown','h',function(e){if(!window.ui_halted){window.ui_halted=true;$body.trigger('showKeyboardShortcuts');}else{if(that.$keyboard_shortcuts.is(':visible')){that.$keyboard_shortcuts.modal('hide');}}});$document.bind('keydown','t',function(e){if(!window.ui_halted){window.open('','_blank');}});$document.bind('keydown','r',function(e){if(!window.ui_halted){location.reload(true);}});$document.bind('keydown','Ctrl+h',function(e){if(!window.ui_halted){history.go(-1);}});$document.bind('keydown','Ctrl+l',function(e){if(!window.ui_halted){history.go(1);}});this.$search_queries.bind('keydown','esc',function(e){if(!window.ui_halted){e.preventDefault();this.blur();}});},showKeyboardShortcuts:function(){this.$keyboard_shortcuts.modal('toggle');},toggleMiniProfile:function(e){this.$aside_nav.toggleClass('open');return false;},inFieldLabels:function(){$('div.infield label',this.$body).inFieldLabels({fadeDuration:200});},stripeResponseHandler:function(status,response){var $form=$('form#pro-signup');if(response.error){$('button[type="submit"]',$form).removeAttr('disabled');$('.payment-loading').hide();$('.payment-errors').text(response.error.message).show();}else{var token=response.id;$('input#name').val('');$('input#number').val('');$('select#exp-month').val('');$('select#exp-year').val('');$('input#cvc').val('');$form.append("<input type='hidden' name='token' value='"+token+"'/>");$form.get(0).submit();}}});})(snipt.module('site'));

View File

@ -333,6 +333,24 @@
}
return false;
},
initEmbeddedTweets: function() {
var $embeddedTweets = $('div.embedded-tweet');
if ($embeddedTweets.length) {
$.each($embeddedTweets, function() {
var $tweetPlaceholder = $(this);
var tweetID = $tweetPlaceholder.attr('data-tweet-id');
$.ajax({
url: 'https://api.twitter.com/1/statuses/oembed.json?id=' + tweetID + '&align=center',
dataType: 'jsonp',
type: 'get',
success: function(resp) {
$tweetPlaceholder.replaceWith($(resp.html));
}
});
});
}
},
initLineNumbers: function() {
var lines = $('span.special', this.$el);
var that = this;
@ -390,8 +408,10 @@
render: function() {
this.$el.html(this.template({snipt: this.model.toSafe()}));
this.initLocalVars();
this.initLineNumbers();
this.initEmbeddedTweets();
if (this.model.get('blog_post') === true) {
this.$el.addClass('blog-post');

View File

@ -69,6 +69,10 @@ class Snipt(models.Model):
self.stylized = self.stylized.replace('[[vimeo-{}-{}x{}]]'.format(str(match[0]), str(match[1]), str(match[2])),
'<iframe src="https://player.vimeo.com/video/{}" width="{}" height="{}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'.format(match[0], match[1], match[2]))
# Tweet embeds
for match in re.findall('\[\[tweet-(\d+)\]\]', self.stylized):
self.stylized = self.stylized.replace('[[tweet-{}]]'.format(str(match)), '<div class="embedded-tweet" data-tweet-id="{}"></div>'.format(str(match)))
else:
self.stylized = highlight(self.code,
get_lexer_by_name(self.lexer, encoding='UTF-8'),