a1gard
/
xshop
mirror of https://github.com/4xmen/xshop.git
1
0
Fork 1
Code Issues 1 Packages Projects Releases Wiki Activity

added live preview

Browse Source
pull/44/head
A1Gard 4 months ago
parent 2a1e43bc25
commit 91c22e0046
14 changed files with 334 additions and 193 deletions
Show Stats Download Patch File Download Diff File

20
app/Helpers/Helper.php
Unescape Escape View File

@ -454,7 +454,7 @@ function getAction($act)
}
/**
* ge all admin routes array
* get all admin routes array
* @return array
*/
function getAdminRoutes()
@ -471,6 +471,24 @@ function getAdminRoutes()
return $routes;
}
/**
* get all client routes array
* @return array
*/
function getClientRoutes()
{
$routes = [];
foreach (Illuminate\Support\Facades\Route::getRoutes() as $r) {
if (strpos($r->getName(), 'admin') === false) {
$routes[] = [
'name' => $r->getName(),
'url' => $r->uri(),
];
}
}
return $routes;
}
/**

23
app/Http/Controllers/Admin/GfxController.php
Unescape Escape View File

@ -3,27 +3,36 @@
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use App\Models\Area;
use App\Models\Gfx;
use Illuminate\Http\Request;
class GfxController extends Controller
{
//
public function index(){
return view('admin.commons.gfx');
public function index()
{
$prviews = Area::whereNotNull('preview')
->pluck('preview', 'name')->toArray();
array_walk($prviews, function ($value, $key) use (&$prviews) {
$prviews[$key] = route($value);
});
return view('admin.commons.gfx',compact('prviews'));
}
public function update( Request $request){
public function update(Request $request)
{
foreach ($request->input('gfx',[]) as $key => $gfx){
$g = Gfx::where('key',$key)->first();
if ($g != null){
foreach ($request->input('gfx', []) as $key => $gfx) {
$g = Gfx::where('key', $key)->first();
if ($g != null) {
$g->value = $gfx;
$g->save();
}
}
logAdmin(__METHOD__,__CLASS__,null);
logAdmin(__METHOD__, __CLASS__, null);
\Artisan::call('client');
return redirect()->back()->with(['message' => __('GFX of website updated')]);
}

10
database/seeders/AreaSeeder.php
Unescape Escape View File

@ -35,6 +35,16 @@ class AreaSeeder extends Seeder
'preview' => 'welcome',
'icon' => 'ri-layout-top-2-line',
],
[
'name' => 'post',
'valid_segments' => json_encode(
["top","header","footer","menu",
"parallax","other","post"]
),
'max' => 6,
'preview' => 'test',
'icon' => 'ri-layout-top-2-line',
],
];
foreach ($areas as $area){
$a = new Area();

364
resources/js/components/Gfxer.vue
Unescape Escape View File

@ -7,7 +7,7 @@
<i class="ri-brush-2-line"></i>
GFX
</h3>
<template v-for="(v,i) in values" >
<template v-for="(v,i) in values">
<div v-if="v != undefined" class="p-2 item-gfx">
<div class="float-end"
v-if="i == 'background' || i == 'primary' || i == 'secondary' || i == 'text'">
@ -38,90 +38,104 @@
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
</div>
</template>
<div class="p-2">
</div>
</div>
<div class="col-xl-9">
<div class="item-gfx p-2 mb-2">
<div class="row">
<div class="col-md">
Device
<select v-model="device" class="form-control">
<option value="desktop"> Desktop</option>
<option value="mobile"> Mobile</option>
</select>
</div>
<div class="col-md">
Preview
<select v-model="preview" class="form-control">
<option :value="k" v-for="(k,p) in previews"> {{ p }}</option>
</select>
</div>
</div>
</div>
<div class="col-xl-9">
<div id="browser" :style="generalStyle" v-if="device != 'mobile'">
<div id="bar">
Browser
</div>
<div id="b-content">
<div :class="values.container">
<div class="row" id="items-icon">
<div class="col-md-4">
<i class="ri-twitter-line"
:style="`color: ${values.primary};`"></i>
<h3 :style="`color: ${values.secondary};`">
Social media
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
maxime minima odio pariatur quaerat soluta temporibus velit.
</p>
<a class="btn-read-more"
:style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
border-color: ${values.primary};
color: ${values.primary};`">
Read more
</a>
</div>
<div class="col-md-4">
<i class="ri-mail-line"
:style="`color: ${values.primary};`"></i>
<h3 :style="`color: ${values.secondary};`">
Contact
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
maxime minima odio pariatur quaerat soluta temporibus velit.
</p>
<a class="btn-read-more"
:style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
border-color: ${values.primary};
color: ${values.primary};`">
Read more
</a>
</div>
<div class="col-md-4">
<i class="ri-brush-4-line"
:style="`color: ${values.primary};`"></i>
<h3 :style="`color: ${values.secondary};`">
Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
maxime minima odio pariatur quaerat soluta temporibus velit.
</p>
<a class="btn-read-more"
:style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
border-color: ${values.primary};
color: ${values.primary};`">
Read more
</a>
</div>
</div>
<div id="big-box" :style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
<h3 class="diff">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
veritatis?
</h3>
</div>
</div>
<iframe :src="preview" class="preview-frame"></iframe>
<!-- <div :class="values.container">-->
<!-- <div class="row" id="items-icon">-->
<!-- <div class="col-md-4">-->
<!-- <i class="ri-twitter-line"-->
<!-- :style="`color: ${values.primary};`"></i>-->
<!-- <h3 :style="`color: ${values.secondary};`">-->
<!-- Social media-->
<!-- </h3>-->
<!-- <p>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
<!-- </p>-->
<!-- <a class="btn-read-more"-->
<!-- :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- border-color: ${values.primary};-->
<!-- color: ${values.primary};`">-->
<!-- Read more-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-md-4">-->
<!-- <i class="ri-mail-line"-->
<!-- :style="`color: ${values.primary};`"></i>-->
<!-- <h3 :style="`color: ${values.secondary};`">-->
<!-- Contact-->
<!-- </h3>-->
<!-- <p>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
<!-- </p>-->
<!-- <a class="btn-read-more"-->
<!-- :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- border-color: ${values.primary};-->
<!-- color: ${values.primary};`">-->
<!-- Read more-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-md-4">-->
<!-- <i class="ri-brush-4-line"-->
<!-- :style="`color: ${values.primary};`"></i>-->
<!-- <h3 :style="`color: ${values.secondary};`">-->
<!-- Design-->
<!-- </h3>-->
<!-- <p>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
<!-- </p>-->
<!-- <a class="btn-read-more"-->
<!-- :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- border-color: ${values.primary};-->
<!-- color: ${values.primary};`">-->
<!-- Read more-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="big-box" :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">-->
<!-- <h3 class="diff">-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut-->
<!-- veritatis?-->
<!-- </h3>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
<div id="mobile" :style="generalStyle" v-if="device == 'mobile'">
@ -141,76 +155,77 @@
</div>
</div>
</div>
<div id="m-content" :class="values.container">
<div class="row" id="items-icon">
<div class="col-md-12">
<i class="ri-twitter-line"
:style="`color: ${values.primary};`"></i>
<h3 :style="`color: ${values.secondary};`">
Social media
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
maxime minima odio pariatur quaerat soluta temporibus velit.
</p>
<a class="btn-read-more"
:style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
border-color: ${values.primary};
color: ${values.primary};`">
Read more
</a>
</div>
<div class="col-12">
<i class="ri-mail-line"
:style="`color: ${values.primary};`"></i>
<h3 :style="`color: ${values.secondary};`">
Contact
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
maxime minima odio pariatur quaerat soluta temporibus velit.
</p>
<a class="btn-read-more"
:style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
border-color: ${values.primary};
color: ${values.primary};`">
Read more
</a>
</div>
<div class="col-12">
<i class="ri-brush-4-line"
:style="`color: ${values.primary};`"></i>
<h3 :style="`color: ${values.secondary};`">
Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque
eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam
maxime minima odio pariatur quaerat soluta temporibus velit.
</p>
<a class="btn-read-more"
:style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
border-color: ${values.primary};
color: ${values.primary};`">
Read more
</a>
</div>
</div>
<div id="big-box" :style="`box-shadow: ${values.shadow} ;
border-radius: ${values['border-radius']} ;
background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">
<h3 style="filter: invert(1);mix-blend-mode: difference;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut
veritatis?
</h3>
</div>
</div>
<iframe :src="preview" class="preview-frame"></iframe>
<!-- <div id="m-content" :class="values.container">-->
<!-- <div class="row" id="items-icon">-->
<!-- <div class="col-md-12">-->
<!-- <i class="ri-twitter-line"-->
<!-- :style="`color: ${values.primary};`"></i>-->
<!-- <h3 :style="`color: ${values.secondary};`">-->
<!-- Social media-->
<!-- </h3>-->
<!-- <p>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
<!-- </p>-->
<!-- <a class="btn-read-more"-->
<!-- :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- border-color: ${values.primary};-->
<!-- color: ${values.primary};`">-->
<!-- Read more-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-12">-->
<!-- <i class="ri-mail-line"-->
<!-- :style="`color: ${values.primary};`"></i>-->
<!-- <h3 :style="`color: ${values.secondary};`">-->
<!-- Contact-->
<!-- </h3>-->
<!-- <p>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
<!-- </p>-->
<!-- <a class="btn-read-more"-->
<!-- :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- border-color: ${values.primary};-->
<!-- color: ${values.primary};`">-->
<!-- Read more-->
<!-- </a>-->
<!-- </div>-->
<!-- <div class="col-12">-->
<!-- <i class="ri-brush-4-line"-->
<!-- :style="`color: ${values.primary};`"></i>-->
<!-- <h3 :style="`color: ${values.secondary};`">-->
<!-- Design-->
<!-- </h3>-->
<!-- <p>-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam doloremque-->
<!-- eligendi reprehenderit voluptas? Ab amet autem doloremque, eius et harum magnam-->
<!-- maxime minima odio pariatur quaerat soluta temporibus velit.-->
<!-- </p>-->
<!-- <a class="btn-read-more"-->
<!-- :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- border-color: ${values.primary};-->
<!-- color: ${values.primary};`">-->
<!-- Read more-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="big-box" :style="`box-shadow: ${values.shadow} ;-->
<!-- border-radius: ${values['border-radius']} ;-->
<!-- background: linear-gradient(49deg, ${values.primary} 42%, ${values.secondary} 100%);`">-->
<!-- <h3 style="filter: invert(1);mix-blend-mode: difference;">-->
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate iste ut-->
<!-- veritatis?-->
<!-- </h3>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
@ -221,6 +236,11 @@
import BorderRadiosInput from "./BorderRadiosInput.vue";
import ShadowInput from "./ShadowInput.vue";
function iframeRef( frameRef ) {
return frameRef.contentWindow
? frameRef.contentWindow.document
: frameRef.contentDocument
}
export default {
name: "gfxer",
@ -233,11 +253,18 @@ export default {
_dbg_: 'hidden',
values: {},
titles: {},
preview: null,
device: 'desktop', // desktop
}
},
props: {
items: {},
items: {
required: true,
},
previews: {
default: [],
type: Array,
},
},
mounted() {
for (const i in this.items) {
@ -245,8 +272,10 @@ export default {
this.titles[item.key] = item.label;
this.values[item.key] = item.value;
}
console.log(this.items);
if (Object.keys(this.previews).length > 0) {
this.preview = Object.values(this.previews)[0];
console.log(this.preview, 'x');
}
},
computed: {
generalStyle() { //
@ -301,8 +330,48 @@ export default {
else if (g < 0) g = 0;
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
},
updateIframes(newVal){
document.querySelectorAll('.preview-frame').forEach( (preview) => {
let doc = iframeRef(preview);
let sty = doc.documentElement.style ;
sty.setProperty('--xshop-primary',newVal.primary);
sty.setProperty('--xshop-background',newVal.background);
sty.setProperty('--xshop-secondary',newVal.secondary);
sty.setProperty('--xshop-text',newVal.text);
sty.setProperty('--xshop-border-radius',newVal['border-radius']);
sty.setProperty('--xshop-shadow',newVal.shadow);
let newContainer = 'container';
let oldContainer = 'container-fluid';
if (newVal.container == 'container-fluid'){
newContainer = 'container-fluid';
oldContainer = 'container';
}
doc.querySelectorAll('.'+oldContainer).forEach(function (el) {
el.classList.remove(oldContainer);
el.classList.add(newContainer);
});
});
}
},
watch: {
values:{
handler (val) {
this.updateIframes(val);
},
deep: true
},
device(){
setTimeout( () => {
this.updateIframes(this.values);
},750);
},
preview(){
setTimeout( () => {
this.updateIframes(this.values);
},750);
}
},
}
</script>
@ -400,4 +469,9 @@ export default {
filter: invert(1);
mix-blend-mode: difference;
}
.preview-frame {
height: 80vh;
width: 100%;
}
</style>

20
resources/sass/client-custom/_general.scss
Unescape Escape View File

@ -35,3 +35,23 @@ body{
margin: auto;
border-radius: 50%;
}
#do-edit{
position: fixed;
inset-inline-start: 0;
top: 5%;
background: #21252BFF;
color: white;
z-index: 999;
padding: 10px;
width: 50px;
opacity: .4;
transition: 1s;
&:hover{
opacity: 1;
}
i{
font-size: 25px;
}
}

50
resources/sass/client-custom/_zfix.scss
Unescape Escape View File

@ -24,55 +24,55 @@ a,a:visited{
.btn{
border-radius: $xshop-border-radius;
border-radius: var(--xshop-border-radius);
}
.btn-primary{
background: $xshop-primary;
border-color: lighten($xshop-primary,5);
color: $xshop-diff !important;
background: var(--xshop-primary);
border-color: var(--xshop-secondary);
color: var(--xshop-diff) !important;
&:hover{
border-color: lighten($xshop-primary,10);
background: darken($xshop-primary,10); ;
border-color: var(--xshop-primary);
background: var(--xshop-secondary); ;
}
}
.btn-outline-primary{
border-color: $xshop-primary;
color: $xshop-primary;
border-color: var(--xshop-primary);
color:var(--xshop-primary);
&:hover{
border-color: lighten($xshop-primary,10);
color: $xshop-diff !important;
background: darken($xshop-primary,10); ;
border-color: var(--xshop-secondary);
color: var(--xshop-diff) !important;
background: var(--xshop-secondary); ;
}
}
.btn-secondary{
background: $xshop-secondary;
border-color: lighten($xshop-secondary,5);
color: $xshop-diff !important;
background: var(--xshop-secondary);
border-color: var(--xshop-secondary);
color: var(--xshop-diff) !important;
&:hover{
border-color: lighten($xshop-secondary,10);
background: darken($xshop-secondary,10); ;
border-color: var(--xshop-primary);
background: var(--xshop-secondary); ;
}
}
.btn-outline-secondary{
border-color: $xshop-secondary;
color: $xshop-secondary;
border-color: var(--xshop-secondary);
color: var(--xshop-secondary);
&:hover{
border-color: lighten($xshop-secondary,10);
color: $xshop-diff !important;
background: darken($xshop-secondary,10); ;
border-color: var(--xshop-primary);
color: var(--xshop-diff) !important;
background: var(--xshop-primary); ;
}
}
.btn-outline-invert{
border-color: $xshop-diff;
color: $xshop-diff;
border-color: var(--xshop-diff);
color: var(--xshop-diff);
&:hover{
background: $xshop-diff;
color: $xshop-primary;
background: var(--xshop-diff);
color: var(--xshop-primary);
}
}

5
resources/views/admin/commons/gfx.blade.php
Unescape Escape View File

@ -6,7 +6,10 @@
<form action="{{route('admin.gfx.update')}}" method="post" class="mb-5 pb-5">
@csrf
@include('components.err')
<gfxer :items='@json(\App\Models\Gfx::all('key','label','value'))'></gfxer>
<gfxer
:items='@json(\App\Models\Gfx::all('key','label','value'))'
:previews='@json($prviews)'
></gfxer>
<button
data-link="{{getRoute('update')}}"
id="save-sort"

2
resources/views/segments/category/FavProductWithMeta/FavProductWithMeta.scss
Unescape Escape View File

@ -2,7 +2,7 @@
// scss
i{
font-size: 128px;
-webkit-text-stroke: 6px $xshop-background;
-webkit-text-stroke: 6px var(--xshop-background);
}
[class^="col-md"]{

4
resources/views/segments/index/GradientTextLink/GradientTextLink.scss
Unescape Escape View File

@ -1,7 +1,7 @@
.GradientTextLink {
// scss
background: linear-gradient( var(--deg), $xshop-primary, $xshop-secondary 100%);
color: $xshop-diff;
background: linear-gradient( var(--deg), var(--xshop-primary), var(--xshop-secondary) 100%);
color: var(--xshop-diff);
h1{
font-size: 24px;

4
resources/views/segments/index/SimpleTextLink/SimpleTextLink.scss
Unescape Escape View File

@ -1,8 +1,8 @@
.SimpleTextLink {
// scss
background: $xshop-primary;
color: $xshop-diff;
background: var(--xshop-primary);
color:var(--xshop-diff);
h1{
font-size: 24px;

2
resources/views/segments/posts/PostsIconSimple/PostsIconSimple.scss
Unescape Escape View File

@ -3,7 +3,7 @@
h1{
a{
color: $xshop-text ;
color: var(--xshop-text) ;
}
}
.row{

6
resources/views/website/inc/website-foot.blade.php
Unescape Escape View File

@ -1,4 +1,10 @@
@yield('custom-foot')
<input type="hidden" id="api-display-url" value="{{route('v1.visitor.display')}}">
@if(auth()->check() && auth()->user()->hasRole('developer') && !request()->has('ediable'))
<a id="do-edit" href="?ediable">
<i class="ri-settings-2-line"></i>
</a>
@endif
</body>
</html>

2
resources/views/welcome.blade.php
Unescape Escape View File

@ -4,7 +4,7 @@
welcome
@endsection
@section('content')
@foreach(getParts('index') as $part)
@foreach(getParts($area) as $part)
@php($p = $part->getBladeWithData())
@include($p['blade'],['data' => $p['data']])
@endforeach

5
routes/web.php
Unescape Escape View File

@ -4,7 +4,8 @@ use Illuminate\Support\Facades\Artisan;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
$area = 'index';
return view('welcome',compact('area'));
})->name('welcome')->middleware(\App\Http\Middleware\VisitorCounter::class);
Auth::routes(['register' => false]);
@ -342,7 +343,7 @@ Route::get('test',function (){
// return \Resources\Views\Segments\PreloaderCircle::onAdd();
return \App\Helpers\TVisitor::GetKeyword();
});
})->name('test');

Write Preview
Loading…
Cancel
Save