finish v1.0 docs

README.md

@@ -3,12 +3,7 @@
 ### Rápido, fácil de usar e performática!
 Uma biblioteca em Javascript onde o objetivo é facilitar as requisições usando apenas o HTML.
 
-### Inicializando
-```js
-$C()
-```
-
-##### Configuração padrão
+#### Configurando
 ```js
 $C({
   'prefix_url': '', // '/api/v1'
@@ -91,10 +86,14 @@ O primeiro parametro é o nome do seu callback e os parametros.
 
 ```html
 <script>
-$cruCallback('meuCallback', (result, element) => {
-  console.log('resultado da requisição', result)
-  console.log('elemento', element)
-})
+window.onload = function() {
+
+  $cruCallback('meuCallback', (result, element) => {
+    console.log('resultado da requisição', result)
+    console.log('elemento', element)
+  })
+
+}
 </script>
 ```
 
@@ -104,16 +103,18 @@ $cruCallback('meuCallback', (result, element) => {
 <div c-container="/lista-clientes-json" c-callback="listaUsuarios"></div>
 
 <script>
-
-$cruCallback('listaUsuarios', (result, element) => {
-  console.log('resultado da requisição', result)
-  console.log('elemento', element)
-
-  for(const user of result.users) {
-    console.log(user.name, user.email)
-  }
-})
-
+window.onload = function() {
+  
+  $cruCallback('listaUsuarios', (result, element) => {
+    console.log('resultado da requisição', result)
+    console.log('elemento', element)
+
+    for(const user of result.users) {
+      console.log(user.name, user.email)
+    }
+  })
+
+}
 </script>
 ```
 

docs/1-basic.html

@@ -1,2 +1,2 @@
-<pre><code class="language-html">&lt;div c-container="/example_card.html">&lt;/div&gt;</code></pre>
 <div c-container="./example_card.html"></div>
+<pre><code class="language-html">&lt;div c-container="/example_card.html">&lt;/div&gt;</code></pre>

docs/2-callback.html

@@ -1,27 +1,26 @@
-<pre><code class="language-html">
-&lt;div c-container="./example_card.html"
-    c-callback="myCustomCallback"&gt;
+<div c-container="./example_card.html"
+    c-callback="myCustomCallback">
     waiting callback...
-&lt;/div&gt;
+</div>
 
-&lt;script&gt;
+<script>
     // example custom callback
-    $cruCallback('myCustomCallback', (result, element) =&gt; {
+    $cruCallback('myCustomCallback', (result, element) => {
         console.log(result)
         element.innerHTML = result
     })
-&lt;/script&gt;
-</code></pre>
+</script>
 
-<div c-container="./example_card.html"
-    c-callback="myCustomCallback">
+<pre><code class="language-html">&lt;div c-container="./example_card.html"
+    c-callback="myCustomCallback"&gt;
     waiting callback...
-</div>
+&lt;/div&gt;
 
-<script>
+&lt;script&gt;
     // example custom callback
-    $cruCallback('myCustomCallback', (result, element) => {
+    $cruCallback('myCustomCallback', (result, element) =&gt; {
         console.log(result)
         element.innerHTML = result
     })
-</script>
+&lt;/script&gt;
+</code></pre>

docs/3-render_another_element.html

@@ -1,2 +1,5 @@
 <div c-container="./example_card.html" c-target="#another-element"></div>
 <div id="another-element" style="color: red;"></div>
+
+<pre><code class="language-html">&lt;div c-container="./example_card.html" c-target="#another-element"&gt;&lt;/div&gt;
+&lt;div id="another-element" style="color: red;"&gt;&lt;/div&gt;</code></pre>

docs/4-reload_container.html

@@ -1,4 +1,9 @@
 <div c-container="./example_card.html" c-target="#another-element">
     <button c-reload>Click here to reload</button>
 </div>
-<div id="another-element"></div>
+<div id="another-element"></div>
+
+<pre><code class="language-html">&lt;div c-container="./example_card.html" c-target="#another-element"&gt;
+    &lt;button c-reload&gt;Click here to reload&lt;/button&gt;
+&lt;/div&gt;
+&lt;div id="another-element"&gt;&lt;/div&gt;</code></pre>

docs/5-form_basic.html

@@ -1,4 +1,3 @@
-<pre><code class="language-html">
 <h3>GET submit</h3>
 <form class="c-form" action="/get-url" method="get" c-target="#result-get">
     <input type="text" name="form_method" value="get">
@@ -26,4 +25,32 @@ <h3>DELETE submit</h3>
     <button>send delete</button>
     <div id="result-delete"></div>
 </form>
-</code></pre>
+
+
+<pre><code class="language-html">&lt;h3&gt;GET submit&lt;/h3&gt;
+&lt;form class="c-form" action="/get-url" method="get" c-target="#result-get"&gt;
+    &lt;input type="text" name="form_method" value="get"&gt;
+    &lt;button&gt;send get&lt;/button&gt;
+    &lt;div id="result-get"&gt;&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;POST submit&lt;/h3&gt;
+&lt;form class="c-form" action="/post-url" method="post" c-target="#result-post"&gt;
+    &lt;input type="text" name="form_method" value="post"&gt;
+    &lt;button&gt;send post&lt;/button&gt;
+    &lt;div id="result-post"&gt;&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;PUT submit&lt;/h3&gt;
+&lt;form class="c-form" action="/put-url" method="put" c-target="#result-put"&gt;
+    &lt;input type="text" name="form_method" value="put"&gt;
+    &lt;button&gt;send put&lt;/button&gt;
+    &lt;div id="result-put"&gt;&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;DELETE submit&lt;/h3&gt;
+&lt;form class="c-form" action="/delete-url" method="delete" c-target="#result-delete"&gt;
+    &lt;input type="text" name="form_method" value="delete"&gt;
+    &lt;button&gt;send delete&lt;/button&gt;
+    &lt;div id="result-delete"&gt;&lt;/div&gt;
+&lt;/form&gt;</code></pre>

docs/6-form_append.html

@@ -1,6 +1,13 @@
 <h3>Form append</h3>
-<form class="c-form" action="./example_card.html" method="get" c-append="#some-list">
+<form class="c-form" action="./example_card.html" method="post" c-append="#some-list">
     <button>send post</button>
 </form>
 
 <div id="some-list"></div>
+
+<pre><code class="language-html">&lt;h3&gt;Form append&lt;/h3&gt;
+&lt;form class="c-form" action="./example_card.html" method="post" c-append="#some-list"&gt;
+    &lt;button&gt;send post&lt;/button&gt;
+&lt;/form&gt;
+
+&lt;div id="some-list"&gt;&lt;/div&gt;</code></pre>

docs/7-swap.html

@@ -1,7 +1,11 @@
-<h3>Swap Element</h3>
-
 <button c-get="./example_card.html" c-swap="#form-container">swap: replace element</button>
 
 <div id="form-container">
     <p>swap: replace element</p>
 </div>
+
+<pre><code class="language-html">&lt;button c-get="./example_card.html" c-swap="#form-container"&gt;swap: replace element&lt;/button&gt;
+
+&lt;div id="form-container"&gt;
+    &lt;p&gt;swap: replace element&lt;/p&gt;
+&lt;/div&gt;</code></pre>

docs/8-simple_requests.html

@@ -1,8 +1,13 @@
-<h1>Simple requests</h3>
-
 <button c-get="./example_card.html" c-target="#render">get /some-url</button>
 <button c-post="./example_card.html" c-target="#render">post /some-url</button>
 <button c-put="./example_card.html" c-target="#render">put /some-url</button>
 <button c-delete="./example_card.html" c-target="#render">delete /some-url</button>
 
 <div id="render"></div>
+
+<pre><code class="language-html">&lt;button c-get="./example_card.html" c-target="#render"&gt;get /some-url&lt;/button&gt;
+    &lt;button c-post="./example_card.html" c-target="#render"&gt;post /some-url&lt;/button&gt;
+    &lt;button c-put="./example_card.html" c-target="#render"&gt;put /some-url&lt;/button&gt;
+    &lt;button c-delete="./example_card.html" c-target="#render"&gt;delete /some-url&lt;/button&gt;
+
+    &lt;div id="render"&gt;&lt;/div&gt;</code></pre>

docs/9-remove_closest.html

@@ -1,5 +1,3 @@
-<h1>Remove Closest</h1>
-
 <table>
     <thead>
         <tr>
@@ -28,3 +26,33 @@ <h1>Remove Closest</h1>
 </table>
 
 <div id="render"></div>
+
+
+<pre><code class="language-html">&lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;th&gt;Name&lt;/th&gt;
+            &lt;th&gt;Age&lt;/th&gt;
+            &lt;th&gt;#&lt;/th&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr&gt;
+            &lt;td&gt;Guilherme&lt;/td&gt;
+            &lt;td&gt;27&lt;/td&gt;
+            &lt;td&gt;&lt;button c-delete="/blabla" c-remove-closest="tr"&gt;delete&lt;/button&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;td&gt;Gui&lt;/td&gt;
+            &lt;td&gt;40&lt;/td&gt;
+            &lt;td&gt;&lt;button c-delete="/blabla" c-remove-closest="tr"&gt;delete&lt;/button&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+        &lt;tr&gt;
+            &lt;td&gt;GIA&lt;/td&gt;
+            &lt;td&gt;99&lt;/td&gt;
+            &lt;td&gt;&lt;button c-delete="/blabla" c-remove-closest="tr"&gt;delete&lt;/button&gt;&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;div id="render"&gt;&lt;/div&gt;</code></pre>

docs/index.html

@@ -12,6 +12,8 @@
 
     <div class="container">
         <h1>cru.js</h1>
+        <p>Homepage: <a href="https://github.com/Iazzetta/cru.js">https://github.com/Iazzetta/cru.js</p>
+        <hr/>
         <h3 class="subtitle">BASIC</h3>
         <ol>
             <li><a c-target="#basic-docs" c-get="./1-basic.html" c-callback="highlightAll">Container</a></li>
@@ -37,11 +39,13 @@ <h3 class="subtitle">PREVIEW</h3>
     <script defer>
         window.onload = function() {
             $cruCallback('highlightAll', (result, element) => {
-                $crus('pre code:not([data-highlighted="yes"])').forEach((el) => {
+                $crus('code:not([data-highlighted="yes"])').forEach((el) => {
                     hljs.highlightElement(el);
                 });
             })
-            hljs.highlightAll();
+            setTimeout(() => {
+                hljs.highlightAll();
+            }, 100)
         }
     </script>
 

docs/styles.css

@@ -58,10 +58,6 @@ ol li {
     border-radius: 5px;
 }
 
-#basic-docs>* {
-    color: white;
-}
-
 .random-card {
     margin: 1em 0em;
     padding: 1em;