Änderungen von Dokument Script

Zuletzt geändert von Daniel Herrmann am 2026/02/07 23:23

Verwalten
- Kopieren
Aktionen
- Exportieren
- Druckvorschau
Ansichten
- Quellcode
- Geschwister
- Inhalt
- Kommentare
- Anmerkungen
- Anhänge
- Historie
- Information

Von 2.1 nach 1.1

Von Version

5.1

bearbeitet von Daniel Herrmann
am 2026/02/07 23:23

Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/18.0.1]

Auf Version

2.1

bearbeitet von Daniel Herrmann
am 2025/07/19 16:47

Änderungskommentar: Install extension [org.xwiki.platform:xwiki-platform-annotation-ui/17.5.0]

Rohform
Im Layout

Zusammenfassung

Objekte (2 geändert, 0 hinzugefügt, 0 gelöscht)
- XWiki.JavaScriptExtension[0]
- XWiki.JavaScriptExtension[1]

Details

XWiki.JavaScriptExtension[0]

Code

@@ -37,13 +37,11 @@
        return;
      }
      this.range = window.getSelection().getRangeAt(0);
--    // ignore if the selection is not in the passed container
++    // ignore if the selection is in the passed container
      if (!this.isDescendantOrSelf(this.container, this.range.commonAncestorContainer)) {
        return;
      }
      this.selectionText = this.range.toString();
--    this.selectionText = this.selectionText.replaceAll(
--        "$escapetool.xml($services.localization.render('annotations.annotated.highlight.toggle.hint'))",'')
      if (this.selectionText.strip() == '') {
        this.selectionText = false;
      }
@@ -63,15 +63,13 @@
    // these functions are here because they depend on selection
