├── examples
    ├── jquery-bootstrap
    │   ├── css
    │   │   └── example.css
    │   ├── index.html
    │   ├── js
    │   │   └── app.js
    │   └── thirdparty
    │   │   └── bootstrap.min.js
    ├── ballmer-peak
    │   ├── ballmer_peak.png
    │   ├── example.js
    │   └── index.html
    ├── server-rendering
    │   ├── jsapp
    │   │   ├── src
    │   │   │   └── App.js
    │   │   └── package.json
    │   ├── reactserver
    │   │   ├── package.json
    │   │   └── server.js
    │   ├── webapp
    │   │   └── index.php
    │   └── README.md
    ├── requirejs
    │   └── build
    │   │   ├── app.js
    │   │   └── example-component.js
    ├── basic-commonjs
    │   ├── README.md
    │   ├── package.json
    │   ├── index.js
    │   └── index.html
    ├── jquery-mobile
    │   ├── README.md
    │   ├── index.html
    │   └── js
    │   │   └── app.js
    ├── README.md
    ├── basic-jsx-external
    │   ├── example.js
    │   └── index.html
    ├── basic-jsx-precompile
    │   ├── example.js
    │   └── index.html
    ├── shared
    │   ├── thirdparty
    │   │   ├── console-polyfill.js
    │   │   ├── es5-sham.min.js
    │   │   └── es5-shim.min.js
    │   └── css
    │   │   └── base.css
    ├── transitions
    │   ├── transition.css
    │   └── index.html
    ├── basic-jsx-harmony
    │   └── index.html
    ├── basic-jsx
    │   └── index.html
    └── basic
    │   └── index.html
├── .gitignore
├── react-0.12.2.Rproj
├── react_tutorial_in_R.Rproj
├── README.md
├── hello_world.R
├── LICENSE
├── tutorial1.R
├── tutorial11.R
├── tutorial2.R
├── tutorial3.R
├── tutorial4.R
├── tutorial5.R
├── tutorial6.R
├── tutorial7.R
├── tutorial8.R
├── tutorial9.R
├── tutorial10.R
├── tutorial12.R
├── tutorial13.R
└── tutorial14.R


/examples/jquery-bootstrap/css/example.css:
--------------------------------------------------------------------------------
1 | .example {
2 |   margin: 20px;
3 | }


--------------------------------------------------------------------------------
/examples/ballmer-peak/ballmer_peak.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/timelyportfolio/react_tutorial_in_R/HEAD/examples/ballmer-peak/ballmer_peak.png


--------------------------------------------------------------------------------
/examples/server-rendering/jsapp/src/App.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var App = React.createClass({
 4 |   render: function() {
 5 |     return <h1>Hello {this.props.name}!</h1>;
 6 |   }
 7 | });
 8 | 
 9 | module.exports = App;
10 | 


--------------------------------------------------------------------------------
/examples/requirejs/build/app.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * @jsx React.DOM
3 |  */
4 | require(['build/example-component'], function(ExampleComponent){
5 |   "use strict";
6 | 
7 |   React.renderComponent(ExampleComponent(null ), document.getElementById('container'));
8 | });


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .Rproj.user
 2 | .Rhistory
 3 | .RData
 4 | =======
 5 | # History files
 6 | .Rhistory
 7 | 
 8 | # Example code in package build process
 9 | *-Ex.R
10 | 
11 | # R data files from past sessions
12 | .Rdata
13 | 
14 | # RStudio files
15 | .Rproj.user/
16 | 


--------------------------------------------------------------------------------
/react-0.12.2.Rproj:
--------------------------------------------------------------------------------
 1 | Version: 1.0
 2 | 
 3 | RestoreWorkspace: Default
 4 | SaveWorkspace: Default
 5 | AlwaysSaveHistory: Default
 6 | 
 7 | EnableCodeIndexing: Yes
 8 | UseSpacesForTab: Yes
 9 | NumSpacesForTab: 2
10 | Encoding: UTF-8
11 | 
12 | RnwWeave: Sweave
13 | LaTeX: XeLaTeX
14 | 


--------------------------------------------------------------------------------
/react_tutorial_in_R.Rproj:
--------------------------------------------------------------------------------
 1 | Version: 1.0
 2 | 
 3 | RestoreWorkspace: Default
 4 | SaveWorkspace: Default
 5 | AlwaysSaveHistory: Default
 6 | 
 7 | EnableCodeIndexing: Yes
 8 | UseSpacesForTab: Yes
 9 | NumSpacesForTab: 2
10 | Encoding: UTF-8
11 | 
12 | RnwWeave: Sweave
13 | LaTeX: XeLaTeX
14 | 


--------------------------------------------------------------------------------
/examples/basic-commonjs/README.md:
--------------------------------------------------------------------------------
1 | # Basic example of using React with Browserify
2 | 
3 | Run `npm install` in the directory to install React from npm. Then run:
4 | 
5 |     ./node_modules/.bin/browserify --debug --transform reactify ./index.js > ./bundle.js
6 | 
7 | to produce `bundle.js` with example code and React.
8 | 


--------------------------------------------------------------------------------
/examples/jquery-mobile/README.md:
--------------------------------------------------------------------------------
1 | jQuery Mobile React Example
2 | ===========================
3 | 
4 | This example demonstrates how jQuery Mobile applications can be built with React.
5 | 
6 | The source code is based on jQuery Mobile's [pages-multi-page example](https://github.com/jquery/jquery-mobile/tree/master/demos/pages-multi-page).
7 | 


--------------------------------------------------------------------------------
/examples/requirejs/build/example-component.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @jsx React.DOM
 3 |  */
 4 | define([], function () {
 5 |   "use strict";
 6 | 
 7 |   var ExampleComponent = React.createClass({displayName: 'ExampleComponent',
 8 | 
 9 |     render:function(){
10 |       return React.DOM.div(null, "Simple RequireJS Example");
11 |     }
12 | 
13 |   });
14 | 
15 |   return ExampleComponent;
16 | });


--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # React Examples
2 | 
3 | Here are some small React demos. Some use [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) and some include third-party library integration.
4 | 
5 | For more fully-featured examples, check out [React TodoMVC](http://todomvc.com/architecture-examples/react/) and [React + Backbone TodoMVC](http://todomvc.com/labs/architecture-examples/react-backbone/).
6 | 


--------------------------------------------------------------------------------
/examples/basic-commonjs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-basic-commonjs-example",
 3 |   "description": "Basic example of using React with CommonJS",
 4 |   "main": "index.js",
 5 |   "devDependencies": {
 6 |     "browserify": "^6.3.3",
 7 |     "envify": "^3.2.0",
 8 |     "react": "^0.12.0",
 9 |     "reactify": "^0.17.1"
10 |   },
11 |   "scripts": {
12 |     "build": "browserify --debug --transform reactify index.js > bundle.js"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/examples/server-rendering/reactserver/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-server",
 3 |   "version": "0.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "cd ../jsapp && node ../reactserver/server.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "dependencies": {
11 |     "envify": "^3.0.0",
12 |     "react": "^0.12.0",
13 |     "express": "^3.5.1",
14 |     "node-jsx": "^0.12.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/server-rendering/jsapp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-js-app",
 3 |   "version": "0.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "dependencies": {
11 |     "envify": "^3.0.0",
12 |     "react": "^0.12.0",
13 |     "browserify": "^3.38.0",
14 |     "reactify": "^0.15.0"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/basic-jsx-external/example.js:
--------------------------------------------------------------------------------
 1 | var ExampleApplication = React.createClass({
 2 |   render: function() {
 3 |     var elapsed = Math.round(this.props.elapsed  / 100);
 4 |     var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
 5 |     var message =
 6 |       'React has been successfully running for ' + seconds + ' seconds.';
 7 | 
 8 |     return <p>{message}</p>;
 9 |   }
10 | });
11 | 
12 | var start = new Date().getTime();
13 | 
14 | setInterval(function() {
15 |   React.render(
16 |     <ExampleApplication elapsed={new Date().getTime() - start} />,
17 |     document.getElementById('container')
18 |   );
19 | }, 50);
20 | 


--------------------------------------------------------------------------------
/examples/basic-jsx-precompile/example.js:
--------------------------------------------------------------------------------
 1 | var ExampleApplication = React.createClass({
 2 |   render: function() {
 3 |     var elapsed = Math.round(this.props.elapsed  / 100);
 4 |     var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
 5 |     var message =
 6 |       'React has been successfully running for ' + seconds + ' seconds.';
 7 | 
 8 |     return <p>{message}</p>;
 9 |   }
10 | });
11 | 
12 | var start = new Date().getTime();
13 | 
14 | setInterval(function() {
15 |   React.render(
16 |     <ExampleApplication elapsed={new Date().getTime() - start} />,
17 |     document.getElementById('container')
18 |   );
19 | }, 50);
20 | 


--------------------------------------------------------------------------------
/examples/basic-commonjs/index.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | 
 3 | var ExampleApplication = React.createClass({
 4 |   render: function() {
 5 |     var elapsed = Math.round(this.props.elapsed  / 100);
 6 |     var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
 7 |     var message =
 8 |       'React has been successfully running for ' + seconds + ' seconds.';
 9 | 
10 |     return <p>{message}</p>;
11 |   }
12 | });
13 | 
14 | var start = new Date().getTime();
15 | 
16 | setInterval(function() {
17 |   React.render(
18 |     <ExampleApplication elapsed={new Date().getTime() - start} />,
19 |     document.getElementById('container')
20 |   );
21 | }, 50);
22 | 


--------------------------------------------------------------------------------
/examples/shared/thirdparty/console-polyfill.js:
--------------------------------------------------------------------------------
 1 | // Console-polyfill. MIT license.
 2 | // https://github.com/paulmillr/console-polyfill
 3 | // Make it safe to do console.log() always.
 4 | (function(con) {
 5 |   'use strict';
 6 |   var prop, method;
 7 |   var empty = {};
 8 |   var dummy = function() {};
 9 |   var properties = 'memory'.split(',');
10 |   var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
11 |      'groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,' +
12 |      'table,time,timeEnd,timeStamp,trace,warn').split(',');
13 |   while (prop = properties.pop()) con[prop] = con[prop] || empty;
14 |   while (method = methods.pop()) con[method] = con[method] || dummy;
15 | })(this.console = this.console || {}); // Using `this` for web workers.
16 | 


--------------------------------------------------------------------------------
/examples/server-rendering/reactserver/server.js:
--------------------------------------------------------------------------------
 1 | var React = require('react');
 2 | var express = require('express');
 3 | var path = require('path');
 4 | 
 5 | // Transparently support JSX
 6 | require('node-jsx').install();
 7 | 
 8 | var app = express();
 9 | 
10 | // All the render server does is take a CommonJS module ID and some JSON props
11 | // in the querystring and return a static HTML representation of the component.
12 | // Note that this is a backend service hit by your actual web app. Even so,
13 | // you would probably put Varnish in front of this in production.
14 | app.get('/', function(req, res){
15 |   var component = require(path.resolve(req.query['module']));
16 |   var props = JSON.parse(req.query['props'] || '{}');
17 | 
18 |   res.send(React.renderToString(component(props)));
19 | });
20 | 
21 | app.listen(3000);
22 | 


--------------------------------------------------------------------------------
/examples/transitions/transition.css:
--------------------------------------------------------------------------------
 1 | .example-enter,
 2 | .example-leave {
 3 |   -webkit-transition: all .25s;
 4 |   transition: all .25s;
 5 | }
 6 | 
 7 | .example-enter,
 8 | .example-leave.example-leave-active {
 9 |   opacity: 0.01;
10 | }
11 | 
12 | .example-leave.example-leave-active {
13 |   margin-left: -128px;
14 | }
15 | 
16 | .example-enter {
17 |   margin-left: 128px;
18 | }
19 | 
20 | .example-enter.example-enter-active,
21 | .example-leave {
22 |   margin-left: 0;
23 |   opacity: 1;
24 | }
25 | 
26 | .animateExample {
27 |   display: block;
28 |   height: 128px;
29 |   position: relative;
30 |   width: 384px;
31 | }
32 | 
33 | .animateItem {
34 |   color: white;
35 |   font-size: 36px;
36 |   font-weight: bold;
37 |   height: 128px;
38 |   line-height: 128px;
39 |   position: absolute;
40 |   text-align: center;
41 |   -webkit-transition: all .25s; /* TODO: make this a move animation */
42 |   transition: all .25s; /* TODO: make this a move animation */
43 |   width: 128px;
44 | }
45 | 


--------------------------------------------------------------------------------
/examples/jquery-bootstrap/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 | 	<title>jQuery Integration</title>
 7 |   <link rel="stylesheet" href="thirdparty/bootstrap.min.css" type="text/css" />
 8 |   <link rel="stylesheet" href="css/example.css" type="text/css" />
 9 | </head>
10 | <body>
11 |     <div id="jqueryexample"></div>
12 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
13 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
14 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
15 |     <script src="../../build/react.js"></script>
16 |     <script src="../../build/JSXTransformer.js"></script>
17 |     <script type="text/javascript" src="../shared/thirdparty/jquery.min.js" charset="utf-8"></script>
18 |     <script type="text/javascript" src="thirdparty/bootstrap.min.js" charset="utf-8"></script>
19 |     <script type="text/jsx" src="js/app.js"></script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/examples/jquery-mobile/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <title>jQuery Mobile React Example</title>
 8 |   <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
 9 |   <link rel="stylesheet" href="//demos.jquerymobile.com/1.4.0/_assets/css/jqm-demos.css" />
10 | </head>
11 | <body class="ui-mobile-viewport ui-overlay-a">
12 |   <div id="content"></div>
13 |   <script src="../shared/thirdparty/es5-shim.min.js"></script>
14 |   <script src="../shared/thirdparty/es5-sham.min.js"></script>
15 |   <script src="../shared/thirdparty/console-polyfill.js"></script>
16 |   <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
17 |   <script src="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
18 |   <script src="../../build/react.js"></script>
19 |   <script type="text/javascript" src="js/app.js"></script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/examples/shared/css/base.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fff;
 3 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
 4 |   font-size: 15px;
 5 |   line-height: 1.7;
 6 |   margin: 0;
 7 |   padding: 30px;
 8 | }
 9 | 
10 | a {
11 |   color: #4183c4;
12 |   text-decoration: none;
13 | }
14 | 
15 | a:hover {
16 |   text-decoration: underline;
17 | }
18 | 
19 | code {
20 |   background-color: #f8f8f8;
21 |   border: 1px solid #ddd;
22 |   border-radius: 3px;
23 |   font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
24 |   font-size: 12px;
25 |   margin: 0 2px;
26 |   padding: 0px 5px;
27 | }
28 | 
29 | h1, h2, h3, h4 {
30 |   font-weight: bold;
31 |   margin: 0 0 15px;
32 |   padding: 0;
33 | }
34 | 
35 | h1 {
36 |   border-bottom: 1px solid #ddd;
37 |   font-size: 2.5em;
38 |   font-weight: bold;
39 |   margin: 0 0 15px;
40 |   padding: 0;
41 | }
42 | 
43 | h2 {
44 |   border-bottom: 1px solid #eee;
45 |   font-size: 2em;
46 | }
47 | 
48 | h3 {
49 |   font-size: 1.5em;
50 | }
51 | 
52 | h4 {
53 |   font-size: 1.2em;
54 | }
55 | 
56 | p, ul {
57 |   margin: 15px 0;
58 | }
59 | 
60 | ul {
61 |   padding-left: 30px;
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## React Tutorial in R with htmltools
 2 | 
 3 | Complete the tutorial [Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html) in R using the [`htmltools`](https://github.com/rstudio/htmltools) package.  Please note that most of this is copied and pasted from the tutorial, so nearly all attribution belongs to the original authors from the Facebook React Team and is [BSD licensed](./LICENSE).  Content regarding licensing has been retained below.  For the tiny bits/pieces/translations that I have added, the [MIT license](./LICENSE) applies.
 4 | 
 5 | 
 6 | ## Original Important Contents of Facebook Readme.md
 7 | ### License
 8 | 
 9 | React is [BSD licensed](https://github.com/facebook/react/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/facebook/react/blob/master/PATENTS).
10 | 
11 | React documentation is [Creative Commons licensed](https://github.com/facebook/react/blob/master/LICENSE-docs).
12 | 
13 | Examples provided in this repository and in the documentation are [separately licensed](https://github.com/facebook/react/blob/master/LICENSE-examples).
14 | 
15 | 


--------------------------------------------------------------------------------
/hello_world.R:
--------------------------------------------------------------------------------
 1 | library(htmltools)
 2 | library(pipeR)
 3 | 
 4 | tagList(
 5 |   tags$div(
 6 |     id = "example"
 7 |   )
 8 |   ,tags$script(type = "text/babel"
 9 |     ,"
10 |       ReactDOM.render(
11 |         <h1>Hello, world!</h1>,
12 |         document.getElementById('example')
13 |       );
14 |     " %>>% HTML
15 |   )
16 | ) %>>%
17 |   attachDependencies(list(
18 |     htmlDependency(
19 |       name = "react"
20 |       ,version = "0.14.8"
21 |       ,src = c(paste0(getwd(),"/build"))
22 |       ,script = c("react.min.js","react-dom.min.js")
23 |     )
24 |     ,htmlDependency(
25 |       name = "babel-browser"
26 |       ,version = "5.8.23"
27 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
28 |       ,script = c("browser.min.js")
29 |     )
30 |   )) %>>%
31 |   html_print
32 | 
33 | 
34 | # using reactR
35 | # devtools::install_github("timelyportfolio/reactR")
36 | 
37 | library(reactR)
38 | library(htmltools)
39 | 
40 | tagList(
41 |   tags$div(id = "example")
42 |   ,tags$script(babel_transform(
43 | "
44 |       ReactDOM.render(
45 |         <h1>Hello, world!</h1>,
46 |         document.getElementById('example')
47 |       );
48 | "
49 |   ))
50 | ) %>>%
51 |   attachDependencies(html_dependency_react()) %>>%
52 |   browsable()
53 | 


--------------------------------------------------------------------------------
/examples/ballmer-peak/example.js:
--------------------------------------------------------------------------------
 1 | function computeBallmerPeak(x) {
 2 |   // see: http://ask.metafilter.com/76859/Make-a-function-of-this-graph-Thats-like-an-antigraph
 3 |   x = x * 100;
 4 |   return (
 5 |     1-1/(1+Math.exp(-(x-6)))*.5 + Math.exp(-Math.pow(Math.abs(x-10), 2)*10)
 6 |   ) / 1.6;
 7 | }
 8 | 
 9 | function percentage(x) {
10 |   return isNaN(x) ? 'N/A' : (100 - Math.round(x * 100)) + '%';
11 | }
12 | 
13 | var BallmerPeakCalculator = React.createClass({
14 |   getInitialState: function() {
15 |     return {bac: 0};
16 |   },
17 |   handleChange: function(event) {
18 |     this.setState({bac: event.target.value});
19 |   },
20 |   render: function() {
21 |     var pct = percentage(computeBallmerPeak(this.state.bac));
22 |     return (
23 |       <div>
24 |         <img src="./ballmer_peak.png" />
25 |         <p>Credit due to <a href="http://xkcd.com/323/">xkcd</a>.</p>
26 |         <h4>Compute your Ballmer Peak:</h4>
27 |         <p>
28 |           If your BAC is{' '}
29 |           <input type="text" onChange={this.handleChange} value={this.state.bac} />
30 |           {', '}then <b>{pct}</b> of your lines of code will be bug free.
31 |         </p>
32 |       </div>
33 |     );
34 |   }
35 | });
36 | 
37 | React.render(
38 |   <BallmerPeakCalculator />,
39 |   document.getElementById('container')
40 | );
41 | 


--------------------------------------------------------------------------------
/examples/basic-jsx-precompile/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Basic Example with Precompiled JSX</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 |   <body>
 9 |     <h1>Basic Example with Precompiled JSX</h1>
10 |     <div id="container">
11 |       <p>
12 |         If you can see this, React is not running. Try running:
13 |       </p>
14 |       <pre>npm install -g react-tools
15 | cd examples/basic-jsx-precompile/
16 | jsx . build/</pre>
17 |     </div>
18 |     <h4>Example Details</h4>
19 |     <p>This is written with JSX in a separate file and precompiled to vanilla JS by running:</p>
20 |     <pre>npm install -g react-tools
21 | cd examples/basic-jsx-precompile/
22 | jsx . build/</pre>
23 |     <p>
24 |       Learn more about React at
25 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26 |     </p>
27 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
28 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
29 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
30 |     <script src="../../build/react.js"></script>
31 |     <script src="build/example.js"></script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/examples/basic-commonjs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Basic CommonJS Example with Browserify</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 |   <body>
 9 |     <h1>Basic CommonJS Example with Browserify</h1>
10 |     <div id="container">
11 |       <p>
12 |         To install React, follow the instructions on
13 |         <a href="http://www.github.com/facebook/react/">GitHub</a>.
14 |       </p>
15 |       <p>
16 |         If you can see this, React is not working right.
17 |         If you checked out the source from GitHub make sure to run <code>grunt</code>.
18 |       </p>
19 |     </div>
20 |     <h4>Example Details</h4>
21 |     <p>This is written with JSX in a CommonJS module and precompiled to vanilla JS by running:</p>
22 |     <pre>browserify --debug --transform reactify index.js &gt; bundle.js</pre>
23 |     <p>
24 |       Learn more about React at
25 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26 |     </p>
27 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
28 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
29 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
30 |     <script src="bundle.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/examples/ballmer-peak/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Ballmer Peak Calculator</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 |   <body>
 9 |     <h1>Ballmer Peak Calculator</h1>
10 |     <div id="container">
11 |       <p>
12 |         If you can see this, React is not working right. This is probably because you&apos;re viewing
13 |         this on your file system instead of a web server. Try running
14 |         <pre>
15 |           python -m SimpleHTTPServer
16 |         </pre>
17 |         and going to <a href="http://localhost:8000/">http://localhost:8000/</a>.
18 |       </p>
19 |     </div>
20 |     <h4>Example Details</h4>
21 |     <p>This is written with JSX in a separate file and transformed in the browser.</p>
22 |     <p>
23 |       Learn more about React at
24 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 |     </p>
26 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
27 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
28 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
29 |     <script src="../../build/react.js"></script>
30 |     <script src="../../build/JSXTransformer.js"></script>
31 |     <script type="text/jsx" src="example.js"></script>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/examples/basic-jsx-external/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Basic Example with External JSX</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <h1>Basic Example with External JSX</h1>
11 |     <div id="container">
12 |       <p>
13 |         If you can see this, React is not working right. This is probably because you&apos;re viewing
14 |         this on your file system instead of a web server. Try running
15 |         <pre>
16 |           python -m SimpleHTTPServer
17 |         </pre>
18 |         and going to <a href="http://localhost:8000/">http://localhost:8000/</a>.
19 |       </p>
20 |     </div>
21 |     <h4>Example Details</h4>
22 |     <p>This is written with JSX in a separate file and transformed in the browser.</p>
23 |     <p>
24 |       Learn more about React at
25 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26 |     </p>
27 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
28 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
29 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
30 |     <script src="../../build/react.js"></script>
31 |     <script src="../../build/JSXTransformer.js"></script>
32 |     <script type="text/jsx" src="example.js"></script>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | React is [BSD licensed](https://github.com/facebook/react/blob/master/LICENSE). We also provide an additional [patent grant](https://github.com/facebook/react/blob/master/PATENTS).
 2 | 
 3 | React documentation is [Creative Commons licensed](https://github.com/facebook/react/blob/master/LICENSE-docs).
 4 | 
 5 | Examples provided in this repository and in the documentation are [separately licensed](https://github.com/facebook/react/blob/master/LICENSE-examples).
 6 | 
 7 | 
 8 | For the bits/pieces/translations to R, The MIT License (MIT) applies.
 9 | 
10 | Copyright (c) 2015 
11 | 
12 | Permission is hereby granted, free of charge, to any person obtaining a copy
13 | of this software and associated documentation files (the "Software"), to deal
14 | in the Software without restriction, including without limitation the rights
15 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
16 | copies of the Software, and to permit persons to whom the Software is
17 | furnished to do so, subject to the following conditions:
18 | 
19 | The above copyright notice and this permission notice shall be included in all
20 | copies or substantial portions of the Software.
21 | 
22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
28 | SOFTWARE.
29 | 
30 | 


--------------------------------------------------------------------------------
/examples/server-rendering/webapp/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | // URL to the box running `node server.js`
 4 | define('RENDER_SERVER', 'http://localhost:3000/');
 5 | 
 6 | function react_component($module, $props) {
 7 |   $props_json = json_encode($props);
 8 | 
 9 |   // Try to server-render the component if the service is available.
10 |   // If it isn't, no big deal: the client will transparently render
11 |   // the markup!
12 |   $server_markup = @file_get_contents(
13 |     RENDER_SERVER .
14 |       '?module=' .
15 |       urlencode($module) .
16 |       '&props=' .
17 |       urlencode($props_json)
18 |   );
19 | 
20 |   $container_id = uniqid();
21 | 
22 |   // Generate the code required to run the component on the client.
23 |   // We assume that the Browserify bundle is loaded in the page already
24 |   // and that you used -r to get a global require() function that provides
25 |   // every $module you may request as well as React.
26 |   // Note that this solution is simple but I don't think it scales to
27 |   // multiple large pages very well. For that you'd be better off using
28 |   // webpack.
29 |   $startup_code =
30 |     '<script>require(\'react\').render(require(' .
31 |     json_encode($module) .
32 |     ')(' . $props_json . '), ' .
33 |     'document.getElementById(' . json_encode($container_id) . '))' .
34 |     '</script>';
35 | 
36 |   $container_markup = '<div id="' . $container_id . '">' . $server_markup . '</div>';
37 | 
38 |   return $container_markup . $startup_code;
39 | }
40 | ?>
41 | 
42 | <html>
43 |   <head>
44 |     <title>React server rendering example</title>
45 |     <script src="static/bundle.js"></script>
46 |   </head>
47 |   <body>
48 |     Welcome to the React server rendering example. Here is a server-rendered React component:
49 |     <?php echo react_component('./src/App', array('name' => 'Pete')); ?>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/examples/basic-jsx-harmony/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Basic Example with JSX with Harmony</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 |   <body>
 9 |     <h1>Basic Example with JSX with Harmony</h1>
10 |     <div id="container">
11 |       <p>
12 |         To install React, follow the instructions on
13 |         <a href="http://www.github.com/facebook/react/">GitHub</a>.
14 |       </p>
15 |       <p>
16 |         If you can see this, React is not working right.
17 |         If you checked out the source from GitHub make sure to run <code>grunt</code>.
18 |       </p>
19 |     </div>
20 |     <h4>Example Details</h4>
21 |     <p>This is written with JSX with Harmony (ES6) syntax and transformed in the browser.<p>
22 |     <p>
23 |       Learn more about React at
24 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 |     </p>
26 |     <script src="../../build/react.js"></script>
27 |     <script src="../../build/JSXTransformer.js"></script>
28 |     <script type="text/jsx;harmony=true">
29 |       var ExampleApplication = React.createClass({
30 |         render() {
31 |           var elapsed = Math.round(this.props.elapsed  / 100);
32 |           var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
33 |           var message =
34 |             `React has been successfully running for ${seconds} seconds.`;
35 | 
36 |           return <p>{message}</p>;
37 |         }
38 |       });
39 |       var start = new Date().getTime();
40 |       setInterval(() => {
41 |         React.render(
42 |           <ExampleApplication elapsed={new Date().getTime() - start} />,
43 |           document.getElementById('container')
44 |         );
45 |       }, 50);
46 |     </script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/examples/basic-jsx/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Basic Example with JSX</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 |   <body>
 9 |     <h1>Basic Example with JSX</h1>
10 |     <div id="container">
11 |       <p>
12 |         To install React, follow the instructions on
13 |         <a href="http://www.github.com/facebook/react/">GitHub</a>.
14 |       </p>
15 |       <p>
16 |         If you can see this, React is not working right.
17 |         If you checked out the source from GitHub make sure to run <code>grunt</code>.
18 |       </p>
19 |     </div>
20 |     <h4>Example Details</h4>
21 |     <p>This is written with JSX and transformed in the browser.<p>
22 |     <p>
23 |       Learn more about React at
24 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 |     </p>
26 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
27 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
28 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
29 |     <script src="../../build/react.js"></script>
30 |     <script src="../../build/JSXTransformer.js"></script>
31 |     <script type="text/jsx">
32 |       var ExampleApplication = React.createClass({
33 |         render: function() {
34 |           var elapsed = Math.round(this.props.elapsed  / 100);
35 |           var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
36 |           var message =
37 |             'React has been successfully running for ' + seconds + ' seconds.';
38 | 
39 |           return <p>{message}</p>;
40 |         }
41 |       });
42 |       var start = new Date().getTime();
43 |       setInterval(function() {
44 |         React.render(
45 |           <ExampleApplication elapsed={new Date().getTime() - start} />,
46 |           document.getElementById('container')
47 |         );
48 |       }, 50);
49 |     </script>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/examples/basic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Basic Example</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |   </head>
 8 |   <body>
 9 |     <h1>Basic Example</h1>
10 |     <div id="container">
11 |       <p>
12 |         To install React, follow the instructions on
13 |         <a href="http://www.github.com/facebook/react/">GitHub</a>.
14 |       </p>
15 |       <p>
16 |         If you can see this, React is not working right.
17 |         If you checked out the source from GitHub make sure to run <code>grunt</code>.
18 |       </p>
19 |     </div>
20 |     <h4>Example Details</h4>
21 |     <p>This is written in vanilla JavaScript (without JSX) and transformed in the browser.<p>
22 |     <p>
23 |       Learn more about React at
24 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
25 |     </p>
26 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
27 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
28 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
29 |     <script src="../../build/react.js"></script>
30 |     <script>
31 |       var ExampleApplication = React.createClass({
32 |         render: function() {
33 |           var elapsed = Math.round(this.props.elapsed  / 100);
34 |           var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
35 |           var message =
36 |             'React has been successfully running for ' + seconds + ' seconds.';
37 | 
38 |           return React.DOM.p(null, message);
39 |         }
40 |       });
41 | 
42 |       // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
43 |       var ExampleApplicationFactory = React.createFactory(ExampleApplication);
44 | 
45 |       var start = new Date().getTime();
46 |       setInterval(function() {
47 |         React.render(
48 |           ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
49 |           document.getElementById('container')
50 |         );
51 |       }, 50);
52 |     </script>
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/tutorial1.R:
--------------------------------------------------------------------------------
 1 | library(htmltools)
 2 | library(pipeR)
 3 | 
 4 | tagList(
 5 |   tags$div(
 6 |     id = "content"
 7 |   )
 8 | ,tags$script(type = "text/babel"
 9 |     ,'
10 |       // tutorial1.js
11 |       var CommentBox = React.createClass({
12 |         render: function() {
13 |           return (
14 |             <div className="commentBox">
15 |               Hello, world! I am a CommentBox.
16 |             </div>
17 |           );
18 |         }
19 |       });
20 |       ReactDOM.render(
21 |         <CommentBox />,
22 |         document.getElementById("content")
23 |       );
24 |     ' %>>% HTML
25 |   )
26 | ) %>>%
27 |   attachDependencies(list(
28 |     htmlDependency(
29 |       name = "react"
30 |       ,version = "0.14.8"
31 |       ,src = c(paste0(getwd(),"/build"))
32 |       ,script = c("react.min.js","react-dom.min.js")
33 |     )
34 |     ,htmlDependency(
35 |       name = "babel-browser"
36 |       ,version = "5.8.23"
37 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
38 |       ,script = c("browser.min.js")
39 |     )    
40 |     ,htmlDependency(
41 |       name = "jquery"
42 |       ,version = "2.2.0"
43 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
44 |       ,script = c("jquery.min.js")
45 |     )
46 |     ,htmlDependency(
47 |       name = "marked"
48 |       ,version = "0.3.5"
49 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
50 |       ,script = c("marked.min.js")
51 |     )    
52 |   )) %>>%
53 |   html_print
54 | 
55 | 
56 | # use reactR --------------------------------------------------------------
57 | library(htmltools)
58 | library(reactR)
59 | 
60 | tagList(
61 |   tags$div(id = "content"),
62 |   tags$script(babel_transform(
63 | '
64 |  // tutorial1.js
65 |  var CommentBox = React.createClass({
66 |   render: function() {
67 |     return (
68 |       <div className="commentBox">
69 |         Hello, world! I am a CommentBox.
70 |       </div>
71 |     );
72 |   }
73 |  });
74 |  ReactDOM.render(
75 |   <CommentBox />,
76 |   document.getElementById("content")
77 |  );
78 | '
79 |   ))
80 | ) %>>%
81 |   attachDependencies(list(
82 |     html_dependency_react(),
83 |     htmlDependency(
84 |       name = "jquery"
85 |       ,version = "2.2.0"
86 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
87 |       ,script = c("jquery.min.js")
88 |     ),
89 |     htmlDependency(
90 |       name = "marked"
91 |       ,version = "0.3.5"
92 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
93 |       ,script = c("marked.min.js")
94 |     )    
95 |   )) %>>%
96 |   browsable()
97 | 
98 | 


--------------------------------------------------------------------------------
/examples/transitions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
 5 |     <title>Example with Transitions</title>
 6 |     <link rel="stylesheet" href="../shared/css/base.css" />
 7 |     <link rel="stylesheet" href="transition.css" />
 8 |   </head>
 9 |   <body>
10 |     <h1>Example with Transitions</h1>
11 |     <div id="container">
12 |       <p>
13 |         To install React, follow the instructions on
14 |         <a href="http://www.github.com/facebook/react/">GitHub</a>.
15 |       </p>
16 |       <p>
17 |         If you can see this, React is not working right.
18 |         If you checked out the source from GitHub make sure to run <code>grunt</code>.
19 |       </p>
20 |     </div>
21 |     <h4>Example Details</h4>
22 |     <p>This is written with JSX and transformed in the browser.<p>
23 |     <p>
24 |       Learn more about React at
25 |       <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
26 |     </p>
27 |     <script src="../shared/thirdparty/es5-shim.min.js"></script>
28 |     <script src="../shared/thirdparty/es5-sham.min.js"></script>
29 |     <script src="../shared/thirdparty/console-polyfill.js"></script>
30 |     <script src="../../build/react-with-addons.js"></script>
31 |     <script src="../../build/JSXTransformer.js"></script>
32 |     <script type="text/jsx">
33 |       var CSSTransitionGroup = React.addons.CSSTransitionGroup;
34 |       var INTERVAL = 2000;
35 | 
36 |       var AnimateDemo = React.createClass({
37 |         getInitialState: function() {
38 |           return {start: 0};
39 |         },
40 | 
41 |         componentDidMount: function() {
42 |           this.interval = setInterval(this.tick, INTERVAL);
43 |         },
44 | 
45 |         componentWillUnmount: function() {
46 |           clearInterval(this.interval);
47 |         },
48 | 
49 |         tick: function() {
50 |           this.setState({start: this.state.start + 1});
51 |         },
52 | 
53 |         render: function() {
54 |           var children = [];
55 |           var pos = 0;
56 |           var colors = ['red', 'gray', 'blue'];
57 |           for (var i = this.state.start; i < this.state.start + 3; i++) {
58 |             var style = {
59 |               left: pos * 128,
60 |               background: colors[i % 3]
61 |             };
62 |             pos++;
63 |             children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
64 |           }
65 |           return (
66 |             <CSSTransitionGroup
67 |               className="animateExample"
68 |               transitionName="example">
69 |               {children}
70 |             </CSSTransitionGroup>
71 |           );
72 |         }
73 |       });
74 | 
75 |       React.render(
76 |         <AnimateDemo />,
77 |         document.getElementById('container')
78 |       );
79 |     </script>
80 |   </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/tutorial11.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial9.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList data={this.props.data} />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial10.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         var commentNodes = this.props.data.map(function(comment){
 27 |           return (
 28 |             <Comment author={comment.author} key={comment.id}>
 29 |               {comment.text}
 30 |             </Comment>
 31 |           )
 32 |         });
 33 |         return (
 34 |           <div className="commentList">
 35 |             {commentNodes}
 36 |           </div>
 37 |         );
 38 |       }
 39 |     });
 40 |     
 41 |     var CommentForm = React.createClass({
 42 |       render: function() {
 43 |         return (
 44 |           <div className="commentForm">
 45 |             Hello, world! I am a CommentForm.
 46 |           </div>
 47 |         );
 48 |       }
 49 |     });
 50 |       
 51 |     // tutorial7.js
 52 |     var Comment = React.createClass({
 53 |       rawMarkup: function() {
 54 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 55 |         return { __html: rawMarkup };
 56 |       },
 57 |     
 58 |       render: function() {
 59 |         return (
 60 |           <div className="comment">
 61 |             <h2 className="commentAuthor">
 62 |               {this.props.author}
 63 |             </h2>
 64 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 65 |           </div>
 66 |         );
 67 |       }
 68 |     });
 69 | 
 70 |     // tutorial8.js
 71 |     var data = [
 72 |       {author: "Pete Hunt", text: "This is one comment"},
 73 |       {author: "Jordan Walke", text: "This is *another* comment"}
 74 |     ];
 75 | 
 76 |     // tutorial11.js
 77 |     ReactDOM.render(
 78 |       <CommentBox url="comments.json" />,
 79 |       document.getElementById("content")
 80 |     );
 81 |     
 82 |     ' %>>% HTML
 83 |   )
 84 | ) %>>%
 85 |   attachDependencies(list(
 86 |     htmlDependency(
 87 |       name = "react"
 88 |       ,version = "0.14.8"
 89 |       ,src = c(paste0(getwd(),"/build"))
 90 |       ,script = c("react.min.js","react-dom.min.js")
 91 |     )
 92 |     ,htmlDependency(
 93 |       name = "babel-browser"
 94 |       ,version = "5.8.23"
 95 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 96 |       ,script = c("browser.min.js")
 97 |     )    
 98 |     ,htmlDependency(
 99 |       name = "jquery"
100 |       ,version = "2.2.0"
101 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
102 |       ,script = c("jquery.min.js")
103 |     )
104 |     ,htmlDependency(
105 |       name = "marked"
106 |       ,version = "0.3.5"
107 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
108 |       ,script = c("marked.min.js")
109 |     )
110 |   )) %>>%
111 |   html_print


--------------------------------------------------------------------------------
/examples/server-rendering/README.md:
--------------------------------------------------------------------------------
 1 | # React server rendering example
 2 | 
 3 | This example demonstrates how React's server rendering works. Rather than demonstrate a pure-Node solution, this example shows how an app not written in JavaScript (in this case, PHP) can utilize React's server rendering capabilities.
 4 | 
 5 | ## Overview
 6 | 
 7 | You generally start a React app by doing something like this:
 8 | 
 9 | ```javascript
10 | React.render(<MyComponent someData={...} />, document.getElementById('someContainer'));
11 | ```
12 | 
13 | The problem is that `someContainer` will be an empty HTML element until the JavaScript downloads and executes. This is bad for page load performance (since the user can't see anything until the JS downloads and executes) and is bad for SEO (since the Googlebot can't see any content). React's server rendering solves this problem -- it lets you fill `someContainer` with *static HTML* on the server and "bring it to life" on the client *without* throwing out and re-creating the HTML.
14 | 
15 | In order to do this, you need to do a few things. You need to be able to run JavaScript on the server, and you need to be able to bundle that JavaScript code and send it down to the browser. This example provides one architecture, but there are many ways to do it.
16 | 
17 | ## Architecture overview
18 | 
19 | Let's augment an existing PHP app to support server rendering. This architecture runs an Express-based Node web service to run the JavaScript server side. PHP simply uses `file_get_contents()` to send an HTTP request to this service to get the static HTML string.
20 | 
21 | Browserify is used to run the same code that Node.js is running inside of the browser (aka "isomorphic" JavaScript).
22 | 
23 | ```
24 | +-------------+       +------------------+                                              +----------------------+
25 | |             |       |                  |  ---- HTTP request (module, props JSON) ---> |                      |
26 | | The browser | <---> | Existing PHP App |                                              | Node.js react server |
27 | |             |       |                  |  <--- HTTP response (static HTML string) --- |                      |
28 | +------+------+       +------------------+                                              +----------------------+
29 |        ^                                                                                            ^
30 |        |                                                                                            |
31 |        |              +------------------+                                              +-----------+----------+
32 |        |              |                  |                                              |                      |
33 |        +--------------+    Browserify    | <--------------------------------------------+  App code (CommonJS) |
34 |                       |                  |                                              |                      |
35 |                       +------------------+                                              +----------------------+
36 | ```
37 | 
38 | ## How to run the demo
39 | 
40 |   * `npm install` from `jsapp/` and `reactserver/`.
41 |   * Run `browserify` by doing `npm run build` inside `jsapp/`. This will generate a `webapp/static/bundle.js` file.
42 |   * Run the node server by doing `npm start` inside `reactserver/`.
43 |   * Finally, open `index.php` in your browser (on a webserver running PHP, of course). View-source to see the rendered markup.
44 |   * Kill the `reactserver` and reload `index.php`. You'll notice that the app still works! View-source and you'll see no rendered markup. React is smart enough to recover if server rendering doesn't work.
45 | 


--------------------------------------------------------------------------------
/tutorial2.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial1.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             Hello, world! I am a CommentBox.
 16 |           </div>
 17 |         );
 18 |       }
 19 |     });
 20 | 
 21 |     // tutorial2.js
 22 |     var CommentList = React.createClass({
 23 |       render: function() {
 24 |         return (
 25 |           <div className="commentList">
 26 |             Hello, world! I am a CommentList.
 27 |           </div>
 28 |         );
 29 |       }
 30 |     });
 31 |     
 32 |     var CommentForm = React.createClass({
 33 |       render: function() {
 34 |         return (
 35 |           <div className="commentForm">
 36 |             Hello, world! I am a CommentForm.
 37 |           </div>
 38 |         );
 39 |       }
 40 |     });
 41 | 
 42 |     ReactDOM.render(
 43 |       <CommentBox />,
 44 |       document.getElementById("content")
 45 |     );
 46 |     ' %>>% HTML
 47 |   )
 48 | ) %>>%
 49 |   attachDependencies(list(
 50 |     htmlDependency(
 51 |       name = "react"
 52 |       ,version = "0.14.8"
 53 |       ,src = c(paste0(getwd(),"/build"))
 54 |       ,script = c("react.min.js","react-dom.min.js")
 55 |     )
 56 |     ,htmlDependency(
 57 |       name = "babel-browser"
 58 |       ,version = "5.8.23"
 59 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 60 |       ,script = c("browser.min.js")
 61 |     )    
 62 |     ,htmlDependency(
 63 |       name = "jquery"
 64 |       ,version = "2.2.0"
 65 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 66 |       ,script = c("jquery.min.js")
 67 |     )
 68 |     ,htmlDependency(
 69 |       name = "marked"
 70 |       ,version = "0.3.5"
 71 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
 72 |       ,script = c("marked.min.js")
 73 |     )    
 74 |   )) %>>%
 75 |   html_print
 76 | 
 77 | 
 78 | # use reactR --------------------------------------------------------------
 79 | library(htmltools)
 80 | library(reactR)
 81 | 
 82 | tagList(
 83 |   tags$div(id = "content"),
 84 |   tags$script(babel_transform(
 85 | '
 86 | // tutorial1.js
 87 | var CommentBox = React.createClass({
 88 |   render: function() {
 89 |     return (
 90 |       <div className="commentBox">
 91 |         Hello, world! I am a CommentBox.
 92 |       </div>
 93 |     );
 94 |   }
 95 | });
 96 | 
 97 | // tutorial2.js
 98 | var CommentList = React.createClass({
 99 |   render: function() {
100 |     return (
101 |       <div className="commentList">
102 |         Hello, world! I am a CommentList.
103 |       </div>
104 |     );
105 |   }
106 | });
107 | 
108 | var CommentForm = React.createClass({
109 |   render: function() {
110 |     return (
111 |       <div className="commentForm">
112 |         Hello, world! I am a CommentForm.
113 |       </div>
114 |     );
115 |   }
116 | });
117 | 
118 | ReactDOM.render(
119 |   <CommentBox />,
120 |   document.getElementById("content")
121 | );
122 |     '
123 |   ))
124 | ) %>>%
125 |   attachDependencies(list(
126 |     html_dependency_react(),
127 |     htmlDependency(
128 |       name = "jquery"
129 |       ,version = "2.2.0"
130 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
131 |       ,script = c("jquery.min.js")
132 |     ),
133 |     htmlDependency(
134 |       name = "marked"
135 |       ,version = "0.3.5"
136 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
137 |       ,script = c("marked.min.js")
138 |     )    
139 |   )) %>>%
140 |   browsable()
141 | 
142 | 


