Initial documentation pages
This commit is contained in:
Brandon Tilley
parent
0571225149
commit
d5862b3818
8
site/public/_header.ejs
Normal file
8
site/public/_header.ejs
Normal file
@ -0,0 +1,8 @@
|
||||
<title>Planetary.js</title>
|
||||
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link type="text/css" rel="stylesheet" href="/semantic/css/semantic.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="/css/planetaryjs.css">
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
@ -1,43 +1,16 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Planetary.js</title>
|
||||
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link type="text/css" rel="stylesheet" href="semantic/css/semantic.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/planetaryjs.css">
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
||||
<%- partial("_header") %>
|
||||
</head>
|
||||
<body>
|
||||
<div class='ui fixed inverted large menu main-menu'>
|
||||
<div class='items'>
|
||||
<a class='item title' href='index.html'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
||||
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
||||
</a>
|
||||
<a class='item minor' href='examples.html'>
|
||||
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
||||
</a>
|
||||
<a class='item minor' href='examples.html'>
|
||||
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
|
||||
</a>
|
||||
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
|
||||
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<%- partial("_menu") %>
|
||||
|
||||
<div class='content container'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
<script type='text/javascript' src="js/lib/d3.v3.min.js"></script>
|
||||
<script type='text/javascript' src="js/lib/topojson.v1.min.js"></script>
|
||||
<script type="text/javascript" src="js/lib/planetaryjs.min.js"></script>
|
||||
|
||||
<%- partial("_scripts") %>
|
||||
<script type="text/javascript" src="js/homepage.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
site/public/_menu.ejs
Normal file
20
site/public/_menu.ejs
Normal file
@ -0,0 +1,20 @@
|
||||
<div class='ui fixed inverted large menu main-menu'>
|
||||
<div class='items'>
|
||||
<a class='item title' href='/index.html'>
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
||||
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
||||
</a>
|
||||
<a class='item minor' href='/examples/'>
|
||||
<i class='laptop icon'></i><span class='hide-on-mobile'>Examples</span>
|
||||
</a>
|
||||
<a class='item minor' href='/documentation/'>
|
||||
<i class='book icon'></i><span class='hide-on-mobile'>Documentation</span>
|
||||
</a>
|
||||
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js'>
|
||||
<i class='github alternate icon'></i><span class='hide-on-mobile'>Fork on GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
3
site/public/_scripts.ejs
Normal file
3
site/public/_scripts.ejs
Normal file
@ -0,0 +1,3 @@
|
||||
<script type='text/javascript' src="/js/lib/d3.v3.min.js"></script>
|
||||
<script type='text/javascript' src="/js/lib/topojson.v1.min.js"></script>
|
||||
<script type="text/javascript" src="/js/lib/planetaryjs.min.js"></script>
|
||||
@ -23,6 +23,12 @@ h1.title-header, h2.title-header {
|
||||
|
||||
.content.container {
|
||||
padding-top: 50px;
|
||||
|
||||
.slim {
|
||||
max-width: 1108px;
|
||||
padding: 0 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
@ -68,12 +74,20 @@ canvas {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ui.grid > .eight.wide.column {
|
||||
.ui.grid > .wide.column {
|
||||
width: auto !important;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
h1:first-child {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.hide-on-non-mobile {
|
||||
display: none !important;
|
||||
@ -119,3 +133,18 @@ canvas {
|
||||
.no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui.menu .item.with-subitems {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.ui.menu .item.contains-subitems {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 14px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
54
site/public/documentation/_layout.ejs
Normal file
54
site/public/documentation/_layout.ejs
Normal file
@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<%- partial("../_header") %>
|
||||
</head>
|
||||
<body>
|
||||
<%- partial("../_menu") %>
|
||||
|
||||
<div class='content container'>
|
||||
<div class='page ui slim stackable grid'>
|
||||
<div class='four wide column'>
|
||||
<div class='ui fluid vertical menu'>
|
||||
<a class='item <%- current.source == 'index' ? 'active' : '' %>' href='/documentation/index.html'>
|
||||
Introduction
|
||||
<i class='icon home'></i>
|
||||
</a>
|
||||
<a class='item <%- current.source == 'core' ? 'active' : '' %>' href='/documentation/core.html'>
|
||||
Core API
|
||||
<i class='icon setting'></i>
|
||||
</a>
|
||||
<a class='item <%- current.source == 'planet' ? 'active' : '' %>' href='/documentation/planet.html'>
|
||||
Planet API
|
||||
<i class='icon globe'></i>
|
||||
</a>
|
||||
<a class='item <%- current.source == 'plugins' ? 'active' : '' %>' href='/documentation/plugins.html'>
|
||||
Plugins
|
||||
<i class='icon edit'></i>
|
||||
</a>
|
||||
<a class='item with-subitems <%- current.source == 'builtin' ? 'active' : '' %>' href='/documentation/builtin.html'>
|
||||
Built-In Plugins
|
||||
<i class='icon bolt'></i>
|
||||
</a>
|
||||
<div class='item contains-subitems'>
|
||||
<div class='menu'>
|
||||
<a class='item <%- current.source == 'builtin_earth' ? 'active' : '' %>' href='/documentation/builtin_earth.html'>Earth</a>
|
||||
<a class='item <%- current.source == 'builtin_topojson' ? 'active' : '' %>' href='/documentation/builtin_topojson.html'>TopoJSON</a>
|
||||
<a class='item <%- current.source == 'builtin_oceans' ? 'active' : '' %>' href='/documentation/builtin_oceans.html'>Oceans</a>
|
||||
<a class='item <%- current.source == 'builtin_land' ? 'active' : '' %>' href='/documentation/builtin_land.html'>Land</a>
|
||||
<a class='item <%- current.source == 'builtin_borders' ? 'active' : '' %>' href='/documentation/builtin_borders.html'>Borders</a>
|
||||
<a class='item <%- current.source == 'builtin_pings' ? 'active' : '' %>' href='/documentation/builtin_pings.html'>Pings</a>
|
||||
<a class='item <%- current.source == 'builtin_zoom' ? 'active' : '' %>' href='/documentation/builtin_zoom.html'>Zoom</a>
|
||||
<a class='item <%- current.source == 'builtin_drag' ? 'active' : '' %>' href='/documentation/builtin_drag.html'>Drag</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='twelve wide column'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
2
site/public/documentation/builtin.md
Normal file
2
site/public/documentation/builtin.md
Normal file
@ -0,0 +1,2 @@
|
||||
Built-In Plugins
|
||||
================
|
||||
2
site/public/documentation/builtin_borders.md
Normal file
2
site/public/documentation/builtin_borders.md
Normal file
@ -0,0 +1,2 @@
|
||||
Borders Plugin
|
||||
==============
|
||||
2
site/public/documentation/builtin_drag.md
Normal file
2
site/public/documentation/builtin_drag.md
Normal file
@ -0,0 +1,2 @@
|
||||
Drag Plugin
|
||||
===========
|
||||
2
site/public/documentation/builtin_earth.md
Normal file
2
site/public/documentation/builtin_earth.md
Normal file
@ -0,0 +1,2 @@
|
||||
Earth Plugin
|
||||
============
|
||||
2
site/public/documentation/builtin_land.md
Normal file
2
site/public/documentation/builtin_land.md
Normal file
@ -0,0 +1,2 @@
|
||||
Land Plugin
|
||||
===========
|
||||
2
site/public/documentation/builtin_oceans.md
Normal file
2
site/public/documentation/builtin_oceans.md
Normal file
@ -0,0 +1,2 @@
|
||||
Oceans Plugin
|
||||
=============
|
||||
2
site/public/documentation/builtin_pings.md
Normal file
2
site/public/documentation/builtin_pings.md
Normal file
@ -0,0 +1,2 @@
|
||||
Pings Plugin
|
||||
============
|
||||
2
site/public/documentation/builtin_topojson.md
Normal file
2
site/public/documentation/builtin_topojson.md
Normal file
@ -0,0 +1,2 @@
|
||||
TopoJSON Plugin
|
||||
===============
|
||||
2
site/public/documentation/builtin_zoom.md
Normal file
2
site/public/documentation/builtin_zoom.md
Normal file
@ -0,0 +1,2 @@
|
||||
Zoom Plugin
|
||||
===========
|
||||
64
site/public/documentation/core.md
Normal file
64
site/public/documentation/core.md
Normal file
@ -0,0 +1,64 @@
|
||||
Core API
|
||||
========
|
||||
|
||||
Installation
|
||||
------------
|
||||
|
||||
Once you've [downloaded Planetary.js](https://github.com/BinaryMuse/planetary.js/releases), you can include it via a `script` tag on your page *after* the inclusion of D3 and TopoJSON. This example uses the CDN URLs for those libraries:
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
|
||||
<script type='text/javascript' src='http://d3js.org/topojson.v1.min.js'></script>
|
||||
<script type='text/javascript' src='path/to/planetaryjs.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
...
|
||||
```
|
||||
</div>
|
||||
|
||||
Core API
|
||||
--------
|
||||
|
||||
**`planetaryjs.noConflict()`**
|
||||
|
||||
In non-AMD and non-CommonJS environments, Planetary.js takes over the global `planetaryjs` namespace (in the browser, this means `window.planetaryjs`). If, for some reason, something else useful was there before you loaded Planetary.js, you can ask for it to be returned to that spot by calling `planetaryjs.noConflict()`. The Planetary.js library will be returned from the function, so you can continue to use the library.
|
||||
|
||||
<div class='ui raised segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var planetary = planetaryjs.noConflict();
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planetaryjs.loadPlugin(plugin)`**
|
||||
|
||||
Planetary.js uses a plugin architecture for all its functionality. Calling `planetaryjs.loadPlugin` will cause that plugin to be loaded in *all* planets created from this library. If you only want to use a plugin in some of your planets, use the `planet.loadPlugin` method (from the [Planet API](/documentation/planet.html)) instead.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planetaryjs.loadPlugin(somePlugin);
|
||||
planetaryjs.loadPlugin(somePluginGenerator());
|
||||
```
|
||||
</div>
|
||||
|
||||
For more information on the plugin system and API, please see the [Plugins](/documentation/plugins.html) documentation.
|
||||
|
||||
**`planetaryjs.planet()`**
|
||||
|
||||
The `planet` API call returns a new planet instance, which represents a single globe. It will be created with all the plugins registered with `planetaryjs.loadPlugin()` active. It has various methods for manipulating the globe and drawing it to a canvas. The [Planet API](/documentation/planet.html) covers these methods in considerably more detail.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var planet = planetaryjs.planet();
|
||||
```
|
||||
</div>
|
||||
11
site/public/documentation/index.md
Normal file
11
site/public/documentation/index.md
Normal file
@ -0,0 +1,11 @@
|
||||
Introduction
|
||||
============
|
||||
|
||||
Planetary.js is a JavaScript library for building awesome interactive globes. It uses [D3](http://d3js.org/) and [TopoJSON](https://github.com/mbostock/topojson) to parse and render geographic data. Planetary.js is a plugin-based system; even the default functionality is implemented as plugins! This makes Planetary.js extremely flexible.
|
||||
|
||||
The documentation is split up into several sections:
|
||||
|
||||
* [Core API](/documentation/core.html) describes the top-level Planetary.js API, including installing and configuring the library and creating new instances of planets.
|
||||
* [Planet API](/documentation/planet.html) describes the API associated with a planet instance, including modifying its properties and accessing a special canvas context that allows you to draw on the globe.
|
||||
* [Plugins](/documentation/plugins.html) describes the plugin architecture of Planetary.js and shows how you can easily build your own plugins to modify the behavior of Planetary.js
|
||||
* [Built-In Plugins](/documentation/builtin.html) describes each of the built-in plugins in turn, including their public API and how to use them in a project.
|
||||
139
site/public/documentation/planet.md
Normal file
139
site/public/documentation/planet.md
Normal file
@ -0,0 +1,139 @@
|
||||
Planet API
|
||||
==========
|
||||
|
||||
A "planet" represents a single globe and its rendering instructions. It is created from the `planetaryjs.planet()` method; see the [Core API](/documentation/core.html) documentation for more details.
|
||||
|
||||
**`planet.loadPlugin(plugin)`**
|
||||
|
||||
Planetary.js uses a plugin architecture for all its functionality. While you can load plugins at the global library level, Planetary.js also allows you to load plugins for specific planets. **If a planet is drawn and no plugins have been loaded globally and no plugins have been loaded for the specific planet instance, it will use the default `earth` and `pings` plugins.**
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.loadPlugin(somePlugin);
|
||||
planet.loadPlugin(somePluginGenerator());
|
||||
```
|
||||
</div>
|
||||
|
||||
For more information on the plugin system and API, please see the [Plugins](/documentation/plugins.html) documentation.
|
||||
|
||||
**`planet.projection`**
|
||||
|
||||
The core of a planet's data model is an [`d3.geo.projection`](https://github.com/mbostock/d3/wiki/Geo-Projections) (specifically, an orthographic projection), which is exposed by a planet by `planet.projection`. You can use this object to control various aspects of the planet. The D3 documentation covers the methods in considerable detail, so [be sure to check it out](https://github.com/mbostock/d3/wiki/Geo-Projections); many of the examples on this site also use the projection object to operate.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.projection
|
||||
.scale(width / 2)
|
||||
.rotate([60, -10, 0]);
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.path`**
|
||||
|
||||
`planet.path` is a [`d3.geo.path`](https://github.com/mbostock/d3/wiki/Geo-Paths) which uses the planet's internal projection to generate path data for geographical features. Its `context` method is commonly used by interal plugins to take a canvas context and return a path generator that can be used to draw on the globe.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
canvasContext.beginPath();
|
||||
planet.path.context(canvasContext)(geoFeature);
|
||||
canvasContext.fill();
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.plugins`**
|
||||
|
||||
Planetary.js provides an empty object that plugins may use to store public data and methods. If a plugin is well-behaved, it will keep all its properties on the object under a single key (usually one that share's the plugin's name).
|
||||
|
||||
**`planet.canvas` and `planet.context`**
|
||||
|
||||
Once you call `draw` on a planet instance, Planetary.js will set the `canvas` and `context` properties to the canvas and its context, respectively.
|
||||
|
||||
**`planet.onInit( function([done]){} )`**
|
||||
|
||||
Registers a function to be called when the planet is initialized (which happens after a call to `draw` and after any loaded plugins have been initialized). This is mostly used by plugins to initialize themselves when the planet "boots."
|
||||
|
||||
If the provided callback function takes any parameters, it will be a "done" function that must be called once the initialization function finishes any asynchronous work before the planet will continue to initialize.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.onInit(function() {
|
||||
doSomeSetupStuff();
|
||||
});
|
||||
|
||||
planet.onInit(function(done) {
|
||||
doSomeAsynchronousSetupStuff(function() {
|
||||
done();
|
||||
});
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.onDraw( function(){} )`**
|
||||
|
||||
Registers a function to be called each time the globe redraws itself. This is mostly used by plugins to draw plugin-specific data or otherwise animate the globe.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += 1;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.withSavedContext( function(context){} )`**
|
||||
|
||||
Calls the function with the current canvas context as a paremter, wrapping the function call in `context.save()` and `context.restore()`. Use this function any time you're going to modify the context to ensure it gets put back to the way it was.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
planet.onDraw(function() {
|
||||
planet.withSavedContext(function(context) {
|
||||
context.beginPath();
|
||||
planet.path.context(context)({type: 'Sphere'});
|
||||
context.fillStyle = config.fill || 'black';
|
||||
context.fill();
|
||||
});
|
||||
});
|
||||
```
|
||||
</div>
|
||||
|
||||
**`planet.draw(canvas)`**
|
||||
|
||||
Begins drawing the globe onto the given canvas. `canvas` should be a raw DOM element (e.g. as returned by `document.getElementById`). Specifically, if it is wrapped by D3 or jQuery, you need to unwrap it with something like `wrappedCanvas[0]`.
|
||||
|
||||
Calling `draw` will perform the following operations:
|
||||
|
||||
1. Initialize each loaded plugin by calling the plugin function.
|
||||
2. Set `planet.canvas` and `planet.context` to the canvas and the canvas' context, respectively.
|
||||
3. Run each registered `onInit` hook in the order it was registered (note that `onInit` calls made by plugins will not be made until step 1, after `draw` has been called).
|
||||
4. Start the animation loop, each tick clearing the canvas and calling any registered `onDraw` hooks in order.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui blue ribbon label'>HTML</div>
|
||||
|
||||
```html
|
||||
<canvas id='myCanvas' width='123' height='456'></canvas>
|
||||
```
|
||||
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var canvas = document.getElementById('myCanvas');
|
||||
planet.draw(canvas);
|
||||
```
|
||||
</div>
|
||||
57
site/public/documentation/plugins.md
Normal file
57
site/public/documentation/plugins.md
Normal file
@ -0,0 +1,57 @@
|
||||
Plugins
|
||||
=======
|
||||
|
||||
Planetary.js uses a plugin-based architecture, and all the built-in functionality is built using this architecture. This makes Planetary.js extremely flexible.
|
||||
|
||||
Loading Plugins
|
||||
---------------
|
||||
|
||||
Plugins are loaded either globally by `planetaryjs.loadPlugin` or for a specific planet instance by `planet.loadPlugin`. If you call `draw` on a planet and it has no plugins loaded at all (from either source), Planetary.js will use the default plugin stack, which consists of the `earth` and `pings` plugins.
|
||||
|
||||
Anatomy of a Plugin
|
||||
-------------------
|
||||
|
||||
A plugin is simply a JavaScript function that takes a planet instance as a parameter and performs some predefined operation. **The best plugins do one tiny thing.** If you want a plugin to do a lot of things at once, you should build a plugin that wraps other, smaller plugins; in fact, this is exactly how the `earth` plugin is built. See the [Earth](/documentation/builtin_earth.html) documentation for more details.
|
||||
|
||||
Most of the time, a plugin will implement its behavior by registering callbacks into the planet's lifecycle hooks. For example, the following simple plugin increments the planet's projection's rotation by one degree every tick (this would make for a very fast spinning globe, but demonstrates the idea nicely enough):
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var autorotate = function(planet) {
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += 1;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate);
|
||||
```
|
||||
</div>
|
||||
|
||||
Plugin Generators
|
||||
-----------------
|
||||
|
||||
Often, you'll want your plugin to be configurable with some user-defined values. You can create a function generator, which is a function that takes your configuration data and then *returns* the plugin function. You can then call this generator to generate the plugin function for use by `loadPlugin`.
|
||||
|
||||
<div class='ui raise segment'>
|
||||
<div class='ui red ribbon label'>JavaScript</div>
|
||||
|
||||
```javascript
|
||||
var autorotate = function(degreesPerTick) {
|
||||
return function(planet) {
|
||||
planet.onDraw(function() {
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += degreesPerTick;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
planet.loadPlugin(autorotate(5));
|
||||
```
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
|
||||
<div style='padding-top: 10px;'>
|
||||
Or install with <a href='http://bower.io/'>Bower</a>: <div class='ui small label'>bower install planetary.js</div>
|
||||
Or install with <a href='http://bower.io/'>Bower</a>: <div class='ui small label'><i class='icon right arrow'></i> bower install planetary.js</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -66,20 +66,20 @@
|
||||
|
||||
<div class='ui three column stackable divided grid center aligned'>
|
||||
<div class='column'>
|
||||
<a class='ui icon header' href='examples.html'>
|
||||
<a class='ui icon header' href='/examples/'>
|
||||
<i class='ui huge icon laptop'></i>
|
||||
Examples
|
||||
</a>
|
||||
<p>Check out working examples and see what Planetary.js can do</p>
|
||||
<p><a class='ui teal button' href='examples.html'>Explore the Examples</a></p>
|
||||
<p><a class='ui teal button' href='/examples/'>Explore the Examples</a></p>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<a class='ui icon header' href='documentation.html'>
|
||||
<a class='ui icon header' href='/documentation/'>
|
||||
<i class='ui huge icon book'></i>
|
||||
Documentation
|
||||
</a>
|
||||
<p>Download and install Planetary.js and build something awesome</p>
|
||||
<p><a class='ui orange button' href='documentation.html'>Peruse the Documentation</a></p>
|
||||
<p><a class='ui orange button' href='/documentation/'>Peruse the Documentation</a></p>
|
||||
</div>
|
||||
<div class='column'>
|
||||
<a class='ui icon header' href='https://github.com/BinaryMuse/planetary.js'>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user