alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] Merge

Browse Source 
Merged with master and resolved conflicts.
This commit is contained in:
Shivam Dave
2015-08-25 12:36:50 -07:00
parent aca06c6007 f1ca9ff15e
commit cd46dab5c1
294 changed files with 11631 additions and 9569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
platform/representation/src/MCTInclude.js
View File

@@ -49,6 +49,7 @@ define(
* an output) and `parameters` is meant to be useful for
* display parameterization (more like an input.)
*
* @memberof platform/representation
* @constructor
* @param {TemplateDefinition[]} templates an array of
* template extensions
@@ -92,3 +93,4 @@ define(
return MCTInclude;
}
);

25
platform/representation/src/MCTRepresentation.js
View File

@@ -22,7 +22,9 @@
/*global define,Promise*/
/**
* Module defining MCTRepresentation. Created by vwoeltje on 11/7/14.
* This bundle implements the directives for representing domain objects
* as Angular-managed HTML.
* @namespace platform/representation
*/
define(
[],
@@ -47,6 +49,7 @@ define(
* * `parameters`, used to communicate display parameters to
* the included template (e.g. title.)
*
* @memberof platform/representation
* @constructor
* @param {RepresentationDefinition[]} representations an array of
* representation extensions
@@ -235,6 +238,26 @@ define(
};
}
/**
* A representer participates in the process of instantiating a
* representation of a domain object.
*
* @interface Representer
* @augments {Destroyable}
*/
/**
* Set the current representation in use, and the domain
* object being represented.
*
* @method Representer#represent
* @param {RepresentationDefinition} representation the
* definition of the representation in use
* @param {DomainObject} domainObject the domain object
* being represented
*/
return MCTRepresentation;
}
);

145
platform/representation/src/actions/ContextMenuAction.js
View File

