5
\$\begingroup\$

I'm wondering if anyone would like to give me some solid advice on how to better organize my main.js file. I have a hunch that I should probably break the file into multiple files and decrease the amount of global variables. Maybe my naming is not so great either? I'm using codekit so I can prepend if that won't screw up my scopes.

GitHub

//@codekit-prepend "jquery-1.10.2.min.js"
//@codekit-prepend "jquery.event.special.js"
//@codekit-prepend "jquery.easing.min.js"
//@codekit-prepend "lightbox-2.6.min.js"
//@codekit-prepend "handlebars-v1.1.2.js" 

//Globals
var duration;
var seek_time;
var seek_bar_left;
var seek_bar_right;
var seek_scrub;
var seek_bar_width;
var xPos;
var name;
var cam_toggle;
var mic_toggle;
var rec_toggle;
var fav_toggle;
var mic_index = 0;//0 default mic
var cam_index = 0;//0 default cam
var drag = false;
var play_toggle = false;
var playing = false;
var recording = false;
var connection_open = false;
var current_video;
var current_user;
var user_avatar;
var user_avatar_array = [];
var comments_array = [];
var user_array = [];
var created_array = [];
var new_video = false;


//firebase globals
var db = new Firebase('https://adamgedney.firebaseio.com/');
var video_obj = db.child('/videos');
var comments_obj = db.child('/comments');

// var globalError = function(message){
//         console.log(message, "error mess");
// }
//==========================================callbacks=================================//
var connected = function(success, error){
         console.log(success, error);
        if(success){
                connection_open = true;

                if(recording){
                        flash.startRecording(name,cam_index,mic_index);
                }else{
                        flash.startPlaying(current_video);
                };
        }else{
                connection_open = false;
        }
};

var getDuration = function(dur){
        duration = dur;
};

var seekTime = function(time){
        seek_time = time;

        xPos = (seek_time / duration) * seek_bar_right;

        // scrub position update only when not dragging
        if(!drag){
                $('#seek_bar_scrub').offset({left: seek_bar_left + xPos});
        }

};// seekTime()

//auth callback
var auth = new FirebaseSimpleLogin(db, function(error, user){

        if(!error){
                if(user.provider == "github"){
                        current_user = user.displayName;
                        user_avatar = user.avatar_url;
                        login();
                }else if(user.provider == "twitter"){
                        current_user = user.displayName;
                        user_avatar = user.profile_image_url;
                        login();
                }
        }
});

//
//end callbacks
//

//========================Seek Bar drag/drop functionality=========================//
        //mousedown to start drag
        $(document).on('mousedown', '#seek_bar_scrub', function(e){
                drag = true;

                //required to prevent text selection on mouseout of seek_bar
                e.preventDefault();
                moving();
        });

        //mouseup to stop drag
        $(document).on('mouseup', function(e){
                drag = false;
        });

        //drag and setTime
        function moving(){
                $(document).on('mousemove', function(e){
                        var set_time = ((e.pageX - seek_bar_left) / seek_bar_width) * duration;

                        if(drag){

                                $('#seek_bar_scrub').offset({left: e.pageX});

                                //sets scrub time
                                flash.setTime(set_time);

                                //creates a border 
                                if(seek_scrub < seek_bar_left){
                                        $('#seek_bar_scrub').offset({left: seek_bar_left});

                                }else if(seek_scrub > (seek_bar_right  - $('#seek_bar_scrub').width())){
                                        $('#seek_bar_scrub').offset({left: (seek_bar_right - $('#seek_bar_scrub').width())});

                                };
                        };
                });
        };

        //flash ready serves as document ready
        var flashReady = function(){

                //sets init volume to 70
                $('#vol_bar').val(100);

                $(document).on('click', '#play_btn', function(e){

                        play_video();
                });
        };// flashReady()

        //set volume init
        $(document).on('change', function(e){

                var vol = $('#vol_bar').val() / 100;
                        vol = vol.toFixed(1);

                        flash.setVolume(vol);
        });

        function play_video(){
                //handles connect or play/pause toggle
                        if(!playing){
                                flash.stopRecording();
                                flash.connect('rtmp://localhost/SMSServer/');

                                playing = true;
                                recording = false;
                                new_video = false;

                        }else if(playing && !recording && new_video){

                                flash.stopPlaying();
                                flash.connect('rtmp://localhost/SMSServer/');
                                new_video = false;

                        }else if(playing && !new_video){

                                flash.playPause();

                        }

                        //handles image toggle
                        if (!play_toggle){

                                $('#play_btn').attr('src', 'images/pause.png');
                                play_toggle = true;

                        }else{
                                $('#play_btn').attr('src', 'images/play.png');
                                play_toggle = false;
                        }
        };

