Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

Adding RTL support #169

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Adding RTL support #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d48e18
refactor(rtlSupport): removed depencency of container position on flo…
widmoser Dec 9, 2015
14b1425
feat(rtlSupport): adjusting flowProperty according to ui layout's dir…
widmoser Dec 9, 2015
53741f8
feat(rtlSupport): fixed mouse move calculations for rtl layouts
widmoser Dec 9, 2015
e71c419
test: added tests for rtl direction
widmoser Feb 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 40 additions & 28 deletions src/ui-layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,14 @@ angular.module('ui.layout', [])
mouseProperty: 'clientX',
flowPropertyPosition: 'x' };

$scope.$watch($window.getComputedStyle($element[0], null).direction, function() {
ctrl.dir = $window.getComputedStyle($element[0], null).direction;
if (ctrl.isUsingColumnFlow) {
ctrl.sizeProperties.flowProperty = ctrl.sizeProperties.offsetPos = (ctrl.dir === 'rtl') ? 'right' : 'left';
ctrl.calculate();
}
});

$element
// Force the layout to fill the parent space
// fix no height layout...
Expand Down Expand Up @@ -67,7 +75,6 @@ angular.module('ui.layout', [])

var debounceEvent;
function draw() {
var position = ctrl.sizeProperties.flowProperty;
var dividerSize = parseInt(opts.dividerSize);
var elementSize = $element[0][ctrl.sizeProperties.offsetSize];

Expand All @@ -82,8 +89,8 @@ angular.module('ui.layout', [])

if(!beforeContainer.collapsed && !afterContainer.collapsed) {
// calculate container positons
var difference = ctrl.movingSplitbar[position] - lastPos;
var newPosition = ctrl.movingSplitbar[position] - difference;
var difference = ctrl.movingSplitbar.position - lastPos;
var newPosition = ctrl.movingSplitbar.position - difference;

// Keep the bar in the window (no left/top 100%)
newPosition = Math.min(elementSize-dividerSize, newPosition);
Expand All @@ -103,16 +110,16 @@ angular.module('ui.layout', [])
newPosition = afterContainer.afterMaxValue;

// resize the before container
beforeContainer.size = newPosition - beforeContainer[position];
beforeContainer.size = newPosition - beforeContainer.position;
// store the current value to preserve this size during onResize
beforeContainer.uncollapsedSize = beforeContainer.size;

// update after container position
var oldAfterContainerPosition = afterContainer[position];
afterContainer[position] = newPosition + dividerSize;
var oldAfterContainerPosition = afterContainer.position;
afterContainer.position = newPosition + dividerSize;

//update after container size if the position has changed
if(afterContainer[position] != oldAfterContainerPosition) {
if(afterContainer.position != oldAfterContainerPosition) {
afterContainer.size = (nextSplitbarIndex !== null) ?
(oldAfterContainerPosition + afterContainer.size) - (newPosition + dividerSize) :
elementSize - (newPosition + dividerSize);
Expand All @@ -121,7 +128,7 @@ angular.module('ui.layout', [])
}

// move the splitbar
ctrl.movingSplitbar[position] = newPosition;
ctrl.movingSplitbar.position = newPosition;

// broadcast an event that resize happened (debounced to 50ms)
if(debounceEvent) $timeout.cancel(debounceEvent);
Expand All @@ -143,9 +150,11 @@ angular.module('ui.layout', [])
var scrollX = window.pageXOffset || body.scrollLeft;
var scrollY = window.pageYOffset || body.scrollTop;
var clientRect = rawDomNode.getBoundingClientRect();
var x = clientRect.left + scrollX;
var y = clientRect.top + scrollY;
return { left: x, top: y };
if (ctrl.isUsingColumnFlow) {
return clientRect[ctrl.sizeProperties.offsetPos] + scrollX;
} else {
return clientRect[ctrl.sizeProperties.offsetPos] + scrollY;
}
}

/**
Expand Down Expand Up @@ -179,7 +188,12 @@ angular.module('ui.layout', [])
(mouseEvent.originalEvent ? mouseEvent.originalEvent.targetTouches[0][ctrl.sizeProperties.mouseProperty] : 0) :
(mouseEvent.targetTouches ? mouseEvent.targetTouches[0][ctrl.sizeProperties.mouseProperty] : 0));

lastPos = mousePos - offset($element)[ctrl.sizeProperties.offsetPos];
if (ctrl.dir === 'rtl' && ctrl.isUsingColumnFlow) {
lastPos = offset($element) - mousePos;
} else {
lastPos = mousePos - offset($element);
}


//Cancel previous rAF call
if(animationFrameRequested) {
Expand All @@ -201,8 +215,8 @@ angular.module('ui.layout', [])
var index = ctrl.containers.indexOf(container);

var setValues = function(container) {
var start = container[ctrl.sizeProperties.flowProperty];
var end = container[ctrl.sizeProperties.flowProperty] + container.size;
var start = container.position;
var end = container.position + container.size;

container.beforeMinValue = angular.isNumber(container.minSize) ? start + container.minSize : start;
container.beforeMaxValue = angular.isNumber(container.maxSize) ? start + container.maxSize : null;
Expand Down Expand Up @@ -317,7 +331,7 @@ angular.module('ui.layout', [])
remainder = availableSize - autoSize * numOfAutoContainers;
for(i=0; i < ctrl.containers.length; i++) {
c = ctrl.containers[i];
c[ctrl.sizeProperties.flowProperty] = usedSpace;
c.position = usedSpace;
c.maxSize = opts.maxSizes[i];
c.minSize = opts.minSizes[i];

Expand Down Expand Up @@ -458,18 +472,18 @@ angular.module('ui.layout', [])

c.size = 0;

if(nextSplitbar) nextSplitbar[ctrl.sizeProperties.flowProperty] -= c.uncollapsedSize;
if(nextSplitbar) nextSplitbar.position -= c.uncollapsedSize;
if(nextContainer) {
nextContainer[ctrl.sizeProperties.flowProperty] -= c.uncollapsedSize;
nextContainer.position -= c.uncollapsedSize;
nextContainer.uncollapsedSize += c.uncollapsedSize;
}

} else {
c.size = c.uncollapsedSize;

if(nextSplitbar) nextSplitbar[ctrl.sizeProperties.flowProperty] += c.uncollapsedSize;
if(nextSplitbar) nextSplitbar.position += c.uncollapsedSize;
if(nextContainer) {
nextContainer[ctrl.sizeProperties.flowProperty] += c.uncollapsedSize;
nextContainer.position += c.uncollapsedSize;
nextContainer.uncollapsedSize -= c.uncollapsedSize;
}
}
Expand All @@ -493,7 +507,6 @@ angular.module('ui.layout', [])
var prevContainer = ctrl.containers[index-2];
var isLastContainer = index === (ctrl.containers.length - 1);
var endDiff;
var flowProperty = ctrl.sizeProperties.flowProperty;
var sizeProperty = ctrl.sizeProperties.sizeProperty;

ctrl.bounds = $element[0].getBoundingClientRect();
Expand All @@ -517,10 +530,10 @@ angular.module('ui.layout', [])

// adds additional space so the splitbar moves to the very end of the container
// to offset the lost space when converting from percents to pixels
endDiff = (isLastContainer) ? ctrl.bounds[sizeProperty] - c[flowProperty] - c.uncollapsedSize : 0;
endDiff = (isLastContainer) ? ctrl.bounds[sizeProperty] - c.position - c.uncollapsedSize : 0;

if(prevSplitbar) {
prevSplitbar[flowProperty] += (c.uncollapsedSize + endDiff);
prevSplitbar.position += (c.uncollapsedSize + endDiff);
}
if(prevContainer) {
prevContainer.size += (c.uncollapsedSize + endDiff);
Expand All @@ -531,10 +544,10 @@ angular.module('ui.layout', [])

// adds additional space so the splitbar moves back to the proper position
// to offset the additional space added when collapsing
endDiff = (isLastContainer) ? ctrl.bounds[sizeProperty] - c[flowProperty] - c.uncollapsedSize : 0;
endDiff = (isLastContainer) ? ctrl.bounds[sizeProperty] - c.position - c.uncollapsedSize : 0;

if(prevSplitbar) {
prevSplitbar[flowProperty] -= (c.uncollapsedSize + endDiff);
prevSplitbar.position -= (c.uncollapsedSize + endDiff);
}
if(prevContainer) {
prevContainer.size -= (c.uncollapsedSize + endDiff);
Expand Down Expand Up @@ -849,7 +862,7 @@ angular.module('ui.layout', [])
element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
});

scope.$watch('splitbar.' + ctrl.sizeProperties.flowProperty, function(newValue) {
scope.$watch('splitbar.position', function(newValue) {
element.css(ctrl.sizeProperties.flowProperty, newValue + 'px');
});

Expand Down Expand Up @@ -938,7 +951,7 @@ angular.module('ui.layout', [])
}
});

scope.$watch('container.' + ctrl.sizeProperties.flowProperty, function(newValue) {
scope.$watch('container.position', function(newValue) {
element.css(ctrl.sizeProperties.flowProperty, newValue + 'px');
});

Expand Down Expand Up @@ -1094,8 +1107,7 @@ angular.module('ui.layout', [])
// Splitbar container
function SplitbarContainer() {
this.size = 10;
this.left = 0;
this.top = 0;
this.position = 0;
this.element = null;
}

Expand Down
Loading