From 11be3fede39024f285309f61cbf32ee4d0d5cc28 Mon Sep 17 00:00:00 2001 From: alekseybobkov Date: Tue, 11 Nov 2014 19:45:50 -0800 Subject: [PATCH] Defining the table widget classes --- modules/backend/assets/css/october.css | 8 ++ .../assets/less/controls/scrollbar.less | 5 + modules/backend/widgets/Table.php | 68 +++++++++++ .../table/assets/js/table.datasource.base.js | 64 ++++++++++ .../assets/js/table.datasource.client.js | 33 +++++ .../backend/widgets/table/assets/js/table.js | 114 ++++++++++++++++++ .../backend/widgets/table/partials/_table.htm | 1 + 7 files changed, 293 insertions(+) create mode 100644 modules/backend/widgets/Table.php create mode 100644 modules/backend/widgets/table/assets/js/table.datasource.base.js create mode 100644 modules/backend/widgets/table/assets/js/table.datasource.client.js create mode 100644 modules/backend/widgets/table/assets/js/table.js create mode 100644 modules/backend/widgets/table/partials/_table.htm diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 607e72633..4df6a5677 100644 --- a/modules/backend/assets/css/october.css +++ b/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; diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less index f17bfe6c6..8ca3585e2 100644 --- a/modules/backend/assets/less/controls/scrollbar.less +++ b/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; diff --git a/modules/backend/widgets/Table.php b/modules/backend/widgets/Table.php new file mode 100644 index 000000000..27d0137f3 --- /dev/null +++ b/modules/backend/widgets/Table.php @@ -0,0 +1,68 @@ +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'); + } +} diff --git a/modules/backend/widgets/table/assets/js/table.datasource.base.js b/modules/backend/widgets/table/assets/js/table.datasource.base.js new file mode 100644 index 000000000..e6b87b9b6 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/modules/backend/widgets/table/assets/js/table.datasource.client.js b/modules/backend/widgets/table/assets/js/table.datasource.client.js new file mode 100644 index 000000000..a84b1a8f5 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/modules/backend/widgets/table/assets/js/table.js b/modules/backend/widgets/table/assets/js/table.js new file mode 100644 index 000000000..f7e067c11 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/modules/backend/widgets/table/partials/_table.htm b/modules/backend/widgets/table/partials/_table.htm new file mode 100644 index 000000000..15122a5c0 --- /dev/null +++ b/modules/backend/widgets/table/partials/_table.htm @@ -0,0 +1 @@ +

This is a grid

\ No newline at end of file