Unsere Forensoftware - Was ist kaputt, was wird repariert?

[Ramkhamhaeng]

@Shakka:

Aufgrund der Doki Doki Literature Club-Story habe ich ein kleines Skript geschrieben, dass beim Druck auf [Enter] den nächsten Anhang einer Story genau an die Position verschiebt an der das (oberste) jetzige Bild zu sehen ist.
Das ist dort besonders nützlich, da sich meistens nur ein kleiner Ausschnitt des Bildes ändert.

Vielleicht ist das nützlich genug, um es allgemein ins Forum einzubauen?!


Edit: Rückwärts springen mit Shift+Enter ergänzt und zum Test es als FF-Addon angehängt.

Wer es ausprobieren möchte und FF/Chrome nutzt: Ich habe ein Zip für ein Mini-Addon angehängt. Das kann man entpacken und dann entweder über 'about:debugging' (Firefox) oder Erweiterungen>Entwickermodus (Chrome) laden.

[Ramkhamhaeng]

Falls es mal jemand ausprobieren will oder selber ein Skript fürs Forum schreiben will und eine Vorlage braucht:
Ich habe das Skript jetzt noch als Mini-Addon im vorherigen Beitrag eingefügt.

[Shakka]

Das kann ich leicht einbauen.
Wen ich das auf showthread.php beschränke, hat das dann ungewünschte Nebeneffekte?
Im Prinzip braucht man Enter nur bei der Suchzeile. Da ist es egal, wenn ausversehen gescrollt wird.

[Ramkhamhaeng]

Das kann ich leicht einbauen.
Wen ich das auf showthread.php beschränke, hat das dann ungewünschte Nebeneffekte?
Im Prinzip braucht man Enter nur bei der Suchzeile. Da ist es egal, wenn ausversehen gescrollt wird.

Ich habe es lokal auch auf showthread.php beschränkt. Das sollte keinen Nebeneffekt aufweisen.
Bei der Taste habe ich nur Enter/Shift+Enter gewählt, weil mir da am wenigsten Kollisionen vorstellen kann. Einen triftigen Grund gibt es nicht. Falls du eine andere Taste bevorzugst, nur zu

Wenn der Focus in einem Eingabefeld ist, sollte Enter nicht an den Handler weitergeleitet werden
Außerdem passiert nur etwas, wenn auch ein Bild im Viewport sichtbar ist. Das ist Absicht, aber könnte auch zu Verwunderung beim Benutzer führen. Evtl. kann man das Verhalten noch verbessern.

[Peregrin_Tooc]

Ich hab noch nicht wirklich verstanden, was das macht. Kannst Du das nochmal für Dumme anhand eines Beispiels erklären, bitte

[Ramkhamhaeng]

Gehen wir davon aus, dass du eine Story im Forum mit sehr vielen Screenshots liest und es ist auf dem Monitor ein Bild zu sehen.
Drückst du nach dem Einbau des Skripts auf "Enter" wird so gescrollt, dass das nächste Bild der Story genau an der Stelle des jetzigen Bildes platziert wird. Das empfinde ich beim Lesen sehr angenehm und entspricht etwas dem Verhalten, was ich, in Bildlastigen Stories, per Scrollen manuell erreichen will.

Sind die Bilder sehr ähnlich, reagiert das Auge auch sofort auf die unterschiedlichen Stellen. Das ist sogar ein berühmtes Verfahren bei Astronomen (komme gerade nicht auf den Begriff^^)
Edit: Ah, das ist der Blinkkomperator

[Peregrin_Tooc]

Es geht ums Lesen

Ich dachte ans Schreiben

[Shakka]

Ich habe das Script nun eingebunden.
Wenn es nicht direkt verfügbar ist, die Seite mit Strg+F5 neu laden.


am besten hier ausprobieren: https://www.civforum.de/showthread.p...ei%DFen/page10

[Admiral G]

Mega Geil!!!

[Ramkhamhaeng]

Hm, ich habe leider nicht beachtet, dass nur eine der Attachment-Varianten beachtet wird.
Außerdem haben die Bilder-Tags nicht mehr die Property „title="Bild"“, die gestern noch da war?!

Test.... (Beitrag wird später editiert)

[rucivfan]

Auf Seite 1 der Doki Doki Story muss man immer ein müh runter scrollen, damit enter zum nächsten Bild springt. Auf Seite 10 ist das nicht notwendig.

[Ramkhamhaeng]

@Shakka:

Eine Verbesserung bei der Auswahl der Bilder (passt für ATT, ATT2 und IMG). Aber warte lieber noch ab. Rucivfans Kommentar deutet auf nen weiteren notwendigen Fix hin. (Bananensoftware )

  var attachments = document.querySelectorAll('img[src*=attachment][title=Bild]');
  var attachments = document.querySelectorAll('div.postbody * img[src*=attachment]');

Auf Seite 1 der Doki Doki Story muss immer ein müh runter scrollen, damit enter zum nächsten Bild springt. Auf Seite 10 ist das nicht notwendig.

Das scheint an Bildern in Spoilern zu liegen.

[Shakka]

Das scheint an Bildern in Spoilern zu liegen.

Dann brauchen wir noch ein

:visible

[Ramkhamhaeng]

Hm, ein Einzeiler dafür wäre dann

var attachments = $(document.querySelectorAll('div.postbody * img[src*=attachment]')).filter(':visible');

Dann müsste man die Funktion gen_list_of_attachments() aber bei jedem Event aufrufen, weil sich die Sichtbarkeit zwischendurch ändern kann (Klick auf den Spoiler-Button). Andererseits wird bei mir komischerweise die Funktion aber wirklich immer aufgerufen, weil die globale Variable, in der ich die Liste der Bilder speichere, immer wieder vergessen wird Ah nein, dass lag an einem Fehler.

Die Entertaste wird übrigens doch noch bei einer anderen Funktion benutzt: Hat ein Button, z.B. beim Spoiler-Tag den Fokus wird, das Skript + Button-Event ausgefügt. (Lösung gefunden...)

[Ramkhamhaeng]

Ok, die zwei Probleme mit der Spoiler-Button-Funktionalität sollten nun behoben sein. Hier noch mal der Code im ganzen, da diesmal mehr Zeilen geändert wurden. Auf globale Variablen wird jetzt verzichtet.

Achtung Spoiler:

/* Jump to next image of 'vBulletin story thread'.
 * Default event is keypress of enter (event.which == 13).
 *
 * Requires jQuery...
 * */

/* External interface. Call this for initialisation...
*/
function next_image_init(){

  // Add hander [enter] keypress
  $(window).keypress(function( event ) {
    //console.log("E:" + event.which + ", " + event.target.tagName);
    if ( event.which == 13 && event.target instanceof HTMLBodyElement ) handler_goto_next_story_image(event.shiftKey);
  });
}

// =====================================================================
/* Internal stuff */

function gen_list_of_attachments(){
  /* Example code of valid images
   *
   :
   <a href="attachment.php?attachmentid=649344" target="_blank"><img src="attachment.php?attachmentid=649344" alt="Bild" border="0" style="max-width:640px"/></a><br />

   * oder auch
   <a href="https://www.civforum.de/attachment.php?attachmentid=1635163" target="_blank">
   <img src="[...]attachment_009.jpeg" alt="Bild" style="max-width:100%" title="Bild" border="0">
   </a><br>

   :
   <a href="attachment.php?attachmentid=649344" target="_blank"><img src="attachment.php?attachmentid=649344" alt="Bild" border="0" style="max-width:100%"/></a><br />

   [img]...[/img]:
   <img src="http://civforum.de/attachment.php?attachmentid=649344" border="0" alt="" />
   */

  var attachments = $(document.querySelectorAll('div.postbody * img[src*=attachment]')).filter(':visible');
  return attachments;
}