--------------------------------------------------------------------------------
/tutorial3.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial3.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial2.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             Hello, world! I am a CommentList.
 29 |           </div>
 30 |         );
 31 |       }
 32 |     });
 33 |     
 34 |     var CommentForm = React.createClass({
 35 |       render: function() {
 36 |         return (
 37 |           <div className="commentForm">
 38 |             Hello, world! I am a CommentForm.
 39 |           </div>
 40 |         );
 41 |       }
 42 |     });
 43 | 
 44 |     ReactDOM.render(
 45 |       <CommentBox />,
 46 |       document.getElementById("content")
 47 |     );
 48 | 
 49 |     ' %>>% HTML
 50 |   )
 51 | ) %>>%
 52 |   attachDependencies(list(
 53 |     htmlDependency(
 54 |       name = "react"
 55 |       ,version = "0.14.8"
 56 |       ,src = c(paste0(getwd(),"/build"))
 57 |       ,script = c("react.min.js","react-dom.min.js")
 58 |     )
 59 |     ,htmlDependency(
 60 |       name = "babel-browser"
 61 |       ,version = "5.8.23"
 62 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 63 |       ,script = c("browser.min.js")
 64 |     )    
 65 |     ,htmlDependency(
 66 |       name = "jquery"
 67 |       ,version = "2.2.0"
 68 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 69 |       ,script = c("jquery.min.js")
 70 |     )
 71 |     ,htmlDependency(
 72 |       name = "marked"
 73 |       ,version = "0.3.5"
 74 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
 75 |       ,script = c("marked.min.js")
 76 |     )
 77 |   )) %>>%
 78 |   html_print
 79 | 
 80 | 
 81 | # use reactR --------------------------------------------------------------
 82 | library(htmltools)
 83 | library(reactR)
 84 | 
 85 | tagList(
 86 |   tags$div(id = "content"),
 87 |   tags$script(babel_transform(
 88 | '
 89 | // tutorial3.js
 90 | var CommentBox = React.createClass({
 91 |   render: function() {
 92 |     return (
 93 |       <div className="commentBox">
 94 |         <h1>Comments</h1>
 95 |         <CommentList />
 96 |         <CommentForm />
 97 |         </div>
 98 |     );
 99 |   }
100 | });
101 | 
102 | // tutorial2.js
103 | var CommentList = React.createClass({
104 |   render: function() {
105 |     return (
106 |       <div className="commentList">
107 |         Hello, world! I am a CommentList.
108 |       </div>
109 |     );
110 |   }
111 | });
112 | 
113 | var CommentForm = React.createClass({
114 |   render: function() {
115 |     return (
116 |       <div className="commentForm">
117 |         Hello, world! I am a CommentForm.
118 |       </div>
119 |     );
120 |   }
121 | });
122 | 
123 | ReactDOM.render(
124 |   <CommentBox />,
125 |   document.getElementById("content")
126 | );
127 | '    
128 | 
129 |   ))
130 | ) %>>%
131 |   attachDependencies(list(
132 |     html_dependency_react(),
133 |     htmlDependency(
134 |       name = "jquery"
135 |       ,version = "2.2.0"
136 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
137 |       ,script = c("jquery.min.js")
138 |     ),
139 |     htmlDependency(
140 |       name = "marked"
141 |       ,version = "0.3.5"
142 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
143 |       ,script = c("marked.min.js")
144 |     )    
145 |   )) %>>%
146 |   browsable()
147 | 
148 | 


--------------------------------------------------------------------------------
/examples/jquery-bootstrap/js/app.js:
--------------------------------------------------------------------------------
  1 | // Simple pure-React component so we don't have to remember
  2 | // Bootstrap's classes
  3 | var BootstrapButton = React.createClass({
  4 |   render: function() {
  5 |     // transferPropsTo() is smart enough to merge classes provided
  6 |     // to this component.
  7 |     return this.transferPropsTo(
  8 |       <a href="javascript:;" role="button" className="btn">
  9 |         {this.props.children}
 10 |       </a>
 11 |     );
 12 |   }
 13 | });
 14 | 
 15 | var BootstrapModal = React.createClass({
 16 |   // The following two methods are the only places we need to
 17 |   // integrate with Bootstrap or jQuery!
 18 |   componentDidMount: function() {
 19 |     // When the component is added, turn it into a modal
 20 |     $(this.getDOMNode())
 21 |       .modal({backdrop: 'static', keyboard: false, show: false})
 22 |   },
 23 |   componentWillUnmount: function() {
 24 |     $(this.getDOMNode()).off('hidden', this.handleHidden);
 25 |   },
 26 |   close: function() {
 27 |     $(this.getDOMNode()).modal('hide');
 28 |   },
 29 |   open: function() {
 30 |     $(this.getDOMNode()).modal('show');
 31 |   },
 32 |   render: function() {
 33 |     var confirmButton = null;
 34 |     var cancelButton = null;
 35 | 
 36 |     if (this.props.confirm) {
 37 |       confirmButton = (
 38 |         <BootstrapButton
 39 |           onClick={this.handleConfirm}
 40 |           className="btn-primary">
 41 |           {this.props.confirm}
 42 |         </BootstrapButton>
 43 |       );
 44 |     }
 45 |     if (this.props.cancel) {
 46 |       cancelButton = (
 47 |         <BootstrapButton onClick={this.handleCancel} className="btn-default">
 48 |           {this.props.cancel}
 49 |         </BootstrapButton>
 50 |       );
 51 |     }
 52 | 
 53 |     return (
 54 |       <div className="modal fade">
 55 |         <div className="modal-dialog">
 56 |           <div className="modal-content">
 57 |             <div className="modal-header">
 58 |               <button
 59 |                 type="button"
 60 |                 className="close"
 61 |                 onClick={this.handleCancel}>
 62 |                 &times;
 63 |               </button>
 64 |               <h3>{this.props.title}</h3>
 65 |             </div>
 66 |             <div className="modal-body">
 67 |               {this.props.children}
 68 |             </div>
 69 |             <div className="modal-footer">
 70 |               {cancelButton}
 71 |               {confirmButton}
 72 |             </div>
 73 |           </div>
 74 |         </div>
 75 |       </div>
 76 |     );
 77 |   },
 78 |   handleCancel: function() {
 79 |     if (this.props.onCancel) {
 80 |       this.props.onCancel();
 81 |     }
 82 |   },
 83 |   handleConfirm: function() {
 84 |     if (this.props.onConfirm) {
 85 |       this.props.onConfirm();
 86 |     }
 87 |   }
 88 | });
 89 | 
 90 | var Example = React.createClass({
 91 |   handleCancel: function() {
 92 |     if (confirm('Are you sure you want to cancel?')) {
 93 |       this.refs.modal.close();
 94 |     }
 95 |   },
 96 |   render: function() {
 97 |     var modal = null;
 98 |     modal = (
 99 |       <BootstrapModal
100 |         ref="modal"
101 |         confirm="OK"
102 |         cancel="Cancel"
103 |         onCancel={this.handleCancel}
104 |         onConfirm={this.closeModal}
105 |         title="Hello, Bootstrap!">
106 |           This is a React component powered by jQuery and Bootstrap!
107 |       </BootstrapModal>
108 |     );
109 |     return (
110 |       <div className="example">
111 |         {modal}
112 |         <BootstrapButton onClick={this.openModal} className="btn-default">
113 |           Open modal
114 |         </BootstrapButton>
115 |       </div>
116 |     );
117 |   },
118 |   openModal: function() {
119 |     this.refs.modal.open();
120 |   },
121 |   closeModal: function() {
122 |     this.refs.modal.close();
123 |   }
124 | });
125 | 
126 | React.render(<Example />, document.getElementById('jqueryexample'));
127 | 


--------------------------------------------------------------------------------
/tutorial4.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial3.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial4.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             <Comment author="Pete Hunt">This is one comment</Comment>
 29 |             <Comment author="Jordan Walke">This is *another* comment</Comment>
 30 |           </div>
 31 |         );
 32 |       }
 33 |     });
 34 |     
 35 |     var CommentForm = React.createClass({
 36 |       render: function() {
 37 |         return (
 38 |           <div className="commentForm">
 39 |             Hello, world! I am a CommentForm.
 40 |           </div>
 41 |         );
 42 |       }
 43 |     });
 44 | 
 45 |     // tutorial5.js
 46 |     var Comment = React.createClass({
 47 |       render: function() {
 48 |         return (
 49 |           <div className="comment">
 50 |             <h2 className="commentAuthor">
 51 |               {this.props.author}
 52 |             </h2>
 53 |             {this.props.children}
 54 |           </div>
 55 |         );
 56 |       }
 57 |     });
 58 | 
 59 |     ReactDOM.render(
 60 |       <CommentBox />,
 61 |       document.getElementById("content")
 62 |     );
 63 | 
 64 |     ' %>>% HTML
 65 |   )
 66 | ) %>>%
 67 |   attachDependencies(list(
 68 |     htmlDependency(
 69 |       name = "react"
 70 |       ,version = "0.14.8"
 71 |       ,src = c(paste0(getwd(),"/build"))
 72 |       ,script = c("react.min.js","react-dom.min.js")
 73 |     )
 74 |     ,htmlDependency(
 75 |       name = "babel-browser"
 76 |       ,version = "5.8.23"
 77 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 78 |       ,script = c("browser.min.js")
 79 |     )    
 80 |     ,htmlDependency(
 81 |       name = "jquery"
 82 |       ,version = "2.2.0"
 83 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 84 |       ,script = c("jquery.min.js")
 85 |     )
 86 |     ,htmlDependency(
 87 |       name = "marked"
 88 |       ,version = "0.3.5"
 89 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
 90 |       ,script = c("marked.min.js")
 91 |     )
 92 |   )) %>>%
 93 |   html_print
 94 | 
 95 | 
 96 | # use reactR --------------------------------------------------------------
 97 | library(htmltools)
 98 | library(reactR)
 99 | 
100 | tagList(
101 |   tags$div(id = "content"),
102 |   tags$script(babel_transform(
103 | '// tutorial3.js
104 | var CommentBox = React.createClass({
105 |   render: function() {
106 |     return (
107 |       <div className="commentBox">
108 |         <h1>Comments</h1>
109 |         <CommentList />
110 |         <CommentForm />
111 |         </div>
112 |     );
113 |   }
114 | });
115 | 
116 | // tutorial4.js
117 | var CommentList = React.createClass({
118 |   render: function() {
119 |     return (
120 |       <div className="commentList">
121 |         <Comment author="Pete Hunt">This is one comment</Comment>
122 |         <Comment author="Jordan Walke">This is *another* comment</Comment>
123 |         </div>
124 |     );
125 |   }
126 | });
127 | 
128 | var CommentForm = React.createClass({
129 |   render: function() {
130 |     return (
131 |       <div className="commentForm">
132 |         Hello, world! I am a CommentForm.
133 |       </div>
134 |     );
135 |   }
136 | });
137 | 
138 | // tutorial5.js
139 | var Comment = React.createClass({
140 |   render: function() {
141 |     return (
142 |       <div className="comment">
143 |         <h2 className="commentAuthor">
144 |         {this.props.author}
145 |       </h2>
146 |       {this.props.children}
147 |       </div>
148 |     );
149 |   }
150 | });
151 | 
152 | ReactDOM.render(
153 |   <CommentBox />,
154 |   document.getElementById("content")
155 | );'
156 |   ))
157 | ) %>>%
158 |   attachDependencies(list(
159 |     html_dependency_react(),
160 |     htmlDependency(
161 |       name = "jquery"
162 |       ,version = "2.2.0"
163 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
164 |       ,script = c("jquery.min.js")
165 |     ),
166 |     htmlDependency(
167 |       name = "marked"
168 |       ,version = "0.3.5"
169 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
170 |       ,script = c("marked.min.js")
171 |     )    
172 |   )) %>>%
173 |   browsable()
174 | 
175 | 


