1

As the title above. Assume, I have a paragraph:

It will be seen that this mere painstaking burrower and grub-worm of a poor devil of a Sub-Sub appears to have gone through the long Vaticans and street-stalls of the earth..

The bold string is a highlight. When I drag my mouse to select string

grub-worm of a poor devil of a Sub-Sub

Then I want to check if my selected text contains the highlight(or the part of the highlight) or not. How could I do that?

The code below is the example to add a highlight when I select a text.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>EPUB.js Highlights Example</title>

  <script src="../dist/epub.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>

  <link rel="stylesheet" type="text/css" href="examples.css">

  <style type="text/css">
    ::selection {
      background: yellow;
    }

    #extras {
      width: 600px;
      margin: 40px auto;
    }

    #highlights {
      list-style: none;
      margin-left: 0;
      padding: 0;
    }

    #highlights li {
      list-style: none;
      margin-bottom: 20px;
      border-top: 1px solid #E2E2E2;
      padding: 10px;
    }

    #highlights a {
      display: block;
    }

    #viewer.spreads {
      top: 0;
      margin-top: 50px;
    }

    [ref="epubjs-mk"] {
      background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHg9JzBweCcgeT0nMHB4JyB2aWV3Qm94PScwIDAgNzUgNzUnPjxnIGZpbGw9JyNCREJEQkQnIGlkPSdidWJibGUnPjxwYXRoIGNsYXNzPSdzdDAnIGQ9J00zNy41LDkuNEMxOS42LDkuNCw1LDIwLjUsNSwzNC4zYzAsNS45LDIuNywxMS4zLDcuMSwxNS42TDkuNiw2NS42bDE5LTcuM2MyLjgsMC42LDUuOCwwLjksOC45LDAuOSBDNTUuNSw1OS4yLDcwLDQ4LjEsNzAsMzQuM0M3MCwyMC41LDU1LjQsOS40LDM3LjUsOS40eicvPjwvZz48L3N2Zz4=") no-repeat;
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: 0;
    }

  </style>
</head>
<body>
  <div id="frame">
    <div id="viewer" class="spreads"></div>
    <a id="prev" href="#prev" class="arrow">‹</a>
    <a id="next" href="#next" class="arrow">›</a>
  </div>
  <div id="extras">
    <ul id="highlights"></ul>
  </div>

  <script>
    // Load the opf
    var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");

    var rendition = book.renderTo("viewer", {
      width: "100%",
      height: 600,
      ignoreClass: 'annotator-hl',
      manager: "continuous"
    });

    var displayed = rendition.display(6);

    // Navigation loaded
    book.loaded.navigation.then(function(toc){
      // console.log(toc);
    });

    var next = document.getElementById("next");
    next.addEventListener("click", function(){
      rendition.next();
    }, false);

    var prev = document.getElementById("prev");
    prev.addEventListener("click", function(){
      rendition.prev();
    }, false);

    var keyListener = function(e){

      // Left Key
      if ((e.keyCode || e.which) == 37) {
        rendition.prev();
      }

      // Right Key
      if ((e.keyCode || e.which) == 39) {
        rendition.next();
      }

    };

    rendition.on("keyup", keyListener);
    document.addEventListener("keyup", keyListener, false);

    rendition.on("relocated", function(location){
      // console.log(location);
    });


    // Apply a class to selected text
    rendition.on("selected", function(cfiRange, contents) {
      rendition.annotations.highlight(cfiRange, {}, (e) => {
        console.log("highlight clicked", e.target);
      });
      contents.window.getSelection().removeAllRanges();

    });

    this.rendition.themes.default({
      '::selection': {
        'background': 'rgba(255,255,0, 0.3)'
      },
      '.epubjs-hl' : {
        'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
      }
    });

    // Illustration of how to get text from a saved cfiRange
    var highlights = document.getElementById('highlights');

    rendition.on("selected", function(cfiRange) {

      book.getRange(cfiRange).then(function (range) {
        var text;
        var li = document.createElement('li');
        var a = document.createElement('a');
        var remove = document.createElement('a');
        var textNode;

        if (range) {
          text = range.toString();
          textNode = document.createTextNode(text);

          a.textContent = cfiRange;
          a.href = "#" + cfiRange;
          a.onclick = function () {
            rendition.display(cfiRange);
          };

          remove.textContent = "remove";
          remove.href = "#" + cfiRange;
          remove.onclick = function () {
            rendition.annotations.remove(cfiRange);
            return false;
          };

          li.appendChild(a);
          li.appendChild(textNode);
          li.appendChild(remove);
          highlights.appendChild(li);
        }

      })

    });

  </script>

</body>
</html>
Wolley
  • 79
  • 1
  • 1
  • 5
  • Welcome to stackoverflow, is there any code you have tried by yourself? If yes even if it is not working add it to your question so it will be more easy to help you with your issue. https://stackoverflow.com/help/how-to-ask – fgamess Sep 14 '18 at 08:29

1 Answers1

0

I assume you only know the functionality of epubjs you listed above. From rendition.on(selected,...), we can get output: cfiRange. From book.getRange(cfiRange).then(function (range)..., we can get output: range.

That means whenever we select a word or sentence, we get cfiRange and range. cfiRange is epubcfi(/6/10[id139]!/4/2[filepos12266]/6,/3:1,/3:4, which based on position of the selected word. I don't know how it calculates/works but if you do then you can check if the cfiRange contains a existing highlight word's cfiRange.

  1. range.toString() can give you the text. if your application is only storing a word. then you can check if the new selected word == or contain your existing highlight word.
Wetech Com
  • 1