Editable Lego

editable_lego.ftl

<#assign journal_article_service = serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleService") />
<#assign journal_content_util = staticUtil["com.liferay.portlet.journalcontent.util.JournalContentUtil"] />
<#assign layout_service = serviceLocator.findService("com.liferay.portal.service.LayoutLocalService") />

<#assign namespace = request["portlet-namespace"]>
<#assign theme_display = request['theme-display'] />
<#assign plid = theme_display['plid'] />
<#assign layout = layout_service.getLayout(plid?number) />

<#if request.lifecycle == 'RENDER_PHASE'>
	<#if css.data?has_content>
		<style type="text/css">
			${css.data}
		</style>
	</#if>

	<div class="lego-article ${article_class.data}" id="article-${.vars['reserved-article-id'].data}">
		<#list section.siblings as cur_section>
			<section class="block-container lego-section section-${cur_section_index + 1} ${cur_section.section_class.data}" ${cur_section.data}>
				<#list cur_section.block.siblings as cur_block>
					<div class="block block-${cur_block_index + 1} content-column lego-block w${cur_block.width.data} ${cur_block.block_class.data}" ${cur_block.data}>
						<#list cur_block.element.siblings as cur_element>
							<#assign cur_element_css_class = "live-edit lego-element ${cur_element.element_class.data}" />

							<#if cur_element.tag.getData() == "image">
								<img
									class="lego-img ${cur_element_css_class}"
									src="${cur_element.content.getData()}"
									data-section-id="${cur_section_index}"
									data-block-id="${cur_block_index}"
									data-element-id="${cur_element_index}"
									${cur_element.getData()}
								/>
							<#else>
								<#if !cur_element.tag.data?has_content>
									<#assign cur_element_tag = "div">
								<#else>
									<#assign cur_element_tag = cur_element.tag.data>
								</#if>

								<${cur_element_tag}
									class="${cur_element_css_class}"
									data-section-id="${cur_section_index}"
									data-block-id="${cur_block_index}"
									data-element-id="${cur_element_index}"
									${cur_element.data}
								>
									${cur_element.content.data}
								</${cur_element_tag}>
							</#if>
						</#list>

						<#if cur_block.article_id?? && cur_block.article_id.data?has_content>
							<#list cur_block.article_id.siblings as article_id>
								<#if article_id.data?has_content && journal_article_local_service.hasArticle(groupId, article_id.data)>
									${journal_content_util.getContent(groupId, article_id.data, "", locale, xmlRequest)!}

									<#if user_has_permissions>
										<#assign service_context = staticUtil["com.liferay.portal.service.ServiceContextThreadLocal"].getServiceContext() />
										<#assign http_servlet_request = service_context.getRequest() />

										<#assign current_url = request.attributes.CURRENT_COMPLETE_URL! />

										<#assign edit_url = portletURLFactory.create(http_servlet_request, "15", plid, "0") />
										<#assign VOID = edit_url.setParameter("p_p_state", "maximized") />
										<#assign VOID = edit_url.setParameter("p_p_lifecycle", "0") />
										<#assign VOID = edit_url.setParameter("groupId", "${groupId}") />
										<#assign VOID = edit_url.setParameter("struts_action", "/journal/edit_article") />
										<#assign VOID = edit_url.setParameter("redirect", "${current_url}") />
										<#assign VOID = edit_url.setParameter("articleId", "${article_id.data}") />

										<span class="lfr-icon-action lfr-icon-action-edit lfr-meta-actions pull-right">
											<a href="${edit_url}" class="taglib-icon">
												<img src="/osb-community-theme/images/spacer.png" alt="Edit" style="background-image: url('/osb-community-theme/sprite/images/common/_sprite.png'); background-position: 50% -608px; background-repeat: no-repeat; height: 16px; width: 16px;">
												<span class="taglib-text ">Edit</span>
											</a>
										</span>
									</#if>
								</#if>
							</#list>
						</#if>
					</div>
				</#list>
			</section>
		</#list>
	</div>

	<#if layoutPermission.contains(permissionChecker, layout, "UPDATE")>
		<style>
			.controls-visible .live-edit {
				-moz-user-modify: read-write;
				-webkit-user-modify: read-write;
			}
		</style>

		<script>
		AUI().ready(
			'aui-io-plugin',
			'aui-io-request',
			'escape',
			function(A) {
				var body = A.getBody();

				var saveInfo = function(blockId, elementId, sectionId, value) {
					A.io.request(
						'${request["resource-url"]}',
						{
							data: {
								${namespace}articleId: '${.vars['reserved-article-id'].data}',
								${namespace}blockId: blockId,
								${namespace}elementId: elementId,
								${namespace}languageId: themeDisplay.getLanguageId(),
								${namespace}sectionId: sectionId,
								${namespace}value: value
							},
							on: {
								success: function(event, id, obj) {
									console.log('Changed', obj);
								},
								failure: function(event, id, obj) {
									console.log('Failed', obj);
								}
							}
						}
					);
				};

				A.one('#article-${.vars['reserved-article-id'].data}').delegate(
					'click',
					function(event) {
						var node = event.currentTarget;

						var initialContent = '';

						var editNode = node;

						var imgEdit = false;

						if (node.get('tagName') == 'IMG') {
							node.hide();

							var imageSrc = node.attr('src');

							var nodeInput = A.Node.create('<input type="text" value="' + imageSrc + '" />');

							node.placeAfter(nodeInput);

							nodeInput.focus().select();

							initialContent = imageSrc;

							editNode = nodeInput;

							imgEdit = true;
						}
						else {
							initialContent = node.getContent();
						}

						editNode.on(
							'blur',
							function(event) {
								node.detach('blur');

								var content = '';

								if (imgEdit) {
									content = editNode.attr('value');

									editNode.remove(true);

									node.attr('src', content);

									node.show();
								}
								else {
									content = editNode.getContent();
								}

								if (!body.hasClass('controls-visible') || (initialContent == content)) {
									return;
								}

								var sectionNumber = node.attr('data-section-id');
								var blockNumber = node.attr('data-block-id');
								var elementNumber = node.attr('data-element-id');

								saveInfo(blockNumber, elementNumber, sectionNumber, content);
							}
						);
					},
					'.live-edit'
				);
			}
		);
		</script>
	</#if>
