# learnpress/4.4.10/assets/js/dist/blocks/course-item-template.js LearnPress – WordPress LMS Plugin for Create and Sell Online Courses, version 4.4.10. 1,165 lines. - Page: https://pluginprobe.com/plugins/learnpress/4.4.10/code/assets/js/dist/blocks/course-item-template.js - Raw: https://pluginprobe.com/plugins/learnpress/4.4.10/raw/assets/js/dist/blocks/course-item-template.js - Modified: 2026-10-09T07:39:42+00:00 Line numbers below start at 1. Link to a line or a range by appending a fragment to the page URL, for example `https://pluginprobe.com/plugins/learnpress/4.4.10/code/assets/js/dist/blocks/course-item-template.js#L10-L20`. ```javascript /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./assets/src/apps/js/blocks/courses/course-item-template/edit.js" /*!************************************************************************!*\ !*** ./assets/src/apps/js/blocks/courses/course-item-template/edit.js ***! \************************************************************************/ (__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data"); /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__); /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_4__); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__); /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__); /* harmony import */ var lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lpAssetsJsPath/utils.js */ "./assets/src/js/utils.js"); /* harmony import */ var lpAssetsJsPath_api_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lpAssetsJsPath/api.js */ "./assets/src/js/api.js"); const TEMPLATE_DEFAULT = [['learnpress/course-image'], ['learnpress/course-title'], ['learnpress/course-price']]; function PostTemplateInnerBlocks({ classList }) { const innerBlocksProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useInnerBlocksProps)({ className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('wp-block-learnpress-course-item-template') }, { template: TEMPLATE_DEFAULT }); return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", { className: "course" }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { ...innerBlocksProps })); } function PostTemplateBlockPreview({ blocks, blockContextId, classList, isHidden, setActiveBlockContextId }) { const blockPreviewProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.__experimentalUseBlockPreview)({ blocks }); const handleOnClick = () => { setActiveBlockContextId(blockContextId); }; const style = { display: isHidden ? 'none' : undefined }; return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", { className: "course", tabIndex: 0 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role , role: "button", onClick: handleOnClick, onKeyPress: handleOnClick, style: style }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { ...blockPreviewProps, className: "wp-block-learnpress-course-item-template" })); } const fetchLearnPressCourses = async (courseQuery, signal) => { let url = lpAssetsJsPath_api_js__WEBPACK_IMPORTED_MODULE_8__["default"].apiEditCoursesArchiveBlock; url = lpAssetsJsPath_utils_js__WEBPACK_IMPORTED_MODULE_7__.lpAddQueryArgs(url, courseQuery); const response = await fetch(url, { method: 'GET', signal }); if (!response.ok) { throw new Error(`HTTP error! Status: ${response.status}`); } return await response.json(); }; const MemoizedPostTemplateBlockPreview = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.memo)(PostTemplateBlockPreview); const Edit = ({ clientId, context, attributes, setAttributes }) => { const blockProps = (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)({ className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('learn-press-courses') }); const [activeBlockContextId, setActiveBlockContextId] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useState)(); const [coursesData, setCoursesData] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useState)(); const [listCourses, setListCourses] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useState)([]); const [loadingAPI, setLoadingAPI] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useState)(0); // const [ totalPages, setTotalPages ] = useState( 1 ); const { columns } = attributes; const layoutPagination = context.lpCourseQuery?.pagination_type || 'number'; // Fetch courses when query parameters change (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useEffect)(() => { var _context$lpCourseQuer; const courseQuery = (_context$lpCourseQuer = context.lpCourseQuery) !== null && _context$lpCourseQuer !== void 0 ? _context$lpCourseQuer : {}; let signal, controller; const fetchCourses = async () => { try { setLoadingAPI(1); controller = new AbortController(); signal = controller.signal; const response = await fetchLearnPressCourses(courseQuery, signal); const { data } = response; const { courses, page, total, total_pages } = data; setCoursesData(response); setListCourses(courses); // setTotalPages( total_pages ); } catch (error) { if (error.name !== 'AbortError') { console.error('Failed to fetch courses:', error); } } finally { setLoadingAPI(0); } }; fetchCourses(); return () => { controller.abort(); }; }, [context.lpCourseQuery?.order_by, context.lpCourseQuery?.limit]); const { blocks } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__.useSelect)(select => { const { getBlocks } = select(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.store); return { blocks: getBlocks(clientId) }; }, [clientId]); const blockContexts = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_4__.useMemo)(() => listCourses?.map(course => ({ lpCourseData: course, courseId: course?.ID })), [listCourses]); if (loadingAPI) { return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", { ...blockProps }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", null, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Courses Fetching…', 'learnpress'))); } if (listCourses.length === 0 && !loadingAPI) { const dataDummy = [{ ID: 1, post_title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Course One', 'learnpress') }, { ID: 2, post_title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Course two', 'learnpress') }]; setListCourses(dataDummy); } function paginationTypeDisplay(type) { switch (type) { case 'load-more': return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("button", { className: "courses-btn-load-more" }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Load More', 'learnpress')); case 'infinite': return ''; default: return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("nav", { className: "learnpress-block-pagination navigation pagination" }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", { className: "page-numbers" }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", { className: "prev page-numbers", href: "?paged=1" }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("i", { className: "lp-icon-arrow-left" }))), Array.from({ length: 3 }, (_, index) => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("li", { key: index }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", { className: "page-numbers", href: "{index}" }, index + 1))))); } } return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InspectorControls, null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.PanelBody, { title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Settings', 'learnpress') }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControl, { label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Layout', 'learnpress'), value: attributes.layout || 'gird', onChange: value => { setAttributes({ layout: value || 'gird' }); }, isBlock: true }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, { value: "list", label: "Stack" }), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.__experimentalToggleGroupControlOption, { value: "grid", label: "Grid" })), attributes.layout === 'grid' && (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_5__.RangeControl, { label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Columns', 'learnpress'), value: attributes.columns || 3, onChange: value => { setAttributes({ columns: value }); }, min: 2, max: 6, step: 1, marks: [{ value: 2, label: '2' }, { value: 3, label: '3' }, { value: 4, label: '4' }, { value: 5, label: '5' }, { value: 6, label: '6' }], withInputField: true }))), (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("ul", { className: "learn-press-courses wp-block-learn-press-courses", "data-layout": attributes.layout ? attributes.layout : 'list', style: { '--columns': attributes.columns || 3 } }, blockContexts && blockContexts.map(blockContext => (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.BlockContextProvider, { key: blockContext.courseId, value: blockContext }, blockContext.courseId === (activeBlockContextId || blockContexts[0]?.courseId) ? (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(PostTemplateInnerBlocks, { classList: blockContext.classList }) : null, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(MemoizedPostTemplateBlockPreview, { blocks: blocks, blockContextId: blockContext.courseId, classList: blockContext.classList, setActiveBlockContextId: setActiveBlockContextId, isHidden: blockContext.courseId === (activeBlockContextId || blockContexts[0]?.courseId) })))), context.lpCourseQuery?.pagination ? paginationTypeDisplay(layoutPagination) : null); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Edit); /***/ }, /***/ "./assets/src/apps/js/blocks/courses/course-item-template/save.js" /*!************************************************************************!*\ !*** ./assets/src/apps/js/blocks/courses/course-item-template/save.js ***! \************************************************************************/ (__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor"); /* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__); const Save = props => { const blockProps = _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps.save(); return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { ...blockProps }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.InnerBlocks.Content, null)); }; /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Save); /***/ }, /***/ "./assets/src/js/api.js" /*!******************************!*\ !*** ./assets/src/js/api.js ***! \******************************/ (__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /** * List API on backend * * @since 4.2.6 * @version 1.0.2 */ const lplistAPI = {}; let lp_rest_url; if ('undefined' !== typeof lpDataAdmin) { lp_rest_url = lpDataAdmin.lp_rest_url; lplistAPI.admin = { // apiAdminNotice: lp_rest_url + 'lp/v1/admin/tools/admin-notices', apiSearchCourses: lp_rest_url + 'lp/v1/admin/tools/search-course', apiSearchUsers: lp_rest_url + 'lp/v1/admin/tools/search-user', apiAssignUserCourse: lp_rest_url + 'lp/v1/admin/tools/assign-user-course', apiUnAssignUserCourse: lp_rest_url + 'lp/v1/admin/tools/unassign-user-course' }; } if ('undefined' !== typeof lpData) { lp_rest_url = lpData.lp_rest_url; lplistAPI.frontend = { apiWidgets: lp_rest_url + 'lp/v1/widgets/api', apiCourses: lp_rest_url + 'lp/v1/courses/archive-course', // Deprecated API, don't load from v4.3.7 apiAJAX: lp_rest_url + 'lp/v1/load_content_via_ajax/', // Deprecated since 4.3.0 apiProfileCoverImage: lp_rest_url + 'lp/v1/profile/cover-image' }; } if (lp_rest_url) { lplistAPI.apiCourses = lp_rest_url + 'lp/v1/courses/'; lplistAPI.apiEditCoursesArchiveBlock = lp_rest_url + 'lp/v1/courses/edit-archive-block'; lplistAPI.apiCoursesSuggest = lp_rest_url + 'lp/v1/courses/courses-suggest'; } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (lplistAPI); /***/ }, /***/ "./assets/src/js/utils.js" /*!********************************!*\ !*** ./assets/src/js/utils.js ***! \********************************/ (__unused_webpack_module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ debounce: () => (/* binding */ debounce), /* harmony export */ eventHandlers: () => (/* binding */ eventHandlers), /* harmony export */ fullScreenView: () => (/* binding */ fullScreenView), /* harmony export */ getDataOfForm: () => (/* binding */ getDataOfForm), /* harmony export */ getFieldKeysOfForm: () => (/* binding */ getFieldKeysOfForm), /* harmony export */ listenElementCreated: () => (/* binding */ listenElementCreated), /* harmony export */ listenElementViewed: () => (/* binding */ listenElementViewed), /* harmony export */ lpAddQueryArgs: () => (/* binding */ lpAddQueryArgs), /* harmony export */ lpAjaxParseJsonOld: () => (/* binding */ lpAjaxParseJsonOld), /* harmony export */ lpClassName: () => (/* binding */ lpClassName), /* harmony export */ lpFetchAPI: () => (/* binding */ lpFetchAPI), /* harmony export */ lpGetCurrentURLNoParam: () => (/* binding */ lpGetCurrentURLNoParam), /* harmony export */ lpOnElementReady: () => (/* binding */ lpOnElementReady), /* harmony export */ lpSetLoadingEl: () => (/* binding */ lpSetLoadingEl), /* harmony export */ lpShowHideEl: () => (/* binding */ lpShowHideEl), /* harmony export */ mergeDataWithDatForm: () => (/* binding */ mergeDataWithDatForm), /* harmony export */ toggleCollapse: () => (/* binding */ toggleCollapse), /* harmony export */ toggleEnable: () => (/* binding */ toggleEnable) /* harmony export */ }); /** * Utils functions * * @param url * @param data * @param functions * @since 4.2.5.1 * @version 1.0.7 */ const lpClassName = { hidden: 'lp-hidden', loading: 'loading', elCollapse: 'lp-collapse', elSectionToggle: '.lp-section-toggle', elTriggerToggle: '.lp-trigger-toggle', elBtnFullScreen: '.lp-btn-full-screen-view', elFullScreen: 'lp-full-screen-view', elBtnFullScreenClose: 'lp-full-screen-view__close' }; const lpFetchAPI = (url, data = {}, functions = {}) => { if ('function' === typeof functions.before) { functions.before(); } fetch(url, { method: 'GET', ...data }).then(response => response.json()).then(response => { if ('function' === typeof functions.success) { functions.success(response); } }).catch(err => { if ('function' === typeof functions.error) { functions.error(err); } }).finally(() => { if ('function' === typeof functions.completed) { functions.completed(); } }); }; /** * Get current URL without params. * * @since 4.2.5.1 */ const lpGetCurrentURLNoParam = () => { let currentUrl = window.location.href; const hasParams = currentUrl.includes('?'); if (hasParams) { currentUrl = currentUrl.split('?')[0]; } return currentUrl; }; const lpAddQueryArgs = (endpoint, args) => { const url = new URL(endpoint); Object.keys(args).forEach(arg => { url.searchParams.set(arg, args[arg]); }); return url; }; /** * Listen element viewed. * * @param el * @param callback * @since 4.2.5.8 */ const listenElementViewed = (el, callback) => { const observerSeeItem = new IntersectionObserver(function (entries) { for (const entry of entries) { if (entry.isIntersecting) { callback(entry); } } }); observerSeeItem.observe(el); }; /** * Listen element created. * * @param callback * @since 4.2.5.8 */ const listenElementCreated = callback => { const observerCreateItem = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.addedNodes) { mutation.addedNodes.forEach(function (node) { if (node.nodeType === 1) { callback(node); } }); } }); }); observerCreateItem.observe(document, { childList: true, subtree: true }); // End. }; /** * Listen element created. * * @param selector * @param callback * @since 4.2.7.1 */ const lpOnElementReady = (selector, callback) => { const element = document.querySelector(selector); if (element) { callback(element); return; } const observer = new MutationObserver((mutations, obs) => { const element = document.querySelector(selector); if (element) { obs.disconnect(); callback(element); } }); observer.observe(document.documentElement, { childList: true, subtree: true }); }; // Parse JSON from string with content include LP_AJAX_START. const lpAjaxParseJsonOld = data => { if (typeof data !== 'string') { return data; } const m = String.raw({ raw: data }).match(/<-- LP_AJAX_START -->(.*)<-- LP_AJAX_END -->/s); try { if (m) { data = JSON.parse(m[1].replace(/(?:\r\n|\r|\n)/g, '')); } else { data = JSON.parse(data); } } catch (e) { data = {}; } return data; }; // status 0: hide, 1: show const lpShowHideEl = (el, status = 0) => { if (!el) { return; } if (!status) { el.classList.add(lpClassName.hidden); } else { el.classList.remove(lpClassName.hidden); } }; // status 0: hide, 1: show const lpSetLoadingEl = (el, status) => { if (!el) { return; } if (!status) { el.classList.remove(lpClassName.loading); } else { el.classList.add(lpClassName.loading); } }; // Toggle collapse section const toggleCollapse = (e, target, elTriggerClassName = '', elsExclude = [], callback) => { if (!elTriggerClassName) { elTriggerClassName = lpClassName.elTriggerToggle; } // Exclude elements, which should not trigger the collapse toggle if (elsExclude && elsExclude.length > 0) { for (const elExclude of elsExclude) { if (target.closest(elExclude)) { return; } } } const elTrigger = target.closest(elTriggerClassName); if (!elTrigger) { return; } //console.log( 'elTrigger', elTrigger ); const elSectionToggle = elTrigger.closest(`${lpClassName.elSectionToggle}`); if (!elSectionToggle) { return; } elSectionToggle.classList.toggle(`${lpClassName.elCollapse}`); if ('function' === typeof callback) { callback(elSectionToggle); } }; // Get data of form const getDataOfForm = form => { const dataSend = {}; const formData = new FormData(form); for (const pair of formData.entries()) { const key = pair[0]; const value = formData.getAll(key); if (!dataSend.hasOwnProperty(key)) { // Convert value array to string. dataSend[key] = value.join(','); } } return dataSend; }; // Get field keys of form const getFieldKeysOfForm = form => { const keys = []; const elements = form.elements; for (let i = 0; i < elements.length; i++) { const name = elements[i].name; if (name && !keys.includes(name)) { keys.push(name); } } return keys; }; // Merge data handle with data form. const mergeDataWithDatForm = (elForm, dataHandle) => { const dataForm = getDataOfForm(elForm); const keys = getFieldKeysOfForm(elForm); keys.forEach(key => { if (!dataForm.hasOwnProperty(key)) { delete dataHandle[key]; } else if (dataForm[key][0] === '') { delete dataForm[key]; delete dataHandle[key]; } }); dataHandle = { ...dataHandle, ...dataForm }; return dataHandle; }; /** * Event trigger * For each list of event handlers, listen event on document. * * eventName: 'click', 'change', ... * eventHandlers = [ { selector: '.lp-button', callBack: function(){}, class: object } ] * * @param eventName * @param eventHandlers */ const eventHandlers = (eventName, eventHandlers) => { document.addEventListener(eventName, e => { const target = e.target; let args = { e, target }; eventHandlers.forEach(eventHandler => { args = { ...args, ...eventHandler }; //console.log( args ); // Check condition before call back if (eventHandler.conditionBeforeCallBack) { if (eventHandler.conditionBeforeCallBack(args) !== true) { return; } } // Special check for keydown event with checkIsEventEnter = true if (eventName === 'keydown' && eventHandler.checkIsEventEnter) { if (e.key !== 'Enter') { return; } } if (target.closest(eventHandler.selector)) { if (eventHandler.class) { // Call method of class, function callBack will understand exactly {this} is class object. eventHandler.class[eventHandler.callBack](args); } else { // For send args is objected, {this} is eventHandler object, not class object. eventHandler.callBack(args); } } }); }); }; /** * Debounce - delays function execution until after `wait` ms of inactivity. * * Each call resets the timer. Only the last call in a burst executes. * * USE CASES: * - Search inputs, form validation, window resize * - Multiple elements need independent timers * - When you need to call with different arguments * * EXAMPLES: * const debouncedSearch = debounce( (query) => fetchResults(query), 300 ); * searchInput.addEventListener('input', (e) => debouncedSearch(e.target.value)); * * const debouncedResize = debounce( recalculateLayout, 250 ); * window.addEventListener('resize', debouncedResize); * * ⚠️ Create ONCE outside event handlers, not inside. * * @param {Function} func - Function to debounce (can be anonymous) * @param {number} wait - Milliseconds to wait (default: 500) * @return {Function} Debounced wrapper function * @since 4.3.7 * @version 1.0.0 */ const debounce = (func, wait = 500) => { let timer; return args => { clearTimeout(timer); timer = setTimeout(() => func(args), wait); }; }; /** * Initialize lp-toggle-enable components. * * Finds all `.lp-toggle-enable` elements and wires up toggle behavior. * Reads initial state from `data-enabled` attribute ("true"/"false"). * Calls `data-on-toggle` callback (if provided via options) on state change. * * HTML structure: * * * @param {string} selector CSS selector for toggle elements (default: '.lp-toggle-enable') * @param {Function} onToggle Optional callback( el, isEnabled ) called on state change * @since 4.4.5 * @version 1.0.0 */ window.lpToggleEnableInit = 0; const toggleEnable = (onToggle = null) => { if (window.lpToggleEnableInit) { return; } window.lpToggleEnableInit = 1; const selector = '.lp-toggle-enable'; const updateUI = (toggle, isEnabled) => { toggle.classList.toggle('is-enabled', isEnabled); const input = toggle.querySelector('.lp-toggle-enable__input'); if (input) { input.checked = isEnabled; input.value = isEnabled ? '1' : '0'; } }; // Delegate click handling via eventHandlers. eventHandlers('click', [{ selector, callBack: args => { const { e, target } = args; const toggle = target.closest(selector); if (!toggle || toggle.classList.contains('is-disabled')) { return; } e.preventDefault(); const isEnabled = !toggle.classList.contains('is-enabled'); updateUI(toggle, isEnabled); if ('function' === typeof onToggle) { onToggle(toggle, isEnabled); } } }]); }; /** * Initialize custom fullscreen view buttons. * * Delegates clicks on `.lp-btn-full-screen-view` buttons to * `lpToggleFullscreenView`. Reads the `data-target` attribute to find the * target element. Falls back to the button's parent element when * `data-target` is not provided. * * @since 4.4.5 * @version 1.0.0 */ window.lpFullScreenViewInit = 0; const fullScreenView = () => { if (window.lpFullScreenViewInit) { return; } window.lpFullScreenViewInit = 1; let lastScrollY = 0; const lpToggleFullscreenView = (elTarget, elBtnFullScreen = null) => { const isFullscreen = elTarget.classList.contains(lpClassName.elFullScreen); if (isFullscreen) { elTarget.classList.remove(lpClassName.elFullScreen); document.documentElement.classList.remove('lp-full-screen-active'); window.scrollTo(0, lastScrollY); } else { lastScrollY = window.scrollY; elTarget.classList.add(lpClassName.elFullScreen); document.documentElement.classList.add('lp-full-screen-active'); } if (!isFullscreen) { if (!elTarget.querySelector(`.${lpClassName.elBtnFullScreenClose}`)) { const closeButton = document.createElement('button'); closeButton.type = 'button'; closeButton.className = lpClassName.elBtnFullScreenClose; closeButton.setAttribute('aria-label', 'Close'); closeButton.innerHTML = lpData.i18n.closeButtonFullScreen || 'Close ×'; closeButton.addEventListener('click', e => { e.preventDefault(); lpToggleFullscreenView(elTarget); }); elTarget.appendChild(closeButton); } } else { const closeButton = elTarget.querySelector(`.${lpClassName.elBtnFullScreenClose}`); if (closeButton) { closeButton.remove(); } } }; eventHandlers('click', [{ selector: lpClassName.elBtnFullScreen, callBack: args => { const { e, target } = args; const elBtnFullScreen = target.closest(lpClassName.elBtnFullScreen); if (!elBtnFullScreen) { console.log('No full screen button found'); return; } e.preventDefault(); let elTarget = null; const targetSelector = elBtnFullScreen.dataset.targetFullscreen; console.log(targetSelector); if (targetSelector) { elTarget = document.querySelector(targetSelector); } if (!elTarget) { console.log('No target element found'); return; } lpToggleFullscreenView(elTarget, elBtnFullScreen); } }]); }; /***/ }, /***/ "react" /*!************************!*\ !*** external "React" ***! \************************/ (module) { "use strict"; module.exports = window["React"]; /***/ }, /***/ "@wordpress/block-editor" /*!*************************************!*\ !*** external ["wp","blockEditor"] ***! \*************************************/ (module) { "use strict"; module.exports = window["wp"]["blockEditor"]; /***/ }, /***/ "@wordpress/blocks" /*!********************************!*\ !*** external ["wp","blocks"] ***! \********************************/ (module) { "use strict"; module.exports = window["wp"]["blocks"]; /***/ }, /***/ "@wordpress/components" /*!************************************!*\ !*** external ["wp","components"] ***! \************************************/ (module) { "use strict"; module.exports = window["wp"]["components"]; /***/ }, /***/ "@wordpress/data" /*!******************************!*\ !*** external ["wp","data"] ***! \******************************/ (module) { "use strict"; module.exports = window["wp"]["data"]; /***/ }, /***/ "@wordpress/element" /*!*********************************!*\ !*** external ["wp","element"] ***! \*********************************/ (module) { "use strict"; module.exports = window["wp"]["element"]; /***/ }, /***/ "@wordpress/i18n" /*!******************************!*\ !*** external ["wp","i18n"] ***! \******************************/ (module) { "use strict"; module.exports = window["wp"]["i18n"]; /***/ }, /***/ "./node_modules/classnames/index.js" /*!******************************************!*\ !*** ./node_modules/classnames/index.js ***! \******************************************/ (module, exports) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! Copyright (c) 2018 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ /* global define */ (function () { 'use strict'; var hasOwn = {}.hasOwnProperty; function classNames () { var classes = ''; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; if (arg) { classes = appendClass(classes, parseValue(arg)); } } return classes; } function parseValue (arg) { if (typeof arg === 'string' || typeof arg === 'number') { return arg; } if (typeof arg !== 'object') { return ''; } if (Array.isArray(arg)) { return classNames.apply(null, arg); } if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) { return arg.toString(); } var classes = ''; for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { classes = appendClass(classes, key); } } return classes; } function appendClass (value, newClass) { if (!newClass) { return value; } if (value) { return value + ' ' + newClass; } return value + newClass; } if ( true && module.exports) { classNames.default = classNames; module.exports = classNames; } else if (true) { // register as 'classnames', consistent with npm package name !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { return classNames; }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else // removed by dead control flow {} }()); /***/ }, /***/ "./assets/src/apps/js/blocks/courses/course-item-template/block.json" /*!***************************************************************************!*\ !*** ./assets/src/apps/js/blocks/courses/course-item-template/block.json ***! \***************************************************************************/ (module) { "use strict"; module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"learnpress/course-item-template","title":"Course Item Template","category":"","description":"Course Item Template","textdomain":"learnpress","keywords":["course item","learnpress"],"usesContext":["lpCourseQuery"],"supports":{"align":true},"attributes":{"layout":{"type":"string","default":"list"},"columns":{"type":"number","default":3}},"ancestor":["learnpress/list-courses"]}'); /***/ } /******/ }); /************************************************************************/ /******/ // The module cache /******/ const __webpack_module_cache__ = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ const cachedModule = __webpack_module_cache__[moduleId]; /******/ if (cachedModule !== undefined) { /******/ return cachedModule.exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ const module = __webpack_module_cache__[moduleId] = { /******/ // no module.id needed /******/ // no module.loaded needed /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ if (!(moduleId in __webpack_modules__)) { /******/ delete __webpack_module_cache__[moduleId]; /******/ const e = new Error("Cannot find module '" + moduleId + "'"); /******/ e.code = 'MODULE_NOT_FOUND'; /******/ throw e; /******/ } /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /************************************************************************/ /******/ /* webpack/runtime/compat get default export */ /******/ (() => { /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = (module) => { /******/ const getter = module && module.__esModule ? /******/ () => (module['default']) : /******/ () => (module); /******/ __webpack_require__.d(getter, { a: getter }); /******/ return getter; /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/define property getters */ /******/ (() => { /******/ // define getter/value functions for harmony exports /******/ __webpack_require__.d = (exports, definition) => { /******/ if(Array.isArray(definition)) { /******/ var i = 0; /******/ while(i < definition.length) { /******/ var key = definition[i++]; /******/ var binding = definition[i++]; /******/ if(!__webpack_require__.o(exports, key)) { /******/ if(binding === 0) { /******/ Object.defineProperty(exports, key, { enumerable: true, value: definition[i++] }); /******/ } else { /******/ Object.defineProperty(exports, key, { enumerable: true, get: binding }); /******/ } /******/ } else if(binding === 0) { i++; } /******/ } /******/ } else { /******/ for(var key in definition) { /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); /******/ } /******/ } /******/ } /******/ }; /******/ })(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ /******/ (() => { /******/ __webpack_require__.o = (obj, prop) => (Object.hasOwn(obj, prop)) /******/ })(); /******/ /******/ /* webpack/runtime/make namespace object */ /******/ (() => { /******/ // define __esModule on exports /******/ __webpack_require__.r = (exports) => { /******/ if(Symbol.toStringTag) { /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); /******/ } /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ })(); /******/ /************************************************************************/ let __webpack_exports__ = {}; // This entry needs to be wrapped in an IIFE because it needs to be in strict mode. (() => { "use strict"; /*!*************************************************************************!*\ !*** ./assets/src/apps/js/blocks/courses/course-item-template/index.js ***! \*************************************************************************/ __webpack_require__.r(__webpack_exports__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./edit */ "./assets/src/apps/js/blocks/courses/course-item-template/edit.js"); /* harmony import */ var _save__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./save */ "./assets/src/apps/js/blocks/courses/course-item-template/save.js"); /* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./assets/src/apps/js/blocks/courses/course-item-template/block.json"); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks"); /* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_4__); /** * Register block single course property. */ (0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_4__.registerBlockType)('learnpress/course-item-template', { ..._block_json__WEBPACK_IMPORTED_MODULE_3__, icon: { src: (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", focusable: "false" }, (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("path", { fillRule: "evenodd", d: "M5 5.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 9.232A2 2 0 013 7.5V6a2 2 0 012-2h14a2 2 0 012 2v1.5a2 2 0 01-1 1.732V18a2 2 0 01-2 2H6a2 2 0 01-2-2V9.232zm1.5.268V18a.5.5 0 00.5.5h12a.5.5 0 00.5-.5V9.5h-13z", clipRule: "evenodd" })) }, edit: _edit__WEBPACK_IMPORTED_MODULE_1__["default"], save: _save__WEBPACK_IMPORTED_MODULE_2__["default"] }); })(); /******/ })() ; //# sourceMappingURL=course-item-template.js.map ```