@omega.js/web 0.1.0

package/core/js/core/social-sharing.js

@@ -0,0 +1,293 @@
+import omega from '@omega.js/client';
+import { event } from '__main_assets__/js/libs/analytics.js';
+
+// Social Sharing Module
+export default function () {
+
+  // Configuration with defaults merged with supplied config
+  const config = omega.config.socialSharing.config;
+
+  // Platform configurations. Button colors are CSS-owned
+  // (core/_social-sharing.scss keys off the social-share-<platform> class) so
+  // themes can restyle without fighting inline styles.
+  const platforms = {
+    facebook: {
+      name: 'Facebook',
+      icon: 'brands/facebook',
+      shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={ url }'
+    },
+    twitter: {
+      name: 'X',
+      icon: 'brands/x-twitter',
+      shareUrl: 'https://twitter.com/intent/tweet?url={ url }&text={ title }'
+    },
+    linkedin: {
+      name: 'LinkedIn',
+      icon: 'brands/linkedin',
+      shareUrl: 'https://www.linkedin.com/sharing/share-offsite/?url={ url }'
+    },
+    pinterest: {
+      name: 'Pinterest',
+      icon: 'brands/pinterest',
+      shareUrl: 'https://pinterest.com/pin/create/button/?url={ url }&description={ title }'
+    },
+    reddit: {
+      name: 'Reddit',
+      icon: 'brands/reddit',
+      shareUrl: 'https://reddit.com/submit?url={ url }&title={ title }'
+    },
+    whatsapp: {
+      name: 'WhatsApp',
+      icon: 'brands/whatsapp',
+      shareUrl: 'https://api.whatsapp.com/send?text={ title }%20{ url }'
+    },
+    telegram: {
+      name: 'Telegram',
+      icon: 'brands/telegram',
+      shareUrl: 'https://t.me/share/url?url={ url }&text={ title }'
+    },
+    email: {
+      name: 'Email',
+      icon: 'regular/envelope',
+      shareUrl: 'mailto:?subject={ title }&body={ title }%20{ url }'
+    },
+    copy: {
+      name: 'Copy Link',
+      icon: 'solid/link',
+      handler: copyToClipboard
+    }
+  };
+
+  // Wait for DOM to be ready
+  omega.dom().ready().then(() => {
+    initSocialSharing();
+  });
+
+  function initSocialSharing() {
+    // Find all social sharing containers
+    const $containers = document.querySelectorAll(config.selector);
+
+    // Quit if no containers found
+    if ($containers.length === 0) {
+      console.warn('No social sharing containers found');
+      return;
+    }
+
+    // Setup each container
+    $containers.forEach($container => {
+      setupContainer($container);
+    });
+  }
+
+  function setupContainer($container) {
+    // Check if already initialized
+    if ($container.hasAttribute('data-social-share-initialized')) {
+      return;
+    }
+
+    // Get configuration from data attributes
+    const shareConfig = getShareConfig($container);
+
+    // Clear existing content if any
+    $container.innerHTML = '';
+
+    // Add Bootstrap spacing classes to container
+    $container.classList.add('d-flex', 'flex-wrap', 'gap-2');
+
+    // Create buttons for each platform
+    shareConfig.platforms.forEach(platformKey => {
+      const platform = platforms[platformKey];
+      if (!platform) {
+        console.warn(`Unknown social platform: ${platformKey}`);
+        return;
+      }
+
+      const $button = createShareButton(platform, platformKey, shareConfig);
+      $container.appendChild($button);
+    });
+
+    // Mark as initialized
+    $container.setAttribute('data-social-share-initialized', 'true');
+  }
+
+  function getShareConfig($container) {
+    // Get data from container attributes or use defaults
+    const url = $container.getAttribute('data-url') || window.location.href;
+    const title = $container.getAttribute('data-title') || document.title;
+    const $descriptionMeta = document.querySelector('meta[name="description"]');
+    const description = $container.getAttribute('data-description') ||
+                        $descriptionMeta?.content || '';
+    const $imageMeta = document.querySelector('meta[property="og:image"]');
+    const image = $container.getAttribute('data-image') ||
+                  $imageMeta?.content || '';
+
+    // Get platforms list
+    const platformsAttr = $container.getAttribute('data-platforms');
+    const platformsList = platformsAttr ?
+                          platformsAttr.split(',').map(p => p.trim()) :
+                          config.defaultPlatforms;
+
+    // Get display options
+    const showLabels = $container.hasAttribute('data-labels') ?
+                       $container.getAttribute('data-labels') !== 'false' :
+                       config.showLabels;
+    const buttonSize = $container.getAttribute('data-size') || 'sm';
+
+    return {
+      url: url,
+      title: title,
+      description: description,
+      image: image,
+      platforms: platformsList,
+      showLabels,
+      buttonSize
+    };
+  }
+
+  function createShareButton(platform, platformKey, shareConfig) {
+    const $button = document.createElement('button');
+
+    // Add classes
+    $button.className = `btn btn-${shareConfig.buttonSize} social-share-btn social-share-${platformKey} align-items-center justify-content-center ${config.buttonClass}`;
+
+    $button.setAttribute('data-platform', platformKey);
+
+    // Icon — plain fa-* markup; the client icon-renderer resolves it through
+    // the best-first asset chain (no hardcoded CDN URL — docs/shared/icons.md).
+    const [iconFamily, iconName] = platform.icon.split('/');
+    const $icon = document.createElement('i');
+    $icon.classList.add(`fa-${iconFamily}`, `fa-${iconName}`, 'fa-md');
+    $button.appendChild($icon);
+
+    // Add tooltip for accessibility
+    $button.setAttribute('title', `Share on ${platform.name}`);
+    $button.setAttribute('aria-label', `Share on ${platform.name}`);
+
+    // Add label if needed
+    if (shareConfig.showLabels) {
+      const $label = document.createElement('span');
+      $label.textContent = platform.name;
+      $label.classList.add('ms-2');
+      $button.appendChild($label);
+    }
+
+    // Add click handler
+    $button.addEventListener('click', (e) => {
+      e.preventDefault();
+      handleShare(platform, platformKey, shareConfig);
+    });
+
+    return $button;
+  }
+
+  function handleShare(platform, platformKey, shareConfig) {
+    // If platform has custom handler, use it
+    if (platform.handler) {
+      platform.handler(shareConfig);
+
+      return;
+    }
+
+    // Build share URL using URL constructor
+    const baseUrl = platform.shareUrl.split('?')[0];
+    const url = new URL(baseUrl);
+
+    // Parse the template and set search params
+    const templateParams = platform.shareUrl.split('?')[1];
+    if (templateParams) {
+      const params = new URLSearchParams(templateParams);
+      params.forEach((value, key) => {
+        let paramValue = value;
+        paramValue = paramValue.replace('{ url }', shareConfig.url);
+        paramValue = paramValue.replace('{ title }', shareConfig.title);
+        paramValue = paramValue.replace('{ description }', shareConfig.description);
+        paramValue = paramValue.replace('{ image }', shareConfig.image);
+        url.searchParams.set(key, paramValue);
+      });
+    }
+
+    const shareUrl = url.toString();
+
+    // Open in new window or tab
+    if (config.openInNewWindow && platformKey !== 'email') {
+      const windowFeatures = `width=${config.windowWidth},height=${config.windowHeight},menubar=no,toolbar=no,resizable=yes,scrollbars=yes`;
+      window.open(shareUrl, `share-${platformKey}`, windowFeatures);
+    } else {
+      // Open new tab
+      window.open(shareUrl, `_blank`);
+    }
+
+    // Track share event
+    trackShare(platformKey, shareConfig);
+  }
+
+  function copyToClipboard(shareConfig) {
+    const url = shareConfig.url;
+
+    // Use omega utility for clipboard copy — the confirmation is owed to a copy
+    // that actually happened, and a refused clipboard rejects since #726, so
+    // the failure lane is handled here rather than left unhandled.
+    omega.utilities().clipboardCopy(url)
+      .then(() => showCopySuccess())
+      .catch((error) => console.error('Failed to copy the share link:', error));
+
+    // Track
+    trackCopyLink(shareConfig);
+  }
+
+  function showCopySuccess() {
+    // The name class createShareButton gave the copy icon (`fa-link`), which
+    // the confirmation swaps for `fa-check` and puts back. Swapping CLASSES is
+    // the whole job: the runtime icon watcher (#619) re-renders an `<i>` whose
+    // classes change, so the check draws itself.
+    const [, copyIconName] = platforms.copy.icon.split('/');
+
+    // Find the copy button and temporarily change its text/icon
+    const $copyButtons = document.querySelectorAll('[data-platform="copy"]');
+    $copyButtons.forEach($button => {
+      const $icon = $button.querySelector('i');
+      const $label = $button.querySelector('span:not(.me-2)');
+
+      // Change to success state
+      if ($icon) {
+        $icon.classList.remove(`fa-${copyIconName}`);
+        $icon.classList.add('fa-check');
+      }
+      if ($label) {
+        $label.textContent = 'Copied!';
+      }
+
+      // Revert after 2 seconds
+      setTimeout(() => {
+        if ($icon) {
+          $icon.classList.remove('fa-check');
+          $icon.classList.add(`fa-${copyIconName}`);
+        }
+        // The label to put back is the platform's OWN name, never whatever the
+        // button reads at revert time: reading the DOM meant a second click
+        // inside this 2000ms window captured 'Copied!' as the original and
+        // renamed the button permanently
+        // ([#727](https://github.com/Omega-JS-Stack/omega/issues/727)).
+        if ($label) {
+          $label.textContent = platforms.copy.name;
+        }
+      }, 2000);
+    });
+  }
+
+  // Tracking functions
+  function trackShare(platformKey, shareConfig) {
+    event('share', {
+      method: platformKey,
+      content_type: 'article',
+      item_id: shareConfig.url
+    });
+  }
+
+  function trackCopyLink(shareConfig) {
+    event('copy_link', {
+      content_type: 'share',
+      item_id: shareConfig.url
+    });
+  }
+};

