Merge pull request #1388 from duckduckgo/brian/cheat-sheet-state
Preserve cheat sheet state and restore it on page loadmaster
commit
e603952527
|
@ -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);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue