This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152

Closed
petrsimon wants to merge 10 commits into from
Closed

Toggle containers programmatically #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
afb35b9
feat: Programmatically collapse/expand a container
petrsimon Oct 28, 2015
4c55a27
Improve pull-request for toggle containers
petrsimon Oct 28, 2015
5188e54
Undefined check the angular way
petrsimon Oct 28, 2015
f3952b5
Remove dependency on jquery
petrsimon Oct 29, 2015
aeb391b
Fix opening an initially closed container
petrsimon Oct 29, 2015
9fd7242
Broadcast message when layout has finished loading
petrsimon Oct 29, 2015
c78acf9
Remove redundant code
petrsimon Oct 29, 2015
8743f85
Improve toggle tests
petrsimon Oct 29, 2015
a124634
Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…
petrsimon Oct 29, 2015
8bcc68b
Fix jshint errors
petrsimon Oct 29, 2015
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
55 changes: 46 additions & 9 deletions demo/demo2.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

<title></title>
<title>Angular UI Layout Demo 2</title>

<!-- Le css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

<!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
<script type="application/javascript">

var app = angular.module('x', ['ui.layout']);
app.controller('DemoController', function($scope) {
app.controller('DemoController', function($scope, $timeout) {
$scope.config = {
flow: 'column'
};

$scope.layout = {
one: false,
four: false
};

$scope.toggle = function(which) {
$scope.layout[which] = !$scope.layout[which];
};

$scope.close = function(which) {
$scope.layout[which] = true;
};

$scope.open = function(which) {
$scope.layout[which] = false;
}

$scope.$on('ui.layout.loaded', function(){
$timeout(function(){
$scope.layout.one = true;
});
})
});

</script>
Expand All@@ -38,26 +61,40 @@
}
</style>
</head>
<body ng-controller="DemoController">
<div ui-layout="config">
<div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
<div ui-layout="config" ui-layout-loaded>
<div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
One
<br/>
<button ng-click="updateDisplay()">Update Display</button>
</div>
<div ui-layout-container>Two</div>
<div ui-layout-container>Two
<p>
<button ng-click="toggle('one')">Toggle One</button></br>
<button ng-click="close('one')">Close One</button></br>
<button ng-click="open('one')">Open One</button></br>
</p>

<p>
<button ng-click="toggle('four')">Toggle Four</button></br>
<button ng-click="close('four')">Close Four</button></br>
<button ng-click="open('four')">Open Four</button></br>
</p>
</div>
<div ui-layout-container>
<!--Three-->
<div ui-layout="{ flow:'row', dividerSize:'12' }">
<div ui-layout-container>Three</div>
<div ui-layout-container>Three-One</div>
<div ui-layout-container>
Three-Two
<div ng-include="demo/testinclude.html"></div>
</div>
</div>
</div>
<div ui-layout-container>
<div ui-layout-container collapsed="layout.four">
Four
</div>
</div>

</body>
</html>
55 changes: 47 additions & 8 deletions src/ui-layout.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
opts.sizes = opts.sizes || [];
opts.maxSizes = opts.maxSizes || [];
opts.minSizes = opts.minSizes || [];
opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

opts.dividerSize = opts.dividerSize || 10;
opts.collapsed = opts.collapsed || [];
ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
for(i=0; i < ctrl.containers.length; i++) {
if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

var child = ctrl.containers[i].element;
var container = ctrl.containers[i],
child = container.element;
opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
//opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];

@SomeKittensSomeKittensOct 29, 2015

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?

@petrsimonpetrsimonOct 29, 2015

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?

opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

opts.minSizes[i] = optionValue(opts.minSizes[i]);
opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

c.size = (newSize !== null) ? newSize : autoSize;

} else {
c.size = dividerSize;
}

if (c.collapsed) {
c.actualSize = c.size;
c.size = 0;
}
usedSpace += c.size;
}
}
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
numOfSplitbars++;
}

container.index = index;
ctrl.containers.splice(index, 0, container);

ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

}])

.directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
.directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
return {
restrict: 'AE',
require: '^uiLayout',
scope: {},
scope: {
collapsed: '='
},

compile: function() {
return {
pre: function(scope, element, attrs, ctrl) {
scope.container = LayoutContainer.Container();
scope.container.element = element;
scope.container.collapsed = scope.collapsed;

ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
if(!element.hasClass('stretch')) element.addClass('stretch');
if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

scope.$watch('collapsed', function (val, old) {
if (angular.isDefined(old) && val !== old) {
var index = scope.container.index;
var splitter = ctrl.containers[index + 1],
el;

if (splitter) {
el = splitter.element[0].children[0];
} else {
splitter = ctrl.containers[index - 1];
el = splitter.element[0].children[1];
}

$timeout(function(){

@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.

@petrsimonpetrsimonOct 28, 2015

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.

@petrsimonpetrsimonOct 29, 2015

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.

angular.element(el).triggerHandler('click');
});

}
});

scope.$watch('container.size', function(newValue) {
element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
});
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
};
}])

