livelist-rails 0.0.1

data/.gitignore

@@ -0,0 +1,5 @@
+.rvmrc
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in livelist-rails.gemspec
+gemspec

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/app/assets/javascripts/livelist-rails.js

@@ -0,0 +1,3 @@
+//= require mustache
+//= require underscore
+//= require livelist

data/app/assets/javascripts/livelist.coffee

@@ -0,0 +1,199 @@
+class window.Utilities
+  setOptions: (options, context=@) =>
+    _.each( options, (value, option) => context[option] = value )
+
+class window.LiveList extends Utilities
+  constructor: (options) ->
+    @globalOptions.listSelector = options.list.renderTo
+    @globalOptions.eventName    = "livelist:#{options.global.resourceName}"
+    @globalOptions.urlPrefix    = "/#{options.global.resourceName}"
+
+    @setOptions(options.global, @globalOptions)
+
+    @search     = new Search(@globalOptions, options.search)
+    @filters    = new Filters(@globalOptions, options.filters)
+    @pagination = new Pagination(@globalOptions, options.pagination)
+    @list       = new List(@search, @filters, @pagination, @globalOptions, options.list)
+
+  globalOptions:
+    data: null
+    resourceName: 'items'
+    resourceNameSingular: 'item'
+
+class window.List extends Utilities
+  constructor: (search, filters, pagination, globalOptions, options = {}) ->
+    @data         = globalOptions.data
+    @fetchRequest = null
+    @search       = search
+    @filters      = filters
+    @pagination   = pagination
+
+    @setOptions(globalOptions)
+    @listTemplate            = "{{##{@resourceName}}}{{>#{@resourceNameSingular}}}{{/#{@resourceName}}}"
+    @listItemTemplate        = '<li>{{id}}</li>'
+    @fetchingIndicationClass = 'updating'
+    @setOptions(options)
+
+    $(@renderTo).bind(@eventName, (event, params) => @fetch(filterPresets: null, page: params?.page))
+    @fetch(filterPresets: @filters.presets)
+
+  displayFetchingIndication: => $(@renderTo).addClass(@fetchingIndicationClass)
+  removeFetchingIndication:  => $(@renderTo).removeClass(@fetchingIndicationClass)
+
+  renderIndex: (data, textStatus, jqXHR) =>
+    @data = data
+    @render()
+    @pagination.render(@data)
+    @filters.filters = _.pluck( @data.filters, 'filter_slug' )
+    @filters.render(@data)
+
+  fetch: (options) ->
+    @fetchRequest.abort() if @fetchRequest
+    searchTerm = @search.searchTerm()
+    params = { filters: {} }
+    if options.filterPresets?.length > 0
+      params.filters = options.filterPresets
+    else
+      _.each( @filters.filters, (filter) => params.filters[filter] = @filters.filterSelections( filter ) )
+    if searchTerm then params.q = searchTerm
+    if options.page then params.page = options.page
+    @fetchRequest = $.ajax(
+      url: @urlPrefix
+      dataType: 'json'
+      data: params
+      type: @httpMethod
+      beforeSend: @displayFetchingIndication
+      success: @renderIndex
+    )
+
+  render: ->
+    partials = {}
+    partials[@resourceNameSingular] = @listItemTemplate
+    $(@renderTo).html( Mustache.to_html(@listTemplate, @data, partials) )
+    @removeFetchingIndication()
+
+class window.Filters extends Utilities
+  constructor: (globalOptions, options = {}) ->
+    @setOptions(globalOptions)
+    @filters = if options.presets then _.keys(options.presets) else []
+    @setOptions(options)
+    $('input.filter_option', @renderTo).live( 'change', => $(@listSelector).trigger(@eventName) )
+    $(@advancedOptionsToggleSelector).click(@handleAdvancedOptionsClick)
+
+  filtersTemplate: '''
+    {{#filters}}
+    <div class='filter'>
+      <h3>
+        {{name}}
+      </h3>
+      <ul id='{{filter_slug}}_filter_options'>
+        {{#options}}
+        <label>
+          <li>
+            <input {{#selected}}checked='checked'{{/selected}}
+                   class='left filter_option'
+                   id='filter_{{slug}}'
+                   name='filters[]'
+                   type='checkbox'
+                   value='{{value}}' />
+            <div class='left filter_name'>{{name}}</div>
+            <div class='right filter_count'>{{count}}</div>
+            <div class='clear'></div>
+          </li>
+        </label>
+        {{/options}}
+      </ul>
+    </div>
+    {{/filters}}
+  '''
+
+  filterValues:     (filter) -> _.pluck( $(".#{filter}_filter_input"), 'value' )
+  filterSelections: (filter) -> _.pluck( $("##{filter}_filter_options input.filter_option:checked"), 'value' )
+
+  render: (data) -> $(@renderTo).html( Mustache.to_html(@filtersTemplate, data) )
+
+  handleAdvancedOptionsClick: (event) =>
+    event.preventDefault()
+    $(@renderTo).slideToggle()
+
+class window.Pagination extends Utilities
+  constructor: (globalOptions, options = {}) ->
+    @pagination = null
+    @maxPages   = 30
+
+    @setOptions(globalOptions)
+    @emptyListMessage = "<p>No #{@resourceName} matched your filter criteria</p>"
+    @setOptions(options)
+
+    $("#{@renderTo} a").live('click', @handlePaginationLinkClick)
+
+  paginationTemplate: '''
+    {{#isEmpty}}
+      {{{emptyListMessage}}}
+    {{/isEmpty}}
+    {{^isEmpty}}
+    {{#previousPage}}
+      <a href='{{urlPrefix}}?page={{previousPage}}' data-page='{{previousPage}}'>← Previous</a>
+    {{/previousPage}}
+    {{^previousPage}}
+      <span>← Previous</span>
+    {{/previousPage}}
+    {{#pages}}
+      {{#currentPage}}
+        <span>{{page}}</span>
+      {{/currentPage}}
+      {{^currentPage}}
+        <a href='{{urlPrefix}}?page={{page}}' data-page='{{page}}'>{{page}}</a>
+      {{/currentPage}}
+    {{/pages}}
+    {{#nextPage}}
+      <a href='{{urlPrefix}}?page={{nextPage}}' data-page='{{nextPage}}'>Next →</a>
+    {{/nextPage}}
+    {{^nextPage}}
+      <span>Next →</span>
+    {{/nextPage}}
+    {{/isEmpty}}
+  '''
+
+  pagesJSON: (currentPage, totalPages) ->
+    groupSize = @maxPages / 2
+    firstPage = if currentPage < groupSize then 1 else currentPage - groupSize
+    previousPage = firstPage + groupSize * 2 - 1
+    lastPage  = if previousPage >= totalPages then totalPages else previousPage
+    _.map([firstPage..lastPage], (page) ->
+      page: page
+      currentPage: -> currentPage is page
+    )
+
+  paginationJSON: (pagination) ->
+    {
+      isEmpty          : pagination.total_pages == 0
+      emptyListMessage : @emptyListMessage
+      currentPage      : pagination.current_page
+      nextPage         : pagination.next_page
+      previousPage     : pagination.previous_page
+      urlPrefix        : @urlPrefix
+      pages            : @pagesJSON(pagination.current_page, pagination.total_pages)
+    }
+
+  render: (data) ->
+    @pagination = @paginationJSON(data.pagination)
+    $(@renderTo).html( Mustache.to_html(@paginationTemplate, @pagination) )
+
+  handlePaginationLinkClick: (event) =>
+    event.preventDefault()
+    $(@listSelector).trigger(@eventName, {page: $(event.target).data('page')})
+
+class window.Search extends Utilities
+  constructor: (globalOptions, options = {}) ->
+    @setOptions(globalOptions)
+    @setOptions(options)
+    $(@formSelector).submit( (event) => @handleSearchFormSubmit(event) )
+
+  searchTerm: ->
+    q = $(@searchTextInputSelector).val()
+    if !q or (q is '') then null else q
+
+  handleSearchFormSubmit: (event) =>
+    event.preventDefault()
+    $(@listSelector).trigger(@eventName)

