corkboard 0.1.0

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,44 @@
+# Corkboard
+
+TODO: Summary of Corkboard.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'corkboard'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install corkboard
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Developing
+
+TODO...
+
+### Jasmine (js) Specs
+
+  * To run from command line:
+
+        $ rake spec:javascript
+
+  * To see them in the browser:
+
+        $ cd spec/dummy && rails s
+        # open browser to http://localhost:3000/jasmine
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,29 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+  exit 1
+end
+
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
+
+desc 'Default: run specs'
+task :default => [:spec]
+
+desc 'Run the full spec suite'
+task :spec => [:'spec:ruby', :'spec:javascript']
+
+namespace :spec do
+  desc 'Run the RSpec code examples'
+  RSpec::Core::RakeTask.new(:ruby) do |t|
+    t.pattern = "spec/**/*_spec.rb"
+    t.verbose = false
+  end
+
+  desc 'Run the Jasmine code examples'
+  task :javascript do
+    system 'cd spec/dummy && rake jasminerice:run'
+  end
+end

data/app/assets/javascripts/corkboard.js.erb

@@ -0,0 +1,45 @@
+//= require modernizr
+//= require jquery
+//= require jquery_ujs
+//= require jquery.masonry
+//= require jquery.masonry-extensions
+//= require pusher
+
+//= require corkboard/base
+//= require_tree ./corkboard/lib
+//= require_tree ./corkboard/app
+
+(function($, corkboard) {
+  // Corkboard properties pulled from the server. Client-side definitions
+  // should go in `corkboard/base.js`, to ensure availability and keep this
+  // file clean.
+  //
+  // TODO: consider something like `gon`, rather than making this file `erb`.
+  $.extend(corkboard, {
+    version : '<%= Corkboard::VERSION %>',
+    config  : function config(key) {
+      return corkboard.config[key] || corkboard.defaults[key];
+    }
+  });
+
+  $.extend(corkboard.config, {
+    pusher  : '<%= Pusher.key %>',
+    weights : <%= Corkboard.presentation[:weights].to_json %>
+  });
+
+  // Define jQuery.fn.corkboard
+  $.fn.extend({
+    // corkboard : $.corkboard.Board
+    corkboard : function corkboard() {
+      this.each(function() {
+        new $.corkboard.Board($(this));
+      });
+
+      return this;
+    }
+  });
+
+  $(function() {
+    $('article.corkboard').corkboard();
+  });
+})(jQuery, jQuery.corkboard);

data/app/assets/javascripts/corkboard/app/board.js

@@ -0,0 +1,86 @@
+(function($, corkboard) {
+  // TODO: allow for and handle multiple matches.
+  function Board(board) {
+    if(board.length) {
+      this.setup(board);
+    }
+  }
+
+  // Surfaced as part of the corkboard namespace.
+  corkboard.Board = Board;
+
+  // TODO: consider making selectors configurable.
+  // TODO: make the masonry configuration configurable.
+  // TODO: add specs (and break up).
+  Board.prototype.setup = function setup(board) {
+    var selectors = {
+      posts   : 'ul.corkboard.posts',
+      entry   : 'li.entry',
+      filters : 'nav.corkboard.filters'
+    };
+    var posts   = $(selectors.posts, board);
+    var filters = $(selectors.filters);
+
+    posts.imagesLoaded(function() {
+      this.masonry({
+        isAnimated   : true,
+        isFitWidth   : true,
+        itemSelector : selectors.entry + ':not(.hidden)',
+
+        columnWidth : function columnWidth(containerWidth) {
+          if(containerWidth <= 320) {
+            return 160;
+          }
+          if(containerWidth <= 480) {
+            return 182;
+          }
+          else if(containerWidth <= 768){
+            return 140;
+          }
+          else {
+            return 172;
+          }
+        }
+      });
+
+      // reveal tiles in a pseudo-scattered pattern.
+      this.find([selectors.entry, ':nth-child(5n+1)'].join('')).fadeIn(function callback() {
+        var next = $(this).next();
+
+        if( ! next.is(':visible')) {
+          next.fadeIn(corkboard.config('fade'), callback);
+        };
+      });
+    });
+
+    // TODO: generalize filter placement (to other-than-FAB)
+    filters.on('click', 'a', function(e) {
+      var link    = $(this);
+      var filters = $('li', selectors.filters);
+      var filter  = link.parent().toggleClass('active');
+      var posts   = $(selectors.posts);
+      var entries = posts.find(selectors.entry);
+      var href    = link.attr('href');
+      var tag     = href.replace('#', '');
+
+      filters.not(filter).removeClass('active');
+
+      if(link.hasClass('all') || ( ! filter.hasClass('active'))) {
+        $('a.all').parent().addClass('active');
+        posts.masonry('filter', entries, '*');
+      }
+      else {
+        posts.masonry('filter', entries, '[data-tags~="' + tag + '"]');
+      }
+
+      return false;
+    });
+
+    new corkboard.Publisher(board, this.updated);
+  };
+
+  Board.prototype.updated = function updated(list, added) {
+    list.masonry('reload');
+    added.fadeIn(corkboard.config('fade'));
+  };
+})(jQuery, jQuery.corkboard);

