mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-01-18 10:50:24 +00:00
feat: implemented functionnalities on Markdown images: 1. featherlight for full size view in popup 2. Height/Width customizables 3. Possibility to add css classes
This commit is contained in:
parent
0495785eda
commit
2b88eae74b
8 changed files with 76 additions and 16 deletions
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
|
||||
<div id="navigation">
|
||||
{{ with .Params.prev }}<a class="nav nav-prev" href="{{ . }}"> <i class="fa fa-chevron-left"></i></a>{{ end }}
|
||||
{{ with .Params.prev }}<a class="nav nav-prev" href="{{ . }}"> <i class="fa fa-chevron-left"></i></a>{{ end }}
|
||||
{{ with .Params.next }}<a class="nav nav-next" href="{{ . }}" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>{{ end }}
|
||||
</div>
|
||||
|
||||
|
@ -24,5 +24,6 @@
|
|||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script src="/js/modernizr.custom.71422.js"></script>
|
||||
<script src="/js/learn.js"></script>
|
||||
<script src="/js/hugo-learn.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -10,19 +10,14 @@
|
|||
{{ .Scratch.Add "title" "" }}{{ if isset .Site.Data.titles .Title }}{{ .Scratch.Set "title" (index .Site.Data.titles .Title).title }}{{ else }}{{ .Scratch.Set "title" .Title}}{{end}}
|
||||
<title>Hugo - {{ .Scratch.Get "title" }}</title>
|
||||
<link href="/css/nucleus.css" rel="stylesheet">
|
||||
<link href="/css/theme.css" rel="stylesheet">
|
||||
<link href="/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="/css/hybrid.css" rel="stylesheet">
|
||||
<link href="/css/featherlight.min.css" rel="stylesheet">
|
||||
<link href="/css/theme.css" rel="stylesheet">
|
||||
<style type="text/css">:root #header + #content > #left > #rlblock_left
|
||||
{display:none !important;}</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!------->
|
||||
|
||||
<body class="searchbox-hidden " data-url="/">
|
||||
<body class="" data-url="/">
|
||||
|
||||
{{ partial "menu.html" . }}
|
||||
|
||||
|
|
|
@ -2,11 +2,13 @@
|
|||
<div id="header-wrapper">
|
||||
<div id="header">
|
||||
{{ partial "logo.html" . }}
|
||||
{{ if .Site.Params.search }}
|
||||
<div class="searchbox">
|
||||
<label for="search-by"><i class="fa fa-search"></i></label>
|
||||
<input id="search-by" type="text" placeholder="Search Documentation" data-search-input="/search.json/query">
|
||||
<input id="search-by" type="text" placeholder="Search Documentation" data-search-input="/lunr.json/query">
|
||||
<span data-search-clear=""><i class="fa fa-close"></i></span>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
1
layouts/shortcodes/warn.html
Normal file
1
layouts/shortcodes/warn.html
Normal file
|
@ -0,0 +1 @@
|
|||
<div class="notices warning">{{ .Inner }}</div>
|
8
static/css/featherlight.min.css
vendored
Normal file
8
static/css/featherlight.min.css
vendored
Normal file
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* Featherlight - ultra slim jQuery lightbox
|
||||
* Version 1.2.3 - http://noelboss.github.io/featherlight/
|
||||
*
|
||||
* Copyright 2015, Noël Raoul Bossart (http://www.noelboss.com)
|
||||
* MIT Licensed.
|
||||
**/
|
||||
@media all{.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-.25em}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;min-width:30%;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0}.featherlight iframe{border:0}}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:10px;margin-right:10px;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}
|
|
@ -1,3 +0,0 @@
|
|||
<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
|
||||
</svg>
|
Before Width: | Height: | Size: 519 B |
56
static/js/hugo-learn.js
Normal file
56
static/js/hugo-learn.js
Normal file
|
@ -0,0 +1,56 @@
|
|||
// Get Parameters from some url
|
||||
var getUrlParameter = function getUrlParameter(sPageURL) {
|
||||
var url = sPageURL.split('?');
|
||||
var obj = {};
|
||||
if (url.length == 2) {
|
||||
var sURLVariables = url[1].split('&'),
|
||||
sParameterName,
|
||||
i;
|
||||
for (i = 0; i < sURLVariables.length; i++) {
|
||||
sParameterName = sURLVariables[i].split('=');
|
||||
obj[sParameterName[0]] = sParameterName[1];
|
||||
}
|
||||
return obj;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
// Execute actions on images generated from Markdown pages
|
||||
var images = $("div#body-inner img");
|
||||
// Wrap image inside a featherlight (to get a full size view in a popup)
|
||||
images.wrap(function(){
|
||||
var image =$(this);
|
||||
return "<a href='" + image[0].src + "' data-featherlight='image'></a>";
|
||||
});
|
||||
|
||||
// Change styles, depending on parameters set to the image
|
||||
images.each(function(index){
|
||||
var image = $(this)
|
||||
var o = getUrlParameter(image[0].src);
|
||||
if (typeof o !== "undefined") {
|
||||
var h = o["height"];
|
||||
var w = o["width"];
|
||||
var c = o["classes"];
|
||||
image.css("width", function() {
|
||||
if (typeof w !== "undefined") {
|
||||
return w;
|
||||
} else {
|
||||
return "auto";
|
||||
}
|
||||
});
|
||||
image.css("height", function() {
|
||||
if (typeof h !== "undefined") {
|
||||
return h;
|
||||
} else {
|
||||
return "auto";
|
||||
}
|
||||
});
|
||||
if (typeof c !== "undefined") {
|
||||
var classes = c.split(',');
|
||||
for (i = 0; i < classes.length; i++) {
|
||||
image.addClass(classes[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
|
@ -127,7 +127,7 @@ jQuery(document).ready(function() {
|
|||
var input = jQuery(this),
|
||||
value = input.val(),
|
||||
items = jQuery('[data-nav-id]');
|
||||
|
||||
console.log(input, value, items);
|
||||
items.removeClass('search-match');
|
||||
if (!value.length) {
|
||||
$('ul.topics').removeClass('searched');
|
||||
|
@ -207,7 +207,7 @@ jQuery(document).ready(function() {
|
|||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// allow keyboard control for prev/next links
|
||||
jQuery(function() {
|
||||
jQuery('.nav-prev').click(function(){
|
||||
|
@ -228,7 +228,7 @@ jQuery(document).ready(function() {
|
|||
if(e.which == '39') {
|
||||
jQuery('.nav.nav-next').click();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue