308 lines
11 KiB
Plaintext
308 lines
11 KiB
Plaintext
{% assign content_type = content_type | default: 'body' %}
|
||
|
||
{% if content_type == 'body' %}
|
||
|
||
{% comment %}
|
||
|
||
<div id="shx-3d-render-input-container">
|
||
<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top:0}.custom .field__input{padding-top:0.8rem}</style>
|
||
<label class="form__label custom" for="your-label">Dein Text</label>
|
||
<div class="field custom">
|
||
<input class="field__input" form="{{ 'product-form-' | append: section.id }}" type="text" id="your-label" name="properties[Your label]">
|
||
</div>
|
||
</div>
|
||
|
||
{% endcomment %}
|
||
|
||
<shx-input-forms section_id="{{ section.id }}">
|
||
</shx-input-forms>
|
||
|
||
{% elsif content_type == 'init' %}
|
||
|
||
<style>
|
||
.shx-input-forms-container {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.shx_ifc_renderButton, .shx-ifc-form_label {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.shx-threejs-renderer {
|
||
margin-top: 1rem;
|
||
border-radius: 10px;
|
||
border: 0;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
|
||
|
||
let globalInputFormsObjValues = {
|
||
"test1": {
|
||
"text1": "test",
|
||
"font": "LT Beverage"
|
||
},
|
||
"test2": {
|
||
"text1": "test1",
|
||
"text2": "test2"
|
||
}, "TextOne": {
|
||
"text1": "Julia",
|
||
"font": "LT Beverage"
|
||
}
|
||
};
|
||
|
||
function SHX_IFC_genTextInput(inputID, labelText, inputName, inputVal, section_id) {
|
||
return `
|
||
<label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
|
||
<div class="field custom">
|
||
<input class="field__input" form="product-form-${section_id}" type="text" id="${inputID}" name="properties[${inputName}]" value="${inputVal}">
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function SHX_IFC_genRenderButton() {
|
||
return `
|
||
<button class="button shx_ifc_renderButton" onclick="document.querySelector('shx-input-forms').renderView()">Vorschau generieren</button>
|
||
`;
|
||
|
||
}
|
||
|
||
function SHX_IFC_genDropdownSelect(inputID, labelText, inputName, inputVal, options, section_id) {
|
||
let html = `
|
||
<label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
|
||
<div class="field custom">
|
||
<select id="${inputID}" form="product-form-${section_id}" name="properties[${inputName}]" class="field__input" style="height: 40px">
|
||
`;
|
||
|
||
for(let i = 0; i < options.length; i++) {
|
||
html += `<option value="${options[i]}" ${inputVal === options[i] ? 'selected' : ''}>${options[i]}</option>`;
|
||
}
|
||
html += `</select></div>`;
|
||
|
||
return html;
|
||
}
|
||
|
||
|
||
|
||
|
||
const defaultStyle = `<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top: 0.6rem}.custom .field__input{padding-top:0.8rem}</style>`;
|
||
|
||
let globalInputFormsObj = {
|
||
"test1": {
|
||
"renderHTML": (section_id) => {
|
||
let html = defaultStyle;
|
||
|
||
// elementID, labeltext, shopping cart name, initial value, section_id
|
||
html += SHX_IFC_genTextInput('shx-text1', 'Custom Text 1', 'Text', globalInputFormsObjValues['test1']['text1'], section_id);
|
||
html += SHX_IFC_genDropdownSelect('shx-font', 'Schriftart', 'Schriftart', globalInputFormsObjValues['test1']['font'], ['LT Beverage', "Rose", 'Arial'], section_id);
|
||
html += SHX_IFC_genRenderButton();
|
||
|
||
return html;
|
||
}
|
||
},"test2": {
|
||
"renderHTML": (section_id) => {
|
||
let html = defaultStyle;
|
||
|
||
html += SHX_IFC_genTextInput('custom-text-1', 'Custom Text 1', 'Custom Text 1', globalInputFormsObjValues['test2']['text1'], section_id);
|
||
html += SHX_IFC_genTextInput('custom-text-2', 'Custom Text 2', 'Custom Text 2', globalInputFormsObjValues['test2']['text2'], section_id);
|
||
html += SHX_IFC_genRenderButton();
|
||
|
||
return html;
|
||
}
|
||
}, "TextOne": {
|
||
"renderHTML": (section_id) => {
|
||
let html = defaultStyle;
|
||
|
||
html += SHX_IFC_genTextInput('shx-text1', 'Custom Text 1', 'Text', globalInputFormsObjValues['test1']['text1'], section_id);
|
||
html += SHX_IFC_genDropdownSelect('shx-font', 'Schriftart', 'Schriftart', globalInputFormsObjValues['test1']['font'], ['LT Beverage', "Rose", 'Arial'], section_id);
|
||
html += SHX_IFC_genRenderButton();
|
||
|
||
return html;
|
||
}
|
||
}
|
||
};
|
||
|
||
// create new html tag called "shx-input-forms"
|
||
class InputFormsElement extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
// element functionality written in here
|
||
this.currentVariant = null;
|
||
this.container = null;
|
||
|
||
this.uuid = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
|
||
|
||
this.section_id = null;
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.section_id = this.getAttribute('section_id');
|
||
|
||
this.innerHTML = '<div class="shx-input-forms-container"><div class="shx-input-forms-content"></div></div>';
|
||
this.container = this.querySelector('.shx-input-forms-container');
|
||
this.container.style.height = '0px';
|
||
|
||
this.content = this.container.querySelector('.shx-input-forms-content');
|
||
|
||
this.Viewer3DContainer = document.createElement('div');
|
||
this.Viewer3DContainer.classList.add('shx-threejs-renderer-container');
|
||
this.Viewer3DContainer.innerHTML = ´{% render "shx-loading-spinner" %}´;
|
||
this.container.appendChild(this.Viewer3DContainer);
|
||
|
||
|
||
this.Viewer3D = document.createElement('iframe');
|
||
this.Viewer3D.src = "https://3d-viewer.shinnex.de/";
|
||
this.Viewer3D.classList.add('shx-threejs-renderer');
|
||
this.Viewer3D.style.width = this.container.offsetWidth + 'px';
|
||
this.Viewer3D.style.height = this.container.offsetWidth + 'px';
|
||
this.Viewer3DContainer.appendChild(this.Viewer3D);
|
||
|
||
this.Viewer3D.onload = () => {
|
||
this.Viewer3D.contentWindow.postMessage(JSON.stringify({"init":{"uuid":this.uuid}}), "*");
|
||
}
|
||
|
||
|
||
const uuid = this.uuid;
|
||
window.addEventListener('message', function(event) {
|
||
if(event.origin !== "https://3d-viewer.shinnex.de") return;
|
||
|
||
if(event.data === undefined) return;
|
||
let data;
|
||
try {
|
||
data = JSON.parse(event.data)["shx-3d-viewer"];
|
||
} catch(e) {
|
||
return;
|
||
}
|
||
|
||
if(data.id !== uuid) return;
|
||
|
||
console.log("Message received from the child: ", data); // Message received from child
|
||
});
|
||
}
|
||
|
||
initCurrentVariant(id) {
|
||
this.currentVariant = id;
|
||
|
||
// edit inner html
|
||
this.reloadCurrentVariant(id, true);
|
||
}
|
||
|
||
disconnectedCallback() {
|
||
// Clean up the element when it is removed from the DOM.
|
||
}
|
||
|
||
renderView() {
|
||
// request data from server
|
||
let tJS = this.tJS;
|
||
|
||
// update globalInputFormsObjValues from input fields
|
||
for(let key in globalInputFormsObj) {
|
||
if(key === this.currentVariant) {
|
||
let inputs = this.content.querySelectorAll('input');
|
||
for(let i = 0; i < inputs.length; i++) {
|
||
let name = inputs[i].id.replace('shx-', '');
|
||
globalInputFormsObjValues[key][name] = inputs[i].value;
|
||
}
|
||
|
||
let selects = this.content.querySelectorAll('select');
|
||
for(let i = 0; i < selects.length; i++) {
|
||
let name = selects[i].id.replace('shx-', '');
|
||
let options = selects[i].querySelectorAll('option');
|
||
for(let j = 0; j < options.length; j++) {
|
||
if(options[j].selected) {
|
||
globalInputFormsObjValues[key][name] = options[j].value;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
this.Viewer3D.contentWindow.postMessage(JSON.stringify({"changeView":{"currentVariant": this.currentVariant, values: globalInputFormsObjValues[this.currentVariant]}}), "*");
|
||
|
||
|
||
|
||
/*fetch('https://render.shinnex.de/render/' + this.currentVariant, { method: 'POST', body: JSON.stringify(globalInputFormsObjValues[this.currentVariant]) })
|
||
.then((response) => {
|
||
// stl file
|
||
return response.blob();
|
||
}).then((blob) => {
|
||
// log size in kB
|
||
console.log(blob.size / 1024 + 'kB');
|
||
|
||
});*/
|
||
|
||
}
|
||
|
||
reloadCurrentVariant(id, openAnimation = false) {
|
||
this.currentVariant = id;
|
||
let content = this.content;
|
||
let container = this.container;
|
||
|
||
|
||
|
||
// edit inner html
|
||
content.innerHTML = "";
|
||
this.renderView();
|
||
|
||
for(let key in globalInputFormsObj) {
|
||
if(key === this.currentVariant) {
|
||
content.innerHTML = globalInputFormsObj[key].renderHTML(this.section_id);
|
||
}
|
||
}
|
||
|
||
console.log('reloadCurrentVariant', id, openAnimation);
|
||
|
||
|
||
if(openAnimation) {
|
||
// calculate of this height
|
||
container.style.height = 'auto';
|
||
let height = container.offsetHeight;
|
||
container.style.height = '0px';
|
||
|
||
function animate() {
|
||
anime({
|
||
targets: container,
|
||
height: height,
|
||
duration: 500,
|
||
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)',
|
||
complete: function() {
|
||
container.style.height = 'auto';
|
||
container.style.overflow = 'visible';
|
||
}
|
||
});
|
||
}
|
||
|
||
//animejs fade in
|
||
//dom ready
|
||
|
||
if (document.getElementById('animejs-script').readyState === 'complete' || document.getElementById('animejs-script').readyState === 'loaded'){
|
||
animate();
|
||
} else {
|
||
document.getElementById('animejs-script').addEventListener('load', function() {
|
||
animate();
|
||
});
|
||
}
|
||
} else {
|
||
container.style.opacity = 0;
|
||
anime({
|
||
targets: container,
|
||
opacity: 1,
|
||
duration: 500,
|
||
easing: 'cubicBezier(0.590, 0.190, 0.050, 0.990)'
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
customElements.define('shx-input-forms', InputFormsElement);
|
||
|
||
|
||
</script>
|
||
|
||
{% endif %}
|
||
|