diff --git a/components/song/song.component.js b/components/song/song.component.js new file mode 100644 index 0000000..7304791 --- /dev/null +++ b/components/song/song.component.js @@ -0,0 +1,156 @@ +console.log("song.component.js running"); + +const initSongComponent = () => { + // CSS + const ComponentCSS = () => { + const styleTag = document.createElement("style"); + const ComponentCSS = ` + .dm-sp-dd-lst { + display:block; + } + .hide { + display: none; + } + `; + + styleTag.innerHTML = ComponentCSS; + + return styleTag; + }; + document.head.appendChild(ComponentCSS()); + + // Utils + const handleClickOutsideElement = (element, onClickOutside) => { + // source (2021-07-09): https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element + const outsideClickListener = (event) => { + if (!element.contains(event.target) && isVisible(element)) { + // or use: event.target.closest(selector) === null + if (onClickOutside) onClickOutside(); + removeClickListener(); + } + }; + + const removeClickListener = () => { + document.removeEventListener("click", outsideClickListener); + }; + + document.addEventListener("click", outsideClickListener); + }; + + const isVisible = (elem) => + !!elem && + !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js + + /** + * Method for creating element of + * @param {string} type + * @param {...string} classes + * @returns + */ + const E = (type, ...classes) => { + const Element = document.createElement(type); + for (const c of classes) { + Element.classList.add(c); + } + return Element; + }; + + const ButtonE = ({ text }) => { + const Button = E("button", "dm-button"); + Button.innerHTML = text ?? ""; + return { DOMElement: Button }; + }; + + const DropdownMenuE = ({ + triggerText, + items = [{ text: "", onClick: undefined }], + openMenuOnHover = false, + }) => { + // Utils + let isOpen = false; + let timeout; + + const DropdownMenu = E("div"); + + // Content + const DropdownMenuContentE = E("div", "dm-sp-dd-lst", "hide"); + const DropdownMenuListE = E("div", "dm-sp-dd-list-items"); + DropdownMenuContentE.appendChild(DropdownMenuListE); + + items.forEach((item) => { + console.log(item); + const DropdownMenuListItemE = E("div", "dm-sp-dd-list-item"); + DropdownMenuListItemE.innerHTML = item.text ?? ""; + if (item.onClick) + DropdownMenuListItemE.addEventListener("click", item.onClick); + + DropdownMenuListE.appendChild(DropdownMenuListItemE); + }); + + // Handle state + const closeMenu = () => { + DropdownMenuContentE.classList.add("hide"); + isOpen = false; + }; + + const openMenu = () => { + DropdownMenuContentE.classList.remove("hide"); + if (timeout) clearTimeout(timeout); + timeout = setTimeout( + () => handleClickOutsideElement(DropdownMenuContentE, closeMenu), + 10 + ); + isOpen = true; + }; + + // Trigger + const DropdownMenuTrigger = ButtonE({ + text: triggerText, + }); + + const DropdownMenuTriggerE = DropdownMenuTrigger.DOMElement; + + DropdownMenuTriggerE.addEventListener("click", () => { + if (!isOpen) openMenu(); + }); + + DropdownMenu.appendChild(DropdownMenuTriggerE); + DropdownMenu.appendChild(DropdownMenuContentE); + + return { DOMElement: DropdownMenu }; + }; + + const SongControlsE = () => { + const SongControls = E("div"); + + const TransposeDropdown = DropdownMenuE({ + triggerText: "Transponering", + items: [ + { text: "Skriv ut" }, + { text: "Kopier ChordPro" }, + { text: "Last ned ChordPro" }, + ], + openMenuOnHover: true, + }); + SongControls.appendChild(TransposeDropdown.DOMElement); + + return { DOMElement: SongControls }; + }; + + const SongComponentE = () => { + const SongComponent = E("div"); + + const SongControls = SongControlsE(); + + SongComponent.appendChild(SongControls.DOMElement); + + return { DOMElement: SongComponent }; + }; + + return SongComponentE().DOMElement; +}; + +document.querySelectorAll("Song").forEach((e) => { + e.innerHTML = ""; + e.appendChild(initSongComponent()); +}); diff --git a/pages/song/extra.css b/pages/song/extra.css new file mode 100644 index 0000000..803afff --- /dev/null +++ b/pages/song/extra.css @@ -0,0 +1,96 @@ +.cp-meta-block { + position: absolute; + top: 0px; + right: 0px; +} + +.cp-meta-block .cp-meta { + text-align: right; +} + +.cp-song-title { + font-weight: bold; + font-size: 21px; + margin-bottom: 0px; +} + +.cp-song-artist { + font-size: 14px; + padding-bottom: 6px; +} + +.cp-info-block { + font-family: "Noto Sans", sans-serif; + margin-right: 100px; + -webkit-column-span: all; + column-span: all; + height: 0px; + overflow: hidden; + margin-bottom: 0px; +} + +.cp-chord { + font-weight: 500; + margin-bottom: -1em; +} + +.cp-heading { + font-weight: bold; +} + +.cp-section { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid; +} +.cp-two-columns { + -webkit-column-count: 2; /* Chrome, Safari, Opera */ + -moz-column-count: 2; /* Firefox */ + column-count: 2; +} +.cp-three-columns { + -webkit-column-count: 3; /* Chrome, Safari, Opera */ + -moz-column-count: 3; /* Firefox */ + column-count: 3; +} +.cp-extra-meta-bottom { + font-size: 10px; +} + +.cp-meta-wrapper { + position: relative; +} + +.cp-key-tempo-wrapper { + position: absolute; + top: 0.4rem; + right: 2.6rem; +} + +.chord-pro-preview { + display: none; +} +.chord-pro-preview.open { + display: block; + position: fixed; + z-index: 100; + background-color: rgba(0, 0, 0, 0.2); + top: 0; + left: 0; + height: 100%; + width: 100%; + + display: flex; + justify-content: center; + align-items: center; +} + +.chord-pro-preview.open > * { + max-width: 40rem; + background-color: #222; + height: 80%; +} + +.monofont { + font-family: "Courier New", Courier, monospace; +} diff --git a/pages/song/song.html b/pages/song/song.html index 0fa59be..f130ff6 100644 --- a/pages/song/song.html +++ b/pages/song/song.html @@ -8,6 +8,12 @@ +
@@ -260,7 +266,8 @@

-
+
+
@@ -319,14 +326,14 @@

-
+
Capo:
-
+
-
+
@@ -393,12 +400,12 @@

Capo:
-
+
-
+
@@ -479,77 +486,7 @@

-

Vekk meg opp
-
Impuls
-
Toneart: F#
-
128 BPM 4/4
-
Album: Vekk meg opp
-
Published: 2021
-
Copyright: Impuls
-
T/m: Sindre Suphellen, Jenny Sofia Bruns, Julia Bruns
-
Web: impulsweb.no

-
Vers 1:
-
-
B  
Jeg finner trygghet i 		D#m  
ditt ord
-
- -
F#  
Det vil stå 		C#  
fast til evig tid		B  
 
-
-

Det forteller 		D#m  
om en nåde stor
-
-
F#  
Og gir håp om 		C#  
evig liv

-
Vers 2:
-
-
B  
Jeg vet du 		D#m  
har all makt
-
- -
F#  
At du skapte 		C#  
alt på denne jord		B  
 
-
-

Og jeg vet at 		D#m  
du har sagt
-
-
F#  
Gå til dem som 		C#  
ikke tror

-
Pre-Chorus:
-
- -

Men hvordan kan de 		B  
høre 		D#m  
 
-
- - - - - -

Hvordan kan de		F#  
 tro 		C#  
Hvis ingen for		B  
teller 		D#m  
Om ditt 		F#  
ord 		C#/Bb  
 

-
Refreng:
-
- - - -

Vekk meg 		B  
opp,		D#m  
 		F#  
opp		C#  
 
-
- - - -

Send meg 		B  
ut 		D#m  
F#  
Der hvor du vil 		C#  
Gud

-
Vers 3:
-
-
B  
Du gav deg 		D#m  
selv i kjærlighet
-
- -
F#  
For å frelse 		C#  
alle, hver og 		B  
en
-
-

Og jeg vet du 		D#m  
stadig er på let
-
-
F#  
For du elsker 		C#  
alle

-
Bro:
-
-

Det jeg har erfart 		D#m7  
 
-
-
F#  
Det vil jeg dele 		F#sus2/A#  
 
-
-

Det som jeg har sett 		D#m7  
 
-
-
F#  
Alle må se det 		F#sus2/A#  
 

2021 © Impuls
«Vekk meg opp» er utgitt på Impuls album «Vekk meg opp» (2021)
Husk å rapportere inn all offentlig bruk til TONO (www.tono.no) og CCLI (no.ccli.com)

-
+

@@ -953,14 +890,14 @@

Nytt fra lovsangskatalogen

initVidThumbs(true) - - - - - - - - + + + + + + + +