Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Firstly, there are three results your function can have: do nothing, call <code>this.close()</code> or call <code>this.open()</code>. So ideally the resulting function will just have one if statement which determines which result is used. </p> <p>The next step is to extract all boolean code into variables. Eg <code>var leftPastCenter = this.content.getBoundingClientRect().left &gt; viewport / 2</code>. </p> <p>Finally, use boolean logic to simplify it step by step.</p> <p>Here is how I did it:</p> <p>Firstly, extract all boolean variables:</p> <pre><code>function () { var duration = +new Date() - start.time, isPastHalf = Number(duration) &lt; 250 &amp;&amp; Math.abs(delta.x) &gt; 20 || Math.abs(delta.x) &gt; viewport / 2, direction = delta.x &lt; 0, leftPastCenter = this.content.getBoundingClientRect().left &gt; viewport / 2, positiveDelta = this.isEmpty(delta) || delta.x &gt; 0, isPulled = pulled === true; // I'll assume the test is needed rather than just using pulled. if (!isScrolling) { if (isPastHalf) { if (direction) { this.close(); } else { if (leftPastCenter &amp;&amp; isPulled) { this.close(); return; } this.open(); } } else { if (leftPastCenter) { if (positiveDelta) { this.close(); return; } this.open(); return; } this.close(); } } } </code></pre> <p>The easiest part to pull out is realizing if <code>isScrolling</code> is true, nothing ever happens. This immediately gets rid of one level of nesting:</p> <pre><code> // above same if (isScrolling) { return; } if (isPastHalf) { if (direction) { this.close(); } else { if (leftPastCenter &amp;&amp; isPulled) { this.close(); return; } this.open(); } } else { if (leftPastCenter) { if (positiveDelta) { this.close(); return; } this.open(); return; } this.close(); } } </code></pre> <p>Now look at the cases <code>this.open()</code> are called. If <code>isPastHalf</code> is true, <code>this.open()</code> is only called when <code>!direction</code> and <code>!(leftPastCenter &amp;&amp; isPulled)</code>. If <code>isPastHalf</code> is false, then <code>this.open()</code> is only called when <code>leftPastCenter</code> and <code>!positiveDelta</code>:</p> <pre><code> // above same if (isScrolling) { return; } if (isPastHalf) { if (!direction &amp;&amp; !(leftPastCenter &amp;&amp; isPulled)) { this.open(); } else { this.close(); } } else { if (leftPastCenter &amp;&amp; !positiveDelta) { this.open(); } else { this.close(); } } </code></pre> <p>Flipping the ifs (so <code>this.close()</code> comes first), makes the code a bit neater, and gives my final version:</p> <pre><code> function () { var duration = +new Date() - start.time, isPastHalf = Number(duration) &lt; 250 &amp;&amp; Math.abs(delta.x) &gt; 20 || Math.abs(delta.x) &gt; viewport / 2, direction = delta.x &lt; 0, leftPastCenter = this.content.getBoundingClientRect().left &gt; viewport / 2, positiveDelta = this.isEmpty(delta) || delta.x &gt; 0, isPulled = pulled === true; // I'll assume the test is needed rather than just using pulled. if (isScrolling) { return; } if (isPastHalf) { if (direction || (leftPastCenter &amp;&amp; isPulled)) { this.close(); } else { this.open(); } } else { if (!leftPastCenter || positiveDelta) { this.close(); } else { this.open(); } } } </code></pre> <p>It is difficult for me to do more, without knowing your codebase. One thing to note is <code>direction</code> and my new variable <code>positiveDelta</code> are nearly identical - you could possible remove <code>positiveDelta</code> and just use <code>direction</code>. Also, <code>direction</code> isn't a good name for a boolean, something like <code>movingLeft</code> would be better. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload