Added drag to enable edit mode

This commit is contained in:
Andrew Henry 2015-10-20 21:03:36 -07:00
parent 5382cca435
commit 92573b817f
7 changed files with 50 additions and 29 deletions

View File

@ -20,6 +20,7 @@
"$scope",
"$route",
"$location",
"$q",
"objectService",
"navigationService",
"urlService"
@ -34,7 +35,7 @@
{
"key": "BrowseObjectController",
"implementation": "BrowseObjectController.js",
"depends": [ "$scope", "$location", "$route" ]
"depends": [ "$scope", "$location", "$route", "$q" ]
},
{
"key": "CreateMenuController",
@ -62,6 +63,7 @@
{
"key": "browse-object",
"templateUrl": "templates/browse-object.html",
"gestures": ["drop"],
"uses": [ "view" ]
},
{

View File

@ -20,13 +20,8 @@
at runtime from the About dialog for additional information.
-->
<div ng-init="
editMode = false;
editBtns = [{ cssclass: 'save',title: 'Save Changes' },{ cssclass: 'cancel',title: 'Discard Changes' }];
"></div>
<a class="s-btn"
style="opacity: 0.9; position:absolute; right: 250px; z-index: 100"
ng-class="{ major:!editMode }"
ng-click="editMode = !editMode">Set EditMode to {{!editMode}}</a>
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex">
<div class="items-select left">
@ -50,23 +45,20 @@
</div>
</div>
<div class="l-object-wrapper"
<div class="l-object-wrapper edit-main"
ng-class="{ active:editMode }">
<div class="l-object-wrapper-inner l-flex flex-col">
<!-- Toolbar and Save/Cancel buttons -->
<div class="l-edit-controls flex-elem l-flex flex-row"
ng-class="{ active:editMode }">
<mct-toolbar name="mctToolbar"
structure="toolbar.structure"
ng-model="toolbar.state"
class="flex-elem grow">
</mct-toolbar>
<!-- from toolbar.html -->
<!-- <mct-toolbar-x class="flex-elem grow">
<!--<mct-toolbar-x class="flex-elem grow">
<form novalidate>
<div class="tool-bar btn-bar contents abs">
<span class="l-control-group">
@ -75,17 +67,17 @@
</span>
</div>
</form>
</mct-toolbar-x>-->
</mct-toolbar-x> -->
<mct-representation key="'edit-action-buttons'"
<!--<mct-representation key="'edit-action-buttons'"
mct-object="domainObject"
class='flex-elem conclude-editing'>
</mct-representation>
</mct-representation> -->
<!-- from edit-action-buttons.html -->
<!-- <span>
<!--<span>
<span ng-repeat="btn in editBtns">
<a class='s-btn t-{{btn.cssclass}}'
title='{{btn.title}}'

View File

@ -26,8 +26,11 @@
* @namespace platform/commonUI/browse
*/
define(
[],
function () {
[
'../../../representation/src/gestures/GestureConstants',
'../../edit/src/objects/EditableDomainObject'
],
function (GestureConstants, EditableDomainObject) {
"use strict";
var ROOT_ID = "ROOT",
@ -43,7 +46,7 @@ define(
* @memberof platform/commonUI/browse
* @constructor
*/
function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
var path = [ROOT_ID].concat(
($route.current.params.ids || DEFAULT_PATH).split("/")
);
@ -71,7 +74,9 @@ define(
// Callback for updating the in-scope reference to the object
// that is currently navigated-to.
function setNavigation(domainObject) {
$scope.navigatedObject = domainObject;
var navigatedDomainObject = domainObject;
$scope.navigatedObject = navigatedDomainObject;
$scope.treeModel.selectedObject = domainObject;
navigationService.setNavigation(domainObject);
updateRoute(domainObject);
@ -148,12 +153,14 @@ define(
// Also listen for changes which come from the tree
$scope.$watch("treeModel.selectedObject", setNavigation);
// Clean up when the scope is destroyed
$scope.$on("$destroy", function () {
navigationService.removeListener(setNavigation);
});
$scope.editMode = false;
}
return BrowseController;

View File

@ -22,8 +22,9 @@
/*global define,Promise*/
define(
[],
function () {
['../../../representation/src/gestures/GestureConstants',
'../../edit/src/objects/EditableDomainObject'],
function (GestureConstants, EditableDomainObject) {
"use strict";
/**
@ -32,8 +33,9 @@ define(
* @memberof platform/commonUI/browse
* @constructor
*/
function BrowseObjectController($scope, $location, $route) {
function BrowseObjectController($scope, $location, $route, $q) {
function setViewForDomainObject(domainObject) {
var locationViewKey = $location.search().view;
function selectViewIfMatching(view) {
@ -64,9 +66,24 @@ define(
});
}
}
function toggleEditMode(editMode){
var domainObject = $scope.domainObject;
if (editMode){
$scope.domainObject = domainObject && new EditableDomainObject(domainObject, $q);
} else {
$scope.domainObject = (domainObject.getDomainObject && domainObject.getDomainObject) || domainObject;
}
}
$scope.$watch('editMode', toggleEditMode);
$scope.$watch('domainObject', setViewForDomainObject);
$scope.$watch('representation.selected.key', updateQueryParam);
$scope.$on(GestureConstants.MCT_DROP_EVENT, function() {
$scope.editMode = true;
});
}
return BrowseObjectController;

View File

@ -101,6 +101,10 @@ define(
new Factory(capability, editableObject, domainObject, cache) :
capability;
};
editableObject.getDomainObject = function() {
return domainObject;
}
return editableObject;
}

View File

@ -31,7 +31,6 @@
mct-object="childObject">
</mct-representation>
</div>
<!-- Drag handles -->
<span ng-show="domainObject.hasCapability('editor')">

View File

@ -98,7 +98,7 @@ define(
// If currently in edit mode allow drag and drop gestures to the
// domain object. An exception to this is folders which have drop
// gestures in browse mode.
if (domainObjectType === 'folder' || domainObject.hasCapability('editor')) {
//if (domainObjectType === 'folder' || domainObject.hasCapability('editor')) {
// Handle the drop; add the dropped identifier to the
// destination domain object's composition, and persist
@ -108,7 +108,7 @@ define(
broadcastDrop(id, event);
});
}
}
//}
// TODO: Alert user if drag and drop is not allowed
}