{"version":3,"file":"main12.js","sources":["../../../resources/js/management/column/slide/Slide.vue","../../../resources/js/management/column/slide/main.js"],"sourcesContent":["<template>\r\n  <draggable\r\n      v-model=\"slideList\"\r\n      item-key=\"is_slide\"\r\n      @end=\"changeOrder\"\r\n      handle=\".modBasicSecTitle\"\r\n  >\r\n    <template #item=\"{ element, index }\">\r\n      <section class=\"lyMb16\">\r\n\r\n        <h2 class=\"modBasicSecTitle lyPt16 lyPb16\">スライド{{ index+1 }}枚目</h2>\r\n        <div class=\"modBasicSecContents\">\r\n          <div class=\"lyVerticalCnt lyHorizontalBw lyPd16\">\r\n            <p class=\"lyW10\">\r\n              <img :src=\"mediaBaseUrl+'/' +( element.thumbnail ? ('public_image/'+element.thumbnail+'?size=570_380') : 'images/columnDfltThumb.png')\" alt=\"\">\r\n            </p>\r\n            <p class=\"pFontBold lyW40\" style=\"flex-grow: 1;margin-left: 16px\">\r\n              {{element.title}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </section>\r\n\r\n    </template>\r\n  </draggable>\r\n\r\n</template>\r\n\r\n<script>\r\nimport {onMounted, ref} from 'vue';\r\nimport draggable from 'vuedraggable'\r\n\r\nexport default {\r\n  components: {\r\n    draggable: draggable\r\n  },\r\n  setup() {\r\n    //ヘルプ一覧\r\n    const slideList = ref([]);\r\n\r\n    //状態 connecting\r\n    const connecting = ref(false);\r\n\r\n    //結果\r\n    let successBox = ref(null);\r\n\r\n    /**\r\n     * Ajax 通信失敗時に起動させるメソッド\r\n     */\r\n    const _handleError = () => {\r\n      //通信中フラグを false にする\r\n      connecting.value = false;\r\n    };\r\n    /**\r\n     * Ajax 中断時に起動させるメソッド\r\n     */\r\n    const _handleAbort = () => {\r\n      //通信中フラグを false にする\r\n      connecting.value = false;\r\n    };\r\n    /**\r\n     * Ajax タイムアウトに起動させるメソッド\r\n     */\r\n    const _handleTimeout = () => {\r\n      //通信中フラグを false にする\r\n      connecting.value = false;\r\n\r\n      };\r\n\r\n    //サーバー通信 slideList を取得\r\n    const _sync = () => {\r\n      _serverConnect((data) => {\r\n            slideList.value = data;\r\n      },\r\n          'get',\r\n          getSlides_ep\r\n      );\r\n    };\r\n\r\n    //サーバー通信 並び順変更\r\n    const changeOrder = () => {\r\n      const formData = new FormData();\r\n      formData.append(\"slides\", JSON.stringify(slideList.value));\r\n      _serverConnect(() => {\r\n            _showSuccess();\r\n            _sync();\r\n          },\r\n          'post',\r\n          changeSlideOrder_ep,\r\n          formData\r\n      );\r\n    }\r\n\r\n    //サーバーと通信する部分\r\n    const _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          if (data === null) {\r\n            reject();\r\n            return;\r\n          }\r\n          //失敗判定\r\n          if (event.target.status >= 400) {\r\n            reject();\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)\r\n        xhr.send(sendBody);\r\n      });\r\n    }\r\n\r\n    //更新に成功したtoastを表示\r\n    const _showSuccess = () => {\r\n      if (successBox.value && !successBox.value.classList.contains('isDsply')) {\r\n        successBox.value.classList.add('isDsply');\r\n        successBox.value.style.display = 'block';\r\n        successBox.value.style.zIndex = 9999;\r\n        setTimeout(() => { successBox.value.classList.remove('isDsply') }, 1500);\r\n      }\r\n    }\r\n\r\n    onMounted(() => {\r\n      if (document.getElementsByClassName('js-successToast')) {\r\n        successBox.value = document.getElementsByClassName('js-successToast')[0];\r\n      }\r\n\r\n      //init\r\n      _sync();\r\n    });\r\n\r\n    return {\r\n      tokenValue,\r\n      mediaBaseUrl,\r\n      getSlides_ep,\r\n      changeSlideOrder_ep,\r\n      slideList,\r\n      changeOrder,\r\n    };\r\n  },\r\n}\r\n\r\n</script>\r\n","import {createApp} from 'vue';\r\nimport App from \"./Slide.vue\";\r\n\r\ncreateApp(App).mount('#js-app');"],"names":["_sfc_main","draggable","slideList","ref","connecting","successBox","_handleError","_handleAbort","_handleTimeout","_sync","_serverConnect","data","changeOrder","formData","_showSuccess","onSuccess","openMethod","openUrl","sendBody","resolve","reject","xhr","event","e","onMounted","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_createBlock","_component_draggable","$setup","$event","_withCtx","element","index","_createElementVNode","_toDisplayString","_hoisted_7","createApp","App"],"mappings":"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"}