Jump to content

AdminOnSteroids


tpr

Recommended Posts

You mean the "Add field" asmSelect? That's already a "pimped" html select box, but I just thought  today morning that it would be nice if it had a search. I'm not sure applying another js won't cause issues but I'll see if I have time. I'm usually using this library for such things btw:

https://github.com/jshjohnson/Choices

  • Like 2
Link to comment
Share on other sites

50 minutes ago, tpr said:

You mean the "Add field" asmSelect?

Yes the one in template editing, and all other select fields such as page reference field. Those lists could grow really long. 

50 minutes ago, tpr said:

This library most likely would not work with asmSelect as it alters the options inside  the select tag, so as the selectize.js. select2.js preserves the original select tag, which is more likely to work with least effort.

Link to comment
Share on other sites

10 hours ago, Karl_T said:

I guess most of us feel pain when choosing fields and templates in dropdown select if the list grows large.

Even if it doesn't grow large, actually. So I think it is a great idea as we always know the name and that is why select2 and similar makes a lot of sense. But maybe this change should be introduced to the core and selectize.js is already there.

Link to comment
Share on other sites

3 hours ago, szabesz said:

So I think it is a great idea as we always know the name

Not saying it wouldn't be a nice feature to add, but if you know the start of the option you are looking for you can find an option in a standard select by just typing into the select box. On Windows anyway.

Link to comment
Share on other sites

Here is a trial that works for asmSelect, but in an ugly way as autoload modules load Javascript before the asm inputfield. Hope this could help.

Select2.module

class Select2 extends WireData implements Module {

    public static function getModuleInfo() {
        return array(
            'title' => 'Select2',
            'version' => 0, 
            'autoload' => true,
        );
    }

    public function init(){
        $data = $this->data;
        $this->config->scripts->add('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js');
        $this->config->scripts->add($this->config->urls->Select2 . 'main.js');
        $this->config->styles->add('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css');
    }
}

main.js

$(function(){
	var loop = setInterval(function(){
		var $select = $(".asmSelect");
		if($select.length > 0){
			$(".asmSelect").select2({
				closeOnSelect: false
			});
			clearInterval(loop);
		}
	}, 200);
});

 

PS: Using selectize.js is not working with the above code.

  • Like 2
Link to comment
Share on other sites

12 hours ago, Robin S said:

just typing into the select box. On Windows anyway.

This trick works on Mac too but there are fields starting with same letters (I tend to prefix them according to where they belong), some are already added some are not, also there are fields belonging to parents (in the case of a Lister) where select2 would be most useful. What I find most difficult to grasp is that in the case of Templates already added fields appear at the top of the dropdown (grayed out but in dark gray so it's hard to tell them apart) while in ListerPro's columns config the already added fields are at the bottom and this inconsistency is hard to get used to.

That is why I'm saying that rethinking this part of the core would be welcome.

Link to comment
Share on other sites

Thanks @Karl_T for the help, I'm almost there now, only some minor glitches are left, eg keeping the searched term after enter.

I've decided to destroy/rebuild the select2 dropdown to make sure everything work nicely with asmSelect (had issues otherwise).

I've also made the greyed out items hidden, so only the selectable options are visible. Let me know if you have arguments against it. I sorted the field list alphabetically, let me know if you think it's a bad idea.

  • Like 2
Link to comment
Share on other sites

Thanks for implementing this function. Your ideas are nice! One thing to mention is that if option closeOnSelect: false is used, an unwanted jump to the first item would happen every time when an option is chosen.

Related issue post: https://github.com/select2/select2/issues/4417

Maybe we could use a forked version to handle the issue if it matters.

Link to comment
Share on other sites

6 hours ago, tpr said:

I've also made the greyed out items hidden, so only the selectable options are visible. Let me know if you have arguments against it. I sorted the field list alphabetically, let me know if you think it's a bad idea.

Because it is such a drastic change it would be useful to have small switch somewhere "attached" to select2 so that temporarily it is possible to switch this modification off/on and that way we can get  PW's default behavior, just in case.

Link to comment
Share on other sites

3 hours ago, Karl_T said:

if option closeOnSelect: false is used, an unwanted jump to the first item would happen

Since I rebuild the whole select2 on select and then reopen it, no need for closeOnSelect false. I couldn't remove clicked items otherwise on the fly, though possibly there's a way. 

14 minutes ago, szabesz said:

switch this modification off/on

There's the on/off switch in the footer if you need that. 

Link to comment
Share on other sites

18 minutes ago, tpr said:

There's the on/off switch in the footer if you need that. 

I know, I was the one to ask for that feature :P However, that switches off all. Never mind, it just an idea.

Edited by szabesz
typo
Link to comment
Share on other sites

I had some tough night hours to figure out things but finally it seems to works as I expected. I kept the hidden items visible because it causes less frustration.

Ajax loaded fields are supported though it's still a setTimeout hack, but better than nothing imho.

Keeping searched term is still not solved, not sure if I can do that but I think it's still an improvement to the original asmSelect.

 

aos-asmselect2.gif

  • Like 5
Link to comment
Share on other sites

Hey @tpr - curious if you'd be an option for adding a check/uncheck all option for InputfieldCheckboxes ?

If you're not, just let me know and I'll cook something else up, but I think it might be a nice addition to AOS.

Thanks for considering!

  • Like 1
Link to comment
Share on other sites

v1.7.7 is uploaded, docs will come later :) I'm happy with the asmSelect + Select2 result. The jump on click is still present but I think it's a minor issue.

There are also 2 extra field config settings: placeholder and limit for FieldtypePage and FieldtypeOptions, you can find it under the Input tab.
Currently it's working with asmSelect variants only.

I think these additions make using asmSelect much more convenient, feels native after using it once or twice :) 

5a972f5e1d57d_aos-asmselect2limitplaceholder.gif.e77b237879edd5bbfe270577a999bcc2.gif

@adrian That top checkbox would mess up the look a bit, but it would be handy otherways.

  • Like 6
Link to comment
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
×
×
  • Create New...