jsxgrid 2.0.0

package/src/jsgrid.field.js

@@ -0,0 +1,74 @@
+(function(jsGrid, $, undefined) {
+
+    function Field(config) {
+        $.extend(true, this, config);
+        this.sortingFunc = this._getSortingFunc();
+    }
+
+    Field.prototype = {
+        name: "",
+        title: null,
+        css: "",
+        align: "",
+        width: 100,
+
+        visible: true,
+        filtering: true,
+        inserting: true,
+        editing: true,
+        sorting: true,
+        sorter: "string", // name of SortStrategy or function to compare elements
+        
+        includeInDataExport: true,
+
+        headerTemplate: function() {
+            return (this.title === undefined || this.title === null) ? this.name : this.title;
+        },
+
+        itemTemplate: function(value, item) {
+            return value;
+        },
+
+        filterTemplate: function() {
+            return "";
+        },
+
+        insertTemplate: function() {
+            return "";
+        },
+
+        editTemplate: function(value, item) {
+            this._value = value;
+            return this.itemTemplate(value, item);
+        },
+
+        filterValue: function() {
+            return "";
+        },
+
+        insertValue: function() {
+            return "";
+        },
+
+        editValue: function() {
+            return this._value;
+        },
+
+        _getSortingFunc: function() {
+            var sorter = this.sorter;
+
+            if($.isFunction(sorter)) {
+                return sorter;
+            }
+
+            if(typeof sorter === "string") {
+                return jsGrid.sortStrategies[sorter];
+            }
+
+            throw Error("wrong sorter for the field \"" + this.name + "\"!");
+        }
+    };
+
+    jsGrid.Field = Field;
+
+}(jsGrid, jQuery));

package/src/jsgrid.load-indicator.js

@@ -0,0 +1,82 @@
+(function(jsGrid, $, undefined) {
+
+    function LoadIndicator(config) {
+        this._init(config);
+    }
+
+    LoadIndicator.prototype = {
+
+        container: "body",
+        message: "Loading...",
+        shading: true,
+
+        zIndex: 1000,
+        shaderClass: "jsgrid-load-shader",
+        loadPanelClass: "jsgrid-load-panel",
+
+        _init: function(config) {
+            $.extend(true, this, config);
+
+            this._initContainer();
+            this._initShader();
+            this._initLoadPanel();
+        },
+
+        _initContainer: function() {
+            this._container = $(this.container);
+        },
+
+        _initShader: function() {
+            if(!this.shading)
+                return;
+
+            this._shader = $("<div>").addClass(this.shaderClass)
+                .hide()
+                .css({
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0,
+                    zIndex: this.zIndex
+                })
+                .appendTo(this._container);
+        },
+
+        _initLoadPanel: function() {
+            this._loadPanel = $("<div>").addClass(this.loadPanelClass)
+                .text(this.message)
+                .hide()
+                .css({
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    zIndex: this.zIndex
+                })
+                .appendTo(this._container);
+        },
+
+        show: function() {
+            var $loadPanel = this._loadPanel.show();
+
+            var actualWidth = $loadPanel.outerWidth();
+            var actualHeight = $loadPanel.outerHeight();
+
+            $loadPanel.css({
+                marginTop: -actualHeight / 2,
+                marginLeft: -actualWidth / 2
+            });
+
+            this._shader.show();
+        },
+
+        hide: function() {
+            this._loadPanel.hide();
+            this._shader.hide();
+        }
+
+    };
+
+    jsGrid.LoadIndicator = LoadIndicator;
+
+}(jsGrid, jQuery));

package/src/jsgrid.load-strategies.js

@@ -0,0 +1,131 @@
+(function(jsGrid, $, undefined) {
+
+    function DirectLoadingStrategy(grid) {
+        this._grid = grid;
+    }
+
+    DirectLoadingStrategy.prototype = {
+
+        firstDisplayIndex: function() {
+            var grid = this._grid;
+            return grid.option("paging") ? (grid.option("pageIndex") - 1) * grid.option("pageSize") : 0;
+        },
+
+        lastDisplayIndex: function() {
+            var grid = this._grid;
+            var itemsCount = grid.option("data").length;
+
+            return grid.option("paging")
+                ? Math.min(grid.option("pageIndex") * grid.option("pageSize"), itemsCount)
+                : itemsCount;
+        },
+
+        itemsCount: function() {
+            return this._grid.option("data").length;
+        },
+
+        openPage: function(index) {
+            this._grid.refresh();
+        },
+
+        loadParams: function() {
+            return {};
+        },
+
+        sort: function() {
+            this._grid._sortData();
+            this._grid.refresh();
+            return $.Deferred().resolve().promise();
+        },
+
+        reset: function() {
+            this._grid.refresh();
+            return $.Deferred().resolve().promise();
+        },
+
+        finishLoad: function(loadedData) {
+            this._grid.option("data", loadedData);
+        },
+
+        finishInsert: function(insertedItem, location) {
+            var grid = this._grid;
+            
+            switch(location){
+                case "top":
+                    grid.option("data").unshift(insertedItem);
+                    break;
+                case "bottom":
+                default:
+                    grid.option("data").push(insertedItem);
+            }
+            
+            grid.refresh();
+        },
+
+        finishDelete: function(deletedItem, deletedItemIndex) {
+            var grid = this._grid;
+            grid.option("data").splice(deletedItemIndex, 1);
+            grid.reset();
+        }
+    };
+
+
+    function PageLoadingStrategy(grid) {
+        this._grid = grid;
+        this._itemsCount = 0;
+    }
+
+    PageLoadingStrategy.prototype = {
+
+        firstDisplayIndex: function() {
+            return 0;
+        },
+
+        lastDisplayIndex: function() {
+            return this._grid.option("data").length;
+        },
+
+        itemsCount: function() {
+            return this._itemsCount;
+        },
+
+        openPage: function(index) {
+            this._grid.loadData();
+        },
+
+        loadParams: function() {
+            var grid = this._grid;
+            return {
+                pageIndex: grid.option("pageIndex"),
+                pageSize: grid.option("pageSize")
+            };
+        },
+
+        reset: function() {
+            return this._grid.loadData();
+        },
+
+        sort: function() {
+            return this._grid.loadData();
+        },
+
+        finishLoad: function(loadedData) {
+            this._itemsCount = loadedData.itemsCount;
+            this._grid.option("data", loadedData.data);
+        },
+
+        finishInsert: function(insertedItem) {
+            this._grid.search();
+        },
+
+        finishDelete: function(deletedItem, deletedItemIndex) {
+            this._grid.search();
+        }
+    };
+
+    jsGrid.loadStrategies = {
+        DirectLoadingStrategy: DirectLoadingStrategy,
+        PageLoadingStrategy: PageLoadingStrategy
+    };
+
+}(jsGrid, jQuery));

package/src/jsgrid.sort-strategies.js

@@ -0,0 +1,49 @@
+(function(jsGrid, $, undefined) {
+
+    var isDefined = function(val) {
+        return typeof(val) !== "undefined" && val !== null;
+    };
+
+    var sortStrategies = {
+        string: function(str1, str2) {
+            if(!isDefined(str1) && !isDefined(str2))
+                return 0;
+
+            if(!isDefined(str1))
+                return -1;
+
+            if(!isDefined(str2))
+                return 1;
+
+            return ("" + str1).localeCompare("" + str2);
+        },
+        
+        stringNaturalSort: function(str1, str2) {
+            if(!isDefined(str1) && !isDefined(str2))
+                return 0;
+
+            if(!isDefined(str1))
+                return -1;
+
+            if(!isDefined(str2))
+                return 1;
+
+            return ("" + str1).localeCompare("" + str2, undefined, { numeric: true, sensitivity: 'base' });
+        },
+
+        number: function(n1, n2) {
+            return n1 - n2;
+        },
+
+        date: function(dt1, dt2) {
+            return dt1 - dt2;
+        },
+
+        numberAsString: function(n1, n2) {
+            return parseFloat(n1) - parseFloat(n2);
+        }
+    };
+
+    jsGrid.sortStrategies = sortStrategies;
+
+}(jsGrid, jQuery));

package/src/jsgrid.validation.js

@@ -0,0 +1,135 @@
+(function(jsGrid, $, undefined) {
+
+    function Validation(config) {
+        this._init(config);
+    }
+
+    Validation.prototype = {
+
+        _init: function(config) {
+            $.extend(true, this, config);
+        },
+
+        validate: function(args) {
+            var errors = [];
+
+            $.each(this._normalizeRules(args.rules), function(_, rule) {
+                if(rule.validator(args.value, args.item, rule.param))
+                    return;
+
+                var errorMessage = $.isFunction(rule.message) ? rule.message(args.value, args.item) : rule.message;
+                errors.push(errorMessage);
+            });
+
+            return errors;
+        },
+
+        _normalizeRules: function(rules) {
+            if(!$.isArray(rules))
+                rules = [rules];
+
+            return $.map(rules, $.proxy(function(rule) {
+                return this._normalizeRule(rule);
+            }, this));
+        },
+
+        _normalizeRule: function(rule) {
+            if(typeof rule === "string")
+                rule = { validator: rule };
+
+            if($.isFunction(rule))
+                rule = { validator: rule };
+
+            if($.isPlainObject(rule))
+                rule = $.extend({}, rule);
+            else
+                throw Error("wrong validation config specified");
+
+            if($.isFunction(rule.validator))
+                return rule;
+
+            return this._applyNamedValidator(rule, rule.validator);
+        },
+
+        _applyNamedValidator: function(rule, validatorName) {
+            delete rule.validator;
+
+            var validator = validators[validatorName];
+            if(!validator)
+                throw Error("unknown validator \"" + validatorName + "\"");
+
+            if($.isFunction(validator)) {
+                validator = { validator: validator };
+            }
+
+            return $.extend({}, validator, rule);
+        }
+    };
+
+    jsGrid.Validation = Validation;
+
+
+    var validators = {
+        required: {
+            message: "Field is required",
+            validator: function(value) {
+                return value !== undefined && value !== null && value !== "";
+            }
+        },
+
+        rangeLength: {
+            message: "Field value length is out of the defined range",
+            validator: function(value, _, param) {
+                return value.length >= param[0] && value.length <= param[1];
+            }
+        },
+
+        minLength: {
+            message: "Field value is too short",
+            validator: function(value, _, param) {
+                return value.length >= param;
+            }
+        },
+
+        maxLength: {
+            message: "Field value is too long",
+            validator: function(value, _, param) {
+                return value.length <= param;
+            }
+        },
+
+        pattern: {
+            message: "Field value is not matching the defined pattern",
+            validator: function(value, _, param) {
+                if(typeof param === "string") {
+                    param = new RegExp("^(?:" + param + ")$");
+                }
+                return param.test(value);
+            }
+        },
+
+        range: {
+            message: "Field value is out of the defined range",
+            validator: function(value, _, param) {
+                return value >= param[0] && value <= param[1];
+            }
+        },
+
+        min: {
+            message: "Field value is too small",
+            validator: function(value, _, param) {
+                return value >= param;
+            }
+        },
+
+        max: {
+            message: "Field value is too large",
+            validator: function(value, _, param) {
+                return value <= param;
+            }
+        }
+    };
+
+    jsGrid.validators = validators;
+
+}(jsGrid, jQuery));

package/src/lib/jsGridSummaryPlugin.js

@@ -0,0 +1,37 @@
+(function($, undefined) {
+    var baseJsGrid = $.fn.jsGrid;
+    if (!baseJsGrid) return;
+
+    $.fn.jsGrid = function (options) {
+        if (typeof options === "object") {
+            var originalOnRefreshed = options.onRefreshed;
+
+            options.onRefreshed = function (args) {
+                if (originalOnRefreshed) originalOnRefreshed.apply(this, arguments);
+
+                var grid = args.grid;
+                var data = grid.option("data") || [];
+                var fields = grid.option("fields") || [];
+
+                var $table = grid._container.find(".jsgrid-table").last();
+                $table.find(".jsgrid-summary-footer").remove();
+
+                var $tfoot = $("<tfoot class='jsgrid-summary-footer'>").appendTo($table);
+                var $tr = $("<tr>").addClass("jsgrid-row").css({
+                    "background": "#e1e1e1",
+                    "font-weight": "bold"
+                }).appendTo($tfoot);
+
+                fields.forEach(function (field) {
+                    var $td = $("<td>").addClass("jsgrid-cell").appendTo($tr);
+                    if (typeof field.summary === "function") {
+                        var result = field.summary.call(field, data);
+                        $td.html(result);
+                    }
+                });
+            };
+        }
+
+        return baseJsGrid.apply(this, arguments);
+    };
+}(jQuery));

