Last active
September 26, 2015 07:07
-
-
Save ravikiranj/1058786 to your computer and use it in GitHub Desktop.
infinite_scroll_markup_generation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <? | |
| /** | |
| * Function to build RSS item markup | |
| * | |
| * @param Array $data, Boolean $xhr | |
| * @return String $html | |
| */ | |
| function displayHTML($data, $xhr) { | |
| if(!$xhr){ | |
| $html = <<<HTML | |
| <!DOCTYPE html> | |
| <html> | |
| <head><title>Infinite Scrolling using native Javascript and YUI3</title> | |
| <link rel="stylesheet" href="infinite_scroll.css" type="text/css"> | |
| <body> | |
| <div class="tip">Scroll to the bottom of the page to see the infinite scrolling concept working</div> | |
| <div class="stream-container"> | |
| <div class="stream-items"> | |
| HTML; | |
| }else { | |
| $html = ""; | |
| } | |
| if(!empty($data) && !empty($data['error'])){ | |
| $errorDesc = ""; | |
| if(!empty($data['error']['description'])) { | |
| $errorDesc = "<p>Error: " . $data['error']['description'] . "</p>"; | |
| } | |
| $html .= <<<HTML | |
| <div class="error"> | |
| <p>Sorry, error encountered, please try again after sometime.</p> | |
| {$errorDesc} | |
| </div> | |
| HTML; | |
| }else{ | |
| //Extract the results | |
| if(!empty($data) && !empty($data['query']) && !empty($data['query']['results']) && !empty($data['query']['results']['item'])){ | |
| $data = $data['query']['results']['item']; | |
| foreach($data as $item){ | |
| if(empty($item['title']) || empty($item['link']) || empty($item['pubDate'])) { | |
| return; | |
| } | |
| $title = $item['title']; | |
| $link = $item['link']; | |
| $pubDate = $item['pubDate']; | |
| $html .= <<<HTML | |
| <div class="stream-item"> | |
| <div class="stream-item-content rss-headline"> | |
| <div class="rss-content"> | |
| <img class="rss-image" alt="rss icon" src="rss.png" /> | |
| <div class="rss-row"> | |
| <a href="${link}" target="_blank">$title</a> | |
| </div> | |
| <div class="rss-row"> | |
| <div class="rss-timestamp"> | |
| {$pubDate} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| HTML; | |
| } | |
| }else{ | |
| $html .= "No more top stories"; | |
| } | |
| } | |
| if(!$xhr) { | |
| $html .= <<<HTML | |
| </div> | |
| </div> | |
| <div id="loading-gif"> | |
| <img src="loading.gif"></img> | |
| </div> | |
| <div id="maxitems">Maximum (200) no. of items reached, please refresh the page</div> | |
| <div id="no_more_rss">No more rss headlines left to fetch</div> | |
| <!-- JS --> | |
| <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-min.js"></script> | |
| <script src="infinite_scroll.js"></script> | |
| </body> | |
| </html> | |
| HTML; | |
| } | |
| return $html; | |
| } | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment