javascript 索拉的剧本

Posted 2021-05-04

(function () {
  if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
  }

  function addPreloadCovers () {
    Array
      .from(
        document.querySelectorAll('.post-body .separator:first-child a')
      )
      .filter(function (coverLink) {
        return /\.jp(e?)g$/i.test(coverLink.href) && /s1600/i.test(coverLink.href)
      })
      .forEach(function (coverLink) {
        var bg = coverLink.href.replace('s1600', 's10')
        
        coverLink.style.backgroundImage = 'url(' + bg + ')'
        coverLink.style.backgroundPosition = 'center'
        coverLink.style.backgroundSize = 'cover'
        coverLink.style.height = '100%'
      
        coverLink.href = 'javascript:void(0)'
      })
  }
  
  function fitImageToCanvas (imageElement, canvasWidth, canvasHeight) {
    var image = new Image()
    image.src = imageElement.src

    var imageWidth = image.width
    var imageHeight = image.height

    imageWidth = canvasWidth
    imageHeight = canvasWidth / (image.width / image.height)

    if (imageHeight > canvasHeight) {
      imageHeight = canvasHeight
      imageWidth = canvasHeight / (image.height / image.width)
    }

    imageElement.style.width = imageWidth + 'px'
    imageElement.style.height = imageHeight + 'px'
  }
  
  function handleDocumentClick (event) {
    if (
      event.target.matches('.post-body img') ||
      event.target.classList.contains('image-lightbox') ||
      event.target.matches('.post-body .separator:first-child a')
    ) {
      event.stopPropagation()
      event.preventDefault()
      
      var image = event.target.tagName === 'IMG'
        ? event.target
        : event.target.querySelector('img')
      
      toggleImageLightbox(image)
    }
  }
  
  function handleWindowScroll () {
    var height = window.innerHeight
    var current = window.scrollY + height
    var maximum = document.body.clientHeight

    if (height && current && maximum && current >= (maximum - height)) {
      loadNewEntries()
    }
  }
  
  function handleWindowResize () {
    updateLightboxSize()
  }
  
  function toggleImageLightbox (image) {
    var existingLightbox = document.querySelector('.image-lightbox')
    
    image.parentNode.classList.add('image-lightbox')
    
    if (existingLightbox) {
      existingLightbox.classList.remove('image-lightbox')
      
      var existingLightboxImage = existingLightbox.querySelector('img')
      existingLightboxImage.style.width = ''
      existingLightboxImage.style.height = ''
    }
    
    requestAnimationFrame(updateLightboxSize)
  }

  function loadNewEntries () {
    var link = document.querySelector('.blog-pager-older-link')
    var url = link ? link.href : ''
    var fetching = link ? link.dataset.fetching === 'true' : true
    
    if (!link || fetching) {
      return
    }
    
    link.dataset.fetching = 'true'
    
    fetch(url)
      .then(function (response) {
        return response.text()
      })
      .then(function (responseContent) {
        var fragment = document.implementation.createHTMLDocument()
        fragment.body.innerHTML = responseContent
      
        var container = document.querySelector('.blog-posts.container')
        var entries = Array.from(fragment.querySelectorAll('.post-outer-container'))
        var nextLink = fragment.querySelector('.blog-pager-older-link')
        
        if (container) {
          entries.forEach(function (entry) {
            container.appendChild(entry)
          })
        }
      
        if (nextLink) {
          var nextUrl = nextLink.href
          
          link.href = nextUrl
          link.dataset.fetching = 'false'
        }
      
        addPreloadCovers()
      })
  }
  
  function updateLightboxSize () {
    var lightboxImage = document.querySelector('.image-lightbox img')
    var windowWidth = window.innerWidth - 32
    var windowHeight = window.innerHeight - 32
  
    if (lightboxImage) {
      fitImageToCanvas(lightboxImage, windowWidth, windowHeight)
    }
  }

  if (window.fetch && document.querySelector && Array.from) {  
    addPreloadCovers()
    handleWindowScroll()
    
    window.addEventListener('resize', handleWindowResize)
    window.addEventListener('scroll', handleWindowScroll)
    document.body.addEventListener('click', handleDocumentClick)
  }
}())