Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (135 sloc) 8.84 KB
<!DOCTYPE html>
<html lang="en"<% if (htmlWebpackPlugin.options.MODE_DEV_SERVER) { /** only in devserver, so that there wont be any manifest referenced */ %> manifest="none"<% } %>>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="manifest" href="<%= require('./manifest.json') %>">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s -->
<link rel="apple-touch-icon" sizes="120x120" href="<%= require('./assets/images/icons/apple-touch-icon-120x120.png') %>">
<!-- iPhone 6 Plus and iPhone 6s Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="<%= require('./assets/images/icons/apple-touch-icon-180x180.png') %>">
<% if (!htmlWebpackPlugin.options.MODE_DEV_SERVER) { %><link href="<%= webpack.assetsByChunkName['main'][1] %>" rel="stylesheet"><% } %>
</head>
<body class="<%= htmlWebpackPlugin.options.MODE %>">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#/">RxJS - experiments</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/multitouch-mouse-drag">Multitouch/Mouse drag</a></li>
<li><a href="#/accelerometer">Accelerometer</a></li>
<li><a href="#/router">lite-router</a></li>
<li><a href="#/progressive">Progressive</a></li>
</ul>
</div>
</div>
</nav>
<% if (htmlWebpackPlugin.options.MODE === 'offline') { %><span class="glyphicon glyphicon-plane" aria-hidden="true" title="offline mode"></span><% } %>
<ul class="site-networks">
<li class="twitter">
<a href="https://twitter.com/topheman" title="@topheman on twitter">
<span class="icon"></span>
<span class="desc">Twitter</span>
</a>
</li>
<li class="github">
<a href="https://github.com/topheman/rxjs-experiments" title="Fork on github">
<span class="icon"></span>
<span class="desc">Github</span>
</a>
</li>
</ul>
</div>
<div id="generic-container" style="display: none;">
<div id="home-content" class="container" style="display: none;">
<% if (false && htmlWebpackPlugin.options.MODE_DEV_SERVER === true && htmlWebpackPlugin.options.STRICT === true) { %>
<div class="alert alert-warning" style="margin-top: 20px;">
<p><strong>Warning:</strong> This site is using a service worker, so you'll have to shortcut it to take advantage of the live-reload. In your developer tools:</p>
<ul>
<li>Go to Application/Service Workers</li>
<li>Check "Update on reload"</li>
</ul>
<p>Please checkout <a href="https://youtu.be/IWgNn1kqrsA?list=PLOU2XLYxmsILKwwASNS0xgfcmakbK_8JZ" title="Progressive Web App DevTools , Totally Tooling Tips (S3 Mini Tip)" style="font-weight: bold;">this video</a>, a great resource on how to develop with service workers / appcache ...</p>
<p>If you want to run the app without the warnings, just use the <code>STRICT</code> flag, by running <code>STRICT=false npm start</code> for example.</p>
</div>
<% } %>
<% if (htmlWebpackPlugin.options.MODE === 'offline') { %>
<div class="alert alert-info" style="margin-top: 20px;">
<p>You're running the offline version of this site - check the <span class="glyphicon glyphicon-plane" aria-hidden="true" title="offline mode"></span> icon in the header.</p>
</div>
<% } %>
<img id="qr-code" src="<%= require('./assets/images/qr-code.png') %>"/>
<p style="margin-top: 20px;" class="lead"><i>Latest update</i>: added <strong>offline</strong> support and <strong>progressive app features</strong> - <a href="#/progressive" title="Progressive app features" style="font-weight: bold;">check it out!</a></p>
<p>
<a href="https://github.com/Reactive-Extensions/RxJS">RxJS</a> is a set of libraries that lets you do <strong>reactive programming</strong> (it exists in many other languages aside of JavaScript). I wanted to try it out (I've been doing a lot of functional programming lately, both share a lot of similar concepts).
</p>
<p>RxJS is really good to simplify the management of events with intermediate state (such as drag'n drop).</p>
<p>So far, I've set up two demos:</p>
<ul class="demo-links">
<li><a href="#/multitouch-mouse-drag" class="btn btn-primary" title="Test the multitouch with rxjs">Multitouch/Mouse based canvas drawing</a></li>
<li><a href="#/accelerometer" class="btn btn-primary" title="Test the accelerometer with rxjs">Accelerometer based screen painting</a></li>
</ul>
<p>No framework is involved, I made a <a href="#/router">lite-router</a> for the routing, based on <code>history</code>.</p>
<p>If you like this project, take a look at <a href="https://topheman.github.io/angular2-sandbox/" title="topheman/angular2-sandbox">topheman/angular2-sandbox</a>, a mix of Angular2, RxJS and ngrx/store.</p>
<% if (htmlWebpackPlugin.options.DEVTOOLS !== null) { %>
<!-- This part will appear if you set DEVTOOLS=true or DEVTOOLS=false when launching an npm task -->
<% if (!htmlWebpackPlugin.options.DEVTOOLS) { %>
<p class="crop" style="margin-top: 30px">
This is the <strong>production version</strong>. If you want to play with the ES6+ original source code:
</p>
<p class="text-center"><strong><a href="./devtools/" title="Test the version with sourcemaps!">I'm a developer, I want to see what's under the hood!</a></strong></p>
<% } else { %>
<p class="crop" style="margin-top: 30px">This is the <strong>Developer version</strong>, containing sourcemaps. <strong>Open your devtools and read/set breakpoints on the original source code!</strong></p>
<p><a href="../" title="Back to the production version">Back to the production version</a></p>
<% } %>
<% } %>
</div>
<div id="other-content"></div><!-- dynamic text markup will go in there (to keep layout) -->
<footer class="container">
<p><span id="copyright-year"<%= (new Date()).getFullYear() %></span> <a href="http://labs.topheman.com/" title="My Projects">labs.topheman.com</a> - Christophe Rosset<%= htmlWebpackPlugin.options.VERSION ? (' - v' + htmlWebpackPlugin.options.VERSION) : '' %></p>
<p id="footer-cache-infos" style="display: none">Service worker version: <%= htmlWebpackPlugin.options.SW_VERSION %></p>
<% if (htmlWebpackPlugin.options.MODE === 'online') { %>
<p>
<iframe width="78px" height="28px" title="Twitter Tweet Button" style="border:0;overflow:hidden;" scrolling="no" src="https://platform.twitter.com/widgets/tweet_button.html?count=none&amp;dnt=false&amp;lang=en&amp;original_referer=http%3A%2F%2Ftopheman.github.io%2Frxjs-experiments%2F&amp;size=l&amp;text=%23RxJS%20experiments%20%23Webpack%20%23Babel&amp;type=share&amp;url=https%3A%2F%2Fgithub.com%2Ftopheman%2Frxjs-experiments%2F&amp;via=topheman" data-reactid=".0.2.0.6"></iframe>
</p>
<% } %>
</footer>
</div>
<div id="app-container"></div><!-- dynamic app markup will go in there (no need for footer) -->
<!-- keep the following lines -->
<% if (htmlWebpackPlugin.options.MODE === 'online') { %>
<!--
Requiring a simple html file that references the manifest.appcache, so that index.html isn't the one which references it.
Reason: index.html will be added to cache in that case and it wouldn't be possible to properly serve offline.html
TLDR: Appcache is fucked up ...
-->
<iframe src="./iframe-inject-appcache-manifest.html" style="display: none"></iframe>
<% } %>
<% if (!htmlWebpackPlugin.options.MODE_DEV_SERVER) { %><script src="<%= Object.prototype.toString.call(webpack.assetsByChunkName['bundle']) === '[object Array]' ? webpack.assetsByChunkName['bundle'][0] : webpack.assetsByChunkName['bundle'] %>"></script><% } %>
<% if (!htmlWebpackPlugin.options.MODE_DEV_SERVER && htmlWebpackPlugin.options.MODE === 'online') { %>
<!-- Google Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-41002835-1']);
_gaq.push(['_setDomainName', 'topheman.github.io']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<% } %>
</body>
</html><%= htmlWebpackPlugin.options.BANNER_HTML %>