optimized client assets generator

completed two preloader sample

app/Console/Commands/clientAssetGenerator.php

@@ -2,6 +2,7 @@
 
 namespace App\Console\Commands;
 
+use App\Models\Part;
 use Illuminate\Console\Command;
 use Illuminate\Support\Facades\File;
 
@@ -36,6 +37,7 @@ class clientAssetGenerator extends Command
         $vars['xshop-shadow'] = $gfxes['shadow'] ?? '2px 2px 4px #777777';
 
         // prepare client.scss and add gfx variable
+        $js = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW JS INTO client-custom" . PHP_EOL;
         $variables = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW SCSS INTO client-custom" . PHP_EOL;
         $variables .= ":root{" . PHP_EOL;
         foreach ($vars as $k => $var) {
@@ -43,19 +45,35 @@ class clientAssetGenerator extends Command
         }
         $variables .= "}" . PHP_EOL . PHP_EOL;
 
-        // add custom scss
+        // add custom scss and js
         $files = File::allFiles(resource_path() . '/sass/client-custom');
 
         foreach ($files as $file) {
-            if ($file->getType() == 'file' && $file->getExtension() == 'scss'){
+            if ($file->getType() == 'file' && $file->getExtension() == 'scss') {
-                $variables .= '@import "client-custom/'.
+                $variables .= '@import "client-custom/' .
-                substr(trim($file->getBasename(),'_'),0,-5)
+                    substr(trim($file->getBasename(), '_'), 0, -5)
-                    .'";'.PHP_EOL;
+                    . '";' . PHP_EOL;
             }
 
         }
+        $files = File::allFiles(resource_path() . '/js/client-custom');
+
+        foreach ($files as $file) {
+            if ($file->getType() == 'file' && $file->getExtension() == 'js') {
+                $js .= 'import "./client-custom/' . $file->getBasename() . '";' . PHP_EOL;
+            }
+
+        }
+        // add parts scss & js
+        foreach (Part::all() as $part) {
+            $variables .= '@import "../views/segments/' . $part->segment . '/'
+                . $part->part . '/' . $part->part . '";' . PHP_EOL;
+            $js .= 'import "../views/segments/' . $part->segment . '/'
+                . $part->part . '/' . $part->part . '.js";' . PHP_EOL;
+        }
 
         // save scss
         file_put_contents(resource_path() . '/sass/client.scss', $variables);
+        file_put_contents(resource_path() . '/js/client.js', $js);
     }
 }

app/Helpers/Helper.php

@@ -327,6 +327,7 @@ function lastCrump()
                 $title = __('Trashed') . ' ' . __($routes[count($routes) - 2]);
                 $icon = 'ri-delete-bin-6-line';
                 break;
+
             case 'design':
                 $title = __('Design') . ' ' . __($routes[count($routes) - 2]);
                 $icon = 'ri-paint-brush-line';
@@ -620,6 +621,12 @@ function imageSizeConvertValidate($size)
 }
 
 
+/**
+ * nested model with data
+ * @param $items
+ * @param $parent_id
+ * @return string
+ */
 function nestedWithData($items, $parent_id = null)
 {
     $r = '<ol class="ol-sortable">' . PHP_EOL;
@@ -634,3 +641,23 @@ function nestedWithData($items, $parent_id = null)
     $r .=  '</ol>' . PHP_EOL;
     return $r;
 }
+
+
+/**
+ * check has part if return first
+ * @param $areaName
+ * @return \App\Models\Part|false
+ */
+function hasPart($areaName){
+    $a = \App\Models\Area::where('name',$areaName)->first();
+    if ($a == null){
+        return false;
+    }
+
+    $p = \App\Models\Part::where('area_id',$a->id)->first();
+    if ($p == null){
+        return  false;
+    }
+    return $p ;
+
+}

app/Http/Controllers/Admin/AreaController.php

@@ -66,6 +66,7 @@ class AreaController extends Controller
                 $part->save();
             }
         }
+        \Artisan::call('client');
         logAdmin(__METHOD__,__CLASS__,$area->id);
         return redirect()->back()->with(['message' => __('area :NAME of website updated',['NAME' => $area->name])]);
     }

app/Models/Part.php

