Skip to content

Use bootstrap modal for preview on com_media #7819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Use bootstrap modal for preview on com_media #7819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a9cad4d
Use bootstrap modal - eliminate mootools
dgrammatiko Sep 5, 2015
972799f
rel->class
dgrammatiko Sep 5, 2015
24bff2d
Remove the video part
dgrammatiko Sep 5, 2015
e7f60eb
Don't stretch images
dgrammatiko Sep 5, 2015
1670b29
stylesheets and scripts should be overridable
dgrammatiko Sep 5, 2015
212211e
CS
dgrammatiko Sep 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions administrator/components/com_media/views/images/tmpl/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,20 @@
// Load tooltip instance without HTML support because we have a HTML tag in the tip
JHtml::_('bootstrap.tooltip', '.noHtmlTip', array('html' => false));

$user = JFactory::getUser();
$input = JFactory::getApplication()->input;
$user = JFactory::getUser();
$input = JFactory::getApplication()->input;
$params = JComponentHelper::getParams('com_media');
$lang = JFactory::getLanguage();

// Include jQuery
JHtml::_('jquery.framework');
JHtml::_('script', 'media/popup-imagemanager.js', false, true);
JHtml::_('stylesheet', 'media/popup-imagemanager.css', array(), true);

if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/popup-imagemanager_rtl.css', array(), true);
}

JFactory::getDocument()->addScriptDeclaration(
"
Expand Down
19 changes: 4 additions & 15 deletions administrator/components/com_media/views/images/view.html.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,17 @@ class MediaViewImages extends JViewLegacy
public function display($tpl = null)
{
$config = JComponentHelper::getParams('com_media');
$lang = JFactory::getLanguage();

// Include jQuery
JHtml::_('jquery.framework');
JHtml::_('script', 'media/popup-imagemanager.js', true, true);
JHtml::_('stylesheet', 'media/popup-imagemanager.css', array(), true);

if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/popup-imagemanager_rtl.css', array(), true);
}

/*
* Display form for FTP credentials?
* Don't set them here, as there are other functions called before this one if there is any file write operation
*/
$ftp = !JClientHelper::hasCredentials('ftp');

$this->session = JFactory::getSession();
$this->config = $config;
$this->state = $this->get('state');
$this->folderList = $this->get('folderList');
$this->session = JFactory::getSession();
$this->config = $config;
$this->state = $this->get('state');
$this->folderList = $this->get('folderList');
$this->require_ftp = $ftp;

parent::display($tpl);
Expand Down
11 changes: 11 additions & 0 deletions administrator/components/com_media/views/imageslist/tmpl/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,17 @@
*/

defined('_JEXEC') or die;

$lang = JFactory::getLanguage();

JHtml::_('stylesheet', 'media/popup-imagelist.css', array(), true);

if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/popup-imagelist_rtl.css', array(), true);
}

JFactory::getDocument()->addScriptDeclaration("var ImageManager = window.parent.ImageManager;");
?>
<?php if (count($this->images) > 0 || count($this->folders) > 0) : ?>
<ul class="manager thumbnails">
Expand Down
20 changes: 4 additions & 16 deletions administrator/components/com_media/views/imageslist/view.html.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,14 @@ public function display($tpl = null)
// Do not allow cache
JFactory::getApplication()->allowCache(false);

$lang = JFactory::getLanguage();

JHtml::_('stylesheet', 'media/popup-imagelist.css', array(), true);

if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/popup-imagelist_rtl.css', array(), true);
}

$document = JFactory::getDocument();
$document->addScriptDeclaration("var ImageManager = window.parent.ImageManager;");

$images = $this->get('images');
$images = $this->get('images');
$folders = $this->get('folders');
$state = $this->get('state');
$state = $this->get('state');

$this->baseURL = COM_MEDIA_BASEURL;
$this->images = &$images;
$this->images = &$images;
$this->folders = &$folders;
$this->state = &$state;
$this->state = &$state;

