Name: loklak-webtweets
Owner: FOSSASIA
Description: FOSSASIA Tweets with loklak http://fossasia.github.io/loklak-webtweets/
Created: 2016-01-01 20:10:27.0
Updated: 2018-05-24 16:33:41.0
Pushed: 2017-04-29 13:20:15.0
Homepage: http://fossasia.github.io/loklak-webtweets/
Size: 1631
Language: CSS
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
FOSSASIA Tweets with loklak: Implement Webtweets with loklak
Objective of the mini project
Implement web tweets with loklak and substitute the implementation with twitter. Improve former implementations and reduce dependencies on additional files in repositories as much as possible. Make use of anonymous loklak API at http://loklak.org/api.html
Requirements
Expected Outcome
Links
Directions
-start='YYYY-MM-DD'
-end='YYYY-MM-DD'
An example of the attributes:
<div class="tweets-feed" id="tweets" data-count=50 data-query="fossasia #googlecodein" data-start="2015-12-08" data-end="2016-01-14" data-from="fossasia">
Client-side Tweets control
You can allow your viewers to control the tweets div in compliance to the controls detailed above by doing the following modifications:
Add the following to the end of index.html
file, just before the closing `
-- Modal -->
iv class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Loklak Settings</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="query">Query:</label>
<input class="form-control" value="fossasia #gci" id="query">
</div>
<div class="form-group">
<label for="result-count">Results Count:</label>
<input class="form-control" value="50" id="result-count">
</div>
<div class="form-group">
<label for="tweet-from">Tweets From:</label>
<input class="form-control" value="" id="tweet-from">
</div>
<div class="form-group">
<label for="tweet-from-date">Tweet From Date:</label>
<input class="form-control" value="2016-01-01" type="date" id="tweet-from-date">
</div>
<div class="form-group">
<label for="tweet-to-date">Tweet To Date:</label>
<input class="form-control" value="2016-01-18" type="date" id="tweet-to-date">
</div>
</div>
<div class="modal-footer">
<button type="button" id="submit-btn" class="btn btn-default" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
div>
cript type="text/javascript">
$('#submit-btn').click(function(e){
var from = $('#tweet-from-date');
var to = $('#tweet-to-date');
var date1 = new Date(from[0].value);
var date2 = new Date(to[0].value);
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
if (diffDays < 5){
alert('Kindly provide a difference of more than 4 days between the two dates.')
} else {
$('#tweets').attr('data-query', $('#query')[0].value);
$('#tweets').attr('data-start', $('#tweet-from-date')[0].value);
$('#tweets').attr('data-end', $('#tweet-to-date')[0].value);
$('#tweets').attr('data-from', $('#tweet-from')[0].value);
console.log($('#tweets').data());
clearInterval(interval_id);
$('#tweet')[0].innerHTML = 'Loading...';
$('#tweet-info')[0].innerHTML = 'Fetching tweets...';
datafetcher();
}
})
script>
And replace the following line:
lass="icon social_twitter text-white"></i>
with this:
lass="twitter-logo" data-toggle="modal" href="#myModal"><i class="icon social_twitter text-white"></i></a>