Add bodyHeight and modalWidth options for viewport units

joomla · May 10, 2016 · 2046c18 · 2046c18
1 parent 67029d7
commit 2046c18
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 2 deletions.
diff --git a/layouts/joomla/modal/body.php b/layouts/joomla/modal/body.php
@@ -26,10 +26,21 @@
  *                             - url          string   URL of a resource to be inserted as an <iframe> inside the modal body
  *                             - height       string   height of the <iframe> containing the remote resource
  *                             - width        string   width of the <iframe> containing the remote resource
+ *                             - bodyHeight   int      height of the modal body in viewport units (vh)
+ *                             - modalWidth   int      width of the modal in viewport units (vh)
  * @param   string  $body      Markup for the modal body. Appended after the <iframe> if the url option is set
  *
  */
+
+$bodyClass = 'modal-body';
+
+$bodyHeight = isset($params['bodyHeight']) ? round((int) $params['bodyHeight'], -1) : '';
+
+if ($bodyHeight && $bodyHeight >= 20 && $bodyHeight < 90)
+{
+	$bodyClass.= ' jviewport-height' . $bodyHeight;
+}
 ?>
-<div class="modal-body">
+<div class="<?php echo $bodyClass; ?>">
 	<?php echo $body; ?>
 </div>
diff --git a/layouts/joomla/modal/footer.php b/layouts/joomla/modal/footer.php
@@ -26,6 +26,8 @@
  *                             - url          string   URL of a resource to be inserted as an <iframe> inside the modal body
  *                             - height       string   height of the <iframe> containing the remote resource
  *                             - width        string   width of the <iframe> containing the remote resource
+ *                             - bodyHeight   int      height of the modal body in viewport units (vh)
+ *                             - modalWidth   int      width of the modal in viewport units (vh)
  * @param   string  $body      Markup for the modal body. Appended after the <iframe> if the url option is set
  *
  */

diff --git a/layouts/joomla/modal/header.php b/layouts/joomla/modal/header.php
@@ -26,6 +26,8 @@
  *                             - url          string   URL of a resource to be inserted as an <iframe> inside the modal body
  *                             - height       string   height of the <iframe> containing the remote resource
  *                             - width        string   width of the <iframe> containing the remote resource
+ *                             - bodyHeight   int      height of the modal body in viewport units (vh)
+ *                             - modalWidth   int      width of the modal in viewport units (vh)
  * @param   string  $body      Markup for the modal body. Appended after the <iframe> if the url option is set
  *
  */

diff --git a/layouts/joomla/modal/iframe.php b/layouts/joomla/modal/iframe.php
@@ -26,12 +26,23 @@
  *                             - url          string   URL of a resource to be inserted as an <iframe> inside the modal body
  *                             - height       string   height of the <iframe> containing the remote resource
  *                             - width        string   width of the <iframe> containing the remote resource
+ *                             - bodyHeight   int      height of the modal body in viewport units (vh)
+ *                             - modalWidth   int      width of the modal in viewport units (vh)
  * @param   string  $body      Markup for the modal body. Appended after the <iframe> if the url option is set
  *
  */
 
+$iframeClass = 'iframe';
+
+$bodyHeight = isset($params['bodyHeight']) ? round((int) $params['bodyHeight'], -1) : '';
+
+if ($bodyHeight && $bodyHeight >= 20 && $bodyHeight < 90)
+{
+	$iframeClass.= ' jviewport-height' . $bodyHeight;
+}
+
 $iframeAttributes = array(
-	'class' => 'iframe',
+	'class' => $iframeClass,
 	'src'   => $params['url']
 );
 

diff --git a/layouts/joomla/modal/main.php b/layouts/joomla/modal/main.php
@@ -29,6 +29,8 @@
  *                             - url          string   URL of a resource to be inserted as an <iframe> inside the modal body
  *                             - height       string   height of the <iframe> containing the remote resource
  *                             - width        string   width of the <iframe> containing the remote resource
+ *                             - bodyHeight   int      height of the modal body in viewport units (vh)
+ *                             - modalWidth   int      width of the modal in viewport units (vh)
  * @param   string  $body      Markup for the modal body. Appended after the <iframe> if the url option is set
  *
  */
@@ -40,6 +42,13 @@
 	array_push($modalClasses, 'fade');
 }
 
+$modalWidth = isset($params['modalWidth']) ? round((int) $params['modalWidth'], -1) : '';
+
+if ($modalWidth && $modalWidth > 0 && $modalWidth <= 100)
+{
+	array_push($modalClasses, 'jviewport-width' . $modalWidth);
+}
+
 $modalAttributes = array(
 	'tabindex' => '-1',
 	'class'    => implode(' ', $modalClasses)

diff --git a/media/jui/less/responsive-767px-max.joomla.less b/media/jui/less/responsive-767px-max.joomla.less
@@ -19,6 +19,12 @@
     &.fade.in { top: 20px; }
   }
 
+  // Modals viewport width
+  div.modal[class*="jviewport-width"] {
+    width: auto;
+    margin: 0;
+  }
+
 }
 
 // UP TO LANDSCAPE PHONE