${
window.lpCourseBuilder?.i18n?.click_to_upload || 'Click to upload'
}
${
window.lpCourseBuilder?.i18n?.image_hint || 'JPG, JPEG, PNG less than 1MB'
}
`;
dropzone.classList.remove( 'has-image' );
// Clear thumbnail ID
if ( thumbnailInput ) {
thumbnailInput.value = '';
// Mark form as having unsaved changes
getFormState().markAsChanged();
}
// Hide action buttons
if ( actionsContainer ) {
actionsContainer.innerHTML = '';
}
}
buildPermalinkDisplayUrl( baseUrl = '', slug = '', fallbackUrl = '' ) {
const normalizedBaseUrl = typeof baseUrl === 'string' ? baseUrl : '';
const normalizedSlug = typeof slug === 'string' ? slug.trim() : '';
if ( normalizedBaseUrl && normalizedSlug ) {
return `${ normalizedBaseUrl }${ normalizedSlug }`;
}
return typeof fallbackUrl === 'string' ? fallbackUrl : '';
}
/**
* Handle permalink Edit button click.
* Shows editor mode, hides display mode.
*/
handlePermalinkEdit( args ) {
const { e } = args;
if ( e ) e.preventDefault();
const display = document.querySelector( BuilderEditCourse.selectors.elPermalinkDisplay );
const editor = document.querySelector( BuilderEditCourse.selectors.elPermalinkEditor );
const input = document.querySelector( BuilderEditCourse.selectors.elPermalinkSlugInput );
if ( ! display || ! editor || ! input ) return;
// Store original value for cancel
input.dataset.originalValue = input.value;
// Toggle visibility
display.classList.add( 'lp-hidden' );
editor.classList.remove( 'lp-hidden' );
// Focus input and select text
input.focus();
input.select();
}
/**
* Handle permalink OK button click.
* Validates and sanitizes slug, updates display.
*/
handlePermalinkOk( args ) {
const { e } = args;
if ( e ) e.preventDefault();
const display = document.querySelector( BuilderEditCourse.selectors.elPermalinkDisplay );
const editor = document.querySelector( BuilderEditCourse.selectors.elPermalinkEditor );
const input = document.querySelector( BuilderEditCourse.selectors.elPermalinkSlugInput );
const urlLink = document.querySelector( BuilderEditCourse.selectors.elPermalinkUrl );
const baseUrlInput = document.querySelector( BuilderEditCourse.selectors.elPermalinkBaseUrl );
if ( ! display || ! editor || ! input || ! urlLink ) return;
// Sanitize the slug
let newSlug = input.value.trim();
// If empty after sanitizing, restore original
if ( ! newSlug ) {
newSlug = input.dataset.originalValue || 'course';
}
// Update input value with sanitized slug
input.value = newSlug;
// Get base URL
const baseUrl = baseUrlInput ? baseUrlInput.value : '';
const newUrl = this.buildPermalinkDisplayUrl( baseUrl, newSlug, urlLink.textContent || '' );
// Keep href as the current saved link and only update display text.
urlLink.textContent = newUrl;
// Toggle visibility back to display mode
editor.classList.add( 'lp-hidden' );
display.classList.remove( 'lp-hidden' );
// Mark form as changed if slug differs from original
if ( newSlug !== input.dataset.originalValue ) {
getFormState().markAsChanged();
}
}
/**
* Handle permalink Cancel button click.
* Restores original value and returns to display mode.
*/
handlePermalinkCancel( args ) {
const { e } = args;
if ( e ) e.preventDefault();
const display = document.querySelector( BuilderEditCourse.selectors.elPermalinkDisplay );
const editor = document.querySelector( BuilderEditCourse.selectors.elPermalinkEditor );
const input = document.querySelector( BuilderEditCourse.selectors.elPermalinkSlugInput );
if ( ! display || ! editor || ! input ) return;
// Restore original value
input.value = input.dataset.originalValue || '';
// Toggle visibility back to display mode
editor.classList.add( 'lp-hidden' );
display.classList.remove( 'lp-hidden' );
}
initTabTitles() {
const tabLinks = document.querySelectorAll( BuilderEditCourse.selectors.elTabLinks );
tabLinks.forEach( ( link ) => {
const textSpan = link.querySelector( 'span' );
const title = textSpan ? textSpan.textContent.trim() : link.textContent.trim();
const href = link.getAttribute( 'href' );
if ( ! href ) return;
const targetId = href.substring( 1 );
const panel = document.getElementById( targetId );
if ( panel ) {
panel.setAttribute( 'data-tab-title', title );
}
} );
}
initTitleCharCount() {
const titleInput = document.querySelector( BuilderEditCourse.selectors.elTitleInput );
if ( titleInput ) {
this.updateTitleCharCount( titleInput.value );
}
}
updateTitleCharCount( text ) {
const charCountEl = document.querySelector( BuilderEditCourse.selectors.elTitleCharCount );
if ( ! charCountEl ) return;
const charCount = text.length;
const charText = charCount === 1 ? 'character' : 'characters';
charCountEl.textContent = `${ charCount } ${ charText }`;
}
handleTitleInput( args ) {
const { target } = args;
this.updateTitleCharCount( target.value );
}
initDescWordCount() {
// Wait for TinyMCE to be ready
if ( typeof tinymce !== 'undefined' ) {
tinymce.on( 'AddEditor', ( e ) => {
if ( e.editor.id === 'course_description_editor' ) {
e.editor.on( 'init', () => {
this.updateDescWordCount( e.editor );
// Listen for content changes
e.editor.on( 'keyup change input NodeChange', () => {
this.updateDescWordCount( e.editor );
} );
} );
}
} );
// If editor already exists
const existingEditor = tinymce.get( 'course_description_editor' );
if ( existingEditor ) {
this.updateDescWordCount( existingEditor );
existingEditor.on( 'keyup change input NodeChange', () => {
this.updateDescWordCount( existingEditor );
} );
}
}
}
updateDescWordCount( editor ) {
const wordCountEl = document.querySelector( BuilderEditCourse.selectors.elDescWordCount );
if ( ! wordCountEl ) return;
// Use TinyMCE's built-in word count plugin
const wordcount = editor.plugins.wordcount;
let count = 0;
if ( wordcount && typeof wordcount.body !== 'undefined' ) {
count = wordcount.body.getWordCount();
} else if ( wordcount && typeof wordcount.getCount !== 'undefined' ) {
count = wordcount.getCount();
} else {
// Fallback: manual count
const content = editor.getContent( { format: 'text' } );
count = this.countWords( content );
}
const wordText = count === 1 ? 'word' : 'words';
wordCountEl.textContent = `${ count } ${ wordText }`;
}
updateHeaderTitle( title ) {
const headerTitle = document.querySelector( '.lp-cb-header__title' );
if ( headerTitle && title ) {
headerTitle.textContent = title;
}
}
countWords( text ) {
const trimmedText = text.replace( /<[^>]*>/g, '' ).trim();
if ( trimmedText.length === 0 ) return 0;
const words = trimmedText.split( /\s+/ ).filter( ( word ) => word.length > 0 );
return words.length;
}
/**
* Initialize Header Actions Dropdown
* Handles toggle open/close for dropdown menu in header actions
*/
initHeaderActionsDropdown() {
const dropdownWrapper = document.querySelector(
BuilderEditCourse.selectors.elHeaderActionsDropdown
);
if ( ! dropdownWrapper ) return;
const toggleBtn = dropdownWrapper.querySelector( BuilderEditCourse.selectors.elDropdownToggle );
const dropdownMenu = dropdownWrapper.querySelector(
BuilderEditCourse.selectors.elDropdownMenu
);
if ( ! toggleBtn || ! dropdownMenu ) return;
// Toggle dropdown on button click
toggleBtn.addEventListener( 'click', ( e ) => {
e.stopPropagation();
const isOpen = dropdownMenu.classList.contains( 'is-open' );
if ( isOpen ) {
this.closeHeaderDropdown( toggleBtn, dropdownMenu );
} else {
this.openHeaderDropdown( toggleBtn, dropdownMenu );
}
} );
// Close dropdown when clicking outside
document.addEventListener( 'click', ( e ) => {
if ( ! dropdownWrapper.contains( e.target ) ) {
this.closeHeaderDropdown( toggleBtn, dropdownMenu );
}
} );
// Close dropdown on Escape key
document.addEventListener( 'keydown', ( e ) => {
if ( e.key === 'Escape' ) {
this.closeHeaderDropdown( toggleBtn, dropdownMenu );
}
} );
// Close dropdown after clicking an item (except when it triggers an action that keeps page)
const dropdownItems = dropdownMenu.querySelectorAll( '.cb-dropdown-item' );
dropdownItems.forEach( ( item ) => {
item.addEventListener( 'click', () => {
// Small delay to allow action to process before closing
setTimeout( () => {
this.closeHeaderDropdown( toggleBtn, dropdownMenu );
}, 100 );
} );
} );
}
openHeaderDropdown( toggleBtn, dropdownMenu ) {
dropdownMenu.classList.add( 'is-open' );
toggleBtn.setAttribute( 'aria-expanded', 'true' );
}
closeHeaderDropdown( toggleBtn, dropdownMenu ) {
dropdownMenu.classList.remove( 'is-open' );
toggleBtn.setAttribute( 'aria-expanded', 'false' );
}
}