mirror of https://github.com/4xmen/xshop.git
added counter theme part
parent
ac57eb9447
commit
fd002df592
@ -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>
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
@ -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": []
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
Loading…
Reference in New Issue