phile / user-agent
A plugin for Phile to expose browser user-agent data to the template.
Installs: 13
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 3
Forks: 2
Open Issues: 0
Type:phile-plugin
Requires
This package is auto-updated.
Last update: 2024-11-29 04:19:46 UTC
README
A plugin for Phile to expose browser user-agent data to the template.
1.1 Installation (composer)
php composer.phar require phile/user-agent:*
1.2 Installation (Download)
- Install the latest version of Phile
- Clone this repo into
plugins/phile/userAgent
2. Activation
After you have installed the plugin. You need to add the following line to your config.php
file:
$config['plugins']['phile\\userAgent'] = array('active' => true);
Usage
This plugin will create a new variable in your template called {{ useragent }}
.
You can use this varaible to load conditional content, add special classes, or even modify your javascript.
Exposed Infomation
Here is an example (from my laptop) of the full useragent array:
array( 'useragent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.6 Safari/537.36', // full useragent string 'name' => 'Google Chrome', // name of the browser 'browser' => 'google-chrome', // css safe browser name 'version' => '32.0.1700.6', // browser version number 'type' => 'desktop', // form factor browser || mobile 'platform' => 'mac', // Operating System 'pattern' => '#(?<browser>Version|Chrome|other)[/ ]+(?<version>[0-9.|a-zA-Z.]*)#' // regex pattern that matched );
Conditional Content
{% if useragent.type == 'desktop' %} <div class="desktop-header-image"> <img src="images/desktop.jpg" alt="desktop screenshot"> </div> {% else %} <div class="mobile-header-image"> <img src="images/mobile.jpg" alt="mobile screenshot"> </div> {% endif %}
Special Classes
<body class="{{ useragent.platform }} {{ useragent.type }}"> <div class="content"> {{ content }} </div> </body>
Javascript Additions
If we put this code in the head of our document, we can encode the {{ useragent }}
array as json and use it in our javascript:
<script type="text/javascript"> window.Phile.useragent = {{ useragent|json_encode() }}; </script>
Now Phile.useragent.browser
would return the CSS safe browser name in our javascript.