package/core/js/first-paint.js

@@ -0,0 +1,35 @@
+/**
+ * First-paint script — the one seam that runs BEFORE the main bundle.
+ *
+ * Its own asset entry (src/assets.js), loaded from core/head.html as a deferred
+ * module, so it executes the moment the DOM is parsed: ahead of the main
+ * bundle's module in the foot, and independent of images, fonts and firebase.
+ *
+ * It exists because of #585: the motion engine used to boot from core/js/main.js
+ * behind firebase/auth/analytics init, so every `[data-omega-reveal]` — hidden
+ * under the head's `html[data-omega-motion]` stamp — stayed invisible for the
+ * whole bundle download. On a cold cache that was seconds of blank hero, with
+ * LCP measured on an empty band. Same engine, same CSS transition, same feel;
+ * it just starts when the DOM is ready instead of when the app is.
+ *
+ * KEEP THIS SMALL, and keep it off the client singleton. Importing
+ * `@omega.js/client` here would drag the whole runtime into this bundle and
+ * rebuild the problem it exists to solve — the motion module's subpath is
+ * standalone by design. Anything else that must beat the big bundle (brand
+ * custom hero animations, #441, ride this same engine) belongs here, weighed
+ * against that budget.
+ */
+import { createMotion } from '@omega.js/client/modules/motion.js';
+
+const motion = createMotion();
+
+// start() owns its own timing: it scans immediately when the DOM is parsed
+// (which, for a deferred module, is now) and defers to DOMContentLoaded if the
+// document is somehow still loading. It is idempotent, and a MutationObserver
+// picks up anything rendered later.
+motion.start();
+
+// Handed to the main bundle's motion module, which registers it on the omega
+// library for programmatic access (omega.library().motion.scan(el)). One engine
+// per page: the bundle adopts this instance rather than starting a second.
+window.__omegaMotion = motion;

