django-pdfformfiller/static/js/pdfformfiller/pdfformfiller.js

/*global Backbone, Marionette, _ */
(function () {
	'use strict';

	var root = this,
		PDFFormFiller,
		PagePreviewView,
		FieldItemPreviewView,
		FieldPreviewView,
		Document,
		Page,
		Field,
		PageCollection,
		FieldCollection,
		FieldData,
		FieldDataCollection,

		DocumentView;

	if (typeof exports !== 'undefined') {
		PDFFormFiller = exports;
	} else {
		PDFFormFiller = root.PDFFormFiller = {};
	}

	Field = PDFFormFiller.Field = Backbone.Model.extend({});

	FieldCollection = PDFFormFiller.FieldCollection = Backbone.Collection.extend({
		model: Field
	});

	FieldData = PDFFormFiller.FieldData = Backbone.Model.extend({});

	FieldDataCollection = PDFFormFiller.FieldDataCollection = Backbone.Collection.extend({
		model: FieldData
	});

	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;

			return Backbone.Model.prototype.fetch.apply(this, arguments).then(function () {
				var model = self;
				// Auto-fetch the fields collection
				if (typeof model.get('fields') !== 'undefined') {
					return model.get('fields').fetch();
				}
			});
		},
	});

	PageCollection = PDFFormFiller.PageCollection = Backbone.Collection.extend({
		model: Page
	});

	Document = PDFFormFiller.Document = Backbone.Model.extend({
		initialize: function (options) {
			console.log(options);

			if (typeof options.pages === 'undefined') {
				this.pages = new PageCollection();
				this.pages.url = this.url + '../page/';
			}
		},

		getPage: function (page_num) {
			var page_ids = this.get('page_ids'),
				page_id = page_ids[page_num],
				page = this.pages.findWhere({id: page_id}),
				defer = new $.Deferred();

			if (typeof page === 'undefined') {
				page = new Page();
				page.url = '/formfiller/api/page/' + page_id + '/';
				this.pages.add(page);
				page.fetch()
					.then(function () {
						return defer.resolve(page);
					});
			} else {
				defer.resolve(page);
				return defer.promise();
			}

			return defer.promise();
		}
	});


	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}));
		}

	});

	DocumentView = PDFFormFiller.DocumentView = Marionette.Layout.extend({
		template: _.template('<div class="buttons"><a class="prev" href="#">prev</a><a href="#">next</a></div><div class="editor"></div>'),
		regions: {
			buttons: '.buttons',
			editor: '.editor'
		},

		ui:  {
			next: ':contains("next")',
			prev: ':contains("prev")'
		},

		initialize: function (options) {
			console.log(this.ui.next);
		}

	});

}).call(this);