This commit is contained in:
syuilo 2018-02-15 15:14:28 +09:00
parent b9cb703f97
commit ff67563dc8
16 changed files with 57 additions and 97 deletions

View file

@ -4,13 +4,6 @@
</div> </div>
</template> </template>
<style lang="stylus" scoped>
.mk-images
display grid
grid-gap 4px
height 256px
</style>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
@ -58,3 +51,13 @@ export default Vue.extend({
} }
}); });
</script> </script>
<style lang="stylus" scoped>
.mk-images
display grid
grid-gap 4px
height 256px
@media (max-width 500px)
height 192px
</style>

View file

@ -1,11 +1,14 @@
<template> <template>
<a class="mk-images-image" <div>
:href="image.url" <a class="mk-images-image"
@mousemove="onMousemove" :href="image.url"
@mouseleave="onMouseleave" @mousemove="onMousemove"
@click.prevent="onClick" @mouseleave="onMouseleave"
:style="style" @click.prevent="onClick"
:title="image.name"></a> :style="style"
:title="image.name"
></a>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -50,7 +53,6 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-images-image .mk-images-image
display block
overflow hidden overflow hidden
border-radius 4px border-radius 4px

View file

@ -1,82 +0,0 @@
<mk-images>
<template each={ image in images }>
<mk-images-image image={ image }/>
</template>
<style lang="stylus" scoped>
:scope
display grid
grid-gap 4px
height 256px
@media (max-width 500px)
height 192px
</style>
<script lang="typescript">
this.images = this.opts.images;
this.on('mount', () => {
if (this.images.length == 1) {
this.root.style.gridTemplateRows = '1fr';
this.tags['mk-images-image'].root.style.gridColumn = '1 / 2';
this.tags['mk-images-image'].root.style.gridRow = '1 / 2';
} else if (this.images.length == 2) {
this.root.style.gridTemplateColumns = '1fr 1fr';
this.root.style.gridTemplateRows = '1fr';
this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
} else if (this.images.length == 3) {
this.root.style.gridTemplateColumns = '1fr 0.5fr';
this.root.style.gridTemplateRows = '1fr 1fr';
this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
this.tags['mk-images-image'][0].root.style.gridRow = '1 / 3';
this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
this.tags['mk-images-image'][2].root.style.gridColumn = '2 / 3';
this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
} else if (this.images.length == 4) {
this.root.style.gridTemplateColumns = '1fr 1fr';
this.root.style.gridTemplateRows = '1fr 1fr';
this.tags['mk-images-image'][0].root.style.gridColumn = '1 / 2';
this.tags['mk-images-image'][0].root.style.gridRow = '1 / 2';
this.tags['mk-images-image'][1].root.style.gridColumn = '2 / 3';
this.tags['mk-images-image'][1].root.style.gridRow = '1 / 2';
this.tags['mk-images-image'][2].root.style.gridColumn = '1 / 2';
this.tags['mk-images-image'][2].root.style.gridRow = '2 / 3';
this.tags['mk-images-image'][3].root.style.gridColumn = '2 / 3';
this.tags['mk-images-image'][3].root.style.gridRow = '2 / 3';
}
});
</script>
</mk-images>
<mk-images-image>
<a ref="view" href={ image.url } target="_blank" style={ styles } title={ image.name }></a>
<style lang="stylus" scoped>
:scope
display block
overflow hidden
border-radius 4px
> a
display block
overflow hidden
width 100%
height 100%
background-position center
background-size cover
</style>
<script lang="typescript">
this.image = this.opts.image;
this.styles = {
'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
'background-image': `url(${this.image.url}?thumbnail&size=512)`
};
</script>
</mk-images-image>

View file

@ -0,0 +1,37 @@
<template>
<div>
<a class="mk-images-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['image'],
computed: {
style(): any {
return {
'background-color': this.image.properties.average_color ? `rgb(${this.image.properties.average_color.join(',')})` : 'transparent',
'background-image': `url(${this.image.url}?thumbnail&size=512)`
};
}
}
});
</script>
<style lang="stylus" scoped>
.mk-images-image
display block
overflow hidden
border-radius 4px
> a
display block
overflow hidden
width 100%
height 100%
background-position center
background-size cover
</style>