Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update ia-activity-indicator in pic-uploader #933

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update ia-activity-indicator in pic-uploader #933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5f2888
Update ia-activity-indicator in pic-uploader
jbuckner Jan 17, 2025
3033c25
Bump version
jbuckner Jan 17, 2025
f6bb1f4
Cleanup
jbuckner Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions packages/ia-pic-uploader/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import html from 'eslint-plugin-html';
import tsParser from '@typescript-eslint/parser';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import js from '@eslint/js';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});

export default [
...compat.extends('plugin:@typescript-eslint/recommended'),
{
plugins: {
'@typescript-eslint': typescriptEslint,
html,
},

languageOptions: {
parser: tsParser,
},

settings: {
'import/resolver': {
node: {
extensions: ['.ts', '.tsx'],
moduleDirectory: ['node_modules', 'src', 'demo'],
},
},
},

rules: {
'@typescript-eslint/no-unsafe-function-type': 'warn',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-explicit-any': 'warn',
},
},
{
ignores: ['**/*.js', '**/*.mjs'],
},
{
files: ['**/*.test.ts'],
rules: {
'@typescript-eslint/no-unused-expressions': 'off',
},
},
];
96 changes: 34 additions & 62 deletions packages/ia-pic-uploader/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@internetarchive/ia-pic-uploader",
"version": "0.1.8",
"version": "0.1.9",
"description": "A Web Component for Picture upload.",
"license": "AGPL-3.0-only",
"author": "Internet Archive",
Expand All @@ -10,10 +10,10 @@
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
"prepare": "rimraf dist && tsc && yarn run build",
"build": "tsc",
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
"lint": "eslint . && prettier \"**/*.ts\" --check",
"format": "eslint . --fix && prettier \"**/*.ts\" --write",
"circular": "madge --circular --extensions ts .",
"test": "yarn format && tsc && yarn run lint && yarn run circular && wtr --coverage",
"test": "yarn format && tsc && yarn run lint && yarn run circular && wtr --coverage --debug",
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
"ghpages:build": "rimraf ghpages && yarn run prepare && vite build",
"ghpages:publish": "yarn run ghpages:prepare -e $(git branch --show-current)",
Expand All @@ -22,66 +22,38 @@
},
"types": "dist/index.d.ts",
"devDependencies": {
"@open-wc/eslint-config": "^9.0.0",
"@open-wc/testing": "^3.1.6",
"@typescript-eslint/eslint-plugin": "^5.30.0",
"@typescript-eslint/parser": "^5.30.0",
"@types/express": "^4.17.9",
"@types/express-serve-static-core": "^4.17.21",
"@web/dev-server": "^0.1.32",
"@web/test-runner": "^0.15.0",
"concurrently": "^7.2.2",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-lit": "^1.7.2",
"eslint-plugin-lit-a11y": "^2.3.0",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-wc": "^1.3.2",
"gh-pages": "^5.0.0",
"madge": "^6.0.0",
"prettier": "^2.7.1",
"rimraf": "^4.0.0",
"sinon": "^15.0.0",
"ts-lit-plugin": "^1.2.1",
"tslib": "^2.4.0",
"typescript": "^4.7.4",
"vite": "^4.0.0"
"@open-wc/eslint-config": "^12.0.3",
"@open-wc/testing": "^4.0.0",
"@types/express": "^5.0.0",
"@types/express-serve-static-core": "^5.0.5",
"@types/mocha": "^10.0.10",
"@typescript-eslint/eslint-plugin": "^8.20.0",
"@typescript-eslint/parser": "^8.20.0",
"@web/dev-server": "^0.4.6",
"@web/dev-server-esbuild": "^1.0.3",
"@web/test-runner": "^0.19.0",
"concurrently": "^9.1.2",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-html": "^8.1.2",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-lit": "^1.15.0",
"eslint-plugin-lit-a11y": "^4.1.4",
"eslint-plugin-no-only-tests": "^3.3.0",
"eslint-plugin-wc": "^2.2.0",
"gh-pages": "^6.3.0",
"madge": "^8.0.0",
"prettier": "^3.4.2",
"rimraf": "^6.0.1",
"sinon": "^19.0.2",
"ts-lit-plugin": "^2.0.2",
"tslib": "^2.8.1",
"typescript": "^5.7.3",
"vite": "^6.0.7"
},
"publishConfig": {
"access": "public"
},
"eslintConfig": {
"parser": "@typescript-eslint/parser",
"extends": [
"@open-wc",
"prettier"
],
"plugins": [
"@typescript-eslint"
],
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error"
],
"no-shadow": "off",
"@typescript-eslint/no-shadow": [
"error"
],
"class-methods-use-this": "off",
"import/no-unresolved": "off",
"import/extensions": [
"off",
"ignorePackages",
{
"js": "never",
"ts": "never"
}
]
}
},
"prettier": {
"singleQuote": true,
"arrowParens": "avoid"
Expand All @@ -94,7 +66,7 @@
]
},
"dependencies": {
"@internetarchive/ia-activity-indicator": "^0.0.4",
"lit": "^2.7.4"
"@internetarchive/ia-activity-indicator": "^0.0.6",
"lit": "^2.8.0"
}
}
59 changes: 30 additions & 29 deletions packages/ia-pic-uploader/src/ia-pic-uploader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { html, css, LitElement, CSSResultGroup, nothing, svg } from 'lit';
import { property, customElement, state, query } from 'lit/decorators.js';
import iaButtonStyle from './style/ia-button-style';
import '@internetarchive/ia-activity-indicator';
import { css, CSSResultGroup, html, LitElement, nothing, svg } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { BackendServiceHandler } from './services/backend-service';
import log from './services/log';

