From 63d73e2cd779b7773bfceb2ffdb9630e42175e6a Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Tue, 24 Aug 2010 17:07:33 +0200 Subject: [PATCH] sexy sponsors --- apps/sponsors/models.py | 2 +- apps/sponsors/templates/sponsors/page.html | 17 ++- wolnelektury/settings.py | 1 + wolnelektury/static/css/sponsors.css | 16 ++- wolnelektury/static/js/catalogue.js | 2 + wolnelektury/static/js/jquery.marquee.js | 155 +++++++++++++++++++++ 6 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 wolnelektury/static/js/jquery.marquee.js diff --git a/apps/sponsors/models.py b/apps/sponsors/models.py index 3c2ca0247..a2e3e0857 100644 --- a/apps/sponsors/models.py +++ b/apps/sponsors/models.py @@ -17,7 +17,7 @@ class Sponsor(models.Model): _('logo'), upload_to='sponsorzy/sponsor/logo', thumbnail={ - 'size': (120, 60), + 'size': (120, 120), 'extension': 'png', 'options': ['pad', 'detail'], }) diff --git a/apps/sponsors/templates/sponsors/page.html b/apps/sponsors/templates/sponsors/page.html index c2f534e07..77624fb98 100644 --- a/apps/sponsors/templates/sponsors/page.html +++ b/apps/sponsors/templates/sponsors/page.html @@ -1,11 +1,10 @@ -
+ {% for column in sponsors %} -
-

{{ column.name|default:" " }}

- {% for sponsor in column.sponsors %} -
{% if sponsor.url %}{% endif %}{% if sponsor.url %}{% endif %}
- {% endfor %} -
+ + {{ column.name }} + {% for sponsor in column.sponsors %} + {% if sponsor.url %}{% endif %}{% if sponsor.url %}{% endif %} + {% endfor %} + {% endfor %} -
- + diff --git a/wolnelektury/settings.py b/wolnelektury/settings.py index 01cfcf4c8..9396a1dd1 100644 --- a/wolnelektury/settings.py +++ b/wolnelektury/settings.py @@ -159,6 +159,7 @@ COMPRESS_JS = { 'js/jquery.countdown-de.js', 'js/jquery.countdown-uk.js', 'js/jquery.countdown-es.js', 'js/jquery.countdown-lt.js', 'js/jquery.countdown-ru.js', 'js/jquery.countdown-fr.js', + 'js/jquery.marquee.js', 'js/jquery.jqmodal.js', 'js/jquery.labelify.js', 'js/catalogue.js', ), 'output_filename': 'js/all?.min.js', diff --git a/wolnelektury/static/css/sponsors.css b/wolnelektury/static/css/sponsors.css index f780972e2..4b847dc76 100644 --- a/wolnelektury/static/css/sponsors.css +++ b/wolnelektury/static/css/sponsors.css @@ -1,8 +1,14 @@ +.sponsors-sponsor-logo { + margin-left: 1em; + vertical-align: middle; +} + .sponsors-sponsor-column { - float: left; - overflow: hidden; + line-height: 120px; + padding-right: 5em; } -.sponsors-sponsor-logo { - float: left; -} \ No newline at end of file +.sponsors-sponsor-column-name { + font-weight: bold; + font-size: 1.25em; +} diff --git a/wolnelektury/static/js/catalogue.js b/wolnelektury/static/js/catalogue.js index 9a353993f..b185c29eb 100644 --- a/wolnelektury/static/js/catalogue.js +++ b/wolnelektury/static/js/catalogue.js @@ -446,5 +446,7 @@ function serverTime() { $('#download-shelf-menu').slideUp('fast'); return false; }); + + $('marquee').marquee() }); })(jQuery) diff --git a/wolnelektury/static/js/jquery.marquee.js b/wolnelektury/static/js/jquery.marquee.js new file mode 100644 index 000000000..d0200ef2f --- /dev/null +++ b/wolnelektury/static/js/jquery.marquee.js @@ -0,0 +1,155 @@ +/** +* author Remy Sharp +* url http://remysharp.com/tag/marquee +*/ + +(function ($) { + $.fn.marquee = function (klass) { + var newMarquee = [], + last = this.length; + + // works out the left or right hand reset position, based on scroll + // behavior, current direction and new direction + function getReset(newDir, marqueeRedux, marqueeState) { + var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir; + var r = 0; + if (behavior == 'alternate') { + r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width; + } else if (behavior == 'slide') { + if (newDir == -1) { + r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width; + } else { + r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0; + } + } else { + r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0; + } + return r; + } + + // single "thread" animation + function animateMarquee() { + var i = newMarquee.length, + marqueeRedux = null, + $marqueeRedux = null, + marqueeState = {}, + newMarqueeList = [], + hitedge = false; + + while (i--) { + marqueeRedux = newMarquee[i]; + $marqueeRedux = $(marqueeRedux); + marqueeState = $marqueeRedux.data('marqueeState'); + + if ($marqueeRedux.data('paused') !== true) { + // TODO read scrollamount, dir, behavior, loops and last from data + marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir); + + // only true if it's hit the end + hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState); + + if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) { + if (marqueeState.behavior == 'alternate') { + marqueeState.dir *= -1; // flip + } + marqueeState.last = -1; + + $marqueeRedux.trigger('stop'); + + marqueeState.loops--; + if (marqueeState.loops === 0) { + if (marqueeState.behavior != 'slide') { + marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState); + } else { + // corrects the position + marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState); + } + + $marqueeRedux.trigger('end'); + } else { + // keep this marquee going + newMarqueeList.push(marqueeRedux); + $marqueeRedux.trigger('start'); + marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState); + } + } else { + newMarqueeList.push(marqueeRedux); + } + marqueeState.last = marqueeRedux[marqueeState.axis]; + + // store updated state only if we ran an animation + $marqueeRedux.data('marqueeState', marqueeState); + } else { + // even though it's paused, keep it in the list + newMarqueeList.push(marqueeRedux); + } + } + + newMarquee = newMarqueeList; + + if (newMarquee.length) { + setTimeout(animateMarquee, 25); + } + } + + // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events... + this.each(function (i) { + var $marquee = $(this), + width = $marquee.attr('width') || $marquee.width(), + height = $marquee.attr('height') || $marquee.height(), + $marqueeRedux = $marquee.after('
' + $marquee.html() + '
').next(), + marqueeRedux = $marqueeRedux.get(0), + hitedge = 0, + direction = ($marquee.attr('direction') || 'left').toLowerCase(), + marqueeState = { + dir : /down|right/.test(direction) ? -1 : 1, + axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop', + widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight', + last : -1, + loops : $marquee.attr('loop') || -1, + scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2, + behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(), + width : /left|right/.test(direction) ? width : height + }; + + // corrects a bug in Firefox - the default loops for slide is -1 + if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') { + marqueeState.loops = 1; + } + + $marquee.remove(); + + // add padding + if (/left|right/.test(direction)) { + $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px'); + } else { + $marqueeRedux.find('> div').css('padding', height + 'px 0'); + } + + // events + $marqueeRedux.bind('stop', function () { + $marqueeRedux.data('paused', true); + }).bind('pause', function () { + $marqueeRedux.data('paused', true); + }).bind('start', function () { + $marqueeRedux.data('paused', false); + }).bind('unpause', function () { + $marqueeRedux.data('paused', false); + }).data('marqueeState', marqueeState); // finally: store the state + + // todo - rerender event allowing us to do an ajax hit and redraw the marquee + + newMarquee.push(marqueeRedux); + + marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState); + $marqueeRedux.trigger('start'); + + // on the very last marquee, trigger the animation + if (i+1 == last) { + animateMarquee(); + } + }); + + return $(newMarquee); + }; +}(jQuery)); -- 2.20.1