data/app/assets/javascripts/livelist.js

@@ -0,0 +1,274 @@
+(function() {
+  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+    __hasProp = Object.prototype.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+  window.Utilities = (function() {
+
+    function Utilities() {
+      this.setOptions = __bind(this.setOptions, this);
+    }
+
+    Utilities.prototype.setOptions = function(options, context) {
+      var _this = this;
+      if (context == null) context = this;
+      return _.each(options, function(value, option) {
+        return context[option] = value;
+      });
+    };
+
+    return Utilities;
+
+  })();
+
+  window.LiveList = (function(_super) {
+
+    __extends(LiveList, _super);
+
+    function LiveList(options) {
+      this.globalOptions.listSelector = options.list.renderTo;
+      this.globalOptions.eventName = "livelist:" + options.global.resourceName;
+      this.globalOptions.urlPrefix = "/" + options.global.resourceName;
+      this.setOptions(options.global, this.globalOptions);
+      this.search = new Search(this.globalOptions, options.search);
+      this.filters = new Filters(this.globalOptions, options.filters);
+      this.pagination = new Pagination(this.globalOptions, options.pagination);
+      this.list = new List(this.search, this.filters, this.pagination, this.globalOptions, options.list);
+    }
+
+    LiveList.prototype.globalOptions = {
+      data: null,
+      resourceName: 'items',
+      resourceNameSingular: 'item'
+    };
+
+    return LiveList;
+
+  })(Utilities);
+
+  window.List = (function(_super) {
+
+    __extends(List, _super);
+
+    function List(search, filters, pagination, globalOptions, options) {
+      var _this = this;
+      if (options == null) options = {};
+      this.renderIndex = __bind(this.renderIndex, this);
+      this.removeFetchingIndication = __bind(this.removeFetchingIndication, this);
+      this.displayFetchingIndication = __bind(this.displayFetchingIndication, this);
+      this.data = globalOptions.data;
+      this.fetchRequest = null;
+      this.search = search;
+      this.filters = filters;
+      this.pagination = pagination;
+      this.setOptions(globalOptions);
+      this.listTemplate = "{{#" + this.resourceName + "}}{{>" + this.resourceNameSingular + "}}{{/" + this.resourceName + "}}";
+      this.listItemTemplate = '<li>{{id}}</li>';
+      this.fetchingIndicationClass = 'updating';
+      this.setOptions(options);
+      $(this.renderTo).bind(this.eventName, function(event, params) {
+        return _this.fetch({
+          filterPresets: null,
+          page: params != null ? params.page : void 0
+        });
+      });
+      this.fetch({
+        filterPresets: this.filters.presets
+      });
+    }
+
+    List.prototype.displayFetchingIndication = function() {
+      return $(this.renderTo).addClass(this.fetchingIndicationClass);
+    };
+
+    List.prototype.removeFetchingIndication = function() {
+      return $(this.renderTo).removeClass(this.fetchingIndicationClass);
+    };
+
+    List.prototype.renderIndex = function(data, textStatus, jqXHR) {
+      this.data = data;
+      this.render();
+      this.pagination.render(this.data);
+      this.filters.filters = _.pluck(this.data.filters, 'filter_slug');
+      return this.filters.render(this.data);
+    };
+
+    List.prototype.fetch = function(options) {
+      var params, searchTerm, _ref,
+        _this = this;
+      if (this.fetchRequest) this.fetchRequest.abort();
+      searchTerm = this.search.searchTerm();
+      params = {
+        filters: {}
+      };
+      if (((_ref = options.filterPresets) != null ? _ref.length : void 0) > 0) {
+        params.filters = options.filterPresets;
+      } else {
+        _.each(this.filters.filters, function(filter) {
+          return params.filters[filter] = _this.filters.filterSelections(filter);
+        });
+      }
+      if (searchTerm) params.q = searchTerm;
+      if (options.page) params.page = options.page;
+      return this.fetchRequest = $.ajax({
+        url: this.urlPrefix,
+        dataType: 'json',
+        data: params,
+        type: this.httpMethod,
+        beforeSend: this.displayFetchingIndication,
+        success: this.renderIndex
+      });
+    };
+
+    List.prototype.render = function() {
+      var partials;
+      partials = {};
+      partials[this.resourceNameSingular] = this.listItemTemplate;
+      $(this.renderTo).html(Mustache.to_html(this.listTemplate, this.data, partials));
+      return this.removeFetchingIndication();
+    };
+
+    return List;
+
+  })(Utilities);
+
+  window.Filters = (function(_super) {
+
+    __extends(Filters, _super);
+
+    function Filters(globalOptions, options) {
+      var _this = this;
+      if (options == null) options = {};
+      this.handleAdvancedOptionsClick = __bind(this.handleAdvancedOptionsClick, this);
+      this.setOptions(globalOptions);
+      this.filters = options.presets ? _.keys(options.presets) : [];
+      this.setOptions(options);
+      $('input.filter_option', this.renderTo).live('change', function() {
+        return $(_this.listSelector).trigger(_this.eventName);
+      });
+      $(this.advancedOptionsToggleSelector).click(this.handleAdvancedOptionsClick);
+    }
+
+    Filters.prototype.filtersTemplate = '{{#filters}}\n<div class=\'filter\'>\n  <h3>\n    {{name}}\n  </h3>\n  <ul id=\'{{filter_slug}}_filter_options\'>\n    {{#options}}\n    <label>\n      <li>\n        <input {{#selected}}checked=\'checked\'{{/selected}}\n               class=\'left filter_option\'\n               id=\'filter_{{slug}}\'\n               name=\'filters[]\'\n               type=\'checkbox\'\n               value=\'{{value}}\' />\n        <div class=\'left filter_name\'>{{name}}</div>\n        <div class=\'right filter_count\'>{{count}}</div>\n        <div class=\'clear\'></div>\n      </li>\n    </label>\n    {{/options}}\n  </ul>\n</div>\n{{/filters}}';
+
+    Filters.prototype.filterValues = function(filter) {
+      return _.pluck($("." + filter + "_filter_input"), 'value');
+    };
+
+    Filters.prototype.filterSelections = function(filter) {
+      return _.pluck($("#" + filter + "_filter_options input.filter_option:checked"), 'value');
+    };
+
+    Filters.prototype.render = function(data) {
+      return $(this.renderTo).html(Mustache.to_html(this.filtersTemplate, data));
+    };
+
+    Filters.prototype.handleAdvancedOptionsClick = function(event) {
+      event.preventDefault();
+      return $(this.renderTo).slideToggle();
+    };
+
+    return Filters;
+
+  })(Utilities);
+
+  window.Pagination = (function(_super) {
+
+    __extends(Pagination, _super);
+
+    function Pagination(globalOptions, options) {
+      if (options == null) options = {};
+      this.handlePaginationLinkClick = __bind(this.handlePaginationLinkClick, this);
+      this.pagination = null;
+      this.maxPages = 30;
+      this.setOptions(globalOptions);
+      this.emptyListMessage = "<p>No " + this.resourceName + " matched your filter criteria</p>";
+      this.setOptions(options);
+      $("" + this.renderTo + " a").live('click', this.handlePaginationLinkClick);
+    }
+
+    Pagination.prototype.paginationTemplate = '{{#isEmpty}}\n  {{{emptyListMessage}}}\n{{/isEmpty}}\n{{^isEmpty}}\n{{#previousPage}}\n  <a href=\'{{urlPrefix}}?page={{previousPage}}\' data-page=\'{{previousPage}}\'>← Previous</a>\n{{/previousPage}}\n{{^previousPage}}\n  <span>← Previous</span>\n{{/previousPage}}\n{{#pages}}\n  {{#currentPage}}\n    <span>{{page}}</span>\n  {{/currentPage}}\n  {{^currentPage}}\n    <a href=\'{{urlPrefix}}?page={{page}}\' data-page=\'{{page}}\'>{{page}}</a>\n  {{/currentPage}}\n{{/pages}}\n{{#nextPage}}\n  <a href=\'{{urlPrefix}}?page={{nextPage}}\' data-page=\'{{nextPage}}\'>Next →</a>\n{{/nextPage}}\n{{^nextPage}}\n  <span>Next →</span>\n{{/nextPage}}\n{{/isEmpty}}';
+
+    Pagination.prototype.pagesJSON = function(currentPage, totalPages) {
+      var firstPage, groupSize, lastPage, previousPage, _i, _results;
+      groupSize = this.maxPages / 2;
+      firstPage = currentPage < groupSize ? 1 : currentPage - groupSize;
+      previousPage = firstPage + groupSize * 2 - 1;
+      lastPage = previousPage >= totalPages ? totalPages : previousPage;
+      return _.map((function() {
+        _results = [];
+        for (var _i = firstPage; firstPage <= lastPage ? _i <= lastPage : _i >= lastPage; firstPage <= lastPage ? _i++ : _i--){ _results.push(_i); }
+        return _results;
+      }).apply(this), function(page) {
+        return {
+          page: page,
+          currentPage: function() {
+            return currentPage === page;
+          }
+        };
+      });
+    };
+
+    Pagination.prototype.paginationJSON = function(pagination) {
+      return {
+        isEmpty: pagination.total_pages === 0,
+        emptyListMessage: this.emptyListMessage,
+        currentPage: pagination.current_page,
+        nextPage: pagination.next_page,
+        previousPage: pagination.previous_page,
+        urlPrefix: this.urlPrefix,
+        pages: this.pagesJSON(pagination.current_page, pagination.total_pages)
+      };
+    };
+
+    Pagination.prototype.render = function(data) {
+      this.pagination = this.paginationJSON(data.pagination);
+      return $(this.renderTo).html(Mustache.to_html(this.paginationTemplate, this.pagination));
+    };
+
+    Pagination.prototype.handlePaginationLinkClick = function(event) {
+      event.preventDefault();
+      return $(this.listSelector).trigger(this.eventName, {
+        page: $(event.target).data('page')
+      });
+    };
+
+    return Pagination;
+
+  })(Utilities);
+
+  window.Search = (function(_super) {
+
+    __extends(Search, _super);
+
+    function Search(globalOptions, options) {
+      var _this = this;
+      if (options == null) options = {};
+      this.handleSearchFormSubmit = __bind(this.handleSearchFormSubmit, this);
+      this.setOptions(globalOptions);
+      this.setOptions(options);
+      $(this.formSelector).submit(function(event) {
+        return _this.handleSearchFormSubmit(event);
+      });
+    }
+
+    Search.prototype.searchTerm = function() {
+      var q;
+      q = $(this.searchTextInputSelector).val();
+      if (!q || (q === '')) {
+        return null;
+      } else {
+        return q;
+      }
+    };
+
+    Search.prototype.handleSearchFormSubmit = function(event) {
+      event.preventDefault();
+      return $(this.listSelector).trigger(this.eventName);
+    };
+
+    return Search;
+
+  })(Utilities);
+
+}).call(this);