.directive('uiLayoutLoaded', function() {
return {
restrict: 'A',
priority: -100,
link: function($scope){
$scope.$broadcast('ui.layout.loaded');
}
};
})

.factory('LayoutContainer', function() {
// Base container that can be locked and resized
function BaseContainer() {
Expand Down
106 changes: 106 additions & 0 deletions test/layout-scenar.spec.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

});
}

describe('toggle programmatically', function() {
var scope, $controller, $compile, $timeout;
beforeEach(function () {

module('ui.layout');

inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
scope = $rootScope.$new();
$controller = _$controller_;
$compile = _$compile_;
$timeout = _$timeout_;
});
});

function compileDirective(before, after) {
var template = '' +
'<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
'</div>';

scope.layout = {
beforeContainer: before,
afterContainer: after
};

var elm = angular.element(template);
angular.element(document.body).prepend(elm);
$compile(elm)(scope);
scope.$digest();

return elm;
}

it('should collapse open beforeContainer', function() {
var elm = compileDirective(false, false);

var divs = elm.find('div'),
beforeContainer = divs[0],
afterContainer = divs[2];
expect(beforeContainer.style.width).toEqual('100px');
expect(afterContainer.style.width).toEqual('200px');

scope.layout.beforeContainer = true;
scope.$apply();
$timeout.flush();

expect(beforeContainer.style.width).toEqual('0px');
});

it('should open collapsed beforeContainer', function() {
var elm = compileDirective(true, false);

var divs = elm.find('div'),
beforeContainer = divs[0],
afterContainer = divs[2];
expect(beforeContainer.style.width).toEqual('0px');
expect(afterContainer.style.width).toEqual('200px');

scope.layout.beforeContainer = false;
scope.$apply();
$timeout.flush();

expect(beforeContainer.style.width).toEqual('100px');
});

it('should collapse open afterContainer', function() {
var elm = compileDirective(false, false);

var divs = elm.find('div'),
beforeContainer = divs[0],
afterContainer = divs[2];
expect(beforeContainer.style.width).toEqual('100px');
expect(afterContainer.style.width).toEqual('200px');

scope.layout.afterContainer = true;
scope.$apply();
$timeout.flush();

expect(afterContainer.style.width).toEqual('0px');
});

it('should open collapsed afterContainer', function() {
var elm = compileDirective(false, true);

var divs = elm.find('div'),
beforeContainer = divs[0],
afterContainer = divs[2];
expect(beforeContainer.style.width).toEqual('100px');
expect(afterContainer.style.width).toEqual('0px');

scope.layout.afterContainer = false;
scope.$apply();
$timeout.flush();

expect(afterContainer.style.width).toEqual('200px');
});

it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
spyOn(scope, '$broadcast');
compileDirective(false, false);
expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
});

});
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content

This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Toggle containers programmatically#152
 Closed

petrsimon
wants to merge
10
commits into

from

 Closed


Toggle containers programmatically
#152
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


10 commits


Select commit
Hold shift + click to select a range
afb35b9

feat: Programmatically collapse/expand a container


petrsimon Oct 28, 2015
4c55a27

Improve pull-request for toggle containers


petrsimon Oct 28, 2015
5188e54

Undefined check the angular way


petrsimon Oct 28, 2015
f3952b5

Remove dependency on jquery


petrsimon Oct 29, 2015
aeb391b

Fix opening an initially closed container


petrsimon Oct 29, 2015
9fd7242

Broadcast message when layout has finished loading


petrsimon Oct 29, 2015
c78acf9

Remove redundant code


petrsimon Oct 29, 2015
8743f85

Improve toggle tests


petrsimon Oct 29, 2015
a124634

Merge branch 'toggle-on-init-with-notify-directive' into toggle-conta…


petrsimon Oct 29, 2015
8bcc68b

Fix jshint errors


petrsimon Oct 29, 2015

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


55 changes: 46 additions & 9 deletions
demo/demo2.html

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,10 +4,10 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title></title>
 <title>Angular UI Layout Demo 2</title>

 <!-- Le css -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
 <link rel="stylesheet" type="text/css" href="../src/ui-layout.css"/>

 <!-- Le javascript -->
