* Copyright (C) 2024 Frédéric France * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ // Load Dolibarr environment require '../../../../main.inc.php'; /** * @var DoliDB $db * @var HookManager $hookmanager * @var Translate $langs * @var User $user */ // Protection if external user if ($user->socid > 0) { accessforbidden(); } // Includes require_once DOL_DOCUMENT_ROOT . '/admin/tools/ui/class/documentation.class.php'; // Load documentation translations $langs->load('uxdocumentation'); // $documentation = new Documentation($db); $group = 'ExperimentalUx'; $experimentName = 'ExperimentalUxInputAjaxFeedback'; $experimentAssetsPath = $documentation->baseUrl . '/experimental/experiments/input-feedback/assets/'; $js = [ '/includes/ace/src/ace.js', '/includes/ace/src/ext-statusbar.js', '/includes/ace/src/ext-language_tools.js', ]; $css = [ ]; // Output html head + body - Param is Title $documentation->docHeader($langs->trans($experimentName, $group), $js, $css); // Set view for menu and breadcrumb $documentation->view = [$group, $experimentName]; // Output sidebar $documentation->showSidebar(); ?>
showBreadCrumb(); ?>

trans($experimentName); ?>

showSummary(); ?>

Input Feedback

This feature provides visual feedback on input fields based on their processing state.

How It Works

  • Processing: The .processing-feedback class is applied while an action is being processed.
  • Success: Once successfully completed, the .success-feedback class is applied.
  • Failure: In case of an error, the .fail-feedback class is applied.

Live Demo

', 'document.getElementById(\'btn-process-success\').addEventListener(\'click\', function () { let input = document.getElementById(\'test-input-01\'); input.classList.add(\'processing-feedback\'); setTimeout(() => { input.classList.remove(\'processing-feedback\'); input.classList.add(\'success-feedback\'); setTimeout(() => { input.classList.remove(\'success-feedback\'); }, 1000); }, 1500); }); document.getElementById(\'btn-process-fail\').addEventListener(\'click\', function () { let input = document.getElementById(\'test-input-01\'); input.classList.add(\'processing-feedback\'); setTimeout(() => { input.classList.remove(\'processing-feedback\'); input.classList.add(\'fail-feedback\'); setTimeout(() => { input.classList.remove(\'fail-feedback\'); }, 1000); }, 1500); });', '', ); $documentation->showCode($lines); ?>
docFooter(); ?>