Grid -> DataGrid

modules/backend/ServiceProvider.php

@@ -46,9 +46,9 @@ class ServiceProvider extends ModuleServiceProvider
                 'label' => 'Date picker',
                 'alias' => 'datepicker'
             ]);
-            $manager->registerFormWidget('Backend\FormWidgets\Grid', [
-                'label' => 'Grid',
-                'alias' => 'grid'
+            $manager->registerFormWidget('Backend\FormWidgets\DataGrid', [
+                'label' => 'Data Grid',
+                'alias' => 'datagrid'
             ]);
         });
 

modules/backend/formwidgets/DataGrid.php

@@ -9,12 +9,12 @@ use Backend\Classes\FormWidgetBase;
  * @package october\backend
  * @author Alexey Bobkov, Samuel Georges
  */
-class Grid extends FormWidgetBase
+class DataGrid extends FormWidgetBase
 {
     /**
      * {@inheritDoc}
      */
-    public $defaultAlias = 'grid';
+    public $defaultAlias = 'datagrid';
 
     /**
      * @var array Grid columns
@@ -35,7 +35,7 @@ class Grid extends FormWidgetBase
     public function render()
     {
         $this->prepareVars();
-        return $this->makePartial('grid');
+        return $this->makePartial('datagrid');
     }
 
     /**
@@ -105,9 +105,9 @@ class Grid extends FormWidgetBase
     public function loadAssets()
     {
         $this->addCss('vendor/handsontable/jquery.handsontable.full.css', 'core');
-        $this->addCss('css/grid.css', 'core');
+        $this->addCss('css/datagrid.css', 'core');
         $this->addJs('vendor/handsontable/jquery.handsontable.full.js', 'core');
-        $this->addJs('js/grid.js', 'core');
+        $this->addJs('js/datagrid.js', 'core');
     }
 
     /**

modules/backend/formwidgets/datagrid/assets/js/datagrid.js

@@ -0,0 +1,113 @@
+/*
+ * DataGrid plugin
+ * 
+ * Data attributes:
+ * - data-control="datagrid" - enables the plugin on an element
+ * - data-option="value" - an option with a value
+ *
+ * JavaScript API:
+ * $('a#someElement').dataGrid({ option: 'value' })
+ *
+ * Dependences: 
+ * - Some other plugin (filename.js)
+ */
+
++function ($) { "use strict";
+
+    // DATAGRID CLASS DEFINITION
+    // ============================
+
+    var DataGrid = function(element, options) {
+        var self       = this
+        this.options   = options
+        this.$el       = $(element)
+
+        this.staticWidths = this.calculateColumnWidths()
+
+        // Init
+        var handsontableOptions = {
+            colHeaders: this.options.columnHeaders,
+            colWidths: function(columnIndex) {
+                return self.staticWidths[columnIndex]
+            },
+            columns: this.options.columns,
+            startRows: this.options.startRows
+        }
+
+        this.$el.handsontable(handsontableOptions)
+
+        $(window).on('resize', function(){
+            self.staticWidths = self.calculateColumnWidths()
+        })
+    }
+
+    DataGrid.DEFAULTS = {
+        startRows: null,
+        columnHeaders: null,
+        columnWidths: null,
+        columns: null
+    }
+
+    DataGrid.prototype.calculateColumnWidths = function() {
+
+        var widths = this.options.columnWidths,
+            totalWidth = this.$el.innerWidth(),
+            usedWidth = 0,
+            unsetWidthCounts = 0,
+            staticWidths = []
+
+        $.each(widths, function() {
+            var width = parseInt(this)
+            usedWidth += width
+            if (width <= 0) unsetWidthCounts++
+        })
+
+        $.each(widths, function() {
+            if (this > 0) {
+                staticWidths.push(this)
+            } else {
+                var remainingWidth = ((totalWidth - usedWidth) / unsetWidthCounts) - 2
+                staticWidths.push(Math.max(remainingWidth, 100))
+            }
+        })
+
+        return staticWidths
+    }
+
+    // DATAGRID PLUGIN DEFINITION
+    // ============================
+
+    var old = $.fn.dataGrid
+
+    $.fn.dataGrid = function (option) {
+        var args = Array.prototype.slice.call(arguments, 1), result
+        this.each(function () {
+            var $this   = $(this)
+            var data    = $this.data('oc.datagrid')
+            var options = $.extend({}, DataGrid.DEFAULTS, $this.data(), typeof option == 'object' && option)
+            if (!data) $this.data('oc.datagrid', (data = new DataGrid(this, options)))
+            if (typeof option == 'string') result = data[option].apply(data, args)
+            if (typeof result != 'undefined') return false
+        })
+        
+        return result ? result : this
+    }
+
+    $.fn.dataGrid.Constructor = DataGrid
+
+    // DATAGRID NO CONFLICT
+    // =================
+
+    $.fn.dataGrid.noConflict = function () {
+        $.fn.dataGrid = old
+        return this
+    }
+
+    // DATAGRID DATA-API
+    // ===============
+
+    $(document).on('render', function(){
+        $('div[data-control=datagrid]').dataGrid()
+    })
+
+}(window.jQuery);

modules/backend/formwidgets/datagrid/partials/_datagrid.htm

@@ -0,0 +1,12 @@
+<div
+    id="<?= $this->getId() ?>"
+    style="width:100%"
+    data-control="datagrid"
+    data-start-rows="6"></div>
+
+<script>
+    $('#<?= $this->getId() ?>')
+        .data('columns', <?= json_encode($columnDefinitions) ?>)
+        .data('columnHeaders', <?= json_encode($columnHeaders) ?>)
+        .data('columnWidths', <?= json_encode($columnWidths) ?>)
+</script>

modules/backend/formwidgets/grid/partials/_grid.htm

@@ -1,35 +0,0 @@
-<div id="dataTable" style="width:100%"></div>
-<script>
-    var data = [
-        ["", "Kia", "Nissan", "Toyota", "Honda"],
-        ["2008", 10, 11, 12, 13],
-        ["2009", 20, 11, 14, 13],
-        ["2010", 30, 15, 12, 13]
-    ];
-    $("#dataTable").handsontable({
-        // data: data,
-        colHeaders: <?= json_encode($columnHeaders) ?>,
-        colWidths: function(columnIndex) {
-            var widths = <?= json_encode($columnWidths) ?>,
-                totalWidth = $("#dataTable").innerWidth(),
-                usedWidth = 0,
-                unsetWidthCounts = 0,
-                current = parseInt(widths[columnIndex])
-
-            $.each(widths, function() {
-                var width = parseInt(this)
-                usedWidth += width
-                if (width <= 0) unsetWidthCounts++
-            })
-
-            if (current > 0)
-                return current
-
-            var remainingWidth = ((totalWidth - usedWidth) / unsetWidthCounts) - 2
-            return Math.max(remainingWidth, 100)
-        },
-        columns: <?= json_encode($columnDefinitions) ?>,
-        startRows: 6
-    });
-</script>
-