package/src/lib/jsgrid.popup.basic.js

@@ -0,0 +1,107 @@
+(function(jsGrid, $, undefined) {
+    if (!jsGrid) {
+        console.log("jsGrid is not defined!");
+        return;
+    }
+    jsGrid.popup = jsGrid.popupBasic = function (formContent, options) {
+        this.idcounter = this.idcounter || 0;
+        this.idcounter++;
+
+
+        options = options || {};
+
+        options.closeText = options.closeText || 'Close';
+        options.heading = options.heading || '';
+
+        options.styles = options.styles || '.jsGridpopupBasicOverlay {' +
+            '  position: fixed;' +
+            '  top: 0;' +
+            '  bottom: 0;' +
+            '  left: 0;' +
+            '  right: 0;' +
+            '  background: rgba(0, 0, 0, 0.7);' +
+            '  transition: opacity 500ms;' +
+            '  opacity: 1;' +
+            '}' +
+            '' +
+            '.jsGridpopupBasicPopup {' +
+            '  margin: 70px auto;' +
+            '  padding: 20px;' +
+            '  min-height: 60%;'+
+            '  background: #fff;' +
+            '  border-radius: 5px;' +
+            '  width: 60%;' +
+            '  position: relative;' +
+            '  transition: all 300ms ease-in-out;' +
+            '}' +
+            '' +
+            '.jsGridpopupBasicPopup h2 {' +
+            '  margin-top: 0;' +
+            '  color: #333;' +
+            '  font-family: Tahoma, Arial, sans-serif;' +
+            '}' +
+            '.jsGridpopupBasicPopup .close {' +
+            '  position: absolute;' +
+            '  top: 10px;' +
+            '  right: 30px;' +
+            '  transition: all 200ms;' +
+            '  font-size: 30px;' +
+            '  font-weight: bold;' +
+            '  text-decoration: none;' +
+            '  color: #333;' +
+            '}' +
+            '.jsGridpopupBasicPopup .close:hover {' +
+            '  color: #06D85F;' +
+            '}' +
+            '.jsGridpopupBasicPopup .jsGridpopupBasicContent {' +
+            '  max-height: 30%;' +
+            '  overflow: auto;' +
+            '}' +
+            '' +
+            '@media screen and (max-width: 700px){' +
+            '  .jsGridpopupBasicPopup{' +
+            '    width: 70%;' +
+            '  }' +
+            '}';
+
+        if(!$('#jsGridpopupBasicStyles').length){
+            var $head = $("head");
+            var $headlinklast = $head.find("link[rel='stylesheet']:last");
+            var linkElement = "<style id='jsGridpopupBasicStyles'>" + options.styles + "</style>";
+            if ($headlinklast.length) {
+                $headlinklast.after(linkElement);
+            } else {
+                $head.append(linkElement);
+            }
+
+        }
+        var id = "jsGridpopupBasic" + this.idcounter;
+        var popup = $(
+            '<div id="' + id + '" class="jsGridpopupBasicOverlay">' +
+            '<div class="jsGridpopupBasicPopup">' +
+            '<h2></h2>'+
+            '<a class="close" href="#">&times;</a>' +
+            '<div class="jsGridpopupBasicContent">' +
+            '' +
+            '</div>' +
+            '</div>' +
+            '</div>');
+
+        popup.find('h2').text(options.heading);
+        popup.find('.jsGridpopupBasicContent').append(formContent);
+        popup.find('.close').click(function () {
+            if (options.onClose instanceof Function) {
+                options.onClose(popup);
+            }
+            popup.remove();
+        });
+        $('body').append(popup);
+        return {
+            'id': id,
+            '$popup': popup,
+            'hide':function () {
+                popup.remove();
+            }
+        };
+    }
+}(jsGrid, jQuery));