package/core/js/layouts/modules/utilities/redirect.js

@@ -0,0 +1,122 @@
+/**
+ * Redirect layout module (`js/layouts/modules/utilities/redirect.js`, #624) —
+ * the JS half of the `modules/utilities/redirect` layout, loaded on every page
+ * that layout renders and on nothing else.
+ *
+ * Handles intelligent redirects with querystring forwarding and development mode delays.
+ * Configuration is passed via data attributes on a #redirect-config element.
+ *
+ * It hops at IMPORT time rather than from a default export: a shortlink must
+ * not wait on the @omega.js/client boot the page's other bundles await, and the
+ * head's `<noscript>` meta-refresh is the no-JS half this must keep beating.
+ */
+import { createLogger } from '__main_assets__/js/libs/logger.js';
+import { siteUrl } from '__main_assets__/js/libs/path-prefix.js';
+
+const logger = createLogger('redirect');
+
+
+const performRedirect = () => {
+  // Get redirect configuration element
+  const $redirectConfig = document.getElementById('redirect-config');
+  if (!$redirectConfig) {
+    logger.error('Configuration element #redirect-config not found');
+    return;
+  }
+
+  // Extract configuration from data attributes
+  const config = {
+    url: $redirectConfig.getAttribute('data-url'),
+    querystring: $redirectConfig.getAttribute('data-querystring'),
+    siteUrl: $redirectConfig.getAttribute('data-site-url'),
+    environment: $redirectConfig.getAttribute('data-environment')
+  };
+
+  // Log configuration
+  logger.log('Configuration:', config);
+
+  // Validate required configuration
+  if (!config.siteUrl) {
+    logger.error('Site URL is required but not provided');
+    return;
+  }
+
+  // Parse URLs
+  const currentUrl = new URL(window.location.href);
+  const siteUrlBase = new URL(config.siteUrl);
+
+  // Determine redirect delay — slow in any non-production environment (development OR
+  // testing) so the redirect is observable; near-instant in production.
+  const isNonProduction = config.environment !== 'production';
+  const timeout = isNonProduction ? 3000 : 1;
+
+  // Build redirect URL
+  let redirectUrl;
+  try {
+    if (config.url) {
+      // Handle both relative and absolute URLs
+      const isAbsoluteUrl = /^https?:\/\//i.test(config.url);
+      if (isAbsoluteUrl) {
+        redirectUrl = new URL(config.url);
+      } else {
+        // Construct URL from site base, under the path the site is mounted at (#355)
+        const path = config.url.startsWith('/') ? config.url : `/${config.url}`;
+        redirectUrl = new URL(`${siteUrlBase.origin}${siteUrl(path)}`);
+      }
+    } else {
+      // Default to site home page
+      redirectUrl = new URL(siteUrlBase);
+    }
+  } catch (error) {
+    logger.error('Invalid redirect URL:', config.url, error);
+    redirectUrl = new URL(siteUrlBase);
+  }
+
+  // Handle querystring forwarding
+  const shouldForwardQuerystring = config.querystring !== 'false' && config.querystring !== false;
+  if (shouldForwardQuerystring && currentUrl.search) {
+    // Merge current URL params into redirect URL
+    for (const [key, value] of currentUrl.searchParams.entries()) {
+      redirectUrl.searchParams.set(key, value);
+    }
+    logger.log(`Forwarded ${currentUrl.searchParams.size} query parameters`);
+  }
+
+  // Forward the fragment (#billing deep-links from emails/bookmarks) unless
+  // the target declares its own
+  if (currentUrl.hash && !redirectUrl.hash) {
+    redirectUrl.hash = currentUrl.hash;
+    logger.log('Forwarded fragment:', currentUrl.hash);
+  }
+
+  const finalUrl = redirectUrl.toString();
+
+  // Log redirect details
+  console.group(logger.tag, 'Configuration');
+  console.log('Original URL:', config.url);
+  console.log('Querystring forwarding:', shouldForwardQuerystring);
+  console.log('Environment:', config.environment);
+  console.log('Delay:', `${timeout}ms`);
+  console.log('Final URL:', finalUrl);
+  console.groupEnd();
+
+  // Show user-friendly message in development
+  if (config.environment === 'development') {
+    logger.log(`Delaying redirect by ${timeout}ms for development mode`);
+  }
+
+  // Perform the redirect
+  setTimeout(() => {
+    window.location.href = finalUrl;
+  }, timeout);
+};
+
+// Initialize based on Manager availability and DOM state
+if (document.readyState === 'loading') {
+  // Wait for DOM if still loading
+  document.addEventListener('DOMContentLoaded', performRedirect);
+} else {
+  // DOM is already ready
+  performRedirect();
+}
+

