MAPG-89 rewrite views and view templates to the new concept

2020-06-27 00:23:57 +02:00 · 2020-06-27 00:23:57 +02:00 · 1287fa0bc9
commit 1287fa0bc9
parent bf8e5b5f4d
18 changed files with 165 additions and 130 deletions
--- a/views/account/account.php
+++ b/views/account/account.php
@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Account</h2>
    <div class="box">
        <form id="accountForm" action="/account" method="post" data-observe-inputs="password_new,password_new_confirm">
@ -19,5 +20,4 @@
            </div>
        </form>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/account/delete.php
+++ b/views/account/delete.php
@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Delete account</h2>
    <div class="box">
        <form id="deleteAccountForm" action="/account/delete" method="post" data-redirect-on-success="/">
@ -11,5 +12,4 @@
            </div>
        </form>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@ -1,3 +1,4 @@
+@extra
 <?php
 $cssFiles = [
    'node_modules/leaflet/dist/leaflet.css',
@ -12,16 +13,12 @@ $jsFiles = [
    'js/map_editor.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<header class="small">
-    <h1>
-        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span><?= $_ENV['APP_NAME'] ?></span>
-        </a>
-    </h1>
-    <p class="header">
-        <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
+@endextra
+
+@extends('templates/layout_full')
+
+@section('subheader')
+           <span><a href="javascript:;" id="mapName" title="Edit map data"><?= $mapName ?></a></span><!--
        --><span><!--
            <?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
            --><svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
@ -46,8 +43,9 @@ $jsFiles = [
            </svg><!--
         --><span id="deleted" class="bold">0</span><!--
        --></span>
-    </p>
-</header>
+@endsection
+
+@section('pagemodal')
 <div id="metadata" class="modal">
    <h2>Edit map data</h2>
    <form id="metadataForm" class="marginTop" data-no-submit="true">
@ -59,7 +57,9 @@ $jsFiles = [
        </div>
    </form>
 </div>
-<div class="full">
+@endsection
+
+@section('main')
    <div id="map"></div>
    <div id="panorama"></div>
    <div id="noPano">
@ -73,7 +73,9 @@ $jsFiles = [
        <button id="closeButton" class="gray fullWidth marginTop">Close</button>
        <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
    </div>
-</div>
+@endsection
+
+@section('pagescript')
 <script>
    var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
    var tileAttribution = '<?= $_ENV['LEAFLET_TILESERVER_ATTRIBUTION'] ?>';
@ -81,4 +83,4 @@ $jsFiles = [
    var mapBounds = <?= json_encode($bounds) ?>;
    var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
 </script>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/error/404.php
+++ b/views/error/404.php
@ -1,6 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>404 | Page not found</h2>
    <p>The requested URL was not found on this server. <a href="/" title="<?= $_ENV['APP_NAME'] ?>">Back to start.</a></p>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/game.php
+++ b/views/game.php
@ -1,3 +1,4 @@
+@extra
 <?php
 $cssFiles = [
    'css/game.css'
@ -7,21 +8,17 @@ $jsFiles = [
    'js/game.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<header class="small">
-    <h1>
-        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
-            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
-         --><span><?= $_ENV['APP_NAME'] ?></span>
-        </a>
-    </h1>
-    <p class="header">
+@endextra
+
+@extends('templates/layout_full')
+
+@section('subheader')
        <span id="mapName" class="bold"><?= $mapName ?></span><!--
        --><span>Round <span id="currentRound" class="bold"></span></span><!--
        --><span>Score <span id="currentScoreSum" class="bold"></span></span>
-    </p>
-</header>
-<div class="full">
+@endsection
+
+@section('main')
    <div id="panoCover"></div>
    <div id="panorama"></div>
    <div id="showGuessButtonContainer">
@ -56,9 +53,11 @@ $jsFiles = [
            <button id="startNewGameButton" class="fullWidth">Play this map again</button>
        </div>
    </div>
-</div>
+@endsection
+
+@section('pagescript')
 <script>
    var mapId = <?= $mapId ?>;
    var mapBounds = <?= json_encode($bounds) ?>;
 </script>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/activate.php
+++ b/views/login/activate.php
@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Account activation</h2>
    <div class="box">
        <p class="error justify">Activation failed. Please check the link you entered or retry <a href="/signup" title="Sign up">sign up</a>!</p>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/cancel.php
+++ b/views/login/cancel.php
@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Account cancellation</h2>
    <div class="box">
        <?php if ($success) : ?>
@ -8,5 +9,4 @@
            <p class="error justify">Cancellation failed. Please check the link you entered! Maybe the account was already deleted, in this case no further action is required.</p>
        <?php endif; ?>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/google_login.php
+++ b/views/login/google_login.php
@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Login up with Google</h2>
    <div class="box">
        <p class="error justify">Authenticating with Google failed. Please <a href="/login/google" title="Login with Google">retry</a>!</p>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/google_signup.php
+++ b/views/login/google_signup.php
@ -1,10 +1,14 @@
+@extra
 <?php
 $jsFiles = [
    'js/login/google_signup.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@endextra
+
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Sign up</h2>
    <div class="box">
        <form id="googleSignupForm" action="/signup/google" method="post" data-redirect-on-success="/">
@ -26,5 +30,4 @@ $jsFiles = [
            </div>
        </form>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/login.php
+++ b/views/login/login.php
@ -1,5 +1,6 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Login</h2>
    <div class="box">
        <form id="loginForm" action="/login" method="post" data-redirect-on-success="/">
@ -15,5 +16,4 @@
            </div>
        </form>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/signup.php
+++ b/views/login/signup.php
@ -1,10 +1,14 @@
+@extra
 <?php
 $jsFiles = [
    'js/login/signup.js',
 ];
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@endextra
+
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Sign up</h2>
    <div class="box">
        <form id="signupForm" action="/signup" method="post" data-redirect-on-success="/signup/success">
@ -30,5 +34,4 @@ $jsFiles = [
            </div>
        </form>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/login/signup_success.php
+++ b/views/login/signup_success.php
@ -1,8 +1,8 @@
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@extends('templates/layout_normal')
+
+@section('main')
    <h2>Sign up</h2>
    <div class="box">
        <p class="justify">Sign up was successful. Please check your email and click on the activation link to activate your account!</p>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/maps.php
+++ b/views/maps.php
@ -1,3 +1,4 @@
+@extra
 <?php
 $cssFiles = [
    'css/maps.css'
@ -9,8 +10,11 @@ if ($isAdmin) {
    $jsFiles[] = 'js/maps_admin.js';
 }
 ?>
-<?php require ROOT . '/views/templates/main_header.php'; ?>
-<?php require ROOT . '/views/templates/header.php'; ?>
+@endextra
+
+@extends('templates/layout_normal')
+
+@section('main')
    <div id="mapContainer">
        <?php foreach ($maps as $map): ?>
            <div class="mapItem">
@ -66,5 +70,4 @@ if ($isAdmin) {
            <?php endfor; ?>
        <?php endif; ?>
    </div>
-<?php require ROOT . '/views/templates/footer.php'; ?>
-<?php require ROOT . '/views/templates/main_footer.php'; ?>
+@endsection
--- a/views/templates/footer.php
+++ b/views/templates/footer.php
@ -1,5 +0,0 @@
-</main>
-<footer>
-    <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
- --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
-</footer>
--- a/views/templates/layout_full.php
+++ b/views/templates/layout_full.php
@ -0,0 +1,18 @@
+@extends('templates/mapguesser')
+
+@section('content')
+<header class="small">
+    <h1>
+        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
+            <img class="inline" width="1em" height="1em" src="<?= $_ENV['STATIC_ROOT'] ?>/img/icon.svg?rev=<?= REVISION ?>"><!--
+         --><span><?= $_ENV['APP_NAME'] ?></span>
+        </a>
+    </h1>
+    <p class="header">
+        @yields('subheader')
+    </p>
+</header>
+<main class="full">
+@yields('main')
+</main>
+@endsection
--- a/views/templates/layout_normal.php
+++ b/views/templates/layout_normal.php
@ -1,3 +1,5 @@
+@extends('templates/mapguesser')
+@section('content')
 <header>
    <h1>
        <a href="/" title="<?= $_ENV['APP_NAME'] ?>">
@ -22,3 +24,10 @@
    </p>
 </header>
 <main>
+@yields('main')
+</main>
+<footer>
+    <p><span class="bold"><?= $_ENV['APP_NAME'] ?></span> <?= str_replace('Release_', '', VERSION) ?></p><!--
+ --><p>&copy; Pőcze Bence <?= (new DateTime(REVISION_DATE))->format('Y') ?></p>
+</footer>
+@endsection
--- a/views/templates/main_footer.php
+++ b/views/templates/main_footer.php
@ -1,50 +0,0 @@
-    <script>
-        const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
-        const REVISION = '<?= REVISION ?>';
-        var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
-        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
-        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
-            const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
-        <?php endif; ?>
-    </script>
-    <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
-    <?php if (isset($jsFiles)) : ?>
-        <?php foreach ($jsFiles as $jsFile) : ?>
-            <?php
-            if (!preg_match('/^http(s)?/', $jsFile)) {
-                $jsFile = $_ENV['STATIC_ROOT'] .  '/' . $jsFile . '?rev=' . REVISION;
-            }
-            ?>
-            <script src="<?= $jsFile ?>"></script>
-        <?php endforeach; ?>
-    <?php endif; ?>
-    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
-        <script>
-            (function () {
-                // we don't want user to agree cookies when clicking on the notice itself
-                document.getElementById('cookiesNotice').onclick = function (e) {
-                    e.stopPropagation();
-                };
-
-                document.getElementById('agreeCookiesButton').onclick = function () {
-                    MapGuesser.agreeCookies();
-
-                    document.getElementById('cookiesNotice').style.display = 'none';
-                };
-
-                window.onclick = function () {
-                    MapGuesser.agreeCookies();
-                };
-            })();
-        </script>
-    <?php else: ?>
-        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
-            <script>
-                (function () {
-                    MapGuesser.initGoogleAnalitics();
-                })();
-            </script>
-        <?php endif; ?>
-    <?php endif; ?>
-</body>
-</html>
--- a/views/templates/main_header.php
+++ b/views/templates/main_header.php
@ -39,3 +39,56 @@
        <p id="modalText" class="justify marginTop"></p>
        <div id="modalButtons" class="right"></div>
    </div>
+    @yields('pagemodal')
+    @yields('content')
+    <script>
+        const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
+        const REVISION = '<?= REVISION ?>';
+        var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
+        const GOOGLE_MAPS_JS_API_KEY = '<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>';
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
+        <?php endif; ?>
+    </script>
+    @yields('pagescript')
+    <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
+    <?php if (isset($jsFiles)) : ?>
+        <?php foreach ($jsFiles as $jsFile) : ?>
+            <?php
+            if (!preg_match('/^http(s)?/', $jsFile)) {
+                $jsFile = $_ENV['STATIC_ROOT'] .  '/' . $jsFile . '?rev=' . REVISION;
+            }
+            ?>
+            <script src="<?= $jsFile ?>"></script>
+        <?php endforeach; ?>
+    <?php endif; ?>
+    <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
+        <script>
+            (function () {
+                // we don't want user to agree cookies when clicking on the notice itself
+                document.getElementById('cookiesNotice').onclick = function (e) {
+                    e.stopPropagation();
+                };
+
+                document.getElementById('agreeCookiesButton').onclick = function () {
+                    MapGuesser.agreeCookies();
+
+                    document.getElementById('cookiesNotice').style.display = 'none';
+                };
+
+                window.onclick = function () {
+                    MapGuesser.agreeCookies();
+                };
+            })();
+        </script>
+    <?php else: ?>
+        <?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
+            <script>
+                (function () {
+                    MapGuesser.initGoogleAnalitics();
+                })();
+            </script>
+        <?php endif; ?>
+    <?php endif; ?>
+</body>
+</html>