jnjxp/html

This package is abandoned and no longer maintained. The author suggests using the aura/html package instead.

helpers for html stuff

v0.2.17 2015-05-07 21:02 UTC

Requires

• php: >=5.3.0
• aura/html: ~2.1

Requires (Dev)

• phpunit/phpunit: 3.7.*
• squizlabs/php_codesniffer: ~2.3

AGPL-3.0

• jake johns

README

jnjxp\html is an extension of Aura.Html.

Installation

$ composer require jnjxp/html

Usage

Instantiate helper locator.

use Jnjxp\Html\Factory as HtmlFactory;

$helper = (new HtmlFactory())->newInstance();

// example calling the icon helper
$helper->icon('foo');
$helper->icon->__invoke('foo');
$helper('icon','foo');

Helpers

See the Aura.Html documentation (tag and input) for base functionality.

• Breadcrumb
• CacheBust
• Icon
• Links
• Metas
• Modal
• Scripts
• Styles
• Title

Helpers Usage

Breadcrumb

Create an HTML navigational breadcrumb

$helper->breadcrumb(['id' => 'test']);  // (array) optional attributes

// add a single item to be escaped
$helper->breadcrumb()
    ->item('Home', '/', ['class' => 'foo']); // (title, uri, attributes)

// add several items to be escaped
$helper->breadcrumb()->items(
    [ // key as uri value as title or array of attributes with title as first key
        '/' => 'Home',
        '/foo' => [ 'Foo', 'class' => 'foo']
        'Bar' // numeric index, URI defaults to "#"
    ]
);

// add a single raw item not to be escaped
$helper->breadcrumb()->rawItem('<span>Home</span>', '/', ['class' => 'foo']);

// add several raw items not to be escaped
$helper->breadcrumb()->items(
    [
        '/' => '<span>Home</span>',
        '/foo' => ['Foo', 'class' => 'foo']
        'Bar'
    ]
);

Output Example:

<nav aria-label="breadcrumb" role="navigation">
    <ol id="test" itemscope class="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
        <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
            <a href="/" itemprop="item"><span itemprop="name">Home</span></a>
            <meta itemprop="position" content="1" />
        </li>
        <li class="foo" itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
            <a href="/foo" itemprop="item"><span itemprop="name">Foo</span></a>
            <meta itemprop="position" content="2" />
        </li>
        <li class="active" itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
            <a href="#" itemprop="item"><span itemprop="name">Bar</span></a>
            <meta itemprop="position" content="3" />
        </li>
    </ol>
</nav>

CacheBust

Get a version suffixed file based on json manifest.

Example manifest (eg located at: /var/www/build/rev-manifest.json):

{
  "assets/js/app.js": "assets/js/app-a9341845.js",
  "assets/css/style.css": "assets/css/style-ca20fa46.css"
}

// set path to public root
$helper->cacheBust->setPublic('/var/www');

// returns /build/assets/js/app-a9341845.js
$helper->cacheBust('assets/js/app.js', 'build/rev-manifest.json');

// can set a default manifest as well
$helper->cacheBust->setDefaultManifest('build/rev-manifest.json');
$helper->cacheBust('assets/js/app.js');

Icon

Create some markup suitable for styling as an icon (eg. glyphicons or fontawesome)

echo $helper->icon('edit');
echo $helper->icon('edit', 'Edit Entry');
echo $helper->icon('edit', true);

Outputs:

<span class="icon icon-edit" aria-hidden="true"><!-- --></span>

<span class="icon icon-edit" aria-hidden="true"><!-- --></span> <span class="sr-only">Edit Entry</span>

<span class="icon icon-edit" aria-hidden="true"><!-- --></span> <span class="sr-only">edit</span>

Links

Links helper. (see Aura\Html\Helper\Links Documentation for core function)

$helper->links->icons();
echo $helper->links;

// can pass array to override defaults:
$icons = [
    'apple-touch-icon' => [
        'pattern' => '/assets/ico/apple-touch-icon-%sx%1$s.png',
        'sizes' => [144, 114, 72, 57]
    ],
    'icon' => [
        'pattern' => '/assets/ico/favicon-%sx%1$s.png',
        'sizes' => [192, 96, 32, 16],
        'attr' => ['type' => 'image/png']
    ]
];

$helper->links->icons($icons);

Outputs:

