Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: New sections tab, multi-edit control block
Stef, of yeah Iforgot about browser cache (and index offset) when it comes to the select field.
I could change the script that it fires the code on initial page load too, but since there is the possibility of offset issues (checkboxes and options added dynamically can offset selection), I should reset it more than likely.
Any suggestions? Which one sound better, clearing the selection (in the JS too), or running the action according the selection in the HTML? First one is single line change (adding around 4 bytes) and letter involves few blocks.
Edit. oh yeah selections aren’t remembered so resetting sounds much better, and remembering would effect auto-submit too.
Last edited by Gocom (2012-06-28 21:55:25)
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
clearing the selection (in the JS too)
Probably gets my vote. But go with whichever is neater.
We also need to think about the two anomaly pages at this stage: Categories and Forms. They both employ multi-edit but since the Categories panel uses tables for layout instead of per-row, and the Forms panel uses unordered lists, neither will work with the shiny new multi-edit tool :-(
Clearly the HTML on both panels has to change to support this. Do we go with tables? e.g. for Categories:
- Lose the large presentation-table and swap it for a set of floated divs (or something)
- Add a table per type to house the category items and checkboxes (although I think Phil would prefer this was a proper nested
<ul><li>)
And for Forms:
- Do the checkboxes remain on the right, or go to the left?
- Does the Forms list remain as a set of unordered items? Or do we put a table per ‘type’ and a ‘toggle all’ in the header which selects all Forms of that type?
Or is it simpler to refactor the Categories panel as a set of unordered lists, and alter the multi-edit JS to allow shift-selection in <ul><li> lists too?
Any ideas?
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
Stef, here’s a small change to the JS:
Index: textpattern.js
===================================================================
--- textpattern.js (revision 3859)
+++ textpattern.js (working copy)
@@ -435,7 +435,7 @@
{
form.button.hide();
- form.editMethod.change(function(e) {
+ form.editMethod.val('').change(function(e) {
var selected = $(this).find('option:selected');
$this.find('.multi-step').remove();It will prevent browser from caching the selection.
Offline
Re: New sections tab, multi-edit control block
Bloke wrote:
We also need to think about the two anomaly pages at this stage: Categories and Forms. They both employ multi-edit but since the Categories panel uses tables for layout instead of per-row, and the Forms panel uses unordered lists, neither will work with the shiny new multi-edit tool :-(
That jQuery plugin itself shouldn’t require tables as far as I see. Well actually, it requires no specific markup at all, and those which it does (form inputs i.e.), can be defined via options. A row is the first matching defined element, and those elements are only used for highlighting and extending the click region as far as I’m aware. The plugin also has options to turn those off, in which case it only tracks checkbox clicks.
But I know, unfortunately with current structure on some panels it would require two different uses of the plugin (with different options) hooked to different classes, as otherwise the plugin would track the clicks on table columns used for presentational purposes (on Forms/categories panel and so on) :/
Last edited by Gocom (2012-06-28 22:25:33)
Offline
Re: New sections tab, multi-edit control block
To add, extending the default functionality to even more elements, will start effecting compatibility and can cause issues on panels with more advanced markup inside table rows etc. Soon you would see a highlighted <li> inside a table column or the page with blue background in case of a open tag.
Last edited by Gocom (2012-06-28 22:29:56)
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
extending the default functionality to even more elements, will start effecting compatibility
Yeah. If you have any suggestions / patches for the markup on the Categories or Forms tabs to enable the super-smart multi-edit then they’re most welcome. I hacked around yesterday and got nowhere: I’m fresh out of ideas at the moment.
But the rest of the interface is now taking advantage, woohoo! And depending on whether the nightly cron job runs at GMT or CET depends whether I got them all in tonight’s build or missed a couple for being too darn slow!
Last edited by Bloke (2012-06-28 22:54:37)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
For example this could work for Forms with the current markup:
$('#allforms_form').txpMultiEditForm(function() {
'rows' : '.form-list li',
'row' : '.form-list li',
'submitButton' : 'input[name="form_multi_edit"]'
});Could a option be to create number of presets for different type of structures (lists etc)? Along the lines of:
$('.multi_edit_list').txpMultiEditForm(function() {
'rows' : 'li',
'row' : 'li'
});(wise option naming I had there… eh).
Or a plain checkbox based (no row-click):
$('.multi_edit_plain').txpMultiEditForm(function() {
'rowClick' : false
});When rowClick is off, it should support any type of markup.
I tried to look into bending the jQuery plugin, but there isn’t much one can do to allow all types of structures automatically. One (stupid) idea crossed my mind was auto-detecting based on available markup, but that would completely destroy any form of Ajax support, and cause false detections.
Do you have any better ideas for option names? rows and row doesn’t sound that good. Maybe a clickable and row? Or column and row? Or row and highlighted?
Last edited by Gocom (2012-06-28 23:09:02)
Offline
Re: New sections tab, multi-edit control block
Thanks for the examples. I’ll have a play.
I tried to look into bending the jQuery plugin… but that would completely destroy any form of Ajax support, and cause false detections.
Certainly don’t want any of that! I think the plugin is fine as it is. The fact we can specify the rows/row and other options gives it extra flexibility. I’ll disappear into my coding shed and see what I can hammer out.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
Argh. Seems it’s not exactly markup Independent. Seems that I’ve missed some instances and used hard-coded values. Wasn’t too hard to fix thankfully. Stef, here’s a patch:
Index: textpattern.js
===================================================================
--- textpattern.js (revision 3862)
+++ textpattern.js (working copy)
@@ -153,8 +153,8 @@
var defaults = {
'checkbox' : 'input[name="selected[]"][type=checkbox]',
- 'rows' : 'tbody td',
- 'row' : 'tr, p, div',
+ 'row' : 'tbody td',
+ 'highlighted' : 'tr',
'selectedClass' : 'selected',
'actions' : 'select[name=edit_method]',
'submitButton' : '.multi-edit input[type=submit]',
@@ -295,7 +295,7 @@
private.bindRows = function()
{
- form.rows = $this.find(opt.rows);
+ form.rows = $this.find(opt.row);
form.boxes = $this.find(form.pattern);
return private;
};
@@ -306,8 +306,8 @@
private.highlight = function()
{
- form.boxes.filter(':checked').closest(opt.row).addClass(opt.selectedClass);
- form.boxes.filter(':not(:checked)').closest(opt.row).removeClass(opt.selectedClass);
+ form.boxes.filter(':checked').closest(opt.highlighted).addClass(opt.selectedClass);
+ form.boxes.filter(':not(:checked)').closest(opt.highlighted).removeClass(opt.selectedClass);
return private;
};
@@ -414,12 +414,12 @@
if (box.prop('checked'))
{
- $(this).parents('tr').addClass(opt.selectedClass);
+ $(this).closest(opt.highlighted).addClass(opt.selectedClass);
form.selectAll.prop('checked', form.boxes.filter(':checked').length === form.boxes.length);
}
else
{
- $(this).parents('tr').removeClass(opt.selectedClass);
+ $(this).closest(opt.highlighted).removeClass(opt.selectedClass);
form.selectAll.prop('checked', false);
}
});It removes element dependency, and fixes default options for row. I also renamed the options to highlighted and row.
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
here’s a patch:
Ahaaaa, that’s better, thanks! Couldn’t figure out why it still kept selecting the entire tr. Now I know!
So this is the closest I’ve got so far. Line 94 of txp_form.php now reads:
return form( join('',$out),'',"verify('".gTxt('are_you_sure')."')", 'post', '', '', 'allforms_form' ).
script_js( <<<EOS
$('#allforms_form').txpMultiEditForm({
'checkbox' : 'input[name="selected_forms[]"][type=checkbox]',
'row' : '.plain-list li',
'highlighted' : '.plain-list li',
'submitButton' : 'input[name="form_multi_edit"]'
});
EOS
);It’s selecting the whole row when I click the checkbox (yay!) but they’re not responding to shift-click, nor alt-click on the rows. I’ll carry on playing: I can smell victory though…
Last edited by Bloke (2012-06-28 23:42:31)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
Found the reason, from line 340 of textpattern.js. The jQuery script still had single hard-coded selector left. Sorry for being so blind :/ Here is an updated patch:
Index: textpattern.js
===================================================================
--- textpattern.js (revision 3862)
+++ textpattern.js (working copy)
@@ -153,8 +153,8 @@
var defaults = {
'checkbox' : 'input[name="selected[]"][type=checkbox]',
- 'rows' : 'tbody td',
- 'row' : 'tr, p, div',
+ 'row' : 'tbody td',
+ 'highlighted' : 'tr',
'selectedClass' : 'selected',
'actions' : 'select[name=edit_method]',
'submitButton' : '.multi-edit input[type=submit]',
@@ -295,7 +295,7 @@
private.bindRows = function()
{
- form.rows = $this.find(opt.rows);
+ form.rows = $this.find(opt.row);
form.boxes = $this.find(form.pattern);
return private;
};
@@ -306,8 +306,8 @@
private.highlight = function()
{
- form.boxes.filter(':checked').closest(opt.row).addClass(opt.selectedClass);
- form.boxes.filter(':not(:checked)').closest(opt.row).removeClass(opt.selectedClass);
+ form.boxes.filter(':checked').closest(opt.highlighted).addClass(opt.selectedClass);
+ form.boxes.filter(':not(:checked)').closest(opt.highlighted).removeClass(opt.selectedClass);
return private;
};
@@ -340,7 +340,7 @@
return;
}
- var box = $(this).parents('tr').find(form.pattern);
+ var box = $(this).closest(opt.highlighted).find(form.pattern);
if (box.length < 1)
{
@@ -414,12 +414,12 @@
if (box.prop('checked'))
{
- $(this).parents('tr').addClass(opt.selectedClass);
+ $(this).closest(opt.highlighted).addClass(opt.selectedClass);
form.selectAll.prop('checked', form.boxes.filter(':checked').length === form.boxes.length);
}
else
{
- $(this).parents('tr').removeClass(opt.selectedClass);
+ $(this).closest(opt.highlighted).removeClass(opt.selectedClass);
form.selectAll.prop('checked', false);
}
});That should do it, I believe. I ran some test and it seems to work fine for Forms panel (at least).
Last edited by Gocom (2012-06-29 00:04:01)
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
That should do it, I believe.
Yep terrific, thanks. Just had to extend the row selector to include the span:
return form( join('',$out),'',"verify('".gTxt('are_you_sure')."')", 'post', '', '', 'allforms_form' ).
script_js( <<<EOS
$('#allforms_form').txpMultiEditForm({
'checkbox' : 'input[name="selected_forms[]"][type=checkbox]',
'row' : '.plain-list li, .form-list-name',
'highlighted' : '.plain-list li',
'submitButton' : 'input[name="form_multi_edit"]'
});
EOS
);W00t!
I’ll tackle the Category panel tomorrow. Need some strength and fresh eyes :-) Thanks for all your hard work on this. It’s awesome.
Last edited by Bloke (2012-06-29 00:16:45)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline