Using a variable for attributes in a tag helper

[smonff]

Hello,

I have this kind of ep markup. I do an extensive use of imbrications.

%= t table => ( bgcolor => '#FFFFFF',  width => '100%', border => '0', cellpadding => '0', cellspacing => '0' ) => begin
  # All kind of table atrocities, you can imagine, I don't add more...
% end

Is there any way I can do something similar to:

%= t table => ( $style ) => begin
  ...
% end

I tried to put $style in the stash in the form of a hashref, or to create a template block

<% my $style = begin %>
  % return { bgcolor => '#FFFFFF',  width => '100%', border => '0', cellpadding => '0', cellspacing => '0' };
<% end %>

It always return something like

<table HASH(0x55fbf983ea10)="CODE(0x55fbfa748f28)"></table>

No errors though... I would like it on the template side, because easier to edit for a colleague than Perl code, but if not possible, I would take any other suggestion.

Thanks.

[smonff]

One solution to my own question could be to pass $style as an hasref in the stash and access it like that:

%= t table => $style->%* => begin
  ...
% end

Also, after reading the docs, I found out that a helper would surely be the way to go...

[smonff]

Created a helper that I load in the app:

use Mojo::Base 'Mojolicious::Plugin', -signatures;

sub register ( $self, $app, $conf ) {
  $app->helper(
    style => sub ( $self, $key ) {
      return $app->config->{ css }->{ $key }->%*;
    });
}

I have a css.conf file (I know, this is awful)

{
  css => {
    table => {
      bgcolor => '#FFFFFF',
      width => '100%',
      border => '0',
      cellpadding => '0',
      cellspacing => '0'
    },
    ...,
 }
}

Then managed to consume it this way:

%= t table => ( style 'table' ) => begin
  %= t tbody => begin
    %= t tr => begin
      %= t td => begin
        Mojo :D
      % end
    % end
  % end
% end

It produce the nice:

<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td>
        <span>Mojo :D</span>
      </td>
    </tr>
  </tbody>
</table>

Like it!

[smonff]

The idea of using the configuration system for this was awful because you need to restart the app each time you change something manually. I just replaced this by a normal module that I use in the helper.

use Mojo::Base -base, -signatures;

use constant {
  WHITE      => '#FFFFFF',
  MAIN_WIDTH => 600,
  CELLZERO   => {
    cellpadding => '0',
    cellspacing => '0',
  },
};

sub css {
  return {
    body => {
      leftmargin => '0',
      topmargin => '0',
      marginwidth => '0',
      marginheight => '0',
    },
    'top-table' => {
      bgcolor => WHITE,
      width => '100%',
      border => '0',
      CELLZERO->%*,    
    },
    'content-table' => {
      align => ' center',
      gbcolor => WHITE,
      width => MAIN_WIDTH,
      CELLZERO->%*,
    },
  }
}

1;

The helper now looks like:

use Mojo::Base 'Mojolicious::Plugin', -signatures;
use Foo::Plugin::Style::CSS;

sub register ( $self, $app, $conf ) {
  my $style = Alerts::Api::Plugin::Style::CSS->new;
    $app->helper(
      inline => sub ( $self, $key ) {
        return $style->css->{ $key }->%*;
    });
}

%= t table => ( inline 'top-table' ) => begin
  %= t tbody => begin
    %= t tr => begin
      %= t td => begin
        <!-- content-->
        %= t table => ( class => 'w600', inline 'content-table' ) => begin
          %= t tbody => begin
            %= t tr => begin
              %= t td => begin
               Mojo :D
              % end
            % end
          % end
        % end
      % end
    % end
  % end
% end

Seems like more reasonable.

The good thing is that it makes possible to reuse a lot of those things from the use constant declaration, because in my case, there are hundred of similar attributes in the table markup.

[smonff]

This is basically the same as the very trendy CSS in JS, but it is CSS in Perl. How pleasant 🤗