Jump to content
kongondo

Module: RuntimeMarkup Fieldtype & Inputfield

Recommended Posts

@kongondo - thanks - yes, i could also just delete and remake the field, since i can copy the code, and there is no risk of losing entered data...

it would be good to fix though, as surely someone along the way is going to try and rename one of these..

Share this post


Link to post
Share on other sites

 In relation to lister -

So i have this module generating a dynamic link (the link is based off the combination of a page select and some attributes of the page being edited); to get it to work in lister, e.g. where it doesn't end up getting entity encoded, i added this to ready.php:

wire()->addHookAfter('FieldtypeRuntimeMarkup::markupValue', function($event) {
  $value = $event->arguments('value');
  $event->return = $value;
});

should the module assume that the output will be markup and therefore also provide a markupValue by default, or leave this up to the user to add as a hook?

  • Like 1

Share this post


Link to post
Share on other sites

 In relation to lister -

....should the module assume that the output will be markup and therefore also provide a markupValue by default, or leave this up to the user to add as a hook?

Thanks. Good idea. Will provide the method.

Share this post


Link to post
Share on other sites

@kongondo - thanks - yes, i could also just delete and remake the field, since i can copy the code, and there is no risk of losing entered data...

it would be good to fix though, as surely someone along the way is going to try and rename one of these..

@Macrura,

Reported the issue and Ryan fixed it in this commit. I've tested it and it works.

Share this post


Link to post
Share on other sites

Update: version 0.0.2

As requested by @Macrura, added a markupValue() method to correctly output the field's markup output in listers.

  • Like 3

Share this post


Link to post
Share on other sites

awesome, many thanks for this!

will be upgrading mods tomorrow...

Share this post


Link to post
Share on other sites

How can I have the button open a url in a modal? I can't quite get it to work. The modal does appear but then the browser goes to the url.

$url = 'http://example.com';
$out = '<a href="'.$url.'" class="pw-modal pw-modal-large" data-buttons="#non_rte_dialog_buttons button" data-autoclose="1" data-close="#non_rte_cancel">';
$out .= '<button type="button" name="button" class="ui-button ui-widget ui-corner-all ui-state-default">';
$out .= '<span class="ui-button-text">Image Archive</span></button>';
$out .= '</a>';
return "<div class='pfabLink'>".$out."</div>";

Thanks

Share this post


Link to post
Share on other sites

It should work (@adrian) but for some reason the modal quickly closes, so something on PW side doing that. Maybe @adrian used fancybox or something else and you are calling modal.js? I have no idea really.

@adrian, thoughts? Thanks.

Edited by kongondo

Share this post


Link to post
Share on other sites

The page has image field's thumbnail images which use modal and have those "pw-modal" classes and work just fine, so any necessary js and css are in place already. I'd seen that Adrian comment so I know it can be done.

I'm new to jqueryUI so I don't understand the handling of the click event and at what point it does something (return false?) to stop the browser from processing the link as a link and going off to another page. There must be some condition which isn't being met. Could it be a matter of what the A tag is wrapped in?

Answer: Don't use an A tag! Seems simple enough. Just do it all with the button, putting the url in a "data-href" attribute on the button. It's working now.

Drifting off topic but any tips on how best to generate the boilerplate page markup for this iframe so that admin theme styling for an AdminDataTable works. I'm about halfway there.

  • Like 1

Share this post


Link to post
Share on other sites

Hey guys - I actually removed that popup link I was using - not because it didn't work great with RuntimeMarkup, but for other reasons - anyway, I don't have the code I used for it anymore.

But, this works for me:

$url = 'http://www.example.com';
$out = '<button data-href="'.$url.'" type="button" name="button" class="pw-modal pw-modal-large ui-button ui-widget ui-corner-all ui-state-default">';
$out .= '<span class="ui-button-text">Image Archive</span></button>';
return "<div class='pfabLink'>".$out."</div>";
  • Like 1

Share this post


Link to post
Share on other sites

Yup, working for me too. The only wierdness left has to do with button color. Using the default admin theme it's green and turns sort of purple after being clicked to launch the modal. It stays that color after the modal is closed and that seems wrong.

Share this post


Link to post
Share on other sites

Yeah, it needs to be refreshed (the button, i.e.)...

You can use JS for that. Which reminds me, This module comes with an empty InputfieldRuntimeMarkup.js...in which I foolishly state: 

