Skip to content

Commit

Permalink
discoPane, now with zCarousel!
Browse files Browse the repository at this point in the history
  • Loading branch information
@potch
potch committed Mar 24, 2011
1 parent 1725b95 commit 6bc33fe
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 232 deletions.
4 changes: 2 additions & 2 deletions apps/discovery/templates/discovery/addons/detail.html
View file
Expand Up @@ -39,14 +39,14 @@
<li class="nav-next"><a href="#" class="next">{{ _('Next') }}</a></li>
</ul>
<ul class="slider">
{% for preview in addon.all_previews %}
{%- for preview in addon.all_previews -%}
<li class="panel">
<a class="screenshot thumbnail" rel="jquery-lightbox"
href="{{ preview.image_url }}" title="{{ preview.caption }}">
<img src="{{ preview.thumbnail_url }}">
</a>
</li>
{% endfor %}
{%- endfor -%}
</ul>
</div>
{% endif %}
Expand Down
4 changes: 1 addition & 3 deletions apps/discovery/templates/discovery/pane.html
View file
Expand Up @@ -36,9 +36,7 @@ <h1><img src="{{ media('img/zamboni/discovery_pane/logo-addons.png') }}"
<li class="nav-next"><a href="#" class="next">{{ _('Next') }}</a></li>
</ul>
<ul class="slider">
{% for module in modules %}
{{ module.render() }}
{% endfor %}
{% for module in modules %}{{ module.render() }}{% endfor %}
</ul>
</section>

Expand Down
23 changes: 16 additions & 7 deletions media/css/zamboni/discovery-pane.css
View file
Expand Up @@ -349,8 +349,21 @@ header:after,
box-shadow: none;
}

.panel {
.slider {
white-space:nowrap;
position: relative;
left: 0;
-moz-transition-duration: .3s;
-moz-transition-property: left, right;
-webkit-transition-duration: .3s;
-webkit-transition-property: left, right;
}

.slider > li {
width: 100%;
white-space: normal;
display: inline-block;
vertical-align: top;
top: 0;
}

Expand Down Expand Up @@ -1464,6 +1477,7 @@ a#lightbox-secNav-btnClose {
box-shadow: inset 0 1px 3px rgba(58,78,103,0.15), 0 1px 0 rgba(255,255,255,0.5);
max-height: 140px;
display: none;
position: relative;
overflow: hidden;
border-radius: 8px;
}
Expand Down Expand Up @@ -1491,13 +1505,8 @@ a#lightbox-secNav-btnClose {
overflow: hidden;
}

#images .panel,
#recs .panel {
float: left;
}

#images.js .panel {
width: 33%;
width: -moz-calc(100% / 3);
margin: 0 -3px;
padding: 15px 0;
text-align: center;
Expand Down
248 changes: 34 additions & 214 deletions media/js/zamboni/discovery_addons.js
View file
@@ -1,196 +1,46 @@
/**
* jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
* @requires jQuery v1.2 or above
* zCarousel: like jCarouselLite, but good.
* by potch
*
* http://gmarwaha.com/jquery/jcarousellite/
*
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Version: 1.0.1
* Note: Requires jquery 1.2 or above from version 1.0.1
* handles fluid layouts like a champ!
*/

(function($) {
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,

speed: 200,
easing: null,

vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,

beforeStart: null,
afterEnd: null
}, o || {});

return this.each(function() {
// Returns the element collection. Chainable.

var running = false,
animCss = o.vertical ? "top" : "left",
sizeCss = o.vertical ? "height" : "width",
div = $(this),
ul = $(".slider", div),
tLi = $(".panel", ul),
tl = tLi.size(),
v = o.visible;

if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}

if (!o.circular && o.scroll > 1) {
while (tl % o.scroll != 0) {
ul.append('<li class="panel"></li>');
tl++;
}
}

var li = $(".panel", ul), itemLength = li.size(), curr = o.start;
div.css("visibility", "visible");

li.css({"float": o.vertical ? "none" : "left"});
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0"});

// Full li size (including margin, used for animation).
var liSize = o.vertical ? li.outerHeight(true) : li.outerWidth(true);
// Size of full ul (total length, not just for the visible items).
var ulSize = liSize * itemLength;
// Size of entire div (total length, for only the visible items).
var divSize = liSize * v;

li.css({width: li.width(), height: li.height()});
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

// Width of the DIV. length of visible images.
//div.css(sizeCss, divSize+"px");

if (!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
if (o.btnPrev && curr == 0) {
$(o.btnPrev).addClass("disabled");
}
if (o.btnNext && curr >= itemLength - v) {
$(o.btnNext).addClass("disabled");
$.fn.zCarousel = function(o) {
o = $.extend({
itemsPerPage: 1,
circular: false
}, o);

this.each(function() {
var $self = $(this),
$strip = $(".slider", $self),
$prev = $(o.btnPrev),
$next = $(o.btnNext),
prop = $("body").hasClass("html-rtl") ? "right" : "left",
currentPos = 0,
maxPos = Math.ceil($strip.find(".panel").length / o.itemsPerPage) - 1;
function render(pos) {
if (o.circular) {
currentPos = (pos > maxPos) ? (0) : (pos < 0 ? maxPos : pos);
} else {
currentPos = Math.min(Math.max(0, pos), maxPos);
}
$strip.css(prop, currentPos * -100 + "%");
$prev.toggleClass("disabled", currentPos == 0 && !o.circular);
$next.toggleClass("disabled", currentPos == maxPos && !o.circular);
}

if(o.btnPrev) {
$(o.btnPrev).click(function() {
var to = curr - o.scroll;
if (!o.circular && to < 0) {
to = 0;
}
return go(to);
});
}

if(o.btnNext) {
$(o.btnNext).click(function() {
var to = curr + o.scroll;
if (!o.circular && to > itemLength - v - 1){
to = itemLength - v;
}
return go(to);
});
}

if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
});

if(o.mouseWheel && div.mousewheel)
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});

if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);

function vis() {
return li.slice(curr).slice(0,v);
};

function go(to) {
if(!running) {
if(o.beforeStart)
o.beforeStart.call(this, vis());

if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2-curr))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to == o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll+curr;
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -((curr - (itemLength - (v*2))) * liSize) + "px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to == itemLength-v+1 ? v+1 : curr - (itemLength - (v*2)) + o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return false;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.

running = true;

ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first,
// and enable when not.
if (!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
if (o.btnPrev && curr == 0) {
$(o.btnPrev).addClass("disabled");
}
if (o.btnNext && curr >= itemLength - v) {
$(o.btnNext).addClass("disabled");
}
}

}
return false;
};

// Change panel widths on resize to keep the page liquid
$(window).resize(function(){
setPanelWidth("both");
liSize = o.vertical ? li.outerHeight(true) : li.outerWidth(true);
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
});

$next.click(_pd(function() {
render(currentPos+1);
}));
$prev.click(_pd(function() {
render(currentPos-1);
}));
render(0);
});
};

function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0;
};

})(jQuery);


Expand All @@ -213,44 +63,16 @@ function debounce(fn, ms, ctxt) {
};
}


function setPanelWidth(section) {
// Set the width of panels (jCarousel requires a pixel width but our page
// is liquid, so we'll set the width in px on pageload and on resize).
var panelWidth = $("#main").width();
if (section == "both" || section == "detail") {
$("#images").css("width", panelWidth);
// We show three images at a time, so the width of each is 1/3 minus a
// right margin of 10px.
$("#images .panel").css("width", panelWidth / 3 - 10);
}
if (section == "both" || section == "pane") {
$("#main-feature, #main-feature .panel").css("width", panelWidth);
var galleryWidth = $("#recs .gallery").width(),
panelWidth = 0.3 * galleryWidth,
panelRight = 0.05 * galleryWidth;
$("#recs .panel").css({"margin-right": panelRight, "width": panelWidth});
$("#recs .panel:nth-child(3n)").each(function (i) {
if (i > 0) {
$(this).css("margin-left", -2);
}
$(this).css("margin-right", panelRight + i + 2);
});
$("#recs .panel:last-child").css("margin-right", 0);
}
}


function initDetail() {
$(".install-action a").attr("target", "_self");

// Replace with the URL back to the discovery promo pane.
$("p#back a").attr("href", Storage.get("discopane-url"));

$("#images").fadeIn("slow").addClass("js").jCarouselLite({
$("#images").fadeIn("slow").addClass("js").zCarousel({
btnNext: "#images .nav-next a",
btnPrev: "#images .nav-prev a",
circular: false
itemsPerPage: 3
});
$(".addon-info").addClass("js");

Expand All @@ -265,6 +87,4 @@ function initDetail() {
imageBtnNext: "",
containerResizeSpeed: 350
});

setPanelWidth("detail");
}
10 changes: 4 additions & 6 deletions media/js/zamboni/discovery_pane.js
View file
Expand Up @@ -20,10 +20,10 @@ $(document).ready(function(){
initRecs();

// Set up the promo carousel.
$("#main-feature").fadeIn("slow").addClass("js").jCarouselLite({
$("#main-feature").fadeIn("slow").addClass("js").zCarousel({
btnNext: "#main-feature .nav-next a",
btnPrev: "#main-feature .nav-prev a",
visible: 1
circular: true
});

initTrunc();
Expand Down Expand Up @@ -122,14 +122,12 @@ function initRecs() {
}
$("#recs .slider").append(li);
});
$("#recs .gallery").fadeIn("slow").addClass("js").jCarouselLite({
$("#recs .gallery").fadeIn("slow").addClass("js").zCarousel({
btnNext: "#recs .nav-next a",
btnPrev: "#recs .nav-prev a",
scroll: 3,
circular: false
itemsPerPage: 3
});
$("#recs #nav-recs").fadeIn("slow").addClass("js");
setPanelWidth("pane");
initTrunc();
$("#recs .persona-preview").previewPersona(true);
} else {
Expand Down

0 comments on commit 6bc33fe

Please sign in to comment.