Refactor #3965 - For ScrollPanel
Bahadır Sofuoğlu
parent
4a7f554d88
commit
6174cdde94
|
|
@ -0,0 +1,94 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
.p-scrollpanel-wrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.p-scrollpanel-content {
|
||||
height: calc(100% + 18px);
|
||||
width: calc(100% + 18px);
|
||||
padding: 0 18px 18px 0;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.p-scrollpanel-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
position: relative;
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s linear;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-y {
|
||||
width: 9px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-x {
|
||||
height: 9px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.p-scrollpanel-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-scrollpanel:hover .p-scrollpanel-bar,
|
||||
.p-scrollpanel:active .p-scrollpanel-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-scrollpanel-grabbed {
|
||||
user-select: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-scrollpanel p-component',
|
||||
wrapper: 'p-scrollpanel-wrapper',
|
||||
content: 'p-scrollpanel-content',
|
||||
barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
|
||||
bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrollpanel_style', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseScrollPanel',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
step: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
watch: {
|
||||
isUnstyled: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
!newValue && loadStyle();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -93,6 +93,11 @@ export interface ScrollPanelProps {
|
|||
* @type {ScrollPanelPassThroughOptions}
|
||||
*/
|
||||
pt?: ScrollPanelPassThroughOptions;
|
||||
/**
|
||||
* When enabled, it removes component related styles in the core.
|
||||
* @defaultValue false
|
||||
*/
|
||||
unstyled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="p-scrollpanel p-component" v-bind="ptm('root')">
|
||||
<div class="p-scrollpanel-wrapper" v-bind="ptm('wrapper')">
|
||||
<div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
|
||||
<div :class="cx('root')" v-bind="ptm('root')">
|
||||
<div :class="cx('wrapper')" v-bind="ptm('wrapper')">
|
||||
<div ref="content" :class="cx('content')" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="xBar"
|
||||
class="p-scrollpanel-bar p-scrollpanel-bar-x"
|
||||
:class="cx('barx')"
|
||||
tabindex="0"
|
||||
role="scrollbar"
|
||||
aria-orientation="horizontal"
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
></div>
|
||||
<div
|
||||
ref="yBar"
|
||||
class="p-scrollpanel-bar p-scrollpanel-bar-y"
|
||||
:class="cx('bary')"
|
||||
tabindex="0"
|
||||
role="scrollbar"
|
||||
aria-orientation="vertical"
|
||||
|
|
@ -36,18 +36,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import BaseScrollPanel from './BaseScrollPanel.vue';
|
||||
import { DomHandler, UniqueComponentId } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'ScrollPanel',
|
||||
extends: BaseComponent,
|
||||
props: {
|
||||
step: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
},
|
||||
extends: BaseScrollPanel,
|
||||
initialized: false,
|
||||
documentResizeListener: null,
|
||||
documentMouseMoveListener: null,
|
||||
|
|
@ -123,16 +117,16 @@ export default {
|
|||
|
||||
this.frame = this.requestAnimationFrame(() => {
|
||||
if (this.scrollXRatio >= 1) {
|
||||
DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
|
||||
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
|
||||
} else {
|
||||
DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
|
||||
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
|
||||
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
|
||||
}
|
||||
|
||||
if (this.scrollYRatio >= 1) {
|
||||
DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
|
||||
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
|
||||
} else {
|
||||
DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
|
||||
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
|
||||
this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
|
||||
}
|
||||
});
|
||||
|
|
@ -141,8 +135,8 @@ export default {
|
|||
this.isYBarClicked = true;
|
||||
this.$refs.yBar.focus();
|
||||
this.lastPageY = e.pageY;
|
||||
DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
|
||||
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
||||
|
||||
this.bindDocumentMouseListeners();
|
||||
e.preventDefault();
|
||||
|
|
@ -151,8 +145,8 @@ export default {
|
|||
this.isXBarClicked = true;
|
||||
this.$refs.xBar.focus();
|
||||
this.lastPageX = e.pageX;
|
||||
DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
|
||||
DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
|
||||
|
||||
this.bindDocumentMouseListeners();
|
||||
e.preventDefault();
|
||||
|
|
@ -280,9 +274,9 @@ export default {
|
|||
}
|
||||
},
|
||||
onDocumentMouseUp() {
|
||||
DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
|
||||
DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
|
||||
DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
|
||||
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
|
||||
|
||||
this.unbindDocumentMouseListeners();
|
||||
this.isXBarClicked = false;
|
||||
|
|
@ -351,61 +345,3 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.p-scrollpanel-wrapper {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.p-scrollpanel-content {
|
||||
height: calc(100% + 18px);
|
||||
width: calc(100% + 18px);
|
||||
padding: 0 18px 18px 0;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.p-scrollpanel-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
position: relative;
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s linear;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-y {
|
||||
width: 9px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar-x {
|
||||
height: 9px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.p-scrollpanel-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-scrollpanel:hover .p-scrollpanel-bar,
|
||||
.p-scrollpanel:active .p-scrollpanel-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.p-scrollpanel-grabbed {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue