JQuery RedditLoader - smart and customizable reddit content loader

README.md

JQuery RedditLoader 2.1.0 Download

About

Load images, Imgur Albuns, Youtube videos, and Articles (beta) of Reddit links, loading only when the previous content was loaded

###Livedemo http://redditmobile.blogspot.com.br

###Dependencies

• JQuery

##Loading with default config

$("#posts").redditloader();

##Optional full config

$("#posts").redditloader({
				subreddits: "funny/todayilearned/wtf/adviceanimals", //subreddits to load separated by "/", default is all
				redditSort: "new", //sort method (new, controversial, top), default is front page
				skipNsfw: true, //if you dont want nsfw
				skipGifs: true, //if you dont want gifs
				skipImgurAlbum: true, //if you dont want to load imgur albuns
				skipYoutube: true, //if yout dont want to load youtube videos
				skipText: true, //(beta - default is true) if you dont want to load articles (text)
				minDelay: 2000, //mininum delay, in miliseconds, between loading posts (default is 1500)
				maxImgurAlbumItens: -1, //only load album if it contains less itens than this attribute (-1 if you want to load it anyway. default is 5)
				maxTextParagraphs: 5, //load the first x paragraphs

				render: function(redditpost){
					//here is an example for a custom render
					if(data.youtube){
						$(this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1><iframe type='text/html' width='640' height='390' src='http://www.youtube.com/embed/"+data.youtube+"' frameborder='0'/><hr/>");
					}else if(data.imgur){
						$(this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1>");
						for(var i in data.imgur){
							$(this).append("<img src='"+data.imgur[i]+"'/><br/>");
						}
						$(this).append("<hr/>");
					}else if(data.text){
						$(this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1>"+data.text+"<hr/>");
					}else{
						$(this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1><img src='"+data.url+"'/><hr/>");
					}
				},
});

to know more about attributes to the render visit https://github.com/reddit/reddit/wiki/API%3A-info.json full list:

            "domain": "blog.reddit.com",
            "media_embed": {},
            "levenshtein": null,
            "subreddit": "blog",
            "selftext_html": null,
            "selftext": "",
            "likes": true,
            "saved": true,
            "id": "i0jf9",
            "clicked": false,
            "author": "hueypriest",
            "media": null,
            "score": 1520,
            "over_18": false,
            "hidden": false,
            "thumbnail": "http://thumbs.reddit.com/t3_i0jf9.png",
            "subreddit_id": "t5_2qh49",
            "downs": 2381,
            "is_self": false,
            "permalink": "/r/blog/comments/i0jf9/reddit_levels_up_with_three_new_programmers/",
            "name": "t3_i0jf9",
            "created": 1308164715.0,
            "url": "http://blog.reddit.com/2011/06/reddit-levels-up-with-three-new.html",
            "title": "reddit Levels Up with Three New Programmers",
            "created_utc": 1308164715.0,
            "num_comments": 533,
            "ups": 3901

##Pause/Resume Loading

$("#posts").redditloader(false); //pause
$("#posts").redditloader(true); //resume

jquery.redditloader.js

(function($){



	/*
		options: {
				render: function(redditpost){},
				subreddits: "funny/todayilearned/wtf/adviceanimals",
				redditSort: "new"
				skipNsfw: true,
				skipGifs: true,
				skipImgurAlbum: true,
				skipYoutube: true,
				skipText: true,
				minDelay: 2000,
				maxImgurAlbumItens: -1,
				maxTextParagraphs: 5
		}
	*/

	var RedditLoader = function($this, options){

		var subreddits;
		var posts;
		var nextlastpostids;
		var s;
		var paused = false;
		var lastloadtime = 0;

		
		var start = function(){

	  		options = $.extend($this.data(), options);

		  	if(!options.render)
		  		options.render = defaultRender;

		  	if(!options.minDelay)
		  		options.minDelay = 1500;

		  	if(!options.maxImgurAlbumItens)
		  		options.maxImgurAlbumItens = 5;

		  	if(!options.maxTextParagraphs)
		  		options.maxTextParagraphs = 10;

		  	if(options.skipText===undefined)
		  		options.skipText = true;

			subreddits = (options.subreddits || "").split("/");
			posts = []; //matriz de posts por subreddit
			nextlastpostids = [];
			s = -1;

			loadNext();
		};

		this.resume = function(){
			paused = false;
			loadNext();
		};

		this.pause = function(){
			paused = true;
		};

		var loadNext = function(){

			if(paused)
				return;
				
			if(!subreddits || !subreddits.length || s < 0)
				s = 0;
			else
				s = (s+1)%subreddits.length;

			if(posts[s] && posts[s].length > 0){

				var wait = Math.max(options.minDelay + lastloadtime - Date.now(), 1);

				setTimeout(function(){

					loadPost(posts[s][0], function(success){
						if(success)
							options.render(posts[s][0].data);
						posts[s].splice(0, 1);
						loadNext();
					});

				}, wait);

			}else{
				var lastpostid = null;
				if(nextlastpostids && nextlastpostids[s])
					lastpostid = nextlastpostids[s];

				loadSubReddit(subreddits[s], lastpostid, function(postsS){
					if(postsS && postsS.length){
						posts[s] = postsS;
						nextlastpostids[s] = postsS[postsS.length-1].data.name;
					}else{
						subreddits.splice(s, 1);
						s--;
					}
					loadNext();
				});
			}
		};
		
		var loadSubReddit = function(reddit, id, callback){

			var url = "http://www.reddit.com/";

			if(reddit)
				url += "r/"+reddit;

			if(options.redditSort)
				url += "/"+options.redditSort;

			url += ".json?jsonp=?";

			if(id)
				url += "&after="+id;
			
			$($this).trigger('beforeSubredditLoad', [url]);
			$.getJSON(url, function(data) {
				$($this).trigger('successSubredditLoad', [url]);
				callback(data.data.children);
			}).error(function(){
				$($this).trigger('errorSubredditLoad', [url]);
				callback(null);
			});
		};

		
		var loadPost = function(post, callback){
			$($this).trigger('beforePostLoad', [post.data.url]);

			var url = post.data.url;

			if(options.skipNsfw && post.data.over_18){
				$($this).trigger('skipPostLoad', [post.data.url, "nsfw"]);
				callback(false);
				return;
			}

			if(options.skipGifs && url.indexOf(".gif") != -1){
				$($this).trigger('skipPostLoad', [post.data.url, "gif"]);
				callback(false);
				return;
			}

			if(url.indexOf(".jpeg") != -1 
		 		|| url.indexOf(".jpg") != -1 
		 		|| url.indexOf(".png") != -1 
		 		|| url.indexOf(".gif") != -1){

				$('<img />').attr('src', post.data.url).load(function(){
					$($this).trigger('successPostLoad', [post.data.url]);
			        callback(true);
			    }).error(function(){
					$($this).trigger('errorPostLoad', [post.data.url]);
					callback(false);
			    });

			    return;

			}

			if(url.indexOf("imgur.com/a/") != -1){
				if(options.skipImgurAlbum){
					$($this).trigger('skipPostLoad', [post.data.url, "imgur"]);
					callback(false);
				}else{
					loadImgurAlbum(post, url, callback);
				}
				return;
			}

			if(url.indexOf("imgur") != -1){
				loadImgurImg(post, url, callback);
				return;
			}

			var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
			var match = url.match(regExp);
			if (match && match[2].length==11){
				if(options.skipYoutube){
					$($this).trigger('skipPostLoad', [post.data.url, "youtube"]);
					callback(false);
				}else{
					post.data.youtube = match[2];
					callback(true);
					return;
				}
			}

			if(options.skipText){
				$($this).trigger('skipPostLoad', [post.data.url, "text"]);
				callback(false);
			}else{
				loadText(post, post.data.url, callback)
			}

		};

		var loadImgurImg = function(post, url, callback){
			var urlsplit = url.split("/");
			var imageId = urlsplit[urlsplit.length-1];
			var apiUrl = "http://api.imgur.com/2/image/"+imageId+".json";

			$.getJSON(apiUrl, function(data) {

				$('<img />').attr('src', data.image.links.original).load(function(){
					post.data.url = data.image.links.original;
					$($this).trigger('successPostLoad', [data.image.links.original]);
			        callback(true);
			    }).error(function(){
					$($this).trigger('errorPostLoad', [data.image.links.original]);
					callback(false);
			    });

			}).error(function(){
				$($this).trigger('errorPostLoad', [apiUrl]);
				callback(false);
			});

		}

		var loadImgurAlbum = function(post, url, callback){
			var urlsplit = url.split("/");
			var albumId = urlsplit[urlsplit.length-1];
			var apiUrl = "http://api.imgur.com/2/album/"+albumId+".json";

			$.getJSON(apiUrl, function(data) {
				post.data.imgur = [];

				if(options.maxImgurAlbumItens > -1 && options.maxImgurAlbumItens < data.album.images.length){
					$($this).trigger('skipPostLoad', [url, "imgur max"]);
					callback(false);
					return;
				}

				loadNextImgurItem(post.data.imgur, data.album.images, 0, callback);

			}).error(function(){
				$($this).trigger('errorImgurLoad', [url]);
				callback(false);
			});
		};

		var loadNextImgurItem = function(loadeds, images, i, callback){
			loadImgurItem(images[i].links.original, function(success){
				if(success){
					loadeds.push(images[i].links.original);
					i++;
					if(i>images.length-1)
						callback(true);
					else
						loadNextImgurItem(loadeds, images, i, callback);
				}else{
					callback(false);
				}
			});
		};

		var loadImgurItem = function(url, callback){

			$('<img />').attr('src', url).load(function(){
				$($this).trigger('successImgurItemLoad', [url]);
		        callback(true);
		    }).error(function(){
				$($this).trigger('errorImgurItemLoad', [url]);
				callback(false);
		    });
		};

		var loadText = function(post, url, callback){
			ajaxYahoo({
				url: url,
				success: function(data){
					post.data.text = findArticle(data.responseText);
					if(post.data.text){
						$($this).trigger('successPostLoad', [url]);
				        callback(true);
				    }else{
						$($this).trigger('errorPostLoad', [url]);
						callback(false);
				    }
				}
			});
		};

		var findArticle = function(totalhtml){
			var article = $("<div/>");
			var cont = 0;
			$("div, span, p, li, article, h1, h2, h3, h4, section", totalhtml).each(function(){
				if(cont > options.maxTextParagraphs)
					return;

				var el = $(this).contents().filter(function(){ return(this.nodeType == 3); });	
				if(el.text().split(/\s* \s*/).length > 10){
					var i = $("<p/>");
					article.append(i);
					i.css({
						"font-size": el.parent().css("font-size"),
						"color": el.parent().css("color")
					});
					i.html(el.text());

					cont++;
				}

			});

			if(cont < 2)
				return null;

			return article.html();
		};

		// var findCommomParent = function(els){
		// 	var parents = [];
		// 	var minlen = Infinity;

		// 	for(var i in els){
		// 		var curparents = els[i].parents();
		// 		parents.push(curparents);
		// 		minlen = Math.min(minlen, curparents.length);
		// 	}

		// 	for (var i in parents) {
		// 		parents[i] = parents[i].slice(parents[i].length - minlen);
		// 	}

		// 	// Iterate until equality is found
		// 	for (var i = 0; i < parents[0].length; i++) {
		// 		var equal = true;
		// 		for (var j in parents) {
		// 			if (parents[j][i] != parents[0][i]) {
		// 				equal = false;
		// 				break;
		// 			}
		// 		}
		// 		if (equal) return $(parents[0][i]);
		// 	}
		// 	return $([]);

		// };

		var defaultRender = function(data){
			if(data.youtube){
				$($this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1><iframe type='text/html' width='640' height='390' src='http://www.youtube.com/embed/"+data.youtube+"' frameborder='0'/><hr/>");
			}else if(data.imgur){
				$($this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1>");
				for(var i in data.imgur){
					$($this).append("<img src='"+data.imgur[i]+"'/><br/>");
				}
				$($this).append("<hr/>");
			}else if(data.text){
				$($this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1>"+data.text+"<hr/>");
			}else{
				$($this).append("<h1><span class='subreddit'>"+data.subreddit+"</span>"+data.title+"</h1><img src='"+data.url+"'/><hr/>");
			}
		};

		var ajaxYahoo = function(o) {

			var YQL = 'http' + (/^https/.test(location.protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
		        query = 'select * from html where url="{URL}" and xpath="*"';
		    
		    
		    var url = o.url;
		    
		    //if ( /get/i.test(o.type) && !/json/i.test(o.dataType)) {
		        
		        // Manipulate options so that JSONP-x request is made to YQL
		        
		        o.url = YQL;
		        o.dataType = 'json';
		        
		        o.data = {
		            q: query.replace(
		                '{URL}',
		                url + (o.data ?
		                    (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
		                : '')
		            ),
		            format: 'xml'
		        };
		        
		        // Since it's a JSONP request
		        // complete === success
		        if (!o.success && o.complete) {
		            o.success = o.complete;
		            delete o.complete;
		        }
		        
		        o.success = (function(_success){
		            return function(data) {
		                
		                if (_success) {
		                    // Fake XHR callback.
		                    _success.call(this, {
		                        responseText: (data.results[0] || '')
		                            // YQL screws with <script>s
		                            // Get rid of them
		                            .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
		                    }, 'success');
		                }
		                
		            };
		        })(o.success);
		        
		    //}
		    
		    return $.ajax.apply(this, arguments);
		    
		};

		start();

	};


  	$.fn.redditloader = function(options) {

		this.each(function(){

			var rl = $(this).data("redditloader");

			if(!rl)
				rl = new RedditLoader($(this), options);

			if(options===true)
				rl.resume();
			else if(options===false)
				rl.pause();

			$(this).data("redditloader", rl);

		});


  	};

})(jQuery);