2
\$\begingroup\$

There's some repetition in here. I tried making it into a function but then the response wasn't filling up the #project-container div. Is there a way to condense this code to make it more elegant?

// Activate projects
$('.post-link').click(function(e) {
    e.preventDefault();

    var post_id = $(this).attr('rel'),
        ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

    function projectShow() {

        // Initiate the Ajax call
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            beforeSend: function() {
                $('<span class="loading-icon"><img src="' + site.theme_path +'/img/loading.gif" height="32" width="32" alt="Loading..."></span>').insertBefore($(e.currentTarget));
            },
            success: function(response) {
                $('.loading-icon').remove();

                if ($(window).scrollTop() != 0) {
                    $('html, body').animate({
                        scrollTop : 0
                    },200, function() {
                        $('#project-wrapper').addClass('activated');

                        // Keep the rest of the projects grey while #project-wrapper is activated
                        $('article').addClass('grayscale grayscale-fade').css('opacity', '0.4');

                        // Load up the response from the Ajax call
                        $('#project-container').html(response);

                        // Make the max-height of the container exact for smoother animations
                        var containerHeight = $('#project-container').outerHeight();
                        $('#project-wrapper.activated').css('max-height', containerHeight);

                        // CSS effects
                        $('.post-container').addClass('fadeInUp');
                        $('.close-button').addClass('fadeInDown');

                        // Remove pesky, sticky 'hover' class
                        $('article').removeClass('hover');

                        // Shuffle letters and update the title of the page
                        $('#project-wrapper .entry-title').shuffleLetters({
                            callback:function(){
                                var title = $(e.currentTarget).closest('#main').find('h1').text();
                                $('head').find('title').text('Keebs | ' + title);
                            }
                        });
                    });
                } else {
                    $('#project-wrapper').addClass('activated');

                    // Keep the rest of the projects grey while #project-wrapper is activated
                    $('article').addClass('grayscale grayscale-fade').css('opacity', '0.4');

                    // Load up the response from the Ajax call
                    $('#project-container').html(response);

                    // Make the max-height of the container exact for smoother animations
                    var containerHeight = $('#project-container').outerHeight();
                    $('#project-wrapper.activated').css('max-height', containerHeight);

                    // CSS effects
                    $('.post-container').addClass('fadeInUp');
                    $('.close-button').addClass('fadeInDown');

                    // Remove pesky, sticky 'hover' class
                    $('article').removeClass('hover');

                    // Shuffle letters and update the title of the page
                    $('#project-wrapper .entry-title').shuffleLetters({
                        callback:function(){
                            var title = $(e.currentTarget).closest('#main').find('h1').text();
                            $('head').find('title').text('Keebs | ' + title);
                        }
                    });
                }

                return false;
            }
        });
    }

    // The call
    projectShow();
});
\$\endgroup\$
2
\$\begingroup\$

Here's a shot at it. I don't have a demo environment to test with, so let me know if I had any typos etc. I also wrapped it in a self-executing function to keep things from being in the global scope. If you already have it scoped then the self-executing function is unnecessary.

I pulled out the duplicated code into a function so the code is no longer duplicated. This helps with maintainability and shrinks the file size.

(function() {
    function doWork(event, response) {
        $('#project-wrapper').addClass('activated');

        // Keep the rest of the projects grey while #project-wrapper is activated
        $('article').addClass('grayscale grayscale-fade').css('opacity', '0.4');

        // Load up the response from the Ajax call
        $('#project-container').html(response);

        // Make the max-height of the container exact for smoother animations
        var containerHeight = $('#project-container').outerHeight();
        $('#project-wrapper.activated').css('max-height', containerHeight);

        // CSS effects
        $('.post-container').addClass('fadeInUp');
        $('.close-button').addClass('fadeInDown');

        // Remove pesky, sticky 'hover' class
        $('article').removeClass('hover');

        // Shuffle letters and update the title of the page
        $('#project-wrapper').find('.entry-title').shuffleLetters({
            callback: function(){
                var title = $(event.currentTarget).closest('#main').find('h1').text();
                $('head').find('title').text('Keebs | ' + title);
            }
        });
    }


    // Activate projects
    $('.post-link').click(function(e) {
        e.preventDefault();

        var post_id = $(this).attr('rel'),
            ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

        // Initiate the Ajax call
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            beforeSend: function() {
                $('<span class="loading-icon"><img src="' + site.theme_path +'/img/loading.gif" height="32" width="32" alt="Loading..."></span>').insertBefore($(e.currentTarget));
            },
            success: function(response) {
                $('.loading-icon').remove();

                if ($(window).scrollTop() != 0) {
                    $('html, body').animate({
                        scrollTop : 0
                    }, 200, function() {
                        doWork(e, response);
                    });
                } else {
                    doWork(e, response);
                }

                return false;
            }
        });
    });
})();
\$\endgroup\$

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.