sexy sponsors
authorRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Tue, 24 Aug 2010 15:07:33 +0000 (17:07 +0200)
committerRadek Czajka <radoslaw.czajka@nowoczesnapolska.org.pl>
Tue, 24 Aug 2010 15:07:33 +0000 (17:07 +0200)
apps/sponsors/models.py
apps/sponsors/templates/sponsors/page.html
wolnelektury/settings.py
wolnelektury/static/css/sponsors.css
wolnelektury/static/js/catalogue.js
wolnelektury/static/js/jquery.marquee.js [new file with mode: 0644]

index 3c2ca02..a2e3e08 100644 (file)
@@ -17,7 +17,7 @@ class Sponsor(models.Model):
         _('logo'),
         upload_to='sponsorzy/sponsor/logo',
         thumbnail={
         _('logo'),
         upload_to='sponsorzy/sponsor/logo',
         thumbnail={
-            'size': (120, 60),
+            'size': (120, 120),
             'extension': 'png',
             'options': ['pad', 'detail'],
         })
             'extension': 'png',
             'options': ['pad', 'detail'],
         })
index c2f534e..77624fb 100644 (file)
@@ -1,11 +1,10 @@
-<div class="sponsors-sponsor-page">
+<marquee scrollamount='2' width='800'>
 {% for column in sponsors %}
 {% for column in sponsors %}
-       <div class="sponsors-sponsor-column" style="width: 150px">
-               <p class="sponsors-sponsor-column-name">{{ column.name|default:"&nbsp;" }}</p>
-               {% for sponsor in column.sponsors %}
-                       <div class="sponsors-sponsor">{% 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>
-               {% endfor %}
-       </div>
+  <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 %}
+    {% endfor %}
+  </span>
 {% endfor %}
 {% endfor %}
-<div style="clear: both"></div>
-</div>
+</marquee>
index 01cfcf4..9396a1d 100644 (file)
@@ -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.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',
             'js/jquery.jqmodal.js', 'js/jquery.labelify.js', 'js/catalogue.js',
             ),
         'output_filename': 'js/all?.min.js',
index f780972..4b847dc 100644 (file)
@@ -1,8 +1,14 @@
+.sponsors-sponsor-logo {
+  margin-left: 1em;
+  vertical-align: middle;
+}
+
 .sponsors-sponsor-column {
 .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;
+}
index 9a35399..b185c29 100644 (file)
@@ -446,5 +446,7 @@ function serverTime() {
             $('#download-shelf-menu').slideUp('fast');
             return false;
         });
             $('#download-shelf-menu').slideUp('fast');
             return false;
         });
+
+        $('marquee').marquee()
     });
 })(jQuery)
     });
 })(jQuery)
diff --git a/wolnelektury/static/js/jquery.marquee.js b/wolnelektury/static/js/jquery.marquee.js
new file mode 100644 (file)
index 0000000..d0200ef
--- /dev/null
@@ -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('<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));