logo
Tags down

shadow

js TreeWalker and/or document.createRange() not picking up single element


By : Mikalai Krautsou
Date : October 17 2020, 03:08 PM
I wish did fix the issue. Your endoffset is off. In findEndNodes When you find the node your current code assumes the number of the offset is one less than is necessary, this is because you're using setEndBefore when you should use setEndAfter.
code :
const source = document.getElementById('Source');
const target = document.getElementById('Target');
const wrapper = document.getElementById('Wrapper');

wordWrap(source);
splitContent(source, target, wrapper);
//splitContent(source, target, wrapper);

function splitContent(source, target, wrapper) {
  const {
    height
  } = target.getBoundingClientRect();
  const maxHeight = height;

  const range = document.createRange();
  const endNode = findEndNode(source, maxHeight);
  
  range.setStart(source, 0);
  range.setEnd(endNode.endContainer, endNode.endOffset);

  const content = range.extractContents();
  const clone = target.cloneNode(false);
  clone.id = 'Clone';
  clone.appendChild(content);
  wrapper.appendChild(clone);

  const hasChildren = source.hasChildNodes();
};


function findEndNode(source, maxHeight) {
  const range = document.createRange();
  range.selectNodeContents(source);

  var nodes = document.createTreeWalker(
    source,
    NodeFilter.SHOW_ELEMENT,
    null,
    null
  );

  while (node = nodes.nextNode()) {
    range.setEndAfter(nodes.currentNode);
    const {
      height
    } = range.getBoundingClientRect();
    const rangeHeight = height;

    if (maxHeight <= rangeHeight) {
      console.log('out of  bounds');
      const newNode = nodes.previousNode();
      range.setEndAfter(nodes.currentNode);
      break;
    } else {
      console.log('within bounds');
      continue;
    }
  }

  return range;
};



function wordWrap(element) {
  var nodes = document.createTreeWalker(
    element,
    NodeFilter.SHOW_TEXT,
    null,
    null
  );
  var node;
  while (node = nodes.nextNode()) {
    var p = node.parentNode;
    var text = node.nodeValue;
    var m;
    while (m = text.match(/^(\s*)(\S+)/)) {
      text = text.slice(m[0].length);
      p.insertBefore(document.createTextNode(m[1]), node);
      var word = p.insertBefore(document.createElement('span'), node);
      word.appendChild(document.createTextNode(m[2]));
      word.className = 'word';
    }
    node.nodeValue = text;
  }
}
section {
  font-family: arial;
  font-size: 11pt;
}

.target {
  height: 400px;
  width: 400px;
  border: 2px dashed green;
  margin: 20px;
}

.source {
  border: 2px dashed blue;
  width: 400px;
  margin: 20px;
}
#Clone {
  border-color: red;
}
<section id="Source" class="source">
  <div>
    test
  </div>
</section>

<div id="Target" class="target">
</div>

<section id="Wrapper">
</section>


Share : facebook icon twitter icon

eclipse checkstyle error cannot initialize module TreeWalker - TreeWalker is not allowed as a parent of FileLength


By : Cameron
Date : March 29 2020, 07:55 AM
will be helpful for those in need This is an error in the template, independent of the Checkstyle version. FileLength goes directly under Checker, not under TreeWalker.
Example:
code :
<module name="Checker">
    <property name="severity" value="warning"/>
    <module name="TreeWalker">
        <property name="tabWidth" value="4"/>
        <module name="JavadocType"/>
        <!-- many others -->
    </module>
    <module name="NewlineAtEndOfFile"/>
    <module name="FileLength"/>
    <module name="JavadocPackage"/>
    <!-- others -->
</module>

Can I avoid some subtrees with a TreeWalker created with document.createTreeWalker?


By : Tominiola
Date : March 29 2020, 07:55 AM
will be helpful for those in need I am using a TreeWalker like this to traverse a HTML DOM:
code :
getelementbyclass=function(node){
if (node.className=="blue") //filter out elements with this class attribute
return NodeFilter.FILTER_ACCEPT
else
return NodeFilter.FILTER_SKIP
}

Mocking document.createRange for jest