parent::display($tpl);
}
Expand Down
41 changes: 41 additions & 0 deletions administrator/components/com_media/views/media/tmpl/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,34 @@

$user = JFactory::getUser();
$input = JFactory::getApplication()->input;
$lang = JFactory::getLanguage();
$style = JFactory::getApplication()->getUserStateFromRequest('media.list.layout', 'layout', 'thumbs', 'word');

if (DIRECTORY_SEPARATOR == '\\')
{
$base = str_replace(DIRECTORY_SEPARATOR, "\\\\", COM_MEDIA_BASE);
}
else
{
$base = COM_MEDIA_BASE;
}

JFactory::getDocument()->addScriptDeclaration(
"
var basepath = '" . $base . "';
var viewstyle = '" . $style . "';
"
);

JHtml::_('behavior.keepalive');
JHtml::_('bootstrap.framework');
JHtml::_('script', 'media/mediamanager.min.js', false, true);
JHtml::_('stylesheet', 'system/mootree.css', array(), true);

if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/mootree_rtl.css', array(), true);
}
?>
<div class="row-fluid">
<!-- Begin Sidebar -->
Expand Down Expand Up @@ -82,5 +110,18 @@
</div>
</form>
</div>
<?php

Copy link
Contributor Author

@dgrammatiko dgrammatiko Sep 5, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wilsonge George this muted part together with the other lines above should be enough for the modal to open in the parent window. Still haven’t found a way to update the video source, need to walk through the API/code of the player

Copy link
Contributor

@wilsonge wilsonge Sep 5, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just do something like

jQuery(document).ready(function($){
    window.parent.document.updateUploader();
    $('.img-preview, .preview').each(function(index, value) {
        $(this).on('click', function(e) {
            window.parent.jQuery('#videoPreview.modal video.mejs-player')[0].player.setSrc($(this).attr('href'));
            window.parent.jQuery('#imagePreview').modal('show');
            return false;
        });
    });
});

echo JHtml::_(
'bootstrap.renderModal',
'imagePreview',
array(
'title' => JText::_('COM_MEDIA_IMAGE_PREVIEW'),
'footer' => '<button class="btn" data-dismiss="modal" aria-hidden="true">'
. JText::_("JLIB_HTML_BEHAVIOR_CLOSE") . '</button>'
),
'<div id="image" style="text-align:center;"><img id="imagePreviewSrc" src="/media/jui/img/alpha.png" alt="preview" style="max-width:100%; max-height:300px;"/></div>'
);
?>
<!-- End Content -->
</div>
43 changes: 0 additions & 43 deletions administrator/components/com_media/views/media/view.html.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@

defined('_JEXEC') or die;

// Include jQuery
JHtml::_('jquery.framework');

/**
* HTML View class for the Media component
*
Expand All @@ -38,42 +35,6 @@ public function display($tpl = null)
return $app->enqueueMessage(JText::_('JERROR_ALERTNOAUTHOR'), 'warning');
}

$lang = JFactory::getLanguage();
$style = $app->getUserStateFromRequest('media.list.layout', 'layout', 'thumbs', 'word');
$document = JFactory::getDocument();

JHtml::_('behavior.framework', true);
JHtml::_('script', 'media/mediamanager.min.js', true, true);
JHtml::_('behavior.modal');

$document->addScriptDeclaration("
window.addEvent('domready', function()
{
document.preview = SqueezeBox;
});");

JHtml::_('stylesheet', 'system/mootree.css', array(), true);

if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/mootree_rtl.css', array(), true);
}

if (DIRECTORY_SEPARATOR == '\\')
{
$base = str_replace(DIRECTORY_SEPARATOR, "\\\\", COM_MEDIA_BASE);
}
else
{
$base = COM_MEDIA_BASE;
}

$js = "
var basepath = '" . $base . "';
var viewstyle = '" . $style . "';
";
$document->addScriptDeclaration($js);

/*
* Display form for FTP credentials?
* Don't set them here, as there are other functions called before this one if there is any file write operation
Expand All @@ -93,7 +54,6 @@ public function display($tpl = null)
$this->addToolbar();

parent::display($tpl);
echo JHtml::_('behavior.keepalive');
}

/**
Expand All @@ -109,9 +69,6 @@ protected function addToolbar()
$bar = JToolBar::getInstance('toolbar');
$user = JFactory::getUser();

// The toolbar functions depend on Bootstrap JS
JHtml::_('bootstrap.framework');

// Set the titlebar text
JToolbarHelper::title(JText::_('COM_MEDIA'), 'images mediamanager');

Expand Down
19 changes: 17 additions & 2 deletions administrator/components/com_media/views/medialist/tmpl/details.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,24 @@
*/

