Module Module: RuntimeMarkup Fieldtype & Inputfield

[elabx]

@Juergen I have used this module with ProcessWire's translation capabilities with no problems!

And actually, forgot to mention that on my previous post. Once upon a time, a client wanted to control the contrast of their b&w converted image, so with the help of @horst 's PIM 2 module and RuntimeMarkup I was able to quickly setup a "thumb preview and edit" button. All buttons and text were in spanish and english.

[elabx]

Is there a reason ProcessWire would be stripping a <form> html element when embedding code through this module?

[bernhard]

2 hours ago, elabx said:

Is there a reason ProcessWire would be stripping a <form> html element when embedding code through this module?

i guess the browser strips your form because it is inside the processwire form that contains all the inputfields and a form inside another form is not valid html. the inspector shows you the code after browser and javascript manipulations. if you view the raw sourcecode you maybe see your form element.

http://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form

[bernhard]

hi @kongondo

what do you think of adding a feature that the field loads files with the same filename automatically when they exist?

for example a field "runtime_demo" would load /somefolder/runtime_demo.php and /somefolder/runtime_demo.js

i do it manually right now. for sure no problem but i think that would help to keep everything clear if you are using custom markup a lot

 

edit: is there a reason why my file is loaded 3 times when using wirerenderfile? if i only put

bd('test!');

into the file, then i see it 3 times in the tracy log. i setup a datatable with my module and loaded the code in the runtime markup field. i had my columns 3 times. i fixed it with an if-statement, but still i would be interested why the file is called 3 times...

[kongondo]

On 2017-3-27 at 10:08 AM, bernhard said:

what do you think of adding a feature that the field loads files with the same filename automatically when they exist?

Hi @bernhard,

I'll have a think. If you have the time, could you please add this as a feature request in the project page? Thanks.

[Orkun]

Hi @kongondo

Very Nice Module you have created here! I have a question, would it be possible to use this module inside the Formbuilder somehow. Is it even supported by the Formbuilder?

Greetings

Nukro

[kongondo]

12 hours ago, Nukro said:

Very Nice Module you have created here! I have a question, would it be possible to use this module inside the Formbuilder somehow. Is it even supported by the Formbuilder?

Glad the module is of use to you. Unfortunately, I have never had the need to use Formbuilder. Maybe you could try and let us know? Thanks.

[bernhard]

On 27.3.2017 at 11:08 AM, bernhard said:

hi @kongondo

what do you think of adding a feature that the field loads files with the same filename automatically when they exist?

for example a field "runtime_demo" would load /somefolder/runtime_demo.php and /somefolder/runtime_demo.js

i do it manually right now. for sure no problem but i think that would help to keep everything clear if you are using custom markup a lot

would you mind adding my suggested features to your module?

sorry for not making a PR, but you can just replace your render method with this one:

    /**
     * Render the entire markup returned from FieldtypeRuntimeMarkup
     *
     */
    public function ___render() {

        //so that $page and $pages are locally scoped to the eval
        $process = $this->wire('process'); 
        if($process && $process->className() == 'ProcessPageEdit') $page = $process->getPage();

        $pages = $this->wire('pages');

        // render files that are related to this field
        $root = rtrim($this->wire->config->paths->root,'/');
        $file = '/site/modules/FieldtypeRuntimeMarkup/fields/' . $this->name;
        if(is_file($root.$file.'.php')) {
            // we found a file in the modules /fields folder, so render it
            $str = wireRenderFile($root.$file);
        }
        else {
            // no early reaturn because we load assets later
            if(!$this->runtimeFields) $str = '';
            else $str = eval($this->runtimeFields);
        }

        // load assets related to this field
        if(is_file($root.$file.'.js')) $this->wire->config->scripts->add($file.'.js');
        if(is_file($root.$file.'.css')) $this->wire->config->styles->add($file.'.css');

        //since we are dealing with custom PHP code but also want to make sure that only markup is returned
        //if eval() returns anything other than a string or an integer, we throw an error (e.g. if an object or array is returned)
        if (is_string($str) || is_int($str)) return $str;
        else return $this->error($this->_('Only strings and integers should be returned by your custom code! Check if your code is valid.'));
    }

