Permalink
Browse files

lot of bugfixes

  • Loading branch information...
1 parent c990e00 commit b919eea37bbe1fc8f566297e4f4f0cfa07f10569 @pfraces pfraces committed Jan 17, 2013
Showing with 77 additions and 57 deletions.
  1. +29 −30 docs/index.html
  2. +48 −27 lib/index.js
View
@@ -1,6 +1,24 @@
-<!DOCTYPE html> <html> <head> <title>index.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> index.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <h1>split()</h1>
+<!DOCTYPE html> <html> <head> <title>index.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> index.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <h1>split(html, opts)</h1>
-<p>[TODO] Translate to english</p>
+<p>Splits an html in several portions each of which can be contained in a
+box with specific dimensions</p>
+
+<p><code>html</code>: <em>[String]</em> A valid html string with the content to be spliited
+<code>opts</code>: <em>[Object]</em></p>
+
+<ul>
+<li><p><code>opts.size</code>: <em>[Object]</em></p>
+
+<ul><li><code>opts.size.width</code>: Width of the container</li>
+<li><code>opts.size.height</code>: Height of the container</li></ul></li>
+</ul> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">split</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">modal</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
+ <span class="p">,</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">dal</span><span class="p">().</span><span class="nx">hide</span><span class="p">().</span><span class="nx">size</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">size</span><span class="p">)</span>
+ </pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>wrap</h2>
+
+<p>Actuará de div contenedor temporal. Tendrá el tamaño indicado en
+<code>opts.size</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">wrap</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">attach</span><span class="p">()</span>
+ <span class="p">,</span> <span class="nx">divs</span> <span class="o">=</span> <span class="p">[];</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>Recorrer los nodos del <code>html</code></h2>
<p>Por cada nodo debemos:</p>
@@ -14,48 +32,29 @@
<li><code>wrap.add(sobrante);</code></li></ol></li>
</ol>
-<p>En 1.4 perdemos anidamiento, así que hemos de guardar en algún
-sitio los padres del nodo que se está intentando añadir.</p>
+<p>En 1.4 perdemos anidamiento, así que debemos corregirlo añadiendo también
+los padres del nodo que se está intentando añadir.</p>
-<p>Al hacer overflow:</p>
-
-<ol>
-<li>eliminar el último nodo añadido <code>sobrante</code></li>
-<li>Apilar <code>wrap</code></li>
-<li><code>wrap = wrapper.clone();</code></li>
-<li><code>wrap.add(node.pathTo(sobrante));</code></li>
-</ol>
+<p><strong>1.4:</strong> <code>wrap.add(node.pathTo(sobrante));</code></p>
<p>Para agregar un elemento al <code>wrap</code>, debemos saber bajo que nodo lo hemos
de añadir, por tanto la idea de <code>pathLeaf</code> de la opción descartada puede
-servir, renombrada a <code>parent</code></p> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">split</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">opts</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">nodes</span> <span class="o">=</span> <span class="nx">modal</span><span class="p">(</span><span class="nx">html</span><span class="p">)</span>
- <span class="p">,</span> <span class="nx">wrapper</span> <span class="o">=</span> <span class="nx">dal</span><span class="p">().</span><span class="nx">hide</span><span class="p">().</span><span class="nx">size</span><span class="p">(</span><span class="nx">opts</span><span class="p">)</span>
- </pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>wrap</h2>
-
-<p>Actuará de div contenedor temporal. Tendrá el tamaño indicado en <code>opts</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">,</span> <span class="nx">wrap</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">attach</span><span class="p">()</span>
- <span class="p">,</span> <span class="nx">divs</span> <span class="o">=</span> <span class="p">[];</span>
-
- <span class="nx">nodes</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">node</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <h2>parent</h2>
+servir, renombrada a <code>parent</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nodes</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">node</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <h2>parent</h2>
<p>Referencia al padre del nodo actual</p>
<p>[TODO] Implementar en <code>traverse</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">wrap</span><span class="p">;</span>
<span class="nx">node</span><span class="p">.</span><span class="nx">traverse</span><span class="p">({</span>
<span class="nx">before</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">copy</span> <span class="o">=</span> <span class="nx">dal</span><span class="p">(</span><span class="nx">el</span><span class="p">).</span><span class="nx">copy</span><span class="p">();</span>
+ <span class="kd">var</span> <span class="nx">copy</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">copy</span><span class="p">();</span>
<span class="nx">parent</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">copy</span><span class="p">);</span>
- <span class="k">if</span> <span class="p">(</span><span class="nx">wrap</span><span class="p">.</span><span class="nx">isFull</span><span class="p">())</span> <span class="p">{</span>
- <span class="nx">path</span> <span class="o">=</span> <span class="nx">copy</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="nx">wrap</span><span class="p">.</span><span class="nx">last</span><span class="p">());</span>
- <span class="nx">parent</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">lastLeaf</span><span class="p">();</span>
- <span class="nx">copy</span><span class="p">.</span><span class="nx">detach</span><span class="p">();</span>
- <span class="nx">divs</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">wrap</span><span class="p">.</span><span class="nx">getHtml</span><span class="p">());</span>
- <span class="nx">wrap</span><span class="p">.</span><span class="nx">detach</span><span class="p">();</span>
- <span class="nx">wrap</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">attach</span><span class="p">();</span>
- <span class="nx">wrap</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">path</span><span class="p">);</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">wrap</span><span class="p">.</span><span class="nx">isFull</span><span class="p">())</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Guarda los ancestros del nodo que sobresale, para añadirlos
+posteriormente al contenedor nuevo</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">path</span> <span class="o">=</span> <span class="nx">copy</span><span class="p">.</span><span class="nx">path</span><span class="p">(</span><span class="nx">wrap</span><span class="p">.</span><span class="nx">last</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Elimina el elemento que sobresale del contenedor lleno</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">copy</span><span class="p">.</span><span class="nx">detach</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Agrega el contenido html del contenedor lleno al array <code>divs</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">divs</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">wrap</span><span class="p">.</span><span class="nx">getHtml</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Crea un nuevo contenedor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">wrap</span><span class="p">.</span><span class="nx">detach</span><span class="p">();</span>
+ <span class="nx">wrap</span> <span class="o">=</span> <span class="nx">wrapper</span><span class="p">.</span><span class="nx">clone</span><span class="p">().</span><span class="nx">attach</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Añade los ancestros guardados al nuevo contenedor</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">wrap</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">path</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Coloca el puntero del padre del elemento actual sobre el último de
+los ancestros</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">path</span><span class="p">.</span><span class="nx">lastLeaf</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">else</span> <span class="nx">parent</span> <span class="o">=</span> <span class="nx">copy</span><span class="p">;</span>
<span class="p">}</span>
View
@@ -1,42 +1,49 @@
-// # split()
+// # split(html, opts)
//
-// [TODO] Translate to english
+// Splits an html in several portions each of which can be contained in a
+// box with specific dimensions
//
-// Por cada nodo debemos:
+// `html`: _[String]_ A valid html string with the content to be spliited
+// `opts`: _[Object]_
//
-// 1. agregar el nodo a `wrap`
-// 2. si `wrap.isFull()`
+// * `opts.size`: _[Object]_
//
-// 1. eliminar el último nodo añadido `sobrante`
-// 2. Apilar `wrap`
-// 3. `wrap = wrapper.clone();`
-// 4. `wrap.add(sobrante);`
-//
-// En 1.4 perdemos anidamiento, así que hemos de guardar en algún
-// sitio los padres del nodo que se está intentando añadir.
-//
-// Al hacer overflow:
-//
-// 1. eliminar el último nodo añadido `sobrante`
-// 2. Apilar `wrap`
-// 3. `wrap = wrapper.clone();`
-// 4. `wrap.add(node.pathTo(sobrante));`
-//
-// Para agregar un elemento al `wrap`, debemos saber bajo que nodo lo hemos
-// de añadir, por tanto la idea de `pathLeaf` de la opción descartada puede
-// servir, renombrada a `parent`
+// * `opts.size.width`: Width of the container
+// * `opts.size.height`: Height of the container
var split = function (html, opts) {
var nodes = modal(html)
- , wrapper = dal().hide().size(opts)
+ , wrapper = dal().hide().size(opts.size)
// ## wrap
//
- // Actuará de div contenedor temporal. Tendrá el tamaño indicado en `opts`
+ // Actuará de div contenedor temporal. Tendrá el tamaño indicado en
+ // `opts.size`
, wrap = wrapper.clone().attach()
, divs = [];
+ // ## Recorrer los nodos del `html`
+ //
+ // Por cada nodo debemos:
+ //
+ // 1. agregar el nodo a `wrap`
+ // 2. si `wrap.isFull()`
+ //
+ // 1. eliminar el último nodo añadido `sobrante`
+ // 2. Apilar `wrap`
+ // 3. `wrap = wrapper.clone();`
+ // 4. `wrap.add(sobrante);`
+ //
+ // En 1.4 perdemos anidamiento, así que debemos corregirlo añadiendo también
+ // los padres del nodo que se está intentando añadir.
+ //
+ // **1.4:** `wrap.add(node.pathTo(sobrante));`
+ //
+ // Para agregar un elemento al `wrap`, debemos saber bajo que nodo lo hemos
+ // de añadir, por tanto la idea de `pathLeaf` de la opción descartada puede
+ // servir, renombrada a `parent`
+
nodes.forEach(function (node) {
@@ -50,18 +57,32 @@ var split = function (html, opts) {
node.traverse({
before: function (el) {
- var copy = dal(el).copy();
+ var copy = el.copy();
parent.add(copy);
if (wrap.isFull()) {
+
+ // Guarda los ancestros del nodo que sobresale, para añadirlos
+ // posteriormente al contenedor nuevo
path = copy.path(wrap.last());
- parent = path.lastLeaf();
+
+ // Elimina el elemento que sobresale del contenedor lleno
copy.detach();
+
+ // Agrega el contenido html del contenedor lleno al array `divs`
divs.push(wrap.getHtml());
+
+ // Crea un nuevo contenedor
wrap.detach();
wrap = wrapper.clone().attach();
+
+ // Añade los ancestros guardados al nuevo contenedor
wrap.add(path);
+
+ // Coloca el puntero del padre del elemento actual sobre el último de
+ // los ancestros
+ parent = path.lastLeaf();
}
else parent = copy;
}

0 comments on commit b919eea

Please sign in to comment.