import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
import iaButtonStyle from './style/ia-button-style';

@customElement('ia-pic-uploader')
export class IAPicUploader extends LitElement {
Expand Down Expand Up @@ -57,7 +56,7 @@ export class IAPicUploader extends LitElement {
*
* @memberof IAPicUploader
*/
@property({ type: Number }) validFileTypes: String[] = [
@property({ type: Number }) validFileTypes: string[] = [
'image/jpeg',
'image/png',
'image/gif',
Expand Down Expand Up @@ -187,7 +186,7 @@ export class IAPicUploader extends LitElement {
e => {
this.relatedTarget = e.target;
},
false
false,
);
document.addEventListener('dragover', e => this.dragOver(e), false);
document.addEventListener('dragleave', e => this.dragLeave(e), true);
Expand All @@ -199,14 +198,14 @@ export class IAPicUploader extends LitElement {
});

[this.overlay, this.dropRegion, this.selfSubmitEle].forEach(element =>
element?.addEventListener('drop', this.handleDropImage.bind(this), false)
element?.addEventListener('drop', this.handleDropImage.bind(this), false),
);

// execute when submit to save picture
this.saveFile?.addEventListener(
'submit',
this.handleSaveFile.bind(this),
false
false,
);

// execute when user change picture
Expand Down Expand Up @@ -340,7 +339,7 @@ export class IAPicUploader extends LitElement {
detail: {
error: this.fileValidationError ?? '',
},
})
}),
);
}

