edit: post mastodon V2 en mode plus flexible (v0 un peu schlag mais ça marche x333)
This commit is contained in:
@@ -91,7 +91,6 @@ a button{
|
||||
}
|
||||
|
||||
p{
|
||||
pointer-events: none;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
@@ -365,3 +364,38 @@ html, body{
|
||||
.moveable-control-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*===========================For some fckn reason lien en description artist pannel*/
|
||||
|
||||
.itemDesc p a{
|
||||
display: block;
|
||||
pointer-events: all;
|
||||
background-color: var(--back-color);
|
||||
color: var(--main-color);
|
||||
font-size: 13.12px;
|
||||
font-family: 'lineal';
|
||||
border-color: var(--main-color);
|
||||
border-width: thin;
|
||||
border-style: solid;
|
||||
border-radius: 16.1px;
|
||||
|
||||
width: 161px;
|
||||
height: 16.1px;
|
||||
padding: 7.77px;
|
||||
margin-bottom: 0;
|
||||
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.itemDesc p a#text{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.itemDesc p a:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
function idAndType(obj){
|
||||
let data = obj.dateInfo.split('T')
|
||||
let keyData = data[1].split('.')[0].split(':')
|
||||
let uniqueKey = keyData[1] + keyData[2]
|
||||
let id = obj.author + uniqueKey
|
||||
//type : post, video, images
|
||||
if (obj.videoSrc){
|
||||
obj.type = "video"
|
||||
id += ".video"
|
||||
}else if(obj.imgSrc){
|
||||
obj.type = "image"
|
||||
id += ".image"
|
||||
}else {
|
||||
obj.type = "post"
|
||||
id += ".post"
|
||||
}
|
||||
obj.caption = id
|
||||
}
|
||||
|
||||
|
||||
export async function loadPostData(){
|
||||
//liste des utilisateurice
|
||||
const usernamesRes = await fetch('/DATA/peopleData.json');
|
||||
const pData = await usernamesRes.json();
|
||||
//console.log("USERS :", pData);
|
||||
const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
|
||||
if (!res.ok)
|
||||
throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
||||
const pouets = await res.json();
|
||||
//console.log("POUETS :" , pouets);
|
||||
const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name || p.reblog?.account.username === user.name));
|
||||
console.log("FILTERED :" , filtered);
|
||||
//création des dossiers
|
||||
const files = {};
|
||||
for (const user of pData) {
|
||||
files[user.name] = [];
|
||||
}
|
||||
//console.log(files)
|
||||
//récupérationn des descriptions/bio
|
||||
const description = {};
|
||||
for (const user of pData){
|
||||
const pouet = filtered.find(p => p.account.username === user.name);
|
||||
if(pouet?.account.note){
|
||||
let data = pouet.account.note.split('<br>').filter(e => e)
|
||||
let bio = "";
|
||||
for (let line of data){
|
||||
bio += line + '\n'
|
||||
}
|
||||
description[user.name] = bio
|
||||
} else {
|
||||
description[user.name] = 'NO DESCRIPTION'
|
||||
}
|
||||
}
|
||||
|
||||
//formattage des posts
|
||||
for (const pouet of filtered){
|
||||
let selectedPouet;
|
||||
//si reblog chercher post origine
|
||||
if(pouet.reblog){
|
||||
selectedPouet = pouet.reblog;
|
||||
} else {
|
||||
selectedPouet = pouet;
|
||||
}
|
||||
//console.log(selectedPouet);
|
||||
const username = selectedPouet.account.username;
|
||||
const displayName = selectedPouet.account.display_name;
|
||||
let date = selectedPouet.created_at;
|
||||
let entry;
|
||||
|
||||
//ignorer réponses
|
||||
if (selectedPouet.in_reply_to_account_id) {
|
||||
continue;
|
||||
}
|
||||
//ignorer audio dans cette section
|
||||
if (selectedPouet.media_attachments?.length > 0 &&selectedPouet.media_attachments[0].type.includes('audio')){
|
||||
continue
|
||||
}
|
||||
|
||||
// on commence par le texte du post
|
||||
entry = {
|
||||
type: "",
|
||||
caption : "",
|
||||
content : selectedPouet.content,
|
||||
imgSrc : null,
|
||||
videoSrc : null,
|
||||
author : displayName,
|
||||
dateInfo : date,
|
||||
like : selectedPouet.favourites_count,
|
||||
isSelected: false
|
||||
}
|
||||
|
||||
if (selectedPouet.media_attachments?.length > 0){
|
||||
if (selectedPouet.media_attachments[0].type.includes('video')){
|
||||
entry.videoSrc = selectedPouet.media_attachments[0].url
|
||||
} else if (selectedPouet.media_attachments[0].type.includes('image')){
|
||||
entry.imgSrc = selectedPouet.media_attachments[0].url
|
||||
}
|
||||
}
|
||||
//create id for title and unique name
|
||||
idAndType(entry);
|
||||
//console.log(entry);
|
||||
//add to folder
|
||||
files[username].push(entry);
|
||||
}
|
||||
//tri des post
|
||||
const dragContent = pData.filter(user => user.folder === 0).map(user => (
|
||||
{
|
||||
type: "folder",
|
||||
caption: user.name + '.info',
|
||||
children: files[user.name],
|
||||
description: description[user.name],
|
||||
isSelected: false
|
||||
}));
|
||||
const nerdContent = pData.filter(user => user.folder === 1).map(user => (
|
||||
{
|
||||
type: "folder",
|
||||
caption: user.name + '.info',
|
||||
children: files[user.name],
|
||||
description: description[user.name],
|
||||
isSelected: false
|
||||
}));
|
||||
|
||||
const otherContent = pData.filter(user => user.folder === 2).flatMap(user => files[user.name]);
|
||||
//dossier final
|
||||
const sortedContent = [
|
||||
{
|
||||
type: "folder",
|
||||
caption : "Artistes Drags",
|
||||
description:"Pour en savoir plus sur nos artistes drags, c'est par ici !",
|
||||
children: dragContent,
|
||||
isSelected: false
|
||||
},
|
||||
{
|
||||
type: "folder",
|
||||
caption : "Artistes Nerds",
|
||||
description:"Pour en savoir plus sur nos artistes nerds, c'est par là !",
|
||||
children: nerdContent,
|
||||
isSelected: false
|
||||
},
|
||||
{
|
||||
type: "folder",
|
||||
caption : "Autres contenus",
|
||||
description:"Dans cette section, on place pleins de contenu, en vrac, \n sur nous, nos copaines, des trucs qu'on trouve cool, etc.",
|
||||
children: otherContent,
|
||||
isSelected: false
|
||||
}
|
||||
];
|
||||
return sortedContent;
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
import ImgIcon from '../assets/icons/img.svg'
|
||||
import LinkIcon from '../assets/icons/link.svg'
|
||||
import BackIcon from '../assets/icons/back.svg'
|
||||
import { loadPeopleData } from '@/data/peopleData.js'
|
||||
import {loadPostData} from '@/data/postData.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -36,20 +36,20 @@
|
||||
<p id="emptyFolderText" v-show="emptyFolder">Oopsi! Il n'y a rien à afficher ici<br>(pour l'instant...)</p>
|
||||
<div v-show="gridDisplay" class="theMatrix" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
|
||||
<div class="itemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
|
||||
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
|
||||
<component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : ImgIcon" class="icon"/>
|
||||
<p class="itemCaption">{{item.caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
|
||||
<div class="listItemStyle" v-for="item in displayedItems" :class="{selectedItemStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.id" @click.stop="openFile(item)" @touchstart="openFile(item)">
|
||||
<component :is="item.type==='folder'? FolderIcon : item.type === 'text'? TextIcon : item.type === 'link'? LinkIcon : ImgIcon" class="icon"/>
|
||||
<component :is="item.type==='folder'? FolderIcon : item.type === 'post'? TextIcon : ImgIcon" class="icon"/>
|
||||
<p class="itemCaption" id="listTitle">{{item.caption}}</p>
|
||||
<p class="itemCaption" id="listAuthor">{{item.author}}</p>
|
||||
<p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
|
||||
<p>{{displayedDescription}}</p>
|
||||
<p id="descText" ref="description">{{displayedDescription}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@
|
||||
#artistPannel{
|
||||
position: fixed;
|
||||
width: 420px;
|
||||
height: 600px;
|
||||
height: auto;
|
||||
top: 16.1px;
|
||||
left: 16.1px;
|
||||
z-index: 33;
|
||||
@@ -80,7 +80,7 @@
|
||||
|
||||
#artistContent{
|
||||
width:100%;
|
||||
height:87%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -127,7 +127,7 @@
|
||||
grid-auto-rows: 150px;
|
||||
gap: 16.1px;
|
||||
width: 97%;
|
||||
height: 66%;
|
||||
height: 333px;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
@@ -137,12 +137,14 @@
|
||||
|
||||
.itemDesc{
|
||||
width: 90%;
|
||||
height: 23%;
|
||||
height: 161px;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
margin-top: 2%;
|
||||
margin-bottom: 13.12px;
|
||||
overflow-y: scroll;
|
||||
|
||||
color: var(--main-color);
|
||||
font-family: 'velvelyne';
|
||||
@@ -241,7 +243,7 @@
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
height: 66%;
|
||||
height: 444px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 7.77px;
|
||||
@@ -251,6 +253,8 @@
|
||||
width:100%;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
@@ -378,36 +382,28 @@
|
||||
if(e.type === 'image'){
|
||||
this.$emit('openImg');
|
||||
dataStorage.selectedImg = {
|
||||
src: e.src,
|
||||
src: e.imgSrc,
|
||||
caption: e.caption,
|
||||
like: e.like,
|
||||
alt: e.alt,
|
||||
isLiked: e.isLiked
|
||||
}
|
||||
this.displayedDescription = e.description;
|
||||
}
|
||||
if (e.type === 'link'){
|
||||
this.$emit('openLink');
|
||||
dataStorage.selectedLink = {
|
||||
linksData: e.links,
|
||||
caption: e.caption,
|
||||
description: e.description
|
||||
}
|
||||
console.log(dataStorage.selectedLink);
|
||||
this.$refs.description.innerHTML = e.content
|
||||
}
|
||||
if(e.type === 'video'){
|
||||
this.$emit('openVideo');
|
||||
dataStorage.selectedVideo = {
|
||||
src: e.src,
|
||||
src: e.videoSrc,
|
||||
caption: e.caption,
|
||||
like: e.like,
|
||||
alt: e.alt,
|
||||
format: e.format,
|
||||
isLiked: e.isLiked
|
||||
}
|
||||
this.displayedDescription = e.description;
|
||||
this.$refs.description.innerHTML = e.content
|
||||
}
|
||||
if (e.type === 'post'){
|
||||
this.$refs.description.innerHTML = e.content
|
||||
}
|
||||
|
||||
this.selectFile(e);
|
||||
|
||||
},
|
||||
@@ -418,7 +414,10 @@
|
||||
it.isSelected = false;
|
||||
})}
|
||||
e.isSelected = true;
|
||||
this.displayedDescription = e.description;
|
||||
if (e.description){
|
||||
this.$refs.description.innerHTML = '{{displayedDescription}}'
|
||||
this.displayedDescription = e.description;
|
||||
}
|
||||
},
|
||||
itemIsClicked(e){
|
||||
if (!this.dblClickTimer || this.lastClickedItem !== e){
|
||||
@@ -474,7 +473,7 @@
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
this.linksData = await loadPeopleData();
|
||||
this.linksData = await loadPostData();
|
||||
this.target = this.$refs.artistPannel;
|
||||
this.dataFirstLoad();
|
||||
console.log("Artist pannel is loaded!");
|
||||
|
||||
Reference in New Issue
Block a user