Skip to content

Commit 524da1b

Browse files
arno06arno06
committed
Refactoring & Uploader
1 parent 90ae0ea commit 524da1b

File tree

7 files changed

+441
-405
lines changed

7 files changed

+441
-405
lines changed

‎README.md

+132-78
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,46 @@ Features
2424
* Autoload class
2525
* Forms handling (declaration, validation, display)
2626

27-
Namespaces
28-
-----------
29-
namespace | contexte | description
30-
--------------|------------|--------------
31-
core \\ *{subPackage}* \\ |Global |Classes & interfaces du package core
32-
lib \\ *{package}* \\ *{subPackage}* |Global |Classes & interfaces des packages secondaire
33-
app \\ *{appName}* \\ models |Application |Modèles de l'application *appName*
34-
app \\ *{appName}* \\ controllers \\ *{moduleName}* |Application|Controllers du module *{moduleName}* de l'application *{appName}*
35-
app \\ *{appName}* \\ src \\ *{subPackage}* |Application |Classes & interfaces de l'application *{appName}*
27+
Installation locale
28+
---
29+
Pré-requis :
30+
* Apache
31+
* PHP 7.2
32+
* MySQL
33+
34+
### Windows
35+
Tout-en-un :
36+
* [WAMP Server](https://www.wampserver.com/en/)
37+
* [EasyPHP](https://www.easyphp.org/)
38+
* ...
39+
40+
WSL2 :
41+
* [Installation](https://learn.microsoft.com/fr-fr/windows/wsl/install)
42+
* Mettre à jour la liste des paquets puis installer les pré-requis
43+
44+
45+
### Configuration Apache
46+
* S'assurer qu'Apache permet aux dossiers de travail de surcharger la configuration (pour accepter les fichiers [.htaccess](https://httpd.apache.org/docs/2.2/fr/howto/htaccess.html))
47+
* Activer le module Apache `rewrite`
48+
49+
### Configuration du projet
50+
* Ouvrir le fichier `includes/applications/setup.json` et identifier le préfixe associer à `localhost` (par défaut `dev`)
51+
* Ouvrir le fichier `includes/applications/dev.config.json` correspondant à la configuration prise en compte
52+
53+
Composants
54+
---
55+
Un composant est un ensemble de resources JS, CSS, medias regroupé pour permettre le bonne affichage / la bonne exécution d'une page / fonctionnalité.
56+
57+
Dans le projet, depuis un controller PHP il est possible de charger un composant via la méthode :
58+
```php
59+
Autoload::addComponent($pComponentName);
60+
```
61+
62+
Cette méthode va s'occuper de centraliser l'ensemble des composants à charger afin de n'ajouter qu'une seule balise `script` et qu'une seule balise `link[rel="stylesheet"]`. Ces deux balises vont pointer leurs urls vers le `StaticController` du framework avec la liste des composants à charger en paramètres.
63+
64+
C'est ensuite la classe `Dependencies` qui va se charger de récupérer la liste des composants à charger pour en déduire les dépendances ainsi que l'ordre des fichiers (`js` ou `css`) à renvoyer.
65+
66+
**Note :** Les urls dans les fichiers `css` sont relatives aux fichiers et doivent être entourées de guillemets `"`
3667

3768

3869
Forms
@@ -94,81 +125,93 @@ The 'addForm' method registers the Form object to Smarty and the current templat
94125
</html>
95126
```
96127

97-
Reminder
98-
```json
128+
#### Form's inputs available
99129
INPUT[text|password|submit|...]
100-
{
101-
"label":"Input",
102-
"tag":"input",
103-
"require":true|false,
104-
"attributes":
105-
{
106-
"type":"text"|"password"|"submit"...,
107-
"value":"Default Value",
108-
"class":...
109-
}
110-
}
130+
```json
131+
{
132+
"label":"Input",
133+
"tag":"input",
134+
"require":true|false,
135+
"attributes":
136+
{
137+
"type":"text"|"password"|"submit"...,
138+
"value":"Default Value",
139+
"class":...
140+
}
141+
}
142+
```
143+
111144
CAPTCHA
112-
{
113-
"label":"Captcha",
114-
"tag":"captcha",
115-
"require":true|false,
116-
"attributes":{
117-
"backgroundColor":"#ffffff",
118-
"fontSizeMax":13,
119-
"fontSizeMin":13,
120-
"width":100,
121-
"height":30,
122-
"rotation":15,
123-
"fontColors":["#444444","#ff0000","#000000"],
124-
"transparent":true,
125-
"length":7,
126-
"type":"random|calculus",
127-
"valueMax":99
128-
}
129-
}
145+
```json
146+
{
147+
"label":"Captcha",
148+
"tag":"captcha",
149+
"require":true|false,
150+
"attributes":{
151+
"backgroundColor":"#ffffff",
152+
"fontSizeMax":13,
153+
"fontSizeMin":13,
154+
"width":100,
155+
"height":30,
156+
"rotation":15,
157+
"fontColors":["#444444","#ff0000","#000000"],
158+
"transparent":true,
159+
"length":7,
160+
"type":"random|calculus",
161+
"valueMax":99
162+
}
163+
}
164+
```
165+
130166
DATEPICKER
131-
{
132-
"label":"Datepicker",
133-
"tag":"datepicker"
134-
}
167+
```json
168+
{
169+
"label":"Datepicker",
170+
"tag":"datepicker"
171+
}
172+
```
135173
UPLOAD
136-
{
137-
"label":"Fichier",
138-
"tag":"upload"
139-
"fileType":"jpg|png|...",
140-
"fileName":"someName{id}",
141-
"resize":[200, 200]
142-
}
174+
```json
175+
{
176+
"label":"Fichier",
177+
"tag":"upload"
178+
"fileType":"jpg|png|...",
179+
"fileName":"someName{id}",
180+
"resize":[200, 200]
181+
}
182+
```
143183
RADIOGROUP
144-
{
145-
"label":"Radiogroup",
146-
"tag":"radiogroup",
147-
"display":"block",
148-
"height":"200px",
149-
"width":"400px",
150-
"fromModel":
151-
{
152-
"model":"ModelName",
153-
"method":"all",
154-
"name":"field_name",
155-
"value":"field_name_id"
156-
}
157-
}
184+
```json
185+
{
186+
"label":"Radiogroup",
187+
"tag":"radiogroup",
188+
"display":"block",
189+
"height":"200px",
190+
"width":"400px",
191+
"fromModel":
192+
{
193+
"model":"ModelName",
194+
"method":"all",
195+
"name":"field_name",
196+
"value":"field_name_id"
197+
}
198+
}
199+
```
158200
CHECKBOXGROUP
159-
{
160-
"label":"Checkboxgroup",
161-
"tag":"checkboxgroup",
162-
"height":"200px",
163-
"width":"400px",
164-
"fromModel":
165-
{
166-
"model":"ModelName",
167-
"method":"all",
168-
"name":"field_name",
169-
"value":"field_name_id"
170-
}
171-
}
201+
```json
202+
{
203+
"label":"Checkboxgroup",
204+
"tag":"checkboxgroup",
205+
"height":"200px",
206+
"width":"400px",
207+
"fromModel":
208+
{
209+
"model":"ModelName",
210+
"method":"all",
211+
"name":"field_name",
212+
"value":"field_name_id"
213+
}
214+
}
172215
```
173216

174217
Debugger
@@ -188,6 +231,17 @@ trace($pString, $pDisplay);
188231
trace_r($pObject, $pDisplay);
189232
```
190233

234+
PHP Namespaces
235+
-----------
236+
namespace | contexte | description
237+
--------------|------------|--------------
238+
core \\ *{subPackage}* \\ |Global |Classes & interfaces du package core
239+
lib \\ *{package}* \\ *{subPackage}* |Global |Classes & interfaces des packages secondaire
240+
app \\ *{appName}* \\ models |Application |Modèles de l'application *appName*
241+
app \\ *{appName}* \\ controllers \\ *{moduleName}* |Application|Controllers du module *{moduleName}* de l'application *{appName}*
242+
app \\ *{appName}* \\ src \\ *{subPackage}* |Application |Classes & interfaces de l'application *{appName}*
243+
244+
191245

192246
Todo (nice to have)
193247
---------

‎includes/components/uploader/Uploader.css

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ div.input.upload .status_bar {
1717
width: 200px;
1818
height: 25px;
1919
}
20+
div.input.upload.droppable{position:relative;}
21+
div.input.upload.droppable::before{position:absolute;top:0;left:0;width:100%;height:100%;background: #27ae60;content:'Déposer';color:#fff;display:flex;align-items: center;justify-content: center;}
22+
2023
div.input.upload .status_bar .background,
2124
div.input.upload .status_bar .foreground {
2225
top: 0;

‎includes/components/uploader/Uploader.js

+19
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,32 @@
2323
setupContext(input);
2424
input.dataset.progress = 0;
2525
input.addEventListener("change", fileChangedHandler, false);
26+
let dropZone = input.parentNode;
27+
dropZone.addEventListener('drop', dropHandler);
28+
dropZone.addEventListener('dragover', dragHandler);
29+
dropZone.addEventListener('dragleave', dragLeaveHandler);
2630
});
2731
document.querySelectorAll('a.file+a.delete').forEach(function(a)
2832
{
2933
a.addEventListener('click', deleteCurrentFileHandler, false);
3034
});
3135
}
3236

37+
function dragLeaveHandler(e){
38+
e.currentTarget.classList.remove('droppable');
39+
}
40+
41+
function dropHandler(e){
42+
e.preventDefault();
43+
e.currentTarget.classList.remove('droppable');
44+
uploadFile(e.currentTarget.querySelector('input[type="file"]'), e.dataTransfer.files[0]);
45+
}
46+
47+
function dragHandler(e){
48+
e.preventDefault();
49+
e.currentTarget.classList.add('droppable');
50+
}
51+
3352
function setupContext(pInput)
3453
{
3554
var name = pInput.dataset.form_name+'['+pInput.dataset.input_name+']';

‎includes/components/uploader/Uploader.less

-98
This file was deleted.

0 commit comments

Comments
 (0)