mirror of
https://github.com/lubuntu-team/lubuntu.me.git
synced 2025-02-23 16:21:07 +00:00
1525 lines
28 KiB
JavaScript
1525 lines
28 KiB
JavaScript
|
(function($) {
|
|||
|
|
|
|||
|
|
smuzform.App = {
|
|||
|
|
Models: {},
|
|||
|
|
Collections: {},
|
|||
|
|
Views: {},
|
|||
|
|
Dispatcher: _.clone(Backbone.Events),
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
smuzform.App.isNewForm = function() {
|
|||
|
|
|
|||
|
|
return true;
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
function smuzform_deentitize_str( str ) {
|
|||
|
|
var ret = str.replace(/>/g, '>');
|
|||
|
|
ret = ret.replace(/</g, '<');
|
|||
|
|
ret = ret.replace(/"/g, '"');
|
|||
|
|
ret = ret.replace(/'/g, "'");
|
|||
|
|
ret = ret.replace(/&/g, '&');
|
|||
|
|
return ret;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
smuzform.App.Models.FormSettings = Backbone.Model.extend({
|
|||
|
|
|
|||
|
|
initialize: function() { },
|
|||
|
|
|
|||
|
|
defaults: function() {
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
tmpid: '',
|
|||
|
|
fields: {},
|
|||
|
|
title: 'Form Name',
|
|||
|
|
description: 'Click me to change the description.',
|
|||
|
|
lang: 'en',
|
|||
|
|
labelPlacement: 'top',
|
|||
|
|
confirmationOption: 'text',
|
|||
|
|
textMessage: 'Thanks for submitting your information',
|
|||
|
|
redirectUrl: '',
|
|||
|
|
captcha: false,
|
|||
|
|
noOfEntries: '',
|
|||
|
|
onlySingleIP: false,
|
|||
|
|
formTimer: false,
|
|||
|
|
formStartTime: null,
|
|||
|
|
formEndTime: null,
|
|||
|
|
theme: {},
|
|||
|
|
extraData: {},
|
|||
|
|
confirmationEmailToUser: false,
|
|||
|
|
emailAddressField: '',
|
|||
|
|
replyToEmail: '',
|
|||
|
|
submitBtn: true,
|
|||
|
|
submitBtnText: 'Submit',
|
|||
|
|
submitBtnType: 'normal',
|
|||
|
|
errorMessages: {},
|
|||
|
|
style: {},
|
|||
|
|
mailchimpAddOnData: {},
|
|||
|
|
addOnData: []
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
url: ajaxurl+'?action=smuzform_api&nonce='+smuzform.form_model_nonce
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var Field = Backbone.Model.extend({
|
|||
|
|
|
|||
|
|
validate: function( attr ) {
|
|||
|
|
|
|||
|
|
if ( attr.type === undefined )
|
|||
|
|
return 'Set Field Type';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initialize: function() {
|
|||
|
|
|
|||
|
|
this.on( 'invalid', function( model, error ) {
|
|||
|
|
|
|||
|
|
console.log( error );
|
|||
|
|
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
this.on( 'change:label', function( model ) {
|
|||
|
|
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
defaults: function() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
label: 'Untitled Label',
|
|||
|
|
|
|||
|
|
type: undefined,
|
|||
|
|
|
|||
|
|
size: 'medium',
|
|||
|
|
|
|||
|
|
required: false,
|
|||
|
|
|
|||
|
|
noDuplicates: false,
|
|||
|
|
|
|||
|
|
visibility: true,
|
|||
|
|
|
|||
|
|
labelVisible: true,
|
|||
|
|
|
|||
|
|
rangeMin: '',
|
|||
|
|
|
|||
|
|
rangeMax: '',
|
|||
|
|
|
|||
|
|
rangeFormat: 'char',
|
|||
|
|
|
|||
|
|
preValue: '',
|
|||
|
|
|
|||
|
|
helpText: '',
|
|||
|
|
|
|||
|
|
cssClasses: '',
|
|||
|
|
|
|||
|
|
placeholderText: '',
|
|||
|
|
|
|||
|
|
radios: false,
|
|||
|
|
|
|||
|
|
checkboxes: false,
|
|||
|
|
|
|||
|
|
textAreaRows: 10,
|
|||
|
|
|
|||
|
|
textAreaCols: 60,
|
|||
|
|
|
|||
|
|
cssID: 'wpfieldid',
|
|||
|
|
|
|||
|
|
choices: ['First Choice','Second Choice', 'Third Choice'],
|
|||
|
|
|
|||
|
|
selectedChoice: null,
|
|||
|
|
|
|||
|
|
checkboxSelectedChoice: [],
|
|||
|
|
|
|||
|
|
sectionTitle: 'Section Title',
|
|||
|
|
|
|||
|
|
sectionDescription: 'Click me to change the description',
|
|||
|
|
|
|||
|
|
extraData: null,
|
|||
|
|
|
|||
|
|
ruleEnabled: false,
|
|||
|
|
|
|||
|
|
rules: {
|
|||
|
|
field: '',
|
|||
|
|
operator: 'is',
|
|||
|
|
cmpValue: '',
|
|||
|
|
action: 'show'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
statements: {},
|
|||
|
|
|
|||
|
|
columns: {},
|
|||
|
|
|
|||
|
|
file: {
|
|||
|
|
|
|||
|
|
allowed: [ 'jpg','jpeg','png','gif','pdf','doc','docx','key','ppt','pptx','pps','ppsx','odt','xls','xlsx','zip','mp3','m4a','ogg','wav','mp4','m4v','wmv','avi','mpg','ogv','3gp','3g2' ],
|
|||
|
|
maxSize: 2
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
login: {}
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var FieldsCollection = Backbone.Collection.extend({
|
|||
|
|
|
|||
|
|
model: Field,
|
|||
|
|
|
|||
|
|
initialize: function() {
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
|
|||
|
|
smuzform.App.Views.NavBar = Backbone.View.extend({
|
|||
|
|
|
|||
|
|
template: _.template( $('#formNavBar-template').html() ),
|
|||
|
|
|
|||
|
|
el: $('#navBarActionsCont'),
|
|||
|
|
|
|||
|
|
events: {
|
|||
|
|
|
|||
|
|
'click #formExportAction': 'onClickFormExportAction',
|
|||
|
|
'click #formEntriesAction': 'onClickFormEntriesAction',
|
|||
|
|
'click #formNotificationAction': 'onClickFormNotificationAction',
|
|||
|
|
'click #formStyleAction': 'onClickFormStyleAction'
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initialize: function( model ) {
|
|||
|
|
|
|||
|
|
this.model = model;
|
|||
|
|
|
|||
|
|
this.model.on( 'change', this.render, this );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render: function() {
|
|||
|
|
|
|||
|
|
this.$el.html( this.template( this.model.attributes ) );
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onClickFormExportAction: function(e) {
|
|||
|
|
|
|||
|
|
if ( ! FormPreviewModel.get('id') ) {
|
|||
|
|
|
|||
|
|
alert('Please create a form first. Click the create form button below');
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//this.render();
|
|||
|
|
|
|||
|
|
FormPreviewModel.set( 'tmpid', FormPreviewModel.get('id') );
|
|||
|
|
|
|||
|
|
$('#exportModal').modal('show');
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onClickFormEntriesAction: function(e) {
|
|||
|
|
|
|||
|
|
var redirectLink = smuzform.admin_url+'admin.php?page=smuz-forms-entry&form_id='+FormPreviewModel.get('id');
|
|||
|
|
|
|||
|
|
if ( ! FormPreviewModel.get('id') )
|
|||
|
|
alert('Please create a form first. Click the create form button below');
|
|||
|
|
else
|
|||
|
|
window.location = redirectLink;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onClickFormNotificationAction: function(e) {
|
|||
|
|
|
|||
|
|
var redirectLink = smuzform.admin_url+'admin.php?page=smuz-forms-notifications&form_id='+FormPreviewModel.get('id');
|
|||
|
|
|
|||
|
|
if ( ! FormPreviewModel.get('id') )
|
|||
|
|
alert('Please create a form first. Click the create form button below');
|
|||
|
|
else
|
|||
|
|
window.location = redirectLink;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onClickFormStyleAction: function(e) {
|
|||
|
|
|
|||
|
|
var redirectLink = smuzform.admin_url+'admin.php?page=smuz-forms-style&form_id='+FormPreviewModel.get('id');
|
|||
|
|
|
|||
|
|
if ( ! FormPreviewModel.get('id') )
|
|||
|
|
alert('Please create a form first. Click the create form button below');
|
|||
|
|
else
|
|||
|
|
window.location = redirectLink;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
smuzform.App.Views.FormPreview = Backbone.View.extend({
|
|||
|
|
|
|||
|
|
template: _.template( $('#formPreview-template').html() ),
|
|||
|
|
|
|||
|
|
el: $('#formPreviewCont'),
|
|||
|
|
|
|||
|
|
initialize: function( model ) {
|
|||
|
|
|
|||
|
|
this.model = model;
|
|||
|
|
|
|||
|
|
this.model.on( 'change', this.render, this );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render: function() {
|
|||
|
|
|
|||
|
|
this.$el.html( this.template( this.model.attributes ) );
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Views.FormSettings = Backbone.View.extend({
|
|||
|
|
|
|||
|
|
template: _.template( $('#formSettings-template').html() ),
|
|||
|
|
|
|||
|
|
el: $('#formSettingsCont'),
|
|||
|
|
|
|||
|
|
initialize: function() {
|
|||
|
|
|
|||
|
|
this.model.on( 'change', this.render, this );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render: function() {
|
|||
|
|
|
|||
|
|
this.$el.html( this.template( this.model.attributes ) );
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
events: {
|
|||
|
|
|
|||
|
|
'change #formTitle': 'changeTitle',
|
|||
|
|
'change #formDescription': 'changeDescription',
|
|||
|
|
'change #formLang': 'changeLanguage',
|
|||
|
|
'change #formLabelPlacement': 'changeLabelPlacement',
|
|||
|
|
'change input[name=optConfOption]': 'changeConfirmationOption',
|
|||
|
|
'change #formCaptcha': 'changeCaptcha',
|
|||
|
|
'change #formSubmitBtnText': 'changeSubmitBtnText',
|
|||
|
|
'change #formRedirectUrl': 'changeRedirectUrl',
|
|||
|
|
'change #formTextMessage': 'changeTextMessage'
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeTitle: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'title', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeDescription: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'description', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeLanguage: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'lang', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeLabelPlacement: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'labelPlacement', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeConfirmationOption: function(e) {
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).val() === 'text' )
|
|||
|
|
this.model.set( 'confirmationOption', 'text' );
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).val() === 'redirect' )
|
|||
|
|
this.model.set( 'confirmationOption', 'redirect' );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCaptcha: function(e) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') )
|
|||
|
|
this.model.set( 'captcha', true );
|
|||
|
|
else
|
|||
|
|
this.model.set( 'captcha', false );
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeSubmitBtnText: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'submitBtnText', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeRedirectUrl: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'redirectUrl', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeTextMessage: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'textMessage', $(e.currentTarget).val() );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setModel: function(model) { this.model = model; }
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var FieldsSettingsView = Backbone.View.extend({
|
|||
|
|
|
|||
|
|
template: _.template( $('#fieldSettings-template').html() ),
|
|||
|
|
|
|||
|
|
el: $('#fieldSettingsCont'),
|
|||
|
|
|
|||
|
|
callCounter: 0,
|
|||
|
|
|
|||
|
|
initialize: function() {
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
events: {
|
|||
|
|
|
|||
|
|
'change #fieldLabel': 'changeLabel',
|
|||
|
|
'change #fieldPlaceholder': 'changePlaceholder',
|
|||
|
|
'change #fieldValue': 'changeValue',
|
|||
|
|
'change .fieldOptChoice': 'changeChoice',
|
|||
|
|
'click .optChoiceRemove': 'removeChoice',
|
|||
|
|
'click #addNewChoice': 'addChoice',
|
|||
|
|
'click .optChoiceSelect': 'toggleChoice',
|
|||
|
|
'change #optionRequired': 'changeRequired',
|
|||
|
|
'change input[name=fieldOptionRadio]': 'changeVisibility',
|
|||
|
|
'change #fieldSectionTitle': 'changeSectionTitle',
|
|||
|
|
'change #fieldSectionDescription': 'changeSectionDescription',
|
|||
|
|
'change #fieldSize': 'changeSize',
|
|||
|
|
'change #fieldFileMaxSize': 'changeFileMaxSize',
|
|||
|
|
'change #fieldFileAllowed': 'changeFileAllowed',
|
|||
|
|
'change #fieldMinLength': 'changeFieldMinLength',
|
|||
|
|
'change #fieldMaxLength': 'changeFieldMaxLength',
|
|||
|
|
'change #enableConditionalLogic': 'changeEnableRule',
|
|||
|
|
'change #ruleFields': 'changeRuleField',
|
|||
|
|
'change #ruleFieldAction': 'changeRuleFieldAction',
|
|||
|
|
'change #ruleFieldLogicValue': 'changeRuleFieldLogicValue',
|
|||
|
|
'change #ruleFieldOperator': 'changeRuleFieldOperator',
|
|||
|
|
'change #optionNoDuplicate': 'changeNoDuplicates',
|
|||
|
|
'change #fieldCssClasses': 'changeCssClasses',
|
|||
|
|
|
|||
|
|
/** events for custom text **/
|
|||
|
|
|
|||
|
|
'change #customTextTag': 'changeCustomTextTag',
|
|||
|
|
'change #customTextColor': 'changeCustomTextColor',
|
|||
|
|
'change #customTextFontSize': 'changeCustomTextFontSize',
|
|||
|
|
'click #customTextBold': 'changeCustomTextBold',
|
|||
|
|
'change #customTextValue': 'changeCustomTextValue',
|
|||
|
|
|
|||
|
|
/** events for custom image **/
|
|||
|
|
|
|||
|
|
'change #customImageUrl': 'changeCustomImageUrl',
|
|||
|
|
'change #customImageWidth': 'changeCustomImageWidth',
|
|||
|
|
'change #customImageHeight': 'changeCustomImageHeight',
|
|||
|
|
|
|||
|
|
/** events for custom html **/
|
|||
|
|
|
|||
|
|
'change #customHtmlSource': 'changeCustomHtmlSource'
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render: function() {
|
|||
|
|
|
|||
|
|
if ( this.model )
|
|||
|
|
this.$el.html( this.template( this.model.attributes ) );
|
|||
|
|
else
|
|||
|
|
this.$el.html( $('#nofieldSelected-template').html() );
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeRuleField: function(e) {
|
|||
|
|
|
|||
|
|
var value = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( value === '' ) return;
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'rules' ) );
|
|||
|
|
|
|||
|
|
temp.field = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'rules', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeRuleFieldOperator: function(e) {
|
|||
|
|
|
|||
|
|
var value = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( value === '' ) return;
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'rules' ) );
|
|||
|
|
|
|||
|
|
temp.operator = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'rules', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeRuleFieldAction: function(e) {
|
|||
|
|
|
|||
|
|
var value = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( value === '' ) return;
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'rules' ) );
|
|||
|
|
|
|||
|
|
temp.action = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'rules', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeRuleFieldLogicValue: function(e) {
|
|||
|
|
|
|||
|
|
var value = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( value === '' ) return;
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'rules' ) );
|
|||
|
|
|
|||
|
|
temp.cmpValue = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'rules', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeEnableRule: function(e) {
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') )
|
|||
|
|
this.model.set( 'ruleEnabled', true );
|
|||
|
|
else
|
|||
|
|
this.model.set( 'ruleEnabled', false );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeSize: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'size', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeVisibility: function(e) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).val() === 'visible' )
|
|||
|
|
this.model.set( 'labelVisible', true );
|
|||
|
|
else
|
|||
|
|
this.model.set( 'labelVisible', false );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeRequired: function(e) {
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') )
|
|||
|
|
this.model.set( 'required', true );
|
|||
|
|
else
|
|||
|
|
this.model.set( 'required', false );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeNoDuplicates: function(e) {
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') )
|
|||
|
|
this.model.set( 'noDuplicates', true );
|
|||
|
|
else
|
|||
|
|
this.model.set('noDuplicates', false );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeLabel: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'label', $('#fieldLabel').val() );
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changePlaceholder: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'placeholderText', $('#fieldPlaceholder').val() );
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeValue: function(e) {
|
|||
|
|
|
|||
|
|
var value = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( this.model.get('type') === 'date' ) {
|
|||
|
|
|
|||
|
|
if ( value !== '' ) {
|
|||
|
|
|
|||
|
|
var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
|
|||
|
|
|
|||
|
|
if ( pattern.test( value ) ) {
|
|||
|
|
|
|||
|
|
var arr = value.split('/');
|
|||
|
|
|
|||
|
|
var temp = { day: arr[0], month: arr[1], year: arr[2] }
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.model.set( 'preValue', value );
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeChoice: function(e) {
|
|||
|
|
|
|||
|
|
var choices = this.model.get( 'choices' );
|
|||
|
|
|
|||
|
|
choices = _.clone( choices );
|
|||
|
|
|
|||
|
|
var choiceText = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
var index = $(e.currentTarget).data('index');
|
|||
|
|
|
|||
|
|
index = parseInt( index );
|
|||
|
|
|
|||
|
|
choices[index] = choiceText;
|
|||
|
|
|
|||
|
|
this.model.set( 'choices', choices );
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
removeChoice: function(e) {
|
|||
|
|
|
|||
|
|
var choices = this.model.get( 'choices' );
|
|||
|
|
|
|||
|
|
choices = _.clone( choices );
|
|||
|
|
|
|||
|
|
var index = $(e.currentTarget).data('index');
|
|||
|
|
|
|||
|
|
index = parseInt( index );
|
|||
|
|
|
|||
|
|
choices.splice( index, 1 );
|
|||
|
|
|
|||
|
|
this.model.set( 'choices', choices );
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView.render();
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
addChoice: function(e) {
|
|||
|
|
|
|||
|
|
var choices = this.model.get( 'choices' );
|
|||
|
|
|
|||
|
|
choices = _.clone( choices );
|
|||
|
|
|
|||
|
|
choices.push('');
|
|||
|
|
|
|||
|
|
this.model.set( 'choices', choices );
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView.render();
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
toggleChoice: function(e) {
|
|||
|
|
|
|||
|
|
var index = $(e.currentTarget).data('index');
|
|||
|
|
|
|||
|
|
var selectedIndex = this.model.get( 'selectedChoice' );
|
|||
|
|
|
|||
|
|
selectedIndex = parseInt( selectedIndex );
|
|||
|
|
|
|||
|
|
index = parseInt( index );
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') ) {
|
|||
|
|
|
|||
|
|
if ( selectedIndex === index ) {
|
|||
|
|
|
|||
|
|
$(e.currentTarget).prop( 'checked', false );
|
|||
|
|
|
|||
|
|
this.model.set( 'selectedChoice', null );
|
|||
|
|
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') )
|
|||
|
|
this.model.set( 'selectedChoice', index );
|
|||
|
|
else
|
|||
|
|
this.model.set( 'selectedChoice', null );
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeSectionTitle: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'sectionTitle', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeSectionDescription: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'sectionDescription', $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeFileAllowed: function(e) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
var temp = this.model.get( 'file' );
|
|||
|
|
|
|||
|
|
var types = $(e.currentTarget).val().split(',');
|
|||
|
|
|
|||
|
|
temp.allowed = types;
|
|||
|
|
|
|||
|
|
this.model.set( 'file', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeFileMaxSize: function(e) {
|
|||
|
|
|
|||
|
|
var temp = this.model.get( 'file' );
|
|||
|
|
|
|||
|
|
var size = parseInt( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.maxSize = size;
|
|||
|
|
|
|||
|
|
this.model.set( 'file', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeFieldMinLength: function(e) {
|
|||
|
|
|
|||
|
|
var minLength = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( ! minLength === '' )
|
|||
|
|
minLength = parseInt(minLength);
|
|||
|
|
|
|||
|
|
this.model.set( 'rangeMin', minLength );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeFieldMaxLength: function(e) {
|
|||
|
|
|
|||
|
|
var maxLength = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
if ( ! maxLength === '' )
|
|||
|
|
maxLength = parseInt(maxLength);
|
|||
|
|
|
|||
|
|
this.model.set( 'rangeMax', maxLength );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
processCustomTextHtml: function() {
|
|||
|
|
|
|||
|
|
var text = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = '';
|
|||
|
|
|
|||
|
|
if ( text.bold )
|
|||
|
|
text.bold = 'bold';
|
|||
|
|
else
|
|||
|
|
text.bold = 'normal';
|
|||
|
|
|
|||
|
|
value = $('<div>').html( $( '<'+text.tag+'>' ).text( text.html ).css({
|
|||
|
|
'font-size': text.size+'px',
|
|||
|
|
'font-weight': text.bold,
|
|||
|
|
'color': text.color
|
|||
|
|
}) );
|
|||
|
|
|
|||
|
|
value = value.html();
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
temp.readyHtml = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCustomTextValue: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.html = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomTextHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCustomTextColor: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.color = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomTextHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCustomTextTag: function(e) {
|
|||
|
|
|
|||
|
|
var temp = this.model.get( 'extraData' );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.tag = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomTextHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCustomTextFontSize: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.size = parseInt( value );
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomTextHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCustomTextBold: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = false;
|
|||
|
|
|
|||
|
|
if ( $(e.currentTarget).is(':checked') )
|
|||
|
|
value = true;
|
|||
|
|
|
|||
|
|
temp.bold = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomTextHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
processCustomImageHtml: function() {
|
|||
|
|
|
|||
|
|
var image = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = '';
|
|||
|
|
|
|||
|
|
value = $('<div>').html( $( '<img>' ).prop( 'src', image.imgUrl ).css({
|
|||
|
|
'width': image.width + 'px',
|
|||
|
|
'height': image.height + 'px'
|
|||
|
|
}) );
|
|||
|
|
|
|||
|
|
value = value.html();
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
temp.readyHtml = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
changeCustomImageUrl: function(e){
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.imgUrl = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomImageHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
changeCustomImageWidth: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.width = parseInt( value );
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomImageHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
changeCustomImageHeight: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = _.escape( $(e.currentTarget).val() );
|
|||
|
|
|
|||
|
|
temp.height = parseInt( value );
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
this.processCustomImageHtml();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCustomHtmlSource: function(e) {
|
|||
|
|
|
|||
|
|
var temp = _.clone( this.model.get( 'extraData' ) );
|
|||
|
|
|
|||
|
|
var value = $(e.currentTarget).val();
|
|||
|
|
|
|||
|
|
temp.readyHtml = value;
|
|||
|
|
|
|||
|
|
this.model.set( 'extraData', temp );
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
changeCssClasses: function(e) {
|
|||
|
|
|
|||
|
|
this.model.set( 'cssClasses', _.escape( $( e.currentTarget ).val() ) );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
destroy: function(){
|
|||
|
|
this.remove();
|
|||
|
|
this.unbind();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setModel: function(model) { this.model = model; }
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView = new FieldsSettingsView();
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCollectionView = Backbone.View.extend({
|
|||
|
|
|
|||
|
|
template: _.template( $('#fieldsView-template').html() ),
|
|||
|
|
|
|||
|
|
tagName: 'li',
|
|||
|
|
|
|||
|
|
settingsView: null,
|
|||
|
|
|
|||
|
|
initialize: function() {
|
|||
|
|
|
|||
|
|
this.model.on( 'change', this.render, this );
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
events: {
|
|||
|
|
|
|||
|
|
'click': 'openSettingsPanel',
|
|||
|
|
'click .removeMeField': 'removeField'
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
render: function() {
|
|||
|
|
|
|||
|
|
this.$el.html( this.template( this.model.attributes ) );
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
openSettingsPanel: function(e) {
|
|||
|
|
|
|||
|
|
var selectedModel = FieldsListView.getSelectedModel();
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView.setModel( this.model ) ;
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView.render();
|
|||
|
|
|
|||
|
|
var tab = 'tab-field-settings';
|
|||
|
|
|
|||
|
|
$('.nav-tabs a[href="#' + tab + '"]').delay(200).tab('show');
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
removeField: function(e) {
|
|||
|
|
|
|||
|
|
if ( ! confirm( "Are you sure you want to remove this field? All data associated with it will be lost." ) )
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.remove( this.model );
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView.setModel( null );
|
|||
|
|
|
|||
|
|
smuzform.App.Views.SettingsView.render();
|
|||
|
|
|
|||
|
|
e.stopImmediatePropagation();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol = new FieldsCollection;
|
|||
|
|
|
|||
|
|
$('.singleText button').click(function() {
|
|||
|
|
|
|||
|
|
var TextFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'singletext',
|
|||
|
|
label: 'Untitled',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( TextFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.textArea button').click(function() {
|
|||
|
|
|
|||
|
|
var TextAreaFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'textarea',
|
|||
|
|
label: 'Untitled',
|
|||
|
|
size: 'large',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( TextAreaFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.radioButtons button').click(function() {
|
|||
|
|
|
|||
|
|
var RadioFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'radio',
|
|||
|
|
label: 'Untitled',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( RadioFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.checkboxes button').click(function() {
|
|||
|
|
|
|||
|
|
var CheckboxFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'checkbox',
|
|||
|
|
label: 'Untitled',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( CheckboxFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.dropdown button').click(function() {
|
|||
|
|
|
|||
|
|
var SelectFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'dropdown',
|
|||
|
|
label: 'Untitled',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( SelectFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.lineBreak button').click(function() {
|
|||
|
|
|
|||
|
|
var LinebreakFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'linebreak',
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( LinebreakFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.sectionBreak button').click(function() {
|
|||
|
|
|
|||
|
|
var SectionbreakFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'sectionbreak',
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( SectionbreakFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.singleNumber button').click(function() {
|
|||
|
|
|
|||
|
|
var NumberFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'number',
|
|||
|
|
label: 'Number',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( NumberFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.fileUpload button').click(function() {
|
|||
|
|
|
|||
|
|
var FileUploadFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'fileupload',
|
|||
|
|
label: 'Upload File',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( FileUploadFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.name button').click(function() {
|
|||
|
|
|
|||
|
|
var NameFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'name',
|
|||
|
|
label: 'Name',
|
|||
|
|
extraData: { firstName: '', LastName: '' },
|
|||
|
|
size: 'large',
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( NameFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.email button').click(function() {
|
|||
|
|
|
|||
|
|
var EmailFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'email',
|
|||
|
|
label: 'Email',
|
|||
|
|
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( EmailFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.website button').click(function() {
|
|||
|
|
|
|||
|
|
var WebsiteFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'website',
|
|||
|
|
label: 'Link',
|
|||
|
|
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( WebsiteFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.date button').click(function() {
|
|||
|
|
|
|||
|
|
var DateFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'date',
|
|||
|
|
label: 'Date',
|
|||
|
|
extraData: { day: 16, month: 05, year: 2016 },
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
size: 'large',
|
|||
|
|
preValue: '16/05/2016'
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( DateFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.phone button').click(function() {
|
|||
|
|
|
|||
|
|
var PhoneFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'phone',
|
|||
|
|
label: 'Phone Number',
|
|||
|
|
extraData: { },
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
size: 'medium'
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( PhoneFieldModel );
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.address button').click(function() {
|
|||
|
|
|
|||
|
|
var addressData = {
|
|||
|
|
|
|||
|
|
firstAddress: '',
|
|||
|
|
|
|||
|
|
secondAddress: '',
|
|||
|
|
|
|||
|
|
city: '',
|
|||
|
|
|
|||
|
|
state: '',
|
|||
|
|
|
|||
|
|
code: '',
|
|||
|
|
|
|||
|
|
country: ''
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var AddressFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'address',
|
|||
|
|
label: 'Address',
|
|||
|
|
extraData: addressData,
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
size: 'large'
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( AddressFieldModel );
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.likert button').click(function() {
|
|||
|
|
|
|||
|
|
var likertData = {};
|
|||
|
|
|
|||
|
|
var LikertFieldModel = new Field({
|
|||
|
|
|
|||
|
|
type: 'likert',
|
|||
|
|
extraData: likertData,
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
alert( 'The field is in development. Will be available in next version.' );
|
|||
|
|
|
|||
|
|
//smuzform.App.Collections.FieldsCol.add( LikertFieldModel );
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.customText button').click(function() {
|
|||
|
|
|
|||
|
|
var textData = {
|
|||
|
|
html: 'Change me',
|
|||
|
|
readyHtml: '<p style="font-size: 14px;color: #000;font-weight: normal">Change Me</p>',
|
|||
|
|
tag: 'p',
|
|||
|
|
size: 14,
|
|||
|
|
color: '#000000',
|
|||
|
|
bold: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var TextModel = new Field( {
|
|||
|
|
|
|||
|
|
type: 'customText',
|
|||
|
|
label: 'Custom Text',
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
extraData: textData
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( TextModel );
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.customImage button').click(function() {
|
|||
|
|
|
|||
|
|
var imageData = {
|
|||
|
|
imgUrl: '',
|
|||
|
|
readyHtml: '<img src="" width="300" height="150" />',
|
|||
|
|
width: 300,
|
|||
|
|
height: 150
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var ImageModel = new Field( {
|
|||
|
|
|
|||
|
|
type: 'customImage',
|
|||
|
|
label: 'Custom Image',
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
extraData: imageData
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( ImageModel );
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.customHtml button').click(function() {
|
|||
|
|
|
|||
|
|
var htmlData = {
|
|||
|
|
readyHtml: 'Edit Me'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var HtmlModel = new Field( {
|
|||
|
|
|
|||
|
|
type: 'customHtml',
|
|||
|
|
label: 'Custom Html',
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
extraData: htmlData
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( HtmlModel );
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('.pageBreak button').click(function() {
|
|||
|
|
|
|||
|
|
var pageBreakData = {
|
|||
|
|
navText: ''
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var PageBreakModel = new Field( {
|
|||
|
|
label: 'Page Break',
|
|||
|
|
type: 'pagebreak',
|
|||
|
|
label: 'Page Break',
|
|||
|
|
cssID: 'wpformfield'+Math.floor((Math.random() * 200000) + 100),
|
|||
|
|
extraData: pageBreakData
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.add( PageBreakModel );
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var FieldsListView = new Backbone.CollectionView({
|
|||
|
|
|
|||
|
|
el: $('#formFieldsCont'),
|
|||
|
|
|
|||
|
|
sortable: true,
|
|||
|
|
|
|||
|
|
modelView: smuzform.App.Collections.FieldsCollectionView,
|
|||
|
|
|
|||
|
|
collection: smuzform.App.Collections.FieldsCol,
|
|||
|
|
|
|||
|
|
emptyListCaption: '<div id="noFieldsMessage" class="alert alert-warning"><p></p></div>',
|
|||
|
|
|
|||
|
|
reuseModelViews: false,
|
|||
|
|
|
|||
|
|
selectable: true
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var FormPreviewModel = new smuzform.App.Models.FormSettings();
|
|||
|
|
|
|||
|
|
var FormPreviewView = new smuzform.App.Views.FormPreview( FormPreviewModel );
|
|||
|
|
|
|||
|
|
var FormSettingsView = new smuzform.App.Views.FormSettings( {model: FormPreviewModel} );
|
|||
|
|
|
|||
|
|
$('#fetchForm').click(function(e) {
|
|||
|
|
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
FormPreviewModel.fetch({
|
|||
|
|
data: { formID: '781' }
|
|||
|
|
}).success(function(){
|
|||
|
|
FormPreviewModel.set('id', '781');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$('#saveForm').click(function(e) {
|
|||
|
|
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
FormPreviewModel.set( 'fields', smuzform.App.Collections.FieldsCol.models );
|
|||
|
|
|
|||
|
|
$('#serverModalCont p').text('Saving Form...');
|
|||
|
|
|
|||
|
|
$('#serverModalCont').show();
|
|||
|
|
|
|||
|
|
FormPreviewModel.save().success( function( response ) {
|
|||
|
|
|
|||
|
|
var id = response.formID;
|
|||
|
|
|
|||
|
|
var relative_url = 'admin.php?page=smuz-forms&form_id='+id;
|
|||
|
|
|
|||
|
|
window.history.replaceState( null, null, relative_url );
|
|||
|
|
|
|||
|
|
FormPreviewModel.set('id', id);
|
|||
|
|
|
|||
|
|
FormPreviewModel.set('tmpid', id);
|
|||
|
|
|
|||
|
|
if ( response.action === 'create' )
|
|||
|
|
$('#saveForm').text('Save Form');
|
|||
|
|
|
|||
|
|
}).always( function() {
|
|||
|
|
|
|||
|
|
$('#serverModalCont p').text('');
|
|||
|
|
|
|||
|
|
$('#serverModalCont').hide();
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if ( window.smuz_formid !== undefined ) {
|
|||
|
|
|
|||
|
|
FormPreviewModel.set( 'tmpid', window.smuz_formid );
|
|||
|
|
|
|||
|
|
$('#serverModalCont p').text('Loading Form...');
|
|||
|
|
|
|||
|
|
$('#serverModalCont').show();
|
|||
|
|
|
|||
|
|
FormPreviewModel.fetch({
|
|||
|
|
|
|||
|
|
data: { formID: window.smuz_formid }
|
|||
|
|
|
|||
|
|
}).success(function(){
|
|||
|
|
|
|||
|
|
FormPreviewModel.set('id', window.smuz_formid );
|
|||
|
|
|
|||
|
|
var fields = FormPreviewModel.get('fields');
|
|||
|
|
|
|||
|
|
_.each( fields, function( field, index ) {
|
|||
|
|
smuzform.App.Collections.FieldsCol.add(field);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
smuzform.App.Collections.FieldsCol.on( 'add', function( model ) {
|
|||
|
|
$('html, body').animate({
|
|||
|
|
scrollTop: $('#saveForm').offset().top - 200
|
|||
|
|
}, 200);
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
}).always(function() {
|
|||
|
|
|
|||
|
|
$('#serverModalCont').delay(100).hide();
|
|||
|
|
|
|||
|
|
$('#serverModalCont p').delay(100).text('');
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
FormPreviewView.render();
|
|||
|
|
|
|||
|
|
FormSettingsView.render( FormPreviewModel );
|
|||
|
|
|
|||
|
|
FieldsListView.render();
|
|||
|
|
|
|||
|
|
var FormNavBarView = new smuzform.App.Views.NavBar( FormPreviewModel );
|
|||
|
|
|
|||
|
|
FormNavBarView.render();
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).on( 'submit', '#fieldSettingsForm', function() {
|
|||
|
|
return false;
|
|||
|
|
} );
|
|||
|
|
$(document).on( 'submit', '#formSettingsForm', function() {
|
|||
|
|
return false;
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
$(document).ready(function(){$('.toplevel_page_smuz-forms-main').addClass('current');})
|
|||
|
|
|
|||
|
|
})(jQuery);
|