✨ Add brand logo and page elements settings

assets/core/ts/config/config.ts

@@ -86,7 +86,7 @@ const defaultTutorConfig = {
     instructor_can_change_course_author: 'off',
     instructor_can_manage_co_instructors: 'off',
     chatgpt_enable: 'off',
-    course_builder_logo_url: '',
+    brand_logo_light: '',
     chatgpt_key_exist: false,
     hide_admin_bar_for_users: 'off',
     enable_redirect_on_course_publish_from_frontend: 'off',

assets/src/js/admin-dashboard/segments/options.js

@@ -82,6 +82,73 @@ document.addEventListener('DOMContentLoaded', function () {
 		};
 	}
 
+	/**
+	 * Initialize a reusable image upload list field.
+	 *
+	 * Wires up the select/remove buttons rendered by the `image_upload_list`
+	 * field type, so any similar field can reuse it with its own settings.
+	 *
+	 * @since 4.0.6
+	 *
+	 * @param {Object}        config
+	 * @param {string}        config.mediaTitle       Media frame title.
+	 * @param {string}        config.mediaButtonText  Media frame select button text.
+	 * @param {string[]}      [config.allowedMimeTypes] Restrict selectable attachment mime types. Empty means any image.
+	 * @return {void}
+	 */
+	function initImageUploadList({ mediaTitle, mediaButtonText, allowedMimeTypes = [] }) {
+		$(document).on('click', '.tutor-image-upload-select', function (event) {
+			event.preventDefault();
+
+			const $upload = $(this).closest('.tutor-image-upload-item');
+			const $input = $upload.find('.tutor-image-upload-input');
+			const $preview = $upload.find('.tutor-image-upload-preview');
+			const $image = $preview.find('img');
+			const $remove = $upload.find('.tutor-image-upload-remove');
+			const frame = wp.media({
+				title: mediaTitle,
+				button: { text: mediaButtonText },
+				library: { type: 'image' },
+				multiple: false,
+			});
+
+			frame.on('select', function () {
+				const attachment = frame.state().get('selection').first().toJSON();
+				if (allowedMimeTypes.length && !allowedMimeTypes.includes(attachment.mime)) {
+					tutor_toast(__('Error!', 'tutor'), __('Please select a supported image.', 'tutor'), 'error');
+					return;
+				}
+
+				$input.val(attachment.id).trigger('change');
+				$image.attr('src', attachment.url).prop('hidden', false);
+				$preview.addClass('has-image');
+				$upload.addClass('has-image');
+				$remove.prop('hidden', false);
+				$('#save_tutor_option').prop('disabled', false);
+			});
+
+			frame.open();
+		});
+
+		$(document).on('click', '.tutor-image-upload-remove', function (event) {
+			event.preventDefault();
+
+			const $upload = $(this).closest('.tutor-image-upload-item');
+			$upload.find('.tutor-image-upload-input').val('').trigger('change');
+			$upload.find('.tutor-image-upload-preview img').attr('src', '').prop('hidden', true);
+			$upload.find('.tutor-image-upload-preview').removeClass('has-image');
+			$upload.removeClass('has-image');
+			$(this).prop('hidden', true);
+			$('#save_tutor_option').prop('disabled', false);
+		});
+	}
+
+	initImageUploadList({
+		mediaTitle: __('Select a brand logo', 'tutor'),
+		mediaButtonText: __('Use this logo', 'tutor'),
+		allowedMimeTypes: ['image/jpeg', 'image/png'],
+	});
+
 	const validateEmail = (email) => {
 		const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 		return re.test(String(email).toLowerCase());

assets/src/js/admin-dashboard/segments/reset.js

@@ -47,7 +47,7 @@ const resetConfirmation = () => {
 					if (xhttp.readyState === 4) {
 						let pageData = JSON.parse(xhttp.response).data;
 						pageData.forEach((item) => {
-							const field_types_associate = ['color_field', 'upload_full', 'checkbox_notification', 'checkgroup', 'group_radio_full_3', 'group_radio', 'radio_vertical', 'checkbox_horizontal', 'radio_horizontal', 'radio_horizontal_full', 'radio_horizontal_image', 'checkbox_vertical', 'toggle_switch', 'toggle_switch_button', 'text', 'textarea', 'email', 'hidden', 'select', 'number'];
+							const field_types_associate = ['color_field', 'upload_full', 'image_upload_list', 'toggle_matrix', 'checkbox_notification', 'checkgroup', 'group_radio_full_3', 'group_radio', 'radio_vertical', 'checkbox_horizontal', 'radio_horizontal', 'radio_horizontal_full', 'radio_horizontal_image', 'checkbox_vertical', 'toggle_switch', 'toggle_switch_button', 'text', 'textarea', 'email', 'hidden', 'select', 'number'];
 
 							if (field_types_associate.includes(item.type)) {
 								let itemName = 'tutor_option[' + item.key + ']';
@@ -84,6 +84,36 @@ const resetConfirmation = () => {
 										});
 									}
 
+								} else if (item.type == 'image_upload_list') {
+									Object.values(item.items || {}).forEach((imageItem) => {
+										const imageInput = elementByName(`tutor_option[${imageItem.key}]`)[0];
+										if (!imageInput) return;
+
+										const uploadItem = imageInput.closest('.tutor-image-upload-item');
+										const defaultValue = imageItem.default || '';
+										const defaultImageUrl = uploadItem?.dataset.defaultImageUrl || '';
+										imageInput.value = defaultValue;
+										uploadItem?.classList.toggle('has-image', !!defaultImageUrl);
+										uploadItem?.querySelector('.tutor-image-upload-preview')?.classList.toggle('has-image', !!defaultImageUrl);
+										const image = uploadItem?.querySelector('.tutor-image-upload-preview img');
+										if (image) {
+											image.src = defaultImageUrl;
+											image.hidden = !defaultImageUrl;
+										}
+									});
+								} else if (item.type == 'toggle_matrix') {
+									Object.values(item.items || {}).forEach((matrixItem) => {
+										Object.values(matrixItem).forEach((setting) => {
+											if (!setting || !setting.key) return;
+											const matrixInput = elementByName(`tutor_option[${setting.key}]`)[0];
+											if (!matrixInput) return;
+
+											const isEnabled = setting.default === 'on';
+											matrixInput.value = isEnabled ? 'on' : 'off';
+											const checkbox = matrixInput.nextElementSibling;
+											if (checkbox) checkbox.checked = isEnabled;
+										});
+									});
 								} else if (item.type == 'upload_full') {
 									elementItem.value = '';
 									elementItem.nextElementSibling.src = '';
@@ -193,4 +223,4 @@ if (null !== optionForm) {
 			document.getElementById('save_tutor_option').disabled = false;
 		}
 	});
-}
+}

assets/src/js/frontend/dashboard/index.ts

@@ -4,6 +4,7 @@
 import { initializeReviews } from '@FrontendComponents/reviews';
 import { initializeTour } from '@FrontendComponents/tour';
 import { initializeCommon } from '@FrontendServices/common';
+import { initializeSiteShell } from '@FrontendServices/site-shell';
 
 import { initializeConfetti } from './confetti';
 import { initializeHeader } from './header';
@@ -74,6 +75,7 @@ const getCurrentPage = (): string => {
 };
 
 const initializeDashboard = () => {
+  initializeSiteShell();
   initializeHeader();
   initializeCommon();
   initializeTour();

assets/src/js/frontend/learning-area/index.ts

@@ -4,6 +4,7 @@
 import { initializeReviews } from '@FrontendComponents/reviews';
 import { initializeTour } from '@FrontendComponents/tour';
 import { initializeCommon } from '@FrontendServices/common';
+import { initializeSiteShell } from '@FrontendServices/site-shell';
 
 import { initializeCommon as initializeLearningAreaCommon } from './common';
 import { initializeLesson } from './lesson';
@@ -21,6 +22,7 @@ const decodePathSegment = (segment: string): string => {
 };
 
 const initializeLearningArea = () => {
+  initializeSiteShell();
   initializeLearningAreaCommon();
   initializeCommon();
   initializeSidebar();

assets/src/js/frontend/services/site-shell.ts

@@ -0,0 +1,136 @@
+const CSS_VARIABLE_HEADER_OFFSET = '--tutor-site-header-offset';
+const CSS_VARIABLE_HEADER_OVERLAY_OFFSET = '--tutor-site-header-overlay-offset';
+
+const WP_ADMIN_BAR_ID = 'wpadminbar';
+
+const SITE_SHELL_ROOT_SELECTOR = '[data-tutor-learning-site-shell], [data-tutor-dashboard-site-shell]';
+
+/**
+ * Returns the lowest visible bottom edge among the site header and admin bar.
+ *
+ * A normal-flow header contributes while it is visible, then naturally drops
+ * out of the boundary as the document scrolls. Fixed and sticky headers keep
+ * contributing because their bottom edge remains in the viewport.
+ */
+const getVisibleHeaderBoundary = (elements: HTMLElement[]): number => {
+  return elements.reduce((offset, element) => {
+    return Math.max(offset, element.getBoundingClientRect().bottom, 0);
+  }, 0);
+};
+
+/**
+ * A static (normal-flow) header only needs its computed position checked,
+ * not its inline style, since positioning is almost always set via CSS.
+ */
+const isStaticPosition = (element: HTMLElement): boolean => {
+  return window.getComputedStyle(element).position === 'static';
+};
+
+class SiteShellController {
+  private animationFrame: number | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+  private themeHeader: HTMLElement | null = null;
+
+  constructor(
+    private readonly root: HTMLElement,
+    private readonly themeHeaderSelector: string,
+  ) {}
+
+  start(): void {
+    this.themeHeader = this.findThemeHeader();
+    this.updateOffset();
+
+    // A normal-flow (static) header naturally drops out of the visible
+    // boundary once scrolled past — its contribution to updateOffset()
+    // only matters on first paint, so skip the ongoing listeners/observer.
+    if (this.themeHeader && isStaticPosition(this.themeHeader)) {
+      return;
+    }
+
+    if (this.themeHeader && typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => this.scheduleOffsetUpdate());
+      this.resizeObserver.observe(this.themeHeader);
+    }
+
+    window.addEventListener('resize', this.scheduleOffsetUpdate);
+    window.addEventListener('scroll', this.scheduleOffsetUpdate, { passive: true });
+  }
+
+  destroy(): void {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+
+    window.removeEventListener('resize', this.scheduleOffsetUpdate);
+    window.removeEventListener('scroll', this.scheduleOffsetUpdate);
+
+    if (this.animationFrame !== null) {
+      window.cancelAnimationFrame(this.animationFrame);
+      this.animationFrame = null;
+    }
+
+    this.themeHeader = null;
+  }
+
+  private findThemeHeader(): HTMLElement | null {
+    if (!this.themeHeaderSelector) {
+      return null;
+    }
+
+    try {
+      const header = document.querySelector(this.themeHeaderSelector);
+      return header instanceof HTMLElement ? header : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private scheduleOffsetUpdate = (): void => {
+    if (this.animationFrame !== null) {
+      return;
+    }
+
+    this.animationFrame = window.requestAnimationFrame(() => {
+      this.animationFrame = null;
+      this.updateOffset();
+    });
+  };
+
+  private updateOffset(): void {
+    const adminBar = document.getElementById(WP_ADMIN_BAR_ID);
+    const elements = [this.themeHeader, adminBar].filter(
+      (element): element is HTMLElement => element instanceof HTMLElement,
+    );
+    const offset = getVisibleHeaderBoundary(elements);
+
+    this.root.style.setProperty(CSS_VARIABLE_HEADER_OFFSET, `${offset}px`);
+
+    // The active-quiz form is positioned below a normal-flow theme header,
+    // but starts behind a fixed or stuck header. This value lets its
+    // absolutely positioned question panel reserve only the part of the
+    // visible boundary that overlays the Learning Area itself.
+    const rootTop = this.root.getBoundingClientRect().top;
+    const overlayOffset = Math.max(0, offset - Math.max(0, rootTop));
+    this.root.style.setProperty(CSS_VARIABLE_HEADER_OVERLAY_OFFSET, `${overlayOffset}px`);
+  }
+}
+
+/**
+ * Initializes all Tutor site-shell roots found in the current DOM.
+ *
+ * Returns a disposer that tears down every controller it created (removes
+ * listeners, disconnects observers, cancels pending rAFs). Callers are
+ * responsible for invoking it when the roots are removed or re-initialized,
+ * to avoid duplicate listeners/observers stacking up across repeated calls.
+ */
+export const initializeSiteShell = (): (() => void) => {
+  const controllers = Array.from(document.querySelectorAll<HTMLElement>(SITE_SHELL_ROOT_SELECTOR)).map((root) => {
+    const selector = root.dataset.tutorThemeHeaderSelector || '';
+    const controller = new SiteShellController(root, selector);
+    controller.start();
+    return controller;
+  });
+
+  return () => {
+    controllers.forEach((controller) => controller.destroy());
+  };
+};

assets/src/js/v3/@types/index.d.ts

@@ -179,7 +179,7 @@ declare global {
         instructor_can_change_course_author: 'on' | 'off';
         instructor_can_manage_co_instructors: 'on' | 'off';
         chatgpt_enable: 'on' | 'off';
-        course_builder_logo_url: string | false;
+        brand_logo_light: string | false;
         chatgpt_key_exist: boolean;
         hide_admin_bar_for_users: 'on' | 'off';
         enable_redirect_on_course_publish_from_frontend: 'on' | 'off';

assets/src/js/v3/shared/components/Logo.tsx

@@ -12,15 +12,10 @@ interface LogoProps {
 }
 
 const Logo = ({ wrapperCss }: LogoProps) => {
-  const isTutorPro = !!tutorConfig.tutor_pro_url;
-
   return (
     <button tabIndex={-1} type="button" css={[styleUtils.resetButton, styles.logo, wrapperCss]}>
-      <Show
-        when={isTutorPro && tutorConfig.settings?.course_builder_logo_url}
-        fallback={<LogoSvg width={108} height={24} />}
-      >
-        {(logo) => <img src={logo} alt="Tutor LMS" />}
+      <Show when={tutorConfig.settings?.brand_logo_light} fallback={<LogoSvg width={108} height={24} />}>
+        {(logo) => <img src={logo} alt={tutorConfig.site_title} />}
       </Show>
     </button>
   );

assets/src/js/v3/shared/config/config.ts

@@ -85,7 +85,7 @@ const defaultTutorConfig = {
     instructor_can_change_course_author: 'off',
     instructor_can_manage_co_instructors: 'off',
     chatgpt_enable: 'off',
-    course_builder_logo_url: '',
+    brand_logo_light: '',
     chatgpt_key_exist: false,
     hide_admin_bar_for_users: 'off',
     enable_redirect_on_course_publish_from_frontend: 'off',

assets/src/js/v3/shared/icons/types.ts

@@ -124,6 +124,7 @@ export const icons = [
   'css',
   'csv',
   'currency',
+  'dark',
   'dbf',
   'delete',
   'delete2',
@@ -181,6 +182,7 @@ export const icons = [
   'fireDisabled',
   'fla',
   'font',
+  'footer',
   'freeShippingType',
   'gift',
   'giftCard',