Standard properties all appear to work...

Uses Google Feeds API to do a JSONP ajax call. git-svn-id: https://xerteonlinetoolkits.googlecode.com/svn/trunk@464 912cdd6b-5c7d-d5a7-a2ba-d0f0cdb91641
thexerteproject · Oct 31, 2012 · 898ae72 · 898ae72
1 parent 9254d87
commit 898ae72
Showing 1 changed file with 131 additions and 0 deletions.
diff --git a/modules/xerte/parent_templates/Nottingham/models_html5/rss.html b/modules/xerte/parent_templates/Nottingham/models_html5/rss.html
@@ -0,0 +1,131 @@
+<script type="text/javascript">
+
+	// pageChanged & sizeChanged functions are needed in every model file
+	// other functions for model should also be in here to avoid conflicts
+	var rss = new function() {
+		// function called every time the page is viewed after it has initially loaded
+		this.pageChanged = function() {
+
+		}
+
+		// function called every time the size of the LO is changed
+		this.sizeChanged = function() {
+
+		}
+
+		this.listFeed = function(data) {
+			clearTimeout(errorTimer);
+			$("#loadingSpinner").hide();
+			var resultsString = "";
+			if (data.responseData.feed.entries == 0) {
+				resultsString = '<div><p>No results returned!!</p></div>';  // ** Need to take this from the language file
+			} else {
+				$pageContents.find("#headerHolder").html("<p>" + data.responseData.feed.description + "</p>"); // ** Need to take this from the language file
+				$.each(data.responseData.feed.entries, function (index, item) {
+					resultsString += '<div><a target="_blank" href="' + item.link + '">' + item.title + '</a><p>"' + item.contentSnippet + '"</p></div>';
+				});
+			}
+			$resultsHolder
+				.html(resultsString)
+				.find("div:even").addClass("shadedDiv");
+		}
+	}
+
+	var $pageContents = $("#pageContents");
+	var $textHolder = $("#textHolder");
+	var $panel = $("#pageContents .panel");
+	var $resultsHolder = $pageContents.find("#resultsHolder");
+
+	var rssURL = x_currentPageXML.getAttribute("url");
+
+	var googleFeedURL = document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load";
+
+	var errorTimer = setTimeout(function() { alert("error");
+		$("#loadingSpinner").hide();
+		$resultsTable
+			.html('<div><p>There was an error loading the results!!</p></div>') // ** Need to take this from the language file
+			.find("div:even").addClass("shadedDiv");
+    }, 5000);
+
+	$.ajax({
+		beforeSend: function() {
+		     $('#loadingSpinner').show();
+  		},
+		url: googleFeedURL,
+		data: {
+				"q" : encodeURI(rssURL),
+				"num" : 10,
+				"v" : "1.0"
+			},
+		dataType: 'jsonp',
+		jsonpCallback: "rss.listFeed",
+		cache:false
+	});
+
+	$panel.addClass("width60");
+	if (x_currentPageXML.getAttribute("align") == "Right") {
+		$panel.addClass("x_floatLeft");
+	} else {
+		$panel.addClass("x_floatRight");
+	}
+
+	$textHolder.html(x_addLineBreaks(x_currentPageXML.getAttribute("text")));
+
+	// call this function in every model once everything's loaded
+	x_pageLoaded();
+
+</script>
+
+<style type="text/css">
+
+	#headerHolder {
+		text-align:		center;
+		font-weight:	bold;
+	}
+
+	#resultsHolder {
+		width:	100%;
+	}
+
+	#resultsHolder div {
+		width: 100%;
+		padding: 2px 2px 2px 2px;
+		box-sizing: border-box; *behavior: url(/scripts/boxsizing.htc);
+	}
+
+	#resultsHolder div p {
+		margin: 0;
+	}
+
+	.shadedDiv {
+		background-color: #E3FFD6;
+	}
+
+	#loadingSpinner {
+		display:	none;
+		text-align:	center;
+		font-weight:	bold;
+	}
+
+	#loadingSpinner img {
+		margin-right: 20px;
+		vertical-align: middle;
+	}
+
+</style>
+
+<div id="pageContents">
+
+	<div id="rssHolder" class="mobileAlign"> <!-- this tag is only used when viewed on mobiles to change layout -->
+		<div class="panel inline">
+			<div id="headerHolder"></div>
+			<div id="resultsHolder"></div>
+			<div id="loadingSpinner"><img src="media/spinner.gif" alt="Fetching results" /><p>Fetching results...</p></div>
+		</div>
+	</div>
+
+	<div id="textHolder">
+
+	</div>
+
+</div>