JS/HTML: User Inputs statt Predefines nehmen; onChange Events werden ignoriert

[thecartographer]

Hi,

Mein Projekt: https://koppenleitner.de/print/

Ich nutze hier eine Anwendung die ich von github habe: dabei kann man sich Karten direkt über die Anwendung als PDF oder PNG ausgeben lassen.

Folgende Probleme kann ich derzeit nicht lösen und weiß auch nicht, nach welchen Begrifflichkeiten ich suchen soll:

1. Im "Ausgabeformat" gibt es zahlreiche DIN Formate die der User auswählen kann - ändert er jedoch die Breite oder die Höhe, so springt das Dropdown-Menu nicht auf "Eigener Wert" sondern bleibt beim vorher ausgewählten Format stehen.
2. Wählt man eines der DIN Formate im Dropdownmenu, so aktualisiert sich unten die Karte erst, wenn der Wert nochmal per Hand gelöscht und wieder eingetragen wird. Das onchange event das vom Dropdown ausgelöst wird, wird hier nicht als change erkannt.
3. Wenn der User im Feld "Style URL" eine eigene URL angibt, soll diese, statt den Einträgen in "Map Style" übernommen werden, und im Dropdownmenu wie bei Problem 2 auf "Eigener Wert" umspringen.

Sind leider sehr spezielle Fragen, ich hoffe jemand hat Tipps für mich!

Grüße,

der Kartograph

 

[Thallius]

Naja bischen Code wäre schon hilfreich

 

[thecartographer]

Ist leider ziemlich viel Code der dahinter steckt. Hier mal Auszüge:

Spoiler: Predefined DIN Formate

 <label for="formatInput">Ausgabeformat</label>
                        <form action="/revenue_lines/lock" id="outGroup" method="post" accept-charset="utf-8">
                          <div style="display:none;">
                            <input type="hidden" name="_method" value="POST">
                          </div>
                          <select name="formatInput" class="form-group" id="formatInput">
                            <option value="210_297">Eigener Wert</option>
                            <option value="210_297">DIN A4 Hochformat</option>
                            <option value="297_420">DIN A3 Hochformat</option>
                            <option value="420_594">DIN A2 Hochformat</option>
                            <option value="594_841">DIN A1 Hochformat</option>
                            <option value="841_1189">DIN A0 Hochformat</option>
                            <option value="297_210">DIN A4 Querformat</option>
                            <option value="420_297">DIN A3 Querformat</option>
                            <option value="594_420">DIN A2 Querformat</option>
                            <option value="841_594">DIN A1 Querformat</option>
                            <option value="1189_841">DIN A0 Querformat</option>
                          </select></p>
                      </div>
                    </div>
                    <div class="col-md-2">
                      <div class="form-group" id="widthGroup">
                        <label for="widthInput">Breite</label>
                        <input name="width" class="form-control" type="text" id="widthInput">
                      </div>
                    </div>
                    <div class="col-md-2">
                      <div class="form-group" id="heightGroup">
                        <label for="heightInput">Höhe</label>
                        <input name="heigth" class="form-control" type="text" id="heightInput">
                      </div>
                    </div>

Spoiler: Java Dropdown Übemittlung an Textfelder

  <script>
    $('#formatInput').on('change', function () {
      var val = this.value;
      var parts = val.split("_");
      $('#widthInput').val(parts[0]);
      $('#heightInput').val(parts[1]);
    });
  </script>

Spoiler: Java der Kartendarstellung

//
// Configuration changes / validation
//
form.widthInput.addEventListener('change', function(e) {
    'use strict';
    var unit = form.unitOptions[0].checked ? 'in' : 'mm';
    var val = (unit == 'mm') ? Number(e.target.value / 25.4) : Number(e.target.value);
    var dpi = Number(form.dpiInput.value);
    if (val > 0) {
        if (val * dpi > maxSize) {
            errors.width.state = true;
            errors.width.msg = 'The maximum image dimension is ' + maxSize +
                'px, but the width entered is ' + (val * dpi) + 'px.';
        } else if (val * window.devicePixelRatio * 96 > maxSize) {
            errors.width.state = true;
            errors.width.msg = 'The width is unreasonably big!';
        } else {
            errors.width.state = false;
            if (unit == 'mm') val *= 25.4;
            document.getElementById('map').style.width = toPixels(val);
            map.resize();
        }
    } else {
        errors.width.state = true;
        errors.height.msg = 'Width must be a positive number!';
    }
    handleErrors();
});
form.heightInput.addEventListener('change', function(e) {
    'use strict';
    var unit = form.unitOptions[0].checked ? 'in' : 'mm';
    var val = (unit == 'mm') ? Number(e.target.value / 25.4) : Number(e.target.value);
    var dpi = Number(form.dpiInput.value);
    if (val > 0) {
        if (val * dpi > maxSize) {
            errors.height.state = true;
            errors.height.msg = 'The maximum image dimension is ' + maxSize +
                'px, but the height entered is ' + (val * dpi) + 'px.';
        } else if (val * window.devicePixelRatio * 96 > maxSize) {
            errors.height.state = true;
            errors.height.msg = 'The height is unreasonably big!';
        } else {
            errors.height.state = false;
            if (unit == 'mm') val *= 25.4;
            document.getElementById('map').style.height = toPixels(val);
            map.resize();
        }
    } else {
        errors.height.state = true;
        errors.height.msg = 'Height must be a positive number!';
    }
    handleErrors();
});
form.dpiInput.addEventListener('change', function(e) {
    'use strict';
    var val = Number(e.target.value);
    if (val > 0) {
        errors.dpi.state = false;
        var event = document.createEvent('HTMLEvents');
        event.initEvent('change', true, true);
        form.widthInput.dispatchEvent(event);
        form.heightInput.dispatchEvent(event);
    } else {
        errors.dpi.state = true;
    }
    handleErrors();
});
form.styleSelect.addEventListener('change', function() {
    'use strict';
    try {
        var style = form.styleSelect.value;
        if (style.indexOf('tilehosting') >= 0)
            style += '?key=' + mapTilerAccessToken;
        map.setStyle(style);
    } catch (e) {
        openErrorModal("Error changing style: " + e.message);
    }
    // Update attribution requirements
    if (form.styleSelect.value.indexOf('mapbox') >= 0) {
        document.getElementById('mapbox-attribution').style.display = 'block';
        document.getElementById('openmaptiles-attribution').style.display = 'none';
    } else {
        document.getElementById('mapbox-attribution').style.display = 'none';
        document.getElementById('openmaptiles-attribution').style.display = 'block';
    }
});
form.mmUnit.addEventListener('change', function() {
    'use strict';
    form.widthInput.value *= 25.4;
    form.heightInput.value *= 25.4;
});
form.inUnit.addEventListener('change', function() {
    'use strict';
    form.widthInput.value /= 25.4;
    form.heightInput.value /= 25.4;
});
if (form.unitOptions[1].checked) {
    // Millimeters
    form.widthInput.value *= 25.4;
    form.heightInput.value *= 25.4;
}
form.latInput.addEventListener('change', function() {
    'use strict';
    map.setCenter([form.lonInput.value, form.latInput.value]);
});
form.lonInput.addEventListener('change', function() {
    'use strict';
    map.setCenter([form.lonInput.value, form.latInput.value]);
});
form.zoomInput.addEventListener('change', function(e) {
    'use strict';
    map.setZoom(e.target.value);
});

Interessant ist, dass er die Karte richtig ausgibt und die Höhe und Breite Felder auch nutzt, auch wenn die Karte auf der Website falsch dargestellt ist und nicht updated.

 

[Thallius]

Hast du denn mal paar console.log rein gemacht um zu schaun was eigentlich aufgerufen wird. Also wenn du ein val() auf ein Select Feld aufrufst, dann ist das genauso als würdest du es mit der Maus anklicken. Es wird also auch dort ein change event ausgelöst. Vielleicht liegt hier schon dein Verständnisproblem?

 

[thecartographer]

Nee hab ich nicht, kenn mich leider auch nicht sonderlich gut mit Java und Coden aus. Ist wie gesagt ein Projekt das ich nur "verfeiern" soll und genau die Dinge die ich mir wünsche, lassen sich nur schwer für mich realisieren.

 

[Thallius]

Tja, dann hilft wohl nur lernen...

 

[mrBrown]

kenn mich leider auch nicht sonderlich gut mit Java und Coden aus

Das ist übrigens auch kein Java, sondern Javascript.