Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 12e5befd42 | |||
| 2cc2862503 | |||
| 56f1255078 | |||
| 7273e998ae | |||
| 11de8e4265 | |||
| 9a2c9bae86 | |||
| 43bbc053eb | |||
| ace3588b8c | |||
| c346673bd9 | |||
| 1ec359f546 | |||
| 5507942029 | |||
| 72a96a7d6c |
@@ -0,0 +1,112 @@
|
|||||||
|
/*=============Typo*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'lineal';
|
||||||
|
src: url('../typo/Lineal-Heavy.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'pressStart2P';
|
||||||
|
src: url('../typo/PressStart2P-Regular.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
src: url('../typo/Velvelyne-Light.ttf') format('truetype');
|
||||||
|
font-weight:lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'velvelyne';
|
||||||
|
src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============General*/
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--back-color: black;
|
||||||
|
--main-color: white;
|
||||||
|
--accent-color: #3CFF00;
|
||||||
|
--neon-color: #3CFF00;
|
||||||
|
|
||||||
|
color: var(--main-color);
|
||||||
|
font-size: 1rem;
|
||||||
|
background: var(--back-color);
|
||||||
|
font-family: 'velvelyne', sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > *{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===================Animation*/
|
||||||
|
@keyframes blink {
|
||||||
|
0% { color: var(--accent-color);}
|
||||||
|
15% { color: var(--main-color);}
|
||||||
|
35% { color: var(--main-color);}
|
||||||
|
50% { color: var(--accent-color);}
|
||||||
|
65% { color: var(--main-color);}
|
||||||
|
85% { color: var(--main-color);}
|
||||||
|
100% { color: var(--accent-color);}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===================Layout*/
|
||||||
|
#welcome-panel {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#welcome-panel strong{
|
||||||
|
font-family:'lineal';
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 22.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'lineal', sans-serif;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-family: 'pressStart2P';
|
||||||
|
font-size: 13.12px;
|
||||||
|
font-weight: normal;
|
||||||
|
animation: blink 1.61s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ui-canvas {
|
||||||
|
display: block;
|
||||||
|
height: 1350px;
|
||||||
|
width: 1080px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cutter-panel{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 3.33px;
|
||||||
|
margin-top: 13.12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#download{
|
||||||
|
margin: 7.77px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,47 @@
|
|||||||
|
const FORM = document.getElementById("cutter-form")
|
||||||
|
const BUTTON = document.getElementById("download")
|
||||||
|
const IMAGE = new Image()
|
||||||
|
let rowCount
|
||||||
|
let maxCount
|
||||||
|
|
||||||
|
FORM.addEventListener("submit", e => {
|
||||||
|
e.preventDefault()
|
||||||
|
const data = new FormData(FORM)
|
||||||
|
IMAGE.src = URL.createObjectURL(data.get('image'))
|
||||||
|
rowCount = data.get('rows')
|
||||||
|
console.log('ça marche :', data)
|
||||||
|
})
|
||||||
|
|
||||||
|
IMAGE.addEventListener('load', e => {
|
||||||
|
document.getElementById('cutter-panel').replaceChildren()
|
||||||
|
for(let i = 0; i<rowCount; i++){
|
||||||
|
for (let j = 0; j<3; j++){
|
||||||
|
let e = document.createElement('canvas')
|
||||||
|
e.width = 1080
|
||||||
|
e.height = 1350
|
||||||
|
let context = e.getContext('2d')
|
||||||
|
context.fillStyle = 'black'
|
||||||
|
context.drawImage(IMAGE,
|
||||||
|
j*(1080*0.94), i*1350,
|
||||||
|
1080*0.94, 1350,
|
||||||
|
1080*0.03, 0,
|
||||||
|
1080*0.94, 1350
|
||||||
|
)
|
||||||
|
document.getElementById('cutter-panel').append(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
BUTTON.addEventListener('click', e => {
|
||||||
|
let imgList = document.querySelectorAll('canvas')
|
||||||
|
maxCount = imgList.length
|
||||||
|
for (let [i, img] of imgList.entries()){
|
||||||
|
img.toBlob(b => {
|
||||||
|
let aEl = document.createElement('a')
|
||||||
|
let index = maxCount - i
|
||||||
|
aEl.href = URL.createObjectURL(b)
|
||||||
|
aEl.download = 'img-' + index + '.jpg'
|
||||||
|
aEl.click()
|
||||||
|
},'image/jpeg',1)
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="cutter.css">
|
||||||
|
<title>Insta Ninja</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form id="cutter-form">
|
||||||
|
<div id="welcome-panel">
|
||||||
|
<h1>Insta Ninja</h1>
|
||||||
|
<h2>Séléctionne un photo pour la découper<br>en une grille au format du feed insta<br></h2>
|
||||||
|
<p><strong>Attention :</strong> pour un permettre le bon affichage de la miniature sur le feed,<br>
|
||||||
|
il faut que <strong>la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px</strong><br><br>
|
||||||
|
Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu<br><br>
|
||||||
|
Ex : pour 6 post, soit <strong>2 lignes sur les 3 colonnes</strong> qui sont imposées par insta<br>
|
||||||
|
il faut que le format de l'image que tu crée soit <strong>3045 px de large par 2700 px de haut</strong></p>
|
||||||
|
<input type="number" name="rows" value="2" min="1">
|
||||||
|
<input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
|
||||||
|
<button>Cut !</button>
|
||||||
|
</div>
|
||||||
|
<div id="cutter-panel">
|
||||||
|
</div>
|
||||||
|
<button id="download">Télécharger !</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script type="module" src="cutter.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+3
-3
@@ -1769,9 +1769,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vite": {
|
"node_modules/vite": {
|
||||||
"version": "7.3.1",
|
"version": "7.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
|
||||||
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
|
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
[
|
[
|
||||||
"vga_nar6_ta"
|
"vga_nar6_ta",
|
||||||
|
"openup42",
|
||||||
|
"berthasse",
|
||||||
|
"arlsn",
|
||||||
|
"djstarheartzzz",
|
||||||
|
"openup42"
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -6,5 +6,25 @@
|
|||||||
{
|
{
|
||||||
"name": "drags_nerds",
|
"name": "drags_nerds",
|
||||||
"folder": 2
|
"folder": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "berthasse",
|
||||||
|
"folder": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "berthasse",
|
||||||
|
"folder": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "arlsn",
|
||||||
|
"folder": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "djstarheartzzz",
|
||||||
|
"folder": 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "openup42",
|
||||||
|
"folder": 1
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -91,7 +91,6 @@ a button{
|
|||||||
}
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
pointer-events: none;
|
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,6 +135,7 @@ html, body{
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
|
filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
transition: 7.77s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
#canvas .overlay {
|
#canvas .overlay {
|
||||||
@@ -300,11 +300,16 @@ html, body{
|
|||||||
}
|
}
|
||||||
|
|
||||||
.zFocus{
|
.zFocus{
|
||||||
|
z-index: revert;
|
||||||
z-index: 1312;
|
z-index: 1312;
|
||||||
border-color: var(--accent-color);
|
border-color: var(--accent-color);
|
||||||
border-width: thick;
|
border-width: thick;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#artistPannel.zFocus{
|
||||||
|
z-index: 3333;
|
||||||
|
}
|
||||||
|
|
||||||
.windowTitle{
|
.windowTitle{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:50px;
|
height:50px;
|
||||||
@@ -359,3 +364,38 @@ html, body{
|
|||||||
.moveable-control-box {
|
.moveable-control-box {
|
||||||
display: none !important;
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -10,10 +10,12 @@ function idAndDate(str){
|
|||||||
function titleAndContent(str){
|
function titleAndContent(str){
|
||||||
let data = str.split(" :");
|
let data = str.split(" :");
|
||||||
let title = "NO_TITLE";
|
let title = "NO_TITLE";
|
||||||
|
let contentData = [""];
|
||||||
if (data.length > 1){
|
if (data.length > 1){
|
||||||
title = data[0];
|
title = data[0];
|
||||||
|
} else {
|
||||||
|
contentData = data[0].split('<br>').filter(e => e);
|
||||||
}
|
}
|
||||||
let contentData = [""];
|
|
||||||
if (data[1]){
|
if (data[1]){
|
||||||
contentData = data[1].split('<br>').filter(e => e);
|
contentData = data[1].split('<br>').filter(e => e);
|
||||||
}
|
}
|
||||||
@@ -22,7 +24,7 @@ function titleAndContent(str){
|
|||||||
for(let line of contentData){
|
for(let line of contentData){
|
||||||
if(line.includes('http')||line.includes('@')){
|
if(line.includes('http')||line.includes('@')){
|
||||||
let linkData = line.split("# ");
|
let linkData = line.split("# ");
|
||||||
console.log(linkData[1]);
|
//console.log(linkData[1]);
|
||||||
let linkNoFormat;
|
let linkNoFormat;
|
||||||
let url = "";
|
let url = "";
|
||||||
if (linkData[1].includes('http')){
|
if (linkData[1].includes('http')){
|
||||||
@@ -31,7 +33,7 @@ function titleAndContent(str){
|
|||||||
} else if (linkData[1].includes('@')){
|
} else if (linkData[1].includes('@')){
|
||||||
url = 'mailto:' + linkData[1];
|
url = 'mailto:' + linkData[1];
|
||||||
}
|
}
|
||||||
console.log("url info", url)
|
//console.log("url info", url)
|
||||||
src.push({
|
src.push({
|
||||||
caption: linkData[0],
|
caption: linkData[0],
|
||||||
url: url
|
url: url
|
||||||
@@ -87,7 +89,14 @@ export async function loadPeopleData() {
|
|||||||
for (const user of pData){
|
for (const user of pData){
|
||||||
const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
|
const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
|
||||||
if (pouet){
|
if (pouet){
|
||||||
description[user.name] = pouet.account.note;
|
let descData = pouet.account.note.split('<br>').filter(e => e);
|
||||||
|
if(descData.length > 0){
|
||||||
|
for (let line of descData){
|
||||||
|
description[user.name] += '\n' + line;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
description[user.name] = 'NO DESCRIPTION'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -129,7 +138,7 @@ export async function loadPeopleData() {
|
|||||||
dateInfo: selectedPouet.created_at,
|
dateInfo: selectedPouet.created_at,
|
||||||
type: "link",
|
type: "link",
|
||||||
author: displayName,
|
author: displayName,
|
||||||
caption: textInfos.title + '.liens',
|
caption: textInfos.title + '.plus',
|
||||||
links: textInfos.links,
|
links: textInfos.links,
|
||||||
description: textInfos.content,
|
description: textInfos.content,
|
||||||
isSelected: false
|
isSelected: false
|
||||||
|
|||||||
@@ -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 ImgIcon from '../assets/icons/img.svg'
|
||||||
import LinkIcon from '../assets/icons/link.svg'
|
import LinkIcon from '../assets/icons/link.svg'
|
||||||
import BackIcon from '../assets/icons/back.svg'
|
import BackIcon from '../assets/icons/back.svg'
|
||||||
import { loadPeopleData } from '@/data/peopleData.js'
|
import {loadPostData} from '@/data/postData.js'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -36,20 +36,20 @@
|
|||||||
<p id="emptyFolderText" v-show="emptyFolder">Oopsi! Il n'y a rien à afficher ici<br>(pour l'instant...)</p>
|
<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 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)">
|
<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>
|
<p class="itemCaption">{{item.caption}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="listDisplay" class="nevrEndingList" @mousedown.stop @reload="dataFirstLoad" @click="deselectAll" touchstart="deselectAll">
|
<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)">
|
<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="listTitle">{{item.caption}}</p>
|
||||||
<p class="itemCaption" id="listAuthor">{{item.author}}</p>
|
<p class="itemCaption" id="listAuthor">{{item.author}}</p>
|
||||||
<p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
|
<p class="itemCaption" id="listDate"><time :timedate="item.dateInfo">{{item.date}}</time></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
|
<div v-show="displayedItems" class="itemDesc" @touchstart.stop @click.stop>
|
||||||
<p>{{displayedDescription}}</p>
|
<p id="descText" ref="description">{{displayedDescription}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
#artistPannel{
|
#artistPannel{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 420px;
|
width: 420px;
|
||||||
height: 600px;
|
height: auto;
|
||||||
top: 16.1px;
|
top: 16.1px;
|
||||||
left: 16.1px;
|
left: 16.1px;
|
||||||
z-index: 33;
|
z-index: 33;
|
||||||
@@ -80,7 +80,7 @@
|
|||||||
|
|
||||||
#artistContent{
|
#artistContent{
|
||||||
width:100%;
|
width:100%;
|
||||||
height:87%;
|
height:100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -127,7 +127,7 @@
|
|||||||
grid-auto-rows: 150px;
|
grid-auto-rows: 150px;
|
||||||
gap: 16.1px;
|
gap: 16.1px;
|
||||||
width: 97%;
|
width: 97%;
|
||||||
height: 66%;
|
height: 333px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
@@ -137,12 +137,14 @@
|
|||||||
|
|
||||||
.itemDesc{
|
.itemDesc{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 23%;
|
height: 161px;
|
||||||
border-radius: 16.1px;
|
border-radius: 16.1px;
|
||||||
border-color: var(--main-color);
|
border-color: var(--main-color);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: thin;
|
border-width: thin;
|
||||||
margin-top: 2%;
|
margin-top: 2%;
|
||||||
|
margin-bottom: 13.12px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
color: var(--main-color);
|
color: var(--main-color);
|
||||||
font-family: 'velvelyne';
|
font-family: 'velvelyne';
|
||||||
@@ -241,7 +243,7 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
height: 66%;
|
height: 444px;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding-right: 7.77px;
|
padding-right: 7.77px;
|
||||||
@@ -251,6 +253,8 @@
|
|||||||
width:100%;
|
width:100%;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@@ -378,36 +382,28 @@
|
|||||||
if(e.type === 'image'){
|
if(e.type === 'image'){
|
||||||
this.$emit('openImg');
|
this.$emit('openImg');
|
||||||
dataStorage.selectedImg = {
|
dataStorage.selectedImg = {
|
||||||
src: e.src,
|
src: e.imgSrc,
|
||||||
caption: e.caption,
|
caption: e.caption,
|
||||||
like: e.like,
|
like: e.like,
|
||||||
alt: e.alt,
|
|
||||||
isLiked: e.isLiked
|
isLiked: e.isLiked
|
||||||
}
|
}
|
||||||
this.displayedDescription = e.description;
|
this.$refs.description.innerHTML = e.content
|
||||||
}
|
|
||||||
if (e.type === 'link'){
|
|
||||||
this.$emit('openLink');
|
|
||||||
dataStorage.selectedLink = {
|
|
||||||
linksData: e.links,
|
|
||||||
caption: e.caption,
|
|
||||||
description: e.description
|
|
||||||
}
|
|
||||||
console.log(dataStorage.selectedLink);
|
|
||||||
}
|
}
|
||||||
if(e.type === 'video'){
|
if(e.type === 'video'){
|
||||||
this.$emit('openVideo');
|
this.$emit('openVideo');
|
||||||
dataStorage.selectedVideo = {
|
dataStorage.selectedVideo = {
|
||||||
src: e.src,
|
src: e.videoSrc,
|
||||||
caption: e.caption,
|
caption: e.caption,
|
||||||
like: e.like,
|
like: e.like,
|
||||||
alt: e.alt,
|
alt: e.alt,
|
||||||
format: e.format,
|
format: e.format,
|
||||||
isLiked: e.isLiked
|
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);
|
this.selectFile(e);
|
||||||
|
|
||||||
},
|
},
|
||||||
@@ -418,7 +414,10 @@
|
|||||||
it.isSelected = false;
|
it.isSelected = false;
|
||||||
})}
|
})}
|
||||||
e.isSelected = true;
|
e.isSelected = true;
|
||||||
|
if (e.description){
|
||||||
|
this.$refs.description.innerHTML = '{{displayedDescription}}'
|
||||||
this.displayedDescription = e.description;
|
this.displayedDescription = e.description;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
itemIsClicked(e){
|
itemIsClicked(e){
|
||||||
if (!this.dblClickTimer || this.lastClickedItem !== e){
|
if (!this.dblClickTimer || this.lastClickedItem !== e){
|
||||||
@@ -474,7 +473,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted(){
|
async mounted(){
|
||||||
this.linksData = await loadPeopleData();
|
this.linksData = await loadPostData();
|
||||||
this.target = this.$refs.artistPannel;
|
this.target = this.$refs.artistPannel;
|
||||||
this.dataFirstLoad();
|
this.dataFirstLoad();
|
||||||
console.log("Artist pannel is loaded!");
|
console.log("Artist pannel is loaded!");
|
||||||
|
|||||||
@@ -23,10 +23,10 @@
|
|||||||
<div id="contactText">
|
<div id="contactText">
|
||||||
<p>Si tu veux nous contacter directement, tu peux:<br> - nous envoyer un mail<br> - ou un DM sur insta</p>
|
<p>Si tu veux nous contacter directement, tu peux:<br> - nous envoyer un mail<br> - ou un DM sur insta</p>
|
||||||
</div>
|
</div>
|
||||||
<a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop>
|
<a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
|
||||||
E-MAIL
|
E-MAIL
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop>
|
<a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
|
||||||
INSTA
|
INSTA
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -20,11 +20,14 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="windowContent">
|
<div class="windowContent">
|
||||||
<p>On a besoin de ton aide ! <br><br> Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
|
<p>
|
||||||
|
Aujourd’hui, nous avons besoin<br>d’un coup de pouce pour<br>notre show du 22 mai.<br><br>
|
||||||
|
Cette cagnotte a pour objectif de financer<br>la rémunération des artistes drag et nerd participant·es, de soutenir le travail<br>de l’équipe l’orga, ainsi que d’investir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus d’événements à l’avenir !<br><br>
|
||||||
|
Chaque don compte, vraiment.<br><br>
|
||||||
|
Merci du fond du cœur à tous·tes cell·eux qui prendront le temps de lire, de partager<br>et, bien sûr, de participer !
|
||||||
|
</p>
|
||||||
<div id="linkRow">
|
<div id="linkRow">
|
||||||
<a href="#" class="textBtnStyle">Lydia</a>
|
<a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
|
||||||
<a href="#" class="textBtnStyle">Paypal</a>
|
|
||||||
<a href="#" class="textBtnStyle">SumUp</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,7 +79,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#linkRow .textBtnStyle{
|
#linkRow .textBtnStyle{
|
||||||
width: 27%;
|
width: 77.7%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
margin-bottom: 16.1px;
|
margin-bottom: 16.1px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -104,7 +104,7 @@
|
|||||||
emits: ['close','focus'],
|
emits: ['close','focus'],
|
||||||
computed: {
|
computed: {
|
||||||
selectedLink(){
|
selectedLink(){
|
||||||
console.log(this.selectedLink);
|
//console.log(this.selectedLink);
|
||||||
return dataStorage.selectedLink
|
return dataStorage.selectedLink
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -21,7 +21,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="windowContent" id="visualizerContent">
|
<div class="windowContent" id="visualizerContent">
|
||||||
<video controls id="displayedImgStyle" :src="selectedVideo.src"></video>
|
<video controls id="displayedImgStyle" :src="selectedVideo.src" :type="selectedVideo.format">
|
||||||
|
</video>
|
||||||
<div class="reactBar">
|
<div class="reactBar">
|
||||||
<p class="reactStatStyle">{{selectedVideo.like}}</p>
|
<p class="reactStatStyle">{{selectedVideo.like}}</p>
|
||||||
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
|
<button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
si tu as envie de participer !
|
si tu as envie de participer !
|
||||||
</p>
|
</p>
|
||||||
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
|
<button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
|
||||||
<button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
|
<button type="button" class="textBtnStyle" @click="openPannel('donation')">NOUS FAIRE UNE DONATION</button>
|
||||||
<button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
|
<button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="btnColumn">
|
<div id="btnColumn">
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ export default defineConfig({
|
|||||||
input: {
|
input: {
|
||||||
main: path.resolve(import.meta.dirname, 'index.html'),
|
main: path.resolve(import.meta.dirname, 'index.html'),
|
||||||
glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
|
glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
|
||||||
|
cutter: path.resolve(import.meta.dirname, 'cutter/index.html')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user