diff --git a/assets/css/fix-carousel.css b/assets/css/fix-carousel.css new file mode 100644 index 0000000..648f5cd --- /dev/null +++ b/assets/css/fix-carousel.css @@ -0,0 +1,3 @@ +li.carousel__slide { + display: block; +} diff --git a/assets/css/slider-default.css b/assets/css/slider-default.css new file mode 100644 index 0000000..a98ce14 --- /dev/null +++ b/assets/css/slider-default.css @@ -0,0 +1 @@ +.slider-target,.slider-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.slider-target{position:relative}.slider-base,.slider-connects{height:100%;position:relative;width:100%;z-index:1}.slider-connects{overflow:hidden;z-index:0}.slider-connect,.slider-origin{height:100%;position:absolute;right:0;top:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-style:flat;width:100%;will-change:transform;z-index:1}.slider-txt-dir-rtl.slider-horizontal .slider-origin{left:0;right:auto}.slider-vertical .slider-origin{top:-100%;width:0}.slider-horizontal .slider-origin{height:0}.slider-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.slider-touch-area{height:100%;width:100%}.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{transition:transform .3s}.slider-state-drag *{cursor:inherit!important}.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{display:none!important}.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){display:block!important}.slider-horizontal{height:var(--slider-height,6px)}.slider-horizontal .slider-handle{height:var(--slider-handle-height,16px);right:calc(var(--slider-handle-width, 16px)/2*-1);top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);width:var(--slider-handle-width,16px)}.slider-vertical{height:var(--slider-vertical-height,300px);width:var(--slider-height,6px)}.slider-vertical .slider-handle{bottom:calc(var(--slider-handle-width, 16px)/2*-1);height:var(--slider-handle-width,16px);right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);width:var(--slider-handle-height,16px)}.slider-txt-dir-rtl.slider-horizontal .slider-handle{left:calc(var(--slider-handle-width, 16px)/2*-1);right:auto}.slider-base{background-color:var(--slider-bg,#d1d5db)}.slider-base,.slider-connects{border-radius:var(--slider-radius,9999px)}.slider-connect{background:var(--slider-connect-bg,#10b981);cursor:pointer}.slider-draggable{cursor:ew-resize}.slider-vertical .slider-draggable{cursor:ns-resize}.slider-handle{background:var(--slider-handle-bg,#fff);border:var(--slider-handle-border,0);border-radius:var(--slider-handle-radius,9999px);box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));cursor:-webkit-grab;cursor:grab;height:var(--slider-handle-height,16px);width:var(--slider-handle-width,16px)}.slider-handle:focus{box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));outline:none}.slider-active{box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));cursor:-webkit-grabbing;cursor:grabbing}[disabled] .slider-connect{background:var(--slider-connect-bg-disabled,#9ca3af)}[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{cursor:not-allowed}[disabled] .slider-tooltip{background:var(--slider-tooltip-bg-disabled,#9ca3af);border-color:var(--slider-tooltip-bg-disabled,#9ca3af)}.slider-tooltip{background:var(--slider-tooltip-bg,#10b981);border:1px solid var(--slider-tooltip-bg,#10b981);border-radius:var(--slider-tooltip-radius,5px);color:var(--slider-tooltip-color,#fff);display:block;font-size:var(--slider-tooltip-font-size,.875rem);font-weight:var(--slider-tooltip-font-weight,600);line-height:var(--slider-tooltip-line-height,1.25rem);min-width:var(--slider-tooltip-min-width,20px);padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);position:absolute;text-align:center;white-space:nowrap}.slider-horizontal .slider-tooltip-top{bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));left:50%;transform:translate(-50%)}.slider-horizontal .slider-tooltip-top:before{border:var(--slider-tooltip-arrow-size,5px) solid transparent;border-top-color:inherit;bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);content:"";height:0;left:50%;position:absolute;transform:translate(-50%);width:0}.slider-horizontal .slider-tooltip-bottom{left:50%;top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));transform:translate(-50%)}.slider-horizontal .slider-tooltip-bottom:before{border:var(--slider-tooltip-arrow-size,5px) solid transparent;border-bottom-color:inherit;content:"";height:0;left:50%;position:absolute;top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);transform:translate(-50%);width:0}.slider-vertical .slider-tooltip-left{right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));top:50%;transform:translateY(-50%)}.slider-vertical .slider-tooltip-left:before{border:var(--slider-tooltip-arrow-size,5px) solid transparent;border-left-color:inherit;content:"";height:0;position:absolute;right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);top:50%;transform:translateY(-50%);width:0}.slider-vertical .slider-tooltip-right{left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));top:50%;transform:translateY(-50%)}.slider-vertical .slider-tooltip-right:before{border:var(--slider-tooltip-arrow-size,5px) solid transparent;border-right-color:inherit;content:"";height:0;left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);position:absolute;top:50%;transform:translateY(-50%);width:0}.slider-horizontal .slider-origin>.slider-tooltip{left:auto;transform:translate(50%)}.slider-horizontal .slider-origin>.slider-tooltip-top{bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)}.slider-horizontal .slider-origin>.slider-tooltip-bottom{top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)}.slider-vertical .slider-origin>.slider-tooltip{top:auto;transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))}.slider-vertical .slider-origin>.slider-tooltip-left{right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)}.slider-vertical .slider-origin>.slider-tooltip-right{left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)} \ No newline at end of file diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue index c0e2837..a6c3a47 100644 --- a/assets/js/Stepper.vue +++ b/assets/js/Stepper.vue @@ -2,63 +2,45 @@
-
-
Frage 1
- Welche Immobilie
möchten Sie verkaufen? - - - -
+
Frage 1
+ Welche Immobilie
möchten Sie verkaufen? + + + -
-
Frage 2
- Wie ist die gesamte
Grundstücksfläche des Hauses? - - - -
+
Frage 2
+ Wie ist die gesamte
Grundstücksfläche des Hauses? + + -
-
Frage 3
- Wie ist die gesamte
Wohnfläche des Hauses? - - -
+
Frage 3
+ Wie ist die gesamte
Wohnfläche des Hauses? + + -
-
Frage 4
- Wie viele
Zimmer hat das Haus? - - -
+
Frage 4
+ Wie viele
Zimmer hat das Haus? + + -
-
Frage 5
- Wann wurde das
Haus erbaut? - - -
+
Frage 5
+ Wann wurde das
Haus erbaut? + + -
-
Frage 6
- Wie ist der
Zustand des Hauses? - - -
+
Frage 6
+ Wie ist der
Zustand des Hauses? + + @@ -88,9 +70,9 @@
Frage 5
Wann wurde das
Gewerbe erbaut? + + --> @@ -120,9 +102,9 @@
Frage 4
Wann wurde die
Wohnung erbaut? + + --> @@ -174,7 +156,7 @@
+ class="w-full h-full bg-white ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
@@ -221,7 +203,7 @@ - diff --git a/assets/js/app.js b/assets/js/app.js index ea170b1..ba4047a 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -10,8 +10,11 @@ import VBtn from './components/VBtn.vue'; import VText from './components/VText.vue'; import VCheckbox from './components/VCheckbox.vue'; import svg from './svg.mixin.js'; +import VSlider from './components/VSlider.vue'; import 'vue3-carousel/dist/carousel.css'; +import '../css/fix-carousel.css'; +import '../css/slider-default.css'; var app = createApp() .mixin(svg) @@ -23,6 +26,7 @@ var app = createApp() .component('v-btn', VBtn) .component('pagination', Pagination) .component('v-checkbox', VCheckbox) + .component('v-slider', VSlider) .component('v-text', VText); app.provide('axios', app.config.globalProperties.axios); diff --git a/assets/js/components/VSlider.vue b/assets/js/components/VSlider.vue new file mode 100644 index 0000000..bfac424 --- /dev/null +++ b/assets/js/components/VSlider.vue @@ -0,0 +1,14 @@ +
+ +
+ + + diff --git a/package-lock.json b/package-lock.json index 531fefc..316b244 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "devDependencies": { + "@vueform/slider": "^2.1.10", "axios": "^0.21.4", "dayjs": "^1.11.10", "eslint": "^8.55.0", @@ -2629,6 +2630,12 @@ "integrity": "sha512-u2G8ZQ9IhMWTMXaWqZycnK4UthG1fA238CD+DP4Dm4WJi5hdUKKLg0RMRaRpDPNMdkTwIDkp7WtD0Rd9BH9fLw==", "dev": true }, + "node_modules/@vueform/slider": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@vueform/slider/-/slider-2.1.10.tgz", + "integrity": "sha512-L2G3Ju51Yq6yWF2wzYYsicUUaH56kL1QKGVtimUVHT1K1ADcRT94xVyIeJpS0klliVEeF6iMZFbdXtHq8AsDHw==", + "dev": true + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", diff --git a/package.json b/package.json index 67838a1..5f2bafb 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "author": "", "license": "ISC", "devDependencies": { + "@vueform/slider": "^2.1.10", "axios": "^0.21.4", "dayjs": "^1.11.10", "eslint": "^8.55.0", @@ -27,7 +28,6 @@ "postcss-nested": "^4.2.3", "prettier": "^3.1.1", "tailwindcss": "^3.3.6", - "veeno": "^0.0.4", "vue": "^3.3", "vue-axios": "^3.5.2", "vue-loader": "^16.8.3", diff --git a/src/Stepper.php b/src/Stepper.php index 2b99e46..aed3875 100644 --- a/src/Stepper.php +++ b/src/Stepper.php @@ -22,12 +22,25 @@ class Stepper add_action('wp_enqueue_scripts', [$this, 'enqueue']); add_action('wp_ajax_nopriv_stepper_submit', [$this, 'onSubmit']); add_action('wp_ajax_stepper_submit', [$this, 'onSubmit']); + add_action('wp_footer', [$this, 'enqueueOverwrite']); if (!is_admin()) { add_shortcode('stepper', [$this, 'handle']); } } + public function enqueueOverwrite(): void + { + if (is_admin()) { + return; + } + + ob_start(); + require(__DIR__ . '/../templates/overwrite.htm'); + + echo ob_get_clean(); + } + public function enqueue() { wp_enqueue_script('stepper-js', $this->scriptUrl . 'app.js', [], false, true); diff --git a/templates/overwrite.htm b/templates/overwrite.htm new file mode 100644 index 0000000..ff1299b --- /dev/null +++ b/templates/overwrite.htm @@ -0,0 +1,13 @@ +