WordPress.org
Get WordPress

Plugin Directory

Changeset 3386858


Ignore:
Timestamp:
10/30/2025 06:57:57 AM (4 months ago)
Author:
cartcoder
Message:

updated version 4.0.2

File:
1 edited

Legend:

Unmodified
Added
Removed

  • accessibility-assistant/trunk/accessibility_assistant.php

    r3386832 r3386858  
    55    Description: ADA, EAA, AODA & WCAG Compliance Widget for Website Accessibility
    66    Author: CartCoder
    7     Version: 4.0.1
     7    Version: 4.0.2
    88    License: GPLv2 or later
    99    License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    743743        }
    744744      `;
     745
     746
    745747              document.head.appendChild(style);
     748
     749                        // ---  Add Tooltip CSS if hover titles are enabled ---
     750             
     751  if (widgetSettings.widget_title_on_hover === 0) {
     752    let tooltipStyle = document.createElement('style');
     753    document.head.appendChild(tooltipStyle);
     754
     755    let tooltipBefore = '';
     756    let tooltipAfter = '';
     757    let iconStyle = '';
     758
     759    switch (widgetSettings.desktop_position) {
     760      // Tooltip appears on LEFT side (widget on right)
     761      case 'aa-cc-center-right':
     762      case 'aa-cc-bottom-right':
     763      case 'aa-cc-top-right':
     764        tooltipBefore = `
     765          top: 55% !important;
     766          right: unset !important;
     767          left: 0 !important;
     768          border-left: 6px solid ${widgetSettings.widget_outercolor} !important;
     769          border-right: 6px solid transparent !important;
     770        `;
     771        tooltipAfter = `
     772          top: 55% !important;
     773          right: 100% !important;
     774          left: unset !important;
     775        `;
     776        iconStyle = `.aa-cc-iconimg { margin-left: 8px !important; }`;
     777        break;
     778
     779      // Tooltip appears on RIGHT side (widget on left)
     780      case 'aa-cc-center-left':
     781      case 'aa-cc-bottom-left':
     782      case 'aa-cc-top-left':
     783        tooltipBefore = `
     784          top: 55% !important;
     785          left: unset !important;
     786          right: 0 !important;
     787          border-right: 6px solid ${widgetSettings.widget_outercolor} !important;
     788          border-left: 6px solid transparent !important;
     789        `;
     790        tooltipAfter = `
     791          top: 55% !important;
     792          left: 100% !important;
     793          right: unset !important;
     794        `;
     795        iconStyle = `.aa-cc-iconimg { margin-right: 8px !important; }`;
     796        break;
     797
     798      // Default fallback
     799      default:
     800        tooltipBefore = `
     801          top: 55% !important;
     802          left: -11px !important;
     803          border-left: 6px solid ${widgetSettings.widget_outercolor} !important;
     804          border-right: 6px solid transparent !important;
     805        `;
     806        tooltipAfter = `
     807          top: 55% !important;
     808          right: 85px !important;
     809        `;
     810        iconStyle = `.aa-cc-iconimg { margin-left: 8px !important; }`;
     811    }
     812
     813    tooltipStyle.innerHTML = `
     814    @media (min-width: 1025px) {
     815      ${iconStyle}
     816      #aa-cc-fix-icon-body-loader {
     817        width: max-content !important;
     818        height: max-content !important;
     819      }
     820      #aa-cc-fix-icon-body-loader::before {
     821        content: "" !important;
     822        display: flex;
     823        position: absolute;
     824        transform: translateY(-50%);
     825        width: 0;
     826        height: 0;
     827        opacity: 0;
     828        border-top: 6px solid transparent;
     829        border-bottom: 6px solid transparent;
     830        ${tooltipBefore}
     831      }
     832      #aa-cc-fix-icon-body-loader::after {
     833        content: "Accessibility Assistant";
     834        position: absolute;
     835        transform: translateY(-50%);
     836        color: ${widgetSettings.widget_innercolor};
     837        background-color: ${widgetSettings.widget_outercolor};
     838        padding: 6px 10px;
     839        border-radius: 6px;
     840        font-size: 13px;
     841        white-space: nowrap;
     842        opacity: 0;
     843        pointer-events: none;
     844        transition: opacity 0.25s ease, transform 0.25s ease;
     845        width: fit-content;
     846        ${tooltipAfter}
     847      }
     848      #aa-cc-fix-icon-body-loader:hover::after,
     849      #aa-cc-fix-icon-body-loader:hover::before {
     850        opacity: 1;
     851      }
     852  }
     853    `;
     854  }
     855
     856if (widgetSettings.widget_title_on_hover === 0) {
     857              // --- Create <style> dynamically ---
     858              var t = document.createElement('style');
     859              document.head.appendChild(t);
     860
     861              let tooltipBefore = '';
     862              let tooltipAfter = '';
     863              let iconStyle = '';
     864
     865              switch (widgetSettings.desktop_position) {
     866                // Tooltip appears on LEFT side (widget on right)
     867                case 'aa-cc-center-right':
     868                case 'aa-cc-bottom-right':
     869                case 'aa-cc-top-right':
     870                  tooltipBefore = `
     871      top: 55% !important;
     872      right: unset !important;
     873      left: 0 !important;
     874      border-left: 6px solid ${widgetSettings.widget_outercolor} !important;
     875      border-right: 6px solid transparent !important;
     876    `;
     877                  tooltipAfter = `
     878      top: 55% !important;
     879       right: 100% !important;
     880      left: unset !important;
     881    `;
     882                  // Icon margin for right-side widget (tooltip on left)
     883                  iconStyle = `
     884      .aa-cc-iconimg {
     885        margin-left: 8px !important;
     886      }
     887    `;
     888                  break;
     889
     890                  // Tooltip appears on RIGHT side (widget on left)
     891                case 'aa-cc-center-left':
     892                case 'aa-cc-bottom-left':
     893                case 'aa-cc-top-left':
     894                  tooltipBefore = `
     895      top: 55% !important;
     896      left: unset !important;
     897      right: 0 !important;
     898      border-right: 6px solid ${widgetSettings.widget_outercolor} !important;
     899      border-left: 6px solid transparent !important;
     900    `;
     901                  tooltipAfter = `
     902      top: 55% !important;
     903      left: 100% !important;
     904      right: unset !important;
     905    `;
     906                  // Icon margin for left-side widget (tooltip on right)
     907                  iconStyle = `
     908      .aa-cc-iconimg {
     909        margin-right: 8px !important;
     910      }
     911    `;
     912                  break;
     913
     914                  // Default fallback → tooltip on LEFT
     915                default:
     916                  tooltipBefore = `
     917      top: 55% !important;
     918      left: -11px !important;
     919      border-left: 6px solid ${widgetSettings.widget_outercolor} !important;
     920      border-right: 6px solid transparent !important;
     921    `;
     922                  tooltipAfter = `
     923      top: 55% !important;
     924      right: 85px !important;
     925    `;
     926                  iconStyle = `
     927      .aa-cc-iconimg {
     928        margin-left: 8px !important;
     929      }
     930    `;
     931              }
     932
     933              // --- Inject CSS dynamically ---
     934              t.innerHTML += `
     935              @media (min-width: 1025px) {
     936            ${iconStyle}
     937.aa-cc-fix-icon-body {
     938width: max-content !important;
     939height: max-content !important;
     940}
     941  #aa-cc-fix-icon-body::before {
     942    content: "" !important;
     943    display: flex;
     944    position: absolute;
     945    transform: translateY(-50%);
     946    width: 0;
     947    height: 0;
     948    opacity: 0;
     949    border-top: 6px solid transparent;
     950    border-bottom: 6px solid transparent;
     951    ${tooltipBefore}
     952  }
     953
     954  #aa-cc-fix-icon-body::after {
     955    content: "Accessibility Assistant";
     956    position: absolute;
     957    transform: translateY(-50%);
     958    color: ${widgetSettings.widget_innercolor};
     959    background-color: ${widgetSettings.widget_outercolor};
     960    padding: 6px 10px;
     961    border-radius: 6px;
     962    font-size: 13px;
     963    white-space: nowrap;
     964    opacity: 0;
     965    pointer-events: none;
     966    transition: opacity 0.25s ease, transform 0.25s ease;
     967    width: fit-content;
     968    ${tooltipAfter}
     969  }
     970
     971  #aa-cc-fix-icon-body:hover::after,
     972  #aa-cc-fix-icon-body:hover::before {
     973    opacity: 1;
     974  }
     975            }
     976`;
     977            }
     978
    746979            }
    747980            // exit;
Note: See TracChangeset for help on using the changeset viewer.