Merge pull request #90 from fredrike/master

Updated version of the theme .pear.

3.0/themes/pear4gallery3/admin/controllers/admin_theme_options.php

@@ -87,7 +87,7 @@ class Admin_Theme_Options_Controller extends Admin_Controller {
       ->checked(module::get_var("th_pear4gallery3", "hide_logo"));
     $group->dropdown("mainmenu_view")
       ->label(t("Main page View"))
-      ->options(array("grid" => t("Grid (Default)"), "mosaic" => t("Mosaic")))
+      ->options(array("grid" => t("Grid (Default)"), "mosaic" => t("Mosaic"), "carousel" => t("Carousel")))
       ->selected(module::get_var("th_pear4gallery3", "mainmenu_view"));
     $group->checkbox("show_guest_menu")
       ->label(t("Show Main Menu for Guest Users"))

3.0/themes/pear4gallery3/css/pear.css

@@ -1,8 +1,6 @@
 .gallery-thumb {
 	float: left;
-	margin-bottom: 5px;
+	padding: 3px 5px 7px 5px;
-	margin-left: 5px;
-	margin-right: 5px;
 	position: relative;
 	text-align: center;
 	cursor: pointer;
@@ -40,9 +38,11 @@ th, td {
 .giTitle {
 	font-size: 1.1em;
 	font-weight: bold;
-	margin: 3px 10px !important;
+	margin: 0.3em 3px !important;
 	padding: 0 0; 
 	text-align: left;
+	height: 1.2em;
+	overflow: hidden;
 }
 
 #gsNavBar div {

3.0/themes/pear4gallery3/icons/pear.css

@@ -1,6 +1,17 @@
 .gallery-thumb-round {
 	background: url('rounded.png') no-repeat scroll left top;
 	position: absolute;
+	height: 200px;
+	width: 200px;
+}
+
+.p-video{
+	background: url('movie.png') no-repeat center;
+	position: absolute;
+	width: 200px;
+	height: 200px;
+	left: 0px;
+	top: 0px;
 }
 
 .skimm_div {
@@ -59,7 +70,7 @@ height:40px;
 	display: block;
 	z-index: 100;
 background: transparent url('pear_logo_sml.png') no-repeat center left;
-width: 83px;
+width: 30px;
 height: 40px;
 border: 0px;
 padding: 0px;
@@ -301,7 +312,7 @@ cursor: default;
 #viewControls {
 position: relative;
 color: #616161;
-width: 381px;
+width: 334px;
 float: left;
 			 margin-left: 30px;
 			 margin-top: 13px;

3.0/themes/pear4gallery3/js/pear.js

@@ -1,3 +1,4 @@
+var viewMode="";
 var skimimg = 0;
 var hash="";
 var bgcolor="black";
@@ -5,9 +6,8 @@ var detailViewMode=false;
 var savedHeight = 0;
 var savedWidth = 0;
 
-$(window).resize(function (e) {
+$(window).resize(function () {
-	if (window.innerHeight == savedHeight && 
+	if (window.innerHeight == savedHeight && window.innerWidth == savedWidth) return; 
-		window.innerWidth == savedWidth) { e.stop(); }
 	savedHeight = window.innerHeight;
 	savedWidth = window.innerWidth;
 	mosaicResize();
@@ -24,7 +24,7 @@ function swatchSkin(intSkin){
 		case 'dkgrey' :
 		case 1 :
 			$('div.gallery-thumb-round').css('backgroundPosition' , "-200px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#262626");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#262626");
 			$('p.giTitle').css("color", "#a9a9a9");
 			$("#dkgrey").addClass("dkgrey sel dkgrey-with-sel-with-swatch");
 			bgcolor="dkgrey";
@@ -33,7 +33,7 @@ function swatchSkin(intSkin){
 		case 'ltgrey' :
 		case 2 :
 			$('div.gallery-thumb-round').css('backgroundPosition' , "-400px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#d9d9d9");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#d9d9d9");
 			$('p.giTitle').css("color", "#333333");
 			$("#ltgrey").addClass("ltgrey sel ltgrey-with-sel-with-swatch");
 			bgcolor="ltgrey";
@@ -42,7 +42,7 @@ function swatchSkin(intSkin){
 		case 'white' :
 		case 3 :
 			$('div.gallery-thumb-round').css('backgroundPosition' , "-600px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#ffffff");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#ffffff");
 			$('p.giTitle').css("color", "#444444");
 			$("#white").addClass("white sel white-with-sel-with-swatch");
 			bgcolor="white";
@@ -52,7 +52,7 @@ function swatchSkin(intSkin){
 		case 0 :
 		default:
 			$('div.gallery-thumb-round').css('backgroundPosition' , "0px 0px");
-			$('#mosaicTable').css('backgroundColor' , "#000");
+			$('#mosaicTable,.pear').css('backgroundColor' , "#000");
 			$('p.giTitle').css("color", "#a3a3a3");
 			$("#black").addClass("black sel black-with-sel-with-swatch");
 			bgcolor="black";
@@ -66,14 +66,16 @@ function scaleIt(v,sliding){
 
 	// Remap the 0-1 scale to fit the desired range
 	//v=.26+(v*(1.0-.26));
-	size = (mosaicView) ? v/2 : v;
+	var size = (mosaicView) ? v/2 : v;
 
 	toggleReflex(true);
 	$(".p-photo").each(function (i) {
 		$(this).attr({height: size+'px',width: size + 'px'});
 		$(this).css({height: size+'px',width: size+'px'});});
+	$(".g-photo").css({width: size+'px'});
 	if(!mosaicView && !sliding)
 		toggleReflex(false);
+	thumbPadding();
 }
 function setCookie(c_name,value,expiredays)
 {
@@ -153,17 +155,24 @@ function swatchImg(imageId)
 	updateHash();
 	$('#info_detail').attr('href', slideshowImages[currentImg][1]);
 }
-
+function getViewMode()
+{
+	var vm = detailViewMode ? "detail" : viewMode;
+	if(vm !== '')
+		vm = "&viewMode=" + vm;
+	return vm;
+}
 function updateHash()
 {
-	viewMode = detailViewMode ? "detail" : (mosaicView ? "mosaic" : "grid");
+	var img="";
-	hash = "#img=" + currentImg + "&viewMode=" + viewMode + "&bgcolor=" + bgcolor;
+	if(currentImg !== 0)
+		img = "img=" + currentImg;
+	hash = "#" + img + getViewMode() + "&bgcolor=" + bgcolor;
 	window.location.hash = hash;
 }
 function getAlbumHash(img)
 {
-	viewMode = detailViewMode ? "detail" : (mosaicView ? "mosaic" : "grid");
+	return "#img=" + img + getViewMode() +  "&bgcolor=" + bgcolor;
-	return "#img=" + img + "&viewMode=" + viewMode + "&bgcolor=" + bgcolor;
 }
 
 var currentImg=0;
@@ -186,8 +195,6 @@ function mosaicResize()
 		myWidth = document.body.clientWidth;
 		myHeight = document.body.clientHeight;
 	}
-	if($('#pearImageFlow').length != 0)
-		$('#pearImageFlow').css({'height' : (myHeight-87)+'px', 'width': myWidth+'px', 'minHeight': ((myHeight-70)*0.9)+'px'});
 	if($('#imageflow').length != 0)
 		$('#imageflow').css({'height': (myHeight-53)+'px', 'width': (((myWidth*0.5)<(myHeight-53)) ? myWidth : ((myHeight-65)*2)) +'px'});
 	$('#detailImageView').css({'height': myHeight-165+"px"});
@@ -196,10 +203,14 @@ function mosaicResize()
 		$('#img_detail').css({'height': iHeight+"px", 'width':iWidth+"px"});
 
 	myWidth=myWidth-7;
+	myHeight = myHeight - $('#g-site-status').outerHeight(true);
+	$('#pearFlowPadd').css({'height' : myHeight-90-(Math.round(myWidth / 2.4))+'px'});
 	($('#paginator').length != 0) ? myHeight-=165: myHeight-=138;
 	myHeight = myHeight - $('#g-site-status').outerHeight(true);
 	$('#g-header').css('top', $('#gsNavBar').outerHeight(true)+$('#g-site-status').outerHeight(true)-4);
 
+	if($('#g-movie').length) 
+		myHeight+=18;
 	if ( !mosaicView )
 	{
 		$('#mosaicGridContainer').css({'height': (myHeight+33)+"px", 'width': myWidth+"px"});
@@ -214,10 +225,20 @@ function mosaicResize()
 		(iRatio>(myWidth/myHeight)) ? $('#mosaicImg').attr({height: myWidth/iRatio,width: myWidth}) : $('#mosaicImg').attr({height: myHeight,width: myHeight*iRatio});
 		if(iHeight<myHeight&&iWidth<myWidth) $('#mosaicImg').attr({height:iHeight, width:iWidth});
 	}
+	thumbPadding();
+
 	if($('#conf_imageflow').length) refresh();
 }
+function thumbPadding() {
+/* Padding on thumbs to make them flow nicer */
+	var size = Math.ceil((mosaicView) ? $('#imgSlider').slider('value')/2 : $('#imgSlider').slider('value'))+10;
+	var width =$('#mosaicGridContainer').innerWidth()-15;
+	var margin = width/Math.floor(width/size)-size;
+	console.log(size, width, margin,"px" );
+	$('.gallery-thumb').css({'margin-left': Math.ceil(margin/2) + 'px', 'margin-right': Math.floor(margin/2) + 'px'});
+}
 
-function bodyLoad(viewMode, bgcolor) {
+function bodyLoad(vm, bgcolor) {
 	/* Parse hash */
 	hash = window.location.hash;
 	var h = $.parseQuery(hash.substring(1));
@@ -225,10 +246,8 @@ function bodyLoad(viewMode, bgcolor) {
 		currentImg = parseInt(h.img);
 	if(h.bgcolor != undefined)
 		swatchSkin(h.bgcolor);
-	if(h.viewMode == 'detail')
+	if(h.viewMode != undefined)
-		focusImage(currentImg, h.redirected);
+		viewMode = vm = h.viewMode;
-	else
-		viewMode = h.viewMode;
 	/* end parse hash */
 	
 	if(navigator.appName == "Microsoft Internet Explorer") $('.track').each(function(s){$(this).css('top', '-16px');}); //Fix for IE's poor page rendering. 
@@ -253,15 +272,22 @@ function bodyLoad(viewMode, bgcolor) {
 	if (co==null || co=="")
 		swatchSkin(bgcolor);
 
+if(typeof slideshowImages != 'undefined')
 	if(!slideshowImages.length) 
-		viewMode='grid';
+		vm='grid';
 
-	switch (viewMode) {
+	switch (vm) {
+		case 'carousel':
+			startImageFlow(false);
+			break;
 		case 'grid':
-			switchToGrid();
+			switchToGrid(false);
 			break;
 		case 'mosaic':
-			switchToMosaic();
+			switchToMosaic(false);
+			break;
+		case 'detail':
+			focusImage(currentImg, h.redirected);
 			break;
 		default:
 			mosaicResize();
@@ -272,10 +298,13 @@ function bodyLoad(viewMode, bgcolor) {
 	setKeys();
 }
 
-function switchToGrid()
+function switchToGrid(userSet)
 {
+	if(userSet === true) {
+		viewMode = "grid";
+	}
 	toggleReflex(true);
-	$('#pearImageFlow').hide();
+	$('#pearImageFlow,#pearFlowPadd').hide();
 	$('#mosaicTable').show();
 	if(!$('#mosaicGridContainer').length) return;
 	mosaicView=false;
@@ -286,13 +315,15 @@ function switchToGrid()
 	$('p.giTitle,div.giInfo').each(function(s){$(this).show();});
 	switchMode('grid');
 	mosaicResize();
-	updateHash();
 }
 
-function switchToMosaic()
+function switchToMosaic(userSet)
 {
+	if(userSet === true) {
+		viewMode = "mosaic";
+	}
 	toggleReflex(false);
-	$('#pearImageFlow').hide(); //.hide(); 
+	$('#pearImageFlow,#pearFlowPadd').hide();
 	$('#mosaicTable').show();
 	if(!$('#mosaicGridContainer').length) return;
 	mosaicView=true;
@@ -361,39 +392,29 @@ function focusImage(id, redirected)
 	$('#info_detail').attr('href', slideshowImages[currentImg][1]);
 }
 var pearCarousel;
-function startImageFlow()
+function startImageFlow(userSet)
 {
+	if(userSet === true) {
+		viewMode = "carousel";
+	}
 	$('#mosaicTable').hide();
 
-	$('#pearImageFlow').show();
+	$('#pearImageFlow,#pearFlowPadd').show();
 
 	toggleReflex(true);
 
-	for (var i = 0; i < slideshowImages.length; i++) {
-		var img = '<div class="item"><img class="content" src="'+slideshowImages[i][0]+'"/><div class="caption">'+$('#mosaicGridContainer img').eq(i).attr('alt')+'"</div></div>';
-		var img = '<img src="'+slideshowImages[i][0]+'" longdesc="'+i+'" width="'+slideshowImages[i][2]+'" height="'+slideshowImages[i][3]+'" alt="'+slideshowImages[i][4]+'" style="display: none;">';
-		console.log(img);
-		$('#pearImageFlow').append(img); 
-	}
 	if(!pearCarousel){
-	pearCarousel = new ImageFlow();
+		for (var i = 0; i < slideshowImages.length; i++) {
-	pearCarousel.init({ImageFlowID: 'pearImageFlow', aspectRatio: 2.4, imagesHeight: 0.6, opacity: true, reflections: false, startID: currentImg, onClick: function() {focusImage($(this).attr('longdesc'));}, startAnimation: true, xStep: 200, imageFocusM: 1.7, imageFocusMax: 4, opacityArray: [10, 9, 6, 2], percentOther: 130, captions: false, slider: false});
+			var img = '<div class="item"><img class="content" src="'+slideshowImages[i][0]+'"/><div class="caption">'+$('#mosaicGridContainer img').eq(i).attr('alt')+'"</div></div>';
+			var img = '<img src="'+slideshowImages[i][0]+'" longdesc="'+i+'" width="'+slideshowImages[i][2]+'" height="'+slideshowImages[i][3]+'" alt="'+slideshowImages[i][4]+'" style="display: none;">';
+	//		console.log(img);
+			$('#pearImageFlow').append(img); 
+		}
+		pearCarousel = new ImageFlow();
+		pearCarousel.init({ImageFlowID: 'pearImageFlow', aspectRatio: 2.4, imagesHeight: 0.6, opacity: true, reflections: false, startID: currentImg+1, onClick: function() {focusImage($(this).attr('longdesc'));}, startAnimation: true, xStep: 200, imageFocusM: 1.7, imageFocusMax: 4, opacityArray: [10, 9, 6, 2], percentOther: 130, captions: false, slider: false});
 	}
-/*
-	current=(currentImg)*-xstep;
-	caption_id=currentImg;
-	refresh(true);
-
-	iShow(conf_images);
-	iShow(conf_scrollbar);
-	initMouseWheel();
-	initMouseDrag();
-	mosaicResize();
-
-	moveTo(current);
-	glideTo(current, caption_id);
-*/
 	switchMode('carousel');
+	mosaicResize();
 }
 function setKeys()
 {
@@ -436,6 +457,7 @@ var hovering=false;
 function switchMode(mode){
 	$('#mosaic,#grid,#carousel').removeClass("sel sel-with-viewSwitcher");
 	$('#'+mode).addClass("sel sel-with-viewSwitcher");
+	updateHash();
 }
 
 function preFetch()

3.0/themes/pear4gallery3/theme.info

@@ -1,6 +1,6 @@
 name = ".Pear Theme"
 description = "A theme with the intention to mimic Apples mobile me gallery."
-version = 2.3
+version = 2.7
 author = "Fredrik Erlandsson <fredrik.e@gmail.com>"
 site = 1
 admin = 0

3.0/themes/pear4gallery3/views/album.html.php

@@ -30,13 +30,19 @@ $(function() {
     <? if ($child->is_photo()): ?>
       <? $img_class = "g-thumbnail p-photo"; ?>
     <? endif ?>
+    <? if ($child->is_movie()): ?>
+      <a href="<?= $child->url() ?>">
+    <? endif ?>
   <div id="g-thumb-id-<?= $child->id ?>" class="g-item gallery-thumb <?= $item_class ?>" title="<?= $child->description?>">
     <?= $theme->thumb_top($child) ?>
-    <? if ($child->is_album()): ?>
+    <? if ($child->is_album() || $child->is_movie()): ?>
-		<div class="gallery-thumb-round" style="height: 200px; width: 200px;"></div>
+		<div class="gallery-thumb-round"></div>
     <? endif ?>
       <? if ($child->has_thumb()): ?>
 		<?= $child->thumb_img(array("class" => $img_class, "id" => "thumb_$child->id", "style" => "width: 200px; height 200px;")) ?>
+    <? if ($child->is_movie()): ?>
+      <span class="p-video"></span>
+    <? endif ?>
       <? endif ?>
 <?// Begin skimming 
 if($child->is_album()):
@@ -47,7 +53,7 @@ if($child->is_album()):
       <? if(++$i > 50) break; ?>
       <? if ($granchild->has_thumb()): ?>
       <?= $granchild->thumb_img(array("style" => "display: none;")) ?>
-	<div class="skimm_div" style="height: 200px; width: <?=$step?>px; left: <?=$offset?>px; top: 0px;" onmouseover="$('#thumb_<?=$child->id?>').attr('src', '<?=$granchild->thumb_url()?>');skimimg=<?=$i?>;" id="area_<?=$granchild->id?>"></div>
+	<div class="skimm_div" style="height: 200px; width: <?=$step?>px; left: <?=$offset?>px; top: 0px;" onmouseover="$('#thumb_<?=$child->id?>').attr('src', '<?=$granchild->thumb_url()?>');skimimg=<?=$i-1?>;" id="area_<?=$granchild->id?>"></div>
       <? endif ?>
 <?		$offset+=$step;
 endforeach; 
@@ -56,6 +62,9 @@ endif;
 	<p class="giTitle <? if(!$child->is_album()) print 'center';?>"><?= html::purify(text::limit_chars($child->title, 20)) ?> </p>
 	<? if($child->is_album()): ?><div class="giInfo"><?= count($granchildren)?> photos</div><? endif ?>
 </div>
+    <? if ($child->is_movie()): ?>
+      </a>
+    <? endif ?>
    <?/* <?= $theme->thumb_bottom($child) ?>
     <?= $theme->context_menu($child, "#g-item-id-{$child->id} .g-thumbnail") ?>
     <h2><span class="<?= $item_class ?>"></span>
@@ -69,7 +78,7 @@ endif;
   var slideshowImages = new Array();
 <? foreach ($children as $i => $child): ?>
 <? if(!($child->is_album() || $child->is_movie())): ?>
-    slideshowImages.push(['<?= $child->resize_url() ?>', '<?= url::site("exif/show/$child->id") ?>', '<?= $child->width ?>','<?= $child->height ?>', '<?= $child->title ?>', '<?= $child->file_url() ?>', '<?= $child->url() ?>']);
+    slideshowImages.push(['<?= $child->resize_url() ?>', '<?= url::site("exif/show/$child->id") ?>', '<?= $child->width ?>','<?= $child->height ?>', '<?= htmlentities($child->title, ENT_QUOTES) ?>', '<?= $child->file_url() ?>', '<?= $child->url() ?>']);
 	<? endif ?>
 <? endforeach ?>
 </script>
@@ -87,4 +96,5 @@ endif;
 <?= $theme->album_bottom() ?>
 
 <?= $theme->paginator() ?>
+<div id="pearFlowPadd" class="imageflow" style="display: none;"></div>
 <div id="pearImageFlow" class="imageflow" style="display: none;"> </div>

3.0/themes/pear4gallery3/views/movie.html.php

@@ -1,9 +1,12 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
+<script type="text/javascript">
+$(function() { bodyLoad('grid',''); });
+</script>
 <div id="g-item">
   <?= $theme->photo_top() ?>
 
   <?= $theme->paginator() ?>
-
+<div id="mosaicGridContainer">
   <div id="g-movie" class="ui-helper-clearfix">
     <?= $theme->resize_top($item) ?>
     <?= $item->movie_img(array("class" => "g-movie", "id" => "g-item-id-{$item->id}")) ?>
@@ -14,6 +17,6 @@
     <h1><?= html::purify($item->title) ?></h1>
     <div><?= nl2br(html::purify($item->description)) ?></div>
   </div>
-
+</div>
   <?= $theme->photo_bottom() ?>
 </div>

3.0/themes/pear4gallery3/views/page.html.php

@@ -122,7 +122,7 @@
 	<? if ($theme->item()): ?>
 		<? if(!empty($parents)): ?>
 		<? $parent = end($parents) ?>
-		<button class="large push large-with-push" onclick="window.location='<?= $parent->url($parent->id == $theme->item()->parent_id ? "show={$theme->item()->id}" : null) ?>';// + '#viewMode=' + viewMode;"> <div class="outer"> <div class="label"> <?= html::purify(text::limit_chars($parent->title, module::get_var("gallery", "visible_title_length"))) ?></div> </div></button>
+		<button class="large push large-with-push" onclick="window.location='<?= $parent->url($parent->id == $theme->item()->parent_id ? "show={$theme->item()->id}" : null) ?>' + '#viewMode=' + viewMode;"> <div class="outer"> <div class="label"> <?= html::purify(text::limit_chars($parent->title, module::get_var("gallery", "visible_title_length"))) ?></div> </div></button>
 		<? endif ?>
 	</div>
 	<div class="pearTitle" title="<?= $theme->item()->description ?>"> <?= html::purify(text::limit_chars($theme->item()->title, 40)) ?> &nbsp;
@@ -154,8 +154,8 @@
 <div id="footerWrapper">
 	<div title="Change size of photos" id="sliderView" class="sliderView">
 		<div class="sliderRightCap"></div>
-		<div title="View at smallest photo size" class="smaller" onclick="$('#slider').slider('value', 0);"></div>
+		<div title="View at smallest photo size" class="smaller" onclick="$('#imgSlider').slider('value', 0);"></div>
-		<div title="View at largest photo size" class="larger" onclick="$('#slider').slider('value', 250);"></div>
+		<div title="View at largest photo size" class="larger" onclick="$('#imgSlider').slider('value', 250);"></div>
 		<div id="imgSlider" class="track">
 		</div>
 	</div>
@@ -169,14 +169,15 @@
 	</div>
 
 	<div class="" style="" id="viewControls">
-		<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher" onclick="switchToGrid();">
+<? if ($theme->page_subtype != "movie"): ?>
+		<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher" onclick="switchToGrid(true);">
 			<div class="label">Grid</div>
 		</div>
-		<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic" onclick="switchToMosaic();">
+		<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic" onclick="switchToMosaic(true);">
 			<!-- <div style="margin-top:-2px;margin-left:-4px;"> -->
 			<div class="label">Mosaic</div>
 		</div>
-		<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher" onclick="startImageFlow();">
+		<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher" onclick="startImageFlow(true);">
 			<!-- <div style="margin-top:-2px;"> -->
 			<div class="label">Carousel</div>
 		</div>
@@ -185,6 +186,7 @@
 			<div class="label">Slideshow</div>
 		</div>
 		<div class="clear"></div>
+<? endif ?>
 	</div>
 	<? if (!module::get_var("th_pear4gallery3", "hide_logo")): ?><button id="logoButton"></button><?endif?>
 </div>