this will render all files inside the folder

/site/modules/FieldtypeRuntimeMarkup/
- your_field_name.php | .css | .js

[Orkun]

On 3.7.2017 at 10:44 PM, kongondo said:

Glad the module is of use to you. Unfortunately, I have never had the need to use Formbuilder. Maybe you could try and let us know? Thanks.

I had tried and it looks like it's not supported. There is no Detail Tab / Textarea or something where you can add the PHP Code. I came up with a workaround using InputfieldMarkup and Hanna Code Tags. But still, thank you for your Support @kongondo.

Greetings Nukro

[kongondo]

On 2017-7-6 at 8:05 AM, Nukro said:

I had tried and it looks like it's not supported.

Thanks for reporting back...

[bernhard]

hi @kongondo 

did you think about my suggested new render method?

another thing that would be good imho is to mention in the docs / in the first posting that you can do this

return ProcessWire\wireRenderFile('fields/myfieldsphpfile.php', ['page' => $page]);

To have the currently edited page available in your file. It's very basic, but might help some beginners.

I would also suggest to update my render-method passing the $page and $pages variables to the renderfile:

// change this
$str = wireRenderFile($root.$file);

// to that
$str = wireRenderFile($root.$file, [
  'page' => $page,
  'pages' => $pages,
]);

what do you think?

[kongondo]

Hi @bernhard. Sorry been caught up in other stuff. I will implement your suggestion, albeit slightly differently.  Thanks for the docs suggestions as well.

[kongondo]

Update: Runtime Markup Version 0.0.3.

Changelog

1. Added support to render PHP, JavaScript and CSS files Thanks to @bernhard for the ideas.

Please note:

• Please read the notes that accompany the field settings.
• For PHP, you can choose to render files (recommended) vs paste code.
• JavaScript and CSS work with either PHP rendering method (above). These are optional to use.
• For each of the 3 file types above, if you only have one file and this is named identical to your field, you can select an option to have those rendered/added. For example, if you have a RuntimeMarkup field called 'my_field', you can have a 'my_field.php', 'my_field.js' and 'my_field.css' automatically rendered/added.
• However, if you want to render multiple files and/or these are named differently, select the option that indicates the files have different names. In that case, enter comma-separated file names. For example, for CSS: my_css, styles/my-other-css-file. Using this option, you can include external JavaScript libraries for use on your page if you fancied it.
• The above can be mixed and matched, e.g. PHP file could have name identical to field but JavaScript are multiple files with different names and CSS multiple file names, one of which could share a name with your field.
• All files must descend from either of the root paths /site/templates/ or /site/modules/. It is OK for files to be in sub-folders, as long as those descend from one of these root paths. There is a setting to indicate root path. Only one root path can be used at a time, i.e. it applies to all file types.
• .php, .js and .css extensions are assumed and do not need to be specified with the file names. PHP files such as .inc will need to be input as such, e.g. my_code.inc,includes/my-more-code.tpl.
• Errors will be shown if files not found.
• In your rendered PHP file, you have access to $page and $pages. This means you do not need to get the page being edited first to use it as the current page.
• For frontend, only pasted PHP code option is supported. My take is that this module is primarily used for the backend. Use of the render files option is geared for creating complex and/or more flexible backend apps as opposed to frontend usage. I have no intention of changing this behaviour.

Currently available on dev branch only. Please test and let me know (with Listers, etc as well, thanks).

Screenshots

Backend Settings

Backend Output

Edited July 23, 2017 by kongondo
more info

[bernhard]

hi @kongondo 

I just tried the dev version and have 2 questions:

• what is the reason for specifying the root path as /templates or /modules ? Why not a folder inside the RuntimeMarkup's module folder? like /FieldtypeRuntimeMarkup/fields ? Ok, i can specify an alternate filename, but imho that is an unnecessary step and it would be preferable to have this at least as an option. I try to keep the templates' and modules' root folders as clean as possible... edit: of course that would not be a good idea because module updates would wipe all code files in this folder!
• Second thing that i find more annoying than helping is the js and css file include warnings / settings. Why do i have to select if there is a js/css file present? Why does it not include a js/css file automatically if one is present. Imagine you are working on a runtime field and want to do some minor css changes. you are in your IDE and you would just have to create a new css file with the name of your field. But as it is now, i would also have to change the field's settings. Thats some more extra clicks that i don't understand why they are necessary if my proposed render method did not have this drawbacks.

maybe there is a reason for that and i would be happy to hear it

thanks for bringing my ideas into your module though!

[kongondo]

7 hours ago, bernhard said:

what is the reason for specifying the root path as /templates or /modules ?

Added security...similar to wireRenderFile().

7 hours ago, bernhard said:

Why not a folder inside the RuntimeMarkup's module folder? like /FieldtypeRuntimeMarkup/fields ? Ok, i can specify an alternate filename

Yes you can specify a filename . FieldtypeRuntimeMarkup/fields/my-file. 

7 hours ago, bernhard said:

it would be preferable to have this at least as an option.

OK. I'll add that as a third option (or as the first option).

 

7 hours ago, bernhard said:

I try to keep the templates' and modules' root folders as clean as possible

Sure. But some people may prefer to create include folders in /site/templates/ and /site/modules/ that are shared across the site. Adding a third option above should cater for both worlds.

7 hours ago, bernhard said:

Why do i have to select if there is a js/css file present?

We can't assume everyone will want to include a JS/CSS file .

 

7 hours ago, bernhard said:

Why does it not include a js/css file automatically if one is present.

I don't like automating things TBH. I prefer for users to expressly declare a choice.

 

7 hours ago, bernhard said:

Imagine you are working on a runtime field and want to do some minor css changes. you are in your IDE and you would just have to create a new css file with the name of your field.

