Macrura

Module
Selectize.js modules family

43 posts in this topic

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.

5 people like this

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.

3 people like this

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

dangit, sorry about that – fixed..

1 person likes this

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.

1 person likes this

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.

1 person likes this

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.

2 people like this

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 kixe
      FieldtypeColor is on github

      Fieldtype stores a 32bit integer value reflecting a RGBA value.
      Input
      5 types of Inputfields provided
      Html5 Inputfield of type='color' (if supported by browser)    Inputfield type='text' expecting a 24bit hexcode string (RGB). Input format: '#4496dd'.
      The background color of the input field shows selected color Inputfield of type='text' expecting 32bit hexcode strings (RGB + alpha channel) Input format: '#fa4496dd' Inputfield with Spectrum Color Picker
      (Options modifiable) Inputfield type='text' with custom JavaScript and/or CSS (since version 1.0.3) Output
      Define output format under 'Details' tab in field settings. Select from the following 8 options
      string 6-digit hex color. Example: '#4496dd' string 8-digit hex color (limited browser support).  Example: '#fa4496dd' string CSS color value RGB. Example: 'rgb(68, 100, 221)' string CSS color value RGB. Example: 'rgba(68, 100, 221, 0.98)' string CSS color value RGB. Example: 'hsl(227, 69.2%, 56.7%)' string CSS color value RGB. Example: 'hsla(227, 69.2%, 56.7%, 0.98)' string 32bit raw hex value. Example: 'fa4496dd' int 32bit. Example: '4198799069' (unformatted storage value) The Fieldtype includes
      Spectrum Color Picker by Brian Grinstead

      SCREENSHOTS
      Input type=text with changing background and font color (for better contrast)

      Input type=color (in Firefox)


      Javascript based input (Spectrum Color Picker)


      Settings Output

       
      Settings Input

    • By zlitrox
      Hi!
      I'm relatively new to the world of Processwire, but so far I'm really impressed by this CMS and its ease, power and speed.
      I've been looking at the different field types and also existing CKEditor modules (pwimage and pwlink).
      Here's what i want to achieve:
      I would like to use or create a own module which allows my admin users to upload pdf files inline in a CKEditor field (page content) the same way images are handled. It should be possible to upload a pdf file and specify its name and from the file uploaded and name i want to show an icon or image inline in editor and the output for that upload should be customized based on the module. Lets make it simple and say that i upload datasheet-1.pdf and want it to be named "My product datasheet", i want the output to be:
      <a href="{ link to uploaded pdf file }">My product datasheet</a>  
      Also the uploaded pdf files should be related to the page the user is editing.
       
      Is this doable? 
       
      Any guidance would be greatly appreciated! Thanks in advance.
      PS. I'm a PHP programmer so i know it would require some custom code, but the real question is where do i start, what should it take and is it even possible to do?
    • By flydev
      Auth2Login for ProcessWire
      A Module which give you ability to login an existing user using your favorite thrid-party OAuth2 provider (i.e. Facebook, GitHub, Google, LinkedIn, etc.)..
      You can login from the backend to the backend directly or render a form on the frontend and redirect the user to a choosen page.
      Built on top of ThePhpLeague OAuth2-Client lib.
      Registration is not handled by this module but planned.
       
      Howto Install
      Install the module following this procedure:
       - http://modules.processwire.com/modules/oauth2-login/
       - https://github.com/flydev-fr/OAuth2Login
      Next step, in order to use a provider, you need to use Composer to install each provider
      ie: to install Google, open a terminal, go to your root directory of pw and type the following command-line: composer require league/oauth2-google
      Tested providers/packages :
          Google :  league/oauth2-google     Facebook: league/oauth2-facebook     Github: league/oauth2-github     LinkedIn: league/oauth2-linkedin
      More third-party providers are available there. You should be able to add a provider by simply adding it to the JSON config file.

      Howto Use It
      First (and for testing purpose), you should create a new user in ProcessWire that reflect your real OAuth2 account information. The important informations are, Last Name, First Name and Email. The module will compare existing users by firstname, lastname and email; If the user match the informations, then he is logged in.
      ie, if my Google fullname is John Wick, then in ProcessWire, I create a new user  Wick-John  with email  johnwick@mydomain.com
      Next step, go to your favorite provider and create an app in order to get the ClientId and ClientSecret keys. Ask on the forum if you have difficulties getting there.
      Once you got the keys for a provider, just paste it into the module settings and save it. One or more button should appear bellow the standard login form.
      The final step is to make your JSON configuration file.
      In this sample, the JSON config include all tested providers, you can of course edit it to suit your needs :
      { "providers": { "google": { "className": "Google", "packageName": "league/oauth2-google", "helpUrl": "https://console.developers.google.com/apis/credentials" }, "facebook": { "className": "Facebook", "packageName": "league/oauth2-facebook", "helpUrl": "https://developers.facebook.com/apps/", "options": { "graphApiVersion": "v2.10", "scope": "email" } }, "github": { "className": "Github", "packageName": "league/oauth2-github", "helpUrl": "https://github.com/settings/developers", "options": { "scope": "user:email" } }, "linkedin": { "className": "LinkedIn", "packageName": "league/oauth2-linkedin", "helpUrl": "https://www.linkedin.com/secure/developer" } } }  
      Backend Usage
      In ready.php, call the module :
      if($page->template == 'admin') { $oauth2mod = $modules->get('Oauth2Login'); if($oauth2mod) $oauth2mod->hookBackend(); }  
      Frontend Usage
      Small note: At this moment the render method is pretty simple. It output a InputfieldForm with InputfieldSubmit(s) into wrapped in a ul:li tag. Feedbacks and ideas welcome!
      For the following example, I created a page login and a template login which contain the following code :
      <?php namespace ProcessWire; if(!$user->isLoggedin()) { $options = array( 'buttonClass' => 'my_button_class', 'buttonValue' => 'Login with {provider}', // {{provider}} keyword 'prependMarkup' => '<div class="wrapper">', 'appendMarkup' => '</div>' ); $redirectUri = str_lreplace('//', '/', $config->urls->httpRoot . $page->url); $content = $modules->get('Oauth2Login')->config( array( 'redirect_uri' => $redirectUri, 'success_uri' => $page->url ) )->render($options); }

       
      Screenshot
       



    • By Robin S
      First a note about my other modules...
      I have three existing modules that are similar in that they allow restrictions to be placed on repeating inputfields: Limit Repeater, Limit PageTable, Limit Table
      Restrict Repeater Matrix takes a different approach to the module configuration from those other modules. The module settings for Restrict Repeater Matrix are applied in the field settings rather in a module config screen. I think this new approach is better, but it means that it isn't practical to create different settings for different roles via the admin interface. Instead the module has a hookable method, allowing roles to be targeted and other advanced usages to be achieved via a hook. The result is that the module is more flexible.
      I intend to transition my other modules to the same approach over the coming weeks, but because this will result in breaking changes I will be releasing the updated modules under new names ("Restrict Repeater", etc) to avoid users upgrading via the Upgrades module without full awareness of the changes. The old modules will be marked as deprecated.
       
      Restrict Repeater Matrix
      A module for ProcessWire CMS/CMF. Allows restrictions and limits to be placed on Repeater Matrix fields. Requires FieldtypeRepeaterMatrix >= v0.0.4
      For any matrix type in a Repeater Matrix field you have the option to:
      Prevent drag-sorting of items Prevent cloning of items Prevent toggling of the published state of items Prevent trashing of items Limit the number of items that may be added to the inputfield Please note that restrictions and limits are applied with CSS/JS so should not be considered tamper-proof.
      Usage
      Install the Restrict Repeater Matrix module.
      For each matrix type created in the Repeater Matrix field settings, a "Restrictions" fieldset is added at the bottom of the matrix type settings:

      For newly added matrix types, the settings must be saved first in order for the Restrictions fieldset to appear. Set restrictions for each matrix type as needed. A limit of zero means that no items of that matrix type may be added to the inputfield.
      Setting restrictions via a hook
      Besides setting restrictions in the field settings, you can also apply or modify restrictions by hooking RestrictRepeaterMatrix::checkRestrictions. This allows for more focused restrictions, for example, applying restrictions depending on the template of the page being edited or depending on the role of the user.
      The checkRestrictions() method receives the following arguments:
      $field This Repeater Matrix field $inputfield This Repeater Matrix inputfield $matrix_types An array of matrix types for this field. Each key is the matrix type name and the value is the matrix type integer. $page The page that is open in ProcessPageEdit The method returns a multi-dimensional array of matrix types and restrictions for each of those types. An example of a returned array:

      Example hooks
      Prevent the matrix type "images_block" from being added to "my_matrix_field" in a page with the "basic-page" template:
      $wire->addHookAfter('RestrictRepeaterMatrix::checkRestrictions', function(HookEvent $event) { $field = $event->arguments('field'); $page = $event->arguments('page'); $type_restrictions = $event->return; if($field->name === 'my_matrix_field' && $page->template->name === 'basic-page') { $type_restrictions['images_block']['limit'] = 0; } $event->return = $type_restrictions; });  
      Prevent non-superusers from trashing any Repeater Matrix items in "my_matrix_field":
      $wire->addHookAfter('RestrictRepeaterMatrix::checkRestrictions', function(HookEvent $event) { $field = $event->arguments('field'); $type_restrictions = $event->return; if($field->name === 'my_matrix_field' && !$this->user->isSuperuser()) { foreach($type_restrictions as $key => $value) { $type_restrictions[$key]['notrash'] = true; } } $event->return = $type_restrictions; });  
      http://modules.processwire.com/modules/restrict-repeater-matrix/
      https://github.com/Toutouwai/RestrictRepeaterMatrix
    • By psy
      ProcessWire DropboxAPI on GitHub: https://github.com/clipmagic/DropboxAPI
       
      This module is a wrapper for Kunal Varma's Dropbox PHP SDK https://github.com/kunalvarma05/dropbox-php-sdk
      It was created to perform a specific function for a client, ie upload PDF files on a PW website to a specific Dropbox account folder.
      The PDF files, created using @Wanze's excellent PagesToPdf module using the WirePDF functions, are generated from Formbuilder forms completed by front-end site visitors.  Works a treat!
      There's more that could be done to allow ProcessWire to take advantage of all the features of the SDK, eg downloads, multiple Dropbox accounts, etc. You are welcome to request changes and/or fork the GitHub project to extend the feature set.
      Enjoy!
      System requirements
      PHP 5.6.4 or greater Composer The PHP mbstring extension General information
      This module enables you to access a single Dropbox (www.dropbox.com) account to upload files from a ProcessWire website.
      All kudos to (https://github.com/kunalvarma05/dropbox-php-sdk) for the PHP API.
      First steps
      Visit (https://www.dropbox.com/developers) and read the documentation. Log into Dropbox and create a new application. It's recommended to limit ProcessWire App access to a specified folder Make a note of the App key, the App secret and the name of the Dropbox folder Installation
      Download the zip file into your site/modules folder then expand the zip file. Next, login to ProcessWire > go to Modules > click "Refresh". You should see a note that a new module was found. Install the DropboxAPI module. Configure the module with your App key, App secret and your Call Back URL You need to generate a Dropbox access token to enable your site to communicate with the nominated Dropbox account. Dropbox will generate a token for you or you can create a page for the front end of your ProcessWire site with a template to submit the token request to Dropbox, eg:
      <?php namespace ProcessWire; $drop = $modules->get('ProcessDropboxAPI'); if ($input->get->code && $input->get->state) { $code = $sanitizer->text($input->get->code); $state = $sanitizer->text($input->get->state); //Fetch the AccessToken $accessToken = $drop->getAccessToken($code, $state); echo "Copy/paste this code into the module configuration: " . $accessToken; } else { echo "<p><a href='" . $drop->getAuthURL() . "'>Log in with Dropbox</a></p>"; } ?> Once you have entered the token in the module configuration, you can unpublish this page.
      Usage
      Read the dropbox-php-sdk documentation!
      An example template for sending a file to a Dropbox App folder from ProcessWire:
      <?php namespace ProcessWire; use Kunnu\Dropbox\Dropbox; use Kunnu\Dropbox\DropboxApp; use Kunnu\Dropbox\DropboxFile; // send pdf to Dropbox $drop = $modules->get('DropboxAPI'); $app = new DropboxApp($drop->app_key, $drop->app_secret, $drop->authorization_code); if ($app) { //Configure Dropbox service $dropbox = new Dropbox($app); $dropboxFile = new DropboxFile('/path/to/myfilename.pdf'); $file = $dropbox->upload($dropboxFile, "/myfilename.pdf", ['autorename' => true]); //Uploaded File meta data if ($file) { $success = $file->getName() . " uploaded to Dropbox"; $drop->log($success); } }