Skip to content

Commit

Permalink
Pretty up demo site
Browse files Browse the repository at this point in the history 
* Use bootstrap theme (from CDN)
* Incorporate bootstrap elements
* Improve text & information
* Show off more features
  • Loading branch information
@thybag
thybag committed Jan 30, 2014
1 parent 9fbde1d commit c9b6eda
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 136 deletions.
50 changes: 33 additions & 17 deletions test/index.php
View file
Expand Up @@ -4,30 +4,46 @@
$contents = '
<h1>PJAX-Standalone</h1>
<p>Pjax-Standalone is a standalone implimention of defunkt\'s original
<a href=\'https://github.com/defunkt/jquery-pjax\'>JQuery-PJax</a> plugin which has no dependencies and thus can be dropped in to, and used, on any webpage
you wish, regardless of the JavaScript framework employed (or even if none is used at all).
<p>
Pjax-Standalone is a standalone implementation of defunkt\'s original
<a href=\'https://github.com/defunkt/jquery-pjax\'>jQuery-PJAX</a> plugin. With no external dependencies, PJAX-Standalone can
be dropped into and used on any website, regardless of the JavaScript frameworks in use.
</p>
<h3>About</h3>
<p>
Like its counterpart, PJAX-Standalone is designed to be incredibly easy to setup and add in
to existing web pages. In many sites nothing more will be needed than inclusion of the script in to the page
and a single call to "pjax.connect(\'my_content_div\');"
PJAX Standalone is easy to set up and get working with both new and existing websites. Adding the PJAX-Standalone
JavaScript to the head of your website and calling <code>pjax.connect("id_of_container");</code> is all thats needed
to get it working.
</p>
<p>
By default PJAX-Standalone uses it\'s "smartload" feature in order to work with existing with pages with no server side support for PJAX. If
your server side code is configured to work with PJAX (thus only returning the content needed for rendering) this feature can be
disabled for even more performance gains.</p>
<p>
<strong>Is PJAX-Standlone worth having on my site?</strong><br/>

This comment has been minimized.

Sign in to view

Copy link
@sagotch

sagotch Apr 7, 2014

Missing 'a' in PJAX-Standlone :)
PJAX provides the most benefit if your website design comprises primarily of one main content area, surrounded by a
wrapper (header, footer, aside) that rarely change. Since PJAX only ever has to reload the main container area\'s content, assets such as CSS, JavaScript, images and others will only be loaded once.
</p>
<p>
<strong>How customizable is PJAX-Standalone</strong><br/>
PJAX-Standalone fires a number of events, which can be used to extend its native functionality. Additionally
a number of additional options can be specified in the connect method, in order to further configure how PJAX-Standalone functions.
Documentation on the events and options available in PJAX can be seen in the <a href="https://github.com/thybag/PJAX-Standalone/t">github readme</a>.
</p>
<a name="what"></a>
<h3>What is PJAX</h3>
<p>
PJAX (Push-state AJAX) for the most part is a speed optimisation.
It allows users to navigate your website without ever having to reload
the entire page (or wait for the browser to redraw the main layout)
while still preserving the page titles, permalinks and full back button functionality. Additionally, if
a browser does not support the PJAX feature set, the links will simply work as normal, allowing
it to degrade gracefully without ever impacting the functionality of a website.
PJAX (Push-state AJAX) is a performance optimization, allowing users to browse websites without the overhead of
reloading assets such as CSS & images each time a web page is loaded.
</p>
<p>
PJAX works by using AJAX to "load" pages on behalf of the user, then dynamically swapping the contents of
the "container" for the newly loaded content from the link the user clicked. Unlike older AJAX solution\'s PJAX
fully preserves permalinks and back button functionality. Using progressive enhancement, PJAX will
seamlessly fall back to loading pages in the normal way in older browsers, while newer browsers can make use
of the improved performance.
</p>
';

