V8: umb-editor-navigation anchor-dropdown refined, remembers last active anchor,
This commit is contained in:
Niels Lyngsø
@@ -871,6 +871,8 @@
|
||||
|
||||
$scope.app = app;
|
||||
|
||||
$scope.$broadcast("editors.apps.appChanged", { app: app });
|
||||
|
||||
if (infiniteMode) {
|
||||
createInfiniteModeButtons($scope.content);
|
||||
} else {
|
||||
@@ -883,13 +885,15 @@
|
||||
* @param {any} app
|
||||
*/
|
||||
$scope.appAnchorChanged = function (app, anchor) {
|
||||
|
||||
/*
|
||||
// This is how it should be done — but because of the current architecture, i had to give the responsibilty to 'activate' the content-app to the menu, cause thats the only place you currently can change the active content-app.
|
||||
// proposal. Make sure that the content-app-menu dosnt do anything. Just make it callback when menu-item are clicked, then make the controller of the view handle what to be done. Then the controller should broadcast a local event, notifying that the current content-app has been changed.
|
||||
// read more on this issue: https://github.com/umbraco/Umbraco-CMS/issues/4467
|
||||
if ($scope.app !== app) {
|
||||
console.log("Change app")
|
||||
// TODO: Not working..!!!!!!!!
|
||||
$scope.appChanged(app);
|
||||
}
|
||||
|
||||
*/
|
||||
//send an event downwards
|
||||
$scope.$broadcast("editors.apps.appAnchorChanged", { app: app, anchor: anchor });
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
'use strict';
|
||||
|
||||
/** This directive is used to render out the current variant tabs and properties and exposes an API for other directives to consume */
|
||||
function tabbedContentDirective() {
|
||||
function tabbedContentDirective($timeout) {
|
||||
|
||||
function link($scope, $element, $attrs) {
|
||||
|
||||
@@ -36,12 +36,30 @@
|
||||
}
|
||||
tab.active = true;
|
||||
}
|
||||
function getActiveAnchor() {
|
||||
var i = $scope.content.tabs.length;
|
||||
while(i--) {
|
||||
if ($scope.content.tabs[i].active === true)
|
||||
return $scope.content.tabs[i];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function getScrollPositionFor(id) {
|
||||
if (propertyGroupNodesDictionary[id]) {
|
||||
return propertyGroupNodesDictionary[id].offsetTop - 20;// currently only relative to closest relatively positioned parent
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function scrollTo(id) {
|
||||
console.log("scrollTo", id);
|
||||
|
||||
if (propertyGroupNodesDictionary[id]) {
|
||||
let y = propertyGroupNodesDictionary[id].offsetTop - 20;// currently only relative to closest relatively positioned parent
|
||||
|
||||
var y = getScrollPositionFor(id);
|
||||
if (getScrollPositionFor !== null) {
|
||||
scrollableNode.scrollTo(0, y);
|
||||
}
|
||||
}
|
||||
function jumpTo(id) {
|
||||
var y = getScrollPositionFor(id);
|
||||
if (getScrollPositionFor !== null) {
|
||||
scrollableNode.scrollTo(0, y);
|
||||
}
|
||||
}
|
||||
@@ -50,6 +68,14 @@
|
||||
propertyGroupNodesDictionary[appAnchor] = element;
|
||||
}
|
||||
|
||||
$scope.$on("editors.apps.appChanged", function($event, $args) {
|
||||
// if app changed to this app, then we want to scroll to the current anchor
|
||||
if($args.app.alias === "umbContent") {
|
||||
var activeAnchor = getActiveAnchor();
|
||||
$timeout(jumpTo.bind(null, [activeAnchor.id]));
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on("editors.apps.appAnchorChanged", function($event, $args) {
|
||||
if($args.app.alias === "umbContent") {
|
||||
setActiveAnchor($args.anchor);
|
||||
@@ -84,7 +110,8 @@
|
||||
if (newValue === true) {
|
||||
$scope.content.isDirty = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var directive = {
|
||||
|
||||
@@ -80,16 +80,20 @@
|
||||
* @param {any} item
|
||||
*/
|
||||
function selectApp(item) {
|
||||
// disable the name field if the active content app is not "Content" or "Info"
|
||||
vm.nameDisabled = false;
|
||||
if(item && item.alias !== "umbContent" && item.alias !== "umbInfo") {
|
||||
vm.nameDisabled = true;
|
||||
}
|
||||
// call the callback if any is registered
|
||||
if(vm.onSelectApp) {
|
||||
vm.onSelectApp({"app": item});
|
||||
}
|
||||
}
|
||||
|
||||
$scope.$on("editors.apps.appChanged", function($event, $args) {
|
||||
var app = $args.app;
|
||||
// disable the name field if the active content app is not "Content" or "Info"
|
||||
vm.nameDisabled = false;
|
||||
if(app && app.alias !== "umbContent" && app.alias !== "umbInfo") {
|
||||
vm.nameDisabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Used to proxy a callback
|
||||
|
||||
@@ -318,9 +318,6 @@
|
||||
* @param {any} app This is the model of the selected app
|
||||
*/
|
||||
function selectApp(app) {
|
||||
if(app && app.alias) {
|
||||
activeAppAlias = app.alias;
|
||||
}
|
||||
if(vm.onSelectApp) {
|
||||
vm.onSelectApp({"app": app});
|
||||
}
|
||||
@@ -331,6 +328,14 @@
|
||||
vm.onSelectAppAnchor({"app": app, "anchor": anchor});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$scope.$on("editors.apps.appChanged", function($event, $args) {
|
||||
var app = $args.app;
|
||||
if(app && app.alias) {
|
||||
activeAppAlias = app.alias;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -32,6 +32,9 @@
|
||||
if(scope.onAnchorSelect) {
|
||||
scope.onAnchorSelect({"item": item, "anchor": anchor});
|
||||
}
|
||||
if (item.active !== true) {
|
||||
scope.openNavigationItem(item);
|
||||
}
|
||||
};
|
||||
|
||||
scope.toggleDropdown = function () {
|
||||
|
||||
@@ -48,7 +48,7 @@ Use this directive to render tab content. For an example see: {@link umbraco.dir
|
||||
|
||||
vm.mouseOut = function() {
|
||||
clearTimeout(vm.mouseOutDelay);
|
||||
vm.mouseOutDelay = setTimeout(hideDropdownBind, 1000);
|
||||
vm.mouseOutDelay = setTimeout(hideDropdownBind, 500);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
.umb-sub-views-nav-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.umb-sub-views-nav-item > a {
|
||||
text-align: center;
|
||||
@@ -36,6 +37,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item > a:active {
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
.umb-sub-views-nav-item > a:focus {
|
||||
outline: none;
|
||||
}
|
||||
@@ -101,6 +105,12 @@
|
||||
|
||||
.umb-sub-views-nav-item__anchor_dropdown {// inherits from .dropdown-menu
|
||||
display: none;
|
||||
margin: 0;
|
||||
|
||||
// center align horizontal
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
@@ -111,9 +121,8 @@
|
||||
.umb-sub-views-nav-item__anchor_dropdown li.is-active a {
|
||||
border-left-color: @ui-selected-border;
|
||||
}
|
||||
.umb-sub-views-nav-item__anchor_dropdown li:hover.is-active a {
|
||||
border-left-color: @ui-selected-border-hover;
|
||||
}
|
||||
|
||||
.umb-sub-views-nav-item
|
||||
|
||||
|
||||
// --------------------------------
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu umb-sub-views-nav-item__anchor_dropdown" ng-class="{'show': vm.showDropdown}">
|
||||
<li ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': anchor.active}">
|
||||
<li ng-repeat="anchor in vm.item.anchors" ng-class="{'is-active': vm.item.active && anchor.active}">
|
||||
<a href="" ng-click="vm.anchorClicked(anchor, $event)">
|
||||
{{anchor.label}}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user