Add escape keydown and backdrop click as close event triggers

outl1ne · Aug 30, 2021 · b1367eb · b1367eb
1 parent 1b69dbb
commit b1367eb
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/resources/js/components/MediaBrowsingModal.vue b/resources/js/components/MediaBrowsingModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <od-modal ref="isModalOpen" v-if="isModalOpen" :name="'isModalOpen'" :align="'flex justify-end'" width="1315">
+  <od-modal ref="isModalOpen" v-if="isModalOpen" @onClose="hideMediaLibrary" :name="'isModalOpen'" :align="'flex justify-end'" width="1315">
     <div slot="container">
       <div class="modal-header flex flex-wrap justify-between mb-6">
         <h2 class="text-90 font-normal text-xl">
@@ -497,6 +497,12 @@ export default {
       this.$emit('update:isModalOpen', true);
       this.$emit('update:showUploadArea', false);
     },
+
+    hideMediaLibrary() {
+      this.listenUploadArea = false;
+      this.$emit('update:isModalOpen', false);
+      this.$emit('update:showUploadArea', false);
+    },
   },
 };
 </script>

diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
@@ -1,9 +1,9 @@
 <template>
   <portal to="modals" :name="name">
     <transition name="fade">
-      <div class="od-modal-container">
+      <div class="od-modal-container" @click="onBackdropClick">
         <modal>
-          <div class="bg-white rounded-lg shadow-lg od-modal" :style="style">
+          <div class="bg-white rounded-lg shadow-lg od-modal" ref="container" :style="style">
             <div class="p-8"><slot name="container"></slot></div>
 
             <div class="bg-30 px-6 py-3 flex">
@@ -36,9 +36,26 @@ export default {
     },
   },
 
-  data: () => ({
-    //
-  }),
+  mounted() {
+    document.addEventListener('keydown', this.listenEscEvent)
+  },
+
+  unmounted() {
+    document.removeEventListener('keydown', this.listenEscEvent)
+  },
+
+  methods: {
+    onBackdropClick(e) {
+      if (this.$refs.container && !this.$refs.container.contains(e.target)) {
+        this.$emit('onClose')
+      }
+    },
+    listenEscEvent(e) {
+      if (e.key?.toLowerCase() === 'esc' || e.key?.toLowerCase() === 'escape') {
+        this.$emit('onClose')
+      }
+    }
+  },
 
   computed: {
     style() {

diff --git a/src/Classes/MediaHandler.php b/src/Classes/MediaHandler.php
@@ -5,6 +5,7 @@
 use Exception;
 use FFMpeg\FFMpeg;
 use GuzzleHttp\Client;
+use Illuminate\Contracts\Container\BindingResolutionException;
 use Illuminate\Support\Str;
 use Illuminate\Http\Request;
 use FFMpeg\Coordinate\TimeCode;
@@ -32,7 +33,7 @@ public function __construct()
      * @param Request $request
      * @param string $key Used to access Request file upload value
      * @return Media
-     * @throws \Exception
+     * @throws Exception
      */
     public static function createFromRequest(Request $request, $key = 'file'): Media
     {
@@ -58,8 +59,8 @@ public static function createFromRequest(Request $request, $key = 'file'): Media
      *
      * @param $filepath - Full path to file
      * @return Media
-     * @throws \Illuminate\Contracts\Container\BindingResolutionException
-     * @throws \Exception
+     * @throws BindingResolutionException
+     * @throws Exception
      */
     public static function createFromFile($filepath): Media
     {
@@ -195,7 +196,7 @@ public function generateImageSizes($tempFilePath, $path, $mimeType, $disk): arra
                         'webp_size' => $disk->size(dirname($path) . '/' . $webpFilename),
                     ]);
                 }
-            } catch (\Intervention\Image\Exception\NotSupportedException $e) {
+            } catch (\Intervention\ImageException\NotSupportedException $e) {
                 continue;
             }
         }
@@ -231,20 +232,20 @@ public function getDisk()
      *
      * @param $fileData
      * @return array
-     * @throws \Exception
+     * @throws Exception
      */
     protected function validateFileInput($fileData)
     {
         if (is_array($fileData) && !(isset($fileData['name']) && isset($fileData['path']))) {
-            throw new \Exception('Cannot store file, missing file name or path!');
+            throw new Exception('Cannot store file, missing file name or path!');
         }
 
         $isString = is_string($fileData);
         $isBase64 = $isString && $this->isValid64base($fileData);
         $fileExists = $isString && file_exists($fileData);
 
         if ($isString && !$fileExists && !$isBase64) {
-            throw new \Exception('Cannot store file, invalid file path or data!');
+            throw new Exception('Cannot store file, invalid file path or data!');
         }
 
         $mimeType = 'text/plain';
@@ -294,7 +295,7 @@ private function isValid64base($str)
      * @param $fileData
      * @param $disk
      * @return Media
-     * @throws \Exception
+     * @throws Exception
      */
     protected function storeFile($fileData, $disk): Media
     {