simplify and expand click delegates

This commit is contained in:
Nolan Lawson 2018-03-15 08:59:30 -07:00
parent 1b194745c0
commit f137f0c56c
5 changed files with 44 additions and 23 deletions

View File

@ -2,7 +2,7 @@
<button type="button"
class="play-video-button"
aria-label="Play video: {{media.description || ''}}"
on:click="onClickPlayVideoButton()"
delegate-key="{{delegateKey}}"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
>
<PlayVideoIcon />
@ -20,7 +20,7 @@
<button type="button"
class="show-image-button"
aria-label="Show image: {{media.description || ''}}"
on:click="onClickShowImageButton()"
delegate-key="{{delegateKey}}"
on:mouseover="set({mouseover: event})"
style="width: {{inlineWidth}}px; height: {{inlineHeight}}px;"
>
@ -107,8 +107,21 @@
import { ONE_TRANSPARENT_PIXEL } from '../../_static/media'
import { store } from '../../_store/store'
import LazyImage from '../LazyImage.html'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => {
if (this.get('media').type === 'video') {
this.onClickPlayVideoButton()
} else {
this.onClickShowImageButton()
}
})
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
},
computed: {
// width/height to show inline
inlineWidth: smallWidth => smallWidth || DEFAULT_MEDIA_WIDTH,
@ -123,7 +136,8 @@
smallHeight: small => small && small.height,
originalWidth: original => original && original.width,
originalHeight: original => original && original.height,
noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number'
noNativeWidthHeight: (smallWidth, smallHeight) => typeof smallWidth !== 'number' || typeof smallHeight !== 'number',
delegateKey: (media) => `media-${media.id}`
},
methods: {
async onClickPlayVideoButton() {

View File

@ -1,7 +1,7 @@
<article class="status-article {{getClasses(originalStatus, timelineType, isStatusInOwnThread)}}"
tabindex="0"
delegate-key="{{elementKey}}"
focus-key="{{elementKey}}"
delegate-key="{{delegateKey}}"
focus-key="{{delegateKey}}"
aria-posinset="{{index}}"
aria-setsize="{{length}}"
aria-label="{{ariaLabel}}"
@ -17,18 +17,18 @@
<StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
{{#if originalStatus.spoiler_text}}
<StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification
:timelineType :timelineValue on:recalculateHeight />
on:recalculateHeight />
{{/if}}
{{#if !originalStatus.spoiler_text || spoilerShown}}
<StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
{{/if}}
{{#if originalStatus.media_attachments && originalStatus.media_attachments.length}}
<StatusMediaAttachments status="{{originalStatus}}" :contextualStatusId on:recalculateHeight />
<StatusMediaAttachments status="{{originalStatus}}" :timelineType :timelineValue />
{{/if}}
{{#if isStatusInOwnThread}}
<StatusDetails status="{{originalStatus}}" />
{{/if}}
<StatusToolbar status="{{originalStatus}}" :isStatusInOwnThread :timelineType :timelineValue />
<StatusToolbar status="{{originalStatus}}" :isStatusInOwnThread />
</article>
<style>
@ -98,16 +98,16 @@
export default {
oncreate() {
let elementKey = this.get('elementKey')
let delegateKey = this.get('delegateKey')
if (!this.get('isStatusInOwnThread')) {
// the whole <article> is clickable in this case
registerClickDelegate(elementKey, (e) => this.onClickOrKeydown(e))
registerClickDelegate(delegateKey, (e) => this.onClickOrKeydown(e))
}
},
ondestroy() {
let elementKey = this.get('elementKey')
let delegateKey = this.get('delegateKey')
if (!this.get('isStatusInOwnThread')) {
unregisterClickDelegate(elementKey)
unregisterClickDelegate(delegateKey)
}
},
components: {
@ -153,7 +153,7 @@
computed: {
originalStatus: (status) => status.reblog ? status.reblog : status,
statusId: (originalStatus) => originalStatus.id,
elementKey: (statusId, timelineType, timelineValue) => `status-${timelineType}-${timelineValue}-${statusId}`,
delegateKey: (statusId) => `status-${statusId}`,
contextualStatusId: ($currentInstance, timelineType, timelineValue, status, notification) => {
return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
},

View File

@ -5,7 +5,7 @@
<button type="button"
class="status-sensitive-media-button"
aria-label="Hide sensitive media"
on:click="onClickSensitiveMediaButton()" >
delegate-key="{{delegateKey}}" >
<div class="svg-wrapper">
<svg>
<use xlink:href="#fa-eye-slash" />
@ -17,7 +17,7 @@
<button type="button"
class="status-sensitive-media-button"
aria-label="Show sensitive media"
on:click="onClickSensitiveMediaButton()" >
delegate-key="{{delegateKey}}" >
<div class="status-sensitive-media-warning">
<span>Sensitive content. Click to show.</span>
@ -126,15 +126,24 @@
<script>
import MediaAttachments from './MediaAttachments.html'
import { store } from '../../_store/store'
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
export default {
oncreate() {
registerClickDelegate(this.get('delegateKey'), () => this.onClickSensitiveMediaButton())
},
ondestroy() {
unregisterClickDelegate(this.get('delegateKey'))
},
components: {
MediaAttachments
},
store: () => store,
computed: {
mediaAttachments: (status) => status.media_attachments,
sensitiveShown: ($sensitivesShown, contextualStatusId) => !!$sensitivesShown[contextualStatusId]
sensitiveShown: ($sensitivesShown, contextualStatusId) => !!$sensitivesShown[contextualStatusId],
statusId: (status) => status.id,
delegateKey: (statusId) => `sensitive-${statusId}`,
},
methods: {
onClickSensitiveMediaButton() {

View File

@ -53,7 +53,7 @@
computed: {
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
statusId: (status) => status.id,
delegateKey: (statusId, timelineType, timelineValue) => `spoiler-${timelineType}-${timelineValue}-${statusId}`
delegateKey: (statusId) => `spoiler-${statusId}`
},
methods: {
onClickSpoilerButton() {

View File

@ -126,12 +126,10 @@
},
statusId: (status) => status.id,
accountId: (status) => status.account.id,
disableReply: (statusId, timelineType, timelineValue) => timelineType === 'reply' && statusId === timelineValue,
keyPrefix: (timelineType, timelineValue, statusId) => `${timelineType}-${timelineValue}-${statusId}`,
favoriteKey: (keyPrefix) => `${keyPrefix}-fav`,
reblogKey: (keyPrefix) => `${keyPrefix}-reblog`,
replyKey: (keyPrefix) => `${keyPrefix}-reply`,
optionsKey: (keyPrefix) => `${keyPrefix}-options`,
favoriteKey: (statusId) => `fav-${statusId}`,
reblogKey: (statusId) => `reblog-${statusId}`,
replyKey: (statusId) => `reply-${statusId}`,
optionsKey: (statusId) => `options-${statusId}`,
}
}
</script>