twigg-app 0.0.1

data/public/vendor/replacejs/README.md

@@ -0,0 +1,123 @@
+# Replace.js
+
+Tool for adding simple AJAX functionality to a site. See the [demo] for example
+use cases.
+
+[demo]: http://causes.github.io/replacejs/demo/
+
+## Background
+
+After doing web development for a while, we noticed that most interactions we
+added to the site involved catching a click event, performing an AJAX request,
+and updating part of the page based on the result. This typically required a
+lot of boilerplate JavaScript to set up click handlers. All that JavaScript
+slowed down the initial page load, and until the page finished loading, things
+didn't work right. It also required duplicating business and rendering logic on
+the server and the client. The site was slow and our JS code was brittle and
+difficult to test. We realized that one small library could implement this
+pattern and replace most of our JS code base.
+
+We weren't the first to reach a similar conclusion -- see Makinde Adeagbo's
+excellent presentation on [Primer].
+
+[Primer]: http://blip.tv/jsconf/makinde-adeagbo-primer-facebook-s-2k-of-javascript-to-power-almost-all-interactions-3858673
+
+## Requirements
+
+Any server-side language should do, though we use Rails. jQuery must be
+present.
+
+## Installation
+
+Put the contents of `primer.min.js` in a <script> tag in the document
+header. Link to `replace.js` at the bottom of the document body, below jQuery.
+
+```html
+<script src="/path/to/replace.js"></script>
+```
+
+## Usage
+
+You AJAX-ify a link by giving it a `data-replace` attribute containing a jQuery
+selector. When the link is clicked, its closest ancestor matching the selector
+will be replaced by the result of an AJAX request to the link's `href`.
+
+```html
+<div class="container">
+  <a href="/foo" data-replace=".container">Foo</a>
+</div>
+```
+
+The link can replace itself. A convenient selector for doing so is '*'.
+
+```html
+<a href="/foo" data-replace="*">Foo</a>
+```
+
+It is up to you to ensure that the server returns an appropriate partial in
+response to that AJAX request. If the URL also represents a full page that
+might be visited normally (e.g. linked externally), add the `data-pushstate`
+attribute to have the window's location updated using the `history.pushState()`
+API.  The server can check the `X-Requested-With` header to determine whether
+to return a partial or a full page.
+
+```html
+<a href="/foo" data-replace="*" data-pushstate>Foo</a>
+```
+
+The `data-replace` attribute also works on forms, catching the `submit` event.
+
+```html
+<form action="/foo" data-replace="*">
+  <input type="submit">
+</form>
+```
+
+## Styling
+
+While the AJAX operation is in progress, the matched container will have the
+CSS class `.replace-active`. Clicks/submits within that container will be
+ignored until the current operation completes, so you don't have to worry
+about forms being submitted twice when a user double-clicks the button.
+
+The `.replace-active` class can be useful for styling the container in order
+to give the user feedback about when the operation begins and ends. For
+instance, the following CSS style will cause elements to be faded when they
+are in the process of being replaced:
+
+```css
+.replace-active {
+  opacity: 0.5;
+}
+```
+
+## Events
+
+When a replace operation occurs, a `replace:done` event is triggered on each
+top-level element of the inserted partial. For example, given the following
+listener:
+
+```javascript
+$(document).on('replace:done', 'p', function() {
+  console.log(this.innerHTML);
+});
+```
+
+If the server returns the following partial:
+
+```html
+<p>First.</p>
+<p><em>Second.</em></p>
+<div><p>Third.</p></div>
+```
+
+The console will print:
+
+```
+First.
+<em>Second.</em>
+```
+
+## License
+
+This project is released under the MIT license.

data/public/vendor/replacejs/bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "replacejs",
+  "version": "0.0.1",
+  "main": [
+    "replace.js",
+    "primer.js",
+    "primer.min.js"
+  ],
+  "ignore": [
+    "**/.*",
+    "demo",
+    "index.html",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": ">=1.10"
+  },
+  "devDependencies": {
+    "jquery-waypoints": "~2.0.2"
+  }
+}

