Jump to content
tpr

AdminOnSteroids

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
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

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.

  • Similar Content

    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="optin" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="optin" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: PrivacyWire Git Repo
      Download as .zip
      I would love to hear your feedback 🙂
      CHANGELOG
      0.0.5 Multi-language support included completely (also in TextFormatter). Added possibility to async load other assets (e.g. <img type="optin" data-category="marketing" data-src="https://via.placeholder.com/300x300">) 0.0.4 Added possibility to add an imprint link to the banner 0.0.3 Multi-language support for module config (still in development) 0.0.2 First release 0.0.1 Early development
    • By MoritzLost
      This is a new module that provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Beta release
      Note that I consider this a Beta release. Since the module is relatively aggressive in deleting some caches, I would advise you to install in on a test environment before using it on a live site.
      Let me know if you're getting any errors, have trouble using the module or if you have suggestions for improvement!
      In particular, can someone let me know if this module causes any problems with the ProCache module? I don't own or use it, so I can't check. As far as I can tell, ProCache uses a folder inside the cache directory to cache static pages, so my module should be able to clear the ProCache site cache as well, I'd appreciate it if someone can test that for me.
      Future plans
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory

    • By David Karich
      Admin Page Tree Multiple Sorting
      ClassName: ProcessPageListMultipleSorting
      Extend the ordinary sort of children of a template in the admin page tree with multiple properties. For each template, you can define your own rule. Write each template (template-name) in a row, followed by a colon and then the additional field names for sorting.
      Example: All children of the template "blog" to be sorted in descending order according to the date of creation, then descending by modification date, and then by title. Type:
      blog: -created, -modified, title  Installation
      Copy the files for this module to /site/modules/ProcessPageListMultipleSorting/ In admin: Modules > Check for new modules. Install Module "Admin Page Tree Multible Sorting". Alternative in ProcessWire 2.4+
      Login to ProcessWire backend and go to Modules Click tab "New" and enter Module Class Name: "ProcessPageListMultipleSorting" Click "Download and Install"   Compatibility   I have currently tested the module only under PW 2.6+, but think that it works on older versions too. Maybe someone can give a feedback.     Download   PW-Repo: http://modules.processwire.com/modules/process-page-list-multiple-sorting/ GitHub: https://github.com/FlipZoomMedia/Processwire-ProcessPageListMultipleSorting     I hope someone can use the module. Have fun and best regards, David
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "https://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


×
×
  • Create New...