Issue #3256388 by navneet0693, skatheeth, tbsiqueira: OpenSocial 11.0.0-rc2... (4a1bc396) · Commits · project / socialbase

assets/css/datepicker.css

deleted100644 → 0

+0 −145

Original line number	Diff line number	Diff line
		input[type='text'].form-date {
		min-width: 240px;
		background-repeat: no-repeat;
		background-size: auto 18px;
		background-position: 96% 50%;
		padding-right: 36px;
		background-image: url(../images/icons/icon-today.svg);
		}

		input[type='text'].form-time {
		min-width: 160px;
		background-repeat: no-repeat;
		background-size: auto 18px;
		background-position: 96% 50%;
		padding-right: 36px;
		background-image: url(../images/icons/icon-schedule.svg);
		}

		.ui-datepicker {
		position: absolute;
		display: none;
		top: 100%;
		left: 0;
		float: left;
		min-width: 160px;
		margin: 4px 0;
		text-align: left;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		background-clip: padding-box;
		font-size: 0.875rem;
		padding: 4px;
		z-index: 1000 !important;
		}

		.ui-datepicker-header:before, .ui-datepicker-header:after {
		content: " ";
		display: table;
		}

		.ui-datepicker-header:after {
		clear: both;
		}

		.ui-datepicker-title {
		text-align: center;
		width: 145px;
		height: 30px;
		border-radius: 4px;
		border: none;
		padding: 5px;
		margin: 0 auto;
		font-weight: 500;
		}

		.ui-datepicker-prev,
		.ui-datepicker-next {
		float: left;
		width: 30px;
		height: 30px;
		border-radius: 4px;
		text-align: center;
		cursor: pointer;
		border-radius: 4px;
		}

		.ui-datepicker-prev:hover,
		.ui-datepicker-next:hover {
		background: #e6e6e6;
		}

		.ui-datepicker-prev:before,
		.ui-datepicker-next:before {
		position: relative;
		top: 5px;
		width: 20px;
		height: 20px;
		content: '';
		display: inline-block;
		background-repeat: no-repeat;
		background-size: auto 100%;
		background-position: center;
		fill: #4d4d4d;
		}

		.ui-datepicker-next {
		float: right;
		}

		.ui-datepicker-prev:before {
		background-image: url(../images/icons/icon-navigate_before.svg);
		}

		.ui-datepicker-next:before {
		background-image: url(../images/icons/icon-navigate_next.svg);
		}

		.ui-icon {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
		}

		.ui-datepicker-calendar > thead > tr > th {
		text-align: center;
		width: 30px;
		height: 30px;
		border-radius: 4px;
		border: none;
		padding: 0;
		font-weight: 500;
		}

		.ui-datepicker-calendar > tbody > tr > td {
		border: 0;
		padding: 0;
		}

		.ui-datepicker-calendar > tbody > tr > td .ui-state-default {
		display: block;
		border-radius: 4px;
		text-align: center;
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-weight: 300;
		}

		.ui-datepicker-calendar > tbody > tr > td .ui-state-default:hover {
		background: #f3f3f3;
		cursor: pointer;
		}

		.ui-datepicker-calendar > tbody > tr > td .ui-state-highlight {
		background-color: #e6e6e6;
		}

		.ui-datepicker-calendar > tbody > tr > td .ui-state-highlight:hover {
		color: white;
		background-color: #777777;
		}

assets/css/form-controls.css

+0 −31

Original line number	Diff line number	Diff line
		@@ -585,37 +585,6 @@ form:not(.layout-builder-configure-block) .form-disabled .select-wrapper::after
		}
		}

		@media screen and (-webkit-min-device-pixel-ratio: 0) {
		form:not(.layout-builder-configure-block) .form-control,
		form:not(.layout-builder-configure-block) .select2-container .select2-selection {
		font-size: 16px;
		}
		form:not(.layout-builder-configure-block) input[type="time"].form-control,
		form:not(.layout-builder-configure-block) input[type="datetime-local"].form-control,
		form:not(.layout-builder-configure-block) input[type="month"].form-control {
		line-height: 24px;
		background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		}
		form:not(.layout-builder-configure-block) input[type="time"].form-control:focus,
		form:not(.layout-builder-configure-block) input[type="datetime-local"].form-control:focus,
		form:not(.layout-builder-configure-block) input[type="month"].form-control:focus {
		background: inherit;
		}
		form:not(.layout-builder-configure-block) input[type="date"].form-control {
		line-height: 24px;
		background: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		}
		form:not(.layout-builder-configure-block) input[type="date"].form-control:focus {
		background: inherit;
		}
		}

		@media all and (-ms-high-contrast: none) {
		form:not(.layout-builder-configure-block) *::-ms-backdrop, form:not(.layout-builder-configure-block) .select-wrapper:after {
		display: none;

assets/css/timepicker.css

deleted100644 → 0

+0 −73

Original line number	Diff line number	Diff line
		.ui-timepicker-wrapper {
		overflow-y: auto;
		height: 180px;
		min-width: 160px;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		background-clip: padding-box;
		outline: none;
		z-index: 1000;
		margin: 0;
		-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
		}

		.ui-timepicker-wrapper.ui-timepicker-with-duration {
		width: 13em;
		}

		.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
		.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
		width: 11em;
		}

		.ui-timepicker-list {
		margin: 0;
		padding: 0;
		list-style: none;
		}

		.ui-timepicker-duration {
		margin-left: 5px;
		color: #888;
		}

		.ui-timepicker-list:hover .ui-timepicker-duration {
		color: #888;
		}

		.ui-timepicker-list li {
		padding: 3px 0 3px 5px;
		cursor: pointer;
		white-space: nowrap;
		color: #000;
		list-style: none;
		margin: 0;
		}

		.ui-timepicker-list:hover .ui-timepicker-selected {
		background: #fff;
		color: #000;
		}

		li.ui-timepicker-selected,
		.ui-timepicker-list li:hover,
		.ui-timepicker-list .ui-timepicker-selected:hover {
		background: #1980EC;
		color: #fff;
		}

		li.ui-timepicker-selected .ui-timepicker-duration,
		.ui-timepicker-list li:hover .ui-timepicker-duration {
		color: #ccc;
		}

		.ui-timepicker-list li.ui-timepicker-disabled,
		.ui-timepicker-list li.ui-timepicker-disabled:hover,
		.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
		color: #888;
		cursor: default;
		}

		.ui-timepicker-list li.ui-timepicker-disabled:hover,
		.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
		background: #f2f2f2;
		}