@@ -31,7 +31,7 @@ define(
var MENU_TEMPLATE = "<mct-representation key=\"'context-menu'\" " +
"mct-object=\"domainObject\" " +
"ng-class=\"menuClass\"" +
"ng-class=\"menuClass\" " +
"ng-style=\"menuStyle\">" +
"</mct-representation>",
dismissExistingMenu;
@@ -39,6 +39,7 @@ define(
/**
* Launches a custom context menu for the domain object it contains.
*
* @memberof platform/representation
* @constructor
* @param $compile Angular's $compile service
* @param $document the current document
@@ -46,84 +47,92 @@ define(
* @param $rootScope Angular's root scope
* @param actionContexr the context in which the action
* should be performed
* @implements {Action}
*/
function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) {
function perform() {
var winDim = [$window.innerWidth, $window.innerHeight],
eventCoors = [actionContext.event.pageX, actionContext.event.pageY],
menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
body = $document.find('body'),
scope = $rootScope.$new(),
goLeft = eventCoors[0] + menuDim[0] > winDim[0],
goUp = eventCoors[1] + menuDim[1] > winDim[1],
menu;
this.$compile = $compile;
this.agentService = agentService;
this.actionContext = actionContext;
this.getDocument = function () { return $document; };
this.getWindow = function () { return $window; };
this.getRootScope = function () { return $rootScope; };
}
// Remove the context menu
function dismiss() {
menu.remove();
body.off("click", dismiss);
dismissExistingMenu = undefined;
}
ContextMenuAction.prototype.perform = function () {
var $compile = this.$compile,
$document = this.getDocument(),
$window = this.getWindow(),
$rootScope = this.getRootScope(),
actionContext = this.actionContext,
winDim = [$window.innerWidth, $window.innerHeight],
eventCoors = [actionContext.event.pageX, actionContext.event.pageY],
menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
body = $document.find('body'),
scope = $rootScope.$new(),
goLeft = eventCoors[0] + menuDim[0] > winDim[0],
goUp = eventCoors[1] + menuDim[1] > winDim[1],
menu;
// Dismiss any menu which was already showing
if (dismissExistingMenu) {
dismissExistingMenu();
}
// Remove the context menu
function dismiss() {
menu.remove();
body.off("mousedown", dismiss);
dismissExistingMenu = undefined;
}
// ...and record the presence of this menu.
dismissExistingMenu = dismiss;
// Dismiss any menu which was already showing
if (dismissExistingMenu) {
dismissExistingMenu();
}
// Set up the scope, including menu positioning
scope.domainObject = actionContext.domainObject;
scope.menuStyle = {};
scope.menuStyle[goLeft ? "right" : "left"] =
(goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px';
scope.menuStyle[goUp ? "bottom" : "top"] =
(goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px';
scope.menuClass = {
"go-left": goLeft,
"go-up": goUp,
"context-menu-holder": true
};
// ...and record the presence of this menu.
dismissExistingMenu = dismiss;
// Create the context menu
menu = $compile(MENU_TEMPLATE)(scope);
// Set up the scope, including menu positioning
scope.domainObject = actionContext.domainObject;
scope.menuStyle = {};
scope.menuStyle[goLeft ? "right" : "left"] =
(goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px';
scope.menuStyle[goUp ? "bottom" : "top"] =
(goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px';
scope.menuClass = {
"go-left": goLeft,
"go-up": goUp,
"context-menu-holder": true
};
// Create the context menu
menu = $compile(MENU_TEMPLATE)(scope);
// Add the menu to the body
body.append(menu);
// Stop propagation so that clicks on the menu do not close the menu
// Stop propagation so that touches on the menu do not close the menu
if (!agentService.isMobile(navigator.userAgent)) {
menu.on('mousedown', function (event) {
event.stopPropagation();
});
} else if (agentService.isMobile(navigator.userAgent)) {
menu.on('touchstart', function (event) {
event.stopPropagation();
});
}
// Dismiss the menu when body is clicked/touched elsewhere
// ('mousedown' because 'click' breaks left-click context menus)
// ('touchstart' because 'touch' breaks context menus up)
if (!agentService.isMobile(navigator.userAgent)) {
body.on('mousedown', dismiss);
} else if (agentService.isMobile(navigator.userAgent)) {
body.on('touchstart', dismiss);
}
// Add the menu to the body
body.append(menu);
// Don't launch browser's context menu
actionContext.event.preventDefault();
// Stop propagation so that clicks or touches on the menu do not close the menu
if (!(this.agentService.isMobile(navigator.userAgent))) {
menu.on('mousedown', function (event) {
event.stopPropagation();
});
} else if ((this.agentService.isMobile(navigator.userAgent))) {
menu.on('touchstart', function (event) {
event.stopPropagation();
});
}
// Dismiss the menu when body is clicked/touched elsewhere
// ('mousedown' because 'click' breaks left-click context menus)
// ('touchstart' because 'touch' breaks context menus up)
if (!(this.agentService.isMobile(navigator.userAgent))) {
body.on('mousedown', dismiss);
// NOTE: Apply to mobile?
menu.on('click', dismiss);
} else if (this.agentService.isMobile(navigator.userAgent)) {
body.on('touchstart', dismiss);
}
return {
perform: perform
};
}
// Don't launch browser's context menu
actionContext.event.preventDefault();
};
return ContextMenuAction;
}
);
);

47
platform/representation/src/gestures/ContextMenuGesture.js
View File

@@ -33,24 +33,30 @@ define(
* Add listeners to a representation such that it calls the
* context menu action for the domain object it contains.
*
* @memberof platform/representation
* @constructor
* @param element the jqLite-wrapped element which should exhibit
* the context mennu
* the context menu
* @param {DomainObject} domainObject the object on which actions
* in the context menu will be performed
* @implements {Gesture}
*/
function ContextMenuGesture($timeout, agentService, element, domainObject) {
var actionContext,
stop,
isPressing,
var isPressing,
longTouchTime = 500;
// When context menu event occurs, show object actions instead
if (!agentService.isMobile(navigator.userAgent)) {
element.on('contextmenu', function (event) {
actionContext = {key: 'menu', domainObject: domainObject, event: event};
stop = domainObject.getCapability('action').perform(actionContext);
function showMenu(event) {
domainObject.getCapability('action').perform({
key: 'menu',
domainObject: domainObject,
event: event
});
}
// When context menu event occurs, show object actions instead
if (!agentService.isMobile(navigator.userAgent)) {
// When context menu event occurs, show object actions instead
element.on('contextmenu', showMenu);
} else if (agentService.isMobile(navigator.userAgent)) {
// If on mobile device, then start timeout for the single touch event
// during the timeout 'isPressing' is true.
@@ -61,8 +67,7 @@ define(
// true, display context menu for object
$timeout(function () {
if (isPressing) {
actionContext = {key: 'menu', domainObject: domainObject, event: event};
stop = domainObject.getCapability('action').perform(actionContext);
showMenu(event);
}
}, longTouchTime);
}
@@ -73,18 +78,14 @@ define(
});
}
return {
/**
* Detach any event handlers associated with this gesture.
* @method
* @memberof ContextMenuGesture
*/
destroy: function () {
element.off('contextmenu', stop);
}
};
this.showMenuCallback = showMenu;
this.element = element;
}
ContextMenuGesture.prototype.destroy = function () {
this.element.off('contextmenu', this.showMenu);
};
return ContextMenuGesture;
}
);
);

26
platform/representation/src/gestures/DragGesture.js
View File

@@ -33,7 +33,9 @@ define(
* Add event handlers to a representation such that it may be
* dragged as the source for drag-drop composition.
*
* @memberof platform/representation
* @constructor
* @implements {Gesture}
* @param $log Angular's logging service
* @param element the jqLite-wrapped element which should become
* draggable
@@ -103,21 +105,19 @@ define(
element.on('dragstart', startDrag);
element.on('dragend', endDrag);
return {
/**
* Detach any event handlers associated with this gesture.
* @memberof DragGesture
* @method
*/
destroy: function () {
// Detach listener
element.removeAttr('draggable');
element.off('dragstart', startDrag);
}
};
this.element = element;
this.startDragCallback = startDrag;
this.endDragCallback = endDrag;
}
DragGesture.prototype.destroy = function () {
// Detach listener
this.element.removeAttr('draggable');
this.element.off('dragstart', this.startDragCallback);
this.element.off('dragend', this.endDragCallback);
};
return DragGesture;
}
);
);

