viewy 2.0.6

A web UI toolkit that combine the advantages of a design system and an ui library.
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
116
117

function closeAllPopover() {
  document.querySelectorAll(".popover").forEach((popover) => {
    popover.removeAttribute("data-show");
  });
}

window.addEventListener("startViewy", ({ detail }) => {
  const popups = detail.root.querySelectorAll(".popup");

  function closeAll(excludedPopupIds) {
    //closeAllPopover();
    popups.forEach((popup) => {
      let popupId = popup.getAttribute("data-attach-to");

      if (!excludedPopupIds.includes(popupId)) {
        popup.classList.remove("visible");
      }
    });
  }

  popups.forEach((popup) => {
    let open_on_startup = popup.classList.contains("visible");
    let attached_form = popup.getAttribute("data-form-to-submit-on-open");
    if (attached_form && open_on_startup) {
      let form = document.getElementById(attached_form);
      if (form.hasAttribute("data-async")) {
        asyncSubmit(detail.root, form);
      } else {
        form.submit();
      }
    }
  });

  function open(popupId) {
    let popup = document.querySelector(`.popup[data-attach-to="${popupId}"]`);
    let opennedPopups = [...detail.root.querySelectorAll(`.popup.visible`)].map(
      (popup) => popup.getAttribute("data-attach-to"),
    );
    closeAll([popupId, ...opennedPopups]);
    window.dispatchEvent(new CustomEvent("viewy-popup-open"));
    popup.classList.add("visible");

    popup.querySelectorAll("iframe[data-old-src]").forEach((iframe) => {
      iframe.src = iframe.getAttribute("data-old-src");
      iframe.removeAttribute("data-old-src");
    });

    let attached_form = popup.getAttribute("data-form-to-submit-on-open");
    if (attached_form) {
      let form = document.getElementById(attached_form);
      if (form.hasAttribute("data-async")) {
        asyncSubmit(detail.root, form);
      } else {
        form.submit();
      }
    }
  }

  function close(popupId) {
    let popup = document.querySelector(`.popup[data-attach-to="${popupId}"]`);
    popup.classList.remove("visible");

    popup.querySelectorAll("iframe").forEach((iframe) => {
      iframe.setAttribute("data-old-src", iframe.src);
      iframe.src = "";
    });
  }

  function init() {
    popups.forEach((popup) => {
      const popupId = popup.getAttribute("data-attach-to");
      function close_with_form_check(popupId) {
        close(popupId);
        let attached_form = popup.getAttribute("data-form-to-submit-on-close");
        if (attached_form) {
          let form = document.getElementById(attached_form);
          if (form.hasAttribute("data-async")) {
            asyncSubmit(detail.root, form);
          } else {
            form.submit();
          }
        }
      }
      popup.addEventListener("click", (e) => {
        if (e.target === popup) {
          close_with_form_check(popupId);
        }
      });
      popup.querySelectorAll(".popup__window-controls").forEach((el) => {
        el.addEventListener("click", () => {
          close_with_form_check(popupId);
        });
      });

      const el = document.getElementById(popupId);
      el.addEventListener("click", (e) => {
        e.preventDefault();
        e.stopPropagation();
        open(popupId);
      });
      el.querySelectorAll("a, .button, .clickable, .file-input").forEach(
        (clickable) => {
          if (
            !clickable.classList.contains("popup--opener") ||
            !clickable.classList.contains("popover--opener")
          ) {
            clickable.addEventListener("click", (e) => {
              e.stopPropagation();
            });
          }
        },
      );
    });
  }

  init();
});