Gradebook UIUX (#2123)

* Full view of columns + viewable checkbox * Cltr-shift-a or double click on resize based on header size * Changed hover effect, removed column picker * Reformatted files and removed columnpicker * Reformatted files and removed columnpicker * Removed images * Moved css around * Documentation about dbl-click * changes in documentation * newline * added hyphen
autolab · Apr 28, 2024 · f554808 · f554808
1 parent 586e7e9
commit f554808
Show file tree

Hide file tree

Showing 11 changed files with 514 additions and 165 deletions.
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
@@ -4,8 +4,9 @@
 //= link highlightjs-styles/vs.css
 //= link assessments/create_edit.css
 //= link SlickGrid/2.02/slick.grid.css
-//= link SlickGrid/2.02/controls/slick.columnpicker.css
+//= link SlickGrid/2.02/plugins/slick.headermenu.js
+//= link SlickGrid/2.02/plugins/slick.headermenu.css
+//= link SlickGrid/2.02/plugins/slick.autocolumnsize.js
 //= link SlickGrid/2.02/slick.core.js
 //= link SlickGrid/2.02/slick.grid.js
 //= link SlickGrid/2.02/slick.dataview.js
-//= link SlickGrid/2.02/controls/slick.columnpicker.js
diff --git a/app/assets/javascripts/SlickGrid/2.02/controls/slick.columnpicker.js b/app/assets/javascripts/SlickGrid/2.02/controls/slick.columnpicker.js
diff --git a/app/assets/javascripts/SlickGrid/2.02/plugins/slick.autocolumnsize.js b/app/assets/javascripts/SlickGrid/2.02/plugins/slick.autocolumnsize.js
@@ -0,0 +1,157 @@
+(function ($) {
+    $.extend(true, window, {
+        Slick: {
+            Plugins: {
+                AutoColumnSize: AutoColumnSize
+            }
+        }
+    });
+
+    function AutoColumnSize(maxWidth) {
+
+        var grid, $container, context,
+            keyCodes = {
+                'A': 65
+            };
+
+        function init(_grid) {
+            grid = _grid;
+            maxWidth = maxWidth || 300;
+
+            $container = $(grid.getContainerNode());
+            $container.on("dblclick.autosize", ".slick-resizable-handle", reSizeColumn);
+            $container.keydown(handleControlKeys);
+
+            context = document.createElement("canvas").getContext("2d");
+        }
+
+        function destroy() {
+            $container.off();
+        }
+
+        function handleControlKeys(event) {
+            if (event.ctrlKey && event.shiftKey && event.keyCode === keyCodes.A) {
+                resizeAllColumns();
+            }
+        }
+
+        function resizeAllColumns() {
+            var elHeaders = $container.find(".slick-header-column");
+            var allColumns = grid.getColumns();
+            elHeaders.each(function(index, el) {
+                var columnDef = $(el).data('column');
+                var headerWidth = getElementWidth(el);
+                var colIndex = grid.getColumnIndex(columnDef.id);
+                var column = allColumns[colIndex];
+                var autoSizeWidth = Math.max(headerWidth, getMaxColumnTextWidth(columnDef, colIndex)) + 1;
+                autoSizeWidth = Math.min(maxWidth, autoSizeWidth);
+                column.width = autoSizeWidth;
+            });
+            grid.setColumns(allColumns);
+            grid.onColumnsResized.notify();
+        }
+
+        function reSizeColumn(e) {
+            var headerEl = $(e.currentTarget).closest('.slick-header-column');
+            var columnDef = headerEl.data('column');
+
+            if (!columnDef || !columnDef.resizable) {
+                return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            var headerWidth = getElementWidth(headerEl[0]);
+            var colIndex = grid.getColumnIndex(columnDef.id);
+            var allColumns = grid.getColumns();
+            var column = allColumns[colIndex];
+
+            var autoSizeWidth = Math.max(headerWidth, getMaxColumnTextWidth(columnDef, colIndex)) + 1;
+
+            if (autoSizeWidth !== column.width) {
+                column.width = autoSizeWidth;
+                grid.setColumns(allColumns);
+                grid.onColumnsResized.notify();
+            }
+        }
+
+        function getMaxColumnTextWidth(columnDef, colIndex) {
+            var texts = [];
+            var rowEl = createRow(columnDef);
+            var data = grid.getData();
+            if (Slick.Data && data instanceof Slick.Data.DataView) {
+                data = data.getItems();
+            }
+            for (var i = 0; i < data.length; i++) {
+                texts.push(data[i][columnDef.field]);
+            }
+            var template = getMaxTextTemplate(texts, columnDef, colIndex, data, rowEl);
+            var width = getTemplateWidth(rowEl, template);
+            deleteRow(rowEl);
+            return width;
+        }
+
+        function getTemplateWidth(rowEl, template) {
+            var cell = $(rowEl.find(".slick-cell"));
+            cell.append(template);
+            $(cell).find("*").css("position", "relative");
+            return cell.outerWidth() + 1;
+        }
+
+        function getMaxTextTemplate(texts, columnDef, colIndex, data, rowEl) {
+            var max = 0,
+                maxTemplate = null;
+            var formatFun = columnDef.formatter;
+            $(texts).each(function(index, text) {
+                var template;
+                if (formatFun) {
+                    template = $("<span>" + formatFun(index, colIndex, text, columnDef, data[index]) + "</span>");
+                    text = template.text() || text;
+                }
+                var length = text ? getElementWidthUsingCanvas(rowEl, text) : 0;
+                if (length > max) {
+                    max = length;
+                    maxTemplate = template || text;
+                }
+            });
+            return maxTemplate;
+        }
+
+        function createRow(columnDef) {
+            var rowEl = $('<div class="slick-row"><div class="slick-cell"></div></div>');
+            rowEl.find(".slick-cell").css({
+                "visibility": "hidden",
+                "text-overflow": "initial",
+                "white-space": "nowrap"
+            });
+            var gridCanvas = $container.find(".grid-canvas");
+            $(gridCanvas).append(rowEl);
+            return rowEl;
+        }
+
+        function deleteRow(rowEl) {
+            $(rowEl).remove();
+        }
+
+        function getElementWidth(element) {
+            var width, clone = element.cloneNode(true);
+            clone.style.cssText = 'position: absolute; visibility: hidden;right: auto;text-overflow: initial;white-space: nowrap;';
+            element.parentNode.insertBefore(clone, element);
+            width = clone.offsetWidth;
+            clone.parentNode.removeChild(clone);
+            return width;
+        }
+
+        function getElementWidthUsingCanvas(element, text) {
+            context.font = element.css("font-size") + " " + element.css("font-family");
+            var metrics = context.measureText(text);
+            return metrics.width;
+        }
+
+        return {
+            init: init,
+            destroy: destroy
+        };
+    }
+}(jQuery))