frontello-ui-datepicker - npm Package Compare versions

Comparing version 3.0.10 to 3.0.11

datepicker.js

@@ -8,2 +8,3 @@ "use strict";
 		this.config = Object.assign({
+			floatingPosition: true,
 			debug: false,
@@ -16,2 +17,5 @@ language: 'default',
 			mobileDevicesAgentRegex: 'Android|iPad|iPhone|iPod',
+			selectContainer: (field, element) => {
+				field.after(element);
+			},
 			dateChange: (date) => {
@@ -34,2 +38,4 @@ this.field.value = date.getDateForHtmlInput();
 		}, config);
+
+		this.element = null;
 		
@@ -60,2 +66,5 @@ this.isAnMobileDevices = ((new RegExp(this.config.mobileDevicesAgentRegex)).test(navigator.userAgent));
 		this.field.addEventListener('focus', () => {
+			if (this.config.debug) {
+				console.log('Input focus');
+			}
 			this._renderInputType(true);
@@ -65,2 +74,5 @@ });
 		this.field.addEventListener('focusout', () => {
+			if (this.config.debug) {
+				console.log('Input focusout');
+			}
 			this._renderInputType();
@@ -91,3 +103,3 @@ });
 		
-		this.container.style.display = '';
+		this.element.style.display = '';
 		
@@ -103,3 +115,3 @@ if (this.getDate() == null) this.setDate('today');
 	{
-		this.container.style.display = 'none';
+		this.element.style.display = 'none';
 	}
@@ -109,3 +121,3 @@
 	{
-		return this.container.style.display != 'none';
+		return this.element.style.display != 'none';
 	}
@@ -115,32 +127,80 @@
 	{
-		// Vertical
-		const fieldHeight = this._getElementHeight(this.field);
-		this.container.style.top = fieldHeight + 10 + 'px';
-		
-		// Lateral
+		if (this.config.floatingPosition == false) {
+			this.element.style.position = 'relative';
+			this.element.style.top = 'auto';
+			this.element.style.bottom = 'auto';
+			this.element.style.left = 'auto';
+			this.element.style.right = 'auto';
+
+			return;
+		}
+
+		this.element.style.position = 'absolute';
+		this.element.style.top = '0px';
+		this.element.style.bottom = 'auto';
+		this.element.style.left = 'auto';
+		this.element.style.right = '0px';
+
 		const windowWidth = window.innerWidth;
-		const pickerWidth = this._getElementWidth(this.container);
-		const parentWidth = this._getElementWidth(this.container.parentNode);
-		const pickerPositionLeft = (parentWidth - pickerWidth) / 2;
-		
-		this.container.style.left = pickerPositionLeft + 'px';
-		this.container.style.right = 'auto';
-		
-		if (pickerWidth < windowWidth) {
-			const pickerOffsetLeft = this.container.getBoundingClientRect().left;
-			const pickerOffsetRight = pickerWidth + pickerOffsetLeft;
+		const pickerWidth = this._getElementWidth(this.element);
+		const parentWidth = this._getElementWidth(this.element.parentNode);
+		const pickerOffsetLeft = this.element.getBoundingClientRect().left;
+		const pickerOffsetRight = pickerWidth + pickerOffsetLeft;
+
+		const windowHeight = window.innerHeight;
+		const pickerHeight = this._getElementHeight(this.element);
+		const parentHeight = this._getElementHeight(this.element.parentNode);
+		const pickerOffsetTop = this.element.getBoundingClientRect().top;
+		const pickerOffsetBottom = pickerHeight + pickerOffsetTop;
+
+		let hLeft = () => {
+			this.element.style.left = -pickerWidth + 'px'
+			this.element.style.right = 'auto';
+		};
+
+		let hCenter = () => {
+			this.element.style.left = (parentWidth - pickerWidth) / 2 + 'px';
+			this.element.style.right = 'auto';
+		};
+
+		let hRight = () => {
+			this.element.style.left = 'auto';
+			this.element.style.right = -pickerWidth + 'px';
+		};
+
+		let vTop = () => {
+			this.element.style.top = 'auto';
+			this.element.style.bottom = parentHeight + 'px';
+		};
+
+		let vCenter = () => {
+			this.element.style.top = (parentHeight - pickerHeight) / 2 + 'px';
+			this.element.style.bottom = 'auto';
+		};
+
+		let vBottom = () => {
+			this.element.style.top = parentHeight + 'px';
+			this.element.style.bottom = 'auto';
+		};
+
+		hCenter();
+		vBottom();
+
+		if (pickerOffsetBottom > windowHeight) {
+			vCenter();
+
+			if (pickerOffsetRight + pickerWidth < windowWidth) {
+				hRight();
+			} else if (pickerOffsetLeft + pickerWidth < windowWidth) {
+				hLeft();
+			}
+		} else if (pickerWidth < windowWidth) {
+			vBottom();
 			
 			if (pickerOffsetRight > windowWidth) {
-				this.container.style.left = 'auto';
-				this.container.style.right = '0px';
+				hRight();
 			} else if (pickerOffsetLeft < 0) {
-				this.container.style.left = '0px';
-				this.container.style.right = 'auto';
+				hLeft();
 			}
 		}
-		
-		// Horizontal
-		const parentHeight = this._getElementHeight(this.container.parentNode);
-		
-		this.container.style.top = parentHeight + 'px';
 	}
@@ -153,3 +213,3 @@
 		}
-		this.container.classList.add('unseted');
+		this.element.classList.add('unseted');
 		
@@ -167,3 +227,3 @@ this.date = null;
 		
-		this.container.classList.remove('unseted');
+		this.element.classList.remove('unseted');
 		
@@ -665,9 +725,9 @@ this.date = (date == 'today') ? new Date() : new Date(date);
 	{
-		this.container = document.createElement('div');
-		this.container.classList.add(this.config.classContainer);
-		this.container.style.userSelect = 'none';
-		this.container.style.display = 'none';
-		this.field.after(this.container);
+		this.element = document.createElement('div');
+		this.element.classList.add(this.config.classContainer);
+		this.element.style.userSelect = 'none';
+		this.element.style.display = 'none';
+		this.config.selectContainer(this.field, this.element);
 		
-		this.container.addEventListener('click', () => {
+		this.element.addEventListener('click', () => {
 			this.field.focus();
@@ -690,3 +750,3 @@ });
 		// Don't lost focus
-		this.container.addEventListener('mousedown', (event) => {
+		this.element.addEventListener('mousedown', (event) => {
 			event.preventDefault()
@@ -699,3 +759,3 @@ });
 		});
-		this.container.addEventListener('click', (event) => {
+		this.element.addEventListener('click', (event) => {
 			event.stopPropagation();
@@ -708,6 +768,2 @@ });
 		// Open
-		this.field.addEventListener('focus', (event) => {
-			event.preventDefault();
-			this.openPicker();
-		});
 		this.field.addEventListener('click', (event) => {
@@ -718,4 +774,5 @@ event.preventDefault();
 		});
-		this.actionToday.addEventListener('click', (event) => {
+		this.field.addEventListener('focus', (event) => {
 			this.openPicker();
+			event.preventDefault();
 		});
@@ -734,3 +791,6 @@
 		});
-		window.addEventListener('click', () => {
+		window.addEventListener('click', (event) => {
+			if (this.element == event.target || this.element.parentNode == event.target) {
+				return;
+			}
 			this.closePicker();
@@ -744,3 +804,3 @@ });
 		this.mainNav.classList.add('main-nav');
-		this.container.append(this.mainNav);
+		this.element.append(this.mainNav);
 		
@@ -764,19 +824,19 @@ this.monthAndYearLabel = document.createElement('a');
 		
-		this.actionToday = document.createElement('a');
-		this.actionToday.classList.add('date-action');
-		this.actionToday.classList.add('prev-month');
-		this.actionToday.innerHTML = this.config.iconLeft;
-		this.actionToday.addEventListener('click', (e) => {
+		this.actionPrevMonth = document.createElement('a');
+		this.actionPrevMonth.classList.add('date-action');
+		this.actionPrevMonth.classList.add('prev-month');
+		this.actionPrevMonth.innerHTML = this.config.iconLeft;
+		this.actionPrevMonth.addEventListener('click', (e) => {
 			this.downMonth();
 		});
-		this.mainNav.append(this.actionToday);
+		this.mainNav.append(this.actionPrevMonth);
 		
-		this.actionToday = document.createElement('a');
-		this.actionToday.classList.add('date-action');
-		this.actionToday.classList.add('next-month');
-		this.actionToday.innerHTML = this.config.iconRight;
-		this.actionToday.addEventListener('click', (e) => {
+		this.actionNextMonth = document.createElement('a');
+		this.actionNextMonth.classList.add('date-action');
+		this.actionNextMonth.classList.add('next-month');
+		this.actionNextMonth.innerHTML = this.config.iconRight;
+		this.actionNextMonth.addEventListener('click', (e) => {
 			this.upMonth();
 		});
-		this.mainNav.append(this.actionToday);
+		this.mainNav.append(this.actionNextMonth);
 	}
@@ -790,3 +850,3 @@
 		
-		this.container.append(this.picker);
+		this.element.append(this.picker);
 		
@@ -807,3 +867,3 @@ this.dayNav = document.createElement('nav');
 			
-			this.container.append(this.hourAndMinute);
+			this.element.append(this.hourAndMinute);
 			
@@ -1013,3 +1073,3 @@ // Hour
 		this.controls.classList.add('controls');
-		this.container.append(this.controls);
+		this.element.append(this.controls);
 		
@@ -1056,6 +1116,7 @@ this.actionClear = document.createElement('a');
 		const height = element.clientHeight;
-		const marginTop = parseInt(element.style.marginTop) || 0;
-		const marginBottom = parseInt(element.style.marginRight) || 0;
-		const borderTop = parseInt(element.style.borderTopWidth) || 0;
-		const borderBottom = parseInt(element.style.borderBottomWidth) || 0;
+		const style = element.currentStyle || window.getComputedStyle(element);
+		const marginTop = parseInt(style.marginTop) || 0;
+		const marginBottom = parseInt(style.marginRight) || 0;
+		const borderTop = parseInt(style.borderTopWidth) || 0;
+		const borderBottom = parseInt(style.borderBottomWidth) || 0;
 		
@@ -1070,6 +1131,7 @@ return height + marginTop + marginBottom + borderTop + borderBottom;
 		const width = element.clientWidth;
-		const marginLeft = parseInt(element.style.marginLeft) || 0;
-		const marginRight = parseInt(element.style.marginRight) || 0;
-		const borderLeft = parseInt(element.style.borderLeftWidth) || 0;
-		const borderRight = parseInt(element.style.borderRightWidth) || 0;
+		const style = element.currentStyle || window.getComputedStyle(element);
+		const marginLeft = parseInt(style.marginLeft) || 0;
+		const marginRight = parseInt(style.marginRight) || 0;
+		const borderLeft = parseInt(style.borderLeftWidth) || 0;
+		const borderRight = parseInt(style.borderRightWidth) || 0;
 		
@@ -1076,0 +1138,0 @@ return width + marginLeft + marginRight + borderLeft + borderRight;

package.json

 {
 	"name": "frontello-ui-datepicker",
-	"version": "3.0.10",
+	"version": "3.0.11",
 	"description": "Efficient vanilla datepicker",
@@ -5,0 +5,0 @@ "main": "datepicker.js",

No alert changes

Improved metrics

Total package byte prevSize

35155

increased by4.62%

Lines of code

1116

increased by4.99%

No dependency changes