Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

stackable.ts 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import Vue from 'vue'
  2. import { getZIndex } from '../util/helpers'
  3. interface options extends Vue {
  4. $refs: {
  5. content: Element
  6. }
  7. }
  8. /* @vue/component */
  9. export default Vue.extend<options>().extend({
  10. name: 'stackable',
  11. data () {
  12. return {
  13. stackClass: 'unpecified',
  14. stackElement: null as Element | null,
  15. stackExclude: null as Element[] | null,
  16. stackMinZIndex: 0,
  17. isActive: false
  18. }
  19. },
  20. computed: {
  21. activeZIndex (): number {
  22. if (typeof window === 'undefined') return 0
  23. const content = this.stackElement || this.$refs.content
  24. // Return current zindex if not active
  25. const index = !this.isActive
  26. ? getZIndex(content)
  27. : this.getMaxZIndex(this.stackExclude || [content]) + 2
  28. if (index == null) return index
  29. // Return max current z-index (excluding self) + 2
  30. // (2 to leave room for an overlay below, if needed)
  31. return parseInt(index)
  32. }
  33. },
  34. methods: {
  35. getMaxZIndex (exclude: Element[] = []) {
  36. const base = this.$el
  37. // Start with lowest allowed z-index or z-index of
  38. // base component's element, whichever is greater
  39. const zis = [this.stackMinZIndex, getZIndex(base)]
  40. // Convert the NodeList to an array to
  41. // prevent an Edge bug with Symbol.iterator
  42. // https://github.com/vuetifyjs/vuetify/issues/2146
  43. const activeElements = [...document.getElementsByClassName(this.stackClass)]
  44. // Get z-index for all active dialogs
  45. for (let index = 0; index < activeElements.length; index++) {
  46. if (!exclude.includes(activeElements[index])) {
  47. zis.push(getZIndex(activeElements[index]))
  48. }
  49. }
  50. return Math.max(...zis)
  51. }
  52. }
  53. })