I found this Javascript somewhere and want to learn. Therefore, I'll just give questions for what I don't know.
1) I wonder why there's hashtag to the builder variable.
(function($) {
$(document).ready(function() {
'use strict';
var builder = $('#builder');
2) Seems like the builder written down there has got sth to do with #builder...
/**
* Gets the json for the form in the embedded builder.
*
* @return string the form's json.
*/
var getFormDocument = function() {
if (document.getElementById('builder').contentWindow.getFormDocument == null) {
return '{}';
}
return document.getElementById('builder').contentWindow.getFormDocument();
};
3) Again, a hash tag here. Is it from the css?
/**
* Adjusts the builder's height to the window.
*/
var resizer = function() {
var w = $(window).height(),
h = $('header').height(),
t = $('#top-row').height(),
p = 12, // top padding
o = (w - h - t - p) + 'px';
builder.css('height', o);
};
4) Is .js-form-document one of JQuery's function?
/**
* Called when the user is done building their form.
*/
var clickedSave = false;
var save = function() {
clickedSave = true;
jQuery('.js-form-document').val(getFormDocument());
jQuery('#builderModal_signup').reveal();
};
5) Why there's TODO saying iframe goes bonkers? And after the user save the form, how does this js code get connected to database?
/**
* Adds listeners for the embedded builder and keeps the
* builder properly positioned.
*/
var init = function() {
// TODO: iframe width at 100% goes bonkers.
var width = $($('div.twelve.columns')[0]).width();
builder.css('display', 'block');
builder.css('width', width + 'px');
$('.js-save').click(save);
};
var hasFields = function() {
var formDocument = JSON.parse(getFormDocument());
if (formDocument.fields == null) {
return false;
}
var sections = formDocument.fields;
if (sections.length === 0 || sections[0].fields.length === 0) {
return false;
} else {
return true;
}
};
6) Don't get what the hash tag here means...
/*
* Triggers a call to action for the user
*/
var firstCallout = function() {
if (clickedSave) {
return;
}
if (!hasFields()) {
jQuery('#builderModal_noFields').reveal();
} else {
jQuery('#builderModal_hasFields').reveal();
}
};
init();
setTimeout(function(){firstCallout();}, 30000);
setInterval(function() {
var onClass = $('.js-save').attr('data-on-class');
if (onClass === '') {
onClass = 'green';
}
if (hasFields()) {
$('.js-save').removeClass('gray').addClass(onClass);
} else {
$('.js-save').removeClass(onClass).addClass('gray');
}
}, 1000);
});
})(jQuery);
var lastHeight = 0;
function resizeBuilder() {
setInterval(function() {
var iframe = document.getElementById('builder');
var padding = 20;
var height = iframe.contentWindow.document.body.scrollHeight;
//chrome counts padding in scroll height and creates never ending height
if (Math.abs(height - lastHeight) <= padding) {
return;
}
height += padding;
if (height < 400) {
height = 400;
}
iframe.height = height + 'px';
lastHeight = height;
}, 1000);
}
