Make a Q/columns tool handler in PHP, with $columns => array($name => $html) which would then output Q/columns. Add the $name of the column to data-name of the column div. (This step may already be done.)
Add a name option to the open method of Q/columns tool. When the column is opened, this string would be assigned to the column's data-name. Also add field option, analogous to how it is used Q/tabs tool. Except instead of storing the name of the tab, it would store name1,name2,name3 of the columns under that query field, using history.pushState.
Each Q/columns tool should set another handler on Q.onPopState event. It should proceed analogously to Q_popStateHandler in Q.js:
function Q_popStateHandler() {
var url = window.location.href.split('#')[0], result = null;
if (Q.info.url === url) {
return; // we are already at this url
}
...
but it should basically look at Q.diff ( url.queryField(tool.state.field).split(,) , currentNames ) and go close the columns whose names no longer appear in the list. It should not open new columns for new names, because we don't know what they should contain, unless we also save the info in the pushState object, which would keep growing as we showed more columns.
On mobile, before we close a column, we should check if the last history.pushState was with this column. (For that, we may need a hook for history.pushState.) And if it was, we should execute the history.back(1) instead. This is so that the back button will consistently work to pop something off the column stack as long as there is only one Q_columns tool.
You should test how this all works with multiple Q/column tools on a page.
Q/columns
tool handler in PHP, with$columns => array($name => $html)
which would then outputQ/columns
. Add the$name
of the column todata-name
of the columndiv
. (This step may already be done.)name
option to theopen
method ofQ/columns
tool. When the column is opened, this string would be assigned to the column'sdata-name
. Also addfield
option, analogous to how it is usedQ/tabs
tool. Except instead of storing thename
of the tab, it would storename1,name2,name3
of the columns under that query field, usinghistory.pushState
.Q/columns
tool should set another handler onQ.onPopState
event. It should proceed analogously toQ_popStateHandler
inQ.js
:but it should basically look at
Q.diff ( url.queryField(tool.state.field).split(,) , currentNames )
and go close the columns whose names no longer appear in the list. It should not open new columns for new names, because we don't know what they should contain, unless we also save the info in the pushState object, which would keep growing as we showed more columns.On mobile, before we close a column, we should check if the last
history.pushState
was with this column. (For that, we may need a hook forhistory.pushState
.) And if it was, we should execute thehistory.back(1)
instead. This is so that the back button will consistently work to pop something off the column stack as long as there is only oneQ_columns
tool.You should test how this all works with multiple
Q/column
tools on a page.