/*Use this file for scripts (js) for your renderend Markup in the page edit in admin, i.e. in the rendered InputfieldRuntimeMarkup*/

...as if those wouldn't be overwritten on the next upgrade, grrr!

Anyway, I will either let the module check for and if found include an 'InputfieldRuntimeMarkupCustom.js', which won't get overwritten on upgrades, or simply, I will ship the module  without a  'InputfieldRuntimeMarkup.js' (and without a  'InputfieldRuntimeMarkup.css' as well). In that case, PW will autoload those files if found and they'll never get overwritten.

So, to your solution. Add the following to your 'InputfieldRuntimeMarkup.js': @note: I added an id="archives" to your button

$(document).ready(function(){
  $('button#archives').on('click', function(){
  //refresh button (remove 'ui-state-active') (only needed for default theme)
  $(this).button().button('refresh');
 });
})

The code could probably be optimized to only run if default admin theme is in use. Maybe could even be used inline but this is cleaner. Maybe there's better solutions as well. The blue (on Chrome) outline around the button can be removed using CSS.

Edited by kongondo
  • Like 1

Share this post


Link to post
Share on other sites

Nice! I didn't know about button('refresh'). That works perfectly. Thanks so much for the module too.

I'll be posting something about this "archive" pretty soon in Module/Plugin Development.

Share this post


Link to post
Share on other sites

ok, adding buttons is easy and helpful. can someone help me out when i want to add input fields as well?

usecase is a simple form with one inputfield and one button to copy a page and save it with the name specified in the textfield.

i was able to display the field + button but i was not able to get the data of the field. my $input->post was empty all the time. i tried it like this:

return wireRenderFile('markup/_createcustomcopy');
<?php
$field = $modules->get("InputfieldText");
$field->label = "Name";
$field->attr('id+name','name');
$field->required = 1;
echo $field->render(); // append the field to the form

// oh a submit button!
$submit = $modules->get("InputfieldSubmit");
$submit->attr("value","create copy");
$submit->attr("id+name","createcustomcopy");
echo $submit->render();

echo print_r($input->post, true);

post-2137-0-23494800-1456317817_thumb.pn

i hope someone can point me in the right direction :)

Share this post


Link to post
Share on other sites

I don't share the warm fuzzy feelings I get when I use people's modules nearly often enough, so I just left a comment on the module directory page.

The short version is that it's saving me from having to create custom modules for a lot of places where I'd want to output some custom, processed output when editing a page and it is streamlining some of the steps I need to perform when approving entries in the dev directory, so thanks for this!

  • Like 7

Share this post


Link to post
Share on other sites

@BernhardB,

You should be getting a couple of errors with that code (if you have debug on). In that context, PW doesn't know what $modules and $input are (see similar issues on page 1 of this thread). You need to use $this-> or wire('modules'). Secondly, the module will only return a string or integer. You need to save string/integer output in a variable (e.g. $out) and return $out;

Share this post


Link to post
Share on other sites

hi kongondo,

sorry, it seems i was not clear enough.

in the markup field settings i have

return wireRenderFile(...);

and in this file i have code like this

<?php
// some code here
$out .= 'xxx';
$out .= 'yyy';

echo $out;

so i think at least this should not be a problem as i am only returning a string of html. i was also confused why $modules was available in the file from wireRenderFile() but i guess it has something to do with that method. but to be honest i did not investigate that further.

Share this post


Link to post
Share on other sites

Aah, I see. That's a cool usage of the module you got there! ^-^. Using wireRenderFile() keeps the module's input clean, circumvents limit of text allowed in that field plus makes the module much more versatile. One can do all sorts of flexible includes from within the file rendered by wireRenderFile(), depending on the context. :)

I have tested and it works fine here creating a new page (see below). Cloning a page on the other hand leads to a cyclical error (or memory issue) and crashes Apache. 

In details tab of this module I have:

return wireRenderFile('test');

In /site/templates/test.php

$out ='';

$f = $modules->get("InputfieldText");
$f->label = "Copy Title";// @note: doesn't seem to work
$f->attr('id+name','name');
$f->required = 1;// @note: -ditto-
$out= $f->render(); // append the field to the form

// oh a submit button!
$f = $modules->get("InputfieldSubmit");
$f->attr("value","Create Copy");
$f->attr("id+name","createcustomcopy");
$out .= $f->render();

