UIUX : Giff UX Doc : add experiment ux ajax input feedback (#33661)

* New experiment Tooltip freeze

* fix tooltip ception

* clean

* New giff experimental input feedback

* New giff experimental input feedback

---------

Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>

htdocs/admin/tools/ui/class/documentation.class.php

@@ -230,6 +230,13 @@ class Documentation
 					'submenu' => array(),
 					'summary' => array(),
 				),
+
+				'ExperimentalUxInputAjaxFeedback' => array(
+					'url' => dol_buildpath($this->baseUrl.'/experimental/experiments/input-feedback/index.php', 1),
+					'icon' => 'fas fa-flask',
+					'submenu' => array(),
+					'summary' => array(),
+				),
 			)
 		);
 

htdocs/admin/tools/ui/experimental/experiments/freeze-tooltip/index.php

@@ -42,7 +42,8 @@ $langs->load('uxdocumentation');
 $documentation = new Documentation($db);
 $group = 'ExperimentalUx';
 
-$experimentAssetsPath = 'admin/tools/ui/experimental/experiments/freeze-tooltip/assets/';
+$experimentAssetsPath = $documentation->baseUrl . '/experimental/experiments/freeze-tooltip/assets/';
+
 $js = [
 	$experimentAssetsPath . 'freeze-by-alt-keypress.js'
 ];

htdocs/admin/tools/ui/experimental/experiments/input-feedback/assets/feddback-01.css

@@ -0,0 +1,48 @@
+.processing-feedback {
+	background-size: 30px 30px !important;
+	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent) !important;
+	animation: input-background-loader 0.5s linear infinite;
+
+}
+
+@keyframes input-background-loader {
+	from {
+		background-position: 0 0;
+	}
+	to {
+		background-position: 60px 30px;
+	}
+}
+
+
+.success-feedback{
+	animation: 1s ease-out success-feedback-animation;
+}
+
+@-webkit-keyframes success-feedback-animation {
+	0% {
+		outline: 3px solid  rgba(255, 255, 255, 0);
+	}
+	20% {
+		outline: 3px solid  #8cd55b;
+	}
+	100% {
+		outline: 3px solid  rgba(255, 255, 255, 0);
+	}
+}
+
+.fail-feedback {
+	animation: 1s ease-out fail-feedback-animation;
+}
+
+@-webkit-keyframes fail-feedback-animation {
+	0% {
+		outline: 3px solid rgba(255, 255, 255, 0);
+	}
+	20% {
+		outline: 3px solid #d55b5b;
+	}
+	100% {
+		outline: 3px solid rgba(255, 255, 255, 0);
+	}
+}

htdocs/admin/tools/ui/experimental/experiments/input-feedback/index.php

@@ -0,0 +1,166 @@
+<?php
+/*
+ * Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
+ * Copyright (C) 2024       Frédéric France         <frederic.france@free.fr>
+ *
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+// 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 = [
+	$experimentAssetsPath . 'feddback-01.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(); ?>
+
+<div class="doc-wrapper">
+
+	<?php $documentation->showBreadCrumb(); ?>
+
+	<div class="doc-content-wrapper">
+
+		<h1 class="documentation-title"><?php echo $langs->trans($experimentName); ?></h1>
+
+		<?php $documentation->showSummary(); ?>
+
+		<div class="documentation-section" >
+			<h2 class="documentation-title" >Input Feedback (Experimental)</h2>
+
+			<p>
+				This experimental feature provides visual feedback on input fields based on their processing state.
+				Currently, it is only available in this documentation and may be integrated into the <code>develop</code> branch of Dolibarr in the future.
+			</p>
+
+			<h3>How It Works</h3>
+			<ul>
+				<li><strong>Processing:</strong> The <code>.processing-feedback</code> class is applied while an action is being processed.</li>
+				<li><strong>Success:</strong> Once successfully completed, the <code>.success-feedback</code> class is applied.</li>
+				<li><strong>Failure:</strong> In case of an error, the <code>.fail-feedback</code> class is applied.</li>
+			</ul>
+
+			<h3>Live Demo</h3>
+
+			<div class="documentation-example">
+				<input type="text" id="test-input-01" placeholder="Type something..." />
+				<button id="btn-process-fail" type="button" class="button" >Processing will fail</button>
+				<button id="btn-process-success" type="button" class="button" >Processing will success</button>
+				<script>
+					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);
+					});
+				</script>
+			</div>
+			<?php
+			$lines = array(
+			'<script>',
+			'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);
+});',
+			'</script>',
+			);
+			echo $documentation->showCode($lines, 'html'); ?>
+		</div>
+
+
+	</div>
+
+</div>
+<?php
+// Output close body + html
+$documentation->docFooter();
+?>

htdocs/langs/en_US/uxdocumentation.lang

@@ -160,4 +160,5 @@ ExperimentalUxContributionEnd = This structure ensures a clear and modular organ
 
 # Start experiements menu title
 ExperimentalUxFreezeTooltip = Tooltip freeze
+ExperimentalUxInputAjaxFeedback = Input feedback
 # End experiements manu tyile