public
/
di-stepper
6
0
Fork 0
Code Issues Pull Requests Projects Releases 6 Wiki Activity
Browse Source

Add slider

dev
Philipp Lang 5 years ago
parent
22da92dd3d
commit
e82abc786c
7 changed files with 138 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      assets/css/app.css
  2. 16
      assets/js/app.js
  3. 13
      src/Stepper.php
  4. 23
      views/client.twig.htm
  5. 2
      views/daten.twig.htm
  6. 125
      views/stepper.twig.htm
  7. 4
      views/vorhaben.twig.htm

34
assets/css/app.css
View File

@ -11,6 +11,18 @@ body {
}
.stepper {
.slider {
display: flex;
flex-wrap: nowrap;
scroll-snap-type: x proximity;
scroll-behavior: smooth;
overflow-x: hidden;
& > * {
flex: 0 0 100%;
scroll-snap-align: start;
}
}
form {
font-family: sans-serif;
background: var(--bg-color);
@ -104,18 +116,18 @@ body {
}
}
}
}
.step {
height: 5px;
position: relative;
div {
position: absolute;
transition: width 0.5s;
top: 0;
left: 0;
height: 100%;
background: var(--primary);
}
.step {
height: 5px;
position: relative;
div {
position: absolute;
transition: width 0.5s;
top: 0;
left: 0;
height: 100%;
background: var(--primary);
}
}
}

16
assets/js/app.js
View File

@ -96,7 +96,19 @@ window.stepper = {
axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
...this.value
}).then(ret => {
this.step++;
this.slideTo(null, this.step+1);
});
}
},
slideTo(e, index) {
if (e !== null) {
e.preventDefault();
}
var _self = this;
this.step = index;
this.$nextTick(function() {
_self.$refs.slider.scrollLeft = _self.$refs.slider.scrollWidth / 4 * index;
});
},
};

13
src/Stepper.php
View File

@ -22,6 +22,9 @@ class Stepper {
$this->twig->addFunction(new Func('cprop', function ($aprop, $modifier) {
return $this->alpineProp($aprop, $modifier);
}));
$this->twig->addFunction(new Func('sliderelement', function ($aprop, $modifier) {
return '$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active';
}));
}
public function init() {
@ -58,9 +61,13 @@ class Stepper {
}
public function onSubmit() {
json_decode(file_get_contents('php://input'));
wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', json_decode(file_get_contents('php://input'), true)), [
'From' => 'philipp@aweos.de'
$payload = json_decode(file_get_contents('php://input'), true);
wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', $payload, true), [
'From' => 'philipp@zoomyboy.de'
]);
wp_mail($payload['email'], 'Vielen Dank für Ihre Finanzierungs-Anfrage', $this->twig->render('client.twig.htm', $payload, true), [
'From' => 'philipp@zoomyboy.de'
]);
die();

23
views/client.twig.htm
View File

@ -0,0 +1,23 @@
Vielen Dank für Ihre Anfrage.
Anbei Ihre Daten:
Name: {{firstname}} {{lastname}}
Adresse: {{zip}} {{location}}
Tel: {{phone}}
Mail: {{email}}
Anfrage für: {{kind}}
{% if kind == 'kauf' %}
* Kaufpreis: {{kauf.kaufpreis}} €
* Modernisierung: {{kauf.modernisierung}} €
* Baukosten: {{kauf.baukosten}} €
* Eigenkapital: {{kauf.eigenkapital}} €
{% endif %}
{% if kind == 'bau' %}
* Grundstückspreis: {{bau.grundstueckspreis}} €
* Bezahlt: {{bau.bezahlt}} €
* Baukosten: {{bau.baukosten}} €
* Eigenkapital: {{bau.eigenkapital}} €
{% endif %}

2
views/daten.twig.htm
View File

@ -1,4 +1,4 @@
<div x-show="step == 2">
<div>
<h2 class="gradient">Geben Sie Ihre persönlichen Daten ein</h2>
<div class="form-container">

125
views/stepper.twig.htm
View File

@ -1,75 +1,80 @@
<div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
<div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
<form @submit.prevent="submit">
<div x-show="step == 0">
<h2>Was möchten Sie finanzieren</h2>
<div class="radio-grid">
<template x-for="ckind in kinds">
<label>
<input @change="step++" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
<span>
<span x-html="svg(ckind.icon)"></span>
<span x-text="ckind.label"></span>
</span>
</label>
</template>
</div>
</div>
<div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
{% include 'vorhaben.twig.htm' with {
'kind': "bau",
bezahlt: true,
second: {label: 'Baukosten', value: 'baukosten'},
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
} %}
<div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
<div>
<h2>Was möchten Sie finanzieren</h2>
<div class="radio-grid">
<template x-for="ckind in kinds">
<label>
<input @change="slideTo($event, step+1)" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
<span>
<span x-html="svg(ckind.icon)"></span>
<span x-text="ckind.label"></span>
</span>
</label>
</template>
</div>
</div>
{% include 'vorhaben.twig.htm' with {
'kind': "kauf",
bezahlt: false,
second: {label: 'Modernisierung', value: 'modernisierung'},
main: {label: 'Kaufpreis', value: 'kaufpreis'}
} %}
{% include 'vorhaben.twig.htm' with {
'kind': "bau",
bezahlt: true,
second: {label: 'Baukosten', value: 'baukosten'},
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
} %}
{% include 'daten.twig.htm' %}
{% include 'vorhaben.twig.htm' with {
'kind': "kauf",
bezahlt: false,
second: {label: 'Modernisierung', value: 'modernisierung'},
main: {label: 'Kaufpreis', value: 'kaufpreis'}
} %}
<div x-show="step == 1 && value.kind == 'anschluss'">
<h2 class="gradient">Das Vorhaben in Zahlen</h2>
<div x-show="value.kind == 'anschluss'">
<h2 class="gradient">Das Vorhaben in Zahlen</h2>
<div class="form-container">
<div class="form-grid">
<label>Objektwert</label>
<input type="text" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
<span class="unit">€</span>
</div>
<div class="separator"></div>
<div class="form-grid">
<label>Umschuldung</label>
<input type="text" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
<span class="unit">€</span>
<span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
<div class="form-container">
<div class="form-grid">
<label>Objektwert</label>
<input type="text" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
<span class="unit">€</span>
</div>
<div class="separator"></div>
<div class="form-grid">
<label>Umschuldung</label>
<input type="text" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
<span class="unit">€</span>
<span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
</div>
<div class="separator"></div>
<div class="form-grid">
<label>Zusätzl. Kapital</label>
<input type="text" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
<span class="unit">€</span>
</div>
<div class="separator primary"></div>
<div>
<div>Darlehensbetrag</div>
<div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
</div>
<div class="separator gray"></div>
<button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
</div>
<div class="separator"></div>
<div class="form-grid">
<label>Zusätzl. Kapital</label>
<input type="text" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
<span class="unit">€</span>
</div>
<div class="separator primary"></div>
<div>
<div>Darlehensbetrag</div>
<div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
</div>
<div class="separator gray"></div>
<button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
</div>
</div>
<div x-show="step === 3">
<div class="form-container">
Vielen Dank für Ihre Anfrage.
{% include 'daten.twig.htm' %}
<div>
<div class="form-container">
Vielen Dank für Ihre Anfrage.
</div>
</div>
</div>
</div>
</form>
</div>

4
views/vorhaben.twig.htm
View File

@ -1,4 +1,4 @@
<div x-show="step == 1 && value.kind == '{{kind}}'">
<div x-show="value.kind == '{{kind}}'">
<h2 class="gradient">Ihr Bauvorhaben</h2>
<div class="form-container">
@ -66,6 +66,6 @@
<div x-text="units.currency.to( Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital) / 1000)*1000 )"></div>
</div>
<div class="separator gray"></div>
<button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
<button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
</div>
</div>

Write Preview
Loading…
Cancel
Save