--  highlightSelection : function() {
++  highlightSelection : function(color) {
      if (!this.range) {
        // there should be some selection at this point
        return;
      }
      // create an annotation highlight span around this content
--    var highlightWrapperTemplate = new Element('mark', {
--      'class': 'selection-highlight'
--    });
++    var highlightWrapperTemplate = new Element('span', {'style': 'background-color: ' + color, 'class' : 'selection-highlight'});
      // get all the text nodes of this range
      var rangeTextNodes = this.getRangeTextNodes();
      // and remove all the ranges in this selection, otherwise so messed up things will happen

Inhalt parsen

@@ -1,1 +1,1 @@
--Ja
++Nein

XWiki.JavaScriptExtension[1]

Code

@@ -67,7 +67,7 @@
      require(['jquery'], ($) => {
        $(document).on('click', 'blockquote.annotatedText', (event) => {
          if(this.fetchedAnnotations) {
--          // In this case the annotations are just made visible (if need be). This is synchronous and
++          // In this case the annotations are just made visible (if need be). This is synchrnous and
            // we can just let the click event bubble up.
            this.setAnnotationVisibility(true);
            this.toggleAnnotations(this.displayingAnnotations);
@@ -247,6 +247,8 @@
      if (this.displayHighlight) {
        this.annotatedElement.select('.annotation').invoke('toggleClassName', 'annotation-highlight', !!visible);
      }
++    // Toggle all annotation markers.
++    this.annotatedElement.select('.annotation-marker').invoke('toggleClassName', 'hidden', !visible);
      this.setAnnotationVisibility(visible);
      if (!visible) {
        // Close all open bubbles.
@@ -343,7 +343,7 @@
            }
            // hide message at page bottom
            this._x_notification.hide();
--          // Load the received annotations, along with annotations highlights.
++          // Load the received annotations, along with annotations markers.
            this.loadAnnotations(response.responseJSON.annotatedContent, andShow, false, force);
            // store the state of the annotations
            this.fetchedAnnotations = true;
@@ -404,87 +404,39 @@
      if (plainTextStartOffset.value === null || plainTextEndOffset.value === null) {
        return false;
      }
++
      var annDOMRange = this.getDOMRange(this.annotatedElement, plainTextStartOffset.value, plainTextEndOffset.value);
      // Since the annotation could start at a specific offset, the node is splitted for not wrapping the whole text and
      // a new range is created to recalculate the new ends.
      var strictRange = this.fixRangeEndPoints(annDOMRange);
--    // Wrap each text node from this range inside an annotation markup node.
++    // Wrap each text node from this range inside an annotation markup SPAN.
      this.getTextNodesInRange(strictRange).forEach(textNode => this.markAnnotation(textNode, ann));
++
++    // Add the marker span after the last span of this annotation.
      var allSpans = this.annotatedElement.select('[class~=ID' + ann.annotationId + ']');
      if (!allSpans.length) {
        return;
      }
--    // We generate the keyboard interactive button.
--    let toggleButton = document.createElement('button');
--    toggleButton.id = 'ID' + ann.annotationId;
--    toggleButton.classList.add('annotation-toggle');
--    toggleButton.classList.add('sr-only');
--    toggleButton.classList.add('btn');
--    toggleButton.classList.add('btn-xs');
--    toggleButton.classList.add('btn-warning');
--    toggleButton.innerHTML = "$!escapetool.javascript($services.icon.renderHTML('note'))";
--    // Add the button at the end of the last mark for the annotation.
--    allSpans[allSpans.length-1].appendChild(toggleButton);
--    // Add the onclick listener on every span of this annotation.
--    allSpans.forEach(markNode => markNode.addEventListener('click', (event) =>
--      this.onMarkerClick(event, ann.annotationId)));
--    // Clicking specifically on the toggle blocks any other event, such as a page reload if the parent is an anchor
--    // The other event can still be triggered by clicking on the other text in it.
--    toggleButton.addEventListener('click', (event) => {
--      this.onMarkerClick(event, ann.annotationId);
--      event.stopPropagation();
--      event.preventDefault();
--    });
--    let onMarkerHover = function(event, allSpans) {
--      allSpans.forEach((span) => span.classList.add('hovered'));
--    };
--    let onMarkerHoverLeft = function(event, allSpans) {
--      allSpans.forEach((span) => span.classList.remove('hovered'));
--    };
--    // Add the hover listener on every span to highlight every part of its annotation
--    allSpans.forEach(function(markNode){
--      markNode.addEventListener('mouseover', (event) => onMarkerHover(event, allSpans));
--      markNode.addEventListener('mouseout', (event) => onMarkerHoverLeft(event, allSpans));
--    });
--    // Only the button can be focused with the keyboard.
--    toggleButton.addEventListener('focus', (event) => {
--      event.target.classList.remove('sr-only');
--      onMarkerHover(event, allSpans);
--    });
--    toggleButton.addEventListener('focusout', (event) => {
--      event.target.classList.add('sr-only');
--      onMarkerHoverLeft(event, allSpans);
--    });
++    var lastSpan = allSpans[allSpans.length - 1];
++    // Create the annotation markers hidden by default, since annotations are added on the document hidden by default.
++    var markerSpan = new Element('span', {'id': 'ID' + ann.annotationId, 'class' : 'hidden annotation-marker ' + ann.state});
++    lastSpan.insert({after: markerSpan});
++    // Annotations are displayed on mouseover.
++    markerSpan.observe('click', this.onMarkerClick.bindAsEventListener(this, ann.annotationId));
    },
--  addAnnotationsToggleHint : function(annotations) {
--    annotations.forEach((ann) => {
--      var plainTextStartOffset = ann.fields.find(field => field.name === 'plainTextStartOffset');
--      var plainTextEndOffset = ann.fields.find(field => field.name === 'plainTextEndOffset');
--      if(plainTextStartOffset.value === null || plainTextEndOffset.value === null) {
--        return false;
--      }
--      let toggleButtonDescription = document.createElement('span');
--      toggleButtonDescription.addClassName('sr-only');
--      toggleButtonDescription.id = 'annotation-toggle-description-' + ann.annotationId;
--      toggleButtonDescription.textContent =
--        "$escapetool.xml($services.localization.render('annotations.annotated.highlight.toggle.hint'))";
--      let toggleButton = document.getElementById('ID' + ann.annotationId);
--      toggleButton.appendChild(toggleButtonDescription);
--    });
--  },
--
    /**
--   * Surround this node with a span corresponding to its annotation.
++   * Surround this node with a span corresponding to it's annotation.
     *
     * @param markedNode the node that corresponds to the current annotation
     * @param ann object holding information about the annotation
     */
    markAnnotation: function(markedNode, ann) {
--    var wrapper = document.createElement('mark');
++    var wrapper = document.createElement('span');
      wrapper.addClassName('annotation');
      wrapper.addClassName('ID' + ann.annotationId);
++
      var parentNode = markedNode.parentElement;
      parentNode.replaceChild(wrapper, markedNode);
      wrapper.appendChild(markedNode);
@@ -640,13 +640,13 @@
    },
    /**
--   * Remove the wrappers for annotations. The selection highlight is also removed in case the new annotation
++   * Remove the wrapper and marker of annotations. The selection highlight is also removed in case the new annotation
     * was deleted.
     */
    removeAnnotationsAndSelectionMarkups: function() {
--    document.querySelectorAll("mark.annotation, mark.selection-highlight")
++    document.querySelectorAll("span.annotation, span.selection-highlight")
        .forEach(annotationNode => annotationNode.replaceWith(...annotationNode.childNodes));
--    document.querySelectorAll("button.annotation-toggle, span[id^='annotation-toggle-description-']").forEach(description => description.remove());
++    document.querySelectorAll("span.annotation-marker").forEach(marker => marker.remove());
      this.fetchedAnnotations = false;
    },
@@ -798,7 +798,8 @@
        }
      }.bindAsEventListener(this));
    },
--
++
++  // maybe this should be moved in a function to display a bubble from an address, to call for all dialogs for different parameters
    onMarkerClick : function(event, id) {
      var bubbleId = 'annotation-bubble-' + id;
      var bubble = $(bubbleId);
@@ -810,23 +810,9 @@
        this.hideBubble(bubble);
      } else {
        // Show the bubble and fetch the annotation display in it.
--      // If the event is triggered via keyboard, we use the annotation highlight position instead of the event position
--      let bubbleCoordX,bubbleCoordY ;
--      if (event.pageX === 0 && event.pageY === 0) {
--        let highlight = event.target;
--        let rect = highlight.getBoundingClientRect();
--        bubbleCoordX = rect.left + window.scrollX + highlight.offsetWidth / 2;
--        bubbleCoordY = rect.top + window.scrollY + highlight.offsetHeight / 2;
--      }
--      else {
--        bubbleCoordX = event.pageX;
--        bubbleCoordY = event.pageY;
--      }
--      var bubble = this.displayLoadingBubble(bubbleCoordX, bubbleCoordY, true);
++      var bubble = this.displayLoadingBubble(event.element().cumulativeOffset().top,
++        event.element().cumulativeOffset().left);
        bubble.writeAttribute('id', bubbleId);
--      // Link semantically the clicked mark to the generated bubble
--      // Adding this info earlier is useless since the element is not even loaded before the click.
--      event.target.writeAttribute('aria-details', bubbleId);
        this.fetchAndShowAnnotationDetails(id, bubble);
      }
    },
@@ -858,37 +858,29 @@
      }.bind(this));
    },