data/public/vendor/replacejs/primer.js

@@ -0,0 +1,17 @@
+releaseClicks = (function(document) {
+  if (document.addEventListener) {
+    var events = [];
+    function handler(event) {
+      var data = event.target.dataset;
+      if (data && data.replace) {
+        events.push(event);
+        event.preventDefault();
+      }
+    }
+    document.addEventListener('click', handler);
+    return function() {
+      document.removeEventListener('click', handler);
+      return events;
+    }
+  }
+})(document);

data/public/vendor/replacejs/primer.min.js

@@ -0,0 +1 @@
+releaseClicks=function(e){if(e.addEventListener){var t=[];function n(e){var n=e.target.dataset;if(n&&n.replace){t.push(e);e.preventDefault()}}e.addEventListener("click",n);return function(){e.removeEventListener("click",n);return t}}}(document)

data/public/vendor/replacejs/replace.js

@@ -0,0 +1,182 @@
+// Allow links to replace part of the page, rather than the entire thing.
+//
+//   <div class="container">
+//     <a href="/foo" data-replace=".container">Foo</a>
+//   </div>
+//
+// When you click the link "Foo", it will:
+// - Find an ancestor element matching the selector ".container".
+// - Perform a GET request to /foo.
+// - If the request is successful, replace the ancestor with the response body.
+//
+// It also works for forms:
+//
+//   <div class="container">
+//     <form action="/bar" method="POST" data-replace=".container">
+//       <input type="submit">
+//     </form>
+//   </div>
+//
+// Notes:
+// - It is possible to replace the same element that was clicked/submitted. A
+//   convenient selector for doing so is "*".
+// - If a link has the attribute "data-pushstate" and the browser supports it,
+//   the address bar will be updated on success using history.pushState.
+// - The container will have the class ".replace-active" while a replace
+//   operation is in progress. This can be useful for styling purposes.
+// - Clicks inside a container with a replace operation in progress are ignored.
+//   This obviates the need to prevent double submissions of forms.
+
+(function($, undefined) {
+  // Apply callback to every descendent matching selector that exists at page
+  // load or that is added later. This frees you as the developer from having to
+  // find every place in the codebase where a given widget might be added to the
+  // page and attaching its initialization logic there.
+  //
+  // Example:
+  //   $(document).initializeEach('[data-background-url]', function() {
+  //     $(this).waypoint(function() {
+  //       $(this).css('backgroundUrl', $(this).data('backgroundUrl'));
+  //     }, { offset: '100%', triggerOnce: true });
+  //   });
+  //
+  // It is also possible to nest these calls.
+  //
+  //   $(document).initializeEach('.discussion-board', function() {
+  //     $(this).initializeEach('.discussion-post', function() {
+  //       // ...
+  //     });
+  //   });
+  //
+  $.fn.initializeEach = function(selector, callback) {
+    this
+      .on('replace:done', function(event) {
+        $(event.target).find(selector).addBack(selector).each(callback);
+      })
+      .find(selector).each(callback);
+  };
+
+  // Replace an element with the result of an AJAX request.
+  function ajaxReplace($elem, url, options) {
+    if ($elem.closest('.replace-active').length) {
+      return;
+    }
+    options = options || {};
+    var $container = $elem.closest(options.selector || '*');
+    $container.addClass('replace-active').trigger('replace:start');
+
+    $.ajax(url, { type: options.method, data: options.data })
+      .always(function() {
+        $container.removeClass('replace-active');
+      })
+      .done(function(data) {
+        if (options.success) {
+          options.success($container, data);
+        }
+        $(data).replaceAll($container).trigger('replace:done');
+      })
+      .fail(function() {
+        $container.trigger('replace:fail');
+      });
+  }
+
+  $(window).on('popstate', function(event) {
+    var state = event.originalEvent.state;
+    if (state && state.selector) {
+      $(state.data).replaceAll(state.selector)
+                   .trigger('replace:done');
+    }
+  });
+
+  $(document).on('click', 'a[data-replace]', function(event) {
+    var $link = $(this);
+
+    if ($link.data('pushstate')) {
+      if (!window.history || !history.pushState) {
+        // If a link would like to use pushState but that is not supported by
+        // the browser, we'll let it do a full page load. Affects IE 8/9 users.
+        return;
+      }
+      if (event.shiftKey || event.metaKey) {
+        // User is trying to open link in a new tab or window. Allow default.
+        return;
+      }
+    }
+
+    event.preventDefault();
+
+    ajaxReplace($link, $link.attr('href'), {
+      selector: $link.data('replace'),
+      success: function($container, data) {
+        if ($link.data('pushstate')) {
+          history.replaceState({
+            selector: $link.data('replace'),
+            data: $container[0].outerHTML
+          }, null);
+          history.pushState({
+            selector: $link.data('replace'),
+            data: data
+          }, null, $link.attr('href'));
+        }
+      }
+    });
+  });
+
+  $(document).on('submit', 'form[data-replace]', function(event) {
+    event.preventDefault();
+    var $form = $(this);
+
+    ajaxReplace($form, $form.attr('action'), {
+      selector: $form.data('replace'),
+      method: $form.attr('method'),
+      data: $form.serialize()
+    });
+  });
+
+  // When you submit a form using the built-in click handler for buttons, the
+  // clicked button's name/value will be added to the query string. This can be
+  // useful for knowing which button was clicked in a form with several of
+  // them. When we submit the form programatically, the clicked button is no
+  // longer active and we have no way of knowing which one it was. This click
+  // handler emulates the built-in functionality.
+  $(document).on('click', 'form[data-replace] button', function(event) {
+    var $button = $(this);
+    $('<input type="hidden">')
+      .prop('name', $button.prop('name'))
+      .val($button.val())
+      .appendTo($button.closest('form'));
+  });
+
+  if (window.releaseClicks) {
+    $.each(releaseClicks(), function(_, event) {
+      $(event.target).trigger(event.type);
+    });
+  }
+
+  // Allows sections of the page to be lazily loaded just before they come into
+  // view. Implementation is simple: just add a 'lazy-url' data attribute like so
+  //
+  //   <div data-lazy-url="http://causes.com/expensive/content"></div>
+  //
+  // The rest will be handled by this code, in conjunction with the jQuery
+  // waypoints plug-in (http://imakewebthings.com/jquery-waypoints/); if the
+  // plug-in is not available, we degrade gracefully and revert to eager
+  // loading.
+  //
+  // Note that we support adding yet-more lazy content onto the page after page
+  // initialization, but only when using Replace.js.
+  $(document).initializeEach('[data-lazy-url]', function() {
+    var $this = $(this);
+    if (typeof $.fn.waypoint === 'function') {
+      $this.waypoint({
+        offset: '120%',
+        triggerOnce: true,
+        handler: function() {
+          ajaxReplace($this, $this.data('lazy-url'));
+        }
+      });
+    } else {
+      ajaxReplace($this, $this.data('lazy-url'));
+    }
+  });
+})(jQuery);

