MaterialComponents: P.M.input_tag

diff --git a/SL/Presenter/MaterialComponents.pm b/SL/Presenter/MaterialComponents.pm
index e3f0181..db92562 100644 (file)
--- 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 6af2d2c..842c07b 100644 (file)
--- a/templates/mobile_webpages/test/components.html
+++ b/templates/mobile_webpages/test/components.html
@@ -26,4 +26,16 @@
 
 <h2>Inputs</h2>
 
-[% 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") %]
+
+<h3>With grid:</h3>
+<div class="row">
+[% 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") %]
+</div>