{"version":3,"file":"helpmain-81c94ccb.js","sources":["../../../resources/js/help/HelpList.vue","../../../resources/js/help/helpmain.js"],"sourcesContent":["<script setup>\r\nimport {computed, onMounted, ref} from 'vue';\r\n\r\nconst siteUrl = document.querySelector('meta[name=\"site-url\"]').content;\r\n\r\n// 検索欄のデータ\r\nconst searchWords = ref('');\r\n\r\n//メッセージ\r\nconst messages = ref([]);\r\n//ヘルプ一覧\r\nconst helpList = ref({});\r\n//選択されたヘルプ\r\nconst helpDetail = ref({});\r\n\r\n//状態 connecting\r\nconst connecting = ref(false);\r\n//状態 詳細かどうか\r\nconst isList = ref(true);\r\n\r\nconst isFirst = ref(true);\r\n\r\n// 検索結果のヘルプが 0 かどうか\r\nconst isHelpEmpty = computed(() => {\r\n\r\n  // そもそも検索中でなければ false\r\n  if ( ! isList.value) {\r\n    return false;\r\n  }\r\n\r\n  // 検索欄が空なら false\r\n  if (searchWords.value === '') {\r\n    return false;\r\n  }\r\n\r\n  console.log(helpList.value);\r\n\r\n  // 一つでもヘルプがあれば false\r\n  return ! Object.keys(helpList.value).some(key => helpList.value[key].helps.length > 0);\r\n});\r\n\r\n/**\r\n * Ajax 通信失敗時に起動させるメソッド\r\n */\r\nconst _handleError = () => {\r\n  //通信中フラグを false にする\r\n  connecting.value = false;\r\n\r\n  //エラーを追加\r\n  messages.value.push('サーバーで処理に失敗しました。再度お試し頂くか、お問い合わせ下さい。');\r\n};\r\n/**\r\n * Ajax 中断時に起動させるメソッド\r\n */\r\nconst _handleAbort = () => {\r\n  //通信中フラグを false にする\r\n  connecting.value = false;\r\n\r\n  //エラーを追加\r\n  messages.value.push('通信が中断されました。再度お試し下さい。');\r\n};\r\n/**\r\n * Ajax タイムアウトに起動させるメソッド\r\n */\r\nconst _handleTimeout = () => {\r\n  //通信中フラグを false にする\r\n  connecting.value = false;\r\n\r\n  //エラーを追加\r\n  messages.value.push('通信タイムアウトしました。ネットワーク回線を確認の上、再度お試し下さい。');\r\n};\r\n\r\n//サーバー通信 helpList を取得\r\nconst _sync = (search = \"\", isFirst = false) => {\r\n  _serverConnect((data) => {\r\n      helpList.value = data;\r\n    },\r\n    'get',\r\n    getHelps_ep + '/' + search\r\n  );\r\n};\r\n\r\n//サーバー通信 helpList を取得\r\nconst _getHelp = (id) => {\r\n  _serverConnect((data) => {\r\n      selectHelp(data.title, data.content, id);\r\n    },\r\n    'get',\r\n    getHelp_ep + '/' + id\r\n  );\r\n};\r\n\r\n\r\n//サーバーと通信する部分\r\nconst _serverConnect = (onSuccess, openMethod, openUrl, sendBody = null) => {\r\n  //通信中だったら何もしない\r\n  if (connecting.value) {\r\n    return Promise.reject();\r\n  }\r\n\r\n  //送信中フラグを on にする\r\n  connecting.value = true;\r\n\r\n  //非同期処理開始\r\n  return new Promise((resolve, reject) => {\r\n    //xhr を用意\r\n    const xhr = new XMLHttpRequest();\r\n\r\n    //通信失敗時\r\n    xhr.addEventListener('error', () => {\r\n      reject();\r\n      _handleError();\r\n    })\r\n    xhr.addEventListener('timeout', () => {\r\n      reject();\r\n      _handleAbort();\r\n    })\r\n    xhr.addEventListener('abort', () => {\r\n      reject();\r\n      _handleTimeout();\r\n    })\r\n\r\n    //通信成功時処理\r\n    xhr.addEventListener('load', event => {\r\n      //送信中フラグを解除\r\n      connecting.value = false;\r\n      //成功・失敗のどちらでも response を JSON としてパースする\r\n      let data = null;\r\n      try {\r\n        data = JSON.parse(event.target.response);\r\n      }\r\n      catch (e){\r\n        console.log(e);\r\n        messages.value = ['エラーが発生しました。恐れ入りますが再度お試しください。'];\r\n        reject();\r\n        return;\r\n      }\r\n\r\n      //パースに失敗\r\n      if (data === null) {\r\n        messages.value = ['サーバー情報のパースに失敗しました'];\r\n        reject();\r\n        return;\r\n      }\r\n      //失敗判定\r\n      if (event.target.status >= 400) {\r\n        messages.value = data.messages;\r\n        reject(data.messages);\r\n        return;\r\n      }\r\n\r\n      //成功したら結果を描写\r\n      onSuccess(data);\r\n    });\r\n\r\n    //通信を試みる\r\n    xhr.open(openMethod, openUrl);\r\n    xhr.setRequestHeader('X-CSRF-Token', tokenValue.value)\r\n    xhr.send(sendBody);\r\n  });\r\n};\r\n\r\nconst selectHelp = (title, content, id) => {\r\n  helpDetail.value = {\r\n    'title': title,\r\n    'content': _formatText(content),\r\n  };\r\n  // 現在のURLを取得\r\n  const urlParams = new URL(window.location.href);\r\n  // idの値を取得\r\n  const settedId = urlParams.searchParams.get('id');\r\n  // idが存在するかチェック\r\n  if (settedId) {\r\n    urlParams.searchParams.set('id', id);\r\n  }else{\r\n    urlParams.search = '?id='+id;\r\n  }\r\n\r\n  window.removeEventListener('popstate', backToList);\r\n  history.pushState({}, '', urlParams);\r\n  window.addEventListener('popstate', backToList);\r\n\r\n  isList.value = false;\r\n};\r\n\r\nconst _formatText = (text) => {\r\n  text = text.replace(/\\n/g, \"<br>\");\r\n  //リンクタグで囲まれた文字をリンクにする\r\n  const pattern = /\\[link:(.*?)\\](.*?)\\[\\/link\\]/g;\r\n  return text.replace(pattern, '<a href=\"$1\" target=\"_blank\" rel=\"noopener\">$2</a>');\r\n};\r\n\r\nconst backToList = () => {\r\n  if (isFirst.value === true){\r\n    isFirst.value = false;\r\n    return;\r\n  }\r\n\r\n  isList.value = true;\r\n  // 現在のURLを取得\r\n  const urlParams = new URL(window.location.href);\r\n  // idの値を取得\r\n  const settedId = urlParams.searchParams.get('id');\r\n  // idが存在するかチェック\r\n  if (settedId) {\r\n    urlParams.searchParams.delete('id');\r\n  }\r\n\r\n  // history.pushState({}, '', urlParams);\r\n};\r\n\r\nconst search = (e) => {\r\n  backToList();\r\n  _sync(e.target.value);\r\n};\r\n\r\nonMounted(() => {\r\n  // 現在のURLを取得\r\n  const urlParams = new URLSearchParams(window.location.search);\r\n  // idの値を取得\r\n  const id = urlParams.get('id');\r\n  // idが存在するかチェック\r\n  if (id) {\r\n    _getHelp(id);\r\n  }\r\n  //init\r\n  _sync('', true);\r\n});\r\n</script>\r\n\r\n<template>\r\n  <h1 class=\"lyPt8 lyPb8 lyPr4 lyPl4 lyMb16 lyTbMb24 pFont16 pFontBold pBorderBottom2pxSolidBlack\"\r\n  >ヘルプ</h1>\r\n  <p class=\"lyMb16 lyTbMb24 pFont14 pFontBold\">ヘルプのキーワードを入力してください。</p>\r\n  <div class=\"lyMb16 lyTbMb24 \">\r\n    <div class=\"pPopFormWrap pFont16\">\r\n      <input\r\n        v-model=\"searchWords\"\r\n        type=\"text\"\r\n        id=\"helpSearch\"\r\n        class=\"pPopForm\"\r\n        placeholder=\" \"\r\n        @input=\"search\"\r\n      >\r\n      <label\r\n        for=\"searchWords\"\r\n        class=\"pPopFormLabel\"\r\n      >例：ログインできない</label>\r\n    </div>\r\n  </div>\r\n  <p\r\n    v-if=\"isHelpEmpty\"\r\n    class=\"lyMb16\"\r\n  >ヘルプが見つかりませんでした。</p>\r\n  <div\r\n    v-else-if=\" ! isList\"\r\n    class=\"lyMb16 lyTbMb24 lyPd16 pBackColorWhite pBorderRadius4px\"\r\n  >\r\n    <section>\r\n      <h1 class=\"pFont16 pSpFont14 pFontMedium lyMb24\">{{ helpDetail && helpDetail.title ? helpDetail.title : \"\" }}</h1>\r\n      <div\r\n        class=\"pSpFont14\"\r\n        v-html=\"helpDetail && helpDetail.content ? helpDetail.content : ''\"\r\n      >\r\n      </div>\r\n    </section>\r\n  </div>\r\n  <div\r\n    v-else\r\n    class=\"lyMb16 lyTbMb24 lyPd16 pBackColorWhite pBorderRadius4px\"\r\n  >\r\n    <p\r\n      v-for=\"message in messages\"\r\n      class=\"pFontRed\"\r\n    >{{message}}</p>\r\n    <section\r\n      v-for=\"helpWrap in helpList\"\r\n      class=\"lyPt12 lyPb12\"\r\n    >\r\n      <h2 class=\"lyMb16 pFont14 pFontBold\">{{ helpWrap.category_name }}</h2>\r\n      <ul class=\"pBorderTop1pxSolidGray4\">\r\n        <li\r\n          v-for=\"element in helpWrap.helps\"\r\n          :key=\"element.id\"\r\n          class=\"pBorderBottom1pxSolidGray4\"\r\n        >\r\n          <button\r\n            class=\"lyVerticalBwCnt lyW100 lyPt8 lyPb8 pFont14 pFontBlack lyTextLeft\"\r\n            @click=\"selectHelp(element.title, element.content, element.id)\"\r\n          >{{ element.title }}\r\n            <span class=\"lyBlock lyW32px lyMl8 lyShrinkNone\"><img\r\n              :src=\"siteUrl+'images/btnIconRightArrowBlack.svg'\"\r\n              width=\"16\"\r\n              height=\"16\"\r\n              alt=\"\"\r\n            ></span>\r\n          </button>\r\n        </li>\r\n      </ul>\r\n    </section>\r\n  </div>\r\n  <div class=\"lyMaxW400px lyBlockCnt\">\r\n    <a\r\n      :href=\"siteUrl+'help#'\"\r\n      class=\"lyHvCnt lyW100 lyPt12 lyPb12 lyTextCnt pFont14 pFontBold pFontWhite pBackColorGreen pBorderRadius2px pHoverSlideChange\"\r\n    >ヘルプ一覧に戻る</a>\r\n  </div>\r\n</template>\r\n","import {createApp} from 'vue';\r\nimport App from \"./HelpList.vue\";\r\n\r\ncreateApp(App).mount('#js-app');"],"names":["siteUrl","searchWords","ref","messages","helpList","helpDetail","connecting","isList","isFirst","isHelpEmpty","computed","key","_handleError","_handleAbort","_handleTimeout","_sync","search","_serverConnect","data","_getHelp","id","selectHelp","onSuccess","openMethod","openUrl","sendBody","resolve","reject","xhr","event","e","title","content","_formatText","urlParams","backToList","text","pattern","onMounted","createApp","App"],"mappings":"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"}