Commit 66e7468a authored by Robert Lyon's avatar Robert Lyon

Bug 1785938: Fixing gallery and changing slimbox2 to fancybox3

Things done with this patch:

1) Changed the 'Use photo frame' option from being a plugin variable
   to being an instance config variable

2) Added back in the css for the giving the gallery images photo frame
   borders

3) Get the non-square thumbs to render correctly spaced on load

4) Swapped the slimbox2 to fancybox3 and allowed the block itself to
control when to put content into head data

behatnotneeded

Change-Id: I397be45f2347588988b663b25b560d8ab876afe1
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 3b8a5cf8
......@@ -32,8 +32,8 @@ $string['showdescriptionsdescription'] = 'Select to caption each image with its
$string['cannotdisplayslideshow'] = 'Cannot display slideshow.';
$string['gallerysettings'] = 'Gallery settings';
$string['useslimbox2'] = 'Use Slimbox 2';
$string['useslimbox2desc2'] = 'Use Slimbox 2 in your gallery. When you click on images in your gallery, they will open in an overlay on the current page.';
$string['usefancybox'] = 'Use Fancybox 3';
$string['usefancyboxdesc'] = 'Use Fancybox 3 in your gallery. When you click on images in your gallery, they will open in an overlay on the current page.';
$string['photoframe'] = 'Use photo frame';
$string['photoframedesc2'] = 'Show a frame around the thumbnail of each photo in the gallery.';
$string['previewwidth'] = 'Maximum photo width';
......@@ -63,3 +63,16 @@ $string['picasaalbums'] = 'Picasa albums';
$string['windowslivephotoalbums'] = 'Windows Live photo gallery albums';
$string['externalnotsupported'] = 'The external URL you provided is not supported';
// Fancybox 3
$string['CLOSE'] = "Close";
$string['NEXT'] = "Next";
$string['PREV'] = "Previous";
$string['ERROR'] = "The requested content cannot be loaded. <br/> Please try again later.";
$string['PLAY_START'] = "Start slideshow";
$string['PLAY_STOP'] = "Pause slideshow";
$string['FULL_SCREEN'] = "Full screen";
$string['THUMBS'] = "Thumbnails";
$string['DOWNLOAD'] = "Download";
$string['SHARE'] = "Share";
$string['ZOOM'] = "Zoom";
\ No newline at end of file
......@@ -188,6 +188,15 @@ abstract class PluginBlocktype extends Plugin implements IPluginBlocktype {
return array();
}
/**
* This function must be implemented in the subclass if it requires
* css file outside of sass compiled css. It returns an array of css files, either local
* or remote.
*/
public static function get_instance_css(BlockInstance $instance) {
return array();
}
/**
* Inline js to be executed when a block is rendered.
*/
......@@ -1028,7 +1037,7 @@ class BlockInstance {
$smarty->assign('row', $this->get('row'));
$smarty->assign('column', $this->get('column'));
$smarty->assign('order', $this->get('order'));
$smarty->assign('blocktype', $this->get('blocktype'));
$smarty->assign('movecontrols', $movecontrols);
$smarty->assign('configurable', call_static_method($blocktypeclass, 'has_instance_config'));
$smarty->assign('configure', $configure); // Used by the javascript to rewrite the block, wider.
......
......@@ -47,14 +47,6 @@ if ($USER->is_logged_in()) {
$skin = false;
}
// include slimbox2 js and css files, if it is enabled...
if (get_config_plugin('blocktype', 'gallery', 'useslimbox2')) {
$langdir = (get_string('thisdirection', 'langconfig') == 'rtl' ? '-rtl' : '');
$stylesheets = array_merge($stylesheets, array('<script type="application/javascript" src="' . append_version_number(get_config('wwwroot') . 'lib/slimbox2/js/slimbox2.js') . '"></script>',
'<link rel="stylesheet" type="text/css" href="' . append_version_number(get_config('wwwroot') . 'lib/slimbox2/css/slimbox2' . $langdir . '.css') . '">'
));
}
$viewcontent = $view->build_rows(); // Build content before initialising smarty in case pieform elements define headers.
$smarty = smarty(
$javascript,
......
Fancybox in Mahara
==================
Website: https://fancyapps.com/fancybox/3/
Version: 3.3.5
Installation:
* Copied the dist/jquery.fancybox.min.js and dist/jquery.fancybox.min.css to here
Changes:
* None
This diff is collapsed.
This diff is collapsed.
......@@ -6000,5 +6000,11 @@ function xmldb_core_upgrade($oldversion=0) {
}
}
if ($oldversion < 2018081000) {
log_debug('Update gallery plugin to use Fancybox');
execute_sql("DELETE FROM {blocktype_config} WHERE plugin = 'gallery' AND field = 'photoframe'");
execute_sql("UPDATE {blocktype_config} SET field = 'usefancybox' WHERE plugin = 'gallery' AND field = 'useslimbox2'");
}
return $status;
}
Slimbox in Mahara
======================
Website: http://www.digitalia.be/software/slimbox2
Version: 2.05
This library is used to overlay images on the page.
It is a clone of Lightbox 2.
(available at http://www.huddletogether.com/projects/lightbox2/)
Changes:
* Swapped the prev, next, close images for ones without lang strings
on them and adjusted the css to fit new images
* Changed the 'Image {x} of {y}' string to be supplied by mahara so
can be translated
/* SLIMBOX */
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
right: 0;
}
#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 100% 15%;
}
#lbNextLink {
left: 0;
}
#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 0 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: right;
border: 10px solid #fff;
border-top-style: none;
direction: rtl;
}
#lbCloseLink {
display: block;
float: left;
width: 22px;
height: 22px;
background: transparent url(closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-left: 71px;
}
#lbCaption {
font-weight: bold;
}
/* SLIMBOX */
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 22px;
height: 22px;
background: transparent url(closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
/*!
Slimbox v2.05 - The ultimate lightweight Lightbox clone for jQuery
(c) 2007-2013 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
*/
(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),J=new Image(),H,a,g,p,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />').click(C)[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:strings['imagexofy'],closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+(E.height()/2);L=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:L,height:r,marginLeft:-L/2}).show();v=m||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();j(1);f=O;u.loop=u.loop&&(f.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function j(M){if(M){w("object").add(m?"select":"embed").each(function(O,P){s[O]=[P,P.style.visibility];P.style.visibility="hidden"})}else{w.each(s,function(O,P){P[0].style.visibility=P[1]});s=[]}var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",o)}function o(O){var N=O.which,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?e():(M(N,u.previousKeys)>=0)?B():null}function B(){return b(x)}function e(){return b(D)}function b(M){if(M>=0){F=M;n=f[F][0];x=(F||(u.loop?f.length:0))-1;D=((F+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,I,d]).height(k.height);w(A).html(f[F][1]||"");w(K).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(D>=0){J.src=f[D][0]}L=g.offsetWidth;r=g.offsetHeight;var M=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+r,marginLeft:-L/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function q(){k.onload=null;k.src=t.src=J.src=n;w([a,g,c]).stop(true);w([I,d,g,G]).hide()}function C(){if(F>=0){q();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}
\ No newline at end of file
......@@ -16,7 +16,7 @@ $config = new stdClass();
// See https://wiki.mahara.org/wiki/Developer_Area/Version_Numbering_Policy
// For upgrades on stable branches, increment the version by one. On master, use the date.
$config->version = 2018080901;
$config->version = 2018081000;
$config->series = '18.10';
$config->release = '18.10dev';
$config->minupgradefrom = 2015030409;
......
......@@ -2522,7 +2522,7 @@ class View {
);
foreach($instancejs as $jsfile) {
if (is_array($jsfile) && isset($jsfile['file'])) {
$javascriptfiles[] = $this->add_blocktype_path($blockinstance, $jsfile['file']);;
$javascriptfiles[] = $this->add_blocktype_path($blockinstance, $jsfile['file']);
if (isset($jsfile['initjs'])) {
$initjavascripts[] = $jsfile['initjs'];
}
......@@ -2571,7 +2571,13 @@ class View {
}
$hrefs = $THEME->get_url('style/style.css', true, $artefactdir . 'blocktype/' . $pluginname);
$hrefs = array_reverse($hrefs);
$classname = generate_class_name('blocktype', $pluginname);
$instancecss = call_static_method(
$classname,
'get_instance_css',
$blockinstance
);
$hrefs = array_merge($hrefs, $instancecss);
foreach ($hrefs as $href) {
$cssfiles[] = '<link rel="stylesheet" type="text/css" href="' . append_version_number($href) . '">';
}
......
<div id="thumbnails{$instanceid}" class="panel-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">
<a rel="{$image.slimbox2}" href="{$image.link}" title="{$image.title}">
<a data-fancybox="{$image.fancybox}" href="{$image.link}" title="{$image.title}" data-caption="{$image.title}">
<img src="{$image.source}" alt="{$image.title}" title="{$image.title}" width="{if $image.width}{$image.width}{else}{$width}{/if}" height="{if $image.height}{$image.height}{else}{$width}{/if}" {if $frame}class="frame center-block"{/if}/>
</a>
{if $showdescription && $image.title}
......
<div id="thumbnails{$instanceid}" class="panel-body thumbnails js-masonry">
{foreach from=$images item=image}
<div style="width: {$width * 1.5}px;" class="thumb">
<a rel="{$image.slimbox2}" href="{$image.link}" title="{$image.title}">
<a data-fancybox="{$image.fancybox}" href="{$image.link}" title="{$image.title}" data-caption="{$image.title}">
<img src="{$image.source}" {if $image.height}height="{$image.height}"{/if} alt="{$image.title}" title="{$image.title}" {if $frame}class="frame center-block"{/if} />
</a>
{if $showdescription && $image.title}
......
......@@ -264,7 +264,7 @@
.thumbnails {
padding-top: 20px;
.thumb {
margin: 5px;
margin: 5px 0px 10px 5px;
}
}
.thumbnail {
......@@ -273,6 +273,16 @@
margin-bottom: 10px;
}
}
.bt-gallery,
.bt-gallery-editor {
img.frame {
padding: 3px;
margin: 0;
border: 1px solid #ccc;
background: #fff;
box-shadow: 0 0 0 4px #fff, 0 0 1px 4px #333;
}
}
.user-thumbnails {
.user-icon {
......
<div class="js-blockinstance blockinstance panel panel-secondary clearfix {if $configure} configure{elseif $retractable} retractable{/if}" data-id="{$id}" id="blockinstance_{$id}{if $configure}_configure{/if}">
<div class="bt-{$blocktype}-editor js-blockinstance blockinstance panel panel-secondary clearfix {if $configure} configure{elseif $retractable} retractable{/if}" data-id="{$id}" id="blockinstance_{$id}{if $configure}_configure{/if}">
<h3 class="panel-heading js-heading drag-handle {if !$title}panel-heading-placeholder{/if}">
<span class="icon icon-arrows move-indicator" role="presentation" aria-hidden="true"></span>
<span class="blockinstance-header">
......
......@@ -108,13 +108,6 @@ if ($viewtheme && $THEME->basename != $viewtheme) {
}
$stylesheets = array();
$stylesheets = array_merge($stylesheets, $view->get_all_blocktype_css());
// include slimbox2 js and css files, if it is enabled...
if (get_config_plugin('blocktype', 'gallery', 'useslimbox2')) {
$langdir = (get_string('thisdirection', 'langconfig') == 'rtl' ? '-rtl' : '');
$stylesheets = array_merge($stylesheets, array('<script type="application/javascript" src="' . append_version_number(get_config('wwwroot') . 'lib/slimbox2/js/slimbox2.js') . '"></script>',
'<link rel="stylesheet" type="text/css" href="' . append_version_number(get_config('wwwroot') . 'lib/slimbox2/css/slimbox2' . $langdir . '.css') . '">'
));
}
$name = display_name($user);
define('TITLE', $name);
......
......@@ -276,15 +276,6 @@ if (!$view->is_public()) {
$headers[] = '<meta name="robots" content="noindex">'; // Tell search engines not to index non-public views
}
// include slimbox2 js and css files, if it is enabled...
if (get_config_plugin('blocktype', 'gallery', 'useslimbox2')) {
$langdir = (get_string('thisdirection', 'langconfig') == 'rtl' ? '-rtl' : '');
$headers = array_merge($headers, array(
'<script type="application/javascript" src="' . append_version_number(get_config('wwwroot') . 'lib/slimbox2/js/slimbox2.js') . '"></script>',
'<link rel="stylesheet" type="text/css" href="' . append_version_number(get_config('wwwroot') . 'lib/slimbox2/css/slimbox2' . $langdir . '.css') . '">'
));
}
$can_edit = $USER->can_edit_view($view) && !$submittedgroup && !$view->is_submitted();
$can_copy = $view->is_copyable();
......
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