assets/js/date-picker-init.min.js

deleted100644 → 0

+0 −116

Original line number	Diff line number	Diff line
		(function ($) {
		Drupal.behaviors.initDatepicker = {
		attach: function attach(context, settings) {
		// Only for Desktop we switch the jquery datepicker.
		if (!isMobile()) {
		// Defaults
		var $context = $(context);
		var $time = $('.form-time');
		var $date = $('.form-date'); // We want to use the native date picker when the browser supports this
		// on specific fields and fields have been defined as requiring the
		// native date picker.

		if (browserSupportsDateInput() && typeof drupalSettings.socialbase !== "undefined" && typeof drupalSettings.socialbase.datepicker !== "undefined" && typeof drupalSettings.socialbase.datepicker.nativeDatePickFields !== "undefined" && Array.isArray(drupalSettings.socialbase.datepicker.nativeDatePickFields)) {
		// Filter out any date elements where the name attribute contains any
		// of the strings in the array of field names to exclude.
		var nativeFieldNames = drupalSettings.socialbase.datepicker.nativeDatePickFields;
		$date = $date.filter(function () {
		var $dateEl = $(this);
		var elName = $dateEl.attr('name'); // If it has no name then keep it.

		if (!elName) {
		return true;
		} // Keep it if it has no match to the configured excluded fields.


		return !nativeFieldNames.some(function (excludedName) {
		return elName.includes(excludedName);
		});
		});
		} // TIME


		$context.find($time).once('timePicker').each(function () {
		// Change it's input to text. Only for date element and only on Desktop.
		// If JS is disabled the fallback is the HTML 5 element, not too user friendly.
		$time.prop('type', 'text'); // Initiate the datepicker element. So we can make it user friendly again.

		$time.timepicker({
		'show2400': false,
		'scrollDefault': 'now',
		'timeFormat': 'H:i',
		'step': 5
		}); // Listen for changes in the time field and update the end value.

		$time.on('changeTime', function () {
		var endTime = $("#edit-field-event-date-end-0-value-time");
		if (!endTime.val()) endTime.val($(this).val());
		});
		}); // DATES

		$context.find($date).once('datePicker').each(function () {
		// Set the prepoluted value of the datepicker for the end date
		var startDate = $("#edit-field-event-date-0-value-date");
		var endDate = $("#edit-field-event-date-end-0-value-date"); // Change it's input to text. Only for date element and only on Desktop.
		// If JS is disabled the fallback is the HTML 5 element, not too user friendly.

		$date.prop('type', 'text'); // Initiate the datepicker element. So we can make it user friendly again.

		$date.datepicker({
		altFormat: 'yy-mm-dd',
		dateFormat: 'yy-mm-dd',
		// @Todo we can alter this to show the user a different format.
		onSelect: function onSelect(dateText, inst) {
		// Check if end date field is empty and populate the target field
		if (!endDate.val()) {
		endDate.val(dateText);
		} // If the end date field is already set start comparing timestamps
		else {
		// Create timestamps to compare
		var startDateTimestamp = new Date(startDate[0].value).getTime();
		var endDateTimestamp = new Date(endDate[0].value).getTime();
		if (startDateTimestamp > endDateTimestamp) endDate.val(dateText);
		if (endDateTimestamp < startDateTimestamp) startDate.val(dateText);
		}
		},
		beforeShowDay: function beforeShowDay(date) {
		// Create timestamps to compare
		var startDateTimestamp = new Date(startDate.val()).getTime() - 86400000; // Minus a day in ms

		var endDateTimestamp = new Date(endDate.val()).getTime();
		var currentDateTimestamp = date.getTime();

		if (currentDateTimestamp >= startDateTimestamp && currentDateTimestamp <= endDateTimestamp) {
		return [true, 'bg-info', ''];
		}

		return [true, '', ''];
		}
		});
		}); //
		}
		}
		};
		/**
		* Check if the browser supports [type='date'] input fields.
		*
		* See https://stackoverflow.com/a/10199306/576060
		*/

		function browserSupportsDateInput() {
		var input = document.createElement('input');
		input.setAttribute('type', 'date');
		var notADateValue = 'not-a-date';
		input.setAttribute('value', notADateValue);
		return input.value !== notADateValue;
		}

		function isMobile() {
		try {
		document.createEvent("TouchEvent");
		return true;
		} catch (e) {
		return false;
		}
		}
		})(jQuery);
		No newline at end of file

