Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: New sections tab, multi-edit control block
Love it!
I’m not sure I’m keen on simply clicking anywhere in the row to make it selected state though, to me that might cause UX problems. Is it wise to make that only happen via holding alt key with click instead? I know you want that click feature for smartphones but it might drive users mad if they keep selecting rows when they don’t want to.
Otherwise, it’s a huge improvement on what was previously available.
Last edited by philwareham (2012-06-26 22:52:21)
Offline
Re: New sections tab, multi-edit control block
I want it on desktops personally. Clicking tiny checkboxes is hard, and unless you are selecting the row, you won’t be clicking the rows. It will ignore clicks on links and likes.
If it’s toggled by key combo, you are going all Apple with hidden features. In which point, in my opinion, you can as well almost remove it. Nobody is going to find it. Yeah. As a example, Apple’s App Store was the first time I had to Google how to cancel downloads. Second time was when I hid an application. Gotta love those hidden Options (see what I did there ;).
But sure, toggling it to alt button is likely technically possible. Well, to alt, control and shift. Windows users don’t use Alt (Option). Which then reserves control for it, which is used to do joined selections (which is what checkboxes do by default for the better or worst).
Last edited by Gocom (2012-06-26 23:33:01)
Offline
Re: New sections tab, multi-edit control block
Bloke wrote:
I’m not averse to some graft in this area. As long as I’ve seen it working on one page I can replicate the functionality fairly quickly throughout the admin side. Should give me something to do as the country slides towards a post-Olympics financial abyss!
Dunno about the PHP. The example template has a working HTML markup, which could be replicated 1on1. Spawning such markup probably would need some PHP functions dedicated to it. Or maybe a class even. Having OOP base would make adding the edit_method options easier as you don’t need to write a function that takes huge multidimensional arrays or something. Either of the two designs could work.
As the last resort, one could just write the markup to the panels as it is, but that isn’t probably what Robert would prefer.
Suggestions? I can look into writing some sort of PHP stuff for it too. If I just know what I should write. Something as this?
multi_edit(array(
'value' => array('label' => gTxt('label'), 'html' => ''),
'value' => array('label' => gTxt('label'), 'html' => ''),
));Last edited by Gocom (2012-06-26 23:50:05)
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
one could just write the markup to the panels as it is, but that isn’t probably what Robert would prefer.
Nor me! If I have to write the same line of code more than once, it’s a design problem in my book :-D
A class would probably be best, as you say. Will think about the approach that requires least coding pain and RSI inducement.
EDIT: if you wanna write some PHP functions / classes for it too, be my guest. Your OO beats my OO any day.
Last edited by Bloke (2012-06-26 23:52:13)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
What about… derp. Multidimensional arrays:
/**
* Generates multi-edit method options
* @param array $options array('value' => array( 'label' => '', 'html' => '' ),...)
* @param string $event Event
* @param string $step Step
* @param int $page Page number
* @param string $sort Column sorted by
* @param string $dir Sorting direction
* @param string $crit Search criterion
* @parma string $search_method Search method
* @return string HTML markup
*/
function multi_edit($options, $event, $step, $page, $sort, $dir, $crit, $search_method)
{
$method = ps('edit_method');
$html = $methods = array();
$methods[''] = gTxt('with_selected_option');
foreach($options as $value => $option)
{
$methods[$value] = $option['title'];
$html[$value] = '<div class="multi-option" id="multi-option-'.
txpspecialchars($value).'">'.$option['html'].'</div>';
}
return '<div class="multi-edit">'.
n.selectInput('edit_method', $methods, $method).
n.eInput($event).
n.sInput($step).
n.hInput('page', $page).
($sort ? n.hInput('sort', $sort).n.hInput('dir', $dir) : '' ).
($crit !== '' ? n.hInput('crit', $crit).n.hInput('search_method', $search_method) : '').
n.implode('', $html).
n.fInput('submit', '', gTxt('go')).
n.'</div>';
}Last edited by Gocom (2012-06-27 08:16:38)
Offline
Re: New sections tab, multi-edit control block
Regarding the div surrounding the edit options: please bear in mind this suggestion I made.
After a brief play with this, it is quite nice. I share with philwareham a bit of uneasiness with the default click behaviour on rows. Mostly about a user accidentally clicking a row, scrolling it out of view and then accidentally editing it (together with an other row). I’m not sure adding a modifier key will help much (hidden options as noted by Gocom) though (and btw using the Control key won’t work on OS X – used to trigger context menus, and I really don’t like scripts that kill off the default behaviour of meta keys).
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
but that isn’t probably what Robert would prefer.
Have you ever pursued a mind-reading career?
What about… derp. Multidimensional arrays:
Fits perfectly into the existing code base.
- n.selectInput('edit_method', $methods, $method)
+ n.selectInput('edit_method', $methods, $method).Offline
Re: New sections tab, multi-edit control block
@philippe
I was suggesting the alt key and it’s PC equivalent.
If you all decide to keep the row one click select function then I’d like a preference added to turn that feature on/off too. With a default of off.
Offline
Re: New sections tab, multi-edit control block
Here’s a patch that implements all of the current multi-edit code to the core and updates Sections panel to use it.
Index: include/txp_section.php
===================================================================
--- include/txp_section.php (revision 3847)
+++ include/txp_section.php (working copy)
@@ -163,13 +163,13 @@
if ($rs)
{
echo n.'<div id="'.$event.'_container" class="txp-container">';
- echo n.n.'<form action="index.php" id="section_form" method="post" name="longform" onsubmit="return verify(\''.gTxt('are_you_sure').'\')">'.
+ echo n.n.'<form action="index.php" id="section_form" class="multi_edit_form" method="post" name="longform" onsubmit="return verify(\''.gTxt('are_you_sure').'\')">'.
n.'<div class="txp-listtables">'.n.
n.startTable('', '', 'txp-list').
n.'<thead>'.
n.tr(
- n.hCell(fInput('checkbox', 'selected_toggle', 0, '', '', '', '', '', 'selected_toggle'), '', ' title="'.gTxt('toggle_all_selected').'" class="multi-edit"').
+ n.hCell(fInput('checkbox', 'select_all', 0, '', '', '', '', '', 'select_all'), '', ' title="'.gTxt('toggle_all_selected').'" class="multi-edit"').
n.column_head('name', 'name', 'section', true, $switch_dir, $crit, $search_method, (('name' == $sort) ? "$dir " : '').'name').
n.column_head('title', 'title', 'section', true, $switch_dir, $crit, $search_method, (('title' == $sort) ? "$dir " : '').'name').
n.column_head('page', 'page', 'section', true, $switch_dir, $crit, $search_method, (('page' == $sort) ? "$dir " : '').'page').
@@ -224,10 +224,7 @@
echo '</tbody>'.
n.endTable().
- n.graf(
- select_buttons().n.
- section_multiedit_form($page, $sort, $dir, $crit, $search_method)
- , ' class="multi-edit"').
+ n.section_multiedit_form($page, $sort, $dir, $crit, $search_method).
n.'</div>'.
n.tInput().
@@ -603,16 +600,19 @@
function section_multiedit_form($page, $sort, $dir, $crit, $search_method)
{
+ $pages = safe_column('name', 'txp_page', '1=1');
+ $styles = safe_column('name', 'txp_css', '1=1');
+
$methods = array(
- 'changepage' => gTxt('uses_page'),
- 'changecss' => gTxt('uses_style'),
- 'changeonfrontpage' => gTxt('on_front_page'),
- 'changesyndicate' => gTxt('syndicate'),
- 'changesearchable' => gTxt('include_in_search'),
+ 'changepage' => array('label' => gTxt('uses_page'), 'html' => selectInput('page', $pages, '', false)),
+ 'changecss' => array('label' => gTxt('uses_style'), 'html' => selectInput('css', $styles, '', false)),
+ 'changeonfrontpage' => array('label' => gTxt('on_front_page'), 'html' => yesnoRadio('on_front_page', 1)),
+ 'changesyndicate' => array('label' => gTxt('syndicate'), 'html' => yesnoRadio('in_rss', 1)),
+ 'changesearchable' => array('label' => gTxt('include_in_search'), 'html' => yesnoRadio('searchable', 1)),
'delete' => gTxt('delete'),
);
- return event_multiedit_form('section', $methods, $page, $sort, $dir, $crit, $search_method);
+ return multi_edit($methods, 'section', 'section_multi_edit', $page, $sort, $dir, $crit, $search_method);
}
// -------------------------------------------------------------
Index: textpattern.js
===================================================================
--- textpattern.js (revision 3847)
+++ textpattern.js (working copy)
@@ -43,9 +43,11 @@
popped.focus();
}
-// -------------------------------------------------------------
-// basic confirmation for potentially powerful choice
-// (like deletion, for example)
+/**
+ * Basic confirmation for potentially powerful choice (like deletion, for example)
+ * @param string msg
+ * @return bool
+ */
function verify(msg)
{
@@ -54,6 +56,7 @@
/**
* Selects all multi-edit checkboxes
+ * @deprecated
*/
function selectall()
@@ -63,6 +66,7 @@
/**
* De-selects all multi-edit checkboxes
+ * @deprecated
*/
function deselectall()
@@ -72,6 +76,7 @@
/**
* Selects a range of multi-edit checkboxes
+ * @deprecated
*/
function selectrange()
@@ -95,6 +100,7 @@
/**
* Toggles the current selection of multi-edit checkboxes
+ * @deprecated
*/
function selecttoggle()
@@ -106,6 +112,7 @@
/**
* Toggles the entire column of multi-edit checkboxes
+ * @deprecated
*/
function toggleAll()
@@ -118,8 +125,10 @@
}
}
-// -------------------------------------------------------------
-// ?
+/**
+ * ?
+ * @deprecated
+ */
function cleanSelects()
{
@@ -131,6 +140,351 @@
}
}
+/**
+ * Multi-edit functions
+ * @param string|obj method
+ * @param obj options
+ * @since 4.5.0
+ */
+
+jQuery.fn.txpMultiEditForm = function(method, options)
+{
+ var args = {}, opt;
+
+ var defaults = {
+ 'checkbox' : 'input[name="selected[]"][type=checkbox]',
+ 'rows' : 'tbody td',
+ 'row' : 'tr, p, div',
+ 'selectedClass' : 'selected',
+ 'actions' : 'select[name=edit_method]',
+ 'selectAll' : 'input[name="select_all"][type=checkbox]',
+ 'rowClick' : true,
+ 'altClick' : true
+ };
+
+ if ($.type(method) !== 'string')
+ {
+ options = method;
+ method = null;
+ }
+ else
+ {
+ args = options;
+ }
+
+ opt = options;
+
+ this.closest('form').each(function() {
+
+ var $this = $(this), form = {}, public = {}, private = {};
+
+ if ($this.data('_txpMultiEdit'))
+ {
+ form = $this.data('_txpMultiEdit');
+ opt = $.extend(form.opt, opt);
+ }
+
+ else
+ {
+ opt = $.extend(defaults, opt);
+ form.pattern = opt.checkbox;
+ form.editMethod = $this.find(opt.actions);
+ form.lastCheck = null;
+ form.opt = opt;
+ }
+
+ /**
+ * Registers multi-edit options
+ * @param string label
+ * @param string value HTML Option's value
+ * @param obj|string html Object or HTML markup used as for the action's second step. NULL to skip 2nd step.
+ * @return obj this
+ */
+
+ public.addOption = function(options)
+ {
+ var settings = $.extend({
+ 'label' : null,
+ 'value' : null,
+ 'html' : null
+ }, options);
+
+ var option = form.editMethod.find('option').filter(function() {
+ return $(this).attr('value') === settings.value;
+ });
+
+ var exists = (option.length > 0);
+ form.editMethod.val('');
+
+ if (!exists)
+ {
+ option = $('<option />');
+ }
+
+ if (!option.data('method'))
+ {
+ if (!option.attr('value'))
+ {
+ option.attr('value', settings.value);
+ }
+
+ if (!option.text() && settings.label)
+ {
+ option.text(settings.label);
+ }
+
+ option.data('method', settings.html);
+ }
+
+ if (!exists)
+ {
+ form.editMethod.append(option);
+ }
+
+ return public;
+ };
+
+ /**
+ * Selects rows based on supplied arguments. Only one of the filters applies at time.
+ * @param array index Select based on row's index.
+ * @param array range [min, max] Select based on index range.
+ * @param array value [value1, value2, value3, ...]
+ * @param bool checked Set matched checked or unchecked. FALSE to uncheck.
+ */
+
+ public.select = function(options)
+ {
+ var settings = $.extend({
+ 'index' : null,
+ 'range' : null,
+ 'value' : null,
+ 'checked' : true
+ }, options);
+
+ var obj = $this.find(form.pattern);
+
+ if (settings.value !== null)
+ {
+ obj = obj.filter(function() {
+ return $.inArray($(this).attr('value'), settings.value) !== -1;
+ });
+ }
+
+ else if (settings.index !== null)
+ {
+ obj = obj.filter(function(index) {
+ return $.inArray(index, settings.index) !== -1;
+ });
+ }
+
+ else if (settings.range !== null)
+ {
+ obj = obj.slice(settings.range[0], settings.range[1]);
+ }
+
+ obj.prop('checked', settings.checked).change();
+ return public;
+ };
+
+ /**
+ * Binds checkboxes
+ */
+
+ private.bindRows = function()
+ {
+ form.rows = $this.find(opt.rows);
+ form.boxes = $this.find(form.pattern);
+ return private;
+ };
+
+ /**
+ * Highlights selected rows
+ */
+
+ private.highlight = function()
+ {
+ form.boxes.filter(':checked').closest(opt.row).addClass(opt.selectedClass);
+ form.boxes.filter(':not(:checked)').closest(opt.row).removeClass(opt.selectedClass);
+ return private;
+ };
+
+ /**
+ * Extends click region to whole row
+ */
+
+ private.extendedClick = function()
+ {
+ if (opt.rowClick)
+ {
+ var obj = form.rows;
+ }
+ else
+ {
+ var obj = form.boxes;
+ }
+
+ obj.live('click', function(e) {
+
+ var self = ($(e.target).is(form.pattern) || $(this).is(form.pattern));
+
+ if (!self && (e.target != this || $(this).is('a, :input') || $(e.target).is('a, :input')))
+ {
+ return;
+ }
+
+ if (!self && opt.altClick && !e.altKey && !e.ctrlKey)
+ {
+ return;
+ }
+
+ var box = $(this).parents('tr').find(form.pattern);
+
+ if (box.length < 1)
+ {
+ return;
+ }
+
+ private.bindRows();
+
+ var checked = box.prop('checked');
+
+ if (self)
+ {
+ checked = !checked;
+ }
+
+ if (form.lastCheck)
+ {
+ var end = form.boxes.index(form.lastCheck);
+ }
+
+ if (checked === false)
+ {
+ if (e.shiftKey && form.lastCheck)
+ {
+ var start = form.boxes.index(box);
+
+ public.select({
+ 'range' : [Math.min(start, end), Math.max(start, end)+1]
+ });
+ }
+
+ else if (!self)
+ {
+ box.prop('checked', true).change();
+ }
+
+ form.lastCheck = box;
+ }
+
+ else
+ {
+ if (e.shiftKey && form.lastCheck)
+ {
+ var start = form.boxes.index(box);
+
+ public.select({
+ 'range' : [Math.min(start, end), Math.max(start, end)+1],
+ 'checked' : false
+ });
+ }
+ else if (!self)
+ {
+ box.prop('checked', false).change();
+ }
+
+ form.lastCheck = null;
+ }
+ });
+
+ return private;
+ };
+
+ /**
+ * Tracks row checks
+ */
+
+ private.checked = function()
+ {
+ form.boxes.live('change', function(e) {
+ var box = $(this);
+
+ if (box.prop('checked'))
+ {
+ $(this).parents('tr').addClass(opt.selectedClass);
+ }
+ else
+ {
+ $(this).parents('tr').removeClass(opt.selectedClass);
+ }
+ });
+
+ return private;
+ };
+
+ /**
+ * Handles edit method selecting
+ */
+
+ private.changeMethod = function()
+ {
+ var button = $('.multi-edit input[type="submit"], .multi-edit button[type="submit"]').hide();
+
+ form.editMethod.change(function(e) {
+ var selected = $(this).find('option:selected');
+ $this.find('.multi-step').remove();
+
+ if (selected.length < 1 || selected.val() === '')
+ {
+ button.hide();
+ return private;
+ }
+
+ button.show();
+
+ if (selected.data('method'))
+ {
+ $(this).after($('<div />').attr('class', 'multi-step multi-option').html(selected.data('method')));
+ }
+ else
+ {
+ $(this).parents('form').submit();
+ }
+ });
+
+ return private;
+ };
+
+ if(!$this.data('_txpMultiEdit'))
+ {
+ private.bindRows().highlight().extendedClick().checked().changeMethod();
+
+ $this.find('.multi-option:not(.multi-step)').each(function() {
+ public.addOption({
+ 'label' : null,
+ 'html' : $(this).contents(),
+ 'value' : $(this).attr('id').substring(13)
+ });
+ }).remove();
+
+ $this.find(opt.selectAll).live('change', function(e) {
+ public.select({
+ 'checked' : $(this).prop('checked')
+ });
+ });
+ }
+
+ if (method && public[method])
+ {
+ public[method].call($this, args);
+ }
+
+ $this.data('_txpMultiEdit', form);
+ });
+
+ return this;
+};
+
// -------------------------------------------------------------
// event handling
// By S.Andrew -- http://www.scottandrew.com/
@@ -522,7 +876,7 @@
if(c && "spellcheck" in c) {$(textpattern.do_spellcheck).prop("spellcheck", true);}
// attach toggle behaviours
$('.lever a[class!=pophelp]').click(toggleDisplayHref);
- $('#selected_toggle').click(toggleAll);
+ $('.multi_edit_form').txpMultiEditForm();
// establish AJAX timeout from prefs
if($.ajaxSetup().timeout === undefined) {
$.ajaxSetup( {timeout : textpattern.ajax_timeout} );
Index: lib/txplib_head.php
===================================================================
--- lib/txplib_head.php (revision 3847)
+++ lib/txplib_head.php (working copy)
@@ -135,19 +135,6 @@
$edit_assign_assets = $rs ? selectInput('assign_assets', $rs, '', true) : '';
}
- if ($event == 'section')
- {
- $rs = safe_column('name', 'txp_page', "1=1");
- $edit['page'] = $rs ? selectInput('page', $rs, '', false) : '';
-
- $rs = safe_column('name', 'txp_css', "1=1");
- $edit['css'] = $rs ? selectInput('css', $rs, '', false) : '';
-
- $edit['onfrontpage'] = yesnoRadio('on_front_page', 1);
- $edit['syndicate'] = yesnoRadio('in_rss', 1);
- $edit['searchable'] = yesnoRadio('searchable', 1);
- }
-
// output JavaScript
?>
function poweredit(elm)
Index: lib/txplib_html.php
===================================================================
--- lib/txplib_html.php (revision 3847)
+++ lib/txplib_html.php (working copy)
@@ -866,6 +866,66 @@
}
/**
+ * Render a multi-edit form listing editing methods
+ *
+ * @param array $options array('value' => array( 'label' => '', 'html' => '' ),...)
+ * @param string $event Event
+ * @param string $step Step
+ * @param integer $page Page number
+ * @param string $sort Column sorted by
+ * @param string $dir Sorting direction
+ * @param string $crit Search criterion
+ * @parma string $search_method Search method
+ * @return string HTML
+ */
+
+ function multi_edit($options, $event=null, $step=null, $page='', $sort='', $dir='', $crit='', $search_method='')
+ {
+ $method = ps('edit_method');
+ $html = $methods = array();
+ $methods[''] = gTxt('with_selected_option');
+
+ foreach($options as $value => $option)
+ {
+ if (is_array($option))
+ {
+ $methods[$value] = $option['label'];
+
+ if (isset($option['html']))
+ {
+ $html[$value] = '<div class="multi-option" id="multi-option-'.
+ txpspecialchars($value).'">'.$option['html'].'</div>';
+ }
+ }
+ else
+ {
+ $methods[$value] = $option;
+ }
+ }
+
+ if ($event === null)
+ {
+ global $event;
+ }
+
+ if ($step === null)
+ {
+ $step = $event.'_multi_edit';
+ }
+
+ return '<div class="multi-edit">'.
+ n.selectInput('edit_method', $methods, $method).
+ n.eInput($event).
+ n.sInput($step).
+ n.hInput('page', $page).
+ ($sort ? n.hInput('sort', $sort).n.hInput('dir', $dir) : '' ).
+ ($crit !== '' ? n.hInput('crit', $crit).n.hInput('search_method', $search_method) : '').
+ n.implode('', $html).
+ n.fInput('submit', '', gTxt('go')).
+ n.'</div>';
+ }
+
+/**
* Render a form to select various amounts to page lists by.
*
* @param string $event EventEdit. updated patch with new additions to the JS (alt+click, option to turn clickable rows off).
Last edited by Gocom (2012-06-27 16:29:08)
Offline
Re: New sections tab, multi-edit control block
I’ve added couple new features to the jQuery plugin since I originally posted that patch. I’ve updated the above post’s diff to include these. Changes are also present in the git repo. These include:
- Alt+Click option. By default turned on.
- Option to strict clickable region to the checkbox. This could have done previously too by changing the selector in options object, but now there is a simple boolean toggle for disabling clickable rows (option is mainly targeted for plugins).
Offline
Re: New sections tab, multi-edit control block
I’m away from computer for next couple of days but that sounds like it clears up any worries I had with the row selection. Personally, as long as the class names are correct I’d be more than happy with this being rolled into an svn patch. I can iron out any CSS issues at the weekend.
Offline
Re: New sections tab, multi-edit control block
Gocom
That’s just too awesome. Code ninja!
In the interests of pluginisation of the multi-edit toolset, is this:
$argv = func_get_args();
return pluggable_ui($event.'_ui', 'multi_edit_form',
'<div class="multi-edit">'.
n.selectInput('edit_method', $methods, $method).
n.eInput($event).
n.sInput($step).
n.hInput('page', $page).
($sort ? n.hInput('sort', $sort).n.hInput('dir', $dir) : '' ).
($crit !== '' ? n.hInput('crit', $crit).n.hInput('search_method', $search_method) : '').
n.implode('', $html).
n.fInput('submit', '', gTxt('go')).
n.'</div>',
$argv);better / more desirable than this:
callback_event_ref($event.'_ui', 'multi_edit_options', 0, $options, $methods);
return '<div class="multi-edit">'.
n.selectInput('edit_method', $methods, $method).
...i.e. allow plugins to completely alter the multi-edit area, or only allow them to augment/edit the existing options, leaving the surrounding markup intact?
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
To me the second option sounds way better. By ten folds and more. While the surrounding callback is neat, it has very little to no use compared to a option that simply allows adding options. Referenced augmentations all the way.
Hmm, thinking about it, the callback should probably modify the $options array rather than the $methods array that contains the HTML markup. I.e.
callback_event_ref($event.'_ui', 'multi_edit_options', 0, &$options);
foreach($options as $value => $option) [...]Last edited by Gocom (2012-06-27 22:16:52)
Offline
Re: New sections tab, multi-edit control block
Gocom wrote:
the callback should probably modify the
$optionsarray rather than the$methods
Ah yes, much better up there. Well spotted. Consider it done.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: New sections tab, multi-edit control block
Rollout will commence very soon across the other table-based panels, once the dust has settled and others have had a chance to weigh in on this one.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline