ToDo JavaScript/URL/createObjectURL Idee mit Umsetzung

[Samuel fiedler]

Hallo an alle!

Ich habe mich nach (leider) sehr viel Zeit mal wieder im Wiki nach ToDos umgeschaut.
Dort ist mir dann sofort JavaScript/URL/createObjectURL ins Auge gesprungen, weil ich im Kopf hatte, das ich damit schon einmal etwas gemacht habe. Also habe ich mich sofort an die Umsetzung gemacht.
Das Ergebnis ist aktuell ein Fiddle, prinzipiell fertig fürs Wiki.

Was ist eure Meinung dazu?

Au revoir,
Samuel Fiedler

[Gunnar Bittersmann]

@@Samuel fiedler

Das Ergebnis ist aktuell ein Fiddle, prinzipiell fertig fürs Wiki.

Nein. Dieses Ding darf so auf keinen Fall ins Wiki. Erst müssen die Fehler ausgemerzt werden:

• Sämtlichen Eingabefeldern fehlt die Beschriftung.

• Man denkt, die Felder sind bereits beispielhaft vorausgefüllt. Sind sie aber nicht. placeholder ist so ziemlich das dümmste Feature in HTML. Nicht verwenden!

  Wenn die Felder vorausgefüllt sein sollen, dann mit value.

• Der Download-Link führt initial zum aktuellen Dokument; href="" ist falsch. Er sollte, wenn’s nichts zum Herunterladen gibt, kein Link sein, d.h. das a-Element sollte kein href-Attribut haben.

  Dafür aber ein hidden-Attribut, und der Link wird erst angezeigt, wenn er sinnvoll ist. Also beim Setzen von link.href dann auch link.hidden = false setzen.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Samuel fiedler

Das Ergebnis ist aktuell ein Fiddle, prinzipiell fertig fürs Wiki.

Zuerst:

1. Vielen Dank für Dein Beispiel!

2. Herzlichen Glückwunsch zum Beispiele-Administrator.^[1] (Du kannst jetzt Live-Beispiele hochladen. Hier gibt es mehr Informationen: Hilfe:Wiki/Beispiele)

Nein. Dieses Ding darf so auf keinen Fall ins Wiki.

Die Betonung liegt auf „so“

Erst müssen die Fehler ausgemerzt werden:

• Sämtlichen Eingabefeldern fehlt die Beschriftung.

• Man denkt, die Felder sind bereits beispielhaft vorausgefüllt. Sind sie aber nicht. placeholder ist so ziemlich das dümmste Feature in HTML. Nicht verwenden!

  Wenn die Felder vorausgefüllt sein sollen, dann mit value.

• Der Download-Link führt initial zum aktuellen Dokument; href="" ist falsch. Er sollte, wenn’s nichts zum Herunterladen gibt, kein Link sein, d.h. das a-Element sollte kein href-Attribut haben.

  Dafür aber ein hidden-Attribut, und der Link wird erst angezeigt, wenn er sinnvoll ist. Also beim Setzen von link.href dann auch link.hidden = false setzen.

Ganz auf die Schnelle:

<form>
<label for="input_text">Inhalt</label>
<textarea id="input_text" width="80" height="25">Hallo Welt</textarea>

<label for="input_type">MIME-Typ</label>
<input type="text" id="input_type">

<label for="input_name">Vorgeschlagener Dateiname</label>
<input type="text" id="input_name" list="mime">
  <datalist id="mime">
        <option value="text/css"> 
        <option value="text/html"> 
        <option value="text/html"> 
        <option value="image/svg+xml"> 
  </datalist>

<button id="generate">Download-URL generieren</button>
<a hidden download="" id="download">Noch nichts</a>
</form>

Die br kann man weglassen und durch CSS formatieren!

• HTML/Tutorials/Formulare/Beschriftungen

Wenn man das mit erklärendem Begleittext im Wiki hat, kann man ja mal weitergucken.

Herzliche Grüße

Matthias Scharwies

---

1. Das Standalone-SVG-Tutorial hat mir gut gefallen! ↩︎

[Samuel fiedler]

Hallo Matthias Scharwies!

Ich habe jetzt das Fiddle bearbeitet und einen Wiki-Artikel mit Live-Beispiel entworfen.

Was wäre jetzt eure Meinung dazu?

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel,

man sollte noch einheitliche Umbrüche machen. Da Du eine Textarea hast, denke ich, dass jedes Label über seinem Eingabeelement stehen sollte (das ist für Webseiten eh die bessere Idee). Gib doch einfach jedem Label den display:block und noch einen margin-top:0.5em oder so.

Die textarea könnte width:90vw und height:4em bekommen. Aber das ist jetzt Kleinkram.

Da es im Artikel um createObjectURL geht, musst Du nur das relevante HTML zeigen und auf das CSS würde ich gar nicht eingehen. Das ist Hintergrundrauschen, das einem JavaScript-Kunden bekannt sein sollte.

Beim JavaScript-Anteil würde ich den DOMContentLoaded-Handler ebenfalls weglassen. Der ist dem Frickl geschuldet und für das Verständnis irrelevant. Das machen viele andere Artikel auch so.

Rolf

[Samuel fiedler]

Hallo Rolf B!

man sollte noch einheitliche Umbrüche machen. Da Du eine Textarea hast, denke ich, dass jedes Label über seinem Eingabeelement stehen sollte (das ist für Webseiten eh die bessere Idee). Gib doch einfach jedem Label den display:block und noch einen margin-top:0.5em oder so.

Gute Idee.

Da es im Artikel um createObjectURL geht, musst Du nur das relevante HTML zeigen und auf das CSS würde ich gar nicht eingehen. Das ist Hintergrundrauschen, das einem JavaScript-Kunden bekannt sein sollte.

Stimmt eigentlich.

Beim JavaScript-Anteil würde ich den DOMContentLoaded-Handler ebenfalls weglassen. Der ist dem Frickl geschuldet und für das Verständnis irrelevant. Das machen viele andere Artikel auch so.

Ist jetzt so im Wiki-Entwurf drin.

Au revoir,
Samuel Fiedler

[Gunnar Bittersmann]

@@Rolf B

Gib doch einfach jedem Label den display:block und noch einen margin-top:0.5em oder so.

Und noch width: fit-content.

Wäre unerwartet (also blöd), wenn man überm Eingabefeld neben die Beschriftung clickt und damit das Eingabefeld fokussiert.

Siehe Codepen (wobei der wasserfarbene Hintergrund dort nur zur Verdeutlichung dient).

Mit Flexbox ließe sich das auch hinbekommen.

🖖 Живіть довго і процвітайте

[Samuel fiedler]

Hallo Gunnar Bittersmann!

Gib doch einfach jedem Label den display:block und noch einen margin-top:0.5em oder so.

Und noch width: fit-content.

Wäre unerwartet (also blöd), wenn man überm Eingabefeld neben die Beschriftung clickt und damit das Eingabefeld fokussiert.

Das stimmt allerdings. Wobei ich nicht wenige Webseiten gesehen habe, wo genau dieses Phänomen auftrat…

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Gunnar,

vorweg: ich will nicht nerven, sondern über Dinge, die mir unklar sind, Verständnis gewinnen.

(Codepen 1)

Warum der Margin für form und form p? Die überlappen sich doch eh. Der Margin auf den p Elementen genügt, meine ich.

Flexbox

Für die Flexbox innerhalb der p Elemente - nun gut. Man kann vermutlich Haare darüber spalten, ob das Ausnutzen einer Nebenwirkung (implizites fit-content für ein Blockelement) eine Flexbox rechtfertigt, aber da ich eh nur noch so wenige davon habe…

Die Flexbox auf Form-Ebene finde ich dagegen unpassend. Du nutzt keine besonderen Flexbox-Fähigkeiten außer gap, und das ist dann auch noch problematisch, weil Du für die p Elemente den Margin auf 0 setzt und mit dem gap gegensteuerst. Folge: du hast nun einen impliziten Zusammenhang zwischen margin und gap.

Wäre es da nicht besser, auf die Flexbox auf Form-Ebene zu verzichten und den Margin auf p Ebene zu halten? WENN man möchte, dass das Form außen einen Extra-Abstand hat, kann man dem Form immer noch contain:layout und einen eigenen Margin geben (contain deshalb, um nicht die implizite Kopplung zu haben, dass der form-margin größer sein muss als der p-margin).

form p {
	margin: 1.4em 0;
	max-width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: start;
}

Rolf

[Rolf B]

Hallo Samuel,

(hat sich mit deinem Posting überschnitten)

das ist eine schöne Idee. Aber bitte beachte den Beachten-Abschnitt auf der Wiki-Seite, sonst erzeugst Du ein Speicherleck, das tröpfelt, bis die Demo-Seite verlassen wird.

Heißt: du solltest vor dem Setzen des href-Attributs schauen, ob da schon eine URL drin ist und seinen Wert an revokeObjectURL übergeben. Möglicherweise steht ein Wert drin, der keine ObjectURL ist, aber da kann man es sicherlich wie die Spanische Inquisition halten: Der Herr wird die Seinigen erkennen… Ich bin nämlich nicht so sicher, ob ObjectURLs browserübergreifend ein genormtes Format haben, so dass man sie durch Ansehen erkennen kann.

Ich überlege noch, ob man den MIME-Typ mit einem Select-Element hinterlegen sollte, damit nur gängige Text-Typen verwendet werden. Könnte man aber auch unter GIGO verbuchen.

Den DOMContentLoaded Handler brauchen wir leider für unser Frickl, weil Frickl das Script in den head setzt. Ein modernisiertes Frickl würde das verbessern, aber das liegt mit dem Wiki Makeover auf Halde. Im Beispiel verwenden wir deshalb den Eventhandler, im Wikiartikel übergehen wir das zumeist. TIL: DOMContentLoaded blubbert. Ich habe es immer auf dem document registriert, weil es da auch ausgelöst wird. Dass es auch auf dem Window-Objekt geht, wusste ich gar nicht.

Rolf

[Samuel fiedler]

Hallo Rolf B!

Meine Idee zum Speicherleck wäre noch, alle URLs in ein Array zu packen und das als Buttons anzuzeigen. Dort könnte man ggfs. dann durch einen Klick auf den jeweiligen Button die jeweilige URL revoken.

Das wäre aber besser für revokeObjectURL als Beispiel und nicht für createObjectURL.

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel,

es wäre aus meiner Sicht eine Sondersituation, dass man alle generierten Objekt-URLs festhalten möchte. Als Beispiel für create/revokeObjectURL ist das der Overkill.

Wenn Du einfach nur die URL freigibst, die im Link drin ist, reicht das sicherlich als Beispiel für create UND revoke aus.

Rolf

[Samuel fiedler]

Hallo Rolf B!

Ist jetzt so im Wiki.

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel,

wer sich anbietet, erntet Kommentare 😉. Meine eigenen Beispiele mutieren auch immer einige Zeit lang vor sich hin, bis sie mir und anderen gefallen.

Nachdem ich deine Begründung für type="button" gelesen habe, fällt mir noch was auf.

Ein Form ohne Submit ist - meine ich - nicht so sinnvoll. Man kann aber, statt gar keinen Submit-Button zu haben, sich auf das submit-Event des Forms registrieren und im Submit-Handler mit event.preventDefault() den echten Submit unterbinden.

Ich würde das JS für das Beispiel dann so strukturieren:

document.addEventListener("DOMContentLoaded", function() {
	const formElement = document.forms.urlForm;
        
  // Submit auf Form abfangen
  formElement.addEventListener("submit", (submitEvent) => {
    // Echten Submit verhindern
    submitEvent.preventDefault();
    // URL erzeugen und im Link ablegen
    generateURL();     
  });

  function generateURL() {
  ...
  }
});

Den DOMContentLoaded-Rahmen lässt man im Wiki-Artikel weg.

Diese Variante verwendet im HTML dann nur noch

<button>Download-URL generieren</button>

Die anonyme Funktion, die den Submit-Handler bildet, kümmert sich um das Stoppen des Submit. Das ist "single responsibility" - eine Funktion hat die Ablaufsteuerung, die andere Funktion bestückt den Link.

In generateURL kannst Du formElement nutzen und auch dessen Komfortfunktionen verwenden, also z.B. formElement.input_text ansprechen statt mit getElementById("input_text") zu hantieren. Das Link-Element kriegst Du so nicht erreicht, a Elemente sind keine Formelemente und tauchen darum in der elements-Collection eines Forms nicht auf.

Das ist jetzt nur eine Anregung, kein Auftrag. Mein Fiddle sieht so aus: https://jsfiddle.net/Rolf_b/6qh4yrwe/. Die textarea hat bei mir box-sizing:border-box, weil eine textarea per Default padding und border hat und deswegen width:100% ohne das box-sizing zu breit ist. Und Gunnars Flexbox-Idee für den p Container hab ich aufgegriffen.

