From 1b13aaa9d93fe1400ba77344015657f6265a5b38 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 9 Apr 2024 09:24:28 +0300 Subject: [PATCH] Refactor #5553 - For Calendar --- api-generator/components/calendar.js | 6 -- components/lib/calendar/BaseCalendar.vue | 4 -- components/lib/calendar/Calendar.d.ts | 5 -- components/lib/calendar/Calendar.vue | 75 +----------------------- doc/calendar/TouchUIDoc.vue | 54 ----------------- pages/calendar/index.vue | 6 -- 6 files changed, 3 insertions(+), 147 deletions(-) delete mode 100644 doc/calendar/TouchUIDoc.vue diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js index 2bd496d91..269631ac3 100644 --- a/api-generator/components/calendar.js +++ b/api-generator/components/calendar.js @@ -83,12 +83,6 @@ const CalendarProps = [ default: 'date', description: 'Type of view to display, valid valids are "date" for datepicker and "month" for month picker.' }, - { - name: 'touchUI', - type: 'boolean', - default: 'false', - description: 'When enabled, calendar overlay is displayed as optimized for touch devices.' - }, { name: 'monthNavigator', type: 'boolean', diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue index bc5139dab..51bcacc6b 100644 --- a/components/lib/calendar/BaseCalendar.vue +++ b/components/lib/calendar/BaseCalendar.vue @@ -68,10 +68,6 @@ export default { type: String, default: 'date' }, - touchUI: { - type: Boolean, - default: false - }, monthNavigator: { type: Boolean, default: false diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts index 6d5e6207e..e3c699b5d 100755 --- a/components/lib/calendar/Calendar.d.ts +++ b/components/lib/calendar/Calendar.d.ts @@ -581,11 +581,6 @@ export interface CalendarProps { * @defaultValue date */ view?: 'date' | 'month' | 'year' | undefined; - /** - * When enabled, calendar overlay is displayed as optimized for touch devices. - * @defaultValue false - */ - touchUI?: boolean | undefined; /** * Whether the month should be rendered as a dropdown instead of text. * diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue index 7cbecf344..483db3ebc 100755 --- a/components/lib/calendar/Calendar.vue +++ b/components/lib/calendar/Calendar.vue @@ -551,12 +551,10 @@ export default { timePickerChange: false, scrollHandler: null, outsideClickListener: null, - maskClickListener: null, resizeListener: null, matchMediaListener: null, overlay: null, input: null, - mask: null, previousButton: null, nextButton: null, timePickerTimer: null, @@ -589,7 +587,6 @@ export default { this.updateCurrentMetaData(); if (!this.typeUpdate && !this.inline && this.input) { - // this.input.value = this.formatValue(newValue); this.input.value = this.inputFieldValue; } @@ -645,7 +642,6 @@ export default { this.initFocusableCell(); } } else { - // this.input.value = this.formatValue(this.modelValue); this.input.value = this.inputFieldValue; } }, @@ -667,10 +663,6 @@ export default { clearTimeout(this.timePickerTimer); } - if (this.mask) { - this.destroyMask(); - } - this.destroyResponsiveStyleElement(); this.unbindOutsideClickListener(); @@ -870,13 +862,12 @@ export default { }, onOverlayEnter(el) { el.setAttribute(this.attributeSelector, ''); - const styles = this.touchUI ? { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } : !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined; + const styles = !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined; DomHandler.addStyles(el, styles); if (this.autoZIndex) { - if (this.touchUI) ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal); - else ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay); + ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay); } this.alignOverlay(); @@ -899,10 +890,6 @@ export default { this.unbindResizeListener(); this.$emit('hide'); - if (this.mask) { - this.disableModality(); - } - this.overlay = null; }, onPrevButtonClick(event) { @@ -1088,9 +1075,7 @@ export default { return (this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target))) || (this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target))); }, alignOverlay() { - if (this.touchUI) { - this.enableModality(); - } else if (this.overlay) { + if (this.overlay) { if (this.appendTo === 'self' || this.inline) { DomHandler.relativePosition(this.overlay, this.$el); } else { @@ -1716,60 +1701,6 @@ export default { setTimeout(this.updateFocus, 0); }, - enableModality() { - if (!this.mask) { - let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter'; - - this.mask = DomHandler.createElement('div', { - class: !this.isUnstyled && styleClass, - 'p-bind': this.ptm('datepickermask') - }); - this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1); - - this.maskClickListener = () => { - this.overlayVisible = false; - }; - - this.mask.addEventListener('click', this.maskClickListener); - - document.body.appendChild(this.mask); - DomHandler.blockBodyScroll(); - } - }, - disableModality() { - if (this.mask) { - if (this.isUnstyled) { - this.destroyMask(); - } else { - DomHandler.addClass(this.mask, 'p-component-overlay-leave'); - this.mask.addEventListener('animationend', () => { - this.destroyMask(); - }); - } - } - }, - destroyMask() { - this.mask.removeEventListener('click', this.maskClickListener); - this.maskClickListener = null; - document.body.removeChild(this.mask); - this.mask = null; - - let bodyChildren = document.body.children; - let hasBlockerMasks; - - for (let i = 0; i < bodyChildren.length; i++) { - let bodyChild = bodyChildren[i]; - - if (DomHandler.isAttributeEquals(bodyChild, 'data-pc-section', 'datepickermask')) { - hasBlockerMasks = true; - break; - } - } - - if (!hasBlockerMasks) { - DomHandler.unblockBodyScroll(); - } - }, updateCurrentMetaData() { const viewDate = this.viewDate; diff --git a/doc/calendar/TouchUIDoc.vue b/doc/calendar/TouchUIDoc.vue deleted file mode 100644 index 8c8e49bb3..000000000 --- a/doc/calendar/TouchUIDoc.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - diff --git a/pages/calendar/index.vue b/pages/calendar/index.vue index 1445255a2..c787de1b1 100755 --- a/pages/calendar/index.vue +++ b/pages/calendar/index.vue @@ -30,7 +30,6 @@ import MultipleDoc from '@/doc/calendar/MultipleDoc.vue'; import MultipleMonthsDoc from '@/doc/calendar/MultipleMonthsDoc.vue'; import RangeDoc from '@/doc/calendar/RangeDoc.vue'; import TimeDoc from '@/doc/calendar/TimeDoc.vue'; -import TouchUIDoc from '@/doc/calendar/TouchUIDoc.vue'; import YearPickerDoc from '@/doc/calendar/YearPickerDoc.vue'; import PTComponent from '@/doc/calendar/pt/index.vue'; import ThemingDoc from '@/doc/calendar/theming/index.vue'; @@ -109,11 +108,6 @@ export default { label: 'Date Template', component: DateTemplateDoc }, - { - id: 'touchui', - label: 'Touch UI', - component: TouchUIDoc - }, { id: 'inline', label: 'Inline',