etit_images.html.haml

gistfile1.txt

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% load coffeescript %}
{% block head %}
<script src="{% static "scripts/clone-form.js"%}" type="text/javascript"></script>
	:javascript
		request_method = '{{request.method}}'
		{% inlinecoffeescript %}

			active_form = 0

			$(document).ready ->

				showForm = (id) ->
					$('.image-form').hide()
					active_form = id
					$('.image-form#image-' + active_form).show()
					name = $("input#id_image_set-#{active_form}-name").val()
					name = '[untitled image]' if !name
					updateImageName(name)

					# Add key up handler to name field
					$("input#id_image_set-#{active_form}-name").keyup((e) ->
						val = $(e.target).val()
						updateImageName(val)
					)

				updateImageName = (name) ->
					$('#current-image').text(name)
					$("#image-select option[value='#{active_form}']").text(name)					

				# Hackety-hack: we don't want an extra form if there are already images
				# present, so remove the last div. If there are no existing images, we 
				# need to unset the value in the ID field (for reasons that are completely
				# unclear to me, crispy forms removes the id field for each form in the 
				# formset, so I had to manually generate it. I'm sure there's a cleaner 
				# way to solve this.)
				num_forms = $('.image-form').length
				if num_forms > 1 and request_method == 'POST'
					$('.image-form').last().remove()
					$('#id_image_set-TOTAL_FORMS').val(num_forms-1)
					$("#image-select option[value=#{num_forms-1}]").last().remove()
				else
					$("#id_image_set-#{num_forms-1}-id").val('')

				# Show the first image on load
				showForm(active_form)

				$('#image-select').change((e) ->
					id = $(e.target).val()
					showForm(id)
				)

				$('#submit-form').click((e) ->
					e.preventDefault()
					$('form').submit()
				)

				$('#add-image-form').click((e) ->
					e.preventDefault()
					cloneMore('div.image-form:last', 'image')
					nextIndex = $('.image-form').length - 1
					$('#image-select').append($('<option>', {value: nextIndex}).text('[untitled image]'))
					$('.image-form:last').attr('id', 'image-' + nextIndex)
					$('#image-select').val(nextIndex)
					showForm(nextIndex)
				)


		{% endinlinecoffeescript %}
{% endblock %}
{% block content %}
.row
	.span11
		.row
			.span9
				%h2 Edit images
				.lead Select an image from the list at left and edit its properties in the form at right.
			.span2
				%button#submit-form.btn.btn-large.btn-primary{style:"margin: 35px 0px 0px 20px; font-size: 24px; padding: 10px 20px; line-height: 1.4em"} Save
		%hr
.row
	.span3
		%h4 Images in collection:
		%select{id: 'image-select', size: '10'}
			- for form in formset
				<option value='{{forloop.counter0}}'
					- if forloop.first
						selected="selected"
				>{{ form.name.value }}</option>
		%button#add-image-form.btn.btn-large.btn-secondary{style:"margin: 0px 0px 0px 20px;"} Add a new image
	.span8{style: 'padding-left: 15px'}
		#current-image{style: 'text-align: center; font-size: 40px; padding: 10px 0px 50px 0px;'}= formset.0.name.value
		<form class="form-horizontal" enctype="multipart/form-data" method="post" action="">{% csrf_token %}
			{{ formset.management_form }}
				- for form in formset
					<div id='image-{{forloop.counter0}}' class='image-form'>
						<input id="id_image_set-{{forloop.counter0}}-id" name="image_set-{{forloop.counter0}}-id" type="hidden" value="{{form.id.value}}" />
						{% crispy form %}
					</div>
		</form>
{% endblock %}