You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
xshop/resources/js/components/Gfxer.vue

478 lines
23 KiB
Vue

<template>
<div id="gfxer">
<div class="row">
<div class="col-xl-3">
<div class="item-list mb-3">
<h3 class="p-3">
<i class="ri-brush-2-line"></i>
GFX
</h3>
<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'">
<input type="color" v-model="values[i]" class="form-control-color">
</div>
<label class="pt-2 mb-1">
{{ titles[i] }}
</label>
<br>
<template v-if="i == 'border-radius'">
<border-radios-input v-model="values[i]"></border-radios-input>
</template>
<template v-if="i == 'shadow'">
<shadow-input v-model="values[i]"></shadow-input>
</template>
<template v-if="i == 'font'">
<select v-model="values[i]" class="form-control">
<option value="Vazir"> Vazir</option>
</select>
</template>
<template v-if="i == 'container'">
<select v-model="values[i]" class="form-control">
<option value="container"> Container</option>
<option value="container-fluid"> Container fluid</option>
</select>
</template>
<input :name="'gfx['+i+']'" :type="_dbg_" :value="v">
</div>
</template>
</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 id="browser" :style="generalStyle" v-if="device != 'mobile'">
<div id="bar">
Browser
</div>
<div id="b-content">
<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'">
<div id="mobile-top" :style="`background: ${lighter};`">
<div class="diff p-1 d-flex align-items-center justify-content-between ">
<span>
<i class="ri-wifi-line"></i>
</span>
<span>
{{ nowTime }}
</span>
<i class="ri-battery-low-line"></i>
</div>
<div :style="`background: ${values.primary};`">
<div class="diff p-2">
{{ tempUrl }}
</div>
</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>
</div>
</template>
<script>
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",
components: {
BorderRadiosInput,
ShadowInput
},
data: () => {
return {
_dbg_: 'hidden',
values: {},
titles: {},
preview: null,
device: 'desktop', // desktop
}
},
props: {
items: {
required: true,
},
previews: {
default: [],
type: Array,
},
},
mounted() {
for (const i in this.items) {
let item = this.items[i];
this.titles[item.key] = item.label;
this.values[item.key] = item.value;
}
if (Object.keys(this.previews).length > 0) {
this.preview = Object.values(this.previews)[0];
console.log(this.preview, 'x');
}
},
computed: {
generalStyle() { //
let css = '';
console.log();
if (this.values.background != null) {
css += 'background-color: ' + this.values.background + ';';
}
if (this.values.text != null) {
css += 'color: ' + this.values.text + ';';
}
return css;
},
tempUrl() {
return window.location.hostname;
},
nowTime() {
const dt = new Date();
return dt.getHours() + ':' + dt.getMinutes();
},
lighter() {
if (this.values.primary != undefined) {
return this.lightenColor(this.values.primary);
}
}
},
methods: {
lightenColor(col, amt = 20) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
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>
<style scoped>
#gfxer {
}
#mobile {
width: 400px;
height: 800px;
border-radius: 20px;
border: 4px solid gray;
background: #fff;
overflow-y: auto;
}
#m-content {
border-radius: 20px;
overflow: hidden;
}
#browser {
border-radius: 7px;
border: 4px solid silver;
min-height: 80vh;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
#bar {
display: block;
background: silver;
position: relative;
text-align: center;
padding-top: 3px;
height: 30px;
&:before {
content: ' ';
width: 15px;
height: 15px;
border-radius: 50%;
background: red;
position: absolute;
top: 5px;
right: 5px;
}
&:after {
content: ' ';
width: 15px;
height: 15px;
border-radius: 50%;
background: #00d75c;
position: absolute;
top: 5px;
right: 35px;
}
}
}
.item-gfx:hover {
background: #ffffff22;
}
#items-icon {
text-align: center;
i {
font-size: 75px;
}
p {
text-align: justify;
}
.btn-read-more {
border: 1px solid gray;
display: block;
padding: 5px;
box-shadow: var(--shadow);
}
}
#big-box {
margin-top: 1rem;
padding: 3rem;
}
.diff {
filter: invert(1);
mix-blend-mode: difference;
}
.preview-frame {
height: 80vh;
width: 100%;
}
</style>