@@ -8,4 +8,12 @@ use Illuminate\Database\Eloquent\Model;
 class Part extends Model
 {
     use HasFactory;
+
+
+    public function getBlade(){
+        $className= ucfirst($this->part);
+        $handle = "\\Resources\\Views\\Segments\\$className";
+        $handle::onMount($this);
+        return 'segments.'.$this->segment.'.'.$this->part.'.'.$this->part;
+    }
 }

resources/js/client-custom/confirm.js

@@ -0,0 +1 @@
+console.log('run confirm js');

resources/js/client.js

@@ -1 +1,4 @@
-console.log('client run');
+// PLEASE DO NOT EDIT THIS FILE, 
+// IF YOU WANT ADD ANY CODE CREATE NEW JS INTO client-custom
+import "./client-custom/confirm.js";
+import "../views/segments/preloader/PreloaderCircle/PreloaderCircle.js";

resources/sass/client-custom/_general.scss

@@ -7,3 +7,9 @@ h1{
     color: var(--xshop-primary);
     text-shadow: var(--xshop-shadow);
 }
+
+
+
+#website-preloader{
+    transition: 500ms;
+}

resources/sass/client.scss

@@ -1,13 +1,14 @@
 // PLEASE DO NOT EDIT THIS FILE, 
 // IF YOU WANT ADD ANY CODE CREATE NEW SCSS INTO client-custom
 :root{
---xshop-background:#eeeeee;
+--xshop-background:#ffffff;
---xshop-primary:#6e0000;
+--xshop-primary:#00b3ff;
---xshop-secondary:#ff0000;
+--xshop-secondary:#003aad;
 --xshop-text:#111111;
 --border-radius:7px;
 --xshop-shadow:2px 2px 4px #777777;
 }
 
 @import "client-custom/assetsNode";
-@import "client-custom/test";
+@import "client-custom/general";
+@import "../views/segments/preloader/PreloaderCircle/PreloaderCircle";

resources/views/components/setting-field.blade.php

@@ -75,7 +75,7 @@
                         </a>
                     </div>
                 @endif
-                <div class="col-md-5">
+                <div class="col-md-5 text-center">
                     @if($ext == 'mp4')
                         <video controls src="{{asset('upload/file/'.str_replace('_','.',$setting->key))}}?{{time()}}" class="img-fluid" style="max-height: 150px;max-width: 45%" ></video>
                         <br>

resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.blade.php

@@ -1 +1,10 @@
-<div id='PreloaderCircle'></div>
+<div id='PreloaderCircle'>
+    <div class="preloader">
+        <svg viewBox="0 0 102 102" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path class="big-circle" d="M101 51C101 78.6142 78.6142 101 51 101C23.3858 101 1 78.6142 1 51"
+                  stroke-width="2"/>
+            <path class="small-circle" d="M91 51C91 28.9086 73.0914 11 51 11C28.9086 11 11 28.9086 11 51"
+                   stroke-width="2"/>
+        </svg>
+    </div>
+</div>

resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.js

@@ -0,0 +1,22 @@
+let isHidePreloader = false;
+const hidePreloader= function (){
+    if (!isHidePreloader){
+        document.querySelector('#website-preloader').style.opacity = 0;
+        setTimeout(()=>{
+            document.querySelector('#website-preloader').remove();
+        },510);
+        isHidePreloader = true;
+    }
+};
+
+window.addEventListener('load',function () {
+    hidePreloader();
+});
+
+// if field and didn't load after 10s
+setTimeout(()=>{
+    hidePreloader();
+},10000);
+
+
+

resources/views/segments/preloader/PreloaderCircle/PreloaderCircle.scss

