NAME

Tags::HTML::Navigation::Grid - Tags helper for navigation grid.

SYNOPSIS

 use Tags::HTML::Navigation::Grid;

 my $obj = Tags::HTML::Navigation::Grid->new(%params);
 $obj->cleanup;
 $obj->init($items_ar);
 $obj->prepare;
 $obj->process;
 $obj->process_css;

DESCRIPTION

Tags helper to print HTML page of navigation grid.

The page contains multiple boxes with title and optional image and description in box. Each box could have link to other page.

Items are defined by Data::Navigation::Item instances.

METHODS

new

 my $obj = Tags::HTML::Navigation::Grid->new(%params);

Constructor.

• css

  CSS::Struct::Output object for process_css processing.

  Default value is undef.

• css_class

  CSS class for navigation grid.

  Default value is 'navigation'.

• tags

  Tags::Output object.

  Default value is undef.

Returns instance of object.

cleanup

 $obj->cleanup;

Process cleanup after page run.

Returns undef.

init

 $obj->init($items_ar);

Initialize object. Variable $items_ar is reference to array with Data::Navigation::Item instances.

Returns undef.

prepare

 $obj->prepare;

Prepare object. Do nothing in this object.

Returns undef.

process

 $obj->process;

Process Tags structure for navigation grid.

Returns undef.

process_css

 $obj->process_css;

Process CSS::Struct structure for navigation grid.

Returns undef.

ERRORS

 new():
         From Class::Utils::set_params():
                 Unknown parameter '%s'.
         From Tags::HTML::new():
                 Parameter 'css' must be a 'CSS::Struct::Output::*' class.
                 Parameter 'tags' must be a 'Tags::Output::*' class.

 init():
         Bad reference to array with items.
         Item object must be a 'Data::Navigation::Item' instance.

 process():
         From Tags::HTML::process():
                 Parameter 'tags' isn't defined.

 process_css():
         From Tags::HTML::process_css():
                 Parameter 'css' isn't defined.

EXAMPLE1

 use strict;
 use warnings;

 use CSS::Struct::Output::Indent;
 use Data::Navigation::Item;
 use Tags::HTML::Navigation::Grid;
 use Tags::Output::Indent;

 # Object.
 my $css = CSS::Struct::Output::Indent->new;
 my $tags = Tags::Output::Indent->new;
 my $obj = Tags::HTML::Navigation::Grid->new(
         'css' => $css,
         'tags' => $tags,
 );

 my @items = (
         Data::Navigation::Item->new(
                 'class' => 'nav-item1',
                 'desc' => 'This is description #1',
                 'id' => 1,
                 'image' => '/img/foo.png',
                 'location' => '/first',
                 'title' => 'First',
         ),
         Data::Navigation::Item->new(
                 'class' => 'nav-item2',
                 'desc' => 'This is description #2',
                 'id' => 2,
                 'image' => '/img/bar.png',
                 'location' => '/second',
                 'title' => 'Second',
         ),
 );
 $obj->init(\@items);

 # Process login b.
 $obj->process_css;
 $obj->process;

 # Print out.
 print "CSS\n";
 print $css->flush."\n\n";
 print "HTML\n";
 print $tags->flush."\n";

 # Output:
 # CSS
 # .navigation {
 #         display: flex;
 #         flex-wrap: wrap;
 #         gap: 20px;
 #         padding: 20px;
 #         justify-content: center;
 # }
 # .nav-item {
 #         display: flex;
 #         flex-direction: column;
 #         align-items: center;
 #         border: 2px solid #007BFF;
 #         border-radius: 15px;
 #         padding: 15px;
 #         width: 200px;
 # }
 # .nav-item img {
 #         width: 100px;
 #         height: 100px;
 # }
 # .nav-item div.title {
 #         margin: 10px 0;
 #         font-family: sans-serif;
 #         font-weight: bold;
 # }
 # .nav-item  {
 #         text-align: center;
 #         font-family: sans-serif;
 # }
 # 
 # HTML
 # <nav class="navigation">
 #   <div class="nav-item1">
 #     <a href="/first">
 #       <img src="/img/foo.png" alt="First">
 #       </img>
 #       <div class="title">
 #         First
 #       </div>
 #     </a>
 #     <p>
 #       This is description #1
 #     </p>
 #   </div>
 #   <div class="nav-item2">
 #     <a href="/second">
 #       <img src="/img/bar.png" alt="Second">
 #       </img>
 #       <div class="title">
 #         Second
 #       </div>
 #     </a>
 #     <p>
 #       This is description #2
 #     </p>
 #   </div>
 # </nav>

