testpogest/top-menu.js at main · rakitind00/testpogest · 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
    const menu = document.createElement("div");
    menu.setAttribute("id", "head_menu");
    document.getElementById("masthead-container").appendChild(menu);
    document.getElementById("masthead-container").setAttribute("style",  "padding-top: 35px" ) ;
    document.getElementById("primary").setAttribute("style",  "padding-top: 35px" ) ;

    const actions_container = document.createElement("div");
    actions_container.setAttribute("id", "actions_container");

    const back_btn = document.createElement("button");
    back_btn.setAttribute("id", "back_btn");
    const back_icon =  document.createElement("i");
    back_icon.setAttribute("id", "back_icon");
    back_icon.setAttribute("class", "fa fa-angle-double-left" );
    back_btn.appendChild(back_icon);
    actions_container.appendChild(back_btn);

    const reload_btn = document.createElement("button");
    reload_btn.setAttribute("id", "reload_btn");
    const reload_icon =  document.createElement("i");
    reload_icon.setAttribute("class", "fas fa-spinner" );
    reload_icon.setAttribute("id", "reload_icon");
    reload_btn.appendChild(reload_icon);
    actions_container.appendChild(reload_btn);

    const forward_btn = document.createElement("button");
    forward_btn.setAttribute("id", "forward_btn");
    const forward_icon =  document.createElement("i");
    forward_icon.setAttribute("class", "fa fa-angle-double-right" );
    forward_icon.setAttribute("id", "forward_icon");
    forward_btn.appendChild(forward_icon);
    actions_container.appendChild(forward_btn);

    menu.appendChild(actions_container);

    back_btn.addEventListener('click', function(){
      back_btn.setAttribute("class","back_clicked");
      setTimeout(() => {
        back_btn.removeAttribute("class");
        history.back();
      }, 500);
    });

    reload_btn.addEventListener('click', function(){
      reload_btn.setAttribute("class","reload_clicked");
      setTimeout(() => {
        reload_btn.removeAttribute("class");
      }, 1000);

      setTimeout(() => {
       history.go(0);
      }, 1500);

    });

    forward_btn.addEventListener('click', function(){
      forward_btn.setAttribute("class","forward_clicked");
      setTimeout(() => {
        forward_btn.removeAttribute("class");
        history.forward();
      }, 500);
    });