slickgrid-rails 0.1.0

data/vendor/assets/javascripts/slick/remotemodel.js

@@ -0,0 +1,164 @@
+(function ($) {
+  /***
+   * A sample AJAX data store implementation.
+   * Right now, it's hooked up to load all Apple-related Digg stories, but can
+   * easily be extended to support and JSONP-compatible backend that accepts paging parameters.
+   */
+  function RemoteModel() {
+    // private
+    var PAGESIZE = 50;
+    var data = {length: 0};
+    var searchstr = "apple";
+    var sortcol = null;
+    var sortdir = 1;
+    var h_request = null;
+    var req = null; // ajax request
+
+    // events
+    var onDataLoading = new Slick.Event();
+    var onDataLoaded = new Slick.Event();
+
+
+    function init() {
+    }
+
+
+    function isDataLoaded(from, to) {
+      for (var i = from; i <= to; i++) {
+        if (data[i] == undefined || data[i] == null) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+
+
+    function clear() {
+      for (var key in data) {
+        delete data[key];
+      }
+      data.length = 0;
+    }
+
+
+    function ensureData(from, to) {
+      if (req) {
+        req.abort();
+        for (var i = req.fromPage; i <= req.toPage; i++)
+          data[i * PAGESIZE] = undefined;
+      }
+
+      if (from < 0) {
+        from = 0;
+      }
+
+      var fromPage = Math.floor(from / PAGESIZE);
+      var toPage = Math.floor(to / PAGESIZE);
+
+      while (data[fromPage * PAGESIZE] !== undefined && fromPage < toPage)
+        fromPage++;
+
+      while (data[toPage * PAGESIZE] !== undefined && fromPage < toPage)
+        toPage--;
+
+      if (fromPage > toPage || ((fromPage == toPage) && data[fromPage * PAGESIZE] !== undefined)) {
+        // TODO:  look-ahead
+        return;
+      }
+
+      var url = "http://services.digg.com/search/stories?query=" + searchstr + "&offset=" + (fromPage * PAGESIZE) + "&count=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE) + "&appkey=http://slickgrid.googlecode.com&type=javascript";
+
+      switch (sortcol) {
+        case "diggs":
+          url += ("&sort=" + ((sortdir > 0) ? "digg_count-asc" : "digg_count-desc"));
+          break;
+      }
+
+      if (h_request != null) {
+        clearTimeout(h_request);
+      }
+
+      h_request = setTimeout(function () {
+        for (var i = fromPage; i <= toPage; i++)
+          data[i * PAGESIZE] = null; // null indicates a 'requested but not available yet'
+
+        onDataLoading.notify({from: from, to: to});
+
+        req = $.jsonp({
+          url: url,
+          callbackParameter: "callback",
+          cache: true, // Digg doesn't accept the autogenerated cachebuster param
+          success: onSuccess,
+          error: function () {
+            onError(fromPage, toPage)
+          }
+        });
+        req.fromPage = fromPage;
+        req.toPage = toPage;
+      }, 50);
+    }
+
+
+    function onError(fromPage, toPage) {
+      alert("error loading pages " + fromPage + " to " + toPage);
+    }
+
+    function onSuccess(resp) {
+      var from = this.fromPage * PAGESIZE, to = from + resp.count;
+      data.length = parseInt(resp.total);
+
+      for (var i = 0; i < resp.stories.length; i++) {
+        data[from + i] = resp.stories[i];
+        data[from + i].index = from + i;
+      }
+
+      req = null;
+
+      onDataLoaded.notify({from: from, to: to});
+    }
+
+
+    function reloadData(from, to) {
+      for (var i = from; i <= to; i++)
+        delete data[i];
+
+      ensureData(from, to);
+    }
+
+
+    function setSort(column, dir) {
+      sortcol = column;
+      sortdir = dir;
+      clear();
+    }
+
+    function setSearch(str) {
+      searchstr = str;
+      clear();
+    }
+
+
+    init();
+
+    return {
+      // properties
+      "data": data,
+
+      // methods
+      "clear": clear,
+      "isDataLoaded": isDataLoaded,
+      "ensureData": ensureData,
+      "reloadData": reloadData,
+      "setSort": setSort,
+      "setSearch": setSearch,
+
+      // events
+      "onDataLoading": onDataLoading,
+      "onDataLoaded": onDataLoaded
+    };
+  }
+
+  // Slick.Data.RemoteModel
+  $.extend(true, window, { Slick: { Data: { RemoteModel: RemoteModel }}});
+})(jQuery);

data/vendor/assets/stylesheets/slick/controls/columnpicker.css

@@ -0,0 +1,30 @@
+.slick-columnpicker {
+  border: 1px solid #718BB7;
+  background: #f0f0f0;
+  padding: 6px;
+  -moz-box-shadow: 2px 2px 2px silver;
+  -webkit-box-shadow: 2px 2px 2px silver;
+  min-width: 100px;
+  cursor: default;
+}
+
+.slick-columnpicker li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+}
+
+.slick-columnpicker input {
+  margin: 4px;
+}
+
+.slick-columnpicker li a {
+  display: block;
+  padding: 4px;
+  font-weight: bold;
+}
+
+.slick-columnpicker li a:hover {
+  background: white;
+}

data/vendor/assets/stylesheets/slick/controls/pager.css.scss

@@ -0,0 +1,41 @@
+.slick-pager {
+  width: 100%;
+  height: 26px;
+  border: 1px solid gray;
+  border-top: 0;
+  background: image-url('slick/header-columns-bg.gif') repeat-x center bottom;
+  vertical-align: middle;
+}
+
+.slick-pager .slick-pager-status {
+  display: inline-block;
+  padding: 6px;
+}
+
+.slick-pager .ui-icon-container {
+  display: inline-block;
+  margin: 2px;
+  border-color: gray;
+}
+
+.slick-pager .slick-pager-nav {
+  display: inline-block;
+  float: left;
+  padding: 2px;
+}
+
+.slick-pager .slick-pager-settings {
+  display: block;
+  float: right;
+  padding: 2px;
+}
+
+.slick-pager .slick-pager-settings * {
+  vertical-align: middle;
+}
+
+.slick-pager .slick-pager-settings a {
+  padding: 2px;
+  text-decoration: underline;
+  cursor: pointer;
+}

data/vendor/assets/stylesheets/slick/default-theme.css.scss

@@ -0,0 +1,104 @@
+/*
+IMPORTANT:
+In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
+No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
+classes should alter those!
+*/
+
+.slick-header-columns {
+  background: image-url('slick/header-columns-bg.gif') repeat-x center bottom;
+  border-bottom: 1px solid silver;
+}
+
+.slick-header-column {
+  background: image-url('slick/header-columns-bg.gif') repeat-x center bottom;
+  border-right: 1px solid silver;
+}
+
+.slick-header-column:hover, .slick-header-column-active {
+  background: white image-url('slick/header-columns-over-bg.gif') repeat-x center bottom;
+}
+
+.slick-headerrow {
+  background: #fafafa;
+}
+
+.slick-headerrow-column {
+  background: #fafafa;
+  border-bottom: 0;
+  height: 100%;
+}
+
+.slick-row.ui-state-active {
+  background: #F5F7D7;
+}
+
+.slick-row {
+  position: absolute;
+  background: white;
+  border: 0px;
+  line-height: 20px;
+}
+
+.slick-row.selected {
+  z-index: 10;
+  background: #DFE8F6;
+}
+
+.slick-cell {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.slick-group {
+  border-bottom: 2px solid silver;
+}
+
+.slick-group-toggle {
+  width: 9px;
+  height: 9px;
+  margin-right: 5px;
+}
+
+.slick-group-toggle.expanded {
+  background: image-url('slick/collapse.gif') no-repeat center center;
+}
+
+.slick-group-toggle.collapsed {
+  background: image-url('slick/expand.gif') no-repeat center center;
+}
+
+.slick-group-totals {
+  color: gray;
+  background: white;
+}
+
+.slick-cell.selected {
+  background-color: beige;
+}
+
+.slick-cell.active {
+  border-color: gray;
+  border-style: solid;
+}
+
+.slick-sortable-placeholder {
+  background: silver !important;
+}
+
+.slick-row[row$="1"], .slick-row[row$="3"], .slick-row[row$="5"], .slick-row[row$="7"], .slick-row[row$="9"] {
+  background: #fafafa;
+}
+
+.slick-row.ui-state-active {
+  background: #F5F7D7;
+}
+
+.slick-row.loading {
+  opacity: 0.5;
+  filter: alpha(opacity = 50);
+}
+
+.slick-cell.invalid {
+  border-color: red;
+}

data/vendor/assets/stylesheets/slick/grid.css.scss

@@ -0,0 +1,158 @@
+/*
+IMPORTANT:
+In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
+No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
+classes should alter those!
+*/
+
+.slick-header.ui-state-default, .slick-headerrow.ui-state-default {
+  width: 100%;
+  overflow: hidden;
+  border-left: 0px;
+}
+
+.slick-header-columns, .slick-headerrow-columns {
+  width: 999999px;
+  position: relative;
+  white-space: nowrap;
+  cursor: default;
+  overflow: hidden;
+}
+
+.slick-header-column.ui-state-default {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 16px;
+  line-height: 16px;
+  margin: 0;
+  padding: 4px;
+  border-right: 1px solid silver;
+  border-left: 0px;
+  border-top: 0px;
+  border-bottom: 0px;
+  float: left;
+}
+
+.slick-headerrow-column.ui-state-default {
+  padding: 4px;
+}
+
+.slick-header-column-sorted {
+  font-style: italic;
+}
+
+.slick-sort-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 5px;
+  margin-left: 4px;
+}
+
+.slick-sort-indicator-desc {
+  background: image-url('slick/sort-desc.gif');
+}
+
+.slick-sort-indicator-asc {
+  background: image-url('slick/sort-asc.gif');
+}
+
+.slick-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  cursor: col-resize;
+  width: 4px;
+  right: 0px;
+  top: 0;
+  height: 100%;
+}
+
+.slick-sortable-placeholder {
+  background: silver;
+}
+
+.grid-canvas {
+  position: relative;
+  outline: 0;
+}
+
+.slick-row.ui-widget-content, .slick-row.ui-state-active {
+  position: absolute;
+  border: 0px;
+  width: 100%;
+}
+
+.slick-cell, .slick-headerrow-column {
+  position: absolute;
+
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  border-bottom-color: silver;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  z-index: 1;
+  padding: 1px 2px 2px 1px;
+  margin: 0;
+
+  white-space: nowrap;
+
+  cursor: default;
+}
+
+.slick-group {
+}
+
+.slick-group-toggle {
+  display: inline-block;
+}
+
+.slick-cell.highlighted {
+  background: lightskyblue;
+  background: rgba(0, 0, 255, 0.2);
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  transition: all 0.5s;
+}
+
+.slick-cell.flashing {
+  border: 1px solid red !important;
+}
+
+.slick-cell.editable {
+  z-index: 11;
+  overflow: visible;
+  background: white;
+  border-color: black;
+  border-style: solid;
+}
+
+.slick-cell:focus {
+  outline: none;
+}
+
+.slick-reorder-proxy {
+  display: inline-block;
+  background: blue;
+  opacity: 0.15;
+  filter: alpha(opacity = 15);
+  cursor: move;
+}
+
+.slick-reorder-guide {
+  display: inline-block;
+  height: 2px;
+  background: blue;
+  opacity: 0.7;
+  filter: alpha(opacity = 70);
+}
+
+.slick-selection {
+  z-index: 10;
+  position: absolute;
+  border: 2px dashed black;
+}