Expand All @@ -359,7 +358,7 @@ export class IAPicUploader extends LitElement {
// get input file
const inputFile = this.fileSelector?.files[0];
const getParams = `identifier=${this.identifier}&fname=${encodeURIComponent(
inputFile.name
inputFile.name,
)}&submit=1`;

await BackendServiceHandler({
Expand Down Expand Up @@ -393,15 +392,17 @@ export class IAPicUploader extends LitElement {
const metadataApiInterval = setInterval(async () => {
const res = BackendServiceHandler({
action: 'verify-upload',
endpoint: `https://archive.org/metadata/${this.identifier}?rand=${Math.random()}`,
endpoint: `https://archive.org/metadata/${
this.identifier
}?rand=${Math.random()}`,
});
res.then((json: any) => {
const waitCount =
json.pending_tasks && json.tasks ? json.tasks.length : 0;

if (waitCount) {
const adminError = json.tasks.filter(
(e: any) => e.wait_admin === 2
(e: any) => e.wait_admin === 2,
).length;
if (adminError) {
this.taskStatus =
Expand Down Expand Up @@ -460,13 +461,13 @@ export class IAPicUploader extends LitElement {
*/
get selfSubmitFormTemplate() {
const formAction = encodeURIComponent(
`${this.endpoint}?identifier=${this.identifier}&submit=1`
`${this.endpoint}?identifier=${this.identifier}&submit=1`,
);

return html`
<div class="self-submit-form hidden">
<button
class="close-button
class="close-button
${(!this.showDropper && this.fileValidationError === '') ||
this.showLoadingIndicator
? 'hidden'
Expand All @@ -483,7 +484,7 @@ export class IAPicUploader extends LitElement {
: this.plusSVGTemplate(35, 35, '#969696', '#fff')}
<span
class="drag-text ${this.showLoadingIndicator ? 'pointer-none' : ''}"
@keyup=""
@keyup=${() => {}}
@click=${() => {
this.dropRegion?.click();
}}
Expand Down Expand Up @@ -536,9 +537,9 @@ export class IAPicUploader extends LitElement {
</button>
</form>
<div
class="image-preview full-preview
class="image-preview full-preview
${this.showLoadingIndicator ? 'pointer-none hidden' : ''}"
@keyup=""
@keyup=${() => {}}
@click=${() => {
this.dropRegion?.click();
}}
Expand Down Expand Up @@ -599,20 +600,20 @@ export class IAPicUploader extends LitElement {

/**
* Render svg plus
*
* @param {number} height | height for svg
*
* @param {number} height | height for svg
* @param {number} width | width for svg
* @param {string} fill | fill color
* @param {string} stroke | stroke color
* @returns {SVGAElement}
*/
plusSVGTemplate(height: number, width: number, fill: string, stroke: string) {
return svg`<svg
class="plus-icon"
width="${width}"
height="${height}"
viewBox="0 0 26 26"
fill="none"
return svg`<svg
class="plus-icon"
width="${width}"
height="${height}"
viewBox="0 0 26 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12.8137" cy="13.3699" r="12.5" fill="${fill}"/>
Expand All @@ -625,15 +626,15 @@ export class IAPicUploader extends LitElement {
render() {
return html`
<div
class="profile-section profile-hover
class="profile-section profile-hover
${!this.lookingAtMyAccount ? 'pointer-none' : ''}
${this.type === 'full' ? 'adjust-full' : ''}
"
>
${this.type === 'compact' ? this.overlayTemplate : nothing}
<div
id="drop-region"
class="image-preview
class="image-preview
${this.type === 'full' ? 'full-preview' : ''}
${this.showLoadingIndicator ? 'pointer-none' : ''}"
>
Expand Down Expand Up @@ -784,7 +785,7 @@ export class IAPicUploader extends LitElement {
justify-items: center;
}

@media(max-width: 1350px) {
@media (max-width: 1350px) {
.self-submit-form {
left: 100%;
}
Expand Down
7 changes: 2 additions & 5 deletions packages/ia-pic-uploader/src/services/backend-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
/* eslint-disable */

import log from './log';

/**
* Helper to call loan service
* @param {Object} options
*/
export async function BackendServiceHandler(options: any) {
export async function BackendServiceHandler(options: any): Promise<any> {
const option = {
action: null,
identifier: '',
Expand All @@ -33,7 +31,6 @@ export async function BackendServiceHandler(options: any) {
headers: option.headers,
body: option.file ?? null,
})
// eslint-disable-next-line consistent-return
.then(response => {
log('response', response);

Expand Down Expand Up @@ -63,7 +60,7 @@ export async function BackendServiceHandler(options: any) {
.then(data => {
if (option.action === 'save-file') {
log(
'file saved, metadata call started to verify is picture is upadated!'
'file saved, metadata call started to verify is picture is upadated!',
);
}

Expand Down
Loading