chunk-043-author-box.js

/*!
 * RX Theme - Author Box Advanced Chunk
 * File: assets/static-js/static-chunks-js/chunk-043-author-box.js
 * Version: 1.0.0
 *
 * Purpose:
 * Advanced frontend author box functionality for RX Theme.
 *
 * Features:
 * - Safe initialization
 * - Multiple author boxes support
 * - Lazy enhancement with IntersectionObserver
 * - Author bio expand/collapse
 * - Accessible buttons
 * - Social link validation
 * - Copy author profile link
 * - Native share support
 * - Follow button UI state
 * - Author expertise tags
 * - Reading stats enhancement
 * - JSON-LD Person schema injection
 * - Dark/light preference helper class
 * - Event hooks for future RX Theme modules
 */

(function () {
  'use strict';

  /**
   * Global namespace
   */
  window.RXTheme = window.RXTheme || {};
  window.RXTheme.chunks = window.RXTheme.chunks || {};

  const RXAuthorBox = {
    version: '1.0.0',

    selectors: {
      authorBox: '[data-rx-author-box], .rx-author-box',
      avatar: '[data-rx-author-avatar], .rx-author-avatar',
      name: '[data-rx-author-name], .rx-author-name',
      role: '[data-rx-author-role], .rx-author-role',
      bio: '[data-rx-author-bio], .rx-author-bio',
      bioText: '[data-rx-author-bio-text], .rx-author-bio-text',
      bioToggle: '[data-rx-author-bio-toggle], .rx-author-bio-toggle',
      socialList: '[data-rx-author-socials], .rx-author-socials',
      socialLink: '[data-rx-author-social-link], .rx-author-social-link',
      profileLink: '[data-rx-author-profile-link], .rx-author-profile-link',
      copyLink: '[data-rx-author-copy-link], .rx-author-copy-link',
      shareButton: '[data-rx-author-share], .rx-author-share',
      followButton: '[data-rx-author-follow], .rx-author-follow',
      expertise: '[data-rx-author-expertise], .rx-author-expertise',
      stats: '[data-rx-author-stats], .rx-author-stats'
    },

    classes: {
      initialized: 'rx-author-box--initialized',
      visible: 'rx-author-box--visible',
      enhanced: 'rx-author-box--enhanced',
      expanded: 'rx-author-box--expanded',
      collapsed: 'rx-author-box--collapsed',
      hasAvatar: 'rx-author-box--has-avatar',
      hasSocials: 'rx-author-box--has-socials',
      hasBio: 'rx-author-box--has-bio',
      noBio: 'rx-author-box--no-bio',
      loading: 'rx-author-box--loading',
      copied: 'rx-author-copy-link--copied',
      followed: 'rx-author-follow--active',
      shareSupported: 'rx-author-box--share-supported',
      darkMode: 'rx-author-box--dark-preferred',
      lightMode: 'rx-author-box--light-preferred'
    },

    defaults: {
      bioMaxLength: 230,
      enableSchema: true,
      enableShare: true,
      enableCopyLink: true,
      enableFollowState: true,
      enableLazyEnhance: true,
      enableReadingStats: true,
      enableExternalLinkSecurity: true,
      enableThemePreferenceClass: true,
      copySuccessText: 'Copied',
      copyDefaultText: 'Copy link',
      followText: 'Follow',
      followingText: 'Following',
      readMoreText: 'Read more',
      showLessText: 'Show less',
      animationDelay: 80
    },

    state: {
      boxes: [],
      observer: null,
      initialized: false
    },

    init(options = {}) {
      if (this.state.initialized) {
        return;
      }

      this.settings = Object.assign({}, this.defaults, options);
      this.state.initialized = true;

      this.dispatch('rxAuthorBoxBeforeInit');

      this.collectBoxes();

      if (!this.state.boxes.length) {
        return;
      }

      this.applyThemePreferenceClass();

      if (this.settings.enableLazyEnhance && 'IntersectionObserver' in window) {
        this.initLazyObserver();
      } else {
        this.state.boxes.forEach((box) => this.enhanceBox(box));
      }

      this.bindGlobalEvents();

      this.dispatch('rxAuthorBoxAfterInit', {
        count: this.state.boxes.length
      });
    },

    collectBoxes() {
      const boxes = Array.from(document.querySelectorAll(this.selectors.authorBox));

      this.state.boxes = boxes.filter((box) => {
        return box instanceof HTMLElement;
      });
    },

    initLazyObserver() {
      this.state.observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              this.enhanceBox(entry.target);
              this.state.observer.unobserve(entry.target);
            }
          });
        },
        {
          root: null,
          rootMargin: '160px 0px',
          threshold: 0.05
        }
      );

      this.state.boxes.forEach((box) => {
        this.state.observer.observe(box);
      });
    },

    enhanceBox(box) {
      if (!box || box.classList.contains(this.classes.initialized)) {
        return;
      }

      box.classList.add(this.classes.initialized);
      box.classList.add(this.classes.loading);

      const delay = Number(box.dataset.rxAuthorDelay || this.settings.animationDelay);

      window.setTimeout(() => {
        this.prepareBox(box);
        this.prepareAvatar(box);
        this.prepareBio(box);
        this.prepareSocialLinks(box);
        this.prepareProfileLink(box);
        this.prepareCopyButton(box);
        this.prepareShareButton(box);
        this.prepareFollowButton(box);
        this.prepareExpertise(box);
        this.prepareReadingStats(box);
        this.injectPersonSchema(box);

        box.classList.remove(this.classes.loading);
        box.classList.add(this.classes.enhanced);
        box.classList.add(this.classes.visible);

        this.dispatch('rxAuthorBoxEnhanced', { box });
      }, delay);
    },

    prepareBox(box) {
      const name = this.getAuthorName(box);
      const bio = this.getAuthorBio(box);
      const avatar = box.querySelector(this.selectors.avatar);
      const socials = box.querySelectorAll(this.selectors.socialLink);

      if (name) {
        box.setAttribute('data-rx-author-ready', 'true');
      }

      if (avatar) {
        box.classList.add(this.classes.hasAvatar);
      }

      if (bio) {
        box.classList.add(this.classes.hasBio);
      } else {
        box.classList.add(this.classes.noBio);
      }

      if (socials.length) {
        box.classList.add(this.classes.hasSocials);
      }

      if (!box.getAttribute('role')) {
        box.setAttribute('role', 'region');
      }

      if (!box.getAttribute('aria-label')) {
        box.setAttribute('aria-label', name ? `Author information: ${name}` : 'Author information');
      }
    },

    prepareAvatar(box) {
      const avatar = box.querySelector(this.selectors.avatar);

      if (!avatar) {
        return;
      }

      if (avatar.tagName.toLowerCase() === 'img') {
        if (!avatar.getAttribute('alt')) {
          const name = this.getAuthorName(box);
          avatar.setAttribute('alt', name ? `${name} profile photo` : 'Author profile photo');
        }

        if (!avatar.getAttribute('loading')) {
          avatar.setAttribute('loading', 'lazy');
        }

        if (!avatar.getAttribute('decoding')) {
          avatar.setAttribute('decoding', 'async');
        }

        avatar.addEventListener('error', () => {
          avatar.classList.add('rx-author-avatar--error');
          this.dispatch('rxAuthorAvatarError', { box, avatar });
        });
      }
    },

    prepareBio(box) {
      const bio = box.querySelector(this.selectors.bio);
      const bioText = box.querySelector(this.selectors.bioText) || bio;

      if (!bio || !bioText) {
        return;
      }

      const fullText = this.cleanText(bioText.textContent);
      const maxLength = Number(box.dataset.rxAuthorBioMax || this.settings.bioMaxLength);

      if (!fullText || fullText.length <= maxLength) {
        return;
      }

      const shortText = this.truncateText(fullText, maxLength);
      const toggle = this.createBioToggle(box);

      bioText.dataset.rxFullText = fullText;
      bioText.dataset.rxShortText = shortText;
      bioText.textContent = shortText;

      bio.classList.add(this.classes.collapsed);
      box.classList.add(this.classes.collapsed);

      if (!bio.contains(toggle)) {
        bio.appendChild(document.createTextNode(' '));
        bio.appendChild(toggle);
      }
    },

    createBioToggle(box) {
      let toggle = box.querySelector(this.selectors.bioToggle);

      if (!toggle) {
        toggle = document.createElement('button');
        toggle.type = 'button';
        toggle.className = 'rx-author-bio-toggle';
        toggle.setAttribute('data-rx-author-bio-toggle', 'true');
      }

      toggle.textContent = this.settings.readMoreText;
      toggle.setAttribute('aria-expanded', 'false');

      toggle.addEventListener('click', () => {
        this.toggleBio(box, toggle);
      });

      return toggle;
    },

    toggleBio(box, toggle) {
      const bio = box.querySelector(this.selectors.bio);
      const bioText = box.querySelector(this.selectors.bioText) || bio;

      if (!bio || !bioText) {
        return;
      }

      const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
      const fullText = bioText.dataset.rxFullText;
      const shortText = bioText.dataset.rxShortText;

      if (!fullText || !shortText) {
        return;
      }

      if (isExpanded) {
        bioText.textContent = shortText;
        toggle.textContent = this.settings.readMoreText;
        toggle.setAttribute('aria-expanded', 'false');
        bio.classList.remove(this.classes.expanded);
        bio.classList.add(this.classes.collapsed);
        box.classList.remove(this.classes.expanded);
        box.classList.add(this.classes.collapsed);
      } else {
        bioText.textContent = fullText;
        toggle.textContent = this.settings.showLessText;
        toggle.setAttribute('aria-expanded', 'true');
        bio.classList.remove(this.classes.collapsed);
        bio.classList.add(this.classes.expanded);
        box.classList.remove(this.classes.collapsed);
        box.classList.add(this.classes.expanded);
      }

      bioText.appendChild(document.createTextNode(' '));
      bioText.appendChild(toggle);

      this.dispatch('rxAuthorBioToggled', {
        box,
        expanded: !isExpanded
      });
    },

    prepareSocialLinks(box) {
      const links = Array.from(box.querySelectorAll(this.selectors.socialLink));

      if (!links.length) {
        return;
      }

      links.forEach((link) => {
        if (!(link instanceof HTMLAnchorElement)) {
          return;
        }

        const href = link.getAttribute('href') || '';

        if (!this.isSafeUrl(href)) {
          link.setAttribute('href', '#');
          link.setAttribute('aria-disabled', 'true');
          link.classList.add('rx-author-social-link--disabled');
          return;
        }

        if (this.settings.enableExternalLinkSecurity && this.isExternalUrl(href)) {
          link.setAttribute('target', '_blank');
          link.setAttribute('rel', 'noopener noreferrer nofollow');
        }

        if (!link.getAttribute('aria-label')) {
          const label = this.buildSocialLabel(link, box);
          link.setAttribute('aria-label', label);
        }
      });
    },

    buildSocialLabel(link, box) {
      const name = this.getAuthorName(box) || 'Author';
      const platform =
        link.dataset.rxAuthorSocial ||
        link.dataset.platform ||
        this.detectSocialPlatform(link.href) ||
        this.cleanText(link.textContent) ||
        'social profile';

      return `${name} on ${platform}`;
    },

    detectSocialPlatform(url) {
      const value = String(url || '').toLowerCase();

      const platforms = [
        'facebook',
        'twitter',
        'x.com',
        'linkedin',
        'instagram',
        'youtube',
        'github',
        'medium',
        'researchgate',
        'orcid',
        'pubmed',
        'scholar.google',
        'threads',
        'tiktok'
      ];

      const found = platforms.find((platform) => value.includes(platform));

      if (!found) {
        return '';
      }

      if (found === 'x.com') {
        return 'X';
      }

      if (found === 'scholar.google') {
        return 'Google Scholar';
      }

      return found.charAt(0).toUpperCase() + found.slice(1);
    },

    prepareProfileLink(box) {
      const profileLinks = Array.from(box.querySelectorAll(this.selectors.profileLink));

      profileLinks.forEach((link) => {
        if (!(link instanceof HTMLAnchorElement)) {
          return;
        }

        if (!link.getAttribute('aria-label')) {
          const name = this.getAuthorName(box);
          link.setAttribute('aria-label', name ? `View all articles by ${name}` : 'View author profile');
        }
      });
    },

    prepareCopyButton(box) {
      if (!this.settings.enableCopyLink) {
        return;
      }

      const button = box.querySelector(this.selectors.copyLink);

      if (!button) {
        return;
      }

      const profileUrl = this.getProfileUrl(box);

      if (!profileUrl) {
        button.setAttribute('disabled', 'disabled');
        button.setAttribute('aria-disabled', 'true');
        return;
      }

      if (!button.getAttribute('type')) {
        button.setAttribute('type', 'button');
      }

      if (!button.getAttribute('aria-label')) {
        button.setAttribute('aria-label', 'Copy author profile link');
      }

      button.addEventListener('click', async () => {
        const success = await this.copyToClipboard(profileUrl);

        if (success) {
          this.showCopySuccess(button);
          this.dispatch('rxAuthorProfileLinkCopied', {
            box,
            url: profileUrl
          });
        }
      });
    },

    showCopySuccess(button) {
      const oldText = button.textContent;

      button.classList.add(this.classes.copied);
      button.textContent = button.dataset.rxCopiedText || this.settings.copySuccessText;

      window.setTimeout(() => {
        button.classList.remove(this.classes.copied);
        button.textContent = oldText || this.settings.copyDefaultText;
      }, 1800);
    },

    async copyToClipboard(text) {
      try {
        if (navigator.clipboard && window.isSecureContext) {
          await navigator.clipboard.writeText(text);
          return true;
        }

        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.setAttribute('readonly', '');
        textarea.style.position = 'fixed';
        textarea.style.top = '-9999px';
        textarea.style.left = '-9999px';

        document.body.appendChild(textarea);
        textarea.select();

        const copied = document.execCommand('copy');
        document.body.removeChild(textarea);

        return copied;
      } catch (error) {
        this.dispatch('rxAuthorCopyFailed', { error });
        return false;
      }
    },

    prepareShareButton(box) {
      if (!this.settings.enableShare) {
        return;
      }

      const button = box.querySelector(this.selectors.shareButton);

      if (!button) {
        return;
      }

      const profileUrl = this.getProfileUrl(box);
      const authorName = this.getAuthorName(box);
      const shareTitle = authorName ? `${authorName} - Author Profile` : document.title;

      if (!button.getAttribute('type')) {
        button.setAttribute('type', 'button');
      }

      if (!button.getAttribute('aria-label')) {
        button.setAttribute('aria-label', 'Share author profile');
      }

      if (navigator.share) {
        box.classList.add(this.classes.shareSupported);
      }

      button.addEventListener('click', async () => {
        if (navigator.share && profileUrl) {
          try {
            await navigator.share({
              title: shareTitle,
              text: authorName ? `Read articles by ${authorName}` : 'Author profile',
              url: profileUrl
            });

            this.dispatch('rxAuthorProfileShared', {
              box,
              url: profileUrl
            });
          } catch (error) {
            this.dispatch('rxAuthorShareCancelled', { box, error });
          }
        } else if (profileUrl) {
          const copied = await this.copyToClipboard(profileUrl);

          if (copied) {
            this.showCopySuccess(button);
          }
        }
      });
    },

    prepareFollowButton(box) {
      if (!this.settings.enableFollowState) {
        return;
      }

      const button = box.querySelector(this.selectors.followButton);

      if (!button) {
        return;
      }

      const authorId = this.getAuthorId(box);

      if (!button.getAttribute('type')) {
        button.setAttribute('type', 'button');
      }

      if (!button.getAttribute('aria-pressed')) {
        button.setAttribute('aria-pressed', 'false');
      }

      const storageKey = authorId ? `rx_author_follow_${authorId}` : '';

      if (storageKey && localStorage.getItem(storageKey) === '1') {
        this.setFollowState(button, true);
      }

      button.addEventListener('click', () => {
        const isActive = button.getAttribute('aria-pressed') === 'true';
        const nextState = !isActive;

        this.setFollowState(button, nextState);

        if (storageKey) {
          localStorage.setItem(storageKey, nextState ? '1' : '0');
        }

        this.dispatch('rxAuthorFollowChanged', {
          box,
          authorId,
          following: nextState
        });
      });
    },

    setFollowState(button, active) {
      button.setAttribute('aria-pressed', active ? 'true' : 'false');
      button.classList.toggle(this.classes.followed, active);
      button.textContent = active
        ? button.dataset.rxFollowingText || this.settings.followingText
        : button.dataset.rxFollowText || this.settings.followText;
    },

    prepareExpertise(box) {
      const expertise = box.querySelector(this.selectors.expertise);

      if (!expertise) {
        return;
      }

      const rawItems =
        expertise.dataset.rxAuthorExpertise ||
        expertise.getAttribute('data-expertise') ||
        '';

      if (!rawItems) {
        return;
      }

      const items = rawItems
        .split(',')
        .map((item) => this.cleanText(item))
        .filter(Boolean)
        .slice(0, 12);

      if (!items.length) {
        return;
      }

      expertise.innerHTML = '';

      const list = document.createElement('ul');
      list.className = 'rx-author-expertise-list';

      items.forEach((item) => {
        const li = document.createElement('li');
        li.className = 'rx-author-expertise-item';
        li.textContent = item;
        list.appendChild(li);
      });

      expertise.appendChild(list);
      expertise.setAttribute('aria-label', 'Author expertise');
    },

    prepareReadingStats(box) {
      if (!this.settings.enableReadingStats) {
        return;
      }

      const stats = box.querySelector(this.selectors.stats);

      if (!stats) {
        return;
      }

      const posts = Number(box.dataset.rxAuthorPosts || stats.dataset.rxAuthorPosts || 0);
      const reviewed = Number(box.dataset.rxAuthorReviewed || stats.dataset.rxAuthorReviewed || 0);
      const updated = box.dataset.rxAuthorUpdated || stats.dataset.rxAuthorUpdated || '';

      const fragments = [];

      if (posts > 0) {
        fragments.push(`${posts} article${posts > 1 ? 's' : ''}`);
      }

      if (reviewed > 0) {
        fragments.push(`${reviewed} medically reviewed`);
      }

      if (updated) {
        fragments.push(`Updated ${updated}`);
      }

      if (!fragments.length) {
        return;
      }

      stats.textContent = fragments.join(' · ');
      stats.setAttribute('aria-label', `Author statistics: ${fragments.join(', ')}`);
    },

    injectPersonSchema(box) {
      if (!this.settings.enableSchema) {
        return;
      }

      if (box.dataset.rxSchemaInjected === 'true') {
        return;
      }

      const name = this.getAuthorName(box);

      if (!name) {
        return;
      }

      const profileUrl = this.getProfileUrl(box);
      const avatarUrl = this.getAvatarUrl(box);
      const bio = this.getAuthorBio(box);
      const role = this.getAuthorRole(box);
      const socials = this.getSocialUrls(box);

      const schema = {
        '@context': 'https://schema.org',
        '@type': 'Person',
        name
      };

      if (profileUrl) {
        schema.url = profileUrl;
      }

      if (avatarUrl) {
        schema.image = avatarUrl;
      }

      if (bio) {
        schema.description = bio;
      }

      if (role) {
        schema.jobTitle = role;
      }

      if (socials.length) {
        schema.sameAs = socials;
      }

      const script = document.createElement('script');
      script.type = 'application/ld+json';
      script.className = 'rx-author-person-schema';
      script.textContent = JSON.stringify(schema);

      box.appendChild(script);
      box.dataset.rxSchemaInjected = 'true';

      this.dispatch('rxAuthorSchemaInjected', {
        box,
        schema
      });
    },

    applyThemePreferenceClass() {
      if (!this.settings.enableThemePreferenceClass) {
        return;
      }

      const prefersDark = window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches;

      this.state.boxes.forEach((box) => {
        box.classList.toggle(this.classes.darkMode, prefersDark);
        box.classList.toggle(this.classes.lightMode, !prefersDark);
      });
    },

    bindGlobalEvents() {
      document.addEventListener('keydown', (event) => {
        if (event.key !== 'Escape') {
          return;
        }

        this.state.boxes.forEach((box) => {
          const toggle = box.querySelector(this.selectors.bioToggle);

          if (toggle && toggle.getAttribute('aria-expanded') === 'true') {
            this.toggleBio(box, toggle);
          }
        });
      });

      if (window.matchMedia) {
        const media = window.matchMedia('(prefers-color-scheme: dark)');

        if (typeof media.addEventListener === 'function') {
          media.addEventListener('change', () => this.applyThemePreferenceClass());
        }
      }
    },

    getAuthorName(box) {
      const el = box.querySelector(this.selectors.name);
      return this.cleanText(
        box.dataset.rxAuthorName ||
        (el ? el.textContent : '')
      );
    },

    getAuthorRole(box) {
      const el = box.querySelector(this.selectors.role);
      return this.cleanText(
        box.dataset.rxAuthorRole ||
        (el ? el.textContent : '')
      );
    },

    getAuthorBio(box) {
      const el = box.querySelector(this.selectors.bioText) || box.querySelector(this.selectors.bio);
      return this.cleanText(
        box.dataset.rxAuthorBio ||
        (el ? el.textContent : '')
      );
    },

    getAuthorId(box) {
      return this.cleanText(
        box.dataset.rxAuthorId ||
        box.getAttribute('data-author-id') ||
        this.slugify(this.getAuthorName(box))
      );
    },

    getProfileUrl(box) {
      const link = box.querySelector(this.selectors.profileLink);

      const url =
        box.dataset.rxAuthorUrl ||
        box.dataset.rxProfileUrl ||
        (link instanceof HTMLAnchorElement ? link.href : '');

      return this.isSafeUrl(url) ? url : '';
    },

    getAvatarUrl(box) {
      const avatar = box.querySelector(this.selectors.avatar);

      if (avatar instanceof HTMLImageElement && avatar.currentSrc) {
        return avatar.currentSrc;
      }

      if (avatar instanceof HTMLImageElement && avatar.src) {
        return avatar.src;
      }

      return '';
    },

    getSocialUrls(box) {
      return Array.from(box.querySelectorAll(this.selectors.socialLink))
        .filter((link) => link instanceof HTMLAnchorElement)
        .map((link) => link.href)
        .filter((url) => this.isSafeUrl(url))
        .slice(0, 20);
    },

    isSafeUrl(url) {
      if (!url || typeof url !== 'string') {
        return false;
      }

      const trimmed = url.trim();

      if (
        trimmed.startsWith('javascript:') ||
        trimmed.startsWith('data:') ||
        trimmed.startsWith('vbscript:')
      ) {
        return false;
      }

      return true;
    },

    isExternalUrl(url) {
      try {
        const parsed = new URL(url, window.location.href);
        return parsed.origin !== window.location.origin;
      } catch (error) {
        return false;
      }
    },

    truncateText(text, maxLength) {
      const clean = this.cleanText(text);

      if (clean.length <= maxLength) {
        return clean;
      }

      const sliced = clean.slice(0, maxLength);
      const lastSpace = sliced.lastIndexOf(' ');

      return `${sliced.slice(0, lastSpace > 40 ? lastSpace : maxLength).trim()}…`;
    },

    cleanText(text) {
      return String(text || '')
        .replace(/\s+/g, ' ')
        .trim();
    },

    slugify(text) {
      return this.cleanText(text)
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
    },

    dispatch(name, detail = {}) {
      document.dispatchEvent(
        new CustomEvent(name, {
          bubbles: true,
          detail
        })
      );
    }
  };

  window.RXTheme.chunks.authorBox = RXAuthorBox;

  function bootAuthorBox() {
    RXAuthorBox.init(window.rxAuthorBoxSettings || {});
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bootAuthorBox, { once: true });
  } else {
    bootAuthorBox();
  }
})();

wp_enqueue_script(
    'rx-author-box-chunk',
    get_template_directory_uri() . '/assets/static-js/static-chunks-js/chunk-043-author-box.js',
    array(),
    wp_get_theme()->get('Version'),
    true
);

document.addEventListener('rxAuthorBoxEnhanced', function (event) {
  console.log('Author box ready:', event.detail.box);
});