Commit 9d248dae authored by Roland Denis's avatar Roland Denis
Browse files

Adding carousel for tweets

parent d82081da
Pipeline #3268 passed with stage
in 4 seconds
......@@ -27,7 +27,6 @@ CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None
TWITTER_USER = "GroupeCalcul"
# Blogroll
LINKS = (('Pelican', 'http://getpelican.com/'),
......@@ -96,3 +95,9 @@ CATEGORY_MANDATORY_METADATA = {
'journee': {'place', 'start_date', 'end_date'},
'formation': {'place', 'start_date', 'end_date'},
}
# Twitter carousel configuration
TWITTER_CAROUSEL = {
'count': 3, # Number of tweets in the carousel.
'interval': 5000, # Delay before automatic cycle.
}
......@@ -432,6 +432,14 @@ a:hover{
top: 0px;
}
#twitterCarousel .carousel-indicators li {
top: 100px;
}
#twitterCarousel .carousel-control-next, .carousel-control-prev {
width: 5%;
}
.story {
margin-top: 114px;
margin-bottom: 100px;
......
......@@ -117,25 +117,46 @@
</div>
<div class="container-fluid mt-4 px-0 twitter" style="display:none">
<div class="container pb-4">
<img src="{{SITEURL}}/theme/img/twitter_comma.png" class="comma" />
<span class="share d-flex flex-row-reverse p-4"><a id="twitter-share" href="#">Partager</a></span>
<h1 class="pt-4">GroupeCalcul@twitter</h1>
<ul class="list-inline">
<li id="twitter-date" class="list-inline-item m-0 px-1">Date</li>
<li id="twitter-hashtag" class="hashtag list-inline-item m-0 px-1">#hashtag</li>
<li class="list-inline-item m-0 px-1"> <img src="{{SITEURL}}/theme/img/twitter_refresh.png" />Rafraîchir</li>
</ul>
<div class="container px-0">
<div class="container" style="width:90%;">
<p id="twitter-text">Contenu</p>
<div id="twitterCarousel" class="carousel slide" data-ride="carousel" data-interval="{{TWITTER_CAROUSEL['interval']}}">
<ol class="carousel-indicators">
{% for tweet_id in range(TWITTER_CAROUSEL['count']) %}
<li data-target="#twitterCarousel" data-slide-to="{{tweet_id}}" {% if tweet_id == 0 %}class="active"{% endif %}></li>
{% endfor %}
</ol>
<div class="carousel-inner">
{% for tweet_id in range(TWITTER_CAROUSEL['count']) %}
<div class="carousel-item {% if tweet_id == 0 %}active{% endif %}">
<div class="container pb-4">
<img src="{{SITEURL}}/theme/img/twitter_comma.png" class="comma" />
<span class="share d-flex flex-row-reverse p-4"><a id="twitter-share" href="#">Partager</a></span>
<h1 class="pt-4">GroupeCalcul@twitter</h1>
<ul class="list-inline">
<li id="twitter-date" class="list-inline-item m-0 px-1">Date</li>
<li id="twitter-hashtag" class="hashtag list-inline-item m-0 px-1">#hashtag</li>
<li class="list-inline-item m-0 px-1"> <img src="{{SITEURL}}/theme/img/twitter_refresh.png" />Rafraîchir</li>
</ul>
<div class="container px-0">
<div class="container" style="width:90%;">
<p id="twitter-text">Contenu</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#twitterCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#twitterCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</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>
<a class="twitter-timeline" data-width="100%" data-lang="fr" data-tweet-limit="{{ TWITTER_CAROUSEL['count'] }}" 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() {
......@@ -143,31 +164,37 @@
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);
}
function customizeTweet(tweet_id) {
input_tweet = $($('.twitter').find('.twitter-timeline').contents().find('li.timeline-TweetList-tweet')[tweet_id]);
output_tweet = $($('#twitterCarousel').find('.carousel-item')[tweet_id]);
output_tweet.find('#twitter-text').html(input_tweet.find('p.timeline-Tweet-text').html());
output_tweet.find('#twitter-date').html(capitalizeFirstLetter(input_tweet.find('time').attr('aria-label').substring(7)));
output_tweet.find('#twitter-share').attr('href', input_tweet.find('a.timeline-ShareMenu-option').attr('href'));
output_tweet.find('#twitter-hashtag').html('');
input_tweet.find('a.hashtag').each(function () {
output_tweet.find('#twitter-hashtag').append('<a href="' + $(this).attr('href') + '" target="_blank">' + $(this).text() + '</a> ');
});
}
var customizeTweetMedia = function() {
try {
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('<a href="' + $(this).attr('href') + '" target="_blank">' + $(this).text() + '</a> ');
});
for (var tweet_id = 0; tweet_id < {{ TWITTER_CAROUSEL['count'] }}; ++tweet_id) {
customizeTweet(tweet_id);
}
jQuery('div.twitter').show();
}
catch(err) {
jQuery('div.twitter').hide();
}
}
jQuery('.twitter').find('.twitter-timeline').contents().find('.timeline-TweetList').bind('DOMSubtreeModified propertychange', function() {
customizeTweetMedia(this);
});
......
Markdown is supported
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