7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/plugin.js:
--------------------------------------------------------------------------------
1 | /*******************************************************************************
2 | * loklak-fetcher-client
3 | * by Yago González (C) 2016 - Under MIT license
4 | * Bugs? Questions? Don't know what's the meaning of life?
5 | * Take a look at: github.com/YagoGG/loklak-fetcher-client
6 | * Please, keep this header if you want to use this code. Thank you ;)
7 | ******************************************************************************/
8 |
9 | window.loklakFetcher = (function() {
10 | var script = null;
11 |
12 | var loklakFetcher = {
13 | /**
14 | * Fetches tweets from the public loklak API, with the options provided
15 | * @param {string} query Query string, see loklak.org/api.html
16 | * @param {object} options Object with allowed GET-attributes, see
17 | * loklak.org/api.html
18 | * @param {function} callback Function called after getting the results.
19 | * These are passed as first argument
20 | */
21 | getTweets: function(query, options, callback) {
22 | if(typeof options === 'function') { // A callback has been provided as 2nd
23 | // argument (no options)
24 | callback = options;
25 | options = {};
26 | } else if(callback === undefined) { // No callback has been provided, even
27 | // as 2nd argument
28 | throw new Error('[LOKLAK-FETCHER] No callback provided');
29 | }
30 |
31 | var settings = [ 'count', 'source', 'fields', 'limit', 'tzOffset',
32 | 'minified' ]; // Field names for all the possible parameters
33 | var defaults = [ 100, 'cache', '', '', 0, true ]; // Default values
34 |
35 | // Check if no options have been provided
36 | if(typeof options === 'undefined') {
37 | options = {}; // Create 'options' to avoid ReferenceErrors later
38 | }
39 |
40 | // Write unset options as their default
41 | for(var index in settings) {
42 | if(options[settings[index]] === undefined) {
43 | options[settings[index]] = defaults[index];
44 | }
45 | }
46 |
47 | // Create the URL with all the parameters
48 | var url = 'https://api.loklak.org//api/search.json' +
49 | '?callback=loklakFetcher.handleData' +
50 | '&q=' + query +
51 | '&count=' + options.count +
52 | '&source=' + options.source +
53 | '&fields=' + options.fields +
54 | '&limit=' + options.limit +
55 | '&timezoneOffset=' + options.tzOffset +
56 | '&minified=' + options.minified;
57 |
58 | // If the script element for JSONP already exists, remove it
59 | if(script !== null) {
60 | document.head.removeChild(script);
61 | }
62 |
63 | /**
64 | * Invokes the callback function, passing the data from the server as the
65 | * first and only argument.
66 | * @param {object} data JSON coming from loklak's API
67 | */
68 | this.handleData = function(data) {
69 | callback(data);
70 | };
71 |
72 | // Create the script tag for JSONP
73 | script = document.createElement("script");
74 | script.src = url;
75 | document.head.appendChild(script);
76 | }
77 | };
78 |
79 | return loklakFetcher;
80 | }());
81 |
82 |
83 |
84 | document.addEventListener('DOMContentLoaded', function () {
85 | function addCss(fileName) {
86 |
87 | var head = document.head
88 | , link = document.createElement('link')
89 |
90 | link.type = 'text/css'
91 | link.rel = 'stylesheet'
92 | link.href = fileName
93 |
94 | head.appendChild(link)
95 | }
96 | addCss('https://cdn.rawgit.com/fossasia/loklak-timeline-plugin/master/style.css')
97 | let elements = document.getElementsByClassName("loklak-timeline")
98 | for(let i = 0; i < elements.length; i++) {
99 | (function (element){
100 | let query = element.dataset.query;
101 | if (element.dataset.height !== undefined) {
102 | element.style.height = element.dataset.height + 'px';
103 | }
104 | if (element.dataset.width !== undefined) {
105 | element.style.width = element.dataset.width + 'px';
106 | }
107 | loklakFetcher.getTweets(query, {
108 | count: 25
109 | }, function (result) {
110 | let tweets = result.statuses.map((x) => ({text: x.text, user: x.user, others:x}));
111 | let html = "";
112 | tweets.forEach(function (tweet) {
113 | html += ``;
114 | })
115 | element.innerHTML = html;
116 | })
117 | }(elements[i]))
118 | }
119 | }, false);
120 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | .loklak-timeline{
2 | width: 500px;
3 | height: 300px;
4 | overflow: auto;
5 | font-family: Helvetica;
6 | }
7 |
8 | .tweet{
9 | border-bottom: 0.5px #f1f1f1 solid;
10 | padding: 10px;
11 | }
12 |
13 | .tweet a{
14 | color: #000;
15 | font-weight: bold;
16 | text-decoration: none;
17 | }
18 |
19 | .tweet a span{
20 | position: relative;
21 | top:-15px;
22 | left:10px;
23 | }
24 |
25 | .tweet img{
26 | width: 40px;
27 | border-radius: 100%;
28 | }
29 |
30 | .tweet h4{
31 | font-weight: normal;
32 | }
33 |
34 |
35 | .tweet-image{
36 | border-radius: 0px !important;
37 | width: 100% !important;
38 | }
39 |
40 | .loklak-timeline::-webkit-scrollbar-track
41 | {
42 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
43 | border-radius: 10px;
44 | background-color: #F5F5F5;
45 | }
46 |
47 | .loklak-timeline::-webkit-scrollbar
48 | {
49 | width: 5px;
50 | background-color: #F5F5F5;
51 | border-radius: 100px;
52 | }
53 |
54 | .loklak-timeline::-webkit-scrollbar-thumb
55 | {
56 | border-radius: 10px;
57 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
58 | background-color: #555;
59 | }
60 |
--------------------------------------------------------------------------------