Add support for configurable CW clickthrough.

This commit is contained in:
ensra 2018-08-20 02:59:06 +01:00
parent 9982376f9a
commit 1121f32c48
6 changed files with 55 additions and 17 deletions

View file

@ -15,6 +15,7 @@ const settings = {
streamingLocal: this.$store.state.config.streaming,
pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
hoverPreviewLocal: this.$store.state.config.hoverPreview,
expandCWLocal: this.$store.state.config.expandCW,
stopGifs: this.$store.state.config.stopGifs,
loopSilentAvailable:
// Firefox
@ -65,6 +66,9 @@ const settings = {
value = filter(value.split('\n'), (word) => trim(word).length > 0)
this.$store.dispatch('setOption', { name: 'muteWords', value })
},
expandCWLocal (value) {
this.$store.dispatch('setOption', { name: 'expandCW', value })
},
stopGifs (value) {
this.$store.dispatch('setOption', { name: 'stopGifs', value })
}

View file

@ -34,6 +34,10 @@
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
</li>
<li>
<input type="checkbox" id="expandCW" v-model="expandCWLocal">
<label for="expandCW">{{$t('settings.expand_cw')}}</label>
</li>
</ul>
</div>
<div class="setting-item">

View file

@ -22,15 +22,18 @@ const Status = {
'noHeading',
'inlineExpanded'
],
data: () => ({
replying: false,
expanded: false,
unmuted: false,
userExpanded: false,
preview: null,
showPreview: false,
showingTall: false
}),
data () {
return {
replying: false,
expanded: false,
unmuted: false,
userExpanded: false,
preview: null,
showPreview: false,
showingTall: false,
expandingCW: this.$store.state.config.expandCW
}
},
computed: {
muteWords () {
return this.$store.state.config.muteWords
@ -98,12 +101,27 @@ const Status = {
//
// Using max-height + overflow: auto for status components resulted in false positives
// very often with japanese characters, and it was very annoying.
tallStatus () {
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
return lengthScore > 20
},
hideCWStatus () {
if (this.tallStatus && this.$store.state.config.expandCW) {
return false
}
return !this.expandingCW && this.status.summary
},
hideTallStatus () {
if (this.status.summary && !this.$store.state.config.expandCW) {
return false
}
if (this.showingTall) {
return false
}
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
return lengthScore > 20
return this.tallStatus
},
showingMore () {
return this.showingTall || (this.status.summary && this.expandingCW)
},
attachmentSize () {
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
@ -163,8 +181,16 @@ const Status = {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
toggleShowTall () {
this.showingTall = !this.showingTall
toggleShowMore () {
if (this.showingTall) {
this.showingTall = false
} else if (this.expandingCW) {
this.expandingCW = false
} else if (this.hideTallStatus) {
this.showingTall = true
} else if (this.hideCWStatus) {
this.expandingCW = true
}
},
replyEnter (id, event) {
this.showPreview = true

View file

@ -76,9 +76,11 @@
</div>
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a>
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
<a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideCWStatus"></div>
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary" v-else></div>
<a v-if="hideCWStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
</div>
<div v-if='status.attachments' class='attachments media-body'>
@ -310,7 +312,7 @@
}
}
.tall-status-unhider {
.status-unhider, .cw-status-hider {
width: 100%;
text-align: center;
}

View file

@ -317,6 +317,7 @@ const en = {
hide_attachments_in_tl: 'Hide attachments in timeline',
hide_attachments_in_convo: 'Hide attachments in conversations',
nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
expand_cw: 'Expand posts with subjects by default',
stop_gifs: 'Play-on-hover GIFs',
autoload: 'Enable automatic loading when scrolled to the bottom',
streaming: 'Enable automatic streaming of new posts when scrolled to the top',

View file

@ -7,6 +7,7 @@ const defaultState = {
hideAttachments: false,
hideAttachmentsInConv: false,
hideNsfw: true,
expandCW: false,
loopVideo: true,
loopVideoSilentOnly: true,
autoLoad: true,