File: D:/HostingSpaces/PvdBoogaard/indoorski.nl/backup/oude-site/cms/modules/form/javascript/edit.form.js
;(function($) {
var
$ = jQuery,
lang = jFrame.registry.get('lang'),
form = $('#form-canvas'),
pageTitle = $('#page-title-form-name'),
canvas = $('#canvas > ul'),
canvasEmpty = $('#canvas-empty'),
loadingWidgets = $('#loading-widgets'),
formFields = $('#tab-form-fields li'),
fieldTemplate = $('#field-template'),
widgetTitles = $('.form-element .ui-draggable-handle'),
templates = $('#form-element-templates > ol > li'),
emailFeedback = $('#email-feedback'),
cancelBtn = $('button.cancel'),
emailFeedbackToContainer = $('#email-feedback-to-container');
// example field initialization
form.find('[name*="name"]').exampleField().init({ onBeforeSubmit : false });
form.find('[name*="description"]').exampleField().init();
// ajax form
form.ajaxForm({
dataType : 'json',
success : function(json) {
if (json.success) {
if (json.redirect) {
window.location = json.redirect;
} else {
$('#MainMessage').successMessage(json.message);
}
} else {
$('#MainMessage').errorMessage(json.message, json.messages);
for (var i in json.errors) {
var
tabs = $('.form-menu'),
field = $('[name="' + i + '"]'),
tabField = tabs.find(field.selector);
// if a field was found in the tabs
if (tabField.length) {
tabs.tabs('select', 1);
}
// if just a field was found, focus it
if (field.length) {
field.focus();
}
// we are only doing this for the first field
break;
}
}
$('.example-field[name*="description"]').removeAttr('disabled');
}
});
// toggle the email feedback option depending on the state of the checkbox
_toggleEmailFeedback();
// initialize the required fields
$('.form-element').each(function() {
_toggleRequired(this);
});
// set default values
$('#canvas .example-field').each(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('title'));
}
});
// initialize the tabs
$('.form-menu').tabs();
// detatch and float the left menu when scrolled past the window's bounds
$('.form-menu').float({
// it will be start scrolling and be positioned 20 pixes from the top of the screen
offsetTop : 20
});
// add a class to the form fields in the menu so that we
// can identify them after they are dragged onto the canvas
formFields.addClass('__widget_placeholder__');
// initialize the canvas state
_markEmpty();
// form feedback email toggling
emailFeedback.bind('click', _toggleEmailFeedback);
// draggable form elements
formFields.draggable({
connectToSortable : canvas.selector,
helper : function() {
var
src = $(this).css('background-image').replace(/url\(("|')?([^"]+)("|')?\)/i, '$2'),
text = $(this).text();
return $('#__template__form-element-drag-helper > div').template().parse({
img : '<img src="' + src + '" alt="' + text + '" />',
text : text
});
}
});
// droppable and sortable canvas
canvas.sortable({
handle : '.form-element-title',
placeholder : 'ui-sortable-placeholder',
axis : 'y',
delay : 100,
helper : function(e, ui) {
return $('#__template__form-element-sort-helper > div').template().parse();
}
});
// bind sorting events
canvas
.bind('sortstart', function(e, ui) {
ui.helper.find('p').text(ui.helper.text().replace('#{text}', ui.item.find('[name*="[label]"]:first').val()));
})
.bind('sortreceive', function(e, ui) {
var
type = ui.item.metadata().get('type'),
action = ui.item.metadata().get('action') || type;
// clear it before the widget is added for cosmetic reasons
_markEmpty();
// get the new widget's html and replace the placholder with it
$.getJSON('index.php?section=module&action=custom&module=form&moduleController=build&moduleAction=' + type, _addWidget);
return;
})
.bind('sortover', function(e, ui) {
_markEmpty();
})
.bind('sortdeactivate', function(e, ui) {
_markEmpty();
});
// duplicate form elements when duplicate buttons are clicked
$('.form-element-duplicate').live('click', function() {
var
widget = _getParentWidget(this),
type = widget.metadata().get('type');
// insert a placeholder to be replaced
// we have to give it some content or else it will not be displayed (but it's hidden anyways)
widget.after('<li class="__widget_placeholder__">_</li>');
// load it and replace the placeholder
$.getJSON('index.php?section=module&action=custom&module=form&moduleController=build&moduleAction=' + type, _addWidget);
return false;
});
// remove elements from canvas, live event
$('.form-element-remove').live('click', function() {
var formElement = $(this).closest('.form-element');
formElement.addClass('form-element-removing');
var con = confirm('Are you sure you want to remove ' + $(this).closest('.form-element').find('.form-element-title :input').val() + '?\n\nThis action cannot be undone.');
if (con) {
var
id = formElement.find('> :hidden:first').val();
formElement.remove();
_markEmpty();
} else {
formElement.removeClass('form-element-removing');
}
return false;
});
// when the required checkbox is clicked, toggle the required star in the title
$('[name$="[is_required]"]').live('click', function() {
_toggleRequired(_getParentWidget(this));
});
// minimizing form elements
$('.form-element-minimize').live('click', function() {
_minimize(this);
return false;
});
// maximizing form elements
$('.form-element-maximize').live('click', function() {
_maximize(this);
return false;
});
// when the cancel button is pressed, confirm, then delete the form
cancelBtn.bind('click', function() {
if (confirm(lang.editFormConfirmExit)) {
window.location = 'index.php?section=module&action=custom&module=form&moduleController=admin&moduleAction=index';
}
});
// uri browser
new IWPUrlBrowser($('#show-page-uri-browser'), $('#show-page-uri-browser').prev());
// when the URI Browser insert buttons are pressed, automatically check the show uri radio button
$('#InsertExternalImageButton, #urlbrowser-insert').live('click', function() {
$('#form-show-message').removeAttr('checked');
$('#form-show-page').attr('checked', 'checked');
});
/**
* Minimizes the form element container
*
* @param obj The button that was clicked
*
* @return object Parent form element
*/
function _minimize(obj)
{
$(obj)
.removeClass('form-element-minimize')
.addClass('form-element-maximize');
return _getParentWidget(obj).find('.form-element-content').hide();
}
/**
* Maximizes the form element container
*
* @param obj The button that was clicked
*
* @return object Parent form element
*/
function _maximize(obj)
{
$(obj)
.removeClass('form-element-maximize')
.addClass('form-element-minimize');
return _getParentWidget(obj).find('.form-element-content').show();
}
/**
* Returns the closest widget object of the passed child object.
*
* @param mixed ofThis The child object of the parent to retrieve. Can be a
* selector or object.
*/
function _getParentWidget(ofTHis)
{
var obj = $(ofTHis);
if (!obj.is('.form-element')) {
obj = obj.closest('.form-element');
}
return obj;
}
/**
* If the canvas is empty, it marks the template as empty, if not
* then it removes the marker. Returns whether the canvas is empty
* or not after marking it.
*
* @return boolean Whether the canvas is empty or not.
*/
function _markEmpty()
{
if (_isEmpty()) {
canvasEmpty.show();
return true;
} else {
canvasEmpty.hide();
return false;
}
}
/**
* Returns the number of form elements on the canvas.
*
* @return integer The length of the number of widgets present on the canvas.
*/
function _getNumWidgets()
{
return canvas.find(' > .form-element').length + canvas.find(' > .__widget_placeholder__').length;
}
/**
* Returns whether the canvas is empty or not.
*
* @return boolean Whether the canvas is empty or not.
*/
function _isEmpty()
{
return _getNumWidgets() === 0 && canvas.find('.ui-sortable-placeholder').length === 0;
}
/**
* Toggles the email feedback option depending on the checkbox state.
*
* @return void
*/
function _toggleEmailFeedback()
{
if (emailFeedback.get(0).checked) {
emailFeedbackToContainer.show();
} else {
emailFeedbackToContainer.hide();
}
}
/**
* Toggles the required star depending on the "Requires an answer" checkbox state.
*
* @param mixed widget An object or string (selector or html) of the widget to toggle
* the requried marker for.
*
* @return void
*/
function _toggleRequired(widget)
{
var
widget = $(widget),
star = widget.find('.form-element-required'),
required = widget.find('[name$="[is_required]"]');
return star[required.is(':checked') ? 'fadeIn' : 'fadeOut'](200);
}
/**
* Adds a widget to the canvas. Expects a JSON object as the only parameter.
* The JSON object must have an html property of the html to use for the widget.
*
* @param object json
*
* @return void
*/
function _addWidget(json)
{
var html = $(json.html);
// replace the placeholder with the widget
canvas.find('.__widget_placeholder__').replaceWith(html);
// find the first text box in the newly created element and focus it
html.find(':text:first').select();
// initialize name example fields;
// we have to use a setTimeout because the above .select() will cause IE7 to trigger the
// clearing of the field (example field behavior) even though it is bound after
setTimeout(function() {
html.find('[name*="name"]').exampleField().init({ onBeforeSubmit : false });
}, 100);
// initialize description example fields
html.find('[name*="description"]').exampleField().init();
_markEmpty();
}
})(jQuery);