NAME

Tags::HTML::Tree - Tags helper for Tree.

SYNOPSIS

 use Tags::HTML::Tree;

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

DESCRIPTION

Tags helper to print HTML page of tree structure defined by Tree instance.

The page contains clickable tree with usage of Javascript code.

METHODS

`new`

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

Constructor.

css

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

Default value is undef.
no_css

No CSS support flag. If this flag is set to 1, process_css() returns undef.

Default value is 0.
tags

'Tags::Output' object.

Default value is undef.

`cleanup`

 $obj->cleanup;

Cleanup module to init state.

Returns undef.

`init`

 $obj->init($tree);

Set Tree instance defined by $tree to object.

Returns undef.

`prepare`

 $obj->prepare;

Process initialization before page run.

Preparing is about adding javascript used in helper to "script_js" in Tags::HTML method.

Returns undef.

`process`

 $obj->process;

Process Tags structure for output with message.

Returns undef.

`process_css`

 $obj->process_css;

Process CSS::Struct structure for output.

Returns undef.

ERRORS

 new():
         From Class::Utils::set_params():
                 Unknown parameter '%s'.
         From Mo::utils::check_required():
                 Parameter '%s' is required.
         From Mo::utils::CSS::check_css_class():
                 Parameter 'css_class' has bad CSS class name.
                         Value: %s
                 Parameter 'css_class' has bad CSS class name (number on begin).
                         Value: %s
         From Mo::utils::CSS::check_css_unit():
                 Parameter 'indent' contain bad unit.
                         Unit: %s
                         Value: %s
                 Parameter 'indent' doesn't contain unit name.
                         Value: %s
                 Parameter 'indent' doesn't contain unit number.
                         Value: %s
         From Tags::HTML::new():
                 Parameter 'tags' must be a 'Tags::Output::*' class.
         Parameter 'css_class' is required.

 init():
         Data object must be a 'Tree' instance.

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

EXAMPLE1

 use strict;
 use warnings;

 use CSS::Struct::Output::Raw;
 use Tags::HTML::Tree;
 use Tags::HTML::Page::Begin;
 use Tags::HTML::Page::End;
 use Tags::Output::Raw;
 use Tree;
 use Unicode::UTF8 qw(decode_utf8 encode_utf8);

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

 my $tags_tree = Tags::HTML::Tree->new(
         'css' => $css,
         'tags' => $tags,
 );
 $tags_tree->prepare;

 my $begin = Tags::HTML::Page::Begin->new(
         'author' => decode_utf8('Michal Josef Špaček'),
         'css' => $css,
         'generator' => 'Tags::HTML::Tree',
         'lang' => {
                 'title' => 'Tree',
         },
         'script_js' => $tags_tree->script_js,
         'tags' => $tags,
 );
 my $end = Tags::HTML::Page::End->new(
         'tags' => $tags,
 );

 # Example tree object.
 my $tree = Tree->new('Root');
 $tree->meta({'uid' => 0});
 my $count = 0;
 my %node;
 foreach my $node_string (qw/H I J K L M N O P Q/) {
          $node{$node_string} = Tree->new($node_string);
          $node{$node_string}->meta({'uid' => ++$count});
 }
 $tree->add_child($node{'H'});
 $node{'H'}->add_child($node{'I'});
 $node{'I'}->add_child($node{'J'});
 $node{'H'}->add_child($node{'K'});
 $node{'H'}->add_child($node{'L'});
 $tree->add_child($node{'M'});
 $tree->add_child($node{'N'});
 $node{'N'}->add_child($node{'O'});
 $node{'O'}->add_child($node{'P'});
 $node{'P'}->add_child($node{'Q'});

 # Init.
 $tags_tree->init($tree);

 # Process CSS.
 $tags_tree->process_css;

 # Process HTML.
 $begin->process;
 $tags_tree->process;
 $end->process;

 # Print out.
 print encode_utf8($tags->flush);

 # Output:
 # <!DOCTYPE html>
 # <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="author" content="Michal Josef Špaček" /><meta name="generator" content="Tags::HTML::Tree" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script type="text/javascript">
 # window.addEventListener('load', (event) => {
 #     let toggler = document.getElementsByClassName("caret");
 #     for (let i = 0; i < toggler.length; i++) {
 #         toggler[i].addEventListener("click", function() {
 #             this.parentElement.querySelector(".nested").classList.toggle("active");
 #             this.classList.toggle("caret-down");
 #         });
 #     }
 # });
 # </script><title>Tree</title><style type="text/css">
 # ul, .tree{list-style-type:none;padding-left:2em;}.caret{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.caret::before{content:"⯈";color:black;display:inline-block;margin-right:6px;}.caret-down::before{transform:rotate(90deg);}.nested{display:none;}.active{display:block;}
 # </style></head><body><ul class="tree"><li><span class="caret">Root</span><ul class="nested"><li><span class="caret">H</span><ul class="nested"><li><span class="caret">I</span><ul class="nested"><li>J</li></ul></li><li>K</li><li>L</li></ul></li><li>M</li><li><span class="caret">N</span><ul class="nested"><li><span class="caret">O</span><ul class="nested"><li><span class="caret">P</span><ul class="nested"><li>Q</li></ul></li></ul></li></ul></li></ul></li></ul></body></html>

