views:

66

answers:

0

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?