InputfieldPage - mark unpublished pages

[flipzoom]

I have now come across the scenario a few times where the UX with the InputfieldPage field is not optimal.

An example of the InputfieldPageListSelectMultiple. If the option ‘Allow unpublished pages’ is activated, the user unfortunately cannot see which page has which status. Example:

It would be nice if the unpublished pages were labelled when this option is active. Both in the title and with a CSS class for styling. Example:

So far I solve this with a HookAfter on InputfieldPageListSelectMultiple::render and simply add the two lines of code:

// ...
foreach($field->value as $page_id) {
        $page = $field->pages->get((int) $page_id); 
        if(!$page || !$page->id) continue; 
        $label = $page->getText($field->labelFieldName, true, true);
        if(!strlen($label)) $label = $page->name;
        if($page->isUnpublished()) $label .= " <small>({$this->_('unpublished')})</small>"; // @CUSTOM - Add unpublished label
        $class = ($page->isUnpublished()) ? "is-unpublished" : ""; // @CUSTOM - Add unpublished class
        $out .= $field->renderListItem($label, $page->id, $class); // @CUSTOM - Add $class
}
// ...

But there are also other InputPage selects and I don't really want to create a hook for every mode. Can you set the labelling by default? Also for Radio, ASMSelect, Page Autocoplete etc.?

Background: pages are linked, for example, but are published and unpublished on a time-controlled basis. However, as already mentioned, the editor cannot recognise which of the linked pages has which status.

[matjazpotocnik]

@ryancramerdesign, a draft diff if you want to work on this. I think it's usefull addition.

What changed

Page-reference inputfields now preserve ProcessWire's standard page-status presentation without adding status words to page labels:

• InputfieldPage adds PageListStatusUnpublished and PageListStatusHidden to selectable options.
• InputfieldPageListSelectMultiple and InputfieldPageAutocomplete add the same classes to selected list items.
• InputfieldAsmSelect copies status classes from source options to its generated visible list items.
• AdminThemeUikit displays unpublished items with a line-through and hidden items at 50% opacity.

Verification

• InputfieldPage, InputfieldPageListSelect, InputfieldPageAutocomplete, and InputfieldAsmSelect test suites pass with zero failures.
• Browser DOM and computed-style checks pass for Select, Radios, SelectMultiple, Checkboxes, ASMSelect, PageListSelectMultiple, and Autocomplete.

Possible fix:

diff --git a/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module b/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
index 2c1ee95..d6fc9dd 100644
--- a/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
+++ b/wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module
@@ -75,7 +75,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
 	 * Increment on core less file changes that will also require a recompile of /site/assets/admin.css
 	 * 
 	 */
