]> _ Git - fluidbook-toolbox.git/commitdiff
wip #6178 @0.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 27 Jul 2023 09:33:06 +0000 (11:33 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 27 Jul 2023 09:33:06 +0000 (11:33 +0200)
app/Elearning/QuizCompiler.php
app/Models/QuizTheme.php
resources/quizv2/js/quiz.js
resources/quizv2/style/style.sass
resources/views/quizv2/index.blade.php

index e36dc6d68a2a69aae88aa5e8747a6a21de27d430..1eef0bdc94d254cc85f0cebd0f59f0e3354a5aac 100644 (file)
@@ -2,12 +2,15 @@
 
 namespace App\Elearning;
 
+use App\Fields\FluidbookFont;
 use App\Jobs\Base;
 use App\Models\Quiz;
+use App\Models\QuizTheme;
 use Cubist\Scorm\Manifest;
 use Cubist\Scorm\Version;
 use Cubist\Util\CommandLine\Npx;
 use Cubist\Util\Files\VirtualDirectory;
+use Cubist\Util\Graphics\Color;
 
 class QuizCompiler extends Base
 {
@@ -17,14 +20,22 @@ class QuizCompiler extends Base
      */
     protected $quiz;
 
+
+    /**
+     * @var QuizTheme
+     */
+    protected $theme;
+
     protected $dest;
     protected $forceScorm = false;
 
     protected $sassVariables = [];
+    protected $mixDirectories = [];
 
     public function __construct($quiz, $dest, $forceScorm = false)
     {
         $this->quiz = Quiz::withoutGlobalScopes()->find($quiz);
+        $this->theme = QuizTheme::withoutGlobalScopes()->find($this->quiz->theme ?: 3);
         $this->compilePath = protected_path('quiz/compile/' . $this->quiz->id);
         $this->dest = $dest;
         $this->forceScorm = $forceScorm;
@@ -47,7 +58,6 @@ class QuizCompiler extends Base
 
         $vdir->file_put_contents('index.html', $html);
 
-
         if ($this->forceScorm || $this->quiz->getAttribute('scorm')) {
             $scormVersion = $this->quiz->getAttribute('scorm_version') ?: Version::SCORM_1_2;
             $manifest = new Manifest($this->quiz->getAttribute('title'), $scormVersion, $this->quiz->getAttribute('client') ?: backpack_user()->getCompanyNameAttribute(), $this->quiz->getAttribute('project') ?: 'Quiz');
@@ -58,10 +68,50 @@ class QuizCompiler extends Base
 
     protected function writeStyles()
     {
+        // Main texts color
+        $this->sassVariables['texts-color'] = $this->theme->textsColor;
+        if ($this->theme->textsColor == 'auto' || !$this->theme->textsColor) {
+            // IF auto mode, check between black and white which have the biggest distance (i.e. most contrast) with neutralColor
+            $neutral = new Color($this->theme->neutralColor);
+            $black = new Color('#000000');
+            $white = new Color('#ffffff');
+            $distBlack = $neutral->distance($black);
+            $distWhite = $neutral->distance($white);
+            if ($distWhite > $distBlack) {
+                $this->sassVariables['texts-color'] = '#ffffff';
+            } else {
+                $this->sassVariables['texts-color'] = '#000000';
+            }
+        }
+        // Font
+        $this->sassVariables['font'] = $this->_font($this->theme->font);
+        // Colors
+        $this->sassVariables['neutral-color'] = $this->theme->neutralColor;
 
         $this->writeSass();
     }
 
+    protected function _font($f)
+    {
+        $font = FluidbookFont::getAvailableFonts()[$f];
+        if ($font['font_kit']) {
+            $this->addFontKit($font['font_kit']);
+        }
+        return $font['font_family'];
+    }
+
+    public function addFontKit($kit)
+    {
+        if (!$kit) {
+            return;
+        }
+
+        $kitPath = resource_path('fluidbookpublication/fonts/' . $kit);
+        `mkdir -p $this->compilePath/style/font;cp -r $kitPath/*  $this->compilePath/style/font/`;
+        $this->mixDirectories["style/font"] = "dist/css";
+        file_put_contents($this->compilePath . '/style/style.sass', '@import font/font.css' . "\n" . file_get_contents($this->compilePath . '/style/style.sass'));
+    }
+
     protected function writeData(&$data)
     {
         $data = $this->quiz->getData();
@@ -86,16 +136,19 @@ class QuizCompiler extends Base
         $compile = new VirtualDirectory($this->compilePath);
         $compile->copyDirectory(resource_path('quizv2/js'), 'js');
         $compile->copyDirectory(resource_path('quizv2/style'), 'style');
-        $mix = 'const mix = require("laravel-mix");
-mix.setPublicPath("dist").js("js/quiz.js", "js")
-    .sass("style/style.sass", "css").options({processCssUrls: false}).version();
-';
-        $compile->file_put_contents('webpack.mix.js', $mix);
         $compile->sync(true);
     }
 
     protected function runWebpack()
     {
+        $mix = 'const mix = require("laravel-mix");';
+        foreach ($this->mixDirectories as $from => $to) {
+            $mix .= 'mix.copyDirectory("' . $from . '","' . $to . '");';
+        }
+        $mix .= 'mix.setPublicPath("dist").js("js/quiz.js", "js")
+    .sass("style/style.sass", "css").options({processCssUrls: false}).version();';
+        file_put_contents($this->compilePath . '/webpack.mix.js', $mix);
+
         $cli = new Npx();
         $cli->cd($this->compilePath);
         $cli->setModule('cross-env process.env.local=1 mix --production');
index de82b52f940fc7905921f1429c4fb4fb6469e5c6..22cd18b3000390903d7fbec422eeaa783b2f621e 100644 (file)
@@ -14,7 +14,6 @@ use Cubist\Backpack\Magic\Fields\FormSection;
 use Cubist\Backpack\Magic\Fields\FormSectionDescription;
 use Cubist\Backpack\Magic\Fields\FormSeparator;
 use Cubist\Backpack\Magic\Fields\SelectFromArray;
-use League\Glide\Manipulators\Background;
 
 class QuizTheme extends ToolboxModel
 {
index 114f867bc11a2d699cb684531106bf5c837ebafb..45cc9efb3aefed18b18458a178bf1e5f3aca9a92 100644 (file)
@@ -1,4 +1,4 @@
-import $ from "jquery";
+import $ from "cash-dom";
 import gsap from "gsap";
 import {CubeSCORM} from '/application/resources/scorm/scorm';
 
@@ -13,9 +13,7 @@ function Quiz() {
 Quiz.prototype = {
     init: function () {
         this.data = new QuizData(this);
-
         // ICI tout commence vraiment
-        alert(':)');
     },
 }
 
index 87b33b202743489f5fa6235bc2f95008e931c94b..6a508ed3dfa5cce4e7dd0dfdf77d035421663e2b 100644 (file)
@@ -1,3 +1,8 @@
 @import 001-global-variables
 @import 002-item-variables
 @import 003-reset
+
+body
+    background-color: $neutral-color
+    font-family: $font
+    color: $texts-color
index 9922ccf6e4a6f85e142957c78efb85777508afba..afab7480626a4e0d79060eabe889ad336bd49876 100644 (file)
@@ -12,6 +12,7 @@
 <body>
 @include("quizv2.icons")
 <div id="quiz">
+    TEST
 </div>
 <script src="js/quiz.js"></script>
 </body>