examples.php

<?php

include_once('includes/common.php');

$example     = isset($_GET['example']) ? $_GET['example'] : null;
$safeExample = htmlspecialchars((string) $example, ENT_QUOTES, 'UTF-8');
$h2          = _('Liturgical Calendar as an HTML table produced by Javascript');

// Keep this markup in step with examples/javascript/index.html, which is the same page
// standalone: the examples/ directory is a symlink to the examples repo, so main.js is
// always that repo's current copy while this host markup is a separate, local duplicate.
// Two rows, as there: the rite, calendar, locale, year type and year inputs land in
// #calendarOptions, and the five General Roman parameters in #generalRomanOptions.
$JAVASCRIPT_EXAMPLE_CONTENTS = <<<EOT
<form id="litcalForm">
    <h2 class="mb-4">{$h2}</h2>
    <div class="row mb-3" id="calendarOptions"></div>
    <div class="row mb-4" id="generalRomanOptions"></div>
</form>
<div id="litcalWebcalendar"></div>
<table id="LitCalMessages">
<thead></thead>
<tbody></tbody>
</table>
<script type="importmap">
    {
        "imports": {
            "@liturgical-calendar/components-js": "https://cdn.jsdelivr.net/npm/@liturgical-calendar/components-js@2.11.0/+esm"
        }
    }
</script>
<script type="module" src="examples/javascript/main.js"></script>
EOT;

$FULLCALENDAR_MESSAGES_FIRST = <<<EOT
<table id="LitCalMessages">
    <thead></thead>
    <tbody></tbody>
</table>

<div id='calendar'></div>
EOT;

$FULLCALENDAR_CALENDAR_FIRST = <<<EOT
<div id='calendar'></div>

<table id="LitCalMessages">
    <thead></thead>
    <tbody></tbody>
</table>
EOT;

// Keep this markup in step with examples/fullcalendar/month-view.html and messages.html,
// which are the same page standalone, for the same reason as the JavaScript example above.
$FULLCALENDAR_EXAMPLE_CONTENTS = <<<EOT
<div id="spinnerWrapper">
    <div class="lds-roller">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<header>
    <div id="calendarOptions" class="row mb-3"></div>
    <div id="generalRomanOptions" class="row mb-4"></div>
</header>

{INTERPOLATE}

<script type="importmap">
    {
        "imports": {
            "@fullcalendar/core": "https://cdn.skypack.dev/@fullcalendar/core@6.1.19",
            "@fullcalendar/core/": "https://cdn.skypack.dev/@fullcalendar/core@6.1.19/",
            "@fullcalendar/daygrid": "https://cdn.skypack.dev/@fullcalendar/daygrid@6.1.19",
            "@fullcalendar/list": "https://cdn.skypack.dev/@fullcalendar/list@6.1.19",
            "@fullcalendar/bootstrap5": "https://cdn.skypack.dev/@fullcalendar/bootstrap5@6.1.19",
            "@liturgical-calendar/components-js": "https://cdn.jsdelivr.net/npm/@liturgical-calendar/components-js@2.11.0/+esm"
        }
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script type="module" src="examples/fullcalendar/script.js"></script>
EOT;

$EXAMPLES = [
    'PHP'                  => 'examples/php/index.php',
    'JavaScript'           => $JAVASCRIPT_EXAMPLE_CONTENTS,
    'FullCalendar'         => strtr($FULLCALENDAR_EXAMPLE_CONTENTS, [
        '{INTERPOLATE}' => $FULLCALENDAR_CALENDAR_FIRST
    ]),
    'FullCalendarMessages' => strtr($FULLCALENDAR_EXAMPLE_CONTENTS, [
        '{INTERPOLATE}' => $FULLCALENDAR_MESSAGES_FIRST
    ])
];
?><!doctype html>
<html lang="<?php echo $i18n->LOCALE; ?>">
<head>
    <title><?php
        echo _('General Roman Calendar');
    ?></title>
    <?php
    include_once('layout/head.php');
    // Since JavaScript is not an iframe, we need to ensure the CSS is loaded
    if ($example) {
        switch ($example) {
            case 'JavaScript':
                echo '<link rel="stylesheet" href="examples/javascript/styles.css">';
                break;
            case 'FullCalendar':
            case 'FullCalendarMessages':
                echo '<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">';
                echo '<link href="examples/fullcalendar/styles.css" rel="stylesheet" />';
                break;
            case 'PHP':
                echo '<link href="examples/php/styles.css" rel="stylesheet" />';
                break;
        }
    }
    ?>
</head>
<body class="sb-nav-fixed production">

<?php
include_once('layout/header.php');
if (array_key_exists($example, $EXAMPLES)) {
    switch ($example) {
        case 'PHP':
            include_once($EXAMPLES[$example]);
            break;
        case 'JavaScript':
        case 'FullCalendar':
        case 'FullCalendarMessages':
            echo $EXAMPLES[$example];
            break;
    }
} else {
    echo '<h1>' . sprintf(_("Example '%s' not found"), $safeExample) . '</h1>';
}
include_once('layout/footer.php');
?>
</body>
</html>