main.php
7.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<?php
/**
* @package Joomla.Site
* @subpackage Layout
*
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('JPATH_BASE') or die;
use Joomla\Utilities\ArrayHelper;
// Load bootstrap-tooltip-extended plugin for additional tooltip positions in modal
JHtml::_('bootstrap.tooltipExtended');
extract($displayData);
/**
* Layout variables
* ------------------
* @param string $selector Unique DOM identifier for the modal. CSS id without #
* @param array $params Modal parameters. Default supported parameters:
* - title string The modal title
* - backdrop mixed A boolean select if a modal-backdrop element should be included (default = true)
* The string 'static' includes a backdrop which doesn't close the modal on click.
* - keyboard boolean Closes the modal when escape key is pressed (default = true)
* - closeButton boolean Display modal close button (default = true)
* - animation boolean Fade in from the top of the page (default = true)
* - 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 Optional height of the modal body in viewport units (vh)
* - modalWidth int Optional width of the modal in viewport units (vh)
* - footer string Optional markup for the modal footer
* @param string $body Markup for the modal body. Appended after the <iframe> if the URL option is set
*
*/
$modalClasses = array('modal', 'hide');
if (!isset($params['animation']) || $params['animation'])
{
$modalClasses[] = 'fade';
}
$modalWidth = isset($params['modalWidth']) ? round((int) $params['modalWidth'], -1) : '';
if ($modalWidth && $modalWidth > 0 && $modalWidth <= 100)
{
$modalClasses[] = 'jviewport-width' . $modalWidth;
}
$modalAttributes = array(
'tabindex' => '-1',
'class' => implode(' ', $modalClasses)
);
if (isset($params['backdrop']))
{
$modalAttributes['data-backdrop'] = (is_bool($params['backdrop']) ? ($params['backdrop'] ? 'true' : 'false') : $params['backdrop']);
}
if (isset($params['keyboard']))
{
$modalAttributes['data-keyboard'] = (is_bool($params['keyboard']) ? ($params['keyboard'] ? 'true' : 'false') : 'true');
}
/**
* These lines below are for disabling scrolling of parent window.
* $('body').addClass('modal-open');
* $('body').removeClass('modal-open')
*
* Scrolling inside bootstrap modals on small screens (adapt to window viewport and avoid modal off screen).
* - max-height .modal-body Max-height for the modal body
* When height of the modal is too high for the window viewport height.
* - max-height .iframe Max-height for the iframe (Deducting the padding of the modal-body)
* When URL option is set and height of the iframe is higher than max-height of the modal body.
*
* Fix iOS scrolling inside bootstrap modals
* - overflow-y .modal-body When max-height is set for modal-body
*
* Specific hack for Bootstrap 2.3.x
*/
$script[] = "jQuery(document).ready(function($) {";
$script[] = " $('#" . $selector . "').on('show.bs.modal', function() {";
$script[] = " $('body').addClass('modal-open');";
if (isset($params['url']))
{
$iframeHtml = JLayoutHelper::render('joomla.modal.iframe', $displayData);
// Script for destroying and reloading the iframe
$script[] = " var modalBody = $(this).find('.modal-body');";
$script[] = " modalBody.find('iframe').remove();";
$script[] = " modalBody.prepend('" . trim($iframeHtml) . "');";
}
else
{
// Set modalTooltip container to modal ID (selector), and placement to top-left if no data attribute (bootstrap-tooltip-extended.js)
$script[] = " $('.modalTooltip').each(function(){;";
$script[] = " var attr = $(this).attr('data-placement');";
$script[] = " if ( attr === undefined || attr === false ) $(this).attr('data-placement', 'auto-dir top-left')";
$script[] = " });";
$script[] = " $('.modalTooltip').tooltip({'html': true, 'container': '#" . $selector . "'});";
}
// Adapt modal body max-height to window viewport if needed, when the modal has been made visible to the user.
$script[] = " }).on('shown.bs.modal', function() {";
// Get height of the modal elements.
$script[] = " var modalHeight = $('div.modal:visible').outerHeight(true),";
$script[] = " modalHeaderHeight = $('div.modal-header:visible').outerHeight(true),";
$script[] = " modalBodyHeightOuter = $('div.modal-body:visible').outerHeight(true),";
$script[] = " modalBodyHeight = $('div.modal-body:visible').height(),";
$script[] = " modalFooterHeight = $('div.modal-footer:visible').outerHeight(true),";
// Get padding top (jQuery position().top not working on iOS devices and webkit browsers, so use of Javascript instead)
$script[] = " padding = document.getElementById('" . $selector . "').offsetTop,";
// Calculate max-height of the modal, adapted to window viewport height.
$script[] = " maxModalHeight = ($(window).height()-(padding*2)),";
// Calculate max-height for modal-body.
$script[] = " modalBodyPadding = (modalBodyHeightOuter-modalBodyHeight),";
$script[] = " maxModalBodyHeight = maxModalHeight-(modalHeaderHeight+modalFooterHeight+modalBodyPadding);";
if (isset($params['url']))
{
// Set max-height for iframe if needed, to adapt to viewport height.
$script[] = " var iframeHeight = $('.iframe').height();";
$script[] = " if (iframeHeight > maxModalBodyHeight){;";
$script[] = " $('.modal-body').css({'max-height': maxModalBodyHeight, 'overflow-y': 'auto'});";
$script[] = " $('.iframe').css('max-height', maxModalBodyHeight-modalBodyPadding);";
$script[] = " }";
}
else
{
// Set max-height for modal-body if needed, to adapt to viewport height.
$script[] = " if (modalHeight > maxModalHeight){;";
$script[] = " $('.modal-body').css({'max-height': maxModalBodyHeight, 'overflow-y': 'auto'});";
$script[] = " }";
}
$script[] = " }).on('hide.bs.modal', function () {";
$script[] = " $('body').removeClass('modal-open');";
$script[] = " $('.modal-body').css({'max-height': 'initial', 'overflow-y': 'initial'});";
$script[] = " $('.modalTooltip').tooltip('destroy');";
$script[] = " });";
$script[] = "});";
JFactory::getDocument()->addScriptDeclaration(implode("\n", $script));
?>
<div id="<?php echo $selector; ?>" <?php echo ArrayHelper::toString($modalAttributes); ?>>
<?php
// Header
if (!isset($params['closeButton']) || isset($params['title']) || $params['closeButton'])
{
echo JLayoutHelper::render('joomla.modal.header', $displayData);
}
// Body
echo JLayoutHelper::render('joomla.modal.body', $displayData);
// Footer
if (isset($params['footer']))
{
echo JLayoutHelper::render('joomla.modal.footer', $displayData);
}
?>
</div>