Merge pull request #1388 from duckduckgo/brian/cheat-sheet-state

Preserve cheat sheet state and restore it on page load
master
Zaahir Moolla 2015-08-12 22:55:03 -04:00
commit e603952527
1 changed files with 47 additions and 20 deletions

View File

@ -80,44 +80,71 @@ DDH.cheat_sheets.build = function(ops) {
return new Handlebars.SafeString(out); return new Handlebars.SafeString(out);
}); });
var wasShown = false; // keep track whether onShow was run yet
return { return {
onShow: function() { onShow: function() {
// make sure this function is only run once, the first time
// the IA is shown otherwise things will get initialized more than once
if (wasShown) { return; }
// set the flag to true so it doesn't get run again:
wasShown = true;
var $dom = $("#zci-cheat_sheets"), var $dom = $("#zci-cheat_sheets"),
$container = $dom.find(".cheatsheet__container"), $container = $dom.find(".cheatsheet__container"),
$detail = $dom.find(".zci__main--detail"), $detail = $dom.find(".zci__main--detail"),
$section = $dom.find(".cheatsheet__section"), $section = $dom.find(".cheatsheet__section"),
$hideRow = $section.find("tbody tr:nth-child(n+4)"), $hideRow = $section.find("tbody tr:nth-child(n+4)"),
$showhide = $container.find(".cheatsheet__section.showhide"), $showhide = $container.find(".cheatsheet__section.showhide"),
$more_btn = $dom.find(".chomp--link"); $more_btn = $dom.find(".chomp--link"),
isExpanded = false,
// Removes all tr's after the 3rd before masonry fires loadedMasonry = false,
if ($container.hasClass("compressed")) { masonryOps = {
$hideRow.toggleClass("is-hidden");
}
DDG.require('masonry.js', function(){
$container.masonry({
itemSelector: '.cheatsheet__section', itemSelector: '.cheatsheet__section',
columnWidth: 295, columnWidth: 295,
gutter: 30, gutter: 30,
isFitWidth: true isFitWidth: true
}); },
showMoreLess = function() {
// keep track of whether it's expanded or not:
isExpanded = !isExpanded;
// update the querystring param so the state
// persists across page refreshes or if the link
// is shared to someone else:
if (isExpanded) {
DDG.history.set({ iax: 1 });
} else {
DDG.history.clear('iax');
}
$more_btn.click(function() {
$dom.toggleClass("has-chomp-expanded"); $dom.toggleClass("has-chomp-expanded");
$detail.toggleClass("c-base"); $detail.toggleClass("c-base");
$container.toggleClass("compressed"); $container.toggleClass("compressed");
$showhide.toggleClass("is-hidden"); $showhide.toggleClass("is-hidden");
$hideRow.toggleClass("is-hidden"); $hideRow.toggleClass("is-hidden");
$container.masonry({
itemSelector: '.cheatsheet__section', if (window.Masonry) {
columnWidth: 295, $container.masonry(masonryOps);
gutter: 30, }
isFitWidth: true };
});
}); // Removes all tr's after the 3rd before masonry fires
}); if ($container.hasClass("compressed")) {
$hideRow.toggleClass("is-hidden");
}
// if iax=1 is in the querystring, expand
// the cheatsheet automatically when the IA is shown:
if (DDG.history.get('iax')) {
showMoreLess();
}
DDG.require('masonry.js', function(){
$container.masonry(masonryOps);
$more_btn.click(showMoreLess);
});
} }
}; };
}; };