Compare commits
25 Commits
@advdomini
...
@advdomini
| Author | SHA1 | Date | |
|---|---|---|---|
|
c8bf000479
|
|||
|
decf05dcad
|
|||
|
b019ae2344
|
|||
|
d277820f92
|
|||
|
65c54e010d
|
|||
|
36f0b0753e
|
|||
|
3ff0b19a49
|
|||
|
bc22ebdc22
|
|||
|
fad67c3603
|
|||
|
1f3e4f0a6e
|
|||
|
70b66b7ec0
|
|||
|
034b93a2d6
|
|||
|
f2170575fb
|
|||
|
1c32452e60
|
|||
|
2e18f11fcf
|
|||
|
17378965fd
|
|||
|
14d13915c9
|
|||
|
369595c2de
|
|||
|
49ce40cd7f
|
|||
|
1a8f77622b
|
|||
|
8cf1ddbaf5
|
|||
|
8f2cae3401
|
|||
|
a0074442ae
|
|||
|
791c160125
|
|||
|
095724c175
|
@@ -6,3 +6,6 @@ indent_size = 4
|
|||||||
end_of_line = lf
|
end_of_line = lf
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.{json,yml,yaml}]
|
||||||
|
indent_size = 2
|
||||||
|
|||||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -14,10 +14,6 @@ node_modules
|
|||||||
!.yarn/sdks
|
!.yarn/sdks
|
||||||
!.yarn/versions
|
!.yarn/versions
|
||||||
|
|
||||||
# ESLint
|
|
||||||
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Stylelint
|
# Stylelint
|
||||||
|
|
||||||
.stylelintcache
|
.stylelintcache
|
||||||
|
|||||||
1
.husky/pre-commit
Executable file
1
.husky/pre-commit
Executable file
@@ -0,0 +1 @@
|
|||||||
|
yarn lint-staged
|
||||||
8
.oxfmtrc.json
Normal file
8
.oxfmtrc.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"printWidth": 120,
|
||||||
|
"singleQuote": true,
|
||||||
|
"quoteProps": "consistent",
|
||||||
|
"sortImports": true,
|
||||||
|
"sortPackageJson": false,
|
||||||
|
"ignorePatterns": [".docker", ".yarn", "html"]
|
||||||
|
}
|
||||||
97
.oxlintrc.json
Normal file
97
.oxlintrc.json
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
{
|
||||||
|
"plugins": ["eslint", "unicorn", "oxc", "vue"],
|
||||||
|
"categories": {
|
||||||
|
"correctness": "error",
|
||||||
|
"suspicious": "warn",
|
||||||
|
"pedantic": "warn",
|
||||||
|
"perf": "warn",
|
||||||
|
"style": "warn",
|
||||||
|
"restriction": "warn",
|
||||||
|
"nursery": "off"
|
||||||
|
},
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"builtin": true
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"eslint/capitalized-comments": "off",
|
||||||
|
"eslint/complexity": "off",
|
||||||
|
"eslint/id-length": "off",
|
||||||
|
"eslint/init-declarations": "off",
|
||||||
|
"eslint/max-depth": "off",
|
||||||
|
"eslint/max-lines": "off",
|
||||||
|
"eslint/max-lines-per-function": "off",
|
||||||
|
"eslint/max-statements": "off",
|
||||||
|
"eslint/no-console": ["warn", { "allow": ["info", "warn", "error"] }],
|
||||||
|
"eslint/no-inline-comments": "off",
|
||||||
|
"eslint/no-irregular-whitespace": ["error", { "skipTemplates": true }],
|
||||||
|
"eslint/no-magic-numbers": "off",
|
||||||
|
"eslint/no-new": "off",
|
||||||
|
"eslint/no-shadow": "off",
|
||||||
|
"eslint/no-ternary": "off",
|
||||||
|
"eslint/no-throw-literal": "off",
|
||||||
|
"eslint/no-undefined": "off",
|
||||||
|
"eslint/no-underscore-dangle": "off",
|
||||||
|
"eslint/no-unexpected-multiline": "off",
|
||||||
|
"eslint/prefer-destructuring": [
|
||||||
|
"warn",
|
||||||
|
{
|
||||||
|
"AssignmentExpression": {
|
||||||
|
"array": false,
|
||||||
|
"object": false
|
||||||
|
},
|
||||||
|
"VariableDeclarator": {
|
||||||
|
"array": false,
|
||||||
|
"object": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"eslint/prefer-named-capture-group": "off",
|
||||||
|
"eslint/radix": "off",
|
||||||
|
"eslint/require-unicode-regexp": "off",
|
||||||
|
"eslint/sort-imports": "off",
|
||||||
|
"eslint/sort-keys": "off",
|
||||||
|
"oxc/no-async-await": "off",
|
||||||
|
"oxc/no-map-spread": "off",
|
||||||
|
"oxc/no-optional-chaining": "off",
|
||||||
|
"oxc/no-rest-spread-properties": "off",
|
||||||
|
"unicorn/filename-case": ["warn", { "cases": { "kebabCase": true, "pascalCase": true } }],
|
||||||
|
"unicorn/no-empty-file": "warn",
|
||||||
|
"unicorn/no-nested-ternary": "off",
|
||||||
|
"unicorn/no-useless-switch-case": "off",
|
||||||
|
"unicorn/prefer-global-this": "off",
|
||||||
|
"vue/define-props-destructuring": "off",
|
||||||
|
"vue/max-props": "off"
|
||||||
|
},
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": ["build-scripts/*.js"],
|
||||||
|
"rules": {
|
||||||
|
"eslint/no-console": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["src/scripts/mocks/**/*.js"],
|
||||||
|
"rules": {
|
||||||
|
"eslint/no-console": "off",
|
||||||
|
"unicorn/prefer-ternary": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["src/scripts/blocks/**/*.js"],
|
||||||
|
"rules": {
|
||||||
|
"unicorn/prefer-top-level-await": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": ["src/scripts/composables/*.js"],
|
||||||
|
"rules": {
|
||||||
|
"unicorn/filename-case": ["warn", { "cases": { "camelCase": true } }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"ignorePatterns": [".yarn"],
|
||||||
|
"options": {
|
||||||
|
"maxWarnings": 10
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
.vscode
|
|
||||||
.yarn
|
|
||||||
9
.vscode/extensions.json
vendored
9
.vscode/extensions.json
vendored
@@ -1,9 +0,0 @@
|
|||||||
{
|
|
||||||
"recommendations": [
|
|
||||||
"arcanis.vscode-zipfs",
|
|
||||||
"dbaeumer.vscode-eslint",
|
|
||||||
"EditorConfig.EditorConfig",
|
|
||||||
"esbenp.prettier-vscode",
|
|
||||||
"stylelint.vscode-stylelint"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
8
.vscode/settings.json
vendored
8
.vscode/settings.json
vendored
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"search.exclude": {
|
|
||||||
"**/.yarn": true,
|
|
||||||
"**/.pnp.*": true
|
|
||||||
},
|
|
||||||
"prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
|
|
||||||
"eslint.nodePath": ".yarn/sdks"
|
|
||||||
}
|
|
||||||
942
.yarn/releases/yarn-4.12.0.cjs
vendored
942
.yarn/releases/yarn-4.12.0.cjs
vendored
File diff suppressed because one or more lines are too long
1000
.yarn/releases/yarn-4.18.0.cjs
vendored
Executable file
1000
.yarn/releases/yarn-4.18.0.cjs
vendored
Executable file
File diff suppressed because one or more lines are too long
32
.yarn/sdks/eslint/lib/types/config-api.d.ts
vendored
32
.yarn/sdks/eslint/lib/types/config-api.d.ts
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require eslint/config
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real eslint/config your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/config`));
|
|
||||||
32
.yarn/sdks/eslint/lib/types/index.d.ts
vendored
32
.yarn/sdks/eslint/lib/types/index.d.ts
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require eslint
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real eslint your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint`));
|
|
||||||
32
.yarn/sdks/eslint/lib/types/rules.d.ts
vendored
32
.yarn/sdks/eslint/lib/types/rules.d.ts
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require eslint/rules
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real eslint/rules your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/rules`));
|
|
||||||
32
.yarn/sdks/eslint/lib/types/universal.d.ts
vendored
32
.yarn/sdks/eslint/lib/types/universal.d.ts
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require eslint/universal
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real eslint/universal your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/universal`));
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require eslint/use-at-your-own-risk
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real eslint/use-at-your-own-risk your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/use-at-your-own-risk`));
|
|
||||||
32
.yarn/sdks/eslint/lib/unsupported-api.js
vendored
32
.yarn/sdks/eslint/lib/unsupported-api.js
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require eslint/use-at-your-own-risk
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real eslint/use-at-your-own-risk your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/use-at-your-own-risk`));
|
|
||||||
31
.yarn/sdks/eslint/package.json
vendored
31
.yarn/sdks/eslint/package.json
vendored
@@ -1,31 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "eslint",
|
|
||||||
"version": "9.39.2-sdk",
|
|
||||||
"main": "./lib/api.js",
|
|
||||||
"type": "commonjs",
|
|
||||||
"bin": {
|
|
||||||
"eslint": "./bin/eslint.js"
|
|
||||||
},
|
|
||||||
"exports": {
|
|
||||||
".": {
|
|
||||||
"types": "./lib/types/index.d.ts",
|
|
||||||
"default": "./lib/api.js"
|
|
||||||
},
|
|
||||||
"./config": {
|
|
||||||
"types": "./lib/types/config-api.d.ts",
|
|
||||||
"default": "./lib/config-api.js"
|
|
||||||
},
|
|
||||||
"./package.json": "./package.json",
|
|
||||||
"./use-at-your-own-risk": {
|
|
||||||
"types": "./lib/types/use-at-your-own-risk.d.ts",
|
|
||||||
"default": "./lib/unsupported-api.js"
|
|
||||||
},
|
|
||||||
"./rules": {
|
|
||||||
"types": "./lib/types/rules.d.ts"
|
|
||||||
},
|
|
||||||
"./universal": {
|
|
||||||
"types": "./lib/types/universal.d.ts",
|
|
||||||
"default": "./lib/universal.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
2
.yarn/sdks/integrations.yml
vendored
2
.yarn/sdks/integrations.yml
vendored
@@ -1,5 +1,3 @@
|
|||||||
# This file is automatically generated by @yarnpkg/sdks.
|
# This file is automatically generated by @yarnpkg/sdks.
|
||||||
# Manual changes might be lost!
|
# Manual changes might be lost!
|
||||||
|
|
||||||
integrations:
|
|
||||||
- vscode
|
|
||||||
|
|||||||
51
.yarn/sdks/oxfmt/bin/oxfmt
vendored
Executable file
51
.yarn/sdks/oxfmt/bin/oxfmt
vendored
Executable file
@@ -0,0 +1,51 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
const {existsSync} = require(`fs`);
|
||||||
|
const {createRequire, register} = require(`module`);
|
||||||
|
const {resolve} = require(`path`);
|
||||||
|
const {pathToFileURL} = require(`url`);
|
||||||
|
|
||||||
|
const relPnpApiPath = "../../../../.pnp.cjs";
|
||||||
|
|
||||||
|
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
||||||
|
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
||||||
|
const absRequire = createRequire(absPnpApiPath);
|
||||||
|
|
||||||
|
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
||||||
|
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
||||||
|
|
||||||
|
if (existsSync(absPnpApiPath)) {
|
||||||
|
if (!process.versions.pnp) {
|
||||||
|
// Setup the environment to be able to require oxfmt
|
||||||
|
require(absPnpApiPath).setup();
|
||||||
|
if (isPnpLoaderEnabled && register) {
|
||||||
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof global[`__yarnpkg_sdk_has_setup_env__`] === `undefined`) {
|
||||||
|
Object.defineProperty(global, `__yarnpkg_sdk_has_setup_env__`, {configurable: true, value: true});
|
||||||
|
|
||||||
|
process.env.NODE_OPTIONS = process.env.NODE_OPTIONS || ``;
|
||||||
|
process.env.NODE_OPTIONS += ` -r ${absPnpApiPath}`;
|
||||||
|
if (isPnpLoaderEnabled && register) {
|
||||||
|
process.env.NODE_OPTIONS += ` --experimental-loader ${pathToFileURL(absPnpLoaderPath)}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
||||||
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
|
: exports => exports;
|
||||||
|
|
||||||
|
const moduleWrapper = exports => {
|
||||||
|
return wrapWithUserWrapper(moduleWrapperFn(exports));
|
||||||
|
};
|
||||||
|
|
||||||
|
const moduleWrapperFn = module => module;
|
||||||
|
|
||||||
|
const binPath = resolve(absRequire.resolve(`oxfmt/package.json`), `..`, `bin/oxfmt`);
|
||||||
|
absRequire(binPath);
|
||||||
|
|
||||||
|
// Defer to the real oxfmt your application uses
|
||||||
|
module.exports = moduleWrapper(absRequire(`oxfmt`));
|
||||||
@@ -16,7 +16,7 @@ const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
if (existsSync(absPnpApiPath)) {
|
||||||
if (!process.versions.pnp) {
|
if (!process.versions.pnp) {
|
||||||
// Setup the environment to be able to require eslint
|
// Setup the environment to be able to require oxfmt
|
||||||
require(absPnpApiPath).setup();
|
require(absPnpApiPath).setup();
|
||||||
if (isPnpLoaderEnabled && register) {
|
if (isPnpLoaderEnabled && register) {
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
@@ -28,5 +28,5 @@ const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
: exports => exports;
|
: exports => exports;
|
||||||
|
|
||||||
// Defer to the real eslint your application uses
|
// Defer to the real oxfmt your application uses
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint`));
|
module.exports = wrapWithUserWrapper(absRequire(`oxfmt`));
|
||||||
@@ -16,7 +16,7 @@ const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
if (existsSync(absPnpApiPath)) {
|
||||||
if (!process.versions.pnp) {
|
if (!process.versions.pnp) {
|
||||||
// Setup the environment to be able to require eslint/config
|
// Setup the environment to be able to require oxfmt
|
||||||
require(absPnpApiPath).setup();
|
require(absPnpApiPath).setup();
|
||||||
if (isPnpLoaderEnabled && register) {
|
if (isPnpLoaderEnabled && register) {
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
@@ -28,5 +28,5 @@ const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
: exports => exports;
|
: exports => exports;
|
||||||
|
|
||||||
// Defer to the real eslint/config your application uses
|
// Defer to the real oxfmt your application uses
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/config`));
|
module.exports = wrapWithUserWrapper(absRequire(`oxfmt`));
|
||||||
16
.yarn/sdks/oxfmt/package.json
vendored
Normal file
16
.yarn/sdks/oxfmt/package.json
vendored
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "oxfmt",
|
||||||
|
"version": "0.55.0-sdk",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"type": "commonjs",
|
||||||
|
"bin": {
|
||||||
|
"oxfmt": "bin/oxfmt"
|
||||||
|
},
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"default": "./dist/index.js"
|
||||||
|
},
|
||||||
|
"./package.json": "./package.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
43
.yarn/sdks/oxlint/bin/oxlint
vendored
Executable file
43
.yarn/sdks/oxlint/bin/oxlint
vendored
Executable file
@@ -0,0 +1,43 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
const {existsSync} = require(`fs`);
|
||||||
|
const {createRequire, register} = require(`module`);
|
||||||
|
const {resolve} = require(`path`);
|
||||||
|
const {pathToFileURL} = require(`url`);
|
||||||
|
|
||||||
|
const relPnpApiPath = "../../../../.pnp.cjs";
|
||||||
|
|
||||||
|
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
||||||
|
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
||||||
|
const absRequire = createRequire(absPnpApiPath);
|
||||||
|
|
||||||
|
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
||||||
|
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
||||||
|
|
||||||
|
if (existsSync(absPnpApiPath)) {
|
||||||
|
if (!process.versions.pnp) {
|
||||||
|
// Setup the environment to be able to require oxlint
|
||||||
|
require(absPnpApiPath).setup();
|
||||||
|
if (isPnpLoaderEnabled && register) {
|
||||||
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
||||||
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
|
: exports => exports;
|
||||||
|
|
||||||
|
const moduleWrapper = exports => {
|
||||||
|
return wrapWithUserWrapper(moduleWrapperFn(exports));
|
||||||
|
};
|
||||||
|
|
||||||
|
const moduleWrapperFn = module => module;
|
||||||
|
|
||||||
|
process.env.PATH += `;${resolve(__dirname, `../../oxlint-tsgolint/bin`)}`;
|
||||||
|
|
||||||
|
const binPath = resolve(absRequire.resolve(`oxlint/package.json`), `..`, `bin/oxlint`);
|
||||||
|
import(pathToFileURL(binPath));
|
||||||
|
|
||||||
|
// Defer to the real oxlint your application uses
|
||||||
|
module.exports = moduleWrapper(absRequire(`oxlint`));
|
||||||
@@ -16,7 +16,7 @@ const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
if (existsSync(absPnpApiPath)) {
|
||||||
if (!process.versions.pnp) {
|
if (!process.versions.pnp) {
|
||||||
// Setup the environment to be able to require eslint/universal
|
// Setup the environment to be able to require oxlint
|
||||||
require(absPnpApiPath).setup();
|
require(absPnpApiPath).setup();
|
||||||
if (isPnpLoaderEnabled && register) {
|
if (isPnpLoaderEnabled && register) {
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
@@ -28,5 +28,5 @@ const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
: exports => exports;
|
: exports => exports;
|
||||||
|
|
||||||
// Defer to the real eslint/universal your application uses
|
// Defer to the real oxlint your application uses
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/universal`));
|
module.exports = wrapWithUserWrapper(absRequire(`oxlint`));
|
||||||
6
.yarn/sdks/eslint/bin/eslint.js → .yarn/sdks/oxlint/dist/index.js
vendored
Executable file → Normal file
6
.yarn/sdks/eslint/bin/eslint.js → .yarn/sdks/oxlint/dist/index.js
vendored
Executable file → Normal file
@@ -16,7 +16,7 @@ const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
if (existsSync(absPnpApiPath)) {
|
||||||
if (!process.versions.pnp) {
|
if (!process.versions.pnp) {
|
||||||
// Setup the environment to be able to require eslint/bin/eslint.js
|
// Setup the environment to be able to require oxlint
|
||||||
require(absPnpApiPath).setup();
|
require(absPnpApiPath).setup();
|
||||||
if (isPnpLoaderEnabled && register) {
|
if (isPnpLoaderEnabled && register) {
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
@@ -28,5 +28,5 @@ const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
: exports => exports;
|
: exports => exports;
|
||||||
|
|
||||||
// Defer to the real eslint/bin/eslint.js your application uses
|
// Defer to the real oxlint your application uses
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`eslint/bin/eslint.js`));
|
module.exports = wrapWithUserWrapper(absRequire(`oxlint`));
|
||||||
32
.yarn/sdks/oxlint/dist/plugins-dev.d.ts
vendored
Normal file
32
.yarn/sdks/oxlint/dist/plugins-dev.d.ts
vendored
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
const {existsSync} = require(`fs`);
|
||||||
|
const {createRequire, register} = require(`module`);
|
||||||
|
const {resolve} = require(`path`);
|
||||||
|
const {pathToFileURL} = require(`url`);
|
||||||
|
|
||||||
|
const relPnpApiPath = "../../../../.pnp.cjs";
|
||||||
|
|
||||||
|
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
||||||
|
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
||||||
|
const absRequire = createRequire(absPnpApiPath);
|
||||||
|
|
||||||
|
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
||||||
|
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
||||||
|
|
||||||
|
if (existsSync(absPnpApiPath)) {
|
||||||
|
if (!process.versions.pnp) {
|
||||||
|
// Setup the environment to be able to require oxlint/plugins-dev
|
||||||
|
require(absPnpApiPath).setup();
|
||||||
|
if (isPnpLoaderEnabled && register) {
|
||||||
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
||||||
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
|
: exports => exports;
|
||||||
|
|
||||||
|
// Defer to the real oxlint/plugins-dev your application uses
|
||||||
|
module.exports = wrapWithUserWrapper(absRequire(`oxlint/plugins-dev`));
|
||||||
32
.yarn/sdks/oxlint/dist/plugins-dev.js
vendored
Normal file
32
.yarn/sdks/oxlint/dist/plugins-dev.js
vendored
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
|
||||||
|
const {existsSync} = require(`fs`);
|
||||||
|
const {createRequire, register} = require(`module`);
|
||||||
|
const {resolve} = require(`path`);
|
||||||
|
const {pathToFileURL} = require(`url`);
|
||||||
|
|
||||||
|
const relPnpApiPath = "../../../../.pnp.cjs";
|
||||||
|
|
||||||
|
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
||||||
|
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
||||||
|
const absRequire = createRequire(absPnpApiPath);
|
||||||
|
|
||||||
|
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
||||||
|
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
||||||
|
|
||||||
|
if (existsSync(absPnpApiPath)) {
|
||||||
|
if (!process.versions.pnp) {
|
||||||
|
// Setup the environment to be able to require oxlint/plugins-dev
|
||||||
|
require(absPnpApiPath).setup();
|
||||||
|
if (isPnpLoaderEnabled && register) {
|
||||||
|
register(pathToFileURL(absPnpLoaderPath));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
||||||
|
? exports => absRequire(absUserWrapperPath)(exports)
|
||||||
|
: exports => exports;
|
||||||
|
|
||||||
|
// Defer to the real oxlint/plugins-dev your application uses
|
||||||
|
module.exports = wrapWithUserWrapper(absRequire(`oxlint/plugins-dev`));
|
||||||
20
.yarn/sdks/oxlint/package.json
vendored
Normal file
20
.yarn/sdks/oxlint/package.json
vendored
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "oxlint",
|
||||||
|
"version": "1.70.0-sdk",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"type": "commonjs",
|
||||||
|
"bin": {
|
||||||
|
"oxlint": "bin/oxlint"
|
||||||
|
},
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"default": "./dist/index.js"
|
||||||
|
},
|
||||||
|
"./plugins-dev": {
|
||||||
|
"types": "./dist/plugins-dev.d.ts",
|
||||||
|
"default": "./dist/plugins-dev.js"
|
||||||
|
},
|
||||||
|
"./package.json": "./package.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
32
.yarn/sdks/prettier/bin/prettier.cjs
vendored
32
.yarn/sdks/prettier/bin/prettier.cjs
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require prettier/bin/prettier.cjs
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real prettier/bin/prettier.cjs your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`prettier/bin/prettier.cjs`));
|
|
||||||
32
.yarn/sdks/prettier/index.cjs
vendored
32
.yarn/sdks/prettier/index.cjs
vendored
@@ -1,32 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
const {existsSync} = require(`fs`);
|
|
||||||
const {createRequire, register} = require(`module`);
|
|
||||||
const {resolve} = require(`path`);
|
|
||||||
const {pathToFileURL} = require(`url`);
|
|
||||||
|
|
||||||
const relPnpApiPath = "../../../.pnp.cjs";
|
|
||||||
|
|
||||||
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
|
|
||||||
const absUserWrapperPath = resolve(__dirname, `./sdk.user.cjs`);
|
|
||||||
const absRequire = createRequire(absPnpApiPath);
|
|
||||||
|
|
||||||
const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`);
|
|
||||||
const isPnpLoaderEnabled = existsSync(absPnpLoaderPath);
|
|
||||||
|
|
||||||
if (existsSync(absPnpApiPath)) {
|
|
||||||
if (!process.versions.pnp) {
|
|
||||||
// Setup the environment to be able to require prettier
|
|
||||||
require(absPnpApiPath).setup();
|
|
||||||
if (isPnpLoaderEnabled && register) {
|
|
||||||
register(pathToFileURL(absPnpLoaderPath));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const wrapWithUserWrapper = existsSync(absUserWrapperPath)
|
|
||||||
? exports => absRequire(absUserWrapperPath)(exports)
|
|
||||||
: exports => exports;
|
|
||||||
|
|
||||||
// Defer to the real prettier your application uses
|
|
||||||
module.exports = wrapWithUserWrapper(absRequire(`prettier`));
|
|
||||||
7
.yarn/sdks/prettier/package.json
vendored
7
.yarn/sdks/prettier/package.json
vendored
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "prettier",
|
|
||||||
"version": "3.8.0-sdk",
|
|
||||||
"main": "./index.cjs",
|
|
||||||
"type": "commonjs",
|
|
||||||
"bin": "./bin/prettier.cjs"
|
|
||||||
}
|
|
||||||
@@ -1,8 +1,11 @@
|
|||||||
enableGlobalCache: false
|
enableGlobalCache: false
|
||||||
|
|
||||||
packageExtensions:
|
packageExtensions:
|
||||||
'lerna@*':
|
'@advdominion/stylelint-config@*':
|
||||||
|
dependencies:
|
||||||
|
stylelint: '*'
|
||||||
|
lerna@*:
|
||||||
dependencies:
|
dependencies:
|
||||||
ci-info: '*'
|
ci-info: '*'
|
||||||
|
|
||||||
yarnPath: .yarn/releases/yarn-4.12.0.cjs
|
yarnPath: .yarn/releases/yarn-4.18.0.cjs
|
||||||
|
|||||||
@@ -17,9 +17,11 @@ yarn lerna publish
|
|||||||
```bash
|
```bash
|
||||||
yarn set version stable
|
yarn set version stable
|
||||||
|
|
||||||
yarn install
|
|
||||||
|
|
||||||
yarn upgrade-interactive
|
yarn upgrade-interactive
|
||||||
|
|
||||||
yarn dlx @yarnpkg/sdks
|
yarn dedupe
|
||||||
|
|
||||||
|
yarn dlx @yarnpkg/sdks base
|
||||||
|
|
||||||
|
yarn install
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,9 +0,0 @@
|
|||||||
import config from '@advdominion/eslint-config';
|
|
||||||
import { defineConfig } from 'eslint/config';
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
...config,
|
|
||||||
{
|
|
||||||
ignores: ['.yarn', '.pnp.*'],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
7
lint-staged.config.js
Normal file
7
lint-staged.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export default {
|
||||||
|
'*.js': (filenames) => [
|
||||||
|
`oxlint --max-warnings 10 --fix ${filenames.join(' ')}`,
|
||||||
|
`oxfmt --write ${filenames.join(' ')}`,
|
||||||
|
],
|
||||||
|
'*.{json,md,yml}': (filenames) => [`oxfmt --write ${filenames.join(' ')}`],
|
||||||
|
};
|
||||||
14
package.json
14
package.json
@@ -1,14 +1,18 @@
|
|||||||
{
|
{
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"packageManager": "yarn@4.12.0",
|
"packageManager": "yarn@4.18.0",
|
||||||
"workspaces": [
|
"workspaces": [
|
||||||
"packages/*"
|
"packages/*"
|
||||||
],
|
],
|
||||||
|
"scripts": {
|
||||||
|
"postinstall": "husky"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@advdominion/eslint-config": "workspace:*",
|
"husky": "^9.1.7",
|
||||||
"eslint": "^9.39.2",
|
"lerna": "^10.0.0",
|
||||||
"lerna": "^9.0.3",
|
"lint-staged": "^17.3.0",
|
||||||
"prettier": "^3.8.0"
|
"oxfmt": "^0.63.0",
|
||||||
|
"oxlint": "^1.78.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,19 +1,19 @@
|
|||||||
import nunjucks from 'nunjucks';
|
import nunjucks from 'nunjucks';
|
||||||
|
|
||||||
const babelPluginNunjucks = ({types: t}) => {
|
const babelPluginNunjucks = ({ types: t }) => {
|
||||||
return {
|
return {
|
||||||
pre(state) {
|
pre(state) {
|
||||||
const options = state.opts.plugins[0].options;
|
const options = state.opts.plugins[0].options;
|
||||||
this.njkenv = new nunjucks.Environment(new nunjucks.FileSystemLoader(options.templatesFolder));
|
this.njkenv = new nunjucks.Environment(new nunjucks.FileSystemLoader(options.templatesFolder));
|
||||||
if (options.globals) {
|
if (options.globals) {
|
||||||
for (const {name, value} of options.globals) {
|
for (const { name, value } of options.globals) {
|
||||||
this.njkenv.addGlobal(name, value);
|
this.njkenv.addGlobal(name, value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
visitor: {
|
visitor: {
|
||||||
TaggedTemplateExpression(path) {
|
TaggedTemplateExpression(path) {
|
||||||
if (path.get('tag').isIdentifier({name: 'njk'})) {
|
if (path.get('tag').isIdentifier({ name: 'njk' })) {
|
||||||
const render = this.njkenv.renderString(path.node.quasi.quasis[0].value.raw);
|
const render = this.njkenv.renderString(path.node.quasi.quasis[0].value.raw);
|
||||||
path.replaceWith(t.stringLiteral(render));
|
path.replaceWith(t.stringLiteral(render));
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/babel-plugin-nunjucks",
|
"name": "@advdominion/babel-plugin-nunjucks",
|
||||||
"version": "3.1.0",
|
"version": "4.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@babel/core": "^7.0.0",
|
"@babel/core": "^8.0.0",
|
||||||
"nunjucks": "^3.0.0"
|
"nunjucks": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
25
packages/css-var/README.md
Normal file
25
packages/css-var/README.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# css-var
|
||||||
|
|
||||||
|
Получение значений CSS-переменных в JS
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--z-index: 100;
|
||||||
|
--height: 100px;
|
||||||
|
--duration-ms: 100ms;
|
||||||
|
--duration-s: 100s;
|
||||||
|
--easing: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { cssVar } from '@advdominion/css-var';
|
||||||
|
|
||||||
|
cssVar('--z-index'); // '1' (String)
|
||||||
|
cssVar('--height'); // '100px' (String)
|
||||||
|
cssVar('--duration-ms'); // 100 (Number)
|
||||||
|
cssVar('--duration-s'); // 100 (Number)
|
||||||
|
cssVar('--easing'); // cubic-bezier(0.4, 0, 0.2, 1) (String)
|
||||||
|
```
|
||||||
9
packages/css-var/index.js
Normal file
9
packages/css-var/index.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
export const cssVar = (name, element = document.documentElement) => {
|
||||||
|
const value = window.getComputedStyle(element).getPropertyValue(name);
|
||||||
|
const durationRegExp = /(^[\d.]+)(ms|s)$/;
|
||||||
|
if (durationRegExp.test(value)) {
|
||||||
|
const [, numericValue, unit] = durationRegExp.exec(value);
|
||||||
|
return unit === 's' ? numericValue * 1000 : Number(numericValue);
|
||||||
|
}
|
||||||
|
return value;
|
||||||
|
};
|
||||||
14
packages/css-var/package.json
Normal file
14
packages/css-var/package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/css-var",
|
||||||
|
"version": "1.0.1",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
# Конфигурация для ESLint
|
|
||||||
|
|
||||||
Включает в себя:
|
|
||||||
|
|
||||||
- [js/recommended](https://eslint.org/docs/latest/use/configure/configuration-files#using-predefined-configurations) из ESLint
|
|
||||||
- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)
|
|
||||||
- [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)
|
|
||||||
- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn)
|
|
||||||
- [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)
|
|
||||||
- [globals](https://github.com/sindresorhus/globals) (`browser` и `nodeBuiltin`)
|
|
||||||
|
|
||||||
## Использование
|
|
||||||
|
|
||||||
### Требования
|
|
||||||
|
|
||||||
- [ESLint](https://eslint.org/)
|
|
||||||
|
|
||||||
### Подключание
|
|
||||||
|
|
||||||
```js
|
|
||||||
import config from '@advdominion/eslint-config';
|
|
||||||
import { defineConfig } from 'eslint/config';
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
...config,
|
|
||||||
// Дополнительная конфигурация проекта
|
|
||||||
]);
|
|
||||||
```
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
/* eslint-disable unicorn/no-useless-spread */
|
|
||||||
|
|
||||||
import js from '@eslint/js';
|
|
||||||
import eslintConfigPrettier from 'eslint-config-prettier';
|
|
||||||
import simpleImportSort from 'eslint-plugin-simple-import-sort';
|
|
||||||
import eslintPluginUnicorn from 'eslint-plugin-unicorn';
|
|
||||||
import pluginVue from 'eslint-plugin-vue';
|
|
||||||
import globals from 'globals';
|
|
||||||
|
|
||||||
const config = [
|
|
||||||
{
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 'latest',
|
|
||||||
sourceType: 'module',
|
|
||||||
globals: {
|
|
||||||
...globals.browser,
|
|
||||||
...globals.nodeBuiltin,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
js.configs.recommended,
|
|
||||||
{
|
|
||||||
rules: {
|
|
||||||
...{
|
|
||||||
'array-callback-return': 'error',
|
|
||||||
'no-await-in-loop': 'warn',
|
|
||||||
'no-duplicate-imports': 'warn',
|
|
||||||
'no-promise-executor-return': 'error',
|
|
||||||
'no-self-compare': 'error',
|
|
||||||
'no-template-curly-in-string': 'warn',
|
|
||||||
'no-unassigned-vars': 'warn',
|
|
||||||
'no-unmodified-loop-condition': 'error',
|
|
||||||
'no-unreachable-loop': 'error',
|
|
||||||
'no-use-before-define': 'error',
|
|
||||||
'no-useless-assignment': 'warn',
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
'dot-notation': 'warn',
|
|
||||||
'eqeqeq': 'error',
|
|
||||||
'no-implicit-coercion': 'warn',
|
|
||||||
'no-negated-condition': 'warn',
|
|
||||||
'no-useless-concat': 'warn',
|
|
||||||
'object-shorthand': 'warn',
|
|
||||||
'func-style': 'error',
|
|
||||||
'no-console': ['warn', { allow: ['warn', 'error'] }],
|
|
||||||
'no-param-reassign': 'error',
|
|
||||||
'no-var': 'error',
|
|
||||||
'one-var': ['warn', 'never'],
|
|
||||||
'prefer-const': 'warn',
|
|
||||||
'prefer-template': 'warn',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
plugins: {
|
|
||||||
'simple-import-sort': simpleImportSort,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
'simple-import-sort/imports': 'warn',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
plugins: {
|
|
||||||
unicorn: eslintPluginUnicorn,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
...Object.fromEntries(
|
|
||||||
Object.entries(eslintPluginUnicorn.configs.recommended.rules).map(([rule, level]) => [
|
|
||||||
rule,
|
|
||||||
level === 'off' ? 'off' : 'warn',
|
|
||||||
]),
|
|
||||||
),
|
|
||||||
'unicorn/better-regex': 'warn',
|
|
||||||
'unicorn/filename-case': ['warn', { cases: { kebabCase: true, pascalCase: true } }],
|
|
||||||
'unicorn/prefer-global-this': 'off',
|
|
||||||
'unicorn/prefer-import-meta-properties': 'warn',
|
|
||||||
'unicorn/prefer-top-level-await': 'off',
|
|
||||||
'unicorn/prevent-abbreviations': 'off',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
...pluginVue.configs['flat/recommended'],
|
|
||||||
{
|
|
||||||
rules: {
|
|
||||||
...{
|
|
||||||
'vue/no-v-html': 'off',
|
|
||||||
'vue/one-component-per-file': 'off',
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
'vue/component-name-in-template-casing': 'warn',
|
|
||||||
'vue/component-options-name-casing': 'warn',
|
|
||||||
'vue/custom-event-name-casing': 'warn',
|
|
||||||
'vue/match-component-file-name': ['warn', { extensions: ['vue'], shouldMatchCase: true }],
|
|
||||||
'vue/match-component-import-name': 'warn',
|
|
||||||
'vue/no-boolean-default': 'warn',
|
|
||||||
'vue/no-potential-component-option-typo': 'warn',
|
|
||||||
'vue/no-useless-mustaches': 'warn',
|
|
||||||
'vue/no-useless-v-bind': 'warn',
|
|
||||||
'vue/require-direct-export': 'warn',
|
|
||||||
'vue/require-name-property': 'warn',
|
|
||||||
'vue/v-for-delimiter-style': 'warn',
|
|
||||||
'vue/v-on-handler-style': ['warn', 'inline'],
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
'vue/dot-notation': 'warn',
|
|
||||||
'vue/eqeqeq': 'error',
|
|
||||||
'vue/no-console': ['warn', { allow: ['warn', 'error'] }],
|
|
||||||
'vue/no-constant-condition': 'error',
|
|
||||||
'vue/no-empty-pattern': 'error',
|
|
||||||
'vue/no-implicit-coercion': 'warn',
|
|
||||||
'vue/no-irregular-whitespace': 'error',
|
|
||||||
'vue/no-loss-of-precision': 'error',
|
|
||||||
'vue/no-negated-condition': 'warn',
|
|
||||||
'vue/no-sparse-arrays': 'error',
|
|
||||||
'vue/no-useless-concat': 'warn',
|
|
||||||
'vue/object-shorthand': 'warn',
|
|
||||||
'vue/prefer-template': 'warn',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
files: ['**/*.vue'],
|
|
||||||
rules: {
|
|
||||||
'no-useless-assignment': 'off', // ESLint не умеет работать с этим правилом внутри <template>
|
|
||||||
},
|
|
||||||
},
|
|
||||||
eslintConfigPrettier,
|
|
||||||
];
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@advdominion/eslint-config",
|
|
||||||
"version": "1.1.3",
|
|
||||||
"type": "module",
|
|
||||||
"main": "index.js",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
|
||||||
},
|
|
||||||
"license": "MIT",
|
|
||||||
"publishConfig": {
|
|
||||||
"access": "public"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@eslint/js": "^9.39.2",
|
|
||||||
"eslint-config-prettier": "^10.1.8",
|
|
||||||
"eslint-plugin-simple-import-sort": "^12.1.1",
|
|
||||||
"eslint-plugin-unicorn": "^62.0.0",
|
|
||||||
"eslint-plugin-vue": "^10.7.0",
|
|
||||||
"globals": "^17.0.0",
|
|
||||||
"vue-eslint-parser": "^10.2.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"eslint": "^9.39.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
98
packages/lightbox-gallery/README.md
Normal file
98
packages/lightbox-gallery/README.md
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
# lightbox-gallery
|
||||||
|
|
||||||
|
## Требования
|
||||||
|
|
||||||
|
- [Swiper](https://github.com/nolimits4web/swiper)
|
||||||
|
|
||||||
|
## Подключение и настройка
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="list">
|
||||||
|
<a href="/example.jpg">...</a>
|
||||||
|
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">...</a>
|
||||||
|
<a href="https://vkvideo.ru/video-101556650_456239825">...</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Стили
|
||||||
|
|
||||||
|
```scss
|
||||||
|
@use '@advdominion/lightbox-gallery/styles.css';
|
||||||
|
```
|
||||||
|
|
||||||
|
### Минимальные настройки
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { gallery } from '@advdominion/lightbox-gallery';
|
||||||
|
|
||||||
|
gallery(document.querySelector('#list'), {
|
||||||
|
icons: {
|
||||||
|
close: `/icons.svg#close`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Все настройки
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { gallery } from '@advdominion/lightbox-gallery';
|
||||||
|
|
||||||
|
gallery(document.querySelector('#list'), {
|
||||||
|
single: false,
|
||||||
|
swiper: {
|
||||||
|
speed: 300,
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination',
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
prevEl: '.swiper-button-prev',
|
||||||
|
nextEl: '.swiper-button-next',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pagination: `
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
`,
|
||||||
|
navigation: `
|
||||||
|
<div class="swiper-button-prev"></div>
|
||||||
|
<div class="swiper-button-next"></div>
|
||||||
|
`,
|
||||||
|
animation: {
|
||||||
|
show: {
|
||||||
|
duration: 500,
|
||||||
|
easing: 'linear',
|
||||||
|
},
|
||||||
|
hide: {
|
||||||
|
duration: 500,
|
||||||
|
easing: 'linear',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icons: {
|
||||||
|
close: `/icons.svg#close`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Одиночный элемент
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { gallery } from '@advdominion/lightbox-gallery';
|
||||||
|
|
||||||
|
gallery(document.querySelector('#list > a:first-child'), {
|
||||||
|
single: true,
|
||||||
|
animation: {
|
||||||
|
show: {
|
||||||
|
duration: 500,
|
||||||
|
easing: 'linear',
|
||||||
|
},
|
||||||
|
hide: {
|
||||||
|
duration: 500,
|
||||||
|
easing: 'linear',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
icons: {
|
||||||
|
close: `/icons.svg#close`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
424
packages/lightbox-gallery/index.js
Normal file
424
packages/lightbox-gallery/index.js
Normal file
@@ -0,0 +1,424 @@
|
|||||||
|
/* globals GalleryYTPlayer, YT, GalleryVKPlayer, VK */
|
||||||
|
|
||||||
|
import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
|
||||||
|
|
||||||
|
const getYTPlayer = () => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = 'https://www.youtube.com/player_api';
|
||||||
|
script.async = true;
|
||||||
|
document.body.append(script);
|
||||||
|
},
|
||||||
|
getVKPlayer = () => {
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.src = 'https://vk.com/js/api/videoplayer.js';
|
||||||
|
script.async = true;
|
||||||
|
document.body.append(script);
|
||||||
|
},
|
||||||
|
playVideo = (slide) => {
|
||||||
|
const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
|
||||||
|
vk = slide.querySelector('.advdominion-lg__video_vk'),
|
||||||
|
rt = slide.querySelector('.advdominion-lg__video_rt');
|
||||||
|
|
||||||
|
if (youtube) {
|
||||||
|
if (slide.YTPlayer) {
|
||||||
|
if (slide.classList.contains('swiper-slide-active')) {
|
||||||
|
slide.YTPlayer.playVideo();
|
||||||
|
}
|
||||||
|
} else if (window.YT) {
|
||||||
|
if (GalleryYTPlayer.state) {
|
||||||
|
slide.YTPlayer = new YT.Player(youtube, {
|
||||||
|
videoId: youtube.dataset.id,
|
||||||
|
events: {
|
||||||
|
onReady(event) {
|
||||||
|
if (slide.classList.contains('swiper-slide-active')) {
|
||||||
|
event.target.playVideo();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
GalleryYTPlayer.addListener(() => {
|
||||||
|
playVideo(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
getYTPlayer();
|
||||||
|
GalleryYTPlayer.addListener(() => {
|
||||||
|
playVideo(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (vk) {
|
||||||
|
if (slide.VKPlayer) {
|
||||||
|
if (slide.classList.contains('swiper-slide-active')) {
|
||||||
|
slide.VKPlayer.play();
|
||||||
|
}
|
||||||
|
} else if (window.VK?.VideoPlayer) {
|
||||||
|
if (GalleryVKPlayer.state) {
|
||||||
|
slide.VKPlayer = VK.VideoPlayer(vk);
|
||||||
|
slide.VKPlayer.on('inited', () => {
|
||||||
|
if (slide.classList.contains('swiper-slide-active')) {
|
||||||
|
slide.VKPlayer.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
GalleryVKPlayer.addListener(() => {
|
||||||
|
playVideo(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
getVKPlayer();
|
||||||
|
GalleryVKPlayer.addListener(() => {
|
||||||
|
playVideo(slide);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if (rt) {
|
||||||
|
const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1],
|
||||||
|
checkInterval = setInterval(() => {
|
||||||
|
if (window.GalleryRTPlayer) {
|
||||||
|
if (window.GalleryRTPlayer.has(videoId)) {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
if (slide.classList.contains('swiper-slide-active')) {
|
||||||
|
rt.contentWindow.postMessage(
|
||||||
|
JSON.stringify({
|
||||||
|
type: 'player:play',
|
||||||
|
data: {},
|
||||||
|
}),
|
||||||
|
'*',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
slide.checkInterval = checkInterval;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pauseVideo = (slide) => {
|
||||||
|
const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
|
||||||
|
vk = slide.querySelector('.advdominion-lg__video_vk'),
|
||||||
|
rt = slide.querySelector('.advdominion-lg__video_rt');
|
||||||
|
|
||||||
|
if (youtube && slide.YTPlayer) {
|
||||||
|
slide.YTPlayer.pauseVideo();
|
||||||
|
} else if (vk && slide.VKPlayer) {
|
||||||
|
slide.VKPlayer.pause();
|
||||||
|
} else if (rt) {
|
||||||
|
rt.contentWindow.postMessage(
|
||||||
|
JSON.stringify({
|
||||||
|
type: 'player:pause',
|
||||||
|
data: {},
|
||||||
|
}),
|
||||||
|
'*',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setVideoSize = (gallery) => {
|
||||||
|
const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
|
||||||
|
items[0].style.cssText = '';
|
||||||
|
let height = (items[0].getBoundingClientRect().width * 9) / 16,
|
||||||
|
width = '';
|
||||||
|
if (height > items[0].getBoundingClientRect().height) {
|
||||||
|
height = items[0].getBoundingClientRect().height;
|
||||||
|
width = `${(height * 16) / 9}px`;
|
||||||
|
}
|
||||||
|
for (const item of items) {
|
||||||
|
item.style.cssText = `
|
||||||
|
height: ${height}px;
|
||||||
|
width: ${width};
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide = async (duration = 500, easing = 'linear') => {
|
||||||
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
}).finished;
|
||||||
|
|
||||||
|
// Очищаем интервалы проверки для видео
|
||||||
|
for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) {
|
||||||
|
if (slide.checkInterval) {
|
||||||
|
clearInterval(slide.checkInterval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
gallery.remove();
|
||||||
|
delete window.GalleryRTPlayer;
|
||||||
|
|
||||||
|
document.body.style.cssText = `
|
||||||
|
overflow: '';
|
||||||
|
margin-right: '';
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
show = async (duration = 500, easing = 'linear') => {
|
||||||
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
document.body.style.cssText = `
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: ${getScrollbarWidth()}px
|
||||||
|
`;
|
||||||
|
|
||||||
|
await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
}).finished;
|
||||||
|
},
|
||||||
|
init = async (items = [], options = {}, index = 0) => {
|
||||||
|
const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
|
||||||
|
import('swiper'),
|
||||||
|
import('swiper/modules'),
|
||||||
|
]),
|
||||||
|
isVideoInGallery = {
|
||||||
|
yt: false,
|
||||||
|
vk: false,
|
||||||
|
rt: false,
|
||||||
|
};
|
||||||
|
items = items.map(({ url: item, caption }) => {
|
||||||
|
if (/youtube\.com\/watch\?v=/.test(item)) {
|
||||||
|
isVideoInGallery.yt = true;
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||||
|
<div class="advdominion-lg__video-wrapper">
|
||||||
|
<div
|
||||||
|
class="advdominion-lg__video advdominion-lg__video_youtube"
|
||||||
|
data-id="${/v=([\w-]+)/i.exec(item)[1]}">
|
||||||
|
Загрузка YouTube-плеера...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
|
||||||
|
isVideoInGallery.vk = true;
|
||||||
|
const videoId = /(?:vkvideo\.ru|vk\.com)\/video(-?\d+)_(\d+)/.exec(item);
|
||||||
|
if (videoId === null) {
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||||
|
<div class="advdominion-lg__video-wrapper">
|
||||||
|
<div class="advdominion-lg__video advdominion-lg__video_vk">
|
||||||
|
Ошибка при загрузке VK-плеера
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||||
|
<div class="advdominion-lg__video-wrapper">
|
||||||
|
<iframe
|
||||||
|
class="advdominion-lg__video advdominion-lg__video_vk"
|
||||||
|
src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1"
|
||||||
|
allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (/rutube\.ru/.test(item)) {
|
||||||
|
isVideoInGallery.rt = true;
|
||||||
|
const videoId = /video\/(\w+)/.exec(item);
|
||||||
|
if (videoId === null) {
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||||
|
<div class="advdominion-lg__video-wrapper">
|
||||||
|
<div class="advdominion-lg__video advdominion-lg__video_rt">
|
||||||
|
Ошибка при загрузке RuTube-плеера
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
|
||||||
|
<div class="advdominion-lg__video-wrapper">
|
||||||
|
<iframe
|
||||||
|
class="advdominion-lg__video advdominion-lg__video_rt"
|
||||||
|
src="https://rutube.ru/play/embed/${videoId[1]}"
|
||||||
|
allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
return `
|
||||||
|
<div class="advdominion-lg__item swiper-slide">
|
||||||
|
<img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
|
||||||
|
${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
|
||||||
|
window.GalleryYTPlayer = {
|
||||||
|
state: false,
|
||||||
|
get init() {
|
||||||
|
return this.state;
|
||||||
|
},
|
||||||
|
set init(val) {
|
||||||
|
this.state = val;
|
||||||
|
for (const i of this.callback) {
|
||||||
|
i(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
callback: [],
|
||||||
|
addListener(callback) {
|
||||||
|
this.callback.push(callback);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onYouTubeIframeAPIReady = () => {
|
||||||
|
window.GalleryYTPlayer.init = true;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
|
||||||
|
window.GalleryVKPlayer = {
|
||||||
|
state: false,
|
||||||
|
get init() {
|
||||||
|
return this.state;
|
||||||
|
},
|
||||||
|
set init(val) {
|
||||||
|
this.state = val;
|
||||||
|
for (const i of this.callback) {
|
||||||
|
i(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
callback: [],
|
||||||
|
addListener(callback) {
|
||||||
|
this.callback.push(callback);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkInterval = setInterval(() => {
|
||||||
|
if (window.VK?.VideoPlayer) {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
window.GalleryVKPlayer.init = true;
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isVideoInGallery.rt) {
|
||||||
|
window.GalleryRTPlayer = new Set();
|
||||||
|
window.addEventListener('message', (event) => {
|
||||||
|
if (event.origin.includes('rutube.ru') && typeof event.data === 'string') {
|
||||||
|
const message = JSON.parse(event.data);
|
||||||
|
if (message.type === 'player:ready') {
|
||||||
|
window.GalleryRTPlayer.add(message.data.videoId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.insertAdjacentHTML(
|
||||||
|
'beforeend',
|
||||||
|
`
|
||||||
|
<div class="advdominion-lg">
|
||||||
|
<button class="advdominion-lg__close" type="button">
|
||||||
|
<svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
|
||||||
|
</button>
|
||||||
|
<div class="advdominion-lg__container swiper">
|
||||||
|
<div class="advdominion-lg__wrapper swiper-wrapper">
|
||||||
|
${items.join('')}
|
||||||
|
</div>
|
||||||
|
${options.pagination || ''}
|
||||||
|
${options.navigation || ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
);
|
||||||
|
|
||||||
|
const gallery = document.body.querySelector('.advdominion-lg');
|
||||||
|
|
||||||
|
gallery.querySelector('.advdominion-lg__container').style.cssText = `
|
||||||
|
visibility: hidden;
|
||||||
|
`;
|
||||||
|
|
||||||
|
await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
|
||||||
|
|
||||||
|
const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
|
||||||
|
init: false,
|
||||||
|
initialSlide: index,
|
||||||
|
...options.swiper,
|
||||||
|
modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.on('init', function init() {
|
||||||
|
gallery.querySelector('.advdominion-lg__container').style.cssText = `
|
||||||
|
visibility: '';
|
||||||
|
`;
|
||||||
|
|
||||||
|
if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
|
||||||
|
playVideo(this.slides[this.activeIndex]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
|
||||||
|
setVideoSize(gallery);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.on('slideChange', function init() {
|
||||||
|
setTimeout(() => {
|
||||||
|
for (const [index, slide] of Object.entries(this.slides)) {
|
||||||
|
if (slide.classList.contains('advdominion-lg__item_video')) {
|
||||||
|
if (Number(index) === this.activeIndex) {
|
||||||
|
playVideo(slide);
|
||||||
|
} else {
|
||||||
|
pauseVideo(slide);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.on('resize', () => {
|
||||||
|
if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
|
||||||
|
setVideoSize(gallery);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
swiper.init();
|
||||||
|
|
||||||
|
const closeHandler = () => {
|
||||||
|
hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
|
||||||
|
},
|
||||||
|
keydownHandler = (e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
closeHandler();
|
||||||
|
document.body.removeEventListener('keydown', keydownHandler);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
|
||||||
|
document.body.addEventListener('keydown', keydownHandler);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const gallery = (container, options) => {
|
||||||
|
const items = [];
|
||||||
|
if (options.single) {
|
||||||
|
const element = container.children[0];
|
||||||
|
items.push({
|
||||||
|
url: element.href,
|
||||||
|
caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
|
||||||
|
});
|
||||||
|
container.addEventListener('click', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
init(items, options);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
for (const [index, element] of [...container.children].entries()) {
|
||||||
|
items.push({
|
||||||
|
url: element.href,
|
||||||
|
caption: document.querySelector(element.dataset.galleryCaption)?.textContent,
|
||||||
|
});
|
||||||
|
element.addEventListener('click', (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
init(items, options, index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
20
packages/lightbox-gallery/package.json
Normal file
20
packages/lightbox-gallery/package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/lightbox-gallery",
|
||||||
|
"version": "5.0.1",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@advdominion/get-scrollbar-width": "^2.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"swiper": "^14.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
75
packages/lightbox-gallery/styles.css
Normal file
75
packages/lightbox-gallery/styles.css
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
.advdominion-lg {
|
||||||
|
background-color: white;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__close-icon {
|
||||||
|
fill: currentcolor;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__container.swiper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__wrapper.swiper-wrapper {
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__item.swiper-slide {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__item_video.swiper-slide {
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__image {
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video {
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.advdominion-lg__video {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video_youtube {
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__video_vk {
|
||||||
|
}
|
||||||
|
|
||||||
|
.advdominion-lg__caption {
|
||||||
|
}
|
||||||
@@ -20,7 +20,7 @@ await scrollTo(document.querySelector('#example'), 10);
|
|||||||
## Параметры
|
## Параметры
|
||||||
|
|
||||||
| Параметр | Тип | По умолчанию | Описание |
|
| Параметр | Тип | По умолчанию | Описание |
|
||||||
| :--- | :--- | :--- | :--- |
|
| :------------- | :------------ | :----------- | :------------------------------------------------------------------------- |
|
||||||
| **$el** | `HTMLElement` | — | DOM-элемент, к которому нужно прокрутить страницу |
|
| **$el** | `HTMLElement` | — | DOM-элемент, к которому нужно прокрутить страницу |
|
||||||
| **offset** | `number` | `0` | Величина отступа сверху от целевого элемента |
|
| **offset** | `number` | `0` | Величина отступа сверху от целевого элемента |
|
||||||
| **offsetInPx** | `boolean` | `false` | Тип отступа: `true` — в пикселях, `false` — в процентах от высоты вьюпорта |
|
| **offsetInPx** | `boolean` | `false` | Тип отступа: `true` — в пикселях, `false` — в процентах от высоты вьюпорта |
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@advdominion/scroll-to",
|
"name": "@advdominion/scroll-to",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|||||||
22
packages/stylelint-config/README.md
Normal file
22
packages/stylelint-config/README.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# Конфигурация для Stylelint
|
||||||
|
|
||||||
|
Включает в себя:
|
||||||
|
|
||||||
|
- [stylelint-config-standard-scss](https://github.com/stylelint-scss/stylelint-config-standard-scss)
|
||||||
|
- [stylelint-order](https://github.com/hudochenkov/stylelint-order)
|
||||||
|
- Проверку кода тега `<style>` в файлах `.vue`
|
||||||
|
|
||||||
|
## Использование
|
||||||
|
|
||||||
|
### Требования
|
||||||
|
|
||||||
|
- [Stylelint](https://stylelint.io/) ^10.0.0
|
||||||
|
|
||||||
|
### Подключание
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
extends: ['@advdominion/stylelint-config'],
|
||||||
|
// Дополнительная конфигурация проекта
|
||||||
|
};
|
||||||
|
```
|
||||||
55
packages/stylelint-config/index.js
Normal file
55
packages/stylelint-config/index.js
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
/* eslint-disable unicorn/no-null */
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: ['stylelint-config-standard-scss'],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['**/*.vue'],
|
||||||
|
customSyntax: 'postcss-html',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
plugins: ['stylelint-order'],
|
||||||
|
rules: {
|
||||||
|
'block-no-empty': null,
|
||||||
|
'no-invalid-double-slash-comments': null,
|
||||||
|
'no-invalid-position-declaration': [true, { ignoreAtRules: ['media'] }],
|
||||||
|
'property-disallowed-list': [
|
||||||
|
'animation',
|
||||||
|
'background',
|
||||||
|
'border',
|
||||||
|
'flex',
|
||||||
|
'font',
|
||||||
|
'grid',
|
||||||
|
'margin',
|
||||||
|
'padding',
|
||||||
|
'transition',
|
||||||
|
],
|
||||||
|
'color-hex-length': 'long',
|
||||||
|
'font-weight-notation': 'named-where-possible',
|
||||||
|
'container-name-pattern': null,
|
||||||
|
'custom-media-pattern': null,
|
||||||
|
'custom-property-pattern': null,
|
||||||
|
'keyframes-name-pattern': null,
|
||||||
|
'layer-name-pattern': null,
|
||||||
|
'selector-class-pattern': null,
|
||||||
|
'selector-id-pattern': null,
|
||||||
|
'declaration-block-no-redundant-longhand-properties': null,
|
||||||
|
'scss/double-slash-comment-empty-line-before': null,
|
||||||
|
'order/order': [
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'use',
|
||||||
|
},
|
||||||
|
'dollar-variables',
|
||||||
|
'custom-properties',
|
||||||
|
'declarations',
|
||||||
|
{
|
||||||
|
type: 'at-rule',
|
||||||
|
name: 'include',
|
||||||
|
},
|
||||||
|
'at-rules',
|
||||||
|
'rules',
|
||||||
|
],
|
||||||
|
'order/properties-alphabetical-order': true,
|
||||||
|
},
|
||||||
|
};
|
||||||
23
packages/stylelint-config/package.json
Normal file
23
packages/stylelint-config/package.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/stylelint-config",
|
||||||
|
"version": "1.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"postcss": "^8.5.6",
|
||||||
|
"postcss-html": "^1.8.1",
|
||||||
|
"stylelint-config-standard-scss": "^17.0.0",
|
||||||
|
"stylelint-order": "^7.0.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"stylelint": "^17.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
58
packages/tooltip/CHANGELOG.md
Normal file
58
packages/tooltip/CHANGELOG.md
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
## v7.0.1
|
||||||
|
|
||||||
|
- Исправление работы анимации
|
||||||
|
|
||||||
|
## v7.0.0
|
||||||
|
|
||||||
|
- Изменено значение по умолчанию для параметра `trigger`
|
||||||
|
- Рефакторинг кода и устранение ошибок
|
||||||
|
|
||||||
|
## v6.0.0
|
||||||
|
|
||||||
|
- Корректная работа сообытий mouseenter/mouseleave на тач-устройствах
|
||||||
|
- Предовтращаем лишние показы всплывающей подсказки
|
||||||
|
|
||||||
|
## v5.0.0
|
||||||
|
|
||||||
|
- Регистрируем сообытия mouseenter/mouseleave на тач-устройствах
|
||||||
|
|
||||||
|
## v4.1.1
|
||||||
|
|
||||||
|
- Исправление зависаний (в некоторых случаях) всплывающих подсказок
|
||||||
|
|
||||||
|
## v4.1.0
|
||||||
|
|
||||||
|
- Отключаем события mouseenter/mouseleave для toch-устройств
|
||||||
|
|
||||||
|
## v4.0.0
|
||||||
|
|
||||||
|
- Переработана логика инициализации и обновления тултипа
|
||||||
|
- Добавлены новые триггеры: `focus`, `blur`
|
||||||
|
- Опция `hideOnClick` теперь поддерживает значения: `true`, `'all'`, `'toggle'`
|
||||||
|
- Исправлены ошибки с позиционированием, анимацией и стилями
|
||||||
|
- Оптимизировано управление событиями и очистка ресурсов
|
||||||
|
|
||||||
|
## v3.0.1
|
||||||
|
|
||||||
|
- Исправлена работа событий
|
||||||
|
|
||||||
|
## v3.0.0
|
||||||
|
|
||||||
|
- Исправлено название опции с `virtialReference` на `virtualReference`
|
||||||
|
|
||||||
|
## v2.1.0
|
||||||
|
|
||||||
|
- Для опции `appendTo` добавлена возможность указать значение `parent`
|
||||||
|
|
||||||
|
## v2.0.0
|
||||||
|
|
||||||
|
- К `_tooltip.$tooltip` добавлено свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`
|
||||||
|
- Для функций `show/hide` добавлен параметр `immediately` для мнгновенного открытия/закрытия всплывающей подсказки (`_tooltip.hide({ immediately: true })`)
|
||||||
|
- Добавлена опция `shiftPadding` для добавления отступов от краёв области видимости по осям x/y
|
||||||
|
- Добавлена опция `animation` для кастомизации анимации при открытии/закрытии всплывающей подсказки (для этого всё внутри `.tooltip` было обёрнуто в `.tooltip__root` и анимация применяется именно к этому блоку)
|
||||||
|
- Опция `_tooltip._options` переименована в `_tooltip.options`
|
||||||
|
- Оптимизция кода, исправление ошибок
|
||||||
|
- Доработки по README.md
|
||||||
|
- Доработки по .npmignore
|
||||||
|
|
||||||
|
## v1.0.0
|
||||||
177
packages/tooltip/README.md
Normal file
177
packages/tooltip/README.md
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
# tooltip
|
||||||
|
|
||||||
|
## Требования
|
||||||
|
|
||||||
|
- [Floating UI](https://floating-ui.com)
|
||||||
|
|
||||||
|
## Подключение и настройка
|
||||||
|
|
||||||
|
### HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button type="button">Кнопка</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
### JS
|
||||||
|
|
||||||
|
#### Минимальные настройки
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createTooltip } from '@advdominion/tooltip';
|
||||||
|
|
||||||
|
createTooltip(document.querySelector('button'), 'Подсказка');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Все настройки со значениями по умолчанию
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { createTooltip } from '@advdominion/tooltip';
|
||||||
|
|
||||||
|
createTooltip(document.querySelector('button'), 'Подсказка', {
|
||||||
|
animation: [
|
||||||
|
[{ opacity: 0 }, { opacity: 1 }],
|
||||||
|
[{ opacity: 1 }, { opacity: 0 }],
|
||||||
|
],
|
||||||
|
appendTo: document.body,
|
||||||
|
arrow: true,
|
||||||
|
delay: [0, 0],
|
||||||
|
duration: [0, 0],
|
||||||
|
easing: ['linear', 'linear'],
|
||||||
|
hideOnClick: true,
|
||||||
|
interactive: true,
|
||||||
|
offset: [0, 8],
|
||||||
|
placement: 'top',
|
||||||
|
shiftPadding: [8, 0],
|
||||||
|
theme: 'light',
|
||||||
|
trigger: 'mouseenter click',
|
||||||
|
virtualReference: undefined,
|
||||||
|
zIndex: '',
|
||||||
|
// Callback-функции, по умолчанию не заданы
|
||||||
|
onCreate(instance) {},
|
||||||
|
onMount(instance) {},
|
||||||
|
onShow(instance) {},
|
||||||
|
onShown(instance) {},
|
||||||
|
onHide(instance) {},
|
||||||
|
onHidden(instance) {},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### hideOnClick
|
||||||
|
|
||||||
|
- `true` (по умолчанию) — всплывающая подсказка скрывается при клике по любому элементу на странице (**кроме** самой всплывающей подсказки).
|
||||||
|
- `'all'` — всплывающая подсказка скрывается при клике по любому элементу на странице (**включая** саму всплывающую подсказку).
|
||||||
|
- `'toggle'` — всплывающая подсказка скрывается только при клике по элементу, который её вызывает.
|
||||||
|
|
||||||
|
##### virtualReference
|
||||||
|
|
||||||
|
Настройка используется для кастомного позиционирования, ожидает объект с методом `getBoundingClientRect`.
|
||||||
|
|
||||||
|
Например, позиционирование всплывающей подсказки относительно виртуального элемента размером 100×50, который располагается в левой верхней точке экрана:
|
||||||
|
|
||||||
|
```js
|
||||||
|
createTooltip(document.querySelector('button'), 'Подсказка', {
|
||||||
|
virtualReference: {
|
||||||
|
getBoundingClientRect() {
|
||||||
|
return {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
bottom: 50,
|
||||||
|
right: 100,
|
||||||
|
width: 100,
|
||||||
|
height: 50,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Свойства
|
||||||
|
|
||||||
|
#### $tooltip
|
||||||
|
|
||||||
|
DOM-элемент всплывающей подсказки (имеет свойство `_reference` для доступа к элементу, на котором был вызван `createTooltip`)
|
||||||
|
|
||||||
|
#### options
|
||||||
|
|
||||||
|
Текущие настройки
|
||||||
|
|
||||||
|
#### isVisible
|
||||||
|
|
||||||
|
Видимость всплывающей подсказки - `true`/`false`
|
||||||
|
|
||||||
|
#### Методы
|
||||||
|
|
||||||
|
##### show
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.show();
|
||||||
|
```
|
||||||
|
|
||||||
|
##### hide
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.hide();
|
||||||
|
```
|
||||||
|
|
||||||
|
##### setContent
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.setContent('Новая подсказка');
|
||||||
|
```
|
||||||
|
|
||||||
|
##### updateOptions
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.updateOptions({ placement: 'bottom' });
|
||||||
|
```
|
||||||
|
|
||||||
|
Настройки так же можно переназначать, используя data-атрибуты:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<button type="button" data-tooltip-placement="bottom">Кнопка</button>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### destroy
|
||||||
|
|
||||||
|
```js
|
||||||
|
document.querySelector('button')._tooltip.destroy();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Стили
|
||||||
|
|
||||||
|
```scss
|
||||||
|
$b: '.tooltip';
|
||||||
|
|
||||||
|
#{$b} {
|
||||||
|
left: 0;
|
||||||
|
max-width: calc(100vw - 32px);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: max-content;
|
||||||
|
z-index: 200;
|
||||||
|
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__root {
|
||||||
|
}
|
||||||
|
|
||||||
|
&__arrow {
|
||||||
|
#{$b}_theme_light & {
|
||||||
|
background-color: white;
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
#{$b}_theme_light & {
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
490
packages/tooltip/index.js
Normal file
490
packages/tooltip/index.js
Normal file
@@ -0,0 +1,490 @@
|
|||||||
|
const roundByDPR = (value) => {
|
||||||
|
const dpr = window.devicePixelRatio || 1;
|
||||||
|
return Math.round(value * dpr) / dpr;
|
||||||
|
},
|
||||||
|
attributeToOption = (attribute) => {
|
||||||
|
attribute = attribute.replace('tooltip', '');
|
||||||
|
return attribute.charAt(0).toLowerCase() + attribute.slice(1);
|
||||||
|
};
|
||||||
|
|
||||||
|
let visibilityListenerRegistered = false;
|
||||||
|
const handleVisibilityChange = () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
// Скрываем все активные всплывающие подсказки
|
||||||
|
for (const $tooltip of document.querySelectorAll('.tooltip')) {
|
||||||
|
const ref = $tooltip._reference;
|
||||||
|
if (ref?._tooltip) {
|
||||||
|
// Очищаем таймеры появления при скрытии страницы
|
||||||
|
clearTimeout(ref._tooltip._showTimeout);
|
||||||
|
if (ref._tooltip.isVisible) {
|
||||||
|
ref._tooltip.hide({ immediately: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
templates = {
|
||||||
|
arrow: () => `
|
||||||
|
<div class="tooltip__arrow" style="pointer-events: none; position: absolute; transform: rotate(45deg);"></div>
|
||||||
|
`,
|
||||||
|
interactiveHelper: () => `
|
||||||
|
<div class="tooltip__interactive-helper" style="position: absolute; z-index: -1;"></div>
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createTooltip = ($el, content, options) => {
|
||||||
|
options = {
|
||||||
|
animation: [
|
||||||
|
[{ opacity: 0 }, { opacity: 1 }],
|
||||||
|
[{ opacity: 1 }, { opacity: 0 }],
|
||||||
|
],
|
||||||
|
appendTo: document.body,
|
||||||
|
arrow: true,
|
||||||
|
delay: [0, 0],
|
||||||
|
duration: [0, 0],
|
||||||
|
easing: ['linear', 'linear'],
|
||||||
|
hideOnClick: true, // Возможные значения: true, 'all', 'toggle'
|
||||||
|
interactive: true,
|
||||||
|
offset: [0, 8],
|
||||||
|
placement: 'top',
|
||||||
|
shiftPadding: [8, 0],
|
||||||
|
theme: 'light',
|
||||||
|
trigger: 'mouseenter click',
|
||||||
|
virtualReference: undefined,
|
||||||
|
zIndex: '',
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries($el.dataset)) {
|
||||||
|
if (key.startsWith('tooltip')) {
|
||||||
|
let parsedValue = value;
|
||||||
|
try {
|
||||||
|
parsedValue = JSON.parse(value);
|
||||||
|
} catch {} // eslint-disable-line no-empty
|
||||||
|
options[attributeToOption(key)] = parsedValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let rafId;
|
||||||
|
const listeners = [];
|
||||||
|
|
||||||
|
$el._tooltip = {
|
||||||
|
options,
|
||||||
|
isVisible: false,
|
||||||
|
$tooltip: undefined,
|
||||||
|
$container: undefined,
|
||||||
|
$arrow: undefined,
|
||||||
|
$interactive: undefined,
|
||||||
|
_showTimeout: undefined,
|
||||||
|
_hideTimeout: undefined,
|
||||||
|
_currentAnimation: undefined,
|
||||||
|
autoUpdateCleanup: () => {},
|
||||||
|
updatePosition: async () => {},
|
||||||
|
|
||||||
|
setContent(updatedContent) {
|
||||||
|
if (updatedContent !== undefined) {
|
||||||
|
content = updatedContent;
|
||||||
|
}
|
||||||
|
if ($el._tooltip.$container) {
|
||||||
|
if (content instanceof HTMLElement) {
|
||||||
|
$el._tooltip.$container.innerHTML = '';
|
||||||
|
$el._tooltip.$container.append(content);
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$container.innerHTML = content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateOptions(updatedOptions = {}) {
|
||||||
|
for (const [name, value] of Object.entries(updatedOptions)) {
|
||||||
|
options[name] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.arrow !== undefined && $el._tooltip.$tooltip) {
|
||||||
|
if (options.arrow) {
|
||||||
|
if (!$el._tooltip.$arrow) {
|
||||||
|
$el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.insertAdjacentHTML('afterbegin', templates.arrow());
|
||||||
|
$el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$arrow?.remove();
|
||||||
|
$el._tooltip.$arrow = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.interactive !== undefined) {
|
||||||
|
for (const { el, event, listener } of listeners) {
|
||||||
|
el.removeEventListener(event, listener);
|
||||||
|
}
|
||||||
|
listeners.length = 0;
|
||||||
|
registerListeners();
|
||||||
|
if ($el._tooltip.$tooltip) {
|
||||||
|
if (options.interactive) {
|
||||||
|
if (!$el._tooltip.$interactive) {
|
||||||
|
$el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.insertAdjacentHTML('afterbegin', templates.interactiveHelper());
|
||||||
|
$el._tooltip.$interactive =
|
||||||
|
$el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$interactive?.remove();
|
||||||
|
$el._tooltip.$interactive = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.theme !== undefined && $el._tooltip.$tooltip) {
|
||||||
|
const classIndex = [...$el._tooltip.$tooltip.classList].findIndex((className) =>
|
||||||
|
className.startsWith('tooltip_theme_'),
|
||||||
|
);
|
||||||
|
if (classIndex === -1) {
|
||||||
|
$el._tooltip.$tooltip.classList.add(`tooltip_theme_${options.theme}`);
|
||||||
|
} else {
|
||||||
|
$el._tooltip.$tooltip.classList.replace(
|
||||||
|
$el._tooltip.$tooltip.classList[classIndex],
|
||||||
|
`tooltip_theme_${options.theme}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (updatedOptions.zIndex !== undefined && $el._tooltip.$tooltip) {
|
||||||
|
Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($el._tooltip.$tooltip) {
|
||||||
|
await $el._tooltip.updatePosition();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
if (!$el._tooltip) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout($el._tooltip._showTimeout);
|
||||||
|
clearTimeout($el._tooltip._hideTimeout);
|
||||||
|
$el._tooltip._currentAnimation?.cancel();
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip?.remove();
|
||||||
|
|
||||||
|
// Вызываем autoUpdateCleanup только если всплывающая подсказка была видна (иначе вызывать её не имеет смысла)
|
||||||
|
if ($el._tooltip.isVisible) {
|
||||||
|
$el._tooltip.autoUpdateCleanup();
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const { el, event, listener } of listeners) {
|
||||||
|
el.removeEventListener(event, listener);
|
||||||
|
}
|
||||||
|
listeners.length = 0;
|
||||||
|
|
||||||
|
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
|
||||||
|
|
||||||
|
delete $el._tooltip;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.onCreate) {
|
||||||
|
options.onCreate($el._tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
$el._tooltip.show = async ({ immediately } = {}) => {
|
||||||
|
clearTimeout($el._tooltip._hideTimeout);
|
||||||
|
|
||||||
|
if (!$el._tooltip.$tooltip) {
|
||||||
|
const { computePosition, offset, flip, shift, arrow } = await import('@floating-ui/dom');
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip = document.createElement('div');
|
||||||
|
$el._tooltip.$tooltip._reference = $el;
|
||||||
|
$el._tooltip.$tooltip.classList.add('tooltip', `tooltip_theme_${options.theme}`);
|
||||||
|
Object.assign($el._tooltip.$tooltip.style, { zIndex: options.zIndex });
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip.innerHTML = `
|
||||||
|
<div class="tooltip__root">
|
||||||
|
${options.interactive ? templates.interactiveHelper() : ''}
|
||||||
|
${options.arrow ? templates.arrow() : ''}
|
||||||
|
<div class="tooltip__container"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
$el._tooltip.$container = $el._tooltip.$tooltip.querySelector('.tooltip__container');
|
||||||
|
$el._tooltip.$arrow = $el._tooltip.$tooltip.querySelector('.tooltip__arrow');
|
||||||
|
$el._tooltip.$interactive = $el._tooltip.$tooltip.querySelector('.tooltip__interactive-helper');
|
||||||
|
|
||||||
|
$el._tooltip.setContent();
|
||||||
|
|
||||||
|
$el._tooltip.updatePosition = () => {
|
||||||
|
cancelAnimationFrame(rafId);
|
||||||
|
rafId = requestAnimationFrame(async () => {
|
||||||
|
const { x, y, placement, middlewareData } = await computePosition(
|
||||||
|
options.virtualReference ?? $el,
|
||||||
|
$el._tooltip.$tooltip,
|
||||||
|
{
|
||||||
|
placement: options.placement,
|
||||||
|
middleware: [
|
||||||
|
offset({ mainAxis: options.offset[1], crossAxis: options.offset[0] }),
|
||||||
|
flip(),
|
||||||
|
shift({
|
||||||
|
padding: {
|
||||||
|
top: options.shiftPadding[1],
|
||||||
|
right: options.shiftPadding[0],
|
||||||
|
bottom: options.shiftPadding[1],
|
||||||
|
left: options.shiftPadding[0],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
arrow({ element: $el._tooltip.$arrow }),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
Object.assign($el._tooltip.$tooltip.style, {
|
||||||
|
transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const side = placement.split('-')[0],
|
||||||
|
staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side];
|
||||||
|
|
||||||
|
$el._tooltip.$tooltip.classList.remove(
|
||||||
|
'tooltip_side_top',
|
||||||
|
'tooltip_side_bottom',
|
||||||
|
'tooltip_side_left',
|
||||||
|
'tooltip_side_right',
|
||||||
|
);
|
||||||
|
$el._tooltip.$tooltip.classList.add(`tooltip_side_${side}`);
|
||||||
|
|
||||||
|
if ($el._tooltip.$interactive) {
|
||||||
|
Object.assign($el._tooltip.$interactive.style, {
|
||||||
|
width: side === 'left' || side === 'right' ? `${options.offset[1]}px` : '100%',
|
||||||
|
height: side === 'top' || side === 'bottom' ? `${options.offset[1]}px` : '100%',
|
||||||
|
[staticSide]: `-${options.offset[1]}px`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($el._tooltip.$arrow && middlewareData.arrow) {
|
||||||
|
const { x, y } = middlewareData.arrow;
|
||||||
|
Object.assign($el._tooltip.$arrow.style, {
|
||||||
|
left: x === undefined ? '' : `${x}px`,
|
||||||
|
top: y === undefined ? '' : `${y}px`,
|
||||||
|
[staticSide]: `-${$el._tooltip.$arrow.offsetWidth / 2}px`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (options.onMount) {
|
||||||
|
options.onMount($el._tooltip);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const { autoUpdate } = await import('@floating-ui/dom');
|
||||||
|
|
||||||
|
$el._tooltip._showTimeout = setTimeout(
|
||||||
|
async () => {
|
||||||
|
const isMouseEnterTrigger = options.trigger.includes('mouseenter'),
|
||||||
|
isHovering = $el.matches(':hover');
|
||||||
|
|
||||||
|
// Проверяем $el._tooltip на сущестование и актуальность показа всплывающей подсказки
|
||||||
|
if (
|
||||||
|
!$el._tooltip ||
|
||||||
|
$el._tooltip.isVisible ||
|
||||||
|
(isMouseEnterTrigger && !isHovering) ||
|
||||||
|
document.hidden
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
(options.appendTo === 'parent' ? $el.parentElement : options.appendTo).append($el._tooltip.$tooltip);
|
||||||
|
$el._tooltip.isVisible = true;
|
||||||
|
$el._tooltip.autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition);
|
||||||
|
|
||||||
|
if (options.hideOnClick && (options.trigger.includes('click') || options.trigger.includes('manual'))) {
|
||||||
|
document.body.addEventListener('click', $el._tooltip.hideOnClickListener);
|
||||||
|
listeners.push({
|
||||||
|
el: document.body,
|
||||||
|
event: 'click',
|
||||||
|
listener: $el._tooltip.hideOnClickListener,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.onShow) {
|
||||||
|
options.onShow($el._tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const animation = $el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.animate(options.animation[0], {
|
||||||
|
duration: immediately ? 0 : options.duration[0],
|
||||||
|
easing: options.easing[0],
|
||||||
|
});
|
||||||
|
$el._tooltip._currentAnimation = animation;
|
||||||
|
await animation.finished;
|
||||||
|
} catch {} // eslint-disable-line no-empty
|
||||||
|
|
||||||
|
if (options.onShown) {
|
||||||
|
options.onShown($el._tooltip);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediately ? 0 : options.delay[0],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.hide = ({ immediately } = {}) => {
|
||||||
|
clearTimeout($el._tooltip._showTimeout);
|
||||||
|
$el._tooltip._hideTimeout = setTimeout(
|
||||||
|
async () => {
|
||||||
|
// Проверяем $el._tooltip на сущестование
|
||||||
|
if (!$el._tooltip || !$el._tooltip.isVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.onHide) {
|
||||||
|
options.onHide($el._tooltip);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.removeEventListener('click', $el._tooltip.hideOnClickListener);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const animation = $el._tooltip.$tooltip
|
||||||
|
.querySelector('.tooltip__root')
|
||||||
|
.animate(options.animation[1], {
|
||||||
|
duration: immediately ? 0 : options.duration[1],
|
||||||
|
easing: options.easing[1],
|
||||||
|
});
|
||||||
|
$el._tooltip._currentAnimation = animation;
|
||||||
|
await animation.finished;
|
||||||
|
} catch {} // eslint-disable-line no-empty
|
||||||
|
|
||||||
|
// Ещё одна проверка на сущестование $el._tooltip после await
|
||||||
|
if (!$el._tooltip) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($el._tooltip.$tooltip) {
|
||||||
|
$el._tooltip.$tooltip.remove();
|
||||||
|
}
|
||||||
|
$el._tooltip.isVisible = false;
|
||||||
|
$el._tooltip.autoUpdateCleanup();
|
||||||
|
|
||||||
|
if (options.onHidden) {
|
||||||
|
options.onHidden($el._tooltip);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediately ? 0 : options.delay[1],
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.hideOnClickListener = ({ target }) => {
|
||||||
|
if (!$el._tooltip.isVisible) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.hideOnClick === 'all') {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
} else if (options.hideOnClick === 'toggle') {
|
||||||
|
if ($el.contains(target)) {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// options.hideOnClick === true
|
||||||
|
if ($el.contains(target) || !$el._tooltip.$tooltip.contains(target)) {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.clickListener = () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!$el._tooltip.isVisible) {
|
||||||
|
$el._tooltip.show();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.mouseEnterListener = (event) => {
|
||||||
|
if (event.pointerType !== 'mouse' || document.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$el._tooltip.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.mouseLeaveListener = (event) => {
|
||||||
|
if (event.pointerType !== 'mouse') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
|
||||||
|
$el._tooltip.$tooltip.addEventListener(
|
||||||
|
'pointerleave',
|
||||||
|
(event) => {
|
||||||
|
if (event.pointerType !== 'mouse') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ once: true },
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.focusListener = () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$el._tooltip.show();
|
||||||
|
};
|
||||||
|
|
||||||
|
$el._tooltip.blurListener = () => {
|
||||||
|
$el._tooltip.hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
const registerListeners = () => {
|
||||||
|
for (const trigger of options.trigger.split(' ')) {
|
||||||
|
switch (trigger) {
|
||||||
|
case 'mouseenter': {
|
||||||
|
$el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
|
||||||
|
listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
|
||||||
|
|
||||||
|
$el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
|
||||||
|
listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'click': {
|
||||||
|
$el.addEventListener('click', $el._tooltip.clickListener);
|
||||||
|
listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
|
||||||
|
|
||||||
|
if (!options.interactive) {
|
||||||
|
$el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
|
||||||
|
listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'focus': {
|
||||||
|
$el.addEventListener('focus', $el._tooltip.focusListener);
|
||||||
|
listeners.push({ el: $el, event: 'focus', listener: $el._tooltip.focusListener });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'blur': {
|
||||||
|
$el.addEventListener('blur', $el._tooltip.blurListener);
|
||||||
|
listeners.push({ el: $el, event: 'blur', listener: $el._tooltip.blurListener });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
registerListeners();
|
||||||
|
|
||||||
|
if (!visibilityListenerRegistered) {
|
||||||
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||||
|
visibilityListenerRegistered = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
17
packages/tooltip/package.json
Normal file
17
packages/tooltip/package.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "@advdominion/tooltip",
|
||||||
|
"version": "7.0.2",
|
||||||
|
"type": "module",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://gitea.optiweb.ru/public/frontend.git"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@floating-ui/dom": "^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
export default {
|
|
||||||
printWidth: 120,
|
|
||||||
singleQuote: true,
|
|
||||||
quoteProps: 'consistent',
|
|
||||||
overrides: [
|
|
||||||
{
|
|
||||||
files: 'packages/*/package.json',
|
|
||||||
options: {
|
|
||||||
tabWidth: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user