--------------------------------------------------------------------------------
/tutorial5.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial3.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial4.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             <Comment author="Pete Hunt">This is one comment</Comment>
 29 |             <Comment author="Jordan Walke">This is *another* comment</Comment>
 30 |           </div>
 31 |         );
 32 |       }
 33 |     });
 34 |     
 35 |     var CommentForm = React.createClass({
 36 |       render: function() {
 37 |         return (
 38 |           <div className="commentForm">
 39 |             Hello, world! I am a CommentForm.
 40 |           </div>
 41 |         );
 42 |       }
 43 |     });
 44 |   
 45 |     // tutorial5.js
 46 |     var Comment = React.createClass({
 47 |       render: function() {
 48 |         return (
 49 |           <div className="comment">
 50 |             <h2 className="commentAuthor">
 51 |               {this.props.author}
 52 |             </h2>
 53 |             {this.props.children}
 54 |           </div>
 55 |         );
 56 |       }
 57 |     });
 58 | 
 59 |     ReactDOM.render(
 60 |       <CommentBox />,
 61 |       document.getElementById("content")
 62 |     );
 63 |     
 64 |     ' %>>% HTML
 65 | )
 66 |   ) %>>%
 67 |   attachDependencies(list(
 68 |     htmlDependency(
 69 |       name = "react"
 70 |       ,version = "0.14.8"
 71 |       ,src = c(paste0(getwd(),"/build"))
 72 |       ,script = c("react.min.js","react-dom.min.js")
 73 |     )
 74 |     ,htmlDependency(
 75 |       name = "babel-browser"
 76 |       ,version = "5.8.23"
 77 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 78 |       ,script = c("browser.min.js")
 79 |     )    
 80 |     ,htmlDependency(
 81 |       name = "jquery"
 82 |       ,version = "2.2.0"
 83 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 84 |       ,script = c("jquery.min.js")
 85 |     )
 86 |     ,htmlDependency(
 87 |       name = "marked"
 88 |       ,version = "0.3.5"
 89 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
 90 |       ,script = c("marked.min.js")
 91 |     )
 92 |   )) %>>%
 93 |   html_print
 94 | 
 95 | # use reactR --------------------------------------------------------------
 96 | library(htmltools)
 97 | library(reactR)
 98 | 
 99 | 
100 | tagList(
101 |   tags$div(id = "content"),
102 |   tags$script(babel_transform(
103 | '// tutorial3.js
104 | var CommentBox = React.createClass({
105 |   render: function() {
106 |     return (
107 |       <div className="commentBox">
108 |         <h1>Comments</h1>
109 |         <CommentList />
110 |         <CommentForm />
111 |         </div>
112 |     );
113 |   }
114 | });
115 | 
116 | // tutorial4.js
117 | var CommentList = React.createClass({
118 |   render: function() {
119 |     return (
120 |       <div className="commentList">
121 |         <Comment author="Pete Hunt">This is one comment</Comment>
122 |         <Comment author="Jordan Walke">This is *another* comment</Comment>
123 |         </div>
124 |     );
125 |   }
126 | });
127 | 
128 | var CommentForm = React.createClass({
129 |   render: function() {
130 |     return (
131 |       <div className="commentForm">
132 |         Hello, world! I am a CommentForm.
133 |       </div>
134 |     );
135 |   }
136 | });
137 | 
138 | // tutorial5.js
139 | var Comment = React.createClass({
140 |   render: function() {
141 |     return (
142 |       <div className="comment">
143 |         <h2 className="commentAuthor">
144 |         {this.props.author}
145 |       </h2>
146 |       {this.props.children}
147 |       </div>
148 |     );
149 |   }
150 | });
151 | 
152 | ReactDOM.render(
153 |   <CommentBox />,
154 |   document.getElementById("content")
155 | );
156 | '
157 |   ))
158 | ) %>>%
159 |   attachDependencies(list(
160 |     html_dependency_react(),
161 |     htmlDependency(
162 |       name = "jquery"
163 |       ,version = "2.2.0"
164 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
165 |       ,script = c("jquery.min.js")
166 |     ),
167 |     htmlDependency(
168 |       name = "marked"
169 |       ,version = "0.3.5"
170 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
171 |       ,script = c("marked.min.js")
172 |     )    
173 |   )) %>>%
174 |   browsable()
175 | 
176 | 


--------------------------------------------------------------------------------
/tutorial6.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial3.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial4.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             <Comment author="Pete Hunt">This is one comment</Comment>
 29 |             <Comment author="Jordan Walke">This is *another* comment</Comment>
 30 |           </div>
 31 |         );
 32 |       }
 33 |     });
 34 |     
 35 |     var CommentForm = React.createClass({
 36 |       render: function() {
 37 |         return (
 38 |           <div className="commentForm">
 39 |             Hello, world! I am a CommentForm.
 40 |           </div>
 41 |         );
 42 |       }
 43 |     });
 44 |       
 45 |     // tutorial6.js
 46 |     var Comment = React.createClass({
 47 |       render: function() {
 48 |         return (
 49 |           <div className="comment">
 50 |             <h2 className="commentAuthor">
 51 |               {this.props.author}
 52 |             </h2>
 53 |             {marked(this.props.children.toString())}
 54 |           </div>
 55 |         );
 56 |       }
 57 |     });
 58 | 
 59 |     ReactDOM.render(
 60 |       <CommentBox />,
 61 |       document.getElementById("content")
 62 |     );
 63 |     
 64 |     ' %>>% HTML
 65 | )
 66 |   ) %>>%
 67 |   attachDependencies(list(
 68 |     htmlDependency(
 69 |       name = "react"
 70 |       ,version = "0.14.8"
 71 |       ,src = c(paste0(getwd(),"/build"))
 72 |       ,script = c("react.min.js","react-dom.min.js")
 73 |     )
 74 |     ,htmlDependency(
 75 |       name = "babel-browser"
 76 |       ,version = "5.8.23"
 77 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 78 |       ,script = c("browser.min.js")
 79 |     )    
 80 |     ,htmlDependency(
 81 |       name = "jquery"
 82 |       ,version = "2.2.0"
 83 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 84 |       ,script = c("jquery.min.js")
 85 |     )
 86 |     ,htmlDependency(
 87 |       name = "marked"
 88 |       ,version = "0.3.5"
 89 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
 90 |       ,script = c("marked.min.js")
 91 |     )
 92 |   )) %>>%
 93 |   html_print
 94 | 
 95 | 
 96 | # use reactR --------------------------------------------------------------
 97 | library(htmltools)
 98 | library(reactR)
 99 | 
100 | tagList(
101 |   tags$div(id = "content"),
102 |   tags$script(babel_transform(
103 | '// tutorial3.js
104 | var CommentBox = React.createClass({
105 |   render: function() {
106 |     return (
107 |       <div className="commentBox">
108 |         <h1>Comments</h1>
109 |         <CommentList />
110 |         <CommentForm />
111 |       </div>
112 |     );
113 |   }
114 | });
115 | 
116 | // tutorial4.js
117 | var CommentList = React.createClass({
118 |   render: function() {
119 |     return (
120 |       <div className="commentList">
121 |         <Comment author="Pete Hunt">This is one comment</Comment>
122 |         <Comment author="Jordan Walke">This is *another* comment</Comment>
123 |       </div>
124 |     );
125 |   }
126 | });
127 | 
128 | var CommentForm = React.createClass({
129 |   render: function() {
130 |     return (
131 |       <div className="commentForm">
132 |         Hello, world! I am a CommentForm.
133 |       </div>
134 |     );
135 |   }
136 | });
137 | 
138 | // tutorial6.js
139 | var Comment = React.createClass({
140 |   render: function() {
141 |     return (
142 |       <div className="comment">
143 |         <h2 className="commentAuthor">
144 |         {this.props.author}
145 |         </h2>
146 |         {marked(this.props.children.toString())}
147 |       </div>
148 |     );
149 |   }
150 | });
151 | 
152 | ReactDOM.render(
153 |   <CommentBox />,
154 |   document.getElementById("content")
155 | );
156 | '
157 |   ))
158 | ) %>>%
159 |   attachDependencies(list(
160 |     html_dependency_react(),
161 |     htmlDependency(
162 |       name = "jquery"
163 |       ,version = "2.2.0"
164 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
165 |       ,script = c("jquery.min.js")
166 |     ),
167 |     htmlDependency(
168 |       name = "marked"
169 |       ,version = "0.3.5"
170 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
171 |       ,script = c("marked.min.js")
172 |     )    
173 |   )) %>>%
174 |   browsable()
175 | 
176 | 


--------------------------------------------------------------------------------
/tutorial7.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial3.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial4.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             <Comment author="Pete Hunt">This is one comment</Comment>
 29 |             <Comment author="Jordan Walke">This is *another* comment</Comment>
 30 |           </div>
 31 |         );
 32 |       }
 33 |     });
 34 |     
 35 |     var CommentForm = React.createClass({
 36 |       render: function() {
 37 |         return (
 38 |           <div className="commentForm">
 39 |             Hello, world! I am a CommentForm.
 40 |           </div>
 41 |         );
 42 |       }
 43 |     });
 44 |       
 45 |     // tutorial7.js
 46 |     var Comment = React.createClass({
 47 |       rawMarkup: function() {
 48 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 49 |         return { __html: rawMarkup };
 50 |       },
 51 |     
 52 |       render: function() {
 53 |         return (
 54 |           <div className="comment">
 55 |             <h2 className="commentAuthor">
 56 |               {this.props.author}
 57 |             </h2>
 58 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 59 |           </div>
 60 |         );
 61 |       }
 62 |     });
 63 | 
 64 |     ReactDOM.render(
 65 |       <CommentBox />,
 66 |       document.getElementById("content")
 67 |     );
 68 |     
 69 |     ' %>>% HTML
 70 | )
 71 |   ) %>>%
 72 |   attachDependencies(list(
 73 |     htmlDependency(
 74 |       name = "react"
 75 |       ,version = "0.14.8"
 76 |       ,src = c(paste0(getwd(),"/build"))
 77 |       ,script = c("react.min.js","react-dom.min.js")
 78 |     )
 79 |     ,htmlDependency(
 80 |       name = "babel-browser"
 81 |       ,version = "5.8.23"
 82 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 83 |       ,script = c("browser.min.js")
 84 |     )    
 85 |     ,htmlDependency(
 86 |       name = "jquery"
 87 |       ,version = "2.2.0"
 88 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 89 |       ,script = c("jquery.min.js")
 90 |     )
 91 |     ,htmlDependency(
 92 |       name = "marked"
 93 |       ,version = "0.3.5"
 94 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
 95 |       ,script = c("marked.min.js")
 96 |     )
 97 |   )) %>>%
 98 |   html_print
 99 | 
100 | 
101 | 
102 | 
103 | # use reactR --------------------------------------------------------------
104 | library(htmltools)
105 | library(reactR)
106 | 
107 | tagList(
108 |   tags$div(id = "content"),
109 |   tags$script(babel_transform(
110 | '// tutorial3.js
111 | var CommentBox = React.createClass({
112 | render: function() {
113 |   return (
114 |     <div className="commentBox">
115 |       <h1>Comments</h1>
116 |       <CommentList />
117 |       <CommentForm />
118 |       </div>
119 |   );
120 | }
121 | });
122 | 
123 | // tutorial4.js
124 | var CommentList = React.createClass({
125 | render: function() {
126 |   return (
127 |     <div className="commentList">
128 |       <Comment author="Pete Hunt">This is one comment</Comment>
129 |       <Comment author="Jordan Walke">This is *another* comment</Comment>
130 |       </div>
131 |   );
132 | }
133 | });
134 | 
135 | var CommentForm = React.createClass({
136 | render: function() {
137 |   return (
138 |     <div className="commentForm">
139 |       Hello, world! I am a CommentForm.
140 |     </div>
141 |   );
142 | }
143 | });
144 | 
145 | // tutorial7.js
146 | var Comment = React.createClass({
147 | rawMarkup: function() {
148 |   var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
149 |   return { __html: rawMarkup };
150 | },
151 | 
152 | render: function() {
153 |   return (
154 |     <div className="comment">
155 |       <h2 className="commentAuthor">
156 |       {this.props.author}
157 |     </h2>
158 |       <span dangerouslySetInnerHTML={this.rawMarkup()} />
159 |       </div>
160 |   );
161 | }
162 | });
163 | 
164 | ReactDOM.render(
165 | <CommentBox />,
166 | document.getElementById("content")
167 | );
168 | '
169 |   ))
170 | ) %>>%
171 |   attachDependencies(list(
172 |     html_dependency_react(),
173 |     htmlDependency(
174 |       name = "jquery"
175 |       ,version = "2.2.0"
176 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
177 |       ,script = c("jquery.min.js")
178 |     ),
179 |     htmlDependency(
180 |       name = "marked"
181 |       ,version = "0.3.5"
182 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
183 |       ,script = c("marked.min.js")
184 |     )    
185 |   )) %>>%
186 |   browsable()
187 | 
188 | 


--------------------------------------------------------------------------------
/tutorial8.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial3.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial4.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             <Comment author="Pete Hunt">This is one comment</Comment>
 29 |             <Comment author="Jordan Walke">This is *another* comment</Comment>
 30 |           </div>
 31 |         );
 32 |       }
 33 |     });
 34 |     
 35 |     var CommentForm = React.createClass({
 36 |       render: function() {
 37 |         return (
 38 |           <div className="commentForm">
 39 |             Hello, world! I am a CommentForm.
 40 |           </div>
 41 |         );
 42 |       }
 43 |     });
 44 |       
 45 |     // tutorial7.js
 46 |     var Comment = React.createClass({
 47 |       rawMarkup: function() {
 48 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 49 |         return { __html: rawMarkup };
 50 |       },
 51 |     
 52 |       render: function() {
 53 |         return (
 54 |           <div className="comment">
 55 |             <h2 className="commentAuthor">
 56 |               {this.props.author}
 57 |             </h2>
 58 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 59 |           </div>
 60 |         );
 61 |       }
 62 |     });
 63 | 
 64 |     // tutorial8.js
 65 |     var data = [
 66 |       {author: "Pete Hunt", text: "This is one comment"},
 67 |       {author: "Jordan Walke", text: "This is *another* comment"}
 68 |     ];
 69 | 
 70 |     ReactDOM.render(
 71 |       <CommentBox />,
 72 |       document.getElementById("content")
 73 |     );
 74 |     
 75 |     ' %>>% HTML
 76 |   )
 77 | ) %>>%
 78 |   attachDependencies(list(
 79 |     htmlDependency(
 80 |       name = "react"
 81 |       ,version = "0.14.8"
 82 |       ,src = c(paste0(getwd(),"/build"))
 83 |       ,script = c("react.min.js","react-dom.min.js")
 84 |     )
 85 |     ,htmlDependency(
 86 |       name = "babel-browser"
 87 |       ,version = "5.8.23"
 88 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 89 |       ,script = c("browser.min.js")
 90 |     )    
 91 |     ,htmlDependency(
 92 |       name = "jquery"
 93 |       ,version = "2.2.0"
 94 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 95 |       ,script = c("jquery.min.js")
 96 |     )
 97 |     ,htmlDependency(
 98 |       name = "marked"
 99 |       ,version = "0.3.5"
100 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
101 |       ,script = c("marked.min.js")
102 |     )
103 |   )) %>>%
104 |   html_print
105 | 
106 | 
107 | 
108 | # use reactR --------------------------------------------------------------
109 | library(htmltools)
110 | library(reactR)
111 | 
112 | tagList(
113 |   tags$div(id = "content"),
114 |   tags$script(babel_transform(
115 | '// tutorial3.js
116 | var CommentBox = React.createClass({
117 |   render: function() {
118 |     return (
119 |       <div className="commentBox">
120 |         <h1>Comments</h1>
121 |         <CommentList />
122 |         <CommentForm />
123 |         </div>
124 |     );
125 |   }
126 | });
127 | 
128 | // tutorial4.js
129 | var CommentList = React.createClass({
130 |   render: function() {
131 |     return (
132 |       <div className="commentList">
133 |         <Comment author="Pete Hunt">This is one comment</Comment>
134 |         <Comment author="Jordan Walke">This is *another* comment</Comment>
135 |         </div>
136 |     );
137 |   }
138 | });
139 | 
140 | var CommentForm = React.createClass({
141 |   render: function() {
142 |     return (
143 |       <div className="commentForm">
144 |         Hello, world! I am a CommentForm.
145 |       </div>
146 |     );
147 |   }
148 | });
149 | 
150 | // tutorial7.js
151 | var Comment = React.createClass({
152 |   rawMarkup: function() {
153 |     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
154 |     return { __html: rawMarkup };
155 |   },
156 |   
157 |   render: function() {
158 |     return (
159 |       <div className="comment">
160 |         <h2 className="commentAuthor">
161 |         {this.props.author}
162 |       </h2>
163 |         <span dangerouslySetInnerHTML={this.rawMarkup()} />
164 |         </div>
165 |     );
166 |   }
167 | });
168 | 
169 | // tutorial8.js
170 | var data = [
171 |   {author: "Pete Hunt", text: "This is one comment"},
172 |   {author: "Jordan Walke", text: "This is *another* comment"}
173 |   ];
174 | 
175 | ReactDOM.render(
176 |   <CommentBox />,
177 |   document.getElementById("content")
178 | );
179 | '
180 |   ))
181 | ) %>>%
182 |   attachDependencies(list(
183 |     html_dependency_react(),
184 |     htmlDependency(
185 |       name = "jquery"
186 |       ,version = "2.2.0"
187 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
188 |       ,script = c("jquery.min.js")
189 |     ),
190 |     htmlDependency(
191 |       name = "marked"
192 |       ,version = "0.3.5"
193 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
194 |       ,script = c("marked.min.js")
195 |     )    
196 |   )) %>>%
197 |   browsable()
198 | 
199 | 


