Skip to content

Commit 014b90d

Browse files
author
yuji
committed
init
0 parents  commit 014b90d

21 files changed

+690
-0
lines changed

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
last 1 version
2+
> 1%
3+
not ie <= 8

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/dist/
2+
/*.js

‎.eslintrc.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
"browser": true,
5+
"es6": true
6+
},
7+
extends: [
8+
"eslint:recommended",
9+
"plugin:prettier/recommended",
10+
"prettier"
11+
],
12+
globals: {
13+
"Atomics": "readonly",
14+
"SharedArrayBuffer": "readonly"
15+
},
16+
parserOptions: {
17+
"ecmaVersion": 2018,
18+
"sourceType": "module"
19+
},
20+
rules: {
21+
"prettier/prettier": "error"
22+
}
23+
};

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
/dist/

‎.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"trailingComma": "es5",
3+
"semi": true,
4+
"singleQuote": true,
5+
}

‎.stylelintrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": [
3+
"stylelint-config-recommended",
4+
"stylelint-prettier/recommended"
5+
],
6+
"rules": {}
7+
}

‎package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "mk-scroll",
3+
"version": "1.0.0",
4+
"description": "a scroll plugin for P.C.",
5+
"main": "index.js",
6+
"scripts": {
7+
"build:js": "rollup -c",
8+
"start": "npm-run-all -p watch:*",
9+
"watch:css": "postcss src/css/scroll.scss -o static/mkScroll.css -m -w",
10+
"watch:js": "rollup -i src/index.js -o static/mkScroll.js -n mkScroll -f umd -m -w",
11+
"lint": "npm-run-all -p lint:*",
12+
"lint:css": "stylelint {src,static}/**/*.{css,scss,html} --fix",
13+
"lint:js": "eslint src/**/*.js --fix",
14+
"test": "echo \"Error: no test specified\" && exit 1"
15+
},
16+
"author": "LiCe",
17+
"homepage": "https://LiCe.github.io/mk-scroll",
18+
"license": "ISC",
19+
"devDependencies": {
20+
"@babel/core": "^7.5.4",
21+
"@babel/preset-env": "^7.5.4",
22+
"babel-core": "^7.0.0-bridge.0",
23+
"change-case": "^3.1.0",
24+
"create-banner": "^1.0.0",
25+
"eslint": "^6.0.1",
26+
"eslint-config-prettier": "^6.0.0",
27+
"eslint-plugin-prettier": "^3.1.0",
28+
"npm-run-all": "^4.1.5",
29+
"postcss-cli": "^6.1.3",
30+
"postcss-header": "^1.0.0",
31+
"postcss-import": "^12.0.1",
32+
"postcss-preset-env": "^6.7.0",
33+
"postcss-url": "^8.0.0",
34+
"prettier": "^1.18.2",
35+
"rollup": "^1.17.0",
36+
"rollup-plugin-babel": "^4.3.3",
37+
"rollup-plugin-node-resolve": "^5.2.0",
38+
"stylelint": "^10.1.0",
39+
"stylelint-config-prettier": "^5.2.0",
40+
"stylelint-config-recommended": "^2.2.0",
41+
"stylelint-prettier": "^1.1.1"
42+
}
43+
}

‎postcss.config.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const { output } = require('./rollup.config');
2+
3+
module.exports = {
4+
plugins: {
5+
'postcss-import': {},
6+
'postcss-preset-env': {
7+
stage: 3,
8+
features: {
9+
'nesting-rules': true,
10+
},
11+
},
12+
'postcss-url': {
13+
url: 'inline',
14+
},
15+
'postcss-header': {
16+
header: output[0].banner,
17+
},
18+
stylelint: {
19+
fix: true,
20+
},
21+
},
22+
};

