2015-04-04 10:35:33 -07:00
|
|
|
|
DDH.cheat_sheets = DDH.cheat_sheets || {};
|
|
|
|
|
|
|
|
|
|
DDH.cheat_sheets.build = function(ops) {
|
|
|
|
|
|
2015-08-08 18:03:23 -07:00
|
|
|
|
Spice.registerHelper('cheatsheets_ordered', function(sections, section_order, template_type, options) {
|
2015-05-25 19:29:50 -07:00
|
|
|
|
var result = "";
|
2015-08-09 23:03:20 -07:00
|
|
|
|
var template = {
|
|
|
|
|
type: template_type,
|
2015-08-13 13:11:13 -07:00
|
|
|
|
path: template_type ? 'DDH.cheat_sheets.' + template_type : 'DDH.cheat_sheets.keyboard'
|
2015-08-09 23:03:20 -07:00
|
|
|
|
};
|
2015-08-08 18:03:23 -07:00
|
|
|
|
|
2015-04-04 10:35:33 -07:00
|
|
|
|
$.each(section_order, function(i, section) {
|
|
|
|
|
if (sections[section]){
|
2015-05-25 19:29:50 -07:00
|
|
|
|
|
|
|
|
|
var showhide = true;
|
|
|
|
|
|
|
|
|
|
if (i === 0 ){
|
|
|
|
|
showhide = false;
|
|
|
|
|
} else if ( i === 1 && !is_mobile ){
|
|
|
|
|
showhide = false;
|
|
|
|
|
}
|
2015-11-19 13:59:24 -08:00
|
|
|
|
|
2015-11-13 22:01:17 -08:00
|
|
|
|
//replaces */ and /* to */ and /* fixing issue1646
|
2015-11-13 21:47:10 -08:00
|
|
|
|
var val;
|
2015-11-19 13:59:24 -08:00
|
|
|
|
for (var j = 0; j < sections[section].length; j++){
|
|
|
|
|
if (sections[section][j].hasOwnProperty(val)){
|
|
|
|
|
sections[section][j].val.replace(/*//g, "*/")
|
|
|
|
|
.replace(//*/g, "/*");
|
|
|
|
|
}
|
2015-11-13 21:47:10 -08:00
|
|
|
|
}
|
2015-11-19 13:59:24 -08:00
|
|
|
|
|
2015-08-08 18:03:23 -07:00
|
|
|
|
result += options.fn({ name: section, items: sections[section], template: template, showhide: showhide });
|
2015-04-04 10:35:33 -07:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return result;
|
|
|
|
|
});
|
|
|
|
|
|
2015-05-22 15:35:33 -07:00
|
|
|
|
var re_brackets = /(?:\[|\{|\}|\])/, // search for [, {, }, or }
|
|
|
|
|
re_whitespace = /\s+/, // search for spaces
|
|
|
|
|
re_codeblock = /<code>(.+?)<\/code>/g; // search for <code></code>
|
2015-05-14 10:43:33 -07:00
|
|
|
|
|
2015-08-10 17:59:24 -07:00
|
|
|
|
Spice.registerHelper('cheatsheets_codeblock', function(string, className, options) {
|
2015-05-14 10:43:33 -07:00
|
|
|
|
|
2015-05-14 13:46:02 -07:00
|
|
|
|
var out;
|
2015-08-10 17:59:24 -07:00
|
|
|
|
var codeClass = typeof className === "string" ? className : "bg-clr--white";
|
2015-10-05 11:07:53 -07:00
|
|
|
|
|
2015-06-01 17:20:16 -07:00
|
|
|
|
// replace escaped slashes and brackets
|
2015-08-29 06:34:29 -07:00
|
|
|
|
string = string.replace(/\</g, '<')
|
|
|
|
|
.replace(/\>/g, '>')
|
|
|
|
|
.replace(/\\\\/, "<bks>")
|
2015-06-01 17:20:16 -07:00
|
|
|
|
.replace(/\\\[/g, "<lbr>")
|
|
|
|
|
.replace(/\\\{/g, "<lcbr>")
|
|
|
|
|
.replace(/\\\]/g, "<rbr>")
|
|
|
|
|
.replace(/\\\}/g, "<rcbr>");
|
|
|
|
|
|
2015-05-21 14:02:39 -07:00
|
|
|
|
// no spaces
|
|
|
|
|
// OR
|
2015-06-01 17:20:16 -07:00
|
|
|
|
// spaces and no un-escaped brackets
|
2015-05-21 14:02:39 -07:00
|
|
|
|
// e.g "?()", ":sp filename"
|
|
|
|
|
// --> wrap whole sting in <code></code>
|
2015-05-22 15:35:33 -07:00
|
|
|
|
if ( !re_whitespace.test(string) || !re_brackets.test(string) ){
|
2015-08-10 17:59:24 -07:00
|
|
|
|
out = "<code class='"+codeClass+"'>" + string + "</code>";
|
2015-05-14 13:46:02 -07:00
|
|
|
|
|
2015-05-21 14:02:39 -07:00
|
|
|
|
// spaces
|
|
|
|
|
// AND
|
2015-06-01 17:20:16 -07:00
|
|
|
|
// un-escaped brackets
|
2015-05-21 14:02:39 -07:00
|
|
|
|
// e.g "[Ctrl] [B]"
|
|
|
|
|
// --> replace [] & {} with <code></code>
|
2015-05-14 13:46:02 -07:00
|
|
|
|
} else {
|
2015-06-01 17:20:16 -07:00
|
|
|
|
|
|
|
|
|
// replace unescaped brackets
|
2015-05-21 14:02:39 -07:00
|
|
|
|
out = string
|
2015-08-10 17:59:24 -07:00
|
|
|
|
.replace(/\[|\{/g, "<code class='"+codeClass+"'>")
|
2015-06-01 17:20:16 -07:00
|
|
|
|
.replace(/\]|\}/g, "</code>");
|
|
|
|
|
}
|
2015-05-25 14:22:58 -07:00
|
|
|
|
|
2015-06-01 17:20:16 -07:00
|
|
|
|
out = out
|
2015-05-25 19:29:50 -07:00
|
|
|
|
// re-replace escaped slash
|
2015-06-01 17:20:16 -07:00
|
|
|
|
.replace(/<bks>/g, "\\")
|
2015-05-25 19:29:50 -07:00
|
|
|
|
// re-replace escaped brackets
|
2015-06-01 17:20:16 -07:00
|
|
|
|
.replace(/<lbr>/g, "[")
|
2015-06-06 16:40:02 -07:00
|
|
|
|
.replace(/<lcbr>/g, "{")
|
2015-06-01 17:20:16 -07:00
|
|
|
|
.replace(/<rbr>/g, "]")
|
2015-06-06 16:40:02 -07:00
|
|
|
|
.replace(/<rcbr>/g, "}");
|
2015-05-21 14:02:39 -07:00
|
|
|
|
|
2015-08-10 17:59:24 -07:00
|
|
|
|
out = out.replace(re_codeblock, function esc_codeblock (match, p1, offset, string, codeClass){
|
2015-05-21 14:02:39 -07:00
|
|
|
|
var escaped = Handlebars.Utils.escapeExpression(p1);
|
2015-08-10 17:59:24 -07:00
|
|
|
|
return "<code class='"+codeClass+">" + escaped + "</code>";
|
2015-05-21 14:02:39 -07:00
|
|
|
|
});
|
|
|
|
|
|
2015-05-14 13:46:02 -07:00
|
|
|
|
return new Handlebars.SafeString(out);
|
2015-05-14 10:43:33 -07:00
|
|
|
|
});
|
|
|
|
|
|
2015-08-11 19:28:37 -07:00
|
|
|
|
var wasShown = false; // keep track whether onShow was run yet
|
|
|
|
|
|
2015-04-04 10:35:33 -07:00
|
|
|
|
return {
|
2015-05-25 19:29:50 -07:00
|
|
|
|
onShow: function() {
|
2015-08-11 19:28:37 -07:00
|
|
|
|
// 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;
|
|
|
|
|
|
2015-04-04 10:35:33 -07:00
|
|
|
|
var $dom = $("#zci-cheat_sheets"),
|
|
|
|
|
$container = $dom.find(".cheatsheet__container"),
|
2015-05-26 12:29:50 -07:00
|
|
|
|
$detail = $dom.find(".zci__main--detail"),
|
2015-07-14 14:07:47 -07:00
|
|
|
|
$section = $dom.find(".cheatsheet__section"),
|
2015-08-13 13:22:33 -07:00
|
|
|
|
$hideRow = $section.find("tbody tr:nth-child(n+4), ul li:nth-child(n+4)"),
|
2015-05-26 12:29:50 -07:00
|
|
|
|
$showhide = $container.find(".cheatsheet__section.showhide"),
|
2015-08-11 19:15:54 -07:00
|
|
|
|
$more_btn = $dom.find(".chomp--link"),
|
|
|
|
|
isExpanded = false,
|
|
|
|
|
loadedMasonry = false,
|
|
|
|
|
masonryOps = {
|
2015-05-25 19:29:50 -07:00
|
|
|
|
itemSelector: '.cheatsheet__section',
|
2015-05-27 14:09:27 -07:00
|
|
|
|
columnWidth: 295,
|
|
|
|
|
gutter: 30,
|
|
|
|
|
isFitWidth: true
|
2015-08-11 19:15:54 -07:00
|
|
|
|
},
|
|
|
|
|
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');
|
|
|
|
|
}
|
2015-05-17 20:04:07 -07:00
|
|
|
|
|
|
|
|
|
$dom.toggleClass("has-chomp-expanded");
|
2015-05-26 12:29:50 -07:00
|
|
|
|
$detail.toggleClass("c-base");
|
2015-05-17 20:04:07 -07:00
|
|
|
|
$container.toggleClass("compressed");
|
2015-05-25 19:29:50 -07:00
|
|
|
|
$showhide.toggleClass("is-hidden");
|
2015-07-14 14:07:47 -07:00
|
|
|
|
$hideRow.toggleClass("is-hidden");
|
2015-08-11 19:15:54 -07:00
|
|
|
|
|
|
|
|
|
if (window.Masonry) {
|
|
|
|
|
$container.masonry(masonryOps);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
|
});
|
2015-04-04 10:35:33 -07:00
|
|
|
|
}
|
|
|
|
|
};
|
2015-05-25 19:53:45 -07:00
|
|
|
|
};
|