Commit b82df03d authored by Lisa Seeto's avatar Lisa Seeto

Bug 1827811: Embedded Media Task

add the block-header to the block.
remove the download link from page as it now shows in the modal.
add artefactid and blockid to image.tpl
fix issue with data-toggle collapse targeting syntax error.
update  active block functionality for block headers
update block-comments-details-header.tpl for icon headers
fix Journals, and tagged entries and recent posts to use icons for block header.
change pdf block to use block header icons
clean up .comments-details class that is no longer needed.
add modal functionality for image gallery blocks for thumbnails and thumbnails square presentation.
add modal functionality for some html block, clear up js for icons that is no longer needed.
add title text to icons and block-header
create activateModalLinks() func to tidy up js modal click events in view/view.php

Change-Id: Ib5967d44288557ef4d380eb99241e8442da90f29
Signed-off-by: default avatarLisa Seeto <lisaseeto@catalyst.net.nz>
parent 44fcc9c9
......@@ -410,10 +410,14 @@ class PluginBlocktypeGallery extends MaharaCoreBlocktype {
$smarty = smarty_core();
$smarty->assign('instanceid', $instance->get('id'));
if (isset($configdata['artefactid'])) {
$smarty->assign('artefactid', $configdata['artefactid']);
}
$smarty->assign('count', count($images));
$smarty->assign('images', $images);
$smarty->assign('showdescription', (!empty($configdata['showdescription'])) ? $configdata['showdescription'] : false);
$smarty->assign('width', $width);
$smarty->assign('editing', $editing);
if (isset($height)) {
$smarty->assign('height', $height);
}
......@@ -429,8 +433,6 @@ class PluginBlocktypeGallery extends MaharaCoreBlocktype {
require_once(get_config('docroot') . 'lib/view.php');
$view = new View($configdata['viewid']);
list($commentcount, $comments) = ArtefactTypeComment::get_artefact_comments_for_view($artefact, $view, $instance->get('id'), true, $editing, $versioning);
$smarty->assign('commentcount', $commentcount);
$smarty->assign('comments', $comments);
}
return $smarty->fetch('blocktype:gallery:' . $template . '.tpl');
}
......
......@@ -30,10 +30,12 @@ class PluginBlocktypeHtml extends MaharaCoreBlocktype {
$configdata['viewid'] = $instance->get('view');
$result = '';
$smarty = smarty_core();
$artefactid = isset($configdata['artefactid']) ? $configdata['artefactid'] : null;
if ($artefactid) {
$artefact = $instance->get_artefact_instance($artefactid);
$smarty->assign('artefactid', $artefactid);
$smarty->assign('allowcomments', $artefact->get('allowcomments'));
if (!file_exists($artefact->get_path())) {
return;
}
......@@ -44,14 +46,13 @@ class PluginBlocktypeHtml extends MaharaCoreBlocktype {
require_once(get_config('docroot') . 'lib/view.php');
$view = new View($configdata['viewid']);
list($commentcount, $comments) = ArtefactTypeComment::get_artefact_comments_for_view($artefact, $view, $instance->get('id'), true, $editing, $versioning);
}
$smarty = smarty_core();
if ($artefactid) {
$smarty->assign('commentcount', $commentcount);
$smarty->assign('comments', $comments);
}
}
$smarty->assign('editing', $editing);
$smarty->assign('html', $result);
$smarty->assign('blockid', $instance->get('id'));
return $smarty->fetch('blocktype:html:html.tpl');
}
......
......@@ -54,31 +54,26 @@ class PluginBlocktypeInternalmedia extends MaharaCoreBlocktype {
if (!$playerclass) {
return get_string('typeremoved', 'blocktype.file/internalmedia');
}
$result = '<div class="mediaplayer-container card-body flush"><div class="mediaplayer">';
$result .= call_static_method($playerclass, 'get_html', $artefact, $instance, $width, $height);
// File download link
$filesize = round($artefact->get('size') / 1000000, 2) . 'MB';
$url = self::get_download_link($artefact, $instance);
$result .= '<div class="media-download content-text">
<span class="icon icon-download left" role="presentation" aria-hidden="true">
</span><span class="sr-only">' . get_string('Download', 'artefact.internal') . '</span>
<a class="media-link text-small" href="' . $url . '">' . hsc($artefact->get('title')) . '</a>
<span class="text-midtone text-small"> [' . $filesize . '] </span>
</div>';
$result .= '</div></div>';
$smarty = smarty_core();
$smarty->assign('artefactid', $artefact->get('id'));
$smarty->assign('blockid', $instance->get('id'));
require_once(get_config('docroot') . 'artefact/comment/lib.php');
require_once(get_config('docroot') . 'lib/view.php');
$view = new View($instance->get('view'));
$smarty->assign('allowcomments', $artefact->get('allowcomments'));
if (!$artefact->get('allowcomments')) {
$smarty->assign('justdetails', true);
}
list($commentcount, $comments) = ArtefactTypeComment::get_artefact_comments_for_view($artefact, $view, $instance->get('id'), true, $editing, $versioning);
$smarty = smarty_core();
$smarty->assign('commentcount', $commentcount);
$smarty->assign('comments', $comments);
$blockheader = $smarty->fetch('header/block-comments-details-header.tpl');
$result = $blockheader;
$result .= '<div class="mediaplayer-container card-body flush"><div class="mediaplayer">';
$result .= call_static_method($playerclass, 'get_html', $artefact, $instance, $width, $height);
$result .= '</div></div>';
$smarty->assign('html', $result);
return $smarty->fetch('blocktype:internalmedia:internalmedia.tpl');
}
......
......@@ -84,10 +84,13 @@ class PluginBlocktypePdf extends MaharaCoreBlocktype {
}
$smarty = smarty_core();
if ($artefactid) {
$smarty->assign('commentcount', $commentcount);
$smarty->assign('comments', $comments);
$smarty->assign('artefactid', $artefactid);
$artefact = $instance->get_artefact_instance($configdata['artefactid']);
$smarty->assign('allowcomments', $artefact->get('allowcomments'));
}
$smarty->assign('html', $result);
$smarty->assign('editing', $editing);
$smarty->assign('blockid', $instance->get('id'));
return $smarty->fetch('blocktype:pdf:pdfrender.tpl');
}
......
......@@ -1228,7 +1228,7 @@ jQuery(function($) {
$(document).on('click', 'a', function(event) {
if ($(this.hash).length && location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
!$(this).is('[class^="carousel"]') &&
!$(this).is('[data-toggle="collapse"]') &&
!($(this).data('toggle') === 'collapse') &&
!($('body').hasClass('modal-open'))) {
event.preventDefault();
var target = $(this.hash);
......
......@@ -81,8 +81,16 @@ function addFeedbackSuccess(form, data) {
}
// Update the comment link so the correct number of comments is displayed
var commentlink = ' ' + get_string('commentsanddetails', 'artefact.comment', data.data.count);
$('.commentlink').filter('[data-artefactid=' + data.data.artefact + ']').html('<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>' + commentlink);
var commentlink = $('.commentlink').filter('[data-artefactid=' + data.data.artefact + ']');
var newlink = '<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>';
if (!(commentlink.closest('div[class*=block-header]').hasClass('bh-displayiconsonly'))) {
newlink += ' ' + get_string('commentsanddetails', 'artefact.comment', data.data.count);
}
else {
newlink += ' (' + data.data.count + ')';
newlink += '<span class="bh-margin-left icon icon-search-plus" role="presentation" aria-hidden="true"></span>';
}
commentlink.html(newlink);
//For brief comments and details previews when there is no block comments and details header
$('.comment-count-preview').filter('[data-artefactid=' + data.data.artefact + ']').html('<span class="icon icon-comments" role="presentation" aria-hidden="true"></span> (' + data.data.count + ')');
......@@ -240,24 +248,35 @@ function delete_comment_from_modal_submit(form, data) {
});
// Update the comment link with correct count
var commentlink = $('.commentlink').filter('[data-artefactid=' + data.data.artefact + ']');
var newlink ='';
if (data.data.count == 0) {
var newlink = '<span class="icon icon-plus" role="presentation" aria-hidden="true"></span>';
newlink += ' ' + get_string('addcomment', 'artefact.comment');
newlink += '<span class="bh-margin-left icon icon-link" role="presentation" aria-hidden="true"></span>';
newlink += ' ' + get_string('Details', 'artefact.comment');
$('.commentlink').filter('[data-artefactid=' + data.data.artefact + ']').html(newlink);
//For brief comments and details previews when there is no block comments and details header
$('.comment-count-preview').filter('[data-artefactid=' + data.data.artefact + ']').html('');
if (commentlink.closest('div[class*=block-header]').hasClass('bh-displayiconsonly')) {
newlink += '<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>';
newlink += '<span class="bh-margin-left icon icon-search-plus" role="presentation" aria-hidden="true"></span>';
}
else {
newlink += '<span class="icon icon-plus" role="presentation" aria-hidden="true"></span>';
newlink += ' ' + get_string('addcomment', 'artefact.comment');
newlink += '<span class="bh-margin-left icon icon-link" role="presentation" aria-hidden="true"></span>';
newlink += ' ' + get_string('Details', 'artefact.comment');
}
}
else {
var commentlink = ' ' + get_string('commentsanddetails', 'artefact.comment', data.data.count);
$('.commentlink').filter('[data-artefactid=' + data.data.artefact + ']').html('<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>' + commentlink);
//For brief comments and details previews when there is no block comments and details header
$('.comment-count-preview').filter('[data-artefactid=' + data.data.artefact + ']').html('<span class="icon icon-comments" role="presentation" aria-hidden="true"></span> (' + data.data.count + ')');
if (commentlink.closest('div[class*=block-header]').hasClass('bh-displayiconsonly')) {
newlink = '<span class="icon icon-comments" role="presentation" aria-hidden="true"></span> (';
newlink += data.data.count + ')';
newlink += '<span class="bh-margin-left icon icon-search-plus" role="presentation" aria-hidden="true"></span>';
}
else {
newlink = '<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>';
newlink += ' ' + get_string('commentsanddetails', 'artefact.comment', data.data.count);
}
}
// Add the new link to the comment link
commentlink.html(newlink);
if ($('#configureblock').hasClass('closed')) {
formSuccess(form, data);
}
......@@ -327,12 +346,10 @@ function toggleDetailsBtn() {
if (!$('#details-btn').hasClass('active')) {
$('#details-btn').addClass('active');
headers.removeClass('d-none');
$('.comments-details').removeClass('d-none');
}
else {
$('#details-btn').removeClass('active');
headers.addClass('d-none');
$('.comments-details').addClass('d-none');
}
});
}
......
......@@ -25,6 +25,19 @@
{/if}
<div class="recentblogpost list-group">
{foreach from=$mostrecent item=post}
{if !($editing)}
{if !$post->allowcomments}
{assign var="justdetails" value=true}
{/if}
{include
file='header/block-comments-details-header.tpl'
artefactid=$post->id
blockid=$blockid
commentcount=$post->commentcount
allowcomments=$post->allowcomments
justdetails=$justdetails
displayiconsonly=true}
{/if}
<div class="list-group-item">
<a class="outer-link collapsed" data-toggle="collapse" href="#recent_post_{$post->id}" aria-expanded="false">
<span class="sr-only">{$post->title}</span>
......@@ -38,14 +51,6 @@
{$post->title}
{/if}
</h4>
<span class="comments-details d-none comments-details-mg-left comment-count-preview" data-artefactid="{$post->id}">
{if $post->commentcount > 0}
<span class="comment_count" role="presentation" aria-hidden="true"></span>
<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>
({$post->commentcount})
{/if}
</span>
<span class="comments-details d-none icon icon-search-plus bh-margin-left" role="presentation" aria-hidden="true"></span>
<div>
<span class="text-small">
{str tag='postedin' section='blocktype.blog/recentposts'}
......@@ -70,13 +75,6 @@
<span class="icon icon-chevron-down collapse-indicator float-right" role="presentation" aria-hidden="true"></span>
</div>
<div id="recent_post_{$post->id}" class="collapse content-text">
{if $post->tags}
<div class="tags metadata">
<span class="icon icon-tags left" role="presentation" aria-hidden="true"></span>
<strong>{str tag=tags}:</strong>
{list_tags owner=$post->owner tags=$post->tags}
</div>
{/if}
<span>{$post->description|safe}</span>
</div>
{/foreach}
......
......@@ -65,6 +65,19 @@
{else}
<div class="taggedposts list-group">
{foreach from=$results item=post}
{if !$editing}
{if !$post->allowcomments}
{assign var="justdetails" value=true}
{/if}
{include
file='header/block-comments-details-header.tpl'
artefactid=$post->id
blockid=$blockid
commentcount=$post->commentcount
allowcomments=$post->allowcomments
justdetails=$justdetails
displayiconsonly=true}
{/if}
<div class="list-group-item">
<a class="outer-link collapsed" data-toggle="collapse" href="#tagged_post_{$post->id}" aria-expanded="false">
<span class="sr-only">{$post->title}</span>
......@@ -78,14 +91,6 @@
{$post->title}
{/if}
</h4>
<span class="comments-details d-none comments-details-mg-left comment-count-preview" data-artefactid="{$post->id}">
{if $post->commentcount > 0}
<span class="comment_count" role="presentation" aria-hidden="true"></span>
<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>
({$post->commentcount})
{/if}
</span>
<span class="comments-details d-none icon icon-search-plus bh-margin-left" role="presentation" aria-hidden="true"></span>
<div>
<span class="metadata">
{str tag='postedon' section='blocktype.blog/taggedposts'}
......
......@@ -9,7 +9,8 @@
blockid=$options.blockid
commentcount=$post->commentcount
allowcomments=$post->allowcomments
justdetails=$justdetails}
justdetails=$justdetails
displayiconsonly = true}
{/if}
<div class="post list-group-item clearfix flush">
<div class="post-heading">
......
{if !$editing}
{include
file='header/block-comments-details-header.tpl'
artefactid=$artefactid
blockid=$instanceid
allowcomments=false
justdetails=true}
{/if}
<div id="thumbnails{$instanceid}" class="card-body thumbnails js-masonry">
{foreach from=$images item=image}
<div {if $image.squaredimensions}style="width:{$image.squaredimensions}px;height:{$image.squaredimensions}px;"{/if} class="thumb">
......
{if !$editing}
{include
file='header/block-comments-details-header.tpl'
artefactid=$artefactid
blockid=$instanceid
allowcomments=false
justdetails=true}
{/if}
<div id="thumbnails{$instanceid}" class="card-body thumbnails js-masonry">
{foreach from=$images item=image}
<div style="width: {$width * 1.5}px;" class="thumb">
......
<div class="card-body">
{if !$editing}
{if !$allowcomments}
{assign var="justdetails" value=true}
{/if}
{include
file='header/block-comments-details-header.tpl'
artefactid=$artefactid
blockid=$blockid
commentcount=$commentcount
allowcomments=$allowcomments
justdetails=$justdetails}
{/if}
{$html|safe}
</div>
{$comments|safe}
<div class="imageblock card-body" itemscope itemtype="http://schema.org/ImageObject">
<div class="image">
{if !$editing}
<a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" >
<img src="{$src}" alt="{$description}" itemprop="contentURL" data-blockid="{$blockid}" data-artefactid="{$artefactid}" data-target="#configureblock">
<a class="modal_link" data-toggle="modal-docked" data-target="#configureblock" href="#" data-artefactid="{$artefactid}" data-target="#configureblock" >
<img src="{$src}" alt="{$description}" itemprop="contentURL" data-blockid="{$blockid}">
</a>
{else}
<img src="{$src}" alt="{$description}" itemprop="contentURL">
......
<div class="card-body">
{if !$editing}
{if !$allowcomments}
{assign var="justdetails" value=true}
{/if}
{include
file='header/block-comments-details-header.tpl'
artefactid=$artefactid
blockid=$blockid
commentcount=$commentcount
allowcomments=$allowcomments
justdetails=$justdetails
displayiconsonly=true}
{/if}
{$html|safe}
</div>
{$comments|safe}
......@@ -20,6 +20,17 @@
<div class="fullwidth">
<ul class="list-group">
{foreach from=$children item=child}
{if !$child->allowcomments}
{assign var="justdetails" value=true}
{/if}
{include
file='header/block-comments-details-header.tpl'
artefactid=$child->id
blockid=$blockid
commentcount=$child->commentcount
allowcomments=$child->allowcomments
justdetails=$justdetails
displayiconsonly=true}
<li class="filedownload-item list-group-item">
{if $child->artefacttype != 'folder'}
<a href="{$WWWROOT}artefact/file/download.php?file={$child->id}&amp;view={$viewid}" class="outer-link icon-on-hover">
......
.block-header {
background-color: $theme-block-header-bg-color;
text-align: right;
padding: 5px;
a {
display: block;
color: $theme-block-header-color;
text-align: right;
text-decoration: none;
background-color: $theme-block-header-bg-color;
padding: 8px 10px;
&.active-block {
background-color: $theme-primary-color;
}
}
}
.list-group {
......@@ -38,11 +46,3 @@
.bh-margin-left {
margin-left: 10px;
}
.active-block {
background-color: $theme-primary-color;
}
span.comments-details-mg-left {
margin-left: 10px;
}
......@@ -145,5 +145,5 @@ $navbar-messages-count-color: #000 !default;
$navbar-messages-count-bg: #fc9f1a !default;
// Block headers for comments and details links
$theme-block-header-bg-color: $black;
$theme-block-header-color: $white;
$theme-block-header-bg-color: #333333 !default;
$theme-block-header-color: $white !default;
<div class="block-header d-none">
<div class="block-header d-none {if $displayiconsonly}btn-top-right btn-group-top bh-displayiconsonly{/if}">
{if $allowcomments}
<a class="commentlink" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$artefactid}">
<a class="commentlink {if $displayiconsonly}btn btn-secondary{/if}"
data-toggle="modal-docked"
data-target="#configureblock"
href="#"
data-blockid="{$blockid}"
data-artefactid="{$artefactid}"
title="{if $commentcount > 0}{str tag=Comments section=artefact.comment} {str tag=anddetails section=artefact.comment}{/if}">
{if $commentcount > 0}
<span class="comment_count" role="presentation" aria-hidden="true"></span>
<span class="icon icon-comments" role="presentation" aria-hidden="true"></span>
{str tag=commentsanddetails section=artefact.comment arg1=$commentcount}
<span class="sr-only">{str tag=Comments section=artefact.comment} {str tag=anddetails section=artefact.comment}</span>
{if $displayiconsonly}
({$commentcount})
<span class="bh-margin-left icon icon-search-plus" role="presentation" aria-hidden="true"></span>
{else}
{str tag=Comments section=artefact.comment} ({$commentcount}) {str tag=anddetails section=artefact.comment}
{/if}
{else}
<span class="icon icon-plus" role="presentation" aria-hidden="true"></span>
{str tag=addcomment section=artefact.comment}
<span class="bh-margin-left icon icon-link" role="presentation" aria-hidden="true"></span>
{str tag=Details section=mahara}
{if $displayiconsonly}
<span class="icon icon-comments" role="presentation" aria-hidden="true" title="{str tag=addcomment section=artefact.comment}"></span>
<span class="bh-margin-left icon icon-search-plus" role="presentation" aria-hidden="true" title="{str tag=Details section=artefact.comment}"></span>
{else}
<span class="icon icon-plus" role="presentation" aria-hidden="true" title="{str tag=Comments section=artefact.comment} {str tag=anddetails section=artefact.comment}"></span>
{str tag=addcomment section=artefact.comment}
<span class="bh-margin-left icon icon-search-plus" role="presentation" aria-hidden="true"></span>
{str tag=Details section=mahara}
{/if}
{/if}
</a>
{/if}
{if $justdetails}
<a class="modal_link list-group-heading" data-toggle="modal-docked" data-target="#configureblock" href="#" data-blockid="{$blockid}" data-artefactid="{$artefactid}">
<span class="icon icon-link" role="presentation" aria-hidden="true"></span>
{str tag=Details section=mahara}
{else if $justdetails}
<a class="modal_link list-group-heading {if $displayiconsonly}btn btn-secondary{/if}"
data-toggle="modal-docked"
data-target="#configureblock"
href="#"
data-blockid="{$blockid}"
data-artefactid="{$artefactid}"
title="{str tag=Details section=artefact.comment}">
<span class="icon icon-search-plus" role="presentation" aria-hidden="true" title="{str tag=Details section=artefact.comment}"></span>
{if !$displayiconsonly}
{str tag=Details section=mahara}
{/if}
</a>
{/if}
</div>
......@@ -393,27 +393,7 @@ jQuery(function($) {
dock.hide();
}
$('.commentlink').off('click');
$('.commentlink').on('click', function(e) {
open_modal(e);
if ( $(this).closest('div[class*=block-header]').hasClass('bh-displayiconsonly') ) {
$(this).closest('a[class*=commentlink]').addClass('active-block');
}
else {
$(this).closest('div[class*=block-header]').addClass('active-block');
}
});
$('.modal_link').off('click');
$('.modal_link').on('click', function (e) {
if ($(this).hasClass('no-modal')) {
e.stopPropagation();
}
else {
open_modal(e);
$(this).closest('div[class*=block-header]').addClass('active-block');
}
});
activateModalLinks();
$('#feedback-form .submitcancel[name="cancel_submit"]').on('click', function(e) {
e.stopPropagation();
......@@ -435,9 +415,7 @@ jQuery(function($) {
});
});
jQuery(window).on('pageupdated', {}, function() {
dock.init(jQuery(document));
function activateModalLinks() {
$('.commentlink').off('click');
$('.commentlink').on('click', function(e) {
open_modal(e);
......@@ -454,6 +432,11 @@ jQuery(window).on('pageupdated', {}, function() {
$(this).closest('div[class*=block-header]').addClass('active-block');
}
});
}
jQuery(window).on('pageupdated', {}, function() {
dock.init(jQuery(document));
activateModalLinks();
});
EOF;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment