123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- <template>
- <div
- ref="box"
- :class="{
- 'floating-box': true,
- column
- }"
- :id="id"
- v-if="persist || shown"
- :style="{
- width: dragBox.width + 'px',
- height: dragBox.height + 'px',
- top: dragBox.top + 'px',
- left: dragBox.left + 'px'
- }"
- @mousedown.left="onResizeBox"
- >
- <div class="box-header item-draggable" @mousedown.left="onDragBox">
- <span class="drag material-icons" @dblclick="resetBoxPosition()"
- >drag_indicator</span
- >
- <span v-if="title" class="box-title" :title="title">{{
- title
- }}</span>
- <span
- v-if="!persist"
- class="delete material-icons"
- @click="toggleBox()"
- >highlight_off</span
- >
- </div>
- <div class="box-body">
- <slot name="body"></slot>
- </div>
- </div>
- </template>
- <script>
- import DragBox from "@/mixins/DragBox.vue";
- export default {
- mixins: [DragBox],
- props: {
- id: { type: String, default: null },
- column: { type: Boolean, default: true },
- title: { type: String, default: null },
- persist: { type: Boolean, default: false },
- initial: { type: String, default: "align-top" },
- minWidth: { type: Number, default: 100 },
- maxWidth: { type: Number, default: 1000 },
- minHeight: { type: Number, default: 100 },
- maxHeight: { type: Number, default: 1000 }
- },
- data() {
- return {
- shown: false,
- debounceTimeout: null
- };
- },
- mounted() {
- let initial = {
- top: 10,
- left: 10,
- width: 200,
- height: 400
- };
- if (this.id !== null && localStorage[`box:${this.id}`]) {
- const json = JSON.parse(localStorage.getItem(`box:${this.id}`));
- initial = { ...initial, ...json };
- this.shown = json.shown;
- } else {
- initial.top =
- this.initial === "align-bottom"
- ? Math.max(
- document.body.clientHeight - 10 - initial.height,
- 0
- )
- : 10;
- }
- this.setInitialBox(initial, true);
- this.$nextTick(() => {
- this.onWindowResize();
- window.addEventListener("resize", this.onWindowResize);
- });
- },
- unmounted() {
- window.removeEventListener("resize", this.onWindowResize);
- if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
- },
- methods: {
- setBoxDimensions(width, height) {
- this.dragBox.height = Math.min(
- Math.max(height, this.minHeight),
- this.maxHeight,
- document.body.clientHeight
- );
- this.dragBox.width = Math.min(
- Math.max(width, this.minWidth),
- this.maxWidth,
- document.body.clientWidth
- );
- },
- onResizeBox(e) {
- if (e.target !== this.$refs.box) return;
- document.onmouseup = () => {
- document.onmouseup = null;
- const { width, height } = e.target.style;
- this.setBoxDimensions(
- width
- .split("")
- .splice(0, width.length - 2)
- .join(""),
- height
- .split("")
- .splice(0, height.length - 2)
- .join("")
- );
- this.saveBox();
- };
- },
- toggleBox() {
- this.shown = !this.shown;
- this.saveBox();
- },
- resetBoxDimensions() {
- this.setBoxDimensions(200, 200);
- this.saveBox();
- },
- saveBox() {
- if (this.id === null) return;
- localStorage.setItem(
- `box:${this.id}`,
- JSON.stringify({
- height: this.dragBox.height,
- width: this.dragBox.width,
- top: this.dragBox.top,
- left: this.dragBox.left,
- shown: this.shown
- })
- );
- this.setInitialBox({
- top:
- this.initial === "align-bottom"
- ? Math.max(
- document.body.clientHeight -
- 10 -
- this.dragBox.height,
- 0
- )
- : 10,
- left: 10
- });
- },
- onDragBoxUpdate() {
- this.onWindowResize();
- },
- onWindowResize() {
- if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
- this.debounceTimeout = setTimeout(() => {
- const { width, height } = this.dragBox;
- this.setBoxDimensions(width + 0, height + 0);
- this.saveBox();
- }, 50);
- }
- }
- };
- </script>
- <style lang="less">
- .night-mode .floating-box {
- background-color: var(--dark-grey-2) !important;
- border: 0 !important;
- .box-body b {
- color: var(--light-grey-2) !important;
- }
- }
- .floating-box {
- display: flex;
- flex-direction: column;
- background-color: var(--white);
- color: var(--black);
- position: fixed;
- z-index: 10000000;
- resize: both;
- overflow: auto;
- border: 1px solid var(--light-grey-2);
- border-radius: @border-radius;
- padding: 0;
- .box-header {
- display: flex;
- height: 30px;
- width: 100%;
- background-color: var(--primary-color);
- color: var(--white);
- z-index: 100000001;
- .box-title {
- font-size: 16px;
- font-weight: 600;
- line-height: 30px;
- margin-right: 5px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
- .material-icons {
- font-size: 20px;
- line-height: 30px;
- &:hover,
- &:focus {
- filter: brightness(90%);
- }
- &.drag {
- margin: 0 5px;
- }
- &.delete {
- margin: 0 5px 0 auto;
- cursor: pointer;
- }
- }
- }
- .box-body {
- display: flex;
- flex-wrap: wrap;
- padding: 10px;
- height: calc(100% - 30px); /* 30px is the height of the box-header */
- overflow: auto;
- span {
- padding: 3px 6px;
- }
- }
- &.column .box-body {
- flex-flow: column;
- span {
- flex: 1;
- display: block;
- }
- }
- }
- </style>
|