function get_top_image_of_view_range(story_images){
  var most_top = null;
  var pos_top = 100000000;
  var wh = $(window).height() + 1000; // Optional restriction by window height

  for( var i=0; i<story_images.length; i++){
    var el = story_images[i];
    var viewportOffset = el.getBoundingClientRect();

    //if( $(el).filter(':hidden').length > 0 ) continue;

    // these are relative to the viewport
    if( viewportOffset.top >= 0 && viewportOffset.top <= wh ){
      // Vertical position ok
      if( viewportOffset.top < pos_top){
        most_top = el;
        pos_top = viewportOffset.top;
        //console.log("Select "+i+" "+pos_top);
      }
    }
  }
  //console.log("Pos: "+pos_top);
  return most_top;
}

function get_next_image(story_images, current_image){
  /* Image lower than current image with minimal distance. */

  if( current_image === null ) current_image = get_top_image_of_view_range(story_images);
  if( current_image === null ){
    // No image complete in (vertical) viewport.
    return null;
  }

  var viewportOffsetCur = current_image.getBoundingClientRect();
  var ret = null;
  var dist = 100000000;
  for( var i=0; i<story_images.length; i++){
    var el = story_images[i];
    var viewportOffsetNext = el.getBoundingClientRect();
    if( current_image == el ) continue; // Required
    //if( $(el).filter(':hidden').length > 0 ) continue;
    if( viewportOffsetNext.top < viewportOffsetCur.top ) continue;
    if( viewportOffsetNext.top == viewportOffsetCur.top &&
        viewportOffsetNext.left <= viewportOffsetCur.left ) continue;
    if( viewportOffsetNext.top - viewportOffsetCur.top > dist ) continue;
    ret = el;
    dist = viewportOffsetNext.top - viewportOffsetCur.top;
    //console.log("Next select "+i+" "+dist);
  }

  return ret;
}

function get_prev_image(story_images, current_image){
  /* Image higher than current image with minimal distance. */

  if( current_image === null ) current_image = get_top_image_of_view_range(story_images);
  if( current_image === null ){
    // No image complete in (vertical) viewport.
    return null;
  }

  var viewportOffsetCur = current_image.getBoundingClientRect();
  var ret = null;
  var dist = -100000000;
  for( var i=0; i<story_images.length; i++){
    var el = story_images[i];
    var viewportOffsetPrev = el.getBoundingClientRect();
    if( current_image == el ) continue; // Required
    //if( $(el).filter(':hidden').length > 0 ) continue;
    if( viewportOffsetPrev.top > viewportOffsetCur.top ) continue;
    if( viewportOffsetPrev.top == viewportOffsetCur.top &&
        viewportOffsetPrev.left >= viewportOffsetCur.left ) continue;
    if( viewportOffsetPrev.top - viewportOffsetCur.top < dist ) continue;
    ret = el;
    dist = viewportOffsetPrev.top - viewportOffsetCur.top;
    //console.log("Next select "+i+" "+dist);
  }

  return ret;
}

function scroll_to_next_image(cur, next){
  /* Move view from top left corner of 'cur' to 'next' image.
  */

  if( cur === null || next === null ){
    console.log("(scroll_to_next_image) Hey, one of the images is null.");
    return;
  }

  var viewportOffsetCur = cur.getBoundingClientRect();
  var viewportOffsetNext = next.getBoundingClientRect();
  var dx = viewportOffsetNext.left - viewportOffsetCur.left;
  var dy = viewportOffsetNext.top - viewportOffsetCur.top;
  //console.log("Scroll by... " + dx + ", " + dy);
  window.scrollBy(dx, dy);
}

function handler_goto_next_story_image(bReverse){
  /* Search next image and scroll to it.
   *
   */
  var story_images = gen_list_of_attachments();
  var current_top_image = get_top_image_of_view_range(story_images);

  if( bReverse ){
    next_top_image = get_prev_image(story_images, current_top_image);
  }else{
    next_top_image = get_next_image(story_images, current_top_image);
  }
  if( next_top_image !== null ){
    scroll_to_next_image(current_top_image, next_top_image);
    //current_top_image = next_top_image;
  }
}