A1z-HTML5-Template

 view release on metacpan or  search on metacpan

lib/A1z/HTML5/Template.pm  view on Meta::CPAN

		<tr> <td></td> <td>$num1 </td> <td>\+</td> <td> $num2</td> <td> \=</td> <td> $a</td> </tr>
		
		<thead><tr><td colspan="6">Subtraction</td></tr></thead>
		<tr> <td></td> <td>$num1</td> <td> \-</td> <td> $num2</td> <td> \=</td> <td> $s</td> </tr>
		<tr> <td></td> <td>$num2</td> <td> \-</td> <td> $num1</td> <td> \=</td> <td> $s1</td> </tr>
		
		<thead><tr><td colspan="6">Division</td></tr></thead>
		<tr> <td></td> <td>$num1</td> <td> \/</td> <td> $num2</td> <td> \=</td> <td> $d </td></tr>
		<tr> <td></td> <td>$num2</td> <td> \/</td> <td> $num1</td> <td> \=</td> <td> $d1</td> </tr>
		
	</table>
	</div>
	};

	return qq{\n$out\n};
}



# begin timestable 
sub timestable 
{	
	my $self = shift;
	
	my ($num1) = @_;
	
	if ( $num1 eq '' ) { $num1 = '2'; }
	
	my $out;
	
	$out .= qq{<table class="table table-bordered table-condensed table-striped table-hover table-responsive">};
	
	for ('1'..'20') 
	{
		$out .= qq{<tr> <td>$num1</td> <td>x</td> <td>$_</td> <td>=</td> <td>} . $num1 * $_ . qq{</td></tr>} if ($_);
	}
	$out .= qq{</table>};
	
	return $out;
}
# end timestable 



# begin header 
sub header 
{
	my $self = shift; 
	
	my @keys; 
	if (@_) { @keys = @_; } 
	
	my $args = scalar(@keys); 
	
	my ($key, $key1) = @_;
	
	my %out;
	
	if ($ARGV and $ARGV > 0 and scalar(@keys) > 0) 
	{
		if ($key eq 'utf8')
		{
			$out{"$key"} = qq{Content-Type: text/html;charset=utf-8\n\n}; 
			
		} 
		elsif (!defined $key or $key eq '') 
		{
			$out{"$key"} = qq{Content-Type: text/html;charset=utf-8\n\n};
		}
		else 
		{
			$out{"$key"} = qq{Content-Type: text/html;charset=utf-8\n\n};
		}
	}
	else 
	{
		return qq{Content-Type: text/html;charset=utf-8\n\n}; 
	}
	
} 
# end header 



# begin start html 01
sub start_html  
{ 
	my $self = shift;
	
	my @keys; 
	if (@_) { @keys = @_; } 
	
	my $args = scalar @keys; 
	
	my ($key, $key1) = @_; 
	
	my %out; 
	
	if ($args and $args >= 0) 
	{
		# have your own custom header, backwards compatibility 
		
		my $out; 
		
		$out .= qq{@_ }; 
		
		return $out; 
		
	}
	else 
	{
		my $out; 
		
		$out .= qq{<!DOCTYPE html>\n<html>\n};  
		$out .= qq{<head>\n}; 
	
		return $out; 
		
	}
} 
# end start_html 




sub body_js_css 
{
	my $self = shift;
	
	my $key = "@_"; 
	
	my @keys; 
	if (@_) { @keys = @_; } 
	
	my $args = scalar (@keys); 
	
	my $out; 

lib/A1z/HTML5/Template.pm  view on Meta::CPAN

		return $out; 
	}
} 
# end end_html




# start head title 02 
sub head_title
{
	my $self = shift;
	
	my $key = "@_"; 
	
	my @keys; 
	if (@_) { @keys = @_; } 
	
	my $out; 
	
	$out .= qq{}; 
	
	if ($ARGV and $ARGV > 0 or scalar(@keys) > 0) 
	{
		
		if ($key) 
		{
			return qq{<title>@_</title>\n}; 
		}
		else 
		{
			return qq{<title>Template</title>\n}; 
		}
		
	}
	else 
	{
		return qq{<title>Package Html5</title>\n}; 	# this works but does not ask the user
	}
	
} 
# end head title 




