91 lines
1.9 KiB
JavaScript
91 lines
1.9 KiB
JavaScript
import { prop } from 'frptools';
|
|
|
|
import {
|
|
subscribeToRender,
|
|
renderSwitch,
|
|
defineView as vw,
|
|
createView as cv,
|
|
defineElement as el
|
|
} from '../utils/domvm.js';
|
|
import { ImageType } from '../data/image.js';
|
|
import { AlbumType } from '../data/album.js';
|
|
import { AllImagesView, uploadImages } from './allImages.js';
|
|
import { FocusView } from './focus.js';
|
|
import { Dropzone } from './components/dropzone.js';
|
|
import { Overlay } from './components/overlay.js';
|
|
import { Icon } from './components/icon.js';
|
|
import { routeChanged } from '../services/router.js';
|
|
import { injectStyle, styled } from '../utils/style.js';
|
|
import { FILL_STYLE } from './styles.js';
|
|
|
|
export function GalleryView(vm) {
|
|
const routeName = prop();
|
|
const routeParams = prop();
|
|
|
|
routeChanged.subscribe(function onRouteChange(name, params) {
|
|
routeName(name);
|
|
routeParams(params);
|
|
vm.redraw();
|
|
});
|
|
|
|
function renderMain() {
|
|
return [
|
|
content([
|
|
renderSwitch(
|
|
{
|
|
photos: [AllImagesView, {}, 'allImages'],
|
|
focus: [FocusView, routeParams(), `focus_${routeParams() && routeParams().id}`]
|
|
},
|
|
routeName()
|
|
)
|
|
])
|
|
];
|
|
}
|
|
|
|
function renderDropPane() {
|
|
return [
|
|
Overlay([
|
|
Icon({
|
|
name: 'upload',
|
|
size: 4
|
|
}),
|
|
el('h1', 'Drop pictures here to upload to your gallery')
|
|
])
|
|
];
|
|
}
|
|
|
|
return function render() {
|
|
return container({ class: 'gallery' }, [
|
|
vw(
|
|
Dropzone,
|
|
{
|
|
className: fill,
|
|
dropEffect: 'copy',
|
|
ondrop: uploadImages,
|
|
content: renderMain,
|
|
hoverContent: renderDropPane
|
|
},
|
|
'dz'
|
|
)
|
|
]);
|
|
};
|
|
}
|
|
|
|
const fill = injectStyle(FILL_STYLE);
|
|
const container = styled(
|
|
{
|
|
overflow: 'hidden'
|
|
},
|
|
FILL_STYLE
|
|
);
|
|
|
|
const content = styled({
|
|
position: 'absolute',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
display: 'flex',
|
|
['-webkit-transform']: 'translate3d(0,0,0);' // http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
|
|
});
|