Merge branch 'develop' into experiment/timelines

This commit is contained in:
Kainoa Kanter 2023-04-07 17:17:59 -07:00
commit cda17e71b0
465 changed files with 58610 additions and 21787 deletions

View File

@ -48,8 +48,8 @@ Thank you for your PR! Before creating a PR, please check the following:
- If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text. Good examples include `Closing: #21` or `Resolves: #21`
- Check if there are any documents that need to be created or updated due to this change.
- If you have added a feature or fixed a bug, please add a test case if possible.
- Please make sure that tests and Lint are passed in advance.
- You can run it with `pnpm run test` and `pnpm run lint`. [See more info](#testing)
- Please make sure that formatting, tests and Lint are passed in advance.
- You can run it with `pnpm run format`, `pnpm run test` and `pnpm run lint`. [See more info](#testing)
- If this PR includes UI changes, please attach a screenshot in the text.
Thanks for your cooperation 🤗

View File

@ -10,6 +10,7 @@ COPY package.json pnpm*.yaml ./
COPY packages/backend/package.json packages/backend/package.json
COPY packages/client/package.json packages/client/package.json
COPY packages/sw/package.json packages/sw/package.json
COPY packages/calckey-js/package.json packages/calckey-js/package.json
COPY packages/backend/native-utils/package.json packages/backend/native-utils/package.json
COPY packages/backend/native-utils/npm/linux-x64-musl/package.json packages/backend/native-utils/npm/linux-x64-musl/package.json
COPY packages/backend/native-utils/npm/linux-arm64-musl/package.json packages/backend/native-utils/npm/linux-arm64-musl/package.json
@ -43,6 +44,7 @@ COPY --from=build /calckey/node_modules /calckey/node_modules
COPY --from=build /calckey/packages/backend/node_modules /calckey/packages/backend/node_modules
COPY --from=build /calckey/packages/sw/node_modules /calckey/packages/sw/node_modules
COPY --from=build /calckey/packages/client/node_modules /calckey/packages/client/node_modules
COPY --from=build /calckey/packages/calckey-js/node_modules /calckey/packages/calckey-js/node_modules
# Copy the finished compiled files
COPY --from=build /calckey/built /calckey/built

View File

@ -953,9 +953,9 @@ license: "License"
indexPosts: "Index posts"
indexFrom: "Index from Post ID onwards (leave blank to index every post)"
indexNotice: "Now indexing. This will probably take a while, please don't restart your server for at least an hour."
customKaTeXMacro: "Custom KaTeX Macro"
customKaTeXMacro: "Custom KaTeX macros"
customKaTeXMacroDescription: "Set up macros to write mathematical expressions easily! The notation conforms to the LaTeX command definitions and is written as \\newcommand{\\name}{content} or \\newcommand{\\name}[number of arguments]{content}. For example, \\newcommand{\\add}[2]{#1 + #2} will expand \\add{3}{foo} to 3 + foo. The curly brackets surrounding the macro name can be changed to round or square brackets. This affects the brackets used for arguments. One (and only one) macro can be defined per line, and you can't break the line in the middle of the definition. Invalid lines are simply ignored. Only simple string substitution functions are supported; advanced syntax, such as conditional branching, cannot be used here."
enableCustomKaTeXMacro: "Enable custom KaTeX macro"
enableCustomKaTeXMacro: "Enable custom KaTeX macros"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."

View File

@ -612,7 +612,7 @@ regexpError: "正規表現エラー"
regexpErrorDescription: "{tab}ワードミュートの{line}行目の正規表現にエラーが発生しました:"
instanceMute: "インスタンスミュート"
userSaysSomething: "{name}が何かを言いました"
userSaysSomethingReason: "{name}前記{reason}"
userSaysSomethingReason: "{name}が{reason}と言いました"
makeActive: "アクティブにする"
display: "表示"
copy: "コピー"

View File

@ -27,7 +27,7 @@
"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
"mocha": "pnpm --filter backend run mocha",
"test": "pnpm run mocha",
"format": "gulp format",
"format": "pnpm rome format packages/**/* --write && pnpm --filter client run format",
"clean": "pnpm node ./scripts/clean.js",
"clean-all": "pnpm node ./scripts/clean-all.js",
"cleanall": "pnpm run clean-all"
@ -40,7 +40,6 @@
"@bull-board/ui": "^4.10.2",
"@napi-rs/cli": "^2.15.0",
"@tensorflow/tfjs": "^3.21.0",
"calckey-js": "^0.0.22",
"js-yaml": "4.1.0",
"seedrandom": "^3.0.5"
},

View File

@ -49,7 +49,7 @@
"blurhash": "1.1.5",
"bull": "4.10.2",
"cacheable-lookup": "7.0.0",
"calckey-js": "^0.0.22",
"calckey-js": "workspace:*",
"cbor": "8.1.0",
"chalk": "5.2.0",
"chalk-template": "0.4.0",

View File

@ -0,0 +1,7 @@
root = true
[*]
indent_style = tab
indent_size = 2
charset = utf-8
insert_final_newline = true

View File

@ -0,0 +1,7 @@
node_modules
/built
/coverage
/.eslintrc.js
/jest.config.ts
/test
/test-d

View File

@ -0,0 +1,65 @@
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
parserOptions: {
tsconfigRootDir: __dirname,
project: ["./tsconfig.json"],
},
plugins: ["@typescript-eslint"],
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
rules: {
indent: [
"error",
"tab",
{
SwitchCase: 1,
MemberExpression: "off",
flatTernaryExpressions: true,
ArrayExpression: "first",
ObjectExpression: "first",
},
],
"eol-last": ["error", "always"],
semi: ["error", "always"],
quotes: ["error", "single"],
"comma-dangle": ["error", "always-multiline"],
"keyword-spacing": [
"error",
{
before: true,
after: true,
},
],
"key-spacing": [
"error",
{
beforeColon: false,
afterColon: true,
},
],
"space-infix-ops": ["error"],
"space-before-blocks": ["error", "always"],
"object-curly-spacing": ["error", "always"],
"nonblock-statement-body-position": ["error", "beside"],
eqeqeq: ["error", "always", { null: "ignore" }],
"no-multiple-empty-lines": ["error", { max: 1 }],
"no-multi-spaces": ["error"],
"no-var": ["error"],
"prefer-arrow-callback": ["error"],
"no-throw-literal": ["error"],
"no-param-reassign": ["warn"],
"no-constant-condition": ["warn"],
"no-empty-pattern": ["warn"],
"@typescript-eslint/no-unnecessary-condition": ["error"],
"@typescript-eslint/no-inferrable-types": ["warn"],
"@typescript-eslint/no-non-null-assertion": ["warn"],
"@typescript-eslint/explicit-function-return-type": ["warn"],
"@typescript-eslint/no-misused-promises": [
"error",
{
checksVoidReturn: false,
},
],
"@typescript-eslint/consistent-type-imports": "error",
},
};

113
packages/calckey-js/.gitignore vendored Normal file
View File

@ -0,0 +1,113 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# App
temp
# built
# Yarn
.yarn/*
.pnp.cjs
.pnp.loader.mjs

View File

@ -0,0 +1,29 @@
# 0.0.14
- remove needless Object.freeze()
# 0.0.13
- expose ChannelConnection and Channels types
# 0.0.12
- fix a bug that cannot connect to streaming
# 0.0.11
- update user type
- add missing main stream types
# 0.0.10
- add consts
# 0.0.9
- add list of api permission
- Update Note type
# 0.0.8
- add type definition for `messagingMessage` event to main stream channel
- Update Note type
# 0.0.7
- Notificationsの型を修正
- MessagingMessageの型を修正
- UserLiteの型を修正
- apiでネイティブfetchを格納する際に無名関数でラップするように

View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021-2022 syuilo and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,7 @@
# Calckey.js
Fork of Misskey.js for Calckey
https://www.npmjs.com/package/calckey-js
![Parody of the Javascript logo with "CK" instead of "JS"](https://codeberg.org/repo-avatars/80771-4d86135f67b9a460cdd1be9e91648e5f)

View File

@ -0,0 +1,364 @@
/**
* Config file for API Extractor. For more info, please visit: https://api-extractor.com
*/
{
"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
/**
* Optionally specifies another JSON config file that this file extends from. This provides a way for
* standard settings to be shared across multiple projects.
*
* If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
* the "extends" field. Otherwise, the first path segment is interpreted as an NPM package name, and will be
* resolved using NodeJS require().
*
* SUPPORTED TOKENS: none
* DEFAULT VALUE: ""
*/
// "extends": "./shared/api-extractor-base.json"
// "extends": "my-package/include/api-extractor-base.json"
/**
* Determines the "<projectFolder>" token that can be used with other config file settings. The project folder
* typically contains the tsconfig.json and package.json config files, but the path is user-defined.
*
* The path is resolved relative to the folder of the config file that contains the setting.
*
* The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
* parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
* that contains a tsconfig.json file. If a tsconfig.json file cannot be found in this way, then an error
* will be reported.
*
* SUPPORTED TOKENS: <lookup>
* DEFAULT VALUE: "<lookup>"
*/
// "projectFolder": "..",
/**
* (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis. API Extractor
* analyzes the symbols exported by this module.
*
* The file extension must be ".d.ts" and not ".ts".
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
*/
"mainEntryPointFilePath": "<projectFolder>/built/index.d.ts",
/**
* A list of NPM package names whose exports should be treated as part of this package.
*
* For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
* and another NPM package "library2" is embedded in this bundle. Some types from library2 may become part
* of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
* imports library2. To avoid this, we can specify:
*
* "bundledPackages": [ "library2" ],
*
* This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
* local files for library1.
*/
"bundledPackages": [],
/**
* Determines how the TypeScript compiler engine will be invoked by API Extractor.
*/
"compiler": {
/**
* Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* Note: This setting will be ignored if "overrideTsconfig" is used.
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<projectFolder>/tsconfig.json"
*/
// "tsconfigFilePath": "<projectFolder>/tsconfig.json",
/**
* Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
* The object must conform to the TypeScript tsconfig schema:
*
* http://json.schemastore.org/tsconfig
*
* If omitted, then the tsconfig.json file will be read from the "projectFolder".
*
* DEFAULT VALUE: no overrideTsconfig section
*/
// "overrideTsconfig": {
// . . .
// }
/**
* This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
* and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
* dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
* for its analysis. Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
*
* DEFAULT VALUE: false
*/
// "skipLibCheck": true,
},
/**
* Configures how the API report file (*.api.md) will be generated.
*/
"apiReport": {
/**
* (REQUIRED) Whether to generate an API report.
*/
"enabled": true
/**
* The filename for the API report files. It will be combined with "reportFolder" or "reportTempFolder" to produce
* a full file path.
*
* The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
*
* SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<unscopedPackageName>.api.md"
*/
// "reportFileName": "<unscopedPackageName>.api.md",
/**
* Specifies the folder where the API report file is written. The file name portion is determined by
* the "reportFileName" setting.
*
* The API report file is normally tracked by Git. Changes to it can be used to trigger a branch policy,
* e.g. for an API review.
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<projectFolder>/etc/"
*/
// "reportFolder": "<projectFolder>/etc/",
/**
* Specifies the folder where the temporary report file is written. The file name portion is determined by
* the "reportFileName" setting.
*
* After the temporary file is written to disk, it is compared with the file in the "reportFolder".
* If they are different, a production build will fail.
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<projectFolder>/temp/"
*/
// "reportTempFolder": "<projectFolder>/temp/"
},
/**
* Configures how the doc model file (*.api.json) will be generated.
*/
"docModel": {
/**
* (REQUIRED) Whether to generate a doc model file.
*/
"enabled": true
/**
* The output path for the doc model file. The file extension should be ".api.json".
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
*/
// "apiJsonFilePath": "<projectFolder>/temp/<unscopedPackageName>.api.json"
},
/**
* Configures how the .d.ts rollup file will be generated.
*/
"dtsRollup": {
/**
* (REQUIRED) Whether to generate the .d.ts rollup file.
*/
"enabled": false
/**
* Specifies the output path for a .d.ts rollup file to be generated without any trimming.
* This file will include all declarations that are exported by the main entry point.
*
* If the path is an empty string, then this file will not be written.
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
*/
// "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts",
/**
* Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
* This file will include only declarations that are marked as "@public" or "@beta".
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: ""
*/
// "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
/**
* Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
* This file will include only declarations that are marked as "@public".
*
* If the path is an empty string, then this file will not be written.
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: ""
*/
// "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
/**
* When a declaration is trimmed, by default it will be replaced by a code comment such as
* "Excluded from this release type: exampleMember". Set "omitTrimmingComments" to true to remove the
* declaration completely.
*
* DEFAULT VALUE: false
*/
// "omitTrimmingComments": true
},
/**
* Configures how the tsdoc-metadata.json file will be generated.
*/
"tsdocMetadata": {
/**
* Whether to generate the tsdoc-metadata.json file.
*
* DEFAULT VALUE: true
*/
// "enabled": true,
/**
* Specifies where the TSDoc metadata file should be written.
*
* The path is resolved relative to the folder of the config file that contains the setting; to change this,
* prepend a folder token such as "<projectFolder>".
*
* The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
* "typings" or "main" fields of the project's package.json. If none of these fields are set, the lookup
* falls back to "tsdoc-metadata.json" in the package folder.
*
* SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
* DEFAULT VALUE: "<lookup>"
*/
// "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
},
/**
* Specifies what type of newlines API Extractor should use when writing output files. By default, the output files
* will be written with Windows-style newlines. To use POSIX-style newlines, specify "lf" instead.
* To use the OS's default newline kind, specify "os".
*
* DEFAULT VALUE: "crlf"
*/
// "newlineKind": "crlf",
/**
* Configures how API Extractor reports error and warning messages produced during analysis.
*
* There are three sources of messages: compiler messages, API Extractor messages, and TSDoc messages.
*/
"messages": {
/**
* Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
* the input .d.ts files.
*
* TypeScript message identifiers start with "TS" followed by an integer. For example: "TS2551"
*
* DEFAULT VALUE: A single "default" entry with logLevel=warning.
*/
"compilerMessageReporting": {
/**
* Configures the default routing for messages that don't match an explicit rule in this table.
*/
"default": {
/**
* Specifies whether the message should be written to the the tool's output log. Note that
* the "addToApiReportFile" property may supersede this option.
*
* Possible values: "error", "warning", "none"
*
* Errors cause the build to fail and return a nonzero exit code. Warnings cause a production build fail
* and return a nonzero exit code. For a non-production build (e.g. when "api-extractor run" includes
* the "--local" option), the warning is displayed but the build will not fail.
*
* DEFAULT VALUE: "warning"
*/
"logLevel": "warning"
/**
* When addToApiReportFile is true: If API Extractor is configured to write an API report file (.api.md),
* then the message will be written inside that file; otherwise, the message is instead logged according to
* the "logLevel" option.
*
* DEFAULT VALUE: false
*/
// "addToApiReportFile": false
}
// "TS2551": {
// "logLevel": "warning",
// "addToApiReportFile": true
// },
//
// . . .
},
/**
* Configures handling of messages reported by API Extractor during its analysis.
*
* API Extractor message identifiers start with "ae-". For example: "ae-extra-release-tag"
*
* DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
*/
"extractorMessageReporting": {
"default": {
"logLevel": "none"
// "addToApiReportFile": false
}
// "ae-extra-release-tag": {
// "logLevel": "warning",
// "addToApiReportFile": true
// },
//
// . . .
},
/**
* Configures handling of messages reported by the TSDoc parser when analyzing code comments.
*
* TSDoc message identifiers start with "tsdoc-". For example: "tsdoc-link-tag-unescaped-text"
*
* DEFAULT VALUE: A single "default" entry with logLevel=warning.
*/
"tsdocMessageReporting": {
"default": {
"logLevel": "warning"
// "addToApiReportFile": false
}
// "tsdoc-link-tag-unescaped-text": {
// "logLevel": "warning",
// "addToApiReportFile": true
// },
//
// . . .
}
}
}

View File

@ -0,0 +1,2 @@
codecov:
token: d55e1270-f20a-4727-aa05-2bd57793315a

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,195 @@
/*
* For a detailed explanation regarding each configuration property and type check, visit:
* https://jestjs.io/docs/en/configuration.html
*/
export default {
// All imported modules in your tests should be mocked automatically
// automock: false,
// Stop running tests after `n` failures
// bail: 0,
// The directory where Jest should store its cached dependency information
// cacheDirectory: "C:\\Users\\ai\\AppData\\Local\\Temp\\jest",
// Automatically clear mock calls and instances between every test
// clearMocks: false,
// Indicates whether the coverage information should be collected while executing the test
// collectCoverage: false,
// An array of glob patterns indicating a set of files for which coverage information should be collected
// collectCoverageFrom: undefined,
// The directory where Jest should output its coverage files
coverageDirectory: "coverage",
// An array of regexp pattern strings used to skip coverage collection
// coveragePathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// Indicates which provider should be used to instrument code for coverage
coverageProvider: "v8",
// A list of reporter names that Jest uses when writing coverage reports
// coverageReporters: [
// "json",
// "text",
// "lcov",
// "clover"
// ],
// An object that configures minimum threshold enforcement for coverage results
// coverageThreshold: undefined,
// A path to a custom dependency extractor
// dependencyExtractor: undefined,
// Make calling deprecated APIs throw helpful error messages
// errorOnDeprecated: false,
// Force coverage collection from ignored files using an array of glob patterns
// forceCoverageMatch: [],
// A path to a module which exports an async function that is triggered once before all test suites
// globalSetup: undefined,
// A path to a module which exports an async function that is triggered once after all test suites
// globalTeardown: undefined,
// A set of global variables that need to be available in all test environments
// globals: {},
// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
// maxWorkers: "50%",
// An array of directory names to be searched recursively up from the requiring module's location
// moduleDirectories: [
// "node_modules"
// ],
// An array of file extensions your modules use
// moduleFileExtensions: [
// "js",
// "json",
// "jsx",
// "ts",
// "tsx",
// "node"
// ],
// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
// moduleNameMapper: {},
// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
// modulePathIgnorePatterns: [],
// Activates notifications for test results
// notify: false,
// An enum that specifies notification mode. Requires { notify: true }
// notifyMode: "failure-change",
// A preset that is used as a base for Jest's configuration
// preset: undefined,
// Run tests from one or more projects
// projects: undefined,
// Use this configuration option to add custom reporters to Jest
// reporters: undefined,
// Automatically reset mock state between every test
// resetMocks: false,
// Reset the module registry before running each individual test
// resetModules: false,
// A path to a custom resolver
// resolver: undefined,
// Automatically restore mock state between every test
// restoreMocks: false,
// The root directory that Jest should scan for tests and modules within
// rootDir: undefined,
// A list of paths to directories that Jest should use to search for files in
roots: ["<rootDir>"],
// Allows you to use a custom runner instead of Jest's default test runner
// runner: "jest-runner",
// The paths to modules that run some code to configure or set up the testing environment before each test
// setupFiles: [],
// A list of paths to modules that run some code to configure or set up the testing framework before each test
// setupFilesAfterEnv: [],
// The number of seconds after which a test is considered as slow and reported as such in the results.
// slowTestThreshold: 5,
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
// snapshotSerializers: [],
// The test environment that will be used for testing
testEnvironment: "node",
// Options that will be passed to the testEnvironment
// testEnvironmentOptions: {},
// Adds a location field to test results
// testLocationInResults: false,
// The glob patterns Jest uses to detect test files
testMatch: [
"**/__tests__/**/*.[jt]s?(x)",
"**/?(*.)+(spec|test).[tj]s?(x)",
"<rootDir>/test/**/*",
],
// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
// testPathIgnorePatterns: [
// "\\\\node_modules\\\\"
// ],
// The regexp pattern or array of patterns that Jest uses to detect test files
// testRegex: [],
// This option allows the use of a custom results processor
// testResultsProcessor: undefined,
// This option allows use of a custom test runner
// testRunner: "jasmine2",
// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
// testURL: "http://localhost",
// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
// timers: "real",
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.(ts|tsx)$": "ts-jest",
},
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
// transformIgnorePatterns: [
// "\\\\node_modules\\\\",
// "\\.pnp\\.[^\\\\]+$"
// ],
// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
// unmockedModulePathPatterns: undefined,
// Indicates whether each individual test should be reported during the run
// verbose: undefined,
// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
// watchPathIgnorePatterns: [],
// Whether to use watchman for file crawling
// watchman: true,
};

10662
packages/calckey-js/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,47 @@
{
"name": "calckey-js",
"version": "0.0.22",
"description": "Calckey SDK for JavaScript",
"main": "./built/index.js",
"types": "./built/index.d.ts",
"scripts": {
"build": "tsc",
"tsd": "tsd",
"api": "pnpm api-extractor run --local --verbose",
"api-prod": "pnpm api-extractor run --verbose",
"eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
"typecheck": "tsc --noEmit",
"lint": "pnpm typecheck && pnpm eslint",
"jest": "jest --coverage --detectOpenHandles",
"test": "pnpm jest && pnpm tsd"
},
"repository": {
"type": "git",
"url": "https://codeberg.org/calckey/calckey.js"
},
"devDependencies": {
"@microsoft/api-extractor": "^7.19.3",
"@types/jest": "^27.4.0",
"@types/node": "17.0.5",
"@typescript-eslint/eslint-plugin": "5.8.1",
"@typescript-eslint/parser": "5.8.1",
"eslint": "8.6.0",
"jest": "^27.4.5",
"jest-fetch-mock": "^3.0.3",
"jest-websocket-mock": "^2.2.1",
"mock-socket": "^9.0.8",
"ts-jest": "^27.1.2",
"ts-node": "10.4.0",
"tsd": "^0.19.1",
"typescript": "4.5.4"
},
"files": [
"built"
],
"dependencies": {
"autobind-decorator": "^2.4.0",
"eventemitter3": "^4.0.7",
"reconnecting-websocket": "^4.4.0",
"semver": "^7.3.8"
}
}

View File

@ -0,0 +1,14 @@
export type Acct = {
username: string;
host: string | null;
};
export function parse(acct: string): Acct {
if (acct.startsWith("@")) acct = acct.substr(1);
const split = acct.split("@", 2);
return { username: split[0], host: split[1] || null };
}
export function toString(acct: Acct): string {
return acct.host == null ? acct.username : `${acct.username}@${acct.host}`;
}

View File