--  displayLoadingBubble : function(horizontalCoordinate, verticalCoordinate) {
--    // create a bubble element wrapping the form
++  displayLoadingBubble : function(top, left) {
++    // create an element with the form
      var bubble = new Element('div', {'class' : 'annotation-bubble'});
--    // Add a nice loading panel inside
++    // and a nice loading panel inside
      bubble.insert({top : new Element('div', {'class' : 'loading'})});
--    // Position it off-screen at first, before we measure it and compute its final position
--    bubble.style.top = verticalCoordinate + 'px';
--    bubble.style.left = '-100%';
--    // and insert the bubble in the content
++    // and put it in the content
      document.body.insert({bottom : bubble});
++    // make it hidden for the moment
++    bubble.toggleClassName('hidden');
++    // position it
++    bubble.style.left = left + 'px';
++    bubble.style.top = top + 'px';
++    // make it visible
++    bubble.toggleClassName('hidden');
      // put this bubble in the bubbles stack
      this.bubbles.push(bubble);
--    // position the bubble
--    // By default, we position it to the right and under the coordinates
--    // Position it horizontally.
--    let bubbleStyles = getComputedStyle(bubble);
--    let bubbleWidth = bubble.offsetWidth
--      + parseInt(bubbleStyles.marginLeft)
--      + parseInt(bubbleStyles.marginRight);
--    if (horizontalCoordinate < bubbleWidth
--      || horizontalCoordinate + bubbleWidth < window.innerWidth) {
--      bubble.style.left = horizontalCoordinate + 'px';
--    } else {
--      // There isn't enough space on the right of the window to fit the modal, and there is enough on the left.
--      bubble.style.left = (horizontalCoordinate - bubbleWidth) + 'px';
--      bubble.toggleClassName('annotation-bubble-position-left');
--    }
      return bubble;
    },
++  displayAnnotationViewBubble : function(marker) {
++  },
++
    /**
     * Updates the container with the passed content only if the container is still displayed, and returns true if this is the case.
     */
@@ -1081,11 +1081,6 @@
      // Cancel the edit otherwise the user will be asked for confirmation when leaving the page.
      document.fire('xwiki:actions:cancel');
--    // Remove all the places where the bubble id is used as an attribute on other elements.
--    document.querySelectorAll('[aria-details="' + bubble.id + '"]').forEach((mark) => {
--      mark.removeAttribute('aria-details');
--    });
--
      bubble.remove();
      var bubbleIndex = this.bubbles.indexOf(bubble);
      if (bubbleIndex >= 0) {
@@ -1206,10 +1206,11 @@
    },
    displayAnnotationCreationForm : function() {
--    this.selectionService.highlightSelection();
++    // TODO: get this color from the color theme
++    this.selectionService.highlightSelection('#FFEE99');
      // get the position and build the loading bubble
      var position = this.selectionService.getPositionNextToSelection();
--    this.createPanel = this.displayLoadingBubble(position.left, position.top, false);
++    this.createPanel = this.displayLoadingBubble(position.top, position.left);
      // remove the ctrl + M listeners, so that only one dialog is displayed at one moment
      this.unregisterAddAnnotationShortcut();
    },
@@ -1302,6 +1302,16 @@
    }
  })
++define('node-module', ['jquery'], function($) {
++  return {
++    load: function(name, req, onLoad, config) {
++      $.get(req.toUrl(name + '.js'), function(text) {
++        onLoad.fromText(`define(function(require, exports, module) {${text}});`);
++      }, 'text');
++    }
++  }
++});
++
  define('xwiki-text-offset-updater', ['jquery', 'node-module!fast-diff'], function($, diff) {
    /**
     * Compute the changes between different versions of a text.
@@ -1392,8 +1392,6 @@
          this.removeAnnotationsAndSelectionMarkups();
          this.updateAnnotationsOffsets(annotatedContent);
          this.addAnnotationsMarkup(annotatedContent.annotations);
--        // We add the hints afterwards because they shift the ranges in the text.
--        this.addAnnotationsToggleHint(annotatedContent.annotations);
          // Notify the content change.
          $(document).trigger('xwiki:dom:updated', {'elements': [this.annotatedElement]});
          // Also handle the tab 'downstairs' when the annotations list changes.