EXAMPLE2

 use strict;
 use warnings;
 
 use CSS::Struct::Output::Indent;
 use Data::Navigation::Item;
 use Plack::App::Tags::HTML;
 use Plack::Builder;
 use Plack::Runner;
 use Tags::Output::Indent;

 # Plack application with foo SVG file.
 my $svg_foo = <<'END';
 <?xml version="1.0" ?>
 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="-1 -1 2 2">
   <polygon points="0,-0.5 0.433,0.25 -0.433,0.25" fill="#FF6347"/>
   <polygon points="0,-0.5 0.433,0.25 0,0.75" fill="#4682B4"/>
   <polygon points="0.433,0.25 -0.433,0.25 0,0.75" fill="#32CD32"/>
   <polygon points="0,-0.5 -0.433,0.25 0,0.75" fill="#FFD700"/>
 </svg>
 END
 my $app_foo = sub {
         return [
                 200,
                 ['Content-Type' => 'image/svg+xml'],
                 [$svg_foo],
         ];
 };

 # Plack application with bar SVG file.
 my $svg_bar = <<'END';
 <?xml version="1.0" ?>
 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
   <polygon points="100,30 50,150 150,150" fill="#4682B4"/>
   <polygon points="100,30 150,150 130,170" fill="#4682B4" opacity="0.9"/>
   <polygon points="100,30 50,150 70,170" fill="#4682B4" opacity="0.9"/>
   <polygon points="70,170 130,170 100,150" fill="#4682B4" opacity="0.8"/>
 </svg>
 END
 my $app_bar = sub {
         return [
                 200,
                 ['Content-Type' => 'image/svg+xml'],
                 [$svg_bar],
         ];
 };

 my $css = CSS::Struct::Output::Indent->new;
 my $tags = Tags::Output::Indent->new(
         'xml' => 1,
         'preserved' => ['style'],
 );

 # Navigation items.
 my @items = (
         Data::Navigation::Item->new(
                 'class' => 'nav-item',
                 'desc' => 'This is description #1',
                 'id' => 1,
                 'image' => '/img/foo.svg',
                 'location' => '/first',
                 'title' => 'First',
         ),
         Data::Navigation::Item->new(
                 'class' => 'nav-item',
                 'desc' => 'This is description #2',
                 'id' => 2,
                 'image' => '/img/bar.svg',
                 'location' => '/second',
                 'title' => 'Second',
         ),
 );

 # Plack application for grid.
 my $app_grid = Plack::App::Tags::HTML->new(
         'component' => 'Tags::HTML::Navigation::Grid',
         'data_init' => [\@items],
         'css' => $css,
         'tags' => $tags,
 )->to_app;

 # Runner.
 my $builder = Plack::Builder->new;
 $builder->mount('/img/foo.svg' => $app_foo);
 $builder->mount('/img/bar.svg' => $app_bar);
 $builder->mount('/' => $app_grid);
 Plack::Runner->new->run($builder->to_app);

 # Output screenshot is in images/ directory.

DEPENDENCIES

Class::Utils, Error::Pure, Scalar::Util, Tags::HTML.

SEE ALSO

Tags::HTML::Login::Access

Tags helper for login access.

Tags::HTML::Login::Button

Tags helper for login button.

Tags::HTML::Login::Register

Tags helper for login register.

REPOSITORY

https://github.com/michal-josef-spacek/Tags-HTML-Navigation-Grid

AUTHOR

Michal Josef Špaček mailto:skim@cpan.org

http://skim.cz

LICENSE AND COPYRIGHT

© 2024 Michal Josef Špaček

BSD 2-Clause License

VERSION

0.02

cpanm Tags::HTML::Navigation::Grid

perl -MCPAN -e shell
install Tags::HTML::Navigation::Grid