@ -0,0 +1,127 @@
import { Endpoints } from "./api.types";
const MK_API_ERROR = Symbol();
export type APIError = {
id: string;
code: string;
message: string;
kind: "client" | "server";
info: Record<string, any>;
};
export function isAPIError(reason: any): reason is APIError {
return reason[MK_API_ERROR] === true;
}
export type FetchLike = (
input: string,
init?: {
method?: string;
body?: string;
credentials?: RequestCredentials;
cache?: RequestCache;
},
) => Promise<{
status: number;
json(): Promise<any>;
}>;
type IsNeverType<T> = [T] extends [never] ? true : false;
type StrictExtract<Union, Cond> = Cond extends Union ? Union : never;
type IsCaseMatched<
E extends keyof Endpoints,
P extends Endpoints[E]["req"],
C extends number,
> = IsNeverType<
StrictExtract<Endpoints[E]["res"]["$switch"]["$cases"][C], [P, any]>
> extends false
? true
: false;
type GetCaseResult<
E extends keyof Endpoints,
P extends Endpoints[E]["req"],
C extends number,
> = StrictExtract<Endpoints[E]["res"]["$switch"]["$cases"][C], [P, any]>[1];
export class APIClient {
public origin: string;
public credential: string | null | undefined;
public fetch: FetchLike;
constructor(opts: {
origin: APIClient["origin"];
credential?: APIClient["credential"];
fetch?: APIClient["fetch"] | null | undefined;
}) {
this.origin = opts.origin;
this.credential = opts.credential;
// ネイティブ関数をそのまま変数に代入して使おうとするとChromiumではIllegal invocationエラーが発生するため、
// 環境で実装されているfetchを使う場合は無名関数でラップして使用する
this.fetch = opts.fetch || ((...args) => fetch(...args));
}
public request<E extends keyof Endpoints, P extends Endpoints[E]["req"]>(
endpoint: E,
params: P = {} as P,
credential?: string | null | undefined,
): Promise<
Endpoints[E]["res"] extends {
$switch: { $cases: [any, any][]; $default: any };
}
? IsCaseMatched<E, P, 0> extends true
? GetCaseResult<E, P, 0>
: IsCaseMatched<E, P, 1> extends true
? GetCaseResult<E, P, 1>
: IsCaseMatched<E, P, 2> extends true
? GetCaseResult<E, P, 2>
: IsCaseMatched<E, P, 3> extends true
? GetCaseResult<E, P, 3>
: IsCaseMatched<E, P, 4> extends true
? GetCaseResult<E, P, 4>
: IsCaseMatched<E, P, 5> extends true
? GetCaseResult<E, P, 5>
: IsCaseMatched<E, P, 6> extends true
? GetCaseResult<E, P, 6>
: IsCaseMatched<E, P, 7> extends true
? GetCaseResult<E, P, 7>
: IsCaseMatched<E, P, 8> extends true
? GetCaseResult<E, P, 8>
: IsCaseMatched<E, P, 9> extends true
? GetCaseResult<E, P, 9>
: Endpoints[E]["res"]["$switch"]["$default"]
: Endpoints[E]["res"]
> {
const promise = new Promise((resolve, reject) => {
this.fetch(`${this.origin}/api/${endpoint}`, {
method: "POST",
body: JSON.stringify({
...params,
i: credential !== undefined ? credential : this.credential,
}),
credentials: "omit",
cache: "no-cache",
})
.then(async (res) => {
const body = res.status === 204 ? null : await res.json();
if (res.status === 200) {
resolve(body);
} else if (res.status === 204) {
resolve(null);
} else {
reject({
[MK_API_ERROR]: true,
...body.error,
});
}
})
.catch(reject);
});
return promise as any;
}
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,60 @@
export const notificationTypes = [
"follow",
"mention",
"reply",
"renote",
"quote",
"reaction",
"pollVote",
"pollEnded",
"receiveFollowRequest",
"followRequestAccepted",
"groupInvited",
"app",
] as const;
export const noteVisibilities = [
"public",
"home",
"followers",
"specified",
] as const;
export const mutedNoteReasons = ["word", "manual", "spam", "other"] as const;
export const ffVisibility = ["public", "followers", "private"] as const;
export const permissions = [
"read:account",
"write:account",
"read:blocks",
"write:blocks",
"read:drive",
"write:drive",
"read:favorites",
"write:favorites",
"read:following",
"write:following",
"read:messaging",
"write:messaging",
"read:mutes",
"write:mutes",
"write:notes",
"read:notifications",
"write:notifications",
"read:reactions",
"write:reactions",
"write:votes",
"read:pages",
"write:pages",
"write:page-likes",
"read:page-likes",
"read:user-groups",
"write:user-groups",
"read:channels",
"write:channels",
"read:gallery",
"write:gallery",
"read:gallery-likes",
"write:gallery-likes",
];

View File

@ -0,0 +1,490 @@
export type ID = string;
export type DateString = string;
type TODO = Record<string, any>;
// NOTE: 極力この型を使うのは避け、UserLite か UserDetailed か明示するように
export type User = UserLite | UserDetailed;
export type UserLite = {
id: ID;
username: string;
host: string | null;
name: string;
onlineStatus: "online" | "active" | "offline" | "unknown";
avatarUrl: string;
avatarBlurhash: string;
alsoKnownAs: string[];
movedToUri: any;
emojis: {
name: string;
url: string;
}[];
instance?: {
name: Instance["name"];
softwareName: Instance["softwareName"];
softwareVersion: Instance["softwareVersion"];
iconUrl: Instance["iconUrl"];
faviconUrl: Instance["faviconUrl"];
themeColor: Instance["themeColor"];
};
};
export type UserDetailed = UserLite & {
bannerBlurhash: string | null;
bannerColor: string | null;
bannerUrl: string | null;
birthday: string | null;
createdAt: DateString;
description: string | null;
ffVisibility: "public" | "followers" | "private";
fields: { name: string; value: string }[];
followersCount: number;
followingCount: number;
hasPendingFollowRequestFromYou: boolean;
hasPendingFollowRequestToYou: boolean;
isAdmin: boolean;
isBlocked: boolean;
isBlocking: boolean;
isBot: boolean;
isCat: boolean;
isFollowed: boolean;
isFollowing: boolean;
isLocked: boolean;
isModerator: boolean;
isMuted: boolean;
isSilenced: boolean;
isSuspended: boolean;
lang: string | null;
lastFetchedAt?: DateString;
location: string | null;
notesCount: number;
pinnedNoteIds: ID[];
pinnedNotes: Note[];
pinnedPage: Page | null;
pinnedPageId: string | null;
publicReactions: boolean;
securityKeys: boolean;
twoFactorEnabled: boolean;
updatedAt: DateString | null;
uri: string | null;
url: string | null;
};
export type UserGroup = TODO;
export type UserList = {
id: ID;
createdAt: DateString;
name: string;
userIds: User["id"][];
};
export type MeDetailed = UserDetailed & {
avatarId: DriveFile["id"];
bannerId: DriveFile["id"];
autoAcceptFollowed: boolean;
alwaysMarkNsfw: boolean;
carefulBot: boolean;
emailNotificationTypes: string[];
hasPendingReceivedFollowRequest: boolean;
hasUnreadAnnouncement: boolean;
hasUnreadAntenna: boolean;
hasUnreadChannel: boolean;
hasUnreadMentions: boolean;
hasUnreadMessagingMessage: boolean;
hasUnreadNotification: boolean;
hasUnreadSpecifiedNotes: boolean;
hideOnlineStatus: boolean;
injectFeaturedNote: boolean;
integrations: Record<string, any>;
isDeleted: boolean;
isExplorable: boolean;
mutedWords: string[][];
mutingNotificationTypes: string[];
noCrawle: boolean;
receiveAnnouncementEmail: boolean;
usePasswordLessLogin: boolean;
[other: string]: any;
};
export type DriveFile = {
id: ID;
createdAt: DateString;
isSensitive: boolean;
name: string;
thumbnailUrl: string;
url: string;
type: string;
size: number;
md5: string;
blurhash: string;
comment: string | null;
properties: Record<string, any>;
};
export type DriveFolder = TODO;
export type GalleryPost = TODO;
export type Note = {
id: ID;
createdAt: DateString;
text: string | null;
cw: string | null;
user: User;
userId: User["id"];
reply?: Note;
replyId: Note["id"];
renote?: Note;
renoteId: Note["id"];
files: DriveFile[];
fileIds: DriveFile["id"][];
visibility: "public" | "home" | "followers" | "specified";
visibleUserIds?: User["id"][];
localOnly?: boolean;
myReaction?: string;
reactions: Record<string, number>;
renoteCount: number;
repliesCount: number;
poll?: {
expiresAt: DateString | null;
multiple: boolean;
choices: {
isVoted: boolean;
text: string;
votes: number;
}[];
};
emojis: {
name: string;
url: string;
}[];
uri?: string;
url?: string;
isHidden?: boolean;
};
export type NoteReaction = {
id: ID;
createdAt: DateString;
user: UserLite;
type: string;
};
export type Notification = {
id: ID;
createdAt: DateString;
isRead: boolean;
} & (
| {
type: "reaction";
reaction: string;
user: User;
userId: User["id"];
note: Note;
}
| {
type: "reply";
user: User;
userId: User["id"];
note: Note;
}
| {
type: "renote";
user: User;
userId: User["id"];
note: Note;
}
| {
type: "quote";
user: User;
userId: User["id"];
note: Note;
}
| {
type: "mention";
user: User;
userId: User["id"];
note: Note;
}
| {
type: "pollVote";
user: User;
userId: User["id"];
note: Note;
}
| {
type: "follow";
user: User;
userId: User["id"];
}
| {
type: "followRequestAccepted";
user: User;
userId: User["id"];
}
| {
type: "receiveFollowRequest";
user: User;
userId: User["id"];
}
| {
type: "groupInvited";
invitation: UserGroup;
user: User;
userId: User["id"];
}
| {
type: "app";
header?: string | null;
body: string;
icon?: string | null;
}
);
export type MessagingMessage = {
id: ID;
createdAt: DateString;
file: DriveFile | null;
fileId: DriveFile["id"] | null;
isRead: boolean;
reads: User["id"][];
text: string | null;
user: User;
userId: User["id"];
recipient?: User | null;
recipientId: User["id"] | null;
group?: UserGroup | null;
groupId: UserGroup["id"] | null;
};
export type CustomEmoji = {
id: string;
name: string;
url: string;
category: string;
aliases: string[];
};
export type LiteInstanceMetadata = {
maintainerName: string | null;
maintainerEmail: string | null;
version: string;
name: string | null;
uri: string;
description: string | null;
tosUrl: string | null;
disableRegistration: boolean;
disableLocalTimeline: boolean;
disableRecommendedTimeline: boolean;
disableGlobalTimeline: boolean;
driveCapacityPerLocalUserMb: number;
driveCapacityPerRemoteUserMb: number;
enableHcaptcha: boolean;
hcaptchaSiteKey: string | null;
enableRecaptcha: boolean;
recaptchaSiteKey: string | null;
swPublickey: string | null;
maxNoteTextLength: number;
enableEmail: boolean;
enableTwitterIntegration: boolean;
enableGithubIntegration: boolean;
enableDiscordIntegration: boolean;
enableServiceWorker: boolean;
emojis: CustomEmoji[];
ads: {
id: ID;
ratio: number;
place: string;
url: string;
imageUrl: string;
}[];
};
export type DetailedInstanceMetadata = LiteInstanceMetadata & {
features: Record<string, any>;
};
export type InstanceMetadata = LiteInstanceMetadata | DetailedInstanceMetadata;
export type ServerInfo = {
machine: string;
cpu: {
model: string;
cores: number;
};
mem: {
total: number;
};
fs: {
total: number;
used: number;
};
};
export type Stats = {
notesCount: number;
originalNotesCount: number;
usersCount: number;
originalUsersCount: number;
instances: number;
driveUsageLocal: number;
driveUsageRemote: number;
};
export type Page = {
id: ID;
createdAt: DateString;
updatedAt: DateString;
userId: User["id"];
user: User;
content: Record<string, any>[];
variables: Record<string, any>[];
title: string;
name: string;
summary: string | null;
hideTitleWhenPinned: boolean;
alignCenter: boolean;
font: string;
script: string;
eyeCatchingImageId: DriveFile["id"] | null;
eyeCatchingImage: DriveFile | null;
attachedFiles: any;
likedCount: number;
isLiked?: boolean;
};
export type PageEvent = {
pageId: Page["id"];
event: string;
var: any;
userId: User["id"];
user: User;
};
export type Announcement = {
id: ID;
createdAt: DateString;
updatedAt: DateString | null;
text: string;
title: string;
imageUrl: string | null;
isRead?: boolean;
};
export type Antenna = {
id: ID;
createdAt: DateString;
name: string;
keywords: string[][]; // TODO
excludeKeywords: string[][]; // TODO
src: "home" | "all" | "users" | "list" | "group" | "instances";
userListId: ID | null; // TODO
userGroupId: ID | null; // TODO
users: string[]; // TODO
instances: string[];
caseSensitive: boolean;
notify: boolean;
withReplies: boolean;
withFile: boolean;
hasUnreadNote: boolean;
};
export type App = TODO;
export type AuthSession = {
id: ID;
app: App;
token: string;
};
export type Ad = TODO;
export type Clip = TODO;
export type NoteFavorite = {
id: ID;
createdAt: DateString;
noteId: Note["id"];
note: Note;
};
export type FollowRequest = {
id: ID;
follower: User;
followee: User;
};
export type Channel = {
id: ID;
// TODO
};
export type Following = {
id: ID;
createdAt: DateString;
followerId: User["id"];
followeeId: User["id"];
};
export type FollowingFolloweePopulated = Following & {
followee: UserDetailed;
};
export type FollowingFollowerPopulated = Following & {
follower: UserDetailed;
};
export type Blocking = {
id: ID;
createdAt: DateString;
blockeeId: User["id"];
blockee: UserDetailed;
};
export type Instance = {
id: ID;
caughtAt: DateString;
host: string;
usersCount: number;
notesCount: number;
followingCount: number;
followersCount: number;
driveUsage: number;
driveFiles: number;
latestRequestSentAt: DateString | null;
latestStatus: number | null;
latestRequestReceivedAt: DateString | null;
lastCommunicatedAt: DateString;
isNotResponding: boolean;
isSuspended: boolean;
softwareName: string | null;
softwareVersion: string | null;
openRegistrations: boolean | null;
name: string | null;
description: string | null;
maintainerName: string | null;
maintainerEmail: string | null;
iconUrl: string | null;
faviconUrl: string | null;
themeColor: string | null;
infoUpdatedAt: DateString | null;
};
export type Signin = {
id: ID;
createdAt: DateString;
ip: string;
headers: Record<string, any>;
success: boolean;
};
export type UserSorting =
| "+follower"
| "-follower"
| "+createdAt"
| "-createdAt"
| "+updatedAt"
| "-updatedAt";
export type OriginType = "combined" | "local" | "remote";

View File

@ -0,0 +1,20 @@
import { Endpoints } from "./api.types";
import Stream, { Connection } from "./streaming";
import { Channels } from "./streaming.types";
import { Acct } from "./acct";
import * as consts from "./consts";
export { Endpoints, Stream, Connection as ChannelConnection, Channels, Acct };
export const permissions = consts.permissions;
export const notificationTypes = consts.notificationTypes;
export const noteVisibilities = consts.noteVisibilities;
export const mutedNoteReasons = consts.mutedNoteReasons;
export const ffVisibility = consts.ffVisibility;
// api extractor not supported yet
//export * as api from './api';
//export * as entities from './entities';
import * as api from "./api";
import * as entities from "./entities";
export { api, entities };

View File

@ -0,0 +1,393 @@
import autobind from "autobind-decorator";
import { EventEmitter } from "eventemitter3";
import ReconnectingWebsocket from "reconnecting-websocket";
import { BroadcastEvents, Channels } from "./streaming.types";
export function urlQuery(
obj: Record<string, string | number | boolean | undefined>,
): string {
const params = Object.entries(obj)
.filter(([, v]) => (Array.isArray(v) ? v.length : v !== undefined))
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
.reduce(
(a, [k, v]) => ((a[k] = v!), a),
{} as Record<string, string | number | boolean>,
);
return Object.entries(params)
.map((e) => `${e[0]}=${encodeURIComponent(e[1])}`)
.join("&");
}
type AnyOf<T extends Record<any, any>> = T[keyof T];
type StreamEvents = {
_connected_: void;
_disconnected_: void;
} & BroadcastEvents;
/**
* Misskey stream connection
*/
export default class Stream extends EventEmitter<StreamEvents> {
private stream: ReconnectingWebsocket;
public state: "initializing" | "reconnecting" | "connected" = "initializing";
private sharedConnectionPools: Pool[] = [];
private sharedConnections: SharedConnection[] = [];
private nonSharedConnections: NonSharedConnection[] = [];
private idCounter = 0;
constructor(
origin: string,
user: { token: string } | null,
options?: {
WebSocket?: any;
},
) {
super();
options = options || {};
const query = urlQuery({
i: user?.token,
// To prevent cache of an HTML such as error screen
_t: Date.now(),
});
const wsOrigin = origin
.replace("http://", "ws://")
.replace("https://", "wss://");
this.stream = new ReconnectingWebsocket(
`${wsOrigin}/streaming?${query}`,
"",
{
minReconnectionDelay: 1, // https://github.com/pladaria/reconnecting-websocket/issues/91
WebSocket: options.WebSocket,
},
);
this.stream.addEventListener("open", this.onOpen);
this.stream.addEventListener("close", this.onClose);
this.stream.addEventListener("message", this.onMessage);
}
@autobind
private genId(): string {
return (++this.idCounter).toString();
}
@autobind
public useChannel<C extends keyof Channels>(
channel: C,
params?: Channels[C]["params"],
name?: string,
): Connection<Channels[C]> {
if (params) {
return this.connectToChannel(channel, params);
} else {
return this.useSharedConnection(channel, name);
}
}
@autobind
private useSharedConnection<C extends keyof Channels>(
channel: C,
name?: string,
): SharedConnection<Channels[C]> {
let pool = this.sharedConnectionPools.find((p) => p.channel === channel);
if (pool == null) {
pool = new Pool(this, channel, this.genId());
this.sharedConnectionPools.push(pool);
}
const connection = new SharedConnection(this, channel, pool, name);
this.sharedConnections.push(connection);
return connection;
}
@autobind
public removeSharedConnection(connection: SharedConnection): void {
this.sharedConnections = this.sharedConnections.filter(
(c) => c !== connection,
);
}
@autobind
public removeSharedConnectionPool(pool: Pool): void {
this.sharedConnectionPools = this.sharedConnectionPools.filter(
(p) => p !== pool,
);
}
@autobind
private connectToChannel<C extends keyof Channels>(
channel: C,
params: Channels[C]["params"],
): NonSharedConnection<Channels[C]> {
const connection = new NonSharedConnection(
this,
channel,
this.genId(),
params,
);
this.nonSharedConnections.push(connection);
return connection;
}
@autobind
public disconnectToChannel(connection: NonSharedConnection): void {
this.nonSharedConnections = this.nonSharedConnections.filter(
(c) => c !== connection,
);
}
/**
* Callback of when open connection
*/
@autobind
private onOpen(): void {
const isReconnect = this.state === "reconnecting";
this.state = "connected";
this.emit("_connected_");
// チャンネル再接続
if (isReconnect) {
for (const p of this.sharedConnectionPools) p.connect();
for (const c of this.nonSharedConnections) c.connect();
}
}
/**
* Callback of when close connection
*/
@autobind
private onClose(): void {
if (this.state === "connected") {
this.state = "reconnecting";
this.emit("_disconnected_");
}
}
/**
* Callback of when received a message from connection
*/
@autobind
private onMessage(message: { data: string }): void {
const { type, body } = JSON.parse(message.data);
if (type === "channel") {
const id = body.id;
let connections: Connection[];
connections = this.sharedConnections.filter((c) => c.id === id);
if (connections.length === 0) {
const found = this.nonSharedConnections.find((c) => c.id === id);
if (found) {
connections = [found];
}
}
for (const c of connections) {
c.emit(body.type, body.body);
c.inCount++;
}
} else {
this.emit(type, body);
}
}
/**
* Send a message to connection
*/
@autobind
public send(typeOrPayload: any, payload?: any): void {
const data =
payload === undefined
? typeOrPayload
: {
type: typeOrPayload,
body: payload,
};
this.stream.send(JSON.stringify(data));
}
/**
* Close this connection
*/
@autobind
public close(): void {
this.stream.close();
}
}
// TODO: これらのクラスを Stream クラスの内部クラスにすれば余計なメンバをpublicにしないで済むかも
// もしくは @internal を使う? https://www.typescriptlang.org/tsconfig#stripInternal
class Pool {
public channel: string;
public id: string;
protected stream: Stream;
public users = 0;
private disposeTimerId: any;
private isConnected = false;
constructor(stream: Stream, channel: string, id: string) {
this.channel = channel;
this.stream = stream;
this.id = id;
this.stream.on("_disconnected_", this.onStreamDisconnected);
}
@autobind
private onStreamDisconnected(): void {
this.isConnected = false;
}
@autobind
public inc(): void {
if (this.users === 0 && !this.isConnected) {
this.connect();
}
this.users++;
// タイマー解除
if (this.disposeTimerId) {
clearTimeout(this.disposeTimerId);
this.disposeTimerId = null;
}
}
@autobind
public dec(): void {
this.users--;
// そのコネクションの利用者が誰もいなくなったら
if (this.users === 0) {
// また直ぐに再利用される可能性があるので、一定時間待ち、
// 新たな利用者が現れなければコネクションを切断する
this.disposeTimerId = setTimeout(() => {
this.disconnect();
}, 3000);
}
}
@autobind
public connect(): void {
if (this.isConnected) return;
this.isConnected = true;
this.stream.send("connect", {
channel: this.channel,
id: this.id,
});
}
@autobind
private disconnect(): void {
this.stream.off("_disconnected_", this.onStreamDisconnected);
this.stream.send("disconnect", { id: this.id });
this.stream.removeSharedConnectionPool(this);
}
}
export abstract class Connection<
Channel extends AnyOf<Channels> = any,
> extends EventEmitter<Channel["events"]> {
public channel: string;
protected stream: Stream;
public abstract id: string;
public name?: string; // for debug
public inCount = 0; // for debug
public outCount = 0; // for debug
constructor(stream: Stream, channel: string, name?: string) {
super();
this.stream = stream;
this.channel = channel;
this.name = name;
}
@autobind
public send<T extends keyof Channel["receives"]>(
type: T,
body: Channel["receives"][T],
): void {
this.stream.send("ch", {
id: this.id,
type: type,
body: body,
});
this.outCount++;
}
public abstract dispose(): void;
}
class SharedConnection<
Channel extends AnyOf<Channels> = any,
> extends Connection<Channel> {
private pool: Pool;
public get id(): string {
return this.pool.id;
}
constructor(stream: Stream, channel: string, pool: Pool, name?: string) {
super(stream, channel, name);
this.pool = pool;
this.pool.inc();
}
@autobind
public dispose(): void {
this.pool.dec();
this.removeAllListeners();
this.stream.removeSharedConnection(this);
}
}
class NonSharedConnection<
Channel extends AnyOf<Channels> = any,
> extends Connection<Channel> {
public id: string;
protected params: Channel["params"];
constructor(
stream: Stream,
channel: string,
id: string,
params: Channel["params"],
) {
super(stream, channel);
this.params = params;
this.id = id;
this.connect();
}
@autobind
public connect(): void {
this.stream.send("connect", {
channel: this.channel,
id: this.id,
params: this.params,
});
}
@autobind
public dispose(): void {
this.removeAllListeners();
this.stream.send("disconnect", { id: this.id });
this.stream.disconnectToChannel(this);
}
}

View File

@ -0,0 +1,181 @@
import {
Antenna,
CustomEmoji,
DriveFile,
MeDetailed,
MessagingMessage,
Note,
Notification,
PageEvent,
User,
UserGroup,
} from "./entities";
type FIXME = any;
export type Channels = {
main: {
params: null;
events: {
notification: (payload: Notification) => void;
mention: (payload: Note) => void;
reply: (payload: Note) => void;
renote: (payload: Note) => void;
follow: (payload: User) => void; // 自分が他人をフォローしたとき
followed: (payload: User) => void; // 他人が自分をフォローしたとき
unfollow: (payload: User) => void; // 自分が他人をフォロー解除したとき
meUpdated: (payload: MeDetailed) => void;
pageEvent: (payload: PageEvent) => void;
urlUploadFinished: (payload: { marker: string; file: DriveFile }) => void;
readAllNotifications: () => void;
unreadNotification: (payload: Notification) => void;
unreadMention: (payload: Note["id"]) => void;
readAllUnreadMentions: () => void;
unreadSpecifiedNote: (payload: Note["id"]) => void;
readAllUnreadSpecifiedNotes: () => void;
readAllMessagingMessages: () => void;
messagingMessage: (payload: MessagingMessage) => void;
unreadMessagingMessage: (payload: MessagingMessage) => void;
readAllAntennas: () => void;
unreadAntenna: (payload: Antenna) => void;
readAllAnnouncements: () => void;
readAllChannels: () => void;
unreadChannel: (payload: Note["id"]) => void;
myTokenRegenerated: () => void;
reversiNoInvites: () => void;
reversiInvited: (payload: FIXME) => void;
signin: (payload: FIXME) => void;
registryUpdated: (payload: {
scope?: string[];
key: string;
value: any | null;
}) => void;
driveFileCreated: (payload: DriveFile) => void;
readAntenna: (payload: Antenna) => void;
};
receives: null;
};
homeTimeline: {
params: null;
events: {
note: (payload: Note) => void;
};
receives: null;
};
localTimeline: {
params: null;
events: {
note: (payload: Note) => void;
};
receives: null;
};
hybridTimeline: {
params: null;
events: {
note: (payload: Note) => void;
};
receives: null;
};
recommendedTimeline: {
params: null;
events: {
note: (payload: Note) => void;
};
receives: null;
};
globalTimeline: {
params: null;
events: {
note: (payload: Note) => void;
};
receives: null;
};
messaging: {
params: {
otherparty?: User["id"] | null;
group?: UserGroup["id"] | null;
};
events: {
message: (payload: MessagingMessage) => void;
deleted: (payload: MessagingMessage["id"]) => void;
read: (payload: MessagingMessage["id"][]) => void;
typers: (payload: User[]) => void;
};
receives: {
read: {
id: MessagingMessage["id"];
};
};
};
serverStats: {
params: null;
events: {
stats: (payload: FIXME) => void;
};
receives: {
requestLog: {
id: string | number;
length: number;
};
};
};
queueStats: {
params: null;
events: {
stats: (payload: FIXME) => void;
};
receives: {
requestLog: {
id: string | number;
length: number;
};
};
};
};
export type NoteUpdatedEvent =
| {
id: Note["id"];
type: "reacted";
body: {
reaction: string;
userId: User["id"];
};
}
| {
id: Note["id"];
type: "unreacted";
body: {
reaction: string;
userId: User["id"];
};
}
| {
id: Note["id"];
type: "deleted";
body: {
deletedAt: string;
};
}
| {
id: Note["id"];
type: "pollVoted";
body: {
choice: number;
userId: User["id"];
};
}
| {
id: Note["id"];
type: "replied";
body: {
id: Note["id"];
};
};
export type BroadcastEvents = {
noteUpdated: (payload: NoteUpdatedEvent) => void;
emojiAdded: (payload: {
emoji: CustomEmoji;
}) => void;
};

View File

@ -0,0 +1,48 @@
import { expectType } from "tsd";
import * as Misskey from "../src";
describe("API", () => {
test("success", async () => {
const cli = new Misskey.api.APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
const res = await cli.request("meta", { detail: true });
expectType<Misskey.entities.DetailedInstanceMetadata>(res);
});
test("conditional respose type (meta)", async () => {
const cli = new Misskey.api.APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
const res = await cli.request("meta", { detail: true });
expectType<Misskey.entities.DetailedInstanceMetadata>(res);
const res2 = await cli.request("meta", { detail: false });
expectType<Misskey.entities.LiteInstanceMetadata>(res2);
const res3 = await cli.request("meta", {});
expectType<Misskey.entities.LiteInstanceMetadata>(res3);
const res4 = await cli.request("meta", { detail: true as boolean });
expectType<
| Misskey.entities.LiteInstanceMetadata
| Misskey.entities.DetailedInstanceMetadata
>(res4);
});
test("conditional respose type (users/show)", async () => {
const cli = new Misskey.api.APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
const res = await cli.request("users/show", { userId: "xxxxxxxx" });
expectType<Misskey.entities.UserDetailed>(res);
const res2 = await cli.request("users/show", { userIds: ["xxxxxxxx"] });
expectType<Misskey.entities.UserDetailed[]>(res2);
});
});

View File

@ -0,0 +1,32 @@
import { expectType } from "tsd";
import * as Misskey from "../src";
describe("Streaming", () => {
test("emit type", async () => {
const stream = new Misskey.Stream("https://misskey.test", {
token: "TOKEN",
});
const mainChannel = stream.useChannel("main");
mainChannel.on("notification", (notification) => {
expectType<Misskey.entities.Notification>(notification);
});
});
test("params type", async () => {
const stream = new Misskey.Stream("https://misskey.test", {
token: "TOKEN",
});
// TODO: 「stream.useChannel の第二引数として受け入れる型が
// {
// otherparty?: User['id'] | null;
// group?: UserGroup['id'] | null;
// }
// になっている」というテストを行いたいけどtsdでの書き方がわからない
const messagingChannel = stream.useChannel("messaging", {
otherparty: "aaa",
});
messagingChannel.on("message", (message) => {
expectType<Misskey.entities.MessagingMessage>(message);
});
});
});

View File

@ -0,0 +1,222 @@
import { APIClient, isAPIError } from "../src/api";
import { enableFetchMocks } from "jest-fetch-mock";
enableFetchMocks();
function getFetchCall(call: any[]) {
const { body, method } = call[1];
if (body != null && typeof body != "string") {
throw new Error("invalid body");
}
return {
url: call[0],
method: method,
body: JSON.parse(body as any),
};
}
describe("API", () => {
test("success", async () => {
fetchMock.resetMocks();
fetchMock.mockResponse(async (req) => {
const body = await req.json();
if (req.method == "POST" && req.url == "https://misskey.test/api/i") {
if (body.i === "TOKEN") {
return JSON.stringify({ id: "foo" });
} else {
return { status: 400 };
}
} else {
return { status: 404 };
}
});
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
const res = await cli.request("i");
expect(res).toEqual({
id: "foo",
});
expect(getFetchCall(fetchMock.mock.calls[0])).toEqual({
url: "https://misskey.test/api/i",
method: "POST",
body: { i: "TOKEN" },
});
});
test("with params", async () => {
fetchMock.resetMocks();
fetchMock.mockResponse(async (req) => {
const body = await req.json();
if (
req.method == "POST" &&
req.url == "https://misskey.test/api/notes/show"
) {
if (body.i === "TOKEN" && body.noteId === "aaaaa") {
return JSON.stringify({ id: "foo" });
} else {
return { status: 400 };
}
} else {
return { status: 404 };
}
});
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
const res = await cli.request("notes/show", { noteId: "aaaaa" });
expect(res).toEqual({
id: "foo",
});
expect(getFetchCall(fetchMock.mock.calls[0])).toEqual({
url: "https://misskey.test/api/notes/show",
method: "POST",
body: { i: "TOKEN", noteId: "aaaaa" },
});
});
test("204 No Content で null が返る", async () => {
fetchMock.resetMocks();
fetchMock.mockResponse(async (req) => {
if (
req.method == "POST" &&
req.url == "https://misskey.test/api/reset-password"
) {
return { status: 204 };
} else {
return { status: 404 };
}
});
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
const res = await cli.request("reset-password", {
token: "aaa",
password: "aaa",
});
expect(res).toEqual(null);
expect(getFetchCall(fetchMock.mock.calls[0])).toEqual({
url: "https://misskey.test/api/reset-password",
method: "POST",
body: { i: "TOKEN", token: "aaa", password: "aaa" },
});
});
test("インスタンスの credential が指定されていても引数で credential が null ならば null としてリクエストされる", async () => {
fetchMock.resetMocks();
fetchMock.mockResponse(async (req) => {
const body = await req.json();
if (req.method == "POST" && req.url == "https://misskey.test/api/i") {
if (typeof body.i === "string") {
return JSON.stringify({ id: "foo" });
} else {
return {
status: 401,
body: JSON.stringify({
error: {
message: "Credential required.",
code: "CREDENTIAL_REQUIRED",
id: "1384574d-a912-4b81-8601-c7b1c4085df1",
},
}),
};
}
} else {
return { status: 404 };
}
});
try {
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
await cli.request("i", {}, null);
} catch (e) {
expect(isAPIError(e)).toEqual(true);
}
});
test("api error", async () => {
fetchMock.resetMocks();
fetchMock.mockResponse(async (req) => {
return {
status: 500,
body: JSON.stringify({
error: {
message:
"Internal error occurred. Please contact us if the error persists.",
code: "INTERNAL_ERROR",
id: "5d37dbcb-891e-41ca-a3d6-e690c97775ac",
kind: "server",
},
}),
};
});
try {
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
await cli.request("i");
} catch (e: any) {
expect(isAPIError(e)).toEqual(true);
expect(e.id).toEqual("5d37dbcb-891e-41ca-a3d6-e690c97775ac");
}
});
test("network error", async () => {
fetchMock.resetMocks();
fetchMock.mockAbort();
try {
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
await cli.request("i");
} catch (e) {
expect(isAPIError(e)).toEqual(false);
}
});
test("json parse error", async () => {
fetchMock.resetMocks();
fetchMock.mockResponse(async (req) => {
return {
status: 500,
body: "<html>I AM NOT JSON</html>",
};
});
try {
const cli = new APIClient({
origin: "https://misskey.test",
credential: "TOKEN",
});
await cli.request("i");
} catch (e) {
expect(isAPIError(e)).toEqual(false);
}
});
});

View File

@ -0,0 +1,181 @@
import WS from "jest-websocket-mock";
import Stream from "../src/streaming";
describe("Streaming", () => {
test("useChannel", async () => {
const server = new WS("wss://misskey.test/streaming");
const stream = new Stream("https://misskey.test", { token: "TOKEN" });
const mainChannelReceived: any[] = [];
const main = stream.useChannel("main");
main.on("meUpdated", (payload) => {
mainChannelReceived.push(payload);
});
const ws = await server.connected;
expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
"TOKEN",
);
const msg = JSON.parse((await server.nextMessage) as string);
const mainChannelId = msg.body.id;
expect(msg.type).toEqual("connect");
expect(msg.body.channel).toEqual("main");
expect(mainChannelId != null).toEqual(true);
server.send(
JSON.stringify({
type: "channel",
body: {
id: mainChannelId,
type: "meUpdated",
body: {
id: "foo",
},
},
}),
);
expect(mainChannelReceived[0]).toEqual({
id: "foo",
});
stream.close();
server.close();
});
test("useChannel with parameters", async () => {
const server = new WS("wss://misskey.test/streaming");
const stream = new Stream("https://misskey.test", { token: "TOKEN" });
const messagingChannelReceived: any[] = [];
const messaging = stream.useChannel("messaging", { otherparty: "aaa" });
messaging.on("message", (payload) => {
messagingChannelReceived.push(payload);
});
const ws = await server.connected;
expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
"TOKEN",
);
const msg = JSON.parse((await server.nextMessage) as string);
const messagingChannelId = msg.body.id;
expect(msg.type).toEqual("connect");
expect(msg.body.channel).toEqual("messaging");
expect(msg.body.params).toEqual({ otherparty: "aaa" });
expect(messagingChannelId != null).toEqual(true);
server.send(
JSON.stringify({
type: "channel",
body: {
id: messagingChannelId,
type: "message",
body: {
id: "foo",
},
},
}),
);
expect(messagingChannelReceived[0]).toEqual({
id: "foo",
});
stream.close();
server.close();
});
test("ちゃんとチャンネルごとにidが異なる", async () => {
const server = new WS("wss://misskey.test/streaming");
const stream = new Stream("https://misskey.test", { token: "TOKEN" });
stream.useChannel("messaging", { otherparty: "aaa" });
stream.useChannel("messaging", { otherparty: "bbb" });
const ws = await server.connected;
expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
"TOKEN",
);
const msg = JSON.parse((await server.nextMessage) as string);
const messagingChannelId = msg.body.id;
const msg2 = JSON.parse((await server.nextMessage) as string);
const messagingChannelId2 = msg2.body.id;
expect(messagingChannelId != null).toEqual(true);
expect(messagingChannelId2 != null).toEqual(true);
expect(messagingChannelId).not.toEqual(messagingChannelId2);
stream.close();
server.close();
});
test("Connection#send", async () => {
const server = new WS("wss://misskey.test/streaming");
const stream = new Stream("https://misskey.test", { token: "TOKEN" });
const messaging = stream.useChannel("messaging", { otherparty: "aaa" });
messaging.send("read", { id: "aaa" });
const ws = await server.connected;
expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
"TOKEN",
);
const connectMsg = JSON.parse((await server.nextMessage) as string);
const channelId = connectMsg.body.id;
const msg = JSON.parse((await server.nextMessage) as string);
expect(msg.type).toEqual("ch");
expect(msg.body.id).toEqual(channelId);
expect(msg.body.type).toEqual("read");
expect(msg.body.body).toEqual({ id: "aaa" });
stream.close();
server.close();
});
test("Connection#dispose", async () => {
const server = new WS("wss://misskey.test/streaming");
const stream = new Stream("https://misskey.test", { token: "TOKEN" });
const mainChannelReceived: any[] = [];
const main = stream.useChannel("main");
main.on("meUpdated", (payload) => {
mainChannelReceived.push(payload);
});
const ws = await server.connected;
expect(new URLSearchParams(new URL(ws.url).search).get("i")).toEqual(
"TOKEN",
);
const msg = JSON.parse((await server.nextMessage) as string);
const mainChannelId = msg.body.id;
expect(msg.type).toEqual("connect");
expect(msg.body.channel).toEqual("main");
expect(mainChannelId != null).toEqual(true);
main.dispose();
server.send(
JSON.stringify({
type: "channel",
body: {
id: mainChannelId,
type: "meUpdated",
body: {
id: "foo",
},
},
}),
);
expect(mainChannelReceived.length).toEqual(0);
stream.close();
server.close();
});
// TODO: SharedConnection#dispose して一定時間経ったら disconnect メッセージがサーバーに送られてくるかのテスト
// TODO: チャンネル接続が使いまわされるかのテスト
});

View File

@ -0,0 +1,25 @@
{
"$schema": "http://json.schemastore.org/tsconfig",
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "./built/",
"removeComments": true,
"strict": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"experimentalDecorators": true,
"noImplicitReturns": true,
"esModuleInterop": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"test/**/*"
]
}

View File

@ -0,0 +1,15 @@
{
"tabWidth": 4,
"useTabs": true,
"singleQuote": false,
"vueIndentScriptAndStyle": false,
"plugins": ["vue"],
"overrides": [
{
"files": "*.vue",
"options": {
"parser": "vue"
}
}
]
}

View File