//---------------------------Templating--------------------------//
init();

function init(){

        $.get('templates/templates.html', function(htmlArg){

                var source = $(htmlArg).find('#logged_out').html();
                var template = Handlebars.compile(source);
                // var context = {id: posts._id, title:posts.title, created: posts.created, author: posts.author, category: posts.category, text: posts.text}
                // var html = template(context);

                $('#content').append(template);

                //defaults to hide upon program load
                $('.transport_popup').hide();
                $('.rec_select').hide();
                $('.mic_select').hide();
                $('.cam_select').hide();
                $('.login_popup').hide();
                $('.sub_list').hide();

        });//get()
};//init()

//--------------------On login, $.get logged in state----------------//
$(document).on('click', '#login_gh', function(e){

        //github authentication
        auth.login('github');
});

$(document).on('click', '#login_tw', function(e){

        //github authentication
        auth.login('twitter');
});

        function login(){
                $.get('templates/templates.html', function(htmlArg){

                        var source = $(htmlArg).find('#logged_in').html();
                        var template = Handlebars.compile(source);
                        // var context = {id: posts._id, title:posts.title, created: posts.created, author: posts.author, category: posts.category, text: posts.text}
                        // var html = template(context);

                        $('#content').empty();
                        $('#content').append(template);

                        //defaults to hide upon program load
                        $('.transport_popup').hide();
                        $('.rec_select').hide();
                        $('.mic_select').hide();
                        $('.cam_select').hide();
                        $('.stop_rec_modal').hide();
                        $('.login_popup').hide();
                        $('.sub_list').hide();


                        seek_bar_width = $('#seek_bar_inner').width();
                        seek_bar_left = Math.floor($('#seek_bar_inner').offset().left);
                        seek_bar_right = seek_bar_left + seek_bar_width;
                        seek_scrub = $('#seek_bar_scrub').offset().left;


                        swfobject.embedSWF(
                    "swf/higley_wigley.swf", "flashContent",
                    "100%", "100%",
                    swfVersionStr, xiSwfUrlStr,
                    flashvars, params, attributes);
                        // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
                        swfobject.createCSS("#flashContent", "display:block;text-align:left;");

                        //populates comments & video fields
                        get_comments();
                        get_videos();


                });//get()
        };//login()

//Controls logout
$(document).on('click', '#login_state', function(e){

        if($('#login_state').html() == "Logout"){

                //logs out facebook or twitter
                auth.logout();

                $.get('templates/templates.html', function(htmlArg){

                        var source = $(htmlArg).find('#logged_out').html();
                        var template = Handlebars.compile(source);
                        // var context = {id: posts._id, title:posts.title, created: posts.created, author: posts.author, category: posts.category, text: posts.text}
                        // var html = template(context);

                        $('#content').empty();
                        $('#content').append(template);

                        //defaults to hide upon program load
                        $('.transport_popup').hide();
                        $('.rec_select').hide();
                        $('.mic_select').hide();
                        $('.cam_select').hide();
                        $('.login_popup').hide();
                        $('.sub_list').hide();

                });//get()
        };// if
});

//-------------Show/hide login dropdown----------------//

var log_toggle = false;

