From 39d99ab0819bb39c050a578901eb1c2a7952505f Mon Sep 17 00:00:00 2001 From: Jakub Freisler Date: Sun, 3 Jan 2021 19:36:08 +0100 Subject: [PATCH] feat: move to css-only implementation remove travisCI & coveralls since there is no js anymore update the docs tweak microbundle config to bundle css-only package remove unused packages BREAKING CHANGE: drop the whole JS API - the package is CSS-only from now on --- .babelrc | 11 - .browserslistrc | 2 +- .codebeatignore | 6 - .travis.yml | 16 - README.md | 14 +- dist/FRS-hide-scrollbar.js | 2 - dist/FRS-hide-scrollbar.js.map | 1 - dist/FRS-hide-scrollbar.mjs | 2 - dist/FRS-hide-scrollbar.mjs.map | 1 - dist/FRS-hide-scrollbar.modern.js | 2 - dist/FRS-hide-scrollbar.modern.js.map | 1 - dist/FRS-hide-scrollbar.umd.js | 2 - dist/FRS-hide-scrollbar.umd.js.map | 1 - dist/frs-hide-scrollbar.css | 2 + dist/frs-hide-scrollbar.css.map | 1 + docs/FRS-hide-scrollbar.js | 2 - docs/FRS-hide-scrollbar.js.map | 1 - docs/FRS-hide-scrollbar.mjs | 2 - docs/FRS-hide-scrollbar.mjs.map | 1 - docs/FRS-hide-scrollbar.modern.js | 2 - docs/FRS-hide-scrollbar.modern.js.map | 1 - docs/FRS-hide-scrollbar.umd.js | 2 - docs/FRS-hide-scrollbar.umd.js.map | 1 - docs/example.tpl.html | 301 +- docs/frs-hide-scrollbar.css | 2 + docs/frs-hide-scrollbar.css.map | 1 + docs/index.md | 8 +- docs/installation.md | 8 +- docs/usage.md | 65 +- package.json | 42 +- src/index.mjs | 1 - src/index.scss | 10 + src/scripts/FRSHideScrollbar.mjs | 85 - src/scripts/FRSHideScrollbar.spec.test.js | 200 -- yarn.lock | 3684 +++------------------ 35 files changed, 621 insertions(+), 3862 deletions(-) delete mode 100644 .babelrc delete mode 100644 .codebeatignore delete mode 100644 .travis.yml delete mode 100644 dist/FRS-hide-scrollbar.js delete mode 100644 dist/FRS-hide-scrollbar.js.map delete mode 100644 dist/FRS-hide-scrollbar.mjs delete mode 100644 dist/FRS-hide-scrollbar.mjs.map delete mode 100644 dist/FRS-hide-scrollbar.modern.js delete mode 100644 dist/FRS-hide-scrollbar.modern.js.map delete mode 100644 dist/FRS-hide-scrollbar.umd.js delete mode 100644 dist/FRS-hide-scrollbar.umd.js.map create mode 100644 dist/frs-hide-scrollbar.css create mode 100644 dist/frs-hide-scrollbar.css.map delete mode 100644 docs/FRS-hide-scrollbar.js delete mode 100644 docs/FRS-hide-scrollbar.js.map delete mode 100644 docs/FRS-hide-scrollbar.mjs delete mode 100644 docs/FRS-hide-scrollbar.mjs.map delete mode 100644 docs/FRS-hide-scrollbar.modern.js delete mode 100644 docs/FRS-hide-scrollbar.modern.js.map delete mode 100644 docs/FRS-hide-scrollbar.umd.js delete mode 100644 docs/FRS-hide-scrollbar.umd.js.map create mode 100644 docs/frs-hide-scrollbar.css create mode 100644 docs/frs-hide-scrollbar.css.map delete mode 100644 src/index.mjs create mode 100644 src/index.scss delete mode 100644 src/scripts/FRSHideScrollbar.mjs delete mode 100644 src/scripts/FRSHideScrollbar.spec.test.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index b6dc74f..0000000 --- a/.babelrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "presets": [ - [ - "@babel/preset-env", - { - "loose": true, - "modules": false - } - ] - ] -} \ No newline at end of file diff --git a/.browserslistrc b/.browserslistrc index 99419b5..f1dca4a 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1,2 +1,2 @@ -ie >= 9 +ie >= 10 > 1% \ No newline at end of file diff --git a/.codebeatignore b/.codebeatignore deleted file mode 100644 index 0d65c0d..0000000 --- a/.codebeatignore +++ /dev/null @@ -1,6 +0,0 @@ -scripts/** -docs/** -dist/** -scripts/* -docs/* -dist/* diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 4f48e6e..0000000 --- a/.travis.yml +++ /dev/null @@ -1,16 +0,0 @@ -dist: trusty -sudo: required -language: node_js -cache: yarn -matrix: - include: - - name: "Unit tests" - script: yarn test - node_js: - - "node" - - "lts/*" - - name: "Coverage" - script: yarn test-coverage:ci - node_js: - - "node" - - "lts/*" \ No newline at end of file diff --git a/README.md b/README.md index c9b50bd..8ef1c29 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,17 @@ [![NPM version](https://img.shields.io/npm/v/frs-hide-scrollbar.svg?style=flat)](https://www.npmjs.com/package/frs-hide-scrollbar) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) -[![Build Status](https://travis-ci.com/FRSource/FRS-hide-scrollbar.svg?branch=master)](https://travis-ci.org/FRSource/FRS-hide-scrollbar) -[![Coverage Status](https://coveralls.io/repos/github/FRSource/FRS-hide-scrollbar/badge.svg?branch=master)](https://coveralls.io/github/FRSource/FRS-hide-scrollbar?branch=master) [![Dependabot badge](https://api.dependabot.com/badges/status?host=github&repo=FRSource/FRS-hide-scrollbar)](https://dependabot.com/) [![Dependencies none](https://img.shields.io/badge/dependencies-none-brightgreen)](https://david-dm.org/frsource/frs-hide-scrollbar) [![Dev dependencies status](https://david-dm.org/frsource/frs-hide-scrollbar/dev-status.svg)](https://david-dm.org/frsource/frs-hide-scrollbar?type=dev) -[![codebeat badge](https://codebeat.co/badges/0b194076-5621-478b-9169-ee527a5ce4a4)](https://codebeat.co/projects/github-com-frsource-frs-hide-scrollbar-master) -[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Bundle size](https://img.shields.io/bundlephobia/minzip/frs-hide-scrollbar)](https://bundlephobia.com/result?p=frs-hide-scrollbar) -**FRS-hide-scrollbar** is a cross-browser (supports both desktop & mobile devices), simple & lightweight library for hiding both horizontal & vertical scrollbars! +**FRS-hide-scrollbar** is a css-only, cross-browser (IE10+, supports both desktop & mobile devices), simple & lightweight library for hiding scrollbars! -To gain better performance, all of heavy-lifting & continuous logic is handled by CSS. Start using **FRS-hide-scrollbar** today by reading documentation below: +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) +* [Installation](https://www.frsource.org/FRS-hide-scrollbar/installation) +* [Usage](https://www.frsource.org/FRS-hide-scrollbar/usage) +* [Example](https://www.frsource.org/FRS-hide-scrollbar/example) diff --git a/dist/FRS-hide-scrollbar.js b/dist/FRS-hide-scrollbar.js deleted file mode 100644 index 693661b..0000000 --- a/dist/FRS-hide-scrollbar.js +++ /dev/null @@ -1,2 +0,0 @@ -function e(){return(e=Object.assign||function(e){for(var t=1;t FRS-hide-scrollbar - - - - - -
-
-

Try to scroll the area below up & down or left & right

-
-
-
-
-

Some heading

-
-
-

This is example article of yours, try scrolling up & down to see FRS-hide-scroll in action!

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit felis mi, a aliquam erat ullamcorper ac. Fusce et elit - pellentesque, sollicitudin ligula sollicitudin, bibendum nisl. Quisque fermentum nulla a velit pulvinar lacinia. Curabitur at nisi - fermentum, bibendum purus quis, ullamcorper tortor. Vivamus dapibus vitae augue non tempus. Quisque id porttitor neque. Ut - vestibulum, - urna gravida tempor blandit, purus odio mollis metus, in rutrum ante augue vitae neque. Curabitur eu interdum leo. Praesent nec arcu - neque. Maecenas vel tempor sem, at vehicula ligula. Aenean iaculis urna orci, dapibus vestibulum odio pulvinar eu. Nunc consectetur - in - tortor sit amet finibus. Morbi in suscipit augue, non vulputate ligula. Donec nec elit egestas, rutrum erat nec, feugiat elit.

-

Praesent pharetra posuere neque, id accumsan turpis. Ut pulvinar mattis quam. Ut et ullamcorper sem. Praesent massa dolor, - dignissim - pulvinar blandit eget, facilisis nec felis. Sed maximus massa vitae augue consectetur, nec aliquam purus malesuada. Fusce elementum, - sapien quis tincidunt interdum, lectus turpis suscipit eros, nec pharetra est diam quis urna. Morbi mollis semper tortor, sed rutrum - tortor posuere eget. Nam fringilla ligula eget lorem finibus, sit amet tristique tortor aliquet. Nullam sem ipsum, aliquam nec - dictum - id, ultricies eget orci. Praesent non nulla vehicula, pharetra purus non, tristique augue. Sed pharetra sed nisl vitae efficitur. - Suspendisse turpis risus, vestibulum a faucibus eget, gravida ut felis. Nam in odio ipsum. Pellentesque habitant morbi tristique - senectus et netus et malesuada fames ac turpis egestas. Aenean suscipit eget nisi mollis faucibus. Duis quis rutrum ipsum, eget - cursus - magna.

-
-
-
-
-

Some heading #2

-
-
-

Pretty neat, isn't it?

-
-
-
-
-
-
+ + @media (min-device-width: 800px) { + .phone-wrapper { + position: relative; + box-sizing: border-box; + width: 360px; + height: 680px; + border-style: solid; + border-color: #323232; + border-width: 9px; + background: #efefef; + border-radius: 30px; + } + + .phone-wrapper:before { + position: absolute; + top: 0; + left: 50%; + box-sizing: border-box; + content: ""; + display: block; + width: 66%; + height: 22px; + border-radius: 0 0 16px 17px; + background: #323232; + transform: translateX(-50%); + box-shadow: 0 0 2px .5px rgba(3, 3, 8, .25); + } + + .phone-wrapper:after { + position: absolute; + box-sizing: border-box; + content: ""; + margin-top: 3px; + margin-left: 50px; + top: 0; + left: 50%; + margin-bottom: 8px; + display: block; + width: 11px; + height: 11px; + border-radius: 50%; + border: solid 5px rgba(50, 55, 48, 0.8); + background: rgba(56, 193, 52, 0.2); + } + + li:first-child > header h4 { + padding-top: 22px; + } + } + + + +
+
+

Try to scroll the area below up & down or left & right

+
+
    +
  • +
    +

    Some heading

    +
    +
    +

    This is example article of yours, try scrolling up & down to see FRS-hide-scroll in action!

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit felis mi, a aliquam erat ullamcorper ac. Fusce et elit + pellentesque, sollicitudin ligula sollicitudin, bibendum nisl. Quisque fermentum nulla a velit pulvinar lacinia. Curabitur at nisi + fermentum, bibendum purus quis, ullamcorper tortor. Vivamus dapibus vitae augue non tempus. Quisque id porttitor neque. Ut + vestibulum, + urna gravida tempor blandit, purus odio mollis metus, in rutrum ante augue vitae neque. Curabitur eu interdum leo. Praesent nec arcu + neque. Maecenas vel tempor sem, at vehicula ligula. Aenean iaculis urna orci, dapibus vestibulum odio pulvinar eu. Nunc consectetur + in + tortor sit amet finibus. Morbi in suscipit augue, non vulputate ligula. Donec nec elit egestas, rutrum erat nec, feugiat elit.

    +

    Praesent pharetra posuere neque, id accumsan turpis. Ut pulvinar mattis quam. Ut et ullamcorper sem. Praesent massa dolor, + dignissim + pulvinar blandit eget, facilisis nec felis. Sed maximus massa vitae augue consectetur, nec aliquam purus malesuada. Fusce elementum, + sapien quis tincidunt interdum, lectus turpis suscipit eros, nec pharetra est diam quis urna. Morbi mollis semper tortor, sed rutrum + tortor posuere eget. Nam fringilla ligula eget lorem finibus, sit amet tristique tortor aliquet. Nullam sem ipsum, aliquam nec + dictum + id, ultricies eget orci. Praesent non nulla vehicula, pharetra purus non, tristique augue. Sed pharetra sed nisl vitae efficitur. + Suspendisse turpis risus, vestibulum a faucibus eget, gravida ut felis. Nam in odio ipsum. Pellentesque habitant morbi tristique + senectus et netus et malesuada fames ac turpis egestas. Aenean suscipit eget nisi mollis faucibus. Duis quis rutrum ipsum, eget + cursus + magna.

    +
    +
    • +
  • +
    +

    Some heading #2

    +
    +
    +

    Pretty neat, isn't it?

    +
    +
    • +
+
+
+
\ No newline at end of file diff --git a/docs/frs-hide-scrollbar.css b/docs/frs-hide-scrollbar.css new file mode 100644 index 0000000..874839f --- /dev/null +++ b/docs/frs-hide-scrollbar.css @@ -0,0 +1,2 @@ +.frs-hide-scroll{scrollbar-width:none;-ms-overflow-style:none}.frs-hide-scroll::-webkit-scrollbar{display:none} +/*# sourceMappingURL=frs-hide-scrollbar.css.map */ \ No newline at end of file diff --git a/docs/frs-hide-scrollbar.css.map b/docs/frs-hide-scrollbar.css.map new file mode 100644 index 0000000..72c8999 --- /dev/null +++ b/docs/frs-hide-scrollbar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,uBACF,CACA,oCACE,YACF","file":"frs-hide-scrollbar.css","sourcesContent":[".frs-hide-scroll {\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n.frs-hide-scroll::-webkit-scrollbar {\n display: none;\n}"]} \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index f9cf3d5..c192ff8 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,18 +2,14 @@ [![NPM version](https://img.shields.io/npm/v/frs-hide-scrollbar.svg?style=flat)](https://www.npmjs.com/package/frs-hide-scrollbar) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) -[![Build Status](https://travis-ci.com/FRSource/FRS-hide-scrollbar.svg?branch=master)](https://travis-ci.org/FRSource/FRS-hide-scrollbar) -[![Coverage Status](https://coveralls.io/repos/github/FRSource/FRS-hide-scrollbar/badge.svg?branch=master)](https://coveralls.io/github/FRSource/FRS-hide-scrollbar?branch=master) [![Dependabot badge](https://api.dependabot.com/badges/status?host=github&repo=FRSource/FRS-hide-scrollbar)](https://dependabot.com/) [![Dependencies none](https://img.shields.io/badge/dependencies-none-brightgreen)](https://david-dm.org/frsource/frs-hide-scrollbar) [![Dev dependencies status](https://david-dm.org/frsource/frs-hide-scrollbar/dev-status.svg)](https://david-dm.org/frsource/frs-hide-scrollbar?type=dev) -[![codebeat badge](https://codebeat.co/badges/0b194076-5621-478b-9169-ee527a5ce4a4)](https://codebeat.co/projects/github-com-frsource-frs-hide-scrollbar-master) -[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Bundle size](https://img.shields.io/bundlephobia/minzip/frs-hide-scrollbar)](https://bundlephobia.com/result?p=frs-hide-scrollbar) -**FRS-hide-scrollbar** is a cross-browser (supports both desktop & mobile devices), simple & lightweight library for hiding both horizontal & vertical scrollbars! +**FRS-hide-scrollbar** is a css-only, cross-browser (IE10+, supports both desktop & mobile devices), simple & lightweight library for hiding scrollbars! -To gain better performance, all of heavy-lifting & continuous logic is handled by CSS. Start using **FRS-hide-scrollbar** today by reading documentation below: +Start using **FRS-hide-scrollbar** today by reading documentation below: ## Table of contents diff --git a/docs/installation.md b/docs/installation.md index 76ed0cb..a1d3e45 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -4,15 +4,9 @@ Just install `frs-hide-scrollbar` package with you favourite package manager: -like yarn - ```bash yarn add frs-hide-scrollbar -``` - -or npm - -```bash +# or npm install frs-hide-scrollbar --save ``` diff --git a/docs/usage.md b/docs/usage.md index 81e7faf..e7fb093 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -4,74 +4,49 @@ Simply require the package: -```javascript -const {FRSHideScrollbar} = require('frs-hide-scrollbar'); +Via SCSS: + +```scss +@import '~frs-hide-scrollbar'; ``` -ES6 import it: +Via JavaScript: ```javascript -import { FRSHideScrollbar } from 'frs-hide-scrollbar'; +import 'frs-hide-scrollbar'; +// or +require('frs-hide-scrollbar'); ``` -include it locally: +include it in your HTML from local npm installation: ```html - + ``` or from [unpkg](https://unpkg.com/#/) [CDN](https://en.wikipedia.org/wiki/Content_delivery_network): ```html - - + ``` -To hide element scrollbar just add on it a `frs-hide-scroll` class and a `frs-hide-scroll-wrapper` on it`s container, like this: +To hide element's scrollbar just add a `frs-hide-scroll` class to it. ```html -
-
- -
+
+
``` -And that's it! Now FRSHideScrollbar library will detect if hiding of a scrollbar is needed and will apply correct styling changes. - -> *Note:* There is possibility to change class names to custom ones if needed (and other options - see example below). Simply add proper configuration block **before** loading of `frs-hide-scrollbar` code: - -```html - - - - -``` +And that's it! -> *Note:* or change options dynamically via `update` method (you can change same options as above): +> *Note:* There is possibility to change class name to custom one if needed. Simply change the SCSS variable **before** importing `frs-hide-scrollbar` code: -```js -import {FRSHideScrollbar} from 'frs-hide-scrollbar'; +```scss +$frs-hide-scroll-classname: 'whatever'; +@import '~frs-hide-scrollbar'; -FRSHideScrollbar.update({ - className: 'newClassName' -}) +// now the package styling will be avaiable under .whatever class name ``` To see more real-life usage example let's jump to the [example page](/FRS-hide-scrollbar/example). diff --git a/package.json b/package.json index 14fe6a6..87d52b3 100644 --- a/package.json +++ b/package.json @@ -1,34 +1,26 @@ { "name": "frs-hide-scrollbar", "version": "1.0.1", - "description": "Easy & lightweight solution for cross-browser scrollbar hiding", - "source": "src/index.mjs", - "main": "dist/FRS-hide-scrollbar.js", - "module": "dist/FRS-hide-scrollbar.mjs", - "umd:main": "dist/FRS-hide-scrollbar.umd.js", - "unpkg": "dist/FRS-hide-scrollbar.umd.js", - "esnext": "dist/FRS-hide-scrollbar.js", + "description": "CSS-only & ease-to-use solution for cross-browser scrollbar hiding", + "source": "src/index.scss", + "main": "dist/frs-hide-scrollbar.css", "scripts": { - "pretest": "yarn lint", - "test": "tap --node-arg=--experimental-modules ./src/scripts/*.spec.test.js", - "test-coverage": "yarn test && tap --100 --coverage-report=html", - "test-coverage:ci": "yarn test && tap --100 --coverage-report=text-lcov | coveralls", "prestart": "yarn clean", - "start": "microbundle watch -o docs --name FRSHideScrollbar", + "start": "microbundle watch -o docs --name frs-hide-scrollbar", "prebuild": "yarn clean", "build": "yarn build:bundle && yarn build:example", - "build:bundle": "microbundle --compress --name FRSHideScrollbar", + "build:bundle": "microbundle --compress -o dist/frs-hide-scrollbar.js -f cjs", + "postbuild:bundle": "yarn clean:dist:js", "build:example": "cpy dist/* docs", - "prerelease": "yarn test-coverage && yarn build && git add dist && git add docs", + "prerelease": "yarn build && git add dist && git add docs", "release": "yarn build && standard-version", "postrelease": "git push --follow-tags origin master && yarn publish", - "clean": "rimraf dist/**/* && rimraf docs/*.{js,mjs,css,map} && rimraf coverage", - "lint": "standard \"src/**/*.mjs\" \"src/**/*.test.js\"", - "lint.fix": "yarn lint --fix" + "clean": "rimraf dist/**/* && rimraf docs/*.{js,mjs,css,map}", + "clean:dist:js": "rimraf dist/*.{js,mjs,js.map}" }, "author": "Jakub Freisler ", "license": "Apache-2.0", - "homepage": "https://frsource.github.io/FRS-hide-scrollbar/", + "homepage": "https://www.frsource.org/FRS-hide-scrollbar/", "repository": { "type": "git", "url": "git+https://github.com/FRSource/FRS-hide-scrollbar.git" @@ -38,11 +30,10 @@ "efficient", "lightweight", "simple", - "vanillaJS", + "CSS", + "CSS-only", "hide scrollbar", - "scrollbar", - "css", - "js" + "scrollbar" ], "files": [ "dist/", @@ -54,14 +45,11 @@ "url": "https://github.com/FRSource/FRS-hide-scrollbar/issues" }, "devDependencies": { - "coveralls": "^3.0.7", "cpy-cli": "^3.0.0", - "jsdom": "^16.1.0", "microbundle": "^0.13.0", "rimraf": "^3.0.0", - "standard": "^16.0.3", - "standard-version": "^9.0.0", - "tap": "^14.1.11" + "sass": "^1.32.0", + "standard-version": "^9.0.0" }, "dependencies": {} } diff --git a/src/index.mjs b/src/index.mjs deleted file mode 100644 index 872ab81..0000000 --- a/src/index.mjs +++ /dev/null @@ -1 +0,0 @@ -export * from './scripts/FRSHideScrollbar' diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..33b6f54 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,10 @@ +$frs-hide-scroll-classname: 'frs-hide-scroll' !default; + +.#{$frs-hide-scroll-classname} { + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } +} diff --git a/src/scripts/FRSHideScrollbar.mjs b/src/scripts/FRSHideScrollbar.mjs deleted file mode 100644 index c25c45e..0000000 --- a/src/scripts/FRSHideScrollbar.mjs +++ /dev/null @@ -1,85 +0,0 @@ -const windowFRSHideScrollbar = window.FRSHideScrollbar && window.FRSHideScrollbar.FRSHideScrollbar -const CONFIG = Object.assign( - { - className: 'frs-hide-scroll', - wrapperClassName: 'frs-hide-scroll-wrapper', - autoInit: true - }, - (windowFRSHideScrollbar && windowFRSHideScrollbar.config) || {} -) -export const FRSHideScrollbar = { - refreshScrollWidth, - update, - config: CONFIG -} -CONFIG.styleElement = CONFIG.styleElement || createNewChild('style', document.head) -let CONFIG_OLD = { ...CONFIG } - -if (CONFIG.autoInit) { - initHandlers() -} - -// - -function initHandlers () { - const refreshScrollWidth = function () { return FRSHideScrollbar.refreshScrollWidth() } - if (!document.readyState || document.readyState === 'loading') { - window.addEventListener('load', refreshScrollWidth, { passive: true }) - } else { - refreshScrollWidth() - } - - window.addEventListener('resize', refreshScrollWidth, { passive: true }) -} - -function refreshScrollWidth () { - const _el = createNewChild('div', document.body) - _el.style.position = 'absolute' - _el.style['z-index'] = '-1' - _el.style.width = '100px' - _el.style.overflow = 'scroll' - - const scrollWidth = _el.offsetWidth - _el.clientWidth - - document.body.removeChild(_el) - - if (scrollWidth !== CONFIG.scrollWidth) { - CONFIG.scrollWidth = scrollWidth - FRSHideScrollbar.update() - } -} - -function createNewChild (_tagName, _parent) { - return _parent.appendChild(document.createElement(_tagName)) -} - -function update (config = CONFIG, cfgOld = CONFIG_OLD) { - if (cfgOld) { - const styleElementOld = cfgOld.styleElement - const lio = styleElementOld.textContent - .lastIndexOf('.' + cfgOld.wrapperClassName + '{overflow:hidden;height:100%}') - - styleElementOld.textContent = styleElementOld.textContent.substring(0, lio) - } - - Object.assign(CONFIG, config) - - let elementStyle = 'height:' - const scrollWidth = CONFIG.scrollWidth - - if (scrollWidth === 0) { - elementStyle += '100%' - } else { - elementStyle += 'calc(100% + ' + scrollWidth + 'px);' + - 'margin-right:-' + - // additional 0.5px because of chrome rounding bug - (scrollWidth + 0.5) + 'px' - } - - CONFIG_OLD = { ...CONFIG } // copying the current CONFIG object - CONFIG.styleElement.textContent += - '.' + CONFIG.wrapperClassName + - '{overflow:hidden;height:100%}' + - '.' + CONFIG.className + - '{overflow:scroll;' + elementStyle + '}' -} diff --git a/src/scripts/FRSHideScrollbar.spec.test.js b/src/scripts/FRSHideScrollbar.spec.test.js deleted file mode 100644 index 9bb3dc0..0000000 --- a/src/scripts/FRSHideScrollbar.spec.test.js +++ /dev/null @@ -1,200 +0,0 @@ -const tap = require('tap') -const jsdom = require('jsdom') -const { JSDOM } = jsdom -let document, FRSHideScrollbar, lastWindowOptions -let CACHE_BUSTER = -1 - -tap.beforeEach(async () => { - await onBeforeEach() -}) - -tap.test('without