primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
400 lines (393 loc) • 14.9 kB
JavaScript
import { removeClass, addClass, getHeight } from '@primeuix/utils/dom';
import BaseComponent from '@primevue/core/basecomponent';
import ScrollPanelStyle from 'primevue/scrollpanel/style';
import { createElementBlock, openBlock, mergeProps, createElementVNode, renderSlot } from 'vue';
var script$1 = {
name: 'BaseScrollPanel',
"extends": BaseComponent,
props: {
step: {
type: Number,
"default": 5
}
},
style: ScrollPanelStyle,
provide: function provide() {
return {
$pcScrollPanel: this,
$parentInstance: this
};
}
};
var script = {
name: 'ScrollPanel',
"extends": script$1,
inheritAttrs: false,
initialized: false,
documentResizeListener: null,
documentMouseMoveListener: null,
documentMouseUpListener: null,
frame: null,
scrollXRatio: null,
scrollYRatio: null,
isXBarClicked: false,
isYBarClicked: false,
lastPageX: null,
lastPageY: null,
timer: null,
outsideClickListener: null,
data: function data() {
return {
orientation: 'vertical',
lastScrollTop: 0,
lastScrollLeft: 0
};
},
mounted: function mounted() {
if (this.$el.offsetParent) {
this.initialize();
}
},
updated: function updated() {
if (!this.initialized && this.$el.offsetParent) {
this.initialize();
}
},
beforeUnmount: function beforeUnmount() {
this.unbindDocumentResizeListener();
if (this.frame) {
window.cancelAnimationFrame(this.frame);
}
},
methods: {
initialize: function initialize() {
this.moveBar();
this.bindDocumentResizeListener();
this.calculateContainerHeight();
},
calculateContainerHeight: function calculateContainerHeight() {
var containerStyles = getComputedStyle(this.$el),
xBarStyles = getComputedStyle(this.$refs.xBar),
pureContainerHeight = getHeight(this.$el) - parseInt(xBarStyles['height'], 10);
if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
if (this.$refs.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
this.$el.style.height = containerStyles['max-height'];
} else {
this.$el.style.height = this.$refs.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
}
}
},
moveBar: function moveBar() {
var _this = this;
if (this.$refs.content) {
/* horizontal scroll */
var totalWidth = this.$refs.content.scrollWidth;
var ownWidth = this.$refs.content.clientWidth;
var bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
this.scrollXRatio = ownWidth / totalWidth;
/* vertical scroll */
var totalHeight = this.$refs.content.scrollHeight;
var ownHeight = this.$refs.content.clientHeight;
var right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
this.scrollYRatio = ownHeight / totalHeight;
this.frame = this.requestAnimationFrame(function () {
if (_this.$refs.xBar) {
if (_this.scrollXRatio >= 1) {
_this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!_this.isUnstyled && addClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
} else {
_this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!_this.isUnstyled && removeClass(_this.$refs.xBar, 'p-scrollpanel-hidden');
_this.$refs.xBar.style.cssText = 'width:' + Math.max(_this.scrollXRatio * 100, 10) + '%; inset-inline-start:' + Math.abs(_this.$refs.content.scrollLeft) / totalWidth * 100 + '%;bottom:' + bottom + 'px;';
}
}
if (_this.$refs.yBar) {
if (_this.scrollYRatio >= 1) {
_this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!_this.isUnstyled && addClass(_this.$refs.yBar, 'p-scrollpanel-hidden');
} else {
_this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!_this.isUnstyled && 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); inset-inline-end:' + right + 'px;';
}
}
});
}
},
onYBarMouseDown: function onYBarMouseDown(e) {
this.isYBarClicked = true;
this.$refs.yBar.focus();
this.lastPageY = e.pageY;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners();
e.preventDefault();
},
onXBarMouseDown: function onXBarMouseDown(e) {
this.isXBarClicked = true;
this.$refs.xBar.focus();
this.lastPageX = e.pageX;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners();
e.preventDefault();
},
onScroll: function onScroll(event) {
if (this.lastScrollLeft !== event.target.scrollLeft) {
this.lastScrollLeft = event.target.scrollLeft;
this.orientation = 'horizontal';
} else if (this.lastScrollTop !== event.target.scrollTop) {
this.lastScrollTop = event.target.scrollTop;
this.orientation = 'vertical';
}
this.moveBar();
},
onKeyDown: function onKeyDown(event) {
if (this.orientation === 'vertical') {
switch (event.code) {
case 'ArrowDown':
{
this.setTimer('scrollTop', this.step);
event.preventDefault();
break;
}
case 'ArrowUp':
{
this.setTimer('scrollTop', this.step * -1);
event.preventDefault();
break;
}
case 'ArrowLeft':
case 'ArrowRight':
{
event.preventDefault();
break;
}
}
} else if (this.orientation === 'horizontal') {
switch (event.code) {
case 'ArrowRight':
{
this.setTimer('scrollLeft', this.step);
event.preventDefault();
break;
}
case 'ArrowLeft':
{
this.setTimer('scrollLeft', this.step * -1);
event.preventDefault();
break;
}
case 'ArrowDown':
case 'ArrowUp':
{
event.preventDefault();
break;
}
}
}
},
onKeyUp: function onKeyUp() {
this.clearTimer();
},
repeat: function repeat(bar, step) {
this.$refs.content[bar] += step;
this.moveBar();
},
setTimer: function setTimer(bar, step) {
var _this2 = this;
this.clearTimer();
this.timer = setTimeout(function () {
_this2.repeat(bar, step);
}, 40);
},
clearTimer: function clearTimer() {
if (this.timer) {
clearTimeout(this.timer);
}
},
onDocumentMouseMove: function onDocumentMouseMove(e) {
if (this.isXBarClicked) {
this.onMouseMoveForXBar(e);
} else if (this.isYBarClicked) {
this.onMouseMoveForYBar(e);
} else {
this.onMouseMoveForXBar(e);
this.onMouseMoveForYBar(e);
}
},
onMouseMoveForXBar: function onMouseMoveForXBar(e) {
var _this3 = this;
var deltaX = e.pageX - this.lastPageX;
this.lastPageX = e.pageX;
this.frame = this.requestAnimationFrame(function () {
_this3.$refs.content.scrollLeft += deltaX / _this3.scrollXRatio;
});
},
onMouseMoveForYBar: function onMouseMoveForYBar(e) {
var _this4 = this;
var deltaY = e.pageY - this.lastPageY;
this.lastPageY = e.pageY;
this.frame = this.requestAnimationFrame(function () {
_this4.$refs.content.scrollTop += deltaY / _this4.scrollYRatio;
});
},
onFocus: function onFocus(event) {
if (this.$refs.xBar.isSameNode(event.target)) {
this.orientation = 'horizontal';
} else if (this.$refs.yBar.isSameNode(event.target)) {
this.orientation = 'vertical';
}
},
onBlur: function onBlur() {
if (this.orientation === 'horizontal') {
this.orientation = 'vertical';
}
},
onDocumentMouseUp: function onDocumentMouseUp() {
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
this.$refs.xBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && removeClass(document.body, 'p-scrollpanel-grabbed');
this.unbindDocumentMouseListeners();
this.isXBarClicked = false;
this.isYBarClicked = false;
},
requestAnimationFrame: function requestAnimationFrame(f) {
var frame = window.requestAnimationFrame || this.timeoutFrame;
return frame(f);
},
refresh: function refresh() {
this.moveBar();
},
scrollTop: function scrollTop(_scrollTop) {
var scrollableHeight = this.$refs.content.scrollHeight - this.$refs.content.clientHeight;
_scrollTop = _scrollTop > scrollableHeight ? scrollableHeight : _scrollTop > 0 ? _scrollTop : 0;
this.$refs.content.scrollTop = _scrollTop;
},
timeoutFrame: function timeoutFrame(fn) {
setTimeout(fn, 0);
},
bindDocumentMouseListeners: function bindDocumentMouseListeners() {
var _this5 = this;
if (!this.documentMouseMoveListener) {
this.documentMouseMoveListener = function (e) {
_this5.onDocumentMouseMove(e);
};
document.addEventListener('mousemove', this.documentMouseMoveListener);
}
if (!this.documentMouseUpListener) {
this.documentMouseUpListener = function (e) {
_this5.onDocumentMouseUp(e);
};
document.addEventListener('mouseup', this.documentMouseUpListener);
}
},
unbindDocumentMouseListeners: function unbindDocumentMouseListeners() {
if (this.documentMouseMoveListener) {
document.removeEventListener('mousemove', this.documentMouseMoveListener);
this.documentMouseMoveListener = null;
}
if (this.documentMouseUpListener) {
document.removeEventListener('mouseup', this.documentMouseUpListener);
this.documentMouseUpListener = null;
}
},
bindDocumentResizeListener: function bindDocumentResizeListener() {
var _this6 = this;
if (!this.documentResizeListener) {
this.documentResizeListener = function () {
_this6.moveBar();
};
window.addEventListener('resize', this.documentResizeListener);
}
},
unbindDocumentResizeListener: function unbindDocumentResizeListener() {
if (this.documentResizeListener) {
window.removeEventListener('resize', this.documentResizeListener);
this.documentResizeListener = null;
}
}
},
computed: {
contentId: function contentId() {
return this.$id + '_content';
}
}
};
var _hoisted_1 = ["id"];
var _hoisted_2 = ["aria-controls", "aria-valuenow"];
var _hoisted_3 = ["aria-controls", "aria-valuenow"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", mergeProps({
"class": _ctx.cx('root')
}, _ctx.ptmi('root')), [createElementVNode("div", mergeProps({
"class": _ctx.cx('contentContainer')
}, _ctx.ptm('contentContainer')), [createElementVNode("div", mergeProps({
ref: "content",
id: $options.contentId,
"class": _ctx.cx('content'),
onScroll: _cache[0] || (_cache[0] = function () {
return $options.onScroll && $options.onScroll.apply($options, arguments);
}),
onMouseenter: _cache[1] || (_cache[1] = function () {
return $options.moveBar && $options.moveBar.apply($options, arguments);
})
}, _ctx.ptm('content')), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)], 16), createElementVNode("div", mergeProps({
ref: "xBar",
"class": _ctx.cx('barx'),
tabindex: "0",
role: "scrollbar",
"aria-orientation": "horizontal",
"aria-controls": $options.contentId,
"aria-valuenow": $data.lastScrollLeft,
onMousedown: _cache[2] || (_cache[2] = function () {
return $options.onXBarMouseDown && $options.onXBarMouseDown.apply($options, arguments);
}),
onKeydown: _cache[3] || (_cache[3] = function ($event) {
return $options.onKeyDown($event);
}),
onKeyup: _cache[4] || (_cache[4] = function () {
return $options.onKeyUp && $options.onKeyUp.apply($options, arguments);
}),
onFocus: _cache[5] || (_cache[5] = function () {
return $options.onFocus && $options.onFocus.apply($options, arguments);
}),
onBlur: _cache[6] || (_cache[6] = function () {
return $options.onBlur && $options.onBlur.apply($options, arguments);
})
}, _ctx.ptm('barx'), {
"data-pc-group-section": "bar"
}), null, 16, _hoisted_2), createElementVNode("div", mergeProps({
ref: "yBar",
"class": _ctx.cx('bary'),
tabindex: "0",
role: "scrollbar",
"aria-orientation": "vertical",
"aria-controls": $options.contentId,
"aria-valuenow": $data.lastScrollTop,
onMousedown: _cache[7] || (_cache[7] = function () {
return $options.onYBarMouseDown && $options.onYBarMouseDown.apply($options, arguments);
}),
onKeydown: _cache[8] || (_cache[8] = function ($event) {
return $options.onKeyDown($event);
}),
onKeyup: _cache[9] || (_cache[9] = function () {
return $options.onKeyUp && $options.onKeyUp.apply($options, arguments);
}),
onFocus: _cache[10] || (_cache[10] = function () {
return $options.onFocus && $options.onFocus.apply($options, arguments);
})
}, _ctx.ptm('bary'), {
"data-pc-group-section": "bar"
}), null, 16, _hoisted_3)], 16);
}
script.render = render;
export { script as default };
//# sourceMappingURL=index.mjs.map