$(document).on('click', '#login_state', function(e){

        if(!log_toggle){
                $('.login_popup').fadeIn();
                log_toggle = true;
        }else{
                $('.login_popup').fadeOut();
                log_toggle = false;
        }
});

//====================Show/Hide mic/cam/rec options=====================//

//camera select popup
$(document).on('click', '#camera_btn', function(e){

        if (!cam_toggle){
                //hides other popups
                $('.mic_select').hide();
                $('.rec_select').hide();
                $('#mic_btn').css('opacity', '1');
                rec_toggle = false;
                mic_toggle = false;

                $('#camera_btn').css('opacity', '.5');
                $('.transport_popup').fadeIn();
                $('.cam_select').fadeIn();

                cam_toggle = true;

                //get and loop through attached cameras
                var cam_list = flash.getCameras();
                $('.cameras').empty();

                for(var i=0; i<cam_list.length; i++){
                        var li = '<li><a id="' + i + '" href="#">' +  cam_list[i].substr(0, 18) + '</a></li>';
                        $('.cameras').append(li);
                }

        }else{
                $('#camera_btn').css('opacity', '1');
                $('.transport_popup').fadeOut();
                $('.cam_select').fadeOut();

                cam_toggle = false;
        }

});

//select and store camera choice
$(document).on('click', '.cameras a', function(e){
        e.preventDefault();
        cam_index = $(this).attr("id");
});

//mic select popup
$(document).on('click', '#mic_btn', function(e){

        if (!mic_toggle){
                //hides other popups
                $('.cam_select').hide();
                $('.rec_select').hide();
                $('#camera_btn').css('opacity', '1');
                cam_toggle = false;
                rec_toggle = false;

                $('#mic_btn').css('opacity', '.5');
                $('.transport_popup').fadeIn();
                $('.mic_select').fadeIn();

                mic_toggle = true;

                //get and loop through attached cameras
                var mic_list = flash.getMicrophones();
                $('.mics').empty();

                for(var j=0; j<mic_list.length; j++){
                        var li = '<li><a id="' + j + '" href="#">' +  mic_list[j].substr(0, 20) + '</a></li>';
                        $('.mics').append(li);
                }


        }else{
                $('#mic_btn').css('opacity', '1');
                $('.transport_popup').fadeOut();
                $('.mic_select').fadeOut();

                mic_toggle = false;
        }

});

//select and store microphone choice
$(document).on('click', '.mics a', function(e){
        e.preventDefault();
        mic_index = $(this).attr("id");
});

//record popup
$(document).on('click', '#rec_btn', function(e){

        if (!rec_toggle){
                //hides other popups
                $('.mic_select').hide();
                $('.cam_select').hide();
                $('#rec_btn').attr('src', 'images/cancel_rec.png');
                $('#rec_btn').attr('title', 'Cancel Recording');
                $('#mic_btn').css('opacity', '1');
                $('#cam_btn').css('opacity', '1');
                cam_toggle = false;
                mic_toggle = false;

                $('.transport_popup').fadeIn();
                $('.rec_select').fadeIn();

                rec_toggle = true;
        }else{
                $('#rec_btn').attr('src', 'images/rec.png');
                $('#rec_btn').attr('title', 'Record A Video');

                $('.transport_popup').fadeOut();
                $('.rec_select').fadeOut();

                rec_toggle = false;
        }

});

//start recording
$(document).on('click', '#start_recording', function(e){
        e.preventDefault();

        name = $('#name').val();
        var cat = $('#category').val();
        var desc = $('#file_desc').val();

        //opens connection
        flash.stopPlaying();
        flash.connect('rtmp://localhost/SMSServer/');
        recording = true;
        playing = false;

        // $('.poster').fadeOut();
        $('.stop_rec_modal').fadeIn();

        //resets the record modal
        $('#rec_btn').attr('src', 'images/rec.png');
        $('#rec_btn').attr('title', 'Record A Video');
        $('.transport_popup').fadeOut();
        $('.rec_select').fadeOut();
        rec_toggle = false;

        //adds video to database
        video_obj.push({video: name, category: cat, description: desc, author: current_user, created_date: get_datetime()});
});