24
platform/representation/src/gestures/DropGesture.js
View File

@@ -32,14 +32,14 @@ define(
/**
* A DropGesture adds and maintains event handlers upon an element
* such that it may act as a drop target for drag-drop composition.
*
* @memberof platform/representation
* @constructor
* @param $q Angular's $q, for promise handling
* @param element the jqLite-wrapped representation element
* @param {DomainObject} domainObject the domain object whose
* composition should be modified as a result of the drop.
*/
function DropGesture(dndService, $q, element, domainObject) {
var actionCapability = domainObject.getCapability('action'),
action; // Action for the drop, when it occurs
@@ -121,19 +121,17 @@ define(
element.on('drop', drop);
}
return {
/**
* Detach any event handlers associated with this gesture.
*/
destroy: function () {
element.off('dragover', dragOver);
element.off('drop', drop);
}
};
this.element = element;
this.dragOverCallback = dragOver;
this.dropCallback = drop;
}
DropGesture.prototype.destroy = function () {
this.element.off('dragover', this.dragOverCallback);
this.element.off('drop', this.dropCallback);
};
return DropGesture;
}
);
);

9
platform/representation/src/gestures/GestureConstants.js
View File

@@ -22,28 +22,33 @@
/*global define,Promise*/
/**
* Module defining GestureConstants. Created by vwoeltje on 11/17/14.
* Constants used by domain object gestures.
* @class platform/representation.GestureConstants
*/
define({
/**
* The string identifier for the data type used for drag-and-drop
* composition of domain objects. (e.g. in event.dataTransfer.setData
* calls.)
* @memberof platform/representation.GestureConstants
*/
MCT_DRAG_TYPE: 'mct-domain-object-id',
/**
* The string identifier for the data type used for drag-and-drop
* composition of domain objects, by object instance (passed through
* the dndService)
* @memberof platform/representation.GestureConstants
*/
MCT_EXTENDED_DRAG_TYPE: 'mct-domain-object',
/**
* An estimate for the dimensions of a context menu, used for
* positioning.
* @memberof platform/representation.GestureConstants
*/
MCT_MENU_DIMENSIONS: [ 170, 200 ],
/**
* Identifier for drop events.
* @memberof platform/representation.GestureConstants
*/
MCT_DROP_EVENT: 'mctDrop'
});
});