package/core/js/libs/admin-helpers.js

@@ -0,0 +1,62 @@
+/**
+ * Shared Admin Page Helpers
+ */
+
+export function formatTimeAgo(timestamp) {
+  const now = Date.now();
+  const diff = now - timestamp;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (seconds < 60) {
+    return 'Just now';
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  if (days < 30) {
+    return `${days}d ago`;
+  }
+
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export function capitalize(str) {
+  if (!str) {
+    return '';
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function setStatValue(id, result) {
+  const $el = document.getElementById(id);
+  if (!$el) {
+    return;
+  }
+
+  if (result.status === 'fulfilled') {
+    $el.textContent = result.value.data().count.toLocaleString();
+  } else {
+    $el.innerHTML = '<span class="text-danger small">Error</span>';
+    console.error(`Failed to load ${id}:`, result.reason);
+  }
+}
+
+export function setStatSubValue(id, result, label) {
+  const $el = document.getElementById(id);
+  if (!$el) {
+    return;
+  }
+
+  if (result.status === 'fulfilled') {
+    const count = result.value.data().count;
+    $el.textContent = `+${count.toLocaleString()} ${label}`;
+    $el.classList.add('text-success');
+    $el.classList.remove('text-muted');
+  }
+}

package/core/js/libs/alert-dismiss.js

@@ -0,0 +1,35 @@
+// The site alerts' dismiss — the × on a `.main-alert` closes it
+// ([#719](https://github.com/Omega-JS-Stack/omega/issues/719)).
+//
+// #719 made the control a real `<button>` so it is keyboard-reachable and
+// named; this is what listening to it. Registered ONCE, from the global module
+// (core/js/main.js), so every page's alerts are dismissible before any page
+// module runs — the same lane the password eye rides.
+//
+// Delegated off `document` (the idiom core/js/core/app-shell.js and
+// appearance.js use for their own markup-driven controls), so the alerts stay
+// pure markup: `core/_includes/core/body.html` ships three of them hidden, a
+// fourth may be injected by a theme, and none of them needs wiring.
+
+export function setupAlertDismiss() {
+  document.addEventListener('click', (event) => {
+    const $close = event.target.closest('.main-alert-close');
+
+    if (!$close) {
+      return;
+    }
+
+    const $alert = $close.closest('.main-alert');
+
+    if (!$alert) {
+      return;
+    }
+
+    event.preventDefault();
+
+    // `hidden` is how the alerts ship (body.html stamps it on every one), so
+    // dismissing puts an alert back exactly where it started — whatever raised
+    // it can raise it again.
+    $alert.hidden = true;
+  });
+}