{"version":3,"sources":["webpack:///./src/components/contextMenu/widgets/videoWidgetPanel.vue","webpack:///src/components/contextMenu/widgets/videoWidgetPanel.vue","webpack:///./src/components/contextMenu/widgets/videoWidgetPanel.vue?a80d","webpack:///./src/components/contextMenu/widgets/videoWidgetPanel.vue?19a5","webpack:///./src/components/contextMenu/widgets/videoWidgetPanel.vue?0635"],"names":["render","_vm","this","_c","_self","staticClass","directives","name","rawName","value","videoUrl","expression","attrs","domProps","on","$event","target","composing","device","staticStyle","slot","onInputBorderDash","onChangeBorderDash","model","itemBorderDash","callback","$$v","_v","_s","itemBorderWidth","onInputBorderWidth","onChangeBorderWidth","style","backgroundColor","borderColor","hex8","border","getColorBorder","onUpdateColor","staticRenderFns","components","ChromePicker","computed","mapGetters","survey","activeWidget","configs","get","set","url","setSurveyStepParam","fire","data","timeoutId","created","_objects","strokeWidth","strokeDashArray","stroke","hex","slice","methods","width","background","height","strokeUniform","renderAll","dash","color","clearTimeout","setTimeout","component"],"mappings":"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","file":"js/videoWidgetPanel.53191cac.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"context-panel-container\"},[_c('div',{staticClass:\"context-panel-scroll\"},[_c('div',{staticClass:\"context-panel-group\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.videoUrl),expression:\"videoUrl\"}],staticClass:\"video-url-input\",attrs:{\"type\":\"text\",\"placeholder\":\"https://\"},domProps:{\"value\":(_vm.videoUrl)},on:{\"input\":function($event){if($event.target.composing)return;_vm.videoUrl=$event.target.value}}}),_c('div',{staticClass:\"border-params\"},[_c('label',{staticClass:\"border-dash\"},[_c('el-dropdown',{attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":\"border dash\",\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('span',{staticClass:\"el-dropdown-link\",staticStyle:{\"height\":\"24px\"}},[_c('div',{staticClass:\"dash\"})])]),_c('el-dropdown-menu',{staticClass:\"frame-sliders dropdown-menu\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('el-slider',{staticClass:\"slider\",attrs:{\"show-tooltip\":false,\"min\":0,\"max\":100},on:{\"input\":function($event){return _vm.onInputBorderDash($event)},\"change\":function($event){return _vm.onChangeBorderDash($event)}},model:{value:(_vm.itemBorderDash),callback:function ($$v) {_vm.itemBorderDash=$$v},expression:\"itemBorderDash\"}})],1)],1)],1),_c('div',{staticClass:\"border-width\"},[_c('el-dropdown',{attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":\"border width\",\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('span',{staticClass:\"el-dropdown-link border-width-title\"},[_vm._v(\" \"+_vm._s(_vm.itemBorderWidth)+\"px \")])]),_c('el-dropdown-menu',{staticClass:\"frame-sliders dropdown-menu\",attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('el-slider',{staticClass:\"slider\",attrs:{\"show-tooltip\":false,\"min\":0,\"max\":20},on:{\"input\":function($event){return _vm.onInputBorderWidth($event)},\"change\":function($event){return _vm.onChangeBorderWidth($event)}},model:{value:(_vm.itemBorderWidth),callback:function ($$v) {_vm.itemBorderWidth=$$v},expression:\"itemBorderWidth\"}})],1)],1)],1),_c('div',{staticClass:\"border-color\"},[_c('el-dropdown',{attrs:{\"placement\":\"bottom\",\"trigger\":\"click\"}},[_c('span',{staticClass:\"picker-button\"},[_c('el-tooltip',{attrs:{\"placement\":\"bottom\",\"content\":\"border color\",\"transition\":\"fade-tooltip\",\"disabled\":_vm.device === 'mobile'}},[_c('div',{staticClass:\"color-picker-wraper\",style:({\n                    backgroundColor: _vm.borderColor.hex8,\n                    border: _vm.getColorBorder(_vm.borderColor)\n                  })})])],1),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('chrome-picker',{staticClass:\"picker-element\",on:{\"input\":function($event){return _vm.onUpdateColor($event)}},model:{value:(_vm.borderColor),callback:function ($$v) {_vm.borderColor=$$v},expression:\"borderColor\"}})],1)],1)],1)]),_c('div',{staticClass:\"field-name\"},[_vm._v(\"border\")])])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"context-panel-container\">\n    <div class=\"context-panel-scroll\">\n      <div class=\"context-panel-group\">\n        <input\n          type=\"text\"\n          v-model=\"videoUrl\"\n          placeholder=\"https://\"\n          class=\"video-url-input\"\n        />\n        <div class=\"border-params\">\n          <label class=\"border-dash\">\n            <el-dropdown placement=\"bottom\" trigger=\"click\">\n              <el-tooltip\n                placement=\"bottom\"\n                content=\"border dash\"\n                transition=\"fade-tooltip\"\n                :disabled=\"device === 'mobile'\"\n              >\n                <span class=\"el-dropdown-link\" style=\"height: 24px;\">\n                  <div class=\"dash\"></div>\n                </span>\n              </el-tooltip>\n\n              <el-dropdown-menu\n                class=\"frame-sliders dropdown-menu\"\n                slot=\"dropdown\"\n              >\n                <el-slider\n                  class=\"slider\"\n                  :show-tooltip=\"false\"\n                  :min=\"0\"\n                  :max=\"100\"\n                  v-model=\"itemBorderDash\"\n                  @input=\"onInputBorderDash($event)\"\n                  @change=\"onChangeBorderDash($event)\"\n                />\n              </el-dropdown-menu>\n            </el-dropdown>\n          </label>\n          <div class=\"border-width\">\n            <el-dropdown placement=\"bottom\" trigger=\"click\">\n              <el-tooltip\n                placement=\"bottom\"\n                content=\"border width\"\n                transition=\"fade-tooltip\"\n                :disabled=\"device === 'mobile'\"\n              >\n                <span class=\"el-dropdown-link border-width-title\">\n                  {{ itemBorderWidth }}px\n                </span>\n              </el-tooltip>\n\n              <el-dropdown-menu\n                class=\"frame-sliders dropdown-menu\"\n                slot=\"dropdown\"\n              >\n                <el-slider\n                  class=\"slider\"\n                  :show-tooltip=\"false\"\n                  :min=\"0\"\n                  :max=\"20\"\n                  v-model=\"itemBorderWidth\"\n                  @input=\"onInputBorderWidth($event)\"\n                  @change=\"onChangeBorderWidth($event)\"\n                />\n              </el-dropdown-menu>\n            </el-dropdown>\n          </div>\n          <div class=\"border-color\">\n            <el-dropdown placement=\"bottom\" trigger=\"click\">\n              <span class=\"picker-button\">\n                <el-tooltip\n                  placement=\"bottom\"\n                  content=\"border color\"\n                  transition=\"fade-tooltip\"\n                  :disabled=\"device === 'mobile'\"\n                >\n                  <div\n                    :style=\"{\n                      backgroundColor: borderColor.hex8,\n                      border: getColorBorder(borderColor)\n                    }\"\n                    class=\"color-picker-wraper\"\n                  ></div>\n                </el-tooltip>\n              </span>\n              <el-dropdown-menu slot=\"dropdown\">\n                <chrome-picker\n                  class=\"picker-element\"\n                  @input=\"onUpdateColor($event)\"\n                  v-model=\"borderColor\"\n                />\n              </el-dropdown-menu>\n            </el-dropdown>\n          </div>\n        </div>\n        <div class=\"field-name\">border</div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { getColorBorder } from \"@/helpers/hex\";\nimport { mapGetters } from \"vuex\";\nimport ChromePicker from \"vue-color/src/components/Chrome\";\nimport { setSurveyStepParam } from \"@/util/survey/markSurveyObject\";\nimport \"@/assets/css/contextMenu.css\";\n\nexport default {\n  name: \"PILVideoWidgetPanel\",\n  components: {\n    ChromePicker\n  },\n  computed: {\n    ...mapGetters({\n      device: \"workSpace/device\",\n      survey: \"workSpace/survey\",\n      activeWidget: \"workSpace/activeWidget\"\n    }),\n    configs() {\n      return this.activeWidget.configs;\n    },\n    videoUrl: {\n      get() {\n        return this.configs.videoUrl || \"\";\n      },\n      set(url) {\n        this.configs.videoUrl = url;\n        setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n        this.survey.fire(\"canvas:changes\");\n      }\n    }\n  },\n  data() {\n    return {\n      getColorBorder,\n      itemBorderDash: 0,\n      itemBorderWidth: 0,\n      borderColor: {},\n      timeoutId: null\n    };\n  },\n  created() {\n    this.itemBorderWidth = this.activeWidget._objects[0].strokeWidth;\n    this.itemBorderDash = this.activeWidget._objects[0].strokeDashArray\n      ? this.activeWidget._objects[0].strokeDashArray[0]\n      : 0;\n    if (!this.activeWidget._objects[0].stroke)\n      this.activeWidget._objects[0].set(\"stroke\", \"#000000\");\n    this.borderColor = {\n      hex8: this.activeWidget._objects[0].stroke,\n      hex: this.activeWidget._objects[0].stroke.slice(0, 7)\n    };\n  },\n  methods: {\n    onChangeBorderDash() {\n      this.survey.fire(\"canvas:changes\");\n    },\n    onChangeBorderWidth() {\n      this.survey.fire(\"canvas:changes\");\n    },\n    onInputBorderWidth(width) {\n      const background = this.activeWidget._objects[0];\n      this.activeWidget.set({\n        width: background.width + background.strokeWidth,\n        height: background.height + background.strokeWidth\n      });\n      this.activeWidget._objects[0].set({\n        strokeWidth: width,\n        strokeUniform: true\n      });\n      this.configs.strokeWidth = width;\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      this.survey.renderAll();\n    },\n    onInputBorderDash(dash) {\n      this.activeWidget._objects[0].set({ strokeDashArray: [dash] });\n      this.configs.strokeDashArray = [dash];\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      this.survey.renderAll();\n    },\n    onUpdateColor(color) {\n      this.activeWidget._objects[0].set({ stroke: color.hex });\n      this.survey.renderAll();\n      this.configs.stroke = color.hex;\n      setSurveyStepParam(\"configs\", this.activeWidget, this.configs);\n      if (this.timeoutId) clearTimeout(this.timeoutId);\n      this.timeoutId = setTimeout(() => {\n        this.survey.fire(\"canvas:changes\");\n      }, 500);\n    }\n  }\n};\n</script>\n\n<style scoped>\n.video-panel-wraper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.panel-title {\n  color: #1d2d36;\n  font-size: 12px;\n  font-weight: 600;\n  text-align: center;\n  margin-top: 10px;\n}\n.change-logo {\n  width: 65px;\n  min-height: 65px;\n  border: 1px solid #bcbccb;\n  margin-top: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.change-logo-title {\n  font-size: 12px;\n  text-align: center;\n}\n.border-params {\n  display: flex;\n  background: #f8f8f5;\n  height: 30px;\n  width: 165px;\n  margin: 20px auto 0;\n  justify-content: space-around;\n}\n.border-dash,\n.border-color,\n.border-width {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  min-height: 24px;\n  position: relative;\n}\n.border-width-title {\n  height: 24px;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n}\n.dash {\n  background: #000;\n  margin: auto;\n  width: 20px;\n  height: 1px;\n}\n.picker-label {\n  width: 24px;\n  height: 24px;\n  border: 1px solid black;\n}\n.slider {\n  width: 200px;\n}\n.video-url-input {\n  width: 200px;\n  height: 20px;\n  line-height: 20px;\n  font-size: 12px;\n  background: #f8f8f5;\n  border: none;\n  padding: 5px;\n  box-sizing: border-box;\n}\n@media screen and (max-width: 990px) {\n  .border-dash,\n  .border-color,\n  .border-width {\n    margin-bottom: 0;\n  }\n  .video-url-input {\n    margin-top: 10px;\n  }\n}\n</style>\n","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!./videoWidgetPanel.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!./videoWidgetPanel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./videoWidgetPanel.vue?vue&type=template&id=fe08a098&scoped=true&\"\nimport script from \"./videoWidgetPanel.vue?vue&type=script&lang=js&\"\nexport * from \"./videoWidgetPanel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./videoWidgetPanel.vue?vue&type=style&index=0&id=fe08a098&prod&scoped=true&lang=css&\"\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  \"fe08a098\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./videoWidgetPanel.vue?vue&type=style&index=0&id=fe08a098&prod&scoped=true&lang=css&\""],"sourceRoot":""}