From c03b8ce516c2add6e95e5f0623596834c54d57ec Mon Sep 17 00:00:00 2001
From: Thomas <thomas@lekoala.be>
Date: Mon, 29 Nov 2021 14:32:51 +0100
Subject: [PATCH] improve styles and templates

---
 client/pure-modal.css                         | 248 +++++++++---------
 client/pure-modal.js                          |   6 -
 src/PureModal.php                             |   8 +-
 src/PureModalAction.php                       |   1 -
 templates/LeKoala/PureModal/PureModal.ss      |  13 +-
 .../LeKoala/PureModal/PureModalAction.ss      |  10 +-
 6 files changed, 143 insertions(+), 143 deletions(-)
 delete mode 100644 client/pure-modal.js

diff --git a/client/pure-modal.css b/client/pure-modal.css
index 37fee97..e85a4dc 100644
--- a/client/pure-modal.css
+++ b/client/pure-modal.css
@@ -1,116 +1,116 @@
 .pure-modal .checkbox {
-  display: none;
+    display: none;
 }
 
 /* Gray background */
 
 .pure-modal .pure-modal-overlay {
-  opacity: 0;
-  transition: all 0.3s ease;
-  width: 50%;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -100;
-  transform: scale(1);
-  display: none;
-  background-color: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    transition: all 0.3s ease;
+    width: 50%;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -100;
+    transform: scale(1);
+    display: none;
+    background-color: rgba(0, 0, 0, 0.7);
 }
 
 /* Box */
 
 .pure-modal .pure-modal-wrap {
-  background-color: #f7f8fa;
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
-  padding: 3.077rem 1.5385rem;
-  width: 60%;
-  margin: 1.5385rem auto;
-  align-self: flex-start;
-  border-radius: 3px;
-  transition: all 0.3s ease;
+    background-color: #f7f8fa;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+    padding: 3.077rem 1.5385rem;
+    width: 60%;
+    margin: 1.5385rem auto;
+    align-self: flex-start;
+    border-radius: 3px;
+    transition: all 0.3s ease;
 }
 
 .pure-modal .pure-modal-wrap.small {
-  width: 30%;
+    width: 30%;
 }
 
 .pure-modal .pure-modal-wrap.full {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
 
 .pure-modal .pure-modal-wrap.a-center {
-  align-self: center;
+    align-self: center;
 }
 
 .pure-modal .pure-modal-wrap.from-left {
-  transform: translateX(-100%);
+    transform: translateX(-100%);
 }
 
 .pure-modal .pure-modal-wrap.from-right {
-  transform: translateX(100%);
+    transform: translateX(100%);
 }
 
 .pure-modal .pure-modal-wrap.from-top {
-  transform: translateY(-100%);
+    transform: translateY(-100%);
 }
 
 .pure-modal .pure-modal-wrap.from-bottom {
-  transform: translateY(100%);
+    transform: translateY(100%);
 }
 
 /* Close button */
 
 .pure-modal .pure-modal-overlay .close {
-  position: absolute;
-  right: 1.5385rem;
-  top: 1.5385rem;
-  width: 32px;
-  height: 32px;
-  text-align: center;
-  line-height: 32px;
-  display: inline-block;
-  color: rgba(0, 0, 0, 0.7);
+    position: absolute;
+    right: 1.5385rem;
+    top: 1.5385rem;
+    width: 32px;
+    height: 32px;
+    text-align: center;
+    line-height: 32px;
+    display: inline-block;
+    color: rgba(0, 0, 0, 0.7);
 }
 
 .pure-modal .pure-modal-overlay .close:hover {
-  cursor: pointer;
-  color: rgba(0, 0, 0, 0.9);
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.9);
 }
 
-.pure-modal .o-close {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: -100;
+.pure-modal .pure-modal-close {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: -100;
 }
 
-.pure-modal input:checked ~ .o-close {
-  z-index: 9998;
+.pure-modal input:checked ~ .pure-modal-close {
+    z-index: 9998;
 }
 
 .pure-modal input:checked ~ .pure-modal-overlay {
-  transform: scale(1);
-  opacity: 1;
-  z-index: 9997;
-  overflow: auto;
-  display: flex;
-  animation-duration: 0.3s;
-  animation-name: fade-in;
-  -moz-animation-duration: 0.3s;
-  -moz-animation-name: fade-in;
-  -webkit-animation-duration: 0.3s;
-  -webkit-animation-name: fade-in;
+    transform: scale(1);
+    opacity: 1;
+    z-index: 9997;
+    overflow: auto;
+    display: flex;
+    animation-duration: 0.3s;
+    animation-name: fade-in;
+    -moz-animation-duration: 0.3s;
+    -moz-animation-name: fade-in;
+    -webkit-animation-duration: 0.3s;
+    -webkit-animation-name: fade-in;
 }
 
 .pure-modal input:checked ~ .pure-modal-overlay .pure-modal-wrap {
-  transform: translateY(0);
-  z-index: 9999;
+    transform: translateY(0);
+    z-index: 9999;
 }
 
 /* Responsive Design */
@@ -118,92 +118,104 @@
 /* Tablet size */
 
 @media (max-width: 800px) {
-  .pure-modal .pure-modal-wrap {
-    width: 80%;
-    padding: 16px;
-  }
+    .pure-modal .pure-modal-wrap {
+        width: 80%;
+        padding: 16px;
+    }
 }
 
 /* Phone size */
 
 @media (max-width: 500px) {
-  .pure-modal .pure-modal-wrap {
-    width: 90%;
-  }
+    .pure-modal .pure-modal-wrap {
+        width: 90%;
+    }
 }
 
 /* Fadein from display:none */
 
 @keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: flex;
+        opacity: 0;
+    }
+    100% {
+        display: flex;
+        opacity: 1;
+    }
 }
 
 @-moz-keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: flex;
+        opacity: 0;
+    }
+    100% {
+        display: flex;
+        opacity: 1;
+    }
 }
 
 @-webkit-keyframes fade-in {
-  0% {
-    display: none;
-    opacity: 0;
-  }
-  1% {
-    display: flex;
-    opacity: 0;
-  }
-  100% {
-    display: flex;
-    opacity: 1;
-  }
-}
-
-.cms .pure-modal .pure-modal-wrap {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    1% {
+        display: flex;
+        opacity: 0;
+    }
+    100% {
+        display: flex;
+        opacity: 1;
+    }
+}
+
+/* Custom actions style */
+
+.cms .pure-modal .pure-modal-action {
     padding: 0;
 }
