https://vam-yamaguchi.com/vrm/assets/js/museum.js

1// /* * * *
2
3var list_data = [];
4// NG $.getJSON('https://wan-hiroshima.sakura.ne.jp/apple/vr_museum/post.json', (data) => {
5$.getJSON('../post.json', (data) => {
6  // JSONデータを受信した後に実行する処理
7  list_data.push(data)
8})
9
10// /* / * * * * 変数
11const hideMenu = $('.js_hide_menu');
12// console.log("hideMenu", hideMenu)
13var click_page_url = '';
14var prev_click_page_url = '';
15var clickEventType = ((window.ontouchstart !== null) ? 'click' : 'touchend');
16const $vr_contents = document.getElementById('vr_contents');
17const $closeShade = document.getElementById('close_shade');
18const $closeWindow = document.getElementById('close_window');
19const $closeTWindow = document.getElementById('close_t_window');
20const $closeTWindow2 = document.getElementById('close_t_window2');
21const $tutorial = document.getElementById('tutorial');
22const $tutorialChild = document.getElementById('tutorial_child');
23const $tutorialBtn = document.getElementById('tutorialBtn');
24const $sp_content = document.getElementById('sp_content');
25const $itemCanvus = document.getElementById('itemCanvus');
26// console.log("$itemCanvus", $itemCanvus)
27let obj;
28var data_name = "";
29// /* / * * * * close 閉じるボタン
30$closeWindow.addEventListener(clickEventType, hideModal);
31$closeTWindow.addEventListener(clickEventType, hideTutorial);
32$closeTWindow2.addEventListener(clickEventType, hideTutorial);
33$closeShade.addEventListener(clickEventType, hideModal);
34
35
36// /* / * * * * チュートリアルボタン
37$tutorialBtn.addEventListener(clickEventType, showTutorial);
38$tutorial.addEventListener(clickEventType, hideTutorial);
39$tutorialChild.addEventListener(clickEventType, function(e){
40  e.stopPropagation();
41});
42
43
44// /* / * * * * hideTutorial モーダル非表示
45function hideTutorial() {
46  $tutorial.classList.remove('modal_show');
47  hideMenu.removeClass('js_hide');
48}
49// /* / * * * * showTutorial モーダル非表示
50function showTutorial() {
51  hideMenu.addClass('js_hide');
52  $tutorial.classList.add('modal_show');
53}
54// /* / * * * * hideModal モーダル非表示
55function hideModal() {
56  $vr_contents.classList.remove('modal_show');
57  popupItem = "";
58  hideMenu.removeClass('js_hide');
59}
60// /* / * * * * showModal モーダル表示
61function showModal() {
62  hideMenu.addClass('js_hide');
63  $vr_contents.classList.add('modal_show')
64  createCanvus();
65}
66// /* / * * * * iframe生成
67function createCanvus() {
68  if (prev_click_page_url !== click_page_url) {
69    // 違うページを読み込むとき
70    let obj;
71    $itemCanvus.innerHTML = "";
72    obj = document.createElement("iframe");
73    obj.src = click_page_url;
74    $itemCanvus.appendChild(obj);
75  }
76  prev_click_page_url = click_page_url;
77}
78
79var popupItem = '';
80// /* / * * * ノードの変更を監視
81const INTERVAL_popupItem = 100;
82const onGet_popupItem = function() {
83  return popupItem;
84};
85
86function observe_popupItem(interval_popupItem, onGet_popupItem, onChanged_popupItem) {
87  let previousValue_popupItem = onGet_popupItem();
88  const onObserve_popupItem = function() {
89    const VALUE_popupItem = onGet_popupItem();
90    if (previousValue_popupItem === VALUE_popupItem) return;
91    onChanged_popupItem(VALUE_popupItem);
92    previousValue_popupItem = VALUE_popupItem;
93  };
94  setInterval(onObserve_popupItem, interval_popupItem);
95}
96const onChanged_popupItem = function() {
97  // /* / * * * * ノードの変更時の処理
98  if (popupItem) {
99    const res = list_data[0].find((v) => v.cat_slug === popupItem);
100    console.log('list_data',res.url);
101    // console.log('ポップアップが変更されました。', popupItem);
102    // click_page_url = location.href + popupItem;
103    click_page_url = res.url;
104    console.log("click_page_url", click_page_url)
105    showModal();
106  }
107};
108observe_popupItem(INTERVAL_popupItem, onGet_popupItem, onChanged_popupItem);
109
110
111
112
113// /* / * * * チュートリアル
114let tutorialIndex = 0;
115const $tStep = $('.js_tutorial_step');
116const $tPrev = $('.js_tutorial_prev');
117const $tNext = $('.js_tutorial_next');
118const $tClose = $('.js_tutorial_close');
119let tStepLen = $tStep.length - 1;
120
121// 初期化
122tBtnVisible(tutorialIndex)
123// 次へ
124$tNext.on('click',function(){
125  $tStep.eq(tutorialIndex).css('display','none');
126  indexCount(1);
127  $tStep.eq(tutorialIndex).css('display','block');
128  tBtnVisible(tutorialIndex);
129});
130// 前へ
131$tPrev.on('click',function(){
132  $tStep.eq(tutorialIndex).css('display','none');
133  indexCount(-1);
134  $tStep.eq(tutorialIndex).css('display','block');
135  tBtnVisible(tutorialIndex);
136});
137// 現在のステップ
138function indexCount(num){
139  tutorialIndex += num;
140}
141// ボタン表示・非表示
142function tBtnVisible(index){
143  if(index == tStepLen){
144    // 次へ非表示
145    $tNext.css('display','none');
146    $tClose.css('display','block');
147  }else if(index == 0){
148    // 前へ非表示
149    $tPrev.css('display','none');
150    $tClose.css('display','none');
151  }else{

152    // どちらも表示
153    $tPrev.css('display','block');
154    $tNext.css('display','block');
155    $tClose.css('display','none');
156
157  }
158}
159// /* / * * * 初回アクセス
160if (localStorage.getItem('acs') === null) {
161  localStorage.setItem('acs', 'on');
162  showTutorial();
163} else {
164}