Hinter Den Kulissen

Extramile

Ich habe für meine musikzentrierte Webseite überlegt, wie ich der zufallsbasierten Albumauswahl beim Aufruf beibringen kann, zumindest nicht 2 mal hintereinander das selbe Album zu laden. Das wollte ich machen, ohne dass ich Daten im Browser ablege. Beim “normalen” refresh der Seite geht das aktuell noch nicht bzw hab ich noch keine Idee, aber wenn man über den “Jump”-Würfel den reload triggert hauts hin.

Dazu waren nur folgende Schritte nötig:

Index.php

    $files = glob("*.html");
    $lastIndex = $_POST['lastIndex'];
    do {
        $rand_key = array_rand($files, 1);
    } while ($rand_key == $lastIndex);
    define("_INDEX_", $rand_key);
    require_once("common.php");
    if (file_exists($files[$rand_key]))
        require_once($files[$rand_key])

in der common.php hol ich mir den aktuell ausgewürfelten index aus der INDEX - Definition

$_index_ = _INDEX_;
    echo <<< EOT
  <div class="cube" id="jump" data-last-index="$_index_">
    <div class="_back"></div>
    <div class="_bottom"></div>
    <div class="_front"></div>
    <div class="_left"></div>
    <div class="_right"></div>
    <div class="_top"></div>
  </div>
EOT;

und in der common.js schmiere ich das in den onlick event rein

const jump = document.getElementById("jump");
jump.addEventListener("click", function() {
    postForm(window.location.href, {lastIndex: jump.getAttribute('data-last-index')});
})

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }
    document.body.appendChild(form);
    form.submit();
}

Und damit danach bei einem reload mit dem Browser-Reload-Button das TempFormular nicht nochmal senden will

document.addEventListener("DOMContentLoaded", function() {
    if (window.history.replaceState) {
        window.history.replaceState(null, null, window.location.href);
    }
});

Das geht bestimmt alles viel einfacher - aber es war eh mal wieder Zeit, einen Blogeintrag zu schreiben :)