135 lines
3 KiB
JavaScript
135 lines
3 KiB
JavaScript
/*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);
|