// Init (or grab) our WDSLunch global window.WDSLunch = window.WDSLunch || {}; (function(window, document, $, undefined) { // Local var shortcut var wdsl = WDSLunch; // This is an array wdsl.myArray = ['zero', 1, 'two', 3]; // This is an object wdsl.myObject = {'zero' : 0, 1 : 'one', 'two' : 2, 3 : 'test'}; // initiates all other functionality. like __construct wdsl.init = function() { // Cache our reusable selectors wdsl.$cache(); // Anything after this point should not be fired when ajax .load() completes if ( true === wdsl.initDone ) { return; } // fire body events wdsl.bodyEvents(); wdsl.initDone = true; }; // Caches reusable selectors wdsl.$cache = function( selector ) { if ( selector ) { return wdsl.$cached[ selector ]; } var $c = {}; $c.window = $( window ); $c.document = $( document ); $c.body = $( 'body' ); $c.content = $c.body.find( 'section' ); $c.sidebar = $c.content.find( 'aside' ); $c.entry = $c.content.find( 'article' ); $c.footer = $c.body.find( 'footer' ); $c.ajaxButton = $c.sidebar.find( '.ajax' ); $c.jssources = $c.footer.find( '.jssources' ); $c.jssource = $c.footer.find( '#simple-js' ); $c.jssource2 = $c.footer.find( '#complex-js' ); wdsl.$cached = $c; }; // put all our body events in here wdsl.bodyEvents = function() { wdsl.$cache( 'body' ).on( 'click', '.click-me, .click-here, .generic-clicker, .ajax, .jssource, .jssource2', wdsl.preventDefault ).on( 'mouseenter', '.hoverer', wdsl.preventDefault ); }; // fallback click method wdsl.preventDefault = function( evt ) { evt.preventDefault(); wdsl.$cached.self = $(this); var thisClass = wdsl.$cache( 'self' ).prop('class'); // Divy out methods switch ( thisClass ) { case 'click-me' : wdsl.clickMe(); break; case 'click-here' : wdsl.clickHere(); break; case 'generic-clicker' : case 'hoverer' : wdsl.$cache( 'self' ).alertMsg(); break; case 'ajax' : wdsl.ajax(); break; case 'ajax reset-content' : wdsl.resetAjax(); break; case 'jssource' : case 'jssource2' : wdsl.jsSource( thisClass ); break; } wdsl.$cached.self = null; }; wdsl.clickMe = function() { alert('You clicked me!'); }; wdsl.clickHere = function() { console.log('You clicked here!'); }; // load some ajax content wdsl.ajax = function() { wdsl.$cache( 'entry' ).load( 'ajax.html', wdsl.loadAjaxContentSuccess ); }; // load JS source wdsl.jsSource = function( classname ) { wdsl.getJSSource( classname ); // If alreadying showing hide it if ( wdsl.$cache( classname ).hasClass( 'show' ) ) { wdsl.$cache( classname ).removeClass( 'show' ).addClass( 'hide' ); } else { // Otherwise show it wdsl.$cache( classname ).removeClass( 'hide' ).addClass( 'show' ); } }; // Retrieve the JS source wdsl.getJSSource = function( classname ) { if ( wdsl.$cache( classname ).data( 'gotten' ) ) { return false; } wdsl.$cache( classname ) .load( wdsl.$cache( 'self' ).attr( 'href' ) ) .data( 'gotten', true ); return true; }; // Success ajax handler wdsl.loadAjaxContentSuccess = function( response, status, xhr ) { // error handling if ( status == 'error' ) { wdsl.$cache( 'entry' ).html( '
An error occured: '+ xhr.status +' '+ xhr.statusText +'
' ); } wdsl.ajaxLinkToggle(); }; // Reset content and ajax link to original wdsl.resetAjax = function() { // empty content wdsl.$cache( 'entry' ).empty(); wdsl.ajaxLinkToggle( true ); }; // change ajax link text and toggle 'reset-content' class wdsl.ajaxLinkToggle = function( reset ) { if ( reset ) { // Change text back and remove 'reset-content' class return wdsl.$cached.ajaxButton.text( wdsl.$cached.ajaxButton.data('originalText') ).removeClass('reset-content'); } // Cache original text if ( typeof wdsl.$cached.ajaxButton.data('originalText') === 'undefined' ) { wdsl.$cached.ajaxButton.data( 'originalText', wdsl.$cached.ajaxButton.text() ); } // Change text, and add 'reset-content' class return wdsl.$cached.ajaxButton.text('Reset Content').addClass('reset-content'); }; // jQuery function.. checks for msg data attribute and alerts it $.fn.alertMsg = function() { var msg = wdsl.$cache( 'self' ).data('wdslunchmsg'); if ( msg ) { alert( msg ); } return this; }; // Get it going $(document).ready( wdsl.init ); })(window, document, jQuery); (function(window, document, $, undefined){ // 'window.myVar' is like `global $my_var;` in php // It explicitly declares the variable is global window.myGlobalVar = {}; // Shorthand local variable globvar = myGlobalVar; // Add my vars and methods to the global var object globvar.myArray = ['one', 2, 'three', 4]; globvar.myObject = {'zero' : 0, 1 : 'one'}; globvar.myFunc = function() { alert('myFunc'); }; })(window, document, jQuery);