diff options
author | mfluharty <mfluharty@gitlab.com> | 2019-09-13 14:31:45 -0600 |
---|---|---|
committer | mfluharty <mfluharty@gitlab.com> | 2019-09-14 17:54:23 -0600 |
commit | 3a9b4c38e0c3ecfbb10ab85a6250b0ddaa1502af (patch) | |
tree | 4ac18b7360d5e4ae7e8b2f68e9c4e0aaa6acf4ae | |
parent | 183c3a487515bb9cd67fa1bd2834276616ac17a4 (diff) | |
download | gitlab-ce-54331-pipeline-graph-extend-scroll-area.tar.gz |
Move graph width behavior into a mixin54331-pipeline-graph-extend-scroll-area
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 47 | ||||
-rw-r--r-- | app/assets/javascripts/pipelines/mixins/graph_width_mixin.js | 50 |
2 files changed, 52 insertions, 45 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 911fb5cab7a..cfc72327ef7 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -2,57 +2,14 @@ import { GlLoadingIcon } from '@gitlab/ui'; import StageColumnComponent from './stage_column_component.vue'; import GraphMixin from '../../mixins/graph_component_mixin'; -import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; -import { LAYOUT_CHANGE_DELAY } from '~/pipelines/constants'; +import GraphWidthMixin from '~/pipelines/mixins/graph_width_mixin'; export default { components: { StageColumnComponent, GlLoadingIcon, }, - mixins: [GraphMixin], - debouncedResize: null, - sidebarMutationObserver: null, - data() { - return { - graphLeftPadding: 0, - graphRightPadding: 0, - }; - }, - beforeDestroy() { - window.removeEventListener('resize', this.$options.debouncedResize); - - if (this.$options.sidebarMutationObserver) { - this.$options.sidebarMutationObserver.disconnect(); - } - }, - created() { - this.$options.debouncedResize = debounceByAnimationFrame(this.setGraphPadding); - window.addEventListener('resize', this.$options.debouncedResize); - }, - mounted() { - this.setGraphPadding(); - - this.$options.sidebarMutationObserver = new MutationObserver(this.handleLayoutChange); - this.$options.sidebarMutationObserver.observe(document.querySelector('.layout-page'), { - attributes: true, - childList: false, - subtree: false, - }); - }, - methods: { - setGraphPadding() { - const container = document.querySelector('.js-pipeline-container'); - if (!container) return; - - this.graphLeftPadding = container.offsetLeft; - this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth; - }, - handleLayoutChange() { - // wait until animations finish, then recalculate padding - window.setTimeout(this.setGraphPadding, LAYOUT_CHANGE_DELAY); - }, - }, + mixins: [GraphMixin, GraphWidthMixin], }; </script> <template> diff --git a/app/assets/javascripts/pipelines/mixins/graph_width_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_width_mixin.js new file mode 100644 index 00000000000..2dbaa5a5c9a --- /dev/null +++ b/app/assets/javascripts/pipelines/mixins/graph_width_mixin.js @@ -0,0 +1,50 @@ +import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; +import { LAYOUT_CHANGE_DELAY } from '~/pipelines/constants'; + +export default { + debouncedResize: null, + sidebarMutationObserver: null, + data() { + return { + graphLeftPadding: 0, + graphRightPadding: 0, + }; + }, + beforeDestroy() { + window.removeEventListener('resize', this.$options.debouncedResize); + + if (this.$options.sidebarMutationObserver) { + this.$options.sidebarMutationObserver.disconnect(); + } + }, + created() { + this.$options.debouncedResize = debounceByAnimationFrame(this.setGraphPadding); + window.addEventListener('resize', this.$options.debouncedResize); + }, + mounted() { + this.setGraphPadding(); + + this.$options.sidebarMutationObserver = new MutationObserver(this.handleLayoutChange); + this.$options.sidebarMutationObserver.observe(document.querySelector('.layout-page'), { + attributes: true, + childList: false, + subtree: false, + }); + }, + methods: { + setGraphPadding() { + // only add padding to main graph (not inline upstream/downstream graphs) + if (this.type && this.type !== 'main') return; + + const container = document.querySelector('.js-pipeline-container'); + if (!container) return; + + this.graphLeftPadding = container.offsetLeft; + this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth; + }, + handleLayoutChange() { + // wait until animations finish, then recalculate padding + window.setTimeout(this.setGraphPadding, LAYOUT_CHANGE_DELAY); + }, + }, +}; |