data/public/vendor/stupidtable.js

@@ -0,0 +1,158 @@
+// Stupid jQuery table plugin.
+
+// Call on a table
+// sortFns: Sort functions for your datatypes.
+(function($) {
+
+  $.fn.stupidtable = function(sortFns) {
+    return this.each(function() {
+      var $table = $(this);
+      sortFns = sortFns || {};
+
+      // ==================================================== //
+      //                  Utility functions                   //
+      // ==================================================== //
+
+      // Merge sort functions with some default sort functions.
+      sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
+
+      // Return the resulting indexes of a sort so we can apply
+      // this result elsewhere. This returns an array of index numbers.
+      // return[0] = x means "arr's 0th element is now at x"
+      var sort_map = function(arr, sort_function, reverse_column) {
+        var map = [];
+        var index = 0;
+        if (reverse_column) {
+          for (var i = arr.length-1; i >= 0; i--) {
+            map.push(i);
+          }
+        }
+        else {
+          var sorted = arr.slice(0).sort(sort_function);
+          for (var i=0; i<arr.length; i++) {
+            index = $.inArray(arr[i], sorted);
+
+            // If this index is already in the map, look for the next index.
+            // This handles the case of duplicate entries.
+            while ($.inArray(index, map) != -1) {
+              index++;
+            }
+            map.push(index);
+          }
+        }
+        return map;
+      };
+
+      // Apply a sort map to the array.
+      var apply_sort_map = function(arr, map) {
+        var clone = arr.slice(0),
+            newIndex = 0;
+        for (var i=0; i<map.length; i++) {
+          newIndex = map[i];
+          clone[newIndex] = arr[i];
+        }
+        return clone;
+      };
+
+      // ==================================================== //
+      //                  Begin execution!                    //
+      // ==================================================== //
+
+      // Do sorting when THs are clicked
+      $table.on("click", "th", function() {
+        var trs = $table.children("tbody").children("tr");
+        var $this = $(this);
+        var th_index = 0;
+        var dir = $.fn.stupidtable.dir;
+
+        $this.closest('tr').find("th").slice(0, $this.index()).each(function() {
+          var cols = $(this).attr("colspan") || 1;
+          th_index += parseInt(cols,10);
+        });
+
+        // Determine (and/or reverse) sorting direction, default `asc`
+        var sort_dir = $this.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
+
+        // Choose appropriate sorting function. If we're sorting descending, check
+        // for a `data-sort-desc` attribute.
+        if ( sort_dir == dir.DESC )
+          var type = $this.data("sort-desc") || $this.data("sort") || null;
+        else
+          var type = $this.data("sort") || null;
+
+        // Prevent sorting if no type defined
+        if (type === null) {
+          return;
+        }
+
+        // Trigger `beforetablesort` event that calling scripts can hook into;
+        // pass parameters for sorted column index and sorting direction
+        $table.trigger("beforetablesort", {column: th_index, direction: sort_dir});
+        // More reliable method of forcing a redraw
+        $table.css("display");
+
+        // Run sorting asynchronously on a timout to force browser redraw after
+        // `beforetablesort` callback. Also avoids locking up the browser too much.
+        setTimeout(function() {
+          // Gather the elements for this column
+          var column = [];
+          var sortMethod = sortFns[type];
+
+          // Push either the value of the `data-order-by` attribute if specified
+          // or just the text() value in this column to column[] for comparison.
+          trs.each(function(index,tr) {
+            var $e = $(tr).children().eq(th_index);
+            var sort_val = $e.data("sort-value");
+            var order_by = typeof(sort_val) !== "undefined" ? sort_val : $e.text();
+            column.push(order_by);
+          });
+
+          // Create the sort map. This column having a sort-dir implies it was
+          // the last column sorted. As long as no data-sort-desc is specified,
+          // we're free to just reverse the column.
+          var reverse_column = !!$this.data("sort-dir") && !$this.data("sort-desc");
+          var theMap = sort_map(column, sortMethod, reverse_column);
+
+          // Reset siblings
+          $table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
+          $this.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);
+
+          // Replace the content of tbody with the sortedTRs. Strangely (and
+          // conveniently!) enough, .append accomplishes this for us.
+          var sortedTRs = $(apply_sort_map(trs, theMap));
+          $table.children("tbody").append(sortedTRs);
+
+          // Trigger `aftertablesort` event. Similar to `beforetablesort`
+          $table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
+          // More reliable method of forcing a redraw
+          $table.css("display");
+        }, 10);
+      });
+    });
+  };
+
+  // Enum containing sorting directions
+  $.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
+
+  $.fn.stupidtable.default_sort_fns = {
+    "int": function(a, b) {
+      return parseInt(a, 10) - parseInt(b, 10);
+    },
+    "float": function(a, b) {
+      return parseFloat(a) - parseFloat(b);
+    },
+    "string": function(a, b) {
+      if (a < b) return -1;
+      if (a > b) return +1;
+      return 0;
+    },
+    "string-ins": function(a, b) {
+      a = a.toLowerCase();
+      b = b.toLowerCase();
+      if (a < b) return -1;
+      if (a > b) return +1;
+      return 0;
+    }
+  };
+
+})(jQuery);

data/views/dashboard.haml

@@ -0,0 +1,17 @@
+- content_for :title do
+  Twigg
+  %small
+    %span{day_links}
+
+%h2 Teams
+.teams.well{ 'data-lazy-url' => teams_path(days: @days) }
+
+%h2 Pairs
+.pairs.well{ 'data-lazy-url' => pairs_path(days: @days) }
+
+- if Twigg::Config.app.gerrit.enabled
+  %h2 Gerrit
+  .gerrit.well{ 'data-lazy-url' => gerrit_path }
+
+%h2 Authors
+.authors.well{ 'data-lazy-url' => authors_path(days: @days) }

data/views/layout.haml

@@ -0,0 +1,60 @@
+!!!
+%html
+  %head
+    %title
+      = strip_tags(yield_content :title)
+      - if Twigg::Config.organization
+        —
+        &= Twigg::Config.organization
+    %meta(name='viewport' content='width=device-width, initial-scale=1.0')
+    %link(rel='stylesheet' href='/vendor/bootstrap/dist/css/bootstrap.min.css' media='screen')
+    %link(rel='stylesheet' href='/vendor/bootstrap-glyphicons/css/bootstrap-glyphicons.css' media='screen')
+    %link(rel='stylesheet' href='/stylesheets/application.css' media='screen')
+    %link(rel='shortcut icon' href='/favicon.png')
+  %body
+    .wrap
+      .navbar.navbar-inverse
+        .container
+          .navbar-header
+            %button{ type: 'button', class: 'navbar-toggle', data: { toggle: 'collapse', target: '.navbar-responsive-collapse' }}
+              %span.icon-bar
+              %span.icon-bar
+              %span.icon-bar
+            %a.navbar-brand(href='/') Twigg
+          .navbar-collapse.collapse.navbar-responsive-collapse
+            %ul.nav.navbar-nav
+              %li{ class: active?(teams_path) }
+                %a{ href: teams_path } Teams
+              %li{ class: active?(authors_path) }
+                %a{ href: authors_path } Authors
+              %li{ class: active?(pairs_path) }
+                %a{ href: pairs_path } Pairs
+              - if Twigg::Config.app.gerrit.enabled
+                %li.dropdown{ class: active?(gerrit_changes_path, gerrit_authors_path) }
+                  %a{ href: '#', data: { toggle: 'dropdown' } }
+                    Gerrit
+                    %b.caret
+                  %ul.dropdown-menu
+                    %li
+                      %a{ href: gerrit_changes_path } Changes
+                    %li
+                      %a{ href: gerrit_authors_path } Authors
+              %li{ class: active?(russian_novels_path) }
+                %a{ href: russian_novels_path } я
+      .container
+        .page-header
+          %h1= yield_content :title
+        = yield
+      .push
+    .footer.navbar
+      - quip = random_quip
+      %p.navbar-text.text-center{ title: quip }
+        Twigg —
+        %em= quip
+    %script(src='/vendor/jquery/jquery.min.js')
+    %script(src='/vendor/bootstrap/dist/js/bootstrap.min.js')
+    %script(src='/vendor/replacejs/replace.js')
+    %script(src='/vendor/d3/d3.min.js')
+    %script(src='/vendor/stupidtable.js')
+    %script(src='/application.js')
+    = yield_content :footer