# begin head meta 03
sub head_meta
{
	my $self = shift;
	
	my $key = "@_"; 
	
	my @keys; 
	if (@_) { @keys = @_; } 
	
	my $args = scalar @keys; 
	
	my $out; 
	
	$out .= qq{<meta charset="utf-8">
<meta lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="HandheldFriendly" content="true"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
}; 
	
	if ($args) 
	{
		
		if ($args >= 0) 
		{
			my $return;
			
			for (@keys ) 
			{
				chomp;
				
				my ( $meta_name, $meta_cont) = split(/---/, $_, 2);
				
				$return .= qq{<meta name="$meta_name" content="$meta_cont">\n}; 
			}
			
			return qq{$return<!--360-->}; 
		}
		else 
		{
			$out .= qq{<meta name="description" content="HTML5 by Business Impact Solutions - bislinks.com"/><!--364-->}; 
			# add default meta if user has not called one of his own
			return qq{$out}; 
		}
		
	}
	else 
	{
		return qq{$out}; 	# this works but does not ask the user
	}
	
} 
# end head meta 03 




# begin body top nav bar
sub body_topnavbar
{
	my $self = shift;
	
	my %in;
	
	%in = (
		file => "https://www.a1z.us/js/utils/top-nav-bar.js",
		name => "Menu",
		@_,
	);
	
	my $out; 
	
	$out .= qq{<!--top nav bar begin-->
<script src="$in{file}"></script>

lib/A1z/HTML5/Template.pm  view on Meta::CPAN

<link href='https://fonts.googleapis.com/css?family=Ubuntu&v2' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch:700&v2' rel='stylesheet' type='text/css'>
}; 

}




sub html_bootstrap_bluimp 
{
	return qq{<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
		<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
	    <!-- The container for the modal slides -->
	    <div class="slides"></div>
	    <!-- Controls for the borderless lightbox -->
	    <h3 class="title"></h3>
	    <a class="prev">‹</a>
	    <a class="next">›</a>
	    <a class="close">×</a>
	    <a class="play-pause"></a>
	    <ol class="indicator"></ol>
	    <!-- The modal dialog, which will be used to wrap the lightbox content -->
	    <div class="modal fade">
	        <div class="modal-dialog">
	            <div class="modal-content">
	                <div class="modal-header">
	                    <button type="button" class="close" aria-hidden="true">&times;</button>
	                    <h4 class="modal-title"></h4>
	                </div>
	                <div class="modal-body next"></div>
	                <div class="modal-footer">
	                    <button type="button" class="btn btn-default pull-left prev">
	                        <i class="glyphicon glyphicon-chevron-left"></i>
	                        Previous
	                    </button>
	                    <button type="button" class="btn btn-primary next">
	                        Next
	                        <i class="glyphicon glyphicon-chevron-right"></i>
	                    </button>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	};
}
# end sub html_bootstrap_bluimp 




sub head 
{
	my $self = shift; 
	
	my $out; 
	
	my %in = (
		-type 	=> "Content-Type: text/html;charset=utf-8\n\n", 
		-bootstrap 	=> html_bootstrap_css, 
		-jqueryui 	=> html_jqueryui_css, 
		-htmlshim	=> html_shim_respond, 
		-humanejs  => html_humanejs_css, 
		-title 		=> "A1Z .us", 
		-cssLinks => "https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css,https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css,https://www.a1z.us/A1z/HTML5/Template.css", 
		-cssCode => "", 
		-mobilemeta => qq{<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
}, 
		-charsetmeta => qq{<meta charset="utf-8">}, 
		-usermeta => "",
		-titleRotatingText => qq{text1,text2,text3},
		@_,
		
	); 


# rotating title function and text 
my $setTitle;
if ( $in{-titleRotatingText} and $in{-titleRotatingText} =~ /\,/ )
{
	my @a;
	@a = split(/\,/, $in{-titleRotatingText}, 3);

	$setTitle = html_setTitle(ta => "$a[0]", tb => "$a[1]", tc => "$a[2]");
}
else
{
	$setTitle = html_setTitle(ta => "Text01", tb => "text02", tc => "text03");
}

# css multiple links/files 
my $css; my @css; 
if ($in{-cssLinks} )
{
	if  ( $in{-cssLinks} =~ /\,/ ) 
	{
		@css = split(/\,/, $in{-cssLinks});
		for (@css) 
		{
			if ($_ =~ /\.css$/) 
			{
				$css .= qq{<link type="text/css" rel="stylesheet" href="$_">\n} ; 
			}
			else 
			{
				$css = ''; 
			}
		}
	}
}
else 
{
	$css = qq{}; 
}


	return qq{$in{-type}<!DOCTYPE html>
<html>
<head>
<title>$in{-title}</title> 
$in{-charsetmeta}
$in{-mobilemeta}
$in{-usermeta}
$in{-bootstrap} 
$in{-jqueryui} 
$in{-htmlshim} 
$in{-humanejs}
$css
<style type="text/css">

lib/A1z/HTML5/Template.pm  view on Meta::CPAN

	else
	{
		$in{error} .= qq{<p>Image directory does not exist or is inaccessible. Make sure you provided the correct path.</p>};

		$out = $in{error};
	}

	return $out;
}
# end display gallery thumbnails 









1;

__END__

=pod

=encoding UTF-8

=head1 NAME

A1z::HTML5::Template - Fast and easy Web Apps

=head1 VERSION

version 0.22

=head1 SYNOPSIS

    use A1z::HTML5::Template;
    my $h = A1z::HTML5::Template->new();

    This directory should be writable by the web server, required to create/hold page content files.
	This may also contain your custom JavaScript/CSS libraries.
	Works for both Windows and Linux
	
		use lib '/home/user/path/to/app';
		or
		use lib 'C:/Inetpub/wwwroot/path/to/app';

	# for features like 'say'
	use 5.10.0;

	my $h = A1z::HTML5::Template->new(); 

	Fast, Easy, and Simple: Just Two Lines!
	
		say $h->head( -title => "My Brand Name" );
		say $h->body( -content => qq{ Coming Soon });

	For More Control/Customization: Not for the lazy!
	
	say $h->header('utf8');  
	say $h->start_html(); 
	say $h->head_title("My New App"); 
	say $h->head_meta(); 

	Load basic/required JavaScript/CSS libraries
	say $h->head_js_css(); 

	Add your own custom JavaScript/CSS files
	say $h->head_js_css('/url/to/app/Template.css'); 

	say $h->end_head(); 
	say $h->begin_body();

	say qq{<h1>My New App/Website</h1>};

	say qq{<main class="container">}; 

		# output file content as menu
		say $h->body_accordion( $h->open_file("/home/user/path/to/app/open_file_example.txt", 'menu', 'Menu') ); 

		# as a HTML5 table 
		say $h->body_accordion( $h->open_file("$sys{cgibase}/open_file_example.txt", 'table', 'Table Header') );
		
		# Simple mathematics 
		say $h->body_article( header => "Simple Mathematics", content => $h->math1("2", "4") );

		# Times Table  
		say $h->body_article( header => "Times Table", content => $h->timestable("2") );

	say qq{</main>};

	Required/Default JavaScript libraries.
		say $h->body_js_css(); 
	
	Add your own JavaScript libraries:
		say $h->body_js_css("complete-url_or_path-to-js-css-libraries")	

	say $h->end_body();
	say $h->end_html(); 

=head1 NAME

	Fast and Easy Web Apps

	"A1z::HTML5::Template" provides customizable HTML5 tags for creating "Fast and Easy Web Apps."

=head2 VERSION

	0.22

=head1 Installation

	cpan install A1z::HTML5::Template 
	or
	cpanm A1z::HTML5::Template

=head1 METHODS

	header start_html head_title head_meta head_js_css end_head begin_body body_js_css body_topnavbar body_accordion end_body end_html 

=head2 new

   use A1z::HTML5::Template;
   my $h = A1z::HTML5::Template->new();

=head2 math1

	$h->math1(num1, num2);
	
	$h->body_article( header => "Math", content => $h->math1(num1, num2) );

=head2 timestable

	$h->timestable("Number");

=head2 header

	Provides HTML Content-Header 
	
	$h->header("");

=head2 start_html

	Provides doctype html
	
	Default includes utf-8

		$h->start_html();
	
	Or, add your own charset to your app:

		$h->start_html('DifferentCharset');

=head2 body_js_css

	Add/include javascript and css files just above </body> section 
	
	Typically, CSS files should/are not be used here. 
	
	Default behavior: 
	
		$h->body_js_css();
		
		Includes 
			jquery 1.12.4, jquery ui 1.11.4, bootstrap 3.3.0, 
			javascript for #dialog function, #menu, #accordion, #tabs 
	
	Add your own .js file: 
		
		use $h->body_js_css("/path/to/js/file.js");
		
	You can use both to include default .js files and your own custom .js file. 

=head2 end_html 

	Provides </html>

=head2 head_title

	Provides <title></title>
	
	$h->head_title("App/Page Title");

=head2 head_meta

	Provides <meta ... >. Includes the following by default:
		IE=Edge
		HandheldFriendly
		viewport
	
	$h->head_meta();
	
	Just like body_js_css, you can use both to add default values and your own meta 

=head2 body_topnavbar

	Provides top nav bar optionally.
	
	By default it is loaded from www.a1z.us which probably be removed in a future version.
	So, get a copy from bootstrap 3 and store it on your server.

=head2 head_js_css

	provides the ability to add/include .js/.css files in the </head> tag.
	
	$h->head_js_css();

lib/A1z/HTML5/Template.pm  view on Meta::CPAN

=head2 html_shim_respond

	For Internal/Future Use

	html5shiv.min.js   #3.7.2
	respond.min.js     #1.4.2

=head2 html_navbar

	For Internal/Future Use

	Customizations for top-nav-bar.js from a1z.us

	$h->html_navbar(
		-nbMenuName => "menuName", 
		-nbPageName => "pageName", 
		-nbServer => "serverName", 
		-nbLinks => "dropDownLinks: URLs separated by a dash, mostly relative URLs. E.g., blog-support-help-contact-sale"
	);

=head2 html_bootstrap_js

	For Internal/Future Use

	bootstrap.min.js, #3.3.0, from maxcdn

=head2 html_setTitle 

	For Internal/Future Use

	setTitle javascript function 

	Used in body

	Includes the C<script> tag pair

	C<$h->html_set_title( ta => "Text001", tb => "TExt002", tc => "TeXt003" );>

=head2 html_humanejs_css

	For Internal/Future Use

	humane-js #3.2.2 cdnjs.cloudflare
	fonts.googleapis.com

=head2 html_bootstrap_bluimp

	For Internal/Future Use

	bootstrap gallery lightbox controls for use immediately after C<body> tag

	C<&html_bootstrap_bluimp;>

	Used internally in C<$h->body()> 

=head2 head

	$h->head();

	$h-head (
		-type 	=> "Content-Type: text/html;charset=utf-8\n\n", 
		-bootstrap 	=> html_bootstrap_css, 
		-jqueryui 	=> html_jqueryui_css, 
		-htmlshim	=> html_shim_respond, 
		-humanejs  => html_humanejs_css, 
		-title 		=> "A1Z .us", 
		-cssLinks => "https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css,https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css,https://www.a1z.us/A1z/HTML5/Template.css", 
		-cssCode => "", 
		-mobilemeta => qq{<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
}, 
		-charsetmeta => qq{<meta charset="utf-8">}, 
		-usermeta => "",
		-titleRotatingText => qq{text1,text2,text3}	
	); 

=head2 body

	$h->body();

	$h->body(
		-h1	=> qq{A1Z .us},
		-onload => qq{setTitle();},  
		-nbhead => qq{},
		-nbpage => qq{}, 
		-nbmenu => qq{More}, 
		-defaultjquery => qq{$HTML{-defaultjquery}}, 
		-humanejs => qq{<script src="https://cdnjs.cloudflare.com/ajax/libs/humane-js/3.2.2/humane.min.js">},
		-userjquery => qq{}, 
		-navbar => html_navbar( $in{-nbmenu}, $in{-nbpage}, "", ""), 
		-content => qq{<div class="content">Content</div>}, 
		-footer => qq{All rights reserved &copy; A1Z .us}, 	
		-bootstrapbluimp => html_bootstrap_bluimp,
		-nbLinks => qq{contact-help-feedback}		
	); 

=head1 open_file

	Used for loading all kinds of custom elements for different output formats stored in simple text files.

	$h->open_file("/path/to/file", "outputFormat", "outputHeader");

	$h->open_file("C:/Inetpub/wwwroot/MyApp/menu.txt", "menu", "Menu");

	This is the heart of the App.

=head2 OUTPUT FORMAT OPTIONS: 

	table, accordion, menu, as is; where "as is" is the default

	$h->open_file( file => "abs/path/to/file", output_format => "table", output_header => "Heading" ); 

=head2 edit_file

	Edit your app/page/site. Customize HTML produced by A1z::HTML5::Template. 

	Creates a form to edit contents of a file. 

	The contents of this file should be in a special format. See open_file_example.txt. 

	Data is stored in simple text files in the app's home dir.  

	We recommend creating a separate file for editing/writing purposes, e.g., "TemplateAdmin.cgi"

	use lib '/path/to/app';

	use A1z::HTML5::Template;
	my $h = A1z::HTML5::Template->new();

	say $h->header('utf8');
	say $h->start_html(); 
	say $h->head_title("Edit App"); 
	say $h->head_meta();
	say $h->head_js_css();  
	say $h->end_head(); 
	say $h->begin_body();

	# Show edit form

 	say $h->body_article( 

		header => "Edit page items", 

		action => "TemplateAdmin.cgi",

		content => $h->edit_file( file => "/absolute/path/to/app/open_file_example.txt") 
	);

	# Save Customizations back to the same file.

	# include write_file if you submit form to the same file ( TemplateAdmin.cgi )

	say $h->body_article( 

		header => "<a href='$sys{cgiurl}/TemplateAdmin.cgi' title='Refresh to get the latest/saved content'>Refresh</a> ", 

		content => $h->write_file( file => "/absolute/path/to/app/open_file_example.txt")
	 
	);

	say $h->body_js_css(); 
	say $h->end_body();
	say $h->end_html(); 

=head2 write_file

	See documentation for 'edit_file.'

=head2 display_gallery_thumbnails

	my $images = $h->display_gallery_thumbnails(

		images_dir => "{images_dir}",
		thumbs_dir => "{thumbs_dir}",
		
		images_url => "{images_url}",
		thumbs_url => "{thumbs_url}",

		width => "100",
		height => "100"
	);

=head1 BUGS

Please report any bugs or feature requests to C<bug-a1z-html5-template at rt.cpan.org>, or through
the web interface at L<https://rt.cpan.org/NoAuth/ReportBug.html?Queue=A1z-HTML5-Template>.  I will be notified, and then you'll
automatically be notified of progress on your bug as I make changes.

=head1 SUPPORT



( run in 0.331 second using v1.01-cache-2.11-cpan-bf8d7bb2d05 )