update mct-split-pane to use userPreferenceWidth only when alias is provided, otherwise set position as usual (fix for timeline sync issue)

This commit is contained in:
Deep Tailor
2017-08-29 10:15:29 -07:00
parent 2079a74ab2
commit e4aaa860a3

View File

@ -100,7 +100,7 @@ define(
anchor, anchor,
activeInterval, activeInterval,
position, position,
splitterSize, splitterSize,
alias = $attrs.alias !== undefined ? alias = $attrs.alias !== undefined ?
"mctSplitPane-" + $attrs.alias : undefined, "mctSplitPane-" + $attrs.alias : undefined,
@ -108,7 +108,7 @@ define(
//convert string to number from localStorage //convert string to number from localStorage
userWidthPreference = $window.localStorage.getItem(alias) === null ? userWidthPreference = $window.localStorage.getItem(alias) === null ?
undefined : Number($window.localStorage.getItem(alias)); undefined : Number($window.localStorage.getItem(alias));
// Get relevant size (height or width) of DOM element // Get relevant size (height or width) of DOM element
function getSize(domElement) { function getSize(domElement) {
return (anchor.orientation === 'vertical' ? return (anchor.orientation === 'vertical' ?
@ -117,6 +117,10 @@ define(
// Apply styles to child elements // Apply styles to child elements
function updateChildren(children) { function updateChildren(children) {
if (alias) {
position = userWidthPreference || position;
}
// Pick out correct elements to update, flowing from // Pick out correct elements to update, flowing from
// selected anchor edge. // selected anchor edge.
var first = children.eq(anchor.reversed ? 2 : 0), var first = children.eq(anchor.reversed ? 2 : 0),
@ -126,7 +130,7 @@ define(
splitterSize = getSize(splitter[0]); splitterSize = getSize(splitter[0]);
first.css(anchor.edge, "0px"); first.css(anchor.edge, "0px");
first.css(anchor.dimension, (userWidthPreference || position) + 'px'); first.css(anchor.dimension, position + 'px');
// Get actual size (to obey min-width etc.) // Get actual size (to obey min-width etc.)
firstSize = getSize(first[0]); firstSize = getSize(first[0]);
@ -135,8 +139,8 @@ define(
splitter.css(anchor.opposite, "auto"); splitter.css(anchor.opposite, "auto");
last.css(anchor.edge, firstSize + splitterSize + 'px'); last.css(anchor.edge, firstSize + splitterSize + 'px');
last.css(anchor.opposite, "0px"); last.css(anchor.opposite, '0px');
position = firstSize + splitterSize; position = firstSize;
} }
// Update positioning of contained elements // Update positioning of contained elements
@ -162,28 +166,27 @@ define(
// Getter-setter for the pixel offset of the splitter, // Getter-setter for the pixel offset of the splitter,
// relative to the current edge. // relative to the current edge.
function getSetPosition(value) { function getSetPosition(value) {
var prior = position;
if (typeof value === 'number') { if (typeof value === 'number') {
position = value; position = value;
enforceExtrema(); enforceExtrema();
updateElementPositions(); updateElementPositions();
// Pass change up so this state can be shared // Pass change up so this state can be shared
if (positionParsed.assign && position !== prior) { if (positionParsed.assign) {
positionParsed.assign($scope, position); positionParsed.assign($scope, position);
} }
} }
return position; return position;
} }
function setUserWidthPreference(value) { function setUserWidthPreference(value) {
userWidthPreference = value - splitterSize; userWidthPreference = value;
} }
function persistToLocalStorage(value) { function persistToLocalStorage(value) {
if (alias) { if (alias) {
userWidthPreference = value - splitterSize; $window.localStorage.setItem(alias, value);
$window.localStorage.setItem(alias, userWidthPreference);
} }
} }
@ -218,20 +221,21 @@ define(
$scope.$on('$destroy', function () { $scope.$on('$destroy', function () {
$interval.cancel(activeInterval); $interval.cancel(activeInterval);
}); });
// Interface exposed by controller, for mct-splitter to user // Interface exposed by controller, for mct-splitter to user
return { return {
anchor: function () { anchor: function () {
return anchor; return anchor;
}, },
position: function (value) { position: function (initialValue, newValue) {
if (arguments.length > 0) { if(arguments.length === 0){
setUserWidthPreference(value);
return getSetPosition(value);
} else {
return getSetPosition(); return getSetPosition();
} }
if (initialValue !== newValue) {
setUserWidthPreference(newValue);
getSetPosition(newValue);
}
}, },
startResizing: function () { startResizing: function () {
toggleClass('resizing'); toggleClass('resizing');
@ -253,4 +257,4 @@ define(
return MCTSplitPane; return MCTSplitPane;
} }
); );