[Day09] - 未知网址的弹跳视窗 - is 属性

早上查看文章时 , 发现贴到昨天的资料
本鲁立马作文章修改 , 如造成 邦友 的不便 , 请各位海涵

有时 客制化元件时 , 我们只是想在 HTML 基础 Tag 上加一个小功能

那我们可以使用 is 这个属性来处理

下面我们来将 <a> 这个 HTML Tag 追加一个询问是否离开页面的 popup 吧 !

实作开始

找出对应的 HTML Class 名称

由於我们是要延伸基础的 HTML 元素 , 因此需要 extend 的对象不是 HTMLElement , 而是 Tag 对应的那个 DOM interface

我们可以到 MDN 文件 去查出来

以今天要用的 <a> 为例 , 对应的 DOM interface 是 HTMLAnchorElement

下方表列一些常用的 Tag 跟其对应的 DOM interface

在 defined 元件时 , 补上要 extend 的 DOM interface

window.customElements.define('wavy-link', WavyLink, {extends: 'a'});

参考昨天的 Modal 设定 , 将其加到 wavy-link 上面

window.addEventListener('DOMContentLoaded', (event) => {

  /*
 'beforebegin': 在 element 之前。
 'afterbegin': 在 element 里面，第一个子元素之前。
 'beforeend': 在 element 里面，最後一个子元素之後。
 'afterend': 在 element 之後。
  */

  const head = document.querySelector('head')

  head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" href="./modal.css">`);
  head.insertAdjacentHTML('beforeend', `
        <style>
         .wave-link{
            display: inline-block;
            position:relative;
            background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
         }
       </style>
    `);

});

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild;
}

class WavyLink extends HTMLAnchorElement {

  connectedCallback() {

    this.classList.add('wave-link')

    this.addEventListener('click', event => {

      event.preventDefault() // 停止 <a> 的预设行为 "跳转页面" 
      this._open()
    })

  }

  _open() {

    // append popupbox to body

    const href = this.getAttribute('href')

    const htmlStr = `
        <div class="pop-up-container">
          <div class="pop-up-container-root">
            <div class="pop-up-box">
              <div class="pop-up-title flex justifyContent">
                <h3 class="mr-30">您要离开此页吗 ?</h3>
                <img class='close' src="./close.svg" />
              </div>
              <div class="pop-up-content">
                你将会前往 <span class="wave-link url">${href}</span>
              </div>
              <div class="pop-up-action flex justifyContent">
               <slot name="modal-action">
                  <button class='close'>取消</button>
                  <button class='confirm'>确定</button>
                </slot>
              </div>
            </div>
          </div>
        </div>
    `

    const popupEl = createElementFromHTML(htmlStr)
    popupEl.querySelector('.pop-up-action .close').addEventListener('click', () => this._close())
    popupEl.querySelector('.pop-up-title .close').addEventListener('click', () => this._close())
    popupEl.querySelector('.pop-up-action .confirm').addEventListener('click', () => this._confirm())
    this._popupEl = popupEl

    document.querySelector('body').appendChild(popupEl);
  }

  _close() {

    const popup = this._popupEl.querySelector('.pop-up-container .pop-up-box');
    popup.style.transform = 'scale(0)';

    setTimeout(() => this._popupEl.remove(), 300)
  }

  _confirm() {

    this._close()
    setTimeout(() => location.href = this.getAttribute('href'), 400)
  }
}

window.customElements.define('wavy-link', WavyLink, {extends: 'a'});

完成 !!

成果

如果想直接体验成果 , 请到 web-component-modal.html 查看

参考资料 :

• Udemy 课程 - Web Components & Stencil.js - Build Custom HTML Elements
• MDN 文件 - interfaces
• MDN 文件 - Element.insertAdjacentHTML()