https://www.testietraduzioni.it/wp-content/themes/muusico-child/js/modal-script.js?ver=1.0

1function isLineSelectable(tmpSelectedVerses, e) {
2  return tmpSelectedVerses[0] + 4 >= e && tmpSelectedVerses[0] - 4 <= e;
3}
4
5function getDimensions(selectedShape) {
6  const isRectangle = selectedShape === 1;
7  const BG_WIDTH = 720;
8  const BG_HEIGHT = isRectangle ? 1280 : 720;
9  const BOX_WIDTH = 640;
10  const LOGO_WIDTH = 160;
11  const LOGO_HEIGTH = 60;
12  return {
13    BG_WIDTH,
14    BG_HEIGHT,
15    BOX_WIDTH,
16    LOGO_WIDTH,
17    LOGO_HEIGTH,
18  };
19}
20
21jQuery(document).ready(function ($) {
22  let selectedLines = [];
23  // 0 square
24  // 1 rectangle
25  let selectedShape = 1;
26
27  let postContent = $(".content-text-container").text();
28  postContent = postContent.replace(/([a-z)'?])([A-Z])/g, (match, p1, p2) => {
29      return p1 + "\n" + p2
30  });
31  let lines = postContent.split("\n");
32  lines = lines.map((e) => e?.trim());
33  lines = lines.filter((e) => e && e !== "" && /^\s*$/.test(e) === false);
34
35  // Open Modal
36  $("#modal-trigger").click(function (e) {
37    e.preventDefault();
38    $("#modal-container").fadeIn();
39
40    // Get the post content from the current page
41    let listItems = "";
42    lines.forEach(function (line, i) {
43      listItems += '<li id="line_text_' + i + '">' + line + "</li>";
44    });
45    $("#stories-modal-content ul").html(listItems);
46
47    const stage = document.createElement("div");
48    stage.setAttribute("id", "stage");
49    stage.style.display = "none";
50    stage.style.width = getDimensions(selectedShape).BG_WIDTH;
51    stage.style.height = getDimensions(selectedShape).BG_HEIGHT;
52
53    const canvas = document.createElement("canvas");
54    canvas.setAttribute("id", "insta-img-bg");
55    canvas.width = getDimensions(selectedShape).BG_WIDTH;
56    canvas.height = getDimensions(selectedShape).BG_HEIGHT;
57
58    stage.appendChild(canvas);
59
60    document.getElementById("stories-modal-content").appendChild(stage);
61
62    gtag && gtag('event', 'stories_open_click', {
63      'event_category': 'engagement',
64      'event_label': 'Stories opened',
65      'value': 1
66    });
67  });
68
69  // Close Modal
70  $("#modal-container").click(function (e) {
71    if (e.target === this) {
72      $(this).fadeOut();
73    }
74  });
75
76  $(document).on("click", "#stories-modal-content li", function (e) {
77    e.stopPropagation();
78    e.preventDefault();
79
80    let selectedTextIndex = $(this).attr("id").split("_")[2];
81
82    let index = parseInt(selectedTextIndex);
83    let isAlreadySelected = selectedLines.includes(index);
84
85    if (!isAlreadySelected) {
86      let tmpSelectedVerses = [...selectedLines.sort((a, b) => a - b)];
87      if (selectedLines.length < 5) {
88        if (selectedLines.length === 0) {
89          $(this).addClass("active");
90          selectedLines = [index];
91        } else {
92          if (isLineSelectable(tmpSelectedVerses, index)) {
93            $(this).addClass("active");
94            tmpSelectedVerses.push(index);
95            selectedLines = tmpSelectedVerses
96              .sort((a, b) => a - b)
97              .filter((e) => isLineSelectable(tmpSelectedVerses, e));
98          } else {
99            $("#stories-modal-content li").removeClass("active");
100            $(this).addClass("active");
101            selectedLines = [index];
102          }
103        }
104      } else {
105        if (!isLineSelectable(tmpSelectedVerses, index)) {
106          $("#stories-modal-content li").removeClass("active");
107          $(this).addClass("active");
108          selectedLines = [index];
109        }
110      }
111    } else {
112      $(this).removeClass("active");
113
114      // Line is already in the array, remove it
115      selectedLines.splice(index, 1);
116    }
117  });
118
119  // download image constructed
120  $("#stories-download").click(function (e) {
121    if (e.target === this) {
122      $(this).prop("disabled", true);
123
124      const selectedBGWidth = getDimensions(selectedShape).BG_WIDTH;
125      const selectedBGHeight = getDimensions(selectedShape).BG_HEIGHT;
126
127      const urlImage = $(".image-lyric-copertina img").prop("src");
128      const bg = document.getElementById("insta-img-bg");
129
130      if (bg && urlImage && selectedLines.length > 0) {
131        const bgCtx = bg.getContext("2d", { alpha: false });
132        const strings = selectedLines.map((idx) => lines[idx]);
133
134        if (bgCtx) {
135          const bgImage = new Image();
136          const logoImg = new Image();
137
138          bgImage.crossOrigin = "anonymous";
139          bgImage.src = urlImage;
140          bgImage.onload = () => {
141            bgCtx.filter = "blur(4px) brightness(15%)";
142            bgCtx.drawImage(
143              bgImage,
144              -((selectedBGHeight - selectedBGWidth) / 2),
145              0,
146              selectedBGHeight,
147              selectedBGHeight
148            );
149
150            // opacity layer
151            /*             bgCtx.fillStyle = "rgb(0, 0, 0, 0.7)";
152            bgCtx.fillRect(
153              -((selectedBGHeight - selectedBGWidth) / 2),
154              0,
155              selectedBGHeight,
156              selectedBGHeight
157            ); */
158            bgCtx.filter = "blur(0px) brightness(100%)";
159
160            logoImg.src = $(".logo img").prop("src");
161
162            bgCtx.drawImage(
163              bgImage,
164              selectedBGWidth / 16,
165              (selectedBGHeight - selectedBGWidth) / 2,
166              selectedBGWidth - selectedBGWidth / 8,
167              selectedBGWidth - selectedBGWidth / 8
168            );
169
170            bgCtx.fillStyle = "rgb(0, 0, 0, 0.7)";
171            bgCtx.fillRect(
172              selectedBGWidth / 16,
173              (selectedBGHeight - selectedBGWidth) / 2,
174              selectedBGWidth - selectedBGWidth / 8,
175              selectedBGWidth - selectedBGWidth / 8
176            );
177
178            bgCtx.beginPath();
179            bgCtx.strokeStyle = "#FFF";
180            bgCtx.lineWidth = 4;
181            bgCtx.strokeRect(
182              selectedBGWidth / 16,
183              (selectedBGHeight - selectedBGWidth) / 2,
184              selectedBGWidth - selectedBGWidth / 8,
185              selectedBGWidth - selectedBGWidth / 8
186            );
187
188            bgCtx.fillStyle = "rgb(255, 255, 255)";
189            bgCtx.fillRect(
190              selectedBGWidth / 16 - 2,
191              selectedBGWidth -
192                selectedBGWidth / 8 +
193                (selectedBGHeight - selectedBGWidth) / 2,
194              selectedBGWidth - selectedBGWidth / 8 + 4,
195              selectedBGWidth / 6
196            );
197          };
198
199          logoImg.onload = () => {
200            /* bgCtx.filter = "none"; */
201            const SCALE_FACTOR = strings.some((s) => s.length > 46) ? 4 : 5;
202            bgCtx.font = `${(SCALE_FACTOR * selectedBGWidth) / 120}px Poppins`;
203
204            bgCtx.fillStyle = "white";
205            bgCtx.textAlign = "center";
206

207            strings.forEach((str, i) =>
208              bgCtx.fillText(
209                str,
210                selectedBGWidth / 2,
211                selectedBGHeight / 2.5 + i * 50,
212                selectedBGWidth - selectedBGWidth / 8 - 32
213              )
214            );
215
216            const songName = $(".single-lyrics-overlay .lyrics-title h1")?.text()?.trim();
217            const artistName = $(".single-lyrics-overlay .lyrics-title h3")?.text()?.trim()?.split("ft.")?.[0]?.trim();
218            const fullNameToPrint = songName ? `${songName} ${artistName ? `by ${artistName}` : ""}` : "";
219
220            bgCtx.font = "italic normal normal 40px Poppins";
221            bgCtx.fillStyle = "black";
222            bgCtx.fillText(
223              fullNameToPrint,
224              selectedBGWidth / 2,
225              selectedBGWidth -
226                selectedBGWidth / 8 +
227                (selectedBGHeight - selectedBGWidth) / 2 +
228                selectedBGWidth / 8,
229              selectedBGWidth - selectedBGWidth / 6 - 32
230            );
231
232            bgCtx.drawImage(
233              logoImg,
234              selectedBGWidth / 16,
235              (selectedBGHeight - selectedBGWidth) / 2 -
236                getDimensions(selectedShape).LOGO_HEIGTH -
237                16,
238              getDimensions(selectedShape).LOGO_WIDTH,
239              getDimensions(selectedShape).LOGO_HEIGTH
240            );
241
242            const canvas = document.getElementById("insta-img-bg");
243            const dataUrl = canvas?.toDataURL("image/png");
244            let link = document.createElement("a");
245            link.download = `testietraduzioni-${Date.now().toString()}.png`;
246            link.href = dataUrl.replace("image/png", "image/octet-stream");
247            link.click();
248
249            // window.dataLayer = window.dataLayer || [];
250            // window.dataLayer.push({
251            //   event: "stories_download_click",
252            // });
253            /* window && typeof window?.gtag === "function" && window.gtag("event", "download_ig_stories", {
254                event_category: "download",
255                event_label: `Download IG Story: ${songName + " by " + artistName}`,
256                value: "clicked"
257            }); */
258            gtag && gtag('event', 'download_ig_stories', {
259              'event_category': 'download',
260              'event_label': `Download IG Story: ${songName + " by " + artistName}`,
261              'value': 1
262            });
263          };
264        }
265      }
266
267      $(this).prop("disabled", false);
268    }
269  });
270});