[Mobile] Merge
Merged with master and resolved conflicts.
This commit is contained in:
Shivam Dave
@@ -20,6 +20,13 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/*global define*/
|
||||
|
||||
/**
|
||||
* This bundle provides support for object inspection (specifically, metadata
|
||||
* show in bubbles on hover.)
|
||||
* @namespace platform/commonUI/inspect
|
||||
*/
|
||||
|
||||
define({
|
||||
BUBBLE_TEMPLATE: "<mct-container key=\"bubble\" " +
|
||||
"bubble-title=\"{{bubbleTitle}}\" " +
|
||||
@@ -33,4 +40,4 @@ define({
|
||||
// Max width and margins allowed for bubbles; defined in /platform/commonUI/general/res/sass/_constants.scss
|
||||
BUBBLE_MARGIN_LR: 10,
|
||||
BUBBLE_MAX_WIDTH: 300
|
||||
});
|
||||
});
|
||||
|
||||
@@ -30,98 +30,115 @@ define(
|
||||
* The `info` gesture displays domain object metadata in a
|
||||
* bubble on hover.
|
||||
*
|
||||
* @memberof platform/commonUI/inspect
|
||||
* @constructor
|
||||
* @implements {Gesture}
|
||||
* @param $timeout Angular's `$timeout`
|
||||
* @param {InfoService} infoService a service which shows info bubbles
|
||||
* @param {number} DELAY delay, in milliseconds, before bubble appears
|
||||
* @param {number} delay delay, in milliseconds, before bubble appears
|
||||
* @param element jqLite-wrapped DOM element
|
||||
* @param {DomainObject} domainObject the domain object for which to
|
||||
* show information
|
||||
*/
|
||||
function InfoGesture($timeout, agentService, infoService, DELAY, element, domainObject) {
|
||||
var dismissBubble,
|
||||
pendingBubble,
|
||||
mousePosition,
|
||||
scopeOff;
|
||||
function InfoGesture($timeout, agentService, infoService, delay, element, domainObject) {
|
||||
var self = this;
|
||||
|
||||
function trackPosition(event) {
|
||||
// Record mouse position, so bubble can be shown at latest
|
||||
// mouse position (not just where the mouse entered)
|
||||
mousePosition = [ event.clientX, event.clientY ];
|
||||
}
|
||||
// Callback functions to preserve the "this" pointer (in the
|
||||
// absence of Function.prototype.bind)
|
||||
this.showBubbleCallback = function (event) {
|
||||
self.showBubble(event);
|
||||
};
|
||||
this.hideBubbleCallback = function (event) {
|
||||
self.hideBubble(event);
|
||||
};
|
||||
this.trackPositionCallback = function (event) {
|
||||
self.trackPosition(event);
|
||||
};
|
||||
|
||||
function hideBubble() {
|
||||
// If a bubble is showing, dismiss it
|
||||
if (dismissBubble) {
|
||||
dismissBubble();
|
||||
element.off('mouseleave', hideBubble);
|
||||
dismissBubble = undefined;
|
||||
}
|
||||
// If a bubble will be shown on a timeout, cancel that
|
||||
if (pendingBubble) {
|
||||
$timeout.cancel(pendingBubble);
|
||||
element.off('mousemove', trackPosition);
|
||||
element.off('mouseleave', hideBubble);
|
||||
pendingBubble = undefined;
|
||||
}
|
||||
// Also clear mouse position so we don't have a ton of tiny
|
||||
// arrays allocated while user mouses over things
|
||||
mousePosition = undefined;
|
||||
}
|
||||
// Also make sure we dismiss bubble if representation is destroyed
|
||||
// before the mouse actually leaves it
|
||||
this.scopeOff = element.scope().$on('$destroy', this.hideBubbleCallback);
|
||||
|
||||
function showBubble(event) {
|
||||
trackPosition(event);
|
||||
|
||||
// Also need to track position during hover
|
||||
element.on('mousemove', trackPosition);
|
||||
|
||||
// Show the bubble, after a suitable delay (if mouse has
|
||||
// left before this time is up, this will be canceled.)
|
||||
pendingBubble = $timeout(function () {
|
||||
dismissBubble = infoService.display(
|
||||
"info-table",
|
||||
domainObject.getModel().name,
|
||||
domainObject.useCapability('metadata'),
|
||||
mousePosition
|
||||
);
|
||||
element.off('mousemove', trackPosition);
|
||||
|
||||
pendingBubble = undefined;
|
||||
}, DELAY);
|
||||
|
||||
element.on('mouseleave', hideBubble);
|
||||
}
|
||||
this.element = element;
|
||||
this.$timeout = $timeout;
|
||||
this.infoService = infoService;
|
||||
this.delay = delay;
|
||||
this.domainObject = domainObject;
|
||||
|
||||
// Checks if you are on a mobile device, if the device is
|
||||
// not mobile (agentService.isMobile() = false), then
|
||||
// the pendingBubble and therefore hovering is allowed
|
||||
if (!agentService.isMobile(navigator.userAgent)) {
|
||||
// Show bubble (on a timeout) on mouse over
|
||||
element.on('mouseenter', showBubble);
|
||||
element.on('mouseenter', this.showBubbleCallback);
|
||||
}
|
||||
|
||||
// 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('mouseenter', showBubble);
|
||||
scopeOff();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
InfoGesture.prototype.trackPosition = function (event) {
|
||||
// Record mouse position, so bubble can be shown at latest
|
||||
// mouse position (not just where the mouse entered)
|
||||
this.mousePosition = [ event.clientX, event.clientY ];
|
||||
};
|
||||
|
||||
InfoGesture.prototype.hideBubble = function () {
|
||||
// If a bubble is showing, dismiss it
|
||||
if (this.dismissBubble) {
|
||||
this.dismissBubble();
|
||||
this.element.off('mouseleave', this.hideBubbleCallback);
|
||||
this.dismissBubble = undefined;
|
||||
}
|
||||
// If a bubble will be shown on a timeout, cancel that
|
||||
if (this.pendingBubble) {
|
||||
this.$timeout.cancel(this.pendingBubble);
|
||||
this.element.off('mousemove', this.trackPositionCallback);
|
||||
this.element.off('mouseleave', this.hideBubbleCallback);
|
||||
this.pendingBubble = undefined;
|
||||
}
|
||||
// Also clear mouse position so we don't have a ton of tiny
|
||||
// arrays allocated while user mouses over things
|
||||
this.mousePosition = undefined;
|
||||
};
|
||||
|
||||
InfoGesture.prototype.showBubble = function (event) {
|
||||
var self = this;
|
||||
|
||||
this.trackPosition(event);
|
||||
|
||||
// Also need to track position during hover
|
||||
this.element.on('mousemove', this.trackPositionCallback);
|
||||
|
||||
// Show the bubble, after a suitable delay (if mouse has
|
||||
// left before this time is up, this will be canceled.)
|
||||
this.pendingBubble = this.$timeout(function () {
|
||||
self.dismissBubble = self.infoService.display(
|
||||
"info-table",
|
||||
self.domainObject.getModel().name,
|
||||
self.domainObject.useCapability('metadata'),
|
||||
self.mousePosition
|
||||
);
|
||||
self.element.off('mousemove', self.trackPositionCallback);
|
||||
self.pendingBubble = undefined;
|
||||
}, this.delay);
|
||||
|
||||
this.element.on('mouseleave', this.hideBubbleCallback);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Detach any event handlers associated with this gesture.
|
||||
* @method
|
||||
*/
|
||||
InfoGesture.prototype.destroy = function () {
|
||||
// Dismiss any active bubble...
|
||||
this.hideBubble();
|
||||
// ...and detach listeners
|
||||
this.element.off('mouseenter', this.showBubbleCallback);
|
||||
this.scopeOff();
|
||||
};
|
||||
|
||||
return InfoGesture;
|
||||
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
|
||||
@@ -31,76 +31,79 @@ define(
|
||||
|
||||
/**
|
||||
* Displays informative content ("info bubbles") for the user.
|
||||
* @memberof platform/commonUI/inspect
|
||||
* @constructor
|
||||
*/
|
||||
function InfoService($compile, $document, $window, $rootScope, agentService) {
|
||||
this.$compile = $compile;
|
||||
this.$document = $document;
|
||||
this.$window = $window;
|
||||
this.$rootScope = $rootScope;
|
||||
this.agentService = agentService;
|
||||
}
|
||||
|
||||
function display(templateKey, title, content, position) {
|
||||
var body = $document.find('body'),
|
||||
scope = $rootScope.$new(),
|
||||
winDim = [$window.innerWidth, $window.innerHeight],
|
||||
bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR + InfoConstants.BUBBLE_MAX_WIDTH,
|
||||
goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
|
||||
goUp = position[1] > (winDim[1] / 2),
|
||||
bubble;
|
||||
/**
|
||||
* Display an info bubble at the specified location.
|
||||
* @param {string} templateKey template to place in bubble
|
||||
* @param {string} title title for the bubble
|
||||
* @param {*} content content to pass to the template, via
|
||||
* `ng-model`
|
||||
* @param {number[]} x,y position of the info bubble, in
|
||||
* pixel coordinates.
|
||||
* @returns {Function} a function that may be invoked to
|
||||
* dismiss the info bubble
|
||||
*/
|
||||
InfoService.prototype.display = function (templateKey, title, content, position) {
|
||||
var $compile = this.$compile,
|
||||
$document = this.$document,
|
||||
$window = this.$window,
|
||||
$rootScope = this.$rootScope,
|
||||
body = $document.find('body'),
|
||||
scope = $rootScope.$new(),
|
||||
winDim = [$window.innerWidth, $window.innerHeight],
|
||||
bubbleSpaceLR = InfoConstants.BUBBLE_MARGIN_LR + InfoConstants.BUBBLE_MAX_WIDTH,
|
||||
goLeft = position[0] > (winDim[0] - bubbleSpaceLR),
|
||||
goUp = position[1] > (winDim[1] / 2),
|
||||
bubble;
|
||||
|
||||
// Pass model & container parameters into the scope
|
||||
scope.bubbleModel = content;
|
||||
scope.bubbleTemplate = templateKey;
|
||||
scope.bubbleLayout = (goUp ? 'arw-btm' : 'arw-top') + ' ' +
|
||||
(goLeft ? 'arw-right' : 'arw-left');
|
||||
scope.bubbleTitle = title;
|
||||
|
||||
// Pass model & container parameters into the scope
|
||||
scope.bubbleModel = content;
|
||||
scope.bubbleTemplate = templateKey;
|
||||
scope.bubbleLayout = (goUp ? 'arw-btm' : 'arw-top') + ' ' +
|
||||
(goLeft ? 'arw-right' : 'arw-left');
|
||||
scope.bubbleTitle = title;
|
||||
// Create the context menu
|
||||
bubble = $compile(BUBBLE_TEMPLATE)(scope);
|
||||
|
||||
// Create the context menu
|
||||
bubble = $compile(BUBBLE_TEMPLATE)(scope);
|
||||
|
||||
// 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 (agentService.isPhone(navigator.userAgent)) {
|
||||
bubble.css('right', '0px');
|
||||
bubble.css('left', '0px');
|
||||
bubble.css('top', 'auto');
|
||||
bubble.css('bottom', '25px');
|
||||
// Position the bubble
|
||||
bubble.css('position', 'absolute');
|
||||
if (this.agentService.isPhone(navigator.userAgent)) {
|
||||
bubble.css('right', '0px');
|
||||
bubble.css('left', '0px');
|
||||
bubble.css('top', 'auto');
|
||||
bubble.css('bottom', '25px');
|
||||
} else {
|
||||
if (goLeft) {
|
||||
bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
|
||||
} else {
|
||||
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');
|
||||
}
|
||||
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');
|
||||
}
|
||||
// Add the menu to the body
|
||||
body.append(bubble);
|
||||
|
||||
// Return a function to dismiss the bubble
|
||||
return function () { bubble.remove(); };
|
||||
}
|
||||
|
||||
return {
|
||||
/**
|
||||
* Display an info bubble at the specified location.
|
||||
* @param {string} templateKey template to place in bubble
|
||||
* @param {string} title title for the bubble
|
||||
* @param {*} content content to pass to the template, via
|
||||
* `ng-model`
|
||||
* @param {number[]} x,y position of the info bubble, in
|
||||
* pixel coordinates.
|
||||
* @returns {Function} a function that may be invoked to
|
||||
* dismiss the info bubble
|
||||
*/
|
||||
display: display
|
||||
};
|
||||
}
|
||||
// Add the menu to the body
|
||||
body.append(bubble);
|
||||
|
||||
// Return a function to dismiss the bubble
|
||||
return function () { bubble.remove(); };
|
||||
};
|
||||
|
||||
return InfoService;
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user