<#elseif request.lifecycle == 'RESOURCE_PHASE'>
	<#assign service_context = objectUtil("com.liferay.portal.service.ServiceContextThreadLocal").getServiceContext() />
	<#assign http_servlet_request = service_context.getRequest() />

	<#assign article_id = paramUtil.getString(http_servlet_request, "articleId") />
	<#assign block_id = paramUtil.getInteger(http_servlet_request, "blockId") />
	<#assign element_id = paramUtil.getInteger(http_servlet_request, "elementId") />
	<#assign language_id = paramUtil.getString(http_servlet_request, "languageId") />
	<#assign section_id = paramUtil.getInteger(http_servlet_request, "sectionId") />
	<#assign value = paramUtil.getString(http_servlet_request, "value") />

	<#assign article = journal_article_service.getArticle(getterUtil.getLong(groupId), article_id) />

	<#assign document = saxReaderUtil.read(article.getContent()) />

	<#assign root_element = document.getRootElement() />

	<#assign dynamic_elements = root_element.elements("dynamic-element") />

	<#assign section_element = dynamic_elements[section_id] />

	<#assign section_dynamic_elements = section_element.elements("dynamic-element") />

	<#assign block_element = section_dynamic_elements[block_id] />

	<#assign block_dynamic_elements = block_element.elements("dynamic-element") />

	<#assign element = block_dynamic_elements[element_id] />

	<#assign element_dynamic_elements = element.elements("dynamic-element") />

	<#assign element_content_element = "" />

	<#list element_dynamic_elements as element_dynamic_element>
		<#if validator.equals(element_dynamic_element.attributeValue("name"), "content")>
			<#assign element_content_element = element_dynamic_element />
		</#if>
	</#list>

	<#assign dynamic_content = element_content_element.elements("dynamic-content") />

	<#assign found_language_id = false />

	<#list dynamic_content as dynamic_content_element>
		<#assign content_language_id = dynamic_content_element.attributeValue("language-id") />

		<#if validator.equals(language_id, content_language_id)>
			<#assign void = dynamic_content_element.clearContent() />

			<#assign void = dynamic_content_element.addCDATA(value) />

			<#assign found_language_id = true />
		</#if>
	</#list>

	<#if !found_language_id>
		<#assign dynamic_content_element = element.addElement("dynamic-content") />

		<#assign void = dynamic_content_element.addAttribute("language-id", language_id) />

		<#assign void = dynamic_content_element.addCDATA(value) />

		<#assign available_locales = root_element.attributeValue("available-locales") />

		<#assign available_locales_array = stringUtil.split(available_locales) />

		<#if !arrayUtil.contains(available_locales_array, language_id)>
			<#assign available_locales_array = arrayUtil.append(available_locales_array, language_id) />

			<#assign void = root_element.addAttribute("available-locales", stringUtil.merge(available_locales_array)) />
		</#if>
	</#if>

	<#assign version = article.getVersion() />

	<#assign void = journal_article_service.updateContent(getterUtil.getLong(groupId), article_id, version, document.formattedString("  ")) />
</#if>