SHARE
TWEET

Untitled

a guest May 19th, 2019 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import SearchModel from '../models/SearchModel';
  2. import ContentModel from '../models/ContentModel';
  3. import AppView from '../views/AppView';
  4. import SearchView from '../views/SearchView';
  5. import ContenView from '../views/ContentView';
  6. import NavigationView from '../views/NavigationView';
  7.  
  8. export default class App {
  9.   constructor() {
  10.     this.pageNumber = 1;
  11.     this.pageClipsCount = 4;
  12.     this.pageElementWidth = 320;
  13.   }
  14.  
  15.   async start() {
  16.     const page = {
  17.       number: this.pageNumber,
  18.       clipsCount: this.pageClipsCount,
  19.       elementWidth: this.pageElementWidth,
  20.     };
  21.  
  22.     const search = new SearchModel();
  23.     const appView = new AppView();
  24.     appView.render();
  25.     const searchView = new SearchView();
  26.     searchView.render();
  27.     const navigationView = new NavigationView();
  28.     navigationView.render();
  29.  
  30.     const input = document.getElementById('search-input');
  31.     const leftButton = document.getElementById('left-button');
  32.     const rightButton = document.getElementById('right-button');
  33.     const centerButton = document.getElementById('center-button');
  34.     centerButton.textContent = page.number;
  35.  
  36.     function scroll(direction) {
  37.       const slider = document.getElementById('content-list');
  38.  
  39.       if (direction === 'left' && page.number > 1) {
  40.         page.number -= 1;
  41.         slider.scrollLeft -= (page.elementWidth * page.clipsCount);
  42.       } else if (direction === 'right') {
  43.         page.number += 1;
  44.         slider.scrollLeft += (page.elementWidth * page.clipsCount);
  45.         if (page.number * page.clipsCount > 15) {
  46.           console.log('woops');
  47.         }
  48.       }
  49.  
  50.       if (page.number === 1) {
  51.         leftButton.className += ' hidden';
  52.       } else leftButton.classList.remove('hidden');
  53.  
  54.       centerButton.textContent = page.number;
  55.     }
  56.  
  57.     function addScrolling() {
  58.       const slider = document.getElementById('content-list');
  59.       let isDown = false;
  60.       let startX;
  61.       let currentX;
  62.  
  63.       slider.addEventListener('mousedown', (e) => {
  64.         isDown = true;
  65.         slider.classList.add('active');
  66.         startX = e.pageX - slider.offsetLeft;
  67.       });
  68.  
  69.       slider.addEventListener('mouseleave', () => {
  70.         isDown = false;
  71.         slider.classList.remove('active');
  72.       });
  73.       slider.addEventListener('mouseup', () => {
  74.         isDown = false;
  75.         slider.classList.remove('active');
  76.         scroll(currentX > startX ? 'left' : 'right');
  77.       });
  78.       slider.addEventListener('mousemove', (e) => {
  79.         if (!isDown) return;
  80.         e.preventDefault();
  81.         currentX = e.pageX - slider.offsetLeft;
  82.       });
  83.     }
  84.  
  85.     leftButton.addEventListener('click', () => scroll('left'));
  86.     rightButton.addEventListener('click', () => scroll('right'));
  87.  
  88.     input.onchange = async function onchangeSearch() {
  89.       appView.clearContent();
  90.       search.setUrls(input.value);
  91.       this.state = search.getUrls();
  92.       const model = new ContentModel(this.state);
  93.       await model.getData();
  94.       await model.getViewsData();
  95.       const clipsData = model.getClips();
  96.       const contentView = new ContenView(clipsData);
  97.       contentView.render();
  98.       const navigation = document.getElementById('navigation');
  99.       navigation.classList.remove('hidden');
  100.  
  101.       if (page.number !== 1) {
  102.         leftButton.className += ' hidden';
  103.         page.number = 1;
  104.         centerButton.textContent = page.number;
  105.       }
  106.       addScrolling();
  107.     };
  108.   }
  109. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top