blog_streams view

view.jsp

<%--
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */
--%>

<%@ include file="/blogs_stream/init.jsp" %>

<div class="<%= viewType %>">

	<div class="category-navigation">

	<%
	for (long assetCategoryId : assetCategoryIds) {
		AssetCategory assetCategory = AssetCategoryLocalServiceUtil.fetchCategory(assetCategoryId);
		List<AssetCategory> assetCategoryChildren = AssetCategoryLocalServiceUtil.getChildCategories(assetCategoryId);
	%>

		<div class="category">
			<a class="child-category" href="javascript:;" onclick="<portlet:namespace />getBlogEntries(<%= assetCategory.getCategoryId() %>)"><h3 class="parent-category"><%= assetCategory.getName() %></h3></a>

			<%
			for (AssetCategory assetCategoryChild : assetCategoryChildren) {
			%>

				<a class="child-category" href="javascript:;" onclick="<portlet:namespace />getBlogEntries(<%= assetCategoryChild.getCategoryId() %>)"><%= assetCategoryChild.getName() %></a>

			<%
			}
			%>

		</div>

	<%
	}
	%>

	</div>

	<div class="aui-w30 content-column" id="blogList">
		Navigation goes here.
	</div>

	<div class="aui-w70 content-column" id="blogDisplay">
		Content goes here.
	</div>
</div>

<aui:script use="querystring-parse">
	function processAjaxData(response, urlPath) {
		response.html = document.getElementById('wrapper').innerHTML;
		response.pageTitle = document.title;
		window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
	}

	window.onpopstate = function(e){
		if (e.state){
			document.getElementById("wrapper").innerHTML = e.state.html;
			document.title = e.state.pageTitle;
		}
	};

	var response = {};

	A.on(
		'load',
		function() {
			processAjaxData(response);

			var query = A.QueryString.parse(window.location.search.substr(1));
			var categoryId = query.categoryId;

			if (categoryId) {
				<portlet:namespace />getBlogEntries(categoryId);
			}

			var entryId = query.entryId;

			if (entryId) {
				<portlet:namespace />getBlogContent(categoryId, entryId);
			}
		}
	);

	Liferay.provide(
		window,
		'<portlet:namespace />getBlogEntries',
		function(categoryId) {
			var A = AUI();
			var blogList = A.one('#blogList');

			A.io.request(
				'<liferay-portlet:resourceURL id="getBlogEntries" />',
				{
					data: {
						<portlet:namespace />categoryId: categoryId
					},
					on: {
						success: function() {
							var responseJSON = JSON.parse(this.get('responseData'));

							blogList.empty();

							for (var key in responseJSON) {
								var entry = responseJSON[key];

								var author = entry["author"];
								var date = entry["date"];
								var title = entry["title"];
								var url = entry["url"];

								blogList.append('<a href="' + url + '" onclick="<portlet:namespace />getBlogContent(' + categoryId + ', ' + key + ')"><h3 class="blog-title">' + title + '</h3><span class="blog-author">' + author + '</span><span class="blog-date">' + date + '</span></a><br><br>');
							}

							var urlQuery = A.QueryString.parse(window.location.search.substr(1));

							if (!urlQuery.entryId && !urlQuery.title) {
								urlQuery.categoryId = categoryId;
							}

							urlQuery = A.QueryString.stringify(urlQuery);

							processAjaxData(responseJSON, window.location.pathname + '?' + urlQuery);
						}
					}
				}
			);
		},
		['aui-base', 'aui-io-request']
	);

	Liferay.provide(
		window,
		'<portlet:namespace />getBlogContent',
		function(categoryId, entryId) {
			event.preventDefault();

			var A = AUI();
			var blogDisplay = A.one('#blogDisplay');

			A.io.request(
				'<liferay-portlet:resourceURL id="getBlogContent" />',
				{
					data: {
						<portlet:namespace />entryId: entryId
					},
					on: {
						success: function() {
							var responseJSON = JSON.parse(this.get('responseData'));

							blogDisplay.setContent(responseJSON["blogContent"]);

							var urlQuery = A.QueryString.parse(window.location.search.substr(1));

							urlQuery.categoryId = categoryId;
							urlQuery.entryId = entryId;

							var title = responseJSON["title"];
							document.title = '<liferay-ui:message key="blogs" /> - ' + title;

							title = title.replace(/\s/g, '_');
							urlQuery.title = encodeURIComponent(title);

							urlQuery = A.QueryString.stringify(urlQuery);

							processAjaxData(responseJSON, window.location.pathname + '?' + urlQuery);
						}
					}
				}
			);
		},
		['aui-base', 'aui-io-request']
	);
</aui:script>