Improve and simplify conventions and functions for showing and hiding…

… form fields (CFM-276) (#119)
COmanage · Sep 10, 2023 · 2d0577a · 2d0577a
1 parent 9ee65f6
commit 2d0577a
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 82 deletions.
diff --git a/app/plugins/CoreAssigner/templates/FormatAssigners/fields.inc b/app/plugins/CoreAssigner/templates/FormatAssigners/fields.inc
@@ -28,22 +28,22 @@
 <script type="text/javascript">
   // JS specific to these fields
 
-  function fields_update_gadgets() {
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
-
     var mode = document.getElementById('collision-mode').value;
 
     if(mode == '<?= \CoreAssigner\Lib\Enum\CollisionModeEnum::Sequential ?>') {
-      $("#maximum").closest('li').hide('fade');
+      hideFields(['maximum'], isPageLoad);
     } else {
-      $("#maximum").closest('li').show('fade');
+      showFields(['maximum'], isPageLoad);
     }
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+
 <?php
 // This view does currently not support read-only, and add is not used
 if($vv_action == 'edit') {
@@ -52,7 +52,7 @@ if($vv_action == 'edit') {
   print $this->Field->control(
     fieldName: 'collision_mode',
     options: [
-      'onChange' => 'javascript:fields_update_gadgets();'
+      'onChange' => 'updateGadgets()'
     ]
   );
 

diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -284,7 +284,7 @@ public function endControlSet(): string {
    */
 
   protected function endLine(): string {
-    return "</li>\n";
+    return "</div></li>\n";
   }
 
   /**
@@ -556,7 +556,7 @@ protected function startLine(string $class=null): string {
       $ret .= ' class="' . $class . '"';
     }
 
-    $ret .= '>';
+    $ret .= '><div class="field">';
 
     return $ret;
   }
@@ -571,12 +571,14 @@ protected function startLine(string $class=null): string {
 
   public function submit(string $label): string {
     return '<li class="fields-submit">
-      <div class="field-name">
-        <span class="required">* ' . __d('field', 'required') . '</span>
-      </div>
-      <div class="field-info">
-        ' . $this->Form->submit($label) . '
-      </div>
+      <div class="field">
+        <div class="field-name">
+          <span class="required">* ' . __d('field', 'required') . '</span>
+        </div>
+        <div class="field-info">
+          ' . $this->Form->submit($label) . '
+        </div>
+      </div>  
     </li>';
   }
 }
diff --git a/app/templates/IdentifierAssignments/fields.inc b/app/templates/IdentifierAssignments/fields.inc
@@ -28,40 +28,43 @@
 <script type="text/javascript">
   // JS specific to these fields
 
-  function fields_update_gadgets() {
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
-
     var context = document.getElementById('context').value;
 
-    if(context == '<?= \App\Lib\Enum\IdentifierAssignmentContextEnum::Person ?>') {
-      $("#group-id").closest('li').hide('fade');
-// Group ID restriction is not yet implemented (CFM-57)
-//      $("#group-id").closest('li').show('fade');
-      $("#email-address-type-id").closest('li').show('fade');
+    if(context == '') {
+      // Collapse all gadgets when context is empty.
+      hideFields(['email-address-type-id','group-id','login'], isPageLoad);
+    } else if(context == '<?= \App\Lib\Enum\IdentifierAssignmentContextEnum::Person ?>') {
+      // Show/Hide for Person context
+// XXX Group ID restriction is not yet implemented (CFM-57)
+// TODO: When it is, add 'group-id' to the showFields() array.
+      showFields(['email-address-type-id'], isPageLoad);
+      hideFields(['group-id'], isPageLoad);
 
       var identifierType = document.getElementById('identifier-type-id').value;
-
       if(!identifierType) {
-        $("#login").closest('li').hide('fade');
+        hideFields(['login'], isPageLoad);
       } else {
-        $("#login").closest('li').show('fade');
+        showFields(['login'], isPageLoad);
       }
     } else {
-      $("#group-id").closest('li').hide('fade');
-      $("#email-address-type-id").closest('li').hide('fade');
-      $("#login").closest('li').hide('fade');
+      // Show/Hide for Group context
+      showFields(['group-id'], isPageLoad);
+      hideFields(['email-address-type-id','login'], isPageLoad);
     }
   }
 
-  function reset_type(id) {
+  function resetType(id) {
     document.getElementById(id).value = "";
-    fields_update_gadgets();
+    updateGadgets();
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+
 <?php
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
@@ -74,27 +77,30 @@ if($vv_action == 'add' || $vv_action == 'edit') {
   print $this->Field->control(
     fieldName: 'context',
     options: [
-      'onChange' => 'javascript:fields_update_gadgets();'
+      'onChange' => 'updateGadgets()'
     ]
   );
 
-  print $this->Field->control('group_id');
-
   print $this->Field->control(
     fieldName: 'identifier_type_id',
     options: [
-      'onChange' => 'javascript:reset_type("email-address-type-id")'
+      'onChange' => 'resetType("email-address-type-id")'
     ]
   );
 
-  print $this->Field->control('login');
+  print $this->Field->control(
+    fieldName: 'login',
+    cssClass: 'subfield'
+  );
 
   print $this->Field->control(
     fieldName: 'email_address_type_id',
     options: [
-      'onChange' => 'javascript:reset_type("identifier-type-id")'
+      'onChange' => 'resetType("identifier-type-id")'
     ]
   );
 
+  print $this->Field->control('group_id');
+
   print $this->Field->control('ordr');
 }
diff --git a/app/templates/ProvisioningTargets/fields.inc b/app/templates/ProvisioningTargets/fields.inc
@@ -27,35 +27,45 @@
 ?>
 <script type="text/javascript">
   // JS specific to these fields
-
-  function fields_update_gadgets() {
+  
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
+    var status = document.getElementById('status').value;
 
-    var attr = document.getElementById('status').value;
-
-    if(attr == "<?= \App\Lib\Enum\ProvisionerModeEnum::Queue ?>"
-       || attr == "<?= \App\Lib\Enum\ProvisionerModeEnum::QueueOnError ?>") {
+    if(status == "<?= \App\Lib\Enum\ProvisionerModeEnum::Queue ?>"
+       || status == "<?= \App\Lib\Enum\ProvisionerModeEnum::QueueOnError ?>") {
 alert("Queue modes not yet implemented"); // XXX CFM-26
-      $("#retry-interval").closest('li').show('fade');
+      showFields(['retry-interval'], isPageLoad);
     } else {
-      $("#retry-interval").closest('li').hide('fade');
+      hideFields(['retry-interval'], isPageLoad);
     }
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+
 <?php
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
   print $this->Field->control('description');
 
-  print $this->Field->control('status', 
-                              ['onChange' => 'fields_update_gadgets();',
-                               'default'  => \App\Lib\Enum\ProvisionerModeEnum::QueueOnError]);
+  print $this->Field->control(
+    fieldName: 'status', 
+    options: [
+      'onChange' => 'updateGadgets()',
+      'default'  => \App\Lib\Enum\ProvisionerModeEnum::QueueOnError
+    ]
+  );
 
-  print $this->Field->control('retry_interval', ['default' => 900]);
+  print $this->Field->control(
+    fieldName: 'retry_interval', 
+    options: [
+      'default' => 900
+    ],
+    cssClass: 'subfield'
+  );
 
   print $this->Field->control('plugin');
 

diff --git a/app/templates/Types/fields.inc b/app/templates/Types/fields.inc
@@ -28,28 +28,33 @@
 <script type="text/javascript">
   // JS specific to these fields
 
-  function fields_update_gadgets() {
+  function updateGadgets(isPageLoad) {
     // Hide or show gadgets according to current state
-
     var attr = document.getElementById('attribute').value;
-
+
+    // Handle page interaction
     if(attr == 'PersonRoles.affiliation_type') {
-      $("#edupersonaffiliation").closest('li').show('fade');
+      showFields(['edupersonaffiliation'], isPageLoad);
     } else {
-      $("#edupersonaffiliation").closest('li').hide('fade');
+      hideFields(['edupersonaffiliation'], isPageLoad);
     }
   }
 
-  function js_local_onload() {
-    fields_update_gadgets();
+  function jsLocalOnLoad() {
+    updateGadgets(true);
   }
 </script>
+
 <?php
 // This view does not support read-only
 if($vv_action == 'add' || $vv_action == 'edit') {
-  print $this->Field->control('attribute', 
-                              ['onChange' => 'fields_update_gadgets();',
-                               'readonly' => $vv_action == 'edit']);
+  print $this->Field->control(
+    fieldName: 'attribute', 
+    options: [
+      'onChange' => 'updateGadgets()', 
+      'readonly' => $vv_action == 'edit'
+    ]
+  );
 
   print $this->Field->control('display_name');
 

diff --git a/app/templates/element/dialog.php b/app/templates/element/dialog.php
@@ -26,7 +26,7 @@
    *
    * This generic modal dialog stub is used for confirmations, e.g. when deleting a record.
    * The text of the box is overridden with JavaScript, and the confirm button is intended to
-   * click a CakePHP postLink or postButton in the DOM. Use js_confirm_generic() to call it.
+   * click a CakePHP postLink or postButton in the DOM. Use jsConfirmGeneric() to call it.
    */
 ?>
 

diff --git a/app/templates/element/menuAction.php b/app/templates/element/menuAction.php
@@ -106,7 +106,7 @@ class="<?= $actionsMenuClass; ?>">
             $cancelButtonText = !empty($action['confirm']['dg_cancel_btn']) ? $action['confirm']['dg_cancel_btn'] : __d('operation','cancel');
             $replacements = !empty($action['confirm']['dg_body_txt_replacements']) ? $action['confirm']['dg_body_txt_replacements'] : '';
 
-            $dg_onclick = 'javascript:js_confirm_generic(\''
+            $dg_onclick = 'javascript:jsConfirmGeneric(\''
             . $dialogBodyText . '\',\''          // dialog body text
             . $actionUrl . '\',\''               // URL to redirect to on confirm
             . $actionUid . '\',\''               // ID of postButton element to click on confirm if not empty

diff --git a/app/templates/layout/default.php b/app/templates/layout/default.php
@@ -90,7 +90,7 @@
       $bodyClasses .= ' logged-out';
     }
   ?>
-  <body class="<?= $bodyClasses ?>" onload="js_onload_call_hooks()">
+  <body class="<?= $bodyClasses ?>" onload="jsOnLoadCallHooks()">
     <div id="skip-to-content-box">
       <a href="#content-start" id="skip-to-content" class="visually-hidden-focusable nospin"><?= __d('operation', 'skip_to_content') ?></a>
     </div>

diff --git a/app/templates/layout/iframe.php b/app/templates/layout/iframe.php
@@ -90,7 +90,7 @@
       $bodyClasses .= ' logged-out';
     }
   ?>
-  <body class="<?= $bodyClasses ?>" onload="js_onload_call_hooks()">
+  <body class="<?= $bodyClasses ?>" onload="jsOnLoadCallHooks()">
     <!-- Iframe layout -->
     <div id="comanage-iframe-wrapper">
       <main id="main">

diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1130,7 +1130,7 @@ ul.data-list li {
   background-color: var(--cmg-color-bg-003);
 }
 ul.data-list li:nth-child(2n) {
-  background-color: var(--cmg-color-bg-009); /* note that this is slightly lighter than the .form-list zebra */
+  background-color: var(--cmg-color-bg-009);
 }
 ul.data-table li {
   background-color: unset;
@@ -1152,25 +1152,34 @@ above. ***/
 ul.form-list {
   clear: both;
   padding: 0;
-  border-top: 1px solid var(--cmg-color-bg-005);
 }
 .cm-time-picker-vals ul li,
 ul.form-list li {
-  background-color: var(--cmg-color-bg-001);
+  background-color: var(--cmg-color-body-bg);
   border-left: 1px solid var(--cmg-color-bg-005);
-  border-bottom: 1px solid var(--cmg-color-bg-005);
+  border-top: 1px solid var(--cmg-color-bg-005);
   border-right: 1px solid var(--cmg-color-bg-005);
   margin: 0;
-  padding: 0.75em;
+  padding: 0;
   list-style: none;
 }
-.cm-time-picker-vals ul li:nth-child(even),
-ul.form-list li:nth-child(even) {
+ul.form-list li:focus-within {
+  background-color: var(--cmg-color-bg-001);
+}
+ul.form-list li.fields-submit:focus-within {
   background-color: var(--cmg-color-body-bg);
 }
+ul.form-list li.subfield {
+  border-top: none;
+}
+ul.form-list li .field {
+  margin: 0;
+  padding: 0.75em;
+}
 ul.form-list li.fields-submit {
   background-color: unset;
-  border: none;
+  border-left: none;
+  border-right: none;
 }
 ul.form-list .field-name {
   display: block;
@@ -1362,6 +1371,9 @@ ul.form-list .cm-time-picker-vals li {
   display: block;
   padding: 4px 0 0 0;
 }
+.cm-time-picker-vals ul li:nth-child(even) {
+  background-color: var(--cmg-color-body-bg);
+}
 .cm-time-picker-vals button {
   background-color: transparent;
   border: none;
@@ -1392,6 +1404,7 @@ ul.form-list .cm-time-picker-vals li {
   position: absolute;
   border: none;
   right: 2.5em;
+  padding-top: 1em;
   color: var(--cmg-color-txt-soft);
   background-color: unset;
 }
@@ -1827,6 +1840,11 @@ html.dark-mode .btn-default:active {
   background-color: var(--cmg-color-body-bg);
   border-color: var(--cmg-color-bg-006);
 }
+.collapsing {
+  transition-property: height, visibility;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-out;
+}
 /* FOOTER */
 footer {
   text-align: center;