--------------------------------------------------------------------------------
/tutorial9.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial9.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList data={this.props.data} />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial4.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         return (
 27 |           <div className="commentList">
 28 |             <Comment author="Pete Hunt">This is one comment</Comment>
 29 |             <Comment author="Jordan Walke">This is *another* comment</Comment>
 30 |           </div>
 31 |         );
 32 |       }
 33 |     });
 34 |     
 35 |     var CommentForm = React.createClass({
 36 |       render: function() {
 37 |         return (
 38 |           <div className="commentForm">
 39 |             Hello, world! I am a CommentForm.
 40 |           </div>
 41 |         );
 42 |       }
 43 |     });
 44 |       
 45 |     // tutorial7.js
 46 |     var Comment = React.createClass({
 47 |       rawMarkup: function() {
 48 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 49 |         return { __html: rawMarkup };
 50 |       },
 51 |     
 52 |       render: function() {
 53 |         return (
 54 |           <div className="comment">
 55 |             <h2 className="commentAuthor">
 56 |               {this.props.author}
 57 |             </h2>
 58 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 59 |           </div>
 60 |         );
 61 |       }
 62 |     });
 63 | 
 64 |     // tutorial8.js
 65 |     var data = [
 66 |       {author: "Pete Hunt", text: "This is one comment"},
 67 |       {author: "Jordan Walke", text: "This is *another* comment"}
 68 |     ];
 69 | 
 70 |     ReactDOM.render(
 71 |       <CommentBox data={data}/>,
 72 |       document.getElementById("content")
 73 |     );
 74 |     
 75 |     ' %>>% HTML
 76 |   )
 77 | ) %>>%
 78 |   attachDependencies(list(
 79 |     htmlDependency(
 80 |       name = "react"
 81 |       ,version = "0.14.8"
 82 |       ,src = c(paste0(getwd(),"/build"))
 83 |       ,script = c("react.min.js","react-dom.min.js")
 84 |     )
 85 |     ,htmlDependency(
 86 |       name = "babel-browser"
 87 |       ,version = "5.8.23"
 88 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 89 |       ,script = c("browser.min.js")
 90 |     )    
 91 |     ,htmlDependency(
 92 |       name = "jquery"
 93 |       ,version = "2.2.0"
 94 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
 95 |       ,script = c("jquery.min.js")
 96 |     )
 97 |     ,htmlDependency(
 98 |       name = "marked"
 99 |       ,version = "0.3.5"
100 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
101 |       ,script = c("marked.min.js")
102 |     )
103 |   )) %>>%
104 |   html_print
105 | 
106 | 
107 | 
108 | 
109 | # use reactR --------------------------------------------------------------
110 | library(htmltools)
111 | library(reactR)
112 | 
113 | tagList(
114 |   tags$div(id = "content"),
115 |   tags$script(babel_transform(
116 | '// tutorial9.js
117 | var CommentBox = React.createClass({
118 |   render: function() {
119 |     return (
120 |       <div className="commentBox">
121 |         <h1>Comments</h1>
122 |         <CommentList data={this.props.data} />
123 |         <CommentForm />
124 |         </div>
125 |     );
126 |   }
127 | });
128 | 
129 | // tutorial4.js
130 | var CommentList = React.createClass({
131 |   render: function() {
132 |     return (
133 |       <div className="commentList">
134 |         <Comment author="Pete Hunt">This is one comment</Comment>
135 |         <Comment author="Jordan Walke">This is *another* comment</Comment>
136 |         </div>
137 |     );
138 |   }
139 | });
140 | 
141 | var CommentForm = React.createClass({
142 |   render: function() {
143 |     return (
144 |       <div className="commentForm">
145 |         Hello, world! I am a CommentForm.
146 |       </div>
147 |     );
148 |   }
149 | });
150 | 
151 | // tutorial7.js
152 | var Comment = React.createClass({
153 |   rawMarkup: function() {
154 |     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
155 |     return { __html: rawMarkup };
156 |   },
157 |   
158 |   render: function() {
159 |     return (
160 |       <div className="comment">
161 |         <h2 className="commentAuthor">
162 |         {this.props.author}
163 |       </h2>
164 |         <span dangerouslySetInnerHTML={this.rawMarkup()} />
165 |         </div>
166 |     );
167 |   }
168 | });
169 | 
170 | // tutorial8.js
171 | var data = [
172 |   {author: "Pete Hunt", text: "This is one comment"},
173 |   {author: "Jordan Walke", text: "This is *another* comment"}
174 |   ];
175 | 
176 | ReactDOM.render(
177 |   <CommentBox data={data}/>,
178 |   document.getElementById("content")
179 | );
180 | '
181 |   ))
182 | ) %>>%
183 |   attachDependencies(list(
184 |     html_dependency_react(),
185 |     htmlDependency(
186 |       name = "jquery"
187 |       ,version = "2.2.0"
188 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
189 |       ,script = c("jquery.min.js")
190 |     ),
191 |     htmlDependency(
192 |       name = "marked"
193 |       ,version = "0.3.5"
194 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
195 |       ,script = c("marked.min.js")
196 |     )    
197 |   )) %>>%
198 |   browsable()
199 | 
200 | 


--------------------------------------------------------------------------------
/tutorial10.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial9.js
 11 |     var CommentBox = React.createClass({
 12 |       render: function() {
 13 |         return (
 14 |           <div className="commentBox">
 15 |             <h1>Comments</h1>
 16 |             <CommentList data={this.props.data} />
 17 |             <CommentForm />
 18 |           </div>
 19 |         );
 20 |       }
 21 |     });
 22 | 
 23 |     // tutorial10.js
 24 |     var CommentList = React.createClass({
 25 |       render: function() {
 26 |         var commentNodes = this.props.data.map(function(comment){
 27 |           return (
 28 |             <Comment author={comment.author} key={comment.id}>
 29 |               {comment.text}
 30 |             </Comment>
 31 |           )
 32 |         });
 33 |         return (
 34 |           <div className="commentList">
 35 |             {commentNodes}
 36 |           </div>
 37 |         );
 38 |       }
 39 |     });
 40 |     
 41 |     var CommentForm = React.createClass({
 42 |       render: function() {
 43 |         return (
 44 |           <div className="commentForm">
 45 |             Hello, world! I am a CommentForm.
 46 |           </div>
 47 |         );
 48 |       }
 49 |     });
 50 |       
 51 |     // tutorial7.js
 52 |     var Comment = React.createClass({
 53 |       rawMarkup: function() {
 54 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 55 |         return { __html: rawMarkup };
 56 |       },
 57 |     
 58 |       render: function() {
 59 |         return (
 60 |           <div className="comment">
 61 |             <h2 className="commentAuthor">
 62 |               {this.props.author}
 63 |             </h2>
 64 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 65 |           </div>
 66 |         );
 67 |       }
 68 |     });
 69 | 
 70 |     // tutorial8.js
 71 |     var data = [
 72 |       {author: "Pete Hunt", text: "This is one comment"},
 73 |       {author: "Jordan Walke", text: "This is *another* comment"}
 74 |     ];
 75 | 
 76 |     ReactDOM.render(
 77 |       <CommentBox data={data}/>,
 78 |       document.getElementById("content")
 79 |     );
 80 |     
 81 |     ' %>>% HTML
 82 |   )
 83 | ) %>>%
 84 |   attachDependencies(list(
 85 |     htmlDependency(
 86 |       name = "react"
 87 |       ,version = "0.14.8"
 88 |       ,src = c(paste0(getwd(),"/build"))
 89 |       ,script = c("react.min.js","react-dom.min.js")
 90 |     )
 91 |     ,htmlDependency(
 92 |       name = "babel-browser"
 93 |       ,version = "5.8.23"
 94 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 95 |       ,script = c("browser.min.js")
 96 |     )    
 97 |     ,htmlDependency(
 98 |       name = "jquery"
 99 |       ,version = "2.2.0"
100 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
101 |       ,script = c("jquery.min.js")
102 |     )
103 |     ,htmlDependency(
104 |       name = "marked"
105 |       ,version = "0.3.5"
106 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
107 |       ,script = c("marked.min.js")
108 |     )
109 |   )) %>>%
110 |   html_print
111 | 
112 | 
113 | 
114 | # use reactR --------------------------------------------------------------
115 | library(htmltools)
116 | library(reactR)
117 | 
118 | tagList(
119 |   tags$div(id = "content"),
120 |   tags$script(babel_transform(
121 | '// tutorial9.js
122 | var CommentBox = React.createClass({
123 |   render: function() {
124 |     return (
125 |       <div className="commentBox">
126 |         <h1>Comments</h1>
127 |         <CommentList data={this.props.data} />
128 |         <CommentForm />
129 |         </div>
130 |     );
131 |   }
132 | });
133 | 
134 | // tutorial10.js
135 | var CommentList = React.createClass({
136 |   render: function() {
137 |     var commentNodes = this.props.data.map(function(comment){
138 |       return (
139 |         <Comment author={comment.author} key={comment.id}>
140 |         {comment.text}
141 |         </Comment>
142 |       )
143 |     });
144 |     return (
145 |       <div className="commentList">
146 |       {commentNodes}
147 |       </div>
148 |     );
149 |   }
150 | });
151 | 
152 | var CommentForm = React.createClass({
153 |   render: function() {
154 |     return (
155 |       <div className="commentForm">
156 |         Hello, world! I am a CommentForm.
157 |       </div>
158 |     );
159 |   }
160 | });
161 | 
162 | // tutorial7.js
163 | var Comment = React.createClass({
164 |   rawMarkup: function() {
165 |     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
166 |     return { __html: rawMarkup };
167 |   },
168 |   
169 |   render: function() {
170 |     return (
171 |       <div className="comment">
172 |         <h2 className="commentAuthor">
173 |         {this.props.author}
174 |       </h2>
175 |         <span dangerouslySetInnerHTML={this.rawMarkup()} />
176 |         </div>
177 |     );
178 |   }
179 | });
180 | 
181 | // tutorial8.js
182 | var data = [
183 |   {author: "Pete Hunt", text: "This is one comment"},
184 |   {author: "Jordan Walke", text: "This is *another* comment"}
185 |   ];
186 | 
187 | ReactDOM.render(
188 |   <CommentBox data={data}/>,
189 |   document.getElementById("content")
190 | );
191 | '
192 |   ))
193 | ) %>>%
194 |   attachDependencies(list(
195 |     html_dependency_react(),
196 |     htmlDependency(
197 |       name = "jquery"
198 |       ,version = "2.2.0"
199 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
200 |       ,script = c("jquery.min.js")
201 |     ),
202 |     htmlDependency(
203 |       name = "marked"
204 |       ,version = "0.3.5"
205 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
206 |       ,script = c("marked.min.js")
207 |     )    
208 |   )) %>>%
209 |   browsable()
210 | 
211 | 


--------------------------------------------------------------------------------
/tutorial12.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial12.js
 11 |     var CommentBox = React.createClass({
 12 |       getInitialState: function() {
 13 |         return {data: []};
 14 |       },
 15 |       render: function() {
 16 |         return (
 17 |           <div className="commentBox">
 18 |             <h1>Comments</h1>
 19 |             <CommentList data={this.state.data} />
 20 |             <CommentForm />
 21 |           </div>
 22 |        );
 23 |       }
 24 |     });
 25 | 
 26 |     // tutorial10.js
 27 |     var CommentList = React.createClass({
 28 |       render: function() {
 29 |         var commentNodes = this.props.data.map(function(comment){
 30 |           return (
 31 |             <Comment author={comment.author} key={comment.id}>
 32 |               {comment.text}
 33 |             </Comment>
 34 |           )
 35 |         });
 36 |         return (
 37 |           <div className="commentList">
 38 |             {commentNodes}
 39 |           </div>
 40 |         );
 41 |       }
 42 |     });
 43 |     
 44 |     var CommentForm = React.createClass({
 45 |       render: function() {
 46 |         return (
 47 |           <div className="commentForm">
 48 |             Hello, world! I am a CommentForm.
 49 |           </div>
 50 |         );
 51 |       }
 52 |     });
 53 |       
 54 |     // tutorial7.js
 55 |     var Comment = React.createClass({
 56 |       rawMarkup: function() {
 57 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 58 |         return { __html: rawMarkup };
 59 |       },
 60 |     
 61 |       render: function() {
 62 |         return (
 63 |           <div className="comment">
 64 |             <h2 className="commentAuthor">
 65 |               {this.props.author}
 66 |             </h2>
 67 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 68 |           </div>
 69 |         );
 70 |       }
 71 |     });
 72 | 
 73 |     // tutorial8.js
 74 |     var data = [
 75 |       {author: "Pete Hunt", text: "This is one comment"},
 76 |       {author: "Jordan Walke", text: "This is *another* comment"}
 77 |     ];
 78 | 
 79 |     // tutorial11.js
 80 |     ReactDOM.render(
 81 |       <CommentBox url="comments.json" />,
 82 |       document.getElementById("content")
 83 |     );
 84 |     
 85 |     ' %>>% HTML
 86 |   )
 87 | ) %>>%
 88 |   attachDependencies(list(
 89 |     htmlDependency(
 90 |       name = "react"
 91 |       ,version = "0.14.8"
 92 |       ,src = c(paste0(getwd(),"/build"))
 93 |       ,script = c("react.min.js","react-dom.min.js")
 94 |     )
 95 |     ,htmlDependency(
 96 |       name = "babel-browser"
 97 |       ,version = "5.8.23"
 98 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
 99 |       ,script = c("browser.min.js")
100 |     )    
101 |     ,htmlDependency(
102 |       name = "jquery"
103 |       ,version = "2.2.0"
104 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
105 |       ,script = c("jquery.min.js")
106 |     )
107 |     ,htmlDependency(
108 |       name = "marked"
109 |       ,version = "0.3.5"
110 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
111 |       ,script = c("marked.min.js")
112 |     )
113 |   )) %>>%
114 |   html_print
115 | 
116 | 
117 | # use reactR --------------------------------------------------------------
118 | library(htmltools)
119 | library(reactR)
120 | 
121 | tagList(
122 |   tags$div(id = "content"),
123 |   tags$script(babel_transform(
124 | '// tutorial12.js
125 | var CommentBox = React.createClass({
126 |   getInitialState: function() {
127 |     return {data: []};
128 |   },
129 |   render: function() {
130 |     return (
131 |       <div className="commentBox">
132 |         <h1>Comments</h1>
133 |         <CommentList data={this.state.data} />
134 |         <CommentForm />
135 |         </div>
136 |     );
137 |   }
138 | });
139 | 
140 | // tutorial10.js
141 | var CommentList = React.createClass({
142 |   render: function() {
143 |     var commentNodes = this.props.data.map(function(comment){
144 |       return (
145 |         <Comment author={comment.author} key={comment.id}>
146 |         {comment.text}
147 |         </Comment>
148 |       )
149 |     });
150 |     return (
151 |       <div className="commentList">
152 |       {commentNodes}
153 |       </div>
154 |     );
155 |   }
156 | });
157 | 
158 | var CommentForm = React.createClass({
159 |   render: function() {
160 |     return (
161 |       <div className="commentForm">
162 |         Hello, world! I am a CommentForm.
163 |       </div>
164 |     );
165 |   }
166 | });
167 | 
168 | // tutorial7.js
169 | var Comment = React.createClass({
170 |   rawMarkup: function() {
171 |     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
172 |     return { __html: rawMarkup };
173 |   },
174 |   
175 |   render: function() {
176 |     return (
177 |       <div className="comment">
178 |         <h2 className="commentAuthor">
179 |         {this.props.author}
180 |       </h2>
181 |         <span dangerouslySetInnerHTML={this.rawMarkup()} />
182 |         </div>
183 |     );
184 |   }
185 | });
186 | 
187 | // tutorial8.js
188 | var data = [
189 |   {author: "Pete Hunt", text: "This is one comment"},
190 |   {author: "Jordan Walke", text: "This is *another* comment"}
191 |   ];
192 | 
193 | // tutorial11.js
194 | ReactDOM.render(
195 |   <CommentBox url="comments.json" />,
196 |   document.getElementById("content")
197 | );
198 | '
199 |   ))
200 | ) %>>%
201 |   attachDependencies(list(
202 |     html_dependency_react(),
203 |     htmlDependency(
204 |       name = "jquery"
205 |       ,version = "2.2.0"
206 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
207 |       ,script = c("jquery.min.js")
208 |     ),
209 |     htmlDependency(
210 |       name = "marked"
211 |       ,version = "0.3.5"
212 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
213 |       ,script = c("marked.min.js")
214 |     )    
215 |   )) %>>%
216 |   browsable()
217 | 
218 | 


--------------------------------------------------------------------------------
/examples/shared/thirdparty/es5-sham.min.js:
--------------------------------------------------------------------------------
1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5-sham",definition)}else{definition()}})(function(){var call=Function.prototype.call;var prototypeOfObject=Object.prototype;var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if(!Object.getPrototypeOf){Object.getPrototypeOf=function getPrototypeOf(object){return object.__proto__||(object.constructor?object.constructor.prototype:prototypeOfObject)}}function doesGetOwnPropertyDescriptorWork(object){try{object.sentinel=0;return Object.getOwnPropertyDescriptor(object,"sentinel").value===0}catch(exception){}}if(Object.defineProperty){var getOwnPropertyDescriptorWorksOnObject=doesGetOwnPropertyDescriptorWork({});var getOwnPropertyDescriptorWorksOnDom=typeof document=="undefined"||doesGetOwnPropertyDescriptorWork(document.createElement("div"));if(!getOwnPropertyDescriptorWorksOnDom||!getOwnPropertyDescriptorWorksOnObject){var getOwnPropertyDescriptorFallback=Object.getOwnPropertyDescriptor}}if(!Object.getOwnPropertyDescriptor||getOwnPropertyDescriptorFallback){var ERR_NON_OBJECT="Object.getOwnPropertyDescriptor called on a non-object: ";Object.getOwnPropertyDescriptor=function getOwnPropertyDescriptor(object,property){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT+object)}if(getOwnPropertyDescriptorFallback){try{return getOwnPropertyDescriptorFallback.call(Object,object,property)}catch(exception){}}if(!owns(object,property)){return}var descriptor={enumerable:true,configurable:true};if(supportsAccessors){var prototype=object.__proto__;object.__proto__=prototypeOfObject;var getter=lookupGetter(object,property);var setter=lookupSetter(object,property);object.__proto__=prototype;if(getter||setter){if(getter){descriptor.get=getter}if(setter){descriptor.set=setter}return descriptor}}descriptor.value=object[property];descriptor.writable=true;return descriptor}}if(!Object.getOwnPropertyNames){Object.getOwnPropertyNames=function getOwnPropertyNames(object){return Object.keys(object)}}if(!Object.create){var createEmpty;var supportsProto=Object.prototype.__proto__===null;if(supportsProto||typeof document=="undefined"){createEmpty=function(){return{__proto__:null}}}else{createEmpty=function(){var iframe=document.createElement("iframe");var parent=document.body||document.documentElement;iframe.style.display="none";parent.appendChild(iframe);iframe.src="javascript:";var empty=iframe.contentWindow.Object.prototype;parent.removeChild(iframe);iframe=null;delete empty.constructor;delete empty.hasOwnProperty;delete empty.propertyIsEnumerable;delete empty.isPrototypeOf;delete empty.toLocaleString;delete empty.toString;delete empty.valueOf;empty.__proto__=null;function Empty(){}Empty.prototype=empty;createEmpty=function(){return new Empty};return new Empty}}Object.create=function create(prototype,properties){var object;function Type(){}if(prototype===null){object=createEmpty()}else{if(typeof prototype!=="object"&&typeof prototype!=="function"){throw new TypeError("Object prototype may only be an Object or null")}Type.prototype=prototype;object=new Type;object.__proto__=prototype}if(properties!==void 0){Object.defineProperties(object,properties)}return object}}function doesDefinePropertyWork(object){try{Object.defineProperty(object,"sentinel",{});return"sentinel"in object}catch(exception){}}if(Object.defineProperty){var definePropertyWorksOnObject=doesDefinePropertyWork({});var definePropertyWorksOnDom=typeof document=="undefined"||doesDefinePropertyWork(document.createElement("div"));if(!definePropertyWorksOnObject||!definePropertyWorksOnDom){var definePropertyFallback=Object.defineProperty,definePropertiesFallback=Object.defineProperties}}if(!Object.defineProperty||definePropertyFallback){var ERR_NON_OBJECT_DESCRIPTOR="Property description must be an object: ";var ERR_NON_OBJECT_TARGET="Object.defineProperty called on non-object: ";var ERR_ACCESSORS_NOT_SUPPORTED="getters & setters can not be defined "+"on this javascript engine";Object.defineProperty=function defineProperty(object,property,descriptor){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError(ERR_NON_OBJECT_TARGET+object)}if(typeof descriptor!="object"&&typeof descriptor!="function"||descriptor===null){throw new TypeError(ERR_NON_OBJECT_DESCRIPTOR+descriptor)}if(definePropertyFallback){try{return definePropertyFallback.call(Object,object,property,descriptor)}catch(exception){}}if(owns(descriptor,"value")){if(supportsAccessors&&(lookupGetter(object,property)||lookupSetter(object,property))){var prototype=object.__proto__;object.__proto__=prototypeOfObject;delete object[property];object[property]=descriptor.value;object.__proto__=prototype}else{object[property]=descriptor.value}}else{if(!supportsAccessors){throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED)}if(owns(descriptor,"get")){defineGetter(object,property,descriptor.get)}if(owns(descriptor,"set")){defineSetter(object,property,descriptor.set)}}return object}}if(!Object.defineProperties||definePropertiesFallback){Object.defineProperties=function defineProperties(object,properties){if(definePropertiesFallback){try{return definePropertiesFallback.call(Object,object,properties)}catch(exception){}}for(var property in properties){if(owns(properties,property)&&property!="__proto__"){Object.defineProperty(object,property,properties[property])}}return object}}if(!Object.seal){Object.seal=function seal(object){return object}}if(!Object.freeze){Object.freeze=function freeze(object){return object}}try{Object.freeze(function(){})}catch(exception){Object.freeze=function freeze(freezeObject){return function freeze(object){if(typeof object=="function"){return object}else{return freezeObject(object)}}}(Object.freeze)}if(!Object.preventExtensions){Object.preventExtensions=function preventExtensions(object){return object}}if(!Object.isSealed){Object.isSealed=function isSealed(object){return false}}if(!Object.isFrozen){Object.isFrozen=function isFrozen(object){return false}}if(!Object.isExtensible){Object.isExtensible=function isExtensible(object){if(Object(object)!==object){throw new TypeError}var name="";while(owns(object,name)){name+="?"}object[name]=true;var returnValue=owns(object,name);delete object[name];return returnValue}}});
2 | //# sourceMappingURL=es5-sham.map


