New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable Code folding #1

Merged
merged 2 commits into from Nov 12, 2017
File filter...
Filter file types
Jump to file or symbol
Failed to load files and symbols.
+656 −5
Diff settings

Always

Just for now

Copy path View file
@@ -171,7 +171,10 @@ Syntax highlighting for code is allowed with `highlight.js`. This can be disable

Credit: [yihui, statnmap]

### Sticky list pages
## Code folding
Code folding is enabled by default with `disable_codefolding = false` in parameters of the `config` file. It uses somes javascript libraries of [bootstrap](https://getbootstrap.com/docs/3.3/javascript/). Code folding buttons only appear when there is code in the document rendered from `Rmd` in blogdown. `disable_codefolding` can also be used in each article config header. Similarly, you can define if code blocks are shown or hidden by default using `codefolding_show = "hide"` in the config file or in each article config.

## Sticky list pages

A special kind of posts list is implemented. This allows to show the first article completely and the other articles as a list with summaries. For that, we use the implemented template `list_first_plain_sticky.html` in `partial`. You can use it in two ways:

Copy path View file
@@ -34,6 +34,11 @@ theme = "hugo-statnmap-theme"
# Only for small devices
logolong = "css/images/logo.png"

# Set to true to disable code folding
disable_codefolding = false
# Set to "hide" or "show" all codes by default
codefolding_show = "hide"

disable_mathjax = false # set to true to disable MathJax
MathJaxCDN = "//cdn.bootcss.com"
MathJaxVersion = "2.7.1"
Copy path View file
@@ -27,6 +27,16 @@
[postedOnDate]
other = "Posted on {{ .Count }}"

#
# Code folding
#
[showhide_all_code]
other = "Show/Hide all code"
[show_all_code]
other = "Show All Code"
[hide_all_code]
other = "Hide All Code"

#
# widgets
#
Copy path View file
@@ -28,6 +28,16 @@
[postedOnDate]
other = "posté le {{ .Count }}"

#
# Code folding
#
[showhide_all_code]
other = "Afficher/Cacher codes"
[show_all_code]
other = "Afficher tous codes"
[hide_all_code]
other = "Cacher tous codes"

#
# widgets
#
@@ -9,4 +9,12 @@
{{i18n "articles-comments"}}
</a>
{{end}}
{{ if and (not .Site.Params.disable_codefolding) (not .Params.disable_codefolding) (in (string .Content) "</pre>") }}
<script>
$(document).ready(function () {
window.initializeCodeFolding("show" === {{ if isset .Params "codefolding_show" }}{{ .Params.codefolding_show }}{{ else }}{{ default ("hide") .Site.Params.codefolding_show }}{{ end }});
});
</script>
<script src="{{ "js/codefolding.js" | relURL }}"></script>
{{ end }}
</footer>
@@ -46,4 +46,5 @@ <h1 class="article-title" itemprop="name">
{{ end }}
{{ end }}
</div>
{{ partial "header_maincodefolding" . }}
</header>
@@ -4,7 +4,11 @@

{{ partial "footer_highlightjs" . }}
{{ partial "footer_mathjax" . }}

{{ if not .Site.Params.disable_codefolding }}
<script src="{{ "js/collapse.js" | relURL }}"></script>
<script src="{{ "js/dropdown.js" | relURL }}"></script>
<script src="{{ "js/transition.js" | relURL }}"></script>
{{ end }}
{{ range .Site.Params.custom_js }}
<script src="{{ . | absURL }}"></script>
<script src="{{ . | relURL }}"></script>
{{ end }}
@@ -0,0 +1,12 @@
{{ if and (not .Site.Params.disable_codefolding) (not .Params.disable_codefolding) (in (string .Content) "</pre>") }}
<div id="code-folding-buttons" class="btn-group pull-right">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-_extension-text-contrast="">
<span>{{ i18n "showhide_all_code" }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="min-width: 50px;">
<li><a id="rmd-show-all-code" href="#">{{ i18n "show_all_code" }}</a>
</li><li><a id="rmd-hide-all-code" href="#">{{ i18n "hide_all_code" }}</a></li>
</ul>
</div>
{{ end }}
@@ -0,0 +1,49 @@
<header class="article-header">
<a href="{{ .Permalink }}" lang="{{ .Lang }}">
<h1 class="article-title" itemprop="name">
{{ .Title }}
</h1>
</a>
<div class="article-meta">

{{ if not .Params.nodateline }}
<div class="article-date">
<i class="fa fa-calendar"></i>
<time datetime="{{ .Date }}" itemprop="datePublished">{{ default (i18n "date_format") .Site.Params.date_format | .Date.Format | i18n "postedOnDate" }}</time>
&middot;
{{ .WordCount }}
{{ i18n "words" }}.
&middot;
{{ .ReadingTime }}
{{ i18n "readingtime" }}.
</div>
{{ end }}
{{ if isset .Params "categories" }}
{{ $categoriesLen := len .Params.categories }}
{{ if gt $categoriesLen 0 }}
<div class="article-category">
<i class="fa fa-folder"></i>
{{ range $k, $v := .Params.categories }}
{{ $url := printf "categories/%s" (. | urlize | lower) }}
<a class="article-category-link" href="{{ $url | absLangURL }}">{{ . }}</a>
{{ if lt $k (sub $categoriesLen 1) }}&middot;{{ end }}
{{ end }}
</div>
{{ end }}
{{ end }}

{{ if isset .Params "tags" }}
{{ $tagsLen := len .Params.tags }}
{{ if gt $tagsLen 0 }}
<div class="article-category">
<i class="fa fa-tags"></i>
{{ range $k, $v := .Params.tags }}
{{ $url := printf "tags/%s" (. | urlize | lower) }}
<a class="article-category-link" href="{{ $url | absLangURL }}">{{ . }}</a>
{{ if lt $k (sub $tagsLen 1) }}&middot;{{ end }}
{{ end }}
</div>
{{ end }}
{{ end }}
</div>
</header>
@@ -35,7 +35,7 @@
</a>
</div>
<div class="article-inner">
{{ partial "article_header" . }}
{{ partial "list_article_header" . }}
<div class="article-entry" itemprop="articleBody">
{{ $.Scratch.Set "summary" ((delimit (findRE "(<p.*?>.*?</p>\\s*)+" .Content) "[&hellip;] ") | plainify | truncate (default 200 .Site.Params.summary_length) (default " &hellip;" .Site.Params.text.truncated ) | replaceRE "&amp;" "&" | safeHTML) }}

@@ -16,7 +16,7 @@
</a>
</div>
<div class="article-inner">
{{ partial "article_header" . }}
{{ partial "list_article_header" . }}
<div class="article-entry" itemprop="articleBody">
<!-- <p>
{{ .Description | default .Summary }}
Copy path View file
@@ -1770,6 +1770,61 @@ ol.toc {
color: #38b7ea;
}

/* Code folding */
/* Each code block button */
.article-entry .code-folding-btn { margin-bottom: 4px; }
.article-entry .row {
display: flex;
border-bottom: solid 1px #d7d7d7;
}
.article-entry .collapse { display: none; }
.article-entry .in {
display: block ;
border: solid 1px #d7d7d7;
border-radius: 5px;
}
.article-entry .col-md-12 {
margin: 0 0 0 auto;
}
/* Main show/hide button */
#code-folding-buttons {float: right;}
#code-folding-buttons .pull-right > .dropdown-menu {
right: 0;
left: auto;
}
#code-folding-buttons .btn.btn-default.btn-xs.dropdown-toggle {
float: right;
}
#code-folding-buttons.open > .dropdown-menu {
display: block;
}
#code-folding-buttons .dropdown-menu {
/* position: absolute;*/
top: 100%;
left: 0;
z-index: 1000;
display: none;
/*float: left;*/
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#code-folding-buttons .dropdown-menu li {
padding: 5px;
}
/* End code folding */

