Bookage/script.js at main · RemleyGHooker/Bookage · 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
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};
//about button

// Beginning of suggestion box -->
var addInAfter=$('.add-in-after');

// After you press the no button, the buttons disappear and this message pops up
function offButtonClick() {
  document.getElementById("disappears").innerHTML="";
  document.getElementById("disappears1").innerHTML="";

  addInAfter.append(`
  <center>
  <p>It's okay. You don't have to submit anything but feel free to explore the rest of the website and maybe even...join a bookclub!</p>
  </center>
  `)

}

// After I press the yes input, Text and an input box should appear and yes and no should disappear
function onButtonClick(){
  document.getElementById("disappears").innerHTML="";
  document.getElementById("disappears1").innerHTML="";

  addInAfter.append(`
  <center>
    <p>What is it?</p>
    <input type="text" class="text-input"><br>
    <button onclick="submitFinally()" class="button1">Submit!</button>
  </center>`);


}

function submitFinally() {
  addInAfter.append(`
  <center>
    <p>Thank you for telling us!</p>
  </center>`);
  // To empty the text box after typing in it
  var textInput = $('.text-input');
  textInput.val("");
}