Page preview works! Very exciting.

Now we just need the ability to edit things.

admin.py

@@ -16,7 +16,11 @@ class PageAdmin(admin.ModelAdmin):
     order_by = ['document', 'page_num']
 
     class Media:
-        js = ("lib/underscore.js", "lib/backbone.js", 'js/pdfformfiller/pdfformfiller.js')
+        js = (  "lib/jquery.js",
+                "lib/underscore.js",
+                "lib/backbone.js",
+                "lib/backbone.marionette.js",
+                "js/pdfformfiller/pdfformfiller.js")
 
     def get_urls(self):
         urls = super(PageAdmin, self).get_urls()

static/js/pdfformfiller/pdfformfiller.js

@@ -1 +1,135 @@
-console.log('pdfformfiller loaded!');
+/*global Backbone, Marionette, _ */
+(function () {
+	'use strict';
+
+	var root = this,
+		PDFFormFiller,
+		PagePreviewView,
+		FieldItemPreviewView,
+		FieldPreviewView,
+		Document,
+		Page,
+		Field,
+		PageCollection,
+		FieldCollection;
+
+	if (typeof exports !== 'undefined') {
+		PDFFormFiller = exports;
+	} else {
+		PDFFormFiller = root.PDFFormFiller = {};
+	}
+
+	Field = PDFFormFiller.Field = Backbone.Model.extend({});
+
+	FieldCollection = PDFFormFiller.FieldCollection = Backbone.Collection.extend({
+		model: Field
+	});
+
+	Page = PDFFormFiller.Page = Backbone.Model.extend({
+		initialize: function (options) {
+			var fields,
+				self = this;
+
+			if (typeof this.get('fields') === 'undefined') {
+				fields = new FieldCollection();
+				fields.url = function () {
+					return self.url + 'fields/';
+				};
+				this.set('fields', fields);
+			}
+		},
+
+		fetch: function () {
+			var self = this;
+
+			Backbone.Model.prototype.fetch.apply(this, arguments).then(function () {
+				var model = self;
+				// Auto-fetch the fields collection
+				if (typeof model.get('fields') !== 'undefined') {
+					model.get('fields').fetch();
+				}
+			});
+		},
+	});
+
+
+	FieldItemPreviewView = PDFFormFiller.FieldItemPreviewView = Marionette.ItemView.extend({
+		/* template: _.template('<div class="pff-field pff-field-<%= fieldtype %>"><%= name %></div>'), */
+		template: _.template('<%= name %>'),
+		tagName: 'div',
+		className: 'pff-field',
+
+		onRender: function () {
+			var page = this.options.page,
+				page_height = page.get('height'),
+				page_width = page.get('width'),
+				model = this.model;
+
+			this.$el.css({
+				position: 'absolute',
+				bottom: (model.get('pos_y') / page_height) * 100 + '%',
+				left: (model.get('pos_x') / page_width) * 100 + '%',
+				width: (model.get('width') / page_width) * 100 + '%',
+				height: (model.get('height') / page_height) * 100 + '%'
+			})
+				.addClass('pff-field-' + model.get('fieldtype'));
+		}
+	});
+
+	FieldPreviewView = PDFFormFiller.FieldPreviewView = Marionette.CollectionView.extend({
+		itemView: FieldItemPreviewView,
+		collection: FieldCollection,
+
+		onRender: function () {
+
+			this.$el.css({
+				position: 'absolute',
+				height: '100%',
+				width: '100%'
+			});
+		},
+
+		buildItemView: function (item, ItemView) {
+			var view = new ItemView({
+				model: item,
+				page: this.options.page,
+			});
+			return view;
+		}
+	});
+
+	PagePreviewView = PDFFormFiller.PagePreviewView = Marionette.Layout.extend({
+		template: _.template('<div class="fields"></div><img class="imgPreview" src="<%= image %>"/>'),
+
+		regions: {
+			fields: '.fields'
+		},
+
+		ui: {
+			image: '.imgPreview',
+			fields: '.fields'
+		},
+
+		initialize: function (options) {
+			this.listenTo(this.model, 'change', this.render);
+		},
+
+		onRender: function () {
+			var page = this.model,
+				fields = page.get('fields');
+
+			this.$el.css({
+				position: 'relative'
+			});
+
+			this.ui.image.css({
+				'width': '100%'
+			});
+
+			this.fields.show(new FieldPreviewView({el: this.ui.fields, collection: fields, page: page, image: this.ui.image}));
+		}
+
+	});
+
+
+}).call(this);

templates/admin/pdfformfiller/page/preview.html

@@ -3,12 +3,54 @@
 {% load admin_urls %}
 
 {% block extrahead %}{{ block.super }}
-{{ media }} media
+{{ media }}
 {% endblock %}
 {% block content %}
 
-<div id="content-main">
+<style type="text/css">
+	.clearfix:after { content: " "; display: block; height: 0; clear:both, visiblity: hidden; }
+	.clearfix { display: inline-block; _height: 1%; clear: both; }
+	.clearfix { display: block; clear: both; }
+	#pff { max-width: 100%; }
 
-	<img src="{{ page.image.url }}" style="max-width:100%"/>
+	.pff-field {
+		text-indent: -9999px;
+		white-space: nowrap;
+	}
+	.pff-field:hover {
+		width: auto !;
+		height: auto !;
+		text-indent: 0;
+	}
+
+	.pff-field-t {
+		background: rgba(0,255,0,0.2);
+	}
+
+	.pff-field-b {
+		background: rgba(0,0,255,0.2);
+	}
+</style>
+
+<script type="text/javascript">
+$(function($) {
+
+
+		var page = new PDFFormFiller.Page(),
+			preview = new PDFFormFiller.PagePreviewView({
+				el: $('#pff'),
+				model: page
+		});
+
+		page.url = '{% url "pdfformfiller_api_page_detail" id=page.id %}';
+		page.fetch();
+
+		window.page = page;
+		window.preview = preview;
+	})
+</script>
+
+<div id="content-main">
+	<div id="pff"></div>
 </div>
 {% endblock %}