| @@ -11,8 +11,9 @@ | ||
| 11 | 11 | __webpack_require__.r(__webpack_exports__); |
| 12 | 12 | /* harmony export */ __webpack_require__.d(__webpack_exports__, { |
| 13 | 13 | /* harmony export */ debounce: () => (/* binding */ debounce), |
| 14 | 14 | /* harmony export */ eventHandlers: () => (/* binding */ eventHandlers), |
| 15 | +/* harmony export */ fullScreenView: () => (/* binding */ fullScreenView), | |
| 15 | 16 | /* harmony export */ getDataOfForm: () => (/* binding */ getDataOfForm), |
| 16 | 17 | /* harmony export */ getFieldKeysOfForm: () => (/* binding */ getFieldKeysOfForm), |
| 17 | 18 | /* harmony export */ listenElementCreated: () => (/* binding */ listenElementCreated), |
| 18 | 19 | /* harmony export */ listenElementViewed: () => (/* binding */ listenElementViewed), |
| @@ -24,9 +25,10 @@ | ||
| 24 | 25 | /* harmony export */ lpOnElementReady: () => (/* binding */ lpOnElementReady), |
| 25 | 26 | /* harmony export */ lpSetLoadingEl: () => (/* binding */ lpSetLoadingEl), |
| 26 | 27 | /* harmony export */ lpShowHideEl: () => (/* binding */ lpShowHideEl), |
| 27 | 28 | /* harmony export */ mergeDataWithDatForm: () => (/* binding */ mergeDataWithDatForm), |
| 28 | -/* harmony export */ toggleCollapse: () => (/* binding */ toggleCollapse) | |
| 29 | +/* harmony export */ toggleCollapse: () => (/* binding */ toggleCollapse), | |
| 30 | +/* harmony export */ toggleEnable: () => (/* binding */ toggleEnable) | |
| 29 | 31 | /* harmony export */ }); |
| 30 | 32 | /** |
| 31 | 33 | * Utils functions |
| 32 | 34 | * |
| @@ -33,9 +35,9 @@ | ||
| 33 | 35 | * @param url |
| 34 | 36 | * @param data |
| 35 | 37 | * @param functions |
| 36 | 38 | * @since 4.2.5.1 |
| 37 | - * @version 1.0.6 | |
| 39 | + * @version 1.0.7 | |
| 38 | 40 | */ |
| 39 | 41 | const lpClassName = { |
| 40 | 42 | hidden: 'lp-hidden', |
| 41 | 43 | loading: 'loading', |
| @@ -40,9 +42,12 @@ | ||
| 40 | 42 | hidden: 'lp-hidden', |
| 41 | 43 | loading: 'loading', |
| 42 | 44 | elCollapse: 'lp-collapse', |
| 43 | 45 | elSectionToggle: '.lp-section-toggle', |
| 44 | - elTriggerToggle: '.lp-trigger-toggle' | |
| 46 | + elTriggerToggle: '.lp-trigger-toggle', | |
| 47 | + elBtnFullScreen: '.lp-btn-full-screen-view', | |
| 48 | + elFullScreen: 'lp-full-screen-view', | |
| 49 | + elBtnFullScreenClose: 'lp-full-screen-view__close' | |
| 45 | 50 | }; |
| 46 | 51 | const lpFetchAPI = (url, data = {}, functions = {}) => { |
| 47 | 52 | if ('function' === typeof functions.before) { |
| 48 | 53 | functions.before(); |
| @@ -358,8 +363,141 @@ | ||
| 358 | 363 | return args => { |
| 359 | 364 | clearTimeout(timer); |
| 360 | 365 | timer = setTimeout(() => func(args), wait); |
| 361 | 366 | }; |
| 367 | +}; | |
| 368 | + | |
| 369 | +/** | |
| 370 | + * Initialize lp-toggle-enable components. | |
| 371 | + * | |
| 372 | + * Finds all `.lp-toggle-enable` elements and wires up toggle behavior. | |
| 373 | + * Reads initial state from `data-enabled` attribute ("true"/"false"). | |
| 374 | + * Calls `data-on-toggle` callback (if provided via options) on state change. | |
| 375 | + * | |
| 376 | + * HTML structure: | |
| 377 | + * <label class="lp-toggle-enable" data-enabled="true"> | |
| 378 | + * <input type="checkbox" class="lp-toggle-enable__input" /> | |
| 379 | + * <span class="lp-toggle-enable__track"></span> | |
| 380 | + * </label> | |
| 381 | + * | |
| 382 | + * @param {string} selector CSS selector for toggle elements (default: '.lp-toggle-enable') | |
| 383 | + * @param {Function} onToggle Optional callback( el, isEnabled ) called on state change | |
| 384 | + * @since 4.4.5 | |
| 385 | + * @version 1.0.0 | |
| 386 | + */ | |
| 387 | +window.lpToggleEnableInit = 0; | |
| 388 | +const toggleEnable = (onToggle = null) => { | |
| 389 | + if (window.lpToggleEnableInit) { | |
| 390 | + return; | |
| 391 | + } | |
| 392 | + window.lpToggleEnableInit = 1; | |
| 393 | + const selector = '.lp-toggle-enable'; | |
| 394 | + const updateUI = (toggle, isEnabled) => { | |
| 395 | + toggle.classList.toggle('is-enabled', isEnabled); | |
| 396 | + const input = toggle.querySelector('.lp-toggle-enable__input'); | |
| 397 | + if (input) { | |
| 398 | + input.checked = isEnabled; | |
| 399 | + input.value = isEnabled ? '1' : '0'; | |
| 400 | + } | |
| 401 | + }; | |
| 402 | + | |
| 403 | + // Delegate click handling via eventHandlers. | |
| 404 | + eventHandlers('click', [{ | |
| 405 | + selector, | |
| 406 | + callBack: args => { | |
| 407 | + const { | |
| 408 | + e, | |
| 409 | + target | |
| 410 | + } = args; | |
| 411 | + const toggle = target.closest(selector); | |
| 412 | + if (!toggle || toggle.classList.contains('is-disabled')) { | |
| 413 | + return; | |
| 414 | + } | |
| 415 | + e.preventDefault(); | |
| 416 | + const isEnabled = !toggle.classList.contains('is-enabled'); | |
| 417 | + updateUI(toggle, isEnabled); | |
| 418 | + if ('function' === typeof onToggle) { | |
| 419 | + onToggle(toggle, isEnabled); | |
| 420 | + } | |
| 421 | + } | |
| 422 | + }]); | |
| 423 | +}; | |
| 424 | + | |
| 425 | +/** | |
| 426 | + * Initialize custom fullscreen view buttons. | |
| 427 | + * | |
| 428 | + * Delegates clicks on `.lp-btn-full-screen-view` buttons to | |
| 429 | + * `lpToggleFullscreenView`. Reads the `data-target` attribute to find the | |
| 430 | + * target element. Falls back to the button's parent element when | |
| 431 | + * `data-target` is not provided. | |
| 432 | + * | |
| 433 | + * @since 4.4.5 | |
| 434 | + * @version 1.0.0 | |
| 435 | + */ | |
| 436 | +window.lpFullScreenViewInit = 0; | |
| 437 | +const fullScreenView = () => { | |
| 438 | + if (window.lpFullScreenViewInit) { | |
| 439 | + return; | |
| 440 | + } | |
| 441 | + window.lpFullScreenViewInit = 1; | |
| 442 | + let lastScrollY = 0; | |
| 443 | + const lpToggleFullscreenView = (elTarget, elBtnFullScreen = null) => { | |
| 444 | + const isFullscreen = elTarget.classList.contains(lpClassName.elFullScreen); | |
| 445 | + if (isFullscreen) { | |
| 446 | + elTarget.classList.remove(lpClassName.elFullScreen); | |
| 447 | + document.documentElement.classList.remove('lp-full-screen-active'); | |
| 448 | + window.scrollTo(0, lastScrollY); | |
| 449 | + } else { | |
| 450 | + lastScrollY = window.scrollY; | |
| 451 | + elTarget.classList.add(lpClassName.elFullScreen); | |
| 452 | + document.documentElement.classList.add('lp-full-screen-active'); | |
| 453 | + } | |
| 454 | + if (!isFullscreen) { | |
| 455 | + if (!elTarget.querySelector(`.${lpClassName.elBtnFullScreenClose}`)) { | |
| 456 | + const closeButton = document.createElement('button'); | |
| 457 | + closeButton.type = 'button'; | |
| 458 | + closeButton.className = lpClassName.elBtnFullScreenClose; | |
| 459 | + closeButton.setAttribute('aria-label', 'Close'); | |
| 460 | + closeButton.innerHTML = lpData.i18n.closeButtonFullScreen || 'Close ×'; | |
| 461 | + closeButton.addEventListener('click', e => { | |
| 462 | + e.preventDefault(); | |
| 463 | + lpToggleFullscreenView(elTarget); | |
| 464 | + }); | |
| 465 | + elTarget.appendChild(closeButton); | |
| 466 | + } | |
| 467 | + } else { | |
| 468 | + const closeButton = elTarget.querySelector(`.${lpClassName.elBtnFullScreenClose}`); | |
| 469 | + if (closeButton) { | |
| 470 | + closeButton.remove(); | |
| 471 | + } | |
| 472 | + } | |
| 473 | + }; | |
| 474 | + eventHandlers('click', [{ | |
| 475 | + selector: lpClassName.elBtnFullScreen, | |
| 476 | + callBack: args => { | |
| 477 | + const { | |
| 478 | + e, | |
| 479 | + target | |
| 480 | + } = args; | |
| 481 | + const elBtnFullScreen = target.closest(lpClassName.elBtnFullScreen); | |
| 482 | + if (!elBtnFullScreen) { | |
| 483 | + console.log('No full screen button found'); | |
| 484 | + return; | |
| 485 | + } | |
| 486 | + e.preventDefault(); | |
| 487 | + let elTarget = null; | |
| 488 | + const targetSelector = elBtnFullScreen.dataset.targetFullscreen; | |
| 489 | + console.log(targetSelector); | |
| 490 | + if (targetSelector) { | |
| 491 | + elTarget = document.querySelector(targetSelector); | |
| 492 | + } | |
| 493 | + if (!elTarget) { | |
| 494 | + console.log('No target element found'); | |
| 495 | + return; | |
| 496 | + } | |
| 497 | + lpToggleFullscreenView(elTarget, elBtnFullScreen); | |
| 498 | + } | |
| 499 | + }]); | |
| 362 | 500 | }; |
| 363 | 501 | |
| 364 | 502 | /***/ }, |
| 365 | 503 | |