if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){
Expand Down
12 changes: 8 additions & 4 deletions test/page1.php
View file
@@ -1,11 +1,15 @@
<?php

$title = 'Page 1: Hello Tester';
$title = 'Demo 1: Is it working?';
$contents = '
<h1>Page 1 - Actual time.</h1>
<h1>Demo 1 - Actual time.</h1>
<p>The real time is: <strong>'.date('l jS \of F Y h:i:s A').'</strong>.</p>
<p>If the above time does not match that of the "Loaded at" then this page was requested via PJAX.</p>
<p>Currently this page is simply returning the full HTML version of itself rather than PJAX ready content, although smartLoad fixes this seamlessly.</p>
<p>If the above time does not match that of the "Loaded at" (section on the right) then this page was successfully requested via PJAX.</p>
<p>Currently this page is simply returning the full HTML version of itself rather than PJAX ready content, meaning smartLoad is being used to seamlessly extract only the required content.</p>
<h3>Invoke</h3>
<p>The below button uses the <code>pjax.invoke()</code> method to load the home page (via PJAX if it is supported).</p>
<button onclick="pjax.invoke(\'index.php\', \'content\');" class="btn">Try me</button>
';

//Page 1 returns the full HTML, not the PJAX content and is then correct by the smartLoad feature.
Expand Down
32 changes: 21 additions & 11 deletions test/page2.php
View file
@@ -1,19 +1,29 @@
<?php
$title = 'Page 2: Test data';
$title = 'Demo 2 - Jump links';
$contents = '
<h1>Page 2 - Test data</h1>
<p>Nunc dui massa, <a href="#jump">jump to a section</a> tincidunt non interdum id, <a href="http://local.proj/pjax-standalone/test/page3.php#jump_link_not_same_page">on page 3</a>iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h1>Demo 2 - Jump links</h1>
<p>Nunc dui massa, tincidunt non interdum id, iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nunc dui massa, tincidunt non interdum id, iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<a id="jump"></a><h3>A section</h3>
<p>Nunc dui massa, tincidunt non interdum id, iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nunc dui massa, tincidunt non interdum id, iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nunc dui massa, tincidunt non interdum id, iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>PJAX will automatically ignore jump links found within the same document, so clicking <a href="#hi1">here</a> to
jump to "heading of interest" will not trigger a page reload. But, clicking <a href="index.php#what">this</a> (a link to the "What is PJAX"
section on the home page) will.</p>
<p>If PJAX is unable to load a link <a href="broken page">such as this broken one</a>, the link will be ignored (although the error event will be fired). The demo page is set up to log messages to the
browser console whenever a success, ready or error event is fired.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempor turpis magna, eu placerat odio consectetur vel. In sed arcu vel neque interdum feugiat. Suspendisse non nisl libero. Duis facilisis, libero vitae scelerisque mollis, augue mi sodales mauris, volutpat congue tortor elit ut magna. Sed quis tincidunt diam. Fusce eget lacinia nisi, sit amet tincidunt elit. Nam rutrum tortor eget enim rhoncus, convallis semper sem tincidunt.</p>
<p>Vestibulum non risus ut metus porta consectetur eget sit amet tellus. Morbi ut turpis auctor, euismod sapien nec, sollicitudin augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae commodo lorem. In quis dui lobortis, adipiscing justo vel, feugiat augue. Integer tincidunt ultrices nulla, egestas venenatis eros hendrerit sit amet. Proin ornare orci sit amet magna laoreet vehicula. Nunc consectetur mi at cursus porta. Praesent dictum, magna vel mollis sodales, justo sem sagittis tortor, nec tempor diam ligula sit amet arcu. Vivamus dignissim elementum diam ut rutrum. Donec nec tortor at leo suscipit mattis. Phasellus neque nisi, rutrum eu metus id, aliquet dapibus ante. Aliquam ac metus a ligula scelerisque viverra ac sit amet eros.</p>
<a name="hi1"></a>
<h3>Heading of interest</h3>
<p>Sed ut magna a lorem convallis imperdiet. In hac habitasse platea dictumst. Mauris a fermentum libero, a interdum magna. Sed vestibulum lectus odio, at gravida dui accumsan vehicula. Cras eget magna eget orci aliquet fringilla. Vestibulum lacinia commodo euismod. Ut eget scelerisque mi. Aenean faucibus et neque et accumsan. Aliquam non neque sed ante hendrerit laoreet non ut nibh.</p>
<p>Integer massa erat, lacinia quis felis eget, sodales hendrerit ante. Donec adipiscing arcu elit, id suscipit lacus malesuada id. Quisque nec metus eget massa sollicitudin pulvinar nec in nibh. Nunc nec ultricies lacus. Quisque est nibh, pharetra eget lacus at, aliquam adipiscing eros. Nulla sagittis nunc at euismod congue. Cras a ipsum in eros pharetra iaculis. Cras quis lorem vel magna eleifend sagittis. Maecenas leo lectus, feugiat in lorem ac, imperdiet mollis tellus. Mauris sollicitudin vehicula dui. Nunc sodales lacus vel ipsum consequat, non iaculis augue euismod. Integer facilisis sagittis urna vitae congue. Morbi luctus vehicula scelerisque. Aliquam nisi dolor, consequat ac ante eu, aliquam viverra sem.</p>
<h3>Heading of interest 2</h3>
<p>Cras purus augue, vehicula eu cursus id, vehicula nec ante. Suspendisse ac lectus vitae est pellentesque faucibus sit amet vel erat. Maecenas sem leo, tempus ut tincidunt at, posuere nec massa. Nullam commodo nulla et lobortis rhoncus. Integer aliquam augue et justo laoreet tristique eu eu mauris. Praesent ut urna sed augue auctor ornare at vitae nisl. Aliquam ultrices ante at sapien porta, non semper lacus pellentesque. Aenean placerat eleifend orci eget viverra. Etiam faucibus elit sed sem vestibulum euismod. Nunc blandit sem lorem, ut accumsan sapien consectetur a. Pellentesque sagittis metus eu placerat posuere. Pellentesque eget ultrices eros, ac tincidunt leo. Aenean sagittis mollis interdum.</p>
<p>Nunc dui massa, tincidunt non interdum id, iaculis vitae tellus. Donec et lectus at neque consectetur facilisis nec eget ante. Proin egestas volutpat semper. Mauris aliquam metus eget nibh tincidunt luctus sit amet id mauris. Aliquam vitae ipsum diam, at rutrum arcu. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<button onclick="pjax.invoke(\'index.php\', \'content\');"> go home (test invoke)</button>
';

if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){
Expand Down
16 changes: 8 additions & 8 deletions test/page3.php
View file
@@ -1,19 +1,19 @@
<?php
$title = 'Page 3 - With a drunk cat.';
$title = 'Page 3 - Cat';
$contents = '
<img src="img/cat.jpg" alt="Picture of a drunk cat" style="width:50%;float:right">
<h1>Page 3 - Drunk Cat.</h1>
<h1>Demo 3 - Cat picture.</h1>
<p>
Welcome to demo page 3. Here we see a picture of a drunk cat
(which is totally 100% not at all staged... *shifty eyes*).
</p>
<p>
You\'ll see that along with the url and webpage content, the title has also been updated.
You\'ll see that along with the URL and container content, the title has also been updated.
Using PJAX you can even give pages custom titles, for example
<a href="page2.php" data-title="Custom title!">this link</a>
will open page 2 with the title "Custom title!".
</p>
<hr/>
<h3>A picture of a cat.</h3>
<img src="img/cat.jpg" alt="Picture of a drunk cat" />
<p>There really isn\'t a good reason for this...</p>
';

if(isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true'){
Expand Down
142 changes: 46 additions & 96 deletions test/wrapper.php
View file
Expand Up @@ -6,115 +6,65 @@

<script type="text/javascript" src='../pjax-standalone.js'></script>
<script type='text/javascript'>
//PJAX links!
// Ensure console is defined
if(typeof console === 'undefined') console = {"log":function(m){}};

// PJAX links!
pjax.connect({
'container': 'content',
'beforeSend': function(event){
console.log("before send");
},
'success': function(event){
var url = (typeof event.data !== 'undefined') ? event.data.url : '';
console.log("Sucessfully loaded "+ url);
console.log("Successfully loaded "+ url);
},
'error': function(event){
var url = (typeof event.data !== 'undefined') ? event.data.url : '';
console.log("Could not load "+ url);
},
'ready': function(){
console.log("PJAX loaded!");
}
});
//pjax.connect('content', 'pjaxer');
//pjax.connect('content');
//pjax.connect();

</script>
// pjax.connect('content', 'pjaxer');
// pjax.connect('content');
// pjax.connect();

</script>
<!-- Local styles for Demo -->
<style type='text/css'>
body{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:0.9em;
margin:0;padding:0;
}
.main .header {
background-color:#222;
color:#fff;
padding:8px;
}
.main .header .heading{
width:880px;
margin:0 auto;
}
.main .header h1 {
margin:5px 0;
}
.main .header a {
color:#fff;
}

.body {
padding:0 0px;
background-color:#fff;
}
a {color:#000;}
.body .seperator{
background-color:#222;
padding:4px;
clear:both;
color:#fff;
margin:5px 0;
font-weight:bold;
}
.body .nav {
padding:4px;
background-color:#999;
}
.body .links {
margin:0 auto;
width:900px;
}
.body .links a {
padding:8px;
}
#content {
width:900px; margin:0 auto;
}
.get_button {
background:#666;
padding:10px 15px;
text-decoration:none;
border-radius:4px;
float:right;
margin-top:8px;
background: -webkit-gradient(linear,left top,left bottom, from(#666), to(#444));
background: -moz-linear-gradient(top,#666,#444);
-webkit-box-shadow: inset 0px 1px 1px 0px #888, 0px 2px 2px 0px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px 0px #888, 0px 2px 2px 0px rgba(0,0,0,0.5);
}
.get_button:hover {
background: -webkit-gradient(linear,left top,left bottom, from(#444), to(#555));
background: -moz-linear-gradient(top,#444,#555);
}
</style>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootswatch/3.0.3/cosmo/bootstrap.min.css" media="screen" />

</head>
<body>
<div class='main'>
<div class='header'>

<div class='heading'>
<div class='get'><a target='_blank' href='https://github.com/thybag/PJAX-Standalone' class='get_button' >Get the Source</a></div>
<h1>PJAX-Standalone Test Page</h1>
Loaded at: <?php echo date('l jS \of F Y h:i:s A'); ?>
</div>
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<a href="." class="navbar-brand">PJAX Standalone</a>
</div>
<ul class="nav navbar-nav" style='margin-left:20px;'>
<li><a href='.' data-pjax='content'>Home</a></li>
<li><a href='page1.php' data-pjax='content'>demo 1</a></li>
<li><a href='page2.php' data-pjax='content'>demo 2</a></li>
<li><a href='page3.php?test=test' class='no'>demo 3</a></li>
</ul>
</div>
<div class='container'>
<div id='content' class='col-sm-8'>
<?php echo $contents; ?>
</div>
<div class='body'>
<div class='nav'>
<div class='links'>
<a href='.' data-pjax='content'>Home</a>
<a href='page1.php' data-pjax='content'>Page 1</a>
<a href='page2.php' data-pjax='content'>Page 2</a>
<a href='page3.php?test=test'>Page 3</a>
</div>
</div>
<div id='content'>
<?php echo $contents; ?>
</div>
<div class='col-sm-4'>
<p class='well'><strong>Loaded at:</strong><br/> <?php echo date('l jS \of F Y h:i:s A'); ?></p>
<p>
<a href='https://github.com/thybag/PJAX-Standalone' class='btn btn-block btn-primary'>Get the Source</a>
</p>
<p>PJAX-Standalone is licensed under the MIT License.</p>

<p>Install with <a href='http://bower.io/'>bower</a>:</p>
<p><code>bower install pjax-standalone</code></p>

<hr />
<p>Full documentation for using PJAX-Standalone can be found in the <a href='https://github.com/thybag/PJAX-Standalone'>github readme file</a>.</p>
</div>
</div>
<script>
//document.getElementById("content").addEventListener('complete', function(e){ console.log(e); }, false);
</script>
</body>
</html>

0 comments on commit c9b6eda

Please sign in to comment.