Module Selectize.js modules family

[Macrura]

The JquerySelectize module, that all of the other Selectize family modules require, has been updated (to version 1.0.1) as follows:

1) Checks to see if the core version is 3.0.67 or higher (version at which selectize was added to core), and if so, will load the core files, and not this module's files.

Using the ProcessWire core versions of selectize.js improves the user experience, because of the adjustments that Ryan made to the plugin, which relates to hitting enter key after typing a tag (which would by default submit the form).

2) In addition to loading the CSS & JS from the core, when working in versions 3.0.67 or higher, the module still provides a skin selector.
While most users will probably stick to the core non-skinned version of Selectize, the module provides this option to choose a different skin. There are some scenarios where choosing the default or bootstrap skins for selectize can be preferable, as they may be higher contrast or more pronounced with color usage, and can help in some ways with accessibility for users with any type of vision impairment.

Currently the update/behavior only applies to Selectize modules family that require and use the JquerySelectize module, so if you are using core image tags and have this module installed, it won't change the skin; However there is a plan to try and hook into the image field rendering and enable this module to add the custom selected skin to the css files.

[Macrura]

This is a status update regarding the 4 modules:

1) JquerySelectize

This module is not be required by any of the modules below, for PW versions > 3.0.66.
Latest version also allows the module css/js to be loaded instead of the core css/js - mostly for testing/debug.

2) InputfieldSelectize (and InputfieldSelectizeMultiple)

Everything seems to be working fine.

The dependency on the JquerySelectize is removed for versions > 3.0.66, and the module inits the core library when in use.
If JquerySelectize module is present/installed, then it will hand off the loading of the assets to the module, where you can then choose where to load from.

3) SelectizeImageTags

UPDATE - latest version should work now - if you use this module with any PW version > 3.0.66, please update to the latest version.

4) SelectizeTemplateFields

This works fine with the core selectize. The dependency on the jQuery module is removed for versions > 3.0.66.

[Sipho]

@Macrura After updating to the latest version of InputFieldSelectize(1.0.3) I now get the following error when I try to view a field using InputFieldSelectize

Quote

Call to undefined function bd() in ...\InputfieldSelectize\InputfieldSelectize.module on line 266

I am running ProcessWire version 3.0.62

[Macrura]

dangit, sorry about that – fixed..

[Sipho]

@Macrura No problem 

[Macrura]

sure – let me know if you run into any issues, as that new version utilizes the core selectize library;

[Sipho]

@Macrura Feature request:

Would it be possible to make the field refresh after page changes? In your examples, you put an editUrl that opens a modal. After making an edit in a modal, the field does not reflect the changes made. Another example is when creating new pages. I like to use PageFieldEditLinks by @thetuningspoon but after adding a page, it doesn't show up in the selectize options. Maybe this should be a feature of PageFieldEditLinks instead. It might need cooperation between you two. I believe you made the original AdminPageSelectEditLinks? I am not too sure 

I tried making my own hacky changes to PageFieldEditLinks but it didn't work too well.

Otherwise, this is a really great module 

[Macrura]

it should be possible to re-init the selectize page select when the pw-modal closes, in terms of creating a new page;
i will have to look at how the page select edit links does it, because thetuningspoon did most of the module...

Also - be careful with the editUrl if you upgrade PW past 3.0.66- there seems to be a problem when there is an anchor inside the option/item that interferes with displaying the remove button; i have not figured it out yet what the problem is there but am actively investigating it - created github issue and posted topic on the 3.0.67 topic;

EDIT - seems that maybe there is no problem, my test environment shows the remove button fine when using core version of lib...

[Macrura]

looks like adding new pages to the field should just be a matter of adding 2 selectors in the page field edit links module, so that it can be inclusive/aware of Selectize inputfield.

[Macrura]

On 7/9/2017 at 8:33 PM, Robin S said:

I would say that anyone already using the module on older websites is probably happy enough with the existing functionality and should stick with v0.0.2. PW will show a warning for anyone trying to upgrade that does not meet the minimum version dependency. Not sure if the Upgrades module will actually refuse to upgrade in such a situation (I don't have an easy way to check) but you could include an additional warning advising to revert to v0.0.2:

/**
 * Upgrade
 */
public function ___upgrade($fromVersion, $toVersion) {
    // Upgrade from < v0.0.3
    if($fromVersion < 3) {
        if($this->config->version < '3.0.61') {
            throw new WireException("The minimum required ProcessWire version is 3.0.61. Please revert to Selectize Image Tags v0.0.2");
        }
    }
}

 

@Robin S i'm having some trouble with the upgrade on this, not sure what's going on, maybe related to the upgrade method?

 

this is on 3.0.70, so it should meet the requirements... i'll try removing the upgrade function and see if the mod requirement works

 

[Robin S]

26 minutes ago, Macrura said:

@Robin S i'm having some trouble with the upgrade on this, not sure what's going on, maybe related to the upgrade method?

The issue won't be related to the upgrade method because the error message is different. So it must relate to the 'requires' property in the getModuleInfo() method.

I note that above you say that JquerySelectize is not to be required.

On 09/08/2017 at 6:28 AM, Macrura said:

1) JquerySelectize

This module is not be required by any of the modules below, for PW versions > 3.0.66.

So you would want to remove that module from the 'requires' property if you haven't already, and perhaps check for it in the install/upgrade methods depending on the PW version.

[Macrura]

ok thanks - yeah i moved the module info into the <modulename>.info.php field and in there i add the module requires to the array by checking the config->version;

maybe there is something wrong with how i'm doing that...

$info = array(
    'title' => 'Selectize Image Tags',
    'author' => 'Macrura',
    'version' => 007,
    'summary' => 'Admin helper for enabling selectize.js on images tags field.',
    'href' => '',
    'icon' => 'tags',
    'singular' => true,
    'autoload' => 'template=admin',
    'requires'  => array(
        'ProcessWire>=3.0.61'
    )
);

if($this->wire('config')->version < '3.0.67') {
	$info['requires'][] = "JquerySelectize";
}

*Btw - i do have that module (JquerySelectize) also installed anyway, in case that matters..

[Robin S]

8 minutes ago, Macrura said:

maybe there is something wrong with how i'm doing that...

I've never tried setting the module info conditionally like that (or the external info.php approach), but it looks like it should work. Tracy should help here to check the resulting $info array.

[Macrura]

it definitely works overall (when the module is already in the modules dir), but can't figure out why it fails on the upgrades download, the requires numbers look messed up...

[Macrura]

looks like the modules directory isn't parsing or understanding the info file:

"requires_versions":{"":[">=",0]}

http://modules.processwire.com/export-json/SelectizeImageTags/?apikey=pw300

i probably need change something in that <modulename>info.php, since the $config check needs to check the target site, not the modules website, in case the engine that creates that json page is PW..

[Robin S]

4 hours ago, Macrura said:

looks like the modules directory isn't parsing or understanding the info file:

"requires_versions":{"":[">=",0]}

That does look strange, but I think it might be normal. It seems to apply to all modules: http://modules.processwire.com/export-json/oauth2-login/?apikey=pw300
And if the values are blank then I would expect it not to apply any restriction.

I see that you have module info defined it two places - maybe that is the cause of the issue?
https://github.com/outflux3/SelectizeImageTags/blob/d4160b20f40e05840b6cb5d947fb63b3a95aeb4c/SelectizeImageTags.info.php#L4-L20
https://github.com/outflux3/SelectizeImageTags/blob/d4160b20f40e05840b6cb5d947fb63b3a95aeb4c/SelectizeImageTags.module#L7-L22

[Macrura]

that's actually inside the comment header, in case i need to put it back

[Robin S]

34 minutes ago, Macrura said:

that's actually inside the comment header, in case i need to put it back

Right, gotcha.

1 hour ago, Robin S said:

That does look strange, but I think it might be normal. It seems to apply to all modules: http://modules.processwire.com/export-json/oauth2-login/?apikey=pw300

Actually, this module is not installable either despite the requires property being consistent with the module documentation.

 So I think it's an issue with ProcessModule and/or the Modules directory JSON generator and it should be reported to Ryan.

[Sipho]

@Macrura When I set an InputfieldSelectize to required, the first value is selected. Is there any way to prevent this? I wish to have it behave as it does when not set to required, the same way that InputfieldSelect does it. This might be really dumb, but I couldn't find it mentioned anywhere.

[Macrura]

Hi Sipho - ok i'm not sure how the required works for single input, when you look at the source, is the source code showing the first option selected (the pw source <select> element? If that's the case then the required behavior of the field is inheriting from PW, i don't think the JS can affect that..

[Sipho]

@Macrura This is when using required InputfieldSelect:

<select id="Inputfield_family" class="required" name="family" tabindex="5">
  <option selected="selected" value=""></option>
  <option value="1084">Saturniidae</option>
</select>

This is when using non-required InputfieldSelect

<select id="Inputfield_family" name="family" tabindex="5">
  <option selected="selected" value=""></option>
  <option value="1084">Saturniidae</option>
</select>

This is when using required InputfieldSelectize:

<select id="Inputfield_family" class="required selectized" name="family" tabindex="6" style="display: none;">
  <option value="1084" selected="selected">Saturniidae</option>
</select>

This is when using non-required InputfieldSelectize

<select id="Inputfield_family" name="family" tabindex="6" style="display: none;" class="selectized">
  <option value="" selected="selected"></option>
</select>

[Macrura]

ok thanks - will look into it asap - it is because the module is using the addOption() method which is filtering out the items with no value, guess this needs to be fixed...

Edit : testing here and it seems to be working correctly - i'm not seeing the empty option filtering out - can you tell me more about the settings on the inputfield is it set to single (not multiple pages?)

[Sipho]

Sorry I forgot to mention I am creating the inputfield from the API. Here is the code I am using to generate it:

<?php
$template = "family";
$label = "Family";

$f = $this->modules->get("InputfieldSelectize");
$f->name = $template;
$f->label = $label;
$f->required = true;
$f->columnWidth = 33;
$f->addOption("");
$f->set("itemDataArray", '$data = array("title" => $page->title);return $data;');
$f->set("renderOptionMarkup", "'<div class=\"item\"><span style=\"display:block;font-size:14px;font-weight:bold;\">' + escape(item.title)  + '</span></div>'");
$f->set("renderItemMarkup", "'<div class=\"item\"><span style=\"display:block;font-size:14px;font-weight:bold;\">' + escape(item.title)  + '</span></div>'");
foreach ($this->pages->find("template=".$template) as $p) {
  $f->addOption($p->id, $p->title);
}
$f->attr("value", "");
$form->add($f);

I haven't included the whole form as I don't think it's relevant.

I believe it would have to be InputfieldSelectizeMultiple for it to be set to multiple pages, so it's set to single pages. If I just change required to false, it behaves as expected. Maybe I am incorrectly using the API.

[Sipho]

As a tangent question, is it possible to use InputfieldSelectize for non-page inputfields? So for example, using InputfieldSelect I can say:

<?php
$f->addOption("pie","Pie");

But using InputfieldSelectize I can't seem to figure out how to get the value in the itemDataArray. Is there a way to do this?

[Macrura]

To answer the first question, can you try the attached module and let me know if it works;

You need to use the new method addBlankOption(); which will then add the correct data-data attribute to the option in case you want to use something like 'Please Select...';

$f->addBlankOption();

or

$f->addBlankOption('Please Select...');

This is really only necessary when using from the API because in page edit context i think the default behavior works; this does allow you to use this inputfield in modules which is cool, and have a blank option; needs more work though since the blank option json in data-data attribute will need to match the other options.. might be some time till that part is solved, but this should work for now..

InputfieldSelectize.module