Big wheel ES6

gistfile1.txt

// Import
import Core         from 'core'
import Tween        from 'gsap'
import Packery      from 'packery'
import Bigwheel     from 'bigwheel'
import { debounce } from 'underscore'
import Handlebars   from 'bw-handlebars'
import Model        from '../../models/seenapse/seenapse'
import Views        from '../../views/'
// Define
let el             = null
let grid           = null
let timer          = null
let search_options = null
let active          = false;
let columns        = (window.innerWidth < 769) ? 6 : 8;
let model          = new Model();
// Section
class Grid extends Bigwheel {
  init(req, done) {
    let self = this;
    self.view(req, done);
    self.events_ui(req);
  }
  changeHeaderHandler(e) {
    console.log(e.target.value);
  }
  events_ui(req) {
    $(window).on('scroll',         this.scrollHandler.bind(this, req));
    //$(window).on('mousewheel',     this.wheelHandler.bind(this, req));
    //$('header input').on('input', this.changeHeaderHandler);
  }
  view(req, done) {
    let self = this;
    model.section(req, function(r) {
      let html = Handlebars({ dataHBS: Views.grid.grid, model: r, partials: Views });
      self.render(req, html);
      self.events(req);
      done();
    });
  }
  sectionHandler(req) {
    let self = this;
    req.params.index  = 0;
    req.params.page   = 40;
    $('.search-grid').remove();
    self.addBlocksHandler(req);
  }
  events(req) {
    $('.block').on('click',      this.clickHandler);
    $('.block').on('mouseenter', this.enterHandler);
    $('.block').on('mouseleave', this.leaveHandler);
  }
   eventsOff(req) {
    $('.block').off('click',      this.clickHandler);
    $('.block').off('mouseenter', this.enterHandler);
    $('.block').off('mouseleave', this.leaveHandler);
  }
  wheelHandler(req, e) {
    let self = this;
    if (e.deltaY > 0) {
      req.params.index++;
      debounce(self.addBlocksHandler(req), 500, true);
    }
    return false;
  }
  scrollHandler(req, e) {
    let self = this;
    $('.block').each(function(item, i) {
      let offset = Math.round(item.getBoundingClientRect().top + item.offsetHeight);
      if (offset > 180 && offset < window.innerHeight + 180) {
        $(item).addClass('visible');
      } else {
        $(item).removeClass('visible');
      }
    }); 
    if (window.pageYOffset >= (document.body.offsetHeight - window.innerHeight) && active == false) {
      debounce(self.addBlocksHandler(req), 1500, true);
    }
  }
  addBlocksHandler(req) {
    active = true;
    let self = this;
    let search_grid = el.querySelector('.search-grid');
    let block_w     = Math.ceil(window.innerWidth / columns);
    let block_h     = block_w;
    model.section(req, function(r) {
      let view = Handlebars({ dataHBS: Views.grid.block, model: r });
      console.log(view);
      search_grid.insertAdjacentHTML('beforeend', view);
      grid.appended(view);
      grid.layout();
      setTimeout(function() {
        self.grid(block_w, block_h);
        self.eventsOff(req);
        self.events(req);
        active = false;
      }, 250);
    });
  }
  submitHandler(e){
    e.preventDefault();
    let input = el.querySelector('.search-form>form>input');
    let value = input.value.stringToSlug();
    //framework.go(`/search/${value}/`);
  }
  enterHandler(e) {
    Tween.to(e.target, 1.00, {scale: 1.25, autoAlpha: 1, ease: Elastic.easeOut});
  }
  leaveHandler(e){
    Tween.to(e.target, 0.75, {scale: 1.0, autoAlpha: 0.8, ease: Elastic.easeOut});
  }
  clickHandler(e){
    e.preventDefault();
    let callback = () => { framework.go(e.target.hash.substr(1)); }
    let top = Math.round(window.innerHeight / 2) - 86 + window.scrollY;
    let left = Math.round(window.innerWidth / 2) - 86;
    let target = e.target.parentNode;
    let clone  = target.cloneNode(true);
    let blocks = el.querySelectorAll('.block.visible');
    clone.style.top      = target.getBoundingClientRect().top + window.scrollY + 22 + 'px';
    clone.style.zIndex   = 100;
    target.style.display = 'none';
    el.style.position    = 'absolute';
    el.style.height = window.innerHeight + 'px';
    el.appendChild(clone);
    for (var i = 0; i < blocks.length; i++) {
      let delay = (i*0.025);
      Tween.to(blocks[i], 0.25, { scale: 0, autoAlpha: 0, delay:delay, className: 'avatar-container block loading', ease: Quad.easeInOut });
      if (i ===  blocks.length-1) {
        Tween.to(clone, 0.25, {top: top, left: left, scale: 1.65, delay: 1.25, ease: Quad.easeInOut, onComplete: callback});
      }
    }
  }
  enterOptionHandler(e) {
    let hits  = e.target.querySelector('.hits');
    let circle = e.target.querySelector('.circle');
    let span  = e.target.querySelector('span.label');
    let color = hits.getAttribute('data-color');
    Tween.to(circle, 0.25, {backgroundColor: color, scale:1, ease: Quad.easeInOut});
    Tween.to(hits, 0.25, {color:'#000000', ease: Quad.easeInOut});
    Tween.to(span, 0.25, {color: color, ease: Quad.easeInOut});
  }
  leaveOptionHandler(e) {
    if (!e.target.classList.contains('active')) {
      let hits   = e.target.querySelector('.hits');
      let circle = e.target.querySelector('.circle');
      let span   = e.target.querySelector('span.label');
      Tween.to(circle, 0.25, {backgroundColor: '#2B2B2B', scale: 0, ease: Quad.easeInOut});
      Tween.to(hits, 0.25, {color:'#717171', ease: Quad.easeInOut});
      Tween.to(span, 0.25, { color: '#717171', ease: Quad.easeInOut});
    }  
  }
  