By : Jayesh Patil
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Create a script that sets up the polyfill you want -- let's call it "mockument.js" for this example. Within the jest configuration of your package.json set setupFiles to point to this script:
code :
"jest": {
  "setupFiles": ["raf/polyfill", "./scripts/mockument"]
}
"jest": {
  "setupFiles": ["@nteract/mockument"]
},

document.selection.createRange() not working in chrome and safari


By : LBene
Date : March 29 2020, 07:55 AM
With these it helps In non IE (excluding IE9) browsers (see comments), use window.getSelection to get the selection object. In IE < 9, original code should work.

Jest/Enzyme document.createRange is not a function on mount


By : Pradeep Thakur
Date : March 29 2020, 07:55 AM
hop of those help? When trying to use ezymes mount on a component that is rendering MaterialUI's Tooltip, there is an error stopping my tests: , To fix this I defined document.createRange in my ./src/setupTest.js
code :
  document.createRange = () => ({
    setStart: () => {},
    setEnd: () => {},
    commonAncestorContainer: {
      nodeName: "BODY",
      ownerDocument: document,
    },
  })
Related Posts Related Posts :
  • Combine two observables with one being optional
  • iterating through an array containing two elements results in three objects
  • How can I define a Webpack "global module" to hold my Knockout viewmodel?
  • How can I use download a .zip file from a URL to the user in Angular 4?
  • Pass variable to GTM Data Layer after specific action
  • How to get an array for the database from the textarea ejs file?
  • MediaRecorder not saving properly in Electron
  • ES6 javascript inheritance
  • Html input field set maximum value
  • Is there a way to use a global babel config in all my personal projects?
  • I have a for with a gulp.watch, but it doesnt work correctly
  • Container's height doesn't be exact as on my screen
  • How to do pagination in Google Firestore?
  • Momentjs strict format always returns 'Invalid date'
  • Is there a api or way to hook into SSRS with a MVC application
  • Can't achieve to beat a ball in my JS Pong Game
  • How do I use composition with es6 classes in the same way as this example does using factory functions?
  • Fetch local JSON file from public folder ReactJS
  • Validate form fields with javascript
  • Jquery detect click OR keystroke?
  • How to change inner div's when cloning a template?
  • Compare two objects and extract the ones that have same Key in javascript
  • Nodejs, Request and Dot notation
  • Array key does not get interpolated when making object
  • Three.js ply not showing
  • Php Ajax Form is not submitting
  • Global Variable and how pass the value in IONIC3
  • Office.js displayDialogAsync throws internal error
  • Is there a shorter way to write Ember computed/get method?
  • How can I display/hide a component depending on a property on the Redux store?
  • Range Selector - Changing bar color only when active
  • Creating a new array of objects by finding values in JSON data
  • How to avoid providing a dummy Vue data structure during initialization?
  • Digital time to readable duration using javascript
  • JavaScript update outside function variable from inner function
  • Update a document with mongoose (update property of document property)
  • Highcharts' bullet graph's serie's doesn't extend all the way
  • 2 way-binding with a nested property inside object. (VueJS + VueX)
  • Angular uiCalendar not redenring events
  • Use blade inside a JavaScript variable
  • Group objects by multiple properties in array then sum up their values
  • Electron: Maximized browserWindow overlaps Window' taskbar
  • Mongoose deep populate results in [Object] at 2nd level
  • Redux: cloning state does not work
  • angularjs detect changes in input when value is modified by JQuery
  • How to release a file after accessing it with JavaScript (adobe)
  • Handle/catch errors without repeating code?
  • Filter search Results
  • How to efficiently add items to collection with firebase firestore
  • Change Bootstrap Popover trigger on Click
  • Pushing new objects replaces previous object
  • Function with dynamic return in typescript
  • How Do I bind javascript type of File to a Nancy Model containing HttpFile?
  • Simplifying jquery / javascript for checkbox links
  • Javascript ES6 Classes composition
  • Chart.js max legend height
  • Change color of a styled checked checkbox with button
  • How to set weight and height in Css with responsive when reduce screen size
  • Price formatting and user input value to change slider
  • Pass params to q.defer (d3.csv)
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com