EXAMPLE2

 use strict;
 use warnings;

 use CSS::Struct::Output::Indent;
 use Tags::HTML::Tree;
 use Tags::HTML::Page::Begin;
 use Tags::HTML::Page::End;
 use Tags::Output::Indent;
 use Tree;
 use Unicode::UTF8 qw(decode_utf8 encode_utf8);

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

 my $tags_tree = Tags::HTML::Tree->new(
         'css' => $css,
         'tags' => $tags,
 );
 $tags_tree->prepare;

 my $begin = Tags::HTML::Page::Begin->new(
         'author' => decode_utf8('Michal Josef Špaček'),
         'css' => $css,
         'generator' => 'Tags::HTML::Tree',
         'lang' => {
                 'title' => 'Tree',
         },
         'script_js' => $tags_tree->script_js,
         'tags' => $tags,
 );
 my $end = Tags::HTML::Page::End->new(
         'tags' => $tags,
 );

 # Example tree object.
 my $tree = Tree->new('Root');
 $tree->meta({'uid' => 0});
 my $count = 0;
 my %node;
 foreach my $node_string (qw/H I J K L M N O P Q/) {
          $node{$node_string} = Tree->new($node_string);
          $node{$node_string}->meta({'uid' => ++$count});
 }
 $tree->add_child($node{'H'});
 $node{'H'}->add_child($node{'I'});
 $node{'I'}->add_child($node{'J'});
 $node{'H'}->add_child($node{'K'});
 $node{'H'}->add_child($node{'L'});
 $tree->add_child($node{'M'});
 $tree->add_child($node{'N'});
 $node{'N'}->add_child($node{'O'});
 $node{'O'}->add_child($node{'P'});
 $node{'P'}->add_child($node{'Q'});

 # Init.
 $tags_tree->init($tree);

 # Process CSS.
 $tags_tree->process_css;

 # Process HTML.
 $begin->process;
 $tags_tree->process;
 $end->process;

 # Print out.
 print encode_utf8($tags->flush);

 # Output:
 # <!DOCTYPE html>
 # <html lang="en">
 #   <head>
 #     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 #     <meta name="author" content="Michal Josef Špaček" />
 #     <meta name="generator" content="Tags::HTML::Tree" />
 #     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 #     <script type="text/javascript">
 # window.addEventListener('load', (event) => {
 #     let toggler = document.getElementsByClassName("caret");
 #     for (let i = 0; i < toggler.length; i++) {
 #         toggler[i].addEventListener("click", function() {
 #             this.parentElement.querySelector(".nested").classList.toggle("active");
 #             this.classList.toggle("caret-down");
 #         });
 #     }
 # });
 # </script>    <title>
 #       Tree
 #     </title>
 #     <style type="text/css">
 # ul, .tree {
 #      list-style-type: none;
 #      padding-left: 2em;
 # }
 # .caret {
 #      cursor: pointer;
 #      -webkit-user-select: none;
 #      -moz-user-select: none;
 #      -ms-user-select: none;
 #      user-select: none;
 # }
 # .caret::before {
 #      content: "⯈";
 #      color: black;
 #      display: inline-block;
 #      margin-right: 6px;
 # }
 # .caret-down::before {
 #      transform: rotate(90deg);
 # }
 # .nested {
 #      display: none;
 # }
 # .active {
 #      display: block;
 # }
 # </style>
 #   </head>
 #   <body>
 #     <ul class="tree">
 #       <li>
 #         <span class="caret">
 #           Root
 #         </span>
 #         <ul class="nested">
 #           <li>
 #             <span class="caret">
 #               H
 #             </span>
 #             <ul class="nested">
 #               <li>
 #                 <span class="caret">
 #                   I
 #                 </span>
 #                 <ul class="nested">
 #                   <li>
 #                     J
 #                   </li>
 #                 </ul>
 #               </li>
 #               <li>
 #                 K
 #               </li>
 #               <li>
 #                 L
 #               </li>
 #             </ul>
 #           </li>
 #           <li>
 #             M
 #           </li>
 #           <li>
 #             <span class="caret">
 #               N
 #             </span>
 #             <ul class="nested">
 #               <li>
 #                 <span class="caret">
 #                   O
 #                 </span>
 #                 <ul class="nested">
 #                   <li>
 #                     <span class="caret">
 #                       P
 #                     </span>
 #                     <ul class="nested">
 #                       <li>
 #                         Q
 #                       </li>
 #                     </ul>
 #                   </li>
 #                 </ul>
 #               </li>
 #             </ul>
 #           </li>
 #         </ul>
 #       </li>
 #     </ul>
 #   </body>
 # </html>

