WordPress.org
Get WordPress

Plugin Directory

Changeset 3440218


Ignore:
Timestamp:
01/15/2026 10:16:01 AM (3 months ago)
Author:
discko
Message:

Fix bubble arrow rendering and remove preview hover glow

Location:
discko/trunk/admin
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • discko/trunk/admin/admin-scripts.js

    r3440185 r3440218  
    466466        // ============================================
    467467
     468        // Get bubble color from wpColorPicker or input
     469        function getBubbleColor(overrideColor) {
     470            if (overrideColor && typeof overrideColor === 'string') return overrideColor;
     471            const $input = $('#discko_bubble_color');
     472            if (!$input.length) return '#6C5CE7';
     473            try {
     474                const color = $input.wpColorPicker('color');
     475                if (color && typeof color === 'string') return color;
     476            } catch (e) {
     477                const val = $input.val();
     478                if (val && typeof val === 'string') return val;
     479            }
     480            return '#6C5CE7';
     481        }
     482
    468483        // Update preview en temps réel
    469484        function updateLivePreview(overrideColor) {
    … …  
    472487            const showBubble = $('#discko_show_bubble').is(':checked');
    473488            const bubbleText = $('#discko_hover_text').val() || '';
    474             // Use overrideColor if provided (from color picker), otherwise read from input
    475             const bubbleColor = overrideColor || $('#discko_bubble_color').val() || '#6C5CE7';
     489            const bubbleColor = getBubbleColor(overrideColor);
    476490            const corner = $('input[name="discko_button_corner"]:checked').val() || 'bottom-right';
    477491
    … …  
    536550            });
    537551
    538             // Remove/add classes for bubble positioning
    539             $stage.removeClass('discko-button-left discko-position-middle');
     552            // Remove/add class for flex direction (button/bubble order)
     553            $stage.removeClass('discko-button-left');
    540554
    541555            // Apply position based on corner - exactly like on the website
    … …  
    549563                    break;
    550564                case 'top-middle':
    551                     // Center only the button, not the whole group (button + bubble)
    552565                    const buttonWidth = $stage.find('.discko-preview-button').outerWidth() || 60;
    553                     const offset = buttonWidth / 2;
    554                     $stage.css({ 'top': distTop + 'px', 'left': '50%', 'transform': 'translateX(calc(-' + offset + 'px))' });
    555                     $stage.addClass('discko-button-left discko-position-middle'); // Bubble on right, only button centered
     566                    $stage.css({ 'top': distTop + 'px', 'left': '50%', 'transform': 'translateX(-' + (buttonWidth / 2) + 'px)' });
     567                    $stage.addClass('discko-button-left');
    556568                    break;
    557569                case 'bottom-left':
    558570                    $stage.css({ 'bottom': distBottom + 'px', 'left': distLeft + 'px' });
    559                     $stage.addClass('discko-button-left'); // Bubble on right
     571                    $stage.addClass('discko-button-left');
    560572                    break;
    561573                case 'bottom-right':
    … …  
    563575                    break;
    564576                case 'bottom-middle':
    565                     // Center only the button, not the whole group (button + bubble)
    566577                    const buttonWidthBottom = $stage.find('.discko-preview-button').outerWidth() || 60;
    567                     const offsetBottom = buttonWidthBottom / 2;
    568                     $stage.css({ 'bottom': distBottom + 'px', 'left': '50%', 'transform': 'translateX(calc(-' + offsetBottom + 'px))' });
    569                     $stage.addClass('discko-button-left discko-position-middle'); // Bubble on right, only button centered
     578                    $stage.css({ 'bottom': distBottom + 'px', 'left': '50%', 'transform': 'translateX(-' + (buttonWidthBottom / 2) + 'px)' });
     579                    $stage.addClass('discko-button-left');
    570580                    break;
    571581                default:
    … …  
    575585
    576586        function updateBubbleArrow(corner, bubbleColor) {
    577             // Inject style dynamically for ::after arrow colors
    578             let styleId = 'discko-bubble-arrow-style';
    579             let $style = $('#' + styleId);
    580             if ($style.length === 0) {
    581                 $style = $('<style id="' + styleId + '"></style>').appendTo('head');
    582             }
    583 
    584             // Set border-color for both arrow directions
    585             // When button on LEFT (.discko-button-left): arrow points LEFT (border-right has color)
    586             // When button on RIGHT (default): arrow points RIGHT (border-left has color)
    587             const css = `
    588                 .discko-preview-stage.discko-button-left .discko-preview-bubble::after {
     587            // Inject arrow styles via JS for reliable rendering
     588            let $style = $('#discko-bubble-arrow-style');
     589            if (!$style.length) {
     590                $style = $('<style id="discko-bubble-arrow-style"></style>').appendTo('head');
     591            }
     592
     593            // Left/middle positions: arrow points left. Right positions: arrow points right.
     594            const leftArrow = corner.includes('left') || corner.includes('middle');
     595
     596            $style.text(`
     597                #discko-live-bubble::after {
     598                    left: ${leftArrow ? '-6px' : 'auto'};
     599                    right: ${leftArrow ? 'auto' : '-6px'};
     600                    border-width: ${leftArrow ? '6px 6px 6px 0' : '6px 0 6px 6px'};
     601                    border-color: transparent ${leftArrow ? bubbleColor + ' transparent transparent' : 'transparent transparent ' + bubbleColor};
     602                }
     603                .discko-preview-stage-compact #discko-live-bubble::after {
     604                    left: -5px; right: auto;
     605                    border-width: 6px 6px 6px 0;
    589606                    border-color: transparent ${bubbleColor} transparent transparent;
    590607                }
    591                 .discko-preview-stage:not(.discko-button-left) .discko-preview-bubble::after {
    592                     border-color: transparent transparent transparent ${bubbleColor};
    593                 }
    594             `;
    595             $style.text(css);
     608            `);
    596609        }
    597610

  • discko/trunk/admin/admin-styles.css

    r3440185 r3440218  
    903903}
    904904
    905 /* Middle positions: keep flex like left mode, entire group is centered */
    906 .discko-preview-stage.discko-position-middle {
    907     /* Inherit flex display and direction from .discko-button-left */
    908     /* The left: 50% + transform: translateX(-50%) from JS will center the stage */
    909 }
    910 
    911 /* Arrow direction for bubble - when button on LEFT, bubble on RIGHT */
    912 .discko-preview-stage.discko-button-left .discko-preview-bubble::after {
    913     left: -6px;
    914     right: auto;
    915     border-width: 6px 6px 6px 0;
    916     /* Arrow points LEFT towards button */
    917 }
    918 
    919 /* Default: button on RIGHT or MIDDLE, bubble on LEFT - arrow points RIGHT */
    920 .discko-preview-stage:not(.discko-button-left) .discko-preview-bubble::after {
    921     right: -6px;
    922     left: auto;
    923     border-width: 6px 0 6px 6px;
    924     /* Arrow points RIGHT towards button */
    925 }
     905/* Arrow direction is handled dynamically via JS injection */
    926906
    927907/* Preview Button */
    … …  
    935915    justify-content: center;
    936916    transition: all 0.3s ease;
    937 }
    938 
    939 /* Orange glow on hover */
    940 .discko-preview-button::before {
    941     content: '';
    942     position: absolute;
    943     top: -2px;
    944     left: -2px;
    945     right: -2px;
    946     bottom: -2px;
    947     border-radius: 50%;
    948     background: linear-gradient(45deg, rgba(255, 107, 53, 0.2), rgba(255, 107, 53, 0.4));
    949     opacity: 0;
    950     transition: opacity 0.3s ease;
    951     z-index: -1;
    952 }
    953 
    954 .discko-preview-button:hover::before {
    955     opacity: 1;
    956917}
    957918
    … …  
    989950}
    990951
    991 /* Old arrow classes removed - now using .discko-preview-stage classes instead */
    992 
    993952/* Animations - only on hover */
    994953.discko-preview-button[data-animation="pulse"]:hover {
    … …  
    10411000.discko-preview-stage-compact .discko-preview-bubble {
    10421001    white-space: nowrap;
    1043     overflow: hidden;
    1044     text-overflow: ellipsis;
     1002    overflow: visible;
    10451003    max-width: 500px;
    10461004    padding: 8px 16px;
    … …  
    10481006}
    10491007
    1050 .discko-preview-stage-compact .discko-preview-bubble::after {
    1051     display: none;
    1052 }
     1008/* Arrow styles handled via JS injection */
    10531009
    10541010/* Compact mode activated */
Note: See TracChangeset for help on using the changeset viewer.