--------------------------------------------------------------------------------
/examples/jquery-mobile/js/app.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * jQuery Mobile React Example
  3 |  *
  4 |  * Main application script.
  5 |  * For variety, this example is written in 100% JSHint-compliant JavaScript, not in JSX.
  6 |  *
  7 |  * Component structure:
  8 |  *
  9 |  * - App
 10 |  *   |-- JQueryMobilePage (one)
 11 |  *   |   |-- JQueryMobileHeader
 12 |  *   |   |-- JQueryMobileContent
 13 |  *   |   |   |-- PageOneContent
 14 |  *   |   |       |-- JQueryMobileButton
 15 |  *   |   |-- JQueryMobileFooter
 16 |  *   |-- JQueryMobilePage (two)
 17 |  *   |   |-- JQueryMobileHeader
 18 |  *   |   |-- JQueryMobileContent
 19 |  *   |   |   |-- PageTwoContent
 20 |  *   |   |       |-- JQueryMobileButton
 21 |  *   |   |-- JQueryMobileFooter
 22 |  *   |-- JQueryMobilePage (popup)
 23 |  *       |-- JQueryMobileHeader
 24 |  *       |-- JQueryMobileContent
 25 |  *       |   |-- PagePopUpContent
 26 |  *       |       |-- JQueryMobileButton
 27 |  *       |-- JQueryMobileFooter
 28 |  */
 29 | 
 30 |  /* global document, React */
 31 | 
 32 | 'use strict';
 33 | 
 34 | /** Main application component. */
 35 | var App = React.createClass({
 36 |   displayName: 'App',
 37 | 
 38 |   render: function() {
 39 |     return React.DOM.div({className:'app'},
 40 |       JQueryMobilePage({id:'one'}, PageOneContent(null)),
 41 |       JQueryMobilePage({id:'two'}, PageTwoContent(null)),
 42 |       JQueryMobilePage({id:'popup', headerTheme:'b'}, PagePopUpContent(null))
 43 |     );
 44 |   }
 45 | });
 46 | 
 47 | /** jQuery Mobile button component. */
 48 | var JQueryMobileButton = React.createClass({
 49 |   displayName: 'JQueryMobileButton',
 50 | 
 51 |   getDefaultProps: function() {
 52 |     return {className:'ui-btn ui-shadow ui-corner-all'};
 53 |   },
 54 | 
 55 |   render: function() {
 56 |     return React.DOM.p(null,
 57 |       React.DOM.a(this.props, this.props.children)
 58 |     );
 59 |   }
 60 | });
 61 | 
 62 | /** jQuery Mobile page content component. */
 63 | var JQueryMobileContent = React.createClass({
 64 |   displayName: 'JQueryMobileContent',
 65 | 
 66 |   render: function() {
 67 |     return React.DOM.div({role:'main', className:'ui-content'},
 68 |       this.props.children
 69 |     );
 70 |   }
 71 | });
 72 | 
 73 | /** jQuery Mobile footer component. */
 74 | var JQueryMobileFooter = React.createClass({
 75 |   displayName: 'JQueryMobileFooter',
 76 | 
 77 |   render: function() {
 78 |     return React.DOM.div({'data-role':'footer'},
 79 |       React.DOM.h4(null, 'Page footer')
 80 |     );
 81 |   }
 82 | });
 83 | 
 84 | /** jQuery Mobile header component. */
 85 | var JQueryMobileHeader = React.createClass({
 86 |   displayName: 'JQueryMobileHeader',
 87 | 
 88 |   render: function() {
 89 |     return React.DOM.div({'data-role':'header', 'data-theme':this.props.headerTheme},
 90 |       React.DOM.h1(null, this.props.title)
 91 |     );
 92 |   }
 93 | });
 94 | 
 95 | /** jQuery Mobile page component. */
 96 | var JQueryMobilePage = React.createClass({
 97 |   displayName: 'JQueryMobilePage',
 98 | 
 99 |   getDefaultProps: function() {
100 |     return {'data-role':'page', 'data-theme':'a', headerTheme:'a'};
101 |   },
102 | 
103 |   render: function() {
104 |     return this.transferPropsTo(React.DOM.div(null,
105 |       JQueryMobileHeader({title:'Page ' + this.props.id, headerTheme:this.props.headerTheme}),
106 |       JQueryMobileContent(null, this.props.children),
107 |       JQueryMobileFooter(null)
108 |     ));
109 |   }
110 | });
111 | 
112 | /** Application page one component. */
113 | var PageOneContent = React.createClass({
114 |   displayName: 'PageOneContent',
115 | 
116 |   render: function() {
117 |     return React.DOM.div(null,
118 |       React.DOM.h2(null, 'One'),
119 |       React.DOM.p(null,
120 |         'I have an ',
121 |         React.DOM.code(null, 'id'),
122 |         ' of "one" on my page container. I\'m first in the source order so I\'m shown when the page loads.'
123 |       ),
124 |       React.DOM.p(null, 'This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a single page template that has just one page within it.'),
125 |       React.DOM.p(null, 'Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.'),
126 |       React.DOM.p(null,
127 |         'You link to internal pages by referring to the ',
128 |         React.DOM.code(null, 'id'),
129 |         ' of the page you want to show. For example, to ',
130 |         React.DOM.a({href:'#two'}, 'link'),
131 |         ' to the page with an ',
132 |         React.DOM.code(null, 'id'),
133 |         ' of "two", my link would have a ',
134 |         React.DOM.code(null, 'href="#two"'),
135 |         ' in the code.'
136 |       ),
137 |       React.DOM.h3(null, 'Show internal pages:'),
138 |       JQueryMobileButton({href:'#two'}, 'Show page "two"'),
139 |       JQueryMobileButton({href:'#popup', 'data-rel':'dialog', 'data-transition':'pop'}, 'Show page "popup" (as a dialog)')
140 |     );
141 |   }
142 | });
143 | 
144 | /** Application page two component. */
145 | var PageTwoContent = React.createClass({
146 |   displayName: 'PageTwoContent',
147 | 
148 |   render: function() {
149 |     return React.DOM.div(null,
150 |       React.DOM.h2(null, 'Two'),
151 |       React.DOM.p(null, 'I have an id of "two" on my page container. I\'m the second page container in this multi-page template.'),
152 |       React.DOM.p(null, 'Notice that the theme is different for this page because we\'ve added a few ',
153 |         React.DOM.code(null, 'data-theme'),
154 |         ' swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we\'re keeping these simple.'),
155 |       JQueryMobileButton({href:'#one', 'data-direction':'reverse', className:'ui-btn ui-shadow ui-corner-all ui-btn-b'}, 'Back to page "one"')
156 |     );
157 |   }
158 | });
159 | 
160 | /** Application popup page component. */
161 | var PagePopUpContent = React.createClass({
162 |   displayName: 'PagePopUpContent',
163 | 
164 |   render: function() {
165 |     return React.DOM.div(null,
166 |       React.DOM.h2(null, 'Popup'),
167 |       React.DOM.p(null, 'I have an id of "popup" on my page container and only look like a dialog because the link to me had a ',
168 |         React.DOM.code(null, 'data-rel="dialog"'),
169 |         ' attribute which gives me this inset look and a ',
170 |         React.DOM.code(null, 'data-transition="pop"'),
171 |         ' attribute to change the transition to pop. Without this, I\'d be styled as a normal page.'),
172 |       JQueryMobileButton({href:'#one', 'data-rel':'back', className:'ui-btn ui-shadow ui-corner-all ui-btn-inline ui-icon-back ui-btn-icon-left'}, 'Back to page "one"')
173 |     );
174 |   }
175 | });
176 | 
177 | // Render application.
178 | React.render(App(null), document.getElementById('content'));
179 | 


--------------------------------------------------------------------------------
/tutorial13.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial13.js
 11 |     var CommentBox = React.createClass({
 12 |       getInitialState: function() {
 13 |         return {data: []};
 14 |       },
 15 |       componentDidMount: function() {
 16 |         $.ajax({
 17 |           this.props.url,
 18 |           dataType: "json",
 19 |           cache: false,
 20 |           success: function(data) {
 21 |             this.setState({data: data});
 22 |           }.bind(this),
 23 |           error: function(xhr, status, err) {
 24 |             console.error(this.props.url, status, err.toString());
 25 |           }.bind(this)
 26 |         })
 27 |       },
 28 |       render: function() {
 29 |         return (
 30 |           <div className="commentBox">
 31 |             <h1>Comments</h1>
 32 |             <CommentList data={this.state.data} />
 33 |             <CommentForm />
 34 |           </div>
 35 |        );
 36 |       }
 37 |     });
 38 | 
 39 |     // tutorial10.js
 40 |     var CommentList = React.createClass({
 41 |       render: function() {
 42 |         var commentNodes = this.props.data.map(function(comment){
 43 |           return (
 44 |             <Comment author={comment.author} key={comment.id}>
 45 |               {comment.text}
 46 |             </Comment>
 47 |           )
 48 |         });
 49 |         return (
 50 |           <div className="commentList">
 51 |             {commentNodes}
 52 |           </div>
 53 |         );
 54 |       }
 55 |     });
 56 |     
 57 |     var CommentForm = React.createClass({
 58 |       render: function() {
 59 |         return (
 60 |           <div className="commentForm">
 61 |             Hello, world! I am a CommentForm.
 62 |           </div>
 63 |         );
 64 |       }
 65 |     });
 66 |       
 67 |     // tutorial7.js
 68 |     var Comment = React.createClass({
 69 |       rawMarkup: function() {
 70 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 71 |         return { __html: rawMarkup };
 72 |       },
 73 |     
 74 |       render: function() {
 75 |         return (
 76 |           <div className="comment">
 77 |             <h2 className="commentAuthor">
 78 |               {this.props.author}
 79 |             </h2>
 80 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 81 |           </div>
 82 |         );
 83 |       }
 84 |     });
 85 | 
 86 |     // tutorial8.js
 87 |     var data = [
 88 |       {author: "Pete Hunt", text: "This is one comment"},
 89 |       {author: "Jordan Walke", text: "This is *another* comment"}
 90 |     ];
 91 | 
 92 |     // tutorial11.js
 93 |     ReactDOM.render(
 94 |       <CommentBox url="comments.json" />,
 95 |       document.getElementById("content")
 96 |     );
 97 |     
 98 |     ' %>>% HTML
 99 |   )
100 | ) %>>%
101 |   attachDependencies(list(
102 |     htmlDependency(
103 |       name = "react"
104 |       ,version = "0.14.8"
105 |       ,src = c(paste0(getwd(),"/build"))
106 |       ,script = c("react.min.js","react-dom.min.js")
107 |     )
108 |     ,htmlDependency(
109 |       name = "babel-browser"
110 |       ,version = "5.8.23"
111 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
112 |       ,script = c("browser.min.js")
113 |     )    
114 |     ,htmlDependency(
115 |       name = "jquery"
116 |       ,version = "2.2.0"
117 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
118 |       ,script = c("jquery.min.js")
119 |     )
120 |     ,htmlDependency(
121 |       name = "marked"
122 |       ,version = "0.3.5"
123 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
124 |       ,script = c("marked.min.js")
125 |     )
126 |   )) %>>%
127 |   html_print
128 | 
129 | 
130 | # use reactR --------------------------------------------------------------
131 | library(htmltools)
132 | library(reactR)
133 | 
134 | tagList(
135 |   tags$div(id = "content"),
136 |   tags$script(babel_transform(
137 | '// tutorial13.js
138 | var CommentBox = React.createClass({
139 |   getInitialState: function() {
140 |     return {data: []};
141 |   },
142 |   componentDidMount: function() {
143 |     $.ajax({
144 |       this.props.url,
145 |       dataType: "json",
146 |       cache: false,
147 |       success: function(data) {
148 |         this.setState({data: data});
149 |       }.bind(this),
150 |       error: function(xhr, status, err) {
151 |         console.error(this.props.url, status, err.toString());
152 |       }.bind(this)
153 |     })
154 |   },
155 |   render: function() {
156 |     return (
157 |       <div className="commentBox">
158 |         <h1>Comments</h1>
159 |         <CommentList data={this.state.data} />
160 |         <CommentForm />
161 |         </div>
162 |     );
163 |   }
164 | });
165 | 
166 | // tutorial10.js
167 | var CommentList = React.createClass({
168 |   render: function() {
169 |     var commentNodes = this.props.data.map(function(comment){
170 |       return (
171 |         <Comment author={comment.author} key={comment.id}>
172 |         {comment.text}
173 |         </Comment>
174 |       )
175 |     });
176 |     return (
177 |       <div className="commentList">
178 |       {commentNodes}
179 |       </div>
180 |     );
181 |   }
182 | });
183 | 
184 | var CommentForm = React.createClass({
185 |   render: function() {
186 |     return (
187 |       <div className="commentForm">
188 |         Hello, world! I am a CommentForm.
189 |       </div>
190 |     );
191 |   }
192 | });
193 | 
194 | // tutorial7.js
195 | var Comment = React.createClass({
196 |   rawMarkup: function() {
197 |     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
198 |     return { __html: rawMarkup };
199 |   },
200 |   
201 |   render: function() {
202 |     return (
203 |       <div className="comment">
204 |         <h2 className="commentAuthor">
205 |         {this.props.author}
206 |       </h2>
207 |         <span dangerouslySetInnerHTML={this.rawMarkup()} />
208 |         </div>
209 |     );
210 |   }
211 | });
212 | 
213 | // tutorial8.js
214 | var data = [
215 |   {author: "Pete Hunt", text: "This is one comment"},
216 |   {author: "Jordan Walke", text: "This is *another* comment"}
217 |   ];
218 | 
219 | // tutorial11.js
220 | ReactDOM.render(
221 |   <CommentBox url="comments.json" />,
222 |   document.getElementById("content")
223 | );
224 | '
225 |   ))
226 | ) %>>%
227 |   attachDependencies(list(
228 |     html_dependency_react(),
229 |     htmlDependency(
230 |       name = "jquery"
231 |       ,version = "2.2.0"
232 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
233 |       ,script = c("jquery.min.js")
234 |     ),
235 |     htmlDependency(
236 |       name = "marked"
237 |       ,version = "0.3.5"
238 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
239 |       ,script = c("marked.min.js")
240 |     )    
241 |   )) %>>%
242 |   browsable()
243 | 
244 | 


--------------------------------------------------------------------------------
/tutorial14.R:
--------------------------------------------------------------------------------
  1 | library(htmltools)
  2 | library(pipeR)
  3 | 
  4 | tagList(
  5 |   tags$div(
  6 |     id = "content"
  7 |   )
  8 |   ,tags$script(type = "text/babel"
  9 |     ,'
 10 |     // tutorial14.js
 11 |     var CommentBox = React.createClass({
 12 |       loadCommentsFromServer: function() {
 13 |         $.ajax({
 14 |           url: this.props.url,
 15 |           dataType: "json",
 16 |           success: function(data) {
 17 |             this.setState({data: data});
 18 |           }.bind(this),
 19 |           error: function(xhr, status, err) {
 20 |             console.error(this.props.url, status, err.toString());
 21 |           }.bind(this)
 22 |         });
 23 |       },
 24 |       getInitialState: function() {
 25 |         return {data: []};
 26 |       },
 27 |       componentDidMount: function() {
 28 |         this.loadCommentsFromServer();
 29 |         setInterval(this.loadCommentsFromServer, this.props.pollInterval);
 30 |       },
 31 |       render: function() {
 32 |         return (
 33 |           <div className="commentBox">
 34 |             <h1>Comments</h1>
 35 |             <CommentList data={this.state.data} />
 36 |             <CommentForm />
 37 |           </div>
 38 |        );
 39 |       }
 40 |     });
 41 | 
 42 |     // tutorial10.js
 43 |     var CommentList = React.createClass({
 44 |       render: function() {
 45 |         var commentNodes = this.props.data.map(function(comment){
 46 |           return (
 47 |             <Comment author={comment.author} key={comment.id}>
 48 |               {comment.text}
 49 |             </Comment>
 50 |           )
 51 |         });
 52 |         return (
 53 |           <div className="commentList">
 54 |             {commentNodes}
 55 |           </div>
 56 |         );
 57 |       }
 58 |     });
 59 |     
 60 |     var CommentForm = React.createClass({
 61 |       render: function() {
 62 |         return (
 63 |           <div className="commentForm">
 64 |             Hello, world! I am a CommentForm.
 65 |           </div>
 66 |         );
 67 |       }
 68 |     });
 69 |       
 70 |     // tutorial7.js
 71 |     var Comment = React.createClass({
 72 |       rawMarkup: function() {
 73 |         var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
 74 |         return { __html: rawMarkup };
 75 |       },
 76 |     
 77 |       render: function() {
 78 |         return (
 79 |           <div className="comment">
 80 |             <h2 className="commentAuthor">
 81 |               {this.props.author}
 82 |             </h2>
 83 |             <span dangerouslySetInnerHTML={this.rawMarkup()} />
 84 |           </div>
 85 |         );
 86 |       }
 87 |     });
 88 | 
 89 |     // tutorial8.js
 90 |     var data = [
 91 |       {author: "Pete Hunt", text: "This is one comment"},
 92 |       {author: "Jordan Walke", text: "This is *another* comment"}
 93 |     ];
 94 | 
 95 |     // tutorial14.js
 96 |     ReactDOM.render(
 97 |       <CommentBox url="http://gist.githubusercontent.com/timelyportfolio/54314c31733f4b73f2a0/raw/0668753905075f5ea3ef8a2d5198702cf0c473d5/comments.json" pollInterval={2000} />,
 98 |       document.getElementById("content")
 99 |     );
100 |     
101 |     ' %>>% HTML
102 |   )
103 | ) %>>%
104 |   attachDependencies(list(
105 |     htmlDependency(
106 |       name = "react"
107 |       ,version = "0.14.8"
108 |       ,src = c(paste0(getwd(),"/build"))
109 |       ,script = c("react.min.js","react-dom.min.js")
110 |     )
111 |     ,htmlDependency(
112 |       name = "babel-browser"
113 |       ,version = "5.8.23"
114 |       ,src = c(href="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23")
115 |       ,script = c("browser.min.js")
116 |     )    
117 |     ,htmlDependency(
118 |       name = "jquery"
119 |       ,version = "2.2.0"
120 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
121 |       ,script = c("jquery.min.js")
122 |     )
123 |     ,htmlDependency(
124 |       name = "marked"
125 |       ,version = "0.3.5"
126 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
127 |       ,script = c("marked.min.js")
128 |     )
129 |   )) %>>%
130 |   html_print
131 | 
132 | 
133 | 
134 | # use reactR --------------------------------------------------------------
135 | library(htmltools)
136 | library(reactR)
137 | 
138 | tagList(
139 |   tags$div(id = "content"),
140 |   tags$script(babel_transform(
141 | '// tutorial14.js
142 | var CommentBox = React.createClass({
143 |   loadCommentsFromServer: function() {
144 |     $.ajax({
145 |       url: this.props.url,
146 |       dataType: "json",
147 |       success: function(data) {
148 |         this.setState({data: data});
149 |       }.bind(this),
150 |       error: function(xhr, status, err) {
151 |         console.error(this.props.url, status, err.toString());
152 |       }.bind(this)
153 |     });
154 |   },
155 |   getInitialState: function() {
156 |     return {data: []};
157 |   },
158 |   componentDidMount: function() {
159 |     this.loadCommentsFromServer();
160 |     setInterval(this.loadCommentsFromServer, this.props.pollInterval);
161 |   },
162 |   render: function() {
163 |     return (
164 |       <div className="commentBox">
165 |         <h1>Comments</h1>
166 |         <CommentList data={this.state.data} />
167 |         <CommentForm />
168 |         </div>
169 |     );
170 |   }
171 | });
172 | 
173 | // tutorial10.js
174 | var CommentList = React.createClass({
175 |   render: function() {
176 |     var commentNodes = this.props.data.map(function(comment){
177 |       return (
178 |         <Comment author={comment.author} key={comment.id}>
179 |         {comment.text}
180 |         </Comment>
181 |       )
182 |     });
183 |     return (
184 |       <div className="commentList">
185 |       {commentNodes}
186 |       </div>
187 |     );
188 |   }
189 | });
190 | 
191 | var CommentForm = React.createClass({
192 |   render: function() {
193 |     return (
194 |       <div className="commentForm">
195 |         Hello, world! I am a CommentForm.
196 |       </div>
197 |     );
198 |   }
199 | });
200 | 
201 | // tutorial7.js
202 | var Comment = React.createClass({
203 |   rawMarkup: function() {
204 |     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
205 |     return { __html: rawMarkup };
206 |   },
207 |   
208 |   render: function() {
209 |     return (
210 |       <div className="comment">
211 |         <h2 className="commentAuthor">
212 |         {this.props.author}
213 |       </h2>
214 |         <span dangerouslySetInnerHTML={this.rawMarkup()} />
215 |         </div>
216 |     );
217 |   }
218 | });
219 | 
220 | // tutorial8.js
221 | var data = [
222 |   {author: "Pete Hunt", text: "This is one comment"},
223 |   {author: "Jordan Walke", text: "This is *another* comment"}
224 |   ];
225 | 
226 | // tutorial14.js
227 | ReactDOM.render(
228 |   <CommentBox url="http://gist.githubusercontent.com/timelyportfolio/54314c31733f4b73f2a0/raw/0668753905075f5ea3ef8a2d5198702cf0c473d5/comments.json" pollInterval={2000} />,
229 |   document.getElementById("content")
230 | );
231 | '
232 |   ))
233 |   ) %>>%
234 |   attachDependencies(list(
235 |     html_dependency_react(),
236 |     htmlDependency(
237 |       name = "jquery"
238 |       ,version = "2.2.0"
239 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/")
240 |       ,script = c("jquery.min.js")
241 |     ),
242 |     htmlDependency(
243 |       name = "marked"
244 |       ,version = "0.3.5"
245 |       ,src = c(href = "http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/")
246 |       ,script = c("marked.min.js")
247 |     )    
248 |   )) %>>%
249 |   browsable()
250 | 
251 | 


