From b040de5a8e219b0e1cc90b3aeacece3b00e4333b Mon Sep 17 00:00:00 2001 From: amitsin6h Date: Fri, 14 Jul 2017 19:28:03 +0530 Subject: [PATCH] [FIX #23] Fixed the vacant space using twitterpostfetcher --- css/bootstrap.css | 4 +- css/twitterFetcher.css | 112 ++++++++++ index.html | 17 +- js/vendor/config.js | 18 ++ js/vendor/twitterFetcher.js | 423 ++++++++++++++++++++++++++++++++++++ 5 files changed, 563 insertions(+), 11 deletions(-) create mode 100644 css/twitterFetcher.css create mode 100644 js/vendor/config.js create mode 100644 js/vendor/twitterFetcher.js diff --git a/css/bootstrap.css b/css/bootstrap.css index 29dfb0b..c0b84a8 100755 --- a/css/bootstrap.css +++ b/css/bootstrap.css @@ -2878,10 +2878,10 @@ a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active { border-color: #337ab7 } .media { margin-top: 15px; } .media:first-child { margin-top: 0; } -.media, .media-body { +/*.media, .media-body { overflow: hidden; zoom: 1; -} +}*/ .media-body { width: 10000px; } .media-object { display: block; } .media-object.img-thumbnail { max-width: none; } diff --git a/css/twitterFetcher.css b/css/twitterFetcher.css new file mode 100644 index 0000000..8888c6b --- /dev/null +++ b/css/twitterFetcher.css @@ -0,0 +1,112 @@ +/* +* Example style! +* You can do whatever the hell you want on your site :-) +*/ + +@import url('https://fonts.googleapis.com/css?family=Open+Sans'); + +h2 { + clear:both; +} + +p, a { + font-size:17px; + font-family: 'Open Sans', sans-serif; + margin:10px 0 0 0; + color:#3d3d3d; +} + +a, a:visited { + color:#427fed; +} + +a:hover { + color:#82afff; +} + +.tborder > li { + list-style:none; + overflow:hidden; + border:1px solid #dedede; + margin:5px; + padding:5px; +} + +.tborder > li:hover { + background-color:#f0f3fb; +} + +.user, .tweet, .timePosted { + float:left; +} + +.user { + width:25%; +} + +.tweet { + width:50%; +} + +.timePosted { + width:15%; +} + +.user { + clear:left; +} + +.user a { + width: 100px; +} + +.user span span { + width:100px; + display:block; + margin-top:10px; +} + +.user img, .user a > span { + float:left; +} + +.interact { + float:left; + width:10%; + margin-top:-7px; +} + +.interact a { + margin-left:5px; + float:left; +} + +.user a > span { + margin-left:10px; +} + +.tmedia{ + width: 25%; + margin: auto; +} + +.tmedia img { + max-width:270px; + max-height:270px; +} + +#linkage { + position:fixed; + top:0px; + right:0px; + background-color:#3d3d3d; + color:#ffffff; + text-decoration:none; + padding:5px; + width:10%; + font-family:arial; +} + +.tco-hidden{ + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index dd83b2f..c7920f6 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,7 @@ + @@ -2600,14 +2601,8 @@

Latest Tweets

-
- - +
+
+ + + + - + diff --git a/js/vendor/config.js b/js/vendor/config.js new file mode 100644 index 0000000..42921f5 --- /dev/null +++ b/js/vendor/config.js @@ -0,0 +1,18 @@ + +/************************************************************************** + * NEW: These first examples no longer need the Widget ID to work. + *************************************************************************/ + + +var configProfile = { + "profile": {"screenName": 'pyconindia'}, + "domId": 'pyconindiaTweets', + "maxTweets": 5, + "enableLinks": true, + "showUser": true, + "showTime": true, + "showImages": true, + "lang": 'en' +}; +twitterFetcher.fetch(configProfile); + diff --git a/js/vendor/twitterFetcher.js b/js/vendor/twitterFetcher.js new file mode 100644 index 0000000..c4387e5 --- /dev/null +++ b/js/vendor/twitterFetcher.js @@ -0,0 +1,423 @@ +/********************************************************************* +* #### Twitter Post Fetcher v17.0.1 #### +* Coded by Jason Mayes 2015. A present to all the developers out there. +* www.jasonmayes.com +* Please keep this disclaimer with my code if you use it. Thanks. :-) +* Got feedback or questions, ask here: +* http://www.jasonmayes.com/projects/twitterApi/ +* Github: https://github.com/jasonmayes/Twitter-Post-Fetcher +* Updates will be posted to this site. +*********************************************************************/ +(function(root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else if (typeof exports === 'object') { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals. + factory(); + } +}(this, function() { + var domNode = ''; + var maxTweets = 20; + var parseLinks = true; + var queue = []; + var inProgress = false; + var printTime = true; + var printUser = true; + var formatterFunction = null; + var supportsClassName = true; + var showRts = true; + var customCallbackFunction = null; + var showInteractionLinks = true; + var showImages = false; + var useEmoji = false; + var targetBlank = true; + var lang = 'en'; + var permalinks = true; + var dataOnly = false; + var script = null; + var scriptAdded = false; + + function handleTweets(tweets){ + if (customCallbackFunction === null) { + var x = tweets.length; + var n = 0; + var element = document.getElementById(domNode); + var html = '
    '; + while(n < x) { + html += '
  • ' + tweets[n] + '
    • '; + n++; + } + html += '
'; + element.innerHTML = html; + } else { + customCallbackFunction(tweets); + } + } + + function strip(data) { + return data.replace(/]*>(.*?)<\/b>/gi, function(a,s){return s;}) + .replace(/class="(?!(tco-hidden|tco-display|tco-ellipsis))+.*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, + ''); + } + + function targetLinksToNewWindow(el) { + var links = el.getElementsByTagName('a'); + for (var i = links.length - 1; i >= 0; i--) { + links[i].setAttribute('target', '_blank'); + } + } + + function getElementsByClassName (node, classname) { + var a = []; + var regex = new RegExp('(^| )' + classname + '( |$)'); + var elems = node.getElementsByTagName('*'); + for (var i = 0, j = elems.length; i < j; i++) { + if(regex.test(elems[i].className)){ + a.push(elems[i]); + } + } + return a; + } + + function extractImageUrl(image_data) { + if (image_data !== undefined && image_data.innerHTML.indexOf('data-srcset') >= 0) { + var data_src = image_data.innerHTML + .match(/data-srcset="([A-z0-9%_\.-]+)/i)[0]; + return decodeURIComponent(data_src).split('"')[1]; + } + } + + var twitterFetcher = { + fetch: function(config) { + if (config.maxTweets === undefined) { + config.maxTweets = 20; + } + if (config.enableLinks === undefined) { + config.enableLinks = true; + } + if (config.showUser === undefined) { + config.showUser = true; + } + if (config.showTime === undefined) { + config.showTime = true; + } + if (config.dateFunction === undefined) { + config.dateFunction = 'default'; + } + if (config.showRetweet === undefined) { + config.showRetweet = true; + } + if (config.customCallback === undefined) { + config.customCallback = null; + } + if (config.showInteraction === undefined) { + config.showInteraction = true; + } + if (config.showImages === undefined) { + config.showImages = false; + } + if (config.useEmoji === undefined) { + config.useEmoji = false; + } + if (config.linksInNewWindow === undefined) { + config.linksInNewWindow = true; + } + if (config.showPermalinks === undefined) { + config.showPermalinks = true; + } + if (config.dataOnly === undefined) { + config.dataOnly = false; + } + + if (inProgress) { + queue.push(config); + } else { + inProgress = true; + + domNode = config.domId; + maxTweets = config.maxTweets; + parseLinks = config.enableLinks; + printUser = config.showUser; + printTime = config.showTime; + showRts = config.showRetweet; + formatterFunction = config.dateFunction; + customCallbackFunction = config.customCallback; + showInteractionLinks = config.showInteraction; + showImages = config.showImages; + useEmoji = config.useEmoji; + targetBlank = config.linksInNewWindow; + permalinks = config.showPermalinks; + dataOnly = config.dataOnly; + + var head = document.getElementsByTagName('head')[0]; + if (script !== null) { + head.removeChild(script); + } + script = document.createElement('script'); + script.type = 'text/javascript'; + if (config.list !== undefined) { + script.src = 'https://syndication.twitter.com/timeline/list?' + + 'callback=__twttrf.callback&dnt=false&list_slug=' + + config.list.listSlug + '&screen_name=' + config.list.screenName + + '&suppress_response_codes=true&lang=' + (config.lang || lang) + + '&rnd=' + Math.random(); + } else if (config.profile !== undefined) { + script.src = 'https://syndication.twitter.com/timeline/profile?' + + 'callback=__twttrf.callback&dnt=false' + + '&screen_name=' + config.profile.screenName + + '&suppress_response_codes=true&lang=' + (config.lang || lang) + + '&rnd=' + Math.random(); + } else if (config.likes !== undefined) { + script.src = 'https://syndication.twitter.com/timeline/likes?' + + 'callback=__twttrf.callback&dnt=false' + + '&screen_name=' + config.likes.screenName + + '&suppress_response_codes=true&lang=' + (config.lang || lang) + + '&rnd=' + Math.random(); + } else { + script.src = 'https://cdn.syndication.twimg.com/widgets/timelines/' + + config.id + '?&lang=' + (config.lang || lang) + + '&callback=__twttrf.callback&' + + 'suppress_response_codes=true&rnd=' + Math.random(); + } + head.appendChild(script); + } + }, + callback: function(data) { + if (data === undefined || data.body === undefined) { + inProgress = false; + + if (queue.length > 0) { + twitterFetcher.fetch(queue[0]); + queue.splice(0,1); + } + return; + } + + // Remove emoji and summary card images. + if(!useEmoji){ + data.body = data.body.replace(/(]*>)|(]*>)/g, ''); + } + + // Remove display images. + if (!showImages) { + data.body = data.body.replace(/(]*>|(]*>))/g, ''); + } + // Remove avatar images. + if (!printUser) { + data.body = data.body.replace(/(]*>)/g, ''); + } + + var div = document.createElement('div'); + div.innerHTML = data.body; + if (typeof(div.getElementsByClassName) === 'undefined') { + supportsClassName = false; + } + + function swapDataSrc(element) { + var avatarImg = element.getElementsByTagName('img')[0]; + avatarImg.src = avatarImg.getAttribute('data-src-2x'); + return element; + } + + var tweets = []; + var authors = []; + var times = []; + var images = []; + var rts = []; + var tids = []; + var permalinksURL = []; + var x = 0; + + if (supportsClassName) { + var tmp = div.getElementsByClassName('timeline-Tweet'); + while (x < tmp.length) { + if (tmp[x].getElementsByClassName('timeline-Tweet-retweetCredit').length > 0) { + rts.push(true); + } else { + rts.push(false); + } + if (!rts[x] || rts[x] && showRts) { + tweets.push(tmp[x].getElementsByClassName('timeline-Tweet-text')[0]); + tids.push(tmp[x].getAttribute('data-tweet-id')); + if (printUser) { + authors.push(swapDataSrc(tmp[x].getElementsByClassName('timeline-Tweet-author')[0])); + } + times.push(tmp[x].getElementsByClassName('dt-updated')[0]); + permalinksURL.push(tmp[x].getElementsByClassName('timeline-Tweet-timestamp')[0]); + if (tmp[x].getElementsByClassName('timeline-Tweet-media')[0] !== + undefined) { + images.push(tmp[x].getElementsByClassName('timeline-Tweet-media')[0]); + } else { + images.push(undefined); + } + } + x++; + } + } else { + var tmp = getElementsByClassName(div, 'timeline-Tweet'); + while (x < tmp.length) { + if (getElementsByClassName(tmp[x], 'timeline-Tweet-retweetCredit').length > 0) { + rts.push(true); + } else { + rts.push(false); + } + if (!rts[x] || rts[x] && showRts) { + tweets.push(getElementsByClassName(tmp[x], 'timeline-Tweet-text')[0]); + tids.push(tmp[x].getAttribute('data-tweet-id')); + if (printUser) { + authors.push(swapDataSrc(getElementsByClassName(tmp[x],'timeline-Tweet-author')[0])); + } + times.push(getElementsByClassName(tmp[x], 'dt-updated')[0]); + permalinksURL.push(getElementsByClassName(tmp[x], 'timeline-Tweet-timestamp')[0]); + if (getElementsByClassName(tmp[x], 'timeline-Tweet-media')[0] !== undefined) { + images.push(getElementsByClassName(tmp[x], 'timeline-Tweet-media')[0]); + } else { + images.push(undefined); + } + } + x++; + } + } + + if (tweets.length > maxTweets) { + tweets.splice(maxTweets, (tweets.length - maxTweets)); + authors.splice(maxTweets, (authors.length - maxTweets)); + times.splice(maxTweets, (times.length - maxTweets)); + rts.splice(maxTweets, (rts.length - maxTweets)); + images.splice(maxTweets, (images.length - maxTweets)); + permalinksURL.splice(maxTweets, (permalinksURL.length - maxTweets)); + } + + var arrayTweets = []; + var x = tweets.length; + var n = 0; + if (dataOnly) { + while (n < x) { + arrayTweets.push({ + tweet: tweets[n].innerHTML, + author: authors[n] ? authors[n].innerHTML : 'Unknown Author', + time: times[n].textContent, + timestamp: times[n].getAttribute('datetime').replace('+0000', 'Z').replace(/([\+\-])(\d\d)(\d\d)/, '$1$2:$3'), + image: extractImageUrl(images[n]), + rt: rts[n], + tid: tids[n], + permalinkURL: (permalinksURL[n] === undefined) ? + '' : permalinksURL[n].href + }); + n++; + } + } else { + while (n < x) { + if (typeof(formatterFunction) !== 'string') { + var datetimeText = times[n].getAttribute('datetime'); + var newDate = new Date(times[n].getAttribute('datetime') + .replace(/-/g,'/').replace('T', ' ').split('+')[0]); + var dateString = formatterFunction(newDate, datetimeText); + times[n].setAttribute('aria-label', dateString); + + if (tweets[n].textContent) { + // IE hack. + if (supportsClassName) { + times[n].textContent = dateString; + } else { + var h = document.createElement('p'); + var t = document.createTextNode(dateString); + h.appendChild(t); + h.setAttribute('aria-label', dateString); + times[n] = h; + } + } else { + times[n].textContent = dateString; + } + } + var op = ''; + if (parseLinks) { + if (targetBlank) { + targetLinksToNewWindow(tweets[n]); + if (printUser) { + targetLinksToNewWindow(authors[n]); + } + } + if (printUser) { + op += '
' + strip(authors[n].innerHTML) + + '
'; + } + op += '

' + strip(tweets[n].innerHTML) + '

'; + if (printTime) { + if (permalinks) { + op += '

' + times[n].getAttribute('aria-label') + '

'; + } else { + op += '

' + + times[n].getAttribute('aria-label') + '

'; + } + } + } else { + if (tweets[n].textContent) { + if (printUser) { + op += '

' + authors[n].textContent + '

'; + } + op += '

' + tweets[n].textContent + '

'; + if (printTime) { + op += '

' + times[n].textContent + '

'; + } + + } else { + if (printUser) { + op += '

' + authors[n].textContent + '

'; + } + op += '

' + tweets[n].textContent + '

'; + if (printTime) { + op += '

' + times[n].textContent + '

'; + } + } + } + if (showInteractionLinks) { + op += '

' + + '

'; + } + if (showImages && images[n] !== undefined && extractImageUrl(images[n]) !== undefined) { + op += '
' + + 'Image from tweet' + '
'; + } + if (showImages) { + arrayTweets.push(op); + } else if (!showImages && tweets[n].textContent.length) { + arrayTweets.push(op); + } + + n++; + } + } + + handleTweets(arrayTweets); + inProgress = false; + + if (queue.length > 0) { + twitterFetcher.fetch(queue[0]); + queue.splice(0,1); + } + } + }; + + // It must be a global variable because it will be called by JSONP. + window.__twttrf = twitterFetcher; + window.twitterFetcher = twitterFetcher; + return twitterFetcher; +})); +