-	const requireCssVersion = 5;
+	const requireCssVersion = 6;
 
 	/**
 	 * Default logo image file (relative to this dir)

diff --git a/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw/pw-inputfields.less b/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw/pw-inputfields.less
index 40e969b..3a7c0fc 100644
--- a/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw/pw-inputfields.less
+++ b/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw/pw-inputfields.less
@@ -94,6 +94,14 @@
 .Inputfields {
   // background: @pw-inputfield-background;
   background: none;
+
+  .PageListStatusUnpublished {
+    text-decoration: line-through;
+  }
+
+  .PageListStatusHidden {
+    opacity: 0.5;
+  }
 }

diff --git a/wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.info.php b/wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.info.php
index d9940e2..5bc9dcb 100644
--- a/wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.info.php
+++ b/wire/modules/Inputfield/InputfieldAsmSelect/InputfieldAsmSelect.info.php
@@ -2,7 +2,7 @@
 
 return [
 	'title' => 'asmSelect', 
-	'version' => 203,
+	'version' => 204,
 	'summary' => 'Multiple selection, progressive enhancement to select multiple', 
 	'permanent' => true,
 	'requires' => 'InputfieldSelectMultiple',

diff --git a/wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.js b/wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.js
index 38612e7..8f9999c 100644
--- a/wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.js
+++ b/wire/modules/Inputfield/InputfieldAsmSelect/asmselect/jquery.asmselect.js
@@ -693,6 +693,8 @@
 					.append($itemLabel)
 					.append($itemDesc)
 					.append($itemStatus);
+				if($O.hasClass('PageListStatusUnpublished')) $item.addClass('PageListStatusUnpublished');
+				if($O.hasClass('PageListStatusHidden')) $item.addClass('PageListStatusHidden');
 				if($removeLink) $item.append($removeLink);
 				$item.hide();

diff --git a/wire/modules/Inputfield/InputfieldPage/InputfieldPage.module b/wire/modules/Inputfield/InputfieldPage/InputfieldPage.module
index 049f468..2211d17 100644
--- a/wire/modules/Inputfield/InputfieldPage/InputfieldPage.module
+++ b/wire/modules/Inputfield/InputfieldPage/InputfieldPage.module
@@ -38,7 +38,7 @@ class InputfieldPage extends Inputfield implements ConfigurableModule {
 	public static function getModuleInfo() {
 		return array(
 			'title' => 'Page',
-			'version' => 109,
+			'version' => 110,
 			'summary' => 'Select one or more pages',
 			'permanent' => true,
 		);
 
+	/**
+	 * Get standard PageList status classes for the given page
+	 *
+	 * @param Page $page
+	 * @return string
+	 *
+	 */
+	protected function getPageStatusClasses(Page $page) {
+		$classes = array();
+		if($page->isUnpublished()) $classes[] = 'PageListStatusUnpublished';
+		if($page->isHidden()) $classes[] = 'PageListStatusHidden';
+		return implode(' ', $classes);
+	}
+
 	/**
 	 * Get the selected Inputfield class for input (adjuted version of $this->inputfield)
 	 * 
@@ -726,7 +739,9 @@ class InputfieldPage extends Inputfield implements ConfigurableModule {
 			
 			if($inputfield instanceof InputfieldHasSelectableOptions) {
 				foreach($valueArray as $p) {
-					$inputfield->addOption($p->id, $this->getPageLabel($p));
+					$class = $this->getPageStatusClasses($p);
+					$attributes = $class ? array('class' => $class) : null;
+					$inputfield->addOption($p->id, $this->getPageLabel($p), $attributes);
 				}
 			}
 
@@ -745,7 +760,13 @@ class InputfieldPage extends Inputfield implements ConfigurableModule {
 			if($children) {
 				foreach($children as $child) {
 					$label = $this->getPageLabel($child);
-					$inputfield->addOption($child->id, $label);
+					if($inputfield instanceof InputfieldHasSelectableOptions) {
+						$class = $this->getPageStatusClasses($child);
+						$attributes = $class ? array('class' => $class) : null;
+						$inputfield->addOption($child->id, $label, $attributes);
+					} else {
+						$inputfield->addOption($child->id, $label);
+					}
 				}
 			}

diff --git a/wire/modules/Inputfield/InputfieldPage/InputfieldPage.test.php b/wire/modules/Inputfield/InputfieldPage/InputfieldPage.test.php
index 2b50d7e..8c02a80 100644
--- a/wire/modules/Inputfield/InputfieldPage/InputfieldPage.test.php
+++ b/wire/modules/Inputfield/InputfieldPage/InputfieldPage.test.php
@@ -173,15 +173,22 @@ class WireTest_InputfieldPage extends WireTest {
 		$f = $this->configureForTestPage($this->newInputfield());
 		$f->label = 'Related page';
 		$f->attr('value', $page->id);
+		$page->addStatus(Page::statusUnpublished);
+		$page->addStatus(Page::statusHidden);
 
 		$delegate = $f->getInputfield();
 		$this->check('getInputfield returns delegate InputfieldSelect', true, $delegate instanceof InputfieldSelect);
 		$this->check('delegate has configured name', 'related_page', $delegate->attr('name'));
 		$this->check('delegate value has selected id', $page->id, (int) $delegate->attr('value'));
+		$this->check('delegate does not add status text to option label', false, strpos($delegate->getOptions()[$page->id], 'unpublished') !== false);
+		$this->check('delegate adds unpublished option class', 'PageListStatusUnpublished', $delegate->getOptionAttributes($page->id)['class'], '*=');
+		$this->check('delegate adds hidden option class', 'PageListStatusHidden', $delegate->getOptionAttributes($page->id)['class'], '*=');
 
 		$html = $f->render();
 		$this->check('render includes delegate select', '<select', $html, '*=');
 		$this->check('render includes selected page option label', $page->title, $html, '*=');
+		$page->removeStatus(Page::statusUnpublished);
+		$page->removeStatus(Page::statusHidden);
 	}
 
 	protected function testProcessInput() {

diff --git a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module
index a50d5af..5dff3fb 100644
--- a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module
+++ b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module
@@ -38,7 +38,7 @@ class InputfieldPageAutocomplete extends Inputfield implements InputfieldHasArra
 		return array(
 			'title' => 'Page Auto Complete', 
 			'summary' => 'Multiple Page selection using auto completion and sorting capability. Intended for use as an input field for Page reference fields.', 
-			'version' => 114,
+			'version' => 115,
 		);
 	}
 
@@ -189,7 +189,11 @@ class InputfieldPageAutocomplete extends Inputfield implements InputfieldHasArra
 			$label = $this->labelFieldFormat ? $page->getText($this->labelFieldFormat, true, false) : $page->get($this->labelFieldName); 
 			$label = strip_tags("$label");
 			if(!strlen($label)) $label = $page->get('title|name');
-			$out .= $this->renderListItem($label, $page->id, '', $page); 
+			$classes = array();
+			if($page->isUnpublished()) $classes[] = 'PageListStatusUnpublished';
+			if($page->isHidden()) $classes[] = 'PageListStatusHidden';
+			$class = implode(' ', $classes);
+			$out .= $this->renderListItem($label, $page->id, $class, $page); 
 		}
 
 		$cls = $this->hideDeleted ? " class='hideDeleted'" : '';

diff --git a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.test.php b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.test.php
index f3812e9..61d8b96 100644
--- a/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.test.php
+++ b/wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.test.php
@@ -138,6 +138,15 @@ class WireTest_InputfieldPageAutocomplete extends WireTest {
 		$this->check('renderList includes template item', 'itemTemplate', $list, '*=');
 		$this->check('renderList includes selected page id', (string) $page->id, $list, '*=');
 
+		$page->addStatus(Page::statusUnpublished);
+		$page->addStatus(Page::statusHidden);
+		$list = $f->renderList();
+		$this->check('renderList does not add status text to page label', false, strpos($list, '(unpublished)') !== false);
+		$this->check('renderList adds unpublished page class', 'PageListStatusUnpublished', $list, '*=');
+		$this->check('renderList adds hidden page class', 'PageListStatusHidden', $list, '*=');
+		$page->removeStatus(Page::statusUnpublished);
+		$page->removeStatus(Page::statusHidden);
+
 		$f->hideDeleted = true;
 		$this->check('renderList hideDeleted adds class', "class='hideDeleted'", $f->renderList(), '*=');
 	}

diff --git a/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelect.test.php b/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelect.test.php
index f3efac0..f620fe8 100644
--- a/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelect.test.php
+++ b/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelect.test.php
@@ -119,6 +119,15 @@ class WireTest_InputfieldPageListSelect extends WireTest {
 		$this->check('multiple render includes selectable template', true, strpos($html, 'data-templates="' . $page->template->name . '"') !== false);
 		$this->check('multiple render stores CSV value', true, strpos($html, "value='$page->id'") !== false);
 
+		$page->addStatus(Page::statusUnpublished);
+		$page->addStatus(Page::statusHidden);
+		$html = $f->render();
+		$this->check('multiple does not add status text to page label', false, strpos($html, '(unpublished)') !== false);
+		$this->check('multiple adds unpublished page class', true, strpos($html, 'PageListStatusUnpublished') !== false);
+		$this->check('multiple adds hidden page class', true, strpos($html, 'PageListStatusHidden') !== false);
+		$page->removeStatus(Page::statusUnpublished);
+		$page->removeStatus(Page::statusHidden);
+
 		$markup = $f->renderMarkupValue(array($page->id));
 		$this->check('multiple renderMarkupValue() renders list', true, strpos($markup, '<ul><li>') === 0);
 		$this->check('multiple renderMarkupValue(empty) returns empty string', '', $f->renderMarkupValue(array()));

diff --git a/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.module b/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.module
index 3d3985a..c575651 100644
--- a/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.module
+++ b/wire/modules/Inputfield/InputfieldPageListSelect/InputfieldPageListSelectMultiple.module
@@ -30,7 +30,7 @@ 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' => 103,
+			'version' => 104,
 			'permanent' => true, 
 		);
 	}
@@ -91,7 +91,11 @@ class InputfieldPageListSelectMultiple extends Inputfield
 			if(!$page || !$page->id) continue; 
 			$label = $page->getText($this->labelFieldName, true, true);
 			if(!strlen($label)) $label = $page->name;
-			$out .= $this->renderListItem($label, $page->id); 
+			$classes = array();
+			if($page->isUnpublished()) $classes[] = 'PageListStatusUnpublished';
+			if($page->isHidden()) $classes[] = 'PageListStatusHidden';
+			$class = implode(' ', $classes);
+			$out .= $this->renderListItem($label, $page->id, $class); 
 		}
 		
 		$out .= "</ol>";