Cover JavaScript Methods & Events

// Cover component initialization
const cover = UIkit.cover(element, {
  automute: true,      // Automatically mute videos
  width: null,         // Custom width
  height: null         // Custom height
});

// Cover events
coverElement.addEventListener('load', function(event) {
  console.log('Cover media loaded:', event.detail);
});

coverElement.addEventListener('error', function(event) {
  console.error('Cover media error:', event.detail);
  // Show fallback image
  this.querySelector('img').src = 'fallback.jpg';
});

// Dynamic cover management
const coverManager = {
  covers: [],
  
  initCover: function(coverId, options = {}) {
    const coverElement = document.getElementById(coverId);
    if (!coverElement) return null;
    
    const cover = UIkit.cover(coverElement, options);
    this.covers.push({ id: coverId, element: coverElement, instance: cover });
    
    return cover;
  },
  
  changeCoverImage: function(coverId, newImageSrc, fadeDuration = 500) {
    const cover = this.covers.find(c => c.id === coverId);
    if (!cover) return;
    
    const img = cover.element.querySelector('img');
    if (!img) return;
    
    // Create new image for preloading
    const newImg = new Image();
    newImg.onload = function() {
      // Fade out current image
      img.style.transition = `opacity ${fadeDuration}ms ease`;
      img.style.opacity = '0';
      
      setTimeout(() => {
        // Change source
        img.src = newImageSrc;
        
        // Fade in new image
        setTimeout(() => {
          img.style.opacity = '1';
        }, 50);
      }, fadeDuration);
    };
    
    newImg.src = newImageSrc;
  },
  
  toggleOverlay: function(coverId, show = null) {
    const cover = this.covers.find(c => c.id === coverId);
    if (!cover) return;
    
    const overlay = cover.element.querySelector('.uk-overlay');
    if (!overlay) return;
    
    if (show === null) {
      show = overlay.style.display !== 'none';
    }
    
    overlay.style.display = show ? 'flex' : 'none';
  },
  
  setCoverHeight: function(coverId, height) {
    const cover = this.covers.find(c => c.id === coverId);
    if (!cover) return;
    
    cover.element.style.height = height;
    cover.instance.$emit('resize');
  },
  
  // Video cover controls
  playVideoCover: function(coverId) {
    const cover = this.covers.find(c => c.id === coverId);
    if (!cover) return;
    
    const video = cover.element.querySelector('video');
    if (video) {
      video.play();
    }
  },
  
  pauseVideoCover: function(coverId) {
    const cover = this.covers.find(c => c.id === coverId);
    if (!cover) return;
    
    const video = cover.element.querySelector('video');
    if (video) {
      video.pause();
    }
  },
  
  muteVideoCover: function(coverId, mute = true) {
    const cover = this.covers.find(c => c.id === coverId);
    if (!cover) return;
    
    const video = cover.element.querySelector('video');
    if (video) {
      video.muted = mute;
    }
  }
};

// Initialize covers
coverManager.initCover('heroCover', { automute: true });
coverManager.initCover('productCover');

// Example: Change cover image on button click
document.getElementById('changeCoverBtn').addEventListener('click', function() {
  coverManager.changeCoverImage('heroCover', 'new-hero-image.jpg', 300);
});

// Example: Toggle overlay
document.getElementById('toggleOverlayBtn').addEventListener('click', function() {
  coverManager.toggleOverlay('heroCover');
});

// Responsive cover adjustments
window.addEventListener('resize', function() {
  // Adjust cover heights based on viewport
  const viewportHeight = window.innerHeight;
  const covers = document.querySelectorAll('.uk-cover-container');
  
  covers.forEach(cover => {
    if (cover.classList.contains('uk-height-viewport')) {
      // Update viewport height covers
      cover.style.height = `${viewportHeight}px`;
    }
    
    // Check if we should switch to mobile image
    if (window.innerWidth < 768) {
      const img = cover.querySelector('img');
      if (img && img.dataset.mobileSrc) {
        img.src = img.dataset.mobileSrc;
      }
    }
  });
});

// Lazy load cover images
const lazyLoadCovers = function() {
  const coverContainers = document.querySelectorAll('.uk-cover-container[data-src]');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const cover = entry.target;
        const img = cover.querySelector('img');
        
        if (img && cover.dataset.src) {
          img.src = cover.dataset.src;
          img.onload = function() {
            cover.classList.add('uk-animation-fade');
          };
          
          // Remove data attribute to prevent re-loading
          cover.removeAttribute('data-src');
        }
        
        observer.unobserve(cover);
      }
    });
  }, {
    rootMargin: '50px 0px',
    threshold: 0.1
  });
  
  coverContainers.forEach(cover => {
    observer.observe(cover);
  });
};

