Skip to content

Commit 5a441ac

Browse files
jcenturionjcenturion
committed
Fix collapse/expand with resource documentation
1 parent f4c0f99 commit 5a441ac

File tree

5 files changed

+114
-134
lines changed

5 files changed

+114
-134
lines changed

‎dist/scripts/api-console.js‎

Lines changed: 57 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -813,36 +813,13 @@
813813
}).length > 0;
814814
};
815815

816-
$scope.collapseDocumentation = function ($event) {
817-
var $this = jQuery($event.currentTarget);
818-
819-
if ($this.hasClass('raml-console-resources-expanded')) {
820-
$this.text('expand all');
821-
$this.removeClass('raml-console-resources-expanded');
822-
jQuery('#raml-console-documentation-container').find('ol.raml-console-resource-list').velocity('slideUp', {
823-
duration: 200
824-
});
825-
} else {
826-
$this.text('collapse all');
827-
$this.addClass('raml-console-resources-expanded');
828-
jQuery('#raml-console-documentation-container').find('ol.raml-console-resource-list').velocity('slideDown', {
829-
duration: 200
830-
});
831-
}
832-
833-
jQuery('#raml-console-documentation-container').find('button.raml-console-resource-root-toggle').toggleClass('raml-console-is-active');
834-
};
835-
836816
$scope.generateDocId = function (path) {
837817
return jQuery.trim(path.toString().replace(/\W/g, ' ')).replace(/\s+/g, '_').toLowerCase();
838818
};
839819