@ -4,7 +4,8 @@
"scripts": {
"watch": "pnpm vite build --watch --mode development",
"build": "pnpm vite build",
"lint": "pnpm rome check \"src/**/*.{ts,vue}\""
"lint": "pnpm rome check \"src/**/*.{ts,vue}\"",
"format": "pnpm prettier --write '**/*.vue'"
},
"devDependencies": {
"@discordapp/twemoji": "14.0.2",
@ -32,7 +33,7 @@
"blurhash": "1.1.5",
"broadcast-channel": "4.19.1",
"browser-image-resizer": "https://github.com/misskey-dev/browser-image-resizer.git",
"calckey-js": "^0.0.22",
"calckey-js": "workspace:*",
"chart.js": "4.1.1",
"chartjs-adapter-date-fns": "2.0.1",
"chartjs-chart-matrix": "^2.0.1",
@ -54,6 +55,8 @@
"matter-js": "0.18.0",
"mfm-js": "0.23.2",
"photoswipe": "5.3.4",
"prettier": "2.8.7",
"prettier-plugin-vue": "1.1.6",
"prismjs": "1.29.0",
"punycode": "2.1.1",
"querystring": "0.2.1",

View File

@ -1,64 +1,93 @@
<template>
<div class="bcekxzvu _gap _panel">
<div class="target">
<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
<div class="names">
<MkUserName class="name" :user="report.targetUser"/>
<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
<div class="bcekxzvu _gap _panel">
<div class="target">
<MkA
v-user-preview="report.targetUserId"
class="info"
:to="`/user-info/${report.targetUserId}`"
>
<MkAvatar
class="avatar"
:user="report.targetUser"
:show-indicator="true"
:disable-link="true"
/>
<div class="names">
<MkUserName class="name" :user="report.targetUser" />
<MkAcct
class="acct"
:user="report.targetUser"
style="display: block"
/>
</div>
</MkA>
<MkKeyValue class="_formBlock">
<template #key>{{ i18n.ts.registeredDate }}</template>
<template #value
>{{
new Date(report.targetUser.createdAt).toLocaleString()
}}
(<MkTime :time="report.targetUser.createdAt" />)</template
>
</MkKeyValue>
</div>
<div class="detail">
<div>
<Mfm :text="report.comment" />
</div>
<hr />
<div>
{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter" />
</div>
<div v-if="report.assignee">
{{ i18n.ts.moderator }}:
<MkAcct :user="report.assignee" />
</div>
<div><MkTime :time="report.createdAt" /></div>
<div class="action">
<MkSwitch
v-model="forward"
:disabled="
report.targetUser.host == null || report.resolved
"
>
{{ i18n.ts.forwardReport }}
<template #caption>{{
i18n.ts.forwardReportIsAnonymous
}}</template>
</MkSwitch>
<MkButton v-if="!report.resolved" primary @click="resolve">{{
i18n.ts.abuseMarkAsResolved
}}</MkButton>
</div>
</MkA>
<MkKeyValue class="_formBlock">
<template #key>{{ i18n.ts.registeredDate }}</template>
<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
</MkKeyValue>
</div>
<div class="detail">
<div>
<Mfm :text="report.comment"/>
</div>
<hr/>
<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
<div v-if="report.assignee">
{{ i18n.ts.moderator }}:
<MkAcct :user="report.assignee"/>
</div>
<div><MkTime :time="report.createdAt"/></div>
<div class="action">
<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
{{ i18n.ts.forwardReport }}
<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
</MkSwitch>
<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import MkButton from '@/components/MkButton.vue';
import MkSwitch from '@/components/form/switch.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
import { acct, userPage } from '@/filters/user';
import * as os from '@/os';
import { i18n } from '@/i18n';
import MkButton from "@/components/MkButton.vue";
import MkSwitch from "@/components/form/switch.vue";
import MkKeyValue from "@/components/MkKeyValue.vue";
import { acct, userPage } from "@/filters/user";
import * as os from "@/os";
import { i18n } from "@/i18n";
const props = defineProps<{
report: any;
}>();
const emit = defineEmits<{
(ev: 'resolved', reportId: string): void;
(ev: "resolved", reportId: string): void;
}>();
let forward = $ref(props.report.forwarded);
function resolve() {
os.apiWithDialog('admin/resolve-abuse-user-report', {
os.apiWithDialog("admin/resolve-abuse-user-report", {
forward: forward,
reportId: props.report.id,
}).then(() => {
emit('resolved', props.report.id);
emit("resolved", props.report.id);
});
}
</script>
@ -81,7 +110,16 @@ function resolve() {
padding: 14px;
border-radius: 8px;
--c: rgb(255 196 0 / 15%);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-image: linear-gradient(
45deg,
var(--c) 16.67%,
transparent 16.67%,
transparent 50%,
var(--c) 50%,
var(--c) 66.67%,
transparent 66.67%,
transparent 100%
);
background-size: 16px 16px;
> .avatar {

View File

@ -1,35 +1,52 @@
<template>
<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
<template #header>
<i class="ph-warning-circle ph-bold ph-lg" style="margin-right: 0.5em;"></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
<template #name>
<b><MkAcct :user="user"/></b>
</template>
</I18n>
</template>
<div class="dpvffvvy _monolithic_">
<div class="_section">
<MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template>
<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
</MkTextarea>
<XWindow
ref="uiWindow"
:initial-width="400"
:initial-height="500"
:can-resize="true"
@closed="emit('closed')"
>
<template #header>
<i
class="ph-warning-circle ph-bold ph-lg"
style="margin-right: 0.5em"
></i>
<I18n :src="i18n.ts.reportAbuseOf" tag="span">
<template #name>
<b><MkAcct :user="user" /></b>
</template>
</I18n>
</template>
<div class="dpvffvvy _monolithic_">
<div class="_section">
<MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template>
<template #caption>{{
i18n.ts.fillAbuseReportDescription
}}</template>
</MkTextarea>
</div>
<div class="_section">
<MkButton
primary
full
:disabled="comment.length === 0"
@click="send"
>{{ i18n.ts.send }}</MkButton
>
</div>
</div>
<div class="_section">
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
</div>
</div>
</XWindow>
</XWindow>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import * as Misskey from 'calckey-js';
import XWindow from '@/components/MkWindow.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { ref } from "vue";
import * as Misskey from "calckey-js";
import XWindow from "@/components/MkWindow.vue";
import MkTextarea from "@/components/form/textarea.vue";
import MkButton from "@/components/MkButton.vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
const props = defineProps<{
user: Misskey.entities.User;
@ -37,23 +54,27 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: "closed"): void;
}>();
const uiWindow = ref<InstanceType<typeof XWindow>>();
const comment = ref(props.initialComment || '');
const comment = ref(props.initialComment || "");
function send() {
os.apiWithDialog('users/report-abuse', {
userId: props.user.id,
comment: comment.value,
}, undefined).then(res => {
os.apiWithDialog(
"users/report-abuse",
{
userId: props.user.id,
comment: comment.value,
},
undefined
).then((res) => {
os.alert({
type: 'success',
text: i18n.ts.abuseReported
type: "success",
text: i18n.ts.abuseReported,
});
uiWindow.value?.close();
emit('closed');
emit("closed");
});
}
</script>

View File

@ -1,32 +1,62 @@
<template>
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<template v-if="props.graduations === 'dots'">
<circle
v-for="(angle, i) in graduationsMajor"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="0.125"
:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
/>
</template>
<template v-else-if="props.graduations === 'numbers'">
<text
v-for="(angle, i) in texts"
:x="5 + (Math.sin(angle) * (5 - textsPadding))"
:y="5 - (Math.cos(angle) * (5 - textsPadding))"
text-anchor="middle"
dominant-baseline="middle"
:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
>
{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
</text>
</template>
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<template v-if="props.graduations === 'dots'">
<circle
v-for="(angle, i) in graduationsMajor"
:cx="5 + Math.sin(angle) * (5 - graduationsPadding)"
:cy="5 - Math.cos(angle) * (5 - graduationsPadding)"
:r="0.125"
:fill="
(props.twentyfour ? h : h % 12) === i
? nowColor
: majorGraduationColor
"
:opacity="
!props.fadeGraduations ||
(props.twentyfour ? h : h % 12) === i
? 1
: Math.max(
0,
1 -
angleDiff(hAngle, angle) / Math.PI -
numbersOpacityFactor
)
"
/>
</template>
<template v-else-if="props.graduations === 'numbers'">
<text
v-for="(angle, i) in texts"
:x="5 + Math.sin(angle) * (5 - textsPadding)"
:y="5 - Math.cos(angle) * (5 - textsPadding)"
text-anchor="middle"
dominant-baseline="middle"
:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
:font-weight="
(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'
"
:fill="
(props.twentyfour ? h : h % 12) === i
? nowColor
: 'currentColor'
"
:opacity="
!props.fadeGraduations ||
(props.twentyfour ? h : h % 12) === i
? 1
: Math.max(
0,
1 -
angleDiff(hAngle, angle) / Math.PI -
numbersOpacityFactor
)
"
>
{{ i === 0 ? (props.twentyfour ? "24" : "12") : i }}
</text>
</template>
<!--
<!--
<line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -38,50 +68,61 @@
/>
-->
<line
class="s"
:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
:stroke="sHandColor"
:stroke-width="thickness / 2"
:style="`transform: rotateZ(${sAngle}rad)`"
stroke-linecap="round"
/>
<line
class="s"
:class="{
animate: !disableSAnimate && sAnimation !== 'none',
elastic: sAnimation === 'elastic',
easeOut: sAnimation === 'easeOut',
}"
:x1="5 - 0 * (sHandLengthRatio * handsTailLength)"
:y1="5 + 1 * (sHandLengthRatio * handsTailLength)"
:x2="5 + 0 * (sHandLengthRatio * 5 - handsPadding)"
:y2="5 - 1 * (sHandLengthRatio * 5 - handsPadding)"
:stroke="sHandColor"
:stroke-width="thickness / 2"
:style="`transform: rotateZ(${sAngle}rad)`"
stroke-linecap="round"
/>
<line
:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:stroke="mHandColor"
:stroke-width="thickness"
stroke-linecap="round"
/>
<line
:x1="5 - Math.sin(mAngle) * (mHandLengthRatio * handsTailLength)"
:y1="5 + Math.cos(mAngle) * (mHandLengthRatio * handsTailLength)"
:x2="5 + Math.sin(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
:y2="5 - Math.cos(mAngle) * (mHandLengthRatio * 5 - handsPadding)"
:stroke="mHandColor"
:stroke-width="thickness"
stroke-linecap="round"
/>
<line
:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:stroke="hHandColor"
:stroke-width="thickness"
stroke-linecap="round"
/>
</svg>
<line
:x1="5 - Math.sin(hAngle) * (hHandLengthRatio * handsTailLength)"
:y1="5 + Math.cos(hAngle) * (hHandLengthRatio * handsTailLength)"
:x2="5 + Math.sin(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
:y2="5 - Math.cos(hAngle) * (hHandLengthRatio * 5 - handsPadding)"
:stroke="hHandColor"
:stroke-width="thickness"
stroke-linecap="round"
/>
</svg>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
import tinycolor from 'tinycolor2';
import { globalEvents } from '@/events.js';
import {
ref,
computed,
onMounted,
onBeforeUnmount,
shallowRef,
nextTick,
} from "vue";
import tinycolor from "tinycolor2";
import { globalEvents } from "@/events.js";
// https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
const angleDiff = (a: number, b: number) => {
const x = Math.abs(a - b);
return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
return Math.abs(((x + Math.PI) % (Math.PI * 2)) - Math.PI);
};
const graduationsPadding = 0.5;
@ -93,28 +134,31 @@ const mHandLengthRatio = 1;
const sHandLengthRatio = 1;
const numbersOpacityFactor = 0.35;
const props = withDefaults(defineProps<{
thickness?: number;
offset?: number;
twentyfour?: boolean;
graduations?: 'none' | 'dots' | 'numbers';
fadeGraduations?: boolean;
sAnimation?: 'none' | 'elastic' | 'easeOut';
}>(), {
numbers: false,
thickness: 0.1,
offset: 0 - new Date().getTimezoneOffset(),
twentyfour: false,
graduations: 'dots',
fadeGraduations: true,
sAnimation: 'elastic',
});
const props = withDefaults(
defineProps<{
thickness?: number;
offset?: number;
twentyfour?: boolean;
graduations?: "none" | "dots" | "numbers";
fadeGraduations?: boolean;
sAnimation?: "none" | "elastic" | "easeOut";
}>(),
{
numbers: false,
thickness: 0.1,
offset: 0 - new Date().getTimezoneOffset(),
twentyfour: false,
graduations: "dots",
fadeGraduations: true,
sAnimation: "elastic",
}
);
const graduationsMajor = computed(() => {
const angles: number[] = [];
const times = props.twentyfour ? 24 : 12;
for (let i = 0; i < times; i++) {
const angle = Math.PI * i / (times / 2);
const angle = (Math.PI * i) / (times / 2);
angles.push(angle);
}
return angles;
@ -123,7 +167,7 @@ const texts = computed(() => {
const angles: number[] = [];
const times = props.twentyfour ? 24 : 12;
for (let i = 0; i < times; i++) {
const angle = Math.PI * i / (times / 2);
const angle = (Math.PI * i) / (times / 2);
angles.push(angle);
}
return angles;
@ -147,14 +191,19 @@ let sOneRound = false;
function tick() {
const now = new Date();
now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
now.setMinutes(
now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
);
s = now.getSeconds();
m = now.getMinutes();
h = now.getHours();
hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
mAngle = Math.PI * (m + s / 60) / 30;
if (sOneRound) { // (59->0)
sAngle = Math.PI * 60 / 30;
hAngle =
(Math.PI * ((h % (props.twentyfour ? 24 : 12)) + (m + s / 60) / 60)) /
(props.twentyfour ? 12 : 6);
mAngle = (Math.PI * (m + s / 60)) / 30;
if (sOneRound) {
// (59->0)
sAngle = (Math.PI * 60) / 30;
window.setTimeout(() => {
disableSAnimate = true;
window.setTimeout(() => {
@ -165,7 +214,7 @@ function tick() {
}, 100);
}, 700);
} else {
sAngle = Math.PI * s / 30;
sAngle = (Math.PI * s) / 30;
}
sOneRound = s === 59;
}
@ -174,12 +223,18 @@ tick();
function calcColors() {
const computedStyle = getComputedStyle(document.documentElement);
const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
const dark = tinycolor(computedStyle.getPropertyValue("--bg")).isDark();
const accent = tinycolor(
computedStyle.getPropertyValue("--accent")
).toHexString();
majorGraduationColor = dark
? "rgba(255, 255, 255, 0.3)"
: "rgba(0, 0, 0, 0.3)";
//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
sHandColor = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
mHandColor = tinycolor(
computedStyle.getPropertyValue("--fg")
).toHexString();
hHandColor = accent;
nowColor = accent;
}
@ -195,13 +250,13 @@ onMounted(() => {
};
update();
globalEvents.on('themeChanged', calcColors);
globalEvents.on("themeChanged", calcColors);
});
onBeforeUnmount(() => {
enabled = false;
globalEvents.off('themeChanged', calcColors);
globalEvents.off("themeChanged", calcColors);
});
</script>
@ -214,11 +269,11 @@ onBeforeUnmount(() => {
transform-origin: 50% 50%;
&.animate.elastic {
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
}
&.animate.easeOut {
transition: transform .7s cubic-bezier(0,.7,.3,1);
transition: transform 0.7s cubic-bezier(0, 0.7, 0.3, 1);
}
}
}

View File

@ -1,49 +1,107 @@
<template>
<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
<ol v-if="type === 'user'" ref="suggests" class="users">
<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
<img class="avatar" :src="user.avatarUrl"/>
<span class="name">
<MkUserName :key="user.id" :user="user"/>
</span>
<span class="username">@{{ acct(user) }}</span>
</li>
<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
</ol>
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
<span class="name">{{ hashtag }}</span>
</li>
</ol>
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
<span v-else class="emoji">{{ emoji.emoji }}</span>
<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
</li>
</ol>
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
<span class="tag">{{ tag }}</span>
</li>
</ol>
</div>
<div
ref="rootEl"
class="swhvrteh _popup _shadow"
:style="{ zIndex }"
@contextmenu.prevent="() => {}"
>
<ol v-if="type === 'user'" ref="suggests" class="users">
<li
v-for="user in users"
tabindex="-1"
class="user"
@click="complete(type, user)"
@keydown="onKeydown"
>
<img class="avatar" :src="user.avatarUrl" />
<span class="name">
<MkUserName :key="user.id" :user="user" />
</span>
<span class="username">@{{ acct(user) }}</span>
</li>
<li
tabindex="-1"
class="choose"
@click="chooseUser()"
@keydown="onKeydown"
>
{{ i18n.ts.selectUser }}
</li>
</ol>
<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
<li
v-for="hashtag in hashtags"
tabindex="-1"
@click="complete(type, hashtag)"
@keydown="onKeydown"
>
<span class="name">{{ hashtag }}</span>
</li>
</ol>
<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
<li
v-for="emoji in emojis"
tabindex="-1"
@click="complete(type, emoji.emoji)"
@keydown="onKeydown"
>
<span v-if="emoji.isCustomEmoji" class="emoji"
><img
:src="
defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(emoji.url)
: emoji.url
"
:alt="emoji.emoji"
/></span>
<span
v-else-if="!defaultStore.state.useOsNativeEmojis"
class="emoji"
><img :src="emoji.url" :alt="emoji.emoji"
/></span>
<span v-else class="emoji">{{ emoji.emoji }}</span>
<span
class="name"
v-html="emoji.name.replace(q, `<b>${q}</b>`)"
></span>
<span v-if="emoji.aliasOf" class="alias"
>({{ emoji.aliasOf }})</span
>
</li>
</ol>
<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
<li
v-for="tag in mfmTags"
tabindex="-1"
@click="complete(type, tag)"
@keydown="onKeydown"
>
<span class="tag">{{ tag }}</span>
</li>
</ol>
</div>
</template>
<script lang="ts">
import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import contains from '@/scripts/contains';
import { char2filePath } from '@/scripts/twemoji-base';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import { acct } from '@/filters/user';
import * as os from '@/os';
import { MFM_TAGS } from '@/scripts/mfm-tags';
import { defaultStore } from '@/store';
import { emojilist } from '@/scripts/emojilist';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
import {
markRaw,
ref,
onUpdated,
onMounted,
onBeforeUnmount,
nextTick,
watch,
} from "vue";
import contains from "@/scripts/contains";
import { char2filePath } from "@/scripts/twemoji-base";
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import { acct } from "@/filters/user";
import * as os from "@/os";
import { MFM_TAGS } from "@/scripts/mfm-tags";
import { defaultStore } from "@/store";
import { emojilist } from "@/scripts/emojilist";
import { instance } from "@/instance";
import { i18n } from "@/i18n";
type EmojiDef = {
emoji: string;
@ -53,9 +111,9 @@ type EmojiDef = {
isCustomEmoji?: boolean;
};
const lib = emojilist.filter(x => x.category !== 'flags');
const lib = emojilist.filter((x) => x.category !== "flags");
const emjdb: EmojiDef[] = lib.map(x => ({
const emjdb: EmojiDef[] = lib.map((x) => ({
emoji: x.char,
name: x.name,
url: char2filePath(x.char),
@ -85,7 +143,7 @@ for (const x of customEmojis) {
name: x.name,
emoji: `:${x.name}:`,
url: x.url,
isCustomEmoji: true
isCustomEmoji: true,
});
if (x.aliases) {
@ -95,7 +153,7 @@ for (const x of customEmojis) {
aliasOf: x.name,
emoji: `:${x.name}:`,
url: x.url,
isCustomEmoji: true
isCustomEmoji: true,
});
}
}
@ -125,8 +183,8 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(event: 'done', value: { type: string; value: any }): void;
(event: 'closed'): void;
(event: "done", value: { type: string; value: any }): void;
(event: "closed"): void;
}>();
const suggests = ref<Element>();
@ -135,36 +193,37 @@ const rootEl = ref<HTMLDivElement>();
const fetching = ref(true);
const users = ref<any[]>([]);
const hashtags = ref<any[]>([]);
const emojis = ref<(EmojiDef)[]>([]);
const emojis = ref<EmojiDef[]>([]);
const items = ref<Element[] | HTMLCollection>([]);
const mfmTags = ref<string[]>([]);
const select = ref(-1);
const zIndex = os.claimZIndex('high');
const zIndex = os.claimZIndex("high");
function complete(type: string, value: any) {
emit('done', { type, value });
emit('closed');
if (type === 'emoji') {
emit("done", { type, value });
emit("closed");
if (type === "emoji") {
let recents = defaultStore.state.recentlyUsedEmojis;
recents = recents.filter((emoji: any) => emoji !== value);
recents.unshift(value);
defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
}
}
function setPosition() {
if (!rootEl.value) return;
if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
rootEl.value.style.left =
window.innerWidth - rootEl.value.offsetWidth + "px";
} else {
rootEl.value.style.left = `${props.x}px`;
}
if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
rootEl.value.style.marginTop = '0';
rootEl.value.style.top = props.y - rootEl.value.offsetHeight + "px";
rootEl.value.style.marginTop = "0";
} else {
rootEl.value.style.top = props.y + 'px';
rootEl.value.style.marginTop = 'calc(1em + 8px)';
rootEl.value.style.top = props.y + "px";
rootEl.value.style.marginTop = "calc(1em + 8px)";
}
}
@ -172,10 +231,10 @@ function exec() {
select.value = -1;
if (suggests.value) {
for (const el of Array.from(items.value)) {
el.removeAttribute('data-selected');
el.removeAttribute("data-selected");
}
}
if (props.type === 'user') {
if (props.type === "user") {
if (!props.q) {
users.value = [];
fetching.value = false;
@ -189,20 +248,22 @@ function exec() {
users.value = JSON.parse(cache);
fetching.value = false;
} else {
os.api('users/search-by-username-and-host', {
os.api("users/search-by-username-and-host", {
username: props.q,
limit: 10,
detail: false
}).then(searchedUsers => {
detail: false,
}).then((searchedUsers) => {
users.value = searchedUsers as any[];
fetching.value = false;
//
sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
});
}
} else if (props.type === 'hashtag') {
if (!props.q || props.q === '') {
hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
} else if (props.type === "hashtag") {
if (!props.q || props.q === "") {
hashtags.value = JSON.parse(
localStorage.getItem("hashtags") || "[]"
);
fetching.value = false;
} else {
const cacheKey = `autocomplete:hashtag:${props.q}`;
@ -212,59 +273,80 @@ function exec() {
hashtags.value = hashtags;
fetching.value = false;
} else {
os.api('hashtags/search', {
os.api("hashtags/search", {
query: props.q,
limit: 30
}).then(searchedHashtags => {
limit: 30,
}).then((searchedHashtags) => {
hashtags.value = searchedHashtags as any[];
fetching.value = false;
//
sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
sessionStorage.setItem(
cacheKey,
JSON.stringify(searchedHashtags)
);
});
}
}
} else if (props.type === 'emoji') {
if (!props.q || props.q === '') {
} else if (props.type === "emoji") {
if (!props.q || props.q === "") {
// 使
emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
emojis.value = defaultStore.state.recentlyUsedEmojis
.map((emoji) =>
emojiDb.find((dbEmoji) => dbEmoji.emoji === emoji)
)
.filter((x) => x) as EmojiDef[];
return;
}
const matched: EmojiDef[] = [];
const max = 30;
emojiDb.some(x => {
if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
emojiDb.some((x) => {
if (
x.name.startsWith(props.q ?? "") &&
!x.aliasOf &&
!matched.some((y) => y.emoji === x.emoji)
)
matched.push(x);
return matched.length === max;
});
if (matched.length < max) {
emojiDb.some(x => {
if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
emojiDb.some((x) => {
if (
x.name.startsWith(props.q ?? "") &&
!matched.some((y) => y.emoji === x.emoji)
)
matched.push(x);
return matched.length === max;
});
}
if (matched.length < max) {
emojiDb.some(x => {
if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
emojiDb.some((x) => {
if (
x.name.includes(props.q ?? "") &&
!matched.some((y) => y.emoji === x.emoji)
)
matched.push(x);
return matched.length === max;
});
}
emojis.value = matched;
} else if (props.type === 'mfmTag') {
if (!props.q || props.q === '') {
} else if (props.type === "mfmTag") {
if (!props.q || props.q === "") {
mfmTags.value = MFM_TAGS;
return;
}
mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
mfmTags.value = MFM_TAGS.filter((tag) => tag.startsWith(props.q ?? ""));
}
}
function onMousedown(event: Event) {
if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
if (!contains(rootEl.value, event.target) && rootEl.value !== event.target)
props.close();
}
function onKeydown(event: KeyboardEvent) {
@ -274,7 +356,7 @@ function onKeydown(event: KeyboardEvent) {
};
switch (event.key) {
case 'Enter':
case "Enter":
if (select.value !== -1) {
cancel();
(items.value[select.value] as any).click();
@ -283,12 +365,12 @@ function onKeydown(event: KeyboardEvent) {
}
break;
case 'Escape':
case "Escape":
cancel();
props.close();
break;
case 'ArrowUp':
case "ArrowUp":
if (select.value !== -1) {
cancel();
selectPrev();
@ -297,8 +379,8 @@ function onKeydown(event: KeyboardEvent) {
}
break;
case 'Tab':
case 'ArrowDown':
case "Tab":
case "ArrowDown":
cancel();
selectNext();
break;
@ -322,19 +404,19 @@ function selectPrev() {
function applySelect() {
for (const el of Array.from(items.value)) {
el.removeAttribute('data-selected');
el.removeAttribute("data-selected");
}
if (select.value !== -1) {
items.value[select.value].setAttribute('data-selected', 'true');
items.value[select.value].setAttribute("data-selected", "true");
(items.value[select.value] as any).focus();
}
}
function chooseUser() {
props.close();
os.selectUser().then(user => {
complete('user', user);
os.selectUser().then((user) => {
complete("user", user);
props.textarea.focus();
});
}
@ -347,28 +429,31 @@ onUpdated(() => {
onMounted(() => {
setPosition();
props.textarea.addEventListener('keydown', onKeydown);
props.textarea.addEventListener("keydown", onKeydown);
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.addEventListener('mousedown', onMousedown);
for (const el of Array.from(document.querySelectorAll("body *"))) {
el.addEventListener("mousedown", onMousedown);
}
nextTick(() => {
exec();
watch(() => props.q, () => {
nextTick(() => {
exec();
});
});
watch(
() => props.q,
() => {
nextTick(() => {
exec();
});
}
);
});
});
onBeforeUnmount(() => {
props.textarea.removeEventListener('keydown', onKeydown);
props.textarea.removeEventListener("keydown", onKeydown);
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.removeEventListener('mousedown', onMousedown);
for (const el of Array.from(document.querySelectorAll("body *"))) {
el.removeEventListener("mousedown", onMousedown);
}
});
</script>
@ -399,7 +484,8 @@ onBeforeUnmount(() => {
font-size: 0.9em;
cursor: default;
&, * {
&,
* {
user-select: none;
}
@ -412,10 +498,11 @@ onBeforeUnmount(() => {
background: var(--X3);
}
&[data-selected='true'] {
&[data-selected="true"] {
background: var(--accent);
&, * {
&,
* {
color: #fff !important;
}
}
@ -423,7 +510,8 @@ onBeforeUnmount(() => {
&:active {
background: var(--accentDarken);
&, * {
&,
* {
color: #fff !important;
}
}
@ -431,7 +519,6 @@ onBeforeUnmount(() => {
}
> .users > li {
.avatar {
min-width: 28px;
min-height: 28px;
@ -447,7 +534,6 @@ onBeforeUnmount(() => {
}
> .emojis > li {
.emoji {
display: inline-block;
margin: 0 4px 0 0;
@ -465,7 +551,6 @@ onBeforeUnmount(() => {
}
> .mfmTags > li {
.name {
}
}

View File

@ -1,14 +1,14 @@
<template>
<div class="defgtij">
<div v-for="user in users" :key="user.id" class="avatar-holder">
<MkAvatar :user="user" :show-indicator="true" class="avatar"/>
<div class="defgtij">
<div v-for="user in users" :key="user.id" class="avatar-holder">
<MkAvatar :user="user" :show-indicator="true" class="avatar" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as os from '@/os';
import { onMounted, ref } from "vue";
import * as os from "@/os";
const props = defineProps<{
userIds: string[];
@ -17,8 +17,8 @@ const props = defineProps<{
const users = ref([]);
onMounted(async () => {
users.value = await os.api('users/show', {
userIds: props.userIds
users.value = await os.api("users/show", {
userIds: props.userIds,
});
});
</script>

View File

@ -1,34 +1,36 @@
<template>
<button
v-if="!link" class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:type="type"
@click="emit('click', $event)"
@mousedown="onMousedown"
>
<div ref="ripples" class="ripples"></div>
<div class="content">
<slot></slot>
</div>
</button>
<MkA
v-else class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:to="to"
@mousedown="onMousedown"
>
<div ref="ripples" class="ripples"></div>
<div class="content">
<slot></slot>
</div>
</MkA>
<button
v-if="!link"
class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:type="type"
@click="emit('click', $event)"
@mousedown="onMousedown"
>
<div ref="ripples" class="ripples"></div>
<div class="content">
<slot></slot>
</div>
</button>
<MkA
v-else
class="bghgjjyj _button"
:class="{ inline, primary, gradate, danger, rounded, full }"
:to="to"
@mousedown="onMousedown"
>
<div ref="ripples" class="ripples"></div>
<div class="content">
<slot></slot>
</div>
</MkA>
</template>
<script lang="ts" setup>
import { nextTick, onMounted } from 'vue';
import { nextTick, onMounted } from "vue";
const props = defineProps<{
type?: 'button' | 'submit' | 'reset';
type?: "button" | "submit" | "reset";
primary?: boolean;
gradate?: boolean;
rounded?: boolean;
@ -42,7 +44,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'click', payload: MouseEvent): void;
(ev: "click", payload: MouseEvent): void;
}>();
let el = $ref<HTMLElement | null>(null);
@ -73,23 +75,28 @@ function onMousedown(evt: MouseEvent): void {
const target = evt.target! as HTMLElement;
const rect = target.getBoundingClientRect();
const ripple = document.createElement('div');
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
const ripple = document.createElement("div");
ripple.style.top = (evt.clientY - rect.top - 1).toString() + "px";
ripple.style.left = (evt.clientX - rect.left - 1).toString() + "px";
ripples!.appendChild(ripple);
const circleCenterX = evt.clientX - rect.left;
const circleCenterY = evt.clientY - rect.top;
const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
const scale = calcCircleScale(
target.clientWidth,
target.clientHeight,
circleCenterX,
circleCenterY
);
window.setTimeout(() => {
ripple.style.transform = 'scale(' + (scale / 2) + ')';
ripple.style.transform = "scale(" + scale / 2 + ")";
}, 1);
window.setTimeout(() => {
ripple.style.transition = 'all 1s ease';
ripple.style.opacity = '0';
ripple.style.transition = "all 1s ease";
ripple.style.opacity = "0";
}, 1000);
window.setTimeout(() => {
if (ripples) ripples.removeChild(ripple);
@ -151,7 +158,11 @@ function onMousedown(evt: MouseEvent): void {
&.gradate {
font-weight: bold;
color: var(--fgOnAccent) !important;
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
background: linear-gradient(
90deg,
var(--buttonGradateA),
var(--buttonGradateB)
);
&:not(:disabled):hover {
background: linear-gradient(90deg, var(--X8), var(--X8));
@ -212,7 +223,7 @@ function onMousedown(evt: MouseEvent): void {
background: rgba(0, 0, 0, 0.1);
opacity: 1;
transform: scale(1);
transition: all 0.5s cubic-bezier(0,.5,0,1);
transition: all 0.5s cubic-bezier(0, 0.5, 0, 1);
}
}

View File

@ -1,33 +1,46 @@
<template>
<div>
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
<div ref="captchaEl"></div>
</div>
<div>
<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis /></span>
<div ref="captchaEl"></div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
type Captcha = {
render(container: string | Node, options: {
readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
}): string;
render(
container: string | Node,
options: {
readonly [_ in
| "sitekey"
| "theme"
| "type"
| "size"
| "tabindex"
| "callback"
| "expired"
| "expired-callback"
| "error-callback"
| "endpoint"]?: unknown;
}
): string;
remove(id: string): void;
execute(id: string): void;
reset(id?: string): void;
getResponse(id: string): string;
};
type CaptchaProvider = 'hcaptcha' | 'recaptcha';
type CaptchaProvider = "hcaptcha" | "recaptcha";
type CaptchaContainer = {
readonly [_ in CaptchaProvider]?: Captcha;
};
declare global {
interface Window extends CaptchaContainer { }
interface Window extends CaptchaContainer {}
}
const props = defineProps<{
@ -37,7 +50,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'update:modelValue', v: string | null): void;
(ev: "update:modelValue", v: string | null): void;
}>();
const available = ref(false);
@ -46,8 +59,10 @@ const captchaEl = ref<HTMLDivElement | undefined>();
const variable = computed(() => {
switch (props.provider) {
case 'hcaptcha': return 'hcaptcha';
case 'recaptcha': return 'grecaptcha';
case "hcaptcha":
return "hcaptcha";
case "recaptcha":
return "grecaptcha";
}
});
@ -55,22 +70,30 @@ const loaded = !!window[variable.value];
const src = computed(() => {
switch (props.provider) {
case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
case "hcaptcha":
return "https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off";
case "recaptcha":
return "https://www.recaptcha.net/recaptcha/api.js?render=explicit";
}
});
const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
const captcha = computed<Captcha>(
() => window[variable.value] || ({} as unknown as Captcha)
);
if (loaded) {
available.value = true;
} else {
(document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
async: true,
id: props.provider,
src: src.value,
})))
.addEventListener('load', () => available.value = true);
(
document.getElementById(props.provider) ||
document.head.appendChild(
Object.assign(document.createElement("script"), {
async: true,
id: props.provider,
src: src.value,
})
)
).addEventListener("load", () => (available.value = true));
}
function reset() {
@ -81,10 +104,10 @@ function requestRender() {
if (captcha.value.render && captchaEl.value instanceof Element) {
captcha.value.render(captchaEl.value, {
sitekey: props.sitekey,
theme: defaultStore.state.darkMode ? 'dark' : 'light',
theme: defaultStore.state.darkMode ? "dark" : "light",
callback: callback,
'expired-callback': callback,
'error-callback': callback,
"expired-callback": callback,
"error-callback": callback,
});
} else {
window.setTimeout(requestRender, 1);
@ -92,7 +115,7 @@ function requestRender() {
}
function callback(response?: string) {
emit('update:modelValue', typeof response === 'string' ? response : null);
emit("update:modelValue", typeof response === "string" ? response : null);
}
onMounted(() => {
@ -110,5 +133,4 @@ onBeforeUnmount(() => {
defineExpose({
reset,
});
</script>

View File

@ -1,34 +1,41 @@
<template>
<button class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
<button
class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span
><i class="ph-minus ph-bold ph-lg"></i>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.follow }}</span
><i class="ph-plus ph-bold ph-lg"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
<span v-if="full">{{ i18n.ts.processing }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template>
</button>
</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { ref } from "vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
const props = withDefaults(defineProps<{
channel: Record<string, any>;
full?: boolean;
}>(), {
full: false,
});
const props = withDefaults(
defineProps<{
channel: Record<string, any>;
full?: boolean;
}>(),
{
full: false,
}
);
const isFollowing = ref<boolean>(props.channel.isFollowing);
const wait = ref(false);
@ -38,13 +45,13 @@ async function onClick() {
try {
if (isFollowing.value) {
await os.api('channels/unfollow', {
channelId: props.channel.id
await os.api("channels/unfollow", {
channelId: props.channel.id,
});
isFollowing.value = false;
} else {
await os.api('channels/follow', {
channelId: props.channel.id
await os.api("channels/follow", {
channelId: props.channel.id,
});
isFollowing.value = true;
}

View File

@ -1,41 +1,57 @@
<template>
<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
<div class="banner" :style="bannerStyle">
<div class="fade"></div>
<div class="name"><i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}</div>
<div class="status">
<div>
<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
<template #n>
<b>{{ channel.usersCount }}</b>
</template>
</I18n>
<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
<div class="banner" :style="bannerStyle">
<div class="fade"></div>
<div class="name">
<i class="ph-television ph-bold ph-lg"></i> {{ channel.name }}
</div>
<div>
<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
<template #n>
<b>{{ channel.notesCount }}</b>
</template>
</I18n>
<div class="status">
<div>
<i class="ph-users ph-bold ph-lg ph-fw ph-lg"></i>
<I18n
:src="i18n.ts._channel.usersCount"
tag="span"
style="margin-left: 4px"
>
<template #n>
<b>{{ channel.usersCount }}</b>
</template>
</I18n>
</div>
<div>
<i class="ph-pencil ph-bold ph-lg ph-fw ph-lg"></i>
<I18n
:src="i18n.ts._channel.notesCount"
tag="span"
style="margin-left: 4px"
>
<template #n>
<b>{{ channel.notesCount }}</b>
</template>
</I18n>
</div>
</div>
</div>
</div>
<article v-if="channel.description">
<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
</article>
<footer>
<span v-if="channel.lastNotedAt">
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
</span>
</footer>
</MkA>
<article v-if="channel.description">
<p :title="channel.description">
{{
channel.description.length > 85
? channel.description.slice(0, 85) + "…"
: channel.description
}}
</p>
</article>
<footer>
<span v-if="channel.lastNotedAt">
{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt" />
</span>
</footer>
</MkA>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { i18n } from '@/i18n';
import { computed } from "vue";
import { i18n } from "@/i18n";
const props = defineProps<{
channel: Record<string, any>;
@ -45,7 +61,7 @@ const bannerStyle = computed(() => {
if (props.channel.bannerUrl) {
return { backgroundImage: `url(${props.channel.bannerUrl})` };
} else {
return { backgroundColor: '#4c5e6d' };
return { backgroundColor: "#4c5e6d" };
}
});
</script>
@ -155,5 +171,4 @@ const bannerStyle = computed(() => {
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -1,20 +1,35 @@
<template>
<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
<div v-if="title || series" class="qpcyisrl">
<div v-if="title" class="title">{{ title }}</div>
<template v-if="series">
<div v-for="x in series" class="series">
<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
<span>{{ x.text }}</span>
</div>
</template>
</div>
</MkTooltip>
<MkTooltip
ref="tooltip"
:showing="showing"
:x="x"
:y="y"
:max-width="340"
:direction="'top'"
:inner-margin="16"
@closed="emit('closed')"
>
<div v-if="title || series" class="qpcyisrl">
<div v-if="title" class="title">{{ title }}</div>
<template v-if="series">
<div v-for="x in series" class="series">
<span
class="color"
:style="{
background: x.backgroundColor,
borderColor: x.borderColor,
}"
></span>
<span>{{ x.text }}</span>
</div>
</template>
</div>
</MkTooltip>
</template>
<script lang="ts" setup>
import { } from 'vue';
import MkTooltip from './MkTooltip.vue';
import {} from "vue";
import MkTooltip from "./MkTooltip.vue";
const props = defineProps<{
showing: boolean;
@ -29,7 +44,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: "closed"): void;
}>();
</script>

View File

@ -1,56 +1,72 @@
<template>
<MkA
class="rivslvers"
tabindex="-1"
:class="{
isMe: isMe(message),
isRead: message.groupId ? message.reads.includes($i?.id) : message.isRead,
}"
:to="
message.groupId
? `/my/messaging/group/${message.groupId}`
: `/my/messaging/${getAcct(
isMe(message) ? message.recipient : message.user
)}`
"
>
<div class="message _block">
<MkAvatar
class="avatar"
:user="
message.groupId
? message.user
: isMe(message)
<MkA
class="rivslvers"
tabindex="-1"
:class="{
isMe: isMe(message),
isRead: message.groupId
? message.reads.includes($i?.id)
: message.isRead,
}"
:to="
message.groupId
? `/my/messaging/group/${message.groupId}`
: `/my/messaging/${getAcct(
isMe(message) ? message.recipient : message.user
)}`
"
>
<div class="message _block">
<MkAvatar
class="avatar"
:user="
message.groupId
? message.user
: isMe(message)
? message.recipient
: message.user
"
:show-indicator="true"
/>
<header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time"/>
</header>
<header v-else>
<span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span>
<span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span>
<MkTime :time="message.createdAt" class="time"/>
</header>
<div class="body">
<p class="text">
<span v-if="isMe(message)" class="me">{{ i18n.ts.you }}: </span>
<Mfm v-if="message.text != null && message.text.length > 0" :text="message.text"/>
<span v-else> 📎</span>
</p>
"
:show-indicator="true"
/>
<header v-if="message.groupId">
<span class="name">{{ message.group.name }}</span>
<MkTime :time="message.createdAt" class="time" />
</header>
<header v-else>
<span class="name"
><MkUserName
:user="
isMe(message) ? message.recipient : message.user
"
/></span>
<span class="username"
>@{{
acct(isMe(message) ? message.recipient : message.user)
}}</span
>
<MkTime :time="message.createdAt" class="time" />
</header>
<div class="body">
<p class="text">
<span v-if="isMe(message)" class="me"
>{{ i18n.ts.you }}:
</span>
<Mfm
v-if="message.text != null && message.text.length > 0"
:text="message.text"
/>
<span v-else> 📎</span>
</p>
</div>
</div>
</div>
</MkA>
</MkA>
</template>
<script lang="ts" setup>
import * as Acct from 'calckey-js/built/acct';
import { i18n } from '@/i18n';
import { acct } from '@/filters/user';
import { $i } from '@/account';
import * as Acct from "calckey-js/built/acct";
import { i18n } from "@/i18n";
import { acct } from "@/filters/user";
import { $i } from "@/account";
const getAcct = Acct.toString;
@ -138,7 +154,6 @@ function isMe(message): boolean {
}
> .body {
> .text {
display: block;
margin: 0 0 0 0;

View File

@ -1,28 +1,28 @@
<template>
<XModalWindow
ref="dialog"
:width="600"
@close="dialog?.close()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
<XModalWindow
ref="dialog"
:width="600"
@close="dialog?.close()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts._mfm.cheatSheet }}</template>
<div class="_monolithic_">
<div class="_section">
<XCheatSheet/>
<div class="_monolithic_">
<div class="_section">
<XCheatSheet />
</div>
</div>
</div>
</XModalWindow>
</XModalWindow>
</template>
<script lang="ts" setup>
import XModalWindow from '@/components/MkModalWindow.vue';
import XCheatSheet from '@/pages/mfm-cheat-sheet.vue';
import { i18n } from '@/i18n';
import XModalWindow from "@/components/MkModalWindow.vue";
import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
import { i18n } from "@/i18n";
const emit = defineEmits<{
(ev: 'done'): void;
(ev: 'closed'): void;
(ev: "done"): void;
(ev: "closed"): void;
}>();
const dialog = $ref<InstanceType<typeof XModalWindow>>();
@ -41,6 +41,4 @@ function close(res) {
.fade-leave-to {
opacity: 0;
}
</style>

View File

@ -1,12 +1,15 @@
<template>
<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
<pre
v-else
:class="`language-${prismLang}`"
><code :class="`language-${prismLang}`" v-html="html"></code></pre>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
import { computed } from "vue";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";
const props = defineProps<{
code: string;
@ -14,6 +17,14 @@ const props = defineProps<{
inline?: boolean;
}>();
const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
const prismLang = computed(() =>
Prism.languages[props.lang] ? props.lang : "js"
);
const html = computed(() =>
Prism.highlight(
props.code,
Prism.languages[prismLang.value],
prismLang.value
)
);
</script>

View File

@ -1,9 +1,9 @@
<template>
<XCode :code="code" :lang="lang" :inline="inline"/>
<XCode :code="code" :lang="lang" :inline="inline" />
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { defineAsyncComponent } from "vue";
defineProps<{
code: string;
@ -11,5 +11,7 @@ defineProps<{
inline?: boolean;
}>();
const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
const XCode = defineAsyncComponent(
() => import("@/components/MkCode.core.vue")
);
</script>

View File

@ -1,35 +1,67 @@
<template>
<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
<slot name="func"></slot>
<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
</button>
</div>
</header>
<transition
:name="$store.state.animation ? 'container-toggle' : ''"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
<div
v-size="{ max: [380] }"
class="ukygtjoj _panel"
:class="{
naked,
thin,
hideHeader: !showHeader,
scrollable,
closed: !showBody,
}"
>
<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
<slot></slot>
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
<span>{{ i18n.ts.showMore }}</span>
</button>
</div>
</transition>
</div>
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
<slot name="func"></slot>
<button
v-if="foldable"
class="_button"
@click="() => (showBody = !showBody)"
>
<template v-if="showBody"
><i class="ph-caret-up ph-bold ph-lg"></i
></template>
<template v-else
><i class="ph-caret-down ph-bold ph-lg"></i
></template>
</button>
</div>
</header>
<transition
:name="$store.state.animation ? 'container-toggle' : ''"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div
v-show="showBody"
ref="content"
class="content"
:class="{ omitted }"
>
<slot></slot>
<button
v-if="omitted"
class="fade _button"
@click="
() => {
ignoreOmit = true;
omitted = false;
}
"
>
<span>{{ i18n.ts.showMore }}</span>
</button>
</div>
</transition>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { i18n } from '@/i18n';
import { defineComponent } from "vue";
import { i18n } from "@/i18n";
export default defineComponent({
props: {
@ -78,22 +110,29 @@ export default defineComponent({
};
},
mounted() {
this.$watch('showBody', showBody => {
const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
this.$el.style.minHeight = `${headerHeight}px`;
if (showBody) {
this.$el.style.flexBasis = 'auto';
} else {
this.$el.style.flexBasis = `${headerHeight}px`;
this.$watch(
"showBody",
(showBody) => {
const headerHeight = this.showHeader
? this.$refs.header.offsetHeight
: 0;
this.$el.style.minHeight = `${headerHeight}px`;
if (showBody) {
this.$el.style.flexBasis = "auto";
} else {
this.$el.style.flexBasis = `${headerHeight}px`;
}
},
{
immediate: true,
}
}, {
immediate: true,
});
);
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
this.$el.style.setProperty("--maxHeight", this.maxHeight + "px");
const calcOmit = () => {
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
if (this.omitted || this.ignoreOmit || this.maxHeight == null)
return;
const height = this.$refs.content.offsetHeight;
this.omitted = height > this.maxHeight;
};
@ -113,14 +152,14 @@ export default defineComponent({
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
el.style.height = elementHeight + "px";
},
afterEnter(el) {
el.style.height = null;
},
leave(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.style.height = elementHeight + "px";
el.offsetHeight; // reflow
el.style.height = 0;
},
@ -132,7 +171,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.container-toggle-enter-active, .container-toggle-leave-active {
.container-toggle-enter-active,
.container-toggle-leave-active {
overflow-y: hidden;
transition: opacity 0.5s, height 0.5s !important;
}
@ -236,7 +276,8 @@ export default defineComponent({
}
}
&.max-width_380px, &.thin {
&.max-width_380px,
&.thin {
> header {
> .title {
padding: 8px 10px;

View File

@ -1,17 +1,22 @@
<template>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
</div>
</transition>
<transition :name="$store.state.animation ? 'fade' : ''" appear>
<div
ref="rootEl"
class="nvlagfpb"
:style="{ zIndex }"
@contextmenu.prevent.stop="() => {}"
>
<MkMenu :items="items" :align="'left'" @close="$emit('closed')" />
</div>
</transition>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from 'vue';
import MkMenu from './MkMenu.vue';
import { MenuItem } from './types/menu.vue';
import contains from '@/scripts/contains';
import * as os from '@/os';
import { onMounted, onBeforeUnmount } from "vue";
import MkMenu from "./MkMenu.vue";
import { MenuItem } from "./types/menu.vue";
import contains from "@/scripts/contains";
import * as os from "@/os";
const props = defineProps<{
items: MenuItem[];
@ -19,12 +24,12 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: "closed"): void;
}>();
let rootEl = $ref<HTMLDivElement>();
let zIndex = $ref<number>(os.claimZIndex('high'));
let zIndex = $ref<number>(os.claimZIndex("high"));
onMounted(() => {
let left = props.ev.pageX + 1; // + 1
@ -52,19 +57,19 @@ onMounted(() => {
rootEl.style.top = `${top}px`;
rootEl.style.left = `${left}px`;
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.addEventListener('mousedown', onMousedown);
for (const el of Array.from(document.querySelectorAll("body *"))) {
el.addEventListener("mousedown", onMousedown);
}
});
onBeforeUnmount(() => {
for (const el of Array.from(document.querySelectorAll('body *'))) {
el.removeEventListener('mousedown', onMousedown);
for (const el of Array.from(document.querySelectorAll("body *"))) {
el.removeEventListener("mousedown", onMousedown);
}
});
function onMousedown(evt: Event) {
if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
if (!contains(rootEl, evt.target) && rootEl !== evt.target) emit("closed");
}
</script>
@ -73,12 +78,15 @@ function onMousedown(evt: Event) {
position: absolute;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: left top;
}
.fade-enter-from, .fade-leave-to {
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: scale(0.9);
}

View File

@ -1,47 +1,55 @@
<template>
<XModalWindow
ref="dialogEl"
:width="800"
:height="500"
:scroll="false"
:with-ok-button="true"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts.cropImage }}</template>
<template #default="{ width, height }">
<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
<Transition name="fade">
<div v-if="loading" class="loading">
<MkLoading/>
<XModalWindow
ref="dialogEl"
:width="800"
:height="500"
:scroll="false"
:with-ok-button="true"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts.cropImage }}</template>
<template #default="{ width, height }">
<div
class="mk-cropper-dialog"
:style="`--vw: ${width}px; --vh: ${height}px;`"
>
<Transition name="fade">
<div v-if="loading" class="loading">
<MkLoading />
</div>
</Transition>
<div class="container">
<img
ref="imgEl"
:src="imgUrl"
style="display: none"
@load="onImageLoad"
/>
</div>
</Transition>
<div class="container">
<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
</div>
</div>
</template>
</XModalWindow>
</template>
</XModalWindow>
</template>
<script lang="ts" setup>
import { nextTick, onMounted } from 'vue';
import * as misskey from 'calckey-js';
import Cropper from 'cropperjs';
import tinycolor from 'tinycolor2';
import XModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os';
import { $i } from '@/account';
import { defaultStore } from '@/store';
import { apiUrl, url } from '@/config';
import { query } from '@/scripts/url';
import { i18n } from '@/i18n';
import { nextTick, onMounted } from "vue";
import * as misskey from "calckey-js";
import Cropper from "cropperjs";
import tinycolor from "tinycolor2";
import XModalWindow from "@/components/MkModalWindow.vue";
import * as os from "@/os";
import { $i } from "@/account";
import { defaultStore } from "@/store";
import { apiUrl, url } from "@/config";
import { query } from "@/scripts/url";
import { i18n } from "@/i18n";
const emit = defineEmits<{
(ev: 'ok', cropped: misskey.entities.DriveFile): void;
(ev: 'cancel'): void;
(ev: 'closed'): void;
(ev: "ok", cropped: misskey.entities.DriveFile): void;
(ev: "cancel"): void;
(ev: "closed"): void;
}>();
const props = defineProps<{
@ -60,24 +68,24 @@ let loading = $ref(true);
const ok = async () => {
const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
croppedCanvas.toBlob(blob => {
croppedCanvas.toBlob((blob) => {
const formData = new FormData();
formData.append('file', blob);
formData.append("file", blob);
if (defaultStore.state.uploadFolder) {
formData.append('folderId', defaultStore.state.uploadFolder);
formData.append("folderId", defaultStore.state.uploadFolder);
}
fetch(apiUrl + '/drive/files/create', {
method: 'POST',
fetch(apiUrl + "/drive/files/create", {
method: "POST",
body: formData,
headers: {
authorization: `Bearer ${$i.token}`,
},
})
.then(response => response.json())
.then(f => {
res(f);
});
.then((response) => response.json())
.then((f) => {
res(f);
});
});
});
@ -85,12 +93,12 @@ const ok = async () => {
const f = await promise;
emit('ok', f);
emit("ok", f);
dialogEl.close();
};
const cancel = () => {
emit('cancel');
emit("cancel");
dialogEl.close();
};
@ -98,31 +106,32 @@ const onImageLoad = () => {
loading = false;
if (cropper) {
cropper.getCropperImage()!.$center('contain');
cropper.getCropperImage()!.$center("contain");
cropper.getCropperSelection()!.$center();
}
};
onMounted(() => {
cropper = new Cropper(imgEl, {
});
cropper = new Cropper(imgEl, {});
const computedStyle = getComputedStyle(document.documentElement);
const selection = cropper.getCropperSelection()!;
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
selection.themeColor = tinycolor(
computedStyle.getPropertyValue("--accent")
).toHexString();
selection.aspectRatio = props.aspectRatio;
selection.initialAspectRatio = props.aspectRatio;
selection.outlined = true;
window.setTimeout(() => {
cropper.getCropperImage()!.$center('contain');
cropper.getCropperImage()!.$center("contain");
selection.$center();
}, 100);
// 調
window.setTimeout(() => {
cropper.getCropperImage()!.$center('contain');
cropper.getCropperImage()!.$center("contain");
selection.$center();
}, 500);
});

View File

@ -1,16 +1,16 @@
<template>
<button class="nrvgflfu _button" @click.stop="toggle">
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
<span v-if="!modelValue">{{ label }}</span>
</button>
<button class="nrvgflfu _button" @click.stop="toggle">
<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
<span v-if="!modelValue">{{ label }}</span>
</button>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { length } from 'stringz';
import * as misskey from 'calckey-js';
import { concat } from '@/scripts/array';
import { i18n } from '@/i18n';
import { computed } from "vue";
import { length } from "stringz";
import * as misskey from "calckey-js";
import { concat } from "@/scripts/array";
import { i18n } from "@/i18n";
const props = defineProps<{
modelValue: boolean;
@ -18,19 +18,23 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'update:modelValue', v: boolean): void;
(ev: "update:modelValue", v: boolean): void;
}>();
const label = computed(() => {
return concat([
props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
props.note.poll != null ? [i18n.ts.poll] : []
] as string[][]).join(' / ');
props.note.text
? [i18n.t("_cw.chars", { count: length(props.note.text) })]
: [],
props.note.files && props.note.files.length !== 0
? [i18n.t("_cw.files", { count: props.note.files.length })]
: [],
props.note.poll != null ? [i18n.ts.poll] : [],
] as string[][]).join(" / ");
});
const toggle = () => {
emit('update:modelValue', !props.modelValue);
emit("update:modelValue", !props.modelValue);
};
</script>
@ -60,11 +64,11 @@ const toggle = () => {
margin-left: 4px;
&:before {
content: '(';
content: "(";
}
&:after {
content: ')';
content: ")";
}
}
}

View File

@ -1,19 +1,21 @@
<script lang="ts">
import { defineComponent, h, PropType, TransitionGroup } from 'vue';
import MkAd from '@/components/global/MkAd.vue';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
import { defineComponent, h, PropType, TransitionGroup } from "vue";
import MkAd from "@/components/global/MkAd.vue";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
export default defineComponent({
props: {
items: {
type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
type: Array as PropType<
{ id: string; createdAt: string; _shouldInsertAd_: boolean }[]
>,
required: true,
},
direction: {
type: String,
required: false,
default: 'down',
default: "down",
},
reversed: {
type: Boolean,
@ -36,7 +38,7 @@ export default defineComponent({
function getDateText(time: string) {
const date = new Date(time).getDate();
const month = new Date(time).getMonth() + 1;
return i18n.t('monthAndDay', {
return i18n.t("monthAndDay", {
month: month.toString(),
day: date.toString(),
});
@ -44,64 +46,81 @@ export default defineComponent({
if (props.items.length === 0) return;
const renderChildren = () => props.items.map((item, i) => {
if (!slots || !slots.default) return;
const renderChildren = () =>
props.items.map((item, i) => {
if (!slots || !slots.default) return;
const el = slots.default({
item: item,
})[0];
if (el.key == null && item.id) el.key = item.id;
const el = slots.default({
item: item,
})[0];
if (el.key == null && item.id) el.key = item.id;
if (
i !== props.items.length - 1 &&
new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
) {
const separator = h('div', {
class: 'separator',
key: item.id + ':separator',
}, h('p', {
class: 'date',
}, [
h('span', [
h('i', {
class: 'ph-caret-up ph-bold ph-lg icon',
}),
getDateText(item.createdAt),
]),
h('span', [
getDateText(props.items[i + 1].createdAt),
h('i', {
class: 'ph-caret-down ph-bold ph-lg icon',
}),
]),
]));
if (
i !== props.items.length - 1 &&
new Date(item.createdAt).getDate() !==
new Date(props.items[i + 1].createdAt).getDate()
) {
const separator = h(
"div",
{
class: "separator",
key: item.id + ":separator",
},
h(
"p",
{
class: "date",
},
[
h("span", [
h("i", {
class: "ph-caret-up ph-bold ph-lg icon",
}),
getDateText(item.createdAt),
]),
h("span", [
getDateText(props.items[i + 1].createdAt),
h("i", {
class: "ph-caret-down ph-bold ph-lg icon",
}),
]),
]
)
);
return [el, separator];
} else {
if (props.ad && item._shouldInsertAd_) {
return [h(MkAd, {
class: 'a', // advertise()
key: item.id + ':ad',
prefer: ['horizontal', 'horizontal-big'],
}), el];
return [el, separator];
} else {
return el;
if (props.ad && item._shouldInsertAd_) {
return [
h(MkAd, {
class: "a", // advertise()
key: item.id + ":ad",
prefer: ["horizontal", "horizontal-big"],
}),
el,
];
} else {
return el;
}
}
}
});
});
return () => h(
defaultStore.state.animation ? TransitionGroup : 'div',
defaultStore.state.animation ? {
class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
name: 'list',
tag: 'div',
'data-direction': props.direction,
'data-reversed': props.reversed ? 'true' : 'false',
} : {
class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
},
{ default: renderChildren });
return () =>
h(
defaultStore.state.animation ? TransitionGroup : "div",
defaultStore.state.animation
? {
class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
name: "list",
tag: "div",
"data-direction": props.direction,
"data-reversed": props.reversed ? "true" : "false",
}
: {
class: "sqadhkmv" + (props.noGap ? " noGap" : ""),
},
{ default: renderChildren }
);
},
});
</script>
@ -121,7 +140,8 @@ export default defineComponent({
}
> .list-enter-active {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
&[data-direction="up"] {

View File

@ -1,63 +1,171 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
<MkModal
ref="modal"
:prefer-type="'dialog'"
:z-priority="'high'"
@click="done(true)"
@closed="emit('closed')"
>
<div :class="$style.root">
<div v-if="icon" :class="$style.icon">
<i :class="icon"></i>
</div>
<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
<i v-if="type === 'success'" :class="$style.iconInner" class="ph-check ph-bold ph-lg"></i>
<i v-else-if="type === 'error'" :class="$style.iconInner" class="ph-circle-wavy-warning ph-bold ph-lg"></i>
<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ph-warning ph-bold ph-lg"></i>
<i v-else-if="type === 'info'" :class="$style.iconInner" class="ph-info ph-bold ph-lg"></i>
<i v-else-if="type === 'question'" :class="$style.iconInner" class="ph-circle-question ph-bold ph-lg"></i>
<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
<div
v-else-if="!input && !select"
:class="[$style.icon, $style['type_' + type]]"
>
<i
v-if="type === 'success'"
:class="$style.iconInner"
class="ph-check ph-bold ph-lg"
></i>
<i
v-else-if="type === 'error'"
:class="$style.iconInner"
class="ph-circle-wavy-warning ph-bold ph-lg"
></i>
<i
v-else-if="type === 'warning'"
:class="$style.iconInner"
class="ph-warning ph-bold ph-lg"
></i>
<i
v-else-if="type === 'info'"
:class="$style.iconInner"
class="ph-info ph-bold ph-lg"
></i>
<i
v-else-if="type === 'question'"
:class="$style.iconInner"
class="ph-circle-question ph-bold ph-lg"
></i>
<MkLoading
v-else-if="type === 'waiting'"
:class="$style.iconInner"
:em="true"
/>
</div>
<header v-if="title" :class="$style.title"><Mfm :text="title"/></header>
<header v-if="title == null && (input && input.type === 'password')" :class="$style.title"><Mfm :text="i18n.ts.password"/></header>
<div v-if="text" :class="$style.text"><Mfm :text="text"/></div>
<MkInput v-if="input && input.type !== 'paragraph'" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
<template v-if="input.type === 'password'" #prefix><i class="ph-password ph-bold ph-lg"></i></template>
<header v-if="title" :class="$style.title">
<Mfm :text="title" />
</header>
<header
v-if="title == null && input && input.type === 'password'"
:class="$style.title"
>
<Mfm :text="i18n.ts.password" />
</header>
<div v-if="text" :class="$style.text"><Mfm :text="text" /></div>
<MkInput
v-if="input && input.type !== 'paragraph'"
v-model="inputValue"
autofocus
:type="input.type || 'text'"
:placeholder="input.placeholder || undefined"
@keydown="onInputKeydown"
>
<template v-if="input.type === 'password'" #prefix
><i class="ph-password ph-bold ph-lg"></i
></template>
</MkInput>
<MkTextarea v-if="input && input.type === 'paragraph'" v-model="inputValue" autofocus :type="paragraph" :placeholder="input.placeholder || undefined">
<MkTextarea
v-if="input && input.type === 'paragraph'"
v-model="inputValue"
autofocus
:type="paragraph"
:placeholder="input.placeholder || undefined"
>
</MkTextarea>
<MkSelect v-if="select" v-model="selectedValue" autofocus>
<template v-if="select.items">
<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
<option v-for="item in select.items" :value="item.value">
{{ item.text }}
</option>
</template>
<template v-else>
<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
<optgroup
v-for="groupedItem in select.groupedItems"
:label="groupedItem.label"
>
<option
v-for="item in groupedItem.items"
:value="item.value"
>
{{ item.text }}
</option>
</optgroup>
</template>
</MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" :class="$style.buttons">
<div
v-if="(showOkButton || showCancelButton) && !actions"
:class="$style.buttons"
>
<div v-if="!isYesNo">
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkButton
v-if="showOkButton"
inline
primary
:autofocus="!input && !select"
@click="ok"
>{{
showCancelButton || input || select
? i18n.ts.ok
: i18n.ts.gotIt
}}</MkButton
>
<MkButton
v-if="showCancelButton || input || select"
inline
@click="cancel"
>{{ i18n.ts.cancel }}</MkButton
>
</div>
<div v-else>
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ i18n.ts.yes }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.no }}</MkButton>
<MkButton
v-if="showOkButton"
inline
primary
:autofocus="!input && !select"
@click="ok"
>{{ i18n.ts.yes }}</MkButton
>
<MkButton
v-if="showCancelButton || input || select"
inline
@click="cancel"
>{{ i18n.ts.no }}</MkButton
>
</div>
</div>
<div v-if="actions" :class="$style.buttons">
<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); modal?.close(); }">{{ action.text }}</MkButton>
<MkButton
v-for="action in actions"
:key="action.text"
inline
:primary="action.primary"
@click="
() => {
action.callback();
modal?.close();
}
"
>{{ action.text }}</MkButton
>
</div>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/form/input.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkSelect from '@/components/form/select.vue';
import { i18n } from '@/i18n';
import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
import MkModal from "@/components/MkModal.vue";
import MkButton from "@/components/MkButton.vue";
import MkInput from "@/components/form/input.vue";
import MkTextarea from "@/components/form/textarea.vue";
import MkSelect from "@/components/form/select.vue";
import { i18n } from "@/i18n";
type Input = {
type: HTMLInputElement['type'];
type: HTMLInputElement["type"];
placeholder?: string | null;
default: any | null;
};
@ -77,37 +185,46 @@ type Select = {
default: string | null;
};
const props = withDefaults(defineProps<{
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
title: string;
text?: string;
input?: Input;
select?: Select;
icon?: string;
actions?: {
text: string;
primary?: boolean,
callback: (...args: any[]) => void;
}[];
showOkButton?: boolean;
showCancelButton?: boolean;
isYesNo?: boolean;
const props = withDefaults(
defineProps<{
type?:
| "success"
| "error"
| "warning"
| "info"
| "question"
| "waiting";
title: string;
text?: string;
input?: Input;
select?: Select;
icon?: string;
actions?: {
text: string;
primary?: boolean;
callback: (...args: any[]) => void;
}[];
showOkButton?: boolean;
showCancelButton?: boolean;
isYesNo?: boolean;
cancelableByBgClick?: boolean;
okText?: string;
cancelText?: string;
}>(), {
type: 'info',
showOkButton: true,
showCancelButton: false,
isYesNo: false,
cancelableByBgClick?: boolean;
okText?: string;
cancelText?: string;
}>(),
{
type: "info",
showOkButton: true,
showCancelButton: false,
isYesNo: false,
cancelableByBgClick: true,
});
cancelableByBgClick: true,
}
);
const emit = defineEmits<{
(ev: 'done', v: { canceled: boolean; result: any }): void;
(ev: 'closed'): void;
(ev: "done", v: { canceled: boolean; result: any }): void;
(ev: "closed"): void;
}>();
const modal = shallowRef<InstanceType<typeof MkModal>>();
@ -116,17 +233,18 @@ const inputValue = ref(props.input?.default || null);
const selectedValue = ref(props.select?.default || null);
function done(canceled: boolean, result?) {
emit('done', { canceled, result });
emit("done", { canceled, result });
modal.value?.close();
}
async function ok() {
if (!props.showOkButton) return;
const result =
props.input ? inputValue.value :
props.select ? selectedValue.value :
true;
const result = props.input
? inputValue.value
: props.select
? selectedValue.value
: true;
done(false, result);
}
@ -139,11 +257,11 @@ function onBgClick() {
}
*/
function onKeydown(evt: KeyboardEvent) {
if (evt.key === 'Escape') cancel();
if (evt.key === "Escape") cancel();
}
function onInputKeydown(evt: KeyboardEvent) {
if (evt.key === 'Enter') {
if (evt.key === "Enter") {
evt.preventDefault();
evt.stopPropagation();
ok();
@ -151,11 +269,11 @@ function onInputKeydown(evt: KeyboardEvent) {
}
onMounted(() => {
document.addEventListener('keydown', onKeydown);
document.addEventListener("keydown", onKeydown);
});
onBeforeUnmount(() => {
document.removeEventListener('keydown', onKeydown);
document.removeEventListener("keydown", onKeydown);
});
</script>

View File

@ -1,33 +1,36 @@
<template>
<span class="zjobosdg">
<span v-text="hh"></span>
<span class="colon" :class="{ showColon }">:</span>
<span v-text="mm"></span>
<span v-if="showS" class="colon" :class="{ showColon }">:</span>
<span v-if="showS" v-text="ss"></span>
<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
<span v-if="showMs" v-text="ms"></span>
</span>
<span class="zjobosdg">
<span v-text="hh"></span>
<span class="colon" :class="{ showColon }">:</span>
<span v-text="mm"></span>
<span v-if="showS" class="colon" :class="{ showColon }">:</span>
<span v-if="showS" v-text="ss"></span>
<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
<span v-if="showMs" v-text="ms"></span>
</span>
</template>
<script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue';
import { onUnmounted, ref, watch } from "vue";
const props = withDefaults(defineProps<{
showS?: boolean;
showMs?: boolean;
offset?: number;
}>(), {
showS: true,
showMs: false,
offset: 0 - new Date().getTimezoneOffset(),
});
const props = withDefaults(
defineProps<{
showS?: boolean;
showMs?: boolean;
offset?: number;
}>(),
{
showS: true,
showMs: false,
offset: 0 - new Date().getTimezoneOffset(),
}
);
let intervalId;
const hh = ref('');
const mm = ref('');
const ss = ref('');
const ms = ref('');
const hh = ref("");
const mm = ref("");
const ss = ref("");
const ms = ref("");
const showColon = ref(false);
let prevSec: number | null = null;
@ -41,21 +44,29 @@ watch(showColon, (v) => {
const tick = () => {
const now = new Date();
now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
hh.value = now.getHours().toString().padStart(2, '0');
mm.value = now.getMinutes().toString().padStart(2, '0');
ss.value = now.getSeconds().toString().padStart(2, '0');
ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
now.setMinutes(
now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)
);
hh.value = now.getHours().toString().padStart(2, "0");
mm.value = now.getMinutes().toString().padStart(2, "0");
ss.value = now.getSeconds().toString().padStart(2, "0");
ms.value = Math.floor(now.getMilliseconds() / 10)
.toString()
.padStart(2, "0");
if (now.getSeconds() !== prevSec) showColon.value = true;
prevSec = now.getSeconds();
};
tick();
watch(() => props.showMs, () => {
if (intervalId) window.clearInterval(intervalId);
intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
}, { immediate: true });
watch(
() => props.showMs,
() => {
if (intervalId) window.clearInterval(intervalId);
intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
},
{ immediate: true }
);
onUnmounted(() => {
window.clearInterval(intervalId);

View File

@ -1,102 +1,131 @@
<template>
<div
class="ncvczrfv"
:class="{ isSelected }"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@dragstart="onDragstart"
@dragend="onDragend"
>
<div v-if="$i?.avatarId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ i18n.ts.avatar }}</p>
</div>
<div v-if="$i?.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ i18n.ts.banner }}</p>
</div>
<div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg"/>
<p>{{ i18n.ts.nsfw }}</p>
</div>
<div
class="ncvczrfv"
:class="{ isSelected }"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@dragstart="onDragstart"
@dragend="onDragend"
>
<div v-if="$i?.avatarId == file.id" class="label">
<img src="/client-assets/label.svg" />
<p>{{ i18n.ts.avatar }}</p>
</div>
<div v-if="$i?.bannerId == file.id" class="label">
<img src="/client-assets/label.svg" />
<p>{{ i18n.ts.banner }}</p>
</div>
<div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg" />
<p>{{ i18n.ts.nsfw }}</p>
</div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" />
<p class="name">
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
</p>
</div>
<p class="name">
<span>{{
file.name.lastIndexOf(".") != -1
? file.name.substr(0, file.name.lastIndexOf("."))
: file.name
}}</span>
<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{
file.name.substr(file.name.lastIndexOf("."))
}}</span>
</p>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref } from 'vue';
import * as Misskey from 'calckey-js';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import bytes from '@/filters/bytes';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { $i } from '@/account';
import { computed, defineAsyncComponent, ref } from "vue";
import * as Misskey from "calckey-js";
import copyToClipboard from "@/scripts/copy-to-clipboard";
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
import bytes from "@/filters/bytes";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { $i } from "@/account";
const props = withDefaults(defineProps<{
file: Misskey.entities.DriveFile;
isSelected?: boolean;
selectMode?: boolean;
}>(), {
isSelected: false,
selectMode: false,
});
const props = withDefaults(
defineProps<{
file: Misskey.entities.DriveFile;
isSelected?: boolean;
selectMode?: boolean;
}>(),
{
isSelected: false,
selectMode: false,
}
);
const emit = defineEmits<{
(ev: 'chosen', r: Misskey.entities.DriveFile): void;
(ev: 'dragstart'): void;
(ev: 'dragend'): void;
(ev: "chosen", r: Misskey.entities.DriveFile): void;
(ev: "dragstart"): void;
(ev: "dragend"): void;
}>();
const isDragging = ref(false);
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
const title = computed(
() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`
);
function getMenu() {
return [{
text: i18n.ts.rename,
icon: 'ph-cursor-text ph-bold ph-lg',
action: rename,
}, {
text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
icon: props.file.isSensitive ? 'ph-eye ph-bold ph-lg' : 'ph-eye-slash ph-bold ph-lg',
action: toggleSensitive,
}, {
text: i18n.ts.describeFile,
icon: 'ph-cursor-text ph-bold ph-lg',
action: describe,
}, null, {
text: i18n.ts.copyUrl,
icon: 'ph-link-simple ph-bold ph-lg',
action: copyUrl,
}, {
type: 'a',
href: props.file.url,
target: '_blank',
text: i18n.ts.download,
icon: 'ph-download-simple ph-bold ph-lg',
download: props.file.name,
}, null, {
text: i18n.ts.delete,
icon: 'ph-trash ph-bold ph-lg',
danger: true,
action: deleteFile,
}];
return [
{
text: i18n.ts.rename,
icon: "ph-cursor-text ph-bold ph-lg",
action: rename,
},
{
text: props.file.isSensitive
? i18n.ts.unmarkAsSensitive
: i18n.ts.markAsSensitive,
icon: props.file.isSensitive
? "ph-eye ph-bold ph-lg"
: "ph-eye-slash ph-bold ph-lg",
action: toggleSensitive,
},
{
text: i18n.ts.describeFile,
icon: "ph-cursor-text ph-bold ph-lg",
action: describe,
},
null,
{
text: i18n.ts.copyUrl,
icon: "ph-link-simple ph-bold ph-lg",
action: copyUrl,
},
{
type: "a",
href: props.file.url,
target: "_blank",
text: i18n.ts.download,
icon: "ph-download-simple ph-bold ph-lg",
download: props.file.name,
},
null,
{
text: i18n.ts.delete,
icon: "ph-trash ph-bold ph-lg",
danger: true,
action: deleteFile,
},
];
}
function onClick(ev: MouseEvent) {
if (props.selectMode) {
emit('chosen', props.file);
emit("chosen", props.file);
} else {
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
os.popupMenu(
getMenu(),
(ev.currentTarget ?? ev.target ?? undefined) as
| HTMLElement
| undefined
);
}
}
@ -106,17 +135,20 @@ function onContextmenu(ev: MouseEvent) {
function onDragstart(ev: DragEvent) {
if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData(
_DATA_TRANSFER_DRIVE_FILE_,
JSON.stringify(props.file)
);
}
isDragging.value = true;
emit('dragstart');
emit("dragstart");
}
function onDragend() {
isDragging.value = false;
emit('dragend');
emit("dragend");
}
function rename() {
@ -126,7 +158,7 @@ function rename() {
default: props.file.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/files/update', {
os.api("drive/files/update", {
fileId: props.file.id,
name: name,
});
@ -134,27 +166,32 @@ function rename() {
}
function describe() {
os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
title: i18n.ts.describeFile,
input: {
placeholder: i18n.ts.inputNewDescription,
default: props.file.comment != null ? props.file.comment : '',
os.popup(
defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
{
title: i18n.ts.describeFile,
input: {
placeholder: i18n.ts.inputNewDescription,
default: props.file.comment != null ? props.file.comment : "",
},
image: props.file,
},
image: props.file,
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result;
os.api('drive/files/update', {
fileId: props.file.id,
comment: comment.length === 0 ? null : comment,
});
{
done: (result) => {
if (!result || result.canceled) return;
let comment = result.result;
os.api("drive/files/update", {
fileId: props.file.id,
comment: comment.length === 0 ? null : comment,
});
},
},
}, 'closed');
"closed"
);
}
function toggleSensitive() {
os.api('drive/files/update', {
os.api("drive/files/update", {
fileId: props.file.id,
isSensitive: !props.file.isSensitive,
});
@ -171,12 +208,12 @@ function addApp() {
*/
async function deleteFile() {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
type: "warning",
text: i18n.t("driveFileDeleteConfirm", { name: props.file.name }),
});
if (canceled) return;
os.api('drive/files/delete', {
os.api("drive/files/delete", {
fileId: props.file.id,
});
}
@ -189,7 +226,8 @@ async function deleteFile() {
min-height: 180px;
border-radius: 8px;
&, * {
&,
* {
cursor: pointer;
}

View File

@ -1,56 +1,68 @@
<template>
<div
class="rghtznwe"
:class="{ draghover }"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@mouseover="onMouseover"
@mouseout="onMouseout"
@dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@dragstart="onDragstart"
@dragend="onDragend"
>
<p class="name">
<template v-if="hover"><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i></template>
<template v-if="!hover"><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i></template>
{{ folder.name }}
</p>
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
{{ i18n.ts.uploadFolder }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
</div>
<div
class="rghtznwe"
:class="{ draghover }"
draggable="true"
:title="title"
@click="onClick"
@contextmenu.stop="onContextmenu"
@mouseover="onMouseover"
@mouseout="onMouseout"
@dragover.prevent.stop="onDragover"
@dragenter.prevent="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@dragstart="onDragstart"
@dragend="onDragend"
>
<p class="name">
<template v-if="hover"
><i class="ph-folder-notch-open ph-bold ph-lg ph-fw ph-lg"></i
></template>
<template v-if="!hover"
><i class="ph-folder-notch ph-bold ph-lg ph-fw ph-lg"></i
></template>
{{ folder.name }}
</p>
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
{{ i18n.ts.uploadFolder }}
</p>
<button
v-if="selectMode"
class="checkbox _button"
:class="{ checked: isSelected }"
@click.prevent.stop="checkboxClicked"
></button>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref } from 'vue';
import * as Misskey from 'calckey-js';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
import { computed, defineAsyncComponent, ref } from "vue";
import * as Misskey from "calckey-js";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
const props = withDefaults(defineProps<{
folder: Misskey.entities.DriveFolder;
isSelected?: boolean;
selectMode?: boolean;
}>(), {
isSelected: false,
selectMode: false,
});
const props = withDefaults(
defineProps<{
folder: Misskey.entities.DriveFolder;
isSelected?: boolean;
selectMode?: boolean;
}>(),
{
isSelected: false,
selectMode: false,
}
);
const emit = defineEmits<{
(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
(ev: 'move', v: Misskey.entities.DriveFolder): void;
(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
(ev: 'dragstart'): void;
(ev: 'dragend'): void;
(ev: "chosen", v: Misskey.entities.DriveFolder): void;
(ev: "move", v: Misskey.entities.DriveFolder): void;
(ev: "upload", file: File, folder: Misskey.entities.DriveFolder);
(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
(ev: "dragstart"): void;
(ev: "dragend"): void;
}>();
const hover = ref(false);
@ -60,11 +72,11 @@ const isDragging = ref(false);
const title = computed(() => props.folder.name);
function checkboxClicked() {
emit('chosen', props.folder);
emit("chosen", props.folder);
}
function onClick() {
emit('move', props.folder);
emit("move", props.folder);
}
function onMouseover() {
@ -81,18 +93,20 @@ function onDragover(ev: DragEvent) {
//
if (isDragging.value) {
//
ev.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = "none";
return;
}
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isFile = ev.dataTransfer.items[0].kind === "file";
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
const isDriveFolder =
ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
ev.dataTransfer.dropEffect =
ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
} else {
ev.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = "none";
}
}
@ -112,17 +126,17 @@ function onDrop(ev: DragEvent) {
//
if (ev.dataTransfer.files.length > 0) {
for (const file of Array.from(ev.dataTransfer.files)) {
emit('upload', file, props.folder);
emit("upload", file, props.folder);
}
return;
}
//#region
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile !== '') {
if (driveFile != null && driveFile !== "") {
const file = JSON.parse(driveFile);
emit('removeFile', file.id);
os.api('drive/files/update', {
emit("removeFile", file.id);
os.api("drive/files/update", {
fileId: file.id,
folderId: props.folder.id,
});
@ -131,33 +145,35 @@ function onDrop(ev: DragEvent) {
//#region
const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder !== '') {
if (driveFolder != null && driveFolder !== "") {
const folder = JSON.parse(driveFolder);
// reject
if (folder.id === props.folder.id) return;
emit('removeFolder', folder.id);
os.api('drive/folders/update', {
emit("removeFolder", folder.id);
os.api("drive/folders/update", {
folderId: folder.id,
parentId: props.folder.id,
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: i18n.ts.unableToProcess,
text: i18n.ts.circularReferenceFolder,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.somethingHappened,
});
}
});
})
.then(() => {
// noop
})
.catch((err) => {
switch (err) {
case "detected-circular-definition":
os.alert({
title: i18n.ts.unableToProcess,
text: i18n.ts.circularReferenceFolder,
});
break;
default:
os.alert({
type: "error",
text: i18n.ts.somethingHappened,
});
}
});
}
//#endregion
}
@ -165,22 +181,25 @@ function onDrop(ev: DragEvent) {
function onDragstart(ev: DragEvent) {
if (!ev.dataTransfer) return;
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
ev.dataTransfer.effectAllowed = "move";
ev.dataTransfer.setData(
_DATA_TRANSFER_DRIVE_FOLDER_,
JSON.stringify(props.folder)
);
isDragging.value = true;
//
// (=)
emit('dragstart');
emit("dragstart");
}
function onDragend() {
isDragging.value = false;
emit('dragend');
emit("dragend");
}
function go() {
emit('move', props.folder.id);
emit("move", props.folder.id);
}
function rename() {
@ -190,7 +209,7 @@ function rename() {
default: props.folder.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
os.api("drive/folders/update", {
folderId: props.folder.id,
name: name,
});
@ -198,54 +217,71 @@ function rename() {
}
function deleteFolder() {
os.api('drive/folders/delete', {
os.api("drive/folders/delete", {
folderId: props.folder.id,
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
})
.then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set("uploadFolder", null);
}
})
.catch((err) => {
switch (err.id) {
case "b0fc8a17-963c-405d-bfbc-859a487295e1":
os.alert({
type: "error",
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: "error",
text: i18n.ts.unableToDelete,
});
}
});
}
function setAsUploadFolder() {
defaultStore.set('uploadFolder', props.folder.id);
defaultStore.set("uploadFolder", props.folder.id);
}
function onContextmenu(ev: MouseEvent) {
os.contextMenu([{
text: i18n.ts.openInWindow,
icon: 'ph-copy ph-bold ph-lg',
action: () => {
os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
initialFolder: props.folder,
}, {
}, 'closed');
},
}, null, {
text: i18n.ts.rename,
icon: 'ph-cursor-text ph-bold ph-lg',
action: rename,
}, null, {
text: i18n.ts.delete,
icon: 'ph-trash ph-bold ph-lg',
danger: true,
action: deleteFolder,
}], ev);
os.contextMenu(
[
{
text: i18n.ts.openInWindow,
icon: "ph-copy ph-bold ph-lg",
action: () => {
os.popup(
defineAsyncComponent(
() => import("@/components/MkDriveWindow.vue")
),
{
initialFolder: props.folder,
},
{},
"closed"
);
},
},
null,
{
text: i18n.ts.rename,
icon: "ph-cursor-text ph-bold ph-lg",
action: rename,
},
null,
{
text: i18n.ts.delete,
icon: "ph-trash ph-bold ph-lg",
danger: true,
action: deleteFolder,
},
],
ev
);
}
</script>
@ -257,7 +293,8 @@ function onContextmenu(ev: MouseEvent) {
background: var(--driveFolderBg);
border-radius: 4px;
&, * {
&,
* {
cursor: pointer;
}

View File

@ -1,22 +1,23 @@
<template>
<div class="drylbebk"
:class="{ draghover }"
@click="onClick"
@dragover.prevent.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@drop.stop="onDrop"
>
<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
</div>
<div
class="drylbebk"
:class="{ draghover }"
@click="onClick"
@dragover.prevent.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@drop.stop="onDrop"
>
<i v-if="folder == null" class="ph-cloud ph-bold ph-lg"></i>
<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'calckey-js';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { ref } from "vue";
import * as Misskey from "calckey-js";
import * as os from "@/os";
import { i18n } from "@/i18n";
const props = defineProps<{
folder?: Misskey.entities.DriveFolder;
@ -24,17 +25,21 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'move', v?: Misskey.entities.DriveFolder): void;
(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
(ev: "move", v?: Misskey.entities.DriveFolder): void;
(
ev: "upload",
file: File,
folder?: Misskey.entities.DriveFolder | null
): void;
(ev: "removeFile", v: Misskey.entities.DriveFile["id"]): void;
(ev: "removeFolder", v: Misskey.entities.DriveFolder["id"]): void;
}>();
const hover = ref(false);
const draghover = ref(false);
function onClick() {
emit('move', props.folder);
emit("move", props.folder);
}
function onMouseover() {
@ -50,17 +55,19 @@ function onDragover(ev: DragEvent) {
//
if (props.folder == null && props.parentFolder == null) {
ev.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = "none";
}
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isFile = ev.dataTransfer.items[0].kind === "file";
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
const isDriveFolder =
ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
ev.dataTransfer.dropEffect =
ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
} else {
ev.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = "none";
}
return false;
@ -82,33 +89,33 @@ function onDrop(ev: DragEvent) {
//
if (ev.dataTransfer.files.length > 0) {
for (const file of Array.from(ev.dataTransfer.files)) {
emit('upload', file, props.folder);
emit("upload", file, props.folder);
}
return;
}
//#region
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile !== '') {
if (driveFile != null && driveFile !== "") {
const file = JSON.parse(driveFile);
emit('removeFile', file.id);
os.api('drive/files/update', {
emit("removeFile", file.id);
os.api("drive/files/update", {
fileId: file.id,
folderId: props.folder ? props.folder.id : null
folderId: props.folder ? props.folder.id : null,
});
}
//#endregion
//#region
const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder !== '') {
if (driveFolder != null && driveFolder !== "") {
const folder = JSON.parse(driveFolder);
// reject
if (props.folder && folder.id === props.folder.id) return;
emit('removeFolder', folder.id);
os.api('drive/folders/update', {
emit("removeFolder", folder.id);
os.api("drive/folders/update", {
folderId: folder.id,
parentId: props.folder ? props.folder.id : null
parentId: props.folder ? props.folder.id : null,
});
}
//#endregion

View File

@ -1,121 +1,181 @@
<template>
<div class="yfudmmck">
<nav>
<div class="path" @contextmenu.prevent.stop="() => {}">
<XNavFolder
:class="{ current: folder == null }"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
<template v-for="f in hierarchyFolders">
<span class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
<div class="yfudmmck">
<nav>
<div class="path" @contextmenu.prevent.stop="() => {}">
<XNavFolder
:folder="f"
:class="{ current: folder == null }"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
</template>
<span v-if="folder != null" class="separator"><i class="ph-caret-right ph-bold ph-lg"></i></span>
<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
<template v-for="f in hierarchyFolders">
<span class="separator"
><i class="ph-caret-right ph-bold ph-lg"></i
></span>
<XNavFolder
:folder="f"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
</template>
<span v-if="folder != null" class="separator"
><i class="ph-caret-right ph-bold ph-lg"></i
></span>
<span v-if="folder != null" class="folder current">{{
folder.name
}}</span>
</div>
<button class="menu _button" @click="showMenu">
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button>
</nav>
<div
ref="main"
class="main"
:class="{ uploading: uploadings.length > 0, fetching }"
@dragover.prevent.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu"
>
<div ref="contents" class="contents">
<div
v-show="folders.length > 0"
ref="foldersContainer"
class="folders"
>
<XFolder
v-for="(f, i) in folders"
:key="f.id"
v-anim="i"
class="folder"
:folder="f"
:select-mode="select === 'folder'"
:is-selected="
selectedFolders.some((x) => x.id === f.id)
"
@chosen="chooseFolder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{
i18n.ts.loadMore
}}</MkButton>
</div>
<div
v-show="files.length > 0"
ref="filesContainer"
class="files"
>
<XFile
v-for="(file, i) in files"
:key="file.id"
v-anim="i"
class="file"
:file="file"
:select-mode="select === 'file'"
:is-selected="
selectedFiles.some((x) => x.id === file.id)
"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton
v-show="moreFiles"
ref="loadMoreFiles"
@click="fetchMoreFiles"
>{{ i18n.ts.loadMore }}</MkButton
>
</div>
<div
v-if="files.length == 0 && folders.length == 0 && !fetching"
class="empty"
>
<p v-if="draghover">{{ i18n.t("empty-draghover") }}</p>
<p v-if="!draghover && folder == null">
<strong>{{ i18n.ts.emptyDrive }}</strong
><br />{{ i18n.t("empty-drive-description") }}
</p>
<p v-if="!draghover && folder != null">
{{ i18n.ts.emptyFolder }}
</p>
</div>
</div>
<MkLoading v-if="fetching" />
</div>
<button class="menu _button" @click="showMenu"><i class="ph-dots-three-outline ph-bold ph-lg"></i></button>
</nav>
<div
ref="main" class="main"
:class="{ uploading: uploadings.length > 0, fetching }"
@dragover.prevent.stop="onDragover"
@dragenter="onDragenter"
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu"
>
<div ref="contents" class="contents">
<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
<XFolder
v-for="(f, i) in folders"
:key="f.id"
v-anim="i"
class="folder"
:folder="f"
:select-mode="select === 'folder'"
:is-selected="selectedFolders.some(x => x.id === f.id)"
@chosen="chooseFolder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
</div>
<div v-show="files.length > 0" ref="filesContainer" class="files">
<XFile
v-for="(file, i) in files"
:key="file.id"
v-anim="i"
class="file"
:file="file"
:select-mode="select === 'file'"
:is-selected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
</div>
<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
</div>
</div>
<MkLoading v-if="fetching"/>
<div v-if="draghover" class="dropzone"></div>
<input
ref="fileInput"
type="file"
accept="*/*"
multiple
tabindex="-1"
@change="onChangeFileInput"
/>
</div>
<div v-if="draghover" class="dropzone"></div>
<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
</div>
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import * as Misskey from 'calckey-js';
import MkButton from './MkButton.vue';
import XNavFolder from '@/components/MkDrive.navFolder.vue';
import XFolder from '@/components/MkDrive.folder.vue';
import XFile from '@/components/MkDrive.file.vue';
import * as os from '@/os';
import { stream } from '@/stream';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { uploadFile, uploads } from '@/scripts/upload';
import {
markRaw,
nextTick,
onActivated,
onBeforeUnmount,
onMounted,
ref,
watch,
} from "vue";
import * as Misskey from "calckey-js";
import MkButton from "./MkButton.vue";
import XNavFolder from "@/components/MkDrive.navFolder.vue";
import XFolder from "@/components/MkDrive.folder.vue";
import XFile from "@/components/MkDrive.file.vue";
import * as os from "@/os";
import { stream } from "@/stream";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { uploadFile, uploads } from "@/scripts/upload";
const props = withDefaults(defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
multiple?: boolean;
select?: 'file' | 'folder' | null;
}>(), {
multiple: false,
select: null,
});
const props = withDefaults(
defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
multiple?: boolean;
select?: "file" | "folder" | null;
}>(),
{
multiple: false,
select: null,
}
);
const emit = defineEmits<{
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
(ev: 'move-root'): void;
(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
(
ev: "selected",
v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder
): void;
(
ev: "change-selection",
v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]
): void;
(ev: "move-root"): void;
(ev: "cd", v: Misskey.entities.DriveFolder | null): void;
(ev: "open-folder", v: Misskey.entities.DriveFolder): void;
}>();
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
@ -130,7 +190,7 @@ const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
const uploadings = uploads;
const connection = stream.useChannel('drive');
const connection = stream.useChannel("drive");
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // $ref使
//
@ -143,10 +203,14 @@ const isDragSource = ref(false);
const fetching = ref(true);
const ilFilesObserver = new IntersectionObserver(
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
(entries) =>
entries.some((entry) => entry.isIntersecting) &&
!fetching.value &&
moreFiles.value &&
fetchMoreFiles()
);
watch(folder, () => emit('cd', folder.value));
watch(folder, () => emit("cd", folder.value));
function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
addFile(file, true);
@ -165,11 +229,15 @@ function onStreamDriveFileDeleted(fileId: string) {
removeFile(fileId);
}
function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
function onStreamDriveFolderCreated(
createdFolder: Misskey.entities.DriveFolder
) {
addFolder(createdFolder, true);
}
function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
function onStreamDriveFolderUpdated(
updatedFolder: Misskey.entities.DriveFolder
) {
const current = folder.value ? folder.value.id : null;
if (current !== updatedFolder.parentId) {
removeFolder(updatedFolder);
@ -188,17 +256,19 @@ function onDragover(ev: DragEvent): any {
//
if (isDragSource.value) {
//
ev.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = "none";
return;
}
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isFile = ev.dataTransfer.items[0].kind === "file";
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
const isDriveFolder =
ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
ev.dataTransfer.dropEffect =
ev.dataTransfer.effectAllowed === "all" ? "copy" : "move";
} else {
ev.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = "none";
}
return false;
@ -227,11 +297,11 @@ function onDrop(ev: DragEvent): any {
//#region
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile !== '') {
if (driveFile != null && driveFile !== "") {
const file = JSON.parse(driveFile);
if (files.value.some(f => f.id === file.id)) return;
if (files.value.some((f) => f.id === file.id)) return;
removeFile(file.id);
os.api('drive/files/update', {
os.api("drive/files/update", {
fileId: file.id,
folderId: folder.value ? folder.value.id : null,
});
@ -240,33 +310,35 @@ function onDrop(ev: DragEvent): any {
//#region
const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder !== '') {
if (driveFolder != null && driveFolder !== "") {
const droppedFolder = JSON.parse(driveFolder);
// reject
if (folder.value && droppedFolder.id === folder.value.id) return false;
if (folders.value.some(f => f.id === droppedFolder.id)) return false;
if (folders.value.some((f) => f.id === droppedFolder.id)) return false;
removeFolder(droppedFolder.id);
os.api('drive/folders/update', {
os.api("drive/folders/update", {
folderId: droppedFolder.id,
parentId: folder.value ? folder.value.id : null,
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: i18n.ts.unableToProcess,
text: i18n.ts.circularReferenceFolder,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.somethingHappened,
});
}
});
})
.then(() => {
// noop
})
.catch((err) => {
switch (err) {
case "detected-circular-definition":
os.alert({
title: i18n.ts.unableToProcess,
text: i18n.ts.circularReferenceFolder,
});
break;
default:
os.alert({
type: "error",
text: i18n.ts.somethingHappened,
});
}
});
}
//#endregion
}
@ -278,11 +350,11 @@ function selectLocalFile() {
function urlUpload() {
os.inputText({
title: i18n.ts.uploadFromUrl,
type: 'url',
type: "url",
placeholder: i18n.ts.uploadFromUrlDescription,
}).then(({ canceled, result: url }) => {
if (canceled || !url) return;
os.api('drive/files/upload-from-url', {
os.api("drive/files/upload-from-url", {
url: url,
folderId: folder.value ? folder.value.id : undefined,
});
@ -300,10 +372,10 @@ function createFolder() {
placeholder: i18n.ts.folderName,
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/create', {
os.api("drive/folders/create", {
name: name,
parentId: folder.value ? folder.value.id : undefined,
}).then(createdFolder => {
}).then((createdFolder) => {
addFolder(createdFolder, true);
});
});
@ -316,10 +388,10 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
default: folderToRename.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
os.api("drive/folders/update", {
folderId: folderToRename.id,
name: name,
}).then(updatedFolder => {
}).then((updatedFolder) => {
// FIXME:
move(updatedFolder);
});
@ -327,27 +399,29 @@ function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
}
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
os.api('drive/folders/delete', {
os.api("drive/folders/delete", {
folderId: folderToDelete.id,
}).then(() => {
//
move(folderToDelete.parentId);
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
})
.then(() => {
//
move(folderToDelete.parentId);
})
.catch((err) => {
switch (err.id) {
case "b0fc8a17-963c-405d-bfbc-859a487295e1":
os.alert({
type: "error",
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: "error",
text: i18n.ts.unableToDelete,
});
}
});
}
function onChangeFileInput() {
@ -357,46 +431,62 @@ function onChangeFileInput() {
}
}
function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
function upload(
file: File,
folderToUpload?: Misskey.entities.DriveFolder | null
) {
uploadFile(
file,
folderToUpload && typeof folderToUpload === "object"
? folderToUpload.id
: null,
undefined,
keepOriginal.value
).then((res) => {
addFile(res, true);
});
}
function chooseFile(file: Misskey.entities.DriveFile) {
const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
const isAlreadySelected = selectedFiles.value.some((f) => f.id === file.id);
if (props.multiple) {
if (isAlreadySelected) {
selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
selectedFiles.value = selectedFiles.value.filter(
(f) => f.id !== file.id
);
} else {
selectedFiles.value.push(file);
}
emit('change-selection', selectedFiles.value);
emit("change-selection", selectedFiles.value);
} else {
if (isAlreadySelected) {
emit('selected', file);
emit("selected", file);
} else {
selectedFiles.value = [file];
emit('change-selection', [file]);
emit("change-selection", [file]);
}
}
}
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
const isAlreadySelected = selectedFolders.value.some(
(f) => f.id === folderToChoose.id
);
if (props.multiple) {
if (isAlreadySelected) {
selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
selectedFolders.value = selectedFolders.value.filter(
(f) => f.id !== folderToChoose.id
);
} else {
selectedFolders.value.push(folderToChoose);
}
emit('change-selection', selectedFolders.value);
emit("change-selection", selectedFolders.value);
} else {
if (isAlreadySelected) {
emit('selected', folderToChoose);
emit("selected", folderToChoose);
} else {
selectedFolders.value = [folderToChoose];
emit('change-selection', [folderToChoose]);
emit("change-selection", [folderToChoose]);
}
}
}
@ -405,26 +495,26 @@ function move(target?: Misskey.entities.DriveFolder) {
if (!target) {
goRoot();
return;
} else if (typeof target === 'object') {
} else if (typeof target === "object") {
target = target.id;
}
fetching.value = true;
os.api('drive/folders/show', {
os.api("drive/folders/show", {
folderId: target,
}).then(folderToMove => {
}).then((folderToMove) => {
folder.value = folderToMove;
hierarchyFolders.value = [];
const dive = folderToDive => {
const dive = (folderToDive) => {
hierarchyFolders.value.unshift(folderToDive);
if (folderToDive.parent) dive(folderToDive.parent);
};
if (folderToMove.parent) dive(folderToMove.parent);
emit('open-folder', folderToMove);
emit("open-folder", folderToMove);
fetch();
});
}
@ -433,8 +523,8 @@ function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
const current = folder.value ? folder.value.id : null;
if (current !== folderToAdd.parentId) return;
if (folders.value.some(f => f.id === folderToAdd.id)) {
const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
if (folders.value.some((f) => f.id === folderToAdd.id)) {
const exist = folders.value.map((f) => f.id).indexOf(folderToAdd.id);
folders.value[exist] = folderToAdd;
return;
}
@ -450,8 +540,8 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
const current = folder.value ? folder.value.id : null;
if (current !== fileToAdd.folderId) return;
if (files.value.some(f => f.id === fileToAdd.id)) {
const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
if (files.value.some((f) => f.id === fileToAdd.id)) {
const exist = files.value.map((f) => f.id).indexOf(fileToAdd.id);
files.value[exist] = fileToAdd;
return;
}
@ -464,13 +554,14 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
}
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
const folderIdToRemove =
typeof folderToRemove === "object" ? folderToRemove.id : folderToRemove;
folders.value = folders.value.filter((f) => f.id !== folderIdToRemove);
}
function removeFile(file: Misskey.entities.DriveFile | string) {
const fileId = typeof file === 'object' ? file.id : file;
files.value = files.value.filter(f => f.id !== fileId);
const fileId = typeof file === "object" ? file.id : file;
files.value = files.value.filter((f) => f.id !== fileId);
}
function appendFile(file: Misskey.entities.DriveFile) {
@ -495,7 +586,7 @@ function goRoot() {
folder.value = null;
hierarchyFolders.value = [];
emit('move-root');
emit("move-root");
fetch();
}
@ -509,30 +600,37 @@ async function fetch() {
const foldersMax = 30;
const filesMax = 30;
const foldersPromise = os.api('drive/folders', {
folderId: folder.value ? folder.value.id : null,
limit: foldersMax + 1,
}).then(fetchedFolders => {
if (fetchedFolders.length === foldersMax + 1) {
moreFolders.value = true;
fetchedFolders.pop();
}
return fetchedFolders;
});
const foldersPromise = os
.api("drive/folders", {
folderId: folder.value ? folder.value.id : null,
limit: foldersMax + 1,
})
.then((fetchedFolders) => {
if (fetchedFolders.length === foldersMax + 1) {
moreFolders.value = true;
fetchedFolders.pop();
}
return fetchedFolders;
});
const filesPromise = os.api('drive/files', {
folderId: folder.value ? folder.value.id : null,
type: props.type,
limit: filesMax + 1,
}).then(fetchedFiles => {
if (fetchedFiles.length === filesMax + 1) {
moreFiles.value = true;
fetchedFiles.pop();
}
return fetchedFiles;
});
const filesPromise = os
.api("drive/files", {
folderId: folder.value ? folder.value.id : null,
type: props.type,
limit: filesMax + 1,
})
.then((fetchedFiles) => {
if (fetchedFiles.length === filesMax + 1) {
moreFiles.value = true;
fetchedFiles.pop();
}
return fetchedFiles;
});
const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
const [fetchedFolders, fetchedFiles] = await Promise.all([
foldersPromise,
filesPromise,
]);
for (const x of fetchedFolders) appendFolder(x);
for (const x of fetchedFiles) appendFile(x);
@ -546,12 +644,12 @@ function fetchMoreFiles() {
const max = 30;
//
os.api('drive/files', {
os.api("drive/files", {
folderId: folder.value ? folder.value.id : null,
type: props.type,
untilId: files.value[files.value.length - 1].id,
limit: max + 1,
}).then(files => {
}).then((files) => {
if (files.length === max + 1) {
moreFiles.value = true;
files.pop();
@ -564,41 +662,71 @@ function fetchMoreFiles() {
}
function getMenu() {
return [{
type: 'switch',
text: i18n.ts.keepOriginalUploading,
ref: keepOriginal,
}, null, {
text: i18n.ts.addFile,
type: 'label',
}, {
text: i18n.ts.upload,
icon: 'ph-upload-simple ph-bold ph-lg',
action: () => { selectLocalFile(); },
}, {
text: i18n.ts.fromUrl,
icon: 'ph-link-simple ph-bold ph-lg',
action: () => { urlUpload(); },
}, null, {
text: folder.value ? folder.value.name : i18n.ts.drive,
type: 'label',
}, folder.value ? {
text: i18n.ts.renameFolder,
icon: 'ph-cursor-text ph-bold ph-lg',
action: () => { renameFolder(folder.value); },
} : undefined, folder.value ? {
text: i18n.ts.deleteFolder,
icon: 'ph-trash ph-bold ph-lg',
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
} : undefined, {
text: i18n.ts.createFolder,
icon: 'ph-folder-notch-plus ph-bold ph-lg',
action: () => { createFolder(); },
}];
return [
{
type: "switch",
text: i18n.ts.keepOriginalUploading,
ref: keepOriginal,
},
null,
{
text: i18n.ts.addFile,
type: "label",
},
{
text: i18n.ts.upload,
icon: "ph-upload-simple ph-bold ph-lg",
action: () => {
selectLocalFile();
},
},
{
text: i18n.ts.fromUrl,
icon: "ph-link-simple ph-bold ph-lg",
action: () => {
urlUpload();
},
},
null,
{
text: folder.value ? folder.value.name : i18n.ts.drive,
type: "label",
},
folder.value
? {
text: i18n.ts.renameFolder,
icon: "ph-cursor-text ph-bold ph-lg",
action: () => {
renameFolder(folder.value);
},
}
: undefined,
folder.value
? {
text: i18n.ts.deleteFolder,
icon: "ph-trash ph-bold ph-lg",
action: () => {
deleteFolder(
folder.value as Misskey.entities.DriveFolder
);
},
}
: undefined,
{
text: i18n.ts.createFolder,
icon: "ph-folder-notch-plus ph-bold ph-lg",
action: () => {
createFolder();
},
},
];
}
function showMenu(ev: MouseEvent) {
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
os.popupMenu(
getMenu(),
(ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined
);
}
function onContextmenu(ev: MouseEvent) {
@ -612,12 +740,12 @@ onMounted(() => {
});
}
connection.on('fileCreated', onStreamDriveFileCreated);
connection.on('fileUpdated', onStreamDriveFileUpdated);
connection.on('fileDeleted', onStreamDriveFileDeleted);
connection.on('folderCreated', onStreamDriveFolderCreated);
connection.on('folderUpdated', onStreamDriveFolderUpdated);
connection.on('folderDeleted', onStreamDriveFolderDeleted);
connection.on("fileCreated", onStreamDriveFileCreated);
connection.on("fileUpdated", onStreamDriveFileUpdated);
connection.on("fileDeleted", onStreamDriveFileDeleted);
connection.on("folderCreated", onStreamDriveFolderCreated);
connection.on("folderUpdated", onStreamDriveFolderUpdated);
connection.on("folderDeleted", onStreamDriveFolderDeleted);
if (props.initialFolder) {
move(props.initialFolder);
@ -656,7 +784,8 @@ onBeforeUnmount(() => {
font-size: 0.9em;
box-shadow: 0 1px 0 var(--divider);
&, * {
&,
* {
user-select: none;
}
@ -714,7 +843,8 @@ onBeforeUnmount(() => {
overflow: auto;
padding: var(--margin);
&, * {
&,
* {
user-select: none;
}
@ -735,7 +865,6 @@ onBeforeUnmount(() => {
}
> .contents {
> .folders,
> .files {
display: flex;

View File

@ -1,23 +1,48 @@
<template>
<div ref="thumbnail" class="zdjebgpv">
<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
<i v-else-if="is === 'image'" class="ph-file-image ph-bold ph-lg icon"></i>
<i v-else-if="is === 'video'" class="ph-file-video ph-bold ph-lg icon"></i>
<i v-else-if="is === 'audio' || is === 'midi'" class="ph-file-audio ph-bold ph-lg icon"></i>
<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
<i v-else-if="is === 'textfile'" class="ph-file-text ph-bold ph-lg icon"></i>
<i v-else-if="is === 'archive'" class="ph-file-zip ph-bold ph-lg icon"></i>
<i v-else class="ph-file ph-bold ph-lg icon"></i>
<div ref="thumbnail" class="zdjebgpv">
<ImgWithBlurhash
v-if="isThumbnailAvailable"
:hash="file.blurhash"
:src="file.thumbnailUrl"
:alt="file.name"
:title="file.name"
:cover="fit !== 'contain'"
/>
<i
v-else-if="is === 'image'"
class="ph-file-image ph-bold ph-lg icon"
></i>
<i
v-else-if="is === 'video'"
class="ph-file-video ph-bold ph-lg icon"
></i>
<i
v-else-if="is === 'audio' || is === 'midi'"
class="ph-file-audio ph-bold ph-lg icon"
></i>
<i v-else-if="is === 'csv'" class="ph-file-csv ph-bold ph-lg icon"></i>
<i v-else-if="is === 'pdf'" class="ph-file-pdf ph-bold ph-lg icon"></i>
<i
v-else-if="is === 'textfile'"
class="ph-file-text ph-bold ph-lg icon"
></i>
<i
v-else-if="is === 'archive'"
class="ph-file-zip ph-bold ph-lg icon"
></i>
<i v-else class="ph-file ph-bold ph-lg icon"></i>
<i v-if="isThumbnailAvailable && is === 'video'" class="ph-file-video ph-bold ph-lg icon-sub"></i>
</div>
<i
v-if="isThumbnailAvailable && is === 'video'"
class="ph-file-video ph-bold ph-lg icon-sub"
></i>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import type * as Misskey from 'calckey-js';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import { computed } from "vue";
import type * as Misskey from "calckey-js";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
const props = defineProps<{
file: Misskey.entities.DriveFile;
@ -25,30 +50,33 @@ const props = defineProps<{
}>();
const is = computed(() => {
if (props.file.type.startsWith('image/')) return 'image';
if (props.file.type.startsWith('video/')) return 'video';
if (props.file.type === 'audio/midi') return 'midi';
if (props.file.type.startsWith('audio/')) return 'audio';
if (props.file.type.endsWith('/csv')) return 'csv';
if (props.file.type.endsWith('/pdf')) return 'pdf';
if (props.file.type.startsWith('text/')) return 'textfile';
if ([
'application/zip',
'application/x-cpio',
'application/x-bzip',
'application/x-bzip2',
'application/java-archive',
'application/x-rar-compressed',
'application/x-tar',
'application/gzip',
'application/x-7z-compressed',
].some(archiveType => archiveType === props.file.type)) return 'archive';
return 'unknown';
if (props.file.type.startsWith("image/")) return "image";
if (props.file.type.startsWith("video/")) return "video";
if (props.file.type === "audio/midi") return "midi";
if (props.file.type.startsWith("audio/")) return "audio";
if (props.file.type.endsWith("/csv")) return "csv";
if (props.file.type.endsWith("/pdf")) return "pdf";
if (props.file.type.startsWith("text/")) return "textfile";
if (
[
"application/zip",
"application/x-cpio",
"application/x-bzip",
"application/x-bzip2",
"application/java-archive",
"application/x-rar-compressed",
"application/x-tar",
"application/gzip",
"application/x-7z-compressed",
].some((archiveType) => archiveType === props.file.type)
)
return "archive";
return "unknown";
});
const isThumbnailAvailable = computed(() => {
return props.file.thumbnailUrl
? (is.value === 'image' as const || is.value === 'video')
? is.value === ("image" as const) || is.value === "video"
: false;
});
</script>

View File

@ -1,41 +1,61 @@
<template>
<XModalWindow
ref="dialog"
:width="800"
:height="500"
:with-ok-button="true"
:ok-button-disabled="(type === 'file') && (selected.length === 0)"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="emit('closed')"
>
<template #header>
{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template>
<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
</XModalWindow>
<XModalWindow
ref="dialog"
:width="800"
:height="500"
:with-ok-button="true"
:ok-button-disabled="type === 'file' && selected.length === 0"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="emit('closed')"
>
<template #header>
{{
multiple
? type === "file"
? i18n.ts.selectFiles
: i18n.ts.selectFolders
: type === "file"
? i18n.ts.selectFile
: i18n.ts.selectFolder
}}
<span
v-if="selected.length > 0"
style="margin-left: 8px; opacity: 0.5"
>({{ number(selected.length) }})</span
>
</template>
<XDrive
:multiple="multiple"
:select="type"
@changeSelection="onChangeSelection"
@selected="ok()"
/>
</XModalWindow>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'calckey-js';
import XDrive from '@/components/MkDrive.vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import number from '@/filters/number';
import { i18n } from '@/i18n';
import { ref } from "vue";
import * as Misskey from "calckey-js";
import XDrive from "@/components/MkDrive.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import number from "@/filters/number";
import { i18n } from "@/i18n";
withDefaults(defineProps<{
type?: 'file' | 'folder';
multiple: boolean;
}>(), {
type: 'file',
});
withDefaults(
defineProps<{
type?: "file" | "folder";
multiple: boolean;
}>(),
{
type: "file",
}
);
const emit = defineEmits<{
(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
(ev: 'closed'): void;
(ev: "done", r?: Misskey.entities.DriveFile[]): void;
(ev: "closed"): void;
}>();
const dialog = ref<InstanceType<typeof XModalWindow>>();
@ -43,12 +63,12 @@ const dialog = ref<InstanceType<typeof XModalWindow>>();
const selected = ref<Misskey.entities.DriveFile[]>([]);
function ok() {
emit('done', selected.value);
emit("done", selected.value);
dialog.value?.close();
}
function cancel() {
emit('done');
emit("done");
dialog.value?.close();
}

View File

@ -1,30 +1,30 @@
<template>
<XWindow
ref="window"
:initial-width="800"
:initial-height="500"
:can-resize="true"
@closed="emit('closed')"
>
<template #header>
{{ i18n.ts.drive }}
</template>
<XDrive :initial-folder="initialFolder"/>
</XWindow>
<XWindow
ref="window"
:initial-width="800"
:initial-height="500"
:can-resize="true"
@closed="emit('closed')"
>
<template #header>
{{ i18n.ts.drive }}
</template>
<XDrive :initial-folder="initialFolder" />
</XWindow>
</template>
<script lang="ts" setup>
import { } from 'vue';
import * as Misskey from 'calckey-js';
import XDrive from '@/components/MkDrive.vue';
import XWindow from '@/components/MkWindow.vue';
import { i18n } from '@/i18n';
import {} from "vue";
import * as Misskey from "calckey-js";
import XDrive from "@/components/MkDrive.vue";
import XWindow from "@/components/MkWindow.vue";
import { i18n } from "@/i18n";
defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: "closed"): void;
}>();
</script>

View File

@ -1,24 +1,32 @@
<template>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<section>
<header class="_acrylic" @click="shown = !shown">
<i class="toggle ph-fw ph-lg" :class="shown ? 'ph-caret-down-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> ({{ emojis.length }})
</header>
<div v-if="shown" class="body">
<button
v-for="emoji in emojis"
:key="emoji"
class="_button item"
@click="emit('chosen', emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<section>
<header class="_acrylic" @click="shown = !shown">
<i
class="toggle ph-fw ph-lg"
:class="
shown
? 'ph-caret-down-bold ph-lg'
: 'ph-caret-up ph-bold ph-lg'
"
></i>
<slot></slot> ({{ emojis.length }})
</header>
<div v-if="shown" class="body">
<button
v-for="emoji in emojis"
:key="emoji"
class="_button item"
@click="emit('chosen', emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji" :normal="true" />
</button>
</div>
</section>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref } from "vue";
const props = defineProps<{
emojis: string[];
@ -26,11 +34,10 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'chosen', v: string, event: MouseEvent): void;
(ev: "chosen", v: string, event: MouseEvent): void;
}>();
const shown = ref(!!props.initialShown);
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

View File

@ -1,107 +1,191 @@
<template>
<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
<section class="result">
<div v-if="searchResultCustom.length > 0" class="body">
<button
v-for="emoji in searchResultCustom"
:key="emoji.id"
class="_button item"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button>
</div>
<div v-if="searchResultUnicode.length > 0" class="body">
<button
v-for="emoji in searchResultUnicode"
:key="emoji.name"
class="_button item"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji.char"/>
</button>
</div>
</section>
<div v-if="tab === 'index'" class="group index">
<section v-if="showPinned">
<div class="body">
<div
class="omfetrab"
:class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]"
:style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
>
<input
ref="search"
v-model.trim="q"
class="search"
data-prevent-emoji-insert
:class="{ filled: q != null && q != '' }"
:placeholder="i18n.ts.search"
type="search"
@paste.stop="paste"
@keyup.enter="done()"
/>
<div ref="emojis" class="emojis">
<section class="result">
<div v-if="searchResultCustom.length > 0" class="body">
<button
v-for="emoji in pinned"
:key="emoji"
v-for="emoji in searchResultCustom"
:key="emoji.id"
class="_button item"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
<img
class="emoji"
:src="
disableShowingAnimatedImages
? getStaticImageUrl(emoji.url)
: emoji.url
"
/>
</button>
</div>
<div v-if="searchResultUnicode.length > 0" class="body">
<button
v-for="emoji in searchResultUnicode"
:key="emoji.name"
class="_button item"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji.char" />
</button>
</div>
</section>
<section>
<header class="_acrylic"><i class="ph-alarm ph-bold ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
<div class="body">
<button
v-for="emoji in recentlyUsedEmojis"
:key="emoji"
class="_button item"
@click="chosen(emoji, $event)"
>
<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
</button>
</div>
</section>
<div v-if="tab === 'index'" class="group index">
<section v-if="showPinned">
<div class="body">
<button
v-for="emoji in pinned"
:key="emoji"
class="_button item"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji
class="emoji"
:emoji="emoji"
:normal="true"
/>
</button>
</div>
</section>
<section>
<header class="_acrylic">
<i class="ph-alarm ph-bold ph-fw ph-lg"></i>
{{ i18n.ts.recentUsed }}
</header>
<div class="body">
<button
v-for="emoji in recentlyUsedEmojis"
:key="emoji"
class="_button item"
@click="chosen(emoji, $event)"
>
<MkEmoji
class="emoji"
:emoji="emoji"
:normal="true"
/>
</button>
</div>
</section>
</div>
<div v-once class="group">
<header>{{ i18n.ts.customEmojis }}</header>
<XSection
v-for="category in customEmojiCategories"
:key="'custom:' + category"
:initial-shown="false"
:emojis="
customEmojis
.filter((e) => e.category === category)
.map((e) => ':' + e.name + ':')
"
@chosen="chosen"
>{{ category || i18n.ts.other }}</XSection
>
</div>
<div v-once class="group">
<header>{{ i18n.ts.emoji }}</header>
<XSection
v-for="category in categories"
:key="category"
:emojis="
emojilist
.filter((e) => e.category === category)
.map((e) => e.char)
"
@chosen="chosen"
>{{ category }}</XSection
>
</div>
</div>
<div v-once class="group">
<header>{{ i18n.ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
</div>
<div v-once class="group">
<header>{{ i18n.ts.emoji }}</header>
<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
<div class="tabs">
<button
class="_button tab"
:class="{ active: tab === 'index' }"
@click="tab = 'index'"
>
<i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i>
</button>
<button
class="_button tab"
:class="{ active: tab === 'custom' }"
@click="tab = 'custom'"
>
<i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i>
</button>
<button
class="_button tab"
:class="{ active: tab === 'unicode' }"
@click="tab = 'unicode'"
>
<i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i>
</button>
<button
class="_button tab"
:class="{ active: tab === 'tags' }"
@click="tab = 'tags'"
>
<i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i>
</button>
</div>
</div>
<div class="tabs">
<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ph-asterisk ph-bold ph-lg ph-fw ph-lg"></i></button>
<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ph-smiley ph-bold ph-lg ph-fw ph-lg"></i></button>
<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ph-leaf ph-bold ph-lg ph-fw ph-lg"></i></button>
<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ph-hash ph-bold ph-lg ph-fw ph-lg"></i></button>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import * as Misskey from 'calckey-js';
import XSection from '@/components/MkEmojiPicker.section.vue';
import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import Ripple from '@/components/MkRipple.vue';
import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch';
import { deviceKind } from '@/scripts/device-kind';
import { emojiCategories, instance } from '@/instance';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
import { ref, computed, watch, onMounted } from "vue";
import * as Misskey from "calckey-js";
import XSection from "@/components/MkEmojiPicker.section.vue";
import {
emojilist,
UnicodeEmojiDef,
unicodeEmojiCategories as categories,
} from "@/scripts/emojilist";
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import Ripple from "@/components/MkRipple.vue";
import * as os from "@/os";
import { isTouchUsing } from "@/scripts/touch";
import { deviceKind } from "@/scripts/device-kind";
import { emojiCategories, instance } from "@/instance";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
const props = withDefaults(defineProps<{
showPinned?: boolean;
asReactionPicker?: boolean;
maxHeight?: number;
asDrawer?: boolean;
}>(), {
showPinned: true,
});
const props = withDefaults(
defineProps<{
showPinned?: boolean;
asReactionPicker?: boolean;
maxHeight?: number;
asDrawer?: boolean;
}>(),
{
showPinned: true,
}
);
const emit = defineEmits<{
(ev: 'chosen', v: string): void;
(ev: "chosen", v: string): void;
}>();
const search = ref<HTMLInputElement>();
@ -116,41 +200,48 @@ const {
recentlyUsedEmojis,
} = defaultStore.reactiveState;
const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
const size = computed(() =>
props.asReactionPicker ? reactionPickerSize.value : 1
);
const width = computed(() =>
props.asReactionPicker ? reactionPickerWidth.value : 3
);
const height = computed(() =>
props.asReactionPicker ? reactionPickerHeight.value : 2
);
const customEmojiCategories = emojiCategories;
const customEmojis = instance.emojis;
const q = ref<string | null>(null);
const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
const tab = ref<"index" | "custom" | "unicode" | "tags">("index");
watch(q, () => {
if (emojis.value) emojis.value.scrollTop = 0;
if (q.value == null || q.value === '') {
if (q.value == null || q.value === "") {
searchResultCustom.value = [];
searchResultUnicode.value = [];
return;
}
const newQ = q.value.replace(/:/g, '').toLowerCase();
const newQ = q.value.replace(/:/g, "").toLowerCase();
const searchCustom = () => {
const max = 8;
const emojis = customEmojis;
const matches = new Set<Misskey.entities.CustomEmoji>();
const exactMatch = emojis.find(emoji => emoji.name === newQ);
const exactMatch = emojis.find((emoji) => emoji.name === newQ);
if (exactMatch) matches.add(exactMatch);
if (newQ.includes(' ')) { // AND
const keywords = newQ.split(' ');
if (newQ.includes(" ")) {
// AND
const keywords = newQ.split(" ");
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword))) {
if (keywords.every((keyword) => emoji.name.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -159,7 +250,15 @@ watch(q, () => {
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
if (
keywords.every(
(keyword) =>
emoji.name.includes(keyword) ||
emoji.aliases.some((alias) =>
alias.includes(keyword)
)
)
) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -174,7 +273,7 @@ watch(q, () => {
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
if (emoji.aliases.some((alias) => alias.startsWith(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -190,7 +289,7 @@ watch(q, () => {
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.includes(newQ))) {
if (emoji.aliases.some((alias) => alias.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -205,15 +304,16 @@ watch(q, () => {
const emojis = emojilist;
const matches = new Set<UnicodeEmojiDef>();
const exactMatch = emojis.find(emoji => emoji.name === newQ);
const exactMatch = emojis.find((emoji) => emoji.name === newQ);
if (exactMatch) matches.add(exactMatch);
if (newQ.includes(' ')) { // AND
const keywords = newQ.split(' ');
if (newQ.includes(" ")) {
// AND
const keywords = newQ.split(" ");
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword))) {
if (keywords.every((keyword) => emoji.name.includes(keyword))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -222,7 +322,15 @@ watch(q, () => {
//
for (const emoji of emojis) {
if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
if (
keywords.every(
(keyword) =>
emoji.name.includes(keyword) ||
emoji.keywords.some((alias) =>
alias.includes(keyword)
)
)
) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -237,7 +345,9 @@ watch(q, () => {
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
if (
emoji.keywords.some((keyword) => keyword.startsWith(newQ))
) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -253,7 +363,7 @@ watch(q, () => {
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
if (emoji.keywords.some((keyword) => keyword.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -268,7 +378,7 @@ watch(q, () => {
});
function focus() {
if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
if (!["smartphone", "tablet"].includes(deviceKind) && !isTouchUsing) {
search.value?.focus({
preventScroll: true,
});
@ -277,36 +387,40 @@ function focus() {
function reset() {
if (emojis.value) emojis.value.scrollTop = 0;
q.value = '';
q.value = "";
}
function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
function getKey(
emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef
): string {
return typeof emoji === "string" ? emoji : emoji.char || `:${emoji.name}:`;
}
function chosen(emoji: any, ev?: MouseEvent) {
const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
const el =
ev &&
((ev.currentTarget ?? ev.target) as HTMLElement | null | undefined);
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2);
os.popup(Ripple, { x, y }, {}, 'end');
const x = rect.left + el.offsetWidth / 2;
const y = rect.top + el.offsetHeight / 2;
os.popup(Ripple, { x, y }, {}, "end");
}
const key = getKey(emoji);
emit('chosen', key);
emit("chosen", key);
// 使
if (!pinned.value.includes(key)) {
let recents = defaultStore.state.recentlyUsedEmojis;
recents = recents.filter((emoji: any) => emoji !== key);
recents.unshift(key);
defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
defaultStore.set("recentlyUsedEmojis", recents.splice(0, 32));
}
}
function paste(event: ClipboardEvent) {
const paste = (event.clipboardData || window.clipboardData).getData('text');
const paste = (event.clipboardData || window.clipboardData).getData("text");
if (done(paste)) {
event.preventDefault();
}
@ -314,15 +428,17 @@ function paste(event: ClipboardEvent) {
function done(query?: any): boolean | void {
if (query == null) query = q.value;
if (query == null || typeof query !== 'string') return;
if (query == null || typeof query !== "string") return;
const q2 = query.replaceAll(':', '');
const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
const q2 = query.replaceAll(":", "");
const exactMatchCustom = customEmojis.find((emoji) => emoji.name === q2);
if (exactMatchCustom) {
chosen(exactMatchCustom);
return true;
}
const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
const exactMatchUnicode = emojilist.find(
(emoji) => emoji.char === q2 || emoji.name === q2
);
if (exactMatchUnicode) {
chosen(exactMatchUnicode);
return true;
@ -543,7 +659,7 @@ defineExpose({
> .emoji {
height: 1.25em;
vertical-align: -.25em;
vertical-align: -0.25em;
pointer-events: none;
}
}

View File

@ -1,58 +1,66 @@
<template>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
:z-priority="'middle'"
:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
:transparent-bg="true"
:manual-showing="manualShowing"
:src="src"
@click="modal?.close()"
@opening="opening"
@close="emit('close')"
@closed="emit('closed')"
>
<MkEmojiPicker
ref="picker"
class="ryghynhb _popup _shadow"
:class="{ drawer: type === 'drawer' }"
:show-pinned="showPinned"
:as-reaction-picker="asReactionPicker"
:as-drawer="type === 'drawer'"
:max-height="maxHeight"
@chosen="chosen"
/>
</MkModal>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
:z-priority="'middle'"
:prefer-type="
asReactionPicker &&
defaultStore.state.reactionPickerUseDrawerForMobile === false
? 'popup'
: 'auto'
"
:transparent-bg="true"
:manual-showing="manualShowing"
:src="src"
@click="modal?.close()"
@opening="opening"
@close="emit('close')"
@closed="emit('closed')"
>
<MkEmojiPicker
ref="picker"
class="ryghynhb _popup _shadow"
:class="{ drawer: type === 'drawer' }"
:show-pinned="showPinned"
:as-reaction-picker="asReactionPicker"
:as-drawer="type === 'drawer'"
:max-height="maxHeight"
@chosen="chosen"
/>
</MkModal>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MkModal from '@/components/MkModal.vue';
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
import { defaultStore } from '@/store';
import { ref } from "vue";
import MkModal from "@/components/MkModal.vue";
import MkEmojiPicker from "@/components/MkEmojiPicker.vue";
import { defaultStore } from "@/store";
withDefaults(defineProps<{
manualShowing?: boolean | null;
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(), {
manualShowing: null,
showPinned: true,
asReactionPicker: false,
});
withDefaults(
defineProps<{
manualShowing?: boolean | null;
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(),
{
manualShowing: null,
showPinned: true,
asReactionPicker: false,
}
);
const emit = defineEmits<{
(ev: 'done', v: any): void;
(ev: 'close'): void;
(ev: 'closed'): void;
(ev: "done", v: any): void;
(ev: "close"): void;
(ev: "closed"): void;
}>();
const modal = ref<InstanceType<typeof MkModal>>();
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
function chosen(emoji: any) {
emit('done', emoji);
emit("done", emoji);
modal.value?.close();
}

View File

@ -1,15 +1,19 @@
<template>
<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
<div
v-if="meta"
class="xfbouadm"
:style="{ backgroundImage: `url(${meta.backgroundImageUrl})` }"
></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'calckey-js';
import * as os from '@/os';
import { ref } from "vue";
import * as Misskey from "calckey-js";
import * as os from "@/os";
const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
os.api('meta', { detail: true }).then(gotMeta => {
os.api("meta", { detail: true }).then((gotMeta) => {
meta.value = gotMeta;
});
</script>

View File

@ -1,56 +1,80 @@
<template>
<div>
<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
<MkA
v-for="file in items"
:key="file.id"
v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
:to="`/admin/file/${file.id}`"
class="file _button"
<div>
<MkPagination
v-slot="{ items }"
:pagination="pagination"
class="urempief"
:class="{ grid: viewMode === 'grid' }"
>
<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
<div v-if="viewMode === 'list'" class="body">
<div>
<small style="opacity: 0.7;">{{ file.name }}</small>
<MkA
v-for="file in items"
:key="file.id"
v-tooltip.mfm="
`${file.type}\n${bytes(file.size)}\n${new Date(
file.createdAt
).toLocaleString()}\nby ${
file.user ? '@' + Acct.toString(file.user) : 'system'
}`
"
:to="`/admin/file/${file.id}`"
class="file _button"
>
<div v-if="file.isSensitive" class="sensitive-label">
{{ i18n.ts.sensitive }}
</div>
<div>
<MkAcct v-if="file.user" :user="file.user"/>
<div v-else>{{ i18n.ts.system }}</div>
<MkDriveFileThumbnail
class="thumbnail"
:file="file"
fit="contain"
/>
<div v-if="viewMode === 'list'" class="body">
<div>
<small style="opacity: 0.7">{{ file.name }}</small>
</div>
<div>
<MkAcct v-if="file.user" :user="file.user" />
<div v-else>{{ i18n.ts.system }}</div>
</div>
<div>
<span style="margin-right: 1em">{{ file.type }}</span>
<span>{{ bytes(file.size) }}</span>
</div>
<div>
<span
>{{ i18n.ts.registeredDate }}:
<MkTime :time="file.createdAt" mode="detail"
/></span>
</div>
</div>
<div>
<span style="margin-right: 1em;">{{ file.type }}</span>
<span>{{ bytes(file.size) }}</span>
</div>
<div>
<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
</div>
</div>
</MkA>
</MkPagination>
</div>
</MkA>
</MkPagination>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import * as Acct from 'calckey-js/built/acct';
import MkSwitch from '@/components/ui/switch.vue';
import MkPagination from '@/components/MkPagination.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import bytes from '@/filters/bytes';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { computed } from "vue";
import * as Acct from "calckey-js/built/acct";
import MkSwitch from "@/components/ui/switch.vue";
import MkPagination from "@/components/MkPagination.vue";
import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
import bytes from "@/filters/bytes";
import * as os from "@/os";
import { i18n } from "@/i18n";
const props = defineProps<{
pagination: any;
viewMode: 'grid' | 'list';
viewMode: "grid" | "list";
}>();
</script>
<style lang="scss" scoped>
@keyframes sensitive-blink {
0% { opacity: 1; }
50% { opacity: 0; }
0% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.urempief {

View File

@ -1,15 +1,17 @@
<template>
<span class="mk-file-type-icon">
<template v-if="kind == 'image'"><i class="ph-file-image ph-bold ph-lg"></i></template>
</span>
<span class="mk-file-type-icon">
<template v-if="kind == 'image'"
><i class="ph-file-image ph-bold ph-lg"></i
></template>
</span>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed } from "vue";
const props = defineProps<{
type: string;
}>();
const kind = computed(() => props.type.split('/')[0]);
const kind = computed(() => props.type.split("/")[0]);
</script>

View File

@ -1,33 +1,40 @@
<template>
<div v-size="{ max: [500] }" class="ssazuxis">
<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">
<template v-if="showBody"><i class="ph-caret-up ph-bold ph-lg"></i></template>
<template v-else><i class="ph-caret-down ph-bold ph-lg"></i></template>
</button>
</header>
<transition
:name="$store.state.animation ? 'folder-toggle' : ''"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody">
<slot></slot>
</div>
</transition>
</div>
<div v-size="{ max: [500] }" class="ssazuxis">
<header
class="_button"
:style="{ background: bg }"
@click="showBody = !showBody"
>
<div class="title"><slot name="header"></slot></div>
<div class="divider"></div>
<button class="_button">
<template v-if="showBody"
><i class="ph-caret-up ph-bold ph-lg"></i
></template>
<template v-else
><i class="ph-caret-down ph-bold ph-lg"></i
></template>
</button>
</header>
<transition
:name="$store.state.animation ? 'folder-toggle' : ''"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody">
<slot></slot>
</div>
</transition>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import tinycolor from 'tinycolor2';
const localStoragePrefix = 'ui:folder:';
import { defineComponent } from "vue";
import tinycolor from "tinycolor2";
const localStoragePrefix = "ui:folder:";
export default defineComponent({
props: {
@ -45,19 +52,28 @@ export default defineComponent({
data() {
return {
bg: null,
showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
showBody:
this.persistKey &&
localStorage.getItem(localStoragePrefix + this.persistKey)
? localStorage.getItem(
localStoragePrefix + this.persistKey
) === "t"
: this.expanded,
};
},
watch: {
showBody() {
if (this.persistKey) {
localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
localStorage.setItem(
localStoragePrefix + this.persistKey,
this.showBody ? "t" : "f"
);
}
},
},
mounted() {
function getParentBg(el: Element | null): string {
if (el == null || el.tagName === 'BODY') return 'var(--bg)';
if (el == null || el.tagName === "BODY") return "var(--bg)";
const bg = el.style.background || el.style.backgroundColor;
if (bg) {
return bg;
@ -66,7 +82,13 @@ export default defineComponent({
}
}
const rawBg = getParentBg(this.$el);
const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
const bg = tinycolor(
rawBg.startsWith("var(")
? getComputedStyle(document.documentElement).getPropertyValue(
rawBg.slice(4, -1)
)
: rawBg
);
bg.setAlpha(0.85);
this.bg = bg.toRgbString();
},
@ -79,14 +101,14 @@ export default defineComponent({
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
el.style.height = elementHeight + "px";
},
afterEnter(el) {
el.style.height = null;
},
leave(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.style.height = elementHeight + "px";
el.offsetHeight; // reflow
el.style.height = 0;
},
@ -98,7 +120,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.folder-toggle-enter-active, .folder-toggle-leave-active {
.folder-toggle-enter-active,
.folder-toggle-leave-active {
overflow-y: hidden;
transition: opacity 0.5s, height 0.5s !important;
}

View File

@ -1,72 +1,87 @@
<template>
<button
class="kpoogebi _button"
:class="{
wait,
active: isFollowing || hasPendingFollowRequestFromYou,
full,
large,
blocking: isBlocking
}"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="isBlocking">
<span v-if="full">{{ i18n.ts.blocked }}</span><i class="ph-prohibit ph-bold ph-lg"></i>
<button
class="kpoogebi _button"
:class="{
wait,
active: isFollowing || hasPendingFollowRequestFromYou,
full,
large,
blocking: isBlocking,
}"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="isBlocking">
<span v-if="full">{{ i18n.ts.blocked }}</span
><i class="ph-prohibit ph-bold ph-lg"></i>
</template>
<template
v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
>
<span v-if="full">{{ i18n.ts.followRequestPending }}</span
><i class="ph-hourglass-medium ph-bold ph-lg"></i>
</template>
<template
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
>
<!-- つまりリモートフォローの場合 -->
<span v-if="full">{{ i18n.ts.processing }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span
><i class="ph-minus ph-bold ph-lg"></i>
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ i18n.ts.followRequest }}</span
><i class="ph-plus ph-bold ph-lg"></i>
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ i18n.ts.follow }}</span
><i class="ph-plus ph-bold ph-lg"></i>
</template>
</template>
<template v-else-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ph-hourglass-medium ph-bold ph-lg"></i>
<template v-else>
<span v-if="full">{{ i18n.ts.processing }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
<!-- つまりリモートフォローの場合 -->
<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ph-plus ph-bold ph-lg"></i>
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.processing }}</span><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template>
</button>
</button>
</template>
<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted } from 'vue';
import type * as Misskey from 'calckey-js';
import * as os from '@/os';
import { stream } from '@/stream';
import { i18n } from '@/i18n';
import { computed, onBeforeUnmount, onMounted } from "vue";
import type * as Misskey from "calckey-js";
import * as os from "@/os";
import { stream } from "@/stream";
import { i18n } from "@/i18n";
const emit = defineEmits(['refresh'])
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed,
full?: boolean,
large?: boolean,
}>(), {
full: false,
large: false,
});
const emit = defineEmits(["refresh"]);
const props = withDefaults(
defineProps<{
user: Misskey.entities.UserDetailed;
full?: boolean;
large?: boolean;
}>(),
{
full: false,
large: false,
}
);
const isBlocking = computed(() => props.user.isBlocking);
let isFollowing = $ref(props.user.isFollowing);
let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
let hasPendingFollowRequestFromYou = $ref(
props.user.hasPendingFollowRequestFromYou
);
let wait = $ref(false);
const connection = stream.useChannel('main');
const connection = stream.useChannel("main");
if (props.user.isFollowing == null) {
os.api('users/show', {
os.api("users/show", {
userId: props.user.id,
})
.then(onFollowChange);
}).then(onFollowChange);
}
function onFollowChange(user: Misskey.entities.UserDetailed) {
@ -82,40 +97,41 @@ async function onClick() {
try {
if (isBlocking.value) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('unblockConfirm'),
type: "warning",
text: i18n.t("unblockConfirm"),
});
if (canceled) return
if (canceled) return;
await os.api("blocking/delete", {
userId: props.user.id,
})
});
if (props.user.isMuted) {
await os.api("mute/delete", {
userId: props.user.id,
})
});
}
emit('refresh')
}
else if (isFollowing) {
emit("refresh");
} else if (isFollowing) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
type: "warning",
text: i18n.t("unfollowConfirm", {
name: props.user.name || props.user.username,
}),
});
if (canceled) return;
await os.api('following/delete', {
await os.api("following/delete", {
userId: props.user.id,
});
} else {
if (hasPendingFollowRequestFromYou) {
await os.api('following/requests/cancel', {
await os.api("following/requests/cancel", {
userId: props.user.id,
});
hasPendingFollowRequestFromYou = false;
} else {
await os.api('following/create', {
await os.api("following/create", {
userId: props.user.id,
});
hasPendingFollowRequestFromYou = true;
@ -129,8 +145,8 @@ async function onClick() {
}
onMounted(() => {
connection.on('follow', onFollowChange);
connection.on('unfollow', onFollowChange);
connection.on("follow", onFollowChange);
connection.on("unfollow", onFollowChange);
});
onBeforeUnmount(() => {

View File

@ -1,63 +1,93 @@
<template>
<XModalWindow ref="dialog"
:width="370"
:height="400"
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.forgotPassword }}</template>
<XModalWindow
ref="dialog"
:width="370"
:height="400"
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.forgotPassword }}</template>
<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<div class="main _formRoot">
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<form
v-if="instance.enableEmail"
class="bafeceda"
@submit.prevent="onSubmit"
>
<div class="main _formRoot">
<MkInput
v-model="username"
class="_formBlock"
type="text"
pattern="^[a-zA-Z0-9_]+$"
:spellcheck="false"
autofocus
required
>
<template #label>{{ i18n.ts.username }}</template>
<template #prefix>@</template>
</MkInput>
<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
<template #label>{{ i18n.ts.emailAddress }}</template>
<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
</MkInput>
<MkInput
v-model="email"
class="_formBlock"
type="email"
:spellcheck="false"
required
>
<template #label>{{ i18n.ts.emailAddress }}</template>
<template #caption>{{
i18n.ts._forgotPassword.enterEmail
}}</template>
</MkInput>
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
<MkButton
class="_formBlock"
type="submit"
:disabled="processing"
primary
style="margin: 0 auto"
>{{ i18n.ts.send }}</MkButton
>
</div>
<div class="sub">
<MkA to="/about" class="_link">{{
i18n.ts._forgotPassword.ifNoEmail
}}</MkA>
</div>
</form>
<div v-else class="bafecedb">
{{ i18n.ts._forgotPassword.contactAdmin }}
</div>
<div class="sub">
<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
</div>
</form>
<div v-else class="bafecedb">
{{ i18n.ts._forgotPassword.contactAdmin }}
</div>
</XModalWindow>
</XModalWindow>
</template>
<script lang="ts" setup>
import { } from 'vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
import {} from "vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import MkButton from "@/components/MkButton.vue";
import MkInput from "@/components/form/input.vue";
import * as os from "@/os";
import { instance } from "@/instance";
import { i18n } from "@/i18n";
const emit = defineEmits<{
(ev: 'done'): void;
(ev: 'closed'): void;
(ev: "done"): void;
(ev: "closed"): void;
}>();
let dialog: InstanceType<typeof XModalWindow> = $ref();
let username = $ref('');
let email = $ref('');
let username = $ref("");
let email = $ref("");
let processing = $ref(false);
async function onSubmit() {
processing = true;
await os.apiWithDialog('request-reset-password', {
await os.apiWithDialog("request-reset-password", {
username,
email,
});
emit('done');
emit("done");
dialog.close();
}
</script>

View File

@ -1,70 +1,170 @@
<template>
<XModalWindow
ref="dialog"
:width="450"
:can-close="false"
:with-ok-button="true"
:ok-button-disabled="false"
@click="cancel()"
@ok="ok()"
@close="cancel()"
@closed="$emit('closed')"
>
<template #header>
{{ title }}
</template>
<XModalWindow
ref="dialog"
:width="450"
:can-close="false"
:with-ok-button="true"
:ok-button-disabled="false"
@click="cancel()"
@ok="ok()"
@close="cancel()"
@closed="$emit('closed')"
>
<template #header>
{{ title }}
</template>
<MkSpacer :margin-min="20" :margin-max="32">
<div class="xkpnjxcv _formRoot">
<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormInput>
<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormInput>
<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormTextarea>
<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
<span v-text="form[item].label || item"></span>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormSwitch>
<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormSelect>
<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
</FormRadios>
<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template>
<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
</FormRange>
<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
<span v-text="form[item].content || item"></span>
</MkButton>
</template>
</div>
</MkSpacer>
</XModalWindow>
<MkSpacer :margin-min="20" :margin-max="32">
<div class="xkpnjxcv _formRoot">
<template
v-for="item in Object.keys(form).filter(
(item) => !form[item].hidden
)"
>
<FormInput
v-if="form[item].type === 'number'"
v-model="values[item]"
type="number"
:step="form[item].step || 1"
class="_formBlock"
>
<template #label
><span v-text="form[item].label || item"></span
><span v-if="form[item].required === false">
({{ i18n.ts.optional }})</span
></template
>
<template v-if="form[item].description" #caption>{{
form[item].description
}}</template>
</FormInput>
<FormInput
v-else-if="
form[item].type === 'string' &&
!form[item].multiline
"
v-model="values[item]"
type="text"
class="_formBlock"
>
<template #label
><span v-text="form[item].label || item"></span
><span v-if="form[item].required === false">
({{ i18n.ts.optional }})</span
></template
>
<template v-if="form[item].description" #caption>{{
form[item].description
}}</template>
</FormInput>
<FormTextarea
v-else-if="
form[item].type === 'string' && form[item].multiline
"
v-model="values[item]"
class="_formBlock"
>
<template #label
><span v-text="form[item].label || item"></span
><span v-if="form[item].required === false">
({{ i18n.ts.optional }})</span
></template
>
<template v-if="form[item].description" #caption>{{
form[item].description
}}</template>
</FormTextarea>
<FormSwitch
v-else-if="form[item].type === 'boolean'"
v-model="values[item]"
class="_formBlock"
>
<span v-text="form[item].label || item"></span>
<template v-if="form[item].description" #caption>{{
form[item].description
}}</template>
</FormSwitch>
<FormSelect
v-else-if="form[item].type === 'enum'"
v-model="values[item]"
class="_formBlock"
>
<template #label
><span v-text="form[item].label || item"></span
><span v-if="form[item].required === false">
({{ i18n.ts.optional }})</span
></template
>
<option
v-for="item in form[item].enum"
:key="item.value"
:value="item.value"
>
{{ item.label }}
</option>
</FormSelect>
<FormRadios
v-else-if="form[item].type === 'radio'"
v-model="values[item]"
class="_formBlock"
>
<template #label
><span v-text="form[item].label || item"></span
><span v-if="form[item].required === false">
({{ i18n.ts.optional }})</span
></template
>
<option
v-for="item in form[item].options"
:key="item.value"
:value="item.value"
>
{{ item.label }}
</option>
</FormRadios>
<FormRange
v-else-if="form[item].type === 'range'"
v-model="values[item]"
:min="form[item].min"
:max="form[item].max"
:step="form[item].step"
:text-converter="form[item].textConverter"
class="_formBlock"
>
<template #label
><span v-text="form[item].label || item"></span
><span v-if="form[item].required === false">
({{ i18n.ts.optional }})</span
></template
>
<template v-if="form[item].description" #caption>{{
form[item].description
}}</template>
</FormRange>
<MkButton
v-else-if="form[item].type === 'button'"
class="_formBlock"
@click="form[item].action($event, values)"
>
<span v-text="form[item].content || item"></span>
</MkButton>
</template>
</div>
</MkSpacer>
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import FormInput from './form/input.vue';
import FormTextarea from './form/textarea.vue';
import FormSwitch from './form/switch.vue';
import FormSelect from './form/select.vue';
import FormRange from './form/range.vue';
import MkButton from './MkButton.vue';
import FormRadios from './form/radios.vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import { i18n } from '@/i18n';
import { defineComponent } from "vue";
import FormInput from "./form/input.vue";
import FormTextarea from "./form/textarea.vue";
import FormSwitch from "./form/switch.vue";
import FormSelect from "./form/select.vue";
import FormRange from "./form/range.vue";
import MkButton from "./MkButton.vue";
import FormRadios from "./form/radios.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import { i18n } from "@/i18n";
export default defineComponent({
components: {
@ -89,7 +189,7 @@ export default defineComponent({
},
},
emits: ['done'],
emits: ["done"],
data() {
return {
@ -106,14 +206,14 @@ export default defineComponent({
methods: {
ok() {
this.$emit('done', {
this.$emit("done", {
result: this.values,
});
this.$refs.dialog.close();
},
cancel() {
this.$emit('done', {
this.$emit("done", {
canceled: true,
});
this.$refs.dialog.close();
@ -124,6 +224,5 @@ export default defineComponent({
<style lang="scss" scoped>
.xkpnjxcv {
}
</style>

View File

@ -1,14 +1,16 @@
<template>
<XFormula :formula="formula" :block="block"/>
<XFormula :formula="formula" :block="block" />
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import * as os from '@/os';
import { defineComponent, defineAsyncComponent } from "vue";
import * as os from "@/os";
export default defineComponent({
components: {
XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
XFormula: defineAsyncComponent(
() => import("@/components/MkFormulaCore.vue")
),
},
props: {
formula: {

View File

@ -1,30 +1,30 @@
<template>
<div v-if="block" v-html="compiledFormula"></div>
<span v-else v-html="compiledFormula"></span>
<div v-if="block" v-html="compiledFormula"></div>
<span v-else v-html="compiledFormula"></span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import katex from 'katex';
import { defineComponent } from "vue";
import katex from "katex";
export default defineComponent({
props: {
formula: {
type: String,
required: true
required: true,
},
block: {
type: Boolean,
required: true
}
required: true,
},
},
computed: {
compiledFormula(): any {
return katex.renderToString(this.formula, {
throwOnError: false
throwOnError: false,
} as any);
}
}
},
},
});
</script>

View File

@ -1,27 +1,31 @@
<template>
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
<div class="thumbnail">
<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
</div>
<article>
<header>
<MkAvatar :user="post.user" class="avatar"/>
</header>
<footer>
<span class="title">{{ post.title }}</span>
</footer>
</article>
</MkA>
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
<div class="thumbnail">
<ImgWithBlurhash
class="img"
:src="post.files[0].thumbnailUrl"
:hash="post.files[0].blurhash"
/>
</div>
<article>
<header>
<MkAvatar :user="post.user" class="avatar" />
</header>
<footer>
<span class="title">{{ post.title }}</span>
</footer>
</article>
</MkA>
</template>
<script lang="ts" setup>
import { } from 'vue';
import { userName } from '@/filters/user';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import {} from "vue";
import { userName } from "@/filters/user";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
const props = defineProps<{
post: any;
}>();
post: any;
}>();
</script>
<style lang="scss" scoped>

View File

@ -1,13 +1,16 @@
<template>
<div class="mk-google">
<input v-model="query" type="search" :placeholder="q">
<button @click="search"><i class="ph-magnifying-glass ph-bold ph-lg"></i> {{ i18n.ts.searchByGoogle }}</button>
</div>
<div class="mk-google">
<input v-model="query" type="search" :placeholder="q" />
<button @click="search">
<i class="ph-magnifying-glass ph-bold ph-lg"></i>
{{ i18n.ts.searchByGoogle }}
</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { i18n } from '@/i18n';
import { ref } from "vue";
import { i18n } from "@/i18n";
const props = defineProps<{
q: string;
@ -16,7 +19,10 @@ const props = defineProps<{
const query = ref(props.q);
const search = () => {
window.open(`https://search.annoyingorange.xyz/search?q=${query.value}`, '_blank');
window.open(
`https://search.annoyingorange.xyz/search?q=${query.value}`,
"_blank"
);
};
</script>

View File

@ -1,23 +1,30 @@
<template>
<div ref="rootEl">
<MkLoading v-if="fetching"/>
<MkLoading v-if="fetching" />
<div v-else>
<canvas ref="chartEl"></canvas>
</div>
</div>
</template>
</template>
<script lang="ts" setup>
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { Chart } from 'chart.js';
import tinycolor from 'tinycolor2';
import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
import * as os from '@/os';
import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
import { initChart } from '@/scripts/init-chart';
import {
markRaw,
version as vueVersion,
onMounted,
onBeforeUnmount,
nextTick,
watch,
} from "vue";
import { Chart } from "chart.js";
import tinycolor from "tinycolor2";
import { MatrixController, MatrixElement } from "chartjs-chart-matrix";
import * as os from "@/os";
import { defaultStore } from "@/store";
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
import { chartVLine } from "@/scripts/chart-vline";
import { alpha } from "@/scripts/color";
import { initChart } from "@/scripts/init-chart";
initChart();
@ -32,7 +39,7 @@ let chartInstance: Chart = null;
let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',
position: "middle",
});
async function renderChart() {
@ -57,7 +64,9 @@ async function renderChart() {
const format = (arr) => {
return arr.map((v, i) => {
const dt = getDate(i);
const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1)
.toString()
.padStart(2, "0")}-${dt.getDate().toString().padStart(2, "0")}`;
return {
x: iso,
y: dt.getDay(),
@ -69,20 +78,35 @@ async function renderChart() {
let values;
if (props.src === 'active-users') {
const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
if (props.src === "active-users") {
const raw = await os.api("charts/active-users", {
limit: chartLimit,
span: "day",
});
values = raw.readWrite;
} else if (props.src === 'notes') {
const raw = await os.api('charts/notes', { limit: chartLimit, span: 'day' });
} else if (props.src === "notes") {
const raw = await os.api("charts/notes", {
limit: chartLimit,
span: "day",
});
values = raw.local.inc;
} else if (props.src === 'ap-requests-inbox-received') {
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
} else if (props.src === "ap-requests-inbox-received") {
const raw = await os.api("charts/ap-request", {
limit: chartLimit,
span: "day",
});
values = raw.inboxReceived;
} else if (props.src === 'ap-requests-deliver-succeeded') {
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
} else if (props.src === "ap-requests-deliver-succeeded") {
const raw = await os.api("charts/ap-request", {
limit: chartLimit,
span: "day",
});
values = raw.deliverSucceeded;
} else if (props.src === 'ap-requests-deliver-failed') {
const raw = await os.api('charts/ap-request', { limit: chartLimit, span: 'day' });
} else if (props.src === "ap-requests-deliver-failed") {
const raw = await os.api("charts/ap-request", {
limit: chartLimit,
span: "day",
});
values = raw.deliverFailed;
}
@ -90,43 +114,51 @@ async function renderChart() {
await nextTick();
const color = defaultStore.state.darkMode ? '#ebbcba' : '#d7827e';
const color = defaultStore.state.darkMode ? "#ebbcba" : "#d7827e";
// 3
const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
const max =
values
.slice()
.sort((a, b) => b - a)
.slice(0, 3)
.reduce((a, b) => a + b, 0) / 3;
const min = Math.max(0, Math.min(...values) - 1);
const marginEachCell = 4;
chartInstance = new Chart(chartEl, {
type: 'matrix',
type: "matrix",
data: {
datasets: [{
label: 'Read & Write',
data: format(values),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 3,
backgroundColor(c) {
const value = c.dataset.data[c.dataIndex].v;
let a = (value - min) / max;
if (value !== 0) { // 0
a = Math.max(a, 0.05);
}
return alpha(color, a);
datasets: [
{
label: "Read & Write",
data: format(values),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: "round",
borderRadius: 3,
backgroundColor(c) {
const value = c.dataset.data[c.dataIndex].v;
let a = (value - min) / max;
if (value !== 0) {
// 0
a = Math.max(a, 0.05);
}
return alpha(color, a);
},
fill: true,
width(c) {
const a = c.chart.chartArea ?? {};
return (a.right - a.left) / weeks - marginEachCell;
},
height(c) {
const a = c.chart.chartArea ?? {};
return (a.bottom - a.top) / 7 - marginEachCell;
},
},
fill: true,
width(c) {
const a = c.chart.chartArea ?? {};
return (a.right - a.left) / weeks - marginEachCell;
},
height(c) {
const a = c.chart.chartArea ?? {};
return (a.bottom - a.top) / 7 - marginEachCell;
},
}],
],
},
options: {
aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
@ -140,17 +172,17 @@ async function renderChart() {
},
scales: {
x: {
type: 'time',
type: "time",
offset: true,
position: 'bottom',
position: "bottom",
time: {
unit: 'week',
round: 'week',
unit: "week",
round: "week",
isoWeekday: 0,
displayFormats: {
day: 'M/d',
month: 'Y/M',
week: 'M/d',
day: "M/d",
month: "Y/M",
week: "M/d",
},
},
grid: {
@ -165,7 +197,7 @@ async function renderChart() {
y: {
offset: true,
reverse: true,
position: 'right',
position: "right",
grid: {
display: false,
},
@ -176,7 +208,8 @@ async function renderChart() {
font: {
size: 9,
},
callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
callback: (value, index, values) =>
["", "Mon", "", "Wed", "", "Fri", ""][value],
},
},
},
@ -188,12 +221,13 @@ async function renderChart() {
enabled: false,
callbacks: {
title(context) {
const v = context[0].dataset.data[context[0].dataIndex];
const v =
context[0].dataset.data[context[0].dataIndex];
return v.d;
},
label(context) {
const v = context.dataset.data[context.dataIndex];
return ['Active: ' + v.v];
return ["Active: " + v.v];
},
},
//mode: 'index',
@ -207,10 +241,13 @@ async function renderChart() {
});
}
watch(() => props.src, () => {
fetching = true;
renderChart();
});
watch(
() => props.src,
() => {
fetching = true;
renderChart();
}
);
onMounted(async () => {
renderChart();

View File

@ -1,31 +1,46 @@
<template>
<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
<div class="xubzgfga">
<header>{{ image.name }}</header>
<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
<footer>
<span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span>
<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
</footer>
</div>
</MkModal>
<MkModal
ref="modal"
:z-priority="'middle'"
@click="modal.close()"
@closed="emit('closed')"
>
<div class="xubzgfga">
<header>{{ image.name }}</header>
<img
:src="image.url"
:alt="image.comment"
:title="image.comment"
@click="modal.close()"
/>
<footer>
<span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span>
<span v-if="image.properties && image.properties.width"
>{{ number(image.properties.width) }}px ×
{{ number(image.properties.height) }}px</span
>
</footer>
</div>
</MkModal>
</template>
<script lang="ts" setup>
import { } from 'vue';
import type * as misskey from 'calckey-js';
import bytes from '@/filters/bytes';
import number from '@/filters/number';
import MkModal from '@/components/MkModal.vue';
import {} from "vue";
import type * as misskey from "calckey-js";
import bytes from "@/filters/bytes";
import number from "@/filters/number";
import MkModal from "@/components/MkModal.vue";
const props = withDefaults(defineProps<{
image: misskey.entities.DriveFile;
}>(), {
});
const props = withDefaults(
defineProps<{
image: misskey.entities.DriveFile;
}>(),
{}
);
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: "closed"): void;
}>();
const modal = $ref<InstanceType<typeof MkModal>>();

View File

@ -1,30 +1,46 @@
<template>
<div class="xubzgfgb" :class="{ cover }" :title="title">
<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
<img v-if="src" :src="src" :title="title" :type="type" :alt="alt" @load="onLoad"/>
</div>
<div class="xubzgfgb" :class="{ cover }" :title="title">
<canvas
v-if="!loaded"
ref="canvas"
:width="size"
:height="size"
:title="title"
/>
<img
v-if="src"
:src="src"
:title="title"
:type="type"
:alt="alt"
@load="onLoad"
/>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { decode } from 'blurhash';
import { onMounted } from "vue";
import { decode } from "blurhash";
const props = withDefaults(defineProps<{
src?: string | null;
hash?: string;
alt?: string;
type?: string | null;
title?: string | null;
size?: number;
cover?: boolean;
}>(), {
src: null,
type: null,
alt: '',
title: null,
size: 64,
cover: true,
});
const props = withDefaults(
defineProps<{
src?: string | null;
hash?: string;
alt?: string;
type?: string | null;
title?: string | null;
size?: number;
cover?: boolean;
}>(),
{
src: null,
type: null,
alt: "",
title: null,
size: 64,
cover: true,
}
);
const canvas = $ref<HTMLCanvasElement>();
let loaded = $ref(false);
@ -32,7 +48,7 @@ let loaded = $ref(false);
function draw() {
if (props.hash == null) return;
const pixels = decode(props.hash, props.size, props.size);
const ctx = canvas.getContext('2d');
const ctx = canvas.getContext("2d");
const imageData = ctx!.createImageData(props.size, props.size);
imageData.data.set(pixels);
ctx!.putImageData(imageData, 0, 0);

View File

@ -1,13 +1,13 @@
<template>
<div class="fpezltsf" :class="{ warn }">
<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
<i v-else class="ph-info ph-bold ph-lg"></i>
<slot></slot>
</div>
<div class="fpezltsf" :class="{ warn }">
<i v-if="warn" class="ph-warning ph-bold ph-lg"></i>
<i v-else class="ph-info ph-bold ph-lg"></i>
<slot></slot>
</div>
</template>
<script lang="ts" setup>
import { } from 'vue';
import {} from "vue";
defineProps<{
warn?: boolean;

View File

@ -1,19 +1,32 @@
<template>
<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
<div class="body">
<span class="host">{{ instance.name ?? instance.host }}</span>
<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
<div
:class="[
$style.root,
{
yellow: instance.isNotResponding,
red: instance.isBlocked,
gray: instance.isSuspended,
},
]"
>
<img class="icon" :src="getInstanceIcon(instance)" alt="" />
<div class="body">
<span class="host">{{ instance.name ?? instance.host }}</span>
<span class="sub _monospace"
><b>{{ instance.host }}</b> /
{{ instance.softwareName || "?" }}
{{ instance.softwareVersion }}</span
>
</div>
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues" />
</div>
<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
</div>
</template>
<script lang="ts" setup>
import * as misskey from 'calckey-js';
import MkMiniChart from '@/components/MkMiniChart.vue';
import * as os from '@/os';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
import * as misskey from "calckey-js";
import MkMiniChart from "@/components/MkMiniChart.vue";
import * as os from "@/os";
import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
const props = defineProps<{
instance: misskey.entities.Instance;
@ -21,14 +34,22 @@ const props = defineProps<{
let chartValues = $ref<number[] | null>(null);
os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
os.apiGet("charts/instance", {
host: props.instance.host,
limit: 16 + 1,
span: "day",
}).then((res) => {
//
res.requests.received.splice(0, 1);
chartValues = res.requests.received;
});
function getInstanceIcon(instance): string {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
return (
getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
"/client-assets/dummy.png"
);
}
</script>
@ -86,19 +107,46 @@ function getInstanceIcon(instance): string {
&:global(.yellow) {
--c: rgb(255 196 0 / 15%);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-image: linear-gradient(
45deg,
var(--c) 16.67%,
transparent 16.67%,
transparent 50%,
var(--c) 50%,
var(--c) 66.67%,
transparent 66.67%,
transparent 100%
);
background-size: 16px 16px;
}
&:global(.red) {
--c: rgb(255 0 0 / 15%);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-image: linear-gradient(
45deg,
var(--c) 16.67%,
transparent 16.67%,
transparent 50%,
var(--c) 50%,
var(--c) 66.67%,
transparent 66.67%,
transparent 100%
);
background-size: 16px 16px;
}
&:global(.gray) {
--c: var(--bg);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-image: linear-gradient(
45deg,
var(--c) 16.67%,
transparent 16.67%,
transparent 50%,
var(--c) 50%,
var(--c) 66.67%,
transparent 66.67%,
transparent 100%
);
background-size: 16px 16px;
}
}

View File

@ -1,87 +1,113 @@
<template>
<XModalWindow
ref="dialogEl"
:with-ok-button="true"
:ok-button-disabled="selected == null"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts.selectInstance }}</template>
<div class="mehkoush">
<div class="form">
<MkInput v-model="hostname" :autofocus="true" @update:modelValue="search">
<XModalWindow
ref="dialogEl"
:with-ok-button="true"
:ok-button-disabled="selected == null"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts.selectInstance }}</template>
<div class="mehkoush">
<div class="form">
<MkInput
v-model="hostname"
:autofocus="true"
@update:modelValue="search"
>
<template #label>{{ i18n.ts.instance }}</template>
</MkInput>
</div>
<div v-if="hostname != ''" class="result" :class="{ hit: instances.length > 0 }">
<div v-if="instances.length > 0" class="instances">
<div v-for="item in instances" :key="item.id" class="instance" :class="{ selected: selected && selected.id === item.id }" @click="selected = item" @dblclick="ok()">
<div class="body">
<img class="icon" :src="item.iconUrl ?? '/client-assets/dummy.png'" aria-hidden="true"/>
<span class="name">{{ item.host }}</span>
</div>
<div
v-if="hostname != ''"
class="result"
:class="{ hit: instances.length > 0 }"
>
<div v-if="instances.length > 0" class="instances">
<div
v-for="item in instances"
:key="item.id"
class="instance"
:class="{
selected: selected && selected.id === item.id,
}"
@click="selected = item"
@dblclick="ok()"
>
<div class="body">
<img
class="icon"
:src="
item.iconUrl ?? '/client-assets/dummy.png'
"
aria-hidden="true"
/>
<span class="name">{{ item.host }}</span>
</div>
</div>
</div>
</div>
<div v-else class="empty">
<span>{{ i18n.ts.noInstances }}</span>
<div v-else class="empty">
<span>{{ i18n.ts.noInstances }}</span>
</div>
</div>
</div>
</div>
</XModalWindow>
</XModalWindow>
</template>
<script lang="ts" setup>
import MkInput from '@/components/form/input.vue';
import XModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { Instance } from 'calckey-js/built/entities';
import MkInput from "@/components/form/input.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { Instance } from "calckey-js/built/entities";
const emit = defineEmits<{
(ev: 'ok', selected: Instance): void;
(ev: 'cancel'): void;
(ev: 'closed'): void;
(ev: "ok", selected: Instance): void;
(ev: "cancel"): void;
(ev: "closed"): void;
}>();
let hostname = $ref('');
let hostname = $ref("");
let instances: Instance[] = $ref([]);
let selected: Instance | null = $ref(null);
let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
let searchOrderLatch = 0;
const search = () => {
if (hostname === '') {
if (hostname === "") {
instances = [];
return;
}
const searchId = ++searchOrderLatch;
os.api('federation/instances', {
os.api("federation/instances", {
host: hostname,
limit: 10,
blocked: false,
suspended: false,
sort: '+pubSub',
}).then(_instances => {
sort: "+pubSub",
}).then((_instances) => {
if (searchId !== searchOrderLatch) return;
instances = _instances.map(x => ({
id: x.id,
host: x.host,
iconUrl: x.iconUrl,
} as Instance));
instances = _instances.map(
(x) =>
({
id: x.id,
host: x.host,
iconUrl: x.iconUrl,
} as Instance)
);
});
};
const ok = () => {
if (selected == null) return;
emit('ok', selected);
emit("ok", selected);
dialogEl?.close();
};
const cancel = () => {
emit('cancel');
emit("cancel");
dialogEl?.close();
};
</script>

View File

@ -4,49 +4,82 @@
<template #header>Chart</template>
<div :class="$style.chart">
<div class="selects">
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1">
<optgroup :label="i18n.ts.federation">
<option value="federation">{{ i18n.ts._charts.federation }}</option>
<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
<option value="federation">
{{ i18n.ts._charts.federation }}
</option>
<option value="ap-request">
{{ i18n.ts._charts.apRequest }}
</option>
</optgroup>
<optgroup :label="i18n.ts.users">
<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
<option value="users">
{{ i18n.ts._charts.usersIncDec }}
</option>
<option value="users-total">
{{ i18n.ts._charts.usersTotal }}
</option>
<option value="active-users">
{{ i18n.ts._charts.activeUsers }}
</option>
</optgroup>
<optgroup :label="i18n.ts.notes">
<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
<option value="notes">
{{ i18n.ts._charts.notesIncDec }}
</option>
<option value="local-notes">
{{ i18n.ts._charts.localNotesIncDec }}
</option>
<option value="remote-notes">
{{ i18n.ts._charts.remoteNotesIncDec }}
</option>
<option value="notes-total">
{{ i18n.ts._charts.notesTotal }}
</option>
</optgroup>
<optgroup :label="i18n.ts.drive">
<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
<option value="drive-files">
{{ i18n.ts._charts.filesIncDec }}
</option>
<option value="drive">
{{ i18n.ts._charts.storageUsageIncDec }}
</option>
</optgroup>
</MkSelect>
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px">
<option value="hour">{{ i18n.ts.perHour }}</option>
<option value="day">{{ i18n.ts.perDay }}</option>
</MkSelect>
</div>
<div class="chart _panel">
<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
<MkChart
:src="chartSrc"
:span="chartSpan"
:limit="chartLimit"
:detailed="true"
></MkChart>
</div>
</div>
</MkFolder>
<MkFolder class="item">
<template #header>Active users heatmap</template>
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0">
<option value="active-users">Active users</option>
<option value="notes">Notes</option>
<option value="ap-requests-inbox-received">Fediverse Requests: inboxReceived</option>
<option value="ap-requests-deliver-succeeded">Fediverse Requests: deliverSucceeded</option>
<option value="ap-requests-deliver-failed">Fediverse Requests: deliverFailed</option>
<option value="ap-requests-inbox-received">
Fediverse Requests: inboxReceived
</option>
<option value="ap-requests-deliver-succeeded">
Fediverse Requests: deliverSucceeded
</option>
<option value="ap-requests-deliver-failed">
Fediverse Requests: deliverFailed
</option>
</MkSelect>
<div class="_panel" :class="$style.heatmap">
<MkHeatmap :src="heatmapSrc"/>
<MkHeatmap :src="heatmapSrc" />
</div>
</MkFolder>
@ -69,45 +102,49 @@
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Chart } from 'chart.js';
import MkSelect from '@/components/form/select.vue';
import MkChart from '@/components/MkChart.vue';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import * as os from '@/os';
import { i18n } from '@/i18n';
import MkHeatmap from '@/components/MkHeatmap.vue';
import MkFolder from '@/components/MkFolder.vue';
import { initChart } from '@/scripts/init-chart';
import { onMounted } from "vue";
import { Chart } from "chart.js";
import MkSelect from "@/components/form/select.vue";
import MkChart from "@/components/MkChart.vue";
import { useChartTooltip } from "@/scripts/use-chart-tooltip";
import * as os from "@/os";
import { i18n } from "@/i18n";
import MkHeatmap from "@/components/MkHeatmap.vue";
import MkFolder from "@/components/MkFolder.vue";
import { initChart } from "@/scripts/init-chart";
initChart();
const chartLimit = 500;
let chartSpan = $ref<'hour' | 'day'>('hour');
let chartSrc = $ref('active-users');
let heatmapSrc = $ref('active-users');
let chartSpan = $ref<"hour" | "day">("hour");
let chartSrc = $ref("active-users");
let heatmapSrc = $ref("active-users");
let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
const { handler: externalTooltipHandler1 } = useChartTooltip({
position: 'middle',
position: "middle",
});
const { handler: externalTooltipHandler2 } = useChartTooltip({
position: 'middle',
position: "middle",
});
function createDoughnut(chartEl, tooltip, data) {
const chartInstance = new Chart(chartEl, {
type: 'doughnut',
type: "doughnut",
data: {
labels: data.map(x => x.name),
datasets: [{
backgroundColor: data.map(x => x.color),
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
borderWidth: 2,
hoverOffset: 0,
data: data.map(x => x.value),
}],
labels: data.map((x) => x.name),
datasets: [
{
backgroundColor: data.map((x) => x.color),
borderColor: getComputedStyle(
document.documentElement
).getPropertyValue("--panel"),
borderWidth: 2,
hoverOffset: 0,
data: data.map((x) => x.value),
},
],
},
options: {
maintainAspectRatio: false,
@ -120,7 +157,12 @@ function createDoughnut(chartEl, tooltip, data) {
},
},
onClick: (ev) => {
const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
const hit = chartInstance.getElementsAtEventForMode(
ev,
"nearest",
{ intersect: true },
false
)[0];
if (hit && data[hit.index].onClick) {
data[hit.index].onClick();
}
@ -131,7 +173,7 @@ function createDoughnut(chartEl, tooltip, data) {
},
tooltip: {
enabled: false,
mode: 'index',
mode: "index",
animation: {
duration: 0,
},
@ -145,24 +187,48 @@ function createDoughnut(chartEl, tooltip, data) {
}
onMounted(() => {
os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
name: x.host,
color: x.themeColor,
value: x.followersCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
createDoughnut(
subDoughnutEl,
externalTooltipHandler1,
fedStats.topSubInstances
.map((x) => ({
name: x.host,
color: x.themeColor,
value: x.followersCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
}))
.concat([
{
name: "(other)",
color: "#80808080",
value: fedStats.otherFollowersCount,
},
])
);
createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
name: x.host,
color: x.themeColor,
value: x.followingCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
createDoughnut(
pubDoughnutEl,
externalTooltipHandler2,
fedStats.topPubInstances
.map((x) => ({
name: x.host,
color: x.themeColor,
value: x.followingCount,
onClick: () => {
os.pageWindow(`/instance-info/${x.host}`);
},
}))
.concat([
{
name: "(other)",
color: "#80808080",
value: fedStats.otherFollowingCount,
},
])
);
});
});
</script>
@ -205,7 +271,8 @@ onMounted(() => {
display: flex;
gap: 16px;
> .sub, > .pub {
> .sub,
> .pub {
flex: 1;
min-width: 0;
position: relative;

View File

@ -1,41 +1,50 @@
<template>
<div class="hpaizdrt" ref="ticker" :style="bg">
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
<span class="name">{{ instance.name }}</span>
</div>
<div class="hpaizdrt" ref="ticker" :style="bg">
<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true" />
<span class="name">{{ instance.name }}</span>
</div>
</template>
<script lang="ts" setup>
import { instanceName } from '@/config';
import { instance as Instance } from '@/instance';
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
import { instanceName } from "@/config";
import { instance as Instance } from "@/instance";
import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
const props = defineProps<{
instance?: {
faviconUrl?: string
name: string
themeColor?: string
}
faviconUrl?: string;
name: string;
themeColor?: string;
};
}>();
let ticker = $ref<HTMLElement | null>(null);
// if no instance data is given, this is for the local instance
const instance = props.instance ?? {
faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
faviconUrl: Instance.iconUrl || Instance.faviconUrl || "/favicon.ico",
name: instanceName,
themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
themeColor: (
document.querySelector(
'meta[name="theme-color-orig"]'
) as HTMLMetaElement
)?.content,
};
const computedStyle = getComputedStyle(document.documentElement);
const themeColor = instance.themeColor ?? computedStyle.getPropertyValue('--bg');
const themeColor =
instance.themeColor ?? computedStyle.getPropertyValue("--bg");
const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`,
};
function getInstanceIcon(instance): string {
return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
return (
getProxiedImageUrlNullable(instance.iconUrl, "preview") ??
getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
"/client-assets/dummy.png"
);
}
</script>
@ -48,10 +57,10 @@ function getInstanceIcon(instance): string {
align-items: center;
height: 1.1em;
justify-self: flex-end;
padding: .2em .4em;
padding: .2em .4em;
padding: 0.2em 0.4em;
padding: 0.2em 0.4em;
border-radius: 100px;
font-size: .8em;
font-size: 0.8em;
text-shadow: 0 2px 2px var(--shadow);
overflow: hidden;
.header > .body & {
@ -80,11 +89,14 @@ function getInstanceIcon(instance): string {
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
.article > .main &, .header > .body & {
text-shadow: -1px -1px 0 var(--bg), 1px -1px 0 var(--bg),
-1px 1px 0 var(--bg), 1px 1px 0 var(--bg);
.article > .main &,
.header > .body & {
display: unset;
}
.article > .main &, .header > .body & {
.article > .main &,
.header > .body & {
display: unset;
}
}

View File

@ -1,28 +1,39 @@
<template>
<div class="alqyeyti" :class="{ oneline }">
<div class="key">
<slot name="key"></slot>
<div class="alqyeyti" :class="{ oneline }">
<div class="key">
<slot name="key"></slot>
</div>
<div class="value">
<slot name="value"></slot>
<button
v-if="copy"
v-tooltip="i18n.ts.copy"
class="_textButton"
style="margin-left: 0.5em"
@click="copy_"
>
<i class="ph-clipboard-text ph-bold"></i>
</button>
</div>
</div>
<div class="value">
<slot name="value"></slot>
<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ph-clipboard-text ph-bold"></i></button>
</div>
</div>
</template>
<script lang="ts" setup>
import { } from 'vue';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import * as os from '@/os';
import { i18n } from '@/i18n';
import {} from "vue";
import copyToClipboard from "@/scripts/copy-to-clipboard";
import * as os from "@/os";
import { i18n } from "@/i18n";
const props = withDefaults(defineProps<{
copy?: string | null;
oneline?: boolean;
}>(), {
copy: null,
oneline: false,
});
const props = withDefaults(
defineProps<{
copy?: string | null;
oneline?: boolean;
}>(),
{
copy: null,
oneline: false,
}
);
const copy_ = () => {
copyToClipboard(props.copy);

View File

@ -1,61 +1,103 @@
<template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main">
<template v-for="item in items">
<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
</button>
<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
</MkA>
</template>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
:prefer-type="preferedModalType"
:anchor="anchor"
:transparent-bg="true"
:src="src"
@click="modal.close()"
@closed="emit('closed')"
>
<div
class="szkkfdyq _popup _shadow"
:class="{ asDrawer: type === 'drawer' }"
:style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }"
>
<div class="main">
<template v-for="item in items">
<button
v-if="item.action"
v-click-anime
class="_button"
@click="
($event) => {
item.action($event);
close();
}
"
>
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</button>
<MkA
v-else
v-click-anime
:to="item.to"
@click.passive="close()"
>
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</MkA>
</template>
</div>
</div>
</div>
</MkModal>
</MkModal>
</template>
<script lang="ts" setup>
import { } from 'vue';
import MkModal from '@/components/MkModal.vue';
import { navbarItemDef } from '@/navbar';
import { instanceName } from '@/config';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { deviceKind } from '@/scripts/device-kind';
import * as os from '@/os';
import {} from "vue";
import MkModal from "@/components/MkModal.vue";
import { navbarItemDef } from "@/navbar";
import { instanceName } from "@/config";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
import { deviceKind } from "@/scripts/device-kind";
import * as os from "@/os";
const props = withDefaults(defineProps<{
src?: HTMLElement;
anchor?: { x: string; y: string; };
}>(), {
anchor: () => ({ x: 'right', y: 'center' }),
});
const props = withDefaults(
defineProps<{
src?: HTMLElement;
anchor?: { x: string; y: string };
}>(),
{
anchor: () => ({ x: "right", y: "center" }),
}
);
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: "closed"): void;
}>();
const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
deviceKind === 'smartphone' ? 'drawer' :
'dialog';
const preferedModalType =
deviceKind === "desktop" && props.src != null
? "popup"
: deviceKind === "smartphone"
? "drawer"
: "dialog";
const modal = $ref<InstanceType<typeof MkModal>>();
const menu = defaultStore.state.menu;
const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
type: def.to ? 'link' : 'button',
text: i18n.ts[def.title],
icon: def.icon,
to: def.to,
action: def.action,
indicate: def.indicated,
}));
const items = Object.keys(navbarItemDef)
.filter((k) => !menu.includes(k))
.map((k) => navbarItemDef[k])
.filter((def) => (def.show == null ? true : def.show))
.map((def) => ({
type: def.to ? "link" : "button",
text: i18n.ts[def.title],
icon: def.icon,
to: def.to,
action: def.action,
indicate: def.indicated,
}));
function close() {
modal.close();
@ -82,7 +124,8 @@ function close() {
text-align: center;
}
> .main, > .sub {
> .main,
> .sub {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

View File

@ -1,36 +1,55 @@
<template>
<component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
:title="url" @click.stop
>
<slot></slot>
<i v-if="target === '_blank'" class="ph-arrow-square-out ph-bold ph-lg icon"></i>
</component>
<component
:is="self ? 'MkA' : 'a'"
ref="el"
class="xlcxczvw _link"
:[attr]="self ? url.substr(local.length) : url"
:rel="rel"
:target="target"
:title="url"
@click.stop
>
<slot></slot>
<i
v-if="target === '_blank'"
class="ph-arrow-square-out ph-bold ph-lg icon"
></i>
</component>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { url as local } from '@/config';
import { useTooltip } from '@/scripts/use-tooltip';
import * as os from '@/os';
import { defineAsyncComponent } from "vue";
import { url as local } from "@/config";
import { useTooltip } from "@/scripts/use-tooltip";
import * as os from "@/os";
const props = withDefaults(defineProps<{
url: string;
rel?: null | string;
}>(), {
});
const props = withDefaults(
defineProps<{
url: string;
rel?: null | string;
}>(),
{}
);
const self = props.url.startsWith(local);
const attr = self ? 'to' : 'href';
const target = self ? null : '_blank';
const attr = self ? "to" : "href";
const target = self ? null : "_blank";
const el = $ref();
useTooltip($$(el), (showing) => {
os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
showing,
url: props.url,
source: el,
}, {}, 'closed');
os.popup(
defineAsyncComponent(
() => import("@/components/MkUrlPreviewPopup.vue")
),
{
showing,
url: props.url,
source: el,
},
{},
"closed"
);
});
</script>
@ -40,7 +59,7 @@ useTooltip($$(el), (showing) => {
> .icon {
padding-left: 2px;
font-size: .9em;
font-size: 0.9em;
}
}
</style>

View File

@ -1,8 +1,8 @@
<script lang="ts">
import { h, onMounted, onUnmounted, ref, watch } from 'vue';
import { h, onMounted, onUnmounted, ref, watch } from "vue";
export default {
name: 'MarqueeText',
name: "MarqueeText",
props: {
duration: {
type: Number,
@ -38,37 +38,35 @@ export default {
calc();
});
onUnmounted(() => {
});
onUnmounted(() => {});
return {
contentEl,
};
},
render({
$slots, $style, $props: {
duration, repeat, paused, reverse,
},
}) {
return h('div', { class: [$style.wrap] }, [
h('span', {
ref: 'contentEl',
class: [
paused
? $style.paused
: undefined,
$style.content,
],
}, Array(repeat).fill(
h('span', {
class: $style.text,
style: {
animationDirection: reverse
? 'reverse'
: undefined,
},
}, $slots.default()),
)),
render({ $slots, $style, $props: { duration, repeat, paused, reverse } }) {
return h("div", { class: [$style.wrap] }, [
h(
"span",
{
ref: "contentEl",
class: [paused ? $style.paused : undefined, $style.content],
},
Array(repeat).fill(
h(
"span",
{
class: $style.text,
style: {
animationDirection: reverse
? "reverse"
: undefined,
},
},
$slots.default()
)
)
),
]);
},
};
@ -100,7 +98,11 @@ export default {
animation-play-state: paused;
}
@keyframes marquee {
0% { transform:translateX(0); }
100% { transform:translateX(-100%); }
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>

View File

@ -1,70 +1,84 @@
<template>
<div class="mk-media-banner">
<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
<b>{{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
<VuePlyr
:options="{
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'download',
],
disableContextMenu: false,
}"
<div class="mk-media-banner">
<div
v-if="media.isSensitive && hide"
class="sensitive"
@click="hide = false"
>
<audio
ref="audioEl"
class="audio"
:src="media.url"
:title="media.name"
controls
preload="metadata"
@volumechange="volumechange"
/>
</VuePlyr>
<span class="icon"><i class="ph-warning ph-bold ph-lg"></i></span>
<b>{{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
<div
v-else-if="
media.type.startsWith('audio') && media.type !== 'audio/midi'
"
class="audio"
>
<VuePlyr
:options="{
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'download',
],
disableContextMenu: false,
}"
>
<audio
ref="audioEl"
class="audio"
:src="media.url"
:title="media.name"
controls
preload="metadata"
@volumechange="volumechange"
/>
</VuePlyr>
</div>
<a
v-else
class="download"
:href="media.url"
:title="media.name"
:download="media.name"
>
<span class="icon"
><i class="ph-download-simple ph-bold ph-lg"></i
></span>
<b>{{ media.name }}</b>
</a>
</div>
<a
v-else class="download"
:href="media.url"
:title="media.name"
:download="media.name"
>
<span class="icon"><i class="ph-download-simple ph-bold ph-lg"></i></span>
<b>{{ media.name }}</b>
</a>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import VuePlyr from 'vue-plyr';
import type * as misskey from 'calckey-js';
import { ColdDeviceStorage } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';
import { i18n } from '@/i18n';
import { onMounted } from "vue";
import VuePlyr from "vue-plyr";
import type * as misskey from "calckey-js";
import { ColdDeviceStorage } from "@/store";
import "vue-plyr/dist/vue-plyr.css";
import { i18n } from "@/i18n";
const props = withDefaults(defineProps<{
media: misskey.entities.DriveFile;
}>(), {
});
const props = withDefaults(
defineProps<{
media: misskey.entities.DriveFile;
}>(),
{}
);
const audioEl = $ref<HTMLAudioElement | null>();
let hide = $ref(true);
function volumechange() {
if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
if (audioEl) ColdDeviceStorage.set("mediaVolume", audioEl.volume);
}
onMounted(() => {
if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
if (audioEl) audioEl.volume = ColdDeviceStorage.get("mediaVolume");
});
</script>
@ -97,7 +111,7 @@ onMounted(() => {
}
> *:not(:last-child) {
margin-right: .2em;
margin-right: 0.2em;
}
> .icon {

View File

@ -1,45 +1,81 @@
<template>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
<div class="container">
<div class="fullwidth top-caption">
<div class="mk-dialog">
<header>
<Mfm v-if="title" class="title" :text="title"/>
<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
<br/>
</header>
<textarea id="captioninput" v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
<div v-if="(showOkButton || showCaptionButton || showCancelButton)" class="buttons">
<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
<MkButton inline @click="caption">{{ i18n.ts.caption }}</MkButton>
<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
<div class="container">
<div class="fullwidth top-caption">
<div class="mk-dialog">
<header>
<Mfm v-if="title" class="title" :text="title" />
<span
class="text-count"
:class="{ over: remainingLength < 0 }"
>{{ remainingLength }}</span
>
<br />
</header>
<textarea
id="captioninput"
v-model="inputValue"
autofocus
:placeholder="input.placeholder"
@keydown="onInputKeydown"
></textarea>
<div
v-if="
showOkButton ||
showCaptionButton ||
showCancelButton
"
class="buttons"
>
<MkButton
inline
primary
:disabled="remainingLength < 0"
@click="ok"
>{{ i18n.ts.ok }}</MkButton
>
<MkButton inline @click="caption">{{
i18n.ts.caption
}}</MkButton>
<MkButton inline @click="cancel">{{
i18n.ts.cancel
}}</MkButton>
</div>
</div>
</div>
<div class="hdrwpsaf fullwidth">
<header>{{ image.name }}</header>
<img
id="imgtocaption"
:src="image.url"
:alt="image.comment"
:title="image.comment"
@click="$refs.modal.close()"
/>
<footer>
<span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span>
<span v-if="image.properties && image.properties.width"
>{{ number(image.properties.width) }}px ×
{{ number(image.properties.height) }}px</span
>
</footer>
</div>
</div>
<div class="hdrwpsaf fullwidth">
<header>{{ image.name }}</header>
<img id="imgtocaption" :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
<footer>
<span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span>
<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
</footer>
</div>
</div>
</MkModal>
</MkModal>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import insertTextAtCursor from 'insert-text-at-cursor';
import { length } from 'stringz';
import * as os from '@/os';
import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue';
import bytes from '@/filters/bytes';
import number from '@/filters/number';
import { i18n } from '@/i18n';
import { instance } from '@/instance';
import { defineComponent } from "vue";
import insertTextAtCursor from "insert-text-at-cursor";
import { length } from "stringz";
import * as os from "@/os";
import MkModal from "@/components/MkModal.vue";
import MkButton from "@/components/MkButton.vue";
import bytes from "@/filters/bytes";
import number from "@/filters/number";
import { i18n } from "@/i18n";
import { instance } from "@/instance";
export default defineComponent({
components: {
@ -77,7 +113,7 @@ export default defineComponent({
},
},
emits: ['done', 'closed'],
emits: ["done", "closed"],
data() {
return {
@ -91,15 +127,15 @@ export default defineComponent({
const maxCaptionLength = instance.maxCaptionTextLength ?? 512;
if (typeof this.inputValue !== "string") return maxCaptionLength;
return maxCaptionLength - length(this.inputValue);
}
},
},
mounted() {
document.addEventListener('keydown', this.onKeydown);
document.addEventListener("keydown", this.onKeydown);
},
beforeUnmount() {
document.removeEventListener('keydown', this.onKeydown);
document.removeEventListener("keydown", this.onKeydown);
},
methods: {
@ -107,7 +143,7 @@ export default defineComponent({
number,
done(canceled, result?) {
this.$emit('done', { canceled, result });
this.$emit("done", { canceled, result });
this.$refs.modal.close();
},
@ -129,13 +165,15 @@ export default defineComponent({
},
onKeydown(evt) {
if (evt.which === 27) { // ESC
if (evt.which === 27) {
// ESC
this.cancel();
}
},
onInputKeydown(evt) {
if (evt.which === 13) { // Enter
if (evt.which === 13) {
// Enter
if (evt.ctrlKey) {
evt.preventDefault();
evt.stopPropagation();
@ -145,12 +183,16 @@ export default defineComponent({
},
caption() {
const img = document.getElementById('imgtocaption') as HTMLImageElement;
const ta = document.getElementById('captioninput') as HTMLTextAreaElement;
os.api('drive/files/caption-image', {
const img = document.getElementById(
"imgtocaption"
) as HTMLImageElement;
const ta = document.getElementById(
"captioninput"
) as HTMLTextAreaElement;
os.api("drive/files/caption-image", {
url: img.src,
}).then(text => {
insertTextAtCursor(ta, text.slice(0, (512 - ta.value.length)));
}).then((text) => {
insertTextAtCursor(ta, text.slice(0, 512 - ta.value.length));
});
},
},

View File

@ -1,32 +1,50 @@
<template>
<div v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
<div class="text">
<div class="wrapper">
<b style="display: block;"><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
<div v-if="hide" class="qjewsnkg" @click="hide = false">
<ImgWithBlurhash
class="bg"
:hash="image.blurhash"
:title="image.comment"
:alt="image.comment"
/>
<div class="text">
<div class="wrapper">
<b style="display: block"
><i class="ph-warning ph-bold ph-lg"></i>
{{ i18n.ts.sensitive }}</b
>
<span style="display: block">{{ i18n.ts.clickToShow }}</span>
</div>
</div>
</div>
</div>
<div v-else class="gqnyydlz">
<a
:href="image.url"
:title="image.name"
>
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :type="image.type" :title="image.comment" :cover="false"/>
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
</a>
<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash ph-bold ph-lg"></i></button>
</div>
<div v-else class="gqnyydlz">
<a :href="image.url" :title="image.name">
<ImgWithBlurhash
:hash="image.blurhash"
:src="url"
:alt="image.comment"
:type="image.type"
:title="image.comment"
:cover="false"
/>
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
</a>
<button
v-tooltip="i18n.ts.hide"
class="_button hide"
@click="hide = true"
>
<i class="ph-eye-slash ph-bold ph-lg"></i>
</button>
</div>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import type * as misskey from 'calckey-js';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { watch } from "vue";
import type * as misskey from "calckey-js";
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
import { defaultStore } from "@/store";
import { i18n } from "@/i18n";
const props = defineProps<{
image: misskey.entities.DriveFile;
@ -35,19 +53,28 @@ const props = defineProps<{
let hide = $ref(true);
const url = (props.raw || defaultStore.state.loadRawImages)
? props.image.url
: defaultStore.state.disableShowingAnimatedImages
const url =
props.raw || defaultStore.state.loadRawImages
? props.image.url
: defaultStore.state.disableShowingAnimatedImages
? getStaticImageUrl(props.image.thumbnailUrl)
: props.image.thumbnailUrl;
// Plugin:register_note_view_interruptor 使watch
watch(() => props.image, () => {
hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
}, {
deep: true,
immediate: true,
});
watch(
() => props.image,
() => {
hide =
defaultStore.state.nsfw === "force"
? true
: props.image.isSensitive &&
defaultStore.state.nsfw !== "ignore";
},
{
deep: true,
immediate: true,
}
);
</script>
<style lang="scss" scoped>
@ -120,7 +147,7 @@ watch(() => props.image, () => {
font-size: 14px;
font-weight: bold;
left: 12px;
opacity: .5;
opacity: 0.5;
padding: 0 6px;
text-align: center;
top: 12px;

View File

@ -1,29 +1,58 @@
<template>
<div class="hoawjimk">
<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" :class="{ dmWidth: inDm }">
<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length" @click.stop>
<template v-for="media in mediaList.filter(media => previewable(media))">
<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
</template>
<div class="hoawjimk">
<XBanner
v-for="media in mediaList.filter((media) => !previewable(media))"
:key="media.id"
:media="media"
/>
<div
v-if="mediaList.filter((media) => previewable(media)).length > 0"
class="gird-container"
:class="{ dmWidth: inDm }"
>
<div
ref="gallery"
:data-count="
mediaList.filter((media) => previewable(media)).length
"
@click.stop
>
<template
v-for="media in mediaList.filter((media) =>
previewable(media)
)"
>
<XVideo
v-if="media.type.startsWith('video')"
:key="media.id"
:video="media"
/>
<XImage
v-else-if="media.type.startsWith('image')"
:key="media.id"
class="image"
:data-id="media.id"
:image="media"
:raw="raw"
/>
</template>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as misskey from 'calckey-js';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
import 'photoswipe/style.css';
import XBanner from '@/components/MkMediaBanner.vue';
import XImage from '@/components/MkMediaImage.vue';
import XVideo from '@/components/MkMediaVideo.vue';
import * as os from '@/os';
import { FILE_TYPE_BROWSERSAFE } from '@/const';
import { defaultStore } from '@/store';
import { onMounted, ref } from "vue";
import * as misskey from "calckey-js";
import PhotoSwipeLightbox from "photoswipe/lightbox";
import PhotoSwipe from "photoswipe";
import "photoswipe/style.css";
import XBanner from "@/components/MkMediaBanner.vue";
import XImage from "@/components/MkMediaImage.vue";
import XVideo from "@/components/MkMediaVideo.vue";
import * as os from "@/os";
import { FILE_TYPE_BROWSERSAFE } from "@/const";
import { defaultStore } from "@/store";
const props = defineProps<{
mediaList: misskey.entities.DriveFile[];
@ -32,60 +61,72 @@ const props = defineProps<{
}>();
const gallery = ref(null);
const pswpZIndex = os.claimZIndex('middle');
const pswpZIndex = os.claimZIndex("middle");
onMounted(() => {
const lightbox = new PhotoSwipeLightbox({
dataSource: props.mediaList
.filter(media => {
if (media.type === 'image/svg+xml') return true; // svgwebpublicpngtrue
return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
.filter((media) => {
if (media.type === "image/svg+xml") return true; // svgwebpublicpngtrue
return (
media.type.startsWith("image") &&
FILE_TYPE_BROWSERSAFE.includes(media.type)
);
})
.map(media => {
.map((media) => {
const item = {
src: media.url,
w: media.properties.width,
h: media.properties.height,
alt: media.comment,
};
if (media.properties.orientation != null && media.properties.orientation >= 5) {
if (
media.properties.orientation != null &&
media.properties.orientation >= 5
) {
[item.w, item.h] = [item.h, item.w];
}
return item;
}),
gallery: gallery.value,
children: '.image',
thumbSelector: '.image',
children: ".image",
thumbSelector: ".image",
loop: false,
padding: window.innerWidth > 500 ? {
top: 32,
bottom: 32,
left: 32,
right: 32,
} : {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
imageClickAction: 'close',
tapAction: 'toggle-controls',
padding:
window.innerWidth > 500
? {
top: 32,
bottom: 32,
left: 32,
right: 32,
}
: {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
imageClickAction: "close",
tapAction: "toggle-controls",
pswpModule: PhotoSwipe,
});
lightbox.on('itemData', (ev) => {
lightbox.on("itemData", (ev) => {
const { itemData } = ev;
// element is children
const { element } = itemData;
const id = element.dataset.id;
const file = props.mediaList.find(media => media.id === id);
const file = props.mediaList.find((media) => media.id === id);
itemData.src = file.url;
itemData.w = Number(file.properties.width);
itemData.h = Number(file.properties.height);
if (file.properties.orientation != null && file.properties.orientation >= 5) {
if (
file.properties.orientation != null &&
file.properties.orientation >= 5
) {
[itemData.w, itemData.h] = [itemData.h, itemData.w];
}
itemData.msrc = file.thumbnailUrl;
@ -93,17 +134,17 @@ onMounted(() => {
itemData.thumbCropped = true;
});
lightbox.on('uiRegister', () => {
lightbox.on("uiRegister", () => {
lightbox.pswp.ui.registerElement({
name: 'altText',
className: 'pwsp__alt-text-container',
appendTo: 'wrapper',
name: "altText",
className: "pwsp__alt-text-container",
appendTo: "wrapper",
onInit: (el, pwsp) => {
let textBox = document.createElement('p');
textBox.className = 'pwsp__alt-text';
let textBox = document.createElement("p");
textBox.className = "pwsp__alt-text";
el.appendChild(textBox);
let preventProp = function(ev: Event): void {
let preventProp = function (ev: Event): void {
ev.stopPropagation();
};
@ -114,7 +155,7 @@ onMounted(() => {
el.onpointercancel = preventProp;
el.onpointermove = preventProp;
pwsp.on('change', () => {
pwsp.on("change", () => {
textBox.textContent = pwsp.currSlide.data.alt?.trim();
});
},
@ -125,15 +166,17 @@ onMounted(() => {
});
const previewable = (file: misskey.entities.DriveFile): boolean => {
if (file.type === 'image/svg+xml') return true; // svgwebpublic/thumbnailpngtrue
if (file.type === "image/svg+xml") return true; // svgwebpublic/thumbnailpngtrue
// FILE_TYPE_BROWSERSAFE
return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
return (
(file.type.startsWith("video") || file.type.startsWith("image")) &&
FILE_TYPE_BROWSERSAFE.includes(file.type)
);
};
</script>
<style lang="scss" scoped>
.hoawjimk {
> .dmWidth {
min-width: 20rem;
max-width: 40rem;
@ -147,9 +190,9 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
overflow: hidden;
&:before {
content: '';
content: "";
display: block;
padding-top: 56.25% // 16:9;
padding-top: 56.25%; // 16:9;
}
> div {
@ -221,7 +264,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
<style lang="scss">
.pswp {
//
//z-index: v-bind(pswpZIndex);
//z-index: v-bind(pswpZIndex);
z-index: 2000000;
}
.pwsp__alt-text-container {
@ -254,5 +297,4 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
.pwsp__alt-text:empty {
display: none;
}
</style>

View File

@ -1,58 +1,66 @@
<template>
<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
<div>
<b><i class="ph-warning ph-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
</div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<VuePlyr
:options="{
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'pip',
'download',
'fullscreen'
],
disableContextMenu: false,
}"
<div
v-if="hide"
class="icozogqfvdetwohsdglrbswgrejoxbdj"
@click="hide = false"
>
<video
:poster="video.thumbnailUrl"
:title="video.comment"
:aria-label="video.comment"
preload="none"
controls
@contextmenu.stop
>
<source
:src="video.url"
:type="video.type"
<div>
<b
><i class="ph-warning ph-bold ph-lg"></i>
{{ i18n.ts.sensitive }}</b
>
</video>
</VuePlyr>
<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
</div>
<span>{{ i18n.ts.clickToShow }}</span>
</div>
</div>
<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
<VuePlyr
:options="{
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'pip',
'download',
'fullscreen',
],
disableContextMenu: false,
}"
>
<video
:poster="video.thumbnailUrl"
:title="video.comment"
:aria-label="video.comment"
preload="none"
controls
@contextmenu.stop
>
<source :src="video.url" :type="video.type" />
</video>
</VuePlyr>
<i class="ph-eye-slash ph-bold ph-lg" @click="hide = true"></i>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import VuePlyr from 'vue-plyr';
import type * as misskey from 'calckey-js';
import { defaultStore } from '@/store';
import 'vue-plyr/dist/vue-plyr.css';
import { i18n } from '@/i18n';
import { ref } from "vue";
import VuePlyr from "vue-plyr";
import type * as misskey from "calckey-js";
import { defaultStore } from "@/store";
import "vue-plyr/dist/vue-plyr.css";
import { i18n } from "@/i18n";
const props = defineProps<{
video: misskey.entities.DriveFile;
}>();
const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
const hide = ref(
defaultStore.state.nsfw === "force"
? true
: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
);
</script>
<style lang="scss" scoped>
@ -67,7 +75,7 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe
background-color: var(--fg);
color: var(--accentLighten);
font-size: 14px;
opacity: .5;
opacity: 0.5;
padding: 3px 6px;
text-align: center;
cursor: pointer;

View File

@ -1,40 +1,68 @@
<template>
<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }" @click.stop>
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
<span class="main">
<span class="username">@{{ username }}</span>
<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
</span>
</MkA>
<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }" @click.stop>
<span class="main">
<span class="username">@{{ username }}</span>
<span class="host">@{{ toUnicode(host) }}</span>
</span>
</a>
<MkA
v-if="url.startsWith('/')"
v-user-preview="canonical"
class="akbvjaqn"
:class="{ isMe }"
:to="url"
:style="{ background: bgCss }"
@click.stop
>
<img class="icon" :src="`/avatar/@${username}@${host}`" alt="" />
<span class="main">
<span class="username">@{{ username }}</span>
<span
v-if="host != localHost || $store.state.showFullAcct"
class="host"
>@{{ toUnicode(host) }}</span
>
</span>
</MkA>
<a
v-else
class="akbvjaqn"
:href="url"
target="_blank"
rel="noopener"
:style="{ background: bgCss }"
@click.stop
>
<span class="main">
<span class="username">@{{ username }}</span>
<span class="host">@{{ toUnicode(host) }}</span>
</span>
</a>
</template>
<script lang="ts" setup>
import { toUnicode } from 'punycode';
import { } from 'vue';
import tinycolor from 'tinycolor2';
import { host as localHost } from '@/config';
import { $i } from '@/account';
import { toUnicode } from "punycode";
import {} from "vue";
import tinycolor from "tinycolor2";
import { host as localHost } from "@/config";
import { $i } from "@/account";
const props = defineProps<{
username: string;
host: string;
}>();
const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
const canonical =
props.host === localHost
? `@${props.username}`
: `@${props.username}@${toUnicode(props.host)}`;
const url = `/${canonical}`;
const isMe = $i && (
`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
);
const isMe =
$i &&
`@${props.username}@${toUnicode(props.host)}` ===
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase();
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
const bg = tinycolor(
getComputedStyle(document.documentElement).getPropertyValue(
isMe ? "--mentionMe" : "--mention"
)
);
bg.setAlpha(0.1);
const bgCss = bg.toRgbString();
</script>

View File

@ -1,15 +1,29 @@
<template>
<div ref="el" class="sfhdhdhr">
<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
</div>
<div ref="el" class="sfhdhdhr">
<MkMenu
ref="menu"
:items="items"
:align="align"
:width="width"
:as-drawer="false"
@close="onChildClosed"
/>
</div>
</template>
<script lang="ts" setup>
import { on } from 'events';
import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
import MkMenu from './MkMenu.vue';
import { MenuItem } from '@/types/menu';
import * as os from '@/os';
import { on } from "events";
import {
nextTick,
onBeforeUnmount,
onMounted,
onUnmounted,
ref,
watch,
} from "vue";
import MkMenu from "./MkMenu.vue";
import { MenuItem } from "@/types/menu";
import * as os from "@/os";
const props = defineProps<{
items: MenuItem[];
@ -20,27 +34,27 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
(ev: 'closed'): void;
(ev: 'actioned'): void;
(ev: "closed"): void;
(ev: "actioned"): void;
}>();
const el = ref<HTMLElement>();
const align = 'left';
const align = "left";
function setPosition() {
const rootRect = props.rootElement.getBoundingClientRect();
const rect = props.targetElement.getBoundingClientRect();
const left = props.targetElement.offsetWidth;
const top = (rect.top - rootRect.top) - 8;
el.value.style.left = left + 'px';
el.value.style.top = top + 'px';
const top = rect.top - rootRect.top - 8;
el.value.style.left = left + "px";
el.value.style.top = top + "px";
}
function onChildClosed(actioned?: boolean) {
if (actioned) {
emit('actioned');
emit("actioned");
} else {
emit('closed');
emit("closed");
}
}
@ -53,7 +67,7 @@ onMounted(() => {
defineExpose({
checkHit: (ev: MouseEvent) => {
return (ev.target === el.value || el.value.contains(ev.target));
return ev.target === el.value || el.value.contains(ev.target);
},
});
</script>

View File

@ -1,93 +1,225 @@
<template>
<div>
<div
ref="itemsEl" v-hotkey="keymap"
class="rrevdjwt _popup _shadow"
:class="{ center: align === 'center', asDrawer }"
:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
@contextmenu.self="e => e.preventDefault()"
>
<template v-for="(item, i) in items2">
<div v-if="item === null" class="divider"></div>
<span v-else-if="item.type === 'label'" class="label item">
<span :style="item.textStyle || ''">{{ item.text }}</span>
<div>
<div
ref="itemsEl"
v-hotkey="keymap"
class="rrevdjwt _popup _shadow"
:class="{ center: align === 'center', asDrawer }"
:style="{
width: width && !asDrawer ? width + 'px' : '',
maxHeight: maxHeight ? maxHeight + 'px' : '',
}"
@contextmenu.self="(e) => e.preventDefault()"
>
<template v-for="(item, i) in items2">
<div v-if="item === null" class="divider"></div>
<span v-else-if="item.type === 'label'" class="label item">
<span :style="item.textStyle || ''">{{ item.text }}</span>
</span>
<span
v-else-if="item.type === 'pending'"
:tabindex="i"
class="pending item"
>
<span><MkEllipsis /></span>
</span>
<MkA
v-else-if="item.type === 'link'"
:to="item.to"
:tabindex="i"
class="_button item"
@click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
<i
v-if="item.icon"
class="ph-fw ph-lg"
:class="item.icon"
></i>
<span v-else-if="item.icons">
<i
v-for="icon in item.icons"
class="ph-fw ph-lg"
:class="icon"
></i>
</span>
<MkAvatar
v-if="item.avatar"
:user="item.avatar"
class="avatar"
/>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</MkA>
<a
v-else-if="item.type === 'a'"
:href="item.href"
:target="item.target"
:download="item.download"
:tabindex="i"
class="_button item"
@click="close(true)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
<i
v-if="item.icon"
class="ph-fw ph-lg"
:class="item.icon"
></i>
<span v-else-if="item.icons">
<i
v-for="icon in item.icons"
class="ph-fw ph-lg"
:class="icon"
></i>
</span>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</a>
<button
v-else-if="item.type === 'user' && !items.hidden"
:tabindex="i"
class="_button item"
:class="{ active: item.active }"
:disabled="item.active"
@click="clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
<MkAvatar :user="item.user" class="avatar" /><MkUserName
:user="item.user"
/>
<span v-if="item.indicate" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</button>
<span
v-else-if="item.type === 'switch'"
:tabindex="i"
class="item"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
<FormSwitch
v-model="item.ref"
:disabled="item.disabled"
class="form-switch"
:style="item.textStyle || ''"
>{{ item.text }}</FormSwitch
>
</span>
<button
v-else-if="item.type === 'parent'"
:tabindex="i"
class="_button item parent"
:class="{ childShowing: childShowingItem === item }"
@mouseenter="showChildren(item, $event)"
>
<i
v-if="item.icon"
class="ph-fw ph-lg"
:class="item.icon"
></i>
<span v-else-if="item.icons">
<i
v-for="icon in item.icons"
class="ph-fw ph-lg"
:class="icon"
></i>
</span>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span class="caret"
><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i
></span>
</button>
<button
v-else-if="!item.hidden"
:tabindex="i"
class="_button item"
:class="{ danger: item.danger, active: item.active }"
:disabled="item.active"
@click="clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
<i
v-if="item.icon"
class="ph-fw ph-lg"
:class="item.icon"
></i>
<span v-else-if="item.icons">
<i
v-for="icon in item.icons"
class="ph-fw ph-lg"
:class="icon"
></i>
</span>
<MkAvatar
v-if="item.avatar"
:user="item.avatar"
class="avatar"
/>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</button>
</template>
<span v-if="items2.length === 0" class="none item">
<span>{{ i18n.ts.none }}</span>
</span>
<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
<span><MkEllipsis/></span>
</span>
<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
<span v-else-if="item.icons">
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
</span>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
</MkA>
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
<span v-else-if="item.icons">
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
</span>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
</a>
<button v-else-if="item.type === 'user' && !items.hidden" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
</button>
<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch" :style="item.textStyle || ''">{{ item.text }}</FormSwitch>
</span>
<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
<span v-else-if="item.icons">
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
</span>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span class="caret"><i class="ph-caret-right ph-bold ph-lg ph-fw ph-lg"></i></span>
</button>
<button v-else-if="!item.hidden" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
<i v-if="item.icon" class="ph-fw ph-lg" :class="item.icon"></i>
<span v-else-if="item.icons">
<i v-for="icon in item.icons" class="ph-fw ph-lg" :class="icon"></i>
</span>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span :style="item.textStyle || ''">{{ item.text }}</span>
<span v-if="item.indicate" class="indicator"><i class="ph-circle ph-fill"></i></span>
</button>
</template>
<span v-if="items2.length === 0" class="none item">
<span>{{ i18n.ts.none }}</span>
</span>
</div>
<div v-if="childMenu" class="child">
<XChild
ref="child"
:items="childMenu"
:target-element="childTarget"
:root-element="itemsEl"
showing
@actioned="childActioned"
/>
</div>
</div>
<div v-if="childMenu" class="child">
<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, menu, defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { focusPrev, focusNext } from '@/scripts/focus';
import FormSwitch from '@/components/form/switch.vue';
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
import * as os from '@/os';
import { i18n } from '@/i18n';
import {
computed,
menu,
defineAsyncComponent,
nextTick,
onBeforeUnmount,
onMounted,
onUnmounted,
Ref,
ref,
watch,
} from "vue";
import { focusPrev, focusNext } from "@/scripts/focus";
import FormSwitch from "@/components/form/switch.vue";
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
import * as os from "@/os";
import { i18n } from "@/i18n";
const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
const XChild = defineAsyncComponent(() => import("./MkMenu.child.vue"));
const props = defineProps<{
items: MenuItem[];
viaKeyboard?: boolean;
asDrawer?: boolean;
align?: 'center' | string;
align?: "center" | string;
width?: number;
maxHeight?: number;
}>();
const emit = defineEmits<{
(ev: 'close', actioned?: boolean): void;
(ev: "close", actioned?: boolean): void;
}>();
let itemsEl = $ref<HTMLDivElement>();
@ -97,31 +229,38 @@ let items2: InnerMenuItem[] = $ref([]);
let child = $ref<InstanceType<typeof XChild>>();
let keymap = computed(() => ({
'up|k|shift+tab': focusUp,
'down|j|tab': focusDown,
'esc': close,
"up|k|shift+tab": focusUp,
"down|j|tab": focusDown,
esc: close,
}));
let childShowingItem = $ref<MenuItem | null>();
watch(() => props.items, () => {
const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
watch(
() => props.items,
() => {
const items: (MenuItem | MenuPending)[] = [...props.items].filter(
(item) => item !== undefined
);
for (let i = 0; i < items.length; i++) {
const item = items[i];
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item && 'then' in item) { // if item is Promise
items[i] = { type: 'pending' };
item.then(actualItem => {
items2[i] = actualItem;
});
if (item && "then" in item) {
// if item is Promise
items[i] = { type: "pending" };
item.then((actualItem) => {
items2[i] = actualItem;
});
}
}
}
items2 = items as InnerMenuItem[];
}, {
immediate: true,
});
items2 = items as InnerMenuItem[];
},
{
immediate: true,
}
);
let childMenu = $ref<MenuItem[] | null>();
let childTarget = $ref<HTMLElement | null>();
@ -137,7 +276,11 @@ function childActioned() {
}
function onGlobalMousedown(event: MouseEvent) {
if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
if (
childTarget &&
(event.target === childTarget || childTarget.contains(event.target))
)
return;
if (child && child.checkHit(event)) return;
closeChild();
}
@ -169,7 +312,7 @@ function clicked(fn: MenuAction, ev: MouseEvent) {
}
function close(actioned = false) {
emit('close', actioned);
emit("close", actioned);
}
function focusUp() {
@ -187,11 +330,13 @@ onMounted(() => {
});
}
document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
document.addEventListener("mousedown", onGlobalMousedown, {
passive: true,
});
});
onBeforeUnmount(() => {
document.removeEventListener('mousedown', onGlobalMousedown);
document.removeEventListener("mousedown", onGlobalMousedown);
});
</script>

View File

@ -1,35 +1,34 @@
<template>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
<defs>
<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
</linearGradient>
</defs>
<polygon
:points="polygonPoints"
:style="`stroke: none; fill: url(#${ gradientId });`"
/>
<polyline
:points="polylinePoints"
fill="none"
:stroke="color"
stroke-width="2"
/>
<circle
:cx="headX"
:cy="headY"
r="3"
:fill="color"
/>
</svg>
<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`" style="overflow: visible">
<defs>
<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
<stop
offset="100%"
:stop-color="color"
stop-opacity="0.65"
></stop>
</linearGradient>
</defs>
<polygon
:points="polygonPoints"
:style="`stroke: none; fill: url(#${gradientId});`"
/>
<polyline
:points="polylinePoints"
fill="none"
:stroke="color"
stroke-width="2"
/>
<circle :cx="headX" :cy="headY" r="3" :fill="color" />
</svg>
</template>
<script lang="ts" setup>
import { onUnmounted, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import tinycolor from 'tinycolor2';
import { useInterval } from '@/scripts/use-interval';
import { onUnmounted, watch } from "vue";
import { v4 as uuid } from "uuid";
import tinycolor from "tinycolor2";
import { useInterval } from "@/scripts/use-interval";
const props = defineProps<{
src: number[];
@ -38,12 +37,14 @@ const props = defineProps<{
const viewBoxX = 50;
const viewBoxY = 50;
const gradientId = uuid();
let polylinePoints = $ref('');
let polygonPoints = $ref('');
let polylinePoints = $ref("");
let polygonPoints = $ref("");
let headX = $ref<number | null>(null);
let headY = $ref<number | null>(null);
let clock = $ref<number | null>(null);
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
const accent = tinycolor(
getComputedStyle(document.documentElement).getPropertyValue("--accent")
);
const color = accent.toRgbString();
function draw(): void {
@ -52,12 +53,12 @@ function draw(): void {
const _polylinePoints = stats.map((n, i) => [
i * (viewBoxX / (stats.length - 1)),
(1 - (n / peak)) * viewBoxY,
(1 - n / peak) * viewBoxY,
]);
polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
polylinePoints = _polylinePoints.map((xy) => `${xy[0]},${xy[1]}`).join(" ");
polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
polygonPoints = `0,${viewBoxY} ${polylinePoints} ${viewBoxX},${viewBoxY}`;
headX = _polylinePoints[_polylinePoints.length - 1][0];
headY = _polylinePoints[_polylinePoints.length - 1][1];

View File

@ -1,15 +1,64 @@
<template>
<Transition
:name="transitionName"
:enter-active-class="$style['transition_' + transitionName + '_enterActive']"
:leave-active-class="$style['transition_' + transitionName + '_leaveActive']"
:enter-from-class="$style['transition_' + transitionName + '_enterFrom']"
:enter-active-class="
$style['transition_' + transitionName + '_enterActive']
"
:leave-active-class="
$style['transition_' + transitionName + '_leaveActive']
"
:enter-from-class="
$style['transition_' + transitionName + '_enterFrom']
"
:leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
:duration="transitionDuration"
appear
@after-leave="emit('closed')"
@enter="emit('opening')"
@after-enter="onOpened"
>
<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
<div class="_modalBg data-cy-bg" :class="[$style.bg, { [$style.bgTransparent]: isEnableBgTransparent, 'data-cy-transparent': isEnableBgTransparent }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, top: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
<div
v-show="manualShowing != null ? manualShowing : showing"
v-hotkey.global="keymap"
:class="[
$style.root,
{
[$style.drawer]: type === 'drawer',
[$style.dialog]: type === 'dialog' || type === 'dialog:top',
[$style.popup]: type === 'popup',
},
]"
:style="{
zIndex,
pointerEvents: (manualShowing != null ? manualShowing : showing)
? 'auto'
: 'none',
'--transformOrigin': transformOrigin,
}"
>
<div
class="_modalBg data-cy-bg"
:class="[
$style.bg,
{
[$style.bgTransparent]: isEnableBgTransparent,
'data-cy-transparent': isEnableBgTransparent,
},
]"
:style="{ zIndex }"
@click="onBgClick"
@mousedown="onBgClick"
@contextmenu.prevent.stop="() => {}"
></div>
<div
ref="content"
:class="[
$style.content,
{ [$style.fixed]: fixed, top: type === 'dialog:top' },
]"
:style="{ zIndex }"
@click.self="onBgClick"
>
<slot :max-height="maxHeight" :type="type"></slot>
</div>
</div>
@ -17,94 +66,103 @@
</template>
<script lang="ts" setup>
import { nextTick, onMounted, watch, provide } from 'vue';
import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch';
import { defaultStore } from '@/store';
import { deviceKind } from '@/scripts/device-kind';
import { nextTick, onMounted, watch, provide } from "vue";
import * as os from "@/os";
import { isTouchUsing } from "@/scripts/touch";
import { defaultStore } from "@/store";
import { deviceKind } from "@/scripts/device-kind";
function getFixedContainer(el: Element | null): Element | null {
if (el == null || el.tagName === 'BODY') return null;
const position = window.getComputedStyle(el).getPropertyValue('position');
if (position === 'fixed') {
if (el == null || el.tagName === "BODY") return null;
const position = window.getComputedStyle(el).getPropertyValue("position");
if (position === "fixed") {
return el;
} else {
return getFixedContainer(el.parentElement);
}
}
type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
type ModalTypes = "popup" | "dialog" | "dialog:top" | "drawer";
const props = withDefaults(defineProps<{
manualShowing?: boolean | null;
anchor?: { x: string; y: string; };
src?: HTMLElement;
preferType?: ModalTypes | 'auto';
zPriority?: 'low' | 'middle' | 'high';
noOverlap?: boolean;
transparentBg?: boolean;
}>(), {
manualShowing: null,
src: null,
anchor: () => ({ x: 'center', y: 'bottom' }),
preferType: 'auto',
zPriority: 'low',
noOverlap: true,
transparentBg: false,
});
const props = withDefaults(
defineProps<{
manualShowing?: boolean | null;
anchor?: { x: string; y: string };
src?: HTMLElement;
preferType?: ModalTypes | "auto";
zPriority?: "low" | "middle" | "high";
noOverlap?: boolean;
transparentBg?: boolean;
}>(),
{
manualShowing: null,
src: null,
anchor: () => ({ x: "center", y: "bottom" }),
preferType: "auto",
zPriority: "low",
noOverlap: true,
transparentBg: false,
}
);
const emit = defineEmits<{
(ev: 'opening'): void;
(ev: 'opened'): void;
(ev: 'click'): void;
(ev: 'esc'): void;
(ev: 'close'): void;
(ev: 'closed'): void;
(ev: "opening"): void;
(ev: "opened"): void;
(ev: "click"): void;
(ev: "esc"): void;
(ev: "close"): void;
(ev: "closed"): void;
}>();
provide('modal', true);
provide("modal", true);
let maxHeight = $ref<number>();
let fixed = $ref(false);
let transformOrigin = $ref('center');
let transformOrigin = $ref("center");
let showing = $ref(true);
let content = $shallowRef<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority);
let useSendAnime = $ref(false);
const type = $computed<ModalTypes>(() => {
if (props.preferType === 'auto') {
if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
return 'drawer';
if (props.preferType === "auto") {
if (
!defaultStore.state.disableDrawer &&
isTouchUsing &&
deviceKind === "smartphone"
) {
return "drawer";
} else {
return props.src != null ? 'popup' : 'dialog';
return props.src != null ? "popup" : "dialog";
}
} else {
return props.preferType!;
}
});
const isEnableBgTransparent = $computed(() => props.transparentBg && (type === 'popup'));
let transitionName = $computed((() =>
const isEnableBgTransparent = $computed(
() => props.transparentBg && type === "popup"
);
let transitionName = $computed(() =>
defaultStore.state.animation
? useSendAnime
? 'send'
: type === 'drawer'
? 'modal-drawer'
: type === 'popup'
? 'modal-popup'
: 'modal'
: ''
));
let transitionDuration = $computed((() =>
transitionName === 'send'
? "send"
: type === "drawer"
? "modal-drawer"
: type === "popup"
? "modal-popup"
: "modal"
: ""
);
let transitionDuration = $computed(() =>
transitionName === "send"
? 400
: transitionName === 'modal-popup'
? 100
: transitionName === 'modal'
? 200
: transitionName === 'modal-drawer'
? 200
: 0
));
: transitionName === "modal-popup"
? 100
: transitionName === "modal"
? 200
: transitionName === "modal-drawer"
? 200
: 0
);
let contentClicking = false;
@ -114,30 +172,30 @@ function close(opts: { useSendAnimation?: boolean } = {}) {
}
// eslint-disable-next-line vue/no-mutating-props
if (props.src) props.src.style.pointerEvents = 'auto';
if (props.src) props.src.style.pointerEvents = "auto";
showing = false;
emit('close');
emit("close");
}
function onBgClick() {
if (contentClicking) return;
emit('click');
emit("click");
}
if (type === 'drawer') {
if (type === "drawer") {
maxHeight = window.innerHeight / 1.5;
}
const keymap = {
'esc': () => emit('esc'),
esc: () => emit("esc"),
};
const MARGIN = 16;
const align = () => {
if (props.src == null) return;
if (type === 'drawer') return;
if (type === 'dialog') return;
if (type === "drawer") return;
if (type === "dialog") return;
if (content == null) return;
@ -152,19 +210,19 @@ const align = () => {
const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
if (props.anchor.x === 'center') {
left = x + (props.src.offsetWidth / 2) - (width / 2);
} else if (props.anchor.x === 'left') {
if (props.anchor.x === "center") {
left = x + props.src.offsetWidth / 2 - width / 2;
} else if (props.anchor.x === "left") {
// TODO
} else if (props.anchor.x === 'right') {
} else if (props.anchor.x === "right") {
left = x + props.src.offsetWidth;
}
if (props.anchor.y === 'center') {
top = (y - (height / 2));
} else if (props.anchor.y === 'top') {
if (props.anchor.y === "center") {
top = y - height / 2;
} else if (props.anchor.y === "top") {
// TODO
} else if (props.anchor.y === 'bottom') {
} else if (props.anchor.y === "bottom") {
top = y + props.src.offsetHeight;
}
@ -174,20 +232,20 @@ const align = () => {
left = window.innerWidth - width;
}
const underSpace = (window.innerHeight - MARGIN) - top;
const upperSpace = (srcRect.top - MARGIN);
const underSpace = window.innerHeight - MARGIN - top;
const upperSpace = srcRect.top - MARGIN;
//
if (top + height > (window.innerHeight - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
if (top + height > window.innerHeight - MARGIN) {
if (props.noOverlap && props.anchor.x === "center") {
if (underSpace >= upperSpace / 3) {
maxHeight = underSpace;
} else {
maxHeight = upperSpace;
top = (upperSpace + MARGIN) - height;
top = upperSpace + MARGIN - height;
}
} else {
top = (window.innerHeight - MARGIN) - height;
top = window.innerHeight - MARGIN - height;
}
} else {
maxHeight = underSpace;
@ -198,20 +256,26 @@ const align = () => {
left = window.innerWidth - width + window.scrollX - 1;
}
const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
const upperSpace = (srcRect.top - MARGIN);
const underSpace =
window.innerHeight - MARGIN - (top - window.pageYOffset);
const upperSpace = srcRect.top - MARGIN;
//
if (top + height - window.scrollY > (window.innerHeight - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) {
if (top + height - window.scrollY > window.innerHeight - MARGIN) {
if (props.noOverlap && props.anchor.x === "center") {
if (underSpace >= upperSpace / 3) {
maxHeight = underSpace;
} else {
maxHeight = upperSpace;
top = window.scrollY + ((upperSpace + MARGIN) - height);
top = window.scrollY + (upperSpace + MARGIN - height);
}
} else {
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
top =
window.innerHeight -
MARGIN -
height +
window.pageYOffset -
1;
}
} else {
maxHeight = underSpace;
@ -226,55 +290,76 @@ const align = () => {
left = 0;
}
let transformOriginX = 'center';
let transformOriginY = 'center';
let transformOriginX = "center";
let transformOriginY = "center";
if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
transformOriginY = 'top';
} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
transformOriginY = 'bottom';
if (
top >=
srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)
) {
transformOriginY = "top";
} else if (top + height <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
transformOriginY = "bottom";
}
if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
transformOriginX = 'left';
} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
transformOriginX = 'right';
if (
left >=
srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)
) {
transformOriginX = "left";
} else if (
left + width <=
srcRect.left + (fixed ? 0 : window.pageXOffset)
) {
transformOriginX = "right";
}
transformOrigin = `${transformOriginX} ${transformOriginY}`;
content.style.left = left + 'px';
content.style.top = top + 'px';
content.style.left = left + "px";
content.style.top = top + "px";
};
const onOpened = () => {
emit('opened');
emit("opened");
//
const el = content!.children[0];
el.addEventListener('mousedown', ev => {
contentClicking = true;
window.addEventListener('mouseup', ev => {
// click mouseup
window.setTimeout(() => {
contentClicking = false;
}, 100);
}, { passive: true, once: true });
}, { passive: true });
el.addEventListener(
"mousedown",
(ev) => {
contentClicking = true;
window.addEventListener(
"mouseup",
(ev) => {
// click mouseup
window.setTimeout(() => {
contentClicking = false;
}, 100);
},
{ passive: true, once: true }
);
},
{ passive: true }
);
};
onMounted(() => {
watch(() => props.src, async () => {
if (props.src) {
// eslint-disable-next-line vue/no-mutating-props
props.src.style.pointerEvents = 'none';
}
fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
watch(
() => props.src,
async () => {
if (props.src) {
// eslint-disable-next-line vue/no-mutating-props
props.src.style.pointerEvents = "none";
}
fixed = type === "drawer" || getFixedContainer(props.src) != null;
await nextTick();
await nextTick();
align();
}, { immediate: true });
align();
},
{ immediate: true }
);
nextTick(() => {
new ResizeObserver((entries, observer) => {
@ -297,7 +382,8 @@ defineExpose({
> .content {
transform: translateY(0px);
transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(.5,-0.5,1,.5) !important;
transition: opacity 0.3s ease-in,
transform 0.3s cubic-bezier(0.5, -0.5, 1, 0.5) !important;
}
}
.transition_send_enterFrom,
@ -346,7 +432,8 @@ defineExpose({
> .content {
transform-origin: var(--transformOrigin);
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
}
}
.transition_modal-popup_enterFrom,
@ -369,7 +456,7 @@ defineExpose({
}
> .content {
transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
}
}
.transition_modal-drawer_leaveActive {
@ -378,7 +465,7 @@ defineExpose({
}
> .content {
transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
transition: transform 0.2s cubic-bezier(0, 0.5, 0, 1) !important;
}
}
.transition_modal-drawer_enterFrom,
@ -404,15 +491,39 @@ defineExpose({
margin: auto;
padding: 32px;
// TODO: mask-imageiOS
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 32px,
rgba(0, 0, 0, 1) calc(100% - 32px),
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 32px,
rgba(0, 0, 0, 1) calc(100% - 32px),
rgba(0, 0, 0, 0) 100%
);
overflow: auto;
display: flex;
@media (max-width: 500px) {
padding: 16px;
-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 16px,
rgba(0, 0, 0, 1) calc(100% - 16px),
rgba(0, 0, 0, 0) 100%
);
mask-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 16px,
rgba(0, 0, 0, 1) calc(100% - 16px),
rgba(0, 0, 0, 0) 100%
);
}
> ::v-deep(*) {
@ -424,7 +535,6 @@ defineExpose({
margin-top: 0;
}
}
}
}

Some files were not shown because too many files have changed in this diff Show More