// Initialize lazy loading
document.addEventListener('DOMContentLoaded', lazyLoadCovers);

// Cover slideshow functionality
const coverSlideshow = {
  currentIndex: 0,
  slides: [],
  interval: null,
  
  init: function(containerId, slideData, options = {}) {
    this.container = document.getElementById(containerId);
    if (!this.container) return;
    
    this.slides = slideData;
    this.intervalTime = options.interval || 5000;
    this.autoplay = options.autoplay !== false;
    
    // Create slides
    this.renderSlides();
    
    // Add controls
    this.addControls();
    
    // Start autoplay if enabled
    if (this.autoplay) {
      this.startAutoplay();
    }
  },
  
  renderSlides: function() {
    const slidesContainer = this.container.querySelector('.uk-slideshow-items') || 
                          document.createElement('ul');
    slidesContainer.className = 'uk-slideshow-items';
    slidesContainer.innerHTML = '';
    
    this.slides.forEach((slide, index) => {
      const slideItem = document.createElement('li');
      slideItem.className = index === 0 ? 'uk-active' : '';
      
      slideItem.innerHTML = `
        <img src="${slide.image}" alt="${slide.alt || 'Slide'}">
        <div class="uk-position-cover uk-overlay uk-overlay-${slide.overlay || 'default'} uk-flex uk-flex-center uk-flex-middle">
          <div class="uk-text-center uk-light">
            <h3 class="uk-margin-remove">${slide.title}</h3>
            <p class="uk-margin-remove-top">${slide.description}</p>
            ${slide.button ? `<button class="uk-button uk-button-default uk-margin-top">${slide.button}</button>` : ''}
          </div>
        </div>
      `;
      
      slidesContainer.appendChild(slideItem);
    });
    
    if (!this.container.querySelector('.uk-slideshow-items')) {
      this.container.appendChild(slidesContainer);
    }
  },
  
  addControls: function() {
    // Navigation dots
    const dotnav = document.createElement('div');
    dotnav.className = 'uk-position-bottom-center uk-position-small';
    dotnav.innerHTML = `
      <ul class="uk-dotnav">
        ${this.slides.map((_, index) => `
          <li ${index === 0 ? 'class="uk-active"' : ''}>
            <a href="#" data-index="${index}"></a>
          </li>
        `).join('')}
      </ul>
    `;
    
    // Previous/next buttons
    const navButtons = document.createElement('div');
    navButtons.className = 'uk-position-center-right uk-position-small uk-visible@s';
    navButtons.innerHTML = `
      <a href="#" class="uk-slidenav-next" uk-slidenav-next></a>
    `;
    
    const navButtonsLeft = document.createElement('div');
    navButtonsLeft.className = 'uk-position-center-left uk-position-small uk-visible@s';
    navButtonsLeft.innerHTML = `
      <a href="#" class="uk-slidenav-previous" uk-slidenav-previous></a>
    `;
    
    this.container.appendChild(dotnav);
    this.container.appendChild(navButtons);
    this.container.appendChild(navButtonsLeft);
    
    // Add event listeners
    this.container.querySelector('.uk-slidenav-next').addEventListener('click', (e) => {
      e.preventDefault();
      this.next();
    });
    
    this.container.querySelector('.uk-slidenav-previous').addEventListener('click', (e) => {
      e.preventDefault();
      this.previous();
    });
    
    dotnav.querySelectorAll('a').forEach((link, index) => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        this.goToSlide(index);
      });
    });
  },
  
  goToSlide: function(index) {
    if (index < 0 || index >= this.slides.length) return;
    
    const slides = this.container.querySelectorAll('.uk-slideshow-items li');
    const dots = this.container.querySelectorAll('.uk-dotnav li');
    
    // Remove active class from current slide
    slides[this.currentIndex].classList.remove('uk-active');
    dots[this.currentIndex].classList.remove('uk-active');
    
    // Add active class to new slide
    slides[index].classList.add('uk-active');
    dots[index].classList.add('uk-active');
    
    this.currentIndex = index;
    
    // Reset autoplay
    if (this.autoplay) {
      this.resetAutoplay();
    }
  },
  
  next: function() {
    const nextIndex = (this.currentIndex + 1) % this.slides.length;
    this.goToSlide(nextIndex);
  },
  
  previous: function() {
    const prevIndex = (this.currentIndex - 1 + this.slides.length) % this.slides.length;
    this.goToSlide(prevIndex);
  },
  
  startAutoplay: function() {
    this.interval = setInterval(() => {
      this.next();
    }, this.intervalTime);
  },
  
  stopAutoplay: function() {
    if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
    }
  },
  
  resetAutoplay: function() {
    this.stopAutoplay();
    this.startAutoplay();
  },
  
  // Public methods
  play: function() {
    this.startAutoplay();
  },
  
  pause: function() {
    this.stopAutoplay();
  }
};

// Example usage
const slidesData = [
  {
    image: 'slide1.jpg',
    title: 'First Slide',
    description: 'Description for first slide',
    overlay: 'primary',
    button: 'Learn More'
  },
  {
    image: 'slide2.jpg',
    title: 'Second Slide',
    description: 'Description for second slide',
    overlay: 'secondary',
    button: 'Get Started'
  },
  {
    image: 'slide3.jpg',
    title: 'Third Slide',
    description: 'Description for third slide',
    overlay: 'default'
  }
];

coverSlideshow.init('heroSlideshow', slidesData, {
  interval: 7000,
  autoplay: true
});

// Pause on hover
document.getElementById('heroSlideshow').addEventListener('mouseenter', () => {
  coverSlideshow.pause();
});

document.getElementById('heroSlideshow').addEventListener('mouseleave', () => {
  coverSlideshow.play();
});

E-commerce Product Hero

<!-- E-commerce Product Hero -->
<div class="uk-cover-container uk-height-viewport">
  <!-- Background Video -->
  <video autoplay muted loop uk-cover>
    <source src="product-video.mp4" type="video/mp4">
    <source src="product-video.webm" type="video/webm">
  </video>
  
  <!-- Overlay with Content -->
  <div class="uk-position-cover uk-overlay uk-overlay-default">
    <!-- Top Bar -->
    <div class="uk-position-top">
      <div class="uk-container uk-container-expand">
        <nav class="uk-navbar-container uk-navbar-transparent" uk-navbar>
          <div class="uk-navbar-left">
            <a class="uk-navbar-item uk-logo" href="#">Brand</a>
          </div>
          <div class="uk-navbar-right">
            <ul class="uk-navbar-nav">
              <li><a href="#"><span uk-icon="icon: cart"></span> <span class="uk-badge">3</span></a></li>
              <li><a href="#"><span uk-icon="icon: user"></span></a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    
    <!-- Center Content -->
    <div class="uk-position-center uk-text-center uk-light">
      <h1 class="uk-heading-primary uk-animation-slide-top">iPhone 16 Pro Max</h1>
      <p class="uk-text-lead uk-animation-slide-bottom">The ultimate iPhone experience</p>
      <div class="uk-margin-medium-top uk-animation-fade">
        <button class="uk-button uk-button-primary uk-button-large uk-margin-small-right">
          <span uk-icon="icon: cart" class="uk-margin-small-right"></span>
          Pre-order Now
        </button>
        <button class="uk-button uk-button-default uk-button-large">
          <span uk-icon="icon: play" class="uk-margin-small-right"></span>
          Watch Trailer
        </button>
      </div>
    </div>
    
    <!-- Bottom Content -->
    <div class="uk-position-bottom-center uk-position-medium">
      <div class="uk-grid-small uk-child-width-auto uk-flex-center" uk-grid>
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">A18 Pro</div>
          <div class="uk-text-small">Chip</div>
        </div>
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">48MP</div>
          <div class="uk-text-small">Camera</div>
        </div>
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">6.9"</div>
          <div class="uk-text-small">Display</div>
        </div>
        <div class="uk-text-center">
          <div class="uk-text-large uk-text-bold">5G</div>
          <div class="uk-text-small">Connectivity</div>
        </div>
      </div>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="uk-position-bottom-center uk-position-small">
      <a href="#features" uk-scroll class="uk-icon-link" uk-icon="icon: chevron-down; ratio: 2"></a>
    </div>
  </div>
</div>

<!-- Features Section (scrolled to) -->
<section id="features" class="uk-section uk-section-default">
  <div class="uk-container">
    <h2 class="uk-text-center uk-heading-line"><span>Features</span></h2>
    <!-- Features content here -->
  </div>
</section>

Real Estate Property Showcase

<!-- Real Estate Property Showcase -->
<div class="uk-cover-container uk-height-viewport">
  <!-- Background Image with Multiple Sources -->
  <picture>
    <source media="(min-width: 1200px)" srcset="property-large.jpg">
    <source media="(min-width: 768px)" srcset="property-medium.jpg">
    <img src="property-small.jpg" alt="Luxury Villa" uk-cover>
  </picture>
  
  <!-- Property Info Overlay -->
  <div class="uk-position-cover uk-overlay uk-overlay-primary uk-light">
    <!-- Property Badges -->
    <div class="uk-position-top-left uk-padding">
      <span class="uk-label uk-label-success">For Sale</span>
      <span class="uk-label uk-margin-small-left">Featured</span>
    </div>
    
    <!-- Price Tag -->
    <div class="uk-position-top-right uk-padding">
      <div class="uk-card uk-card-default uk-card-body uk-padding-small">
        <div class="uk-text-large uk-text-bold">$2,499,000</div>
      </div>
    </div>
    
    <!-- Property Details -->
    <div class="uk-position-bottom-left uk-padding-large">
      <h1 class="uk-heading-large uk-margin-remove">Ocean View Villa</h1>
      <p class="uk-text-lead uk-margin-remove-top">Malibu, California</p>
      
      <div class="uk-grid-small uk-child-width-auto uk-margin-top" uk-grid>
        <div>
          <span uk-icon="icon: bed" class="uk-margin-small-right"></span>
          <span class="uk-text-large">5</span> Bedrooms
        </div>
        <div>
          <span uk-icon="icon: bathroom" class="uk-margin-small-right"></span>
          <span class="uk-text-large">4.5</span> Bathrooms
        </div>
        <div>
          <span uk-icon="icon: home" class="uk-margin-small-right"></span>
          <span class="uk-text-large">4,200</span> sq ft
        </div>
        <div>
          <span uk-icon="icon: location" class="uk-margin-small-right"></span>
          Ocean Front
        </div>
      </div>
    </div>
    
    <!-- Action Buttons -->
    <div class="uk-position-bottom-right uk-padding-large">
      <div class="uk-button-group">
        <button class="uk-button uk-button-default uk-button-large">
          <span uk-icon="icon: calendar" class="uk-margin-small-right"></span>
          Schedule Tour
        </button>
        <button class="uk-button uk-button-primary uk-button-large">
          <span uk-icon="icon: phone" class="uk-margin-small-right"></span>
          Contact Agent
        </button>
      </div>
    </div>
    
    <!-- Image Counter -->
    <div class="uk-position-bottom-center uk-position-small">
      <div class="uk-card uk-card-default uk-card-body uk-padding-small">
        <span class="uk-text-bold">1</span> / <span class="uk-text-muted">24</span>
      </div>
    </div>
  </div>
  
  <!-- Navigation Arrows -->
  <a class="uk-position-center-left uk-position-medium uk-hidden@s" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
  <a class="uk-position-center-right uk-position-medium uk-hidden@s" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>

<!-- Property Gallery -->
<div class="uk-position-relative" tabindex="-1" uk-slideshow="animation: push">
  <ul class="uk-slideshow-items uk-height-large">
    <li>
      <img src="property-interior1.jpg" alt="Living Room" uk-cover>
      <div class="uk-position-bottom-center uk-position-small">
        <div class="uk-light">Modern Living Room</div>
      </div>
    </li>
    <li>
      <img src="property-interior2.jpg" alt="Kitchen" uk-cover>
      <div class="uk-position-bottom-center uk-position-small">
        <div class="uk-light">Gourmet Kitchen</div>
      </div>
    </li>
    <!-- More property images -->
  </ul>
  
  <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
  <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
  
  <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>

/* Custom Cover Styles */
/* Glassmorphism Cover */
.uk-cover-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.uk-cover-glass .uk-overlay {
  background: rgba(0, 0, 0, 0.3);
}

/* Gradient Overlay */
.uk-cover-gradient-overlay .uk-overlay {
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.8) 0%, 
    rgba(0,0,0,0.5) 50%, 
    rgba(0,0,0,0.8) 100%);
}

.uk-cover-gradient-overlay-primary .uk-overlay {
  background: linear-gradient(135deg, 
    rgba(30, 135, 240, 0.8) 0%, 
    rgba(50, 210, 150, 0.8) 100%);
}