@@ -1,3 +1,63 @@
 #PreloaderCircle {
     // scss
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999999;
+    background: var(--xshop-background);
+
+
+    @keyframes draw-small {
+        0% {
+            stroke-dashoffset: 0;
+            transform: rotate(0deg);
+        }
+        100% {
+            stroke-dashoffset: 210;
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes draw-big {
+        0% {
+            stroke-dashoffset: 0;
+            transform: rotateY(180deg) rotate(360deg);
+        }
+        100% {
+            stroke-dashoffset: 240;
+            transform: rotateY(180deg) rotate(0deg);
+        }
+    }
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+    * {
+        box-sizing: border-box;
+    }
+    .preloader {
+        position: absolute;
+        width: 102px;
+        height: 102px;
+        left: 50%;
+        top: 50%;
+        min-height: 102px;
+        transform: translateX(-50%) translateY(-50%);
+        .small-circle {
+            stroke-dasharray: 210;
+            stroke-dashoffset: 210;
+            transform-origin: 50%;
+            animation: 1s draw-small infinite alternate;
+            stroke: var(--xshop-primary);
+        }
+        .big-circle {
+            stroke-dasharray: 240;
+            stroke-dashoffset: 240;
+            transform-origin: 50%;
+            animation: 1s draw-big infinite alternate 0.5s;
+            stroke: var(--xshop-secondary);
+        }
+    }
+
 }

resources/views/segments/preloader/PreloaderImage/PreloaderImage.blade.php

@@ -1 +1,5 @@
-<div id='PreloaderImage'></div>
+<div id='PreloaderImage'>
+    <div>
+        <img src="{{asset('upload/images/PreloaderImage.gif')}}" alt="preloader">
+    </div>
+</div>

resources/views/segments/preloader/PreloaderImage/PreloaderImage.js

@@ -0,0 +1,22 @@
+let isHidePreloader = false;
+const hidePreloader= function (){
+    if (!isHidePreloader){
+        document.querySelector('#website-preloader').style.opacity = 0;
+        setTimeout(()=>{
+            document.querySelector('#website-preloader').remove();
+        },510);
+        isHidePreloader = true;
+    }
+};
+
+window.addEventListener('load',function () {
+    hidePreloader();
+});
+
+// if field and didn't load after 10s
+setTimeout(()=>{
+    hidePreloader();
+},10000);
+
+
+

resources/views/segments/preloader/PreloaderImage/PreloaderImage.php

@@ -3,16 +3,27 @@
 namespace Resources\Views\Segments;
 
 use App\Models\Part;
+use App\Models\Setting;
+use Illuminate\Support\Facades\File;
 
 class PreloaderImage
 {
     public static function onAdd(Part $part = null)
     {
         \Log::info('added '.$part->part.' on '.$part->segment);
+        $setting = new Setting();
+        $setting->key = 'PreloaderImage_gif';
+        $setting->title = '';
+        $setting->type = 'FILE';
+        $setting->section = 'Theme';
+        $setting->save();
+        File::copy(__DIR__.'/assets/PreloaderImage.gif',public_path('upload/images/').'PreloaderImage.gif');
     }
     public static function onRemove(Part $part = null)
     {
         \Log::info('remove '.$part->part.' on '.$part->segment);
+        Setting::where('key','PreloaderImage_gif')->delete();
+        File::delete(public_path('upload/images/').'PreloaderImage.gif');
     }
     public static function onMount(Part $part = null)
     {

resources/views/segments/preloader/PreloaderImage/PreloaderImage.scss

@@ -1,3 +1,18 @@
 #PreloaderImage {
     // scss
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999999;
+    background: var(--xshop-background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img{
+        max-height: 40vh;
+    }
+
 }

resources/views/website/inc/website-foot.blade.php

@@ -0,0 +1,3 @@
+@yield('custom-foot')
+</body>
+</html>

resources/views/website/inc/website-head.blade.php

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <title>
+        @yield('title')
+    </title>
+    @vite(['resources/sass/client.scss', 'resources/js/client.js'])
+
+    @yield('custom-head')
+
+</head>
+<body @yield('body-attr')>
+
+@php($preloader = hasPart('preloader'))
+
+<div id="website-preloader">
+    @if($preloader != null)
+        @include($preloader->getBlade())
+    @endif
+</div>

resources/views/website/inc/website-layout.blade.php

@@ -0,0 +1,3 @@
+@include('website.inc.website-head')
+@yield('content')
+@include('website.inc.website-foot')

resources/views/welcome.blade.php

@@ -1,17 +1,10 @@
-<!doctype html>
+@extends('website.inc.website-layout')
-<html lang="en">
+
-<head>
+@section('title')
-    <meta charset="UTF-8">
+    welcome
-    <meta name="viewport"
+@endsection
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+@section('content')
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    @vite(['resources/sass/client.scss', 'resources/js/client.js'])
-</head>
-<body>
     <h1>
-        xshop
+        Test
-        <i class="ri-check-double-line"></i>
     </h1>
-</body>
+@endsection
-</html>