/** * Something like PHP array_values(). * * @param {Object} a * @returns {Array} */ function values(a) { "use strict"; var result = []; for (var i in a) { if (a.hasOwnProperty(i)) { result.push(a[i]); } } return result; } $(document).ready(function () { 'use strict'; // Enable hover effect on the style switcher $('#switcher').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); // Allow the style switcher to expand and collapse. var toggleSwitcher = function(event) { if (!$(event.target).is('button')) { $('#switcher').find('button').toggleClass('hidden'); } }; $('#switcher').on('click', toggleSwitcher); // Simulate a click so we start in a collapsed state. $('#switcher').click(); // The setBodyClass() function changes the page style. // The style switcher state is also updated. var setBodyClass = function (className) { $('body').removeClass().addClass(className); $('#switcher').find('button').removeClass('selected'); $('#switcher-' + className).addClass('selected'); $('#switcher').off('click', toggleSwitcher); if (className === 'default') { $('#switcher').on('click', toggleSwitcher); } }; // begin with the switcher-default button "selected" $('#switcher-default').addClass('selected'); // Map key codes to their corresponding buttons to click var triggers = { D: 'default', N: 'narrow', L: 'large' }; // Call setBodyClass() when a button is clicked. $('#switcher').click(function(event) { if ($(event.target).is('button')) { var bodyClass = event.target.id.split('-')[1]; setBodyClass(bodyClass); } }); // Call setBodyClass() when a key is pressed. // Use keydown/keyup to identify key, keypress to identify resulting letter. $(document).keyup(function (event) { var key = String.fromCharCode(event.which); if (key in triggers) { setBodyClass(triggers[key]); } }); // Exercise 1. $('.author').click(function () { $(this).toggleClass('selected'); }); // Exercise 2. $('.chapter-title').dblclick(function () { $(this).siblings().toggleClass('hidden'); }); // Exercise 3. var triggerValues = values(triggers); setBodyClass('default'); $('body').keyup(function (event) { if (event.which !== 39) { return; } // Assume the only classes are those handled by this code. Not true in the // general case but sufficient for the exercise. var currentClass = $('body').attr('class'); var currentIndex = triggerValues.indexOf(currentClass); var nextIndex = (currentIndex + 1) % triggerValues.length; var nextClass = triggerValues[nextIndex]; setBodyClass(nextClass); }); // Exercise 4. var tracker = function(event) { console.log(event.pageX, event.pageY); }; var jP = $('p'); jP.mouseenter(function () { $(this).mousemove(tracker); }).mouseleave(function () { $(this).off('mousemove'); }); // Exercise 5. var trackerY = 0; $('html').mousedown(function (event) { trackerY = event.pageY; console.log('Pressed at ' + trackerY); }).mouseup(function (event) { console.log('Released at ' + event.pageY); if (event.pageY < trackerY) { jP.addClass('hidden'); } else if (event.pageY > trackerY) { jP.removeClass('hidden'); } }); });