mirror
/
vizicities
kopia lustrzana https://github.com/robhawkes/vizicities
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Initial commit of description UI

0.2
Robin Hawkes 2015-03-03 21:45:36 +00:00
rodzic 855ff74dd2
commit 14caea1759
7 zmienionych plików z 175 dodań i 12 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
Gruntfile.js
Wyświetl plik

@ -19,6 +19,8 @@ module.exports = function(grunt) {
"src/UI/KeyUIColourScale.js": "src/UI/KeyUIColourScale.jsx"
}, {
"src/UI/InfoUI2D.js": "src/UI/InfoUI2D.jsx"
}, {
"src/UI/DescriptionUI.js": "src/UI/DescriptionUI.jsx"
}]
}
},

38
build/vizi.css
Wyświetl plik

@ -45,6 +45,10 @@
}
.vizicities-ui .vizicities-layers-ui {
display: absolute;
}
.vizicities-ui .vizicities-layers-ui-item {
background: #fff;
border-radius: 3px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@ -57,20 +61,24 @@
width: 200px;
}
.vizicities-ui .vizicities-layers-ui ul {
.vizicities-ui .vizicities-layers-ui-item ul {
list-style: none;
margin: 0;
padding: 10px 0 10px;
}
.vizicities-ui .vizicities-layers-ui li {
.vizicities-ui .vizicities-layers-ui-item li {
margin: 0;
padding: 5px 15px;
}
.vizicities-ui .vizicities-layers-ui li input {
.vizicities-ui .vizicities-layers-ui-item li input {
vertical-align: text-bottom;
}
.vizicities-ui .vizicities-key-ui {
display: absolute;
}
.vizicities-ui .vizicities-key-ui-item {
background: #fff;
@ -123,4 +131,26 @@
position: absolute;
text-align: center;
text-transform: uppercase;
}
}
.vizicities-ui .vizicities-description-ui {
display: absolute;
}
.vizicities-ui .vizicities-description-ui-item {
background: #fff;
border-radius: 3px;
bottom: 20px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
pointer-events: auto;
position: absolute;
left: 20px;
width: 400px;
}
.vizicities-ui .vizicities-description-ui-item p {
line-height: 1.5em;
margin: 15px;
}

67
build/vizi.js
Wyświetl plik

@ -7379,6 +7379,61 @@ if (typeof window === undefined) {
})();
/* globals window, _, React, VIZI */
/**
* Description UI class
* @author Robin Hawkes - vizicities.com
*/
// TODO: Sort out scoping issues
// TODO: Work out a neater structure for defining the render method
(function() {
"use strict";
VIZI.DescriptionUI = function(options) {
var self = this;
var scope = self;
self.options = options || {};
_.defaults(options, {});
// Check that UI container exists
if (!document.querySelector(".vizicities-ui .vizicities-description-ui")) {
var container = document.createElement("section");
container.classList.add("vizicities-description-ui");
document.querySelector(".vizicities-ui").appendChild(container);
}
self.description = React.createClass({displayName: "description",
render: function() {
var self = this;
return (
React.createElement("section", {className: "vizicities-ui-item vizicities-description-ui-item"},
React.createElement("header", null,
React.createElement("h2", null, self.props.title)
),
React.createElement("p", null, self.props.body)
)
);
}
});
self.onChange();
};
VIZI.DescriptionUI.prototype.onChange = function() {
var self = this;
var Description = self.description;
React.render(React.createElement(Description, {title: self.options.title, body: self.options.body}), document.querySelector(".vizicities-description-ui"));
};
})();
/* globals window, _, React, VIZI */
/**
* 2D info UI class
* @author Robin Hawkes - vizicities.com
@ -7584,6 +7639,14 @@ if (typeof window === undefined) {
self.layers = layers;
// Check that UI container exists
if (!document.querySelector(".vizicities-ui .vizicities-layers-ui")) {
var container = document.createElement("section");
container.classList.add("vizicities-layers-ui");
document.querySelector(".vizicities-ui").appendChild(container);
}
self.layerControl = React.createClass({displayName: "layerControl",
render: function() {
var self = this;
@ -7605,7 +7668,7 @@ if (typeof window === undefined) {
});
return (
React.createElement("section", {className: "vizicities-ui-item vizicities-layers-ui"},
React.createElement("section", {className: "vizicities-ui-item vizicities-layers-ui-item"},
React.createElement("header", null,
React.createElement("h2", null, "Layers")
),
@ -7655,7 +7718,7 @@ if (typeof window === undefined) {
var LayerControl = self.layerControl;
React.render(React.createElement(LayerControl, {layers: self.layers, onHide: self.onHideLayer, onShow: self.onShowLayer}), document.querySelector(".vizicities-ui"));
React.render(React.createElement(LayerControl, {layers: self.layers, onHide: self.onHideLayer, onShow: self.onShowLayer}), document.querySelector(".vizicities-layers-ui"));
};
})();
/* globals window, _, VIZI */

8
build/vizi.min.js vendored
Wyświetl plik

File diff suppressed because one or more lines are too long

5
examples/basic-example/main.js
Wyświetl plik

@ -8,6 +8,11 @@ var controls = new VIZI.ControlsMap(world.camera, {
viewport: world.options.viewport
});
var descriptionUI = new VIZI.DescriptionUI({
title: "Basic example",
body: "This is a basic example showing a 2D basemap, 3D building tiles and a choropleth of population density."
});
var mapConfig = {
input: {
type: "BlueprintInputMapTiles",

55
src/UI/DescriptionUI.jsx 100644
Wyświetl plik

@ -0,0 +1,55 @@
/* globals window, _, React, VIZI */
/**
* Description UI class
* @author Robin Hawkes - vizicities.com
*/
// TODO: Sort out scoping issues
// TODO: Work out a neater structure for defining the render method
(function() {
"use strict";
VIZI.DescriptionUI = function(options) {
var self = this;
var scope = self;
self.options = options || {};
_.defaults(options, {});
// Check that UI container exists
if (!document.querySelector(".vizicities-ui .vizicities-description-ui")) {
var container = document.createElement("section");
container.classList.add("vizicities-description-ui");
document.querySelector(".vizicities-ui").appendChild(container);
}
self.description = React.createClass({
render: function() {
var self = this;
return (
<section className="vizicities-ui-item vizicities-description-ui-item">
<header>
<h2>{self.props.title}</h2>
</header>
<p>{self.props.body}</p>
</section>
);
}
});
self.onChange();
};
VIZI.DescriptionUI.prototype.onChange = function() {
var self = this;
var Description = self.description;
React.render(<Description title={self.options.title} body={self.options.body} />, document.querySelector(".vizicities-description-ui"));
};
})();

12
src/UI/LayersUI.jsx
Wyświetl plik

@ -17,6 +17,14 @@
self.layers = layers;
// Check that UI container exists
if (!document.querySelector(".vizicities-ui .vizicities-layers-ui")) {
var container = document.createElement("section");
container.classList.add("vizicities-layers-ui");
document.querySelector(".vizicities-ui").appendChild(container);
}
self.layerControl = React.createClass({
render: function() {
var self = this;
@ -38,7 +46,7 @@
});
return (
<section className="vizicities-ui-item vizicities-layers-ui">
<section className="vizicities-ui-item vizicities-layers-ui-item">
<header>
<h2>Layers</h2>
</header>
@ -88,6 +96,6 @@
var LayerControl = self.layerControl;
React.render(<LayerControl layers={self.layers} onHide={self.onHideLayer} onShow={self.onShowLayer} />, document.querySelector(".vizicities-ui"));
React.render(<LayerControl layers={self.layers} onHide={self.onHideLayer} onShow={self.onShowLayer} />, document.querySelector(".vizicities-layers-ui"));
};
})();