https://sp.macour.jp/s/sp/js/stadium_popup.js?v=2026100101

1function checkUAPopup(){
2
3  var master_version1 = "3.7.4";
4  var master_version2 = "2.1.1";
5  var pattern = "";
6  var ret = false;
7
8  var ua = navigator.userAgent;
9  var checkVersion = "";
10  
11  //macourapp/2.1.1
12  if(ua.indexOf('macouriosapp') !== -1){
13    pattern = /macouriosapp\/(.*)/;
14    checkVersion = master_version1;
15  }else if(ua.indexOf('macourapp') !== -1){
16    pattern = /macourapp\/(.*)/;
17    checkVersion = master_version2;
18  }
19  var result = ua.match(pattern);
20  if(result.length >=2){
21      ret = true;
22  }
23  return ret;
24}
25
26function getScriptParams() {
27    // 現在実行中の script タグ（通常は最後の <script>）
28    const currentScript = document.currentScript;
29    if (!currentScript) return {};
30
31    const url = new URL(currentScript.src, window.location.href);
32    const params = Object.fromEntries(url.searchParams.entries());
33    return params;
34}
35
36const params = getScriptParams();
37const pageType = params.pagetype || "";
38
39document.addEventListener("DOMContentLoaded", function () {
40
41
42    const popupOverlay = document.createElement("div");
43    popupOverlay.style.position = "fixed";
44    popupOverlay.style.top = "0";
45    popupOverlay.style.left = "0";
46    popupOverlay.style.width = "100vw";
47    popupOverlay.style.height = "100vh";
48    popupOverlay.style.zIndex = "998"; // popup の下、ページの上
49    popupOverlay.style.background = "rgba(0, 0, 0, 0)";;
50    popupOverlay.style.display = "none"; // 最初は非表示
51    document.body.appendChild(popupOverlay);
52
53    // ボタン作成（丸型）
54    const toggleButton = document.createElement("button");
55    toggleButton.id = "todayrace_btn";
56    toggleButton.style.width = "60px";
57    toggleButton.style.height = "60px";
58    toggleButton.style.borderRadius = "50%";
59    toggleButton.style.border = "none";
60    toggleButton.style.backgroundColor = "transparent";
61    toggleButton.style.backgroundImage = "url('/s/sp/img/todayrace.svg')";
62    toggleButton.style.backgroundSize = "cover";
63    toggleButton.style.backgroundPosition = "center";
64    toggleButton.style.backgroundRepeat = "no-repeat";
65    toggleButton.style.zIndex = "1000";
66    toggleButton.style.cursor = "pointer";
67    toggleButton.style.webkitTapHighlightColor = "transparent";
68    toggleButton.style.boxShadow = "0 2px 6px rgba(0,0,0,0.3)";
69    document.body.appendChild(toggleButton);
70
71    function setButtonPosition() {
72        const isMobile = window.innerWidth <= 600;
73        const buttonSize = 60;
74        const paddingSP = 20;
75        const paddingPC = 50;
76
77        toggleButton.style.position = "fixed";
78
79        // デフォルトは 5vh
80        let buttonBottom = "5vh";
81
82        // アプリバージョン判定
83        const match = window.navigator.userAgent.match(/macouriosapp\/(\d+)\.(\d+)\.\d+\/W/);
84        if (match) {
85            const major = parseInt(match[1]);
86            const minor = parseInt(match[2]);
87
88            if (major > 4 || (major === 4 && minor >= 1)) {
89                buttonBottom = "95px";
90            }
91        }
92
93        toggleButton.style.bottom = buttonBottom;
94
95        if (pageType != "narrow" || isMobile) {
96            toggleButton.style.left = "auto";
97            toggleButton.style.right = "5vw";
98            toggleButton.style.transform = "none";
99        } else {
100            const maxPopupWidth = 410;
101            toggleButton.style.left = "50%";
102            toggleButton.style.right = "auto";
103            toggleButton.style.transform =
104                `translateX(${(maxPopupWidth / 2) - (buttonSize / 2) - paddingPC}px)`;
105        }
106
107    }
108    setButtonPosition();
109    window.addEventListener("resize", setButtonPosition);
110
111    let popupHeightAdjust = "100px";
112
113    //他のjsファイル参照
114    //header_footer.js
115    if(checkUAPopup()){
116        popupHeightAdjust = "0px";
117    }
118
119    // ポップアップ要素（カード風）
120    const popup = document.createElement("div");
121    popup.style.position = "fixed";
122    popup.style.left = "50%";
123    popup.style.transform = "translateX(-50%)";
124    popup.style.bottom = "-100%";
125    popup.style.width = "97vw";
126    //popup.style.height = "calc(100vh - 100px)";

127    popup.style.height = `calc(100vh - ${popupHeightAdjust})`;
128    popup.style.marginTop = "150px";
129    popup.style.maxWidth = "410px";
130    popup.style.backgroundColor = "white";
131    popup.style.borderRadius = "12px";
132    popup.style.transition = "bottom 0.3s ease-in-out";
133    popup.style.zIndex = "999";
134    popup.style.overflow = "hidden";
135    popup.style.boxShadow = "0 8px 24px rgba(0, 0, 0, 0.2)";
136
137    // iframeラッパー
138    const iframeWrapper = document.createElement("div");
139    iframeWrapper.style.width = "100%";
140    iframeWrapper.style.height = "100%";
141    iframeWrapper.style.paddingTop = "20px"; // 上部に20px余白
142    iframeWrapper.style.paddingLeft = "10px";
143    iframeWrapper.style.paddingRight = "10px";
144    iframeWrapper.style.boxSizing = "border-box";
145
146    // iframe作成
147    const iframe = document.createElement("iframe");
148    const originalSrc = "https://sp.macour.jp/embed/races/?link=false";
149    iframe.src = originalSrc;
150    iframe.style.width = "100%";
151    iframe.style.height = "100%";
152    iframe.style.border = "none";
153    iframe.style.display = "block";
154    iframe.setAttribute("id", "popup-iframe");
155    iframeWrapper.appendChild(iframe);
156    popup.appendChild(iframeWrapper);
157
158    document.body.appendChild(popup);
159
160    // 状態切り替え用フラグ
161    let isPopupOpen = false;
162
163    // ボタンクリックで表示・非表示切り替え
164    let scrollY = 0;
165
166    iframe.onload = () => {
167        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
168        iframeDoc.body.style.paddingBottom = "100px";
169    };
170
171    // ボタンクリックで表示・非表示切り替え
172    toggleButton.addEventListener("click", function () {
173        if (isPopupOpen) {
174            // Close popup
175            popup.style.bottom = "-100%";
176            popupOverlay.style.display = "none";
177            iframe.src = originalSrc;
178
179            // スクロール復元
180            const y = parseInt(document.body.style.top || "0") * -1;
181            document.body.style.position = "";
182            document.body.style.top = "";
183            document.body.style.left = "";
184            document.body.style.right = "";
185            document.body.style.overflow = "";
186            document.documentElement.style.overflow = "";
187            window.scrollTo({
188                top: y,
189                left: 0,
190                behavior: "instant"
191            });
192
193            toggleButton.style.backgroundImage = "url('/s/sp/img/todayrace.svg')";
194
195        } else {
196            // Open popup
197            popup.style.bottom = "0";
198            popupOverlay.style.display = "block";
199
200            scrollY = window.scrollY;
201            document.body.style.position = "fixed";
202            document.body.style.top = `-${scrollY}px`;
203            document.body.style.left = "0";
204            document.body.style.right = "0";
205            document.body.style.overflow = "hidden";
206            document.documentElement.style.overflow = "hidden";
207
208            toggleButton.style.backgroundImage = "url('/s/sp/img/todayrace-close.svg')";
209
210            // アドレスバー復活用トリック
211            setTimeout(() => {
212                window.scrollBy(0, 1);
213                window.scrollBy(0, -1);
214            }, 0);
215
216            try {
217                getiFrameSource();
218            } catch (error) {
219            } finally {
220            }
221
222        }
223        isPopupOpen = !isPopupOpen;
224    });
225
226function getStadiumNameById(id) {
227  const stadiumMap = {
228    "01": "kiryu",
229    "02": "toda",
230    "03": "edogawa",
231    "04": "heiwajima",
232    "05": "tamagawa",
233    "06": "hamanako",
234    "07": "gamagori",
235    "08": "tokoname",
236    "09": "tsu",
237    "10": "mikuni",
238    "11": "biwako",
239    "12": "suminoe",
240    "13": "amagasaki",
241    "14": "naruto",
242    "15": "marugame",
243    "16": "kojima",
244    "17": "miyajima",
245    "18": "tokuyama",
246    "19": "shimonoseki",
247    "20": "wakamatsu",
248    "21": "ashiya",
249    "22": "fukuoka",
250    "23": "karatsu",
251    "24": "oomura",
252  };
253  return stadiumMap[id] || null;
254}
255
256    // iframeからメッセージ受信して親で遷移
257    window.addEventListener("message", function (event) {
258        if (event.data?.type === "select_stadium") {
259            //console.log("スタジアム選択:", event.data.date, event.data.stadium, event.data.raceState);
260
261            // 日付からハイフンを除去（例: 2025-03-21 → 20250321）
262            const rawDate = event.data.date || "";
263            const formattedDate = rawDate.replace(/-/g, "");
264
265            // スタジアムID
266            const rawStadiumId = String(event.data.stadium || "0");
267            const stadiumId = rawStadiumId.padStart(2, "0");
268            const raceState = String(event.data.raceState || "close");
269            const isSponsored = event.data.isSponsored;
270
271            // URLテンプレート
272            const baseUrl = "https://sp.macour.jp/s/race/jo-list/date/:date/jid/:id/";
273            const targetUrl = baseUrl
274                .replace(":date", formattedDate)
275                .replace(":id", stadiumId);
276
277            if (raceState == "open") {
278
279                if (isPopupOpen) {
280                    toggleButton.click();
281                }
282                console.log("生成されたURL:", targetUrl);
283                // 遷移したい場合はこれでOK
284                //window.location.href = targetUrl;
285	        redirectWithStringUrl(targetUrl);
286
287            }else if(isSponsored){
288                const stadiumName = getStadiumNameById(stadiumId);
289                //console.log("isSponsored",isSponsored,stadiumName);
290                const baseUrlSponsored = "https://sp.macour.jp/d/kyotei-info/:stadiumName/";
291
292                //window.location.href = baseUrlSponsored.replace(":stadiumName",stadiumName);
293		redirectWithStringUrl(baseUrlSponsored.replace(":stadiumName",stadiumName));
294            }
295
296        }else if(event.data?.type === "select_racecard"){
297            const formattedDate = formatCustomDate(event.data.date);
298
299            // スタジアムID
300            const rawStadiumId = String(event.data.stadium || "0");
301            const stadiumId = rawStadiumId.padStart(2, "0");
302            const raceNumber = String(event.data.raceNumber || "0");
303            const stadiumName = getStadiumNameById(stadiumId);
304            const baseUrl = "https://sp.macour.jp/:stadiumName/racecards/:date/:racenumber";
305            const targetUrl = baseUrl
306                .replace(':stadiumName',stadiumName)
307                .replace(":date", formattedDate)
308                .replace(":racenumber", raceNumber);
309            console.log("生成されたURL:", targetUrl);
310
311	/*
312            let div = document.querySelector('[class="' + stadiumId + stadiumName +

313                '_soon_race_module' + '"]');
314            if (!div) {
315                // なければ作成
316                div = document.createElement('div');
317                div.className = stadiumId + stadiumName + '_soon_race_module';
318                div.textContent = 'クリック';
319                console.log(div.className);
320                // ページに追加
321                document.body.appendChild(div);
322            }
323
324            div.click();
325	*/
326            // GTM用のイベントを送る
327            window.dataLayer = window.dataLayer || [];
328            window.dataLayer.push({
329                event: 'soon_race_module_click',
330                stadium_id: stadiumId + stadiumName
331            });
332
333            //window.location.href = targetUrl;
334	    redirectWithStringUrl(targetUrl);
335
336       }
337    });
338});
339
340
341function redirectWithStringUrl(stringUrl){
342
343    let url = new URL(stringUrl);
344
345    if (window.navigator.userAgent.match(new RegExp("macouriosapp/4.*?/WP"))) {
346        // アプリブラウザ(v4)
347        if (window.webkit) {
348                window.webkit.messageHandlers.navigationHandler.postMessage({
349                        type: 'pushState',
350                        url: url.href,
351                        pathname: url.pathname,
352                        timestamp: Date.now()
353                });
354        }
355    }
356    else {
357        // 通常ブラウザ
358        window.location = url.href;
359    }
360
361
362}
363
364
365function formatCustomDate(obj) {
366  const date = obj.$d; // Dateオブジェクト
367  const yyyy = date.getFullYear();
368  const mm = String(date.getMonth() + 1).padStart(2, '0');
369  const dd = String(date.getDate()).padStart(2, '0');
370  return `${yyyy}${mm}${dd}`;
371}
372
373function getiFrameSource() {
374    const iframe = document.querySelector('#popup-iframe');
375    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
376    const targetDivs = iframeDoc.querySelectorAll('div[class*="soon_race_module"]');
377
378    // ループしてclassNameを表示
379    targetDivs.forEach(div => {
380/*
381        let divItem = document.querySelector('[class="' + div.className + '"');
382        if (!divItem) {
383            // なければ作成
384            divItem = document.createElement('div');
385            divItem.className = div.className;
386            divItem.textContent = 'クリック';
387            // ページに追加
388            document.body.appendChild(divItem);
389        }
390
391        // （どちらの場合もクリックする）
392        divItem.click();
393console.log(div.className);
394*/
395        const originalClassName = div.className;
396        const cleanedClassName = originalClassName.replace('_soon_race_module', '');
397console.log("className:" + cleanedClassName);
398
399        window.dataLayer = window.dataLayer || [];
400        window.dataLayer.push({
401            event: 'soon_race_module_imp',
402            stadium_id: cleanedClassName
403        });
404
405
406    });
407
408}