--------------------------------------------------------------------------------
/examples/shared/thirdparty/es5-shim.min.js:
--------------------------------------------------------------------------------
1 | (function(definition){if(typeof define=="function"){define(definition)}else if(typeof YUI=="function"){YUI.add("es5",definition)}else{definition()}})(function(){if(parseInt("08")!==8){parseInt=function(origParseInt){var hexRegex=/^0[xX]/;return function parseIntES5(str,radix){str=String(str).trim();if(!+radix){radix=hexRegex.test(str)?16:10}return origParseInt(str,radix)}}(parseInt)}function Empty(){}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError("Function.prototype.bind called on incompatible "+target)}var args=_Array_slice_.call(arguments,1);var binder=function(){if(this instanceof bound){var result=target.apply(this,args.concat(_Array_slice_.call(arguments)));if(Object(result)===result){return result}return this}else{return target.apply(that,args.concat(_Array_slice_.call(arguments)))}};var boundLength=Math.max(0,target.length-args.length);var boundArgs=[];for(var i=0;i<boundLength;i++){boundArgs.push("$"+i)}var bound=Function("binder","return function("+boundArgs.join(",")+"){return binder.apply(this,arguments)}")(binder);if(target.prototype){Empty.prototype=target.prototype;bound.prototype=new Empty;Empty.prototype=null}return bound}}var call=Function.prototype.call;var prototypeOfArray=Array.prototype;var prototypeOfObject=Object.prototype;var _Array_slice_=prototypeOfArray.slice;var _toString=call.bind(prototypeOfObject.toString);var owns=call.bind(prototypeOfObject.hasOwnProperty);var defineGetter;var defineSetter;var lookupGetter;var lookupSetter;var supportsAccessors;if(supportsAccessors=owns(prototypeOfObject,"__defineGetter__")){defineGetter=call.bind(prototypeOfObject.__defineGetter__);defineSetter=call.bind(prototypeOfObject.__defineSetter__);lookupGetter=call.bind(prototypeOfObject.__lookupGetter__);lookupSetter=call.bind(prototypeOfObject.__lookupSetter__)}if([1,2].splice(0).length!=2){var array_splice=Array.prototype.splice;var array_push=Array.prototype.push;var array_unshift=Array.prototype.unshift;if(function(){function makeArray(l){var a=[];while(l--){a.unshift(l)}return a}var array=[],lengthBefore;array.splice.bind(array,0,0).apply(null,makeArray(20));array.splice.bind(array,0,0).apply(null,makeArray(26));lengthBefore=array.length;array.splice(5,0,"XXX");if(lengthBefore+1==array.length){return true}}()){Array.prototype.splice=function(start,deleteCount){if(!arguments.length){return[]}else{return array_splice.apply(this,[start===void 0?0:start,deleteCount===void 0?this.length-start:deleteCount].concat(_Array_slice_.call(arguments,2)))}}}else{Array.prototype.splice=function(start,deleteCount){var result,args=_Array_slice_.call(arguments,2),addElementsCount=args.length;if(!arguments.length){return[]}if(start===void 0){start=0}if(deleteCount===void 0){deleteCount=this.length-start}if(addElementsCount>0){if(deleteCount<=0){if(start==this.length){array_push.apply(this,args);return[]}if(start==0){array_unshift.apply(this,args);return[]}}result=_Array_slice_.call(this,start,start+deleteCount);args.push.apply(args,_Array_slice_.call(this,start+deleteCount,this.length));args.unshift.apply(args,_Array_slice_.call(this,0,start));args.unshift(0,this.length);array_splice.apply(this,args);return result}return array_splice.call(this,start,deleteCount)}}}if([].unshift(0)!=1){var array_unshift=Array.prototype.unshift;Array.prototype.unshift=function(){array_unshift.apply(this,arguments);return this.length}}if(!Array.isArray){Array.isArray=function isArray(obj){return _toString(obj)=="[object Array]"}}var boxedString=Object("a"),splitString=boxedString[0]!="a"||!(0 in boxedString);var boxedForEach=true;if(Array.prototype.forEach){Array.prototype.forEach.call("foo",function(item,i,obj){if(typeof obj!=="object")boxedForEach=false})}if(!Array.prototype.forEach||!boxedForEach){Array.prototype.forEach=function forEach(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,thisp=arguments[1],i=-1,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError}while(++i<length){if(i in self){fun.call(thisp,self[i],i,object)}}}}if(!Array.prototype.map){Array.prototype.map=function map(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,result=Array(length),thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self)result[i]=fun.call(thisp,self[i],i,object)}return result}}if(!Array.prototype.filter){Array.prototype.filter=function filter(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,result=[],value,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self){value=self[i];if(fun.call(thisp,value,i,object)){result.push(value)}}}return result}}if(!Array.prototype.every){Array.prototype.every=function every(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self&&!fun.call(thisp,self[i],i,object)){return false}}return true}}if(!Array.prototype.some){Array.prototype.some=function some(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0,thisp=arguments[1];if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}for(var i=0;i<length;i++){if(i in self&&fun.call(thisp,self[i],i,object)){return true}}return false}}if(!Array.prototype.reduce){Array.prototype.reduce=function reduce(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduce of empty array with no initial value")}var i=0;var result;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i++];break}if(++i>=length){throw new TypeError("reduce of empty array with no initial value")}}while(true)}for(;i<length;i++){if(i in self){result=fun.call(void 0,result,self[i],i,object)}}return result}}if(!Array.prototype.reduceRight){Array.prototype.reduceRight=function reduceRight(fun){var object=toObject(this),self=splitString&&_toString(this)=="[object String]"?this.split(""):object,length=self.length>>>0;if(_toString(fun)!="[object Function]"){throw new TypeError(fun+" is not a function")}if(!length&&arguments.length==1){throw new TypeError("reduceRight of empty array with no initial value")}var result,i=length-1;if(arguments.length>=2){result=arguments[1]}else{do{if(i in self){result=self[i--];break}if(--i<0){throw new TypeError("reduceRight of empty array with no initial value")}}while(true)}if(i<0){return result}do{if(i in this){result=fun.call(void 0,result,self[i],i,object)}}while(i--);return result}}if(!Array.prototype.indexOf||[0,1].indexOf(1,2)!=-1){Array.prototype.indexOf=function indexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=0;if(arguments.length>1){i=toInteger(arguments[1])}i=i>=0?i:Math.max(0,length+i);for(;i<length;i++){if(i in self&&self[i]===sought){return i}}return-1}}if(!Array.prototype.lastIndexOf||[0,1].lastIndexOf(0,-3)!=-1){Array.prototype.lastIndexOf=function lastIndexOf(sought){var self=splitString&&_toString(this)=="[object String]"?this.split(""):toObject(this),length=self.length>>>0;if(!length){return-1}var i=length-1;if(arguments.length>1){i=Math.min(i,toInteger(arguments[1]))}i=i>=0?i:length-Math.abs(i);for(;i>=0;i--){if(i in self&&sought===self[i]){return i}}return-1}}if(!Object.keys){var hasDontEnumBug=true,dontEnums=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],dontEnumsLength=dontEnums.length;for(var key in{toString:null}){hasDontEnumBug=false}Object.keys=function keys(object){if(typeof object!="object"&&typeof object!="function"||object===null){throw new TypeError("Object.keys called on a non-object")}var keys=[];for(var name in object){if(owns(object,name)){keys.push(name)}}if(hasDontEnumBug){for(var i=0,ii=dontEnumsLength;i<ii;i++){var dontEnum=dontEnums[i];if(owns(object,dontEnum)){keys.push(dontEnum)}}}return keys}}var negativeDate=-621987552e5,negativeYearString="-000001";if(!Date.prototype.toISOString||new Date(negativeDate).toISOString().indexOf(negativeYearString)===-1){Date.prototype.toISOString=function toISOString(){var result,length,value,year,month;if(!isFinite(this)){throw new RangeError("Date.prototype.toISOString called on non-finite value.")}year=this.getUTCFullYear();month=this.getUTCMonth();year+=Math.floor(month/12);month=(month%12+12)%12;result=[month+1,this.getUTCDate(),this.getUTCHours(),this.getUTCMinutes(),this.getUTCSeconds()];year=(year<0?"-":year>9999?"+":"")+("00000"+Math.abs(year)).slice(0<=year&&year<=9999?-4:-6);length=result.length;while(length--){value=result[length];if(value<10){result[length]="0"+value}}return year+"-"+result.slice(0,2).join("-")+"T"+result.slice(2).join(":")+"."+("000"+this.getUTCMilliseconds()).slice(-3)+"Z"}}var dateToJSONIsSupported=false;try{dateToJSONIsSupported=Date.prototype.toJSON&&new Date(NaN).toJSON()===null&&new Date(negativeDate).toJSON().indexOf(negativeYearString)!==-1&&Date.prototype.toJSON.call({toISOString:function(){return true}})}catch(e){}if(!dateToJSONIsSupported){Date.prototype.toJSON=function toJSON(key){var o=Object(this),tv=toPrimitive(o),toISO;if(typeof tv==="number"&&!isFinite(tv)){return null}toISO=o.toISOString;if(typeof toISO!="function"){throw new TypeError("toISOString property is not callable")}return toISO.call(o)}}if(!Date.parse||"Date.parse is buggy"){Date=function(NativeDate){function Date(Y,M,D,h,m,s,ms){var length=arguments.length;if(this instanceof NativeDate){var date=length==1&&String(Y)===Y?new NativeDate(Date.parse(Y)):length>=7?new NativeDate(Y,M,D,h,m,s,ms):length>=6?new NativeDate(Y,M,D,h,m,s):length>=5?new NativeDate(Y,M,D,h,m):length>=4?new NativeDate(Y,M,D,h):length>=3?new NativeDate(Y,M,D):length>=2?new NativeDate(Y,M):length>=1?new NativeDate(Y):new NativeDate;date.constructor=Date;return date}return NativeDate.apply(this,arguments)}var isoDateExpression=new RegExp("^"+"(\\d{4}|[+-]\\d{6})"+"(?:-(\\d{2})"+"(?:-(\\d{2})"+"(?:"+"T(\\d{2})"+":(\\d{2})"+"(?:"+":(\\d{2})"+"(?:(\\.\\d{1,}))?"+")?"+"("+"Z|"+"(?:"+"([-+])"+"(\\d{2})"+":(\\d{2})"+")"+")?)?)?)?"+"$");var months=[0,31,59,90,120,151,181,212,243,273,304,334,365];function dayFromMonth(year,month){var t=month>1?1:0;return months[month]+Math.floor((year-1969+t)/4)-Math.floor((year-1901+t)/100)+Math.floor((year-1601+t)/400)+365*(year-1970)}function toUTC(t){return Number(new NativeDate(1970,0,1,0,0,0,t))}for(var key in NativeDate){Date[key]=NativeDate[key]}Date.now=NativeDate.now;Date.UTC=NativeDate.UTC;Date.prototype=NativeDate.prototype;Date.prototype.constructor=Date;Date.parse=function parse(string){var match=isoDateExpression.exec(string);if(match){var year=Number(match[1]),month=Number(match[2]||1)-1,day=Number(match[3]||1)-1,hour=Number(match[4]||0),minute=Number(match[5]||0),second=Number(match[6]||0),millisecond=Math.floor(Number(match[7]||0)*1e3),isLocalTime=Boolean(match[4]&&!match[8]),signOffset=match[9]==="-"?1:-1,hourOffset=Number(match[10]||0),minuteOffset=Number(match[11]||0),result;if(hour<(minute>0||second>0||millisecond>0?24:25)&&minute<60&&second<60&&millisecond<1e3&&month>-1&&month<12&&hourOffset<24&&minuteOffset<60&&day>-1&&day<dayFromMonth(year,month+1)-dayFromMonth(year,month)){result=((dayFromMonth(year,month)+day)*24+hour+hourOffset*signOffset)*60;result=((result+minute+minuteOffset*signOffset)*60+second)*1e3+millisecond;if(isLocalTime){result=toUTC(result)}if(-864e13<=result&&result<=864e13){return result}}return NaN}return NativeDate.parse.apply(this,arguments)};return Date}(Date)}if(!Date.now){Date.now=function now(){return(new Date).getTime()}}if(!Number.prototype.toFixed||8e-5.toFixed(3)!=="0.000"||.9.toFixed(0)==="0"||1.255.toFixed(2)!=="1.25"||0xde0b6b3a7640080.toFixed(0)!=="1000000000000000128"){(function(){var base,size,data,i;base=1e7;size=6;data=[0,0,0,0,0,0];function multiply(n,c){var i=-1;while(++i<size){c+=n*data[i];data[i]=c%base;c=Math.floor(c/base)}}function divide(n){var i=size,c=0;while(--i>=0){c+=data[i];data[i]=Math.floor(c/n);c=c%n*base}}function toString(){var i=size;var s="";while(--i>=0){if(s!==""||i===0||data[i]!==0){var t=String(data[i]);if(s===""){s=t}else{s+="0000000".slice(0,7-t.length)+t}}}return s}function pow(x,n,acc){return n===0?acc:n%2===1?pow(x,n-1,acc*x):pow(x*x,n/2,acc)}function log(x){var n=0;while(x>=4096){n+=12;x/=4096}while(x>=2){n+=1;x/=2}return n}Number.prototype.toFixed=function(fractionDigits){var f,x,s,m,e,z,j,k;f=Number(fractionDigits);f=f!==f?0:Math.floor(f);if(f<0||f>20){throw new RangeError("Number.toFixed called with invalid number of decimals")}x=Number(this);if(x!==x){return"NaN"}if(x<=-1e21||x>=1e21){return String(x)}s="";if(x<0){s="-";x=-x}m="0";if(x>1e-21){e=log(x*pow(2,69,1))-69;z=e<0?x*pow(2,-e,1):x/pow(2,e,1);z*=4503599627370496;e=52-e;if(e>0){multiply(0,z);j=f;while(j>=7){multiply(1e7,0);j-=7}multiply(pow(10,j,1),0);j=e-1;while(j>=23){divide(1<<23);j-=23}divide(1<<j);multiply(1,1);divide(2);m=toString()}else{multiply(0,z);multiply(1<<-e,0);m=toString()+"0.00000000000000000000".slice(2,2+f)}}if(f>0){k=m.length;if(k<=f){m=s+"0.0000000000000000000".slice(0,f-k+2)+m}else{m=s+m.slice(0,k-f)+"."+m.slice(k-f)}}else{m=s+m}return m}})()}var string_split=String.prototype.split;if("ab".split(/(?:ab)*/).length!==2||".".split(/(.?)(.?)/).length!==4||"tesst".split(/(s)*/)[1]==="t"||"".split(/.?/).length||".".split(/()()/).length>1){(function(){var compliantExecNpcg=/()??/.exec("")[1]===void 0;String.prototype.split=function(separator,limit){var string=this;if(separator===void 0&&limit===0)return[];if(Object.prototype.toString.call(separator)!=="[object RegExp]"){return string_split.apply(this,arguments)}var output=[],flags=(separator.ignoreCase?"i":"")+(separator.multiline?"m":"")+(separator.extended?"x":"")+(separator.sticky?"y":""),lastLastIndex=0,separator=new RegExp(separator.source,flags+"g"),separator2,match,lastIndex,lastLength;string+="";if(!compliantExecNpcg){separator2=new RegExp("^"+separator.source+"$(?!\\s)",flags)}limit=limit===void 0?-1>>>0:limit>>>0;while(match=separator.exec(string)){lastIndex=match.index+match[0].length;if(lastIndex>lastLastIndex){output.push(string.slice(lastLastIndex,match.index));if(!compliantExecNpcg&&match.length>1){match[0].replace(separator2,function(){for(var i=1;i<arguments.length-2;i++){if(arguments[i]===void 0){match[i]=void 0}}})}if(match.length>1&&match.index<string.length){Array.prototype.push.apply(output,match.slice(1))}lastLength=match[0].length;lastLastIndex=lastIndex;if(output.length>=limit){break}}if(separator.lastIndex===match.index){separator.lastIndex++}}if(lastLastIndex===string.length){if(lastLength||!separator.test("")){output.push("")}}else{output.push(string.slice(lastLastIndex))}return output.length>limit?output.slice(0,limit):output}})()}else if("0".split(void 0,0).length){String.prototype.split=function(separator,limit){if(separator===void 0&&limit===0)return[];return string_split.apply(this,arguments)}}if("".substr&&"0b".substr(-1)!=="b"){var string_substr=String.prototype.substr;String.prototype.substr=function(start,length){return string_substr.call(this,start<0?(start=this.length+start)<0?0:start:start,length)}}var ws="	\n\f\r \xa0\u1680\u180e\u2000\u2001\u2002\u2003"+"\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028"+"\u2029\ufeff";if(!String.prototype.trim||ws.trim()){ws="["+ws+"]";var trimBeginRegexp=new RegExp("^"+ws+ws+"*"),trimEndRegexp=new RegExp(ws+ws+"*$");String.prototype.trim=function trim(){if(this===void 0||this===null){throw new TypeError("can't convert "+this+" to object")}return String(this).replace(trimBeginRegexp,"").replace(trimEndRegexp,"")}}function toInteger(n){n=+n;if(n!==n){n=0}else if(n!==0&&n!==1/0&&n!==-(1/0)){n=(n>0||-1)*Math.floor(Math.abs(n))}return n}function isPrimitive(input){var type=typeof input;return input===null||type==="undefined"||type==="boolean"||type==="number"||type==="string"}function toPrimitive(input){var val,valueOf,toString;if(isPrimitive(input)){return input}valueOf=input.valueOf;if(typeof valueOf==="function"){val=valueOf.call(input);if(isPrimitive(val)){return val}}toString=input.toString;if(typeof toString==="function"){val=toString.call(input);if(isPrimitive(val)){return val}}throw new TypeError}var toObject=function(o){if(o==null){throw new TypeError("can't convert "+o+" to object")}return Object(o)}});
2 | //# sourceMappingURL=es5-shim.map


--------------------------------------------------------------------------------
/examples/jquery-bootstrap/thirdparty/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * Bootstrap v3.2.0 (http://getbootstrap.com)
3 |  * Copyright 2011-2014 Twitter, Inc.
4 |  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
5 |  */
6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.2.0",d.prototype.close=function(b){function c(){f.detach().trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one("bsTransitionEnd",c).emulateTransitionEnd(150):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.2.0",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),d[e](null==f[b]?this.options[b]:f[b]),setTimeout(a.proxy(function(){"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target);d.hasClass("btn")||(d=d.closest(".btn")),b.call(d,"toggle"),c.preventDefault()})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b).on("keydown.bs.carousel",a.proxy(this.keydown,this)),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.2.0",c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},c.prototype.keydown=function(a){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.to=function(b){var c=this,d=this.getItemIndex(this.$active=this.$element.find(".item.active"));return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){return this.sliding?void 0:this.slide("next")},c.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},c.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}if(e.hasClass("active"))return this.sliding=!1;var j=e[0],k=a.Event("slide.bs.carousel",{relatedTarget:j,direction:g});if(this.$element.trigger(k),!k.isDefaultPrevented()){if(this.sliding=!0,f&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var l=a(this.$indicators.children()[this.getItemIndex(e)]);l&&l.addClass("active")}var m=a.Event("slid.bs.carousel",{relatedTarget:j,direction:g});return a.support.transition&&this.$element.hasClass("slide")?(e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one("bsTransitionEnd",function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger(m)},0)}).emulateTransitionEnd(1e3*d.css("transition-duration").slice(0,-1))):(d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger(m)),f&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b);!e&&f.toggle&&"show"==b&&(b=!b),e||d.data("bs.collapse",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};c.VERSION="3.2.0",c.DEFAULTS={toggle:!0},c.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},c.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var c=a.Event("show.bs.collapse");if(this.$element.trigger(c),!c.isDefaultPrevented()){var d=this.$parent&&this.$parent.find("> .panel > .in");if(d&&d.length){var e=d.data("bs.collapse");if(e&&e.transitioning)return;b.call(d,"hide"),e||d.data("bs.collapse",null)}var f=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[f](0),this.transitioning=1;var g=function(){this.$element.removeClass("collapsing").addClass("collapse in")[f](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return g.call(this);var h=a.camelCase(["scroll",f].join("-"));this.$element.one("bsTransitionEnd",a.proxy(g,this)).emulateTransitionEnd(350)[f](this.$element[0][h])}}},c.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(d,this)).emulateTransitionEnd(350):d.call(this)}}},c.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var d=a.fn.collapse;a.fn.collapse=b,a.fn.collapse.Constructor=c,a.fn.collapse.noConflict=function(){return a.fn.collapse=d,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(c){var d,e=a(this),f=e.attr("data-target")||c.preventDefault()||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),g=a(f),h=g.data("bs.collapse"),i=h?"toggle":e.data(),j=e.attr("data-parent"),k=j&&a(j);h&&h.transitioning||(k&&k.find('[data-toggle="collapse"][data-parent="'+j+'"]').not(e).addClass("collapsed"),e[g.hasClass("in")?"addClass":"removeClass"]("collapsed")),b.call(g,i)})}(jQuery),+function(a){"use strict";function b(b){b&&3===b.which||(a(e).remove(),a(f).each(function(){var d=c(a(this)),e={relatedTarget:this};d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown",e)),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown",e))}))}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.2.0",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click",b);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus"),f.toggleClass("open").trigger("shown.bs.dropdown",h)}return!1}},g.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var e=c(d),g=e.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.divider):visible a",i=e.find('[role="menu"]'+h+', [role="listbox"]'+h);if(i.length){var j=i.index(i.filter(":focus"));38==b.keyCode&&j>0&&j--,40==b.keyCode&&j<i.length-1&&j++,~j||(j=0),i.eq(j).trigger("focus")}}}};var h=a.fn.dropdown;a.fn.dropdown=d,a.fn.dropdown.Constructor=g,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=h,this},a(document).on("click.bs.dropdown.data-api",b).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",f,g.prototype.toggle).on("keydown.bs.dropdown.data-api",f+', [role="menu"], [role="listbox"]',g.prototype.keydown)}(jQuery),+function(a){"use strict";function b(b,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},c.DEFAULTS,e.data(),"object"==typeof b&&b);f||e.data("bs.modal",f=new c(this,g)),"string"==typeof b?f[b](d):g.show&&f.show(d)})}var c=function(b,c){this.options=c,this.$body=a(document.body),this.$element=a(b),this.$backdrop=this.isShown=null,this.scrollbarWidth=0,this.options.remote&&this.$element.find(".modal-content").load(this.options.remote,a.proxy(function(){this.$element.trigger("loaded.bs.modal")},this))};c.VERSION="3.2.0",c.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},c.prototype.toggle=function(a){return this.isShown?this.hide():this.show(a)},c.prototype.show=function(b){var c=this,d=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(d),this.isShown||d.isDefaultPrevented()||(this.isShown=!0,this.checkScrollbar(),this.$body.addClass("modal-open"),this.setScrollbar(),this.escape(),this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.backdrop(function(){var d=a.support.transition&&c.$element.hasClass("fade");c.$element.parent().length||c.$element.appendTo(c.$body),c.$element.show().scrollTop(0),d&&c.$element[0].offsetWidth,c.$element.addClass("in").attr("aria-hidden",!1),c.enforceFocus();var e=a.Event("shown.bs.modal",{relatedTarget:b});d?c.$element.find(".modal-dialog").one("bsTransitionEnd",function(){c.$element.trigger("focus").trigger(e)}).emulateTransitionEnd(300):c.$element.trigger("focus").trigger(e)}))},c.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.$body.removeClass("modal-open"),this.resetScrollbar(),this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.bs.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one("bsTransitionEnd",a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},c.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.trigger("focus")},this))},c.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},c.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.$element.trigger("hidden.bs.modal")})},c.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},c.prototype.backdrop=function(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;if(this.$backdrop=a('<div class="modal-backdrop '+d+'" />').appendTo(this.$body),this.$element.on("click.dismiss.bs.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;e?this.$backdrop.one("bsTransitionEnd",b).emulateTransitionEnd(150):b()}else if(!this.isShown&&this.$backdrop){this.$backdrop.removeClass("in");var f=function(){c.removeBackdrop(),b&&b()};a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one("bsTransitionEnd",f).emulateTransitionEnd(150):f()}else b&&b()},c.prototype.checkScrollbar=function(){document.body.clientWidth>=window.innerWidth||(this.scrollbarWidth=this.scrollbarWidth||this.measureScrollbar())},c.prototype.setScrollbar=function(){var a=parseInt(this.$body.css("padding-right")||0,10);this.scrollbarWidth&&this.$body.css("padding-right",a+this.scrollbarWidth)},c.prototype.resetScrollbar=function(){this.$body.css("padding-right","")},c.prototype.measureScrollbar=function(){var a=document.createElement("div");a.className="modal-scrollbar-measure",this.$body.append(a);var b=a.offsetWidth-a.clientWidth;return this.$body[0].removeChild(a),b};var d=a.fn.modal;a.fn.modal=b,a.fn.modal.Constructor=c,a.fn.modal.noConflict=function(){return a.fn.modal=d,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(c){var d=a(this),e=d.attr("href"),f=a(d.attr("data-target")||e&&e.replace(/.*(?=#[^\s]+$)/,"")),g=f.data("bs.modal")?"toggle":a.extend({remote:!/#/.test(e)&&e},f.data(),d.data());d.is("a")&&c.preventDefault(),f.one("show.bs.modal",function(a){a.isDefaultPrevented()||f.one("hidden.bs.modal",function(){d.is(":visible")&&d.trigger("focus")})}),b.call(f,g,this)})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof b&&b;(e||"destroy"!=b)&&(e||d.data("bs.tooltip",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};c.VERSION="3.2.0",c.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},c.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.$viewport=this.options.viewport&&a(this.options.viewport.selector||this.options.viewport);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focusin",i="hover"==g?"mouseleave":"focusout";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},c.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},c.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?void(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show)):c.show()},c.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?void(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide)):c.hide()},c.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(b);var c=a.contains(document.documentElement,this.$element[0]);if(b.isDefaultPrevented()||!c)return;var d=this,e=this.tip(),f=this.getUID(this.type);this.setContent(),e.attr("id",f),this.$element.attr("aria-describedby",f),this.options.animation&&e.addClass("fade");var g="function"==typeof this.options.placement?this.options.placement.call(this,e[0],this.$element[0]):this.options.placement,h=/\s?auto?\s?/i,i=h.test(g);i&&(g=g.replace(h,"")||"top"),e.detach().css({top:0,left:0,display:"block"}).addClass(g).data("bs."+this.type,this),this.options.container?e.appendTo(this.options.container):e.insertAfter(this.$element);var j=this.getPosition(),k=e[0].offsetWidth,l=e[0].offsetHeight;if(i){var m=g,n=this.$element.parent(),o=this.getPosition(n);g="bottom"==g&&j.top+j.height+l-o.scroll>o.height?"top":"top"==g&&j.top-o.scroll-l<0?"bottom":"right"==g&&j.right+k>o.width?"left":"left"==g&&j.left-k<o.left?"right":g,e.removeClass(m).addClass(g)}var p=this.getCalculatedOffset(g,j,k,l);this.applyPlacement(p,g);var q=function(){d.$element.trigger("shown.bs."+d.type),d.hoverState=null};a.support.transition&&this.$tip.hasClass("fade")?e.one("bsTransitionEnd",q).emulateTransitionEnd(150):q()}},c.prototype.applyPlacement=function(b,c){var d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight,g=parseInt(d.css("margin-top"),10),h=parseInt(d.css("margin-left"),10);isNaN(g)&&(g=0),isNaN(h)&&(h=0),b.top=b.top+g,b.left=b.left+h,a.offset.setOffset(d[0],a.extend({using:function(a){d.css({top:Math.round(a.top),left:Math.round(a.left)})}},b),0),d.addClass("in");var i=d[0].offsetWidth,j=d[0].offsetHeight;"top"==c&&j!=f&&(b.top=b.top+f-j);var k=this.getViewportAdjustedDelta(c,b,i,j);k.left?b.left+=k.left:b.top+=k.top;var l=k.left?2*k.left-e+i:2*k.top-f+j,m=k.left?"left":"top",n=k.left?"offsetWidth":"offsetHeight";d.offset(b),this.replaceArrow(l,d[0][n],m)},c.prototype.replaceArrow=function(a,b,c){this.arrow().css(c,a?50*(1-a/b)+"%":"")},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},c.prototype.hide=function(){function b(){"in"!=c.hoverState&&d.detach(),c.$element.trigger("hidden.bs."+c.type)}var c=this,d=this.tip(),e=a.Event("hide.bs."+this.type);return this.$element.removeAttr("aria-describedby"),this.$element.trigger(e),e.isDefaultPrevented()?void 0:(d.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d.one("bsTransitionEnd",b).emulateTransitionEnd(150):b(),this.hoverState=null,this)},c.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},c.prototype.hasContent=function(){return this.getTitle()},c.prototype.getPosition=function(b){b=b||this.$element;var c=b[0],d="BODY"==c.tagName;return a.extend({},"function"==typeof c.getBoundingClientRect?c.getBoundingClientRect():null,{scroll:d?document.documentElement.scrollTop||document.body.scrollTop:b.scrollTop(),width:d?a(window).width():b.outerWidth(),height:d?a(window).height():b.outerHeight()},d?{top:0,left:0}:b.offset())},c.prototype.getCalculatedOffset=function(a,b,c,d){return"bottom"==a?{top:b.top+b.height,left:b.left+b.width/2-c/2}:"top"==a?{top:b.top-d,left:b.left+b.width/2-c/2}:"left"==a?{top:b.top+b.height/2-d/2,left:b.left-c}:{top:b.top+b.height/2-d/2,left:b.left+b.width}},c.prototype.getViewportAdjustedDelta=function(a,b,c,d){var e={top:0,left:0};if(!this.$viewport)return e;var f=this.options.viewport&&this.options.viewport.padding||0,g=this.getPosition(this.$viewport);if(/right|left/.test(a)){var h=b.top-f-g.scroll,i=b.top+f-g.scroll+d;h<g.top?e.top=g.top-h:i>g.top+g.height&&(e.top=g.top+g.height-i)}else{var j=b.left-f,k=b.left+f+c;j<g.left?e.left=g.left-j:k>g.width&&(e.left=g.left+g.width-k)}return e},c.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},c.prototype.getUID=function(a){do a+=~~(1e6*Math.random());while(document.getElementById(a));return a},c.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},c.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},c.prototype.enable=function(){this.enabled=!0},c.prototype.disable=function(){this.enabled=!1},c.prototype.toggleEnabled=function(){this.enabled=!this.enabled},c.prototype.toggle=function(b){var c=this;b&&(c=a(b.currentTarget).data("bs."+this.type),c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c))),c.tip().hasClass("in")?c.leave(c):c.enter(c)},c.prototype.destroy=function(){clearTimeout(this.timeout),this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var d=a.fn.tooltip;a.fn.tooltip=b,a.fn.tooltip.Constructor=c,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=d,this}}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof b&&b;(e||"destroy"!=b)&&(e||d.data("bs.popover",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");c.VERSION="3.2.0",c.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),c.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),c.prototype.constructor=c,c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content").empty()[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},c.prototype.hasContent=function(){return this.getTitle()||this.getContent()},c.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},c.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var d=a.fn.popover;a.fn.popover=b,a.fn.popover.Constructor=c,a.fn.popover.noConflict=function(){return a.fn.popover=d,this}}(jQuery),+function(a){"use strict";function b(c,d){var e=a.proxy(this.process,this);this.$body=a("body"),this.$scrollElement=a(a(c).is("body")?window:c),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",e),this.refresh(),this.process()}function c(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})}b.VERSION="3.2.0",b.DEFAULTS={offset:10},b.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},b.prototype.refresh=function(){var b="offset",c=0;a.isWindow(this.$scrollElement[0])||(b="position",c=this.$scrollElement.scrollTop()),this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight();var d=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[b]().top+c,e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){d.offsets.push(this[0]),d.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.getScrollHeight(),d=this.options.offset+c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(this.scrollHeight!=c&&this.refresh(),b>=d)return g!=(a=f[f.length-1])&&this.activate(a);if(g&&b<=e[0])return g!=(a=f[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parentsUntil(this.options.target,".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")};var d=a.fn.scrollspy;a.fn.scrollspy=c,a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=d,this},a(window).on("load.bs.scrollspy.data-api",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);c.call(b,b.data())})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new c(this)),"string"==typeof b&&e[b]()})}var c=function(b){this.element=a(b)};c.VERSION="3.2.0",c.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.closest("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},c.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one("bsTransitionEnd",e).emulateTransitionEnd(150):e(),f.removeClass("in")};var d=a.fn.tab;a.fn.tab=b,a.fn.tab.Constructor=c,a.fn.tab.noConflict=function(){return a.fn.tab=d,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(c){c.preventDefault(),b.call(a(this),"show")})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof b&&b;e||d.data("bs.affix",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.options=a.extend({},c.DEFAULTS,d),this.$target=a(this.options.target).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(b),this.affixed=this.unpin=this.pinnedOffset=null,this.checkPosition()};c.VERSION="3.2.0",c.RESET="affix affix-top affix-bottom",c.DEFAULTS={offset:0,target:window},c.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(c.RESET).addClass("affix");var a=this.$target.scrollTop(),b=this.$element.offset();return this.pinnedOffset=b.top-a},c.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},c.prototype.checkPosition=function(){if(this.$element.is(":visible")){var b=a(document).height(),d=this.$target.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top(this.$element)),"function"==typeof h&&(h=f.bottom(this.$element));var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=b-h?"bottom":null!=g&&g>=d?"top":!1;if(this.affixed!==i){null!=this.unpin&&this.$element.css("top","");var j="affix"+(i?"-"+i:""),k=a.Event(j+".bs.affix");this.$element.trigger(k),k.isDefaultPrevented()||(this.affixed=i,this.unpin="bottom"==i?this.getPinnedOffset():null,this.$element.removeClass(c.RESET).addClass(j).trigger(a.Event(j.replace("affix","affixed"))),"bottom"==i&&this.$element.offset({top:b-this.$element.height()-h}))}}};var d=a.fn.affix;a.fn.affix=b,a.fn.affix.Constructor=c,a.fn.affix.noConflict=function(){return a.fn.affix=d,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var c=a(this),d=c.data();d.offset=d.offset||{},d.offsetBottom&&(d.offset.bottom=d.offsetBottom),d.offsetTop&&(d.offset.top=d.offsetTop),b.call(c,d)})})}(jQuery);


--------------------------------------------------------------------------------