defined('_JEXEC') or die;
$user = JFactory::getUser();
$user = JFactory::getUser();
$params = JComponentHelper::getParams('com_media');
$path = 'file_path';
$path = 'file_path';

JFactory::getDocument()->addScriptDeclaration(
"
jQuery(document).ready(function($){
window.parent.document.updateUploader();
$('.img-preview, .preview').each(function(index, value) {
$(this).on('click', function(e) {
window.parent.jQuery('#imagePreviewSrc').attr('src', $(this).attr('href'));
window.parent.jQuery('#imagePreview').modal('show');
return false;
});
});
});
"
);
?>
<form target="_parent" action="index.php?option=com_media&amp;tmpl=index&amp;folder=<?php echo $this->state->folder; ?>" method="post" id="mediamanager-form" name="mediamanager-form">
<div class="muted">
Expand Down
2 changes: 1 addition & 1 deletion administrator/components/com_media/views/medialist/tmpl/details_img.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<a class="img-preview" href="<?php echo COM_MEDIA_BASEURL . '/' . $this->_tmp_img->path_relative; ?>" title="<?php echo $this->_tmp_img->name; ?>"><?php echo JHtml::_('image', COM_MEDIA_BASEURL . '/' . $this->_tmp_img->path_relative, JText::sprintf('COM_MEDIA_IMAGE_TITLE', $this->_tmp_img->title, JHtml::_('number.bytes', $this->_tmp_img->size)), array('width' => $this->_tmp_img->width_16, 'height' => $this->_tmp_img->height_16)); ?></a>
</td>
<td class="description">
<a href="<?php echo COM_MEDIA_BASEURL . '/' . $this->_tmp_img->path_relative; ?>" title="<?php echo $this->_tmp_img->name; ?>" rel="preview"><?php echo $this->escape($this->_tmp_img->title); ?></a>
<a href="<?php echo COM_MEDIA_BASEURL . '/' . $this->_tmp_img->path_relative; ?>" title="<?php echo $this->_tmp_img->name; ?>" class="preview"><?php echo $this->escape($this->_tmp_img->title); ?></a>
</td>
<td class="dimensions">
<?php echo JText::sprintf('COM_MEDIA_IMAGE_DIMENSIONS', $this->_tmp_img->width, $this->_tmp_img->height); ?>
Expand Down
17 changes: 16 additions & 1 deletion administrator/components/com_media/views/medialist/tmpl/thumbs.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,22 @@

defined('_JEXEC') or die;
$params = JComponentHelper::getParams('com_media');
$path = 'file_path';
$path = 'file_path';

JFactory::getDocument()->addScriptDeclaration(
"
jQuery(document).ready(function($){
window.parent.document.updateUploader();
$('.img-preview, .preview').each(function(index, value) {
$(this).on('click', function(e) {
window.parent.jQuery('#imagePreviewSrc').attr('src', $(this).attr('href'));
window.parent.jQuery('#imagePreview').modal('show');
return false;
});
});
});
"
);
?>
<form target="_parent" action="index.php?option=com_media&amp;tmpl=index&amp;folder=<?php echo $this->state->folder; ?>" method="post" id="mediamanager-form" name="mediamanager-form">
<div class="muted">
Expand Down
1 change: 1 addition & 0 deletions administrator/components/com_media/views/medialist/tmpl/thumbs_folder.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