$currentPage = '';
$process = wire('process'); 
if($process && $process->className() == 'ProcessPageEdit') $currentPage = $process->getPage();
if(!$currentPage) return;

echo $out;

// let's create a copy
$copy = $input->post->createcustomcopy;
$title = $sanitizer->text($input->post->name);

if($copy) {

   if(!$title) {
     $this->error('You need to specify a title for the copied page!');
     return;
   }

   $p = new Page();
   $p->template = $templates->get($currentPage->template);
   $p->parent = $currentPage->parent;

   $p->title = $title;
   //sanitize and convert to a URL friendly page name
   $p->name = $sanitizer->pageName($p->title);

   //check if name already taken within same parent. if the same name exist, don't create a new copy
   //  @note; without this line pages were being created in duplicates
   if($p->parent->child("name={$p->name}, include=all")->id) return;
   else { 
       $p->save();
       $this->message('Created a copy of the page with the title: ' . $title);
   }
}
Edited by kongondo
  • Like 2

Share this post


Link to post
Share on other sites

Following up on my post above...Say you wanted to embed a YouTube video...for whatever reason...in the page edit context..

<iframe width="420" height="315"
src="https://www.youtube.com/embed/Bohhf3aK8gU" frameborder="0" allowfullscreen>
</iframe>

That's it!

  • Like 1

Share this post


Link to post
Share on other sites

that is awesome!!!! exactly what i wanted, thank you very much :)

Aah, I see. That's a cool usage of the module you got there! ^-^. Using wireRenderFile() keeps the module's input clean, circumvents limit of text allowed in that field plus makes the module much more versatile. One can do all sorts of flexible includes from within the file rendered by wireRenderFile(), depending on the context. :)

yes, i'm a huge fan of wirerenderfile :)

what do you think of having your module render a file with the name of the field by default?

field "examplefield" would render /site/assets/FieldtypeRuntimeMarkup/examplefield.php
field "examplefield2" would render /site/assets/FieldtypeRuntimeMarkup/examplefield2.php

Share this post


Link to post
Share on other sites

So, I tried to use RuntimeMarkup in my RepeaterMatrix and $page refers to the page that the repeater is on. I have placed the RuntimeMarkup field inside repeater entries and therefore, I can't see a way to get a reference to the Page field in the "current" repeater entry. Basically, if I can get a reference to the Page field each time it appears in the repeater, I can simply reference the field value is want from (Template2/Page2) straight from the Page field.

Thanks.

Share this post


Link to post
Share on other sites

I haven't tried this in a repeater...yet. so would have to do that before I can give an answer...unless someone beats me to it?

Share this post


Link to post
Share on other sites

@Gazley,

I don't think this is possible out of the box. Have a read here at a similar question:

https://processwire.com/talk/topic/8962-selectable-pages-defined-dynamically-for-page-field-in-repeater/

What you want is a way to get the current repeater item, basically the nth repeater. I haven't seen any way to do that without looping through all repeaters  - which wont be very efficient.

If your page field is a single page field, using a select, maybe we could use jQuery Ajax to dynamically send the id of the selected page to some template file which would then grab whatever it is you want from template 2, return that as JSON and dynamically add the markup next to the page field. I'm not sure, in your case, whether it's worth the effort going down that route.

Edited by kongondo

Share this post


Link to post
Share on other sites

Btw, above answer refers to normal repeaters. I haven't used repeater matrix before. I am wondering whether, unlike normal repeaters, will be able to give you a 'current repeater item' variable. Anybody knows? Haven't got time to test atm.

Share this post


Link to post
Share on other sites

working the first time with repeater matrix today and it is totally awesome!!

repeater items are just normal pages and you have all you need there:

current repeater-item available under $page variable;

field in your repeater-item-type = $page->yourfield;

current page, where your repeater matrix lives on = $page->getForPage();

don't know how that plays together with your module - i'm quite busy right now :)

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 Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Process refunds and send customer notifications from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory (alpha version only available via GitHub) SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
    • By d'Hinnisdaël
      Happy new year, everybody 🥬
      I've been sitting on this Dashboard module I made for a client and finally came around to cleaning it up and releasing it to the wider public. This is how it looks.
      ProcessWire Dashboard

      If anyone is interested in trying this out, please go ahead! I'd love to get some feedback on it. If this proves useful and survives some real-world testing, I'll add this to the module directory.
      Download
      You can find the latest release on Github.
      Documentation
      Check out the documentation to get started. This is where you'll find information about included panel types and configuration options.
      Custom Panels
      My goal was to make it really simple to create custom panels. The easiest way to do that is to use the panel type template and have it render a file in your templates folder. This might be enough for 80% of all use cases. For anything more complex (FormBuilder submissions? Comments? Live chat?), you can add new panel types by creating modules that extend the DashboardPanel base class. Check out the documentation on custom panels or take a look at the HelloWorld panel to get started. I'm happy to merge any user-created modules into the main repo if they might be useful to more than a few people.
       Disclaimer
      This is a pre-release version. Please treat it as such — don't install it on production sites. Just making sure 🍇
      Roadmap
      These are the things I'm looking to implement myself at some point. The wishlist is a lot longer, but those are the 80/20 items that I probably won't regret spending time on.
      Improve documentation & add examples ⚙️ Panel types Google Analytics ⚙️ Add new page  🔥 Drafts 🔥 At a glance / Page counter 404s  Layout options Render multiple tabs per panel panel groups with heading and spacing between ✅ panel wrappers as grid item (e.g. stacked notices) ✅ Admin themes support AdminThemeReno and AdminThemeDefault ✅ Shortcuts panel add a table layout with icon, title & summary ✅ Chart panel add default styles for common chart types ✅ load chart data from JS file (currently passed as PHP array) Collection panel support image columns ✅ add buttons: view all & add new ✅
    • By Robin S
      This module is inspired by and similar to the Template Stubs module. The author of that module has not been active in the PW community for several years now and parts of the code for that module didn't make sense to me, so I decided to create my own module. Auto Template Stubs has only been tested with PhpStorm because that is the IDE that I use.
      Auto Template Stubs
      Automatically creates stub files for templates when fields or fieldgroups are saved.
      Stub files are useful if you are using an IDE (e.g. PhpStorm) that provides code assistance - the stub files let the IDE know what fields exist in each template and what data type each field returns. Depending on your IDE's features you get benefits such as code completion for field names as you type, type inference, inspection, documentation, etc.
      Installation
      Install the Auto Template Stubs module.
      Configuration
      You can change the class name prefix setting in the module config if you like. It's good to use a class name prefix because it reduces the chance that the class name will clash with an existing class name.
      The directory path used to store the stub files is configurable.
      There is a checkbox to manually trigger the regeneration of all stub files if needed.
      Usage
      Add a line near the top of each of your template files to tell your IDE what stub class name to associate with the $page variable within the template file. For example, with the default class name prefix you would add the following line at the top of the home.php template file:
      /** @var tpl_home $page */ Now enjoy code completion, etc, in your IDE.

      Adding data types for non-core Fieldtype modules
      The module includes the data types returned by all the core Fieldtype modules. If you want to add data types returned by one or more non-core Fieldtype modules then you can hook the AutoTemplateStubs::getReturnTypes() method. For example, in /site/ready.php:
      // Add data types for some non-core Fieldtype modules $wire->addHookAfter('AutoTemplateStubs::getReturnTypes', function(HookEvent $event) { $extra_types = [ 'FieldtypeDecimal' => 'string', 'FieldtypeLeafletMapMarker' => 'LeafletMapMarker', 'FieldtypeRepeaterMatrix' => 'RepeaterMatrixPageArray', 'FieldtypeTable' => 'TableRows', ]; $event->return = $event->return + $extra_types; }); Credits
      Inspired by and much credit to the Template Stubs module by mindplay.dk.
       
      https://github.com/Toutouwai/AutoTemplateStubs
      https://modules.processwire.com/modules/auto-template-stubs/
    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.60
      Composer: rockett/jumplinks
      ⚠️ NOTICE: 1.5.60 is an important security patch-release for an XSS vulnerability discovered by @phlp. It's HIGHLY RECOMMENDED that all Jumplinks users update to the latest version as soon as possible.
      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 Robin S
      Add Image URLs
      Allows images/files to be added to Image/File fields by pasting URLs.

      Usage
      Install the Add Image URLs module.
      A "Paste URLs" button will be added to all image and file fields. Use the button to show a textarea where URLs may be pasted, one per line. Images/files are added when the page is saved.
       
      https://github.com/Toutouwai/AddImageUrls
      https://modules.processwire.com/modules/add-image-urls/
×
×
  • Create New...