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 1 commit
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
68 changes: 68 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,50 @@

$user = JFactory::getUser();
$input = JFactory::getApplication()->input;

$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::_('jquery.framework');

//JHtml::_('script', 'media/mediaelement/mediaelement-and-player.js', false, true);
JHtml::_('script', 'media/mediamanager.min.js', false, true);
//JHtml::_('stylesheet', 'media/mediaelement/mediaelementplayer.css', array(), true);
JHtml::_('stylesheet', 'system/mootree.css', array(), true);

// George's part for video
//Jfactory::getDocument()->addScriptDeclaration(
// "
// jQuery(document).ready(function(){
// // Initialize the script for mediaelement.js
// var player = new MediaElementPlayer('#videoPlayer', {});
//// console.log(player);
// player.pause();
// });
// "
//);

$lang = JFactory::getLanguage();
if ($lang->isRtl())
{
JHtml::_('stylesheet', 'media/mootree_rtl.css', array(), true);
}
?>
<div class="row-fluid">
<!-- Begin Sidebar -->
Expand Down Expand Up @@ -83,4 +127,28 @@
</form>
</div>
<!-- End Content -->
<?php
// George's part for video
//echo JHtml::_(
// 'bootstrap.renderModal',
// 'mediaelement',
// array(
// 'title' => JText::_('COM_MEDIA_VIDEO_PREVIEW'),
// 'footer' => '<button class="btn" data-dismiss="modal" aria-hidden="true">'
// . JText::_("JLIB_HTML_BEHAVIOR_CLOSE") . '</button>'
// ),
// '<div id="videoPlayer"><video class="mejs-player" src="none" /></div>'
//);

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"><img id="imagePreviewSrc" src="/media/jui/img/alpha.png" alt="preview" style="width:100%;"/></div>'
);
?>
</div>
37 changes: 0 additions & 37 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 @@ -38,42 +38,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 +57,6 @@ public function display($tpl = null)
$this->addToolbar();

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

/**
Expand Down
15 changes: 15 additions & 0 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 @@ -11,6 +11,21 @@
$user = JFactory::getUser();
$params = JComponentHelper::getParams('com_media');
$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
26 changes: 26 additions & 0 deletions 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 @@ -10,6 +10,32 @@
defined('_JEXEC') or die;
$params = JComponentHelper::getParams('com_media');
$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;
});
});
});
"
);

// George's part for video
//JFactory::getDocument()->addScriptDeclaration(
// "
// jQuery(document).ready(function($){
// $('.modal').on('hidden', function () {
// $('.mejs-playpause-button').find('button').click();
// });
// });
// "
//);
?>
<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
16 changes: 0 additions & 16 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,22 +37,6 @@ 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');
$documents = $this->get('documents');
$folders = $this->get('folders');
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."