Commit 4df6826b authored by Son Nguyen's avatar Son Nguyen Committed by Robert Lyon

Fix modal dialog for openbadgedisplayer. Bug 1536393

behatnotneeded

Change-Id: I4205f8fa54fbd50a43b8cd649ad34a82ddc1c1c1
parent 42c171f9
......@@ -123,24 +123,11 @@ class PluginBlocktypeOpenbadgedisplayer extends SystemBlocktype {
}
else {
$smarty = smarty_core();
$smarty->left_delimiter = '{{';
$smarty->right_delimiter = '}}';
$smarty->assign('id', $instance->get('id'));
$smarty->assign('badgehtml', self::get_badges_html($badgegroups));
$has_pagemodal = true;
// HACK: Mahara 15.10 uses a separate template to include the modal
// window used in showPreview JS-function. Let's check whether that
// template exists and use that information in our template.
try {
$sm = smarty_core();
$sm->fetch('pagemodal.tpl');
}
catch (Dwoo_Exception $e) {
// Pagemodal template does not exist.
$has_pagemodal = false;
}
$smarty->assign('has_pagemodal', (int) $has_pagemodal);
$html = $smarty->fetch('blocktype:openbadgedisplayer:openbadgedisplayer.tpl');
}
......
{$sec = 'blocktype.openbadgedisplayer'}
{{$sec = 'blocktype.openbadgedisplayer'}}
<div class="badge-template badge-container">
<img class="badge-image" src="" />
<div class="openbadge-details">
<h3>{str tag=issuerdetails section=$sec}</h3>
<h3>{{str tag=issuerdetails section=$sec}}</h3>
<table>
<tbody>
<tr class="issuer-name"><td>{str tag=name section=$sec}</td><td class="value"></td></tr>
<tr class="issuer-url"><td>{str tag=url section=$sec}</td><td class="value"></td></tr>
<tr class="issuer-organization"><td>{str tag=organization section=$sec}</td><td class="value"></td></tr>
<tr class="issuer-name"><td>{{str tag=name section=$sec}}</td><td class="value"></td></tr>
<tr class="issuer-url"><td>{{str tag=url section=$sec}}</td><td class="value"></td></tr>
<tr class="issuer-organization"><td>{{str tag=organization section=$sec}}</td><td class="value"></td></tr>
</tbody>
</table>
<h3>{str tag=badgedetails section=$sec}</h3>
<h3>{{str tag=badgedetails section=$sec}}</h3>
<table>
<tbody>
<tr class="badge-name"><td>{str tag=name section=$sec}</td><td class="value"></td></tr>
<tr class="badge-description"><td>{str tag=desc section=$sec}</td><td class="value"></td></tr>
<tr class="badge-criteria"><td>{str tag=criteria section=$sec}</td><td class="value"></td></tr>
<tr class="badge-name"><td>{{str tag=name section=$sec}}</td><td class="value"></td></tr>
<tr class="badge-description"><td>{{str tag=desc section=$sec}}</td><td class="value"></td></tr>
<tr class="badge-criteria"><td>{{str tag=criteria section=$sec}}</td><td class="value"></td></tr>
</tbody>
</table>
<h3>{str tag=issuancedetails section=$sec}</h3>
<h3>{{str tag=issuancedetails section=$sec}}</h3>
<table>
<tbody>
<tr class="issuance-evidence"><td>{str tag=evidence section=$sec}</td><td class="value"></td></tr>
<tr class="issuance-issuedon"><td>{str tag=issuedon section=$sec}</td><td class="value"></td></tr>
<tr class="issuance-expires"><td>{str tag=expires section=$sec}</td><td class="value"></td></tr>
<tr class="issuance-evidence"><td>{{str tag=evidence section=$sec}}</td><td class="value"></td></tr>
<tr class="issuance-issuedon"><td>{{str tag=issuedon section=$sec}}</td><td class="value"></td></tr>
<tr class="issuance-expires"><td>{{str tag=expires section=$sec}}</td><td class="value"></td></tr>
</tbody>
</table>
</div>
......
<div id="openbadges{$id}" class="openbadgedisplayer">{$badgehtml|safe}</div>
<div id="openbadges{{$id}}" class="openbadgedisplayer">{{$badgehtml|safe}}</div>
<script type="text/javascript">
<script type="application/javascript">
(function ($) {
var blockid = {$id};
var has_pagemodal = {$has_pagemodal};
{literal}
function shorten(str) {
var n = 40;
......@@ -29,7 +25,7 @@
if (!url) {
return '-';
}
return $('<a/>').attr({ href: url, title: url, target: '_blank' }).text(shorten(url));
return $('<a/>').attr({ href: url, title: url }).text(shorten(url));
}
function buildBadgeContent(assertion) {
......@@ -51,28 +47,34 @@
return el.prop('outerHTML');
}
$(function () {
$('#openbadges' + blockid).on('click', 'img', function () {
showPreview('small', {html: buildBadgeContent($(this).data('assertion'))});
function showBadgeContent(data) {
/* Add a modal dialog if not exists */
if (jQuery('div#content').length == 1 && jQuery('div#content #badge-content-dialog').length == 0) {
jQuery('div#content').append(
'<div id="badge-content-dialog" class="modal fade page-modal js-page-modal" role="dialog"> ' +
' <div class="modal-dialog">' +
' <div class="modal-content">' +
' <div class="modal-body"></div>' +
' <div class="modal-footer">' +
' <button type="button" class="btn btn-default" data-dismiss="modal">{{str tag=Close}}</button>' +
' </div>' +
' </div>' +
' </div>' +
'</div>');
}
jQuery('#badge-content-dialog .modal-body').html(data.html);
jQuery('#badge-content-dialog').modal('show');
// We don't have that shiny new pagemodal used in 15.10. Let's
// do this the old way.
if (!has_pagemodal) {
$('#viewpreviewinner').width('480px');
$("#viewpreview").removeClass('hidden');
$("#viewpreview").width('500px');
$("#viewpreview").show();
disconnectAll('viewpreviewcontent');
}
}
$(function () {
$('#openbadges{{$id}}').on('click', 'img', function () {
showBadgeContent({html: buildBadgeContent($(this).data('assertion'))});
});
});
})(jQuery);
</script>
{/literal}
{* Include the template only if it exists. *}
{if $has_pagemodal}
{include file="pagemodal.tpl"}
{/if}
{include file="blocktype:openbadgedisplayer:badge.tpl"}
{{* {include file="pagemodal.tpl"} *}}
{{include file="blocktype:openbadgedisplayer:badge.tpl"}}
......@@ -12,14 +12,14 @@
function showPreview(size, data) {
if (size === 'small') {
jQuery('.js-page-modal .modal-dialog').removeClass('modal-lg');
jQuery('#page-modal .modal-dialog').removeClass('modal-lg');
}
else {
jQuery('.js-page-modal .modal-dialog').addClass('modal-lg');
jQuery('#page-modal .modal-dialog').addClass('modal-lg');
}
jQuery('.js-page-modal .modal-body').html(data.html);
jQuery('.js-page-modal').modal('show');
jQuery('#page-modal .modal-body').html(data.html);
jQuery('#page-modal').modal('show');
}
......
......@@ -3,7 +3,7 @@
<div class="modal-content">
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" data-dismiss="modal">{str tag=Close}</button>
</div>
</div>
</div>
......
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