EXAMPLE3

 use strict;
 use warnings;
 
 use CSS::Struct::Output::Indent;
 use Plack::App::Tags::HTML;
 use Plack::Runner;
 use Tags::HTML::Tree;
 use Tags::Output::Indent;
 use Tree;

 # Example tree object.
 my $data_tree = Tree->new('Root');
 my %node;
 foreach my $node_string (qw/H I J K L M N O P Q/) {
          $node{$node_string} = Tree->new($node_string);
 }
 $data_tree->add_child($node{'H'});
 $node{'H'}->add_child($node{'I'});
 $node{'I'}->add_child($node{'J'});
 $node{'H'}->add_child($node{'K'});
 $node{'H'}->add_child($node{'L'});
 $data_tree->add_child($node{'M'});
 $data_tree->add_child($node{'N'});
 $node{'N'}->add_child($node{'O'});
 $node{'O'}->add_child($node{'P'});
 $node{'P'}->add_child($node{'Q'});
 
 my $css = CSS::Struct::Output::Indent->new;
 my $tags = Tags::Output::Indent->new(
         'xml' => 1,
         'preserved' => ['script', 'style'],
 );
 my $app = Plack::App::Tags::HTML->new(
         'component' => 'Tags::HTML::Tree',
         'data_init' => [$data_tree],
         'css' => $css,
         'tags' => $tags,
 )->to_app;
 Plack::Runner->new->run($app);

 # Output screenshot is in images/ directory.

DEPENDENCIES

Class::Utils, English, Error::Pure, Mo::utils, Mo::utils::CSS, Scalar::Util, Unicode::UTF8, Tags::HTML.

REPOSITORY

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

AUTHOR

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

http://skim.cz

LICENSE AND COPYRIGHT

BSD 2-Clause License

VERSION

0.05

To install Tags::HTML::Tree, copy and paste the appropriate command in to your terminal.

cpanm

cpanm Tags::HTML::Tree

CPAN shell

perl -MCPAN -e shell
install Tags::HTML::Tree

For more information on module installation, please visit the detailed CPAN module installation guide.

	Global
`s`	Focus search bar
`?`	Bring up this help dialog

	GitHub
`g` `p`	Go to pull requests
`g` `i`	go to github issues (only if github is preferred repository)

	POD
`g` `a`	Go to author
`g` `c`	Go to changes
`g` `i`	Go to issues
`g` `d`	Go to dist
`g` `r`	Go to repository/SCM
`g` `s`	Go to source
`g` `b`	Go to file browse

	Search terms
module: (e.g. module:Plugin)
distribution: (e.g. distribution:Dancer auth)
author: (e.g. author:SONGMU Redis)
version: (e.g. version:1.00)

NAME

SYNOPSIS

DESCRIPTION

METHODS

new

cleanup

init

prepare

process

process_css

ERRORS

EXAMPLE1

EXAMPLE2

EXAMPLE3

DEPENDENCIES

REPOSITORY

AUTHOR

LICENSE AND COPYRIGHT

VERSION

Module Install Instructions

`new`

`cleanup`

`init`

`prepare`

`process`

`process_css`