Jump to content
Macrura

Selectize.js modules family

Recommended Posts

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.

  • Like 5

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


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

598cf9d71efcb_Modules__ProcessWire__apps_williamanderson_us.jpg.af5b4e4944394f659413277f60913b51.jpg

 

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

 

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

2017-08-12_112340.png.05c10ddbe7a9da310f22792eabaa8c95.png

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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

InputfieldSelect.png.7bfbd75dd44456676fe5198d5a5f7b09.png

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>

InputfieldSelect2.png.1e16e65d41adbec33fd3e0832e1e67ef.png

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>

InputfieldSelectize.png.19b67e9ad94307ef4e1dbb4aea867913.png

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>

InputfieldSelectize2.png.880688105dc409f3f80d212a7418123c.png

Share this post


Link to post
Share on other sites

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?)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.56
      Composer: rockett/jumplinks
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy! :)
    • By BitPoet
      As threatened in Ryan's announcement for 3.0.139, I built a little module for sliding toggles as a replacement for checkboxes. Styling of the input is CSS3 only (with all the usual caveats about older browsers), no JS necessary, and may still be a bit "rough around the edges", so to speak, since I didn't have much time for testing on different devices or brushing things up enough so I'd feel comfortable pushing it to the module directory. But here's the link to the GitHub repo for now:
      InputfieldSlideToggle
      Fieldtype and Inputfield that implements smartphone-style toggles as replacement for checkbox inputs. The visualization is CSS-only, no additional JS necessary.
      Status
      Still very alpha, use with caution!
      Features / Field Settings
      Size
      You can render the toggles in four different sizes: small, medium, large and extra large.
      Off Color
      Currently, "unchecked" toggles can be displayed either in grey (default) or red.
      On Color
      "Checked" toggles can be rendered in one of these colors: blue (default), black, green, grey, orange or red.
      Screenshots

      Some examples with checkbox label


      View all Size and Color Combinations
      Small toggles Medium toggles Big toggles Extra big toggles  









    • By Orkun
      Hi Guys
      I needed to add extended functionalities for the InputfieldDatetime Module (module is from processwire version 2.7.3) because of a Request of Customer.
      So I duplicated the module and placed it under /site/modules/.
      I have added 3 new Settings to the InputfieldDatetime Module.
      1. Day Restriction - Restrict different days based on weekdays selection (e.g. saturday, sunday) - WORKING

       
      2. Time Slots - Define Time slots based on custom Integer Value (max is 60 for 1 hour) - WORKING

       
      3. Time Range Rules per Weekday - Define a minTime and MaxTime per Weekday (e.g. Opening Hours of a Restaurant) - NOT WORKING PROPERLY

       
      The Problem
      Time Slots and Day Restriction working fine so far. But the Time Range Rules per Weekday doesn't work right.
      What should happen is, that when you click on a date, it should update the minTime and maxTime of the Time Select.
      But the change on the select only happens if you select a date 2 times or when you select a date 1 time and then close the datepicker and reopen it again.
      The time select doesn't get change when you select a date 1 time and don't close the picker.
      Here is the whole extended InputfieldDatetime Module.
      The Files that I have changed:
      InputfieldDatetime.module InputfieldDatetime.js jquery-ui-timepicker-addon.js (https://trentrichardson.com/examples/timepicker/) - updated it to the newest version, because minTime and maxTime Option was only available in the new version  
      Thats the Part of the JS that is not working correctly:
      if(datetimerules && datetimerules.length){ options.onSelect = function(date, inst) { var day = $(this).datetimepicker("getDate").getDay(); day = day.toString(); var mintime = $(this).attr('data-weekday'+day+'-mintime'); var maxtime = $(this).attr('data-weekday'+day+'-maxtime'); console.log("weekday: "+day); console.log("minTime: "+mintime); console.log("maxTime: "+maxtime); var optionsAll = $(this).datetimepicker( "option", "all" ); optionsAll.minTime = mintime; optionsAll.maxTime = maxtime; $(this).datetimepicker('destroy'); $(this).datetimepicker(optionsAll); $(this).datetimepicker('refresh'); //$.datepicker._selectDate($(this).attr("id"),date); //$.datepicker._base_getDateDatepicker(); // var inst = $.datepicker._getInst($(this)); // $.datepicker._updateDatepicker(inst); /*$(this).datetimepicker('destroy'); InputfieldDatetimeDatepicker($(this), mintime, maxtime); $(this).datetimepicker('refresh'); */ // $(this).datetimepicker('option', {minTime: mintime, maxTime: maxtime}); } } Can you have a look and find out what the Problem is?
      InputfieldDatetime.zip
       
      Kind Regards
      Orkun
    • By teppo
      This module tracks changes, additions, removals etc. of public (as in "not under admin") pages of your site. Like it's name says, it doesn't attempt to be a version control system or anything like that - just a log of what's happened.
      At the moment it's still a work in progress and will most likely be a victim of many ruthless this-won't-work-let's-try-that-instead cycles, but I believe I've nailed basic functionality well enough to post it here.. so, once again, I'll be happy to hear any comments you folks can provide
      https://modules.processwire.com/modules/process-changelog/
      https://github.com/teppokoivula/ProcessChangelog
      How does it work?
      Exactly like it's (sort of) predecessor, Process Changelog actually consists of two modules: Process Changelog and Process Changelog Hooks. Hooks module exists only to serve main module by hooking into various functions within Pages class, collecting data of performed operations, refining it and keeping up a log of events in it's own custom database table (process_changelog.) Visible part is managed by Process Changelog, which provides users a (relatively) pretty view of the contents of said log table.
      How do you use it?
      When installed this module adds new page called Changelog under Admin > Setup which provides you with a table view of collected data and basic filtering tools See attached screenshots to get a general idea about what that page should look like after a while.
      For detailed installation instructions etc. see README.md.
       


    • By Gadgetto
      Status update links (inside this thread) for SnipWire development will be always posted here:
      2019-08-08
      2019-06-15
      2019-06-02
      2019-05-25
      If you are interested, you can test the current state of development:
      https://github.com/gadgetto/SnipWire
      Please note that the software is not yet intended for use in a production system (alpha version).
      If you like, you can also submit feature requests and suggestions for improvement. I also accept pull requests.
      ---- INITIAL POST FROM 2019-05-25 ----
      I wanted to let you know that I am currently working on a new ProcessWire module that fully integrates the Snipcart Shopping Cart System into ProcessWire. (this is a customer project, so I had to postpone the development of my other module GroupMailer).
      The new module SnipWire offers full integration of the Snipcart Shopping Cart System into ProcessWire.
      Here are some highlights:
      simple setup with (optional) pre-installed templates, product fields, sample products (quasi a complete shop system to get started immediately) store dashboard with all data from the snipcart system (no change to the snipcart dashboard itself required) Integrated REST API for controlling and querying snipcart data webhooks to trigger events from Snipcart (new order, new customer, etc.) multi currency support self-defined/configurable tax rates etc. Development is already well advanced and I plan to release the module in the next 2-3 months.
      I'm not sure yet if this will be a "Pro" module or if it will be made available for free.
      I would be grateful for suggestions and hints!
      (please have a look at the screenshots to get an idea what I'm talking about)
       




×
×
  • Create New...