diff --git a/assets/controllers/clipper_controller.js b/assets/controllers/clipper_controller.js index 0ba8901..eb27fe3 100644 --- a/assets/controllers/clipper_controller.js +++ b/assets/controllers/clipper_controller.js @@ -3,7 +3,13 @@ import * as THREE from "three" import BIM from '../bim.js'; export default class extends Controller { - static targets = ['hex']; + static targets = [ + 'hex', + 'color', + 'range', + 'rangeContainer', + 'size' + ]; /** * @param {Event} event @@ -18,11 +24,15 @@ export default class extends Controller { * @param {Event} event */ size(event) { - BIM.clipper.config.size = event.target.value + const value = event.target.value; + BIM.clipper.config.size = value + this.rangeTarget.title = value; + this.sizeTarget.textContent = value; } deleteAll() { BIM.clipper.deleteAll(); + this._resetControls(); } /** @@ -32,5 +42,13 @@ export default class extends Controller { toggle(event) { BIM.clipper.enabled = event.target.value; } + + _resetControls() { + this.rangeTarget.value = 10; + this.rangeTarget.title = 10; + this.sizeTarget.textContent = '10'; + this.colorTarget.value = '#eaeaea'; + this.hexTarget.querySelector('span').textContent = '#eaeaea'; + } } diff --git a/assets/styles/app.css b/assets/styles/app.css index aca426e..1b0acff 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -12,3 +12,16 @@ max-width: 20vw; z-index: 5; } + +/* Clipper-related styles */ +li button { + max-width: 40%; +} + +input[type="color"] { + border: none; +} + +input[type="range"] { + width: 100%; +} \ No newline at end of file diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig index b529674..e9d32ac 100644 --- a/templates/home/index.html.twig +++ b/templates/home/index.html.twig @@ -7,7 +7,7 @@ {% include 'partials/navbar.html.twig' %}
-
+