840-
$scope.showSection = function ($event, key, section) {
841-
var $container = jQuery($event.currentTarget).closest('.raml-console-documentation');
842-
jQuery('.raml-console-documentation').removeClass('raml-console-documentation-active');
820+
$scope.toggleSection = function ($event, key, section) {
843821
$scope.selectedDocumentSection = key;
844-
$container.toggleClass('raml-console-documentation-active');
845-
$scope.documentationEnabled = true;
822+
$scope.documentationEnabled = !$scope.documentationEnabled;
846823
$location.hash($scope.generateDocId(section));
847824
};
848825

@@ -1644,7 +1621,7 @@
16441621
controller: function($scope, $window, $attrs) {
16451622
$scope.proxy = $window.RAML.Settings.proxy;
16461623
$scope.disableTitle = false;
1647-
$scope.collapsed = false;
1624+
$scope.resourcesCollapsed = false;
16481625

16491626
if ($attrs.hasOwnProperty('singleView')) {
16501627
$scope.singleView = true;
@@ -1662,8 +1639,12 @@
16621639
$scope.disableTitle = true;
16631640
}
16641641

1665-
if ($attrs.hasOwnProperty('collapsed')) {
1666-
$scope.collapsed = true;
1642+
if ($attrs.hasOwnProperty('resourcesCollapsed')) {
1643+
$scope.resourcesCollapsed = true;
1644+
}
1645+
1646+
if ($attrs.hasOwnProperty('documentationCollapsed')) {
1647+
$scope.documentationCollapsed = true;
16671648
}
16681649

16691650
if ($scope.src) {
@@ -1674,7 +1655,7 @@
16741655
$window.RAML.Settings.disableProxy = status;
16751656
};
16761657

1677-
$scope.toggle = function ($event, index) {
1658+
$scope.toggle = function ($event, index, collection, flagKey) {
16781659
var $this = jQuery($event.currentTarget);
16791660
var $section = $this
16801661
.closest('.raml-console-resource-list-item')
@@ -1690,40 +1671,43 @@
16901671
});
16911672
}
16921673

1693-
$scope.items[index] = !$scope.items[index];
1674+
collection[index] = !collection[index];
16941675

1695-
$scope.collapsed = checkItemStatus(false) ? false : $scope.collapsed;
1696-
$scope.collapsed = checkItemStatus(true) ? true : $scope.collapsed;
1676+
$scope[flagKey] = checkItemStatus(false, collection) ? false : $scope[flagKey];
1677+
$scope[flagKey] = checkItemStatus(true, collection) ? true : $scope[flagKey];
16971678

16981679
$section.toggleClass('raml-console-is-collapsed');
16991680
};
17001681

1701-
$scope.collapseAll = function ($event) {
1682+
$scope.collapseAll = function ($event, collection, flagKey) {
17021683
var $this = jQuery($event.currentTarget);
17031684

17041685
if ($this.hasClass('raml-console-resources-expanded')) {
1705-
$scope.collapsed = true;
1706-
jQuery('#raml-console-resources-container').find('ol.raml-console-resource-list').velocity('slideUp', {
1686+
$scope[flagKey] = true;
1687+
jQuery('.raml-console-resources-' + flagKey).find('ol.raml-console-resource-list').velocity('slideUp', {
17071688
duration: 200
17081689
});
17091690
} else {
1710-
$scope.collapsed = false;
1711-
jQuery('#raml-console-resources-container').find('ol.raml-console-resource-list').velocity('slideDown', {
1691+
if (flagKey === 'resourcesCollapsed') {
1692+
jQuery('.raml-console-resource-description').removeClass('ng-hide');
1693+
}
1694+
$scope[flagKey] = false;
1695+
jQuery('.raml-console-resources-' + flagKey).find('ol.raml-console-resource-list').velocity('slideDown', {
17121696
duration: 200
17131697
});
17141698
}
17151699

1716-
toggleCollapsed($scope.collapsed);
1700+
toggleCollapsed($scope[flagKey], collection);
17171701
};
17181702

1719-
function toggleCollapsed (status) {
1720-
for (var i = 0; i < $scope.items.length; i++) {
1721-
$scope.items[i] = $scope.items[i] !== null ? status : $scope.items[i];
1703+
function toggleCollapsed (status, collection) {
1704+
for (var i = 0; i < collection.length; i++) {
1705+
collection[i] = collection[i] !== null ? status : collection[i];
17221706
}
17231707
}
17241708

1725-
function checkItemStatus(status) {
1726-
return $scope.items.filter(function (el) { return el === status || el === null; }).length === $scope.items.length;
1709+
function checkItemStatus(status, collection) {
1710+
return collection.filter(function (el) { return el === status || el === null; }).length === collection.length;
17271711
}
17281712

17291713
$scope.showResourceDescription = function ($event) {
@@ -1741,13 +1725,21 @@
17411725
},
17421726
link: function($scope) {
17431727
ramlParserWrapper.onParseSuccess(function(raml) {
1744-
$scope.raml = RAML.Inspector.create(raml);
1745-
$scope.rawRaml = raml;
1746-
$scope.loaded = true;
1747-
$scope.items = [];
1728+
$scope.raml = RAML.Inspector.create(raml);
1729+
$scope.rawRaml = raml;
1730+
$scope.loaded = true;
1731+
$scope.resourceList = [];
1732+
$scope.documentList = [];
1733+
1734+
for (var i = 0; i < $scope.raml.resourceGroups.length; i++) {
1735+
var resources = $scope.raml.resourceGroups[i];
1736+
$scope.resourceList.push(resources.length > 1 ? false : resources[0].description ? false : null);
1737+
}
17481738

1749-
for (var i = 0 ; i < $scope.raml.resourceGroups.length; i++) {
1750-
$scope.items.push($scope.raml.resourceGroups[i].length > 1 ? false : null);
1739+
if ($scope.raml.documentation) {
1740+
for (var j = 0; j < $scope.raml.documentation.length; j++) {
1741+
$scope.documentList.push(false);
1742+
}
17511743
}
17521744
});
17531745
}
@@ -5343,10 +5335,10 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
53435335

53445336

53455337
$templateCache.put('directives/root-documentation.tpl.html',
5346-
"<ol id=\"raml-console-documentation-container\" ng-if=\"raml.documentation\" class=\"raml-console-resource-list raml-console-resource-list-root raml-console-root-documentation\">\n" +
5338+
"<ol id=\"raml-console-documentation-container\" ng-if=\"raml.documentation\" class=\"raml-console-resource-list raml-console-resource-list-root raml-console-root-documentation raml-console-resources-documentationCollapsed\">\n" +
53475339
" <li class=\"raml-console-resource-list-item raml-console-documentation-header\" ng-if=\"raml.documentation.length > 0\">\n" +
53485340
" <header class=\"raml-console-resource raml-console-resource-root raml-console-clearfix\">\n" +
5349-
" <span ng-if=\"hasDocumentationWithIndex()\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all\" ng-click=\"collapseDocumentation($event)\" ng-class=\"{'raml-console-resources-expanded':!collapsed}\"><span ng-if=\"!collapsed\">collapse</span><span ng-if=\"collapsed\">expand</span> all</span>\n" +
5341+
" <span ng-if=\"hasDocumentationWithIndex()\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all\" ng-click=\"collapseAll($event, documentList, 'documentationCollapsed')\" ng-class=\"{'raml-console-resources-expanded':!documentationCollapsed}\"><span ng-if=\"!documentationCollapsed\">collapse</span><span ng-if=\"documentationCollapsed\">expand</span> all</span>\n" +
53505342
" <div class=\"raml-console-resource-path-container\">\n" +
53515343
" <h2 class=\"raml-console-resource-section-title\">\n" +
53525344
" <span class=\"raml-console-resource-path-active\">Documentation</span>\n" +
@@ -5355,13 +5347,13 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
53555347
" </header>\n" +
53565348
" </li>\n" +
53575349
"\n" +
5358-
" <li id=\"{{generateDocId(doc.title)}}\" class=\"raml-console-resource-list-item raml-console-documentation\" ng-repeat=\"doc in raml.documentation\">\n" +
5350+
" <li id=\"{{generateDocId(doc.title)}}\" class=\"raml-console-resource-list-item raml-console-documentation\" ng-repeat=\"doc in raml.documentation\" ng-class=\"{'raml-console-documentation-active':documentationEnabled}\">\n" +
53595351
" <div ng-init=\"content = getMarkdownHeaders(doc.content)\">\n" +
53605352
" <div class=\"raml-console-resource raml-console-clearfix raml-console-document-header\">\n" +
5361-
" <div class=\"raml-console-resource-path-container\" style=\"padding-top: 11px;\">\n" +
5353+
" <div class=\"raml-console-resource-path-container\" style=\"padding-top: 11px;\" ng-init=\"index=$index\">\n" +
53625354
" <h3 class=\"raml-console-resource-heading\">\n" +
5363-
" <button class=\"raml-console-resource-root-toggle\" ng-if=\"content\" ng-click=\"toggle($event)\" ng-class=\"{'raml-console-is-active': collapsed}\"></button>\n" +
5364-
" <span class=\"raml-console-resource-path-active raml-console-document-heading\" ng-click=\"showSection($event, 'all', doc.title)\">{{doc.title}}</span>\n" +
5355+
" <button class=\"raml-console-resource-root-toggle\" ng-if=\"content\" ng-click=\"toggle($event, index, documentList, 'documentationCollapsed')\" ng-class=\"{'raml-console-is-active': documentList[index]}\"></button>\n" +
5356+
" <span class=\"raml-console-resource-path-active raml-console-document-heading\" ng-click=\"toggleSection($event, 'all', doc.title)\">{{doc.title}}</span>\n" +
53655357
" </h3>\n" +
53665358
" <select ng-if=\"content.length > 0\" ng-model=\"selectedSection\" ng-if=\"documentationEnabled\" class=\"raml-console-document-section-selector\" ng-change=\"sectionChange(selectedSection)\">\n" +
53675359
" <option value=\"all\">-- choose a section --</option>\n" +
@@ -5379,13 +5371,13 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
53795371
" </div>\n" +
53805372
" </div>\n" +
53815373
"\n" +
5382-
" <ol class=\"raml-console-resource-list raml-console-documentation-contents\" ng-if=\"content\" ng-class=\"{'raml-console-is-collapsed': collapsed}\">\n" +
5374+
" <ol class=\"raml-console-resource-list raml-console-documentation-contents\" ng-if=\"content\" ng-class=\"{'raml-console-is-collapsed': documentationCollapsed}\">\n" +
53835375
" <li ng-repeat=\"header in content\" class=\"raml-console-resource-list-item\">\n" +
53845376
" <div class=\"raml-console-resource raml-console-clearfix raml-console-documentation-clearfix\">\n" +
53855377
" <div class=\"raml-console-resource-path-container raml-console-documentation-path-container\">\n" +
53865378
" <h3 class=\"raml-console-resource-heading raml-console-documentation-heading raml-console-md-heading-{{header.heading}}\">\n" +
53875379
" <div class=\"raml-console-resource-path-active\">\n" +
5388-
" <div class=\"raml-consoledocumentation-title raml-console-document-heading\" ng-click=\"showSection($event, header.value, doc.title)\">{{header.label}}</div>\n" +
5380+
" <div class=\"raml-consoledocumentation-title raml-console-document-heading\" ng-click=\"toggleSection($event, header.value, doc.title)\">{{header.label}}</div>\n" +
53895381
" </div>\n" +
53905382
" </h3>\n" +
53915383
" </div>\n" +
@@ -5615,16 +5607,16 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56155607
"\n" +
56165608
" <root-documentation></root-documentation>\n" +
56175609
"\n" +
5618-
" <ol ng-class=\"{'raml-console-resources-container-no-title': disableTitle, 'raml-console-resources-container': !disableTitle}\" id=\"raml-console-resources-container\" class=\"raml-console-resource-list raml-console-resource-list-root\">\n" +
5610+
" <ol ng-class=\"{'raml-console-resources-container-no-title': disableTitle, 'raml-console-resources-container': !disableTitle}\" id=\"raml-console-resources-container\" class=\"raml-console-resource-list raml-console-resource-list-root raml-console-resources-resourcesCollapsed\">\n" +
56195611
" <li id=\"raml_documentation\" class=\"raml-console-resource-list-item raml-console-documentation-header\">\n" +
56205612
" <div ng-if=\"proxy\" align=\"right\" class=\"raml-console-resource-proxy\">\n" +
56215613
" <label for=\"raml-console-api-behind-firewall\">API is behind a firewall <a href=\"http://www.mulesoft.org/documentation/display/current/Accessing+Your+API+Behind+a+Firewall\" target=\"_blank\">(?)</a></label>\n" +
56225614
" <input id=\"raml-console-api-behind-firewall\" type=\"checkbox\" ng-model=\"disableProxy\" ng-change=\"updateProxyConfig(disableProxy)\">\n" +
56235615
" </div>\n" +
56245616
" <header class=\"raml-console-resource raml-console-resource-root raml-console-clearfix\">\n" +
5625-
" <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" +
5626-
" <span ng-if=\"!collapsed\">collapse</span>\n" +
5627-
" <span ng-if=\"collapsed\">expand</span> all\n" +
5617+
" <span ng-if=\"hasResourcesWithChilds()\" class=\"raml-console-flag raml-console-resource-heading-flag raml-console-toggle-all\" ng-click=\"collapseAll($event, resourceList, 'resourcesCollapsed')\" ng-class=\"{'raml-console-resources-expanded':!resourcesCollapsed}\">\n" +
5618+
" <span ng-if=\"!resourcesCollapsed\">collapse</span>\n" +
5619+
" <span ng-if=\"resourcesCollapsed\">expand</span> all\n" +
56285620
" </span>\n" +
56295621
"\n" +
56305622
" <div class=\"raml-console-resource-path-container\">\n" +
@@ -5639,12 +5631,10 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56395631
" <li id=\"{{generateId(resource.pathSegments)}}\" class=\"raml-console-resource-list-item\" ng-repeat=\"resourceGroup in raml.resourceGroups\">\n" +
56405632
" <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" +
56415633
" <div class=\"raml-console-resource-path-container\" ng-init=\"index=$index\">\n" +
5642-
" <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" +
5634+
" <button class=\"raml-console-resource-root-toggle\" ng-class=\"{'raml-console-is-active': resourceList[$index]}\" ng-if=\"resourceGroup.length > 1\" ng-click=\"toggle($event, index, resourceList, 'resourcesCollapsed')\"></button>\n" +
56435635
"\n" +
56445636
" <h2 class=\"raml-console-resource-heading raml-console-resource-heading-large\">\n" +
5645-
" <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" +
5646-
"\n" +
5647-
" <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" +
5637+
" <a class=\"raml-console-resource-path-active\" ng-class=\"{'raml-console-resource-heading-hover':resourceGroup.length > 1}\" ng-repeat='segment in resource.pathSegments' ng-click=\"toggle($event, index, resourceList, 'resourcesCollapsed')\">{{segment.toString()}}</a>\n" +
56485638
" </h2>\n" +
56495639
"\n" +
56505640
" <resource-type></resource-type>\n" +
@@ -5658,9 +5648,9 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
56585648
" <resource-panel></resource-panel>\n" +
56595649
"\n" +
56605650
" <!-- Child Resources -->\n" +
5661-
" <ol class=\"raml-console-resource-list\" ng-class=\"{'raml-console-is-collapsed': collapsed}\">\n" +
5651+
" <ol class=\"raml-console-resource-list\" ng-class=\"{'raml-console-is-collapsed': resourcesCollapsed}\">\n" +
56625652
"\n" +
5663-
" <li class=\"raml-console-resource-list-item raml-console-resource-description\" ng-show=\"resourceGroup.length > 1\" ng-if=\"resource.description\">\n" +
5653+
" <li class=\"raml-console-resource-list-item raml-console-resource-description\" ng-if=\"resource.description\">\n" +
56645654
" <div class=\"raml-console-resource-panel-primary-row raml-console-resource-panel-content raml-console-is-active\">\n" +
56655655
" <h3 class=\"raml-console-resource-heading-a\">Description</h3>\n" +
56665656
" <p marked=\"resource.description\" opts=\"markedOptions\"></p>\n" +

‎src/app/directives/root-documentation.js‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -18,36 +18,13 @@
1818
}).length > 0;
1919
};
2020

21-
$scope.collapseDocumentation = function ($event) {
22-
var $this = jQuery($event.currentTarget);
23-
24-
if ($this.hasClass('raml-console-resources-expanded')) {
25-
$this.text('expand all');
26-
$this.removeClass('raml-console-resources-expanded');
27-
jQuery('#raml-console-documentation-container').find('ol.raml-console-resource-list').velocity('slideUp', {
28-
duration: 200
29-
});
30-
} else {
31-
$this.text('collapse all');
32-
$this.addClass('raml-console-resources-expanded');
33-
jQuery('#raml-console-documentation-container').find('ol.raml-console-resource-list').velocity('slideDown', {
34-
duration: 200
35-
});
36-
}
37-
38-
jQuery('#raml-console-documentation-container').find('button.raml-console-resource-root-toggle').toggleClass('raml-console-is-active');
39-
};
40-
4121
$scope.generateDocId = function (path) {
4222
return jQuery.trim(path.toString().replace(/\W/g, ' ')).replace(/\s+/g, '_').toLowerCase();
4323
};
4424

45-
$scope.showSection = function ($event, key, section) {
46-
var $container = jQuery($event.currentTarget).closest('.raml-console-documentation');
47-
jQuery('.raml-console-documentation').removeClass('raml-console-documentation-active');
25+
$scope.toggleSection = function ($event, key, section) {
4826
$scope.selectedDocumentSection = key;
49-
$container.toggleClass('raml-console-documentation-active');
50-
$scope.documentationEnabled = true;
27+
$scope.documentationEnabled = !$scope.documentationEnabled;
5128
$location.hash($scope.generateDocId(section));
5229
};
5330

0 commit comments

Comments
 (0)