dom-align - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/getVisibleRectForElement.js

@@ -40,7 +40,7 @@ 'use strict';
     // clientWidth is zero for inline block elements in ie.
-    if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) && (
+    if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) &&
     // body may have overflow set on it, yet we still get the entire
     // viewport. In some browsers, el.offsetParent may be
     // document.documentElement, so check for that too.
-    el !== body && el !== documentElement && _utils2['default'].css(el, 'overflow') !== 'visible')) {
+    el !== body && el !== documentElement && _utils2['default'].css(el, 'overflow') !== 'visible') {
       var pos = _utils2['default'].offset(el);
@@ -47,0 +47,0 @@ // add border

lib/index.js

@@ -165,2 +165,11 @@ /**
 
+  // need judge to in case set fixed with in css on height auto element
+  if (newElRegion.width !== elRegion.width) {
+    _utils2['default'].css(el, 'width', el.width() + newElRegion.width - elRegion.width);
+  }
+
+  if (newElRegion.height !== elRegion.height) {
+    _utils2['default'].css(el, 'height', el.height() + newElRegion.height - elRegion.height);
+  }
+
   // https://github.com/kissyteam/kissy/issues/190
@@ -173,13 +182,7 @@ // http://localhost:8888/kissy/src/overlay/demo/other/relative_align/align.html
     top: newElRegion.top
+  }, {
+    useCssRight: align.useCssRight,
+    useCssBottom: align.useCssBottom
   });
 
-  // need judge to in case set fixed with in css on height auto element
-  if (newElRegion.width !== elRegion.width) {
-    _utils2['default'].css(el, 'width', el.width() + newElRegion.width - elRegion.width);
-  }
-
-  if (newElRegion.height !== elRegion.height) {
-    _utils2['default'].css(el, 'height', el.height() + newElRegion.height - elRegion.height);
-  }
-
   return {
@@ -186,0 +189,0 @@ points: points,

lib/utils.js

@@ -108,5 +108,6 @@ 'use strict';
   var d = elem.ownerDocument;
+  computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null);
 
   // https://github.com/kissyteam/kissy/issues/61
-  if (computedStyle = computedStyle || d.defaultView.getComputedStyle(elem, null)) {
+  if (computedStyle) {
     val = computedStyle.getPropertyValue(name) || computedStyle[name];
@@ -165,4 +166,23 @@ }
 
+function getOffsetDirection(dir, option) {
+  if (dir === 'left') {
+    return option.useCssRight ? 'right' : dir;
+  }
+  return option.useCssBottom ? 'bottom' : dir;
+}
+
+function oppositeOffsetDirection(dir) {
+  if (dir === 'left') {
+    return 'right';
+  } else if (dir === 'right') {
+    return 'left';
+  } else if (dir === 'top') {
+    return 'bottom';
+  } else if (dir === 'bottom') {
+    return 'top';
+  }
+}
+
 // 设置 elem 相对 elem.ownerDocument 的坐标
-function setOffset(elem, offset) {
+function setOffset(elem, offset, option) {
   // set position first, in-case top/left are set even on static elem
@@ -172,8 +192,24 @@ if (css(elem, 'position') === 'static') {
   }
-  var preset = -9999;
+  var presetH = -9999;
+  var presetV = -9999;
+  var horizontalProperty = getOffsetDirection('left', option);
+  var verticalProperty = getOffsetDirection('top', option);
+  var oppositeHorizontalProperty = oppositeOffsetDirection(horizontalProperty);
+  var oppositeVerticalProperty = oppositeOffsetDirection(verticalProperty);
+
+  if (horizontalProperty !== 'left') {
+    presetH = 9999;
+  }
+
+  if (verticalProperty !== 'top') {
+    presetV = 9999;
+  }
+
   if ('left' in offset) {
-    elem.style.left = preset + 'px';
+    elem.style[oppositeHorizontalProperty] = '';
+    elem.style[horizontalProperty] = presetH + 'px';
   }
   if ('top' in offset) {
-    elem.style.top = preset + 'px';
+    elem.style[oppositeVerticalProperty] = '';
+    elem.style[verticalProperty] = presetV + 'px';
   }
@@ -185,3 +221,9 @@ var old = getOffset(elem);
     if (offset.hasOwnProperty(key)) {
-      ret[key] = preset + offset[key] - old[key];
+      var dir = getOffsetDirection(key, option);
+      var preset = key === 'left' ? presetH : presetV;
+      if (dir === key) {
+        ret[dir] = preset + offset[key] - old[key];
+      } else {
+        ret[dir] = preset + old[key] - offset[key];
+      }
     }
@@ -401,5 +443,5 @@ }
   },
-  offset: function offset(el, value) {
+  offset: function offset(el, value, option) {
     if (typeof value !== 'undefined') {
-      setOffset(el, value);
+      setOffset(el, value, option || {});
     } else {
@@ -406,0 +448,0 @@ return getOffset(el);

package.json

 {
   "name": "dom-align",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Align DOM Node Flexibly ",
@@ -40,3 +40,3 @@ "keywords": [
     "jquery": "^1.11.2",
-    "precommit-hook": "^1.0.7",
+    "pre-commit": "1.x",
     "rc-server": "3.x",
@@ -46,5 +46,5 @@ "rc-tools": "4.x",
   },
-  "precommit": [
+  "pre-commit": [
     "lint"
   ]
 }

README.md

@@ -56,3 +56,3 @@ # dom-align
   offset: [10, 20], // the offset sourceNode by 10px in x and 20px in y,
-  targetOffset: [30%,40%], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,
+  targetOffset: ['30%','40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,
 });
@@ -103,2 +103,12 @@ ```
       </tr>
+      <tr>
+          <td>useCssRight</td>
+          <td>Boolean</td>
+          <td>whether use css right instead of left to position</td>
+      </tr>
+      <tr>
+          <td>useCssBottom</td>
+          <td>Boolean</td>
+          <td>whether use css bottom instead of top to position</td>
+      </tr>
     </tbody>
@@ -105,0 +115,0 @@ </table>

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

35694

increased by4.68%

Lines of code

840

increased by5%

Number of lines in readme file

136

increased by7.94%

No dependency changes