ukyo

FieldtypeFontIconPicker

42 posts in this topic

Hi! Awesome Module (pun intended) ;)

This would turn out very usefull for my next project, However I get some strange behaviour when leaving an edit page without changing anything on the icon. It gives me a confirm box saying there is unsaved content (see attachment). Does anybody have the same behaviour or knows what I do wrong here? 

Thanks for any suggestion. 

Sascha

Hi ukyo, did you find anything? ;)

Great extension! Very useful for a project of mine, thank you!

I have the same problem as saschapi. I save my page. Next I want to leave, I get a browser message (firefox) telling me that I have unsaved data.

Google translation from German:

"This page asks you to confirm that you want to leave the page - data you have entered will not be saved under certain circumstances."

I updated module, on my side i don't have this issue anymore ! Updated many things and changed methods for loading icon list etc..

Next step is use other font icons !

3 people like this

Share this post


Link to post
Share on other sites

@ukyo

Thank you for updating your great module.

The update is not visible in ProcessUpgrade module so I would have to update manually. Is this intended?

My installed version is 0.0.7. Your github commit message for the module file itself says "FontAwesome updated to 4.4.0 and module updated to 0.0.7".

Shouldn't this be updated to 0.0.8 so that the ProcessUpgrade module can know that a new version is available?

Share this post


Link to post
Share on other sites

@ukyo

Thank you for updating your great module.

The update is not visible in ProcessUpgrade module so I would have to update manually. Is this intended?

My installed version is 0.0.7. Your github commit message for the module file itself says "FontAwesome updated to 4.4.0 and module updated to 0.0.7".

Shouldn't this be updated to 0.0.8 so that the ProcessUpgrade module can know that a new version is available?

Sorry i missed to update Fieldtype and Markup versions. But you need to wait for PorcesswireModuleDirectory update repos or you can make update by downloading files from github.

1 person likes this

Share this post


Link to post
Share on other sites
Sorry i missed to update Fieldtype and Markup versions. But you need to wait for PorcesswireModuleDirectory update repos or you can make update by downloading files from github.

You can always edit your module in the modules directory - simply open the edit mode and save - it will query Github and update the version number which will then make it available via the Upgrade module instantly.

1 person likes this

Share this post


Link to post
Share on other sites

Updated module on dev branch.

New features for v.0.0.9 dev branch :

  • Added hook method ___beforeRender(), you can check hook example for usage
  • Added multiple icons library use option
  • Added Ionicons Library
  • Now module using cdn for load icon fonts

Also if you need custom icon font options you can use berforeRender hook !

After some test i will update also master branch. if you want to make test, you need to download and update it manually.

3 people like this

Share this post


Link to post
Share on other sites

I can also confirm that the error is gone with 0.0.8 on PW 2.7.0.

Thank you very much

Share this post


Link to post
Share on other sites

Hi,

I thought I'd try this module, but I got the following error:

Parse Error: 
syntax error, unexpected '[' (line 157 of /public_html/dev/site/modules/FieldtypeFontIconPicker/InputfieldFontIconPicker.module) 

PW 2.7.1

------------------

Edit: sorry, read the whole thread, seems dev-branche is working...

Kind regards.

Share this post


Link to post
Share on other sites

Your PHP version not supporting new array syntax, this is why you have this error message.

I updated module to ve 0.1.0 now i think module fully supporting old php versions.

New features for v.0.1.0 :

  • Custom CSS file url support
  • Added hook method ___beforeRender(), you can check hook example for usage
  • Added multiple icons library use option
  • Added Ionicons Library
  • Now module using cdn for load icon fonts
1 person likes this

Share this post


Link to post
Share on other sites

Hi! Thx for this cool module!
I want to use this with a costum Icon-Set and need some help. 
I did put an URL in the custom css field, but my Icons dont show up in the backend.
Is there anything else I have to do to get this to work?

 

Share this post


Link to post
Share on other sites
37 minutes ago, jploch said:

Hi! Thx for this cool module!
I want to use this with a costum Icon-Set and need some help. 
I did put an URL in the custom css field, but my Icons dont show up in the backend.
Is there anything else I have to do to get this to work?

 

css section is only for styling, you need to tell module what is your list of icons names ?

You need hook beforeRender event like on example. https://github.com/trk/FieldtypeFontIconPicker

You can create a file like : https://github.com/trk/FieldtypeFontIconPicker/blob/master/Icons/Ionicons.php

and you can include this file in your hook function, after include you can return your custom icons.

Share this post


Link to post
Share on other sites

Thx for your quick reply!

I made a custom.php file in MarkupFontIconPicker/Icons/ 
Now I have this in the admin.php in templates folder:

wire()->addHook('InputfieldFontIconPicker::beforeRender', function($event) {
    if(!$event->return) return;

    // Get Input Name (For specified input hook, if you want apply all InputfieldFontIconPicker remove inputName check)
    $inputName = "";
    if(isset($event->object->attributes['name'])) $inputName = $event->object->attributes['name'];

    // Get Input Name (For specified input hook, if you want apply all InputfieldFontIconPicker remove inputName check)
    if($inputName == 'icon_picker') {

        /**
        * Load your custom icons function file
        * Your array need to be same format with Icons/FontAwesome.php or Icons/Ionicons.php
        * Also you can pass directly an array
        */
        wireIncludeFile('http://projekte.janploch.de/fabricius/site/modules/MarkupFontIconPicker/Icons/custom.php');
        

        // Set icons as $icons variable
        $icons = MyCustomIconsArray();

        // Set your options
        $return = array(
            'attributes' => array(
                'category' => '',
                'theme' => 'fip-grey',
                'empty-icon' => 1,
                'empty-icon-value' => '',
                'icons-per-page' => 20,
                'has-search' => 1
            ),
            'icons' => $icons
        );

        // Return the event
        $event->return = $return;
    }

    $event->return;
});

In the Backend only the FontAwesome and Ionicicons library is showing. 

Custom File looks like this:
 

<?php
function InputfieldFontIconPickerIcons() {
    $icons = array(
        'title' => 'Custom',
        'version' => '2.0.1',
        'css' => 'http://projekte.janploch.de/fabricius/site/templates/fonts/icomoon/style.css',
        'categorised' => false,
        'prefix' => 'icon-icon-',
        'icons' => array(
           'doctor',
           'kita'
            )
     
    );

    return $icons;
}

 

Share this post


Link to post
Share on other sites

hey there great module,

but i have kind of an issue with it:


on creating a repeaterMatrix element with an icon-picker, i get a dropdown (create.PNG)
after closing the element and reopening it (with the little arrow on the right side) i get the icon picker. (closeReopen.PNG)

it seems so random, that i can't find an explanation for it.

ever got this issue ?

 

 

closeReopen.PNG

create.PNG

Share this post


Link to post
Share on other sites

v.0.1.4 :

  • Fix issue FontIconPicker inside repeater
1 person likes this

Share this post


Link to post
Share on other sites

After @ryan broke my hearth :'( here i added uikit icon support to my font icon picker module O0

58f7c3213e6a4_EkranResmi2017-04-1922_52_16.png.758edb32a529a34c716e94ff06823436.png

v.0.1.6

  • Fix FieldtypeFontIconPicker sanitizeValue()

v.0.1.5

  • Added uikit icon select support (required AdminThemeUikit), because uikit icons not working standalone.
3 people like this

Share this post


Link to post
Share on other sites

Hello, I'm having this z-index problem within repeater any ideas how to solve this? I searched the forum but no luck.

aac52ea552db8854050ae915aafb578e.png

Outside repeater it works fine!

Thank you

R

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); } }