Provide "click outside" behavior for Time Picker (CFM-107)

COmanage · Mar 31, 2022 · 7e472d8 · 7e472d8
1 parent 487e769
commit 7e472d8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/app/src/View/Helper/FieldHelper.php b/app/src/View/Helper/FieldHelper.php
@@ -141,7 +141,26 @@ public function control(string $fieldName,
             components: {
               CmDateTimePicker
             }
-          }).mount("#' . $pickerId . '-container");
+          });
+          
+          // Add custom global directives available to all child components.
+          // "clickout" allows us to pass a function to a click outside behavior which
+          // is registered and destroyed as the component is mounted and unmounted.
+          app.directive("clickout", {
+            mounted(el, binding, vnode) {
+              el.clickOutEvent = function(event) {
+                if (!(el === event.target || el.contains(event.target))) {
+                  binding.value(event, el);
+                }
+              };
+              document.body.addEventListener("click", el.clickOutEvent);
+            },
+            unmounted(el) {
+              document.body.removeEventListener("click", el.clickOutEvent);
+            }
+          });
+          
+          app.mount("#' . $pickerId . '-container");
         </script>
         <div id="' . $pickerId . '-container">
           <cm-date-time-picker

diff --git a/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js b/app/webroot/js/comanage/components/datepicker/cm-datetimepicker.js
@@ -74,8 +74,13 @@ export default {
       return(formattedDate);
     },
     showTimePicker() {
+      // This is our toggle.
       this.showingTimePicker = !this.showingTimePicker;
     },
+    hideTimePicker() {
+      // This is to explicitly hide the picker.
+      this.showingTimePicker = false;
+    },
     setFieldTime(type,val) {
       const dateField = document.getElementById(this.target);
       let dateTime = [];
@@ -160,6 +165,7 @@ export default {
           <cm-time-picker
             v-if="this.showingTimePicker"
             @set-time="setFieldTime"
+            @hide="hideTimePicker"
             :target="this.target"
             :datetime="this.dateTime"
             :ampm="this.ampm"

diff --git a/app/webroot/js/comanage/components/datepicker/cm-timepicker.js b/app/webroot/js/comanage/components/datepicker/cm-timepicker.js
@@ -23,6 +23,7 @@
  * @since         COmanage Registry v5.0.0
  * @license       Apache License, Version 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
  */
+
 export default {
   props: {
     target: String,
@@ -38,10 +39,13 @@ export default {
   methods: {
     setTime(e,type) {
       this.$emit('setTime',type,e.target.innerText);
+    },
+    hide() {
+      this.$emit('hide');
     }
   },
   template: `
-    <div class="cm-time-picker-panel">
+    <div class="cm-time-picker-panel" v-clickout="hide">
       <div class="cm-time-picker-hours">
         <div class="cm-time-picker-title">{{ txt.hour }}</div>
         <div class="cm-time-picker-vals">