//stop recording button
$(document).on('click', '#stop_rec', function(e){
        flash.stopRecording();
        $('.stop_rec_modal').hide();


        // $('.poster').fadeIn();

});        

//-------------Favorites button------------//
$(document).on('click', '#fav_btn', function(e){

        if (!fav_toggle){
                $('#fav_btn').attr('src', 'images/star_y.png');
                fav_toggle = true;
        }else{
                $('#fav_btn').attr('src', 'images/star.png');
                fav_toggle = false;
        }

});

//------------Category Dropdown----------------//
var cat_toggle;
var v_toggle;
var f_toggle;

$(document).on('click', '.drop_down', function(e){
        e.preventDefault();


        if($(this).html() == 'My Videos'){

                if(!v_toggle){
                        $('.vid_cats').fadeOut();
                        $('.favorited_vids').fadeOut();
                        f_toggle = false;
                        cat_toggle = false;

                        $('.my_vids').fadeIn();
                        v_toggle = true;
                }else{
                        $('.my_vids').fadeOut();
                        v_toggle = false;
                }

        }else if($(this).html() == 'Favorites'){

                if(!f_toggle){
                        $('.my_vids').fadeOut();
                        $('.vid_cats').fadeOut();
                        cat_toggle = false;
                        v_toggle = false;

                        $('.favorited_vids').fadeIn();
                        f_toggle = true;
                }else{
                        $('.favorited_vids').fadeOut();
                        f_toggle = false;
                }

        }else if($(this).html() == 'Categories'){

                if(!cat_toggle){
                        $('.favorited_vids').fadeOut();
                        $('.my_vids').fadeOut();
                        f_toggle = false;
                        v_toggle = false;

                        $('.vid_cats').fadeIn();
                        cat_toggle = true;
                }else{
                        $('.vid_cats').fadeOut();
                        cat_toggle = false;
                }
        };
});

$(document).on('click', '.sub_list a', function(e){
        e.preventDefault();

        $('.sub_list').fadeOut();
        cat_toggle = false;
        v_toggle = false;
        f_toggle = false;
});

//============================Click Handlers==============================//

        //set comments
        $(document).on('click', '#submit_comment', function(e){
                e.preventDefault();

                set_comment();

        });

        //select lesson from list & set current video to this value
        $(document).on('click', '.lesson', function(e){

                var this_title = $(this).find('h2').html();
                var this_time = $(this).find('h3').html();
                var this_desc = $(this).find('p').html();

                current_video = this_title + ".flv";
                new_video = true;

                // flash.stopPlaying();
                play_video();
                get_comments();


                render_info(this_title, this_time, this_desc);
        });

//============================Getters/Setters==============================//
        function set_comment(){
                var com = $('#new_comment').val();
                var usr = current_user;
                var d = get_datetime();
                var t = current_video;


                //pushes comment into messages object
                comments_obj.push({user: usr, avatar: user_avatar, comment: com, created: d, title: t});

                //resets comment form
                $('#new_comment').val('');

                //gets comments and appends to comment list
                get_comments();
        };

        //retrieve comments when there is a new one
        //store in the comments_array
        function get_comments(){
                $('.comments_wrapper').empty();

                comments_obj.on('child_added', function (snapshot) {
                    console.log(snapshot.val().title, "comment in db");

                    var comments = snapshot.val().comment;
                    var users = snapshot.val().user;
                    var created = snapshot.val().created;
                    var avatar = snapshot.val().avatar;

                    //empties arrays
                          comments_array = [];
                          user_array = [];
                          created_array = [];
                          user_avatar_array = [];

                    if(snapshot.val().title == current_video){

                                  //pushes result strings into arrays
                                  comments_array.push(comments);
                                  user_array.push(users);
                                  created_array.push(created);
                                  user_avatar_array.push(avatar);


                                  render_comments();
                        };
                });
        }; //get_comments()

        function get_videos(){

                video_obj.on('child_added', function (snapshot) {

                           var video_array = [];
                    video_array.push(snapshot.val());

                          render_videos(video_array);
                });
        }; //get_comments()

        function get_datetime(){
                // datetime on 12 hr clock
                var d = new Date();
                var        day = d.getDay();
                var month = d.getMonth() + 1;
                var year = d.getFullYear();
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var time;
                if(hour > 12){
                        hour = hour - 12;
                        time = hour + ":" + minutes;

                        time += "pm";
                }

                return month + "/" + day + "/" + year + " " + time;
        };