Rolf

[Samuel fiedler]

Hallo Rolf B!

Ein Form ohne Submit ist - meine ich - nicht so sinnvoll.

Streng genommen ist die Verarbeitung clientseitig, was nach einem Artikel im Wiki ein type="button" sein müsste.
Allerdings wäre es mit Submit und event.preventDefault auch passend, da die Daten ja verarbeitet werden.

Ich würde das JS für das Beispiel dann so strukturieren:

document.addEventListener("DOMContentLoaded", function() {
	const formElement = document.forms.urlForm;
        
  // Submit auf Form abfangen
  formElement.addEventListener("submit", (submitEvent) => {
    // Echten Submit verhindern
    submitEvent.preventDefault();
    // URL erzeugen und im Link ablegen
    generateURL();     
  });

  function generateURL() {
  ...
  }
});

Also kommen die Event-Listener auch zum Code dazu?

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel fiedler,

Also kommen die Event-Listener auch zum Code dazu?

ja, hm, jetzt hast mich erwischt. Zefix…

Der DOMContentLoaded auf jeden Fall nicht. Der andere, ja doch, der macht ergäbe Sinn.

Rolf

[Samuel fiedler]

Hallo Rolf B!

Der Form-Submit-Event-Listener (schönes langes Wort) ist jetzt im Wiki.

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel,

ich habe deinen Benutzerraum-Artikel jetzt ins Hauptwiki übertragen, und zwar hier:

https://wiki.selfhtml.org/wiki/JavaScript/URL/createObjectURL

Es ein paar Dopplungen, und auch unnötige Erlärungswiederholungen, deshalb habe ich deinen Text als Vorlage verwendet und nochmal überarbeitet, damit er zum Rest passt. Dein Beispiel ist 1:1 übernommen, ich habe aber deinen Extraabschnitt mit dem vollständigen Beispiel weggelassen und statt dessen das zeige-Attribut auf den JavaScript-Code gelegt.

Vielen Dank für deine Vorarbeit. Es ist viel leichter, eine gute Vorlage anzupassen statt selbst von vorn anzufangen. Wenn Du mit dem Ergebnis unzufrieden bist, darfst Du natürlich gerne im createObjectURL-Artikel weiterfeilen. Deinen Artikel im Benutzer-Namensraum kannst Du, wenn Du ihn nicht mehr brauchst, löschen.

Ein bisschen habe ich ein schlechtes Gewissen, weil jetzt nicht dein Name in der Versionsgeschichte des Artikels steht. Es ist aber andererseits auch unüblich im Wiki, Artikelteile mit Autoren zu versehen…

Rolf

[Tabellenkalk]

Hallo,

Ein bisschen habe ich ein schlechtes Gewissen, weil jetzt nicht dein Name in der Versionsgeschichte des Artikels steht. Es ist aber andererseits auch unüblich im Wiki, Artikelteile mit Autoren zu versehen…

Hat das Wiki keine Verschiebefunktion?

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

es gab ja schon den Artikel zu createObjectURL, da fehlte nur das Beispiel, das Samuel jetzt erstellt hat.

Rolf

[Samuel fiedler]

Hallo Rolf B!

ich habe deinen Benutzerraum-Artikel jetzt ins Hauptwiki übertragen, und zwar hier:

https://wiki.selfhtml.org/wiki/JavaScript/URL/createObjectURL

Danke!

Vielen Dank für deine Vorarbeit. Es ist viel leichter, eine gute Vorlage anzupassen statt selbst von vorn anzufangen. Wenn Du mit dem Ergebnis unzufrieden bist, darfst Du natürlich gerne im createObjectURL-Artikel weiterfeilen. Deinen Artikel im Benutzer-Namensraum kannst Du, wenn Du ihn nicht mehr brauchst, löschen.

Mit dem Ergebnis bin ich vollkommen zufrieden!

Ein bisschen habe ich ein schlechtes Gewissen, weil jetzt nicht dein Name in der Versionsgeschichte des Artikels steht. Es ist aber andererseits auch unüblich im Wiki, Artikelteile mit Autoren zu versehen…

Kein Problem!

Au revoir,
Samuel Fiedler

[Rolf B]

Hallo Samuel,

vielen Dank nochmal. Und wenn du wieder einmal Arbeitsdrang verspürst, dann zögere nicht, dich auszutoben 😀

Rolf