New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
blinguidance
Advanced tools
blinguidance - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
| { | ||
| "name": "blinguidance", | ||
| "version": "1.0.2", | ||
| "version": "1.0.3", | ||
| "description": "guidance", | ||
@@ -5,0 +5,0 @@ "main": "src/lib/guidance.umd.min.js", |
124
README.md
@@ -101,1 +101,125 @@ # guidance | ||
| ``` | ||
| ### example | ||
| ``` | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Document</title> | ||
| <style> | ||
| .step1 { | ||
| height: 40px; | ||
| width: 80px; | ||
| background-color: pink; | ||
| margin: 200px auto; | ||
| } | ||
| .step2 { | ||
| height: 90px; | ||
| width: 80px; | ||
| background-color: pink; | ||
| margin: 400px 400px; | ||
| } | ||
| .step3 { | ||
| height: 20px; | ||
| width: 80px; | ||
| background-color: pink; | ||
| margin: 600px auto; | ||
| } | ||
| .step4 { | ||
| height: 70px; | ||
| width: 200px; | ||
| background-color: pink; | ||
| margin: 100px 400px; | ||
| } | ||
| .step5 { | ||
| height: 60px; | ||
| width: 500px; | ||
| background-color: pink; | ||
| position: fixed; | ||
| top: 50%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="step1"></div> | ||
| <div class="step2"></div> | ||
| <div class="step3"></div> | ||
| <div class="step4"></div> | ||
| <div class="step5"></div> | ||
| <script src="./src/lib/guidance.umd.js"></script> | ||
| <script> | ||
| const guidance = Guidance.create({ | ||
| flow: [ | ||
| { | ||
| target: '.step1', | ||
| height: '166px', | ||
| width: '324px', | ||
| backgroundImage: 'url("./img/step1.png")', | ||
| placement: 'bottom', | ||
| next: { | ||
| left: '50px', | ||
| }, | ||
| }, | ||
| { | ||
| target: '.step2', | ||
| height: '166px', | ||
| width: '324px', | ||
| backgroundImage: 'url("./img/step2.png")', | ||
| placement: 'left', | ||
| }, | ||
| { | ||
| target: '.step3', | ||
| height: '166px', | ||
| width: '324px', | ||
| backgroundImage: 'url("./img/step3.png")', | ||
| placement: 'topLeft', | ||
| }, | ||
| { | ||
| target: '.step4', | ||
| height: '166px', | ||
| width: '324px', | ||
| backgroundImage: 'url("./img/step4.png")', | ||
| placement: 'topRight', | ||
| }, | ||
| { | ||
| target: '.step5', | ||
| height: '166px', | ||
| width: '324px', | ||
| backgroundImage: 'url("./img/step5.png")', | ||
| placement: 'bottomRight', | ||
| }, | ||
| ], | ||
| btns: { | ||
| next: { | ||
| height: '36px', | ||
| width: '100px', | ||
| border: '1px solid #eee', | ||
| bottom: '36px', | ||
| left: '50%', | ||
| }, | ||
| end: { | ||
| height: '36px', | ||
| width: '100px', | ||
| border: '1px solid #eee', | ||
| bottom: '0', | ||
| left: '50%', | ||
| }, | ||
| }, | ||
| }) | ||
| const gen = guidance( | ||
| e => gen.next(), | ||
| e => gen.end() | ||
| ) | ||
| gen.next() | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` |
@@ -602,3 +602,3 @@ | ||
| // 给元素添加dom | ||
| // 给元素添加样式 | ||
| function elementWithStyle(tag, styles) { | ||
@@ -616,2 +616,45 @@ var el = tag; | ||
| return el; | ||
| } // 保存之前的样式 | ||
| var domStylesMap = new Map(); // 样式重置 | ||
| function resetStyle() { | ||
| var _iterator = _createForOfIteratorHelper(domStylesMap), | ||
| _step; | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var _step$value = _slicedToArray(_step.value, 2), | ||
| dom = _step$value[0], | ||
| styles = _step$value[1]; | ||
| dom.style = _objectSpread2(_objectSpread2({}, dom.style), styles); | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| } | ||
| } // 给元素添加相对定位 | ||
| /** | ||
| * | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function addRelactive(target) { | ||
| var position = getComputedStyle(target).position; | ||
| var zIndex = getComputedStyle(target).zIndex; | ||
| domStylesMap.set(target, { | ||
| position: position, | ||
| zIndex: zIndex | ||
| }); | ||
| if (position === 'static') { | ||
| target.style.position = 'relative'; | ||
| } | ||
| target.style.zIndex = '9999'; | ||
| } // 获取dom的top和left | ||
@@ -622,2 +665,3 @@ | ||
| var target = document.querySelector(selector); | ||
| addRelactive(target); | ||
| var offsetLeft = target.offsetLeft, | ||
@@ -655,3 +699,3 @@ offsetTop = target.offsetTop, | ||
| }; | ||
| } // 兼容写法，获取滚动条的高度 | ||
| } // 滚动函数 | ||
@@ -724,3 +768,3 @@ | ||
| zIndex: '999', | ||
| backgroundSize: 'cover', | ||
| backgroundSize: '100% 100%', | ||
| transition: 'all 0.3s ease-in-out' | ||
@@ -747,3 +791,3 @@ }); | ||
| var guidanceGenerator = /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_this) { | ||
| var _iterator, _step, styles; | ||
| var _iterator2, _step2, styles; | ||
@@ -765,14 +809,14 @@ return _regeneratorRuntime().wrap(function _callee$(_context) { | ||
| _this.endBtn.onclick = end; | ||
| _iterator = _createForOfIteratorHelper(_this.flow); | ||
| _iterator2 = _createForOfIteratorHelper(_this.flow); | ||
| _context.prev = 8; | ||
| _iterator.s(); | ||
| _iterator2.s(); | ||
| case 10: | ||
| if ((_step = _iterator.n()).done) { | ||
| _context.next = 22; | ||
| if ((_step2 = _iterator2.n()).done) { | ||
| _context.next = 23; | ||
| break; | ||
| } | ||
| styles = _step.value; | ||
| styles = _step2.value; | ||
@@ -788,2 +832,3 @@ if (styles.target) { | ||
| _this.currentStyle = styles; | ||
| resetStyle(); | ||
@@ -794,27 +839,27 @@ _classPrivateMethodGet(_this, _setShowBoxStyle, _setShowBoxStyle2).call(_this, styles); | ||
| elementWithStyle(_this.endBtn, styles.end); | ||
| _context.next = 20; | ||
| _context.next = 21; | ||
| return; | ||
| case 20: | ||
| case 21: | ||
| _context.next = 10; | ||
| break; | ||
| case 22: | ||
| _context.next = 27; | ||
| case 23: | ||
| _context.next = 28; | ||
| break; | ||
| case 24: | ||
| _context.prev = 24; | ||
| case 25: | ||
| _context.prev = 25; | ||
| _context.t0 = _context["catch"](8); | ||
| _iterator.e(_context.t0); | ||
| _iterator2.e(_context.t0); | ||
| case 27: | ||
| _context.prev = 27; | ||
| case 28: | ||
| _context.prev = 28; | ||
| _iterator.f(); | ||
| _iterator2.f(); | ||
| return _context.finish(27); | ||
| return _context.finish(28); | ||
| case 30: | ||
| case 31: | ||
| case "end": | ||
@@ -824,3 +869,3 @@ return _context.stop(); | ||
| } | ||
| }, _callee, null, [[8, 24, 27, 30]]); | ||
| }, _callee, null, [[8, 25, 28, 31]]); | ||
| })(this); | ||
@@ -894,3 +939,3 @@ | ||
| top: positionObj.yBottom, | ||
| left: positionObj.yCenter | ||
| left: positionObj.xCenter | ||
| }); | ||
@@ -924,3 +969,3 @@ | ||
| return _objectSpread2(_objectSpread2({}, styles), {}, { | ||
| left: positionObj.xLeft, | ||
| left: positionObj.xRight, | ||
| top: positionObj.yBottom | ||
@@ -972,2 +1017,4 @@ }); | ||
| this.showBox = null; | ||
| resetStyle(); | ||
| domStylesMap = null; | ||
| window.removeEventListener('resize', this.resize); | ||
@@ -974,0 +1021,0 @@ } |
@@ -600,3 +600,3 @@ | ||
| // 给元素添加dom | ||
| // 给元素添加样式 | ||
| function elementWithStyle(tag, styles) { | ||
@@ -614,2 +614,45 @@ var el = tag; | ||
| return el; | ||
| } // 保存之前的样式 | ||
| var domStylesMap = new Map(); // 样式重置 | ||
| function resetStyle() { | ||
| var _iterator = _createForOfIteratorHelper(domStylesMap), | ||
| _step; | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var _step$value = _slicedToArray(_step.value, 2), | ||
| dom = _step$value[0], | ||
| styles = _step$value[1]; | ||
| dom.style = _objectSpread2(_objectSpread2({}, dom.style), styles); | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| } | ||
| } // 给元素添加相对定位 | ||
| /** | ||
| * | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function addRelactive(target) { | ||
| var position = getComputedStyle(target).position; | ||
| var zIndex = getComputedStyle(target).zIndex; | ||
| domStylesMap.set(target, { | ||
| position: position, | ||
| zIndex: zIndex | ||
| }); | ||
| if (position === 'static') { | ||
| target.style.position = 'relative'; | ||
| } | ||
| target.style.zIndex = '9999'; | ||
| } // 获取dom的top和left | ||
@@ -620,2 +663,3 @@ | ||
| var target = document.querySelector(selector); | ||
| addRelactive(target); | ||
| var offsetLeft = target.offsetLeft, | ||
@@ -653,3 +697,3 @@ offsetTop = target.offsetTop, | ||
| }; | ||
| } // 兼容写法，获取滚动条的高度 | ||
| } // 滚动函数 | ||
@@ -722,3 +766,3 @@ | ||
| zIndex: '999', | ||
| backgroundSize: 'cover', | ||
| backgroundSize: '100% 100%', | ||
| transition: 'all 0.3s ease-in-out' | ||
@@ -745,3 +789,3 @@ }); | ||
| var guidanceGenerator = /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_this) { | ||
| var _iterator, _step, styles; | ||
| var _iterator2, _step2, styles; | ||
@@ -763,14 +807,14 @@ return _regeneratorRuntime().wrap(function _callee$(_context) { | ||
| _this.endBtn.onclick = end; | ||
| _iterator = _createForOfIteratorHelper(_this.flow); | ||
| _iterator2 = _createForOfIteratorHelper(_this.flow); | ||
| _context.prev = 8; | ||
| _iterator.s(); | ||
| _iterator2.s(); | ||
| case 10: | ||
| if ((_step = _iterator.n()).done) { | ||
| _context.next = 22; | ||
| if ((_step2 = _iterator2.n()).done) { | ||
| _context.next = 23; | ||
| break; | ||
| } | ||
| styles = _step.value; | ||
| styles = _step2.value; | ||
@@ -786,2 +830,3 @@ if (styles.target) { | ||
| _this.currentStyle = styles; | ||
| resetStyle(); | ||
@@ -792,27 +837,27 @@ _classPrivateMethodGet(_this, _setShowBoxStyle, _setShowBoxStyle2).call(_this, styles); | ||
| elementWithStyle(_this.endBtn, styles.end); | ||
| _context.next = 20; | ||
| _context.next = 21; | ||
| return; | ||
| case 20: | ||
| case 21: | ||
| _context.next = 10; | ||
| break; | ||
| case 22: | ||
| _context.next = 27; | ||
| case 23: | ||
| _context.next = 28; | ||
| break; | ||
| case 24: | ||
| _context.prev = 24; | ||
| case 25: | ||
| _context.prev = 25; | ||
| _context.t0 = _context["catch"](8); | ||
| _iterator.e(_context.t0); | ||
| _iterator2.e(_context.t0); | ||
| case 27: | ||
| _context.prev = 27; | ||
| case 28: | ||
| _context.prev = 28; | ||
| _iterator.f(); | ||
| _iterator2.f(); | ||
| return _context.finish(27); | ||
| return _context.finish(28); | ||
| case 30: | ||
| case 31: | ||
| case "end": | ||
@@ -822,3 +867,3 @@ return _context.stop(); | ||
| } | ||
| }, _callee, null, [[8, 24, 27, 30]]); | ||
| }, _callee, null, [[8, 25, 28, 31]]); | ||
| })(this); | ||
@@ -892,3 +937,3 @@ | ||
| top: positionObj.yBottom, | ||
| left: positionObj.yCenter | ||
| left: positionObj.xCenter | ||
| }); | ||
@@ -922,3 +967,3 @@ | ||
| return _objectSpread2(_objectSpread2({}, styles), {}, { | ||
| left: positionObj.xLeft, | ||
| left: positionObj.xRight, | ||
| top: positionObj.yBottom | ||
@@ -970,2 +1015,4 @@ }); | ||
| this.showBox = null; | ||
| resetStyle(); | ||
| domStylesMap = null; | ||
| window.removeEventListener('resize', this.resize); | ||
@@ -972,0 +1019,0 @@ } |
@@ -606,3 +606,3 @@ | ||
| // 给元素添加dom | ||
| // 给元素添加样式 | ||
| function elementWithStyle(tag, styles) { | ||
@@ -620,2 +620,45 @@ var el = tag; | ||
| return el; | ||
| } // 保存之前的样式 | ||
| var domStylesMap = new Map(); // 样式重置 | ||
| function resetStyle() { | ||
| var _iterator = _createForOfIteratorHelper(domStylesMap), | ||
| _step; | ||
| try { | ||
| for (_iterator.s(); !(_step = _iterator.n()).done;) { | ||
| var _step$value = _slicedToArray(_step.value, 2), | ||
| dom = _step$value[0], | ||
| styles = _step$value[1]; | ||
| dom.style = _objectSpread2(_objectSpread2({}, dom.style), styles); | ||
| } | ||
| } catch (err) { | ||
| _iterator.e(err); | ||
| } finally { | ||
| _iterator.f(); | ||
| } | ||
| } // 给元素添加相对定位 | ||
| /** | ||
| * | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function addRelactive(target) { | ||
| var position = getComputedStyle(target).position; | ||
| var zIndex = getComputedStyle(target).zIndex; | ||
| domStylesMap.set(target, { | ||
| position: position, | ||
| zIndex: zIndex | ||
| }); | ||
| if (position === 'static') { | ||
| target.style.position = 'relative'; | ||
| } | ||
| target.style.zIndex = '9999'; | ||
| } // 获取dom的top和left | ||
@@ -626,2 +669,3 @@ | ||
| var target = document.querySelector(selector); | ||
| addRelactive(target); | ||
| var offsetLeft = target.offsetLeft, | ||
@@ -659,3 +703,3 @@ offsetTop = target.offsetTop, | ||
| }; | ||
| } // 兼容写法，获取滚动条的高度 | ||
| } // 滚动函数 | ||
@@ -728,3 +772,3 @@ | ||
| zIndex: '999', | ||
| backgroundSize: 'cover', | ||
| backgroundSize: '100% 100%', | ||
| transition: 'all 0.3s ease-in-out' | ||
@@ -751,3 +795,3 @@ }); | ||
| var guidanceGenerator = /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_this) { | ||
| var _iterator, _step, styles; | ||
| var _iterator2, _step2, styles; | ||
@@ -769,14 +813,14 @@ return _regeneratorRuntime().wrap(function _callee$(_context) { | ||
| _this.endBtn.onclick = end; | ||
| _iterator = _createForOfIteratorHelper(_this.flow); | ||
| _iterator2 = _createForOfIteratorHelper(_this.flow); | ||
| _context.prev = 8; | ||
| _iterator.s(); | ||
| _iterator2.s(); | ||
| case 10: | ||
| if ((_step = _iterator.n()).done) { | ||
| _context.next = 22; | ||
| if ((_step2 = _iterator2.n()).done) { | ||
| _context.next = 23; | ||
| break; | ||
| } | ||
| styles = _step.value; | ||
| styles = _step2.value; | ||
@@ -792,2 +836,3 @@ if (styles.target) { | ||
| _this.currentStyle = styles; | ||
| resetStyle(); | ||
@@ -798,27 +843,27 @@ _classPrivateMethodGet(_this, _setShowBoxStyle, _setShowBoxStyle2).call(_this, styles); | ||
| elementWithStyle(_this.endBtn, styles.end); | ||
| _context.next = 20; | ||
| _context.next = 21; | ||
| return; | ||
| case 20: | ||
| case 21: | ||
| _context.next = 10; | ||
| break; | ||
| case 22: | ||
| _context.next = 27; | ||
| case 23: | ||
| _context.next = 28; | ||
| break; | ||
| case 24: | ||
| _context.prev = 24; | ||
| case 25: | ||
| _context.prev = 25; | ||
| _context.t0 = _context["catch"](8); | ||
| _iterator.e(_context.t0); | ||
| _iterator2.e(_context.t0); | ||
| case 27: | ||
| _context.prev = 27; | ||
| case 28: | ||
| _context.prev = 28; | ||
| _iterator.f(); | ||
| _iterator2.f(); | ||
| return _context.finish(27); | ||
| return _context.finish(28); | ||
| case 30: | ||
| case 31: | ||
| case "end": | ||
@@ -828,3 +873,3 @@ return _context.stop(); | ||
| } | ||
| }, _callee, null, [[8, 24, 27, 30]]); | ||
| }, _callee, null, [[8, 25, 28, 31]]); | ||
| })(this); | ||
@@ -898,3 +943,3 @@ | ||
| top: positionObj.yBottom, | ||
| left: positionObj.yCenter | ||
| left: positionObj.xCenter | ||
| }); | ||
@@ -928,3 +973,3 @@ | ||
| return _objectSpread2(_objectSpread2({}, styles), {}, { | ||
| left: positionObj.xLeft, | ||
| left: positionObj.xRight, | ||
| top: positionObj.yBottom | ||
@@ -976,2 +1021,4 @@ }); | ||
| this.showBox = null; | ||
| resetStyle(); | ||
| domStylesMap = null; | ||
| window.removeEventListener('resize', this.resize); | ||
@@ -978,0 +1025,0 @@ } |
@@ -1,2 +0,2 @@ | ||
| // 给元素添加dom | ||
| // 给元素添加样式 | ||
| function elementWithStyle(tag, styles) { | ||
@@ -14,5 +14,34 @@ let el = tag | ||
| // 保存之前的样式 | ||
| let domStylesMap = new Map() | ||
| // 样式重置 | ||
| function resetStyle() { | ||
| for (const [dom, styles] of domStylesMap) { | ||
| dom.style = { ...dom.style, ...styles } | ||
| } | ||
| } | ||
| // 给元素添加相对定位 | ||
| /** | ||
| * | ||
| * @param {HTMLElement} target | ||
| */ | ||
| function addRelactive(target) { | ||
| const position = getComputedStyle(target).position | ||
| const zIndex = getComputedStyle(target).zIndex | ||
| domStylesMap.set(target, { position, zIndex }) | ||
| if (position === 'static') { | ||
| target.style.position = 'relative' | ||
| } | ||
| target.style.zIndex = '9999' | ||
| } | ||
| // 获取dom的top和left | ||
| function getElementTopAndLeft(selector) { | ||
| const target = document.querySelector(selector) | ||
| addRelactive(target) | ||
| const { offsetLeft, offsetTop, clientHeight, clientWidth } = target | ||
@@ -79,3 +108,3 @@ return [ | ||
| zIndex: '999', | ||
| backgroundSize: 'cover', | ||
| backgroundSize: '100% 100%', | ||
| transition: 'all 0.3s ease-in-out', | ||
@@ -117,3 +146,5 @@ }) | ||
| _this.currentStyle = styles | ||
| resetStyle() | ||
| _this.#setShowBoxStyle(styles) | ||
| elementWithStyle(_this.nextBtn, styles.next) | ||
@@ -180,3 +211,3 @@ elementWithStyle(_this.endBtn, styles.end) | ||
| top: positionObj.yBottom, | ||
| left: positionObj.yCenter, | ||
| left: positionObj.xCenter, | ||
| } | ||
@@ -210,3 +241,3 @@ case 'left': | ||
| ...styles, | ||
| left: positionObj.xLeft, | ||
| left: positionObj.xRight, | ||
| top: positionObj.yBottom, | ||
@@ -252,2 +283,4 @@ } | ||
| this.showBox = null | ||
| resetStyle() | ||
| domStylesMap = null | ||
| window.removeEventListener('resize', this.resize) | ||
@@ -254,0 +287,0 @@ } |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.63%
151908
- Lines of code
- increased by4.95%
2907
- Number of lines in readme file
- increased by122.77%
225
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes