overlays triggers close feature

lekoala · Jun 17, 2022 · 43d7625 · 43d7625
1 parent 47a487f
commit 43d7625
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/_config/pure-modal.yml b/_config/pure-modal.yml
@@ -3,3 +3,4 @@ Name: pure-modal
 ---
 LeKoala\PureModal\PureModal:
   move_modal_to_body: true
+  overlay_triggers_close: true
diff --git a/src/PureModal.php b/src/PureModal.php
@@ -53,6 +53,16 @@ public static function getMoveModalScript()
         return "document.body.appendChild(this.parentElement.querySelector('.pure-modal'));this.onclick=null;";
     }
 
+    public static function getOverlayTriggersCloseConfig()
+    {
+        return self::config()->overlay_triggers_close;
+    }
+
+    public function getOverlayTriggersClose()
+    {
+        return PureModal::getOverlayTriggersCloseConfig();
+    }
+
     public function getAttributes()
     {
         $attrs = [];

diff --git a/src/PureModalAction.php b/src/PureModalAction.php
@@ -67,6 +67,11 @@ public function __construct($name, $title)
         parent::__construct($name, $title);
     }
 
+    public function getOverlayTriggersClose()
+    {
+        return PureModal::getOverlayTriggersCloseConfig();
+    }
+
     public function getAttributes()
     {
         $attrs = [];

diff --git a/templates/LeKoala/PureModal/PureModal.ss b/templates/LeKoala/PureModal/PureModal.ss
@@ -5,7 +5,7 @@
 </label>
 <div class="pure-modal from-top">
     <input id="$ModalID" class="pure-checkbox no-change-track" type="checkbox">
-    <div class="pure-modal-overlay">
+    <div class="pure-modal-overlay"<% if getOverlayTriggersClose %> onclick="document.getElementById('$ModalID').checked=false;"<% end_if %>>
         <div class="pure-modal-wrap">
             <label for="$ModalID" class="close btn-close"><span>&#10006;</span></label>
             <% if $Iframe && $IframeTop %>

diff --git a/templates/LeKoala/PureModal/PureModalAction.ss b/templates/LeKoala/PureModal/PureModalAction.ss
@@ -5,8 +5,8 @@
 </label>
 <div class="pure-modal from-top">
     <input id="$ModalID" class="pure-checkbox no-change-track" type="checkbox">
-    <div class="pure-modal-overlay">
-    <div class="pure-modal-wrap pure-modal-action<% if getFillHeight %> fill-height<% end_if %>" style="max-height:90vh;">
+    <div class="pure-modal-overlay"<% if getOverlayTriggersClose %> onclick="document.getElementById('$ModalID').checked=false;"<% end_if %>>
+    <div class="pure-modal-wrap pure-modal-action<% if getFillHeight %> fill-height flex-fill<% end_if %>" style="max-height:90vh;">
             <label for="$ModalID" class="pure-modal-close"></label>
             <div class="toolbar toolbar--north row">
                 <h1>$Title</h1>