-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
401 lines (331 loc) · 25.7 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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="home">HOME - AUX.js - Pacote de Utilidades JavaScript</title>
<link rel="shortcut icon" href="imgs/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="styles/index.css">
<link rel="stylesheet" href="styles/codeStyle.css">
</head>
<body>
<header>
<div class="aux">
<img src="imgs/flask.png" alt="Logo AUX" class="aux-logo">
<h1 class="aux-title">
<span>AUX.</span>
<span class="js">JS</span>
</h1>
</div>
<button class="side-nav-button">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
<path
d="M340-540H200q-33 0-56.5-23.5T120-620v-140q0-33 23.5-56.5T200-840h140q33 0 56.5 23.5T420-760v140q0 33-23.5 56.5T340-540Zm-140-80h140v-140H200v140Zm140 500H200q-33 0-56.5-23.5T120-200v-140q0-33 23.5-56.5T200-420h140q33 0 56.5 23.5T420-340v140q0 33-23.5 56.5T340-120Zm-140-80h140v-140H200v140Zm560-340H620q-33 0-56.5-23.5T540-620v-140q0-33 23.5-56.5T620-840h140q33 0 56.5 23.5T840-760v140q0 33-23.5 56.5T760-540Zm-140-80h140v-140H620v140Zm140 500H620q-33 0-56.5-23.5T540-200v-140q0-33 23.5-56.5T620-420h140q33 0 56.5 23.5T840-340v140q0 33-23.5 56.5T760-120Zm-140-80h140v-140H620v140ZM340-620Zm0 280Zm280-280Zm0 280Z" />
</svg>
</button>
</header>
<!-- BARRA DE NAVEGAÇÃO LATERAL -->
<aside id="aside">
<div class="side-nav">
<!-- Cabeçalho da sidenav -->
<h2 class="aside-title">AUX<span>Docs</span></h2>
<p id="version">Versão: #.#.# - #/#/##</p>
<!-- Lista por categoria -->
<div class="scroller-container">
<!-- Intro -->
<details id="intro" open>
<summary class="sumary" id="intro-sumary">Introdução</summary>
<ul id="intro-linst">
<li class="list-items intro-items">
<a href="#about-aux">Sobre AUX.JS</a>
</li>
<li class="list-items intro-items">
<a href="#control_args">control_arg</a>
</li>
</ul>
</details>
<!-- OBJECT-->
<details open>
<summary id="oh-sumary" class="sumary">Object Handlers</summary>
<ul id="oh-list">
</ul>
</details>
<!-- DOM -->
<details open>
<summary id="dh-sumary" class="sumary">DOM Handlers</summary>
<ul id="dh-list" class="u-list">
</ul>
</details>
<!-- EVENT -->
<details open>
<summary id="eh-sumary" class="sumary">Event Handlers</summary>
<ul id="eh-list">
</ul>
</details>
</div>
</div>
</aside>
<!-- MAIN -->
<main id="main">
<!-- CONTEUDO RELACIONADO A INTRODUÇÃO -->
<div class="aside-content">
<section class="about-aux intro-sections">
<section class="what-aux">
<h2 class="section-title">O que é o AUX.<span class="js">js</span> ?</h2>
<p>AUX.js pode ser chamado de <b>Pacote de Auxílio Front-End JavaScript</b>, daí que vem o nome <b>AUX</b>
(auxílio). AUX foi criado e pensado para facilitar a vida do desenvolvedor front-end com tarefas que são comnus
mas que ao mesmo tempo são repetitivos e demorados e tornam o processo de desenvolver cansativo. Por fim, este
pacote dispõe de um conjunto de módulos de utilidades JavaScript para o uso em tarefas do lado do cliente.</p>
<h3>Como e por que AUX surgiu?</h3>
<p>AUX surgiu a partir de uma necessidade particular minha, mas que também é a necessidade de muitos outros
desenvolvedores Web; <b>programar menos e fazer mais</b>. Em todo projeto que eu iniciava eu sempre me via
perdendo tempo criando funcionalidades que serviriam para complementar uma funcionalidade maior e mais complexa,
e em todos esses projetos eu me via codando sempre os mesmo códigos. Eram funcionalidades básicas, mas era o que
garantia a precisão do trabalho do código. Então decidi reunir todas as necessidades e desafios que eu
encontrava durante meu trabalho e transformá-las em módulos para que assim eu as usasse sempre que sentisse
necessidade. Sempre que surgia uma necessidade como, por exemplo, uma função que analisa se os valores de um
array estão presentes em outro array, ou uma função que alterna o CSS de um elemento sempre que é chamada,
imediatamente eu abria o projeto AUX e começava a confecionar esta funcionalidade com tudo eu ela necessitaria
para funcionar perfeitamente em todos os cenários possíveis em que ela seria últil. Comecei a reunir várias
funções e métodos essenciais para meu trabalho e passei a usá-las em absolutamnete tudo que eu fazia. Foi pra
mim por muito tempo uma grande mão amiga. Agora eu podia fazer uma análize complexa e completa de um determinado
dado ou a manipulação de um determinado objeto com uma única chamada de função e alguns parâmetros.</p>
<br>
<p>A cada módulo que surgia eu analizava todos os cenários em que ele poderia ser útil e em vários desses cenários
esse mesmo módulo deveria trabalhar me modo um pouco diferente e as vezes até me retornar tipos diferentes
dependendo da minha necessidade. Então comecei a implementar multilas funcionalidade a uma função. Quase todos
os módulos presentes em AUX de funcionalidades extras além da padrão que podem ser determinadas com alguns
argumentos que eu chamo de <b>argumentos de controle</b>. Estes argumentos quando passados alteram o modo como a
função ou método trabalha fazendo com que a mesma possa retornar resultados diferentes dependendo de cada
necessidade. Todas essas especificações estão listadas em DOCUMENTOS de forma detalhada e em JSDocs de forma
mais resumida.</p>
<br>
<a class="link-button link-to" href="#control_args">Ler Argumentos de Controle</a>
<h3>Inspirações:</h3>
<p>Podemos dizer que AUX é uma junção de duas das principais bibliotecas JavaScript: <b>JQuery</b> e <b>Lodash</b>.
Talvez mais inpirada em Lodash do que em JQuery.</p>
<p>São duas bibliotecas que sempre usei, mas em determinados momentos me via perguntando porque nenhuma delas tinha
uma determinada função ou método que me ajudaria a agilizar determinada tarefa. Na falta destas que AUX começou
a surgir.</p>
</section>
<hr>
<section class="aux-description">
<h2 class="section-title">Reduza Trabalhos em Uma Única Linha:</h2>
<p>Foque apenas no que interessa! AUX.js fornece <b>funções</b> e <b>métodos</b> prontos para uso geral em seus
projetos. Eles são divididos internamente em 3 principais tipos:</p>
<ul class="categories-list">
<li>Object Handlers</li>
<li>Dom Handlers</li>
<li>Event Handlers</li>
</ul>
<h3>Object Handlers</h3>
<p>Tem a principal funcionalidade a manipulação de objetos do tipo <b>Strings</b>, <b>Numbers</b>, <b>Arrays</b> e
<b>Objects</b>.</p>
<p>Conta com funções que auxiliam na manipulação, formatação e análise desses objetos de forma mais rápida e com uma
única linha.</p>
<h3>Dom Handlers</h3>
<p>A principal funcionalidade destas funções e métodos é a manipulação de elementos do DOM sem muitas complicações.
</p>
<p>Funções dedicadas a manipular elementos HTML como também suas classes, ids, conteúdos,atributos e propriedades,
estilos CSS e afins.</p>
<h3>Event Handlers</h3>
<p>Estes são dedicados a manipulação de Eventos DOM de forma mais simplificada e prática do que o JavaScript puro
oferece, tornando a tarefa de manipular e organizar vários eventos de vários elementos mais atraente</p>
</section>
<hr>
<section>
<h2 class="section-title">Como Usar o AUX.<span class="js">js</span> ?</h2>
<p>É fácil, rápido e o melhor é leve!</p>
<p>AUX não possui dependências externas. Tudo o que ele precisa para trabalhar já vem embutido em seu código fonte o
que o torna pártico e leve para uso.</p>
<ul class="htu-list">
<li class="htu-title">DOWNLOAD:</li>
<li>Faça o download do pacote clicando no botão abaixo.</li>
<li><a class="link-button" href="download/auxjs-1.1.0.rar" download="auxjs-1.1.0.rar" title="Faça o download do pacote AUXJS.">AUXJS: 1.1.0</a></li>
<li>Extraia os arquivos do pacote <i>.zip</i>.</li>
<li>Copie e cole a pasta <b>aux_modules</b> para a raiz do seu projeto.</li>
<li>Já está tudo praticamente feito! Agora é só importar os módulos de <b>aux_modules/auxm.js</b> para o seu projeto e começar a trabalhar.</li>
</ul>
<p>Todos os módulos são devidamente documentados usando JSDoc. Se você estiver usando VSCode bastar pausar o cursor
sobre uma função ou métofo que uma janela contendo algumas especificações de uso irá surgir.</p>
<p>Caso possua dúvidas de como usar cada função ou método visite a página de DOCUMENTOS que fornece uma documentação
mais detalhada e exemplos de como usá-las.</p>
<br>
<h3>Ver versão:</h3>
<ul class="version-list">
<li class="current-version">AUX.js atualmente está em <b id="v-number"> Versão #.#.#</b> atualizado em <b id="v-date">#/#/##</b>.</li>
<li>Verifique a versão do seu módulo: Importe qualquer módulo no seu projeto, isso lhe dará acesso a variável
global <b>AUXVERSION</b>, depois imprima no console:</li>
<li>
<picture>
<source media="(orientation: portrait)" srcset="imgs/print-code-user-auxversion-midle.png">
<img class="code-screenshot" src="imgs/print-code-user-auxversion.png" alt="">
</picture>
</li>
<li>AUX.js é lançado sob a <b><i>licença MIT</i></b>.</li>
</ul>
</section>
</section>
<section class="control_args intro-sections">
<div class="content-head">
<h1 class="name">
<span>control_arg:</span>
</h1>
<div class="details-by">
Parâmetro Padrão | Opcional
</div>
</div>
<section class="description">
<h2>Descrição:</h2>
<div class="description-field">
<p>Trata-se de um <b>parâmetro opcional padrão</b> presente em quase todos os módulos AUX. Um módulo pode ter ou não um ou mais parâmetros denomidados de <b>control_arg</b> (control_arg2, control_arg3...) que são usados para alterar o comportamento padrão de um módulo, isso redefine o modo como ele trabalha e retorna um resultado.</p>
<p>Um módulo tem sua funcionalidada padrão preservada quando os parâmetros <b>control_arg</b> são omitidos. Mas se um argumento válido for passado sua funcionalidade é definida para o que o argumento solicita, isso também pode mudar os valores e tipo que esse módulo retorna. Estes <b>argumentos válidos</b> são os chamados de argumentos de controle e são geralmente uma string passada no parâmetro e esses valores string são geralmente pré-definidos e cada módulo tem seus argumentos padrões. Para saber quais argumentos um módulo recebe deve-se verificar a documentação deste. Se o módulo possuir um ou mais parâmetros de argumentos de controle a documentação listará todos os argumentos que cada parâmetro pode receber, o que ela faz e suas regras.</p>
<p>Alguns parâmetros possuem regras e só podem ser usados em determinados momentos. Caso essa regra não seja seguida um erro é disparado interrompendo a execução do código. Veja a seguir:</p>
<div class="examples">
<h3>Usando argumentos de controle:</h3>
<p>Temos uma função chamada <a class="link-to" href="#arrMatch" title="Ir para documentação">arrMatch( )</a> que faz uma verificação em dois arrays e retorna <b>true</b> se um ou mais elementos do primeiro array também existir no segundo array. Este é o comportamento padrão da função se apenas os arrays forem passados como argumentos.</p>
<pre class="example-code" id="ex1"></pre>
<p>Mas esta função possui mais dois parâmetros opcionais; os <b>control_arg</b>. Lendo a documentação sobre esta função descobrimos que o terceiro parâmetro recebe alguns argumentos do tipo string pré-definidos. São eles:</p>
<ul class="CA-lists">
<li>"all"</li>
<li>"list"</li>
<li>"details"</li>
<li>"length"</li>
<li>"default"</li>
</ul>
<p class="warn-text">Nota: Os argumentos listados e outros serão usados como exemplos. A funcionalidade de cada argumento apresentado abaixo não é uma regra para todos os módulos que as usam, onde cada módulo pode retornar resultados diferentes usando os mesmos argumentos desta lista.</p>
<p>Vamos ver o que cada um faz.</p>
<p>O argumento <b>"all"</b> se declarado em <b>control_arg</b> diz para a função verificar se todos os valores de <b>arrA</b> existem em <b>arrB</b>. O retorno ainda será um <b>boolean.</b></p>
<pre class="example-code" id="ex2"></pre>
<p>Já o argumento <b>"list"</b> altera tanto o modo de verificação quanto o valor de retorno. Se usado diz para a função verificar quais valores do primeiro array estão presentes no segundo array e retorna um novo array contendo esses valores.</p>
<p>O argumento <b>"details"</b> trabalha semelhante ao argumento <b>"list"</b> porém retorna um array contendo um objeto para cada item de <b>arraA</b> que estiver presente em <b>arrB</b>. Cada objeto tem propriedades que fornece algumas informações sobre a busca.</p>
<p>O argumento <b>"length"</b> retorna um número que representa a quantidade de valores de <b>arrA</b> que estão presentes em <b>arrB</b>.</p>
<p>Já o último argumento <b>"default"</b>, presente em todos os módulos que possuem um parâmetro <b>control_arg</b>, é o argumento padrão deste parâmetro. Se nada for passado em nenhum parâmetro de argumento de controle o valor padrão é <b>"default"</b>.</p>
<pre class="example-code" id="ex3"></pre>
<p>Note que cada argumento tem a habilidade que mudar toda a estrutura do retorno da função deste exemplo, isto sempre deve ser levado em consideração na hora de usá-los em um projeto, pois o não conhecimento destes pode ababar trazendo resultados inesperados que podem comprometer a estrutura do projeto.</p>
</div>
<div class="examples">
<h3>control_arg2 ?:</h3>
<p>Uma função pode possuir mais de um parâmetro do tipo <b>control_arg</b>, se você se notar isso em um módulo isso significa a funcionalidade do argumento anterior pode trabalhar em conjunto com mais funcionalidades. Em outras palavras um segundo parâmetro do tipo <b>control_arg</b> altera a funcionalidade do primeiro parâmetro do mesmo tipo.</p>
<p>Parece confuso? Calma que há como explicar.</p>
<p>Vamos usar a mesma função dos exemplos acima, já que este também possui um quarto parâmetro chamado <b>control_arg2</b>. Além de argumentos pré-definidos do tipo string, o parâmetro anterior, <b>control_arg</b> também aceita receber um número como argumento, se passado um argumento numérico inteiro a função irá verificar se a quantidade de valores de <b>arrA</b> que estão presentes em <b>arrB</b> é igual ao número passado e retorna um <b>boolean</b>. Com isto podemos usar mais dois argumentos pre-definidos no parâmetro <b>control_arg2</b>. São eles:</p>
<ul class="CA-lists">
<li>"min"</li>
<li>"max"</li>
</ul>
<p>O argumento <b>"min"</b> define que a quantidade mínima de valores de <b>arrA</b> que correspondem deve ser o valor passado no parâmetro anterior e retorna <b>true</b>, se a quantidade passar o retorno é <b>false</b>, enquanto o argumento <b>"max"</b> faz o oposto e define que a quantidade máxima de valores de <b>arrA</b> que correspondem à <b>arrB</b> deve ser o valor passado anteriormente e também retorna um <b>boolean</b>. Veja:</p>
<pre class="example-code" id="ex4"></pre>
<p>Note que o uso de um segundo parâmetro do tipo <b>control_ar</b> dita novas regras sobre as regras já estabelecidades no uso do parâmetro anterior. Deve-se notar também parâmetros dete tipo podem receber outros tipos de argumentos além dos padrões pre-defindios, como é o caso desta função.</p>
<p>Os argumentos listados aqui não são todos. Cada módulo possui sua particularidade e pode ou não compartilhar dos mesmos argumentos, ou podem ou não usar os mesmos argumentos em situações diferentes com resultados diferentes.</p>
<p>Este artigo é apenas introdutório, para se aprofundar em mais detalhes deve-se seguir para as demais categorias litadas na aba de navegação.</p>
<p class="warn-text">Nota: Os exemplos acima não possuem o intuito de ensinar o uso da função e nem seus parâmetros e argumentos de controle. A explicação aqui não está completa e serve somente de exemplo para complementar este material. Para detalhes amis abrangentes sobre a função <a href="#arrMatch" class="link-to" title="Ir para documentação">arrMatch( )</a> consulte a documentação da mesma.</p>
</div>
</div>
</section>
</section>
</div>
<!-- CONTEÚDO RELACIONADO A DOCUMENTAÇÃO DOS MÓDULOS -->
<div class="content">
<!-- CABEÇALHO -->
<div class="content-head">
<h1 class="name">
<span id="fn-name" title="Nome da função/ método"><!--Nome da função ou método--></span>
<span class="parenteses">()</span>:
<span class="returns" id="returns" title="Os tipos de retorno">
<!-- Tipos de retorno da função ou método -->
</span>
</h1>
<div class="details-by" id="details-by" title="Detalhes sobre parâmetros ">
<!-- Função | 0 parâmetros | 0 obrigatórios | 0 control_args -->
</div>
</div>
<!-- DESCRIÇÃO -->
<section class="description">
<h2>Descrição:</h2>
<!-- Faixa de exemplo de Sintaxe -->
<div class="example" title="Exemplo de Sintaxe">
<span class="evoke" id="evoke-name"><!--Nome Fn ou Mthd--></span>
( <div class="params-capsule" id="params-capsule"><!--Nome dos Parametros--></div> )
</div>
<!-- Descrição -->
<div id="description-field">
</div>
<!-- Nota de uso de argumento de controle -->
<p class="note" id="note-warn">Nota: O modo como esta função trabalha e retorna um resultado pode ser configurado com o uso dos <a href="#control_args" class="link-to">argumentos de controle</a>.</p>
<!-- Descrição dos parâmetros -->
<div class="params">
<h3>Parâmetros:</h3>
<ul class="params-list" id="prm-list">
<!-- Descrições de cada parametro -->
</ul>
</div>
</section>
<div class="break-section">----- + -----</div>
<!-- OUTROS DETALHES -->
<section class="more-details" id="details-capsule">
<h2>Mais detalhes:</h2>
<!-- Mais detalhes e exemplos de uso -->
</section>
</div>
</main>
<!-- Botões de anterior/proxima doc e voltar ao topo -->
<div class="end-buttons" id="end-btn">
<!-- Voltar para doc anterior -->
<button id="prev-doc" class="btn">
<div class="svg-capsule">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512">
<path
d="M19,11H9l3.29-3.29a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0l-4.29,4.3A2,2,0,0,0,6,12H6a2,2,0,0,0,.59,1.4l4.29,4.3a1,1,0,1,0,1.41-1.42L9,13H19a1,1,0,0,0,0-2Z" />
</svg>
</div>
<span class="txt">Anterior</span>
</button>
<!-- Botão de rolar para o topo -->
<button id="scroll-top" class="btn">
<div class="svg-capsule">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512">
<path
d="M19,11H9l3.29-3.29a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0l-4.29,4.3A2,2,0,0,0,6,12H6a2,2,0,0,0,.59,1.4l4.29,4.3a1,1,0,1,0,1.41-1.42L9,13H19a1,1,0,0,0,0-2Z" />
</svg>
</div>
<span class="txt">Topo</span>
</button>
<!-- Seguir para próxima doc -->
<button id="next-doc" class="btn">
<span class="txt">Próximo</span>
<div class="svg-capsule">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512">
<path
d="M19,11H9l3.29-3.29a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0l-4.29,4.3A2,2,0,0,0,6,12H6a2,2,0,0,0,.59,1.4l4.29,4.3a1,1,0,1,0,1.41-1.42L9,13H19a1,1,0,0,0,0-2Z" />
</svg>
</div>
</button>
</div>
<footer id="footer">
<ul class="social-medias">
<li>
<a href="https://github.com/Walcygleicson" target="_blank" title="Me siga no Github">
<img src="imgs/github.png" alt="Icone de Github">
</a>
</li>
<li>
<a href="https://www.instagram.com/walcy_gleicson" target="_blank" title="Me siga no Instagram">
<img src="imgs/instagram.png" alt="Icone de Instagram">
</a>
</li>
<li>
<a href="mailto:walcygleicsonoliveira@gmail.com" target="_blank" title="Me envie um Email">
<img src="imgs/gamil.png" alt="Icone de Email">
</a>
</li>
</ul>
<p class="developed-by">Desenvolvido por <span>Walcygleicson M. Oliveira</span> | Brasil © 2023</p>
</footer>
<script src="js/animations.js"></script>
<script src="js/control-args-example-codes.js" type="module"></script>
<script src="js/index.js" type="module"></script>
</body>
</html>