+
+
diff --git a/platform/commonUI/inspect/src/controllers/InfoController.js b/platform/commonUI/inspect/src/controllers/InfoController.js
deleted file mode 100644
index 464d0ba6ac..0000000000
--- a/platform/commonUI/inspect/src/controllers/InfoController.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining InfoController.
- */
-define(
- [],
- function () {
- "use strict";
- function InfoController($scope, $timeout, infoService) {
- var touchPosition,
- bubble;
- function trackPosition(event) {
- // Record mouse position, so bubble can be shown at latest
- // mouse position (not just where the mouse entered)
- touchPosition = [ event.pageX, event.pageY ];
- }
-
- function display(event) {
- var domainObject = $scope.domainObject;
- console.log(domainObject.getId());
- trackPosition(event);
-
- if(!bubble) {
- bubble = infoService.display(
- "info-table",
- domainObject.getModel().name,
- domainObject.useCapability('metadata'),
- touchPosition
- );
- } else {
- bubble();
- bubble = undefined;
- }
-
- $timeout(function () {
- // If a bubble is showing, dismiss it after timeout
- if (bubble) {
- bubble();
- bubble = undefined;
- }
- }, 750);
- }
- $scope.tryToDis = display;
- }
- return InfoController;
- }
-);
\ No newline at end of file
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
new file mode 100644
index 0000000000..04ab14ebe4
--- /dev/null
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -0,0 +1,116 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+ [],
+ function () {
+ "use strict";
+
+ /**
+ * The `info` gesture displays domain object metadata in a
+ * bubble on hover.
+ *
+ * @constructor
+ * @param $document Angular's `$document`
+ * @param {InfoService} infoService a service which shows info bubbles
+ * @param element jqLite-wrapped DOM element
+ * @param {DomainObject} domainObject the domain object for which to
+ * show information
+ */
+ function InfoGestureButton($document, queryService, infoService, element, domainObject) {
+ var dismissBubble,
+ pendingBubble,
+ touchPosition,
+ scopeOff,
+ body = $document.find('body');
+
+ function trackPosition(event) {
+ // Record touch position, so bubble can be shown at latest
+ // touch position, also offset by 22px to left (accounts for
+ // a finger-sized touch on the info button)
+ touchPosition = [ event.clientX - 22, event.clientY ];
+ }
+
+ // Hides the bubble and detaches the
+ // body hidebubble listener
+ function hideBubble() {
+ // If a bubble is showing, dismiss it
+ if (dismissBubble) {
+ dismissBubble();
+ dismissBubble = undefined;
+ }
+ // Detaches body touch listener
+ body.off('touchstart', hideBubble);
+ }
+
+ // Displays the bubble by tracking position of
+ // touch, using infoService to display the bubble,
+ // and then on any body touch the bubble is dismissed
+ function showBubble(event) {
+ trackPosition(event);
+
+ // Show the bubble, but on any touchstart on the
+ // body (anywhere) call hidebubble
+ pendingBubble =
+ dismissBubble = infoService.display(
+ "info-table",
+ domainObject.getModel().name,
+ domainObject.useCapability('metadata'),
+ touchPosition
+ );
+ body.on('touchstart', hideBubble);
+ }
+
+ // Checks if you are on a mobile device, if the device is
+ // mobile (queryService.isMobile() = true), then
+ // the a click on something (info button) brings up
+ // the bubble
+ if (queryService.isMobile(navigator.userAgent)) {
+ element.on('click', showBubble);
+ }
+
+ // Also make sure we dismiss bubble if representation is destroyed
+ // before the mouse actually leaves it
+ scopeOff = element.scope().$on('$destroy', hideBubble);
+
+ return {
+ /**
+ * Detach any event handlers associated with this gesture.
+ * @memberof InfoGesture
+ * @method
+ */
+ destroy: function () {
+ // Dismiss any active bubble...
+ hideBubble();
+ // ...and detach listeners
+ element.off('click', showBubble);
+ scopeOff();
+ }
+ };
+ }
+
+ return InfoGestureButton;
+
+ }
+
+);
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index b67192ba30..4804137544 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -33,7 +33,7 @@ define(
* Displays informative content ("info bubbles") for the user.
* @constructor
*/
- function InfoService($compile, $document, $window, $rootScope) {
+ function InfoService($compile, $document, $window, $rootScope, queryService) {
function display(templateKey, title, content, position) {
var body = $document.find('body'),
@@ -54,19 +54,29 @@ define(
// Create the context menu
bubble = $compile(BUBBLE_TEMPLATE)(scope);
- // Position the bubble
+ // Position the bubble:
+ // Phone: On a phone the bubble is specifically positioned
+ // so that it takes up the width of the screen.
+ // Tablet/Desktop: On other devices with larger screens, the
+ // info bubble positioned as normal (with triangle pointing
+ // to where clicked or pressed)
bubble.css('position', 'absolute');
- if (goLeft) {
- bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+ if(queryService.isPhone(navigator.userAgent)) {
+ bubble.css('right', 5 + 'px');
+ bubble.css('left', 5 + 'px');
+ bubble.css('top', 40 + 'px');
} else {
- bubble.css('left', position[0] + OFFSET[0] + 'px');
+ if (goLeft) {
+ bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+ } else {
+ bubble.css('left', position[0] + OFFSET[0] + 'px');
+ }
+ if (goUp) {
+ bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
+ } else {
+ bubble.css('top', position[1] + OFFSET[1] + 'px');
+ }
}
- if (goUp) {
- bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
- } else {
- bubble.css('top', position[1] + OFFSET[1] + 'px');
- }
-
// Add the menu to the body
body.append(bubble);