Jeedom v4.4 en FullJS et bootstrap

Salon des Développeurs Aide Programmation
1

Salut,

J’essaie très très doucement de voir pour passer solcast en full-js au niveau des templates (widget) pour le moment.

Je n’arrive pas à comprendre pourquoi ça casse l’affichage et comment faire pour régler ça.

Le core est passé volontairement en mode fulljs
image

J’ai été récupérer le code bootstrap en js (version 5.0.) que j’ai intégré dans le plugin :
image

bootstrap.min.css dans le répertoire css
bootstrap.min.js et bootstrap.min.js.map dans le répertoire js

Le début du code du template :

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd #custom_layout# #eqLogic_class# #class#"
  data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#"
  data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#"
  style="width: #width#;height: #height#;#style#">
  <link rel="stylesheet" href="plugins/solcast/3rdparty/bootstrap/css/bootstrap.min.css" />
  <center class="widget-name">
    <span class="warning" title="#alert_name#">
      <i class='#alert_icon#'></i>
    </span>
    <span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
    <a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
  </center>

  <script type="text/javascript" src="plugins/solcast/3rdparty/bootstrap/js/bootstrap.min.js"></script>

  <div id="chart-xrange#id#">
    <div id="chart-xrange-today#id#" class="chart" style="height:170px;"></div>
    <div id="chart-xrange-tomorrow#id#" class="chart" style="height:170px;"></div>
  </div>

Sans le chargement du bootstrap.min.css, l’affichage de Jeedom est OK mais le carousel est KO (les graphiques Aujourd’hui et Mois ne devraient pas être l’un à la suite de l’autre :

image
image918×894 37.6 KB

Avec le chargement du bootstrap.min.css, l’affichage de Jeedom est KO mais le carousel est OK :

image
image1918×918 55.8 KB

Pas d’erreur particulièrement affolante dans la console

Vous voyez d’où ça vient et comment faire ?

Version Jeedom 4.4.5 Bêta

2

Bonjour,

Bootstrap est déjà inclu dans le core/3rdparty/bootstrap mais pas la même version (v3.4.1 sur alpha) à mon avis c’est la source de tes problèmes. ça peut causer des conflits / regression de toute sorte, d’avoir 2 versions différentes du JS et du CSS, avec des collisions de noms de fonctions, des changements majeurs pas pris en compte et j’en passe…

Utilise la version du core, ça me parait le plus safe.

Je ne suis pas spécialiste du nodeJS, mais on ne devrait pas avoir un package.json dans le core pour installer toutes ces 3rd-party ? (et aussi un fichier de lock) (ça rejoint une discussion en cours pour les dépendances php - composer )

3

Salut,

J’étais un peu sur cette idée là (de conflit) mais je ne vois pas d’appel à une autre librairie en passant en core JS du coup je ne vois pas trop pourquoi.

Toutefois possible qu’ils aient intégré des choses dans le core et sans utilisation d’un .JS externe, ce qui poserait alors problème.

Il n’y a qu’à partir de bootstrap 5 qu’il n’y a plus de jquery donc il faut forcément passer dessus, je crois ?

4

Hello,
c’est ici :

5

Bon… ben je vais voir pour revenir sur mes modifications en cours alors parce que ça marchera jamais l’affaire.

Merci :kissing:

6

ça semble logique en effet :smiley:

La version bootstrap actuelle du core repose encore sur jquery !?

7

bootstrap.min.js n’est plus chargé en mode core FullJS, certainement car il s’appui sur jQuery et de plus en 4.4, il y a eu création de libs interne…

8

Faudrait sinon passer sur une autre lib pour le carousel :

9

Ha, désolé du coup ma 1ere réponse à Bison est complètement à côté de la plaque, il ne devrait pas y avoir de conflit puisqu’il a bien activé le mode full JS … :confused:

Je comprends qu’on veut garder les libs dispo pour les plugins qui les utilisent encore, mais du coup quelle galère! OK tu es bien en mode full JS mais tu n’es pas à l’abris qu’un autre plugin utilise lui toujours JQuery et le bootstrap ancienne version ? Et il se passe quoi dans ce cas !?

10

Il faut bien différencier le bootstrap js et css, le core dans tous les cas ne charge pas le bootstrap css, car il utilise sont propore bootstrap personnalisé.

Si c’est lui qui le charge (sans le css biensur) je pense pas qu’il y est de conflit.

11

Je tente de voir swiper, pour le moment ça marche pas, je cherche :slight_smile:

12

Je l’utilise dans un de mes widget, faudrait que je jette un oeil comment j’ai fait. et pas sur que ce widget soit en full js.

Edit :

https://phpvarious.github.io/documentation/widget/fr_FR/widget_scenario/swiper_battery_jeedom/#Paramètres%20optionnels

Edit2 :

Je m’aperçois que dans mon git j’ai pas upload le fichier min.js et css, personne ne ma remonté cet oubli…
constat → personne ne l’utilise :rofl:

13

:astonished:

Merci @Phpvarious je regarde ça :slight_smile:

Edit : Super ça marche au poil et ça ne déglingue plus Jeedom à cause du chargement d’un autre css bootstrap ! :smiley:

Encore un peu de customisation et ça devrait le faire, je reviens fermer ce post dans quelques jours

Note : Je n’avais pas pris les fichiers bundle, je pense que c’est pour ça que la navigation ne s’affichait pas, merci pour l’exemple :slight_smile:

1 « J'aime »