text-render/script.js at master · leejordan/text-render · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
let totalWidth = 0;
let canvasWidth = 0;
let canvasHeight = 0;
let margin = 0;
let paperWidth = 0;
let columnCount = 3;

function calcLayout() {
  if( typeof(window.innerWidth) === 'number') {
    canvasWidth = window.innerWidth;
    canvasHeight = window.innerHeight;
  }
  else {
    canvasWidth = $(window).width();
    canvasHeight = $(window).heignt();
  }
  paperWidth = $('.paper').width();
  margin = (canvasWidth - paperWidth)/2;
  totalWidth = $('.paper')[0].scrollWidth;
  //console.log('totalWidth', totalWidth, 'canvasWidth', canvasWidth, 'paperWidth', paperWidth, 'margin', margin,'scrollLeft', $('.paper').scrollLeft());
}

function updateButtons() {
  calcLayout();
  if($('.paper').scrollLeft() < 1) {
    $("#prev").hide();
    $("#next").show();
  }
  else {
    $("#prev").show();
    if($('.paper').scrollLeft() < (totalWidth-(paperWidth+(margin*2))))
    {
      $("#next").show();
    }
    else
    {
      $("#next").hide();
    }
  }
}

function scrollHome() {
  calcLayout();
  $('.paper').stop().animate({scrollLeft: 0}, 600);
  updateButtons();
}

function scrollEnd() {
  calcLayout();
  const offset = totalWidth - (paperWidth+margin);
  $('.paper').stop().animate({scrollLeft: offset}, 600);
  updateButtons();
}

function scrollLeft() {
  calcLayout();
  const scrollWidth = paperWidth + margin;
  $('.paper').stop().animate({scrollLeft: `-=${scrollWidth}`}, 600);
  updateButtons();
}

function scrollRight() {
  calcLayout();
  if($('.paper').scrollLeft()<canvasWidth)
  {
    const scrollWidth = paperWidth + margin;
    $('.paper').stop().animate({scrollLeft: `+=${scrollWidth}`}, 600);
    updateButtons();
  }
}

function setupControls() {
  calcLayout();
  $("#next").click(function(){
    scrollRight();
    return false;
  });
  $("#prev").click(function(){
    scrollLeft();
    return false;
  });
  $('.paper').on('scroll', function (e) {
    updateButtons();
  });
  $(document).keydown(function(event) {
    if(event.code === 'ArrowRight') {
      scrollRight();
    }
    if(event.code === 'ArrowLeft') {
      scrollLeft();
    }
    if(event.code === 'Home' || event.code == 'ArrowUp') {
      scrollHome();
    }
    if(event.code === 'End' || event.code == 'ArrowDown') {
      scrollEnd();
    }
    if(event.code === 'Minus')
    {
      if(columnCount > 1)
      {
        columnCount--;
      }
      $('.paper').css('column-count', columnCount);
    }
    if(event.code === 'Plus' || event.code === 'Equal')
    {
      if(columnCount<4) {
        columnCount++;
      }
      $('.paper').css('column-count', columnCount);
    }
  });
  updateButtons();
}