defined('_JEXEC') or die;

$user = JFactory::getUser();
?>
<li class="imgOutline thumbnail height-80 width-80 center">
Expand Down
30 changes: 7 additions & 23 deletions administrator/components/com_media/views/medialist/view.html.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,10 @@ public function display($tpl = null)
// Do not allow cache
$app->allowCache(false);

JHtml::_('behavior.framework', true);

JFactory::getDocument()->addScriptDeclaration("
window.addEvent('domready', function()
{
window.parent.document.updateUploader();
$$('a.img-preview').each(function(el)
{
el.addEvent('click', function(e)
{
window.top.document.preview.fromElement(el);
return false;
});
});
});");

$images = $this->get('images');
$images = $this->get('images');
$documents = $this->get('documents');
$folders = $this->get('folders');
$state = $this->get('state');
$folders = $this->get('folders');
$state = $this->get('state');

// Check for invalid folder name
if (empty($state->folder))
Expand All @@ -70,11 +54,11 @@ public function display($tpl = null)
}
}

$this->baseURL = JUri::root();
$this->images = &$images;
$this->baseURL = JUri::root();
$this->images = &$images;
$this->documents = &$documents;
$this->folders = &$folders;
$this->state = &$state;
$this->folders = &$folders;
$this->state = &$state;

parent::display($tpl);
}
Expand Down
4 changes: 3 additions & 1 deletion administrator/language/en-GB/en-GB.com_media.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,9 @@ COM_MEDIA_FOLDER="Folder"
COM_MEDIA_FOLDERS="Media Folders"
COM_MEDIA_FOLDERS_PATH_LABEL="<strong>Warning! Path Folder</strong><br />Changing the default 'Path to files folder' to another folder other than default 'images' may break your links.<br />The 'Path to images' folder has to be the same or a subfolder of 'Path to files'."
COM_MEDIA_IMAGE_DESCRIPTION="Image Description"
COM_MEDIA_IMAGE_TITLE="%1$s - %2$s"
COM_MEDIA_IMAGE_DIMENSIONS="%1$s x %2$s"
COM_MEDIA_IMAGE_PREVIEW="Image preview"
COM_MEDIA_IMAGE_TITLE="%1$s - %2$s"
COM_MEDIA_IMAGE_URL="Image URL"
COM_MEDIA_INSERT_IMAGE="Insert Image"
COM_MEDIA_INSERT="Insert"
Expand All @@ -96,5 +97,6 @@ COM_MEDIA_UPLOAD_FILE="Upload file"
COM_MEDIA_UPLOAD_SUCCESSFUL="Upload Successful"
COM_MEDIA_UPLOAD="Upload"
COM_MEDIA_UP="Up"
COM_MEDIA_VIDEO_PREVIEW="Video Preview"
Copy link
Contributor

@wilsonge wilsonge Sep 6, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this string needs to go as well

Copy link
Contributor Author

@dgrammatiko dgrammatiko Sep 6, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually it’s needed for #7819

Copy link
Contributor

@wilsonge wilsonge Sep 6, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is #7819. Assuming you mean for #7810 but I thought you'd removed all the code for that from this PR?

COM_MEDIA_XML_DESCRIPTION="Component for managing site media"
JLIB_RULES_SETTING_NOTES="1. Changes apply to this component only.<br /><em><strong>Inherited</strong></em> - a Global Configuration setting or higher level setting is applied.<br /><em><strong>Denied</strong></em> always wins - whatever is set at the Global or higher level and applies to all child elements.<br /><em><strong>Allowed</strong></em> will enable the action for this component unless it is overruled by a Global Configuration setting.<br /><br />2. Select Save to refresh the calculated settings."