master

分支 (1)

管理

管理

master

Tools
/
迷你框架
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background-color: black;
    }

    .KatyLight-navbar {
      color: white;
      position: relative;
      user-select: none;
    }

    .KatyLight-navbar > .line {
      background-color: cyan;
      height: 3px;
      position: absolute;
      left: 0;
      transition: all .5s ease;
      box-shadow: 0 0 10px 5px cyan;
    }

    .KatyLight-navbar::after {
      content: "";
      display: block;
      clear: both;
    }

    .KatyLight-navbar > .item {
      float: left;
      padding: 5px 10px;
    }

    .KatyLight-navbar > .item:hover {
      text-shadow: 0 0 6px white;
    }

    .KatyLightPagination {

    }

    .KatyLightPagination > .box {
      display: flex;
    }

    .KatyLightPagination > .box > .jump {

    }

    .KatyLightPagination > .box > .jump > button {
      list-style: none;
      display: block;
      float: left;
      box-sizing: border-box;

      border: 1px solid white;
      user-select: none;
      height: 30px;
      line-height: 28px;
      vertical-align: middle;
      background-color: rgba(255, 255, 255, 0.19);
      color: white;
    }

    .KatyLightPagination > .box > .jump > input {
      height: 30px;
      line-height: 28px;
      padding: 0;
      outline: none;
      text-align: center;
      background-color: transparent;
      color: white;
      display: block;
      margin-left: 3px;
      float: left;
      box-sizing: border-box;
      border: 1px solid white;
      vertical-align: middle;
    }

    .KatyLightPagination > .box > ul {
      list-style: none;
      padding-inline-start: 0;
      margin: 0;
      display: block;
    }

    .KatyLightPagination > .box > ul::after, .KatyLightPagination > .jump::after {
      display: block;
      content: '';
      clear: both;
    }

    .KatyLightPagination > .box > ul > li, .KatyLightPagination > .box > .pre, .KatyLightPagination > .box > .next {
      list-style: none;
      margin-left: 3px;
      box-sizing: border-box;

      float: left;
      height: 30px;
      min-width: 30px;
      line-height: 28px;
      border: 1px solid white;
      text-align: center;
      user-select: none;
      vertical-align: middle;
      color: white;

    }

    .KatyLightPagination > .box > ul > li.hide {
      visibility: hidden;
    }

    .KatyLightPagination > .box > ul > li.more {
      border: none;
    }

    .KatyLightPagination > .box > ul > li.more:hover {
      box-shadow: none;
    }

    .KatyLightPagination > .box > ul > li.active {
      background-color: rgba(255, 255, 255, 0.5);
    }

    .KatyLightPagination > .box > ul > li:hover, .KatyLightPagination > .box > .pre:hover, .KatyLightPagination > .box > .next:hover, .KatyLightPagination > .box > .jump > button:hover {
      box-shadow: 0 0 6px 3px white, inset 0 0 6px 3px white;
      text-shadow: 0 0 3px white;
    }

    .KatyLightPagination > .box > .pre.disabled, .KatyLightPagination > .box > .next.disabled {
      opacity: .5;
      pointer-events: none;
    }

    .KatyLightPagination > .box > .pre::before {
      content: "⮜"
    }

    .KatyLightPagination > .box > .next::before {
      content: '⮞'
    }

    .KatyLightPagination > .box > .more.pre, .KatyLightPagination > .box > .more.next {
      width: 50px;
    }

    .KatyLightPagination > .box > .more.pre::before {
      content: "⮜⮜"
    }

    .KatyLightPagination > .box > .more.next::before {
      content: '⮞⮞'
    }

    .KatyLightPagination > .info {
      color: white;
      opacity: .5;
      user-select: none;
    }
  </style>
  <script>
    class KLError extends Error {
      constructor(props) {
        super(props)
        this.name = 'KatyLight ERROR:\n'
      }
    }
    class DataError extends KLError {
      constructor(props) {
        super(props)
        this.name += 'DataError:'
      }
    }
    class TargetNull extends KLError {
      constructor(props) {
        super(props)
        this.name += 'TargetNull:has null target!'
      }
    }
    class DataNull extends KLError {
      constructor(props) {
        super(props)
        this.name += 'DataNull:data null !'
      }
    }
    class IdNotTarget extends KLError {
      constructor(props) {
        super(props)
        this.name += 'IdNotTarget:id is not target!keep id is null!'
      }
    }
    class PropsNull extends KLError {
      constructor(props) {
        super(props)
        this.name += 'PropsNull:'
      }
    }
    class PropsType extends KLError {
      constructor(props) {
        super(props)
        this.name += 'PropsType:'
      }
    }
    class kl {
      constructor(props) {

        if (props === undefined || props === null || Object.keys(props).length === 0) {
          throw new PropsNull('props can\'t empty!')
        }
        this.target = props.target || null
        this.id = props.id || null
        if (this.id === null && this.target === null) {
          throw new TargetNull()
        }
        if (this.id !== null && this.target === null) {
          this.target = document.getElementById(this.id)
        } else if (this.id !== null && this.target !== null) {
          let dom = document.getElementById(this.id)
          if (dom === null) {
            throw new IdNotTarget()
          } else if (dom !== this.target) {
            throw new IdNotTarget()
          }
        }
        if (props.style) {
          this.target.style = props.style
        }
        if (props.classList && props.classList.length > 0) {
          props.classList.forEach(item => {
            this.target.classList.add(item)
          })
        }
        this.mother = props.mother
      }

      kill() {
        this.target.remove()
      }
    }
    class NavBar extends kl {
      constructor(props) {
        super(props)
        this.target.classList.add('KatyLight-navbar')
        this.index = 0
        this.nodeList = []
        this.dataList = props.data || null
        if (!this.dataList || this.dataList.length < 1) {
          throw new DataNull()
        }
        for (let i = 0; i < this.dataList.length; i++) {
          if (!this.dataList[i].key || !this.dataList[i].label) {
            throw new DataError('Empty \'key\' or \'label\' in index ' + i + '!')
          }
        }
        if (!props.choose) {
          throw new PropsNull('choose function can\'t be null!')
        }
        if (!(typeof props.choose === 'function')) {
          throw new PropsType('choose must be a function!')
        }
        this.chooseActive = props.choose
        this.target.addEventListener('choose', (event) => {
          this.index = event.detail.index
          this.chooseActive(event.detail)
        })
        this.line = document.createElement('div')
        this.line.style.width = '0'
        this.target.append(this.line)
        this.line.classList.add('line')
        for (let i = 0; i < this.dataList.length; i++) {
          let obj = document.createElement('div')
          obj.dataset.key = this.dataList[i].key
          obj.dataset.index = i
          obj.innerText = this.dataList[i].label
          obj.classList.add('item')
          obj.onclick = (ev) => {
            this.go(ev)
          }
          this.target.append(obj)
          this.nodeList.push(obj)
        }
        this.line.style.left = this.nodeList[0].offsetLeft + 'px'
        this.line.style.top = (this.nodeList[0].offsetTop + this.nodeList[0].clientHeight) + 'px'
        this.line.style.width = this.nodeList[0].clientWidth + 'px'
      }

      go(e) {
        this.line.style.left = e.target.offsetLeft + 'px'
        this.line.style.top = (e.target.offsetTop + e.target.clientHeight) + 'px'
        this.line.style.width = e.target.clientWidth + 'px'
        this.doEvent({
          value: e.target.dataset.key,
          index: parseInt(e.target.dataset.index),
          label: e.target.innerText
        })
      }

      doEvent(data) {
        if (this.target.dispatchEvent) {
          this.target.dispatchEvent(new CustomEvent('choose', {
            detail: {
              value: data.value,
              index: data.index,
              label: data.label
            }
          }))
        } else {
          this.target.fireEvent(new CustomEvent('choose', {
            detail: {
              value: data.value,
              index: data.index,
              label: data.label
            }
          }))
        }
      }

      choose(index) {
        this.line.style.left = this.nodeList[index].offsetLeft + 'px'
        this.line.style.top = (this.nodeList[index].offsetTop + this.nodeList[index].clientHeight) + 'px'
        this.line.style.width = this.nodeList[index].clientWidth + 'px'
        this.doEvent({
          value: this.nodeList[index].dataset.key,
          index: parseInt(this.nodeList[index].dataset.index),
          label: this.nodeList[index].innerText
        })
      }

      kill() {
        super.kill()
      }

    }
    class Pagination extends kl {
      constructor(props) {
        super(props)
        this.currentZ = this.currentT.bind(this)
        this.nextZ = this.nextT.bind(this)
        this.preZ = this.preT.bind(this)
        this.jumpZ = this.jumpT.bind(this)
        this.morePreZ = this.morePreT.bind(this)
        this.moreNextZ = this.moreNextT.bind(this)
        this.total = props.total
        this.pageSize = props.pageSize || this.total
        this.target.classList.add('KatyLightPagination')
        this.box = document.createElement('div')
        this.box.classList.add('box')
        if (props.morePre) {
          this.morePreBtn = document.createElement('div')
          this.morePreBtn.classList.add('pre')
          this.morePreBtn.classList.add('more')
          this.morePreBtn.addEventListener('click', this.morePreZ)
          this.box.append(this.morePreBtn)

        }
        if (props.pre) {
          this.preBtn = document.createElement('div')
          this.preBtn.classList.add('pre')
          this.preBtn.addEventListener('click', this.preZ)
          this.box.append(this.preBtn)

        }
        this.target.append(this.box)

        this.ul = document.createElement('ul')
        this.box.append(this.ul)

        if (props.next) {
          this.nextBtn = document.createElement('div')
          this.nextBtn.classList.add('next')
          this.nextBtn.addEventListener('click', this.nextZ)
          this.box.append(this.nextBtn)
        }
        if (props.moreNext) {
          this.moreNextBtn = document.createElement('div')
          this.moreNextBtn.classList.add('next')
          this.moreNextBtn.classList.add('more')
          this.moreNextBtn.addEventListener('click', this.moreNextZ)
          this.box.append(this.moreNextBtn)
        }
        this.info = document.createElement('div')
        this.info.innerText = '总共' + this.total + '页数'
        this.info.classList.add('info')
        this.target.append(this.info)
        if (props.jumper) {
          this.jump = document.createElement('div')
          this.jump.classList.add('jump')

          this.jumpInput = document.createElement('input')
          this.jumpInput.type = 'number'
          this.jumpInput.max = this.total
          this.jumpInput.value = '1'
          this.jumpInput.min = '1'
          this.jump.append(this.jumpInput)
          this.jumpBtn = document.createElement('button')
          this.jumpBtn.innerText = 'GO'
          this.jumpBtn.addEventListener('click', this.jumpZ)
          this.jump.append(this.jumpBtn)
          this.box.append(this.jump)
        }

        this.currentChange = props.currentChange
        this.currentPage = props.currentPage || 1
        let start = this.currentPage - Math.floor(this.pageSize / 2)
        if (start < 1) {
          start = 1
        }
        let end = start + this.pageSize
        if (start + this.pageSize > this.total) {
          end = this.total
        }
        for (let i = 0; i < this.pageSize; i++) {
          let k = start + i
          let li = document.createElement('li')
          li.innerText = k.toString()
          li.dataset.index = k.toString()
          li.addEventListener('click', this.currentZ)
          this.ul.append(li)
          if (i > end - start) {
            li.classList.add('hide')
          }
        }
        let li = this.ul.querySelectorAll('li')
        for (let i = 0; i < li.length; i++) {
          if (li[i].dataset.index === this.currentPage.toString()) {
            this.activeLi = li[i]
            li[i].classList.add('active')
            break
          }
        }
      }

      nextT(e) {
        /*        if (this.total - this.currentPage > 0) {}*/
        this.goto(this.currentPage + 1)
      }

      moreNextT(e) {
        /*        if (this.total - this.currentPage > this.pageSize-1) {}*/
        this.goto(this.currentPage + this.pageSize)
      }

      morePreT(e) {
        /*        if (this.currentPage-this.pageSize>-1) {}*/
        this.goto(this.currentPage - this.pageSize)
      }

      preT(e) {
        /*        if (this.currentPage - 1 > 0) {}*/
        this.goto(this.currentPage - 1)
      }

      jumpT(e) {
        let index = parseInt(this.jumpInput.value)
        if (index > 0 && index < this.total + 1) {
          this.goto(index)
        }
      }

      currentT(e) {
        let index = parseInt(e.target.dataset.index)
        this.goto(index)

      }

      update(props) {
        if (props.total) {
          this.total = props.total
          this.info.innerText = '总共' + this.total + '页数'
          if (this.currentPage > this.total) {
            this.currentPage = this.total
          }
        }
        if (props.pageSize) {
          if (props.pageSize !== this.pageSize) {

            if (props.pageSize > this.pageSize) {
              for (let i = 0; i < props.pageSize - this.pageSize; i++) {
                let li = document.createElement('li')
                li.addEventListener('click', this.currentZ)
                this.ul.append(li)
              }
            } else {
              let li = this.ul.querySelectorAll('li')
              for (let i = this.pageSize - 1; i > props.pageSize; i--) {
                li[i].remove()
              }
            }
            this.pageSize = props.pageSize
          } else {

          }

        }
        this.currentPage = props.currentPage || this.currentPage
        this.goto(this.currentPage)

      }

      goto(index) {
        if (index < 0 || index > this.total) {
          return
        }
        this.currentPage = index
        let li = this.ul.querySelectorAll('li')
        let start = this.currentPage - Math.floor(this.pageSize / 2)
        if (start < 1) {
          start = 1
        }
        let end = start + this.pageSize
        if (start + this.pageSize > this.total) {
          end = this.total
          if (end - start < this.pageSize) {
            start = end - this.pageSize + 1
            start = start < 0 ? 1 : start
          }
          /*          let a=this.total-this.pageSize+1;
                    start=a>0?1:a;*/
        }
        for (let i = 0; i < this.pageSize; i++) {
          if (i < end - start + 1) {
            let k = start + i
            li[i].innerText = k.toString()
            li[i].dataset.index = k.toString()
            li[i].classList.remove('hide')
          } else {
            li[i].classList.add('hide')
          }

        }
        this.activeLi.classList.remove('active')
        for (let i = 0; i < li.length; i++) {
          if (li[i].dataset.index === this.currentPage.toString()) {
            this.activeLi = li[i]
            li[i].classList.add('active')
            break
          }
        }
        if (this.nextBtn) {
          if (this.currentPage + 1 > this.total) {
            this.nextBtn.classList.add('disabled')
          } else {
            this.nextBtn.classList.remove('disabled')
          }
        }
        if (this.preBtn) {
          if (this.currentPage - 1 < 1) {
            this.preBtn.classList.add('disabled')
          } else {
            this.preBtn.classList.remove('disabled')
          }
        }
        if (this.morePreBtn) {
          if (this.currentPage - this.pageSize < 0) {
            this.morePreBtn.classList.add('disabled')
          } else {
            this.morePreBtn.classList.remove('disabled')

          }
        }
        if (this.moreNextBtn) {
          if (this.total - this.currentPage < this.pageSize) {
            this.moreNextBtn.classList.add('disabled')
          } else {
            this.moreNextBtn.classList.remove('disabled')

          }
        }

        if (this.currentChange) {
          this.currentChange(this.currentPage)
        }
      }

    }
    class Factory {
      constructor(props) {
        let dom = document.body.children
        this.data = props.data
        this.methods = props.methods
        console.log(this.data)
        this.klObject = new Map()
        this.more(dom)
      }

      product() {
      }

      builder() {
      }

      more(dom) {
        console.log(dom)
        for (let i = 0; i < dom.length; i++) {
          this.find(dom[i])
        }
      }

      find(dom) {
        let target, method, on
        switch (dom.tagName) {
          case 'NAVBAR':
            let list = dom.children
            let data = []
            for (let j = 0; j < list.length; j++) {
              data.push({
                key: list[j].querySelector('key').innerText,
                label: list[j].querySelector('label').innerText
              })
            }
            on = dom.attributes.choose
            if (on) {
              method = on.value
            }
            if (method) {
              method = this.methods[on.value]
            } else {
              method = (data) => {
              }
            }
            target = document.createElement('div')
            dom.parentNode.insertBefore(target, dom)
            dom.remove()
            this.klObject.set(dom.id, new NavBar(
              {
                target: target,
                data: data,
                choose: method,
                mother: this
              }
            ))
            break
          case 'PAGINATION':
            console.log("P")
            target = document.createElement('div')
            dom.parentNode.insertBefore(target, dom)
            dom.remove()
            on = dom.attributes.currentChange
            if (on) {
              method = on.value
            }
            if (method) {
              method = this.methods[on.value]
            } else {
              method = (data) => {
              }
            }
            this.klObject.set(dom.id, new Pagination({
              target: target,
              total: dom.attributes.total ? parseInt(dom.attributes.total.value) : 10,
              pageSize: dom.attributes.pageSize ? parseInt(dom.attributes.pageSize.value) : 7,
              currentPage: dom.attributes.currentPage ? parseInt(dom.attributes.currentPage.value) : 1,
              next: dom.attributes.next ? parseFloat(dom.attributes.next.value) : true,
              pre: dom.attributes.pre ? parseFloat(dom.attributes.pre.value) : true,
              jumper: dom.attributes.jumper,
              moreNext: dom.attributes.moreNext,
              morePre: dom.attributes.morePre,
              mother: this,
              currentChange: method
            }))
            break
          case 'DIV':
            if (dom.children.length > 0) {
              this.more(dom.children)
            }
            break
          case 'HEADER':
            if (dom.children.length > 0) {
              this.more(dom.children)
            }
            break
          case 'FOOTER':
            if (dom.children.length > 0) {
              console.log(dom.children.length)
              this.more(dom.children)
            }
            break
        }
      }

    }


    window.onload = () => {
      let ff = new Factory({
        data: {
          page: {},
          nav: {}
        },
        methods: {
          chooseNavIndex: function(data) {
            data.nav = data
            console.log(data.nav)
            console.log(this.mother.data.nav)
            // this.getPage(data);
            this.mother.methods.getPage(data)
          },
          pav: function(data) {
            console.log('pav', data)
          },
          getPage: function(data) {
            console.log('getPage')
          }
        }
      })
    }


  </script>
</head>
<body>
<header>
  <div style="height: 100px;border: 1px solid white;margin: 10px"></div>
  <navbar id="ZIP" choose="chooseNavIndex">
    <item>
      <label>主页</label>
      <key>home</key>
    </item>
    <item>
      <label>搜索</label>
      <key>search</key>
    </item>
    <item>
      <label>QQ</label>
      <key>qq</key>
    </item>
  </navbar>
</header>
<content>
  <div style="height: 500px;border: 1px solid white;margin: 10px"></div>
</content>
<footer>
  <pagination abc="50" id="kl" jumper currentChange="pav" ></pagination>
  <pagination abc="50" id="Z3" jumper ></pagination>
</footer>
<map></map>
fdsfds
</body>
</html>