forked from bitovi/jquerypp
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathform_params.html
More file actions
106 lines (92 loc) · 27.7 KB
/
form_params.html
File metadata and controls
106 lines (92 loc) · 27.7 KB
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
<!DOCTYPE html> <html> <head> <title>form_params.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> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="jquerypp.html"> jquerypp.js </a> <a class="source" href="animate.html"> animate.js </a> <a class="source" href="compare.html"> compare.js </a> <a class="source" href="cookie.html"> cookie.js </a> <a class="source" href="dimensions.html"> dimensions.js </a> <a class="source" href="form_params.html"> form_params.js </a> <a class="source" href="range.html"> range.js </a> <a class="source" href="selection.html"> selection.js </a> <a class="source" href="styles.html"> styles.js </a> <a class="source" href="within.html"> within.js </a> <a class="source" href="default.html"> default.js </a> <a class="source" href="destroyed.html"> destroyed.js </a> <a class="source" href="drag.html"> drag.js </a> <a class="source" href="core.html"> core.js </a> <a class="source" href="limit.html"> limit.js </a> <a class="source" href="scroll.html"> scroll.js </a> <a class="source" href="step.html"> step.js </a> <a class="source" href="drop.html"> drop.js </a> <a class="source" href="fastfix.html"> fastfix.js </a> <a class="source" href="hover.html"> hover.js </a> <a class="source" href="key.html"> key.js </a> <a class="source" href="livehack.html"> livehack.js </a> <a class="source" href="pause.html"> pause.js </a> <a class="source" href="resize.html"> resize.js </a> <a class="source" href="reverse.html"> reverse.js </a> <a class="source" href="swipe.html"> swipe.js </a> <a class="source" href="json.html"> json.js </a> <a class="source" href="vector.html"> vector.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> form_params.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">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>use to parse bracket notation like my[name][attribute]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">keyBreaker</span> <span class="o">=</span> <span class="sr">/[^\[\]]+/g</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">¶</a> </div> <p>converts values that look like numbers and booleans and removes empty strings</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">convertValue</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">isNumeric</span><span class="p">(</span><span class="nx">value</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="s1">'true'</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="s1">'false'</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">===</span> <span class="s1">''</span> <span class="o">||</span> <span class="nx">value</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">undefined</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">value</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">¶</a> </div> <p>Access nested data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nestData</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">elem</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">parts</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">seen</span><span class="p">,</span> <span class="nx">fullName</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">parts</span><span class="p">.</span><span class="nx">shift</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">¶</a> </div> <p>Keep track of the dot separated fullname. Used to uniquely track seen values
and if they should be converted to an array or not</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">fullName</span> <span class="o">=</span> <span class="nx">fullName</span> <span class="o">?</span> <span class="nx">fullName</span> <span class="o">+</span> <span class="s1">'.'</span> <span class="o">+</span> <span class="nx">name</span> <span class="o">:</span> <span class="nx">name</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">parts</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="p">{};</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">¶</a> </div> <p>Recursive call</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nestData</span><span class="p">(</span><span class="nx">elem</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">],</span> <span class="nx">parts</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">seen</span><span class="p">,</span> <span class="nx">fullName</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</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">¶</a> </div> <p>Handle same name case, as well as "last checkbox checked"
case</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">fullName</span> <span class="k">in</span> <span class="nx">seen</span> <span class="o">&&</span> <span class="nx">type</span> <span class="o">!=</span> <span class="s2">"radio"</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">$</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]))</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">name</span> <span class="k">in</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="p">[</span><span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]];</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="p">[];</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">seen</span><span class="p">[</span><span class="nx">fullName</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</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">¶</a> </div> <p>Finally, assign data</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">((</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">"radio"</span> <span class="o">||</span> <span class="nx">type</span> <span class="o">==</span> <span class="s2">"checkbox"</span><span class="p">)</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">elem</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">":checked"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">data</span><span class="p">[</span><span class="nx">name</span><span class="p">].</span><span class="nx">push</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">formParams</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">convert</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">¶</a> </div> <p>Quick way to determine if something is a boolean</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span> <span class="o">!!</span> <span class="nx">params</span> <span class="o">===</span> <span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">convert</span> <span class="o">=</span> <span class="nx">params</span><span class="p">;</span>
<span class="nx">params</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">params</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">setParams</span><span class="p">(</span><span class="nx">params</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">getParams</span><span class="p">(</span><span class="nx">convert</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">setParams</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">params</span><span class="p">)</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">¶</a> </div> <p>Find all the inputs</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">"[name]"</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$this</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
<span class="nx">value</span> <span class="o">=</span> <span class="nx">params</span><span class="p">[</span><span class="nx">$this</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"name"</span><span class="p">)];</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Don't do all this work if there's no value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">!==</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Nested these if statements for performance</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">$this</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">":radio"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$this</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">==</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$this</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"checked"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">$this</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">":checkbox"</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Convert single value to an array to reduce
complexity</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">?</span> <span class="nx">value</span> <span class="o">:</span> <span class="p">[</span><span class="nx">value</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">inArray</span><span class="p">(</span><span class="nx">$this</span><span class="p">.</span><span class="nx">val</span><span class="p">(),</span> <span class="nx">value</span><span class="p">)</span> <span class="o">></span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$this</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"checked"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">$this</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="nx">getParams</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">convert</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>This is used to keep track of the checkbox names that we've
already seen, so we know that we should return an array if
we see it multiple times. Fixes last checkbox checked bug.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">seen</span> <span class="o">=</span> <span class="p">{},</span>
<span class="nx">current</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">"[name]:not(:disabled)"</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">$this</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">),</span>
<span class="nx">type</span> <span class="o">=</span> <span class="nx">$this</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"type"</span><span class="p">),</span>
<span class="nx">name</span> <span class="o">=</span> <span class="nx">$this</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"name"</span><span class="p">),</span>
<span class="nx">value</span> <span class="o">=</span> <span class="nx">$this</span><span class="p">.</span><span class="nx">val</span><span class="p">(),</span>
<span class="nx">parts</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Don't accumulate submit buttons and nameless elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">"submit"</span> <span class="o">||</span> <span class="o">!</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Figure out name parts</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">parts</span> <span class="o">=</span> <span class="nx">name</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">keyBreaker</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">parts</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">parts</span> <span class="o">=</span> <span class="p">[</span><span class="nx">name</span><span class="p">];</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Convert the value</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">convert</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">value</span> <span class="o">=</span> <span class="nx">convertValue</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Assign data recursively</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nestData</span><span class="p">(</span><span class="nx">$this</span><span class="p">,</span> <span class="nx">type</span><span class="p">,</span> <span class="nx">data</span><span class="p">,</span> <span class="nx">parts</span><span class="p">,</span> <span class="nx">value</span><span class="p">,</span> <span class="nx">seen</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">data</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">;</span>
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>