caret-pos - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # Caret Pos
 
+# Version 1.2.0 - 2018-08-28
+- Added `customPos` option to `offset`
+
 # Version 1.1.0 - 2018-07-26
@@ -4,0 +7,0 @@ - Added `noShadowCart` option to `offset`

lib/bundle/main.js

@@ -114,3 +114,4 @@ (function (global, factory) {
   var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var iframe = settings.iframe,
+  var customPos = settings.customPos,
+      iframe = settings.iframe,
       noShadowCaret = settings.noShadowCaret;
@@ -123,3 +124,4 @@
       document: iframe.contentDocument || iframe.contentWindow.document,
-      noShadowCaret: noShadowCaret
+      noShadowCaret: noShadowCaret,
+      customPos: customPos
     };
@@ -131,3 +133,4 @@ }
     document: document,
-    noShadowCaret: noShadowCaret
+    noShadowCaret: noShadowCaret,
+    customPos: customPos
   };
@@ -233,2 +236,6 @@ };
 
+    if (ctx.customPos || ctx.customPos === 0) {
+      pos = ctx.customPos;
+    }
+
     var position = pos === undefined ? getPos() : pos;
@@ -322,8 +329,11 @@ var startRange = element.value.slice(0, position);
 
+    var hasCustomPos = ctx.customPos || ctx.customPos === 0;
+
     // endContainer in Firefox would be the element at the start of
     // the line
