masonry-rails 0.1.6 → 0.1.7

data/README.md

@@ -383,7 +383,17 @@ You can combine masonry infinite scroll with Kaminari using suggestions here:
 
 [Create-Infinite-Scrolling-with-jQuery](https://github.com/amatsuda/kaminari/wiki/How-To:-Create-Infinite-Scrolling-with-jQuery)
 
-[railscast-endless-page](http://railscasts.com/episodes/114-endless-page-revised)
+[Sausage](https://github.com/christophercliff/sausage), used in this example is also included with this gem ;)
+
+Stylesheets: `sausage/sausage.css`and `sausage/sausage.reset.css`
+
+Javascript: `masonry/jquery.sausagemin.min.js`
+
+For more see [sausage info](http://christophercliff.github.com/sausage)
+
+Note: You need to configure Jquery UI to use sausage.
+
+See: [railscast-endless-page](http://railscasts.com/episodes/114-endless-page-revised) for how to use endless pages with Rails using *will_paginate* gem.
 
 ### jQuery pageless
 

data/VERSION

@@ -1 +1 @@
-0.1.6
+0.1.7

data/masonry-rails.gemspec

@@ -5,7 +5,7 @@
 
 Gem::Specification.new do |s|
   s.name = "masonry-rails"
-  s.version = "0.1.6"
+  s.version = "0.1.7"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Kristian Mandrup"]
@@ -74,6 +74,8 @@ Gem::Specification.new do |s|
     "vendor/assets/javascripts/masonry/jquery.masonry.min.js",
     "vendor/assets/javascripts/masonry/jquery.pageless.js",
     "vendor/assets/javascripts/masonry/jquery.pageless.min.js",
+    "vendor/assets/javascripts/masonry/jquery.sausage.js",
+    "vendor/assets/javascripts/masonry/jquery.sausage.min.js",
     "vendor/assets/javascripts/masonry/modernizr-transitions.js",
     "vendor/assets/stylesheets/masonry/basic.css",
     "vendor/assets/stylesheets/masonry/centered.css",
@@ -81,7 +83,9 @@ Gem::Specification.new do |s|
     "vendor/assets/stylesheets/masonry/gutters.css",
     "vendor/assets/stylesheets/masonry/infinitescroll.css",
     "vendor/assets/stylesheets/masonry/right-to-left.css",
-    "vendor/assets/stylesheets/masonry/transitions.css"
+    "vendor/assets/stylesheets/masonry/transitions.css",
+    "vendor/assets/stylesheets/sausage/sausage.css",
+    "vendor/assets/stylesheets/sausage/sausage.reset.css"
   ]
   s.homepage = "http://github.com/kristianmandrup/masonry-rails"
   s.licenses = ["MIT"]

data/vendor/assets/javascripts/masonry/jquery.sausage.js

@@ -0,0 +1,428 @@
+//     jquery.sausage.js 1.0.0
+//     (c) 2011 Christopher Cliff
+//     Freely distributed under the MIT license.
+//     For all details and documentation:
+//     http://christophercliff.github.com/sausage
+
+(function($, undefined){
+    
+    $.widget('cc.sausage', {
+        
+        // # Options
+        //
+        //
+        
+        options: {
+            
+            // ### page `string`
+            //
+            // Sets the string to be used to select page elements.
+            // 
+            // Example:
+            // 
+            //      $(window)
+            //          .sausage({
+            //              page: '.my-page-selector'
+            //          })
+            //          ;
+            //
+            page: '.page',
+            
+            // ### content `function`
+            // 
+            // Sets the content of the sausage elements. Use `i` and `$page` to render content dynamically.
+            // 
+            // Example:
+            // 
+            //      $(window)
+            //          .sausage({
+            //              content: function (i, $page) {
+            //                  return '<div>' + $page.data('name') + '</div>';
+            //          }
+            //      })
+            //      ;
+            //
+            content: function (i, $page) {
+                return '<span class="sausage-span">' + (i + 1) + '</span>';
+            }
+            
+        },
+        
+        // # Private Methods
+        //
+        //
+        
+        // ## `._create()`
+        //
+        //
+        _create: function () {
+            
+            var self = this,
+                $el = self.element;
+            
+            // Use $el for the outer element.
+            self.$outer = $el;
+            // Use `body` for the inner element if the outer element is `window`. Otherwise, use the first child of `$el`.
+            self.$inner = $.isWindow(self.element.get(0)) ? $('body') : $el.children(':first-child');
+            self.$sausages = $('<div class="sausage-set"/>');
+            self.sausages = self.$sausages.get(0);
+            self.offsets = [];
+            
+            self.$sausages
+                .appendTo(self.$inner)
+                ;
+            
+            // Trigger the `create` event.
+            self._trigger('create');
+            
+            return;
+        },
+        
+        // ## `._init()`
+        //
+        //
+        _init: function () {
+            
+            var self = this;
+            
+            // Stop and destroy if scroll bar is not present.
+            if (self.$outer.height() >= self.$inner.height())
+            {
+                self.destroy();
+                
+                return;
+            }
+            
+            self.draw();
+            self._update();
+            self._events();
+            self._delegates();
+            
+            // Add a CSS class for styling purposes.
+            self.$sausages
+                .addClass('sausage-set-init')
+                ;
+            
+            self.blocked = false;
+            
+            // Trigger the `init` event.
+            self._trigger('init');
+            
+            return;
+        },
+        
+        // ## `._events()`
+        //
+        //
+        _events: function () {
+            
+            var self = this;
+            
+            self.hasScrolled = false;
+            
+            self.$outer
+                .bind('resize.sausage', function(){
+                    
+                    self.draw();
+                    
+                })
+                .bind('scroll.sausage', function(e){
+                    
+                    self.hasScrolled = true;
+                    
+                })
+                ;
+            
+            // [Prevent crazy amounts of scroll events from being fired](http://ejohn.org/blog/learning-from-twitter/) by setting an interval and listening.
+            setInterval(function(){
+                
+                if (!self.hasScrolled)
+                {
+                    return;
+                }
+                
+                self.hasScrolled = false;
+                self._update();
+                
+            }, 250);
+            
+            return;
+        },
+        
+        // ## `._getCurrent()`
+        //
+        //
+        _getCurrent: function () {
+            
+            var self = this,
+                st = self.$outer.scrollTop() + self._getHandleHeight(self.$outer, self.$inner)/4,
+                h_win = self.$outer.height(),
+                h_doc = self.$inner.height(),
+                i = 0;
+            
+            for (l = self.offsets.length; i < l; i++)
+            {
+                if (!self.offsets[i + 1])
+                {
+                    return i;
+                }
+                else if (st <= self.offsets[i])
+                {
+                    return i;
+                }
+                else if (st > self.offsets[i] && st <= self.offsets[i + 1])
+                {
+                    return i;
+                }
+            }
+            
+            return i;
+        },
+        
+        // ## `._delegates()`
+        //
+        //
+        _delegates: function () {
+            
+            var self = this;
+            
+            self.$sausages
+                .delegate('.sausage', 'hover', function(){
+                    
+                    if (self.blocked)
+                    {
+                        return;
+                    }
+                    
+                    $(this)
+                        .toggleClass('sausage-hover')
+                        ;
+                    
+                })
+                .delegate('.sausage', 'click', function(e){
+                    e.preventDefault();
+                    
+                    if (self.blocked)
+                    {
+                        return;
+                    }
+                    
+                    var $sausage = $(this),
+                        val = $sausage.index(),
+                        o = self.$inner.find(self.options.page).eq(val).offset().top;
+                    
+                    self._scrollTo(o);
+                    
+                    // Trigger the `onClick` event.
+                    // 
+                    // Example:
+                    // 
+                    //      $(window)
+                    //          .sausage({
+                    //              onClick: function (e, o) {
+                    //                  alert('You clicked the sausage at index: ' + o.i);
+                    //          }
+                    //      })
+                    //      ;
+                    //
+                    self._trigger('onClick', e, {
+                        $sausage: $sausage,
+                        i: val
+                    });
+                    
+                    if ($sausage.hasClass('current'))
+                    {
+                        return;
+                    }
+                    
+                    // Trigger the `onUpdate` event.
+                    self._trigger('onUpdate', e, {
+                        $sausage: $sausage,
+                        i: val
+                    });
+                })
+                ;
+            
+            return;
+        },
+        
+        _scrollTo: function (o) {
+            
+            var self = this,
+                $outer = self.$outer,
+                rate = 2/1, // px/ms
+                distance = self.offsets[self.current] - o,
+                duration = Math.abs(distance/rate);
+                // Travel at 2 px per 1 ms but never longer than 1 s.
+                duration = (duration < 1000) ? duration : 1000;
+            
+            if (self.$outer.get(0) === window)
+            {
+                $outer = $('body, html, document');
+            }
+            
+            $outer
+                .stop(true)
+                .animate({
+                    scrollTop: o
+                }, duration)
+                ;
+            
+            return;
+        },
+        
+        _handleClick: function () {
+            
+            var self = this
+            
+            
+            
+            return;
+        },
+        
+        // ## `._update()`
+        //
+        //
+        _update: function () {
+            
+            var self = this;
+                i = self._getCurrent(),
+                c = 'sausage-current';
+            
+            if (i === self.current || self.blocked)
+            {
+                return;
+            }
+            
+            self.current = i;
+            
+            self.$sausages.children().eq(i)
+                .addClass(c)
+            .siblings()
+                .removeClass(c)
+                ;
+            
+            // Trigger the `update` event.
+            self._trigger('update');
+            
+            return;
+        },
+        
+        // ### `._getHandleHeight()`
+        // 
+        // 
+        _getHandleHeight: function ($outer, $inner) {
+            
+            var h_outer = $outer.height(),
+                h_inner = $inner.height();
+            
+            return h_outer/h_inner*h_outer;
+        },
+        
+        // # Public Methods
+        //
+        //
+        
+        // ### draw `.sausage("draw")`
+        // 
+        // Creates the sausage UI elements.
+        draw: function () {
+            
+            var self = this,
+                h_win = self.$outer.height(),
+                h_doc = self.$inner.height(),
+                $items = self.$inner.find(self.options.page),
+                $page,
+                s = [],
+                offset_p,
+                offset_s;
+            
+            self.offsets = [];
+            self.count = $items.length;
+            
+            // Detach from DOM while making changes.
+            self.$sausages
+                .detach()
+                .empty()
+                ;
+            
+            // Calculate the element heights and push to an array.
+            for (var i = 0; i < self.count; i++)
+            {
+                $page = $items.eq(i);
+                offset_p = $page.offset();
+                offset_s = offset_p.top/h_doc*h_win;
+                
+                s.push('<div class="sausage' + ((i === self.current) ? ' sausage-current' : '') + '" style="height:' + ($page.outerHeight()/h_doc*h_win) + 'px;top:' + offset_s + 'px;">' + self.options.content(i, $page) + '</div>');
+                
+                // Create `self.offsets` for calculating current sausage.
+                self.offsets.push(offset_p.top);
+            }
+            
+            // Use Array.join() for speed.
+            self.sausages.innerHTML = s.join('');
+            
+            // And reattach.
+            self.$sausages
+                .appendTo(self.$inner)
+                ;
+            
+            return;
+        },
+        
+        // ### block `.sausage("block")`
+        // 
+        // Blocks the UI to prevent users from interacting with the sausage UI. Useful when loading data and updating the DOM.
+        block: function () {
+            
+            var self = this,
+                c = 'sausage-set-blocked';
+            
+            self.blocked = true;
+            
+            // Add a CSS class for styling purposes.
+            self.$sausages
+                .addClass(c)
+                ;
+            
+            return;
+        },
+        
+        // ### unblock `.sausage("unblock")`
+        // 
+        // Unblocks the UI once loading and DOM manipulation are complete.
+        unblock: function () {
+            
+            var self = this,
+                c = 'sausage-set-blocked';
+            
+            self.$sausages
+                .removeClass(c)
+                ;
+            
+            self.blocked = false;
+            
+            return;
+        },
+        
+        // ### destroy `.sausage("destroy")`
+        // 
+        // Removes the sausage instance from the DOM.
+        destroy: function () {
+            
+            var self = this;
+            
+            self.$outer
+                .unbind('.sausage')
+                ;
+            
+            self.$sausages
+                .remove()
+                ;
+            
+            return;
+        }
+        
+    });
+    
+})(jQuery);

data/vendor/assets/javascripts/masonry/jquery.sausage.min.js

@@ -0,0 +1,6 @@
+(function(e){e.widget("cc.sausage",{options:{page:".page",content:function(a){return'<span class="sausage-span">'+(a+1)+"</span>"}},_create:function(){var a=this.element;this.$outer=a;this.$inner=e.isWindow(this.element.get(0))?e("body"):a.children(":first-child");this.$sausages=e('<div class="sausage-set"/>');this.sausages=this.$sausages.get(0);this.offsets=[];this.$sausages.appendTo(this.$inner);this._trigger("create")},_init:function(){this.$outer.height()>=this.$inner.height()?this.destroy():
+(this.draw(),this._update(),this._events(),this._delegates(),this.$sausages.addClass("sausage-set-init"),this.blocked=!1,this._trigger("init"))},_events:function(){var a=this;a.hasScrolled=!1;a.$outer.bind("resize.sausage",function(){a.draw()}).bind("scroll.sausage",function(){a.hasScrolled=!0});setInterval(function(){if(a.hasScrolled)a.hasScrolled=!1,a._update()},250)},_getCurrent:function(){var a=this.$outer.scrollTop()+this._getHandleHeight(this.$outer,this.$inner)/4;this.$outer.height();this.$inner.height();
+var b=0;for(l=this.offsets.length;b<l;b++)if(this.offsets[b+1])if(a<=this.offsets[b])break;else{if(a>this.offsets[b]&&a<=this.offsets[b+1])break}else break;return b},_delegates:function(){var a=this;a.$sausages.delegate(".sausage","hover",function(){a.blocked||e(this).toggleClass("sausage-hover")}).delegate(".sausage","click",function(b){b.preventDefault();if(!a.blocked){var d=e(this),f=d.index(),k=a.$inner.find(a.options.page).eq(f).offset().top;a._scrollTo(k);a._trigger("onClick",b,{$sausage:d,
+i:f});d.hasClass("current")||a._trigger("onUpdate",b,{$sausage:d,i:f})}})},_scrollTo:function(a){var b=this.$outer,d=Math.abs((this.offsets[this.current]-a)/2),d=d<1E3?d:1E3;this.$outer.get(0)===window&&(b=e("body, html, document"));b.stop(!0).animate({scrollTop:a},d)},_handleClick:function(){},_update:function(){i=this._getCurrent();c="sausage-current";if(!(i===this.current||this.blocked))this.current=i,this.$sausages.children().eq(i).addClass(c).siblings().removeClass(c),this._trigger("update")},
+_getHandleHeight:function(a,b){var d=a.height(),f=b.height();return d/f*d},draw:function(){var a=this.$outer.height(),b=this.$inner.height(),d=this.$inner.find(this.options.page),f,e=[],h,j;this.offsets=[];this.count=d.length;this.$sausages.detach().empty();for(var g=0;g<this.count;g++)f=d.eq(g),h=f.offset(),j=h.top/b*a,e.push('<div class="sausage'+(g===this.current?" sausage-current":"")+'" style="height:'+f.outerHeight()/b*a+"px;top:"+j+'px;">'+this.options.content(g,f)+"</div>"),this.offsets.push(h.top);
+this.sausages.innerHTML=e.join("");this.$sausages.appendTo(this.$inner)},block:function(){this.blocked=!0;this.$sausages.addClass("sausage-set-blocked")},unblock:function(){this.$sausages.removeClass("sausage-set-blocked");this.blocked=!1},destroy:function(){this.$outer.unbind(".sausage");this.$sausages.remove()}})})(jQuery);

data/vendor/assets/stylesheets/sausage/sausage.css

@@ -0,0 +1,45 @@
+.sausage-set {
+    position: fixed; right: 0; top: 0;
+    width: 15px; height: 100%;
+    border-left: solid 2px #fff;
+    border-right: solid 2px #fff;
+}
+    .sausage {
+        position: absolute; left: 0;
+        width: 100%; height: 100%;
+        background-color: #f1f1f1;
+        text-decoration: none;
+        -moz-border-radius: 8px;
+        -webkit-border-bottom-left-radius: 8px;
+        -webkit-border-top-left-radius: 8px;
+        -webkit-border-bottom-right-radius: 8px;
+        -webkit-border-top-right-radius: 8px;
+        -moz-box-shadow: inset 0px 1px 2px 4px rgba(0, 0, 0, 0.025);
+        -webkit-box-shadow: inset 0px 1px 2px 4px rgba(0, 0, 0, 0.025);
+        cursor: pointer;
+    }
+    .sausage-hover,
+    .sausage-current {
+        background-color: #edf6fa;
+        -moz-box-shadow: inset 0px 1px 2px 4px rgba(51, 63, 70, 0.025);
+    }
+        .sausage-span {
+            position: absolute; left: -12px; top: 5px; z-index: 2;
+            display: none;
+            width: 15px; height: 10px;
+            padding: 2px;
+            color: #888;
+            background-color: #fff;
+            border: solid 2px #b6d8ea;
+            font-size: 10px; line-height: 10px; font-weight: bold; text-align: center;
+            -moz-border-radius: 7px;
+            -webkit-border-bottom-left-radius: 7px;
+            -webkit-border-top-left-radius: 7px;
+            -webkit-border-bottom-right-radius: 7px;
+            -webkit-border-top-right-radius: 7px;
+            -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
+            -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
+        }
+        .sausage-hover .sausage-span {
+            display: block;
+        }

data/vendor/assets/stylesheets/sausage/sausage.reset.css

@@ -0,0 +1,35 @@
+/*
+Copyright (c) 2010, .sausage-set  Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 3.3.0
+build: 3167
+*/
+.sausage-set, .sausage-set div, .sausage-set dl, .sausage-set dt, .sausage-set dd, .sausage-set ul, .sausage-set ol, .sausage-set li, .sausage-set h1, .sausage-set h2, .sausage-set h3, .sausage-set h4, .sausage-set h5, .sausage-set h6, .sausage-set pre, .sausage-set code, .sausage-set form, .sausage-set fieldset, .sausage-set legend, .sausage-set input, .sausage-set textarea, .sausage-set p, .sausage-set blockquote, .sausage-set th, .sausage-set td{margin:0;padding:0;} .sausage-set  table{border-collapse:collapse;border-spacing:0;} .sausage-set  fieldset, .sausage-set img{border:0;} .sausage-set  address, .sausage-set caption, .sausage-set cite, .sausage-set code, .sausage-set dfn, .sausage-set em, .sausage-set strong, .sausage-set th, .sausage-set var{font-style:normal;font-weight:normal;} .sausage-set  li{list-style:none;} .sausage-set  caption, .sausage-set th{text-align:left;} .sausage-set h1, .sausage-set h2, .sausage-set h3, .sausage-set h4, .sausage-set h5, .sausage-set h6{font-size:100%;font-weight:normal;} .sausage-set  q:before, .sausage-set q:after{content:'';} .sausage-set  abbr, .sausage-set acronym{border:0;font-variant:normal;} .sausage-set sup{vertical-align:text-top;} .sausage-set sub{vertical-align:text-bottom;} .sausage-set input, .sausage-set textarea, .sausage-set select{font-family:inherit;font-size:inherit;font-weight:inherit;} .sausage-set input, .sausage-set textarea, .sausage-set select{*font-size:100%;} .sausage-set legend{color:#000;}
+.sausage-set a { text-decoration: none; outline: none; }.sausage-set *:focus { outline: 0; }.sausage-set input::-moz-focus-inner { border: 0; }
+/*
+Copyright (c) 2010, .sausage-set  Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 3.3.0
+build: 3167
+*/
+.sausage-set {font:13px/1.231 'Hevetica Neueu', Helvetica, Arial, sans-serif;*font-size:small;*font:x-small;} .sausage-set select, .sausage-set input, .sausage-set button, .sausage-set textarea{font:99% "lucida grande", .sausage-set tahoma, .sausage-set verdana, .sausage-set arial, .sausage-set sans-serif;} .sausage-set table{font-size:inherit;font:100%;} .sausage-set pre, .sausage-set code, .sausage-set kbd, .sausage-set samp, .sausage-set tt{font-family:monospace;*font-size:108%;line-height:100%;}
+
+/*
+Copyright (c) 2010, .reset  Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 3.3.0
+build: 3167
+*/
+.reset, .reset div, .reset dl, .reset dt, .reset dd, .reset ul, .reset ol, .reset li, .reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6, .reset pre, .reset code, .reset form, .reset fieldset, .reset legend, .reset input, .reset textarea, .reset p, .reset blockquote, .reset th, .reset td{margin:0;padding:0;} .reset  table{border-collapse:collapse;border-spacing:0;} .reset  fieldset, .reset img{border:0;} .reset  address, .reset caption, .reset cite, .reset code, .reset dfn, .reset em, .reset strong, .reset th, .reset var{font-style:normal;font-weight:normal;} .reset  li{list-style:none;} .reset  caption, .reset th{text-align:left;} .reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6{font-size:100%;font-weight:normal;} .reset  q:before, .reset q:after{content:'';} .reset  abbr, .reset acronym{border:0;font-variant:normal;} .reset sup{vertical-align:text-top;} .reset sub{vertical-align:text-bottom;} .reset input, .reset textarea, .reset select{font-family:inherit;font-size:inherit;font-weight:inherit;} .reset input, .reset textarea, .reset select{*font-size:100%;} .reset legend{color:#000;}
+.reset a { text-decoration: none; outline: none; }.reset *:focus { outline: 0; }.reset input::-moz-focus-inner { border: 0; }
+/*
+Copyright (c) 2010, .reset  Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 3.3.0
+build: 3167
+*/
+.reset {font:13px/1.231 Georgia, sans-serif;*font-size:small;*font:x-small;} .reset select, .reset input, .reset button, .reset textarea{font:99% "lucida grande", .reset tahoma, .reset verdana, .reset arial, .reset sans-serif;} .reset table{font-size:inherit;font:100%;} .reset pre, .reset code, .reset kbd, .reset samp, .reset tt{font-family:monospace;*font-size:108%;line-height:100%;}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: masonry-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.6
+  version: 0.1.7
   prerelease: 
 platform: ruby
 authors:
@@ -172,6 +172,8 @@ files:
 - vendor/assets/javascripts/masonry/jquery.masonry.min.js
 - vendor/assets/javascripts/masonry/jquery.pageless.js
 - vendor/assets/javascripts/masonry/jquery.pageless.min.js
+- vendor/assets/javascripts/masonry/jquery.sausage.js
+- vendor/assets/javascripts/masonry/jquery.sausage.min.js
 - vendor/assets/javascripts/masonry/modernizr-transitions.js
 - vendor/assets/stylesheets/masonry/basic.css
 - vendor/assets/stylesheets/masonry/centered.css
@@ -180,6 +182,8 @@ files:
 - vendor/assets/stylesheets/masonry/infinitescroll.css
 - vendor/assets/stylesheets/masonry/right-to-left.css
 - vendor/assets/stylesheets/masonry/transitions.css
+- vendor/assets/stylesheets/sausage/sausage.css
+- vendor/assets/stylesheets/sausage/sausage.reset.css
 homepage: http://github.com/kristianmandrup/masonry-rails
 licenses:
 - MIT
@@ -195,7 +199,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 1929806335943321942
+      hash: -2854630088792217666
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: