DDM Small Image

gistfile1.txt

<%--
/**
 * Copyright (c) 2000-2012 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="/html/portlet/breadcrumb/init.jsp" %>

<liferay-ui:breadcrumb
	displayStyle="<%= displayStyle %>"
	showCurrentGroup="<%= showCurrentGroup %>"
	showCurrentPortlet="<%= showCurrentPortlet %>"
	showGuestGroup="<%= showGuestGroup %>"
	showLayout="<%= showLayout %>"
	showParentGroups="<%= showParentGroups %>"
	showPortletBreadcrumb="<%= showPortletBreadcrumb %>"
/>

oi

<style>
	.lfr-ddm-small-image-polaroid {
		padding: 4px;
		background-color: white;
		border: 1px solid #CCC;
		border: 1px solid rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		width: 80px;
		height: 80px;
	}

	.lfr-ddm-small-image-polaroid div {
		background: #ccc;
		width: 80px;
		height: 80px;
	}

	.lfr-ddm-small-image-content {
		padding: 5px;
	}

	.lfr-ddm-small-image-content .aui-field-input-text {
		width: 350px;
		margin: 5px;
	}

	.lfr-ddm-small-image-content th {
		width: 1%;
		white-space: nowrap;
		padding: 5px;
	}
</style>

<div id="<portlet:namespace />smallImageContainer">

	<div class="lfr-ddm-small-image-header">
		<aui:input name="smallImage" type="checkbox" selected="true" />
	</div>

	<div class="lfr-ddm-small-image-content aui-toggler-content-collapsed">
		<table>
			<tr>
				<th>
					<div class="lfr-ddm-small-image-polaroid">
						<div></div>
					</div>
				</th>
				<td>
					<table>
						<tr>
							<th>
								<aui:input cssClass="lfr-ddm-small-image-type" name="type" label="file-upload" type="radio" />
							</th>
							<td>
								<aui:input cssClass="lfr-ddm-small-image-value" name="file" label="" type="file" />
							</td>
						</tr>
						<tr>
							<th>
								<aui:input cssClass="lfr-ddm-small-image-type" name="type" label="url" type="radio" />
							</th>
							<td>
								<aui:input cssClass="lfr-ddm-small-image-value" name="url" label="" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>

</div>

<aui:script use="aui-toggler">
	var <portlet:namespace />container = A.one('#<portlet:namespace />smallImageContainer');
	var <portlet:namespace />types = <portlet:namespace />container.all('.lfr-ddm-small-image-type input');
	var <portlet:namespace />values = <portlet:namespace />container.all('.lfr-ddm-small-image-value input');

	var <portlet:namespace />selectSmallImageType = function(index) {
		<portlet:namespace />types.set('checked', false);
		<portlet:namespace />types.item(index).set('checked', true);

		<portlet:namespace />values.set('disabled', true);
		<portlet:namespace />values.item(index).set('disabled', false);
	};

	<portlet:namespace />container.delegate(
		'change',
		function(event) {
			var input = event.currentTarget;
			var index = <portlet:namespace />types.indexOf(input);

			<portlet:namespace />selectSmallImageType(index);
		},
		'.lfr-ddm-small-image-type input'
	);

	// TODO
	<portlet:namespace />selectSmallImageType(0);

	var <portlet:namespace />toggler = new A.Toggler({
		on: {
			animatingChange: function(event) {
				var instance = this;
				var expanded = instance.get('expanded');

				A.one('#<portlet:namespace />smallImageCheckbox').set('checked', !expanded);
			}
		},
		animated: true,
		content: '#<portlet:namespace />smallImageContainer .lfr-ddm-small-image-content',
		header: '#<portlet:namespace />smallImageContainer .lfr-ddm-small-image-header',
		expanded: false
	});

</aui:script>