-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (183 loc) · 9.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<html>
<head>
<meta charset="UTF-8">
<title>Code2Slide</title>
<meta name="description" content="">
<meta name="keywords" content="codigo, slide, programção">
<meta name="author" content="Luis Araujo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</style>
</head>
<body>
<header class="bg-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="">
</a>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">Setting <span aria-hidden="true">→</span></a>
</div>
</nav>
</header>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-bold tracking-tight text-black sm:text-6xl">Code2Slide</h2>
<p class="mt-0 mb-6 text-lg leading-8 text-gray-500">A Simple tanslate code to slide. Use comments to create slides for your classes.</p>
</div>
</div>
<!-- component -->
<div class="bg-white p7 rounded w-9/12 h-2/4 mx-auto">
<div x-data="dataFileDnD()" class="relative h-full flex flex-col p-4 text-gray-400 border border-gray-200 rounded">
<div x-ref="dnd"
class="relative h-full flex flex-col text-gray-400 border border-gray-200 border-dashed rounded cursor-pointer">
<input accept="*" type="file" multiple
class="absolute inset-0 z-50 w-full p-0 m-0 outline-none opacity-0 cursor-pointer"
@change="addFiles($event)"
@dragover="$refs.dnd.classList.add('border-blue-400'); $refs.dnd.classList.add('ring-4'); $refs.dnd.classList.add('ring-inset');"
@dragleave="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
@drop="$refs.dnd.classList.remove('border-blue-400'); $refs.dnd.classList.remove('ring-4'); $refs.dnd.classList.remove('ring-inset');"
title="" />
<div class="flex h-full flex-col items-center justify-center py-10 text-center">
<svg class="w-6 h-6 mr-1 text-current-50" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p class="m-0">Drag your files here or click in this area.</p>
</div>
</div>
<template x-if="files.length > 0">
<div class="grid grid-cols-2 gap-4 md:grid-cols-6" @drop.prevent="drop($event)"
@dragover.prevent="$event.dataTransfer.dropEffect = 'move'">
<template x-for="(_, index) in Array.from({ length: files.length })">
<div class="relative flex flex-col items-center overflow-hidden text-center bg-gray-100 border rounded cursor-move select-none"
style="padding-top: 100%;" @dragstart="dragstart($event)" @dragend="fileDragging = null"
:class="{'border-blue-600': fileDragging == index}" draggable="true" :data-index="index">
<button class="absolute top-0 right-0 z-50 p-1 bg-white rounded-bl focus:outline-none" type="button" @click="remove(index)">
<svg class="w-4 h-4 text-gray-700" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
<template x-if="files[index].type.includes('audio/')">
<svg class="absolute w-12 h-12 text-gray-400 transform top-1/2 -translate-y-2/3"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
</template>
<template x-if="files[index].type.includes('application/') || files[index].type === ''">
<svg class="absolute w-12 h-12 text-gray-400 transform top-1/2 -translate-y-2/3"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</template>
<template x-if="files[index].type.includes('image/')">
<img class="absolute inset-0 z-0 object-cover w-full h-full border-4 border-white preview"
x-bind:src="loadFile(files[index])" />
</template>
<template x-if="files[index].type.includes('video/')">
<video
class="absolute inset-0 object-cover w-full h-full border-4 border-white pointer-events-none preview">
<fileDragging x-bind:src="loadFile(files[index])" type="video/mp4">
</video>
</template>
<div class="absolute bottom-0 left-0 right-0 flex flex-col p-2 text-xs bg-white bg-opacity-50">
<span class="w-full font-bold text-gray-900 truncate"
x-text="files[index].name">Loading</span>
<span class="text-xs text-gray-900" x-text="humanFileSize(files[index].size)">...</span>
</div>
<div class="absolute inset-0 z-40 transition-colors duration-300" @dragenter="dragenter($event)"
@dragleave="fileDropping = null"
:class="{'bg-blue-200 bg-opacity-80': fileDropping == index && fileDragging != index}">
</div>
</div>
</template>
</div>
</template>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 rounded">
Criar Slide
</button>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://unpkg.com/create-file-list"></script>
<script>
myFiles = []
function dataFileDnD() {
return {
files: [],
fileDragging: null,
fileDropping: null,
humanFileSize(size) {
const i = Math.floor(Math.log(size) / Math.log(1024));
return (
(size / Math.pow(1024, i)).toFixed(2) * 1 +
" " +
["B", "kB", "MB", "GB", "TB"][i]
);
},
remove(index) {
let files = [...this.files];
files.splice(index, 1);
myFiles.splice(index, 1);
this.files = createFileList(files);
console.log(this.files)
},
drop(e) {
let removed, add;
let files = [...this.files];
removed = files.splice(this.fileDragging, 1);
files.splice(this.fileDropping, 0, ...removed);
myFiles.splice(this.fileDropping, 0, ...removed);
this.files = createFileList(files);
this.fileDropping = null;
this.fileDragging = null;
},
dragenter(e) {
let targetElem = e.target.closest("[draggable]");
this.fileDropping = targetElem.getAttribute("data-index");
},
dragstart(e) {
this.fileDragging = e.target
.closest("[draggable]")
.getAttribute("data-index");
e.dataTransfer.effectAllowed = "move";
},
loadFile(file) {
const preview = document.querySelectorAll(".preview");
const blobUrl = URL.createObjectURL(file);
preview.forEach(elem => {
elem.onload = () => {
URL.revokeObjectURL(elem.src); // free memory
};
});
return blobUrl;
},
addFiles(e) {
files_val = []
for(let i = 0; i < e.target.files.length; i++){
if( (e.target.files[i].type.includes('text') || e.target.files[i].type.includes('') ) && e.target.files[i].name.includes('.c')){
files_val.push(e.target.files[i]);
myFiles.push(e.target.files[i])
}
}
if(files_val.length != 0){
const files = createFileList([...this.files], [...files_val]);
this.files = files;
console.log(this.files[0].text())
}
}
};
}
</script>
</body>
</html>