Adding Support for oneColumnModeSort Options (Custom Responsive Sort Order) #966
Conversation
…Order) These are changes implmenting the requested changes from issue gridstack#713 in the gridstrack repo. oneColumnModeSort option for sorting that also respects the existing `rtl` property. `oneColumnModeSort: "row | row-reverse | column | column-reverse | none"` - `none`: Sort by the order the widget's appear in the markup - `row`: (default) Sort first by **y** values (low to high) then sort widgets with the same y value by their **x** value (based on the `rtl` setting) - `row-reverse`: Sort first by **y** values (high to low) then sort widgets with the same **y** value by their **x** value (based on the `rtl` setting) - `col`: Sort first by **x** values (based on the `rtl` setting) then sort widgets with the same **x** value by their **y** value (low to high) - `col-reverse`: Sort first by **x** values (based on the `rtl` setting) then sort widgets with the same **x** value by their **y** value (high to low)
src/gridstack.js
Outdated
| width = width || _.chain(nodes).map(function(node) { return node.x + node.width; }).max().value(); | ||
| dir = dir != -1 ? 1 : -1; | ||
| return _.sortBy(nodes, [function(n) { return dir * (n.x + n.y * width); }]); | ||
| var x = dim != -1 ? 'x' : 'y'; |
There was a problem hiding this comment.
might want to rename var x to dir1 and dir2 = confusing to have x = y
| ddPlugin: null | ||
| }); | ||
|
|
||
| this.opts.oneColumnModeSort = this.opts.oneColumnModeSort.toLowerCase(); | ||
| if (!String('row | row-reverse | column | column-reverse | none').includes(this.opts.oneColumnModeSort)) { | ||
| this.opts.oneColumnModeSort = 'row'; |
There was a problem hiding this comment.
nice to keep original sort default. It's the most logical one really.
| if (oneColumnModeSort !== 'none') { | ||
| var dim = oneColumnModeSort.includes('column') ? -1 : 1; | ||
| var dir = dim > 0 && self.opts.rtl ? -1 : 1; | ||
| dir = oneColumnModeSort.includes('reverse') ? dir * -1 : dir; |
There was a problem hiding this comment.
code could use some comment explanation. rather hard to parse. for one thing you compare dim > 0, yet set value 1:-1 above so why not use those 2 values ?
I believe README.md is manually updated - that's what I've been doing. Format is pretty self explanatory (and some tools like Visual Studio Code will render a pretty form of it so you can verify your tag formatting before checking it in). |
I noticed that the sort logic was not accounting for cell sizes and was completely ignoring the rtl setting in column sort mode. I made the logic more robust and also pulled in and merged latest changes.
|
Updated the original PR but I still need to go in and update the README, I will try to find some time to do that next week. |
|
@gooeyideas any chance you might update this PR to the current code base ? we're actively accepting review and releasing frequent builds right now... |
|
@gooeyideas I completely changed how we position widgets when changing column sizing (1 being the easy case really) with #1098. While this doesn't invalidate the need to have 'custom' order (dom vs row which is what I do hopefully corecly now) you may wan to check the latest behavior. And adjust your review if you still feel the need to have even more control... |
|
@gooeyideas please update the review. I don't think we should support all the modes, but rather having 1 column use left-to-right-top-bottom (default) or DOM order (so you can specify a very different 1 column layout (ideally with hidden items as well). The other directions (RTL for example) should be tied to a generic gravity that affects all things (drag&drop, moving) rather than one off 1column thing IMO. I would love to give you credit for the DOM order at least. |
|
Sure thing, sorry for missing the last few messages. I recently discovered that my company changed some of our email rules so that github alerts were being treated as spam. I will try get around to this before the end of this week. Sorry again. |
|
great I look forward to it! are you ok doing just the DOM vs default row order we have now and we can add the others later or tie them to a generic gravity of the grid settings ? I'm thinking that DOM order makes sense as way to specify a custom 1 column layout, whereas x,y are used for multi column layouts. I've changed the code to support a robust multi column layout where we store each config (so going from 12 to 1 (or anything in between) and back would preserve the original layout, but have not worked on oneColumn yet, and was hoping to get your change in before I do. |
|
@gooeyideas supporting just DOM order (vs default row sorting) is getting much trickier than I expected now that I may try in sandbox but punt on this until we support per column layout instead in the file format (what I create in memory). |
…
Description
These are changes implementing the requested changes from issue #713.
oneColumnModeSort option for sorting that also respects the existing
rtlproperty.oneColumnModeSort: "row | row-reverse | column | column-reverse | none"none: Sort by the order the widget's appear in the markuprow: (default) Sort first by y values (low to high) then sort widgets with the same y value by their x value (based on thertlsetting)row-reverse: Sort first by y values (high to low) then sort widgets with the same y value by their x value (based on thertlsetting)col: Sort first by x values (based on thertlsetting) then sort widgets with the same x value by their y value (low to high)col-reverse: Sort first by x values (based on thertlsetting) then sort widgets with the same x value by their y value (high to low)Please explain the changes you made here. Include an example of what your changes fix or how to use the changes: Please refer to #713 for more info
Checklist
npm test)I am not sure how to update the doc/README.md with the auto jsdoc generation tool. Is there anything else I need to add?