Hello all,
I've been assigned a project to create a js library that serves as a starting template for all of my company's websites. The idea is to include some standard things that we do so that we aren't reinventing the wheel every time.
I've made a good bit of headway thus far, but I cant help but feel like I could be organizing this code in a much better/more flexible way. The code currently uses requirejs to load modules based on need. Here are the results:
require([
"bfg/forms",
"bfg/utility",
"bfg/jquery_tools",
"bfg/jquery_ui",
"bfg/flash",
"bfg/images"
],
function(forms, utilities, uitools, jqueryui, flash, images) {
console.dir(images);
var activeCSS = {
'border' : '2px solid black',
'background-color' : 'white'
};
$('document').ready(function() {
//form functions, look at the exampleform function to see how validation works
forms.baseFormEventHandling()
forms.inputFocusBehavior('#exampleForm', activeCSS);
forms.dateInput('#dateInput');
forms.exampleForm('#exampleForm');
// UI Functions
uitools.slider('#scroll');
uitools.tabs('.tabs', '.panes > div');
uitools.tooltips('#gallery img', 10);
uitools.tooltips('#tooltipsContainer img', 0);
$('.tooltip a').click(function(){
deletedImageID = $(this).attr('class');
$.get('/images/delete/'+deletedImageID, function(responseText){
if(responseText == 'true'){
$('#'+deletedImageID).remove();
} else {
alert("error!");
}
});
$(this).parent().css('display', 'none');
return false;
});
// Flash Functions
flash.embed('/assets/perform.swf', '#flashContainer');
// images
images.uploader('#img_input', "/images/upload");
var box = jqueryui.dialog('#uploadDialog', { autoOpen: false });
$('#triggerUploadDialog')
.button()
.click(function(){
box.dialog('open');
});
});
}
);
and here is an example of one of the modules:
require.def("bfg/utility", function(){
return {
logEvents : function(){
console.dir($(document).data('events'));
},
elementExists : function(selector){
if($(selector).length) {
return true;
}
return false;
},
limitChars : function(textid, limit, infodiv) {
var text = $('#' + textid).val();
var textlength = text.length;
if (textlength > limit) {
$('#' + infodiv).html("0");
$('#' + textid).val(text.substr(0, limit));
return false;
}
else {
$('#' + infodiv).html((limit - textlength));
return true;
}
},
getCurrentURL : function(){
return window.location.pathname;
}
}
});
Do you guys have any suggestions on how to make this code better?