Editable Lego

editable_lego.vm

#set ($layout_id = $request.get("theme-display").get("plid"))
#set ($layout_service = $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService"))
#set ($layout = $layout_service.getLayout($getterUtil.getLong($layout_id)))
#set ($namespace = $request.portlet-namespace)

#set ($journal_article_local_service = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleLocalService"))
#set ($article = $journal_article_local_service.getArticle($groupId, $reserved-article-id.data))
$article.toEscapedModel().getContent()

#if ($request.lifecycle == 'RENDER_PHASE')
	#if (!$display_locales || $display_locales.getData() == "" || $display_locales.getData().contains($locale.toString()))
		<style>
			.lego-image {
				max-height: 100%;
				max-width: 100%;
			}

			.max-960 {
				margin: 0 auto;
				max-width: 960px;
			}

			.no-max .max-960 {
				max-width: none;
			}

			$lego_css.data

			#foreach ($media_query in $lego_media_query.siblings)
				#set ($media_query_text = "@media all")

				#if ($media_query.media_query_max.data != "")
					#set ($media_query_text = $media_query_text + " and (max-width: $media_query.media_query_max.data)")
				#end

				#if ($media_query.media_query_min.data != "")
					#set ($media_query_text = $media_query_text + " and (min-width: $media_query.media_query_min.data)")
				#end

				#if ($media_query.data !="")
					$media_query_text {
						$media_query.data
					}
				#end
			#end
		</style>
		#set ($article_css_class = "lego-article")
		#if ($lego_css_class.data != "")
			#set ($article_css_class = $article_css_class + " $lego_css_class.data")
		#end
		<div class="$article_css_class" id="article-${reserved-article-id.data}">
			<div class="lego-article-content max-960">
				#foreach ($section in $lego_section_attr.siblings)
					#set ($section_count = $velocityCount)
					#set ($section_css_class = "aui-helper-clearfix lego-section section-${section_count}")

					#if ($section.section_css_class.data != "")
						#set ($section_css_class = $section_css_class + " $section.section_css_class.data" )
					#end

					<div class="$section_css_class" $section.data>
						#foreach ($block in $section.lego_block_attr.siblings)
							#set ($block_count = $velocityCount)
							#set ($block_css_class = "aui-w${block.width.data} block-${block_count} content-column lego-block")

							#if ($block.block_css_class.data != "")
								#set ($block_css_class = $block_css_class + " $block.block_css_class.data" )
							#end

							<div class="$block_css_class" $block.data>
								<div class="content-column-content ${block.column_position.data}-column">
									#foreach ($element in $block.lego_element_attr.siblings)
										#set ($element_css_class = "lego-element")

										#if ($layoutPermission.contains($permissionChecker, $layout, "UPDATE"))
											#set ($element_css_class = "$element_css_class editable")
										#end

										#if ($element.element_css_class.data != "")
											#set ($element_css_class = $element_css_class + " $element.element_css_class.data" )
										#end

										#if ($element.element_type.data == "button")
											<a class="btn $element_css_class" id="button-${reserved-article-id.data}${section_count}${block_count}$velocityCount" $element.data>$element.element_content.data</a>
										#elseif ($element.element_type.data == "heading")
											<h2 class="redesign heading $element_css_class" $element.data>$element.element_content.data</h2>
										#elseif ($element.element_type.data == "image")
											<img class="lego-img $element_css_class" $element.data src="$element.element_content.data" />
										#elseif ($element.element_type.data == "sub_heading")
											<p class="redesign sub-heading $element_css_class" $element.data>$element.element_content.data</p>
										#elseif ($element.element_type.data == "ul")
											<ul class="$element_css_class" $element.data>
												#foreach ($string in $stringUtil.split($element.element_content.data))
													<li>$string</li>
												#end
											</ul>
										#else
											<$element.element_type.data class="$element_css_class" $element.data>
												$element.element_content.data
											</$element.element_type.data>
										#end
									#end
								</div>
							</div>
						#end

						#if ($section.custom_content.data != "")
							$section.custom_content.data
						#end
					</div>
				#end
			</div>
		</div>
	#end

	#if ($layoutPermission.contains($permissionChecker, $layout, "UPDATE"))
		<style>
			.controls-visible .editable {
				-moz-user-modify: read-write;
				-webkit-user-modify: read-write;
			}
		</style>
		<script>
		AUI().ready(
			'aui-base',
			'aui-io-plugin',
			'aui-io-request',
			'escape',
			'node',
			'node-event-delegate',
			function(A) {
				var body = A.getBody();

				var saveInfo = function(initialContent, newContent) {
					A.io.request(
						'${request.resource-url}',
						{
							data: {
								${namespace}initialContent: initialContent,
								${namespace}newContent: newContent
							},
							on: {
								success: function(event, id, obj) {
									console.log('Changed "' + initialContent + '" to "' + newContent + '"');
								},
								failure: function(event, id, obj) {
									console.log('Failed to change "' + initialContent + '" to "' + newContent + '"');
								}
							}
						}
					);
				};

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

						if (!initialContent) {
							var initialContent = node.getContent();
						}

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

								if (body.hasClass('controls-visible') && (initialContent != node.getContent())) {
									saveInfo(initialContent, node.getContent());
								}
							}
						);
					},
					'.editable'
				);
			}
		);
		</script>
	#end
#elseif ($layoutPermission.contains($permissionChecker, $layout, "UPDATE") && $request.lifecycle == 'RESOURCE_PHASE')
	#set ($old_content = $request.parameters.initialContent)
	#set ($new_content = $request.parameters.newContent)

	#set ($journal_article_local_service = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleLocalService"))
	#set ($article = $journal_article_local_service.getArticle($groupId, $reserved-article-id.data))

	#set ($article_content = $article.getContent())
	#set ($escaped_article_content = $article.toEscapedModel().getContent())

	#set ($replaced_content = $article_content.replace($old_content,$new_content))

	#set ($VOID = $journal_article_local_service.updateContent($groupId, $reserved-article-id.data, $article.getVersion(), "$replaced_content"))
#end