Skip to content
Permalink
Browse files

🌟 feat: toggle help text via button

  • Loading branch information...
anoff committed Feb 23, 2019
1 parent e72ed0f commit 11fc95f7946046e203d6cf093715a3c37c35b6ce
@@ -15,7 +15,7 @@ const { remove, lintCss, lintJs, build, pack, previewPages, serve } = require('.
const glob = {
all: [srcDir, previewSrcDir],
css: `${srcDir}/css/**/*.css`,
js: ['gulpfile.js/**/*.js', `${srcDir}/{helpers,js}/**/*.js`]
js: ['gulpfile.js/**/*.js', `${srcDir}/{helpers,js}/**/*.js`, `!${srcDir}/{helpers,js}/vendor/*.js`]
}

const cleanTask = task({
@@ -39,5 +39,10 @@
"typeface-roboto-mono": "0.0.54",
"vinyl-buffer": "~1.0",
"vinyl-fs": "~3.0"
},
"standard": {
"ignore": [
"src/js/vendor/*.js"
]
}
}
@@ -10,6 +10,13 @@ Mel id omnes verear.
Vis no velit audiam, sonet <<dependencies,praesent>> eum ne.
*Prompta eripuit* nec ad.

[.helptext]
****
this is a help text
****

TIP: test

== Cu solet

Nominavi luptatum eos, an vim hinc philosophia intellegebat.
@@ -1,8 +1,18 @@
div .sidebarblock.helptext {
display: none;
background-color: rgba(204, 0, 51, 0.3);
border-radius: 3px;
}

div .sidebarblock.helptext.visible {
display: block;
}

div #helptext-toggle {
margin-right: 0.7rem;
cursor: pointer;
}

div #helptext-toggle.active {
color: #c03;
}
@@ -13,6 +13,13 @@ document.addEventListener('DOMContentLoaded', function () {
// show all texts
if (needsHelp) {
getAllHelptexts().forEach(e => e.classList.add('visible'))
document.getElementById('helptext-toggle').classList.add('active')
}
console.log('INIT HELPS')

// register toggle button
const elm = document.getElementById('helptext-toggle')
elm.addEventListener('click', function (e) {
elm.classList.toggle('active')
getAllHelptexts().forEach(e => e.classList.toggle('visible'))
})
})

Large diffs are not rendered by default.

@@ -1,3 +1,4 @@
<script src="{{uiRootPath}}/js/site.js"></script>
<script src="{{uiRootPath}}/js/vendor/highlight.js"></script>
<script>hljs.initHighlighting()</script>
<script src="{{uiRootPath}}/js/vendor/fontawesome.js"></script>
@@ -0,0 +1,4 @@
<div id="helptext-toggle">
toggle help
<i class="fas fa-info-circle"></i>
</div>
@@ -4,6 +4,7 @@
<a href="{{relativize page.url site.homeUrl}}" class="home-link{{#if page.home}} is-current{{/if}}"></a>
{{/if}}
{{> breadcrumbs}}
{{> helptext-toggle}}
{{> page-versions}}
{{#if (and page.editUrl (not page.origin.private))}}
<div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>

0 comments on commit 11fc95f

Please sign in to comment.
You can’t perform that action at this time.