<link rel="apple-touch-icon" sizes="144x144" href="/assets/ico/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/ico/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/ico/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/assets/ico/apple-touch-icon-57x57.png" />
<link rel="icon" sizes="192x192" href="/assets/ico/favicon-192x192.png" type="image/png" />
<link rel="icon" sizes="96x96" href="/assets/ico/favicon-96x96.png" type="image/png" />
<link rel="icon" sizes="32x32" href="/assets/ico/favicon-32x32.png" type="image/png" />
<link rel="icon" sizes="16x16" href="/assets/ico/favicon-16x16.png" type="image/png" />

Metas

Add meta tags (see Aura\Html\Helper\Metas Documentation for core function)

$helper->metas()
    ->addProperty('foo', 'bar')
    ->addOpenGraphProperty('foo', 'bar')
    ->charset() // pass arg to override default
    ->compat() // pass arg to override default
    ->description('description here')
    ->loc() // pass arg to override default
    ->robots('noindex, follow') // no arg? defaults to 'index, follow'
    ->url('http://example.com')
    ->viewport() // pass arg to override default
    ->image('/image.png');

echo $helper->metas();

Outputs:

<meta charset="UTF-8" />
<meta property="foo" content="bar" />
<meta property="og:foo" content="bar" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" property="og:description" content="description here" />
<meta property="og:locale" content="en_US" />
<meta name="robots" content="noindex, follow" />
<meta property="og:url" content="http://example.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="image" property="og:image" content="/image.png" />
<link rel="image_src" href="/image.png" />

Modal

Bootstrap Modal

echo $helper->modal(['attr' => ['id' => 'test']])
    ->setTitle('Test Modal')
    ->setBody('Body Here')
    ->setFooter('Modal Footer')
    ->setButton('Launch', ['class' => 'btn-success']);

// Or...

echo $helper->modal(
    [
        'attr'   => ['id' => 'test'],
        'title'  => 'Test Modal',
        'body'   => 'Body Here',
        'footer' => 'Modal Footer',
        'button' => ['Launch', ['class' => 'btn-sucess']]
    ]
);

Outputs:

<button class="btn-success" type="button" data-toggle="modal" data-target="#test">
    Launch
</button>
<div id="test" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="test-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="test-label">Test Modal</h4>
            </div>
            <div class="modal-body">
                Body Here
            </div>
            <div class="modal-footer">
                Modal Footer
            </div>
        </div>
    </div>
</div>

Scripts

Scripts helper

$helper->scripts->bust()
    ->setPublic('/var/www/')
    ->setDefaultManifest('build/rev-manifest.json');

$helper->scripts->bust()->add('assets/js/app.js');

$helper->scripts->addInline('alert("foo")');
$helper->scripts->addEventListener('function(){alert("foo")}');

$helper->scripts->addEventListener(
    'alert(event.type)', // snippet
    'click', // event type
    'document.document.getElementById("test")', // target
    true // wrap snippet in function?
);

$helper->scripts->inlineCaptureStart();
echo 'alert("foo")';
$helper->scripts->captureEnd();


$helper->scripts->eventCaptureStart();
// can take same args as addEventListener
echo 'alert("foo")';
$helper->scripts->captureEnd();

echo $helper->scripts;

Outputs:

<script src="/build/assets/js/app-a9341845.js" type="text/javascript"></script>
<script type="text/javascript">alert("foo")</script>
<script type="text/javascript">document.addEventListener("DOMContentLoaded", function(){alert("foo")});</script>
<script type="text/javascript">document.document.getElementById("test").addEventListener("click", function(event) { alert(event.type) });</script>
<script type="text/javascript">alert("foo")</script>
<script type="text/javascript">document.addEventListener("DOMContentLoaded", alert("foo"));</script>

Styles

Styles helper (see Aura\Html\Helper\Styles Documentation for core function)

$helper->styles->bust()
    ->setPublic('/var/www/')
    ->setDefaultManifest('build/rev-manifest.json');

$helper->styles->bust()->add('assets/css/style.css');

$helper->styles->addInline('.test{color:red;}');

$helper->styles->inlineCaptureStart();
echo ".test{color:red;}";
$helper->styles->captureEnd();

echo $helper->styles;

Outputs:

    <link rel="stylesheet" href="/build/assets/css/style-ca20fa46.css" type="text/css" media="screen" />
    <style type="text/css" media="screen">.test{color:red;}</style>
    <style type="text/css" media="screen">.test{color:red;}</style>

Title

Title helper (see Aura\Html\Helper\Title Documentation for core function)

$helper->title
    ->set('Page Title')
    ->setSite('Site Title');

echo $helper->title;

Outputs:

<title>Page Title</title>
<meta name="title" property="og:title" content="Page Title" />
<meta property="og:site_name" content="Site Title" />