mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-11 09:14:58 +02:00
Code Issues Releases Wiki Activity

Add feature request processwire/processwire-requests#339 - improvements to PageListSelectMultiple based on concept from module by @Toutouwai

Browse Source
This commit is contained in:
Ryan Cramer
2022-03-25 13:34:22 -04:00
parent c4f2385e72
commit 415969e8bf
6 changed files with 68 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.js
View File

@@ -1,18 +1,25 @@
var InputfieldPageListSelectMultiple = {
selectLabel: 'Select',
selectedLabel: 'Selected',
init: function($inputfield) {
var $t;
if($inputfield.hasClass('InputfieldPageListSelectMultipleData')) {
var $t = $inputfield;
$t = $inputfield;
} else {
var $t = $inputfield.find(".InputfieldPageListSelectMultipleData");
$t = $inputfield.find(".InputfieldPageListSelectMultipleData");
}
if(!$t.length) return;
if($t.hasClass('InputfieldPageListSelectMultipleInit')) return;
InputfieldPageListSelectMultiple.selectLabel = $t.attr('data-select');
InputfieldPageListSelectMultiple.selectedLabel = $t.attr('data-selected');
$t.ProcessPageList({
mode: 'select',
rootPageID: $t.attr('data-root'),
showRootPage: true,
selectMultiple: true,
selectShowPageHeader: false,
selectSelectHref: $t.attr('data-href'),
selectStartLabel: $t.attr('data-start'),
@@ -23,6 +30,7 @@ var InputfieldPageListSelectMultiple = {
labelName: $t.attr('data-labelName')
}).hide().addClass('InputfieldPageListSelectMultipleInit');
$t.bind('pageSelected', $t, InputfieldPageListSelectMultiple.pageSelected);
$t.bind('pageListChildrenDone', $t, InputfieldPageListSelectMultiple.pageListChildrenDone);
InputfieldPageListSelectMultiple.initList($('#' + $t.attr('id') + '_items'));
},
@@ -63,12 +71,34 @@ var InputfieldPageListSelectMultiple = {
var $ol = $li.parent();
var id = $li.children(".itemValue").text();
$li.remove();
$ol.closest('.InputfieldPageListSelectMultiple').find('.pw-iplsm-disabled-' + id)
.removeClass('ui-state-disabled pw-iplsm-disabled-' + id)
.text(InputfieldPageListSelectMultiple.selectLabel);
InputfieldPageListSelectMultiple.rebuildInput($ol);
return false;
});
},
/**
* Callback when children have been listed in the pageList
*
* @param e
* @param data
*/
pageListChildrenDone: function(e, data) {
var $t = $(this);
var $inputfield = $t.closest('.Inputfield');
var ids = $t.val().split(',');
for(var n = 0; n < ids.length; n++) {
var id = ids[n];
var $item = $inputfield.find('.PageListID' + id);
// mark items already selected
if($item.length) $item.find('.PageListActionSelect').children('a')
.addClass('ui-state-disabled pw-iplsm-disabled-' + id)
.text(InputfieldPageListSelectMultiple.selectedLabel);
}
},
/**
* Callback function executed when a page is selected from PageList
@@ -80,6 +110,10 @@ var InputfieldPageListSelectMultiple = {
var $ol = $('#' + $input.attr('id') + '_items');
var $li = $ol.children(".itemTemplate").clone();
page.actionLink
.addClass('ui-state-disabled pw-iplsm-disabled-' + page.id)
.text(InputfieldPageListSelectMultiple.selectedLabel);
$li.removeClass("itemTemplate");
$li.children('.itemValue').text(page.id);

2
wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.min.js vendored
View File

@@ -1 +1 @@
var InputfieldPageListSelectMultiple={init:function($inputfield){if($inputfield.hasClass("InputfieldPageListSelectMultipleData")){var $t=$inputfield}else{var $t=$inputfield.find(".InputfieldPageListSelectMultipleData")}if(!$t.length)return;if($t.hasClass("InputfieldPageListSelectMultipleInit"))return;$t.ProcessPageList({mode:"select",rootPageID:$t.attr("data-root"),showRootPage:true,selectShowPageHeader:false,selectSelectHref:$t.attr("data-href"),selectStartLabel:$t.attr("data-start"),selectCancelLabel:$t.attr("data-cancel"),selectSelectLabel:$t.attr("data-select"),selectUnselectLabel:$t.attr("data-unselect"),moreLabel:$t.attr("data-more"),labelName:$t.attr("data-labelName")}).hide().addClass("InputfieldPageListSelectMultipleInit");$t.bind("pageSelected",$t,InputfieldPageListSelectMultiple.pageSelected);InputfieldPageListSelectMultiple.initList($("#"+$t.attr("id")+"_items"))},initList:function($ol){var makeSortable=function($ol){$ol.sortable({axis:"y",update:function(e,data){InputfieldPageListSelectMultiple.rebuildInput($(this));$ol.trigger("sorted",[data.item])},start:function(e,data){data.item.addClass("ui-state-highlight")},stop:function(e,data){data.item.removeClass("ui-state-highlight")}});$ol.addClass("InputfieldPageListSelectMultipleSortable")};$("#"+$ol.attr("id")).on("mouseover",">li",function(){$(this).removeClass("ui-state-default").addClass("ui-state-hover");if(!$ol.is(".InputfieldPageListSelectMultipleSortable"))makeSortable($ol)}).on("mouseout",">li",function(){$(this).removeClass("ui-state-hover").addClass("ui-state-default")});$ol.on("click","a.itemRemove",function(){var $li=$(this).parent();var $ol=$li.parent();var id=$li.children(".itemValue").text();$li.remove();InputfieldPageListSelectMultiple.rebuildInput($ol);return false})},pageSelected:function(e,page){$input=e.data;var $ol=$("#"+$input.attr("id")+"_items");var $li=$ol.children(".itemTemplate").clone();$li.removeClass("itemTemplate");$li.children(".itemValue").text(page.id);$li.children(".itemLabel").text(page.title);$ol.append($li);InputfieldPageListSelectMultiple.rebuildInput($ol)},rebuildInput:function($ol){var id=$ol.attr("id");id=id.substring(0,id.lastIndexOf("_"));var $input=$("#"+id);var value="";var selected={};$ol.children(":not(.itemTemplate)").each(function(){var $li=$(this);var v=$li.children(".itemValue").text();if(typeof selected[v]!="undefined"){if(jQuery.ui)selected[v].effect("highlight",1e3);$li.remove()}else{selected[v]=$li;if(value.length>0)value+=",";value+=v}});$input.val(value);$input.change()}};$(document).ready(function(){$(".InputfieldPageListSelectMultiple").each(function(){InputfieldPageListSelectMultiple.init($(this))});$(document).on("reloaded",".InputfieldPageListSelectMultiple, .InputfieldPage",function(){InputfieldPageListSelectMultiple.init($(this))})});
var InputfieldPageListSelectMultiple={selectLabel:"Select",selectedLabel:"Selected",init:function($inputfield){var $t;if($inputfield.hasClass("InputfieldPageListSelectMultipleData")){$t=$inputfield}else{$t=$inputfield.find(".InputfieldPageListSelectMultipleData")}if(!$t.length)return;if($t.hasClass("InputfieldPageListSelectMultipleInit"))return;InputfieldPageListSelectMultiple.selectLabel=$t.attr("data-select");InputfieldPageListSelectMultiple.selectedLabel=$t.attr("data-selected");$t.ProcessPageList({mode:"select",rootPageID:$t.attr("data-root"),showRootPage:true,selectMultiple:true,selectShowPageHeader:false,selectSelectHref:$t.attr("data-href"),selectStartLabel:$t.attr("data-start"),selectCancelLabel:$t.attr("data-cancel"),selectSelectLabel:$t.attr("data-select"),selectUnselectLabel:$t.attr("data-unselect"),moreLabel:$t.attr("data-more"),labelName:$t.attr("data-labelName")}).hide().addClass("InputfieldPageListSelectMultipleInit");$t.bind("pageSelected",$t,InputfieldPageListSelectMultiple.pageSelected);$t.bind("pageListChildrenDone",$t,InputfieldPageListSelectMultiple.pageListChildrenDone);InputfieldPageListSelectMultiple.initList($("#"+$t.attr("id")+"_items"))},initList:function($ol){var makeSortable=function($ol){$ol.sortable({axis:"y",update:function(e,data){InputfieldPageListSelectMultiple.rebuildInput($(this));$ol.trigger("sorted",[data.item])},start:function(e,data){data.item.addClass("ui-state-highlight")},stop:function(e,data){data.item.removeClass("ui-state-highlight")}});$ol.addClass("InputfieldPageListSelectMultipleSortable")};$("#"+$ol.attr("id")).on("mouseover",">li",function(){$(this).removeClass("ui-state-default").addClass("ui-state-hover");if(!$ol.is(".InputfieldPageListSelectMultipleSortable"))makeSortable($ol)}).on("mouseout",">li",function(){$(this).removeClass("ui-state-hover").addClass("ui-state-default")});$ol.on("click","a.itemRemove",function(){var $li=$(this).parent();var $ol=$li.parent();var id=$li.children(".itemValue").text();$li.remove();$ol.closest(".InputfieldPageListSelectMultiple").find(".pw-iplsm-disabled-"+id).removeClass("ui-state-disabled pw-iplsm-disabled-"+id).text(InputfieldPageListSelectMultiple.selectLabel);InputfieldPageListSelectMultiple.rebuildInput($ol);return false})},pageListChildrenDone:function(e,data){var $t=$(this);var $inputfield=$t.closest(".Inputfield");var ids=$t.val().split(",");for(var n=0;n<ids.length;n++){var id=ids[n];var $item=$inputfield.find(".PageListID"+id);if($item.length)$item.find(".PageListActionSelect").children("a").addClass("ui-state-disabled pw-iplsm-disabled-"+id).text(InputfieldPageListSelectMultiple.selectedLabel)}},pageSelected:function(e,page){$input=e.data;var $ol=$("#"+$input.attr("id")+"_items");var $li=$ol.children(".itemTemplate").clone();page.actionLink.addClass("ui-state-disabled pw-iplsm-disabled-"+page.id).text(InputfieldPageListSelectMultiple.selectedLabel);$li.removeClass("itemTemplate");$li.children(".itemValue").text(page.id);$li.children(".itemLabel").text(page.title);$ol.append($li);InputfieldPageListSelectMultiple.rebuildInput($ol)},rebuildInput:function($ol){var id=$ol.attr("id");id=id.substring(0,id.lastIndexOf("_"));var $input=$("#"+id);var value="";var selected={};$ol.children(":not(.itemTemplate)").each(function(){var $li=$(this);var v=$li.children(".itemValue").text();if(typeof selected[v]!="undefined"){if(jQuery.ui)selected[v].effect("highlight",1e3);$li.remove()}else{selected[v]=$li;if(value.length>0)value+=",";value+=v}});$input.val(value);$input.change()}};$(document).ready(function(){$(".InputfieldPageListSelectMultiple").each(function(){InputfieldPageListSelectMultiple.init($(this))});$(document).on("reloaded",".InputfieldPageListSelectMultiple, .InputfieldPage",function(){InputfieldPageListSelectMultiple.init($(this))})});

9
wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.module
View File

@@ -5,7 +5,7 @@
*
* A Page List Selector for selecting multiple pages
*
* ProcessWire 3.x, Copyright 2016 by Ryan Cramer
* ProcessWire 3.x, Copyright 2022 by Ryan Cramer
* https://processwire.com
*
* @property string $removeLabel
@@ -27,9 +27,9 @@ class InputfieldPageListSelectMultiple extends Inputfield
return array(
'title' => __('Page List Select Multiple', __FILE__), // Module Title
'summary' => __('Selection of multiple pages from a ProcessWire page tree list', __FILE__), // Module Summary
'version' => 102,
'version' => 103,
'permanent' => true,
);
);
}
public function init() {
@@ -94,8 +94,9 @@ class InputfieldPageListSelectMultiple extends Inputfield
$attrs['data-root'] = $this->parent_id; // rootPageID
$attrs['data-href'] = "#wrap_{$this->id}"; // selectSelectHref
$attrs['data-start'] = $this->startLabel; // selectStartLabel
$attrs['data-cancel'] = $this->cancelLabel; // selectCancelLabel
$attrs['data-cancel'] = $this->_('Close'); // $this->cancelLabel; // selectCancelLabel
$attrs['data-select'] = $this->selectLabel; // selectSelectLabel
$attrs['data-selected'] = $this->_('Selected');
$attrs['data-unselect'] = $this->unselectLabel; // selectUnselectLabel
$attrs['data-more'] = $this->moreLabel; // moreLabel
$attrs['data-labelName'] = $this->attr('name');

35
wire/modules/Process/ProcessPageList/ProcessPageList.js
View File

@@ -60,6 +60,9 @@ $(document).ready(function() {
// show the parent path in the selected page label?
selectShowPath: true,
// use multiple mode enhancements when select mode enabled?
selectMultiple: false,
// the label to click on to change the currently selected page
selectStartLabel: 'Change',
@@ -560,10 +563,12 @@ $(document).ready(function() {
$children.show();
loaded();
if(callback != undefined) callback();
$container.trigger('pageListChildrenDone', data);
} else {
$children.slideDown(options.speed, function() {
loaded();
if(callback != undefined) callback();
$container.trigger('pageListChildrenDone', data);
});
}
@@ -803,11 +808,12 @@ $(document).ready(function() {
*
*/
function getNumChildren($item, getTotal) {
if(typeof getTotal == "undefined") var getTotal = false;
if(typeof getTotal == "undefined") getTotal = false;
var n;
if(getTotal) {
var n = $item.attr('data-numTotal');
n = $item.attr('data-numTotal');
} else {
var n = $item.attr('data-numChild');
n = $item.attr('data-numChild');
}
return n && n.length > 0 ? parseInt(n) : 0;
}
@@ -822,8 +828,8 @@ $(document).ready(function() {
*/
function setNumChildren($item, numChildren, numTotal, addNew) {
if(typeof numTotal == "undefined") var numTotal = numChildren;
if(typeof addNew == "undefined") var addNew = false;
if(typeof numTotal == "undefined") numTotal = numChildren;
if(typeof addNew == "undefined") addNew = false;
var $numChildren = addNew ? '' : $item.children('.PageListNumChildren');
var n = numChildren === false ? numTotal : numChildren;
@@ -854,16 +860,17 @@ $(document).ready(function() {
}
var numLabel = '';
var slash;
switch(options.qtyType) {
case 'total':
numLabel = numTotal;
break;
case 'total/children':
var slash = "<span class='ui-priority-secondary'>/</span>";
slash = "<span class='ui-priority-secondary'>/</span>";
numLabel = numTotal > 0 && numTotal != numChildren ? numTotal + slash + numChildren : numTotal;
break;
case 'children/total':
var slash = "<span class='ui-priority-secondary'>/</span>";
slash = "<span class='ui-priority-secondary'>/</span>";
numLabel = numTotal > 0 && numTotal != numChildren ? numChildren + slash + numTotal : numTotal;
break;
case 'id':
@@ -1162,7 +1169,7 @@ $(document).ready(function() {
if(typeof start == "undefined" || start === null) {
start = 0;
} else {
var start = parseInt(start);
start = parseInt(start);
}
if(jQuery.inArray(id, currentOpenPageIDs) == -1) {
currentOpenPageIDs.push(id + '-' + start); // id.start
@@ -1479,18 +1486,20 @@ $(document).ready(function() {
id: id,
url: url,
title: title,
a: $a
a: $a,
actionLink: $t
});
$header.find(".PageListSelectActionToggle").click(); // close the list
if(!options.selectMultiple) {
$header.find(".PageListSelectActionToggle").click(); // close the list
}
// jump to specified anchor, if provided
if(options.selectSelectHref == '#') return false;
if(options.selectMultiple || options.selectSelectHref == '#') return false;
return true;
}
// initialize the plugin
init();

2
wire/modules/Process/ProcessPageList/ProcessPageList.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
wire/modules/Process/ProcessPageList/ProcessPageList.module
View File

@@ -8,7 +8,7 @@
* For more details about how Process modules work, please see:
* /wire/core/Process.php
*
* ProcessWire 3.x, Copyright 2021 by Ryan Cramer
* ProcessWire 3.x, Copyright 2022 by Ryan Cramer
* https://processwire.com
*
* @property bool $showRootPage Whether root page (like home) should be shown.
@@ -41,7 +41,7 @@ class ProcessPageList extends Process implements ConfigurableModule {
return array(
'title' => 'Page List',
'summary' => 'List pages in a hierarchical tree structure',
'version' => 123,
'version' => 124,
'permanent' => true,
'permission' => 'page-edit',
'icon' => 'sitemap',