minimal-music-project 0.0.7 → 0.1.3

data/_includes/common.js

@@ -1,5 +1,96 @@
-(function () {
-    window.toggleExpander = function toggleExpander(x) {
-        document.getElementsByClassName("menu")[0].classList.toggle("expanded");
-    }
+(function () {
+    window.toggleExpander = function toggleExpander(x) {
+        const menu = document.getElementsByClassName("menu")[0];
+        const navigation = document.getElementsByClassName("navigation")[0];
+        if (menu.classList.contains('expanded--visible')) {
+            menu.classList.toggle('expanded--visible');
+            navigation.addEventListener('transitionend', function(e) {
+                menu.classList.toggle("expanded");
+              }, {
+                capture: false,
+                once: true,
+                passive: false
+              });
+        } else {
+            menu.classList.toggle("expanded");
+            setTimeout(() => menu.classList.toggle('expanded--visible'), 20);
+        }
+    };
+    window.addEventListener("load", () => {
+        // #region click to enlarge images 
+        const imageWrappers = document.querySelectorAll(".click-to-enlarge");
+        imageWrappers.forEach(imageWrapper => {
+            {% if site.data.metaData.clickToEnlargeImages %}
+            imageWrapper.addEventListener("click", () => {
+                const img = imageWrapper.getElementsByTagName("img")[0];
+                const src = img.attributes.getNamedItem("src");
+                const modal = document.createElement("div");
+                const removeModal = function() {
+                    modal.classList.add("hidden");
+                    setTimeout(() => {
+                        document.body.removeChild(modal);
+                    }, 200);
+                };
+                const newImage = document.createElement("img");
+                newImage.classList.add("modal__picture-zoomed--image");
+                newImage.setAttribute("src", src.value);
+                modal.classList.add("modal__picture-zoomed", "hidden");
+                // modal.style.backgroundImage = `URL("${src.value}")`;
+                modal.addEventListener("click", removeModal);
+                modal.append(newImage);
+                document.body.append(modal);
+                document.body.addEventListener("keyup", e => {
+                    if (e.key === 'Escape') {
+                        removeModal();
+                    }
+                }, {once : true});
+                setTimeout(() => {
+                    modal.classList.remove("hidden");
+                }, 0);
+            });
+            {% else %}
+            img.removeAttribute("click-to-enlarge");
+            {% endif %}
+        });
+        // #endregion click to enlarge images 
+        // #region embedded audio players
+        const players = document.querySelectorAll("iframe.embedded-player");
+        const getParamsByPlayerType = (src, type) => {
+            const rt = (src, height) => ({
+                src: src,
+                height: height
+            });
+            switch (type.toLocaleLowerCase()) {
+                case "soundcloud":
+                    return rt(`https://w.soundcloud.com/player/?url=${src}`, 125);
+                case "bandcamp":
+                    return rt(`https://bandcamp.com/EmbeddedPlayer/${src}`, 125);
+                case "spotify":
+                    return rt(`https://open.spotify.com/embed/track/${src}`, 80);
+                case "spotifyalbum":
+                    return rt(`https://open.spotify.com/embed/album/${src}`, 80);
+                case "spotifyplaylist":
+                    return rt(`https://open.spotify.com/embed/playlist/${src}`, 80);
+                case "spotifyepisode":
+                    return rt(`https://open.spotify.com/embed/episode/${src}`, 152);
+                case "spotifyshow":
+                    return rt(`https://open.spotify.com/embed/show/${src}`, 152);
+                case "youtube":
+                    return rt(`https://www.youtube.com/embed/${src}`, 350);
+                case "anchor.fm":
+                    return rt(`https://anchor.fm/sucias/embed/episodes/${src}`,102);
+                default:
+                    return rt(src, 125);
+            }
+        };
+        players.forEach(player => {
+            const givenSrc = player.getAttribute("givenSrc");
+            const type = player.getAttribute("type");
+            const { src, height } = getParamsByPlayerType(givenSrc, type);
+            player.setAttribute("src", src);
+            player.setAttribute("height", height);
+            player.classList.remove("hidden");
+        });
+        // #endregion embedded audio players
+    });
 })();

data/_includes/cookies.js

@@ -1,63 +1,63 @@
-
-(function() {
-    const interactedWithCookiesBanner = "interacted_with_cookies_banner";
-    const storageType = localStorage;
-    const cookieContainerId = "cookieContainer";
-
-    acceptAllCookieConsent = () => {
-        {% for consent in site.data.metaData.cookies.consent %}
-            eval("storageType.setItem('{{consent.cookieName}}', true);");
-        {% endfor %}
-    }
-
-    window.cookiesAcceptDefaultFn = () => {
-        const cookieContainer = document.getElementById(cookieContainerId);
-        cookieContainer.classList.add("hidden");
-        window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
-        storageType.setItem(interactedWithCookiesBanner, true);
-        acceptAllCookieConsent();
-    }
-    window.cookiesDisagreeDefaultFn = () => {
-        const cookieContainer = document.getElementById(cookieContainerId);
-        cookieContainer.classList.add("hidden");
-        window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
-        storageType.setItem(interactedWithCookiesBanner, true);
-        window.location = "cookies";
-    }
-    
-    window.addEventListener("load", () => {
-        if(storageType.getItem(interactedWithCookiesBanner) === "true" || window.location.href.indexOf("cookies") !== -1) {
-            return;
-        }
-        const cookieContainer = document.createElement("div");
-        cookieContainer.setAttribute("id", cookieContainerId);
-        cookieContainer.classList.add("hidden");
-
-        const cookieHeader = document.createElement("h2");
-        const cookieHeaderContent = document.createTextNode("{{ site.data.metaData.cookies.header }}");
-
-        const cookieParagraph = document.createElement("p");
-        const cookieParagraphContent = document.createTextNode("{{ site.data.metaData.cookies.message }}");
-
-        const cookieButtonsContainer = document.createElement("div");
-        cookieButtonsContainer.classList.add("cookie-container--buttons");
-
-        const cookieAgreeButton = document.createElement("button");
-        const cookieButtonContent = document.createTextNode("{{ site.data.metaData.cookies.agreeButtonText }}");
-        cookieAgreeButton.appendChild(cookieButtonContent);
-        eval("cookieAgreeButton.onclick = {{ site.data.metaData.cookies.agreeButtonFnName }};");
-
-        const cookieButtonDisagree = document.createElement("button");
-        const cookieButtonDisagreeContent = document.createTextNode("{{ site.data.metaData.cookies.disagreeButtonText }}");
-        cookieButtonDisagree.append(cookieButtonDisagreeContent);
-        eval("cookieButtonDisagree.onclick = {{ site.data.metaData.cookies.disagreeButtonFnName }};");
-
-        cookieHeader.append(cookieHeaderContent);
-        cookieParagraph.append(cookieParagraphContent);
-        cookieButtonsContainer.append(cookieAgreeButton, cookieButtonDisagree)
-        cookieContainer.append(cookieHeader, cookieParagraph, cookieButtonsContainer);
-        cookieContainer.classList.add("cookie-container")
-        document.body.appendChild(cookieContainer);
-        window.setTimeout(() => cookieContainer.classList.remove("hidden"));
-    });
+
+(function() {
+    const interactedWithCookiesBanner = "interacted_with_cookies_banner";
+    const storageType = localStorage;
+    const cookieContainerId = "cookieContainer";
+
+    acceptAllCookieConsent = () => {
+        {% for consent in site.data.metaData.cookies.consent %}
+            eval("storageType.setItem('{{consent.cookieName}}', true);");
+        {% endfor %}
+    }
+
+    window.cookiesAcceptDefaultFn = () => {
+        const cookieContainer = document.getElementById(cookieContainerId);
+        cookieContainer.classList.add("hidden");
+        window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
+        storageType.setItem(interactedWithCookiesBanner, true);
+        acceptAllCookieConsent();
+    }
+    window.cookiesDisagreeDefaultFn = () => {
+        const cookieContainer = document.getElementById(cookieContainerId);
+        cookieContainer.classList.add("hidden");
+        window.setTimeout(cookieContainer.remove.bind(cookieContainer), 1000);
+        storageType.setItem(interactedWithCookiesBanner, true);
+        window.location = "cookies";
+    }
+    
+    window.addEventListener("load", () => {
+        if(storageType.getItem(interactedWithCookiesBanner) === "true" || window.location.href.indexOf("cookies") !== -1) {
+            return;
+        }
+        const cookieContainer = document.createElement("div");
+        cookieContainer.setAttribute("id", cookieContainerId);
+        cookieContainer.classList.add("hidden");
+
+        const cookieHeader = document.createElement("h2");
+        const cookieHeaderContent = document.createTextNode("{{ site.data.metaData.cookies.header }}");
+
+        const cookieParagraph = document.createElement("p");
+        const cookieParagraphContent = document.createTextNode("{{ site.data.metaData.cookies.message }}");
+
+        const cookieButtonsContainer = document.createElement("div");
+        cookieButtonsContainer.classList.add("cookie-container--buttons");
+
+        const cookieAgreeButton = document.createElement("button");
+        const cookieButtonContent = document.createTextNode("{{ site.data.metaData.cookies.agreeButtonText }}");
+        cookieAgreeButton.appendChild(cookieButtonContent);
+        eval("cookieAgreeButton.onclick = {{ site.data.metaData.cookies.agreeButtonFnName }};");
+
+        const cookieButtonDisagree = document.createElement("button");
+        const cookieButtonDisagreeContent = document.createTextNode("{{ site.data.metaData.cookies.disagreeButtonText }}");
+        cookieButtonDisagree.append(cookieButtonDisagreeContent);
+        eval("cookieButtonDisagree.onclick = {{ site.data.metaData.cookies.disagreeButtonFnName }};");
+
+        cookieHeader.append(cookieHeaderContent);
+        cookieParagraph.append(cookieParagraphContent);
+        cookieButtonsContainer.append(cookieAgreeButton, cookieButtonDisagree)
+        cookieContainer.append(cookieHeader, cookieParagraph, cookieButtonsContainer);
+        cookieContainer.classList.add("cookie-container")
+        document.body.appendChild(cookieContainer);
+        window.setTimeout(() => cookieContainer.classList.remove("hidden"));
+    });
 })();

data/_includes/customizationsScripts.html

@@ -1,7 +1,7 @@
-{% for javascript in page.custom-js %}
-    <script src="{{ javascript | relative_url }}"></script>
-{% endfor %}
-
-{% for javascript in site.data.customs.custom-js %}
-    <script src="{{ javascript | relative_url }}"></script>
+{% for javascript in page.custom-js %}
+    <script src="{{ javascript | relative_url }}"></script>
+{% endfor %}
+
+{% for javascript in site.data.customs.custom-js %}
+    <script src="{{ javascript | relative_url }}"></script>
 {% endfor %}

data/_includes/customizationsStyles.html

@@ -1,7 +1,7 @@
-{% for css in page.custom-css %}
-    <link href="{{ css | relative_url }}" rel="stylesheet">
-{% endfor %}
-
-{% for css in site.data.customs.custom-css %}
-    <link href="{{ css | relative_url }}" rel="stylesheet">
+{% for css in page.custom-css %}
+    <link href="{{ css | relative_url }}" rel="stylesheet">
+{% endfor %}
+
+{% for css in site.data.customs.custom-css %}
+    <link href="{{ css | relative_url }}" rel="stylesheet">
 {% endfor %}

data/_includes/discography-entry-metadata.html

@@ -1,80 +1,77 @@
-<p class="discography-album_release-date">
-    release date: {{ include.currPost.date | date_to_long_string }}
-</p>
-
-{% if include.currPost.type %}
-<p class="discography-album_type">
-    release type: {{ include.currPost.type }}
-</p>
-{% endif %}
-
-{% assign playArray = include.currPost.play | size %}
-{% if playArray != 0 %}
-<p class="discography-album_play">
-    play:
-    {% for play in include.currPost.play %}
-    <a href="{{ play.url }}" target="_blank">{{ play.name }}</a>
-    {% if forloop.last == false %}
-    |
-    {% endif %}
-    {% endfor %}
-</p>
-{% endif %}
-
-{% assign downloadArray = include.currPost.download | size %}
-{% if downloadArray != 0 %}
-<p class="discography-album_download">
-    download:
-    {% for download in include.currPost.download %}
-    <a href="{{ download.url }}" target="_blank">{{ download.name }}</a>
-    {% if forloop.last == false %}
-    |
-    {% endif %}
-    {% endfor %}
-</p>
-{% endif %}
-
-{% assign buyArray = include.currPost.buy | size %}
-{% if buyArray != 0 %}
-<p class="discography-album_buy">
-    buy from:
-    {% for buy in include.currPost.buy %}
-    <a href="{{ buy.url }}" target="_blank">{{ buy.name }}</a>
-    {% if forloop.last == false %}
-    |
-    {% endif %}
-    {% endfor %}
-</p>
-{% endif %}
-
-{% assign otherArray = include.currPost.other | size %}
-{% if otherArray != 0 %}
-<p class="discography-album_other">
-    other links:
-    {% for other in include.currPost.other %}
-    <a href="{{ other.url }}" target="_blank">{{ other.name }}</a>
-    {% if forloop.last == false %}
-    |
-    {% endif %}
-    {% endfor %}
-</p>
-{% endif %}
-{% if include.currPost.play_here %}
-{% include music-player.html audioData=include.currPost.play_here %}
-{% endif %}
-{% if include.currPost.play_soundcloud_embed %}
-<iframe width="100%" height="110" scrolling="no" frameborder="no" allow="autoplay"
-    src="{{ include.currPost.play_soundcloud_embed.src }}"></iframe>
-<div
-    style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
-    <a href="{{ include.currPost.play_soundcloud_embed.artist_href }}" title="{{ include.currPost.play_soundcloud_embed.artist_title }}" target="_blank"
-        style="color: #cccccc; text-decoration: none;">{{ include.currPost.play_soundcloud_embed.artist_title }}</a> · <a
-        href="{{ include.currPost.play_soundcloud_embed.song_href }}"
-        title="{{ include.currPost.play_soundcloud_embed.song_title }}" target="_blank"
-        style="color: #cccccc; text-decoration: none;">{{ include.currPost.play_soundcloud_embed.song_title }}</a></div>
-{% endif %}
-{% if include.currPost.play_bandcamp_embed %}
-<iframe style="border: 0; width: 100%; height: 120px;"
-    src="{{ include.currPost.play_bandcamp_embed.src }}" seamless>
-    <a href="{{ include.currPost.play_bandcamp_embed.href }}">{{ include.currPost.play_bandcamp_embed.title }}</a></iframe>
-{% endif %}
+<p class="discography-album_release-date">
+    release date: {{ include.currPost.date | date_to_long_string }}
+</p>
+
+{% if include.currPost.type %}
+<p class="discography-album_type">
+    release type: {{ include.currPost.type }}
+</p>
+{% endif %}
+
+{% assign playArray = include.currPost.play | size %}
+{% if playArray != 0 %}
+<p class="discography-album_play">
+    play:
+    {% for play in include.currPost.play %}
+    <a href="{{ play.url }}" target="_blank">{{ play.name }}</a>
+    {% if forloop.last == false %}
+    |
+    {% endif %}
+    {% endfor %}
+</p>
+{% endif %}
+
+{% assign downloadArray = include.currPost.download | size %}
+{% if downloadArray != 0 %}
+<p class="discography-album_download">
+    download:
+    {% for download in include.currPost.download %}
+    <a href="{{ download.url }}" target="_blank">{{ download.name }}</a>
+    {% if forloop.last == false %}
+    |
+    {% endif %}
+    {% endfor %}
+</p>
+{% endif %}
+
+{% assign buyArray = include.currPost.buy | size %}
+{% if buyArray != 0 %}
+<p class="discography-album_buy">
+    buy from:
+    {% for buy in include.currPost.buy %}
+    <a href="{{ buy.url }}" target="_blank">{{ buy.name }}</a>
+    {% if forloop.last == false %}
+    |
+    {% endif %}
+    {% endfor %}
+</p>
+{% endif %}
+
+{% assign otherArray = include.currPost.other | size %}
+{% if otherArray != 0 %}
+<p class="discography-album_other">
+    other links:
+    {% for other in include.currPost.other %}
+    <a href="{{ other.url }}" target="_blank">{{ other.name }}</a>
+    {% if forloop.last == false %}
+    |
+    {% endif %}
+    {% endfor %}
+</p>
+{% endif %}
+
+{% if include.currPost.embed_player %}
+    {% if include.currPost.embed_player.type ==	"audio_file" %}
+        {% include music-player.html audioData=include.currPost.embed_player %}
+    {% else %}
+        <iframe
+            class="embedded-player hidden"
+            givenSrc="{{include.currPost.embed_player.src}}"
+            type="{{include.currPost.embed_player.type}}"
+            allow="encrypted-media; picture-in-picture"
+            height="80"
+            frameborder="0"
+            scrolling="no">
+        </iframe>
+    {% endif %}
+{% endif %}

data/_includes/discography-entry.html

@@ -1,25 +1,43 @@
-<article class="discography-album">
-    <header>
-        <figure class="discography-album_cover-wrapper">
-            <div class="discography-album_cover">
-                <img src="{{ include.currPost.image | relative_url }}" alt="{{ page.image_alt }}" />
-            </div>
-        </figure>
-    </header>
-    <section>
-        {% if include.currPost.external_url %}
-        <a href="{{ include.currPost.external_url | relative_url }}" target="_blank">
-            {% else %}
-            <a href="{{ include.currPost.url | relative_url }}">
-                {% endif %}
-                <h2 class="discography-album_title">
-                    {{ include.currPost.title }}
-                </h2>
-            </a>
-            <p class="discography-album_summary">
-                {{ include.currPost.description }}
-            </p>
-            {% include discography-entry-metadata.html currPost=include.currPost %}
-        </section>
-    {% include read-more.html currPost=include.currPost %}
+<article class="discography-album">
+    <header>
+        <figure class="discography-album_cover-wrapper">
+            <div class="discography-album_cover">
+                <div class="click-to-enlarge">
+                    <img
+                        click-to-enlarge 
+                        {% if include.currPost.image_alt %}
+                        alt="{{ include.currPost.image_alt }}"
+                        {% endif %}
+                        src="{{ include.currPost.image | relative_url }}"
+                        {% if include.currPost.responsiveImage %}
+                        srcset="{% for img in include.currPost.responsiveImage %}{{ img.src | relative_url }} {{ img.size }}w{% if forloop.last == false %},{% endif %}{% endfor %}"
+                        sizes="30vw"
+                        {% endif %}
+                    />
+                </div>
+            </div>
+        </figure>
+    </header>
+    <section>
+        {% if include.currPost.external_url %}
+        <a href="{{ include.currPost.external_url | relative_url }}" target="_blank">
+            {% else %}
+            <a href="{{ include.currPost.url | relative_url }}">
+                {% endif %}
+                <h2 class="discography-album_title">
+                    {{ include.currPost.title }}
+                </h2>
+            </a>
+            <p class="discography-album_summary">
+                {{ include.currPost.description }}
+                
+                {% if include.currPost.description %}
+                {{ include.currPost.description }}
+                {% else %}
+                {{ include.currPost.excerpt | strip_html }}
+                {% endif %}
+            </p>
+            {% include discography-entry-metadata.html currPost=include.currPost %}
+        </section>
+    {% include read-more.html currPost=include.currPost %}
 </article>

data/_includes/footer.html

@@ -1,10 +1,10 @@
-<script>
-    window.addEventListener("load", () => {
-        document.getElementsByClassName("copyrights")[0].innerHTML = 
-            `Copyrights &copy; ${new Date().getFullYear()} {{ site.data.metaData.author }}`;
-    });
-</script>
-<footer>
-    <p class="copyrights">
-    </p>
+<script>
+    window.addEventListener("load", () => {
+        document.getElementsByClassName("copyrights")[0].innerHTML = 
+            `Copyrights &copy; ${new Date().getFullYear()} {{ site.data.metaData.author }}`;
+    });
+</script>
+<footer>
+    <p class="copyrights">
+    </p>
 </footer>

data/_includes/menu.html

@@ -1,35 +1,35 @@
-<aside class="menu">
-    <div class="menu-top">
-        <div class="menu-top_logo">
-            <a href="{{ '/' | relative_url }}" >
-                <img src="{{ site.data.metaData.logo | relative_url }}" alt="Logo" onerror="this.style.display='none'">
-            </a>
-        </div>
-        <div class="menu-top_expand" onclick="toggleExpander(this)">
-            <div class="bar_top"></div>
-            <div class="bar_middle"></div>
-            <div class="bar_bottom"></div>
-        </div>
-        <ul class="navigation">
-            {% for menu_item in site.data.menu.menu_pages %}
-            <li>
-                <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}"
-                {% if menu_item.category == page.category or page.categories contains menu_item.category %}
-                    class="selected"
-                {% endif %}
-                >
-                    <span>{{ menu_item.title }}</span>
-                </a>
-            </li>
-            {% endfor %}
-        </ul>
-    </div>
-    <div class="menu-contact">
-        {% for contact in site.data.menu.menu_contacts %}
-
-        <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
-            <i class="{{ contact.faicon }}"></i>
-        </a>
-        {% endfor %}
-    </div>
-</aside>
+<aside class="menu">
+    <div class="menu-top">
+        <div class="menu-top_logo">
+            <a href="{{ '/' | relative_url }}" >
+                <img src="{{ site.data.metaData.logo | relative_url }}" alt="Logo" onerror="this.style.display='none'">
+            </a>
+        </div>
+        <div class="menu-top_expand" onclick="toggleExpander(this)">
+            <div class="bar_top"></div>
+            <div class="bar_middle"></div>
+            <div class="bar_bottom"></div>
+        </div>
+        <ul class="navigation">
+            {% for menu_item in site.data.menu.menu_pages %}
+            <li>
+                <a href="{{ menu_item.url | relative_url }}" category="{{ menu_item.category }}" title="{{ menu_item.tooltip }}"
+                {% if menu_item.category == page.category or page.categories contains menu_item.category %}
+                    class="selected"
+                {% endif %}
+                >
+                    <span>{{ menu_item.title }}</span>
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+    <div class="menu-contact">
+        {% for contact in site.data.menu.menu_contacts %}
+
+        <a href="{{ contact.url | relative_url }}" target="{{ contact.target }}">
+            <i class="{{ contact.faicon }}"></i>
+        </a>
+        {% endfor %}
+    </div>
+</aside>