117
platform/representation/src/gestures/GestureProvider.js
View File

@@ -29,6 +29,29 @@ define(
function () {
"use strict";
/**
* Handles the attachment of gestures (responses to DOM events,
* generally) to DOM elements which represent domain objects.
*
* @interface GestureService
*/
/**
* Attach a set of gestures (indicated by key) to a
* DOM element which represents a specific domain object.
* @method GestureService#attachGestures
* @param element the jqLite-wrapped DOM element which the
* user will interact with
* @param {DomainObject} domainObject the domain object which
* is represented by that element
* @param {string[]} gestureKeys an array of keys identifying
* which gestures should apply; these will be matched
* against the keys defined in the gestures' extension
* definitions
* @return {Destroyable} an object with a `destroy`
* method which can (and should) be used when
* gestures should no longer be applied to an element.
*/
/**
* The GestureProvider exposes defined gestures. Gestures are used
* do describe and handle general-purpose interactions with the DOM
@@ -40,6 +63,8 @@ define(
* intermediary between these and the `mct-representation` directive
* where they are used.
*
* @memberof platform/representation
* @implements {GestureService}
* @constructor
* @param {Gesture[]} gestures an array of all gestures which are
* available as extensions
@@ -47,19 +72,28 @@ define(
function GestureProvider(gestures) {
var gestureMap = {};
function releaseGesture(gesture) {
// Invoke the gesture's "destroy" method (if there is one)
// to release any held resources and detach event handlers.
if (gesture && gesture.destroy) {
gesture.destroy();
}
}
// Assemble all gestures into a map, for easy look up
gestures.forEach(function (gesture) {
gestureMap[gesture.key] = gesture;
});
function attachGestures(element, domainObject, gestureKeys) {
// Look up the desired gestures, filter for applicability,
// and instantiate them. Maintain a reference to allow them
// to be destroyed as a group later.
var attachedGestures = gestureKeys.map(function (key) {
this.gestureMap = gestureMap;
}
function releaseGesture(gesture) {
// Invoke the gesture's "destroy" method (if there is one)
// to release any held resources and detach event handlers.
if (gesture && gesture.destroy) {
gesture.destroy();
}
}
GestureProvider.prototype.attachGestures = function attachGestures(element, domainObject, gestureKeys) {
// Look up the desired gestures, filter for applicability,
// and instantiate them. Maintain a reference to allow them
// to be destroyed as a group later.
var gestureMap = this.gestureMap,
attachedGestures = gestureKeys.map(function (key) {
return gestureMap[key];
}).filter(function (Gesture) {
return Gesture !== undefined && (Gesture.appliesTo ?
@@ -69,42 +103,33 @@ define(
return new Gesture(element, domainObject);
});
return {
destroy: function () {
// Just call all the individual "destroy" methods
attachedGestures.forEach(releaseGesture);
}
};
}
// Assemble all gestures into a map, for easy look up
gestures.forEach(function (gesture) {
gestureMap[gesture.key] = gesture;
});
return {
/**
* Attach a set of gestures (indicated by key) to a
* DOM element which represents a specific domain object.
* @method
* @memberof GestureProvider
* @param element the jqLite-wrapped DOM element which the
* user will interact with
* @param {DomainObject} domainObject the domain object which
* is represented by that element
* @param {string[]} gestureKeys an array of keys identifying
* which gestures should apply; these will be matched
* against the keys defined in the gestures' extension
* definitions
* @return {{ destroy: function }} an object with a `destroy`
* method which can (and should) be used when a
* gesture should no longer be applied to an element.
*/
attachGestures: attachGestures
destroy: function () {
// Just call all the individual "destroy" methods
attachedGestures.forEach(releaseGesture);
}
};
}
};
/**
* A destroyable object may have resources allocated which require
* explicit release.
*
* @interface Destroyable
*/
/**
* Release any resources associated with this object.
*
* @method Destroyable#destroy
*/
/**
* A gesture describes manners in which certain representations of
* domain objects may respond to DOM events upon those representations.
* @interface Gesture
* @augments Destroyable
*/
return GestureProvider;
}
);
);

63
platform/representation/src/gestures/GestureRepresenter.js
View File

