LP: Restoring injection of css/js libs in lp content - refs BT#21508

Author: AngelFQC

assets/css/legacy/frameReadyLoader.scss

@@ -0,0 +1,38 @@
+@tailwind base;
+
+@layer base {
+  :root {
+    --color-primary-base: 46 117 163;
+    --color-primary-gradient: 36 77 103;
+    --color-primary-button-text: 46 117 163;
+    --color-primary-button-alternative-text: 255 255 255;
+
+    --color-secondary-base: 243 126 47;
+    --color-secondary-gradient: 224 100 16;
+    --color-secondary-button-text: 255 255 255;
+
+    --color-tertiary-base: 51 51 51;
+    --color-tertiary-gradient: 0 0 0;
+    --color-tertiary-button-text: 255 255 255;
+
+    --color-success-base: 119 170 12;
+    --color-success-gradient: 83 127 0;
+    --color-success-button-text: 255 255 255;
+
+    --color-info-base: 13 123 253;
+    --color-info-gradient: 0 84 211;
+    --color-info-button-text: 255 255 255;
+
+    --color-warning-base: 245 206 1;
+    --color-warning-gradient: 186 152 0;
+    --color-warning-button-text: 0 0 0;
+
+    --color-danger-base: 223 59 59;
+    --color-danger-gradient: 180 0 21;
+    --color-danger-button-text: 255 255 255;
+
+    --color-form-base: 46 117 163;
+  }
+}
+
+@import "../scss/libs/mediaelementjs/styles";

assets/js/legacy/frameReadyLoader.js

@@ -0,0 +1,6 @@
+import { useMediaElementLoader } from "../../vue/composables/mediaElementLoader"
+import "../../css/legacy/frameReadyLoader.scss"
+
+const { domLoader: mejsLoader } = useMediaElementLoader()
+
+mejsLoader()

assets/vue/composables/mediaElementLoader.js

@@ -56,9 +56,7 @@ function loader() {
 }
 
 function domLoader() {
-  document.addEventListener("DOMContentLoaded", function () {
-    loader()
-  })
+  addedNodesCallback(document)
 }
 
 export function useMediaElementLoader() {

public/main/inc/lib/display.lib.php

@@ -2667,9 +2667,23 @@ public static function getFrameReadyBlock(
         string $itemType = '',
         string $jsConditionalFunction = 'function () { return false; }'
     ): string {
+        $colorThemeRepo = Container::$container->get(ColorThemeRepository::class);
+        $router = Container::getRouter();
+
+        $colorTheme = $colorThemeRepo->getActiveOne();
+        $colorThemeItem = '';
+
+        if ($colorTheme) {
+            $colorThemeItem = '{ type: "stylesheet", src: "'.$router->generate('chamilo_color_theme').'" },';
+        }
+
         return '$.frameReady(function() {},
             "'.$frameName.'",
             [
+                { type: "script", src: "/build/runtime.js" },
+                { type: "script", src: "/build/legacy_framereadyloader.js" },
+                { type: "stylesheet", src: "/build/legacy_framereadyloader.css" },
+                '.$colorThemeItem.'
             ],
             '.$jsConditionalFunction
             .');';

webpack.config.js

@@ -19,6 +19,7 @@ Encore.setOutputPath("public/build/")
   .addEntry("legacy_free-jqgrid", "./assets/js/legacy/free-jqgrid.js")
   .addEntry("legacy_lp", "./assets/js/legacy/lp.js")
   .addEntry("legacy_document", "./assets/js/legacy/document.js")
+  .addEntry("legacy_framereadyloader", "./assets/js/legacy/frameReadyLoader.js")
 
   .addEntry("vue", "./assets/vue/main.js")
   .addEntry("vue_installer", "./assets/vue/main_installer.js")