‎rollup.config.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const resolve = require('rollup-plugin-node-resolve');
2+
const babel = require('rollup-plugin-babel');
3+
const { pascalCase } = require('change-case');
4+
const createBanner = require('create-banner');
5+
const pkg = require('./package');
6+
7+
const name = pascalCase(pkg.name.replace('js', ''));
8+
const banner = createBanner({
9+
data: {
10+
name: `${name}.js`,
11+
year: '2019-present',
12+
},
13+
});
14+
15+
module.exports = {
16+
input: 'src/index.js',
17+
output: [
18+
{
19+
banner,
20+
name,
21+
file: `dist/${name}.js`,
22+
format: 'umd',
23+
},
24+
{
25+
banner,
26+
file: `dist/${name}.common.js`,
27+
format: 'cjs',
28+
},
29+
{
30+
banner,
31+
file: `dist/${name}.esm.js`,
32+
format: 'esm',
33+
},
34+
],
35+
watch: {
36+
exclude: 'node_modules/**'
37+
},
38+
plugins: [
39+
resolve(),
40+
babel({
41+
exclude: 'node_modules/**'
42+
}),
43+
]
44+
};

‎src/.babelrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false
7+
}
8+
]
9+
]
10+
}

‎src/css/scroll.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
a {
2+
color: red;
3+
&.span {
4+
color: white;
5+
}
6+
}

‎src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Scroll from './js/scroll';
2+
3+
export default Scroll;

‎src/js/constants.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const NAMESPACE = 'mk-scroll';
2+
export const VERTICAL = 'vertical';
3+
export const HORIZONTAL = 'horizontal';
4+
export const REGEXP_SUFFIX = /^(?:width|height|minWidth|minHeight|top|left|paddingRight|paddingBottom)$/;
5+
6+
export const CONTAINER_MIN_WIDTH = 200;
7+
export const CONTAINER_MIN_HEIGHT = 200;
8+
export const SCROLL_BAL_WIDTH = 17;

‎src/js/defaults.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {
2+
VERTICAL,
3+
CONTAINER_MIN_WIDTH,
4+
CONTAINER_MIN_HEIGHT,
5+
} from './constants';
6+
7+
export default {
8+
direction: VERTICAL,
9+
containerMinWidth: CONTAINER_MIN_WIDTH,
10+
containerMinHeight: CONTAINER_MIN_HEIGHT,
11+
};

‎src/js/render.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { SCROLL_BAL_WIDTH } from './constants';
2+
import { assign, setStyle } from './utilities';
3+
4+
export default {
5+
render() {
6+
this.renderContainer();
7+
this.renderWrapper();
8+
},
9+
renderContainer() {
10+
const STYLES = {
11+
minWidth: this.options.containerMinWidth,
12+
minHeight: this.options.containerMinHeight,
13+
overflow: 'hidden',
14+
};
15+
16+
setStyle(this.container, STYLES);
17+
},
18+
renderWrapper() {
19+
const STYLES = {
20+
boxSizing: 'border-box',
21+
};
22+
23+
if (this.isVertical) {
24+
assign(STYLES, {
25+
width: this.container.offsetWidth + SCROLL_BAL_WIDTH,
26+
paddingRight: SCROLL_BAL_WIDTH,
27+
height: 'inherit',
28+
overflowX: 'hidden',
29+
wordBreak: 'break-all'
30+
});
31+
} else {
32+
assign(STYLES, {
33+
height: this.container.offsetHeight + SCROLL_BAL_WIDTH,
34+
paddingBottom: SCROLL_BAL_WIDTH,
35+
overflowY: 'hidden',
36+
whiteSpace: 'nowrap'
37+
});
38+
}
39+
setStyle(this.wrapper, STYLES);
40+
},
41+
};

‎src/js/scroll.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import DEFAULTS from './defaults';
2+
import { VERTICAL } from './constants';
3+
import render from './render';
4+
import { assign, isString, isPlainObject, querySelector } from './utilities';
5+
6+
class Scroll {
7+
constructor(element, options = {}) {
8+
this.container = isString(element) ? querySelector(element) : element;
9+
if (!this.container) {
10+
throw new Error('mkScroll require an element or a string.');
11+
}
12+
// if (this.container.children.length !== 1) {
13+
// throw new Error('the container only require a child.');
14+
// }
15+
this.wrapper = this.container.children[0];
16+
this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
17+
this.isVertical = this.options.direction === VERTICAL;
18+
19+
this.init();
20+
}
21+
init() {
22+
this.render();
23+
}
24+
}
25+
26+
assign(Scroll.prototype, render);
27+
28+
export default Scroll;

0 commit comments

Comments
 (0)