.layout-wrap-inner.list-categories ul {
margin-left: 15px;
list-style: none;
Copy path View file
@@ -0,0 +1,58 @@
window.initializeCodeFolding = function(show) {

// handlers for show-all and hide all
$("#rmd-show-all-code").click(function() {
$('div.r-code-collapse').each(function() {
$(this).collapse('show');
});
});
$("#rmd-hide-all-code").click(function() {
$('div.r-code-collapse').each(function() {
$(this).collapse('hide');
});
});

// index for unique code element ids
var currentIndex = 1;

// select all R code blocks
var rCodeBlocks = $('pre.sourceCode, pre.r, pre.python, pre.bash, pre.sql, pre.cpp, pre.stan, pre.js, pre.css, pre.html, pre.yaml');
rCodeBlocks.each(function() {

// create a collapsable div to wrap the code in
var div = $('<div class="collapse r-code-collapse"></div>');
if (show)
div.addClass('in');
var id = 'rcode-643E0F36' + currentIndex++;
div.attr('id', id);
$(this).before(div);
$(this).detach().appendTo(div);

// add a show code button right above
var showCodeText = $('<span>' + (show ? 'Hide' : 'Code') + '</span>');
var showCodeButton = $('<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>');
showCodeButton.append(showCodeText);
showCodeButton
.attr('data-toggle', 'collapse')
.attr('data-target', '#' + id)
.attr('aria-expanded', show)
.attr('aria-controls', id);

var buttonRow = $('<div class="row"></div>');
var buttonCol = $('<div class="col-md-12"></div>');

buttonCol.append(showCodeButton);
buttonRow.append(buttonCol);

div.before(buttonRow);

// update state of button on show/hide
div.on('hidden.bs.collapse', function () {
showCodeText.text('Code');
});
div.on('show.bs.collapse', function () {
showCodeText.text('Hide');
});
});

}
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.