data/app/assets/javascripts/corkboard/base.js

@@ -0,0 +1,9 @@
+(function($) {
+  $.extend({
+    corkboard : {
+      defaults : {
+        fade : 'slow'
+      }
+    }
+  });
+})(jQuery);

data/app/assets/javascripts/corkboard/lib/publisher.js

@@ -0,0 +1,53 @@
+(function($, corkboard) {
+  function Publisher(board, callback) {
+    if(board.length) {
+      this.board    = board;
+      this.callback = callback;
+      this.subscribe();
+    }
+  }
+
+  // Surfaced as part of the corkboard namespace.
+  corkboard.Publisher = Publisher;
+
+  Publisher.prototype.subscribe = function subscribe() {
+    var self    = this;
+    var pusher  = new Pusher(corkboard.config.pusher);
+    var channel = pusher.subscribe('corkboard');
+
+    // pusher.bind('pusher:error', function(data) {
+    //   alert(data);
+    // });
+
+    channel.bind('posts/new', function(data) {
+      var eid = data.eid;
+
+      if(0 === $('[data-eid="' + eid + '"]').length) {
+        self.publish(data);
+      }
+    });
+  };
+
+  // TODO: handle collections (for more efficient updates).
+  // TODO: include :type (e.g., 'instagram').
+  // TODO: use a (server-shared) template for rendering entries.
+  Publisher.prototype.publish = function publish(data) {
+    var posts   = this.board.find('ul.corkboard.posts');
+    var weights = corkboard.config.weights;
+    var random  = new corkboard.WeightedRandomizer(weights);
+    var eid     = data.eid;
+    var klass   = ['entry', random.sample()].join(' ');
+    var entry   = $('<li class="' + klass + '" data-eid="' + data.eid + '" data-tags="' + data.tags + '"><figure><img src="' + data.image + '"><p class="caption">' + data.caption + '</p></figure></li>');
+
+    posts.prepend(entry);
+
+    if(this.callback) {
+      this.callback.apply(this, [posts, entry]);
+    }
+  };
+
+  // // Uncomment to debug Pusher messages.
+  // Pusher.log = function(data) {
+  //   console.log('\t\t', data);
+  // };
+})(jQuery, jQuery.corkboard);

data/app/assets/javascripts/corkboard/lib/weighted_randomizer.js

@@ -0,0 +1,41 @@
+(function($, corkboard) {
+  // Ported to JS from weighted_randomizer Ruby gem.
+  function WeightedRandomizer(setup) {
+    this.normalize(setup);
+  }
+
+  // Surfaced as part of the corkboard namespace.
+  corkboard.WeightedRandomizer = WeightedRandomizer;
+
+  WeightedRandomizer.prototype.normalize = function normalize(setup) {
+    var dict = {};
+    var sum  = 0.0;
+
+    $.each(setup, function(key, weight) {
+      sum += weight;
+    });
+
+    $.each(setup, function(key, weight) {
+      dict[key] = (weight / sum);
+    });
+
+    this.normalized = dict;
+  };
+
+  WeightedRandomizer.prototype.sample = function sample() {
+    var pick = Math.random();
+    var result;
+
+    $.each(this.normalized, function(key, weight) {
+      result = key;
+
+      if(pick <= weight) {
+        return false;
+      }
+
+      pick -= weight;
+    });
+
+    return result;
+  };
+})(jQuery, jQuery.corkboard);

data/app/assets/stylesheets/corkboard/application.css

