Convert jQuery to javascript

Signed-off-by: Matt Friedman <[email protected]>

adm/style/scripts.js

@@ -1,33 +1,69 @@
-(function($) { // Avoid conflicts with other libraries
+document.addEventListener('DOMContentLoaded', function() {
 
-'use strict';
+	'use strict';
 
-$(function() {
+	// Helper function to get elements by selector
+	const $ = selector => document.querySelectorAll(selector);
 
-	$.fn.toggleBoxes = function(target) {
-		$(this).on('click', function() {
-			if ($(this).is(':checked')) {
-				$(target).prop('checked', false);
+	// Function to toggle checkboxes
+	function toggleBoxes(elements, target) {
+		elements.forEach(element => {
+			element.addEventListener('click', () => {
+				if (element.checked) {
+					$(target).forEach(box => {
+						box.checked = false;
+					});
+				}
+			});
+		});
+	}
+
+	// Call toggleBoxes for .html-on and .html-off elements
+	toggleBoxes($('.html-on'), '.html-off');
+	toggleBoxes($('.html-off'), '.html-on');
+
+	// Page route autofill when empty using Page title
+	const pageTitle = document.getElementById('page_title');
+	const pageRoute = document.getElementById('page_route');
+
+	pageTitle.addEventListener('blur', () => {
+		const title = pageTitle.value;
+		const route = pageRoute.value;
+
+		pageRoute.value = route ? route : slugify(title);
+	});
+
+	// Slugify a string to be url friendly
+	function slugify(title) {
+		return title
+			.toLowerCase()
+			.replace(/[^a-z\d\-_\s]/g, '')
+			.replace(/\s+/g, '-')
+			.trim();
+	}
+
+	// Page Icon Previews
+	const updateClasses = (element, newClass) => {
+
+		const classesToKeep = ['o-icon', 'o-icon-font', 'fa-fw', 'fas', 'acp-icon'];
+
+		element.classList.forEach(className => {
+			if (!classesToKeep.includes(className)) {
+				element.classList.remove(className);
 			}
 		});
+
+		element.classList.add(`fa-${newClass}`);
 	};
 
-	$('.html-on').toggleBoxes('.html-off');
-	$('.html-off').toggleBoxes('.html-on');
+	const pageIconFont = document.getElementById('page_icon_font');
 
-	$('#page_title').on('blur', function() {
-		var title = $(this).val();
-		$('#page_route').val(function(event, route) {
-			return (route) ? route : title.toLowerCase().replace(/[^a-z\d\-_\s]/gi, '').trim().replace(/\s+/g, '-');
-		});
+	pageIconFont.addEventListener('keyup', function() {
+		updateClasses(this.nextElementSibling, this.value);
 	});
 
-	$('#page_icon_font').on('keyup blur', function() {
-		var input = $(this).val();
-		var $icon = $(this).next('i');
-		$icon.attr('class', 'o-icon o-icon-font acp-icon fa-' + input);
+	pageIconFont.addEventListener('blur', function() {
+		updateClasses(this.nextElementSibling, this.value);
 	});
 
 });
-
-})(jQuery); // Avoid conflicts with other libraries