fixes #874: got rid of marqee
authorRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Wed, 22 Sep 2010 11:23:26 +0000 (13:23 +0200)
committerRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Wed, 22 Sep 2010 11:23:26 +0000 (13:23 +0200)
apps/sponsors/templates/sponsors/page.html
wolnelektury/settings.py
wolnelektury/static/css/sponsors.css
wolnelektury/static/js/catalogue.js
wolnelektury/static/js/jquery.cycle.min.js [new file with mode: 0644]
wolnelektury/static/js/jquery.marquee.js [deleted file]

index 77624fb..d0adbbf 100644 (file)
@@ -1,10 +1,15 @@
-<marquee scrollamount='2' width='800'>
-{% for column in sponsors %}
-  <span class="sponsors-sponsor-column">
-    <span class="sponsors-sponsor-column-name">{{ column.name }}</span>
-    {% for sponsor in column.sponsors %}
-      {% if sponsor.url %}<a style="sponsors-sponsor-link" href="{{ sponsor.url }}" title="{{ sponsor.description }}" >{% endif %}<img class="sponsors-sponsor-logo" src="{{ sponsor.logo.thumbnail }}" alt="{{ sponsor.name }}"/>{% if sponsor.url %}</a>{% endif %}
+<div class="sponsors-page">
+    {% for column in sponsors %}
+        <div class="sponsors-column">
+            <p class="sponsors-column-name">{{ column.name|default:"&nbsp;" }}</p>
+            <div class='sponsors'>
+                {% for sponsor in column.sponsors %}
+                    {% if sponsor.url %}<a href="{{ sponsor.url }}" title="{{ sponsor.description }}" >{% endif %}
+                    <img src="{{ sponsor.logo.thumbnail }}" alt="{{ sponsor.name }}"/>
+                    {% if sponsor.url %}</a>{% endif %}
+                {% endfor %}
+            </div>
+        </div>
     {% endfor %}
-  </span>
-{% endfor %}
-</marquee>
+    <div style="clear: both"></div>
+</div>
\ No newline at end of file
index a8bb82d..95c9bf3 100644 (file)
@@ -165,7 +165,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.cycle.min.js',
             'js/jquery.jqmodal.js', 'js/jquery.labelify.js', 'js/catalogue.js',
             ),
         'output_filename': 'js/all?.min.js',
index 4b847dc..73e4df9 100644 (file)
@@ -1,14 +1,8 @@
-.sponsors-sponsor-logo {
-  margin-left: 1em;
-  vertical-align: middle;
+.sponsors-column {
+    float: left;
+    width: 150px;
 }
 
-.sponsors-sponsor-column {
-  line-height: 120px;
-  padding-right: 5em;
-}
-
-.sponsors-sponsor-column-name {
-  font-weight: bold;
-  font-size: 1.25em;
+.sponsors-page img {
+    float: left;
 }
index cb31654..9679607 100644 (file)
@@ -447,20 +447,7 @@ function serverTime() {
             return false;
         });
 
-        $('marquee').marquee().mouseover(function () {
-            $(this).trigger('stop');
-        }).mouseout(function () {
-            $(this).trigger('start');
-             $(this).data('drag', false);
-        }).mousemove(function (event) {
-            if ($(this).data('drag') == true) {
-                this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
-            }
-        }).mousedown(function (event) {
-            $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
-        }).mouseup(function () {
-            $(this).data('drag', false);
-        });
+        $('.sponsors').cycle({timeout: 3000});
 
         $('.widget-code').focus(
             function(){
diff --git a/wolnelektury/static/js/jquery.cycle.min.js b/wolnelektury/static/js/jquery.cycle.min.js
new file mode 100644 (file)
index 0000000..3db15eb
--- /dev/null
@@ -0,0 +1,11 @@
+/*!
+ * jQuery Cycle Lite Plugin
+ * http://malsup.com/jquery/cycle/lite/
+ * Copyright (c) 2008 M. Alsup
+ * Version: 1.0 (06/08/2008)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * Requires: jQuery v1.2.3 or later
+ */
+(function(D){var A="Lite-1.0";D.fn.cycle=function(E){return this.each(function(){E=E||{};if(this.cycleTimeout){clearTimeout(this.cycleTimeout)}this.cycleTimeout=0;this.cyclePause=0;var I=D(this);var J=E.slideExpr?D(E.slideExpr,this):I.children();var G=J.get();if(G.length<2){if(window.console&&window.console.log){window.console.log("terminating; too few slides: "+G.length)}return }var H=D.extend({},D.fn.cycle.defaults,E||{},D.metadata?I.metadata():D.meta?I.data():{});H.before=H.before?[H.before]:[];H.after=H.after?[H.after]:[];H.after.unshift(function(){H.busy=0});var F=this.className;H.width=parseInt((F.match(/w:(\d+)/)||[])[1])||H.width;H.height=parseInt((F.match(/h:(\d+)/)||[])[1])||H.height;H.timeout=parseInt((F.match(/t:(\d+)/)||[])[1])||H.timeout;if(I.css("position")=="static"){I.css("position","relative")}if(H.width){I.width(H.width)}if(H.height&&H.height!="auto"){I.height(H.height)}var K=0;J.css({position:"absolute",top:0,left:0}).hide().each(function(M){D(this).css("z-index",G.length-M)});D(G[K]).css("opacity",1).show();if(D.browser.msie){G[K].style.removeAttribute("filter")}if(H.fit&&H.width){J.width(H.width)}if(H.fit&&H.height&&H.height!="auto"){J.height(H.height)}if(H.pause){I.hover(function(){this.cyclePause=1},function(){this.cyclePause=0})}D.fn.cycle.transitions.fade(I,J,H);J.each(function(){var M=D(this);this.cycleH=(H.fit&&H.height)?H.height:M.height();this.cycleW=(H.fit&&H.width)?H.width:M.width()});J.not(":eq("+K+")").css({opacity:0});if(H.cssFirst){D(J[K]).css(H.cssFirst)}if(H.timeout){if(H.speed.constructor==String){H.speed={slow:600,fast:200}[H.speed]||400}if(!H.sync){H.speed=H.speed/2}while((H.timeout-H.speed)<250){H.timeout+=H.speed}}H.speedIn=H.speed;H.speedOut=H.speed;H.slideCount=G.length;H.currSlide=K;H.nextSlide=1;var L=J[K];if(H.before.length){H.before[0].apply(L,[L,L,H,true])}if(H.after.length>1){H.after[1].apply(L,[L,L,H,true])}if(H.click&&!H.next){H.next=H.click}if(H.next){D(H.next).bind("click",function(){return C(G,H,H.rev?-1:1)})}if(H.prev){D(H.prev).bind("click",function(){return C(G,H,H.rev?1:-1)})}if(H.timeout){this.cycleTimeout=setTimeout(function(){B(G,H,0,!H.rev)},H.timeout+(H.delay||0))}})};function B(J,E,I,K){if(E.busy){return }var H=J[0].parentNode,M=J[E.currSlide],L=J[E.nextSlide];if(H.cycleTimeout===0&&!I){return }if(I||!H.cyclePause){if(E.before.length){D.each(E.before,function(N,O){O.apply(L,[M,L,E,K])})}var F=function(){if(D.browser.msie){this.style.removeAttribute("filter")}D.each(E.after,function(N,O){O.apply(L,[M,L,E,K])})};if(E.nextSlide!=E.currSlide){E.busy=1;D.fn.cycle.custom(M,L,E,F)}var G=(E.nextSlide+1)==J.length;E.nextSlide=G?0:E.nextSlide+1;E.currSlide=G?J.length-1:E.nextSlide-1}if(E.timeout){H.cycleTimeout=setTimeout(function(){B(J,E,0,!E.rev)},E.timeout)}}function C(E,F,I){var H=E[0].parentNode,G=H.cycleTimeout;if(G){clearTimeout(G);H.cycleTimeout=0}F.nextSlide=F.currSlide+I;if(F.nextSlide<0){F.nextSlide=E.length-1}else{if(F.nextSlide>=E.length){F.nextSlide=0}}B(E,F,1,I>=0);return false}D.fn.cycle.custom=function(K,H,I,E){var J=D(K),G=D(H);G.css({opacity:0});var F=function(){G.animate({opacity:1},I.speedIn,I.easeIn,E)};J.animate({opacity:0},I.speedOut,I.easeOut,function(){J.css({display:"none"});if(!I.sync){F()}});if(I.sync){F()}};D.fn.cycle.transitions={fade:function(F,G,E){G.not(":eq(0)").css("opacity",0);E.before.push(function(){D(this).show()})}};D.fn.cycle.ver=function(){return A};D.fn.cycle.defaults={timeout:4000,speed:1000,next:null,prev:null,before:null,after:null,height:"auto",sync:1,fit:0,pause:0,delay:0,slideExpr:null}})(jQuery)
\ No newline at end of file
diff --git a/wolnelektury/static/js/jquery.marquee.js b/wolnelektury/static/js/jquery.marquee.js
deleted file mode 100644 (file)
index d0200ef..0000000
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
-* 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('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').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));