source: tanzpartie-hugo/themes/bilberry-hugo-theme/assets/js/theme.js

Last change on this file was 16971, checked in by Henrik Bettermann, 3 years ago
File size: 7.4 KB
Line 
1// dependencies
2require('jquery');
3require('flexslider');
4require('algoliasearch/dist/algoliasearch.jquery');
5require('autocomplete.js/dist/autocomplete.jquery');
6require('tooltipster');
7require('magnific-popup');
8
9let ClipboardJs = require('clipboard')
10let hljs = require('highlight.js');
11let moment = require('moment');
12require("moment/min/locales.min");
13
14// Add ClipboardJs to enable copy button functionality
15new ClipboardJs('.copy-button', {
16    target: function(trigger) {
17        return trigger.previousElementSibling;
18    }
19}).on('success', function(e) {
20    e.clearSelection()
21});
22
23$(document).ready(function () {
24
25    // Add copy button and tooltip to each code-block
26    $('pre').each(function () {
27        $(this).append('<button class="copy-button tooltip" title="Copied!"><i class="far fa-fw fa-copy"></i></button>')
28    });
29
30    $('.tooltip').tooltipster({
31        animationDuration: 1,
32        theme: 'tooltipster-light',
33        side: 'bottom',
34        delay: [200, 0],
35        distance: 0,
36        trigger: 'custom',
37        triggerOpen: {
38            click: true,
39            tap: true
40        },
41        triggerClose: {
42            click: true,
43            tap: true,
44            mouseleave: true
45        }
46    });
47
48    // Nav-Toggle
49    $(".toggler").click(function () {
50        $("nav").slideToggle();
51        $("#search").autocomplete("val", "");
52    });
53
54    // Commento support to block search focus when hitting the S key
55    blockSearchFocusCommento = false;
56
57    $('#commento').focusin(function() {
58        blockSearchFocusCommento = true;
59    });
60
61    $('#commento').focusout(function() {
62        blockSearchFocusCommento = false;
63    });
64
65    // Utterances support to block search focus when hitting the S key
66    blockSearchFocusUtterances = false;
67
68    $('#utterances').focusin(function() {
69        blockSearchFocusUtterances = true;
70    });
71
72    $('#utterances').focusout(function() {
73        blockSearchFocusUtterances = false;
74    });
75
76    // Giscus support to block search focus when hitting the S key
77    blockSearchFocusGiscus = false;
78
79    $('#giscus').focusin(function() {
80        blockSearchFocusGiscus = true;
81    });
82
83    $('#giscus').focusout(function() {
84        blockSearchFocusGiscus = false;
85    });
86
87    // Keyboard-Support
88    $(document).keyup(function (e) {
89        if (e.code === 'Escape') {
90            if (!$("nav").hasClass('permanentTopNav')) {
91                $("nav").slideUp();
92            }
93            $("#search").autocomplete("val", "").blur();
94        } else if (e.code === 'KeyS' && (!blockSearchFocusCommento
95            || !blockSearchFocusUtterances || !blockSearchFocusGiscus)) {
96
97            if (!$("nav").hasClass('permanentTopNav')) {
98                $("nav").slideDown();
99            }
100            $("#search").focus();
101        }
102    })
103
104    // Flexslider
105    $('.flexslider').flexslider({
106        animation: "slide",
107        prevText: "",
108        nextText: "",
109        pauseOnHover: true,
110    });
111
112    // Magnific Popup for images within articles to zoom them
113    // Rendered with Markdown
114    $('p img').magnificPopup({
115        type: "image",
116        image: {
117            verticalFit: true,
118            titleSrc: 'alt'
119        },
120        zoom: {
121            enabled: true
122        },
123        callbacks: {
124            // Get the src directly from the img-tag instead of an additional tag
125            elementParse: function(item) {
126              // Function will fire for each target element
127              // "item.el" is a target DOM element (if present)
128              // "item.src" is a source that you may modify
129
130              item.src = item.el.attr('src')
131            }
132        },
133        // https://github.com/dimsemenov/Magnific-Popup/pull/1017
134        // Enabled popup only when image size is greater than content area
135        disableOn: function(e) {
136            let img = e.target;
137            return img.naturalWidth > img.clientWidth;
138        }
139    });
140
141    // Magnific Popup for images within articles to zoom them
142    // Rendered with Asciidoc
143    $('.image-block>img').magnificPopup({
144        type: "image",
145        image: {
146            verticalFit: true,
147            titleSrc: function (item) {
148                return item.el.parent().find('figcaption').text();
149            }
150        },
151        zoom: {
152            enabled: true
153        },
154        callbacks: {
155            elementParse: function(item) {
156                item.src = item.el.attr('src')
157            }
158        },
159        // https://github.com/dimsemenov/Magnific-Popup/pull/1017
160        // Enabled popup only when image size is greater than content area
161        disableOn: function(e) {
162            let img = e.target;
163            return img.naturalWidth > img.clientWidth;
164        }
165    });
166
167    // Magnific Popup for images within articles to zoom them
168    // Rendered with Asciidoc
169    $('.image-block').magnificPopup({
170        type: "image",
171        delegate: "a",
172        image: {
173            titleSrc: function (item) {
174                return item.el.parent().find('figcaption').text();
175            },
176            verticalFit: true
177        },
178        zoom: {
179            enabled: true
180        }
181    });
182
183    // Algolia-Search
184    if ($('#activate-algolia-search').length) {
185        let client = algoliasearch($('#algolia-search-appId').val(), $('#algolia-search-apiKey').val());
186        let index = client.initIndex($('#algolia-search-indexName').val());
187
188        let autocompleteSource = $.fn.autocomplete.sources.hits(index, { hitsPerPage: 10 });
189        if ($('#algolia-search-currentLanguageOnly').length) {
190            autocompleteSource = $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5, filters: 'language: ' + $('html').attr('lang') });
191        }
192
193        $('#search').autocomplete({ hint: false, autoselect: true, debug: false },
194            [
195                {
196                    source: autocompleteSource,
197                    displayKey: function (suggestion) {
198                        return suggestion.title || suggestion.author
199                    },
200                    templates: {
201                        suggestion: function (suggestion) {
202                            return "<span class='entry " + suggestion.type + "'>"
203                                + "<span class='title'>" + suggestion.title + "</span>"
204                                + "<span class='fas fa-fw " + suggestion.iconClass + "'></span>"
205                                + "</span>"
206                                ;
207                        },
208                        empty: function () {
209                            return "<span class='empty'>" + $('#algolia-search-noSearchResults').val() + "</span>"
210                        },
211                        footer: function () {
212                            return '<div class="branding">Powered by <img src="' + $('meta[name=siteBaseUrl]').attr("content") + '/algolia-logo-light.svg" alt="algolia" /></div>'
213                        }
214                    },
215                }
216            ])
217            .on('autocomplete:selected', function (event, suggestion, dataset) {
218                window.location = (suggestion.url);
219            })
220            .keypress(function (event, suggestion) {
221                if (event.which == 13) {
222                    window.location = (suggestion.url);
223                }
224            });
225    }
226
227    // MomentJS
228    language = $('html').attr('lang');
229    moment.locale(language);
230    $('.moment').each(function() {
231        date = $(this).text()
232        $(this).text(moment(date).format('LL'))
233    });
234});
235
236hljs.initHighlightingOnLoad();
Note: See TracBrowser for help on using the repository browser.