-    if (range.endOffset - 1 > 0 && range.endContainer !== element) {
+    if (range.endOffset - 1 > 0 && range.endContainer !== element || hasCustomPos) {
       var clonedRange = range.cloneRange();
-      clonedRange.setStart(range.endContainer, range.endOffset - 1);
-      clonedRange.setEnd(range.endContainer, range.endOffset);
+      var fixedPosition = hasCustomPos ? ctx.customPos : range.endOffset;
+      clonedRange.setStart(range.endContainer, fixedPosition - 1 < 0 ? 0 : fixedPosition - 1);
+      clonedRange.setEnd(range.endContainer, fixedPosition);
       var rect = clonedRange.getBoundingClientRect();
@@ -330,0 +340,0 @@ offset = {

lib/bundle/main.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e["caret-pos"]={})}(this,function(e){"use strict";var t=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopStyle","borderRightStyle","borderBottomStyle","borderLeftStyle","borderTopWidth","boxSizing","fontFamily","fontSize","fontWeight","height","letterSpacing","lineHeight","marginBottom","marginLeft","marginRight","marginTop","outlineWidth","overflow","overflowX","overflowY","paddingBottom","paddingLeft","paddingRight","paddingTop","textAlign","textOverflow","textTransform","whiteSpace","wordBreak","wordWrap"],n=function(e,n){var o,i,r,f=document.createElement("div");return o=n,i={position:"absolute",left:-9999,top:0,zIndex:-2e3},"TEXTAREA"===e.tagName&&t.push("width"),t.forEach(function(t){i[t]=getComputedStyle(e)[t]}),r=i,Object.keys(r).forEach(function(e){f.style[e]=r[e]}),f.innerHTML=o,e.parentNode.insertBefore(f,e.nextSibling),{rect:function(){var e=f.ownerDocument.getElementById("caret-position-marker"),t={left:e.offsetLeft,top:e.offsetTop,height:e.offsetHeight};return f.parentNode.removeChild(f),t}}},o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.iframe,n=e.noShadowCaret;return t?{iframe:t,window:t.contentWindow,document:t.contentDocument||t.contentWindow.document,noShadowCaret:n}:{window:window,document:document,noShadowCaret:n}},r=function(e,t){var n=t&&t.window||window,o=t&&t.document||document,i=e.getBoundingClientRect(),r=o.documentElement,f=n.pageXOffset||r.scrollLeft,a=n.pageYOffset||r.scrollTop;return{top:i.top+a,left:i.left+f}},f=function(e){return"object"===(void 0===e?"undefined":o(e))&&null!==e},a=function(e,t){return(l=e).contentEditable&&"true"===l.contentEditable?(o=e,i=t,{getPos:d=function(){var e=a(),t=e.cloneRange();t.selectNodeContents(o),t.setEnd(e.endContainer,e.endOffset);var n=t.toString().length;return t.detach(),n},setPos:function(e){var t=i.window.getSelection();if(t){var n=0,r=!1;!function o(f,a){for(var d=0;d<a.childNodes.length;d++){var l=a.childNodes[d];if(r)break;if(3===l.nodeType){if(n+l.length>=f){r=!0;var c=i.document.createRange();c.setStart(l,f-n),t.removeAllRanges(),t.addRange(c);break}n+=l.length}else o(e,l)}}(e,o)}return o},getPosition:function(){var e=f(),t=d(),n=o.getBoundingClientRect(),r=n.top+i.document.body.scrollTop,a=n.left+i.document.body.scrollLeft;return e.left-=a,e.top-=r,e.pos=t,e},getOffset:f=function(){var e=a(),t={height:0,left:0,right:0};if(!e)return t;if(e.endOffset-1>0&&e.endContainer!==o){var n=e.cloneRange();n.setStart(e.endContainer,e.endOffset-1),n.setEnd(e.endContainer,e.endOffset);var r=n.getBoundingClientRect();t={height:r.height,left:r.left+r.width,top:r.top},n.detach()}if((!t||t&&0===t.height)&&!i.noShadowCaret){var f=e.cloneRange(),d=i.document.createTextNode("|");f.insertNode(d),f.selectNode(d);var l=f.getBoundingClientRect();t={height:l.height,left:l.left,top:l.top},d.parentNode.removeChild(d),f.detach()}if(t){var c=i.document.documentElement;t.top+=i.window.pageYOffset-(c.clientTop||0),t.left+=i.window.pageXOffset-(c.clientLeft||0)}return t},getRange:a=function(){if(i.window.getSelection){var e=i.window.getSelection();return e.rangeCount>0?e.getRangeAt(0):null}}}):(c=e,s=t,{getPos:u=function(){return c.selectionStart},setPos:function(e){return c.setSelectionRange(e,e),c},getOffset:function(e){var t=r(c),n=g(e);return{top:t.top+n.top+s.document.body.scrollTop,left:t.left+n.left+s.document.body.scrollLeft,height:n.height}},getPosition:g=function(e){var t=function(e){var t=e.replace(/<|>|`|"|&/g,"?").replace(/\r\n|\r|\n/g,"<br/>");return/firefox/i.test(navigator.userAgent)&&(t=t.replace(/\s/g,"&nbsp;")),t},o=void 0===e?u():e,i=c.value.slice(0,o),r=c.value.slice(o),f='<span style="position: relative; display: inline;">'+t(i)+"</span>";f+='<span id="caret-position-marker" style="position: relative; display: inline;">|</span>',f+='<span style="position: relative; display: inline;">'+t(r)+"</span>";var a=n(c,f).rect();return a.pos=u(),a}});var o,i,f,a,d,l,c,s,u,g};e.position=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};f(t)&&(n=t,t=null);var o=i(n),r=a(e,o);return t||0===t?r.setPos(t):r.getPosition()},e.offset=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};f(t)&&(n=t,t=null);var o=i(n);return a(e,o).getOffset(t)},e.getOffset=r,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e["caret-pos"]={})}(this,function(e){"use strict";var a=["borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopStyle","borderRightStyle","borderBottomStyle","borderLeftStyle","borderTopWidth","boxSizing","fontFamily","fontSize","fontWeight","height","letterSpacing","lineHeight","marginBottom","marginLeft","marginRight","marginTop","outlineWidth","overflow","overflowX","overflowY","paddingBottom","paddingLeft","paddingRight","paddingTop","textAlign","textOverflow","textTransform","whiteSpace","wordBreak","wordWrap"],g=function(t,e){var o,n,r,i=document.createElement("div");return o=e,n={position:"absolute",left:-9999,top:0,zIndex:-2e3},"TEXTAREA"===t.tagName&&a.push("width"),a.forEach(function(e){n[e]=getComputedStyle(t)[e]}),r=n,Object.keys(r).forEach(function(e){i.style[e]=r[e]}),i.innerHTML=o,t.parentNode.insertBefore(i,t.nextSibling),{rect:function(){var e=i.ownerDocument.getElementById("caret-position-marker"),t={left:e.offsetLeft,top:e.offsetTop,height:e.offsetHeight};return i.parentNode.removeChild(i),t}}},t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},t=e.customPos,o=e.iframe,n=e.noShadowCaret;return o?{iframe:o,window:o.contentWindow,document:o.contentDocument||o.contentWindow.document,noShadowCaret:n,customPos:t}:{window:window,document:document,noShadowCaret:n,customPos:t}},r=function(e,t){var o=t&&t.window||window,n=t&&t.document||document,r=e.getBoundingClientRect(),i=n.documentElement,a=o.pageXOffset||i.scrollLeft,f=o.pageYOffset||i.scrollTop;return{top:r.top+f,left:r.left+a}},f=function(e){return"object"===(void 0===e?"undefined":t(e))&&null!==e},d=function(e,t){return(o=e).contentEditable&&"true"===o.contentEditable?(c=e,s=t,{getPos:a=function(){var e=u(),t=e.cloneRange();t.selectNodeContents(c),t.setEnd(e.endContainer,e.endOffset);var o=t.toString().length;return t.detach(),o},setPos:function(a){var f=s.window.getSelection();if(f){var d=0,l=!1;!function e(t,o){for(var n=0;n<o.childNodes.length;n++){var r=o.childNodes[n];if(l)break;if(3===r.nodeType){if(d+r.length>=t){l=!0;var i=s.document.createRange();i.setStart(r,t-d),f.removeAllRanges(),f.addRange(i);break}d+=r.length}else e(a,r)}}(a,c)}return c},getPosition:function(){var e=i(),t=a(),o=c.getBoundingClientRect(),n=o.top+s.document.body.scrollTop,r=o.left+s.document.body.scrollLeft;return e.left-=r,e.top-=n,e.pos=t,e},getOffset:i=function(){var e=u(),t={height:0,left:0,right:0};if(!e)return t;var o=s.customPos||0===s.customPos;if(0<e.endOffset-1&&e.endContainer!==c||o){var n=e.cloneRange(),r=o?s.customPos:e.endOffset;n.setStart(e.endContainer,r-1<0?0:r-1),n.setEnd(e.endContainer,r);var i=n.getBoundingClientRect();t={height:i.height,left:i.left+i.width,top:i.top},n.detach()}if((!t||t&&0===t.height)&&!s.noShadowCaret){var a=e.cloneRange(),f=s.document.createTextNode("|");a.insertNode(f),a.selectNode(f);var d=a.getBoundingClientRect();t={height:d.height,left:d.left,top:d.top},f.parentNode.removeChild(f),a.detach()}if(t){var l=s.document.documentElement;t.top+=s.window.pageYOffset-(l.clientTop||0),t.left+=s.window.pageXOffset-(l.clientLeft||0)}return t},getRange:u=function(){if(s.window.getSelection){var e=s.window.getSelection();return 0<e.rangeCount?e.getRangeAt(0):null}}}):(f=e,d=t,n=function(e){var t=function(e){var t=e.replace(/<|>|`|"|&/g,"?").replace(/\r\n|\r|\n/g,"<br/>");return/firefox/i.test(navigator.userAgent)&&(t=t.replace(/\s/g,"&nbsp;")),t};(d.customPos||0===d.customPos)&&(e=d.customPos);var o=void 0===e?l():e,n=f.value.slice(0,o),r=f.value.slice(o),i='<span style="position: relative; display: inline;">'+t(n)+"</span>";i+='<span id="caret-position-marker" style="position: relative; display: inline;">|</span>',i+='<span style="position: relative; display: inline;">'+t(r)+"</span>";var a=g(f,i).rect();return a.pos=l(),a},{getPos:l=function(){return f.selectionStart},setPos:function(e){return f.setSelectionRange(e,e),f},getOffset:function(e){var t=r(f),o=n(e);return{top:t.top+o.top+d.document.body.scrollTop,left:t.left+o.left+d.document.body.scrollLeft,height:o.height}},getPosition:n});var c,s,i,u,a,o,f,d,l,n};e.position=function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};f(t)&&(o=t,t=null);var n=i(o),r=d(e,n);return t||0===t?r.setPos(t):r.getPosition()},e.offset=function(e,t){var o=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};f(t)&&(o=t,t=null);var n=i(o);return d(e,n).getOffset(t)},e.getOffset=r,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=main.min.js.map

lib/esm2015/main.js

@@ -108,3 +108,4 @@ var attributes = ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderTopWidth', 'boxSizing', 'fontFamily', 'fontSize', 'fontWeight', 'height', 'letterSpacing', 'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'outlineWidth', 'overflow', 'overflowX', 'overflowY', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'textAlign', 'textOverflow', 'textTransform', 'whiteSpace', 'wordBreak', 'wordWrap'];
   var settings = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var iframe = settings.iframe,
+  var customPos = settings.customPos,
+      iframe = settings.iframe,
       noShadowCaret = settings.noShadowCaret;
@@ -117,3 +118,4 @@
       document: iframe.contentDocument || iframe.contentWindow.document,
-      noShadowCaret: noShadowCaret
+      noShadowCaret: noShadowCaret,
+      customPos: customPos
     };
@@ -125,3 +127,4 @@ }
     document: document,
-    noShadowCaret: noShadowCaret
+    noShadowCaret: noShadowCaret,
+    customPos: customPos
   };
@@ -227,2 +230,6 @@ };
 
+    if (ctx.customPos || ctx.customPos === 0) {
+      pos = ctx.customPos;
+    }
+
     var position = pos === undefined ? getPos() : pos;
@@ -316,8 +323,11 @@ var startRange = element.value.slice(0, position);
 
+    var hasCustomPos = ctx.customPos || ctx.customPos === 0;
+
     // endContainer in Firefox would be the element at the start of
     // the line
-    if (range.endOffset - 1 > 0 && range.endContainer !== element) {
+    if (range.endOffset - 1 > 0 && range.endContainer !== element || hasCustomPos) {
       var clonedRange = range.cloneRange();
-      clonedRange.setStart(range.endContainer, range.endOffset - 1);
-      clonedRange.setEnd(range.endContainer, range.endOffset);
+      var fixedPosition = hasCustomPos ? ctx.customPos : range.endOffset;
+      clonedRange.setStart(range.endContainer, fixedPosition - 1 < 0 ? 0 : fixedPosition - 1);
+      clonedRange.setEnd(range.endContainer, fixedPosition);
       var rect = clonedRange.getBoundingClientRect();
@@ -324,0 +334,0 @@ offset = {

package.json

 {
   "name": "caret-pos",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Locate the current position of the caret. A plain JavaScript version of Caret.js.",
@@ -13,3 +13,3 @@ "main": "lib/bundle/main.min.js",
     "start": "rollup -c rollup.dev.config.js --watch",
-    "test": "karma start --single-run --browsers PhantomJS",
+    "test": "karma start --single-run",
     "test:dev": "karma start"
@@ -57,4 +57,4 @@ },
     "karma-jasmine": "^1.1.1",
-    "karma-phantomjs-launcher": "^1.0.4",
     "karma-rollup-preprocessor": "^5.1.1",
+    "puppeteer": "^1.7.0",
     "rimraf": "^2.6.2",
@@ -61,0 +61,0 @@ "rollup": "^0.54.0",

README.md

@@ -72,1 +72,12 @@ [![Build Status](https://travis-ci.org/deshiknaves/caret-pos.svg?branch=master)](https://travis-ci.org/deshiknaves/caret-pos)
 Note that doing this might make the offset calculation less accurate in some edge cases.
+
+### custom position
+Passing the `customPos` option allows specifying a custom cursor position in the element when getting the offset.
+This will not change the position, but calculate the offset from the custom position rather than the current one.
+This works for both contentEditable and textarea.
+
+```javascript
+import { offset } from 'caret-pos';
+
+offset(el, { customPos: 2 });
+```

src/caret.spec.js

@@ -36,2 +36,10 @@ import { position, offset } from './main';
     });
+
+    it('should correctly get the caret offset with a custom position', () => {
+      position(editor, 3);
+      const off = offset(editor, { customPos: 2 });
+      expect(off.height).toBe(16);
+      expect(off.left).toBe(27);
+      expect(off.top).toBe(9);
+    });
   });
@@ -162,5 +170,5 @@
       const off = offset(editor);
-      expect(off.height).toBe(19);
-      expect(off.left).toBe(37);
-      expect(off.top).toBe(8);
+      expect(off.height).toBe(16);
+      expect(off.left).toBe(33);
+      expect(off.top).toBe(7);
     });
@@ -170,7 +178,14 @@
       position(editor, 0);
-      offset(editor, {noShadowCaret: true});
+      offset(editor, { noShadowCaret: true });
       expect(document.createTextNode).not.toHaveBeenCalled();
     });
-  })
-})
 
+    it('should correctly get the caret offset with a custom position', () => {
+      position(editor, 3);
+      const off = offset(editor, { customPos: 2 });
+      expect(off.height).toBe(16);
+      expect(off.left).toBe(25);
+      expect(off.top).toBe(7);
+    });
+  });
+});

src/editable.js

@@ -67,8 +67,11 @@ /**
 
+    const hasCustomPos = ctx.customPos || ctx.customPos === 0;
+
     // endContainer in Firefox would be the element at the start of
     // the line
-    if (range.endOffset - 1 > 0 && range.endContainer !== element) {
+    if ((range.endOffset - 1 > 0 && range.endContainer !== element) || hasCustomPos) {
       const clonedRange = range.cloneRange();
-      clonedRange.setStart(range.endContainer, range.endOffset - 1);
-      clonedRange.setEnd(range.endContainer, range.endOffset);
+      const fixedPosition = hasCustomPos ? ctx.customPos : range.endOffset;
+      clonedRange.setStart(range.endContainer, fixedPosition - 1 < 0 ? 0 : fixedPosition - 1);
+      clonedRange.setEnd(range.endContainer, fixedPosition);
       const rect = clonedRange.getBoundingClientRect();
@@ -75,0 +78,0 @@ offset = {

src/input.js

@@ -69,2 +69,6 @@ import createMirror from './mirror';
 
+    if (ctx.customPos || ctx.customPos === 0) {
+      pos = ctx.customPos;
+    }
+
     const position = pos === undefined ? getPos() : pos;
@@ -71,0 +75,0 @@ const startRange = element.value.slice(0, position);

src/utils.js

@@ -21,3 +21,3 @@ /**
 export const getContext = (settings = {}) => {
-  const { iframe, noShadowCaret } = settings;
+  const { customPos, iframe, noShadowCaret } = settings;
   if (iframe) {
@@ -29,2 +29,3 @@ return {
       noShadowCaret,
+      customPos,
     };
@@ -37,2 +38,3 @@ }
     noShadowCaret,
+    customPos,
   };
@@ -39,0 +41,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

112334

increased by3.76%

Number of package files

18

increased by5.88%

Lines of code

1530

increased by2.89%

Number of lines in readme file

83

increased by15.28%

No dependency changes