Defining the table widget classes

modules/backend/assets/css/october.css

@@ -10815,6 +10815,14 @@ html.cssanimations .cursor-loading-indicator.hide {
   position: relative;
   overflow: hidden;
   height: 100%;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.control-scrollbar > div {
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 .control-scrollbar > .scrollbar-scrollbar {
   position: absolute;

modules/backend/assets/less/controls/scrollbar.less

@@ -14,6 +14,11 @@
     position: relative;
     overflow: hidden;
     height: 100%;
+    .transform( ~'translateZ(0)');
+
+    > div {
+        .transform( ~'translateZ(0)');
+    }
 
     >.scrollbar-scrollbar {
         position: absolute;

modules/backend/widgets/Table.php

@@ -0,0 +1,68 @@
+<?php namespace Backend\Widgets;
+
+use Backend\Classes\WidgetBase;
+
+/**
+ * Table Widget.
+ *
+ * Represents an editable tabular control.
+ * 
+ * @package october\backend
+ * @author Alexey Bobkov, Samuel Georges
+ */
+class Table extends WidgetBase
+{
+    /**
+     * {@inheritDoc}
+     */
+    public $defaultAlias = 'table';
+
+    /**
+     * @var array Table columns
+     */
+    protected $columns = [];
+
+    /**
+     * @var boolean Show data table header
+     */
+    protected $showHeader = true;
+
+    /**
+     * Initialize the widget, called by the constructor and free from its parameters.
+     */
+    public function init()
+    {
+    }
+
+    /**
+     * Renders the widget.
+     */
+    public function render()
+    {
+        $this->prepareVars();
+        return $this->makePartial('table');
+    }
+
+    /**
+     * Prepares the view data
+     */
+    public function prepareVars()
+    {
+
+    }
+
+    //
+    // Internals
+    //
+
+    /**
+     * {@inheritDoc}
+     */
+    public function loadAssets()
+    {
+        $this->addCss('css/table.css', 'core');
+        $this->addJs('js/table.js', 'core');
+        $this->addJs('js/table.datasource.base.js', 'core');
+        $this->addJs('js/table.datasource.client.js', 'core');
+    }
+}

modules/backend/widgets/table/assets/js/table.datasource.base.js

@@ -0,0 +1,64 @@
+/*
+ * Base class for the table data sources.
+ */
++function ($) { "use strict";
+
+    // DATASOURCE NAMESPACES
+    // ============================
+
+    if ($.oc.table === undefined)
+        throw new Error("The $.oc.table namespace is not defined. Make sure that the table.js script is loaded.");
+
+    if ($.oc.table.datasource === undefined)
+        $.oc.table.datasource = {}
+
+    // CLASS DEFINITION
+    // ============================
+
+    var Base = function(tableObj) {
+        //
+        // State properties
+        //
+
+        this.tableObj = tableObj
+    };
+
+    Base.prototype.dispose = function() {
+        this.tableObj = null
+    };
+
+    /*
+     * Returns count records starting from the offset.
+     */
+    Base.prototype.getRecords = function(offset, count) {
+        return [];
+    };
+
+    /*
+     * Returns the total number of records in the underlying set
+     */
+    Base.prototype.count = function() {
+        return 0;
+    };
+
+    /*
+     * Creates a record with the passed data and returns the new record index.
+     */
+    Base.prototype.createRecord = function(recordData) {
+        return 0;
+    };
+
+    /*
+     * Updates a record with the specified index with the passed data
+     */
+    Base.prototype.updateRecord = function(index, recordData) {
+    };
+
+    /*
+     * Deletes a record with the specified index
+     */
+    Base.prototype.updateRecord = function(index) {
+    };
+
+    $.oc.table.datasource.base = Base
+}(window.jQuery);

modules/backend/widgets/table/assets/js/table.datasource.client.js

@@ -0,0 +1,33 @@
+/*
+ * Client memory data source for the table control.
+ */
++function ($) { "use strict";
+
+    // NAMESPACE CHECK
+    // ============================
+
+    if ($.oc.table === undefined)
+        throw new Error("The $.oc.table namespace is not defined. Make sure that the table.js script is loaded.");
+
+    if ($.oc.table.datasource === undefined)
+        throw new Error("The $.oc.table.datasource namespace is not defined. Make sure that the table.datasource.base.js script is loaded.");
+
+    // CLASS DEFINITION
+    // ============================
+
+    var Base = $.oc.table.datasource.base,
+        BaseProto = $.oc.table.datasource.base.prototype
+
+    var Client = function(tableObj) {
+        Base.call(this, tableObj)
+    };
+
+    Client.prototype = Object.create(BaseProto)
+    Client.prototype.constructor = Client
+
+    Client.prototype.dispose = function() {
+        BaseProto.dispose.call(this)
+    };
+
+    $.oc.table.datasource.client = Client
+}(window.jQuery);

modules/backend/widgets/table/assets/js/table.js

@@ -0,0 +1,114 @@
+/*
+ * Table control class
+ */
++function ($) { "use strict";
+
+    // TABLE CONTROL NAMESPACES
+    // ============================
+
+    if ($.oc === undefined)
+        $.oc = {}
+
+    if ($.oc.table === undefined)
+        $.oc.table = {}
+
+    // TABLE CLASS DEFINITION
+    // ============================
+
+    var Table = function(element, options) {
+        this.$el = $(element)
+        this.options = options
+
+        //
+        // State properties
+        //
+
+        this.dataSource = this.createDataSource()
+
+        // The current first record index.
+        // This index is zero based and has nothing to do 
+        // with the database identifiers or any underlying data.
+        this.offset = 0
+
+        // The index of the row which is being edited at the moment.
+        // This index corresponds the data source row index which 
+        // uniquely identifies the row in the data set. The negative 
+        // value means that no record is edited at the moment. When the
+        // table grid notices that a cell in another row is edited it commits
+        // the previously edited record to the data source.
+        this.editedRowIndex = -1
+    };
+
+    Table.prototype.dispose = function() {
+        // Delete the reference to the HTML element.
+        // The script doesn't remove any DOM elements themselves.
+        // If it's needed it should be done by the outer script,
+        // we only make sure that the table widget doesn't hold 
+        // references to the detached DOM tree so that the garbage
+        // collector can delete the elements if needed.
+        this.$el = null
+
+        // Dispose the data source and clean up the reference
+        this.dataSource.dispose()
+        this.dataSource = null
+
+        // TODO: unbind event handlers,
+        // remove references to objects,
+        // remove references to DOM elements
+    };
+
+    Table.prototype.createDataSource = function() {
+        var dataSourceClass = this.options.clientDataSourceClass;
+
+        if ($.oc.table.datasource === undefined || $.oc.table.datasource[dataSourceClass] == undefined)
+            throw new Error('The table client-side data source class "'+dataSourceClass+'" is not \
+                found in the .oc.table.datasource namespace.')
+
+        this.dataSource = new $.oc.table.datasource[dataSourceClass](this);
+    }
+
+    Table.DEFAULTS = {
+        clientDataSourceClass: 'client',
+        recordsPerPage: false,
+        data: null
+    }
+
+    // TABLE PLUGIN DEFINITION
+    // ============================
+
+    var old = $.fn.table
+
+    $.fn.table = function (option) {
+        var args = Array.prototype.slice.call(arguments, 1), 
+            result = undefined
+
+        this.each(function () {
+            var $this   = $(this)
+            var data    = $this.data('oc.table')
+            var options = $.extend({}, Table.DEFAULTS, $this.data(), typeof option == 'object' && option)
+            if (!data) $this.data('oc.table', (data = new Table(this, options)))
+            if (typeof option == 'string') result = data[option].apply(data, args)
+            if (typeof result != 'undefined') return false
+        })
+        
+        return result ? result : this
+    }
+
+    $.fn.table.Constructor = Table
+
+    // TABLE NO CONFLICT
+    // =================
+
+    $.fn.table.noConflict = function () {
+        $.fn.table = old
+        return this
+    }
+
+    // TABLE DATA-API
+    // ===============
+
+    $(document).on('render', function(){
+        $('div[data-control=table]').table()
+    })
+
+}(window.jQuery);

modules/backend/widgets/table/partials/_table.htm

@@ -0,0 +1 @@
+<p>This is a grid</p>