{"version":3,"sources":["webpack:///./src/modules/question/preview-question/answers/fill-input-img/FillInputImg.vue?190e","webpack:///./src/modules/question/preview-question/answers/fill-input-img/FillInputImg.vue?cb49","webpack:///./src/modules/question/preview-question/answers/fill-input-img/FillInputImg.vue?4a8f","webpack:///src/modules/question/preview-question/answers/fill-input-img/FillInputImg.vue","webpack:///./src/modules/question/preview-question/answers/fill-input-img/FillInputImg.vue?2808","webpack:///./src/modules/question/preview-question/answers/fill-input-img/FillInputImg.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","dataSource","_v","_s","code","_e","attrs","urlQuestionImg","content","parent","isWorked","answerContent","ref","location","class","domProps","on","$event","changeAnswer","type","questionId","handleFocus","handleMouseSelection","staticRenderFns","name","mixins","data","focusId","txtSelection","computed","mapState","methods","mapActions","evt","info","getBoundingClientRect","top","left","offsetTopElm","val","isOverHaflScreen","handleBlur","component"],"mappings":"kHAAA,W,2DCAA,W,gECAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,yBAAyB,CAAEN,EAAIO,WAAe,KAAEH,EAAG,IAAI,CAACJ,EAAIQ,GAAGR,EAAIS,GAAGT,EAAIO,WAAWG,MAAM,OAAOV,EAAIW,KAAMX,EAAIO,WAAkB,QAAEH,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,MAAM,CAACQ,MAAM,CAAC,IAAOZ,EAAIa,eAAiB,IAAOb,EAAIO,WAAkB,QAAG,IAAMP,EAAIO,WAAWO,aAAad,EAAIW,KAA8B,OAAxBX,EAAIe,OAAOC,SAAmBZ,EAAG,QAAQ,CAACE,YAAY,6BAA6B,CAACN,EAAIQ,GAAG,WAAWR,EAAIS,GAAGT,EAAIO,WAAWU,eAAe,YAAYb,EAAG,QAAQ,CAACc,IAAK,YAAelB,EAAIO,WAAqB,WAAI,IAAMP,EAAImB,SAAUb,YAAY,gCAAgCc,MAAM,CAAE,WAAoC,OAAxBpB,EAAIe,OAAOC,UAAoBJ,MAAM,CAAC,KAAO,OAAO,GAAM,YAAeZ,EAAIO,WAAqB,WAAI,IAAMP,EAAImB,SAAU,YAAc,IAAI,aAAe,MAAM,QAAU,6CAA6C,KAAO,KAAKE,SAAS,CAAC,MAAQrB,EAAIO,WAAWU,eAAeK,GAAG,CAAC,KAAO,SAASC,GAAQ,OAAOvB,EAAIwB,aAAaD,EAAQ,CACzgCJ,SAAUnB,EAAImB,SACdM,KAAMzB,EAAIe,OAAOU,KACjBC,WAAY1B,EAAIO,WAAWmB,cACzB,MAAQ,SAASH,GAAQ,OAAOvB,EAAI2B,YAAYJ,EAAQ,CAC1DJ,SAAUnB,EAAImB,SACdM,KAAMzB,EAAIe,OAAOU,KACjBC,WAAY1B,EAAIO,WAAWmB,cACzB,OAAS,SAASH,GAAQ,OAAOvB,EAAIwB,aAAaD,EAAQ,CAC5DJ,SAAUnB,EAAImB,SACdM,KAAMzB,EAAIe,OAAOU,KACjBC,WAAY1B,EAAIO,WAAWmB,cACzB,MAAQ,SAASH,GAAQ,OAAOvB,EAAI2B,YAAYJ,EAAQ,CAC1DJ,SAAUnB,EAAImB,SACdM,KAAMzB,EAAIe,OAAOU,KACjBC,WAAY1B,EAAIO,WAAWmB,cACzB,QAAU,SAASH,GAAQ,OAAOvB,EAAI4B,qBAAqBL,UACrEM,EAAkB,G,uuBC2DP,OACfC,oBACAC,gBACAC,KAHA,WAIA,OACAC,aACApB,qCACAqB,kBAGAC,gBACAC,uDACAA,gDAEAC,eACAC,6EADA,IAGAX,YAHA,SAGAY,GAAA,gEACA,6BAEA,2BACA,EACA,8BACAC,aADA,YACAA,aACAC,wBAAAC,IACA,EACA,8BACAF,aADA,YACAA,aACAC,wBAAAE,KAEA,EACAC,kCAGA,6BACAJ,GADA,IAEAK,mBACAC,qBACA5B,4DACAwB,QACAC,aAIAI,WA9BA,SA8BAR,GACA,6BACA,yBADA,IAEAM,uBAIAjB,qBArCA,SAqCAW,GACA,qBAKA,GAJA,uCACAA,wBACAA,uBAEA,mBACA,eACA,qCACA,mCACA,uCAEA,mCC3IkZ,I,kCCS9YS,EAAY,eACd,EACAjD,EACA8B,GACA,EACA,KACA,WACA,MAIa,aAAAmB,E","file":"js/chunk-4aeedf3b.3304b9d0.js","sourcesContent":["export * from \"-!../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FillInputImg.vue?vue&type=style&index=0&id=377c5d9e&lang=scss&scoped=true&\"","export * from \"-!../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FillInputImg.vue?vue&type=style&index=1&id=377c5d9e&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"fill-input css-border\"},[(_vm.dataSource.code)?_c('b',[_vm._v(_vm._s(_vm.dataSource.code)+\" \")]):_vm._e(),(_vm.dataSource.content)?_c('div',{staticClass:\"fill-input__img\"},[_c('img',{attrs:{\"src\":(_vm.urlQuestionImg + \"/\" + (_vm.dataSource.content)),\"alt\":_vm.dataSource.content}})]):_vm._e(),(_vm.parent.isWorked !== null)?_c('label',{staticClass:\"form-control label-answer\"},[_vm._v(\"\\n      \"+_vm._s(_vm.dataSource.answerContent)+\"\\n    \")]):_c('input',{ref:(\"fill_img_\" + (_vm.dataSource.questionId) + \"_\" + _vm.location),staticClass:\"form-control input-hide-place\",class:{ 'evt-none': _vm.parent.isWorked !== null },attrs:{\"type\":\"text\",\"id\":(\"fill_img_\" + (_vm.dataSource.questionId) + \"_\" + _vm.location),\"placeholder\":\"?\",\"autocomplete\":\"off\",\"onInput\":\"this.parentNode.dataset.value = this.value\",\"size\":\"1\"},domProps:{\"value\":_vm.dataSource.answerContent},on:{\"blur\":function($event){return _vm.changeAnswer($event, {\n            location: _vm.location,\n            type: _vm.parent.type,\n            questionId: _vm.dataSource.questionId,\n          })},\"focus\":function($event){return _vm.handleFocus($event, {\n            location: _vm.location,\n            type: _vm.parent.type,\n            questionId: _vm.dataSource.questionId,\n          })},\"change\":function($event){return _vm.changeAnswer($event, {\n            location: _vm.location,\n            type: _vm.parent.type,\n            questionId: _vm.dataSource.questionId,\n          })},\"keyup\":function($event){return _vm.handleFocus($event, {\n            location: _vm.location,\n            type: _vm.parent.type,\n            questionId: _vm.dataSource.questionId,\n          })},\"mouseup\":function($event){return _vm.handleMouseSelection($event)}}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"fill-input css-border\">\r\n    <b v-if=\"dataSource.code\">{{ dataSource.code }} </b>\r\n    <div class=\"fill-input__img\" v-if=\"dataSource.content\">\r\n      <img\r\n        :src=\"`${urlQuestionImg}/${dataSource.content}`\"\r\n        :alt=\"dataSource.content\"\r\n      />\r\n    </div>\r\n    <!-- Tự điều chỉnh độ rộng input \r\n      ModifiedBy: anhdd (11/1/2023)\r\n    -->\r\n    <label class=\"form-control label-answer\" v-if=\"parent.isWorked !== null\">\r\n      {{ dataSource.answerContent }}\r\n    </label>\r\n\r\n    <input\r\n        v-else\r\n        class=\"form-control input-hide-place\"\r\n        type=\"text\"\r\n        :id=\"`fill_img_${dataSource.questionId}_${location}`\"\r\n        :value=\"dataSource.answerContent\"\r\n        :ref=\"`fill_img_${dataSource.questionId}_${location}`\"\r\n        @blur=\"\r\n          changeAnswer($event, {\r\n            location,\r\n            type: parent.type,\r\n            questionId: dataSource.questionId,\r\n          })\r\n        \"\r\n        @focus=\"\r\n          handleFocus($event, {\r\n            location,\r\n            type: parent.type,\r\n            questionId: dataSource.questionId,\r\n          })\r\n        \"\r\n        @change=\"\r\n          changeAnswer($event, {\r\n            location,\r\n            type: parent.type,\r\n            questionId: dataSource.questionId,\r\n          })\r\n        \"\r\n        @keyup=\"\r\n          handleFocus($event, {\r\n            location,\r\n            type: parent.type,\r\n            questionId: dataSource.questionId,\r\n          })\r\n        \"\r\n        @mouseup=\"handleMouseSelection($event)\"\r\n        placeholder=\"?\"\r\n        autocomplete=\"off\"\r\n        :class=\"{ 'evt-none': parent.isWorked !== null }\"\r\n        onInput=\"this.parentNode.dataset.value = this.value\"\r\n        size=\"1\"\r\n      />\r\n    <!-- ============================== -->\r\n\r\n    <!-- :disabled=\"parent.isTrue !== null\" -->\r\n\r\n    <!-- :readonly=\"parent.isTrue !== null\" -->\r\n    <!-- :class=\"{'bg--white': setCheckExcercise.isCheck}\" \r\n\t\t\t:disabled=\"setCheckExcercise.isCheck\" -->\r\n    <!-- v-model=\"dataSource.answerContent\"  -->\r\n    <!-- :value=\"dataSource.answerContent\"  -->\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport mixinsQuestionPreview from \"./../../_store/mixinsQuestionPreview\";\r\nimport { APP_CONFIG } from \"@/utils/constants\";\r\nimport { STORE_KEY } from \"./../../_store/constants\";\r\nimport { mapState, mapActions } from \"vuex\";\r\n\r\nexport default {\r\n  name: \"FillInputImg\",\r\n  mixins: [mixinsQuestionPreview],\r\n  data() {\r\n    return {\r\n      focusId: null,\r\n      urlQuestionImg: APP_CONFIG.urlQuestionImg,\r\n      txtSelection: \"\",\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapState(STORE_KEY, [\"valVituralKeyboard\"]),\r\n    ...mapState(\"common\", [\"setCheckExcercise\"]),\r\n  },\r\n  methods: {\r\n    ...mapActions(STORE_KEY, [\"setVituralKeyVal\", \"acSetTxtInputSelected\"]),\r\n\r\n    handleFocus(evt, info = {}) {\r\n      this.handleMouseSelection(evt);\r\n      // document.getSelection && console.log('Selected: ', document.getSelection())\r\n      let halfWindowHeight = window.innerHeight / 2;\r\n      let offsetTopElm =\r\n        this.$refs[\r\n          `fill_img_${info.questionId}_${info.location}`\r\n        ].getBoundingClientRect().top;\r\n      let offsetLeftElm =\r\n        this.$refs[\r\n          `fill_img_${info.questionId}_${info.location}`\r\n        ].getBoundingClientRect().left;\r\n\r\n      let spaceHeightInput =\r\n        (offsetTopElm / window.innerHeight) * 100 > 80 ? 20 : 50; // 50 or 20 is height input\r\n\r\n      // Obj have ref key support render value onpress vitural keyboard\r\n      this.setVituralKeyVal({\r\n        ...info,\r\n        val: evt.target.value,\r\n        isOverHaflScreen: offsetTopElm > halfWindowHeight ? true : false,\r\n        ref: `fill_img_${info.questionId}_${info.location}`,\r\n        top: offsetTopElm + spaceHeightInput,\r\n        left: offsetLeftElm / 2, // /2 is box center\r\n      });\r\n    },\r\n\r\n    handleBlur(evt) {\r\n      this.setVituralKeyVal({\r\n        ...this.valVituralKeyboard,\r\n        val: evt.target.value,\r\n      });\r\n    },\r\n\r\n    handleMouseSelection(evt) {\r\n      let value = evt.target.value;\r\n      this.txtSelection = evt.target.value.slice(\r\n        evt.target.selectionStart,\r\n        evt.target.selectionEnd\r\n      );\r\n      if (this.txtSelection) {\r\n        let lengthTxt = value.length;\r\n        let firstTxt = value.slice(0, evt.target.selectionStart);\r\n        let lastTxt = value.slice(evt.target.selectionEnd, lengthTxt);\r\n        this.acSetTxtInputSelected([firstTxt, lastTxt]);\r\n      } else {\r\n        this.acSetTxtInputSelected([]);\r\n      }\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.bg--white {\r\n  background: #fff;\r\n}\r\n// .css-border{\r\n// \tborder: 1px solid #ccc;\r\n// \tborder-radius: 8px;\r\n// }\r\n</style>\r\n\r\n<style lang=\"scss\" scoped>\r\n.label-answer {\r\n  position: absolute;\r\n  bottom: -15px;\r\n  right: -30px;\r\n  width: auto !important;\r\n  min-width: 50px;\r\n  line-height: 50px;\r\n  margin: 0;\r\n}\r\n\r\n.input-sizer {\r\n  display: inline-grid !important;\r\n  vertical-align: top !important;\r\n  align-items: center !important;\r\n  bottom: -23px;\r\n  right: -30px;\r\n  position: absolute;\r\n  background-color: #fff;\r\n\r\n  &.stacked {\r\n    align-items: stretch !important;\r\n\r\n    &::after,\r\n    input,\r\n    textarea {\r\n      grid-area: 2 / 1;\r\n    }\r\n  }\r\n\r\n  &::after,\r\n  input,\r\n  textarea {\r\n    width: auto !important;\r\n    grid-area: 1 / 2;\r\n    resize: none !important;\r\n    background: none !important;\r\n    appearance: none !important;\r\n  }\r\n\r\n  &::after {\r\n    content: attr(data-value) \" \";\r\n    visibility: hidden !important;\r\n    white-space: pre-wrap !important;\r\n  }\r\n\r\n  &:focus-within {\r\n    textarea:focus,\r\n    input:focus {\r\n      outline: none !important;\r\n    }\r\n  }\r\n}\r\n\r\n.question--fill_input_img--1 .question-body .answer input {\r\n  position: initial !important;\r\n}\r\n</style>","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FillInputImg.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FillInputImg.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FillInputImg.vue?vue&type=template&id=377c5d9e&scoped=true&\"\nimport script from \"./FillInputImg.vue?vue&type=script&lang=js&\"\nexport * from \"./FillInputImg.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FillInputImg.vue?vue&type=style&index=0&id=377c5d9e&lang=scss&scoped=true&\"\nimport style1 from \"./FillInputImg.vue?vue&type=style&index=1&id=377c5d9e&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"377c5d9e\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}