+ *
+ * JavaScript:
+ * document.addEventListener('DOMContentLoaded', function() {
+ * SwapImage.init();
+ * });
+ *
+ * CONSOLE API (for debugging/fun):
+ * SwapImage.enable() - Turn on image swapping
+ * SwapImage.disable() - Turn off image swapping
+ * SwapImage.toggle() - Toggle image swapping on/off
+ * SwapImage.isEnabled - Check if swapping is currently enabled (getter)
+ *
+ * ACCESSIBILITY:
+ * This is a visual-only easter egg and does not affect keyboard navigation
+ * or screen reader experience. The alt text remains unchanged during swap.
+ *
+ * @version 2.0.0 - Refactored with event delegation and module pattern
+ * @author Makeability Lab
+ * ============================================================================
+ */
-var _swapImageEnabled = true;
-console.log("Hi console friends 👋🏽,\n\nTo turn off our 'easter egg' swap, " +
- "in the console window, type 'toggleSwapImage(false)'.")
+const SwapImage = (function() {
+ 'use strict';
-function swapImage(imgElement) {
- if (_swapImageEnabled) {
- let temp = imgElement.src;
- imgElement.src = imgElement.dataset.altSrc;
- imgElement.dataset.altSrc = temp;
+ // ==========================================================================
+ // PRIVATE STATE
+ // ==========================================================================
+
+ /** Whether image swapping is currently enabled */
+ let enabled = true;
+
+ /** Selector for swappable images */
+ const SELECTOR = '.swap-image';
+
+
+ // ==========================================================================
+ // INITIALIZATION
+ // ==========================================================================
+
+ /**
+ * Initialize the swap image functionality.
+ * Sets up event delegation on the document for mouseenter/mouseleave events.
+ *
+ * @public
+ *
+ * @example
+ * document.addEventListener('DOMContentLoaded', function() {
+ * SwapImage.init();
+ * });
+ */
+ function init() {
+ // Use capture phase for event delegation with mouseenter/mouseleave
+ // These events don't bubble, so we need capture: true
+ document.addEventListener('mouseenter', handleMouseEnter, true);
+ document.addEventListener('mouseleave', handleMouseLeave, true);
+
+ // Friendly console message for curious developers
+ console.log(
+ "Hi console friends 👋🏽\n\n" +
+ "Spotted our easter egg? You can control it:\n" +
+ " SwapImage.disable() – Turn off image swapping\n" +
+ " SwapImage.enable() – Turn it back on\n" +
+ " SwapImage.toggle() – Toggle on/off\n" +
+ " SwapImage.isEnabled – Check current state\n"
+ );
}
-}
-function toggleSwapImage(swapImageEnabled=null) {
- if (swapImageEnabled == null) {
- _swapImageEnabled = !_swapImageEnabled;
- }else{
- _swapImageEnabled = swapImageEnabled;
+
+ // ==========================================================================
+ // EVENT HANDLERS
+ // ==========================================================================
+
+ /**
+ * Handle mouseenter events on swap-image elements.
+ * Swaps to the alternate image when mouse enters.
+ *
+ * @private
+ * @param {MouseEvent} event - The mouseenter event
+ */
+ function handleMouseEnter(event) {
+ if (!enabled) return;
+
+ const target = event.target;
+ if (target.matches && target.matches(SELECTOR)) {
+ swapImageSource(target);
+ }
+ }
+
+
+ /**
+ * Handle mouseleave events on swap-image elements.
+ * Swaps back to the original image when mouse leaves.
+ *
+ * @private
+ * @param {MouseEvent} event - The mouseleave event
+ */
+ function handleMouseLeave(event) {
+ if (!enabled) return;
+
+ const target = event.target;
+ if (target.matches && target.matches(SELECTOR)) {
+ swapImageSource(target);
+ }
}
- console.log("Swap image is now " + (_swapImageEnabled ? "enabled" : "disabled") + ".");
-}
+
+
+ // ==========================================================================
+ // CORE FUNCTIONALITY
+ // ==========================================================================
+
+ /**
+ * Swap an image's src with its data-alt-src value.
+ * The swap is bidirectional - calling twice restores the original.
+ *
+ * @private
+ * @param {HTMLImageElement} imgElement - The image element to swap
+ */
+ function swapImageSource(imgElement) {
+ const altSrc = imgElement.dataset.altSrc;
+
+ // Only swap if there's an alternate source defined
+ if (altSrc) {
+ // Store current src in data attribute
+ imgElement.dataset.altSrc = imgElement.src;
+ // Set new src from what was in data attribute
+ imgElement.src = altSrc;
+ }
+ }
+
+
+ // ==========================================================================
+ // PUBLIC API
+ // ==========================================================================
+
+ return {
+ /**
+ * Initialize swap image functionality.
+ * Call this once after DOM is ready.
+ */
+ init: init,
+
+ /**
+ * Enable image swapping.
+ *
+ * @example
+ * SwapImage.enable();
+ */
+ enable: function() {
+ enabled = true;
+ console.log('🖼️ Swap image enabled.');
+ },
+
+ /**
+ * Disable image swapping.
+ * Images will remain static on hover.
+ *
+ * @example
+ * SwapImage.disable();
+ */
+ disable: function() {
+ enabled = false;
+ console.log('🖼️ Swap image disabled.');
+ },
+
+ /**
+ * Toggle image swapping on/off.
+ *
+ * @returns {boolean} The new enabled state
+ *
+ * @example
+ * SwapImage.toggle(); // Returns true or false
+ */
+ toggle: function() {
+ enabled = !enabled;
+ console.log('🖼️ Swap image ' + (enabled ? 'enabled' : 'disabled') + '.');
+ return enabled;
+ },
+
+ /**
+ * Check if image swapping is currently enabled.
+ *
+ * @type {boolean}
+ * @readonly
+ *
+ * @example
+ * if (SwapImage.isEnabled) {
+ * console.log('Swapping is on!');
+ * }
+ */
+ get isEnabled() {
+ return enabled;
+ }
+ };
+
+})();
\ No newline at end of file
diff --git a/website/static/website/js/video-age.js b/website/static/website/js/video-age.js
new file mode 100644
index 00000000..d16f16e7
--- /dev/null
+++ b/website/static/website/js/video-age.js
@@ -0,0 +1,197 @@
+/**
+ * ============================================================================
+ * VIDEO AGE DISPLAY - Makeability Lab
+ * ============================================================================
+ *
+ * Displays humanized video age ("3 months ago") or future release dates
+ * for video snippets. Replaces the previous inline document.write() approach
+ * with a proper module that runs on DOMContentLoaded.
+ *
+ * FEATURES:
+ * - Displays relative time for past videos ("2 years ago")
+ * - Displays formatted date for future/scheduled videos ("Releases Jan 15, 2025")
+ * - Falls back to static date if humanizeDuration is unavailable
+ * - No inline JavaScript required
+ *
+ * USAGE:
+ * HTML (in video snippet):
+ *
+ *
+ *
+ *
+ * JavaScript (in page):
+ * document.addEventListener('DOMContentLoaded', function() {
+ * VideoAge.init();
+ * });
+ *
+ * DEPENDENCIES:
+ * - humanize-duration.js (optional, for relative time display)
+ *
+ * ACCESSIBILITY:
+ * - Uses