Expand All@@ -16,10 +16,33 @@
 <script type="application/javascript">

 var app = angular.module('x', ['ui.layout']);
 app.controller('DemoController', function($scope) {
 app.controller('DemoController', function($scope, $timeout) {
 $scope.config = {
 flow: 'column'
 };

 $scope.layout = {
 one: false,
 four: false
 };

 $scope.toggle = function(which) {
 $scope.layout[which] = !$scope.layout[which];
 };

 $scope.close = function(which) {
 $scope.layout[which] = true;
 };

 $scope.open = function(which) {
 $scope.layout[which] = false;
 }

 $scope.$on('ui.layout.loaded', function(){
 $timeout(function(){
 $scope.layout.one = true;
 });
 })
 });

 </script>
Expand All@@ -38,26 +61,40 @@
 }
 </style>
</head>
<body ng-controller="DemoController">
 <div ui-layout="config">
 <div ui-layout-container max-size="50%">
<body ng-controller="DemoController">
 <div ui-layout="config" ui-layout-loaded>
 <div ui-layout-container size="100px" max-size="50%" collapsed="layout.one">
 One
 <br/>
 <button ng-click="updateDisplay()">Update Display</button>
 </div>
 <div ui-layout-container>Two</div>
 <div ui-layout-container>Two
 <p>
 <button ng-click="toggle('one')">Toggle One</button></br>
 <button ng-click="close('one')">Close One</button></br>
 <button ng-click="open('one')">Open One</button></br>
 </p>

 <p>
 <button ng-click="toggle('four')">Toggle Four</button></br>
 <button ng-click="close('four')">Close Four</button></br>
 <button ng-click="open('four')">Open Four</button></br>
 </p>
 </div>
 <div ui-layout-container>
 <!--Three-->
 <div ui-layout="{ flow:'row', dividerSize:'12' }">
 <div ui-layout-container>Three</div>
 <div ui-layout-container>Three-One</div>
 <div ui-layout-container>
 Three-Two
 <div ng-include="demo/testinclude.html"></div>
 </div>
 </div>
 </div>
 <div ui-layout-container>
 <div ui-layout-container collapsed="layout.four">
 Four
 </div>
 </div>

</body>
</html>

55 changes: 47 additions & 8 deletions
src/ui-layout.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -41,7 +41,8 @@ angular.module('ui.layout', [])
 opts.sizes = opts.sizes || [];
 opts.maxSizes = opts.maxSizes || [];
 opts.minSizes = opts.minSizes || [];
 opts.dividerSize = opts.dividerSize || 10; //default divider size set to 10

 opts.dividerSize = opts.dividerSize || 10;
 opts.collapsed = opts.collapsed || [];
 ctrl.opts = opts;

Expand DownExpand Up@@ -239,14 +240,14 @@ angular.module('ui.layout', [])
 for(i=0; i < ctrl.containers.length; i++) {
 if(!LayoutContainer.isSplitbar(ctrl.containers[i])) {

 var child = ctrl.containers[i].element;
 var container = ctrl.containers[i],
 child = container.element;
 opts.maxSizes[i] = child.attr('max-size') || child.attr('data-max-size') || opts.maxSizes[i] || null;
 opts.minSizes[i] = child.attr('min-size') || child.attr('data-min-size') || opts.minSizes[i] || null;
 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i] || 'auto';
 //opts.collapsed[i] = child.attr('collapsed') || opts.collapsed[i] || false;


 opts.sizes[i] = child.attr('size') || child.attr('data-size') || opts.sizes[i];
@SomeKittensSomeKittensOct 29, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why drop auto as an option?
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the next line takes care of it in case there's no size provided by the user. Am I missing something?
 opts.sizes[i] = optionValue(opts.sizes[i]) || 'auto';

 opts.minSizes[i] = optionValue(opts.minSizes[i]);
 opts.maxSizes[i] = optionValue(opts.maxSizes[i]);

Expand DownExpand Up@@ -304,10 +305,14 @@ angular.module('ui.layout', [])
 var newSize = (opts.sizes[i] === 'auto') ? autoSize : opts.sizes[i];

 c.size = (newSize !== null) ? newSize : autoSize;

 } else {
 c.size = dividerSize;
 }

 if (c.collapsed) {
 c.actualSize = c.size;
 c.size = 0;
 }
 usedSpace += c.size;
 }
 }
Expand All@@ -328,6 +333,7 @@ angular.module('ui.layout', [])
 numOfSplitbars++;
 }

 container.index = index;
 ctrl.containers.splice(index, 0, container);

 ctrl.updateDisplay();
