JQuery-Mobile

 view release on metacpan or  search on metacpan

lib/JQuery/Mobile.pm  view on Meta::CPAN

package JQuery::Mobile;
use strict;
use warnings;
no warnings 'uninitialized';
use Exporter 'import';
our @EXPORT_OK = qw(new head header footer table panel popup page pages form listview collapsible collapsible_set navbar button controlgroup input rangeslider select checkbox radio textarea);

use Clone qw(clone);
use HTML::Entities qw(encode_entities);

our $VERSION = 0.03;
# 54.4

sub new {
	my ($class, %args) = (@_);
	my $self = bless {}, $class;

lib/JQuery/Mobile.pm  view on Meta::CPAN

		'navbar-item-data-attribute' => ['ajax', 'icon', 'iconpos', 'iconshadow','prefetch', 'theme'],
		'page-html-attribute' => ['id', 'class'],
		# combine data-attributes for page and dialog
		'page-data-attribute' => ['add-back-btn', 'back-btn-text', 'back-btn-theme', 'close-btn', 'close-btn-text', 'corners', 'dom-cache', 'enhance', 'overlay-theme', 'role', 'shadow','theme', 'title', 'tolerance', 'url'],
		'table-html-attribute' => ['id', 'class'],
		'table-data-attribute' => ['mode'],
		'table-head-html-attribute' => ['id', 'class'],
		'table-head-data-attribute' => ['priority'],
		'panel-html-attribute' => ['id', 'class'],
		'panel-data-attribute' => ['corners', 'overlay-theme', 'shadow', 'theme', 'tolerance', 'position-to', 'rel', 'role', 'transition'],
		'popup-html-attribute' => ['id', 'class'],
		'popup-data-attribute' => ['animate', 'dismissible', 'display', 'position', 'position-fixed', 'swipe-close', 'role', 'theme'],
		'listview-html-attribute' => ['id', 'class'],
		'listview-data-attribute' => ['autodividers', 'count-theme', 'divider-theme', 'enhance', 'filter', 'filter-placeholder', 'filter-reveal', 'filter-theme', 'filtertext', 'header-theme', 'inset', 'split-icon', 'split-theme', 'theme'],
		'listview-item-html-attribute' => ['id', 'class'],
		'listview-item-data-attribute' => ['ajax', 'mini', 'rel', 'theme', 'transition'],
		'collapsible-html-attribute' => ['id', 'class'],
		'collapsible-data-attribute' => ['collapsed', 'collapsed-icon', 'content-theme', 'expanded-icon', 'iconpos', 'inset', 'mini', 'theme'],
		'collapsible-set-html-attribute' => ['id', 'class'],
		'collapsible-set-data-attribute' => ['collapsed-icon', 'content-theme', 'expanded-icon', 'iconpos', 'inset', 'mini', 'theme'],
		'controlgroup-html-attribute' => ['id', 'class'],
		'controlgroup-data-attribute' => ['enhance', 'iconpos', 'mini', 'theme', 'type'],

lib/JQuery/Mobile.pm  view on Meta::CPAN

		$args{content} .=  '          </tbody>';
	}

	my $attributes = _html_attribute('', $self->{config}->{'table-html-attribute'}, \%args);
	$attributes = _data_attribute($attributes, $self->{config}->{'table-data-attribute'}, \%args);

	my $table = '        <table data-role="table"' . $attributes . '>' . "\n" . $args{content} . "\n" . '        </table>' . "\n";
	return $table;
}

sub popup {
	my ($self, %args) = @_;

	$args{content} ||= '          <p>Popup Content</p>';
	$args{role} = 'popup';

	my $attributes = _html_attribute('', $self->{config}->{'popup-html-attribute'}, \%args);
	$attributes = _data_attribute($attributes, $self->{config}->{'popup-data-attribute'}, \%args);

	my $popup = '        <div' . $attributes . '>' . "\n";
	$popup .= $args{content} . "\n";
	$popup .= '        </div><!-- /popup -->' . "\n";

	return $popup;
}

