New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
frs-hide-scrollbar
Advanced tools
frs-hide-scrollbar - npm Package Compare versions
Comparing version 0.4.1 to 1.0.0
@@ -5,2 +5,20 @@ # Changelog | ||
| ## [0.5.0](https://github.com/FRSource/FRS-hide-scrollbar/compare/v0.4.1...v0.5.0) (2020-02-06) | ||
| ### ⚠ BREAKING CHANGES | ||
| * .updateStyles method got renamed into .update, also - first argument type now is supposed to be a partial of configuration object | ||
| * createNewChild is no longer exposed - it's part of an private, internal API | ||
| * there is no longer any css file to be included - whole styling is being generated by JS | ||
| ### Features | ||
| * global refactor: make api more consistent & reliable ([7522a9f](https://github.com/FRSource/FRS-hide-scrollbar/commit/7522a9f168c511f5bb3ea442267a305174c241f0)) | ||
| ### Bug Fixes | ||
| * custom className is not always respected in css ([52cdcf0](https://github.com/FRSource/FRS-hide-scrollbar/commit/52cdcf0ce65e066179872717c13ae09928c5523c)) | ||
| ### [0.4.1](https://github.com/FRSource/FRS-hide-scrollbar/compare/v0.4.0...v0.4.1) (2019-11-01) | ||
@@ -7,0 +25,0 @@ |
@@ -1,2 +0,2 @@ | ||
| var e,t=window.FRSHideScrollbar||{},l=t.config=t.config||{};function i(){var e=n("div",document.body);e.style.position="absolute",e.style["z-index"]="-1",e.style.width="100px",e.style.overflow="scroll";var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t!==l.scrollWidth&&(l.scrollWidth=t,s()),t}function n(e,t){return t.appendChild(document.createElement(e))}function s(t,i){if(void 0===t&&(t=l.styleElement),void 0===i&&(i=e),i){var n=i.styleElement,s=n.innerText.lastIndexOf("."+i.className+"{margin-right:-");n.innerText=n.innerText.substring(0,s)}0!==l.scrollWidth&&(e=Object.assign({},l),t.innerText+="."+l.className+"{margin-right:-"+(l.scrollWidth+.5)+"px;height:calc(100% + "+l.scrollWidth+"px)}")}t.refreshScrollWidth=i,t.createNewChild=n,t.updateStyles=s,l.className=l.className||"frs-hide-scroll",l.wrapperClassName=l.wrapperClassName||"frs-hide-scroll-wrapper",l.styleElement=l.styleElement||document.getElementsByTagName("style")[0]||n("style",document.head),l.autoInit=void 0===l.autoInit||l.autoInit,l.autoInit&&(document.readyState&&"loading"!==document.readyState?i():window.addEventListener("load",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0})),exports.FRSHideScrollbar=t; | ||
| var e=window.FRSHideScrollbar&&window.FRSHideScrollbar.FRSHideScrollbar,t=Object.assign({className:"frs-hide-scroll",wrapperClassName:"frs-hide-scroll-wrapper",autoInit:!0},e&&e.config||{}),l={refreshScrollWidth:function(){var e=o("div",document.body);e.style.position="absolute",e.style["z-index"]="-1",e.style.width="100px",e.style.overflow="scroll";var r=e.offsetWidth-e.clientWidth;document.body.removeChild(e),r!==t.scrollWidth&&(t.scrollWidth=r,l.update())},update:function(e,l){if(void 0===e&&(e=t),void 0===l&&(l=n),l){var r=l.styleElement,o=r.textContent.lastIndexOf("."+l.wrapperClassName+"{overflow:hidden;height:100%}");r.textContent=r.textContent.substring(0,o)}Object.assign(t,e);var i="height:",s=t.scrollWidth;i+=0===s?"100%":"calc(100% + "+s+"px);margin-right:-"+(s+.5)+"px",n=Object.assign({},t),t.styleElement.textContent+="."+t.wrapperClassName+"{overflow:hidden;height:100%}."+t.className+"{overflow:scroll;"+i+"}"},config:t};t.styleElement=t.styleElement||o("style",document.head);var r,n=Object.assign({},t);function o(e,t){return t.appendChild(document.createElement(e))}t.autoInit&&(r=function(){return l.refreshScrollWidth()},document.readyState&&"loading"!==document.readyState?r():window.addEventListener("load",r,{passive:!0}),window.addEventListener("resize",r,{passive:!0})),exports.FRSHideScrollbar=l; | ||
| //# sourceMappingURL=FRS-hide-scrollbar.js.map |
@@ -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.frsHideScrollbar={})}(this,function(e){var t,i=window.FRSHideScrollbar||{},n=i.config=i.config||{};function l(){var e=o("div",document.body);e.style.position="absolute",e.style["z-index"]="-1",e.style.width="100px",e.style.overflow="scroll";var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t!==n.scrollWidth&&(n.scrollWidth=t,r()),t}function o(e,t){return t.appendChild(document.createElement(e))}function r(e,i){if(void 0===e&&(e=n.styleElement),void 0===i&&(i=t),i){var l=i.styleElement,o=l.innerText.lastIndexOf("."+i.className+"{margin-right:-");l.innerText=l.innerText.substring(0,o)}0!==n.scrollWidth&&(t=Object.assign({},n),e.innerText+="."+n.className+"{margin-right:-"+(n.scrollWidth+.5)+"px;height:calc(100% + "+n.scrollWidth+"px)}")}i.refreshScrollWidth=l,i.createNewChild=o,i.updateStyles=r,n.className=n.className||"frs-hide-scroll",n.wrapperClassName=n.wrapperClassName||"frs-hide-scroll-wrapper",n.styleElement=n.styleElement||document.getElementsByTagName("style")[0]||o("style",document.head),n.autoInit=void 0===n.autoInit||n.autoInit,n.autoInit&&(document.readyState&&"loading"!==document.readyState?l():window.addEventListener("load",l,{passive:!0}),window.addEventListener("resize",l,{passive:!0})),e.FRSHideScrollbar=i}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.FRSHideScrollbar={})}(this,function(e){var t=window.FRSHideScrollbar&&window.FRSHideScrollbar.FRSHideScrollbar,n=Object.assign({className:"frs-hide-scroll",wrapperClassName:"frs-hide-scroll-wrapper",autoInit:!0},t&&t.config||{}),o={refreshScrollWidth:function(){var e=r("div",document.body);e.style.position="absolute",e.style["z-index"]="-1",e.style.width="100px",e.style.overflow="scroll";var t=e.offsetWidth-e.clientWidth;document.body.removeChild(e),t!==n.scrollWidth&&(n.scrollWidth=t,o.update())},update:function(e,t){if(void 0===e&&(e=n),void 0===t&&(t=l),t){var o=t.styleElement,i=o.textContent.lastIndexOf("."+t.wrapperClassName+"{overflow:hidden;height:100%}");o.textContent=o.textContent.substring(0,i)}Object.assign(n,e);var r="height:",d=n.scrollWidth;r+=0===d?"100%":"calc(100% + "+d+"px);margin-right:-"+(d+.5)+"px",l=Object.assign({},n),n.styleElement.textContent+="."+n.wrapperClassName+"{overflow:hidden;height:100%}."+n.className+"{overflow:scroll;"+r+"}"},config:n};n.styleElement=n.styleElement||r("style",document.head);var i,l=Object.assign({},n);function r(e,t){return t.appendChild(document.createElement(e))}n.autoInit&&(i=function(){return o.refreshScrollWidth()},document.readyState&&"loading"!==document.readyState?i():window.addEventListener("load",i,{passive:!0}),window.addEventListener("resize",i,{passive:!0})),e.FRSHideScrollbar=o}); | ||
| //# sourceMappingURL=FRS-hide-scrollbar.umd.js.map |
| { | ||
| "name": "frs-hide-scrollbar", | ||
| "version": "0.4.1", | ||
| "version": "1.0.0", | ||
| "description": "Easy & lightweight solution for cross-browser scrollbar hiding", | ||
@@ -11,5 +11,4 @@ "source": "src/index.mjs", | ||
| "esnext": "dist/FRS-hide-scrollbar.js", | ||
| "sass": "src/styles/FRSHideScrollbar.scss", | ||
| "styles": "dist/FRS-hide-scrollbar.css", | ||
| "scripts": { | ||
| "pretest": "yarn lint", | ||
| "test": "tap --node-arg=--experimental-modules ./src/scripts/*.spec.test.js", | ||
@@ -19,6 +18,6 @@ "test-coverage": "yarn test && tap --100 --coverage-report=html", | ||
| "prestart": "yarn clean", | ||
| "start": "microbundle watch -o docs", | ||
| "start": "microbundle watch -o docs --name FRSHideScrollbar", | ||
| "prebuild": "yarn clean", | ||
| "build": "yarn build:bundle && yarn build:example", | ||
| "build:bundle": "microbundle", | ||
| "build:bundle": "microbundle --compress --name FRSHideScrollbar", | ||
| "build:example": "cpy dist/* docs", | ||
@@ -28,3 +27,5 @@ "prerelease": "yarn test-coverage && yarn build && git add dist && git add docs", | ||
| "postrelease": "git push --follow-tags origin master && yarn publish", | ||
| "clean": "rimraf dist/**/* && rimraf docs/*.{js,mjs,css,map} && rimraf coverage" | ||
| "clean": "rimraf dist/**/* && rimraf docs/*.{js,mjs,css,map} && rimraf coverage", | ||
| "lint": "standard \"src/**/*.mjs\" \"src/**/*.test.js\"", | ||
| "lint.fix": "yarn lint --fix" | ||
| }, | ||
@@ -60,10 +61,7 @@ "author": "Jakub Freisler <FRSgit@users.noreply.github.com>", | ||
| "coveralls": "^3.0.7", | ||
| "cpy-cli": "^2.0.0", | ||
| "jsdom": "^15.0.0", | ||
| "cpy-cli": "^3.0.0", | ||
| "jsdom": "^16.1.0", | ||
| "microbundle": "^0.11.0", | ||
| "node-sass": "^4.13.0", | ||
| "postcss-import": "^12.0.0", | ||
| "postcss-reporter": "^6.0.0", | ||
| "precss": "^4.0.0", | ||
| "rimraf": "^3.0.0", | ||
| "standard": "^14.3.1", | ||
| "standard-version": "^7.0.0", | ||
@@ -70,0 +68,0 @@ "tap": "^14.1.11" |
@@ -14,4 +14,10 @@ # FRS-hide-scrollbar | ||
| FRS-hide-scrollbar is cross-browser (supports both desktop & mobile devices), simple & lightweight library for hiding both horizontal & vertical scrollbars! | ||
| **FRS-hide-scrollbar** is a cross-browser (supports both desktop & mobile devices), simple & lightweight library for hiding both horizontal & vertical scrollbars! | ||
| For more information, please see [docs](https://frsource.github.io/FRS-hide-scrollbar/). | ||
| To gain better performance, all of heavy-lifting & continuous logic is handled by CSS. Start using **FRS-hide-scrollbar** today by reading documentation below: | ||
| ## Table of contents | ||
| * [Installation](https://frsource.github.io/FRS-hide-scrollbar/installation) | ||
| * [Usage](https://frsource.github.io/FRS-hide-scrollbar/usage) | ||
| * [Example](https://frsource.github.io/FRS-hide-scrollbar/example) |
| const tap = require('tap') | ||
| const jsdom = require('jsdom') | ||
| const {JSDOM} = jsdom | ||
| let window, document, FRSHideScrollbar | ||
| const { JSDOM } = jsdom | ||
| let document, FRSHideScrollbar, lastWindowOptions | ||
| let CACHE_BUSTER = -1 | ||
| tap.beforeEach(async () => await onBeforeEach()) | ||
| tap.beforeEach(async () => { | ||
| await onBeforeEach() | ||
| }) | ||
@@ -20,7 +22,5 @@ tap.test('without <style> element in DOM new one', (t) => { | ||
| tap.test('window already loaded', {timeout: 3000}, (t) => { | ||
| tap.test('window already loaded', { timeout: 3000 }, (t) => { | ||
| t.isNot(typeof FRSHideScrollbar.config.scrollWidth, 'undefined', | ||
| 'scrollWidth should be recalculated (will NOT be undef)') | ||
| t.is(FRSHideScrollbar.refreshScrollWidth(), FRSHideScrollbar.config.scrollWidth, | ||
| 'scrollWidth should be the same as refreshScrollWidth return value') | ||
| t.end() | ||
@@ -32,4 +32,6 @@ }) | ||
| FRSHideScrollbar: { | ||
| config: { | ||
| autoInit: false | ||
| FRSHideScrollbar: { | ||
| config: { | ||
| autoInit: false | ||
| } | ||
| } | ||
@@ -44,17 +46,13 @@ } | ||
| tap.test('onload', {timeout: 3000}, async (t) => { | ||
| await onBeforeEach(void 0, true) | ||
| tap.test('onload', { timeout: 3000 }, async (t) => { | ||
| await onBeforeEach(undefined, true) | ||
| t.isNot(typeof FRSHideScrollbar.config.scrollWidth, 'undefined', | ||
| 'scrollWidth should be recalculated (will NOT be undef)') | ||
| t.is(FRSHideScrollbar.refreshScrollWidth(), FRSHideScrollbar.config.scrollWidth, | ||
| 'scrollWidth should be the same as refreshScrollWidth return value') | ||
| t.end() | ||
| }) | ||
| tap.test('when loaded after DOM init', {timeout: 3000}, async (t) => { | ||
| tap.test('when loaded after DOM init', { timeout: 3000 }, async (t) => { | ||
| t.isNot(typeof FRSHideScrollbar.config.scrollWidth, 'undefined', | ||
| 'scrollWidth should be recalculated (will NOT be undef)') | ||
| t.is(FRSHideScrollbar.refreshScrollWidth(), FRSHideScrollbar.config.scrollWidth, | ||
| 'scrollWidth should be the same as refreshScrollWidth return value') | ||
| t.end() | ||
@@ -69,6 +67,7 @@ }) | ||
| const newClassName = 'new-class-name' | ||
| const styleContentExpected = styleEl.innerHTML.replace(new RegExp(oldClassName, 'g'), newClassName) | ||
| const styleContentExpected = styleEl.innerHTML.replace(new RegExp(oldClassName, 'g'), newClassName).replace(/-wrapper/g, '-wrapperz') | ||
| FRSHideScrollbar.config.className = newClassName | ||
| FRSHideScrollbar.updateStyles() | ||
| FRSHideScrollbar.config.wrapperClassName = newClassName + '-wrapperz' | ||
| FRSHideScrollbar.update() | ||
@@ -80,5 +79,15 @@ t.is(styleEl.innerHTML, styleContentExpected, 'changes style content as well') | ||
| tap.test('updateStyles', async (t) => { | ||
| tap.test('update', async (t) => { | ||
| t.beforeEach(onBeforeEach) | ||
| t.test('when cfgOld = null', (ct) => { | ||
| FRSHideScrollbar.update(FRSHideScrollbar.config, null) | ||
| const { wrapperClassName } = FRSHideScrollbar.config | ||
| const wrapperClassNameRegex = new RegExp(wrapperClassName, 'g') | ||
| const count = (FRSHideScrollbar.config.styleElement.textContent.match(wrapperClassNameRegex) || []).length | ||
| ct.is(count, 2, 'previous styling is not being cleared') | ||
| ct.end() | ||
| }) | ||
| t.test('from refreshScrollWidth', (ct) => { | ||
@@ -88,3 +97,3 @@ ct.beforeEach(onBeforeEach) | ||
| ct.test('when scrollWidth hasn\'t changed', (cct) => { | ||
| FRSHideScrollbar.updateStyles = () => cct.fail('shouldn\'t be called') | ||
| FRSHideScrollbar.update = () => cct.fail('shouldn\'t be called') | ||
| FRSHideScrollbar.refreshScrollWidth() | ||
@@ -96,5 +105,5 @@ | ||
| ct.test('when scrollWidth has changed', (cct) => { | ||
| const originalUpdateStyles = FRSHideScrollbar.updateStyles | ||
| const originalupdate = FRSHideScrollbar.update | ||
| FRSHideScrollbar.updateStyles = () => cct.pass('should be called') | ||
| FRSHideScrollbar.update = () => cct.pass('should be called') | ||
| FRSHideScrollbar.config.scrollWidth += 1 | ||
@@ -106,10 +115,10 @@ FRSHideScrollbar.refreshScrollWidth() | ||
| FRSHideScrollbar.updateStyles = originalUpdateStyles | ||
| FRSHideScrollbar.update = originalupdate | ||
| FRSHideScrollbar.config.scrollWidth = 12 // need to mock, so styles are appended to _styleElement | ||
| FRSHideScrollbar.updateStyles() | ||
| FRSHideScrollbar.update() | ||
| FRSHideScrollbar.refreshScrollWidth() | ||
| styleEl.innerHTML = styleEl.innerHTML.replace( | ||
| new RegExp('margin-right:-' + (FRSHideScrollbar.config.scrollWidth + .5) + 'px;'), | ||
| new RegExp('margin-right:-' + (FRSHideScrollbar.config.scrollWidth + 0.5) + 'px;'), | ||
| new RegExp('margin-right:-' + (FRSHideScrollbar.config.scrollWidth + 1.5) + 'px;') | ||
@@ -132,3 +141,3 @@ ) | ||
| async function onBeforeEach (windowOptions = undefined, mimicNotLoadedWindow = false) { | ||
| ({window, document, FRSHideScrollbar} = await initializeModuleInDOM(`./FRSHideScrollbar.mjs?v=${++CACHE_BUSTER}`, | ||
| ({ document, FRSHideScrollbar } = await initializeModuleInDOM(`./FRSHideScrollbar.mjs?v=${++CACHE_BUSTER}`, | ||
| windowOptions, mimicNotLoadedWindow)) | ||
@@ -140,3 +149,3 @@ | ||
| async function initializeModuleInDOM (module, windowOptions = undefined, mimicNotLoadedWindow = false) { | ||
| const {window} = new JSDOM('') | ||
| const { window } = new JSDOM('') | ||
@@ -156,8 +165,15 @@ global.window = window | ||
| await new Promise((resolve) => { | ||
| window.addEventListener('load', resolve, {passive: true}) | ||
| window.addEventListener('load', resolve, { passive: true }) | ||
| }) | ||
| } | ||
| } | ||
| if (lastWindowOptions) { | ||
| for (const windowOption in lastWindowOptions) { | ||
| delete window[windowOption] | ||
| } | ||
| } | ||
| lastWindowOptions = windowOptions | ||
| if (windowOptions) { | ||
@@ -167,3 +183,3 @@ Object.assign(window, windowOptions) | ||
| const {FRSHideScrollbar} = await import(module) | ||
| const { FRSHideScrollbar } = await import(module) | ||
| if (mimicNotLoadedWindow) { | ||
@@ -186,3 +202,3 @@ Object.defineProperty(window.document, 'readyState', { | ||
| resolver, | ||
| {passive: true} | ||
| { passive: true } | ||
| ) | ||
@@ -196,3 +212,3 @@ } else { | ||
| } | ||
| }); | ||
| }) | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
386440
3.96%- Dev dependency count
8
-27.27%- Lines of code
247
11.26%- Number of low quality alerts
0
-100%- Number of lines in readme file
23
35.29%Worsened metrics
- Number of package files
16
-5.88%No dependency changes