  grid(block_w, block_h, lazy) {
    let self        = this;
    let search_grid = el.querySelector('.search-grid');
    let block       = el.querySelectorAll('.block.loading');
    Tween.set(block, { width: block_w, height: block_h, scale: 0.4, autoAlpha: 0, force3D:false });
    grid = new Packery(search_grid, { columnWidth: block_w, rowHeight: block_h, gutter: 0, isResizeBound: false, transitionDuration: 100 });
    setTimeout(function() {
      for (var index = 0; index < block.length; index++) {
        let delay = (lazy) ? 0 : (index*0.05);
        Tween.to(block[index], 1, {scale: 1, autoAlpha: 0.8, className: 'avatar-container block visible', delay: delay, ease: Elastic.easeInOut});
      } 
    }, 100);
  }
  resize(width, height) {
    let self        = this;
    let search      = el.querySelector('#grid');
    let search_grid = el.querySelectorAll('.search-grid');
    let fontSize    = Math.ceil(width / 500 * 30);
    let block_w     = Math.ceil(width/columns);
    let block_h     = block_w;
    search.style.fontSize = fontSize + 'px';
    Tween.set(search_grid, { width: block_w*columns, perspective: 1000 });
    self.grid(block_w, block_h);
  }
  animateIn(req, done) {
    let self = this;
    let header_search = header.querySelector('#header-search');
    let header_input = header.querySelector('input');
    Tween.from(header_search, 1, { x:-200, autoAlpha: 0, ease: Quad.easeInOut });
    Tween.to(header_search, 0.5, { x:0, autoAlpha: 1, ease: Quad.easeInOut });
    Tween.from(el, 1, { x: -200, opacity: 0, ease: Quad.easeInOut });
    Tween.to(el, 0.5, { x: 0, opacity: 1, className: '', ease: Quad.easeInOut });
    Tween.set('.circle', { scale: 0 });
  }
  animateOut(req, done) {
    done();
  }
  render(req, html) {
    el = document.createElement('div');
    el.className = 'loading';
    el.innerHTML = html;
    document.body.appendChild(el);
  }
  destroy(req, done) {
    el.parentNode.removeChild(el);
  }
}

export default Grid