search.js

// Import
import { dom }      from 'core'
import Tween        from 'gsap'
import Packery      from 'packery'
import Bigwheel     from 'bigwheel'
import { debounce } from 'underscore'
import Handlebars   from 'bw-handlebars'
import Views         from '../../views/'
import Model        from '../../models/search/search'
// Define
let el             = null
let html           = {};
let grid           = null
let timer          = null
let search_options = null
let active         = false;
let columns        = null;
let model          = new Model();
// Section
class Search extends Bigwheel {
  init(req, done) {
    let self = this;
    this.options(req, done);
  }
  changeHeaderHandler(e) {
    console.log(e.target.value);
  }
  options(req, done) {
    let self = this;
    req.params.index = 0;
    req.params.page  = 0;
    model.hits(req, function(err, r) {
      let view = Handlebars({ dataHBS: Views.search.options, model: r });
      self.render_options(req, view);
      self.events_ui(req);
      self.view(req, done);
      $('.option.option-0').addClass('active');
    });
  }
  events_ui(req) {
    $(window).on('scroll',         this.scrollHandler.bind(this, req));
    //$(window).on('mousewheel',     this.wheelHandler.bind(this, req));
    $('.option').on('click',       this.clickOptionHandler.bind(this, req));
    $('.option').on('mouseenter',  this.enterOptionHandler);
    $('.option').on('mouseleave',  this.leaveOptionHandler);
    //$('header input').on('input', this.changeHeaderHandler);
  }
  view(req, done) {
    let self = this;
    req.params.index  = 0;
    req.params.page   = 40;
    req.params.query  = 'exact';
    $('.option').trigger('mouseleave');
    model[req.params.query](req, function(err, r) {
      let view = Handlebars({ dataHBS: Views.search.search, model: r, partials: Views });
      self.render(req, view);
      self.events(req);
      $('.option.option-0').trigger('mouseenter');
      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);
    $('#search-scroll').on('click',  this.clickScrollHandler.bind(this, req));
  }
  eventsOff(req) {
    $('.block').off('click',      this.clickHandler);
    $('.block').off('mouseenter', this.enterHandler);
    $('.block').off('mouseleave', this.leaveHandler);
    $('#search-scroll').off('click',  this.clickScrollHandler.bind(this, req));
  }
  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) {
      req.params.index++;
      debounce(self.addBlocksHandler(req), 1500, true);
    }
  }
  clickScrollHandler(req, e) {
    alert('a');
  }
  addBlocksHandler(req) {
    active      = true;
    let self    = this;
    let block_w = Math.ceil(window.innerWidth / columns);
    let block_h = block_w;
    html.search_grid = el.querySelector('.search-grid');
    model[req.params.query](req, function(err, r) {
      let view = Handlebars({ dataHBS: Views.search.block, model: r });
      console.log(r.totalPages);
      html.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.225, { 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: 0.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});
    }  
  }
  clickOptionHandler(req, e) {
    e.preventDefault();
    let target = $(e.target).closest('.option');
    let index  = $(target).index();
    let model  = target.getAttribute('data-model');
    let hits   = e.target.parentNode.querySelector('.hits');
    let span   = e.target.parentNode.querySelector('span.label');
    let option = document.body.querySelectorAll('.option');
    for (var i = 0; i < option.length; i++) {
      let circle = option[i].querySelector('.circle');
      let hits   = option[i].querySelector('.hits');
      let span   = option[i].querySelector('span.label');
      let bg = (index === i) ? hits.getAttribute('data-color') : '#2B2B2B';
      let fore = (index === i) ? '#000000' : '#717171';
      let color = (index === i) ? hits.getAttribute('data-color') : '#717171';
      let scale = (index === i) ? 1 : 0;
      option[i].className = (index === i) ? `option option-${i} active` : `option option-${i}`;
      Tween.to(circle, 0.25, {backgroundColor: color, scale: scale, ease: Quad.easeInOut });
      Tween.to(hits, 0.25, { color: fore, ease: Quad.easeInOut });
      Tween.to(span, 0.25, { color: color, ease: Quad.easeInOut });
    }
    req.params.query = model;
    req.params.index = 0; 
    this.sectionHandler(req);

  }
  grid(block_w, block_h, lazy) {
    let self = this;
    html.search_grid = el.querySelector('.search-grid');
    html.block       = el.querySelectorAll('.block.loading');
    Tween.set(html.block, { width: block_w, height: block_h, scale: 0.4, autoAlpha: 0, force3D:false });
    grid = new Packery(html.search_grid, { itemSelector: '.block', columnWidth: block_w, rowHeight: block_h, gutter: 0, isResizeBound: false, transitionDuration: 100 });
    setTimeout(function() {
      for (var index = 0; index < html.block.length; index++) {
        let delay = (lazy) ? 0 : (index*0.05);
        Tween.to(html.block[index], 0.75, { scale: 1, autoAlpha: 0.8, className: 'avatar-container block visible', delay: delay, ease: Elastic.easeInOut });
      } 
    }, 100);
  }
  resize(width, height) {
    let self         = this;
    columns          = (width < 769) ? 6 : 8;
    html.search      = el.querySelector('#search-results');
    html.search_grid = el.querySelectorAll('.search-grid');
    html.block       = el.querySelectorAll('.block.loading');
    let fontSize     = Math.ceil(width / 500 * 30);
    let block_w      = Math.ceil(width/columns);
    let block_h      = block_w;
    html.search.style.fontSize = fontSize + 'px';
    Tween.set(html.search_grid, { width: block_w*columns, perspective: 1000 });
    self.grid(block_w, block_h);
  }
  animateIn(req, done) {
    let self = this;
    html.header_search      = header.querySelector('#header-search');
    html.header_input       = header.querySelector('input');
    html.circle             = html.search_options.querySelectorAll('.circle');
    html.header_input.value = req.params.title;
    Tween.set(html.circle, { scale: 0 });
    Tween.to(html.header_search, 0, { x:0, autoAlpha: 1, ease: Quad.easeInOut });
    Tween.from(html.search_options, 1, { x: -200, opacity: 0, ease: Quad.easeInOut });
    Tween.to(html.search_options, 0.5, { x: 0, opacity: 1, ease: Quad.easeInOut, onComplete: done });
    Tween.from(el, 1, { x: -200, opacity: 0, ease: Quad.easeInOut });
    Tween.to(el, 0.5, { x: 0, opacity: 1, className: '', ease: Quad.easeInOut });
    
  }
  animateOut(req, done) {
    TweenMax.to(html.search_options, 0.25, {opacity: 0, ease: Quad.easeInOut, onComplete: done});
  }
  render(req, html) {
    el = document.createElement('div');
    el.className = 'loading';
    el.innerHTML = html;
    document.body.appendChild(el);
  }
  render_options(req, view) {
    html.search_options           = document.createElement('div');
    html.search_options.id        = 'search-options';
    html.search_options.innerHTML = view;
    document.body.appendChild(html.search_options);
  }
  destroy(req, done) {
    el.parentNode.removeChild(el);
    html.search_options.parentNode.removeChild(html.search_options);
  }
}

export default Search