Merge pull request CesiumGS#1419 from AnalyticalGraphicsInc/box-select

Selection indicator and info box

Apps/Sandcastle/templates/bucket.css

@@ -125,9 +125,12 @@ option:disabled {
     background:linear-gradient(to bottom, #dedede 5%, #f9f9f9 100%);
 }
 
-button:active {
-    position:relative;
-    top:1px;
+.sandcastle-button:active {
+    -webkit-transform: translateY(1px);
+    -moz-transform: translateY(1px);
+    -ms-transform: translateY(1px);
+    -o-transform: translateY(1px);
+    transform: translateY(1px);
 }
 
 .claro .dijitTitlePaneContentOuter {

CHANGES.md

@@ -4,7 +4,12 @@ Change Log
 Beta Releases
 -------------
 
+### b26 - 2014-03-03
+
+* Added new `SelectionIndicator` and `InfoBox` widgets to `Viewer`, activated by `viewerDynamicObjectMixin`.
+
 ### b25 - 2014-02-03
+
 * Breaking changes:
   * The `Viewer` constructor argument `options.fullscreenElement` now matches the `FullscreenButton` default of `document.body`, it was previously the `Viewer` container itself.
   * Removed `Viewer.objectTracked` event; `Viewer.trackedObject` is now an ES5 Knockout observable that can be subscribed to directly.

Source/Widgets/InfoBox/InfoBox.css

@@ -0,0 +1,109 @@
+.cesium-infoBox {
+    display: block;
+    position: absolute;
+    top: 50px;
+    right: 0;
+    width: 40%;
+    max-width: 360px;
+    background: rgba(38, 38, 38, 0.95);
+    color: #edffff;
+    border: 1px solid #444;
+    border-right: none;
+    border-top-left-radius: 7px;
+    border-bottom-left-radius: 7px;
+    box-shadow: 0 0 10px 1px #000;
+    -webkit-transform: translate(100%, 0);
+    -moz-transform: translate(100%, 0);
+    transform: translate(100%, 0);
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 0s 0.2s, opacity 0.2s ease-in, -webkit-transform 0.2s ease-in;
+    -moz-transition: visibility 0s 0.2s, opacity 0.2s ease-in, -moz-transform 0.2s ease-in;
+    transition: visibility 0s 0.2s, opacity 0.2s ease-in, transform 0.2s ease-in;
+}
+
+.cesium-infoBox-visible {
+    -webkit-transform: translate(0, 0);
+    -moz-transform: translate(0, 0);
+    transform: translate(0, 0);
+    visibility: visible;
+    opacity: 1;
+    -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
+    -moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-out;
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+
+.cesium-infoBox-title {
+    display: block;
+    height: 20px;
+    padding: 5px 30px 5px 25px;
+    background: rgba(84, 84, 84, 0.8);
+    border-top-left-radius: 7px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.cesium-infoBox-bodyless .cesium-infoBox-title {
+    border-bottom-left-radius: 7px;
+}
+
+button.cesium-infoBox-camera {
+    display: block;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 22px;
+    height: 22px;
+    background: transparent;
+    border-color: transparent;
+    border-radius: 3px;
+    padding: 0 5px;
+    margin: 0;
+}
+
+button.cesium-infoBox-close {
+    display: block;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 20px;
+    background: transparent;
+    border: none;
+    border-radius: 2px;
+    font-weight: bold;
+    font-size:16px;
+    padding: 0 5px;
+    margin: 0;
+    color: #edffff;
+}
+
+button.cesium-infoBox-close:focus {
+    background: rgba(238, 136, 0, 0.44);
+    outline: none;
+}
+
+button.cesium-infoBox-close:hover {
+    background: #888;
+    color: #000;
+}
+
+button.cesium-infoBox-close:active {
+    background: #a00;
+    color: #000;
+}
+
+.cesium-infoBox-body {
+    padding: 4px 10px;
+    margin-right: 4px;
+    overflow: auto;
+}
+
+.cesium-infoBox-bodyless .cesium-infoBox-body {
+    display: none;
+}
+
+.cesium-infoBox-description {
+    font-size: 13px;
+}

Source/Widgets/InfoBox/InfoBox.js

@@ -0,0 +1,136 @@
+/*global define*/
+define([
+        '../../Core/defined',
+        '../../Core/defineProperties',
+        '../../Core/DeveloperError',
+        '../../Core/destroyObject',
+        '../getElement',
+        './InfoBoxViewModel',
+        '../../ThirdParty/knockout'
+    ], function(
+        defined,
+        defineProperties,
+        DeveloperError,
+        destroyObject,
+        getElement,
+        InfoBoxViewModel,
+        knockout) {
+    "use strict";
+
+    /**
+     * A widget for displaying information or a description.
+     *
+     * @alias InfoBox
+     * @constructor
+     *
+     * @param {Element|String} container The DOM element or ID that will contain the widget.
+     *
+     * @exception {DeveloperError} container is required.
+     * @exception {DeveloperError} Element with id "container" does not exist in the document.
+     */
+    var InfoBox = function(container) {
+        //>>includeStart('debug', pragmas.debug);
+        if (!defined(container)) {
+            throw new DeveloperError('container is required.');
+        }
+        //>>includeEnd('debug')
+
+        container = getElement(container);
+
+        this._container = container;
+
+        var infoElement = document.createElement('div');
+        infoElement.className = 'cesium-infoBox';
+        infoElement.setAttribute('data-bind', '\
+css: { "cesium-infoBox-visible" : showInfo, "cesium-infoBox-bodyless" : _bodyless }');
+        container.appendChild(infoElement);
+        this._element = infoElement;
+
+        var titleElement = document.createElement('div');
+        titleElement.className = 'cesium-infoBox-title';
+        titleElement.setAttribute('data-bind', 'text: titleText');
+        infoElement.appendChild(titleElement);
+
+        var cameraElement = document.createElement('button');
+        cameraElement.type = 'button';
+        cameraElement.className = 'cesium-button cesium-infoBox-camera';
+        cameraElement.setAttribute('data-bind', '\
+attr: { title: "Focus camera on object" },\
+click: function () { cameraClicked.raiseEvent(); },\
+enable: enableCamera,\
+cesiumSvgPath: { path: cameraIconPath, width: 32, height: 32 }');
+        infoElement.appendChild(cameraElement);
+
+        var closeElement = document.createElement('button');
+        closeElement.type = 'button';
+        closeElement.className = 'cesium-infoBox-close';
+        closeElement.setAttribute('data-bind', '\
+click: function () { closeClicked.raiseEvent(); }');
+        closeElement.innerHTML = '×';
+        infoElement.appendChild(closeElement);
+
+        var infoBodyElement = document.createElement('div');
+        infoBodyElement.className = 'cesium-infoBox-body';
+        infoElement.appendChild(infoBodyElement);
+
+        var descriptionElement = document.createElement('div');
+        descriptionElement.className = 'cesium-infoBox-description';
+        descriptionElement.setAttribute('data-bind', '\
+html: descriptionSanitizedHtml,\
+style : { maxHeight : maxHeightOffset(40) }');
+        infoBodyElement.appendChild(descriptionElement);
+
+        var viewModel = new InfoBoxViewModel();
+        this._viewModel = viewModel;
+
+        knockout.applyBindings(this._viewModel, infoElement);
+    };
+
+    defineProperties(InfoBox.prototype, {
+        /**
+         * Gets the parent container.
+         * @memberof InfoBox.prototype
+         *
+         * @type {Element}
+         */
+        container : {
+            get : function() {
+                return this._container;
+            }
+        },
+
+        /**
+         * Gets the view model.
+         * @memberof InfoBox.prototype
+         *
+         * @type {SelectionIndicatorViewModel}
+         */
+        viewModel : {
+            get : function() {
+                return this._viewModel;
+            }
+        }
+    });
+
+    /**
+     * @memberof InfoBox
+     * @returns {Boolean} true if the object has been destroyed, false otherwise.
+     */
+    InfoBox.prototype.isDestroyed = function() {
+        return false;
+    };
+
+    /**
+     * Destroys the widget.  Should be called if permanently
+     * removing the widget from layout.
+     * @memberof InfoBox
+     */
+    InfoBox.prototype.destroy = function() {
+        var container = this._container;
+        knockout.cleanNode(this._element);
+        container.removeChild(this._element);
+        return destroyObject(this);
+    };
+
+    return InfoBox;
+});