//============================Renderers==============================//
        function render_videos(video_array){

                  for (var l=0;l<video_array.length;l++){

                          var s = '<div class="lesson">';
                                s += '<img src="images/thumb.jpg" alt="video thumbnail"/>';
                                s += '<h2>' + video_array[l].video + '</h2>';
                                s += '<h3>' + video_array[l].created_date + '</h3>';
                                s += '<p>' + video_array[l].description + '</p>';
                                s += '</div><!-- ./lesson-->';                        

                          $('.lessons_container').append(s);
                };// for
        };

        function render_comments(){

                  for (var k=0;k<comments_array.length;k++){

                          var s = '<div class="comment">';
                                  s += '<a href="' + user_avatar_array[k] + '" data-lightbox="avatar id" ><img src="' + user_avatar_array[k] + '" alt="user avatar" /></a>';
                                  s += '<h2>' + user_array[k] + '</h2>';
                                  s += '<h3>' + created_array[k] + '</h3>';
                                  s += '<p>' + comments_array[k] + '</p>';
                                s += '</div><!-- /.comment-->';                                        

                          $('.comments_wrapper').append(s);
                };// for
        };

        function render_info(title, time, desc){
                $('.desc').empty();

                var s = '<div class="title_wrapper">';
                        s += '<h1>' + title + '</h1>';
                        s += '<p class="time">' + time + '</p>';
                        s += '</div><!-- /.title_wrapper-->';
                        s += '<p class="desc_copy">' + desc + '</p>';
                        s += '<div class="desc_gallery">';
                        s += '<a href="images/poster.jpg" data-lightbox="movie screenshots"><img src="images/shot.jpg" alt="movie screenshot 1"/></a>';
                        s += '<a href="images/poster.jpg" data-lightbox="movie screenshots"><img src="images/shot.jpg" alt="movie screenshot 2"/></a>';
                        s += '</div><!-- /.desc_gallery-->';

                $('.desc').append(s);
        };
\$\endgroup\$
3
  • 3
    \$\begingroup\$ please fix your indentation, it's horrific and makes reading it difficult especially in Post formatting. I already removed the white space. I would get rid of it if it is in your code. if you did it to separate the blocks in this post you should use --- with a new line before and after, this will give you a separator line in the post \$\endgroup\$ – Malachi Jan 25 '14 at 22:25
  • 1
    \$\begingroup\$ Things like $('#rec_btn').attr('src', 'images/cancel_rec.png'); $('#rec_btn').attr('title', 'Cancel Recording'); should usually be chained and written $('#rec_btn').attr('src', 'images/cancel_rec.png').attr('title', 'Cancel Recording'); \$\endgroup\$ – megawac Jan 26 '14 at 0:32
  • 1
    \$\begingroup\$ Also I'd recommend creating a namespace and putting all those globals in your namespace object \$\endgroup\$ – megawac Jan 26 '14 at 2:27
2
\$\begingroup\$

Two random thoughts:

  1. In the Category Dropdown part the $(this).html() could be extracted out to a named local variable.

  2. The following code is duplicated, it could be extracted out a separate function:

    $('.transport_popup').hide();
    $('.rec_select').hide();
    $('.mic_select').hide();
    $('.cam_select').hide();
    
\$\endgroup\$
1
  • 1
    \$\begingroup\$ you could also write it $('.transport_popup, .rec_select, .mic_select, .cam_select').hide() and underscores in css names is poor style \$\endgroup\$ – megawac Jan 26 '14 at 2:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.