sub page {
	my ($self, %args) = @_;

	$args{content} ||= '        <p>Page Content</p>';
	$args{role} ||= 'page';

	my $attributes = _html_attribute('', $self->{config}->{'page-html-attribute'}, \%args);
	$attributes = _data_attribute($attributes, $self->{config}->{'page-data-attribute'}, \%args);

lib/JQuery/Mobile.pm  view on Meta::CPAN

    config => {
      'header-footer-html-attribute' => ['id', 'class'],
      'header-footer-data-attribute' => ['id', 'fullscreen', 'position', 'theme'],
      'navbar-html-attribute' => ['id', 'class'],
      'navbar-data-attribute' => ['disable-page-zoom', 'enhance', 'fullscreen', 'iconpos', 'tap-toggle', 'theme', 'transition', 'update-page-padding', 'visible-on-page-show'],
      'navbar-item-html-attribute' => ['id', 'class', 'target'],
      'navbar-item-data-attribute' => ['ajax', 'icon', 'iconpos', 'iconshadow','prefetch', 'theme'],
      'page-html-attribute' => ['id', 'class'],
      # combine data-attributes for page and dialog
      'page-data-attribute' => ['add-back-btn', 'back-btn-text', 'back-btn-theme', 'close-btn', 'close-btn-text', 'corners', 'dom-cache', 'enhance', 'overlay-theme', 'role', 'shadow','theme', 'title', 'tolerance', 'url'],
      'popup-html-attribute' => ['id', 'class'],
      'popup-data-attribute' => ['corners', 'overlay-theme', 'shadow', 'theme', 'tolerance', 'position-to', 'rel', 'role', 'transition'],
      'listview-html-attribute' => ['id', 'class'],
      'listview-data-attribute' => ['autodividers', 'count-theme', 'divider-theme', 'enhance', 'filter', 'filter-placeholder', 'filter-theme', 'filtertext', 'header-theme', 'inset', 'split-icon', 'split-theme', 'theme'],
      'listview-item-html-attribute' => ['id', 'class'],
      'listview-item-data-attribute' => ['ajax', 'mini', 'rel', 'theme', 'transition'],
      'collapsible-html-attribute' => ['id', 'class'],
      'collapsible-data-attribute' => ['collapsed', 'collapsed-icon', 'content-theme', 'expanded-icon', 'iconpos', 'inset', 'mini', 'theme'],
      'collapsible-set-html-attribute' => ['id', 'class'],
      'collapsible-set-data-attribute' => ['collapsed-icon', 'content-theme', 'expanded-icon', 'iconpos', 'inset', 'mini', 'theme'],
      'controlgroup-html-attribute' => ['id', 'class'],
      'controlgroup-data-attribute' => ['enhance', 'iconpos', 'theme', 'type'],

lib/JQuery/Mobile.pm  view on Meta::CPAN

=head2 C<footer>

Similar to C<header()>, C<footer()> generates footer toolbars. Attributes defined in C<header-footer-html-attribute> and C<header-footer-data-attribute> can be passed to C<footer()>.

  print $jquery_mobile->footer(
    position => 'fixed',
    content => 'Footer content'
  );

=head2 C<popup>

C<popup()> generates popup container divs. Content can be passed via the C<content> parameter:

  my $popup = $jquery_mobile->popup(id => 'popup', content => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit');

Attributes defined in C<popup-html-attribute> and C<popup-data-attribute> can be passed to C<popup()>.
Please note that as of writing (jQuery Mobile 1.2), according to the jQuery Mobile website, popups "must live within the page wrapper (for now)".

=head2 C<page>

C<page()> generates a container divs. It accepts the following parameters:

=over

=item C<role>

C<role> can be either "page" or "dialog", defaulted to "page".

t/render.t  view on Meta::CPAN

#!perl -T

use strict;
use warnings;
use Test::More;

plan tests => 64;

use_ok('JQuery::Mobile');

can_ok('JQuery::Mobile', qw(new head header footer table panel popup page pages form listview collapsible collapsible_set navbar button controlgroup input rangeslider select checkbox radio textarea));

my $jquery_mobile = JQuery::Mobile->new(
	config => {
		'app-title' => 'Hello Mobile World', 
		'app-js' => ['https://raw.github.com/dannyglue/jQuery-Mobilevalidate/master/jquery.mobilevalidate.min.js'],
		'app-inline-js' => '$(document).bind("pageinit", function(){
			$("form").mobilevalidate({novalidate: true});
		});',
		'label' => sub {
			my $args = shift;

t/render.t  view on Meta::CPAN

like ($custom_header, qr/<h1>Header Content<\/h1>/, 'Customised Header Content');
like ($custom_header, qr/<\/div>/, 'Customised Header End');

my $footer = $jquery_mobile->footer(
	position => 'fixed',
	content => 'Footer content'
);
like ($footer, qr/<div data-role="footer" data-position="fixed">/, 'Footer Start');
like ($footer, qr/<\/div>/, 'Footer End');

my $popup = $jquery_mobile->popup(id => 'popup', content => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit');
like ($popup, qr/<div id="popup" data-role="popup">/, 'Popup Start');
like ($popup, qr/<\/div>/, 'Popup End');


my $panel = $jquery_mobile->panel(content => 'Panel Content');
like ($panel, qr/<div data-role="panel">/, 'Panel');

my $page = $jquery_mobile->page(
	header => {
		content => $jquery_mobile->button(href => '#', value => 'Home', icon => 'home', iconpos => 'notext') . '<h1>Main Title</h1>',
	},
	footer => {