Skip to content

Commit 39e54fe

Browse files
jcenturionjcenturion
committed
Fix collapse/expand
1 parent 882ee79 commit 39e54fe

File tree

5 files changed

+54
-148
lines changed

5 files changed

+54
-148
lines changed

‎dist/examples/leagues.raml‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,27 +53,6 @@ securitySchemes:
5353

5454
securedBy: [ basic, digest_auth, oauth_2_0, custom_scheme_1, custom_scheme_2 ]
5555

56-
documentation:
57-
- title: Section 1
58-
content: Inline content. So it should be a oneliner.
59-
- title: Section 2
60-
content: |
61-
Multiline content. There should be multiple lines in this content.
62-
Here starts a new line.
63-
And here theres a new one.
64-
- title: Section 3 - Only a title. No description should be displayed.
65-
content: " "
66-
- title: Section 4
67-
content: |
68-
Not only will this section display multiline content, but also it will have markdown. Lets see how that works.
69-
<h> Here we have a line surrounded by h <h>
70-
<b> Now with b <b>
71-
* Some
72-
* items
73-
* in
74-
* a
75-
* list
76-
7756
/teams:
7857
displayName: Teams
7958
description: |

‎dist/scripts/api-console.js‎

Lines changed: 27 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1690,77 +1690,47 @@
16901690

16911691
$scope.items[index] = !$scope.items[index];
16921692

1693-
var itemsStatus = $scope.items.filter(function (el) { return el === false}).length === $scope.items.length;
1694-
1695-
$scope.collapsed = checkItemStatus(false) ? true : $scope.collapsed;
1696-
$scope.collapsed = checkItemStatus(true) ? false : $scope.collapsed;
1697-
1698-
$section.toggleClass('raml-console-is-collapsed');
1699-
$this.toggleClass('raml-console-is-active');
1700-
};
1701-
1702-
function checkItemStatus(status) {
1703-
return $scope.items.filter(function (el) { return el === status || el === null}).length === $scope.items.length
1704-
}
1705-
1706-
$scope.showResourceDescription = function ($event) {
1707-
var $this = jQuery($event.currentTarget);
1708-
var $container = $this.closest('.raml-console-resource-list-item');
1709-
1710-
$container.find('.raml-console-resource-description').toggleClass('ng-hide');
1711-
};
1712-
1713-
$scope.toggleInverted = function ($event) {
1714-
var $section = jQuery($event.currentTarget)
1715-
.closest('.raml-console-resource-list-item')
1716-
.find('.raml-console-resource-list');
1717-
1718-
var $this = $section
1719-
.closest('.raml-console-resource-list-item')
1720-
.find('.raml-console-resource-root-toggle');
1721-
1722-
if ($section.hasClass('raml-console-is-collapsed')) {
1723-
$section.velocity('slideDown', {
1724-
duration: 200
1725-
});
1726-
} else {
1727-
$section.velocity('slideUp', {
1728-
duration: 200
1729-
});
1730-
}
1693+
$scope.collapsed = checkItemStatus(false) ? false : $scope.collapsed;
1694+
$scope.collapsed = checkItemStatus(true) ? true : $scope.collapsed;
17311695

17321696
$section.toggleClass('raml-console-is-collapsed');
1733-
$this.toggleClass('raml-console-is-active');
17341697
};
17351698

17361699
$scope.collapseAll = function ($event) {
17371700
var $this = jQuery($event.currentTarget);
17381701

17391702
if ($this.hasClass('raml-console-resources-expanded')) {
17401703
$scope.collapsed = true;
1741-
setCollapsed(true);
1742-
$this.text('expand all');
1743-
$this.removeClass('raml-console-resources-expanded');
17441704
jQuery('#raml-console-resources-container').find('ol.raml-console-resource-list').velocity('slideUp', {
17451705
duration: 200
17461706
});
17471707
} else {
17481708
$scope.collapsed = false;
1749-
setCollapsed(false);
1750-
$this.text('collapse all');
1751-
$this.addClass('raml-console-resources-expanded');
17521709
jQuery('#raml-console-resources-container').find('ol.raml-console-resource-list').velocity('slideDown', {
17531710
duration: 200
17541711
});
17551712
}
1713+
1714+
toggleCollapsed($scope.collapsed);
17561715
};
17571716

1758-
function setCollapsed (status) {
1717+
function toggleCollapsed (status) {
17591718
for (var i = 0; i < $scope.items.length; i++) {
1760-
$scope.items[i] = $scope.items[i] !== null ? !status : $scope.items[i];
1719+
$scope.items[i] = $scope.items[i] !== null ? status : $scope.items[i];
17611720
}
17621721
}
17631722

1723+
function checkItemStatus(status) {
1724+
return $scope.items.filter(function (el) { return el === status || el === null; }).length === $scope.items.length;
1725+
}
1726+
1727+
$scope.showResourceDescription = function ($event) {
1728+
var $this = jQuery($event.currentTarget);
1729+
var $container = $this.closest('.raml-console-resource-list-item');
1730+
1731+
$container.find('.raml-console-resource-description').toggleClass('ng-hide');
1732+
};
1733+
17641734
$scope.hasResourcesWithChilds = function () {
17651735
return $scope.raml.resourceGroups.filter(function (el) {
17661736
return el.length > 1;
@@ -1775,8 +1745,8 @@
17751745
$scope.items = [];
17761746

17771747
for (var i = 0 ; i < $scope.raml.resourceGroups.length; i++) {
1778-
$scope.items.push($scope.raml.resourceGroups[i].length > 1 ? true : null);
1779-
};
1748+
$scope.items.push($scope.raml.resourceGroups[i].length > 1 ? false : null);
1749+
}
17801750
});
17811751
}
17821752
};
@@ -5635,7 +5605,11 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56355605
" <input id=\"raml-console-api-behind-firewall\" type=\"checkbox\" ng-model=\"disableProxy\" ng-change=\"updateProxyConfig(disableProxy)\">\n" +
56365606
" </div>\n" +
56375607
" <header class=\"raml-console-resource raml-console-resource-root raml-console-clearfix\">\n" +
5638-
" <span ng-if=\"hasResourcesWithChilds()\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all\" ng-click=\"collapseAll($event)\" ng-class=\"{'raml-console-resources-expanded':!collapsed}\"><span ng-if=\"!collapsed\">collapse</span><span ng-if=\"collapsed\">expand</span> all</span>\n" +
5608+
" <span ng-if=\"hasResourcesWithChilds()\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all\" ng-click=\"collapseAll($event)\" ng-class=\"{'raml-console-resources-expanded':!collapsed}\">\n" +
5609+
" <span ng-if=\"!collapsed\">collapse</span>\n" +
5610+
" <span ng-if=\"collapsed\">expand</span> all\n" +
5611+
" </span>\n" +
5612+
"\n" +
56395613
" <div class=\"raml-console-resource-path-container\">\n" +
56405614
" <h2 class=\"raml-console-resource-section-title\">\n" +
56415615
" <span class=\"raml-console-resource-path-active\">Resources</span>\n" +
@@ -5647,11 +5621,11 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56475621
"\n" +
56485622
" <li id=\"{{generateId(resource.pathSegments)}}\" class=\"raml-console-resource-list-item\" ng-repeat=\"resourceGroup in raml.resourceGroups\">\n" +
56495623
" <header class=\"raml-console-resource raml-console-resource-root raml-console-clearfix\" ng-class=\"{ 'raml-console-is-active':showPanel }\" ng-init=\"resource = resourceGroup[0]\">\n" +
5650-
" <div class=\"raml-console-resource-path-container\">\n" +
5651-
" <button class=\"raml-console-resource-root-toggle\" ng-class=\"{'raml-console-is-active': collapsed}\" ng-if=\"resourceGroup.length > 1\" ng-click=\"toggle($event, $index)\"></button>\n" +
5624+
" <div class=\"raml-console-resource-path-container\" ng-init=\"index=$index\">\n" +
5625+
" <button class=\"raml-console-resource-root-toggle\" ng-class=\"{'raml-console-is-active': items[$index]}\" ng-if=\"resourceGroup.length > 1\" ng-click=\"toggle($event, index)\"></button>\n" +
56525626
"\n" +
56535627
" <h2 class=\"raml-console-resource-heading raml-console-resource-heading-large\">\n" +
5654-
" <a class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resourceGroup.length > 1}\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length > 1\" ng-click=\"toggleInverted($event)\">{{segment.toString()}}</a>\n" +
5628+
" <a class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resourceGroup.length > 1}\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length > 1\" ng-click=\"toggle($event, index)\">{{segment.toString()}}</a>\n" +
56555629
"\n" +
56565630
" <span class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resource.description}\" ng-repeat='segment in resource.pathSegments' ng-if=\"resourceGroup.length <= 1\" ng-click=\"showResourceDescription($event)\">{{segment.toString()}}</span>\n" +
56575631
" </h2>\n" +

‎src/app/resources/resources.js‎

Lines changed: 19 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -60,77 +60,47 @@
6060

6161
$scope.items[index] = !$scope.items[index];
6262

63-
var itemsStatus = $scope.items.filter(function (el) { return el === false}).length === $scope.items.length;
64-
65-
$scope.collapsed = checkItemStatus(false) ? true : $scope.collapsed;
66-
$scope.collapsed = checkItemStatus(true) ? false : $scope.collapsed;
63+
$scope.collapsed = checkItemStatus(false) ? false : $scope.collapsed;
64+
$scope.collapsed = checkItemStatus(true) ? true : $scope.collapsed;
6765

6866
$section.toggleClass('raml-console-is-collapsed');
69-
$this.toggleClass('raml-console-is-active');
70-
};
71-
72-
function checkItemStatus(status) {
73-
return $scope.items.filter(function (el) { return el === status || el === null}).length === $scope.items.length
74-
}
75-
76-
$scope.showResourceDescription = function ($event) {
77-
var $this = jQuery($event.currentTarget);
78-
var $container = $this.closest('.raml-console-resource-list-item');
79-
80-
$container.find('.raml-console-resource-description').toggleClass('ng-hide');
81-
};
82-
83-
$scope.toggleInverted = function ($event) {
84-
var $section = jQuery($event.currentTarget)
85-
.closest('.raml-console-resource-list-item')
86-
.find('.raml-console-resource-list');
87-
88-
var $this = $section
89-
.closest('.raml-console-resource-list-item')
90-
.find('.raml-console-resource-root-toggle');
91-
92-
if ($section.hasClass('raml-console-is-collapsed')) {
93-
$section.velocity('slideDown', {
94-
duration: 200
95-
});
96-
} else {
97-
$section.velocity('slideUp', {
98-
duration: 200
99-
});
100-
}
101-
102-
$section.toggleClass('raml-console-is-collapsed');
103-
$this.toggleClass('raml-console-is-active');
10467
};
10568

10669
$scope.collapseAll = function ($event) {
10770
var $this = jQuery($event.currentTarget);
10871

10972
if ($this.hasClass('raml-console-resources-expanded')) {
11073
$scope.collapsed = true;
111-
setCollapsed(true);
112-
$this.text('expand all');
113-
$this.removeClass('raml-console-resources-expanded');
11474
jQuery('#raml-console-resources-container').find('ol.raml-console-resource-list').velocity('slideUp', {
11575
duration: 200
11676
});
11777
} else {
11878
$scope.collapsed = false;
119-
setCollapsed(false);
120-
$this.text('collapse all');
121-
$this.addClass('raml-console-resources-expanded');
12279
jQuery('#raml-console-resources-container').find('ol.raml-console-resource-list').velocity('slideDown', {
12380
duration: 200
12481
});
12582
}
83+
84+
toggleCollapsed($scope.collapsed);
12685
};
12786

128-
function setCollapsed (status) {
87+
function toggleCollapsed (status) {
12988
for (var i = 0; i < $scope.items.length; i++) {
130-
$scope.items[i] = $scope.items[i] !== null ? !status : $scope.items[i];
89+
$scope.items[i] = $scope.items[i] !== null ? status : $scope.items[i];
13190
}
13291
}
13392

93+
function checkItemStatus(status) {
94+
return $scope.items.filter(function (el) { return el === status || el === null; }).length === $scope.items.length;
95+
}
96+
97+
$scope.showResourceDescription = function ($event) {
98+
var $this = jQuery($event.currentTarget);
99+
var $container = $this.closest('.raml-console-resource-list-item');
100+
101+
$container.find('.raml-console-resource-description').toggleClass('ng-hide');
102+
};
103+
134104
$scope.hasResourcesWithChilds = function () {
135105
return $scope.raml.resourceGroups.filter(function (el) {
136106
return el.length > 1;
@@ -145,8 +115,8 @@
145115
$scope.items = [];
146116

147117
for (var i = 0 ; i < $scope.raml.resourceGroups.length; i++) {
148-
$scope.items.push($scope.raml.resourceGroups[i].length > 1 ? true : null);
149-
};
118+
$scope.items.push($scope.raml.resourceGroups[i].length > 1 ? false : null);
119+
}
150120
});
151121
}
152122
};

