Jump to content
ryan

PW 3.0.177 – Core updates

Recommended Posts

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/

  • Like 22
  • Thanks 1

Share this post


Link to post
Share on other sites

@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.

 

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

@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.

tags.gif.566496c33247a3b75246752462180901.gif

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 by Robin S
Added SCSS
  • Like 6

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...