added counter theme part

resources/views/segments/footer/ParallaxFooter/ParallaxFooter.php

@@ -69,6 +69,7 @@ class ParallaxFooter
         Setting::where('key',$part->area->name . '_' . $part->part.'_title2')->first()?->delete();
         Setting::where('key',$part->area->name . '_' . $part->part.'_group')->first()?->delete();
         Setting::where('key',$part->area->name . '_' . $part->part.'_last')->first()?->delete();
+        Setting::where('key',$part->area->name . '_' . $part->part.'_jpg')->first()?->delete();
     }
     public static function onMount(Part $part = null)
     {

resources/views/segments/index/CounterGrid/CounterGrid.blade.php

@@ -0,0 +1,18 @@
+<section id='CounterGrid'>
+    <div class="{{gfx()['container']}}">
+
+        <div class="row">
+            @for($i = 1; $i <= \Resources\Views\Segments\CounterGrid::$count; $i++)
+                <div class="col-lg-3 col-md-6">
+                    <i class="{{getSetting($data->area->name.'_'.$data->part.'_icon'.$i)}}"></i>
+                    <h3>
+                        {{getSetting($data->area->name.'_'.$data->part.'_title'.$i)}}
+                    </h3>
+                    <div class="grid-counter" data-min="0" data-max="{{getSetting($data->area->name.'_'.$data->part.'_number'.$i)}}">
+                        0
+                    </div>
+                </div>
+            @endfor
+        </div>
+    </div>
+</section>

resources/views/segments/index/CounterGrid/CounterGrid.js

@@ -0,0 +1,69 @@
+var intervals = [];
+var counters = [];
+var steps = [];
+var isCounterInited = false;
+
+function isElementInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+}
+
+function uncommafy(txt) {
+    return txt.split(',').join('');
+}
+
+function commafy(num) {
+    if (typeof num !== 'string') {
+        num = num.toString();
+    }
+    let str = uncommafy(num.toString()).split('.');
+    if (str[0].length >= 4) {
+        str[0] = str[0].replace(/(\d)(?=(\d{3})+$)/g, '$1,');
+    }
+    if (str[1] && str[1].length >= 4) {
+        str[1] = str[1].replace(/(\d{3})/g, '$1 ');
+    }
+    return str.join('.');
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    window.addEventListener('scroll', function() {
+        const container = document.getElementById('CounterGrid');
+        if (isElementInViewport(container)) {
+            if (!isCounterInited){
+                isCounterInited = true;
+                document.querySelectorAll('.grid-counter').forEach(function (el, key) {
+
+                    let max = parseInt(el.getAttribute('data-max'));
+                    let min = parseInt(el.getAttribute('data-min'));
+                    let diff = max - min;
+                    counters[key] = 0;
+                    steps[key] = parseInt(diff / 99);
+
+                    let tmp = setInterval(() => {
+                        counters[key] += steps[key];
+                        document.querySelectorAll('.grid-counter')[key].innerHTML = commafy(counters[key]);
+                    }, 100);
+                    setTimeout(function () {
+                        for (const i in intervals) {
+                            clearInterval(intervals[i]);
+                            document.querySelectorAll('.grid-counter')[key].innerHTML = commafy(document.querySelectorAll('.grid-counter')[key].getAttribute('data-max'));
+                        }
+
+                    }, 9900);
+                    intervals.push(tmp);
+                });
+            }
+            // Remove event listener if you only want to alert once
+            this.removeEventListener('scroll', arguments.callee);
+        }
+    });
+
+
+});

resources/views/segments/index/CounterGrid/CounterGrid.json

@@ -0,0 +1,10 @@
+{
+    "name": "CounterGrid",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/index/CounterGrid/CounterGrid.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Setting;
+
+class CounterGrid
+{
+
+
+    public static  $count = 4;
+    public static function onAdd(Part $part = null)
+    {
+
+
+        for ($i = 1; $i <= self::$count; $i++) {
+
+            $setting = new Setting();
+            $setting->section = 'theme';
+            $setting->key = $part->area->name . '_' . $part->part.'_title'.$i;
+            $setting->value =  "Counter ".$i;
+            $setting->size = 4;
+            $setting->type = 'TEXT';
+//        $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
+            $setting->title =  $part->area->name . ' ' . $part->part. ' title '.$i;
+            $setting->save();
+
+            $setting = new Setting();
+            $setting->section = 'theme';
+            $setting->key = $part->area->name . '_' . $part->part.'_icon'.$i;
+            $setting->value = 'ri-user-line';
+            $setting->size = 4;
+            $setting->type = 'ICON';
+//        $setting->data = json_encode(['xmin' => 2, 'xmax' => 6]);
+            $setting->title =  $part->area->name . ' ' . $part->part. ' icon '.$i;
+            $setting->save();
+
+            $setting = new Setting();
+            $setting->section = 'theme';
+            $setting->key = $part->area->name . '_' . $part->part.'_number'.$i;
+            $setting->value = rand(100,4000);
+            $setting->size = 4;
+            $setting->type = 'NUMBER';
+            $setting->data = json_encode(['xmin' => 0, 'xmax' => 9007199254740992]);
+            $setting->title =  $part->area->name . ' ' . $part->part. ' number '.$i;
+            $setting->save();
+        }
+    }
+    public static function onRemove(Part $part = null)
+    {
+        for ($i = 1; $i <= self::$count; $i++) {
+            Setting::where('key',$part->area->name . '_' . $part->part.'_title'.$i)->first()?->delete();
+            Setting::where('key',$part->area->name . '_' . $part->part.'_icon'.$i)->first()?->delete();
+            Setting::where('key',$part->area->name . '_' . $part->part.'_number'.$i)->first()?->delete();
+
+        }
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/index/CounterGrid/CounterGrid.scss

@@ -0,0 +1,16 @@
+#CounterGrid {
+    padding: 4rem;
+    background: var(--xshop-secondary);
+    color: var(--xshop-diff);
+    text-align: center;
+    i{
+        font-size: 128px;
+        display: block;
+        margin: .5rem auto;
+        -webkit-text-stroke: 6px  var(--xshop-secondary);
+    }
+
+    .grid-counter{
+        font-size: 35px;
+    }
+}