PW 3.0.177 – Core updates

[ryan]

This week we focus in on a new and unique Inputfield module added to the core that enables a lot of useful new input capabilities for tags, sortable multiple selection and custom user input. I introduced it in last week's forum post, but it was further improved this week and reached a point where I thought it would need some dedicated documentation, so this post dips into that and goes quite a bit more in-depth than last week’s. I never got around to bumping the version to 3.0.176 because the module wasn't quite done till Thursday (kept updating with improvements), but just in case there's any confusion about versions between last week and this week, I bumped it to 3.0.177 even though it contains what was originally intended for 3.0.176, plus more—

https://processwire.com/blog/posts/pw-3.0.177/

[LMD]

@ryan  This is an excellent addition to the core.

For a particular use-case I have, I am wondering if something is possible -- either something already possible I've overlooked, or as a feature request.

Sometimes it is useful to have the page info when building a selector for a page reference field — so I was wondering whether it could be possible to use placeholder tokens to pass the current page being edited to the ajax request?

For example, in the "Text Tags" section of the field setup, we could enter something like this for the "Ajax URL" :

/find-fieldname/{page.id}/?q={q}

Where "{page.id}" is replaced with the ID of the page being edited at runtime. Similar to other places in the PW admin where we can insert placeholder tokens.

Then in the hook itself, we have:

$wire->addHook("/find-fieldname/([0-9]{4})/", function($e) {
	$pageID = $e->arguments(1);

	// ... the rest of the code
});

I'm using page ID as an example, but it could be any valid page or template variable.

 

[Macrura]

I'm happy that Selectize.js is getting used more in the core.

I should add that we've had the ability to use Selectize.js for page references (multi & single), image tags, and template & field tags since 2016.

https://processwire.com/modules/inputfield-selectize/

https://processwire.com/modules/selectize-image-tags/

https://processwire.com/modules/selectize-template-field-tags/

Also if using the module for template & field tags, it tracks all of the tags in the system and provides a selectable list. And it has the option to selectize the icons as well, making it easy to search for icons for any field or template by entering the name of the icon. I've been extensively using all of these modules on all sites. And the inputfield has the additional benefit of allowing custom content for the selectable options as well as the selected options (separately configurable), meaning you can display various fields, icons, or even images on the selectable options.

As Selectize.js has been more and more integrated with the core (for example with image tags), the modules have adapted.

The Page Inputfields (single, multi) use the core selectize which has the benefit of being customized to work better with the admin.

I'll have to see how the module interacts with the the template & field tagging. I think the best option is to allow admins to enable or disable the core init of the template & field tags, so that the module version can continue working, but I haven't tested the latest dev so don't know if it is an option.

[Robin S]

@ryan, thanks for the cool new InputfieldTextTags!

Could the inputfield styling be tweaked slightly to bring it into line with other PW inputfields?

1. The input height is slightly shorter than the standard PW text and select inputs. It would be good if the height matched.

2. When used for single item selections it would be good if the font size was the same as standard text inputs and selects. For multiple item selections the font size should probably stay smaller because there is extra tag UI that has to fit inside the input.

3. When used for single item selections the dropdown caret icon is a different style and position than that used for existing selects and AsmSelects.

4. When used for single item selections the containing inputfield expands slightly when the tag dropdown is shown.

5. The border radius applied to the top left and right of input when the tag dropdown is shown is a change from the existing PW UI style.

Small stuff I know but it all subtly feeds into the user's confidence in the system (sub-conscious thought: "With such attention to detail this is clearly a well-maintained and reliable product")

Edit: some SCSS that could be a starting point...

.InputfieldTextTags {
    .selectize-input {
        &.dropdown-active { border-radius:0;  }
    }
    .selectize-control.single {
        .selectize-input { font-size:16px; height:40px; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23354b60%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23354b60%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A"); background-repeat:no-repeat; background-position:100% 50%; padding:10px 10px 0;
            &:after { content:none; }
        }
    }
}

 

Edited May 5, 2021 by Robin S
Added SCSS

[Macrura]

I found the easiest way to get the styling for selectize was to remove the uk-input class.

$('.AdminThemeUikit #Inputfield_tags').removeClass('uk-input');

Also, as an update, the new tags functionality for fields & templates does indeed conflict with the module – the result is a JS error which prevents any editing of templates or fields. Anyone using the "Selectize Template and Field Tags" and using the latest dev version, will need to uninstall that module for now, to prevent this error.

I don't see any setting to disable the core text tags inputfield on the tags inputfield, on templates & fields. The only thing i can think of is to somehow destroy the selectize instance that the core is creating, and then the module can do it's usual init; But for now I haven't been able to figure out how to get that selectize instance to destroy it.

Edit: In case anyone is reading this, i just pushed a temporary fix to the module which should prevent the JS errors and the consequent inability to edit templates or fields.

Edited May 13, 2021 by Macrura
Updated

[AndZyk]

When selecting an existing tag in the field settings the capitalization is ignored and a new tag will be created.

For example, I have added the tag "Content", select it in the settings and it makes a new tag "content".

I think this should be fixed.

Regards, Andreas