Giter Club home page Giter Club logo

html-tag's Introduction

NAME

HTML::Tag - Simple HTML Tag Generators

SYNOPSIS

    use HTML::Tag::Tags;

    say HTML::Tag::p.new(:text('This is my paragraph'), :class('pretty')).render;
    
    # <p class="pretty">This is my paragraph</p>

    my $link = HTML::Tag::a.new(:text('paragraph'),
                                :href('http://dom.com'));
    say HTML::Tag::p.new(:text("This is my ", $link, "."),
                         :class('pretty')).render;
    
    # <p class="pretty">This is my <a href="http://dom.com">paragraph</a>&period;</p>

DESCRIPTION

HTML::Tag::Tags provides little objects to generate HTML tags. Tags that support :text have their string text encoded for HTML special characters.

Tags that support :text also support "embedding" other tags inside their :text by passing alternating string text and tag objects as a list. Tag objects passed this way should not have .render called on them first to avoid the HTML special characters being escaped.

Not all attributes of every HTML tag is supported, just the most common. It enforces very little. It is meant to help minimize clutter in code for those who are not using html template classes or who wish to dynamically generate segments of html code.

Please see the POD documentation for each macro for more details on macro use.

Also, an HTML::Tag::Exports can be used to export the symbol "tag" into your scope which shortens HTML::Tag::<thing> creation to tag('thing', %opts)

TAGS

HTML::Tag::Tags will give you all tag classes defined. They can be instantiated with HTML::Tag::.new and take options matching their normal html attributes.

Tags can be combined into one another by placing them into another tag's :text attribute. Tags are then recursively rendered when .render is called on the furthest-outward containing tag (such as HTML::Tag::html which represents an entire page).

HTML::Tag::Raw represents raw HTML text that renders as its content itself.

HTML::Tag::Macro::CSS will generate a CSS link.

HTML::Tag::Macro::Table will help generate tables.

HTML::Tag::Macro::List will help generate lists.

HTML::Tag::Macro::Form will help generate form and do some form variable handling.

MACROS

Please see individual macro files for more thorough documentation on each macro.

HTML::Tag::Macro::CSS

Renders a normal CSS file link that can be wrapped into a html head element:

HTML::Tag::Macro::CSS.new(:href('/css/mycssfile.css')).render;

HTML::Tag::Macro::Table

A HTML::Tag::Macro::Table object gets fed rows one after the other. These rows contain arrays of data that will be surrounded by td's.

    my $table = HTML::Tag::Macro::Table.new;
    my @data = $var1, $var2, $var3;
    $table.row(@data);
    @data = $var4, $var5, $var6;
    $table.row(@data);
    $table.render;

The .row method takes Bool :$header which will generated th tags instead of td tags for each array element (representing a table header row).

The .row method takes Map :$tr-opts which will apply normal HTML::Tag::tr options to that row, as specified in :$tr-opts.

The .row method takes Map :$td-opts which will apply normal HTML::Tag::td options to td tags that are generated for that row. $td-opts is keyed by the td array element (see td-opts example code below).

    $table = HTML::Tag::Macro::Table.new(:table-opts(id =>'myID'));
    @data = 'Col1', 'Col2', 'Col3';
    $table.row(:header(True), @data);
    @data = 11, 22, 33;
    $table.row(@data);
    @data = 111, 222, 333;
    my $td-opts = %(1 => {class => 'pretty'},
                    2 => {class => 'pretty',
                          id    => 'lastone'});
    $table.row(:$td-opts, @data);

As you can see the new constructor takes :$table-opts that will be passed along to the normal HTML::Tag::table object.

NO CHECKING IS PERFORMED FOR A CONSISTENT NUMBER OF ELEMENTS IN EACH ROW

HTML::Tag::Macro::List

Generates an ordered or unordered HTML list from a supplied array, or constructs the array for you by repeated calling of the item() method.

    my $list = HTML::Tag::Macro::List.new;
    $list.link(:to('http://somewhere'), :text('rainbows'));
    $list.link(:to('http://elsewhere'), :text('snails'),
	                                    :class('highlight'));
    $list.render;

    # .. or ..

    my @fruit = 'fingers', 'sofa', 'airliner';
    my $html = HTML::Tag::Macro::List.new(:items(@fruit)).render;

The lists have a special method called link() that makes HTML::Tag::a links that are surrounded by list elements since this is a common way to generate HTML menus.

HTML::Tag::Macro::Form

Generates forms based upon a definition variable passed in. This variable must be an array of hashes.

The array of hashes represents one form element per hash in the array. Labels are automatically generated for all form elements by default.

The hash key represents the HTML name of the hash by default, and the input variable if given, etc. That key's value represents options for that form element.

    use HTML::Tag::Macro::Form;

    my $form = HTML::Tag::Macro::Form.new(:action('/hg/login/auth'),
                                          :input(%.input));
    $form.def = ({username => {}},
                 {password => { type => 'password' }},
                 {submit   => { value => 'Login',
                                type  => 'submit',
                                label => '' }}
                );

    $form.render;

Most certainly a work in progress.

AUTHOR

Current maintenance: Polgár, Márton [email protected]

Author of the original module: Rushing, Mark [email protected]

LICENSE

This is free software; you can redistribute it and/or modify it under the Artistic License 2.0.

html-tag's People

Contributors

2colours avatar adaptiveoptics avatar alexdaniel avatar samcv avatar zoffixznet avatar

Stargazers

 avatar

Forkers

lizmat

html-tag's Issues

Doc/README situation is inconsistent

There is a Tag.rakudoc file which is supposed to be the source file.

There is the README.md file with extra updates.

They should be synced and preferably README.md should be generated based on the Rakudoc file.

This might be related to overall authoring challenges.

Missing tags

Currently, all tags have to be listed in the Tags.rakumod file - however, there are very obvious examples of missing tags - most HTML5 tags, for example.

I failed to find anything authoritative about HTML tags, here are some possibilities and considerations:

  • run a development test (under xt/) against some scraped site that contained all the tags supposedly, to see if there are missing ones
  • programmatically generate tag classes during the build phase
  • ditch the idea of separate class per tag
    • I tend to like the idea that matching tags could have extra operations that mixed tags couldn't, still I wonder how practical that would be

HTML::Tag::Macro structure

As of now, there is a separate HTML::Tag::Macro module (that only contains the CSS class) and a HTML::Tag::Macro folder (containing Form, List and Table). This means for CSS, one needs to use HTML::Tag::Macro and for the others, the respective ::classname.

I think this is unnecessarily confusing. Either CSS has to go to the folder, or the others have to go to Macro.rakumod.

Don't sort attributes, handle unsorted attributes in the test instead

The mktag method of the HTML::Tag class sorts the attributes for no other reason than easy testing - there should be a good comparator function that can deal with the nondeterminism instead. It would be a runtime performance gain at the cost of somewhat more complicated tests.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.