/* Blurred Background */
.uk-cover-blurred {
  position: relative;
  overflow: hidden;
}

.uk-cover-blurred img,
.uk-cover-blurred video {
  filter: blur(5px);
  transform: scale(1.1);
}

/* Animated Cover */
.uk-cover-animated {
  animation: coverFadeIn 1s ease;
}

@keyframes coverFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Parallax Cover Effects */
.uk-cover-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Split Cover */
.uk-cover-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.uk-cover-split .uk-cover-media {
  height: 100%;
}

.uk-cover-split .uk-cover-content {
  display: flex;
  align-items: center;
  padding: 40px;
}

/* Typography Cover */
.uk-cover-typography {
  font-family: 'Playfair Display', serif;
}

.uk-cover-typography .uk-heading-primary {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
}

.uk-cover-typography .uk-text-lead {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

/* Minimal Cover */
.uk-cover-minimal .uk-overlay {
  background: rgba(255, 255, 255, 0.9);
}

.uk-cover-minimal h1,
.uk-cover-minimal h2,
.uk-cover-minimal h3 {
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Dark Mode Cover */
.uk-cover-dark {
  background: #1a1a1a;
  color: #ffffff;
}

.uk-cover-dark .uk-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.uk-cover-dark .uk-button-default {
  background: #333;
  color: #fff;
  border-color: #444;
}

/* Cover with Pattern */
.uk-cover-pattern {
  position: relative;
}

.uk-cover-pattern:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h20v20H0z" fill="none"/><path d="M3 3h2v2H3zm6 0h2v2H9zm6 0h2v2h-2zM3 9h2v2H3zm6 0h2v2H9zm6 0h2v2h-2zM3 15h2v2H3zm6 0h2v2H9zm6 0h2v2h-2z" fill="rgba(255,255,255,0.1)"/></svg>');
  background-size: 20px 20px;
  z-index: 1;
}

.uk-cover-pattern > * {
  position: relative;
  z-index: 2;
}

/* Animated Gradient Cover */
.uk-cover-animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Cover with Border */
.uk-cover-bordered {
  border: 10px solid white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Usage Examples */
<div class="uk-cover-container uk-height-medium uk-cover-glass">
  <!-- Glassmorphism cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-gradient-overlay">
  <!-- Gradient overlay cover -->
</div>

<div class="uk-cover-container uk-height-viewport uk-cover-parallax">
  <!-- Parallax cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-split">
  <!-- Split cover -->
  <div class="uk-cover-media">
    <img src="image.jpg" alt="" uk-cover>
  </div>
  <div class="uk-cover-content">
    <h2>Split Cover Layout</h2>
    <p>Content on one side, media on the other</p>
  </div>
</div>

<div class="uk-cover-container uk-height-medium uk-cover-typography">
  <!-- Typography-focused cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-minimal">
  <!-- Minimal cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-dark">
  <!-- Dark mode cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-pattern">
  <!-- Pattern background cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-animated-gradient">
  <!-- Animated gradient cover -->
</div>

<div class="uk-cover-container uk-height-medium uk-cover-bordered">
  <!-- Bordered cover -->
</div>

/* Responsive Cover Utilities */
@media (max-width: 640px) {
  .uk-cover-mobile {
    height: 50vh !important;
  }
  
  .uk-cover-mobile .uk-heading-primary {
    font-size: 2rem !important;
  }
  
  .uk-cover-mobile .uk-text-lead {
    font-size: 1rem !important;
  }
}

/* Cover Loading States */
.uk-cover-loading {
  position: relative;
  min-height: 300px;
  background: #f5f5f5;
}

.uk-cover-loading:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid #e5e5e5;
  border-top-color: #1e87f0;
  border-radius: 50%;
  animation: coverLoading 1s linear infinite;
}

@keyframes coverLoading {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Cover Hover Effects */
.uk-cover-hover {
  transition: transform 0.3s ease;
}

.uk-cover-hover:hover {
  transform: scale(1.02);
}

.uk-cover-hover .uk-overlay {
  transition: opacity 0.3s ease;
  opacity: 0.8;
}

.uk-cover-hover:hover .uk-overlay {
  opacity: 1;
}

/* Cover with Tilt Effect */
.uk-cover-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.uk-cover-tilt:hover {
  transform: rotateY(5deg) rotateX(5deg);
  transition: transform 0.3s ease;
}