From 846ac779180c1bb7b1af61c4f5dad6479c1a22d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Thu, 5 Oct 2017 14:59:39 +0200 Subject: [PATCH] basic code switcher implementation. Needs love but worx --- assets/stylesheets/lesson/index.css | 44 ++++++++++++ assets/stylesheets/variables.css | 6 ++ public/scripts/index.js | 36 ++++++++++ public/stylesheets/style.css | 45 ++++++++++++ views/layout.pug | 2 +- views/mixins/_lessonModuleCodeSnippet.pug | 84 +++++++++++++++-------- 6 files changed, 189 insertions(+), 28 deletions(-) create mode 100644 public/scripts/index.js diff --git a/assets/stylesheets/lesson/index.css b/assets/stylesheets/lesson/index.css index 5cadc5a..279ff13 100644 --- a/assets/stylesheets/lesson/index.css +++ b/assets/stylesheets/lesson/index.css @@ -20,3 +20,47 @@ margin-bottom: 0; } } + +@block lesson-module-code { + @element header {} + @element code-area { + background: var(--code-bg); + } + + @element trigger { + display: inline-block; + + padding: 0 1em; + margin-right: 1em; + + background: var(--code-trigger-bg); + + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + + font-family: var(--font-medium); + font-size: 0.7em; + color: var(--code-trigger-color); + + &:last-child { + margin-right: 0; + } + + @modifier active { + background: var(--code-trigger-bg-active); + color: var(--code-trigger-color-active); + } + } + + @element code { + display: none; + + @modifier active { + display: block; + } + + & pre { + margin: 0; + } + } +} diff --git a/assets/stylesheets/variables.css b/assets/stylesheets/variables.css index 27025f9..1a22c4f 100644 --- a/assets/stylesheets/variables.css +++ b/assets/stylesheets/variables.css @@ -57,4 +57,10 @@ --cta-bg: var(--color-palette-blue); --cta-bg-hover: var(--color-palette-blue-medium); --cta-radius: 3px; + + --code-bg: var(--color-bg-grey); + --code-trigger-bg: color(var(--color-bg-grey) shade(20%)); + --code-trigger-bg-active: var(--code-bg); + --code-trigger-color: #fff; + --code-trigger-color-active: var(--color-text-dark-bg-grey); } diff --git a/public/scripts/index.js b/public/scripts/index.js new file mode 100644 index 0000000..b5ffd1d --- /dev/null +++ b/public/scripts/index.js @@ -0,0 +1,36 @@ +document.addEventListener('DOMContentLoaded', () => { + // init highlight.js + hljs.initHighlightingOnLoad() + + // Lesson code switcher logic + const modules = Array.from(document.getElementsByClassName('lesson-module-code')) + + modules.forEach((module) => { + const triggers = Array.from(module.getElementsByClassName('lesson-module-code__trigger')) + const codes = Array.from(module.getElementsByClassName('lesson-module-code__code')) + + const handleTriggerClick = (e) => { + const target = e.target.getAttribute('data-target') + + // Mark correct trigger as active + triggers.forEach((trigger) => { + trigger.classList.remove('lesson-module-code__trigger--active') + }) + e.target.classList.add('lesson-module-code__trigger--active') + + // Show correct code fields + codes.forEach((code) => { + code.classList.remove('lesson-module-code__code--active') + if (code.id === target) { + code.classList.add('lesson-module-code__code--active') + } + }) + } + + // Attach click handler to triggers + triggers.forEach((trigger) => { + trigger.onclick = handleTriggerClick + }) + }) +}) + diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 59ef5e7..4ad2516 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -2003,3 +2003,48 @@ github.com style (c) Vasily Polovnyov .lesson__cta { margin-bottom: 0; } + +.lesson-module-code {} + +.lesson-module-code__header {} + +.lesson-module-code__code-area { + background: #f7f9fa; +} + +.lesson-module-code__trigger { + display: inline-block; + + padding: 0 1em; + margin-right: 1em; + + background: rgb(198, 199, 200); + + border-top-left-radius: 4px; + border-top-right-radius: 4px; + + font-family: 'robotomedium', Helvetica, sans-serif; + font-size: 0.7em; + color: #fff; +} + +.lesson-module-code__trigger:last-child { + margin-right: 0; +} + +.lesson-module-code__trigger--active { + background: #f7f9fa; + color: #a9b9c0; +} + +.lesson-module-code__code { + display: none; +} + +.lesson-module-code__code pre { + margin: 0; +} + +.lesson-module-code__code--active { + display: block; +} diff --git a/views/layout.pug b/views/layout.pug index 9c0f49d..5d5c031 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -86,4 +86,4 @@ html a(href='https://twitter.com/contentful' target='_blank' rel='noopener') img(src='/images/icon-twitter.svg' alt='Our Twitter profile') script(src='/scripts/highlight.pack.js') - script hljs.initHighlightingOnLoad(); + script(src='/scripts/index.js') diff --git a/views/mixins/_lessonModuleCodeSnippet.pug b/views/mixins/_lessonModuleCodeSnippet.pug index ab71713..a9b7848 100644 --- a/views/mixins/_lessonModuleCodeSnippet.pug +++ b/views/mixins/_lessonModuleCodeSnippet.pug @@ -1,30 +1,60 @@ mixin lessonModuleCodeSnippet(module) .lesson-module.lesson-module-code - if module.fields.curl - pre.lesson-module-code__curl - code.shell= module.fields.curl - if module.fields.dot-net - pre.lesson-module-code__dotnet - code.csharp= module.fields.dot-net - if module.fields.javascript - pre.lesson-module-code__javascript - code.javascript= module.fields.javascript - if module.fields.java - pre.lesson-module-code__java - code.java= module.fields.java - if module.fields.javaAndroid - pre.lesson-module-code__java-android - code.java= module.fields.javaAndroid - if module.fields.php - pre.lesson-module-code__php - code.php= module.fields.php - if module.fields.python - pre.lesson-module-code__python - code.python= module.fields.python - if module.fields.ruby - pre.lesson-module-code__ruby - code.ruby= module.fields.ruby - if module.fields.swift - pre.lesson-module-code__swift - code.swift= module.fields.swift + .lesson-module-code__header + if module.fields.curl + a.lesson-module-code__trigger(data-target=`${module.sys.id}-curl`) curl + if module.fields.dot-net + a.lesson-module-code__trigger(data-target=`${module.sys.id}-dotnet`) .NET + if module.fields.javascript + a.lesson-module-code__trigger.lesson-module-code__trigger--active(data-target=`${module.sys.id}-javascript`) Javascript + if module.fields.java + a.lesson-module-code__trigger(data-target=`${module.sys.id}-java`) Java + if module.fields.javaAndroid + a.lesson-module-code__trigger(data-target=`${module.sys.id}-android`) Android + if module.fields.php + a.lesson-module-code__trigger(data-target=`${module.sys.id}-php`) PHP + if module.fields.python + a.lesson-module-code__trigger(data-target=`${module.sys.id}-python`) Python + if module.fields.ruby + a.lesson-module-code__trigger(data-target=`${module.sys.id}-ruby`) Ruby + if module.fields.swift + a.lesson-module-code__trigger(data-target=`${module.sys.id}-swift`) Swift + + .lesson-module-code__code-area + if module.fields.curl + .lesson-module-code__code(id=`${module.sys.id}-curl`) + pre + code.shell= module.fields.curl + if module.fields.dot-net + .lesson-module-code__code(id=`${module.sys.id}-dotnet`) + pre + code.csharp= module.fields.dot-net + if module.fields.javascript + .lesson-module-code__code.lesson-module-code__code--active(id=`${module.sys.id}-javascript`) + pre + code.javascript= module.fields.javascript + if module.fields.java + .lesson-module-code__code(id=`${module.sys.id}-java`) + pre + code.java= module.fields.java + if module.fields.javaAndroid + .lesson-module-code__code(id=`${module.sys.id}-android`) + pre + code.java= module.fields.javaAndroid + if module.fields.php + .lesson-module-code__code(id=`${module.sys.id}-php`) + pre + code.php= module.fields.php + if module.fields.python + .lesson-module-code__code(id=`${module.sys.id}-python`) + pre + code.python= module.fields.python + if module.fields.ruby + .lesson-module-code__code(id=`${module.sys.id}-ruby`) + pre + code.ruby= module.fields.ruby + if module.fields.swift + .lesson-module-code__code(id=`${module.sys.id}-swift`) + pre + code.swift= module.fields.swift