Expand DownExpand Up@@ -773,17 +779,20 @@ angular.module('ui.layout', [])

 }])

 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', function(LayoutContainer, $compile) {
 .directive('uiLayoutContainer', ['LayoutContainer', '$compile', '$timeout', function(LayoutContainer, $compile, $timeout) {
 return {
 restrict: 'AE',
 require: '^uiLayout',
 scope: {},
 scope: {
 collapsed: '='
 },

 compile: function() {
 return {
 pre: function(scope, element, attrs, ctrl) {
 scope.container = LayoutContainer.Container();
 scope.container.element = element;
 scope.container.collapsed = scope.collapsed;

 ctrl.addContainer(scope.container);

Expand All@@ -796,6 +805,26 @@ angular.module('ui.layout', [])
 if(!element.hasClass('stretch')) element.addClass('stretch');
 if(!element.hasClass('ui-layout-container')) element.addClass('ui-layout-container');

 scope.$watch('collapsed', function (val, old) {
 if (angular.isDefined(old) && val !== old) {
 var index = scope.container.index;
 var splitter = ctrl.containers[index + 1],
 el;

 if (splitter) {
 el = splitter.element[0].children[0];
 } else {
 splitter = ctrl.containers[index - 1];
 el = splitter.element[0].children[1];
 }

 $timeout(function(){
@BobbieBarkerBobbieBarkerOct 28, 2015

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hate to be a stickler but I was thinking more about using $q instead of $timeout. In my opinion $timeout isn't really appropriate here.
@petrsimonpetrsimonOct 28, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha. This is the trick I know how to get around "$digest in progess" error, which was thrown after trying to trigger the click. Not sure how to use $q here.
@petrsimonpetrsimonOct 29, 2015

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Btw, why it $timeout not appropriate. I thought this is a common way how to get around $digest error, to execute a routine in another digest cycle with $timeout.
 angular.element(el).triggerHandler('click');
 });

 }
 });

 scope.$watch('container.size', function(newValue) {
 element.css(ctrl.sizeProperties.sizeProperty, newValue + 'px');
 });
Expand All@@ -822,6 +851,16 @@ angular.module('ui.layout', [])
 };
 }])

 .directive('uiLayoutLoaded', function() {
 return {
 restrict: 'A',
 priority: -100,
 link: function($scope){
 $scope.$broadcast('ui.layout.loaded');
 }
 };
 })

 .factory('LayoutContainer', function() {
 // Base container that can be locked and resized
 function BaseContainer() {
Expand Down

106 changes: 106 additions & 0 deletions
test/layout-scenar.spec.js

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -192,3 +192,109 @@ function splitMoveTests(description, startEvent, moveEvent, endEvent) {

 });
}

describe('toggle programmatically', function() {
 var scope, $controller, $compile, $timeout;
 beforeEach(function () {

 module('ui.layout');

 inject(function ($rootScope, _$controller_, _$compile_, _$timeout_) {
 scope = $rootScope.$new();
 $controller = _$controller_;
 $compile = _$compile_;
 $timeout = _$timeout_;
 });
 });

 function compileDirective(before, after) {
 var template = '' +
 '<div ui-layout="{flow: \'column\'}" ui-layout-loaded>' +
 ' <div ui-layout-container data-collapsed="layout.beforeContainer" size="100px">One</div>' +
 ' <div ui-layout-container data-collapsed="layout.afterContainer" size="200px">Two</div>' +
 '</div>';

 scope.layout = {
 beforeContainer: before,
 afterContainer: after
 };

 var elm = angular.element(template);
 angular.element(document.body).prepend(elm);
 $compile(elm)(scope);
 scope.$digest();

 return elm;
 }

 it('should collapse open beforeContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('0px');
 });

 it('should open collapsed beforeContainer', function() {
 var elm = compileDirective(true, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('0px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.beforeContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(beforeContainer.style.width).toEqual('100px');
 });

 it('should collapse open afterContainer', function() {
 var elm = compileDirective(false, false);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('200px');

 scope.layout.afterContainer = true;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('0px');
 });

 it('should open collapsed afterContainer', function() {
 var elm = compileDirective(false, true);

 var divs = elm.find('div'),
 beforeContainer = divs[0],
 afterContainer = divs[2];
 expect(beforeContainer.style.width).toEqual('100px');
 expect(afterContainer.style.width).toEqual('0px');

 scope.layout.afterContainer = false;
 scope.$apply();
 $timeout.flush();

 expect(afterContainer.style.width).toEqual('200px');
 });

 it('should broadcast ui.layout.loaded after all ui.layout directives have been loaded', function () {
 spyOn(scope, '$broadcast');
 compileDirective(false, false);
 expect(scope.$broadcast).toHaveBeenCalledWith('ui.layout.loaded');
 });

});