blockworks-foundation
/
og-image
mirror of https://github.com/blockworks-foundation/og-image.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add loading state

This commit is contained in:
Steven 2019-01-24 12:18:22 -05:00
parent 769a8c0187
commit 6e192b2f14
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/script.js
View File

@ -1,10 +1,14 @@
import { toClipboard } from 'https://cdn.jsdelivr.net/npm/copee@1.0.6/dist/copee.mjs'; import { toClipboard } from 'https://cdn.jsdelivr.net/npm/copee@1.0.6/dist/copee.mjs';
const ImagePreview = ({ src, onclick }) => { const ImagePreview = ({ src, onclick, onload, loading }) => {
const style = {
filter: loading ? 'blur(5px)' : '',
opacity: loading ? 0.1 : 1,
};
return H('a', return H('a',
{ className: 'image-wrapper', href: src, onclick }, { className: 'image-wrapper', href: src, onclick },
H('img', H('img',
{ src } { src, onload, style }
) )
); );
} }
@ -86,14 +90,17 @@ const markdownOptions = [
]; ];
const App = (props, state, setState) => { const App = (props, state, setState) => {
const { fileType = 'png', fontSize = '75px', md = '1', text = '**Hello** World', images=['https://assets.zeit.co/image/upload/front/assets/design/now-black.svg'], showToast = false } = state; const { fileType = 'png', fontSize = '75px', md = '1', text = '**Hello** World', images=['https://assets.zeit.co/image/upload/front/assets/design/now-black.svg'], showToast = false, loading = true } = state;
const url = new URL(window.location.origin); const url = new URL(window.location.hostname === 'localhost' ? 'https://og-image.now.sh' : window.location.origin);
url.pathname = `${text}.${fileType}`; url.pathname = `${text}.${fileType}`;
url.searchParams.append('md', md); url.searchParams.append('md', md);
url.searchParams.append('fontSize', fontSize); url.searchParams.append('fontSize', fontSize);
for (let image of images) { for (let image of images) {
url.searchParams.append('images', image); url.searchParams.append('images', image);
} }
const setLoadingState = (newState) => {
setState({ ...newState, loading: true });
};
return H('div', return H('div',
{ className: 'split' }, { className: 'split' },
H('div', H('div',
@ -101,29 +108,29 @@ const App = (props, state, setState) => {
H('div', H('div',
H(Field, { H(Field, {
label: 'File Type', label: 'File Type',
input: H(Dropdown, { options: fileTypeOptions, value: fileType, onchange: val => setState({fileType: val}) }) input: H(Dropdown, { options: fileTypeOptions, value: fileType, onchange: val => setLoadingState({fileType: val}) })
}), }),
H(Field, { H(Field, {
label: 'Font Size', label: 'Font Size',
input: H(Dropdown, { options: fontSizeOptions, value: fontSize, onchange: val => setState({fontSize: val}) }) input: H(Dropdown, { options: fontSizeOptions, value: fontSize, onchange: val => setLoadingState({fontSize: val}) })
}), }),
H(Field, { H(Field, {
label: 'Text Type', label: 'Text Type',
input: H(Dropdown, { options: markdownOptions, value: md, onchange: val => setState({ md: val }) }) input: H(Dropdown, { options: markdownOptions, value: md, onchange: val => setLoadingState({ md: val }) })
}), }),
H(Field, { H(Field, {
label: 'Text Input', label: 'Text Input',
input: H(TextInput, { value: text, onchange: val => setState({ text: val }) }) input: H(TextInput, { value: text, onchange: val => setLoadingState({ text: val }) })
}), }),
...images.map((image, i) => H(Field, { ...images.map((image, i) => H(Field, {
label: `Image ${i + 1}`, label: `Image ${i + 1}`,
input: H(TextInput, { value: image, onchange: val => { let clone = [...images]; clone[i] = val; setState({ images: clone }) } }) input: H(TextInput, { value: image, onchange: val => { let clone = [...images]; clone[i] = val; setLoadingState({ images: clone }) } })
})), })),
H(Field, { H(Field, {
label: `Image ${images.length + 1}`, label: `Image ${images.length + 1}`,
input: H(Button, { input: H(Button, {
label: `Add Image ${images.length + 1}`, label: `Add Image ${images.length + 1}`,
onclick: () => { setState({ images: [...images, ''] }) } onclick: () => { setLoadingState({ images: [...images, ''] }) }
}), }),
}), }),
) )
@ -132,6 +139,8 @@ const App = (props, state, setState) => {
{ clasName: 'pull-right' }, { clasName: 'pull-right' },
H(ImagePreview, { H(ImagePreview, {
src: url.href, src: url.href,
loading: loading,
onload: e => setState({ loading: false }),
onclick: e => { onclick: e => {
e.preventDefault(); e.preventDefault();
const success = toClipboard(url.href); const success = toClipboard(url.href);