@@ -0,0 +1,88 @@
+/**
+ * Stylesheet: Corkboard
+ *= require_self
+ * -------------------:--------------------------------------------------------
+ */
+article#corkboard {
+  position            : relative;
+}
+
+
+/**
+ * @section: corkboard filters
+ * -------------------:--------------------------------------------------------
+ */
+nav.corkboard.filters {
+  position            : absolute;
+  top                 : 10px;
+  right               : 10px;
+  z-index             : 1;
+}
+
+nav.corkboard.filters > ul {
+  list-style          : none;
+  margin              : 0;
+}
+
+nav.corkboard.filters li {
+  display             : inline-block;
+}
+
+nav.corkboard.filters li > a {
+  text-decoration     : none;
+}
+
+
+/**
+ * @section: corkboard posts
+ * -------------------:--------------------------------------------------------
+ */
+ul.corkboard.posts {
+  font-family         : monospace;
+  list-style          : none;
+  overflow            : hidden;
+  margin              : 0 auto;
+  padding             : 0;
+}
+
+ul.corkboard.posts > li {
+  display             : none;
+  float               : left;
+  overflow            : hidden;
+  margin              : 2px;
+}
+
+ul.corkboard.posts > li.s {
+  width             : 168px;
+  height            : 168px;
+}
+
+ul.corkboard.posts > li.m {
+  width             : 340px;
+  height            : 340px;
+}
+
+ul.corkboard.posts > li.l {
+  width             : 512px;
+  height            : 512px;
+}
+
+ul.corkboard.posts figure {
+  margin              : 0;
+  padding             : 0;
+  width               : 100%;
+  height              : 100%;
+}
+
+ul.corkboard.posts img {
+  position            : absolute;
+  top                 : -5%;
+  left                : -5%;
+  width               : 110%;
+  height              : 110%;
+  max-width           : none;
+}
+
+ul.corkboard.posts p.caption {
+  display             : none;
+}

data/app/assets/stylesheets/corkboard/responsive.css

@@ -0,0 +1,93 @@
+/**
+ * Stylesheet: Corkboard Responsive
+ * -------------------:--------------------------------------------------------
+ */
+
+/**
+ * @section: mobile portrait to landscape
+ * -------------------:--------------------------------------------------------
+ */
+@media only screen and (max-width: 320px) {
+  ul.corkboard.posts > li.s,
+  ul.corkboard.posts > li.m,
+  ul.corkboard.posts > li.l {
+    width             : 156px;
+    height            : 156px;
+  }
+}
+
+/**
+ * @section: mobile portrait to landscape
+ * -------------------:--------------------------------------------------------
+ */
+@media only screen and (min-width: 321px) and (max-width: 480px) {
+  ul.corkboard.posts > li.s,
+  ul.corkboard.posts > li.m,
+  ul.corkboard.posts > li.l {
+    width             : 178px;
+    height            : 178px;
+  }
+}
+
+/**
+ * @section: mobile landscape to tablet portrait
+ * -------------------:--------------------------------------------------------
+ */
+@media only screen and (min-width: 481px) and (max-width: 768px) {
+  ul.corkboard.posts > li.s {
+    width             : 136px;
+    height            : 136px;
+  }
+
+  ul.corkboard.posts > li.m,
+  ul.corkboard.posts > li.l {
+    width             : 276px;
+    height            : 276px;
+  }
+}
+
+/**
+ * @section: tablet portrait to standard desktop
+ * -------------------:--------------------------------------------------------
+ */
+@media only screen and (min-width: 769px) and (max-width: 980px) {
+  ul.corkboard.posts > li.s {
+    width             : 168px;
+    height            : 168px;
+  }
+
+  ul.corkboard.posts > li.m,
+  ul.corkboard.posts > li.l {
+    width             : 340px;
+    height            : 340px;
+  }
+}
+
+/**
+ * @section: standard desktop and larger
+ * -------------------:--------------------------------------------------------
+ */
+@media only screen and (min-width: 981px) {
+  ul.corkboard.posts > li.s {
+    width             : 168px;
+    height            : 168px;
+  }
+
+  ul.corkboard.posts > li.m {
+    width             : 340px;
+    height            : 340px;
+  }
+
+  ul.corkboard.posts > li.l {
+    width             : 512px;
+    height            : 512px;
+  }
+}
+
+/**
+ * @section: HD
+ * -------------------:--------------------------------------------------------
+ */
+@media only screen and (min-width: 1200px) {
+
+}