-.cms .pure-modal .pure-modal-overlay .close {
-    right: 1rem;
+.cms .pure-modal .pure-modal-action .close {
     top: 1rem;
 }
-.cms .pure-modal .toolbar--north h1 {
-    margin-top: 16px;
+
+/* Let flex align the header */
+.cms .pure-modal .pure-modal-action .toolbar--north h1 {
+    margin-bottom: 0;
 }
 
 /* SS4.8 messes up the following when inside a toolbar and we have to revert their styles */
-.cms .pure-modal .pure-modal-wrap .form-group {
+.cms .pure-modal .pure-modal-action .form-group {
     padding-bottom: 1.2308rem !important;
 }
-.cms .pure-modal .pure-modal-wrap .form-group > label {
+.cms .pure-modal .pure-modal-action .form-group > label {
     margin-left: 1.5385rem !important;
 }
-.cms .pure-modal .pure-modal-wrap .btn {
+.cms .pure-modal .pure-modal-action .btn {
     width: auto !important;
 }
-.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .pure-modal-wrap .CompositeField {
+.cms
+    .ss-ui-action-tabset.action-menus.ss-tabset
+    .ui-tabs-panel
+    .pure-modal-action
+    .CompositeField {
     margin-left: -1.5385rem;
 }
-.cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel .pure-modal-wrap .form-group:not(.stacked) > label {
+.cms
+    .ss-ui-action-tabset.action-menus.ss-tabset
+    .ui-tabs-panel
+    .pure-modal-action
+    .form-group:not(.stacked)
+    > label {
     padding-top: 0.5385rem;
     padding-bottom: 0.5385rem;
 }
diff --git a/client/pure-modal.js b/client/pure-modal.js
deleted file mode 100644
index 23875ed..0000000
--- a/client/pure-modal.js
+++ /dev/null
@@ -1,6 +0,0 @@
-function resizeIframe(iframe) {
-    iframe.onload = function () {
-        iframe.style.height =
-            iframe.contentWindow.document.body.scrollHeight + "px";
-    };
-}
diff --git a/src/PureModal.php b/src/PureModal.php
index b1b5220..7a28226 100644
--- a/src/PureModal.php
+++ b/src/PureModal.php
@@ -23,6 +23,11 @@ class PureModal extends DatalessField
      */
     protected $title;
 
+    /**
+     * @var string
+     */
+    protected $content;
+
     /**
      * @var string
      */
@@ -43,8 +48,9 @@ public function __construct($name, $title, $content)
     public function getAttributes()
     {
         $attrs = [];
+        // Since the frame is hidden, we need to compute size on click
         if ($this->getIframe()) {
-            $attrs['onclick'] = "resizeIframe('" .$this->getIframeID(). "')";
+            $attrs['onclick'] = "var i=document.querySelector('#" .$this->getIframeID(). "');i.style.height = 0; setTimeout(function() {i.style.height = i.contentWindow.document.body.scrollHeight + 'px';},100);";
         }
         return $attrs;
     }
diff --git a/src/PureModalAction.php b/src/PureModalAction.php
index 52b790d..7f0efa5 100644
--- a/src/PureModalAction.php
+++ b/src/PureModalAction.php
@@ -92,7 +92,6 @@ public function setDialogButtonTitle($value)
         return $this;
     }
 
-
     /**
      * Get an icon for this button
      *
diff --git a/templates/LeKoala/PureModal/PureModal.ss b/templates/LeKoala/PureModal/PureModal.ss
index 1fe4c8f..29caec1 100644
--- a/templates/LeKoala/PureModal/PureModal.ss
+++ b/templates/LeKoala/PureModal/PureModal.ss
@@ -1,26 +1,21 @@
-<% require javascript('lekoala/silverstripe-pure-modal: client/pure-modal.js') %>
 <% require css('lekoala/silverstripe-pure-modal: client/pure-modal.css') %>
 
 <label for="$ModalID" class="btn btn-primary" $AttributesHTML>
     $Title
 </label>
 <div class="pure-modal from-top">
-
     <input id="$ModalID" class="checkbox" type="checkbox">
     <div class="pure-modal-overlay">
-
-        <label for="$ModalID" class="o-close"></label>
+        <label for="$ModalID" class="pure-modal-close"></label>
         <div class="pure-modal-wrap">
-
             <label for="$ModalID" class="close">&#10006;</label>
-
             <% if $Iframe && $IframeTop %>
-                <iframe id="$IframeID" src="$Iframe" width="100%%" loading="lazy" style="max-height:400px" frameBorder="0" scrolling="auto"></iframe>
+            <iframe id="$IframeID" src="$Iframe" width="100%" loading="lazy" style="max-height:400px" frameBorder="0" scrolling="auto"></iframe>
             <% end_if %>
-            $Content
+            $Content.RAW
             <%-- Iframe if set and not top --%>
             <% if $Iframe && not $IframeTop %>
-                <iframe id="$IframeID"  src="$Iframe" width="100%%" loading="lazy" style="max-height:400px" frameBorder="0" scrolling="auto"></iframe>
+            <iframe id="$IframeID"  src="$Iframe" width="100%" loading="lazy" style="max-height:400px" frameBorder="0" scrolling="auto"></iframe>
             <% end_if %>
         </div>
     </div>
diff --git a/templates/LeKoala/PureModal/PureModalAction.ss b/templates/LeKoala/PureModal/PureModalAction.ss
index f5dad3e..6ec1092 100644
--- a/templates/LeKoala/PureModal/PureModalAction.ss
+++ b/templates/LeKoala/PureModal/PureModalAction.ss
@@ -1,5 +1,4 @@
 <% require css('lekoala/silverstripe-pure-modal: client/pure-modal.css') %>
-<% require javascript('lekoala/silverstripe-pure-modal: client/pure-modal.js') %>
 
 <label for="$ModalID" class="btn btn-info">
     $ButtonTitle
@@ -7,16 +6,14 @@
 <div class="pure-modal from-top">
     <input id="$ModalID" class="checkbox" type="checkbox">
     <div class="pure-modal-overlay">
-
-        <div class="pure-modal-wrap fill-height" style="max-height:90vh;">
-            <label for="$ModalID" class="o-close"></label>
+        <div class="pure-modal-wrap pure-modal-action fill-height" style="max-height:90vh;">
+            <label for="$ModalID" class="pure-modal-close"></label>
             <div class="toolbar toolbar--north row">
                 <h1>$Title</h1>
                 <label for="$ModalID" class="close">&#10006;</label>
             </div>
             <div class="panel panel--padded panel--scrollable flexbox-area-grow">
                 <fieldset>
-
                     <% loop $FieldList %>
                         $FieldHolder
                     <% end_loop %>
@@ -26,10 +23,7 @@
                 <div class="toolbar toolbar--south">
                     <input type="submit" name="action_$Name" class="btn action btn btn-info custom-action" value="$ButtonTitle">
                 </div>
-
             <% end_if %>
-
-
         </div>
     </div>
 </div>