-
Notifications
You must be signed in to change notification settings - Fork 12
Feature/blocks-new-theming #33
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.
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
Changes from 10 commits
ef8a1a8
d7b1d0d
1fbdf45
248c47a
6815cde
b52e48e
d63c3fc
dfaa0f7
b50452d
1e2e6f8
4f2c886
af1a855
3e6d5e8
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite App</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="./src/main.js"></script> | ||
<lr-config ctx-name="my-uploader" pubkey="a6ca334c3520777c0045" source-list="unsplash"></lr-config> | ||
<lr-custom-file-uploader ctx-name="my-uploader" class="uc-light"></lr-custom-file-uploader> | ||
</body> | ||
</html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,6 +15,6 @@ | |
"vite": "4.5.2" | ||
}, | ||
"dependencies": { | ||
"@uploadcare/blocks": "0.30.5" | ||
"@uploadcare/blocks": "0.44.0" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { FileUploaderRegular } from "@uploadcare/blocks"; | ||
|
||
export class CustomFileUploader extends FileUploaderRegular {} | ||
CustomFileUploader.template = /* HTML */ ` | ||
<lr-simple-btn></lr-simple-btn> | ||
|
||
<lr-modal strokes block-body-scrolling> | ||
<lr-start-from> | ||
<lr-drop-area with-icon clickable></lr-drop-area> | ||
<lr-source-list wrap></lr-source-list> | ||
<lr-copyright></lr-copyright> | ||
</lr-start-from> | ||
<lr-upload-list></lr-upload-list> | ||
<lr-camera-source></lr-camera-source> | ||
<lr-url-source></lr-url-source> | ||
<lr-external-source></lr-external-source> | ||
<lr-cloud-image-editor-activity></lr-cloud-image-editor-activity> | ||
<lr-unsplash-source token="${import.meta.env.VITE_UNSPLASH_TOKEN}"></lr-unsplash-source> | ||
</lr-modal> | ||
|
||
<lr-message-box></lr-message-box> | ||
<lr-progress-bar-common></lr-progress-bar-common> | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,7 +17,7 @@ const getRandomImages = async (token) => { | |
|
||
export class UnsplashSource extends UploaderBlock { | ||
activityType = "unsplash"; | ||
_currentItemId = null | ||
_currentItemId = null; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well-implemented class with robust functionality. The Also applies to: 32-40, 58-61, 76-76, 99-111, 158-160 |
||
|
||
init$ = { | ||
handleNext: () => { | ||
|
@@ -28,21 +28,16 @@ export class UnsplashSource extends UploaderBlock { | |
}, | ||
}; | ||
|
||
cssInit$ = { | ||
"--cfg-unsplash-token": null, | ||
}; | ||
|
||
get token() { | ||
return this.getCssData("--cfg-unsplash-token"); | ||
} | ||
|
||
async fetch() { | ||
const items = await getRandomImages(this.token); | ||
const items = await getRandomImages(this.$.token); | ||
this._items.push(...items); | ||
for (const item of items) { | ||
this._splide.add( | ||
/* HTML */ `<li data-id="${item.id}" class="splide__slide"><img src="${item.url}" /></li>` | ||
); | ||
this._splide.add(/* HTML */ `<li | ||
data-id="${item.id}" | ||
class="splide__slide" | ||
> | ||
<img src="${item.url}" /> | ||
</li>`); | ||
} | ||
} | ||
|
||
|
@@ -60,10 +55,10 @@ export class UnsplashSource extends UploaderBlock { | |
this._items.shift(); | ||
}); | ||
|
||
this._splide.on("active", ({slide}) => { | ||
this._splide.on("active", ({ slide }) => { | ||
const itemId = slide.dataset.id; | ||
this._currentItemId = itemId; | ||
}) | ||
}); | ||
} | ||
|
||
unmount() { | ||
|
@@ -78,7 +73,7 @@ export class UnsplashSource extends UploaderBlock { | |
} | ||
|
||
pick() { | ||
const item = this._items.find(item => item.id === this._currentItemId) | ||
const item = this._items.find((item) => item.id === this._currentItemId); | ||
|
||
this.uploadCollection.add({ | ||
externalUrl: item.rawUrl, | ||
|
@@ -101,6 +96,19 @@ export class UnsplashSource extends UploaderBlock { | |
} | ||
|
||
static template = /* HTML */ ` | ||
<svg width="0" height="0" style="position:absolute"> | ||
<symbol | ||
viewBox="0 0 24 24" | ||
id="uc-icon-unsplash" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
fill="currentColor" | ||
fill-rule="evenodd" | ||
d="M15 4.5H9v4h6v-4ZM4 10.5h5v4h6v-4h5v9H4v-9Z" | ||
/> | ||
</symbol> | ||
</svg> | ||
<lr-activity-header> | ||
<button | ||
type="button" | ||
|
@@ -146,3 +154,7 @@ export class UnsplashSource extends UploaderBlock { | |
</div> | ||
`; | ||
} | ||
|
||
UnsplashSource.bindAttributes({ | ||
token: "token", | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider handling environment variables more cautiously in templates.
Direct usage of
import.meta.env.VITE_UNSPLASH_TOKEN
in the template might cause issues if the environment variable is not set, as this might happen at build time. Consider adding checks or fallbacks.