Module AdminOnSteroids

[tpr]

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

[Karl_T]

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:

https://github.com/jshjohnson/Choices

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.

[szabesz]

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.

[Robin S]

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.

[Karl_T]

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.

[szabesz]

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.

[tpr]

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.

[Karl_T]

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.

[szabesz]

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.

[tpr]

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. 

[szabesz]

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  However, that switches off all. Never mind, it just an idea.

Edited February 25, 2018 by szabesz
typo

[tpr]

I know. The problem is that I do not want to add another button to cause unnecessary clutter especially for clients. 

[tpr]

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.

 

[adrian]

4 hours ago, tpr said:

it's still a setTimeout hack

Would requestAnimationFrame be useful here? It's become my goto method for waiting for an element to exist.

[szabesz]

46 minutes ago, adrian said:

Would requestAnimationFrame be useful here? It's become my goto method for waiting for an element to exist.

How does it work in practice? Could you please elaborate?

[adrian]

2 minutes ago, szabesz said:

How does it work in practice? Could you please elaborate?

This is where I first read about it: https://swizec.com/blog/how-to-properly-wait-for-dom-elements-to-show-up-in-modern-browsers/swizec/6663

 

[tpr]

Thanks, I'll try that way. This solution is much more useful to know than the whole feature in question

[adrian]

2 minutes ago, tpr said:

Thanks, I'll try that way. This solution is much more useful to know than the whole feature in question

You might also find this interesting:

https://jsperf.com/requestanimationframe-vs-setinterval-loop/7

[tpr]

Thanks @adrian, requestAnimationFrame seems to work beautifully at first, even in IE11.

[adrian]

1 minute ago, tpr said:

Thanks @adrian, requestAnimationFrame seems to work beautifully at first, even in IE11.

https://caniuse.com/#search=requestAnimationFrame

[szabesz]

3 minutes ago, adrian said:

https://caniuse.com/#search=requestAnimationFrame

What? No Opera Mini support?  

[adrian]

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!

[tpr]

Sure, but as always, the question is where to put it. Do you have any UI idea?

[adrian]

2 minutes ago, tpr said:

Sure, but as always, the question is where to put it. Do you have any UI idea?

I was just thinking of appending a checkbox at the top and using that as the toggle. Maybe like this: http://jsfiddle.net/NogginBox/ScnQT/1/ or maybe with this extra checkbox directly above Option 1.

[tpr]

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  

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