@@ -37,47 +37,34 @@ define(
* gestures
* @param {Scope} scope the Angular scope for this representation
* @param element the JQLite-wrapped mct-representation element
* @constructor
* @implements {Representer}
* @memberof platform/representation
*/
function GestureRepresenter(gestureService, scope, element) {
var gestureHandle;
function destroy() {
// Release any resources associated with these gestures
if (gestureHandle) {
gestureHandle.destroy();
}
}
function represent(representation, domainObject) {
// Clear out any existing gestures
destroy();
// Attach gestures - by way of the service.
gestureHandle = gestureService.attachGestures(
element,
domainObject,
(representation || {}).gestures || []
);
}
return {
/**
* Set the current representation in use, and the domain
* object being represented.
*
* @param {RepresentationDefinition} representation the
* definition of the representation in use
* @param {DomainObject} domainObject the domain object
* being represented
*/
represent: represent,
/**
* Release any resources associated with this representer.
*/
destroy: destroy
};
this.gestureService = gestureService;
this.element = element;
}
GestureRepresenter.prototype.represent = function represent(representation, domainObject) {
// Clear out any existing gestures
this.destroy();
// Attach gestures - by way of the service.
this.gestureHandle = this.gestureService.attachGestures(
this.element,
domainObject,
(representation || {}).gestures || []
);
};
GestureRepresenter.prototype.destroy = function () {
// Release any resources associated with these gestures
if (this.gestureHandle) {
this.gestureHandle.destroy();
}
};
return GestureRepresenter;
}
);
);

6
platform/representation/src/services/DndService.js
View File

@@ -32,6 +32,7 @@ define(
* * Storing arbitrary JavaScript objects (not just strings.)
* * Allowing inspection of dragged objects during `dragover` events,
* etc. (which cannot be done in Chrome for security reasons)
* @memberof platform/representation
* @constructor
* @param $log Angular's $log service
*/
@@ -43,6 +44,7 @@ define(
* Set drag data associated with a given type.
* @param {string} key the type's identiifer
* @param {*} value the data being dragged
* @memberof platform/representation.DndService#
*/
setData: function (key, value) {
$log.debug("Setting drag data for " + key);
@@ -51,6 +53,7 @@ define(
/**
* Get drag data associated with a given type.
* @returns {*} the data being dragged
* @memberof platform/representation.DndService#
*/
getData: function (key) {
return data[key];
@@ -58,6 +61,7 @@ define(
/**
* Remove data associated with active drags.
* @param {string} key the type to remove
* @memberof platform/representation.DndService#
*/
removeData: function (key) {
$log.debug("Clearing drag data for " + key);
@@ -68,4 +72,4 @@ define(
return DndService;
}
);
);

31
platform/representation/test/actions/ContextMenuActionSpec.js
View File

@@ -81,7 +81,7 @@ define(
mockCompiledTemplate.andReturn(mockMenu);
mockDocument.find.andReturn(mockBody);
mockRootScope.$new.andReturn(mockScope);
mockActionContext = {key: 'menu', domainObject: mockDomainObject, event: mockEvent};
action = new ContextMenuAction(
@@ -131,9 +131,9 @@ define(
it("removes a menu when body is clicked", function () {
// Show the menu
action.perform();
// Verify precondition
expect(mockBody.off).not.toHaveBeenCalled();
expect(mockBody.remove).not.toHaveBeenCalled();
// Find and fire body's mousedown listener
mockBody.on.calls.forEach(function (call) {
@@ -146,7 +146,28 @@ define(
expect(mockMenu.remove).toHaveBeenCalled();
// Listener should have been detached from body
expect(mockBody.off).toHaveBeenCalled();
expect(mockBody.off).toHaveBeenCalledWith(
'mousedown',
jasmine.any(Function)
);
});
it("removes a menu when it is clicked", function () {
// Show the menu
action.perform();
// Verify precondition
expect(mockMenu.remove).not.toHaveBeenCalled();
// Find and fire body's mousedown listener
mockMenu.on.calls.forEach(function (call) {
if (call.args[0] === 'click') {
call.args[1]();
}
});
// Menu should have been removed
expect(mockMenu.remove).toHaveBeenCalled();
});
it("keeps a menu when menu is clicked", function () {
@@ -186,4 +207,4 @@ define(
});
});
}
);
);