Issue #3262004 by a.dmitriiev: Drupal 10 readiness: Remove use of jquery in... (ddc39a1d) · Commits · project / draggable_dashboard

assets/css/frontend.css

+5 −0

Original line number	Diff line number	Diff line
		@@ -48,6 +48,11 @@
		}
		.draggable-dashboard-block__content {
		padding: 15px;
		transition: height .5s ease;
		overflow: hidden;
		}
		.draggable-dashboard-block__content.hidden {
		height: 0;
		}
		.draggable-dashboard .draggable-dashboard-block .draggable-dashboard-block__header h2 {
		max-width: 90%;

assets/js/draggable.js

+16 −17

Original line number	Diff line number	Diff line
		@@ -3,22 +3,22 @@
		* Contains javascript functionality for the draggable blocks module.
		*/

		(function ($, window, Drupal, once) {
		(function (window, Drupal, once) {

		'use strict';

		Drupal.draggableDashboard = Drupal.draggableDashboard \|\| {};

		Drupal.draggableDashboard.dashboardChanged = function ($dashboard) {
		var blocks = {};
		$dashboard.find('.draggable-dashboard-column').each(function () {
		var columnId = '#' + $(this).attr('id');
		let blocks = {};
		$dashboard.querySelectorAll('.draggable-dashboard-column').forEach(function (column) {
		const columnId = '#' + column.getAttribute('id');
		// Build blocks object
		if (typeof blocks[columnId] === 'undefined') {
		blocks[columnId] = [];
		}
		$(this).find('.draggable-dashboard-block').each(function (i, e) {
		var blockId = '#' + $(this).attr('id');
		column.querySelectorAll('.draggable-dashboard-block').forEach(function (block) {
		const blockId = '#' + block.getAttribute('id');
		blocks[columnId].push(blockId);
		});
		});
		@@ -30,22 +30,20 @@
		attach: function (context, settings) {
		const elements = once('dashboard-processed', '.draggable-dashboard', context)
		elements.forEach(function () {
		var $dashboards = $('.draggable-dashboard', context);
		var blocks = {};
		let blocks = {};
		// If we already saved an order in the local storage, get the value
		if (localStorage.getItem('dashboard-blocks-order')) {
		blocks = JSON.parse(localStorage.getItem('dashboard-blocks-order'));
		}

		$dashboards.each(function () {
		var $dashboard = $(this);
		$(this).find('div.draggable-dashboard-column').each(function() {
		context.querySelectorAll('.draggable-dashboard').forEach(function (dashboard) {
		dashboard.querySelectorAll('div.draggable-dashboard-column').forEach(function(node) {
		// Make columns sortable
		Sortable.create(document.getElementById($(this).attr('id')), {
		Sortable.create(document.getElementById(node.getAttribute('id')), {
		draggable: '.draggable-dashboard-block',
		handle: '.draggable-dashboard-block__header',
		onEnd: function () {
		Drupal.draggableDashboard.dashboardChanged($dashboard);
		Drupal.draggableDashboard.dashboardChanged(dashboard);
		}
		});
		})
		@@ -53,10 +51,11 @@

		// Rearrange blocks.
		if (blocks !== 'undefined') {
		$.each(blocks, function (col, blocksInCol) {
		Object.entries(blocks).forEach(function ([col_selector, blocksInCol]) {
		// Put every block in the correct place in its region.
		$.each(blocksInCol, function (j, block) {
		$(col).append($(block));
		blocksInCol.forEach(function (block_selector) {
		let block = document.querySelector(block_selector);
		document.querySelector(col_selector).appendChild(block);
		});
		});
		}
		@@ -65,4 +64,4 @@
		}
		};

		})(jQuery, window, Drupal, once);
		})(window, Drupal, once);

assets/js/frontend.js

+58 −35

Original line number	Diff line number	Diff line
		@@ -3,7 +3,7 @@
		* Contains javascript functionality for the draggable dashboard module.
		*/

		(function ($, window, Drupal, once) {
		(function (window, Drupal, once) {
		'use strict';
		Drupal.behaviors.draggableDashboardActions = {
		attach: function attach(context, settings) {
		@@ -16,21 +16,39 @@
		blocksMin = JSON.parse(localStorage.getItem('dashboard-blocks-min'));
		}
		if (blocksMin.length > 0) {
		$.each(blocksMin, function (i, block) {
		$(block).find('.draggable-dashboard-block__content').hide();
		$(block).find('.draggable-dashboard__icon--collapse')
		.toggleClass('draggable-dashboard__icon--collapse draggable-dashboard__icon--expand').attr('title', 'Expand');
		blocksMin.forEach(function (block_selector) {
		const block = context.querySelector(block_selector);
		block.querySelector('.draggable-dashboard-block__content').classList.add('hidden');
		let collapse_icon = block.querySelector('.draggable-dashboard__icon--collapse');
		collapse_icon.classList.toggle('draggable-dashboard__icon--collapse');
		collapse_icon.classList.toggle('draggable-dashboard__icon--expand');
		collapse_icon.setAttribute('title', 'Expand');
		});
		}

		// Expand / collapse the content of a block
		$('.draggable-dashboard__icon--toggle', context).click(function () {
		var blockId = '#' + $(this).closest('.draggable-dashboard-block').attr('id');
		$(blockId).find('.draggable-dashboard-block__content').slideToggle();
		$(this).toggleClass('draggable-dashboard__icon--collapse draggable-dashboard__icon--expand');
		if ($(this).hasClass('draggable-dashboard__icon--expand')) {
		const icons = context.querySelectorAll('.draggable-dashboard__icon--toggle');
		icons.forEach(function(icon) {
		icon.addEventListener('click', function (event) {
		const element = event.target;
		const blockId = '#' + element.closest('.draggable-dashboard-block').getAttribute('id');
		const container = document.querySelector(blockId + ' .draggable-dashboard-block__content');
		if (container.classList.contains('hidden')) {
		container.classList.remove('hidden');
		container.style.height = 'auto';
		let height = container.clientHeight + "px";
		container.style.height = '0px';
		setTimeout(function () {
		container.style.height = height;
		}, 0);
		} else {
		container.classList.add('hidden');
		}
		element.classList.toggle('draggable-dashboard__icon--collapse');
		element.classList.toggle('draggable-dashboard__icon--expand');
		if (element.classList.contains('draggable-dashboard__icon--expand')) {
		// If we have just minimized (collapsed) the content:
		$(this).attr('title', 'Expand');
		element.setAttribute('title', 'Expand');
		// Add block to the minimized blocks list and save to Local Storage
		if (blocksMin.indexOf(blockId) === -1) {
		blocksMin.push(blockId);
		@@ -39,7 +57,7 @@
		}
		else {
		// If we have just expanded the content:
		$(this).attr('title', 'Collapse');
		element.setAttribute('title', 'Collapse');
		// Remove block from the minimized blocks list and save to Local Storage
		if (blocksMin.indexOf(blockId) !== -1) {
		blocksMin.splice(blocksMin.indexOf(blockId), 1);
		@@ -47,20 +65,25 @@
		}
		}
		});
		});


		// Maximize / minimize block
		$('.draggable-dashboard__icon--resize', context).click(function () {
		$(this).closest('.draggable-dashboard-block').toggleClass('draggable-dashboard-block--maximized');
		$(this).toggleClass('draggable-dashboard__icon--maximize draggable-dashboard__icon--minimize');
		if ($(this).hasClass('draggable-dashboard__icon--minimize')) {
		$(this).attr('title', 'Minimize');
		}
		else {
		$(this).attr('title', 'Maximize');
		const resizeIcons = context.querySelectorAll('.draggable-dashboard__icon--resize');
		resizeIcons.forEach(function (icon) {
		icon.addEventListener('click', function (event) {
		const element = event.target;
		element.closest('.draggable-dashboard-block').classList.toggle('draggable-dashboard-block--maximized');
		element.classList.toggle('draggable-dashboard__icon--maximize draggable-dashboard__icon--minimize');
		if (element.classList.contains('draggable-dashboard__icon--minimize')) {
		element.setAttribute('title', 'Minimize');
		} else {
		element.setAttribute('title', 'Maximize');
		}
		});
		});
		});
		}
		};

		})(jQuery, window, Drupal, once);
		})(window, Drupal, once);

draggable_dashboard.libraries.yml

+0 −1

Original line number	Diff line number	Diff line
		@@ -15,7 +15,6 @@ draggable:
		js:
		assets/js/draggable.js: {}
		dependencies:
		- core/jquery
		- core/once
		- core/sortable
		- core/drupal