Jump to content

Selectize.js modules family


Macrura

Recommended Posts

On 11/16/2017 at 3:44 PM, Robin S said:

Did you push this yet? Not seeing any new commit in the repo. I think there might be some other issue with the module regarding the modules directory, because the directory is showing v0.0.3 but SelectizeImageTags.info.php is v0.0.7. Maybe the getModuleInfo() in the main module file is still being read despite being commented out?

@Robin SI think you were right about it seeing the commented out stuff - crazy! I just removed all of the commented out module config and was able to get the mods directory to up it to the latest version...

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

@Macrura Follow up from

 

I'm doing this:

$data = array(
    'title' => $page->title,
    'sum' => $page->summary
);
return $data;

 

'<div class="item">' +
'<span style="display:block;font-size:14px;font-weight:bold;">' + JSON.stringify(item) + '</span>' +
'</div>'

The result is:

{"title":{},"sum":{},"text":"Child page example 1","value":"1002","$order":1}

So my fields are empty, but there is "text" etc.

Link to comment
Share on other sites

'<div class="item">' +
'<span style="display:block;font-size:14px;font-weight:bold;">' + escape(item.title) + ' ' + escape(item.sum) + '</span>' +
'</div>'

also if you want a link you would add a line like this:

' <a class="pw-modal pw-modal-medium" href="' + escape(item.edit_href) + '">Edit <i class="fa fa-edit"></i></a></div>' +
Link to comment
Share on other sites

@Macrura

Yes, it's true. Strange, I am logged in as default language user and I want the default language value.

Still I have to do this way:

$eng = $page->wire->languages->get('default');
$data = array(
    'title' =>$page->title->getLanguageValue($eng),
    'sum' => $page->summary->getLanguageValue($eng),
);

Thank you.

Link to comment
Share on other sites

6 hours ago, theo said:

Yes, it's true. Strange, I am logged in as default language user and I want the default language value.

it may have something to do with output formatting being off; not sure, i haven't worked with language yet. But it would be good to know how to explain to get this to work for multilanguage sites.

Link to comment
Share on other sites

  • 1 month later...

Hello, @Macrura! Thanks for your wonderful modules. Used them on 2 projects with full success and satisfaction))

Now I have a need to implement something like this, but do not have the budget to buy it. I was wondering if your InputfieldSelectize module could do something alike. I can see that the limitation has to be the number of pages that the module can load without getting php and the server to through an error. Do you have any experience with managing relatively large amount of pages with this module? Like 100 to 1000? Did you do any kind of search and/or ajax loading?

  • Like 1
Link to comment
Share on other sites

1 minute ago, Macrura said:

i will attach it to the post so you can try it out.

Sounds cool, I'm also interested. I do use a licensed Visual Page Selector but in my use case the UX of VPS is just too complex for the simple task I use it for, so your module might allow for better user experience.

  • Like 1
Link to comment
Share on other sites

i haven't worked on this ajax module for several months so it really is not ready, but i do have a working version if you want to try it. It needs testing, and work;
The screenshots show some elements of the setup in case of any confusion.

5ad696b28bd41_Edit_Field__selectize_ajax_test__localhost.thumb.jpg.cc8fa2436160d61441194969bd798a5e.jpg

5ad696a571de3_Edit_Field__selectize_ajax_test__localhost.thumb.jpg.007010619836122a6acf3d82e6363102.jpg

5ad696ac5597b_Edit_Field__selectize_ajax_test__localhost.thumb.jpg.2f4b993631f05491abc035dffdfbbfde.jpg

---the field---

Edit_Page__Selectize_Ajax_Testing_•_localhost.jpg

---the files---

InputfieldSelectizeAjax.js

InputfieldSelectizeAjax.module

 

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Latest version of all modules have the fixed version compare, and the inputfield now also has the Ajax version included, but that one is still beta; it is largely a copy of the core inputfield, so shouldn't exhibit any errors, but may need work to make full use of the possibilities.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Noting here in case anyone has attempted to use any Selectize inputfield with the AdminThemeUikit, there are some known issues.

(1) the latest versions of InputfieldSelectize should work, meaning you should see selectable options now.
Prior to the latest version, the single select inputfield didn't work, and the uk-select class had to be removed from the field.

(2) Selectize Multiple works, but is slow, and almost non-functional if you try and filter options.

This is a major problem, and I have no idea how to fix it; there must be some javascript being triggered and going into a loading cycle when on Uikit, as opposed to Reno or Default; It is assumed that Selecize single would also suffer from this when filtering, but I haven't tested that yet.

If anyone know how to test or determine what the cause of Uikit not working right with Selectize, it would be greatly appreciated!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

@Macrura I just installed your module / inputfield for the very first time, on the latest PW dev, and it simply doesn't work (only tried it with images so far).

My settings are in the attachment. When I have it like that, I get the following error when I want to edit a page:

Error

Call to a member function size() on boolean
Source file
File: C:/xampp/htdocs/processwire-dev/site\modules\InputfieldSelectize\InputfieldSelectize.module(118) : eval()'d code:2

I tried it with the default theme and Uikit as well. Do you see anything wrong in the settings? The fields are all there in my template, and the code is directly copy and pasted from one of your original posts in this thread.

The full error (with all system variables etc.) is here: https://drive.google.com/file/d/1mF4ZkWNe7hE8oZULqLUZmFMddv8nCOr5/view?usp=sharing

(image too big to upload in the forum)

 

Thanks!

localhost_processwire-dev_behindthescenes_setup_field_edit_id=113.png

Link to comment
Share on other sites

You'd really need to be checking to see if there is an image, here in your code it takes the assumption there is always an image; but instead you'd want to check if there is an image prior to running size on it; that would solve your issue.

$image = '';
if(count($page->images)) $image = $page->images->first();
$thumb = '';
$dims = '';
if($image !='') {
    $thumb = $image->size(100,100)->url;
    $dims = $image->width . 'x' . $image->height;
}
$data = array(
    'title'       => $page->title,
    'thumb'       => $thumb,
    'img_dims'    => $dims,
    'edit_src'    => $page->editUrl
);
'<div class="item" style="width:100%;">' +
    (item.thumb ? '<div class="image-wrapper" style="float:left;"><img src="' + escape(item.thumb) + '" alt=""></div>' : '') +
    '<div class="info-wrapper" style="float:left; padding:5px;">' +
        '<span style="font-size:14px;font-weight:bold">' + escape(item.title) + '</span><br>' +
        '<span>Type: ' + escape(item.type) + '</span><br>' +
        (item.img_dims ? '<span>Dims: ' + escape(item.img_dims) + 'px</span><br>' : '') +
        '<a class="pw-modal pw-modal-medium" href="' + escape(item.edit_src) +
        '">Edit <span class="ui-icon ui-icon-extlink"></span></a></div>' +
'</div>'

 

Link to comment
Share on other sites

@flydev, thanks - that's like a relative positioning problem with UiKit (in the tags field); i think i added some jQuery that removes the uikit class from the inputfield, maybe I didn't commit that change yet, will check now.

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Hey @Macrura. Great module! Using code example above for the image example, seeing this on latest pw dev:455957929_ScreenShot2019-06-05at17_14_35.thumb.png.c078cc587604c1a9d2ddb13f07b5ce1d.png 

This is happening through the admin theme setting explicit height for the selectize-control div, see below:

.uk-form-small:not(textarea):not([multiple]):not([size]) {
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

.uk-form-small:not(textarea):not([multiple]) {
    height: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

 

Link to comment
Share on other sites

@Mikie, thanks for the report, fixed now in next version.

In the meantime if you want this fixes, change line 31 in InputfieldSelectize.js from what it is now to this:

$(".AdminThemeUikit .InputfieldSelectize select").removeClass('uk-select uk-form-small uk-form-large');

 

  • Like 1
Link to comment
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
×
×
  • Create New...