// source --> https://holyeli.eu/wp-content/plugins/blocks-elseclick/build/block-scroll-up/view.js?ver=1b720ad705e80ca407f6 
/******/ (() => { // webpackBootstrap
/*!*************************************!*\
  !*** ./src/block-scroll-up/view.js ***!
  \*************************************/
/**
 * Frontend functionality for the Scroll Up Button
 * 
 * This script handles the creation and behavior of the scroll-to-top button
 * based on the block's saved attributes.
 */

document.addEventListener('DOMContentLoaded', function () {
  // Find all scroll-up button containers on the page
  const scrollUpContainers = document.querySelectorAll('.scroll-up-button-container');
  if (scrollUpContainers.length === 0) {
    return;
  }

  // Process each container (though typically there should only be one)
  scrollUpContainers.forEach(function (container) {
    // Get attributes from data attributes
    const iconSvg = container.dataset.icon || 'arrow-up-alt2';
    const backgroundColor = container.dataset.bgColor || '#007cba';
    const iconColor = container.dataset.iconColor || '#ffffff';
    const size = parseInt(container.dataset.size) || 50;
    const position = container.dataset.position || 'bottom-right';
    const showAfterScroll = parseInt(container.dataset.showAfter) || 400;
    const borderRadius = parseInt(container.dataset.borderRadius) || 50;
    const opacity = parseFloat(container.dataset.opacity) || 0.8;

    // Create the scroll up button element
    const scrollUpButton = document.createElement('button');
    scrollUpButton.className = 'scroll-up-button';
    scrollUpButton.setAttribute('aria-label', 'Scroll to top');
    scrollUpButton.style.display = 'none';

    // Set button styles
    scrollUpButton.style.cssText = `
			position: fixed;
			z-index: 9999;
			width: ${size}px;
			height: ${size}px;
			background-color: ${backgroundColor};
			color: ${iconColor};
			border: none;
			border-radius: ${borderRadius}%;
			opacity: ${opacity};
			cursor: pointer;
			transition: all 0.3s ease;
			display: none;
			align-items: center;
			justify-content: center;
			font-size: ${size * 0.4}px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
		`;

    // Set position
    switch (position) {
      case 'bottom-left':
        scrollUpButton.style.bottom = '30px';
        scrollUpButton.style.left = '30px';
        break;
      case 'bottom-center':
        scrollUpButton.style.bottom = '30px';
        scrollUpButton.style.left = '50%';
        scrollUpButton.style.transform = 'translateX(-50%)';
        break;
      case 'bottom-right':
      default:
        scrollUpButton.style.bottom = '30px';
        scrollUpButton.style.right = '30px';
        break;
    }

    // Icon SVG mapping for different icon types
    const iconSvgMapping = {
      'arrow-up': '<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l8 8h-6v8h-4v-8H4z"/></svg>',
      'arrow-up-alt': '<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l8 8-1.4 1.4L13 5.8V20h-2V5.8l-5.6 5.6L4 10l8-8z"/></svg>',
      'arrow-up-alt2': '<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l8 8H4l8-8z"/></svg>',
      'chevron-up': '<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',
      'upload': '<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/><path d="M12,11L16,15H13V19H11V15H8L12,11Z"/></svg>',
      'plus-alt': '<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 6v12M6 12h12" stroke="white" stroke-width="2" fill="none"/></svg>'
    };

    // Set icon content
    scrollUpButton.innerHTML = iconSvgMapping[iconSvg] || iconSvgMapping['arrow-up-alt2'];

    // Add hover effects
    scrollUpButton.addEventListener('mouseenter', function () {
      this.style.opacity = '1';
      this.style.transform += ' scale(1.1)';
    });
    scrollUpButton.addEventListener('mouseleave', function () {
      this.style.opacity = opacity;
      this.style.transform = this.style.transform.replace(' scale(1.1)', '');
    });

    // Scroll to top functionality
    scrollUpButton.addEventListener('click', function (e) {
      e.preventDefault();

      // Smooth scroll to top
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });

    // Show/hide button based on scroll position
    function toggleScrollUpButton() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > showAfterScroll) {
        scrollUpButton.style.display = 'flex';
        // Add fade-in animation
        setTimeout(() => {
          scrollUpButton.style.opacity = opacity;
        }, 10);
      } else {
        scrollUpButton.style.opacity = '0';
        // Hide after transition
        setTimeout(() => {
          if (scrollUpButton.style.opacity === '0') {
            scrollUpButton.style.display = 'none';
          }
        }, 400);
      }
    }

    // Throttle scroll events for better performance
    let scrollTimeout;
    function throttledScrollHandler() {
      if (scrollTimeout) {
        clearTimeout(scrollTimeout);
      }
      scrollTimeout = setTimeout(toggleScrollUpButton, 10);
    }

    // Add scroll event listener
    window.addEventListener('scroll', throttledScrollHandler);

    // Initial check
    toggleScrollUpButton();

    // Append button to body
    document.body.appendChild(scrollUpButton);

    // Store reference for cleanup if needed
    container.scrollUpButton = scrollUpButton;
  });

  // Handle responsive design
  function handleResize() {
    const buttons = document.querySelectorAll('.scroll-up-button');
    buttons.forEach(button => {
      // Adjust position on very small screens
      if (window.innerWidth < 480) {
        if (button.style.right) {
          button.style.right = '15px';
        }
        if (button.style.left) {
          button.style.left = '15px';
        }
        button.style.bottom = '15px';
      } else {
        if (button.style.right) {
          button.style.right = '30px';
        }
        if (button.style.left) {
          button.style.left = '30px';
        }
        button.style.bottom = '30px';
      }
    });
  }

  // Add resize listener
  window.addEventListener('resize', handleResize);

  // Initial resize check
  handleResize();
});
/******/ })()
;
//# sourceMappingURL=view.js.map;