collision

collision.js

class Component {
  constructor(el){
    this.$el = el
  }

  static use(elArray){
    console.log(elArray)
  }
  
  moveTo(position){
    this.tob = position.split('-')[0]
    this.lor = position.split('-')[1]
    
    if(this.tob === 'top'){
      this.$el.style.top = '0'
    } else {
      this.$el.style.bottom = '0'
    }
    
    if(this.lor === 'left'){
      this.$el.style.left = '0'
    } else {
      this.$el.style.right = '0'
    }

    console.log('moved')
    
    this.checkCollision()
  }
  
  toString(){
    console.log(this.$el.getAttribute('id'))
  }
  
  checkCollision(comparedEls = Array.from(document.querySelectorAll('.component'))){
    if (comparedEls.indexOf(this.$el) > -1) {
      comparedEls.splice(comparedEls.indexOf(this.$el), 1)
    }

    let initPosition = () => {
      if(this.tob === 'top'){
        this.$el.style.top = '0'
        this.$el.style.bottom = ''
      } else {
        this.$el.style.top = ''
        this.$el.style.bottom = '0'
      }

      if(this.lor === 'left'){
        this.$el.style.left = '0'
        this.$el.style.right = ''
      } else {
        this.$el.style.left = ''
        this.$el.style.right = '0'
      }
    }

    let didNotOverlapTimes = 0
    comparedEls.map(comparedEl => {
      let originElRect = this.$el.getBoundingClientRect()
      let comparedElRect = comparedEl.getBoundingClientRect()
      console.log(originElRect, comparedElRect)
      let overlap = !(originElRect.right < comparedElRect.left || 
                originElRect.left > comparedElRect.right || 
                originElRect.bottom < comparedElRect.top || 
                originElRect.top > comparedElRect.bottom)
      if (overlap) {
        console.log(this.toString(), 'did overlap', comparedEl.getAttribute('id'))
        initPosition()
        if (this.tob === 'top') {
          this.$el.style.top = comparedEl.offsetHeight + comparedEl.offsetTop + 'px'
        } else {

        }
      } else {
        console.log(this.toString(), 'did NOT overlap', comparedEl.getAttribute('id'))
        didNotOverlapTimes++
      }
    })
    if (didNotOverlapTimes === comparedEls.length) {
      // do clearfix
      console.log('doing clearfix')
      initPosition()
    }
  }
}

const picture = new Component(document.querySelector('#picture'))
  , timestamp = new Component(document.querySelector('#timestamp'))
  , author = new Component(document.querySelector('#author'))
  , assign = new Component(document.querySelector('#assign'))
  , content = new Component(document.querySelector('#content'))

// picture.moveTo('top-left')
// timestamp.moveTo('top-right')
// assign.moveTo('top-left')
// content.moveTo('top-left')
// author.moveTo('bottom-right')

// for dev
window.picture = picture
window.timestamp = timestamp
window.assign = assign
window.author = author
window.content = content