OK. Imagine you are working on a runtime field and want to do some 'minor' JS changes. You are in your IDE and you would just have to create a new js file with the name of your field. But then you have to leave or you forgot to fully test your changes with other Inputfields present on the page and you lock up the whole page edit (yes, that's what JS will do...) .  Or...you or a colleague renamed your field and forgot to rename your files...

 

7 hours ago, bernhard said:

But as it is now, i would also have to change the field's settings. Thats some more extra clicks that i don't understand why they are necessary if my proposed render method did not have this drawbacks.

Please see above point. IMO, this is a minor inconvenience compared to the damage automation could cause. OK, maybe I exaggerate but I am not convinced automation is the best approach in this particular case. The field settings are just a click away. Yes, I could include an option to suppress errors but that's no good either. Errors need to be seen so that they can be rectified. 

 

7 hours ago, bernhard said:

thanks for bringing my ideas into your module though!

Edited July 24, 2017 by kongondo

[bernhard]

thanks for your reply!

I think your answers are totally out of context some times. For example specifying a root path is not added security compared to my suggestion of having a fields folder inside the runtime markup module. but this point will be fixed when we have another option, so thank you for taking that into account

Regarding the automatic include of js+css files: I really disagree about that. Your point about breaking the edit screen has nothing to do with the way the file is included! I would also break the edit screen when i include a broken JS file that is specified in the field's settings. IMHO braking up all into 3 config fields adds the possibility of errors because you can easily have typos etc.

if you have your root path for the field (wherever it is, i understand your point about modules and templates) and you have a my_field.php file there. its much more secure and error-unlikely to just put a new file in the same folder (having it grouped in the filetree because of the same filename beginnings) and have that load automatically when present. i don't think that the error message is necessary or helpful for the USER of the field, because if something does not work as expected, you can easily do an alert('working') or the like. I think those error messages only help you as a DEV of the module for finding bugs while writing all the include paths etc.

OK... given that you set your field to include a file in a custom directory it may help to get an error (for example to find typos)... i just didn't think of that too much because i only had one folder and that was really fool-proof to place a file there.

considering the fact that this could be helpful sometimes and that imho it is NOT more unsecure to include the js+css automatically if present i would really like to see that as a third option too  

thank you for your time - please don't be mad about me picking on so little things... that's just the proof that i'm using your module a lot those days

[kongondo]

4 minutes ago, bernhard said:

For example specifying a root path is not added security compared to my suggestion of having a fields folder inside the runtime markup module.

Yes, you are right. Regarding security, I was responding to the issue about root paths in general, but now I realise what you were really after is having the field's folder as a default. Anyway, this is resolved with having the third option I mentioned.

 

5 minutes ago, bernhard said:

i don't think that the error message is necessary or helpful for the USER of the field, because if something does not work as expected, you can easily do an alert('working') or the like. I think those error messages only help you as a DEV of the module for finding bugs while writing all the include paths etc.

Yes, the error messages are for the dev. Maybe I misunderstand; did you have a suggestion regarding error messages?

 

9 minutes ago, bernhard said:

considering the fact that this could be helpful sometimes and that imho it is NOT more unsecure to include the js+css automatically if present i would really like to see that as a third option too  

You already have this option . OK, two options, one each for JS and CSS. So, rather than having one option "JavaScript and CSS included automatically", we have split that into two for JS and CSS respectively. The second options under JS and CSS "JavaScript/CSS file has identical name to this field".  That will do what you are after, but with the errors of course, if there is no file present. I think that's a good reminder about missing files. Maybe we can add an option to suppress errors about missing files (..a leave me alone I know what am doing option  .). That and the identical file name options should get you your wish (of coming back later to add JS/CSS). What do you think?

 

15 minutes ago, bernhard said:

please don't be mad about me picking on so little things.

On the contrary! I value your honest and helpful feedback! .

 

16 minutes ago, bernhard said:

that's just the proof that i'm using your module a lot those days

Exactly .

[kongondo]

<random-silliness>

Tools: RM; Countable JS and circleChart

Approach: Include one main.php , JS and CSS using RM render file option. main.php conditionally requires_once 'some-php-file.php' depending on the page being edited.

</random-silliness>

[bernhard]

looks like somebody starts liking the file option

On 24.7.2017 at 10:18 PM, kongondo said:

Maybe we can add an option to suppress errors about missing files (..a leave me alone I know what am doing option  .). That and the identical file name options should get you your wish (of coming back later to add JS/CSS). What do you think?

yes, that's what i want  i try to explain what i was talking about in the last 2 postings:

imagine you are working on a project with some runtime markup fields... it starts with easy markup, some html. you create your field, set the option to render a field in a specified folder and you're fine. lets say we store it in RM/fields/myfield.php; so far so good.

imagine you continue working on your project... your project grows and your field needs some more styling. we need some easy CSS rules for that field. so what to do?

option now:

• leave your IDE
• open just another browser tab
• go to the backend
• search the field
• go to the settings
• put in the path of the CSS
• create your css file (RM/fields/myfield.css)
• put in your rules

my way how i did it with my render method for several fields:

• create your css file (we have a myfield.php, so create a myfield.css in the same folder)
• put in your rules

that's A LOT easier and fool-proof imho.

the problem with your "we have that option of including files with the same name already" is that it throws an error when the file is not present. imho that harms more than it helps, because the problem is that you can NOT choose this option while setting up the field at the moment, because it would always show the error as long as you don't have (don't need) a css/js file.

i would really really vote for one global option:

Quote

load PHP + CSS + JS files with the same name as the field that are inside the folder /RM/fields/ automatically

this setting could hide all other inputfields, you would not have to change any of your options and have a solution for everybody.

hope that makes my point more clear now

[kongondo]

Update: Runtime Markup Version 0.0.4.

Changelog

1. Enhancements to render/add file feature
2. Added option to suppress errors if JavaScript and CSS files not found (respectively)
3. Add /site/modules/this-modules-folder/ as a third option in Files Root Path

Currently available on dev branch only.

@bernhard. Using the combinations of JS/CSS has identical name to this field + their respective 'Suppress Missing JS/CSS Files Errors' should cover the need you've described above (i.e., set up your field once and load PHP + CSS + JS files with the same name as the field that are inside the folder /RM/*). That's as automatic as this is going to get .

[bernhard]

Hi kongondo,

I'm sorry that I have to say that, but I still don't like the solution. It took me some time to understand all the settings, read the instructions carefully, paste in some file paths, ended up with some errors (I pasted the old paths with different root from the autofill for this field)...

I ended up putting this replace hook in my site/ready.php - i guess this will save me, and you, and maybe some others some time...

