Question

A working version of this is here: http://est.pagodabox.com/client/svedka

I have the following function which I’m trying to convert into a module pattern, but when I try to use one of the function that I return at the bottom, for example:

est_project.closeContent($html);

I get an error that it’s not a function. Is there something i’m doing wrong here?

Thanks!

var est_project = (function(){

    // Setup functions
    var flexDestroy,
        cloneCurrent,
        clonePosition,
        switchSlide,
        projectLayout,
        contentHeight,
        slidePos,
        slideClick,
        infoToggle,
        closeContent;

    // Destroy flexslider
    flexDestroy = function($slider,$cleanSlider, $projBg) {
        // Insert the clone of the un-initialized slide element, and remove the current flexslider
        // Effectively "destroys" the current slider

        var $curSlide = $slider.find('.flex-active-slide'),
            // Get the zero based index of current slide
            curSlideIndex = $curSlide.index() - 1,
            curBg = $curSlide.find('img').attr('src'),
            slideCount = $cleanSlider.data('count'),
            i = 0,
            $rearrange = $('');

        // When you switch projects, the current slide should stay put
        if(curSlideIndex !== 0 && slideCount > 1) { 
            // Cut from the current slide to the end, paste at the beginning
            for(i = 0 ; i < slideCount; i += 1) {
                if(curSlideIndex > i) {continue;}
                $rearrange = $rearrange.add( $cleanSlider.find('li:eq(' + i + ')') );
            }

            $rearrange.remove();
            $cleanSlider.find('li:first-child').before($rearrange)
            $cleanSlider.css({'background-image' : 'url(' + curBg + ')'});
        }

        $slider.after($cleanSlider).remove();
        clonePosition(slideheight);
    };

    return {
        // Clone current 
        cloneCurrent: function($el) {
            var $clean,
                slideCount = $el.find('li').length;

            $clean = $el.clone();
            $clean.removeClass('project-current').find('div').removeClass('img-loading');
            $clean.data('count',slideCount);
            return $clean;
        },

        // Set the clone position, for when we add it to the DOM or resize the window
        clonePosition: function(slideheight) {
            var n = $cleanSlider.index(),
                $myBg = $cleanSlider.find('div'),
                myPosition = n * slideheight;

            // Set the position of the inserted clone
            $cleanSlider
                .css({height: slideheight, top: myPosition, position : 'absolute'});

            $myBg
                .css({height: slideheight});
        },

        switchSlide: function($me, $slider) {
            $('.project-current').removeClass('project-current');
            $me.addClass('project-current');

            // Get rid of current flexslider
            flexDestroy($slider,$cleanSlider);

            // Clone the unitialized slider so we can add it back in later when it gets destroyed
            $cleanSlider = cloneCurrent($me);

            $me.addClass('flexslider').flexslider({
                animation: "slide",
                animationSpeed: 500,
                slideshow: false,
                manualControls: '.dot-nav li a'
            });

            // After the flexslider initializes, slide the content
            setTimeout(function(){
                slidePos($me, $slidewrap, slideheight, $win);
            },100);
        },

        // Custom "masonry" function, absolutely positions each project div according to the slide height
        projectLayout: function(slideheight,$proj,$projBg) {
            var n = 0;

            $proj.each(function(){
                var $me = $(this),
                    myPosition = n * slideheight;

                // Set all the heights
                $me
                    .css({top: myPosition, position : 'absolute'})
                    .add($projBg)
                    .css({height: slideheight});

                n++;
            });
        },

        // Set slide wrapper height to window height
        contentHeight: function($win, $slidewrap) {
            var winHeight = $win.height();
            $slidewrap.css({height: winHeight});
        },

        // Set slide wrapper position to slide to the clicked slide, and set content position
        slidePos: function($me, $slidewrap, slideheight, $win) {
            var $contentText = $('.project-content .text'),
                projNavHeight = Math.round( $win.height() * .1 ),
                curIndex = $me.index(),
                curTop = 0 - (curIndex * slideheight) + projNavHeight;

            $slidewrap.css({transform: 'translate(0,' + curTop.toString()  + 'px)'});
            $('.corner-btn').add($contentText).css({'padding-top' : projNavHeight});

            setTimeout(function(){
                $slidewrap.removeClass('tr-none movin').addClass('tr-all');
                $('.project').css({opacity: .4})
            }, 100);
        },

        // Click a project, slide to it
        slideClick: function($proj) {
            $('.project').live('click',function(){

                var $me = $(this),
                    myHref = $me.data('href'),
                    myTitle = $me.data('title'),
                    $slider = $('.flexslider'),
                    indexMy = $me.index(),
                    indexCur = $('.project-current').index(),
                    projDir;

                $me.css({opacity: 1});

                // Stop here if we click on the current project
                if($me.hasClass('project-current')) {
                    return false;
                }

                History.pushState(null,myTitle,myHref);     
            });
        },

        // Hide and show content
        infoToggle: function() {
            // Open content
            $('#corner-btn-info').on('click',function(){

                $html.addClass('show-content');

                if($('.project-content .text').height() <= $win.height()) {
                    $html.addClass('no-overflow');
                }

                $('.project-content-wrap').css({'z-index': 10});
            });

            // Close content
            $('#corner-btn-close').live('click',function(){
                closeContent($html);
            });
        },

        closeContent: function($html) {
            $html.removeClass('show-content');
            setTimeout(function(){
                $('.project-content-wrap').css({'z-index': -1});
                $html.removeClass('no-overflow');
                $('#classy').animate({scrollTop: 0})
            },300);
        }
    };
});

Answer 1

The problem is that you’re not executing the anonymous function, your code is the equivalent of:

var est_project = function() {};

You need to execute the function if you want it to return the functions defined in it.

Just replace the last line:

});

By:

}());

Or you can keep your code and call the closeContent function like this:

est_project().closeContent();

But I guess that’s not what you want 🙂 You’d instantiate a new object everytime you call the est_project function.