Unverified Commit 3a5c0a31 authored by Roland Denis's avatar Roland Denis
Browse files

Second solution for embedding twitter timeline.

parent 2bbdb452
{% extends "base.html" %}
{% block head %}
{{ super() }}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
{% endblock %}
{% block header_content %}
<button type="button" class="btn btn-dark my-1" id="header-btn">
<div class="row m-0 d-flex align-items-center">
......@@ -108,22 +113,55 @@
</div>
<div class="container-fluid mt-4 px-0 twitter">
<a class="share d-flex flex-row-reverse p-4" href="#">Partager</a>
<div class="container pb-4">
<a id="twitter-share" class="share d-flex flex-row-reverse p-4" href="#">Partager</a>
<h1 class="pt-4">GroupeCalcul@twitter</h1>
<ul class="list-inline">
<li class="list-inline-item border-right border-dark m-0 py-2 px-1"> Il y a 12 heures </li>
<li class="list-inline-item m-0 px-1"> #Rstats #RStatsFr </li>
<li id="twitter-date" class="list-inline-item border-right border-dark m-0 py-2 px-1">Date</li>
<li id="twitter-hashtag" class="list-inline-item m-0 px-1">#hashtag</li>
<li class="list-inline-item border-left border-dark m-0 py-2 px-1"> Rafraîchir </li>
</ul>
<div class="container px-0">
<div class="container" style="width:90%;">
<p>Ouverture des inscriptions et soumissions pour les 7e Rencontres R, en partenariat avec la @StatFr, qui se dérouleront du 4 au 6 juillet 2018 à #Rennes !</p>
<p>Pour plus d'infos, rendez-vous sur: <a href="#">https://r2018-rennes.sciencesconf.org/</a></p>
<p id="twitter-text">Contenu</p>
</div>
</div>
</div>
<div class="container pb-4">
<a class="twitter-timeline" data-width="100%" data-lang="fr" data-tweet-limit="1" data-link-color="#000" data-theme="light" href="https://twitter.com/groupecalcul" data-chrome="noheader transparent nofooter nofooter noborders">Tweets by Groupe Calcul</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
jQuery('.twitter').delegate('#twitter-widget-0','DOMSubtreeModified propertychange', function() {
//function call to override the base twitter styles
customizeTweetMedia();
});
function twitter_find(expr) {
return jQuery('.twitter').find('.twitter-timeline').contents().find(expr);
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var customizeTweetMedia = function() {
jQuery('.twitter').find('.twitter-timeline').css('display', 'none');
jQuery('#twitter-text').html(twitter_find('p.timeline-Tweet-text').html());
jQuery('#twitter-date').html(capitalizeFirstLetter(twitter_find('time').attr('aria-label').substring(7)));
jQuery('#twitter-share').attr('href', twitter_find('a.timeline-ShareMenu-option').attr('href'));
jQuery('#twitter-hashtag').html('');
twitter_find('a.hashtag').each(function () {
jQuery('#twitter-hashtag').append($(this).text() + ' ');
});
}
jQuery('.twitter').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
customizeTweetMedia(this);
});
</script>
</div>
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment