frontello-ui-datepicker - npm Package Compare versions

Comparing version 1.2.3 to 2.0.0

datepicker.js

@@ -8,9 +8,6 @@ "use strict";
 		this.config = Object.assign({
-			debug: true,
+			debug: false,
 			classContainer: 'frontello-ui-datepicker',
-			classControls: 'frontello-ui-datepicker-controls',
-			labelYear: 'Year',
-			labelMonth: 'Month',
-			labelClear: 'Clear',
-			labelToday: 'Today',
+			labelActionRemove: 'Remove',
+			labelActionToday: 'Today',
 			months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -20,3 +17,4 @@ weekDays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
 				this.field.value = date.getDate();
-				this.field.dispatchEvent(new Event('change'));
+				//this.field.dispatchEvent(new Event('change'));
+				// Generate a event loop...
 			},
@@ -37,7 +35,6 @@ formatExportDate: (date) => {
 		
-		if (this.field.value) {
-			this.setDate(this.field.value);
-		} else {
-			this.unsetDate();
-		}
+		this._loadInputdate();
+		this.field.addEventListener('change', () => {
+			this._loadInputdate();
+		});
 	}
@@ -68,2 +65,7 @@
 	{
+		// Vertical
+		const fieldHeight = this._getElementHeight(this.field);
+		this.container.style.top = fieldHeight + 10 + 'px';
+		
+		// Lateral
 		const windowWidth = window.innerWidth;
@@ -252,3 +254,3 @@ const pickerWidth = this._getElementWidth(this.container);
 		
-		this.fieldLabel.focus();
+		this.field.focus();
 	}
@@ -259,3 +261,3 @@
 		if (this.date == null) {
-			this.fieldLabel.value = '';
+			this.datelabel.innerHTML = '';
 			
@@ -265,3 +267,3 @@ return;
 		
-		this.fieldLabel.value = this.getDateFriendly();
+		this.datelabel.innerHTML = this.getDateFriendly();
 	}
@@ -297,3 +299,3 @@
 		
-		Array.prototype.slice.call(this.weekHeader.children).forEach((day) => {
+		Array.prototype.slice.call(this.weekDayNav.children).forEach((day) => {
 			day.classList.remove('selected');
@@ -310,3 +312,3 @@ if (this.getWeekDay() == day.dataset.dayId) {
 		
-		Array.prototype.slice.call(this.dayNav.children).forEach((day) => {
+		Array.prototype.slice.call(this.monthDayNav.children).forEach((day) => {
 			day.classList.remove('selected');
@@ -321,19 +323,2 @@ if (this.getDay() == day.dataset.dayId) {
 	{
-		// clone field
-		this.fieldLabel = this.field.cloneNode(true);
-		this.fieldLabel.setAttribute('value', '');
-		this.fieldLabel.value = '';
-		let fieldArrayName = this.fieldLabel.name.indexOf('[');
-		if (fieldArrayName != -1) {
-			this.fieldLabel.name = this.fieldLabel.name.substring(0, fieldArrayName) + '-label' + this.fieldLabel.name.substring(fieldArrayName);
-		} else {
-			this.fieldLabel.name = this.fieldLabel.name + '-label';
-		}
-		this.fieldLabel.type = 'text';
-		this.fieldLabel.readOnly = true;
-		this.field.after(this.fieldLabel);
-		
-		// hide field
-		this.field.style.display = 'none';
-		
 		this.container = document.createElement('div');
@@ -343,8 +328,8 @@ this.container.classList.add(this.config.classContainer);
 		this.container.style.display = 'none';
-		this.fieldLabel.after(this.container);
+		this.field.after(this.container);
 		
+		this._buildSummary();
+		this._buildNav();
 		this._buildControls();
 		
-		this._buildHeader();
-		this._buildNav();
 		this._displayManagment();
@@ -360,3 +345,3 @@
 		// Nothing to do
-		this.fieldLabel.addEventListener('click', (event) => {
+		this.field.addEventListener('click', (event) => {
 			event.stopPropagation();
@@ -372,7 +357,7 @@ });
 		// Open
-		this.fieldLabel.addEventListener('focus', (event) => {
+		this.field.addEventListener('focus', (event) => {
 			//this.openPicker();
 			// Selecting the date on click triggers a focusout...
 		});
-		this.fieldLabel.addEventListener('click', (event) => {
+		this.field.addEventListener('click', (event) => {
 			this.openPicker();
@@ -386,3 +371,3 @@ event.stopPropagation();
 		// Close
-		this.fieldLabel.addEventListener('focusout', (event) => {
+		this.field.addEventListener('focusout', (event) => {
 			//this.closePicker();
@@ -399,51 +384,22 @@ // Selecting the date on click triggers a focusout...
 	
-	_buildControls()
+	_buildSummary()
 	{
-		this.controls = document.createElement('nav');
-		this.controls .classList.add(this.config.classControls);
-		this.fieldLabel.after(this.controls );
+		this.summary = document.createElement('div');
+		this.summary.classList.add('summary');
+		this.container.append(this.summary);
 		
-		this.actionClear = null;
+		this.datelabel = document.createElement('div');
+		this.datelabel.classList.add('date-label');
+		this.summary.append(this.datelabel);
 		
-		if (this.nulable) {
-			this.actionClear = document.createElement('a');
-			this.actionClear.classList.add('clear');
-			this.actionClear.title = this.config.labelClear;
-			this.actionClear.addEventListener('click', (e) => {
-				this.unsetDate();
-			});
-			this.controls .append(this.actionClear);
-		}
-		
 		this.actionToday = document.createElement('a');
+		this.actionToday.classList.add('button');
 		this.actionToday.classList.add('today');
-		this.actionToday.title = this.config.labelToday;
+		this.actionToday.innerHTML = this.config.labelActionToday;
 		this.actionToday.addEventListener('click', (e) => {
 			this.setDate('today');
 		});
-		this.controls .append(this.actionToday);
+		this.summary.append(this.actionToday);
 	}
 	
-	_buildHeader()
-	{
-		this.header = document.createElement('div');
-		this.header.classList.add('header');
-		
-		this.yearHeader = document.createElement('div');
-		this.yearHeader.innerText = this.config.labelYear;
-		this.yearHeader.classList.add('year-column');
-		this.header.append(this.yearHeader);
-		
-		this.monthHeader = document.createElement('div');
-		this.monthHeader.innerText = this.config.labelMonth;
-		this.monthHeader.classList.add('month-column');
-		this.header.append(this.monthHeader);
-		
-		this.weekHeader = document.createElement('div');
-		this.weekHeader.classList.add('days-column');
-		this.header.append(this.weekHeader);
-		
-		this.container.append(this.header);
-	}
-	
 	_buildNav()
@@ -466,7 +422,16 @@ {
 		
-		this._buildWeekPicker();
-		
 		this.dayNav = document.createElement('nav');
 		this.dayNav.classList.add('days-column');
 		this.picker.append(this.dayNav);
+		
+		this.weekDayNav = document.createElement('nav');
+		this.weekDayNav.classList.add('week-days');
+		this.dayNav.append(this.weekDayNav);
+		
+		this._buildWeekPicker();
+		
+		this.monthDayNav = document.createElement('nav');
+		this.monthDayNav.classList.add('month-days');
+		this.dayNav.append(this.monthDayNav);
+		
 		//this._buildDayPicker();
@@ -485,2 +450,3 @@ }
 		let yearPrev = document.createElement('a');
+		yearPrev.classList.add('button');
 		yearPrev.classList.add('prev');
@@ -503,2 +469,3 @@ yearPrev.addEventListener('click', (e) => {
 		let yearNext = document.createElement('a');
+		yearNext.classList.add('button');
 		yearNext.classList.add('next');
@@ -530,3 +497,3 @@ yearNext.addEventListener('click', (e) => {
 			day.dataset.dayId = dayId;
-			this.weekHeader.append(day);
+			this.weekDayNav.append(day);
 			day.addEventListener('click', (e) => {
@@ -542,3 +509,3 @@ if (this.config.debug) {
 	{
-		this.dayNav.innerHTML = '';
+		this.monthDayNav.innerHTML = '';
 		
@@ -552,3 +519,3 @@ if (this.date == null) return;
 					let day = document.createElement('span');
-					this.dayNav.append(day);
+					this.monthDayNav.append(day);
 				}
@@ -561,3 +528,3 @@ }
 			day.classList.add('day');
-			this.dayNav.append(day);
+			this.monthDayNav.append(day);
 			day.addEventListener('click', (e) => {
@@ -569,2 +536,40 @@ this.setDay(e.target.dataset.dayId);
 	
+	_buildControls()
+	{
+		this.controls = document.createElement('nav');
+		this.controls.classList.add('controls');
+		this.container.append(this.controls);
+			
+		this.actionClear = document.createElement('a');
+		this.actionClear.classList.add('button');
+		this.actionClear.classList.add('clear');
+		this.actionClear.innerHTML = this.config.labelActionRemove;
+		this.actionClear.addEventListener('click', (e) => {
+			this.unsetDate();
+		});
+		this.controls .append(this.actionClear);
+	}
+	
+	_loadInputdate()
+	{
+		if (this.field.value) {
+			this.setDate(this.field.value);
+		} else {
+			this.unsetDate();
+		}
+	}
+	
+	_getElementHeight(element)
+	{
+		if (!element) return 0;
+		
+		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;
+		
+		return height + marginTop + marginBottom + borderTop + borderBottom;
+	}
+	
 	_getElementWidth(element)
@@ -571,0 +576,0 @@ {

package.json

 {
 	"name": "frontello-ui-datepicker",
-	"version": "1.2.3",
+	"version": "2.0.0",
 	"description": "UI datepicker",
@@ -5,0 +5,0 @@ "main": "datepicker.js",

No alert changes

Improved metrics

Total package byte prevSize

19984

increased by4.08%

Lines of code

629

increased by6.97%

No dependency changes