/**
 * replacement for the original runtimemarkup render method
 */
$wire->addHookBefore('InputfieldRuntimeMarkup::render', function($event) {
  $event->replace = true;
  $field = $event->object;
  
  //so that $page and $pages are locally scoped to the eval
  $process = $this->wire('process'); 
  if($process && $process->className() == 'ProcessPageEdit') $page = $process->getPage();

  $pages = $this->wire('pages');

  // render files that are related to this field
  $root = rtrim($this->wire->config->paths->root,'/');
  $path = '/site/modules/FieldtypeRuntimeMarkup/fields/';
  $file = $root.$path.$field->name;
  if(is_file($file.'.php')) {
    // we found a file in the modules /fields folder, so render it
    $str = wireRenderFile($file, [
      'page' => $page,
      'pages' => $pages,
    ]);
  }
  else {
    // no early reaturn because we load assets later
    if(!$this->runtimeFields) $str = '';
    else $str = eval($this->runtimeFields);
  }

  // load assets related to this field
  if(is_file($file.'.js')) $this->wire->config->scripts->add($path . $field->name . '.js');
  if(is_file($file.'.css')) $this->wire->config->styles->add($path . $field->name . '.css');

  //since we are dealing with custom PHP code but also want to make sure that only markup is returned
  //if eval() returns anything other than a string or an integer, we throw an error (e.g. if an object or array is returned)
  $event->return = "Place your files here: $path<a>{$field->name}.php|css|js</a>";
  if (is_string($str) || is_int($str)) $event->return = $str;
  else $this->error($this->_('Only strings and integers should be returned by your custom code! Check if your code is valid.'));
});

 

With that method the setup is as simple as it can get. no clicking around, no pasting in wrong filenames, no error messages if there is no file...

• create a new field
• place it in your template
• place your files to /fields/myfield.php|css|js

----

another question that cost me quite some time already

do you have any idea why this simple code does not work?

if($input->post->submit_save) echo 'saved!';
else echo 'not saved';

using tracy i see that $input->post has no data while $input->get has the url params...

also your example from here does not work any more: 

help would be highly appreciated

[kongondo]

2 hours ago, bernhard said:

I'm sorry that I have to say that, but I still don't like the solution.

Maybe our wires are getting crossed somewhere . I thought the current solution meets both your and other people's/scenarios' needs.

2 hours ago, bernhard said:

/fields/myfield.php|css|js

I still don't understand why users should be forced to save files in one location (/fields/). 

EDIT: In addition, what if I have several RM fields (either in the same or different templates) and wanted those fields to share some base JS and CSS? That's not possible if we force users to name their JS and CSS after their fields.

Maybe I am missing something. Maybe if I saw a graphic/mock-up of how the RM field settings (Details Tab) would look like in your suggested solution, I would get it . For now, I will let the changes I've made stay as I believe they cater for different scenarios.

2 hours ago, bernhard said:

if($input->post->submit_save) echo 'saved!'; else echo 'not saved';

If you mean within RM, the reason is that $input is not scoped locally. Have a look at this post downward.

If that's not it, please let me know. Thanks.

Edit: Silly me. No, POST should not work. By the time the page is reloaded (a redirect), the POST is gone.  GET, on the other hand, is 'always' ther. For POST, you can JS as a workaround (to listen to 'submit_save').

Edited July 28, 2017 by kongondo
Clarification

[bernhard]

no, thats not the reason. i don't know why, but $input seems to work! i was also expecting it NOT to work without $this, but it works for $input->get...

<?php namespace ProcessWire;
$out = '';

bd($input->get);
bd($this->input->get);
bd($this->wire->input->get);
bd($input->post);
bd($this->input->post);
bd($this->wire->input->post);
return;

the one on the top is the $post and the one on the bottom the $get.

I tried it also on a different install. Same behaviour. Really strange... no idea whats going on

[kongondo]

Sorry, I'm half asleep .

Nope, POST, should not work (a redirect has occurred, the POST is gone). A GET works because it is always there. As a workaround, JS can listen to 'submit_save.' 

Edited July 28, 2017 by kongondo

[bernhard]

so what changed since your example here? and how could i detect clicks on buttons?