‎src/app/resources/resources.tpl.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ <h1 ng-if="!disableTitle" class="raml-console-title">{{raml.title}}</h1>
2727
<input id="raml-console-api-behind-firewall" type="checkbox" ng-model="disableProxy" ng-change="updateProxyConfig(disableProxy)">
2828
</div>
2929
<header class="raml-console-resource raml-console-resource-root raml-console-clearfix">
30-
<span ng-if="hasResourcesWithChilds()" class="raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all" ng-click="collapseAll($event)" ng-class="{'raml-console-resources-expanded':!collapsed}"><span ng-if="!collapsed">collapse</span><span ng-if="collapsed">expand</span> all</span>
30+
<span ng-if="hasResourcesWithChilds()" class="raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all" ng-click="collapseAll($event)" ng-class="{'raml-console-resources-expanded':!collapsed}">
31+
<span ng-if="!collapsed">collapse</span>
32+
<span ng-if="collapsed">expand</span> all
33+
</span>
34+
3135
<div class="raml-console-resource-path-container">
3236
<h2 class="raml-console-resource-section-title">
3337
<span class="raml-console-resource-path-active">Resources</span>
@@ -39,11 +43,11 @@ <h2 class="raml-console-resource-section-title">
3943

4044
<li id="{{generateId(resource.pathSegments)}}" class="raml-console-resource-list-item" ng-repeat="resourceGroup in raml.resourceGroups">
4145
<header class="raml-console-resource raml-console-resource-root raml-console-clearfix" ng-class="{ 'raml-console-is-active':showPanel }" ng-init="resource = resourceGroup[0]">
42-
<div class="raml-console-resource-path-container">
43-
<button class="raml-console-resource-root-toggle" ng-class="{'raml-console-is-active': collapsed}" ng-if="resourceGroup.length > 1" ng-click="toggle($event, $index)"></button>
46+
<div class="raml-console-resource-path-container" ng-init="index=$index">
47+
<button class="raml-console-resource-root-toggle" ng-class="{'raml-console-is-active': items[$index]}" ng-if="resourceGroup.length > 1" ng-click="toggle($event, index)"></button>
4448

4549
<h2 class="raml-console-resource-heading raml-console-resource-heading-large">
46-
<a class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resourceGroup.length > 1}" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length > 1" ng-click="toggleInverted($event)">{{segment.toString()}}</a>
50+
<a class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resourceGroup.length > 1}" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length > 1" ng-click="toggle($event, index)">{{segment.toString()}}</a>
4751

4852
<span class="raml-console-resource-path-active" ng-class="{'raml-console-resource-heading-hover':resource.description}" ng-repeat='segment in resource.pathSegments' ng-if="resourceGroup.length <= 1" ng-click="showResourceDescription($event)">{{segment.toString()}}</span>
4953
</h2>

‎src/assets/examples/leagues.raml‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,27 +53,6 @@ securitySchemes:
5353

5454
securedBy: [ basic, digest_auth, oauth_2_0, custom_scheme_1, custom_scheme_2 ]
5555

56-
documentation:
57-
- title: Section 1
58-
content: Inline content. So it should be a oneliner.
59-
- title: Section 2
60-
content: |
61-
Multiline content. There should be multiple lines in this content.
62-
Here starts a new line.
63-
And here theres a new one.
64-
- title: Section 3 - Only a title. No description should be displayed.
65-
content: " "
66-
- title: Section 4
67-
content: |
68-
Not only will this section display multiline content, but also it will have markdown. Lets see how that works.
69-
<h> Here we have a line surrounded by h <h>
70-
<b> Now with b <b>
71-
* Some
72-
* items
73-
* in
74-
* a
75-
* list
76-
7756
/teams:
7857
displayName: Teams
7958
description: |

0 commit comments

Comments
 (0)