From: Sven Schöling Date: Fri, 19 Mar 2021 16:31:26 +0000 (+0100) Subject: MaterialComponents: P.M.input_tag X-Git-Tag: kivitendo-mebil_0.1-0~9^2~99 X-Git-Url: http://wagnertech.de/git?a=commitdiff_plain;h=13fddaf3507bdd2280561ced29903796c55132ca;p=kivitendo-erp.git MaterialComponents: P.M.input_tag --- diff --git a/SL/Presenter/MaterialComponents.pm b/SL/Presenter/MaterialComponents.pm index e3f018110..db9256229 100644 --- a/SL/Presenter/MaterialComponents.pm +++ b/SL/Presenter/MaterialComponents.pm @@ -26,6 +26,7 @@ use constant LARGE => 'large'; use constant MEDIUM => 'medium'; use constant SMALL => 'small'; use constant TINY => 'tiny'; +use constant INPUT_FIELD => 'input-field'; use constant WAVES_EFFECT => 'waves-effect'; use constant WAVES_LIGHT => 'waves-light'; @@ -93,6 +94,40 @@ sub _extract_attribute_classes { @classes; } +sub _set_id_attribute { + my ($attributes, $name, $unique) = @_; + + if (!delete($attributes->{no_id}) && !$attributes->{id}) { + $attributes->{id} = name_to_id($name); + $attributes->{id} .= '_' . $attributes->{value} if $unique; + } + + %{ $attributes }; +} + +{ # This will give you an id for identifying html tags and such. + # It's guaranteed to be unique unless you exceed 10 mio calls per request. + # Do not use these id's to store information across requests. +my $_id_sequence = int rand 1e7; +sub _id { + return ( $_id_sequence = ($_id_sequence + 1) % 1e7 ); +} +} + +sub name_to_id { + my ($name) = @_; + + if (!$name) { + return "id_" . _id(); + } + + $name =~ s/\[\+?\]/ _id() /ge; # give constructs with [] or [+] unique ids + $name =~ s/[^\w_]/_/g; + $name =~ s/_+/_/g; + + return $name; +} + sub button_tag { my ($onclick, $value, %attributes) = @_; @@ -148,11 +183,28 @@ sub icon { sub input_tag { my ($name, $value, %attributes) = @_; - # todo icons - # todo label/active - # todo validate + _set_id_attribute(\%attributes, $attributes{name}); + + my $class = delete %attributes{class}; + my $icon = $attributes{icon} + ? icon(delete $attributes{icon}, class => 'prefix') + : ''; + + my $label = $attributes{label} + ? html_tag('label', delete $attributes{label}, for => $attributes{id}) + : ''; + + $attributes{type} //= 'text'; + + html_tag('div', + $icon . + html_tag('input', undef, value => $value, %attributes, name => $name) . + $label, + class => [ grep $_, $class, INPUT_FIELD ], + ); +} + - html_tag('input', $name, $value, %attributes) . html_tag('label', for => $attributes{id}, $name); } diff --git a/templates/mobile_webpages/test/components.html b/templates/mobile_webpages/test/components.html index 6af2d2c4b..842c07b0e 100644 --- a/templates/mobile_webpages/test/components.html +++ b/templates/mobile_webpages/test/components.html @@ -26,4 +26,16 @@

Inputs

-[% P.M.input_tag("", "test string") %] + +[% P.M.input_tag("", "", label="test input without anything") %] +[% P.M.input_tag("", "default value", label="test input with default value") %] +[% P.M.input_tag("", "", placeholder="with placeholder", label="test input with placeholder") %] +[% P.M.input_tag("", "default value", placeholder="with placeholder", label="test input with placeholder and default value") %] + +

With grid:

+
+[% P.M.input_tag("", "", label="2 cols", class="col s6") %] +[% P.M.input_tag("", "", label="2 cols", class="col s6") %] +[% P.M.input_tag("i1", "", placeholder="2 cols placeholder", icon="phone", class="col s6") %] +[% P.M.input_tag("i2", "", label="2 cols label", icon="account_circle", class="col s6") %] +