rails_slickgrid 0.0.1

data/lib/generators/rails_slickgrid/install/javascripts/slick.model.js

@@ -0,0 +1,294 @@
+/***
+ * A simple observer pattern implementation.
+ */
+function EventHelper() {
+    this.handlers = [];
+
+    this.subscribe = function(fn) {
+        this.handlers.push(fn);
+    };
+
+    this.notify = function(args) {
+        for (var i = 0; i < this.handlers.length; i++) {
+            this.handlers[i].call(this, args);
+        }
+    };
+
+    return this;
+}
+
+
+(function($) {
+    /***
+     * A sample Model implementation.
+     * Provides a filtered view of the underlying data.
+     *
+     * Relies on the data item having an "id" property uniquely identifying it.
+     */
+    function DataView() {
+        var self = this;
+
+        // private
+        var idProperty = "id";  // property holding a unique row id
+        var items = [];			// data by index
+        var rows = [];			// data by row
+        var idxById = {};		// indexes by id
+        var rowsById = null;	// rows by id; lazy-calculated
+        var filter = null;		// filter function
+        var updated = null; 	// updated item ids
+        var suspend = false;	// suspends the recalculation
+        var sortAsc = true;
+        var sortComparer = null;
+        var fastSortField = null;
+
+        var pagesize = 0;
+        var pagenum = 0;
+        var totalRows = 0;
+
+        // events
+        var onRowCountChanged = new EventHelper();
+        var onRowsChanged = new EventHelper();
+        var onPagingInfoChanged = new EventHelper();
+
+
+        function beginUpdate() {
+            suspend = true;
+        }
+
+        function endUpdate() {
+            suspend = false;
+            refresh();
+        }
+
+        function refreshIdxById() {
+            idxById = {};
+            for (var i = 0,l = items.length; i < l; i++) {
+                var id = items[i][idProperty];
+                if (id == undefined || idxById[id] != undefined)
+                    throw "Each data element must implement a unique 'id' property";
+                idxById[id] = i;
+            }
+        }
+
+        function getItems() {
+            return items;
+        }
+
+        function setItems(data, objectIdProperty) {
+            if (objectIdProperty !== undefined) idProperty = objectIdProperty;
+            items = data;
+            refreshIdxById();
+            refresh();
+        }
+
+        function setPagingOptions(args) {
+            if (args.pageSize != undefined)
+                pagesize = args.pageSize;
+
+            if (args.pageNum != undefined)
+                pagenum = Math.min(args.pageNum, Math.ceil(totalRows / pagesize));
+
+            onPagingInfoChanged.notify(getPagingInfo());
+
+            refresh();
+        }
+
+        function getPagingInfo() {
+            return {pageSize:pagesize, pageNum:pagenum, totalRows:totalRows};
+        }
+
+        function sort(comparer, ascending) {
+            sortAsc = ascending;
+            sortComparer = comparer;
+            fastSortField = null;
+            if (ascending === false) items.reverse();
+            items.sort(comparer);
+            if (ascending === false) items.reverse();
+            refreshIdxById();
+            refresh();
+        }
+
+        /***
+         * Provides a workaround for the extremely slow sorting in IE.
+         * Does a [lexicographic] sort on a give column by temporarily overriding Object.prototype.toString
+         * to return the value of that field and then doing a native Array.sort().
+         */
+        function fastSort(field, ascending) {
+            sortAsc = ascending;
+            fastSortField = field;
+            sortComparer = null;
+            var oldToString = Object.prototype.toString;
+            Object.prototype.toString = (typeof field == "function")?field:function() { return this[field] };
+            // an extra reversal for descending sort keeps the sort stable
+            // (assuming a stable native sort implementation, which isn't true in some cases)
+            if (ascending === false) items.reverse();
+            items.sort();
+            Object.prototype.toString = oldToString;
+            if (ascending === false) items.reverse();
+            refreshIdxById();
+            refresh();
+        }
+
+        function reSort() {
+            if (sortComparer)
+                sort(sortComparer,sortAsc);
+            else if (fastSortField)
+                fastSort(fastSortField,sortAsc);
+        }
+
+        function setFilter(filterFn) {
+            filter = filterFn;
+            refresh();
+        }
+
+        function getItemByIdx(i) {
+            return items[i];
+        }
+
+        function getIdxById(id) {
+            return idxById[id];
+        }
+
+        // calculate the lookup table on first call
+        function getRowById(id) {
+            if (!rowsById) {
+                rowsById = {};
+                for (var i = 0, l = rows.length; i < l; ++i) {
+                    rowsById[rows[i][idProperty]] = i;
+                }
+            }
+
+            return rowsById[id];
+        }
+
+        function getItemById(id) {
+            return items[idxById[id]];
+        }
+
+        function updateItem(id, item) {
+            if (idxById[id] === undefined || id !== item[idProperty])
+                throw "Invalid or non-matching id";
+            items[idxById[id]] = item;
+            if (!updated) updated = {};
+            updated[id] = true;
+            refresh();
+        }
+
+        function insertItem(insertBefore, item) {
+            items.splice(insertBefore, 0, item);
+            refreshIdxById();  // TODO:  optimize
+            refresh();
+        }
+
+        function addItem(item) {
+            items.push(item);
+            refreshIdxById();  // TODO:  optimize
+            refresh();
+        }
+
+        function deleteItem(id) {
+            if (idxById[id] === undefined)
+                throw "Invalid id";
+            items.splice(idxById[id], 1);
+            refreshIdxById();  // TODO:  optimize
+            refresh();
+        }
+
+        function recalc(_items, _rows, _filter, _updated) {
+            var diff = [];
+            var items = _items, rows = _rows, filter = _filter, updated = _updated; // cache as local vars
+
+            rowsById = null;
+
+            // go over all items remapping them to rows on the fly
+            // while keeping track of the differences and updating indexes
+            var rl = rows.length;
+            var currentRowIndex = 0;
+            var currentPageIndex = 0;
+            var item,id;
+
+            for (var i = 0, il = items.length; i < il; ++i) {
+                item = items[i];
+
+                if (!filter || filter(item)) {
+                    id = item[idProperty];
+
+                    if (!pagesize || (currentRowIndex >= pagesize * pagenum && currentRowIndex < pagesize * (pagenum + 1))) {
+                        if (currentPageIndex >= rl || id != rows[currentPageIndex][idProperty] || (updated && updated[id])) {
+                            diff[diff.length] = currentPageIndex;
+                            rows[currentPageIndex] = item;
+                        }
+
+                        currentPageIndex++;
+                    }
+
+                    currentRowIndex++;
+                }
+            }
+
+            if (rl > currentPageIndex)
+                rows.splice(currentPageIndex, rl - currentPageIndex);
+
+            totalRows = currentRowIndex;
+
+            return diff;
+        }
+
+        function refresh() {
+            if (suspend) return;
+
+            var countBefore = rows.length;
+            var totalRowsBefore = totalRows;
+
+            var diff = recalc(items, rows, filter, updated); // pass as direct refs to avoid closure perf hit
+
+            // if the current page is no longer valid, go to last page and recalc
+            // we suffer a performance penalty here, but the main loop (recalc) remains highly optimized
+            if (pagesize && totalRows < pagenum * pagesize) {
+                pagenum = Math.floor(totalRows / pagesize);
+                diff = recalc(items, rows, filter, updated);
+            }
+
+            updated = null;
+
+            if (totalRowsBefore != totalRows) onPagingInfoChanged.notify(getPagingInfo());
+            if (countBefore != rows.length) onRowCountChanged.notify({previous:countBefore, current:rows.length});
+            if (diff.length > 0) onRowsChanged.notify(diff);
+        }
+
+
+        return {
+            // properties
+            "rows":             rows,  // note: neither the array or the data in it should be modified directly
+
+            // methods
+            "beginUpdate":      beginUpdate,
+            "endUpdate":        endUpdate,
+            "setPagingOptions": setPagingOptions,
+            "getPagingInfo":    getPagingInfo,
+            "getItems":         getItems,
+            "setItems":         setItems,
+            "setFilter":        setFilter,
+            "sort":             sort,
+            "fastSort":         fastSort,
+            "reSort":           reSort,
+            "getIdxById":       getIdxById,
+            "getRowById":       getRowById,
+            "getItemById":      getItemById,
+            "getItemByIdx":     getItemByIdx,
+            "refresh":          refresh,
+            "updateItem":       updateItem,
+            "insertItem":       insertItem,
+            "addItem":          addItem,
+            "deleteItem":       deleteItem,
+
+            // events
+            "onRowCountChanged":    onRowCountChanged,
+            "onRowsChanged":        onRowsChanged,
+            "onPagingInfoChanged":  onPagingInfoChanged
+        };
+    }
+
+    // Slick.Data.DataView
+    $.extend(true, window, { Slick: { Data: { DataView: DataView }}});
+})(jQuery);

data/lib/generators/rails_slickgrid/install/javascripts/slick.pager.js

@@ -0,0 +1,146 @@
+(function($) {
+    function SlickGridPager(dataView, grid, $container)
+    {
+        var $status, $contextMenu;
+
+        function init()
+        {
+            dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
+                updatePager(pagingInfo);
+            });
+
+            constructPagerUI();
+            updatePager(dataView.getPagingInfo());
+        }
+
+		function getNavState()
+		{
+			var cannotLeaveEditMode = !Slick.GlobalEditorLock.commitCurrentEdit();
+			var pagingInfo = dataView.getPagingInfo();
+			var lastPage = Math.floor(pagingInfo.totalRows/pagingInfo.pageSize);
+
+            return {
+                canGotoFirst:	!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
+                canGotoLast:	!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum != lastPage,
+                canGotoPrev:	!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum > 0,
+                canGotoNext:	!cannotLeaveEditMode && pagingInfo.pageSize != 0 && pagingInfo.pageNum < lastPage,
+                pagingInfo:		pagingInfo,
+                lastPage:		lastPage
+            }
+        }
+
+        function setPageSize(n)
+        {
+            dataView.setPagingOptions({pageSize:n});
+        }
+
+        function gotoFirst()
+        {
+            if (getNavState().canGotoFirst)
+                dataView.setPagingOptions({pageNum: 0});
+        }
+
+        function gotoLast()
+        {
+            var state = getNavState();
+            if (state.canGotoLast)
+                dataView.setPagingOptions({pageNum: state.lastPage});
+        }
+
+        function gotoPrev()
+        {
+            var state = getNavState();
+            if (state.canGotoPrev)
+                dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum-1});
+        }
+
+        function gotoNext()
+        {
+            var state = getNavState();
+            if (state.canGotoNext)
+                dataView.setPagingOptions({pageNum: state.pagingInfo.pageNum+1});
+        }
+
+        function constructPagerUI()
+        {
+            $container.empty();
+
+            $status = $("<span class='slick-pager-status' />").appendTo($container);
+
+            var $nav = $("<span class='slick-pager-nav' />").appendTo($container);
+            var $settings = $("<span class='slick-pager-settings' />").appendTo($container);
+
+            $settings
+                    .append("<span class='slick-pager-settings-expanded' style='display:none'>Show: <a data=0>All</a><a data='-1'>Auto</a><a data=25>25</a><a data=50>50</a><a data=100>100</a></span>");
+
+            $settings.find("a[data]").click(function(e) {
+                var pagesize = $(e.target).attr("data");
+                if (pagesize != undefined)
+                {
+                    if (pagesize == -1)
+                    {
+                        var vp = grid.getViewport();
+                        setPageSize(vp.bottom-vp.top);
+                    }
+                    else
+                        setPageSize(parseInt(pagesize));
+                }
+            });
+
+            var icon_prefix = "<span class='ui-state-default ui-corner-all ui-icon-container'><span class='ui-icon ";
+            var icon_suffix = "' /></span>";
+
+            $(icon_prefix + "ui-icon-lightbulb" + icon_suffix)
+                    .click(function() { $(".slick-pager-settings-expanded").toggle() })
+                    .appendTo($settings);
+
+            $(icon_prefix + "ui-icon-seek-first" + icon_suffix)
+                    .click(gotoFirst)
+                    .appendTo($nav);
+
+            $(icon_prefix + "ui-icon-seek-prev" + icon_suffix)
+                    .click(gotoPrev)
+                    .appendTo($nav);
+
+            $(icon_prefix + "ui-icon-seek-next" + icon_suffix)
+                    .click(gotoNext)
+                    .appendTo($nav);
+
+            $(icon_prefix + "ui-icon-seek-end" + icon_suffix)
+                    .click(gotoLast)
+                    .appendTo($nav);
+
+            $container.find(".ui-icon-container")
+                    .hover(function() {
+                        $(this).toggleClass("ui-state-hover");
+                    });
+
+            $container.children().wrapAll("<div class='slick-pager' />");
+        }
+
+
+        function updatePager(pagingInfo)
+        {
+            var state = getNavState();
+
+            $container.find(".slick-pager-nav span").removeClass("ui-state-disabled");
+            if (!state.canGotoFirst) $container.find(".ui-icon-seek-first").addClass("ui-state-disabled");
+            if (!state.canGotoLast) $container.find(".ui-icon-seek-end").addClass("ui-state-disabled");
+            if (!state.canGotoNext) $container.find(".ui-icon-seek-next").addClass("ui-state-disabled");
+            if (!state.canGotoPrev) $container.find(".ui-icon-seek-prev").addClass("ui-state-disabled");
+
+
+            if (pagingInfo.pageSize == 0)
+                $status.text("Showing all " + pagingInfo.totalRows + " rows");
+            else
+                $status.text("Showing page " + (pagingInfo.pageNum+1) + " of " + (Math.floor(pagingInfo.totalRows/pagingInfo.pageSize)+1));
+        }
+
+
+
+        init();
+    }
+
+    // Slick.Controls.Pager
+    $.extend(true, window, { Slick: { Controls: { Pager: SlickGridPager }}});
+})(jQuery);

data/lib/generators/rails_slickgrid/install/stylesheets/slick.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;
+}