From 73ccec5e086acff396b2997cf468c3c5fa7557c8 Mon Sep 17 00:00:00 2001 From: Julien Rosset Date: Tue, 30 Apr 2024 19:06:45 +0200 Subject: [PATCH] Add header, jQuery and Home page content --- assets/app.js | 24 +++++ assets/styles/_flahses.scss | 3 - assets/styles/_layout.scss | 18 ++++ assets/styles/_xdebug.scss | 6 ++ assets/styles/app.scss | 3 +- assets/utils.js | 163 ++++++++++++++++++++++++++++++ importmap.php | 12 ++- src/Controller/CoreController.php | 3 - templates/base.html.twig | 79 ++++----------- templates/core/main.html.twig | 4 +- templates/symfony.html.twig | 63 ++++++++++++ 11 files changed, 307 insertions(+), 71 deletions(-) delete mode 100644 assets/styles/_flahses.scss create mode 100644 assets/styles/_layout.scss create mode 100644 assets/styles/_xdebug.scss create mode 100644 assets/utils.js create mode 100644 templates/symfony.html.twig diff --git a/assets/app.js b/assets/app.js index a43f453..4e44013 100644 --- a/assets/app.js +++ b/assets/app.js @@ -4,3 +4,27 @@ import './styles/app.scss'; //region Bootstrap import 'bootstrap'; //endregion +//region jQuery +import $ from 'jquery'; +//endregion +//region Utils +import Utils from 'utils'; + +window.$ = $; // Declare $ as a global variable, accessible in all files +//endregion + +//region Header & Footer fixe (overlay) +const headerHeight = Utils.getElementRealHeight($('header:not(.overlay-not-fixed)')); +const footerHeight = Utils.getElementRealHeight($('footer:not(.overlay-not-fixed)')); +$('#div-body').css( + { + 'padding-top': headerHeight, + 'padding-bottom': footerHeight, + }, +); +$('html').css( + { + 'scroll-padding-top': headerHeight, + }, +); +//endregion \ No newline at end of file diff --git a/assets/styles/_flahses.scss b/assets/styles/_flahses.scss deleted file mode 100644 index 3325661..0000000 --- a/assets/styles/_flahses.scss +++ /dev/null @@ -1,3 +0,0 @@ -#flashes { - font-size : 0.75rem; -} \ No newline at end of file diff --git a/assets/styles/_layout.scss b/assets/styles/_layout.scss new file mode 100644 index 0000000..6398144 --- /dev/null +++ b/assets/styles/_layout.scss @@ -0,0 +1,18 @@ +header, footer { + background-color : var(--bs-body-bg); + width : 100%; + margin : 0; + + &:not(.overlay-not-fixed) { + position : fixed; + z-index : 10; + } +} +header { + top : 0; + height : 30px; + border-bottom : 1px solid black; +} +footer { + bottom : 0; +} diff --git a/assets/styles/_xdebug.scss b/assets/styles/_xdebug.scss new file mode 100644 index 0000000..247443b --- /dev/null +++ b/assets/styles/_xdebug.scss @@ -0,0 +1,6 @@ +pre.xdebug-var-dump { + position : relative; + background-color : rgb(255, 255, 255); + z-index : 10000; + margin-bottom : 0; +} \ No newline at end of file diff --git a/assets/styles/app.scss b/assets/styles/app.scss index aad57e1..63c4c96 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -1,2 +1,3 @@ @import 'bootstrap'; -@import 'flahses'; \ No newline at end of file +@import 'xdebug'; +@import 'layout'; diff --git a/assets/utils.js b/assets/utils.js new file mode 100644 index 0000000..2c519f5 --- /dev/null +++ b/assets/utils.js @@ -0,0 +1,163 @@ +export default class Utils { + /** + * Une variable vaut-elle "undefined" ? + * + * @param {any} variable La variable à tester + * + * @returns {boolean} Vrai si la variable vaut "undefined", sinon Faux + */ + static isUndefined (variable) { + return typeof variable === 'undefined'; + } + /** + * Une variable est-elle une chaîne de caractère ? + * + * @param {any} variable La variable à tester + * + * @returns {boolean} Vrai si la variable est uen chaîne de caractères, sinon Faux + */ + static isString (variable) { + return typeof variable === 'string' || variable instanceof String; + } + /** + * Une variable est-elle une chaine de caractère vide ou équivalent (undefined ou null) ? + * + * @param {any} variable La variable à tester + * + * @returns {boolean} Vrai si la variable est une chaine de caractères vide (ou équivalent) + */ + static empty_str (variable) { + return Utils.isUndefined(variable) || variable === null || variable === ''; + } + + /** + * Vérifie qu'au moins une case à cocher d'une liste de cases à cocher est bien cochée + * + * @param {jQuery} list Une liste de case à cocher + * + * @returns {boolean} Vrai si au moins l'un de case à cocher est cochée. + */ + static checkAtLeastOnChecked (list) { + return list.filter(':checked').length > 0; + } + + /** + * Est-ce qu'un objet jQuery possède un attribut et qu'il est différent de Faux + * + * @param {jQuery} objJquery L'objet jQuery + * @param {string} attrName Le nom de l'attribut + * + * @returns {boolean} Vrai si l'attribut existe et est différent de Faux. + */ + static hasAttr (objJquery, attrName) { + let val = objJquery.attr(attrName); + return !Utils.isUndefined(val) && val !== false; + } + /** + * Récupère le formulaire associé à un champ + * + * Tient compte de l'attribut "form" si renseigné. + * + * @param {jQuery} input Le champ pour lequel on veut le formulaire + * + * @returns {jQuery} Le formulaire correspondant + */ + static getFormOfInput (input) { + let form; + + if (Utils.hasAttr(input, 'form')) { + form = $('#' + input.attr('form')); + } + else { + form = input.parents('form').first(); + } + + return form; + } + + /** + * Supprime les doublons d'un tableau + * + * @param {any[]} array Le tableau à dédoublonner + * + * @returns {any[]} Le tableau dédoublonné + */ + static array_uniq (array) { + return Array.from(new Set(array)); + } + + /** + * Met la première lettre d'une chaine de caractères en majuscule + * + * @param {string} string La chaine de caractères + * + * @returns {string} La chaine de caractères avec la première lettre en majuscule + */ + static string_ucFirst (string) { + return string.charAt(0).toUpperCase() + string.slice(1); + } + + /** + * Calcule la taille RÉELLE d'un élément jQuery + * + * Prends la plus grande valeur entre la hauteur CSS de l'élément et la hauteur réelle de ses enfants. + * + * Cela permet de "corriger" le problème des conteneurs plus petit que leurs enfants + * + * @param {jQuery} element + * + * @returns {int} La hauteur réelle (en px) + */ + static getElementRealHeight (element) { + if (element.length <= 0) { + return 0; + } + const elementHeight = element.outerHeight(true); + + let childrenHeight = 0; + element.children().each(function () { + childrenHeight = Utils.getElementRealHeight($(this)); + }); + + return parseInt(childrenHeight > elementHeight ? childrenHeight : elementHeight, 10); + } + + /** + * Ajoute des arguments à une URL + * + * @param {object} arguments Les arguments à ajouter + * @param {string} url L'URL à laquelle ajouter les arguments ; celle actuelle (location.href) si non fournie + * + * @return {string} L'URL de résultat + */ + static addArgumentsToUrl (args, url = undefined) { + if (Utils.isUndefined(url)) { + url = document.location.href; + } + + let urlObj = new URL(url); + for (const [argumentName, argumentValue] of Object.entries(args)) { + urlObj.searchParams.set(argumentName, argumentValue); + } + + return urlObj.toString(); + } + + /** + * Récupère une valeur data-*, avec gestion valeur par défaut + * + * @param {jQuery} element L'élément jQuery + * @param {string} key La clé de la donnée voulue + * @param {any} defaultValue La valeur par défaut + * + * @return {any} La valeur de la donnée + */ + static getData (element, key, defaultValue = undefined) { + const value = element.data(key); + if (Utils.isUndefined(value)) { + return defaultValue; + } + + return value; + } +} \ No newline at end of file diff --git a/importmap.php b/importmap.php index 766eee7..051ed8c 100644 --- a/importmap.php +++ b/importmap.php @@ -12,14 +12,20 @@ * The "importmap:require" command can be used to add new entries to this file. */ return [ - 'app' => [ - 'path' => './assets/app.js', + 'app' => [ + 'path' => './assets/app.js', 'entrypoint' => true, ], - 'bootstrap' => [ + 'bootstrap' => [ 'version' => '5.3.3', ], '@popperjs/core' => [ 'version' => '2.11.8', ], + 'jquery' => [ + 'version' => '3.7.1', + ], + 'utils' => [ + 'path' => './assets/utils.js', + ], ]; diff --git a/src/Controller/CoreController.php b/src/Controller/CoreController.php index 004a41f..7fbcbe2 100644 --- a/src/Controller/CoreController.php +++ b/src/Controller/CoreController.php @@ -12,9 +12,6 @@ use Symfony\Component\Routing\Attribute\Route; class CoreController extends AbstractController { #[Route('/', name: 'core_main')] public function main (): Response { - $this->addFlash('danger', 'This is a dangerous looking message'); - $this->addFlash('success', 'All is fine !'); - return $this->render('core/main.html.twig'); } } diff --git a/templates/base.html.twig b/templates/base.html.twig index e48782a..6043255 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -1,63 +1,22 @@ -{% extends "/html.html.twig" %} +{% extends "/symfony.html.twig" %} -{% block headContent %} - {% block headContentMeta %} - - - {% endblock %} - - {% block title %}{% endblock %} - - {% block CSS %}{% endblock %} - - {% block JS_head %}{% endblock %} +{% block headerTag %} +
{% endblock %} - -{% block bodyTag %} - - {% endblock %} - {% block bodyContent %} - {% block headerTag %} -
- {% endblock %} - {% block headerContent %}{% endblock %} -
- - {% block divBodyTag %} -
- {% endblock %} - {% block asideLeft %}{% endblock %} - - {% block centerDivBodyTag %} -
- {% endblock %} - - {% block sectionTop %}{% endblock %} - - {% include '/_flashes.html.twig' %} - - {% block sectionBefore %}{% endblock %} - {% block mainTag %} -
- {% endblock %} - {% block mainContent %}{% endblock %} -
- {% block sectionAfter %}{% endblock %} +{% block headerContent %} +
- - {% block footerTag %} -
- {% endblock %} - {% block footerContent %}{% endblock %} -
- -
- {% block bodyHidden %}{% endblock %} -
- - {% block JS %} - {% block importmap %}{{ importmap('app') }}{% endblock %} - {% endblock %} - {% endblock %} + +{% endblock %} \ No newline at end of file diff --git a/templates/core/main.html.twig b/templates/core/main.html.twig index b4b3340..0204449 100644 --- a/templates/core/main.html.twig +++ b/templates/core/main.html.twig @@ -3,5 +3,7 @@ {% block title %}Home{% endblock %} {% block mainContent %} - Home +

Web EDM

+

Welcome on Web EDM, the Web Electronic Document Manager.

+

Please Sign In or Sign out to start.

{% endblock %} diff --git a/templates/symfony.html.twig b/templates/symfony.html.twig new file mode 100644 index 0000000..e48782a --- /dev/null +++ b/templates/symfony.html.twig @@ -0,0 +1,63 @@ +{% extends "/html.html.twig" %} + +{% block headContent %} + {% block headContentMeta %} + + + {% endblock %} + + {% block title %}{% endblock %} + + {% block CSS %}{% endblock %} + + {% block JS_head %}{% endblock %} +{% endblock %} + +{% block bodyTag %} + + {% endblock %} + {% block bodyContent %} + {% block headerTag %} +
+ {% endblock %} + {% block headerContent %}{% endblock %} +
+ + {% block divBodyTag %} +
+ {% endblock %} + {% block asideLeft %}{% endblock %} + + {% block centerDivBodyTag %} +
+ {% endblock %} + + {% block sectionTop %}{% endblock %} + + {% include '/_flashes.html.twig' %} + + {% block sectionBefore %}{% endblock %} + {% block mainTag %} +
+ {% endblock %} + {% block mainContent %}{% endblock %} +
+ {% block sectionAfter %}{% endblock %} +
+ {% block asideRight %}{% endblock %} +
+ + {% block footerTag %} +
+ {% endblock %} + {% block footerContent %}{% endblock %} +
+ +
+ {% block bodyHidden %}{% endblock %} +
+ + {% block JS %} + {% block importmap %}{{ importmap('app') }}{% endblock %} + {% endblock %} + {% endblock %}