components/03-molecules/form-elements/datepicker/date-picker-init.js

deleted100644 → 0

+0 −124

Original line number	Diff line number	Diff line
		(function ($) {

		Drupal.behaviors.initDatepicker = {
		attach: function (context, settings) {
		// Only for Desktop we switch the jquery datepicker.
		if (!isMobile()) {

		// Defaults
		var $context = $(context);

		var $time = $('.form-time');
		var $date = $('.form-date');
		// We want to use the native date picker when the browser supports this
		// on specific fields and fields have been defined as requiring the
		// native date picker.
		if (
		browserSupportsDateInput() &&
		typeof drupalSettings.socialbase !== "undefined" &&
		typeof drupalSettings.socialbase.datepicker !== "undefined" &&
		typeof drupalSettings.socialbase.datepicker.nativeDatePickFields !== "undefined" &&
		Array.isArray(drupalSettings.socialbase.datepicker.nativeDatePickFields)
		) {
		// Filter out any date elements where the name attribute contains any
		// of the strings in the array of field names to exclude.
		const nativeFieldNames = drupalSettings.socialbase.datepicker.nativeDatePickFields;
		$date = $date.filter(function () {
		const $dateEl = $(this);
		const elName = $dateEl.attr('name');
		// If it has no name then keep it.
		if (!elName) {
		return true;
		}
		// Keep it if it has no match to the configured excluded fields.
		return !nativeFieldNames.some(excludedName => elName.includes(excludedName));
		})
		}

		// TIME
		$context.find($time).once('timePicker').each(function () {
		// Change it's input to text. Only for date element and only on Desktop.
		// If JS is disabled the fallback is the HTML 5 element, not too user friendly.
		$time.prop('type', 'text');
		// Initiate the datepicker element. So we can make it user friendly again.
		$time.timepicker({
		'show2400': false,
		'scrollDefault': 'now',
		'timeFormat': 'H:i',
		'step': 5
		});
		// Listen for changes in the time field and update the end value.
		$time.on('changeTime', function() {
		var endTime = $("#edit-field-event-date-end-0-value-time");
		if (!endTime.val()) endTime.val( $(this).val() );
		});
		});

		// DATES
		$context.find($date).once('datePicker').each(function () {
		// Set the prepoluted value of the datepicker for the end date
		var startDate = $("#edit-field-event-date-0-value-date");
		var endDate = $("#edit-field-event-date-end-0-value-date");
		// Change it's input to text. Only for date element and only on Desktop.
		// If JS is disabled the fallback is the HTML 5 element, not too user friendly.
		$date.prop('type', 'text');
		// Initiate the datepicker element. So we can make it user friendly again.
		$date.datepicker({
		altFormat: 'yy-mm-dd',
		dateFormat: 'yy-mm-dd', // @Todo we can alter this to show the user a different format.
		onSelect: function(dateText, inst) {

		// Check if end date field is empty and populate the target field
		if ( !endDate.val() ) {
		endDate.val( dateText )
		}
		// If the end date field is already set start comparing timestamps
		else {
		// Create timestamps to compare
		var startDateTimestamp = new Date(startDate[0].value).getTime();
		var endDateTimestamp = new Date(endDate[0].value).getTime();

		if (startDateTimestamp > endDateTimestamp) endDate.val( dateText );
		if (endDateTimestamp < startDateTimestamp) startDate.val( dateText );
		}
		},
		beforeShowDay: function(date) {
		// Create timestamps to compare
		var startDateTimestamp = new Date(startDate.val()).getTime() - 86400000; // Minus a day in ms
		var endDateTimestamp = new Date(endDate.val()).getTime();
		var currentDateTimestamp = date.getTime();

		if (currentDateTimestamp >= startDateTimestamp && currentDateTimestamp <= endDateTimestamp) {
		return [true, 'bg-info', ''];
		}

		return [true, '', ''];
		}

		});

		});
		//
		}
		}
		}

		/**
		* Check if the browser supports [type='date'] input fields.
		*
		* See https://stackoverflow.com/a/10199306/576060
		*/
		function browserSupportsDateInput() {
		var input = document.createElement('input');
		input.setAttribute('type','date');
		var notADateValue = 'not-a-date';
		input.setAttribute('value', notADateValue);
		return (input.value !== notADateValue);
		}

		function isMobile() {
		try { document.createEvent("TouchEvent"); return true; }
		catch(e) { return false; }
		}

		})(jQuery);