File Coverage

blib/lib/Tags/HTML/Image/Grid.pm

Criterion	Covered	Total	%
statement	47	96	48.9
branch	2	34	5.8
condition	2	14	14.2
subroutine	10	13	76.9
pod	1	1	100.0
total	62	158	39.2

package Tags::HTML::Image::Grid;

use base qw(Tags::HTML);
use strict;
use warnings;

use Class::Utils qw(set_params split_params);
use Error::Pure qw(err);
use List::MoreUtils qw(none);
use Scalar::Util qw(blessed);
use Unicode::UTF8 qw(decode_utf8);

our $VERSION = 0.03;

# Constructor.
sub new {
	my ($class, @params) = @_;

	# Create object.
	my ($object_params_ar, $other_params_ar) = split_params(
		['css_image_grid', 'img_border_color_cb', 'img_border_width', 'img_link_cb',
		'img_select_cb', 'img_src_cb', 'img_width', 'title'], @params);
	my $self = $class->SUPER::new(@{$other_params_ar});

	# Form CSS style.
	$self->{'css_image_grid'} = 'image-grid';

	# Image border color callback.
	$self->{'img_border_color_cb'} = undef;

	# Image border width (in pixels).
	$self->{'img_border_width'} = undef;

	# Image link callback.
	$self->{'img_link_cb'} = undef;

	# Image select callback.
	$self->{'img_select_cb'} = undef;

	# Image src callback across data object.
	$self->{'img_src_cb'} = undef;

	# Image width in pixels.
	$self->{'img_width'} = 340;

	# Image grid title.
	$self->{'title'} = undef;

	# Process params.
	set_params($self, @{$object_params_ar});

	# Check callback codes.
	$self->_check_callback('img_border_color_cb');
	$self->_check_callback('img_link_cb');
	$self->_check_callback('img_select_cb');
	$self->_check_callback('img_src_cb');

	# Object.
	return $self;
}

sub _check_callback {
	my ($self, $callback_key) = @_;

	if (defined $self->{$callback_key}
		&& ref $self->{$callback_key} ne 'CODE') {

		err "Parameter '$callback_key' must be a code.";
	}

	return;
}

sub _check_images {
	my ($self, $images_ar) = @_;

	foreach my $image (@{$images_ar}) {
		if (! blessed($image) && ! $image->isa('Data::Image')) {

			err 'Bad data image object.';
		}
	}

	return;
}

# Process 'Tags'.
sub _process {
	my ($self, $images_ar) = @_;

	$self->_check_images($images_ar);

	$self->{'tags'}->put(
		['b', 'div'],
		['a', 'class', $self->{'css_image_grid'}],

		['b', 'div'],
		['a', 'class', $self->{'css_image_grid'}.'-inner'],
	);
	if (defined $self->{'title'}) {
		$self->{'tags'}->put(
			['b', 'fieldset'],
			['b', 'legend'],
			['d', $self->{'title'}],
			['e', 'legend'],
		);
	}
	foreach my $image (@{$images_ar}) {

		# Begin of image link.
		if (defined $self->{'img_link_cb'}) {
			$self->{'tags'}->put(
				['b', 'a'],
				['a', 'href', $self->{'img_link_cb'}->($image)],
			);
		}

		# Begin of figure.
		$self->{'tags'}->put(
			['b', 'figure'],
		);

		# Select information.
		if (defined $self->{'img_select_cb'}) {
			my $select_hr = $self->{'img_select_cb'}->($self, $image);
			if (ref $select_hr eq 'HASH' && exists $select_hr->{'value'}) {
				$select_hr->{'css_background_color'} ||= 'lightgreen';
				$self->{'tags'}->put(
					['b', 'i'],
					['a', 'class', 'selected'],
					['a', 'style', 'background-color: '.$select_hr->{'css_background_color'}.';'],
					exists $select_hr->{'value'} ? (
						['d', $select_hr->{'value'}],
					) : (),
					['e', 'i'],
				);
			}
		}

		# Image.
		my $image_url;
		if (defined $image->url) {
			$image_url = $image->url;
		} elsif (defined $image->url_cb) {
			$image_url = $image->url_cb->($image);
		} elsif (defined $self->{'img_src_cb'}) {
			$image_url = $self->{'img_src_cb'}->($image);
		} else {
			err 'No image URL.';
		}
		my $img_style;
		if (defined $self->{'img_border_width'} && defined $self->{'img_border_color_cb'}) {
			my $border_color = $self->{'img_border_color_cb'}->($self, $image);
			if (defined $border_color) {
				$img_style = 'border:'.$self->{'img_border_width'}.'px solid '.$border_color.';';
			}
		}
		$self->{'tags'}->put(
			['b', 'img'],
			defined $img_style ? (
				['a', 'style', $img_style],
				['a', 'class', 'border'],
			) : (),
			['a', 'src', $image_url],
			['e', 'img'],
		);

		# Image comment.
		if (defined $image->comment) {
			$self->{'tags'}->put(
				['b', 'figcaption'],
				['d', $image->comment],
				['e', 'figcaption'],
			);
		}

		# Enf of figure.
		$self->{'tags'}->put(
			['e', 'figure'],
		);

		# End of image link.
		if (defined $self->{'img_link_cb'}) {
			$self->{'tags'}->put(
				['e', 'a'],
			);
		}
	}
	if (defined $self->{'title'}) {
		$self->{'tags'}->put(
			['e', 'fieldset'],
		);
	}
	$self->{'tags'}->put(
		['e', 'div'],
		['e', 'div'],
	);

	return;
}

sub _process_css {
	my $self = shift;

	# Compute image width and height.
	my ($img_width, $img_height) = ($self->{'img_width'}, $self->{'img_width'});
	if (defined $self->{'img_border_width'}) {
		$img_width -= 2 * $self->{'img_border_width'};
		$img_height -= 2 * $self->{'img_border_width'};
	}

	$self->{'css'}->put(

		# Grid center on page.
		['s', '.'.$self->{'css_image_grid'}],
		['d', 'display', 'flex'],
		['d', 'align-items', 'center'],
		['d', 'justify-content', 'center'],
		['e'],

		# 4 columns in grid.
		['s', '.'.$self->{'css_image_grid'}.'-inner'],
		['d', 'display', 'grid'],
		['d', 'grid-gap', '1px'],
		['d', 'grid-template-columns', 'repeat(4, '.$self->{'img_width'}.'px)'],
		['e'],

		# Create rectangle.
		['s', '.'.$self->{'css_image_grid'}.' figure'],
		['d', 'object-fit', 'cover'],
		['d', 'width', $self->{'img_width'}.'px'],
		['d', 'height', $self->{'img_width'}.'px'],
		['d', 'position', 'relative'],
		['d', 'overflow', 'hidden'],
		['d', 'margin', 0],
		['d', 'padding', 0],
		['e'],

		['s', '.'.$self->{'css_image_grid'}.' img'],
		['d', 'object-fit', 'cover'],
		['d', 'width', '100%'],
		['d', 'height', '100%'],
		['d', 'vertical-align', 'middle'],
		['e'],

		['s', '.'.$self->{'css_image_grid'}.' img.border'],
		['d', 'object-fit', 'cover'],
		['d', 'width', $img_width.'px'],
		['d', 'height', $img_height.'px'],
		['d', 'vertical-align', 'middle'],
		['e'],

		['s', '.'.$self->{'css_image_grid'}.' figcaption'],
		['d', 'margin', 0],
		['d', 'padding', '1em'],
		['d', 'position', 'absolute'],
		['d', 'z-index', 1],
		['d', 'bottom', 0],
		['d', 'left', 0],
		['d', 'width', '100%'],
		['d', 'max-height', '100%'],
		['d', 'overflow', 'auto'],
		['d', 'box-sizing', 'border-box'],
		['d', 'transition', 'transform 0.5s'],
		['d', 'transform', 'translateY(100%)'],
		['d', 'background', 'rgba(0, 0, 0, 0.7)'],
		['d', 'color', 'rgb(255, 255, 255)'],
		['e'],

		['s', '.'.$self->{'css_image_grid'}.' figure:hover figcaption'],
		['d', 'transform', 'translateY(0%)'],
		['e'],

		['s', '.'.$self->{'css_image_grid'}.' .selected'],
		['d', 'border', '1px solid black'],
		['d', 'border-radius', '0.5em'],
		['d', 'color', 'black'],
		['d', 'padding', '0.5em'],
		['d', 'position', 'absolute'],
		['d', 'right', '10px'],
		['d', 'top', '10px'],
		['e'],
	);

	return;
}

1;

__END__