{"remainingRequest":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js??vue-loader-options!/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/ContentBar.vue?vue&type=style&index=0&id=1a31d018&prod&scoped=true&lang=scss&","dependencies":[{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/src/components/ContentBar.vue","mtime":1702265337626},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/sass-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/home/cmiss/Jenkins/workspace/mapintegratedvuer/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9pbnB1dCI7CkBpbXBvcnQgIn5lbGVtZW50LXVpL3BhY2thZ2VzL3RoZW1lLWNoYWxrL3NyYy9vcHRpb24iOwpAaW1wb3J0ICJ+ZWxlbWVudC11aS9wYWNrYWdlcy90aGVtZS1jaGFsay9zcmMvc2VsZWN0IjsKQGltcG9ydCAiLi4vYXNzZXRzL2hlYWRlci1pY29uLnNjc3MiOwoKCi50b29sYmFyLXRpdGxlIHsKICB3aWR0aDogMTYwcHg7CiAgaGVpZ2h0OiAyMHB4OwogIGNvbG9yOiAkYXBwLXByaW1hcnktY29sb3I7CiAgZm9udC1zaXplOiAxNHB4OwogIGZvbnQtd2VpZ2h0OiBub3JtYWw7CiAgbGluZS1oZWlnaHQ6IDIwcHg7CiAgbWFyZ2luLWxlZnQ6IDExcHg7CiAgbWFyZ2luLXRvcDogNHB4Owp9CgoudG9vbGJhci1mbGV4LWNvbnRhaW5lciB7CiAgZGlzcGxheTpmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiByb3c7CiAgLnNlbGVjdC1ib3ggewogICAgd2lkdGg6IDIwMHB4OwogICAgYm9yZGVyLXJhZGl1czogNHB4OwogICAgYm9yZGVyOiAxcHggc29saWQgcmdiKDE0NCwgMTQ3LCAxNTMpOwogICAgYmFja2dyb3VuZC1jb2xvcjogJGJhY2tncm91bmQ7CiAgICBmb250LXdlaWdodDogNTAwOwogICAgY29sb3I6IHJnYig0OCwgNDksIDUxKTsKICAgIG1hcmdpbi1sZWZ0OiA4cHg7CiAgICBtYXJnaW4tdG9wOiAzcHg7CiAgICBtYXJnaW4tYm90dG9tOiAycHg7CiAgICB6LWluZGV4OiA1OwogICAgOjp2LWRlZXAgLmVsLWlucHV0X19pbm5lciB7CiAgICAgIHdpZHRoOjE3N3B4OwogICAgICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOwogICAgICBoZWlnaHQ6IDI0cHg7CiAgICAgIHBhZGRpbmctbGVmdDogNHB4OwogICAgICBwYWRkaW5nLXJpZ2h0OiA4cHg7CiAgICAgIGJhY2tncm91bmQtY29sb3I6ICRiYWNrZ3JvdW5kOwogICAgICBib3JkZXItc3R5bGU6IG5vbmU7CiAgICB9CiAgICAKICAgIDo6di1kZWVwIC5lbC1pbnB1dF9faWNvbiB7CiAgICAgIGxpbmUtaGVpZ2h0OiAyNHB4OwogICAgICBjb2xvcjogJGxpZ2h0R3JleTsKICAgIH0KICB9CiAgaSAuc2VsZWN0LWJveCA6OnYtZGVlcCAuZWwtaW5wdXRfX2ljb24gewogICAgY29sb3I6IHJnYig0OCwgNDksIDUxKTsKICAgIGhlaWdodDogMjRweDsKICAgIHBhZGRpbmctbGVmdDogOHB4OwogICAgcGFkZGluZy1yaWdodDogOHB4OwogIH0KICAudGV4dCB7CiAgICBtYXJnaW4tbGVmdDogOHB4OwogICAgbWFyZ2luLXRvcDogN3B4OwogICAgZm9udC13ZWlnaHQ6IDUwMDsKICAgIC1tb3otdXNlci1zZWxlY3Q6IG5vbmU7CiAgICAtd2Via2l0LXVzZXItc2VsZWN0OiBub25lOwogICAgLW1zLXVzZXItc2VsZWN0OiBub25lOwogICAgdXNlci1zZWxlY3Q6IG5vbmU7CiAgICBsaW5lLWhlaWdodDoxOHB4OwogIH0KICAudGl0bGUgewogICAgd2lkdGg6IDE0MHB4OwogICAgY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICB9Cn0KCi52aWV3ZXJfZHJvcGRvd24gewogIHotaW5kZXg6IDU7CiAgLmVsLXNlbGVjdC1kcm9wZG93bl9faXRlbSB7CiAgICB3aGl0ZS1zcGFjZTogbm93cmFwOwogICAgdGV4dC1hbGlnbjogbGVmdDsKICAgICYuc2VsZWN0ZWQgewogICAgICBjb2xvcjogJGFwcC1wcmltYXJ5LWNvbG9yOwogICAgICBmb250LXdlaWdodDogbm9ybWFsOwogICAgfQogIH0KfQoKLmhpZGV7CiAgY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgbWFyZ2luLXJpZ2h0OiA2cHg7CiAgbWFyZ2luLXRvcDogM3B4Owp9CgouaWNvbi1ncm91cCB7CiAgZm9udC1zaXplOiAxMnB4Owp9CgouaW5mby1pY29uIHsKICBtYXJnaW4tcmlnaHQ6IDhweDsKICBmb250LXNpemU6IDI4cHg7CiAgY29sb3I6ICRhcHAtcHJpbWFyeS1jb2xvcjsKICBjdXJzb3I6IHBvaW50ZXI7CiAgJjo6YmVmb3JlIHsgLy8gc2luY2UgdGhlIGljb24gaXMgYSBmb250LCB3ZSBuZWVkIHRvIGFkanVzdCB0aGUgdmVydGljYWwgYWxpZ25tZW50CiAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICB0b3A6IC0ycHg7IAogIH0KfQoKLmZsYXRtYXAtY29udGV4dC1jYXJkIHsKICB3aWR0aDogMjQwcHg7Cn0KCi5jb250ZXh0LWNhcmQgewogIHdpZHRoOiA0NDBweDsKfQoKLmNvbnRleHQtY2FyZC1wb3BvdmVyIDo6di1kZWVwIC5lbC1wb3BvdmVyewogIG1heC13aWR0aDogY2FsYygxMDB2dyAtIDEwMHB4KTsKICBwYWRkaW5nLXJpZ2h0OiAwcHg7Cn0K"},{"version":3,"sources":["ContentBar.vue"],"names":[],"mappings":";AAwNA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"ContentBar.vue","sourceRoot":"src/components","sourcesContent":["<template>\n  <div>\n    <div class=\"toolbar-flex-container\">\n      <el-select\n        v-if=\"entries.length > 1\"\n        :popper-append-to-body=\"false\"\n        :value=\"entry.id\"\n        placeholder=\"Select\"\n        class=\"select-box\"\n        popper-class=\"viewer_dropdown\"\n        @change=\"viewerChanged($event)\"\n      >\n        <el-option\n          v-for=\"entry in entries\"\n          :key=\"entry.id\"\n          :label=\"getEntryTitle(entry)\"\n          :value=\"entry.id\"\n        />\n      </el-select>\n      <div v-else class=\"toolbar-title\">\n        {{ getEntryTitle(entry) }}\n      </div>\n    </div>\n    <el-row class=\"icon-group\">    \n      <div v-show=\"contextCardEntry && contextCardVisible\" class=\"hide\" @click=\"contextCardVisible = false\">\n        Hide information\n        <i class=\"el-icon-arrow-up\"></i>\n      </div>\n      <div v-show=\"contextCardEntry && !contextCardVisible\" class=\"hide\" @click=\"contextCardVisible = true\">\n        Show information\n        <i class=\"el-icon-arrow-down\"></i>\n      </div>\n      <el-popover\n        placement=\"bottom\"\n        :appendToBody=\"false\"\n        trigger=\"manual\"\n        :width=\"setPopperWidth(slot.id)\"\n        offset=0\n        class=\"context-card-popover\"\n        :popper-options=\"popperOptions\"\n        v-model=\"contextCardVisible\"\n      >\n        <template v-if=\"contextCardEntry\">\n          <flatmap-context-card \n            class=\"flatmap-context-card\"\n            v-if=\"(contextCardEntry.type == 'Flatmap' || \n                  contextCardEntry.type == 'MultiFlatmap')\" \n            :mapImpProv=\"contextCardEntry.mapImpProv\"\n          />\n          <context-card \n            v-if=\"contextCardEntry.type.toLowerCase() == 'scaffold'\"\n            :entry=\"contextCardEntry\"\n            :envVars=\"envVars\"\n            class=\"context-card\"\n            @context-ready=\"contextCardVisible = true\"\n            @scaffold-view-clicked=\"$emit('scaffold-view-clicked', $event)\"\n          />\n        </template>\n        <div class=\"el-icon-info info-icon\"\n          slot=\"reference\"\n          @click=\"contextCardVisible = !contextCardVisible\"\n          v-show=\"contextCardEntry\"\n        >\n        </div>\n      </el-popover>\n      <el-popover class=\"tooltip\" content=\"Close and remove\" placement=\"bottom-end\" :open-delay=\"helpDelay\"\n        :appendToBody=false trigger=\"hover\" popper-class=\"header-popper\" >\n        <map-svg-icon icon=\"close\" slot=\"reference\" class=\"header-icon\"\n          v-if=\"(activeView !== 'singlepanel') && (entry.mode !== 'main')\"\n          @click.native=\"closeAndRemove()\"/>\n      </el-popover>\n    </el-row>\n  </div>\n</template>\n\n\n<script>\n/* eslint-disable no-alert, no-console */\nimport Vue from \"vue\";\nimport EventBus from './EventBus';\nimport store from \"../store\";\nimport ContextCard from \"./ContextCard\";\nimport FlatmapContextCard from './FlatmapContextCard.vue';\nimport { Input, Option, Popover, Row, Select } from \"element-ui\";\nimport lang from \"element-ui/lib/locale/lang/en\";\nimport locale from \"element-ui/lib/locale\";\n\nlocale.use(lang);\nVue.use(Input);\nVue.use(Option);\nVue.use(Select);\nVue.use(Popover);\nVue.use(Row);\n\nexport default {\n  name: \"ContentBar\",\n  components: {\n    ContextCard,\n    FlatmapContextCard\n  },\n  props: {\n    entry: Object,\n  },\n  data: function() {\n    return {\n      contextCardVisible: false,\n      slot:{\n\n      },\n      boundariesElement: null, // this is set @hook:mounted by the parent component via the 'setBoundary' method\n      showDetails: true,\n      contextCardEntry: undefined,\n    }\n  },\n  computed: {\n    helpDelay() {\n      return store.state.settings.helpDelay;\n    },\n    activeView: function() {\n      return store.state.splitFlow.activeView;\n    },\n    envVars: function () {\n      return {\n        API_LOCATION: store.state.settings.sparcApi,\n        ALGOLIA_INDEX: store.state.settings.algoliaIndex,\n        ALGOLIA_KEY: store.state.settings.algoliaKey,\n        ALGOLIA_ID: store.state.settings.algoliaId,\n        PENNSIEVE_API_LOCATION: store.state.settings.pennsieveApi,\n        NL_LINK_PREFIX: store.state.settings.nlLinkPrefix,\n        ROOT_URL: store.state.settings.rootUrl,\n      };\n    },\n    popperOptions: function() { \n      return { \n        preventOverflow: {\n          enabled: true,\n          boundariesElement: this.boundariesElement,\n        }\n      }\n    },\n    entries: function() {\n      return store.state.entries.entries;\n    },\n  },\n  methods: {\n    closeAndRemove: function() {\n      store.commit(\"splitFlow/closeSlot\", \n        { id: this.entry.id, entries: this.entries});\n      EventBus.$emit(\"RemoveEntryRequest\", this.entry.id);\n    },\n    getEntryTitle: function(entry) {\n      if (entry) {\n        let title = entry.label ? entry.label + \" \": '';\n        let type = entry.type;\n        if (type == \"Scaffold\")\n          type = \"3D Scaffold\";\n        title += type;\n        if (entry.datasetId)\n          title += \" (\" + entry.datasetId + \")\";\n        else if (entry.discoverId)\n          title += \" (\" + entry.discoverId + \")\";\n        return title;\n      }\n      return \"Viewer\";\n    },\n    viewerChanged: function(value) {\n      if (this.entry.id && this.entry.id != value) {\n        store.commit(\"splitFlow/assignOrSwapPaneWithIds\", {\n          source: this.entry.id,\n          target: value\n        });\n        Vue.nextTick(() => {\n          setTimeout(() => {\n            this.$emit(\"chooser-changed\");\n          }, 1200);\n        });\n        //this.contextCardVisible = false; // Hide all context cards when switching viewers\n      }\n    },\n    // setPopper with is needed as the flatmap context card does not have an image and has smaller with\n    setPopperWidth: function(slotId) {\n      let entry = this.entries.find(entry => entry.id === slotId);\n      if (entry) {\n        if (entry.type == \"Flatmap\" || entry.type == \"MultiFlatmap\") {\n          return \"240px\";\n        } else {\n          return \"440px\";\n        }\n      }\n    },\n    // Set the boundaries element for the popper\n    setBoundary: function(boundaryElement) {\n      this.boundariesElement = boundaryElement;\n    },\n    setupFlatmapContextCard: function(mapImpProv) {\n      // flatmap context update\n      this.contextCardVisible = false; // hide the context card when new map loads\n      let contextEntry = Object.assign({mapImpProv: mapImpProv.prov}, this.entry);\n      this.contextCardEntry = contextEntry;\n    },\n    setupScaffoldContextCard: function(){\n      // scaffold context update\n      if (this.entry.contextCardUrl) {\n        this.contextCardEntry = { ...this.entry};\n      }\n    }\n  },\n  mounted: function() {\n    this.setupScaffoldContextCard();\n  }\n};\n</script>\n\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"~element-ui/packages/theme-chalk/src/input\";\n@import \"~element-ui/packages/theme-chalk/src/option\";\n@import \"~element-ui/packages/theme-chalk/src/select\";\n@import \"../assets/header-icon.scss\";\n\n\n.toolbar-title {\n  width: 160px;\n  height: 20px;\n  color: $app-primary-color;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  margin-left: 11px;\n  margin-top: 4px;\n}\n\n.toolbar-flex-container {\n  display:flex;\n  flex-direction: row;\n  .select-box {\n    width: 200px;\n    border-radius: 4px;\n    border: 1px solid rgb(144, 147, 153);\n    background-color: $background;\n    font-weight: 500;\n    color: rgb(48, 49, 51);\n    margin-left: 8px;\n    margin-top: 3px;\n    margin-bottom: 2px;\n    z-index: 5;\n    ::v-deep .el-input__inner {\n      width:177px;\n      color: $app-primary-color;\n      height: 24px;\n      padding-left: 4px;\n      padding-right: 8px;\n      background-color: $background;\n      border-style: none;\n    }\n    \n    ::v-deep .el-input__icon {\n      line-height: 24px;\n      color: $lightGrey;\n    }\n  }\n  i .select-box ::v-deep .el-input__icon {\n    color: rgb(48, 49, 51);\n    height: 24px;\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n  .text {\n    margin-left: 8px;\n    margin-top: 7px;\n    font-weight: 500;\n    -moz-user-select: none;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    line-height:18px;\n  }\n  .title {\n    width: 140px;\n    color: $app-primary-color;\n  }\n}\n\n.viewer_dropdown {\n  z-index: 5;\n  .el-select-dropdown__item {\n    white-space: nowrap;\n    text-align: left;\n    &.selected {\n      color: $app-primary-color;\n      font-weight: normal;\n    }\n  }\n}\n\n.hide{\n  color: $app-primary-color;\n  cursor: pointer;\n  margin-right: 6px;\n  margin-top: 3px;\n}\n\n.icon-group {\n  font-size: 12px;\n}\n\n.info-icon {\n  margin-right: 8px;\n  font-size: 28px;\n  color: $app-primary-color;\n  cursor: pointer;\n  &::before { // since the icon is a font, we need to adjust the vertical alignment\n    position: relative;\n    top: -2px; \n  }\n}\n\n.flatmap-context-card {\n  width: 240px;\n}\n\n.context-card {\n  width: 440px;\n}\n\n.context-card-popover ::v-deep .el-popover{\n  max-width: calc(100vw - 100px);\n  padding-right: 0px;\n}\n</style>\n"]}]}