Expanded new aw-accordion directive to update local storage with the active panel. When user navigates away from a page and returns the accordions are restored.

This commit is contained in:
Chris Houseknecht 2014-03-26 00:32:54 -04:00
parent ceba67fcf0
commit b2f0c1214f
2 changed files with 59 additions and 8 deletions

View File

@ -632,11 +632,62 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
}])
.directive('awAccordion', function() {
return function(scope, element) {
.directive('awAccordion', ['Empty', '$location', 'Store', function(Empty, $location, Store) {
return function(scope, element, attrs) {
var active,
list = Store('accordions'),
id, base;
if (!Empty(attrs.openFirst)) {
active = 0;
}
else {
// Look in storage for last active panel
if (list) {
id = $(element).attr('id');
base = ($location.path().replace(/^\//, '').split('/')[0]);
list.every(function(elem) {
if (elem.base === base && elem.id === id) {
active = elem.active;
return false;
}
return true;
});
}
active = (Empty(active)) ? 0 : active;
}
$(element).accordion({
collapsible: true,
heightStyle: "content"
heightStyle: "content",
active: active,
activate: function() {
// When a panel is activated update storage
var active = $(this).accordion('option', 'active'),
id = $(this).attr('id'),
base = ($location.path().replace(/^\//, '').split('/')[0]),
list = Store('accordions'),
found = false;
if (!list) {
list = [];
}
list.every(function(elem) {
if (elem.base === base && elem.id === id) {
elem.active = active;
found = true;
return false;
}
return true;
});
if (found === false) {
list.push({
base: base,
id: id,
active: active
});
}
Store('accordions', list);
}
});
};
});
}]);

View File

@ -6,25 +6,25 @@
<div class="row">
<div class="col-md-12">
<div id="jobs-page ">
<div aw-accordion>
<div id="job-page-accordion-0" aw-accordion>
<h3>Completed</h3>
<div class="job-list" id="completed-jobs-container">
<div id="completed-jobs"></div>
</div>
</div>
<div aw-accordion>
<div id="job-page-accordion-1" aw-accordion>
<h3>Active</h3>
<div class="job-list" id="active-jobs-container">
<div id="active-jobs"></div>
</div>
</div>
<div aw-accordion>
<div id="job-page-accordion-2" aw-accordion>
<h3>Queued</h3>
<div class="job-list" id="queued-jobs-container">
<div id="queued-jobs"></div>
</div>
</div>
<div aw-accordion>
<div id="job-page-accordion-3" aw-accordion>
<h3>Scheduled</h3>
<div class="job-list" id="scheduled-jobs-container">
<div id="scheduled-jobs"></div>