Commit 46482f40 authored by JosephK's avatar JosephK
Browse files

馃拝

parent 95771322
Pipeline #455609 passed with stages
in 1 minute and 11 seconds
<template>
<b-col
class="carousel-container"
cols="12"
>
<b-carousel
id="f-carousel"
ref="f-carousel"
class="mx-0 my-4"
controls
fade
:indicators="false"
:interval="interval"
>
<b-carousel-slide
:caption-html="$t('slides[0]')"
:img-src="`${$t('baseurl')}img/${$t('lang')}/slide-framatalk04.png`"
/>
<b-carousel-slide
:caption-html="$t('slides[1]')"
:img-src="`${$t('baseurl')}img/${$t('lang')}/slide-framatalk02.png`"
/>
<b-carousel-slide
:caption-html="$t('slides[2]')"
:img-src="`${$t('baseurl')}img/${$t('lang')}/slide-framatalk03.png`"
/>
<b-carousel-slide
:caption-html="$t('slides[3]')"
:img-src="`${$t('baseurl')}img/${$t('lang')}/slide-framatalk04.png`"
/>
</b-carousel>
<p
class="text-center play-pause"
>
<button
v-show="interval === 5000"
class="carousel-control"
@click="interval = 0"
>
<svg-icon
:label="$t('carousel.pause')"
name="pause"
size="fw"
sr-only
variant="mt-n1"
/>
</button>
<button
v-show="interval !== 5000"
class="carousel-control"
@click="interval = 5000"
>
<svg-icon
:label="$t('carousel.play')"
name="play"
size="fw"
sr-only
variant="mt-n1"
/>
</button>
</p>
</b-col>
</template>
<script>
export default {
data() {
return {
interval: 5000,
};
},
};
</script>
<template>
<main>
<b-row>
<Carousel />
</b-row>
<b-row>
<b-col
class="mx-auto text-center"
md="8"
>
<b-dropdown
split
:split-href="`${instance.endpoint}${prefix}${name}`"
split-variant="primary"
size="lg"
variant="outline-primary"
offset="-80"
>
<template v-slot:button-content>
<svg-icon name="video" />
<span v-html="$t('public.create')"></span>
<span v-html="$t('public.atalk')"></span>
</template>
<b-dropdown-form
class="px-3"
style="width: 400px"
@submit="create"
>
<b-form-group
label-for="name"
:label="$t('public.link')"
>
<b-input-group
size="sm"
:prepend="`${instance.endpoint}${prefix}`"
>
<b-form-input
id="name"
v-model="name"
type="text"
maxlength="50"
@focusout="name = $t(` ${name}`, '-L@').replace(/[^a-zA-Z0-9]/g, '')"
/>
</b-input-group>
</b-form-group>
<div class="text-right">
<b-button
variant="outline-primary"
size="sm"
@click="anotherInstance()"
>
<svg-icon
name="random"
/>
<span v-html="$t('public.change')"></span>
<span
class="sr-only"
v-html="$t('public.atalk')"
></span>
</b-button>
<b-button
variant="primary"
size="sm"
:href="`${instance.endpoint}${prefix}${name}`"
>
<span v-html="$t('public.create')"></span>
<span
class="sr-only"
v-html="$t('public.atalk')"
></span>
</b-button>
</div>
</b-dropdown-form>
</b-dropdown>
<b-form>
<b-form-group
label-for="name"
class="sr-only"
:label-sr-only="true"
:label="$t('public.name')"
>
<b-input-group
size="lg"
:prepend="`${instance.endpoint}${prefix}`"
>
<b-form-input
id="name"
v-model="name"
type="text"
maxlength="50"
@focusout="name = $t(` ${name}`, '-L@').replace(/[^a-zA-Z0-9]/g, '')"
/>
<b-input-group-append>
<b-button
variant="primary"
type="submit"
@click="create"
>
<svg-icon
name="video"
size="lg"
/>
<span v-html="$t('public.create')"></span>
<span
class="sr-only"
v-html="$t('public.atalk')"
></span>
</b-button>
</b-input-group-append>
</b-input-group>
</b-form-group>
</b-form>
</b-col>
</b-row>
<b-row class="justify-content-md-center mb-4">
<b-col
v-if="!instance.endpoint.includes('framatalk')"
class="mt-2"
lg="6"
md="8"
>
<span
class="text-muted"
v-html="$t('public.external', {
title: instance.title,
website: instance.website
})"
></span>
<span
v-if="instance.chatons"
class="text-muted"
v-html="$t('public.chatons')"
></span>.<br />
<router-link
:to="`/${$t('lang')}/info`"
class="text-muted"
v-html="$t('public.full_list', { nbinstances: nbInstances })"
/>
</b-col>
<b-col
v-else
id="frama_other_message"
class="mt-2"
lg="6"
md="8"
>
<span
class="text-muted"
v-html="$t('public.frama_other')"
></span><br />
<router-link
:to="`/${$t('lang')}/info`"
class="text-muted"
v-html="$t('public.full_list', { nbinstances: nbInstances })"
/>
</b-col>
</b-row>
<b-row>
<b-col
class="py-2"
md="6"
v-html="$t('what.md')"
/>
<b-col
class="py-2"
md="6"
>
<b-alert
show
v-html="$t('tip', {
icon: `<span class='svg-icon'><svg xmlns='http://www.w3.org/2000/svg' class='fa-fw' fill='#677890' viewBox='0 0 576 512'><path d='M336.2 64H47.8A47.8 47.8 0 000 111.8v288.4A47.8 47.8 0 0047.8 448h288.4a47.8 47.8 0 0047.8-47.8V111.8A47.8 47.8 0 00336.2 64zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z'/></svg></span>`
})"
/>
</b-col>
</b-row>
<b-row class="mt-4">
<!-- Help -->
<b-col md="4">
<h2 v-html="$t('help.title')"></h2>
<svg-icon
name="question-circle"
size="3x"
variant="d-block text-center mb-3 fc-g6"
/>
<div
v-html="$t('help.md', {
icon: `<i class='fa fa-info-circle' aria-hidden='true'></i>`
})"
></div>
</b-col>
<!-- About software -->
<b-col md="4">
<h2 v-html="$t('software.title')"></h2>
<svg-icon
name="cloud"
size="3x"
variant="d-block text-center mb-3 fc-g6"
/>
<div v-html="$t('software.md', { link: 'https://meet.jit.si' })"></div>
</b-col>
<!-- Garden -->
<b-col md="4">
<h2 v-html="$t('garden.title')"></h2>
<svg-icon
name="leaf"
size="3x"
variant="d-block text-center mb-3 fc-g6"
/>
<div v-html="$t('garden.md')"></div>
<b-button
:href="`${$t('link.cloud')}/${$t('cloud.talk')}`"
variant="outline-success"
>
<svg-icon
label="framacloud.org"
name="leaf"
/>
</b-button>
</b-col>
</b-row>
</main>
</template>
<script>
import Carousel from '../partials/Carousel.vue';
import instanceStatus from '../../mixins/instanceStatus';
const DEFAULT_WEIGHT = 2;
export default {
components: {
Carousel,
},
mixins: [instanceStatus],
data() {
/* Random alphanumeric name with 10 chars */
const name = [...Array(10)].map(() => Math.random().toString(36)[3]).join('')
.replace(/(.|$)/g, c => c[!Math.round(Math.random()) ? 'toString' : 'toLowerCase']());
return {
prefix: Math.trunc(new Date().getTime() / 3600000).toString(36),
status: {},
name,
instance: this.$t('instances.framatalk'),
instances: this.$t('instances'),
};
},
computed: {
nbInstances() {
return Object.keys(this.instances).length;
},
},
async mounted() {
this.status = await (await fetch('https://framatalk.org/accueil/instances_check.json')).json();
this.anotherInstance();
while (this.keyForEndpoint(this.instance.endpoint) in this.status.failed) {
this.anotherInstance();
}
},
methods: {
create(event) {
event.preventDefault();
this.name = this.$t(this.name, '-kL@').replace(/[^a-zA-Z0-9]/g, '');
window.location = `${this.instance}${this.prefix}${this.name}`;
},
randomInstance() {
const remoteInstancesSelected = Object.entries(this.instances)
.filter(([, value]) => (!(value.trust === false)))
.map(([key, instance]) => [key, (instance.weight || DEFAULT_WEIGHT)]);
return this.instances[this.weightedRand(remoteInstancesSelected)];
},
weightedRand(data) {
// First, we loop the main dataset to count up the total weight.
// We're starting the counter at one because the upper boundary of Math.random() is exclusive.
let total = 1;
for (let i = 0; i < data.length; i += 1) {
total += data[i][1];
}
// Total in hand, we can now pick a random value akin to our
// random index from before.
const threshold = Math.floor(Math.random() * total);
// Now we just need to loop through the main data one more time
// until we discover which value would live within this
// particular threshold. We need to keep a running count of
// weights as we go, so let's just reuse the "total" variable
// since it was already declared.
total = 0;
for (let i = 0; i < data.length; i += 1) {
// Add the weight to our running total.
total += data[i][1];
// If this value falls within the threshold, we're done!
if (total >= threshold) {
return data[i][0];
}
}
// Should never happen
return data[0][0];
},
anotherInstance() {
let newInstance = this.instance;
while (newInstance === this.instance) {
newInstance = this.randomInstance();
}
this.instance = newInstance;
},
},
};
</script>
......@@ -42,7 +42,7 @@
:split-href="`${instance.endpoint}${name}${suffix}`"
split-variant="primary"
size="lg"
variant="primary"
variant="light"
offset="-2"
>
<template v-slot:button-content>
......@@ -345,22 +345,20 @@ export default {
}
#learn-more {
text-align: center;
label {
color: var(--f-g8);
background: none;
text-decoration: none;
}
span {
background: linear-gradient(180deg,#0000,#fff4,#0000);
border-radius: 1rem;
padding: .25rem ;
font-size: .875rem;
}
span {
background: linear-gradient(180deg,#0000,#fff4,#0000);
border-radius: 1rem;
padding: .25rem ;
font-size: .875rem;
}
#btn-learn-more:checked ~ label {
input:checked ~ label {
visibility: hidden;
}
}
......@@ -419,6 +417,10 @@ export default {
i.fas {
margin-right: .25rem;
}
&.dropdown-toggle {
max-width: 2.5rem;
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment