[build][m]: regular build of recline.js and docs (have not done for 2+ weeks).
This commit is contained in:
Rufus Pollock
@@ -51,7 +51,9 @@ thttp://www.uselesscode.org/javascript/csv/</p> </td> <t
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
|
||||
<span class="kd">var</span> <span class="nx">trm</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">trim</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">separator</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">separator</span> <span class="o">||</span> <span class="s1">','</span><span class="p">;</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">delimiter</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">delimiter</span> <span class="o">||</span> <span class="s1">'"'</span><span class="p">;</span>
|
||||
|
||||
|
||||
<span class="kd">var</span> <span class="nx">cur</span> <span class="o">=</span> <span class="s1">''</span><span class="p">,</span> <span class="c1">// The character we are currently processing.</span>
|
||||
<span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
|
||||
<span class="nx">fieldQuoted</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
|
||||
@@ -81,13 +83,13 @@ thttp://www.uselesscode.org/javascript/csv/</p> </td> <t
|
||||
<span class="nx">row</span> <span class="o">=</span> <span class="p">[];</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>Flush the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">field</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="nx">fieldQuoted</span> <span class="o">=</span> <span class="kc">false</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-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>If it's not a ", add it to the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">!==</span> <span class="s1">'"'</span><span class="p">)</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-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>If it's not a delimiter, add it to the field buffer</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">cur</span> <span class="o">!==</span> <span class="nx">delimiter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span> <span class="o">+=</span> <span class="nx">cur</span><span class="p">;</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">inQuote</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>We are not in a quote, start a quote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="nx">fieldQuoted</span> <span class="o">=</span> <span class="kc">true</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-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Next char is ", this is an escaped "</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'"'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span> <span class="o">+=</span> <span class="s1">'"'</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>Skip the next char</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">1</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-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Next char is delimiter, this is an escaped delimiter</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">charAt</span><span class="p">(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="nx">delimiter</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">field</span> <span class="o">+=</span> <span class="nx">delimiter</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>Skip the next char</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">i</span> <span class="o">+=</span> <span class="mi">1</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-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>It's not escaping, so end quote</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">inQuote</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
@@ -35,6 +35,7 @@ If not defined (or id not provided) id will be autogenerated.</p> </
|
||||
<span class="nx">backend</span><span class="p">.</span><span class="nx">addDataset</span><span class="p">(</span><span class="nx">datasetInfo</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">dataset</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">Dataset</span><span class="p">({</span><span class="nx">id</span><span class="o">:</span> <span class="nx">metadata</span><span class="p">.</span><span class="nx">id</span><span class="p">},</span> <span class="nx">backend</span><span class="p">);</span>
|
||||
<span class="nx">dataset</span><span class="p">.</span><span class="nx">fetch</span><span class="p">();</span>
|
||||
<span class="nx">dataset</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
|
||||
<span class="k">return</span> <span class="nx">dataset</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">¶</a> </div> <h2>Memory Backend - uses in-memory data</h2>
|
||||
|
||||
|
||||
@@ -47,22 +47,13 @@ generate the element itself (you can then append view.el to the DOM.</p>
|
||||
<span class="s1"> <label>Group Column (x-axis)</label> \</span>
|
||||
<span class="s1"> <div class="input editor-group"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> <option value="">Please choose ...</option> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-series-group"> \</span>
|
||||
<span class="s1"> <div class="editor-series"> \</span>
|
||||
<span class="s1"> <label>Series <span>A (y-axis)</span></label> \</span>
|
||||
<span class="s1"> <div class="input"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-buttons"> \</span>
|
||||
@@ -74,13 +65,33 @@ generate the element itself (you can then append view.el to the DOM.</p>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="panel graph"></div> \</span>
|
||||
<span class="s1"> <div class="panel graph"> \</span>
|
||||
<span class="s1"> <div class="js-temp-notice alert alert-block"> \</span>
|
||||
<span class="s1"> <h3 class="alert-heading">Hey there!</h3> \</span>
|
||||
<span class="s1"> <p>There\'s no graph here yet because we don\'t know what fields you\'d like to see plotted.</p> \</span>
|
||||
<span class="s1"> <p>Please tell us by <strong>using the menu on the right</strong> and a graph will automatically appear.</p> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"></div> \</span>
|
||||
<span class="s1">'</span><span class="p">,</span>
|
||||
<span class="nx">templateSeriesEditor</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="editor-series js-series-{{seriesIndex}}"> \</span>
|
||||
<span class="s1"> <label>Series <span>{{seriesName}} (y-axis)</span> \</span>
|
||||
<span class="s1"> [<a href="#remove" class="action-remove-series">Remove</a>] \</span>
|
||||
<span class="s1"> </label> \</span>
|
||||
<span class="s1"> <div class="input"> \</span>
|
||||
<span class="s1"> <select> \</span>
|
||||
<span class="s1"> {{#fields}} \</span>
|
||||
<span class="s1"> <option value="{{id}}">{{label}}</option> \</span>
|
||||
<span class="s1"> {{/fields}} \</span>
|
||||
<span class="s1"> </select> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'change form select'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span><span class="p">,</span>
|
||||
<span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'addSeries'</span><span class="p">,</span>
|
||||
<span class="s1">'click .editor-add'</span><span class="o">:</span> <span class="s1">'_onAddSeries'</span><span class="p">,</span>
|
||||
<span class="s1">'click .action-remove-series'</span><span class="o">:</span> <span class="s1">'removeSeries'</span><span class="p">,</span>
|
||||
<span class="s1">'click .action-toggle-help'</span><span class="o">:</span> <span class="s1">'toggleHelp'</span>
|
||||
<span class="p">},</span>
|
||||
@@ -88,14 +99,19 @@ generate the element itself (you can then append view.el to the DOM.</p>
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</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">el</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</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>we need the model.fields to render properly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">,</span> <span class="s1">'redraw'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">redraw</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>because we cannot redraw when hidden we may need when becoming visible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">group</span><span class="o">:</span> <span class="kc">null</span><span class="p">,</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">group</span><span class="o">:</span> <span class="kc">null</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>so that at least one series chooser box shows up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">series</span><span class="o">:</span> <span class="p">[],</span>
|
||||
<span class="nx">graphType</span><span class="o">:</span> <span class="s1">'lines-and-points'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">options</span><span class="p">.</span><span class="nx">state</span>
|
||||
@@ -105,17 +121,41 @@ generate the element itself (you can then append view.el to the DOM.</p>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</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>now set a load of stuff up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$graph</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.panel.graph'</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>for use later when adding additional series
|
||||
could be simpler just to have a common template!</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series'</span><span class="p">).</span><span class="nx">clone</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$graph</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.panel.graph'</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>set up editor from state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'graphType'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">'.editor-type'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'graphType'</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'group'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">'.editor-group'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'group'</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>ensure at least one series box shows up</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tmpSeries</span> <span class="o">=</span> <span class="p">[</span><span class="s2">""</span><span class="p">];</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'series'</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">tmpSeries</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'series'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">tmpSeries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">series</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">addSeries</span><span class="p">(</span><span class="nx">idx</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">_selectOption</span><span class="p">(</span><span class="s1">'.editor-series.js-series-'</span> <span class="o">+</span> <span class="nx">idx</span><span class="p">,</span> <span class="nx">series</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="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>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">id</span> <span class="o">+</span> <span class="s1">' select > option'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">options</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="nx">opt</span><span class="p">){</span>
|
||||
<span class="k">if</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">value</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'selected'</span><span class="p">,</span><span class="s1">'selected'</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="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onEditorSubmit</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">select</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-group select'</span><span class="p">);</span>
|
||||
<span class="nx">$editor</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">map</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">$editor</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">$series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series select'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="nx">$series</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="kd">var</span> <span class="nx">updatedState</span> <span class="o">=</span> <span class="p">{</span>
|
||||
@@ -127,50 +167,59 @@ could be simpler just to have a common template!</p> </td>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">redraw</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</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>There appear to be issues generating a Flot graph if either:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <ul>
|
||||
<span class="nx">redraw</span><span class="o">:</span> <span class="kd">function</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>There appear to be issues generating a Flot graph if either:</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <ul>
|
||||
<li><p>The relevant div that graph attaches to his hidden at the moment of creating the plot -- Flot will complain with</p>
|
||||
|
||||
<p>Uncaught Invalid dimensions for plot, width = 0, height = 0</p></li>
|
||||
<li>There is no data for the plot -- either same error or may have issues later with errors like 'non-existent node-value' </li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">areWeVisible</span> <span class="o">=</span> <span class="o">!</span><span class="nx">jQuery</span><span class="p">.</span><span class="nx">expr</span><span class="p">.</span><span class="nx">filters</span><span class="p">.</span><span class="nx">hidden</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
|
||||
<span class="k">if</span> <span class="p">((</span><span class="o">!</span><span class="nx">areWeVisible</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">needToRedraw</span> <span class="o">=</span> <span class="kc">true</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-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>check we have something to plot</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'group'</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'series'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getGraphOptions</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">plot</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$graph</span><span class="p">,</span> <span class="nx">series</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupTooltips</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">createSeries</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getGraphOptions</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">plot</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">plot</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$graph</span><span class="p">,</span> <span class="nx">series</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupTooltips</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>create this.plot and cache it
|
||||
if (!this.plot) {
|
||||
this.plot = $.plot(this.$graph, series, options);
|
||||
} else {
|
||||
this.plot.parseOptions(options);
|
||||
this.plot.setData(this.createSeries());
|
||||
this.plot.resize();
|
||||
this.plot.setupGrid();
|
||||
this.plot.draw();
|
||||
}</p> </td> <td class="code"> <div class="highlight"><pre> <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>needs to be function as can depend on state</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getGraphOptions</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">typeId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>special tickformatter to show labels rather than numbers</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tickFormatter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</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> <h3>getGraphOptions</h3>
|
||||
|
||||
<p>Get options for Flot Graph</p>
|
||||
|
||||
<p>needs to be function as can depend on state</p>
|
||||
|
||||
<p>@param typeId graphType id (lines, lines-and-points etc)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">getGraphOptions</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">typeId</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>special tickformatter to show labels rather than numbers
|
||||
TODO: we should really use tickFormatter and 1 interval ticks if (and
|
||||
only if) x-axis values are non-numeric
|
||||
However, that is non-trivial to work out from a dataset (datasets may
|
||||
have no field type info). Thus at present we only do this for bars.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">tickFormatter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">val</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">val</span><span class="p">].</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</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>if the value was in fact a number we want that not the </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">out</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'number'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">val</span><span class="p">].</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</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>if the value was in fact a number we want that not the </p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">out</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'number'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">val</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="nx">out</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">val</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>TODO: we should really use tickFormatter and 1 interval ticks if (and
|
||||
only if) x-axis values are non-numeric
|
||||
However, that is non-trivial to work out from a dataset (datasets may
|
||||
have no field type info). Thus at present we only do this for bars.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">xaxis</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>check for time series on x-axis</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'group'</span><span class="p">)).</span><span class="nx">get</span><span class="p">(</span><span class="s1">'type'</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'date'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">xaxis</span><span class="p">.</span><span class="nx">mode</span> <span class="o">=</span> <span class="s1">'time'</span><span class="p">;</span>
|
||||
<span class="nx">xaxis</span><span class="p">.</span><span class="nx">timeformat</span> <span class="o">=</span> <span class="s1">'%y-%b'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">optionsPerGraphType</span> <span class="o">=</span> <span class="p">{</span>
|
||||
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">series</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
|
||||
<span class="nx">grid</span><span class="o">:</span> <span class="p">{</span> <span class="nx">hoverable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">clickable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="s1">'lines-and-points'</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -178,6 +227,7 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="nx">points</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span>
|
||||
<span class="nx">lines</span><span class="o">:</span> <span class="p">{</span> <span class="nx">show</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">xaxis</span><span class="o">:</span> <span class="nx">xaxis</span><span class="p">,</span>
|
||||
<span class="nx">grid</span><span class="o">:</span> <span class="p">{</span> <span class="nx">hoverable</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">clickable</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">bars</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -201,7 +251,7 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
<span class="k">return</span> <span class="nx">options</span><span class="p">[</span><span class="nx">typeId</span><span class="p">];</span>
|
||||
<span class="k">return</span> <span class="nx">optionsPerGraphType</span><span class="p">[</span><span class="nx">typeId</span><span class="p">];</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setupTooltips</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -227,12 +277,20 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s2">"#flot-tooltip"</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">1</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 back from 'index' value on x-axis (e.g. in cases where non-number values)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">x</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">item</span><span class="p">.</span><span class="nx">datapoint</span><span class="p">[</span><span class="mi">1</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>it's horizontal so we have to flip</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">===</span> <span class="s1">'bars'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">_tmp</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
|
||||
<span class="nx">y</span> <span class="o">=</span> <span class="nx">_tmp</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>convert back from 'index' value on x-axis (e.g. in cases where non-number values)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">x</span><span class="p">])</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">[</span><span class="nx">x</span><span class="p">].</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
|
||||
<span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">.</span><span class="nx">toFixed</span><span class="p">(</span><span class="mi">2</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>is it time series</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">xfield</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">isDateTime</span> <span class="o">=</span> <span class="nx">xfield</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'type'</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'date'</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nb">parseInt</span><span class="p">(</span><span class="nx">x</span><span class="p">)).</span><span class="nx">toLocaleDateString</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s1">'<%= group %> = <%= x %>, <%= series %> = <%= y %>'</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">group</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">,</span>
|
||||
@@ -256,11 +314,16 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">series</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">xfield</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">group</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">xfield</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>time series</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">isDateTime</span> <span class="o">=</span> <span class="nx">xfield</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'type'</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'date'</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">isDateTime</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">yfield</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">field</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">getFieldValue</span><span class="p">(</span><span class="nx">yfield</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">x</span> <span class="o">===</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">x</span> <span class="o">=</span> <span class="nx">index</span><span class="p">;</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>horizontal bar chart</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">==</span> <span class="s1">'bars'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>horizontal bar chart</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">attributes</span><span class="p">.</span><span class="nx">graphType</span> <span class="o">==</span> <span class="s1">'bars'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">points</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">y</span><span class="p">,</span> <span class="nx">x</span><span class="p">]);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">points</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">]);</span>
|
||||
@@ -269,45 +332,36 @@ have no field type info). Thus at present we only do this for bars.</p>
|
||||
<span class="nx">series</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">data</span><span class="o">:</span> <span class="nx">points</span><span class="p">,</span> <span class="nx">label</span><span class="o">:</span> <span class="nx">field</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">series</span><span class="p">;</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>Public: Adds a new empty series select box to the editor.</p>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Public: Adds a new empty series select box to the editor.</p>
|
||||
|
||||
<p>All but the first select box will have a remove button that allows them
|
||||
to be removed.</p>
|
||||
<p>@param [int] idx index of this series in the list of series</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$seriesClone</span><span class="p">.</span><span class="nx">clone</span><span class="p">(),</span>
|
||||
<span class="nx">label</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'label'</span><span class="p">),</span>
|
||||
<span class="nx">index</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">idx</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="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">seriesIndex</span><span class="o">:</span> <span class="nx">idx</span><span class="p">,</span>
|
||||
<span class="nx">seriesName</span><span class="o">:</span> <span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">idx</span> <span class="o">+</span> <span class="mi">64</span> <span class="o">+</span> <span class="mi">1</span><span class="p">),</span>
|
||||
<span class="p">},</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series-group'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">' [<a href="#remove" class="action-remove-series">Remove</a>]'</span><span class="p">);</span>
|
||||
<span class="nx">label</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">$series</span><span class="p">.</span><span class="nx">length</span> <span class="o">+</span> <span class="mi">64</span><span class="p">));</span>
|
||||
<span class="kd">var</span> <span class="nx">htmls</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">templateSeriesEditor</span><span class="p">,</span> <span class="nx">data</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series-group'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">htmls</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</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>Public: Removes a series list item from the editor.</p>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">_onAddSeries</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">addSeries</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'series'</span><span class="p">).</span><span class="nx">length</span><span class="p">);</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Public: Removes a series list item from the editor.</p>
|
||||
|
||||
<p>Also updates the labels of the remaining series elements.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">removeSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">parent</span><span class="p">().</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_updateSeries</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$series</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="nx">index</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">labelSpan</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">prev</span><span class="p">().</span><span class="nx">find</span><span class="p">(</span><span class="s1">'span'</span><span class="p">);</span>
|
||||
<span class="nx">labelSpan</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nb">String</span><span class="p">.</span><span class="nx">fromCharCode</span><span class="p">(</span><span class="nx">index</span> <span class="o">+</span> <span class="mi">65</span><span class="p">));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">onEditorSubmit</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">toggleHelp</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-info'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'editor-hide-info'</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>Private: Resets the series property to reference the select elements.</p>
|
||||
|
||||
<p>Returns itself.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_updateSeries</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">$series</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.editor-series select'</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
|
||||
@@ -31,16 +31,7 @@
|
||||
<span class="s1">'click .row-header-menu'</span><span class="o">:</span> <span class="s1">'onRowHeaderClick'</span><span class="p">,</span>
|
||||
<span class="s1">'click .root-header-menu'</span><span class="o">:</span> <span class="s1">'onRootHeaderClick'</span><span class="p">,</span>
|
||||
<span class="s1">'click .data-table-menu li a'</span><span class="o">:</span> <span class="s1">'onMenuClick'</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>TODO: delete or re-enable (currently this code is not used from anywhere except deprecated or disabled methods (see above)).
|
||||
showDialog: function(template, data) {
|
||||
if (!data) data = {};
|
||||
util.show('dialog');
|
||||
util.render(template, 'dialog-content', data);
|
||||
util.observeExit($('.dialog-content'), function() {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
},</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>======================================================
|
||||
<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>======================================================
|
||||
Column and row menus</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onColumnHeaderClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">closest</span><span class="p">(</span><span class="s1">'.column-header'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
@@ -72,20 +63,20 @@ Column and row menus</p> </td> <td class="code">
|
||||
<span class="nx">filter</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addTermFilter</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">,</span> <span class="s1">''</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">transform</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showTransformDialog</span><span class="p">(</span><span class="s1">'transform'</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">sortAsc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'asc'</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">sortDesc</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">setColumnSort</span><span class="p">(</span><span class="s1">'desc'</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">hideColumn</span><span class="p">();</span> <span class="p">},</span>
|
||||
<span class="nx">showColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">self</span><span class="p">.</span><span class="nx">showColumn</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span> <span class="p">},</span>
|
||||
<span class="nx">deleteRow</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</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">¶</a> </div> <p>important this is == as the currentRow will be string (as comes
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</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>important this is == as the currentRow will be string (as comes
|
||||
from DOM) while id may be int</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">id</span> <span class="o">==</span> <span class="nx">self</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentRow</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">destroy</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">remove</span><span class="p">(</span><span class="nx">doc</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Row deleted successfully"</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">"Row deleted successfully"</span><span class="p">});</span>
|
||||
<span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Errorz! "</span> <span class="o">+</span> <span class="nx">err</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">"Errorz! "</span> <span class="o">+</span> <span class="nx">err</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
@@ -93,33 +84,16 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">showTransformColumnDialog</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog-content'</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">my</span><span class="p">.</span><span class="nx">ColumnTransform</span><span class="p">({</span>
|
||||
<span class="nx">model</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</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>pass the flash message up the chain</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">view</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">flash</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="nx">flash</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">;</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">empty</span><span class="p">();</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">observeExit</span><span class="p">(</span><span class="nx">$el</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog'</span><span class="p">).</span><span class="nx">draggable</span><span class="p">({</span> <span class="nx">handle</span><span class="o">:</span> <span class="s1">'.dialog-header'</span><span class="p">,</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s1">'move'</span> <span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">showTransformDialog</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog-content'</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">DataTransform</span><span class="p">({</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">empty</span><span class="p">();</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">observeExit</span><span class="p">(</span><span class="nx">$el</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="s1">'dialog'</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.dialog'</span><span class="p">).</span><span class="nx">draggable</span><span class="p">({</span> <span class="nx">handle</span><span class="o">:</span> <span class="s1">'.dialog-header'</span><span class="p">,</span> <span class="nx">cursor</span><span class="o">:</span> <span class="s1">'move'</span> <span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">modal</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setColumnSort</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">order</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -131,7 +105,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="nx">hideColumn</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">hiddenFields</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">);</span>
|
||||
<span class="nx">hiddenFields</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tempState</span><span class="p">.</span><span class="nx">currentColumn</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</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>change event not being triggered (because it is an array?) so trigger manually</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@@ -139,7 +113,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="kd">var</span> <span class="nx">hiddenFields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">without</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">),</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s1">'column'</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">hiddenFields</span><span class="o">:</span> <span class="nx">hiddenFields</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</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>======================================================</p>
|
||||
<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>======================================================</p>
|
||||
|
||||
<h4>Templating</h4> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">template</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <table class="recline-grid table-striped table-condensed" cellspacing="0"> \</span>
|
||||
@@ -183,7 +157,7 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
|
||||
<span class="nx">toTemplateJSON</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">modelData</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</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>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="p">});</span>
|
||||
<span class="nx">modelData</span><span class="p">.</span><span class="nx">notEmpty</span> <span class="o">=</span> <span class="p">(</span> <span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</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>TODO: move this sort of thing into a toTemplateJSON method on Dataset?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">modelData</span><span class="p">.</span><span class="nx">fields</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">field</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">field</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span> <span class="p">});</span>
|
||||
<span class="k">return</span> <span class="nx">modelData</span><span class="p">;</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
@@ -203,10 +177,10 @@ from DOM) while id may be int</p> </td> <td class="code"
|
||||
<span class="p">});</span>
|
||||
<span class="nx">newView</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.recline-grid'</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'no-hidden'</span><span class="p">,</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'hiddenFields'</span><span class="p">).</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">));</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</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> <h2>GridRow View for rendering an individual document.</h2>
|
||||
<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> <h2>GridRow View for rendering an individual document.</h2>
|
||||
|
||||
<p>Since we want this to update in place it is up to creator to provider the element to attach to.</p>
|
||||
|
||||
@@ -269,8 +243,20 @@ var row = new GridRow({
|
||||
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">toTemplateJSON</span><span class="p">());</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="k">this</span><span class="p">;</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>===================
|
||||
Cell Editor methods</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</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>===================
|
||||
Cell Editor methods</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">cellEditorTemplate</span><span class="o">:</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="menu-container data-table-cell-editor"> \</span>
|
||||
<span class="s1"> <textarea class="data-table-cell-editor-editor" bind="textarea">{{value}}</textarea> \</span>
|
||||
<span class="s1"> <div id="data-table-cell-editor-actions"> \</span>
|
||||
<span class="s1"> <div class="data-table-cell-editor-action"> \</span>
|
||||
<span class="s1"> <button class="okButton btn primary">Update</button> \</span>
|
||||
<span class="s1"> <button class="cancelButton btn danger">Cancel</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
|
||||
<span class="nx">onEditClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">editing</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.data-table-cell-editor-editor'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">editing</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">editing</span><span class="p">.</span><span class="nx">text</span><span class="p">()).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-edit'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
@@ -278,10 +264,12 @@ Cell Editor methods</p> </td> <td class="code">
|
||||
<span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"hidden"</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">siblings</span><span class="p">(</span><span class="s1">'.data-table-cell-value'</span><span class="p">);</span>
|
||||
<span class="nx">cell</span><span class="p">.</span><span class="nx">data</span><span class="p">(</span><span class="s2">"previousContents"</span><span class="p">,</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">());</span>
|
||||
<span class="nx">util</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'cellEditor'</span><span class="p">,</span> <span class="nx">cell</span><span class="p">,</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">()});</span>
|
||||
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">cellEditorTemplate</span><span class="p">,</span> <span class="p">{</span><span class="nx">value</span><span class="o">:</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">text</span><span class="p">()});</span>
|
||||
<span class="nx">cell</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onEditorOK</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">cell</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">rowId</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'tr'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-id'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">field</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">.</span><span class="nx">parents</span><span class="p">(</span><span class="s1">'td'</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-field'</span><span class="p">);</span>
|
||||
@@ -289,12 +277,13 @@ Cell Editor methods</p> </td> <td class="code">
|
||||
<span class="kd">var</span> <span class="nx">newData</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">newData</span><span class="p">[</span><span class="nx">field</span><span class="p">]</span> <span class="o">=</span> <span class="nx">newValue</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">newData</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Updating row..."</span><span class="p">,</span> <span class="p">{</span><span class="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">"Updating row..."</span><span class="p">,</span> <span class="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">().</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s2">"Row updated successfully"</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</span><span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s2">"Row updated successfully"</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</span><span class="p">});</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Error saving row'</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span>
|
||||
<span class="nx">message</span><span class="o">:</span> <span class="s1">'Error saving row'</span><span class="p">,</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span>
|
||||
<span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
@@ -15,7 +15,7 @@ have the following (optional) configuration options:</p>
|
||||
|
||||
<pre>
|
||||
{
|
||||
// geomField if specified will be used in preference to lat/lon
|
||||
// geomField if specified will be used in preference to lat/lon
|
||||
geomField: {id of field containing geometry in the dataset}
|
||||
lonField: {id of field containing longitude in the dataset}
|
||||
latField: {id of field containing latitude in the dataset}
|
||||
@@ -72,6 +72,11 @@ have the following (optional) configuration options:</p>
|
||||
<span class="s1"> <div class="editor-buttons"> \</span>
|
||||
<span class="s1"> <button class="btn editor-update-map">Update</button> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="editor-options" > \</span>
|
||||
<span class="s1"> <label class="checkbox"> \</span>
|
||||
<span class="s1"> <input type="checkbox" id="editor-auto-zoom" checked="checked" /> \</span>
|
||||
<span class="s1"> Auto zoom to features</label> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <input type="hidden" class="editor-id" value="map-1" /> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </form> \</span>
|
||||
@@ -83,7 +88,8 @@ If not found, the user will need to define the fields via the editor.</p>
|
||||
<span class="nx">longitudeFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'lon'</span><span class="p">,</span><span class="s1">'longitude'</span><span class="p">],</span>
|
||||
<span class="nx">geometryFieldNames</span><span class="o">:</span> <span class="p">[</span><span class="s1">'geom'</span><span class="p">,</span><span class="s1">'the_geom'</span><span class="p">,</span><span class="s1">'geometry'</span><span class="p">,</span><span class="s1">'spatial'</span><span class="p">,</span><span class="s1">'location'</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>Define here events for UI elements</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
<span class="s1">'click .editor-update-map'</span><span class="o">:</span> <span class="s1">'onEditorSubmit'</span><span class="p">,</span>
|
||||
<span class="s1">'change .editor-field-type'</span><span class="o">:</span> <span class="s1">'onFieldTypeChange'</span>
|
||||
<span class="s1">'change .editor-field-type'</span><span class="o">:</span> <span class="s1">'onFieldTypeChange'</span><span class="p">,</span>
|
||||
<span class="s1">'change #editor-auto-zoom'</span><span class="o">:</span> <span class="s1">'onAutoZoomChange'</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -96,12 +102,25 @@ If not found, the user will need to define the fields via the editor.</p>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">_setupGeometryField</span><span class="p">()</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">render</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>Listen to changes in the documents</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span><span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span><span class="nx">doc</span><span class="p">)});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span><span class="nx">doc</span><span class="p">);</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span><span class="nx">doc</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span><span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">(</span><span class="s1">'remove'</span><span class="p">,</span><span class="nx">doc</span><span class="p">)});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span><span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">(</span><span class="s1">'reset'</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>If the div was hidden, Leaflet needs to recalculate some sizes
|
||||
to display properly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">map</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">invalidateSize</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(){</span><span class="nx">self</span><span class="p">.</span><span class="nx">redraw</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">)});</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">,</span><span class="kd">function</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>If the div was hidden, Leaflet needs to recalculate some sizes
|
||||
to display properly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">map</span><span class="p">){</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">invalidateSize</span><span class="p">();</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">_zoomPending</span> <span class="o">&&</span> <span class="nx">self</span><span class="p">.</span><span class="nx">autoZoom</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">_zoomToFeatures</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">_zoomPending</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">visible</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'view:hide'</span><span class="p">,</span><span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">visible</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
@@ -113,6 +132,7 @@ to display properly</p> </td> <td class="code">
|
||||
<span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">ObjectState</span><span class="p">(</span><span class="nx">stateData</span><span class="p">);</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">autoZoom</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">mapReady</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">render</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>Public: Adds the necessary elements to the page.</p>
|
||||
@@ -173,6 +193,13 @@ to display properly</p> </td> <td class="code">
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">clearLayers</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_add</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">currentDocuments</span><span class="p">.</span><span class="nx">models</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">action</span> <span class="o">!=</span> <span class="s1">'reset'</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">autoZoom</span><span class="p">){</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">visible</span><span class="p">){</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_zoomToFeatures</span><span class="p">();</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_zoomPending</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</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>UI Event handlers</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Public: Update map with user options</p>
|
||||
|
||||
@@ -205,6 +232,10 @@ type selected.</p> </td> <td class="code">
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-field-type-geom'</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="s1">'.editor-field-type-latlon'</span><span class="p">).</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">onAutoZoomChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">autoZoom</span> <span class="o">=</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">autoZoom</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>Private: Add one or n features to the map</p>
|
||||
|
||||
<p>For each document passed, a GeoJSON geometry will be extracted and added
|
||||
@@ -212,7 +243,6 @@ to the features layer. If an exception is thrown, the process will be
|
||||
stopped and an error notification shown.</p>
|
||||
|
||||
<p>Each feature will have a popup associated with all the document fields.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_add</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">docs</span><span class="p">){</span>
|
||||
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">docs</span> <span class="k">instanceof</span> <span class="nb">Array</span><span class="p">))</span> <span class="nx">docs</span> <span class="o">=</span> <span class="p">[</span><span class="nx">docs</span><span class="p">];</span>
|
||||
@@ -226,7 +256,9 @@ stopped and an error notification shown.</p>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">feature</span> <span class="k">instanceof</span> <span class="nb">Object</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>Build popup contents
|
||||
TODO: mustache?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">html</span> <span class="o">=</span> <span class="s1">''</span>
|
||||
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">){</span>
|
||||
<span class="nx">html</span> <span class="o">+=</span> <span class="s1">'<div><strong>'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'</strong>: '</span><span class="o">+</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">+</span> <span class="s1">'</div>'</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">key</span> <span class="o">==</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">))){</span>
|
||||
<span class="nx">html</span> <span class="o">+=</span> <span class="s1">'<div><strong>'</span> <span class="o">+</span> <span class="nx">key</span> <span class="o">+</span> <span class="s1">'</strong>: '</span><span class="o">+</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">+</span> <span class="s1">'</div>'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span> <span class="o">=</span> <span class="p">{</span><span class="nx">popupContent</span><span class="o">:</span> <span class="nx">html</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>Add a reference to the model id, which will allow us to
|
||||
link this Leaflet layer to a Recline doc</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">feature</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">cid</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">cid</span><span class="p">;</span>
|
||||
@@ -238,13 +270,13 @@ link this Leaflet layer to a Recline doc</p> </td> <td c
|
||||
<span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">'Wrong geometry value'</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">except</span><span class="p">.</span><span class="nx">message</span><span class="p">)</span> <span class="nx">msg</span> <span class="o">+=</span> <span class="s1">' ('</span> <span class="o">+</span> <span class="nx">except</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">')'</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">wrongSoFar</span> <span class="o"><=</span> <span class="mi">10</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">msg</span><span class="p">,{</span><span class="nx">category</span><span class="o">:</span><span class="s1">'error'</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="nx">msg</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span><span class="s1">'error'</span><span class="p">});</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">wrongSoFar</span> <span class="o">+=</span> <span class="mi">1</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">wrongSoFar</span> <span class="o"><=</span> <span class="mi">10</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Wrong geometry value'</span><span class="p">,{</span><span class="nx">category</span><span class="o">:</span><span class="s1">'error'</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="p">{</span><span class="nx">message</span><span class="o">:</span> <span class="s1">'Wrong geometry value'</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span><span class="s1">'error'</span><span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
|
||||
@@ -265,27 +297,28 @@ link this Leaflet layer to a Recline doc</p> </td> <td c
|
||||
|
||||
<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>Private: Return a GeoJSON geomtry extracted from the document fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_getGeometryFromDocument</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">doc</span><span class="p">){</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span><span class="p">){</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">)){</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>We assume that the contents of the field are a valid GeoJSON object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">)){</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>We'll create a GeoJSON like point object from the two lat/lon fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">lon</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">)){</span>
|
||||
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'string'</span><span class="p">){</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>We have a GeoJSON string representation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">parseJSON</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="p">{</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>We assume that the contents of the field are a valid GeoJSON object</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">value</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="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">)){</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>We'll create a GeoJSON like point object from the two lat/lon fields</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">lon</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">));</span>
|
||||
<span class="kd">var</span> <span class="nx">lat</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">lon</span> <span class="o">&&</span> <span class="nx">lat</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">lon</span><span class="p">))</span> <span class="o">&&</span> <span class="o">!</span><span class="nb">isNaN</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">lat</span><span class="p">)))</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">type</span><span class="o">:</span> <span class="s1">'Point'</span><span class="p">,</span>
|
||||
<span class="nx">coordinates</span><span class="o">:</span> <span class="p">[</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">)],</span>
|
||||
<span class="nx">doc</span><span class="p">.</span><span class="nx">attributes</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">)]</span>
|
||||
<span class="p">]</span>
|
||||
<span class="nx">coordinates</span><span class="o">:</span> <span class="p">[</span><span class="nx">lon</span><span class="p">,</span><span class="nx">lat</span><span class="p">]</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Private: Check if there is a field with GeoJSON geometries or alternatively,
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>Private: Check if there is a field with GeoJSON geometries or alternatively,
|
||||
two fields with lat/lon values.</p>
|
||||
|
||||
<p>If not found, the user can define them via the UI form.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupGeometryField</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="kd">var</span> <span class="nx">geomField</span><span class="p">,</span> <span class="nx">latField</span><span class="p">,</span> <span class="nx">lonField</span><span class="p">;</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">)));</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>should not overwrite if we have already set this (e.g. explicitly via state)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">)));</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>should not overwrite if we have already set this (e.g. explicitly via state)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span>
|
||||
<span class="nx">geomField</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_checkField</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">geometryFieldNames</span><span class="p">),</span>
|
||||
<span class="nx">latField</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">_checkField</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">latitudeFieldNames</span><span class="p">),</span>
|
||||
@@ -293,7 +326,7 @@ two fields with lat/lon values.</p>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">geomReady</span> <span class="o">=</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'geomField'</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'latField'</span><span class="p">)</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'lonField'</span><span class="p">)));</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Private: Check if a field in the current model exists in the provided
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Private: Check if a field in the current model exists in the provided
|
||||
list of names.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_checkField</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldNames</span><span class="p">){</span>
|
||||
<span class="kd">var</span> <span class="nx">field</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">modelFieldNames</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">pluck</span><span class="p">(</span><span class="s1">'id'</span><span class="p">);</span>
|
||||
@@ -304,7 +337,15 @@ list of names.</p> </td> <td class="code">
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Private: Sets up the Leaflet map control and the features layer.</p>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Private: Zoom to map to current features extent if any, or to the full
|
||||
extent if none.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_zoomToFeatures</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="kd">var</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">getBounds</span><span class="p">();</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">bounds</span><span class="p">){</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">fitBounds</span><span class="p">(</span><span class="nx">bounds</span><span class="p">);</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">setView</span><span class="p">(</span><span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">2</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Private: Sets up the Leaflet map control and the features layer.</p>
|
||||
|
||||
<p>The map uses a base layer from <a href="http://www.mapquest.com">MapQuest</a> based
|
||||
on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupMap</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
|
||||
@@ -325,13 +366,28 @@ on <a href="http://openstreetmap.org">OpenStreetMap</a>.</p> </td>
|
||||
<span class="nx">e</span><span class="p">.</span><span class="nx">layer</span><span class="p">.</span><span class="nx">cid</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">properties</span><span class="p">.</span><span class="nx">cid</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="p">});</span>
|
||||
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>This will be available in the next Leaflet stable release.
|
||||
In the meantime we add it manually to our layer.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">.</span><span class="nx">getBounds</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
|
||||
<span class="kd">var</span> <span class="nx">bounds</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">LatLngBounds</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_iterateLayers</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">layer</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">layer</span> <span class="k">instanceof</span> <span class="nx">L</span><span class="p">.</span><span class="nx">Marker</span><span class="p">){</span>
|
||||
<span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">layer</span><span class="p">.</span><span class="nx">getLatLng</span><span class="p">());</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">layer</span><span class="p">.</span><span class="nx">getBounds</span><span class="p">){</span>
|
||||
<span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">layer</span><span class="p">.</span><span class="nx">getBounds</span><span class="p">().</span><span class="nx">getNorthEast</span><span class="p">());</span>
|
||||
<span class="nx">bounds</span><span class="p">.</span><span class="nx">extend</span><span class="p">(</span><span class="nx">layer</span><span class="p">.</span><span class="nx">getBounds</span><span class="p">().</span><span class="nx">getSouthWest</span><span class="p">());</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">},</span> <span class="k">this</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">bounds</span><span class="p">.</span><span class="nx">getNorthEast</span><span class="p">()</span> <span class="o">!==</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="o">?</span> <span class="nx">bounds</span> <span class="o">:</span> <span class="kc">null</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">addLayer</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">features</span><span class="p">);</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">map</span><span class="p">.</span><span class="nx">setView</span><span class="p">(</span><span class="k">new</span> <span class="nx">L</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> <span class="mi">2</span><span class="p">);</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">mapReady</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-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</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-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>Private: Helper function to select an option from a select list</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_selectOption</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">id</span><span class="p">,</span><span class="nx">value</span><span class="p">){</span>
|
||||
<span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.'</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">' > select > option'</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">options</span><span class="p">){</span>
|
||||
<span class="nx">options</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="nx">opt</span><span class="p">){</span>
|
||||
|
||||
203
docs/view.html
203
docs/view.html
@@ -1,9 +1,10 @@
|
||||
<!DOCTYPE html> <html> <head> <title>view.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="model.html"> model.js </a> <a class="source" href="view-graph.html"> view-graph.js </a> <a class="source" href="view-grid.html"> view-grid.js </a> <a class="source" href="view-map.html"> view-map.js </a> <a class="source" href="view.html"> view.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> view.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="cm">/*jshint multistr:true */</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h1>Recline Views</h1>
|
||||
|
||||
<p>Recline Views are Backbone Views and in keeping with normal Backbone views
|
||||
are Widgets / Components displaying something in the DOM. Like all Backbone
|
||||
views they have a pointer to a model or a collection and is bound to an
|
||||
element.</p>
|
||||
<p>Recline Views are instances of Backbone Views and they act as 'WUI' (web
|
||||
user interface) component displaying some model object in the DOM. Like all
|
||||
Backbone views they have a pointer to a model (or a collection) and have an
|
||||
associated DOM-style element (usually this element will be bound into the
|
||||
page at some point).</p>
|
||||
|
||||
<p>Views provided by core Recline are crudely divided into two types:</p>
|
||||
|
||||
@@ -165,12 +166,6 @@ initialized the DataExplorer with the relevant views themselves.</p>
|
||||
<span class="s1"> <div class="clearfix"></div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> <div class="data-view-container"></div> \</span>
|
||||
<span class="s1"> <div class="dialog-overlay" style="display: none; z-index: 101; ">&nbsp;</div> \</span>
|
||||
<span class="s1"> <div class="dialog ui-draggable" style="display: none; z-index: 102; top: 101px; "> \</span>
|
||||
<span class="s1"> <div class="dialog-frame" style="width: 700px; visibility: visible; "> \</span>
|
||||
<span class="s1"> <div class="dialog-content dialog-border"></div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> </div> \</span>
|
||||
<span class="s1"> '</span><span class="p">,</span>
|
||||
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
|
||||
@@ -207,7 +202,8 @@ initialized the DataExplorer with the relevant views themselves.</p>
|
||||
<span class="p">}),</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>these must be called after pageViews are created</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_bindStateChanges</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>now do updates based on state (need to come after render)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'readOnly'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_bindStateChanges</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">_bindFlashNotifications</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>now do updates based on state (need to come after render)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'readOnly'</span><span class="p">))</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setReadOnly</span><span class="p">();</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'currentView'</span><span class="p">))</span> <span class="p">{</span>
|
||||
@@ -216,20 +212,16 @@ initialized the DataExplorer with the relevant views themselves.</p>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">router</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Router</span><span class="p">();</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">setupRouting</span><span class="p">();</span>
|
||||
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'query:start'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Loading data'</span><span class="p">,</span> <span class="p">{</span><span class="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span><span class="nx">message</span><span class="o">:</span> <span class="s1">'Loading data'</span><span class="p">,</span> <span class="nx">loader</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'query:done'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.doc-count'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">docCount</span> <span class="o">||</span> <span class="s1">'Unknown'</span><span class="p">);</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="s1">'Data loaded'</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</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>update navigation</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="nx">qs</span><span class="p">.</span><span class="nx">reclineQuery</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">());</span>
|
||||
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">qs</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>self.router.navigate(out);</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span><span class="nx">message</span><span class="o">:</span> <span class="s1">'Data loaded'</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span> <span class="s1">'success'</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'query:fail'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">clearNotifications</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="s1">''</span><span class="p">;</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="o">==</span> <span class="s1">'string'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">msg</span> <span class="o">=</span> <span class="nx">error</span><span class="p">;</span>
|
||||
@@ -243,14 +235,14 @@ initialized the DataExplorer with the relevant views themselves.</p>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="nx">msg</span> <span class="o">=</span> <span class="s1">'There was an error querying the backend'</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">msg</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</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-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>retrieve basic data like fields etc
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span><span class="nx">message</span><span class="o">:</span> <span class="nx">msg</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</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>retrieve basic data like fields etc
|
||||
note this.model and dataset returned are the same</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fetch</span><span class="p">()</span>
|
||||
<span class="p">.</span><span class="nx">done</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">dataset</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">query</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'query'</span><span class="p">));</span>
|
||||
<span class="p">})</span>
|
||||
<span class="p">.</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span> <span class="p">{</span><span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">notify</span><span class="p">({</span><span class="nx">message</span><span class="o">:</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">,</span> <span class="nx">category</span><span class="o">:</span> <span class="s1">'error'</span><span class="p">,</span> <span class="nx">persist</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
@@ -283,25 +275,12 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.header'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">facetViewer</span><span class="p">.</span><span class="nx">el</span><span class="p">);</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">setupRouting</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>Default route
|
||||
this.router.route(/^(\?.<em>)?$/, this.pageViews[0].id, function(queryString) {
|
||||
self.updateNav(self.pageViews[0].id, queryString);
|
||||
});
|
||||
$.each(this.pageViews, function(idx, view) {
|
||||
self.router.route(/^([^?]+)(\?.</em>)?/, 'view', function(viewId, queryString) {
|
||||
self.updateNav(viewId, queryString);
|
||||
});
|
||||
});</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">route</span><span class="p">(</span><span class="sr">/.*/</span><span class="p">,</span> <span class="s1">'view'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">updateNav</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.navigation li'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.navigation li a'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s1">'disabled'</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s1">'.navigation li a[data-view="'</span> <span class="o">+</span> <span class="nx">pageName</span> <span class="o">+</span> <span class="s1">'"]'</span><span class="p">);</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'active'</span><span class="p">);</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'disabled'</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>show the specific page</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">$el</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'disabled'</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>show the specific page</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">view</span><span class="p">,</span> <span class="nx">idx</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">pageName</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
|
||||
<span class="nx">view</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'view:show'</span><span class="p">);</span>
|
||||
@@ -327,15 +306,15 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="kd">var</span> <span class="nx">viewName</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'data-view'</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">updateNav</span><span class="p">(</span><span class="nx">viewName</span><span class="p">);</span>
|
||||
<span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">currentView</span><span class="o">:</span> <span class="nx">viewName</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>create a state object for this view and do the job of</p>
|
||||
<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>create a state object for this view and do the job of</p>
|
||||
|
||||
<p>a) initializing it from both data passed in and other sources (e.g. hash url)</p>
|
||||
|
||||
<p>b) ensure the state object is updated in responese to changes in subviews, query etc.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">_setupState</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">initialState</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>get data from the query string / hash url plus some defaults</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>get data from the query string / hash url plus some defaults</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">qs</span> <span class="o">=</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">Util</span><span class="p">.</span><span class="nx">parseHashQueryString</span><span class="p">();</span>
|
||||
<span class="kd">var</span> <span class="nx">query</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">reclineQuery</span><span class="p">;</span>
|
||||
<span class="nx">query</span> <span class="o">=</span> <span class="nx">query</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</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>backwards compatability (now named view-graph but was named graph)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">graphState</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">[</span><span class="s1">'view-graph'</span><span class="p">]</span> <span class="o">||</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">graph</span><span class="p">;</span>
|
||||
<span class="nx">graphState</span> <span class="o">=</span> <span class="nx">graphState</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">graphState</span><span class="p">)</span> <span class="o">:</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>now get default data + hash url plus initial state and initial our state object with it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">query</span> <span class="o">=</span> <span class="nx">query</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">query</span><span class="p">)</span> <span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</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>backwards compatability (now named view-graph but was named graph)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">graphState</span> <span class="o">=</span> <span class="nx">qs</span><span class="p">[</span><span class="s1">'view-graph'</span><span class="p">]</span> <span class="o">||</span> <span class="nx">qs</span><span class="p">.</span><span class="nx">graph</span><span class="p">;</span>
|
||||
<span class="nx">graphState</span> <span class="o">=</span> <span class="nx">graphState</span> <span class="o">?</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">graphState</span><span class="p">)</span> <span class="o">:</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>now get default data + hash url plus initial state and initial our state object with it</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">stateData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="nx">query</span><span class="p">,</span>
|
||||
<span class="s1">'view-graph'</span><span class="o">:</span> <span class="nx">graphState</span><span class="p">,</span>
|
||||
<span class="nx">backend</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">backend</span><span class="p">.</span><span class="nx">__type__</span><span class="p">,</span>
|
||||
@@ -348,7 +327,7 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">_bindStateChanges</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</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>finally ensure we update our state object when state of sub-object changes so that state is always up to date</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</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">self</span> <span class="o">=</span> <span class="k">this</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>finally ensure we update our state object when state of sub-object changes so that state is always up to date</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="nx">query</span><span class="o">:</span> <span class="nx">self</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()});</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageView</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -358,11 +337,58 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span>
|
||||
<span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'change'</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">update</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="nx">update</span><span class="p">[</span><span class="s1">'view-'</span> <span class="o">+</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">();</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">);</span>
|
||||
<span class="nx">update</span><span class="p">[</span><span class="s1">'view-'</span> <span class="o">+</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">toJSON</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>had problems where change not being triggered for e.g. grid view so let's do it explicitly</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">update</span><span class="p">,</span> <span class="p">{</span><span class="nx">silent</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s1">'change'</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span>
|
||||
|
||||
<span class="nx">_bindFlashNotifications</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
|
||||
<span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">pageViews</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pageView</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">pageView</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'recline:flash'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">flash</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">self</span><span class="p">.</span><span class="nx">notify</span><span class="p">(</span><span class="nx">flash</span><span class="p">);</span>
|
||||
<span class="p">});</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> <h3>notify</h3>
|
||||
|
||||
<p>Create a notification (a div.alert in div.alert-messsages) using provided
|
||||
flash object. Flash attributes (all are optional):</p>
|
||||
|
||||
<ul>
|
||||
<li>message: message to show.</li>
|
||||
<li>category: warning (default), success, error</li>
|
||||
<li>persist: if true alert is persistent, o/w hidden after 3s (default = false)</li>
|
||||
<li>loader: if true show loading spinner</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">notify</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">flash</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">message</span><span class="o">:</span> <span class="s1">''</span><span class="p">,</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="s1">'warning'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">flash</span>
|
||||
<span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">_template</span> <span class="o">=</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \</span>
|
||||
<span class="s1"> {{message}} \</span>
|
||||
<span class="s1"> {{#loader}} \</span>
|
||||
<span class="s1"> <span class="notification-loader">&nbsp;</span> \</span>
|
||||
<span class="s1"> {{/loader}} \</span>
|
||||
<span class="s1"> </div>'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages'</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">flash</span><span class="p">.</span><span class="nx">persist</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</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> <h3>clearNotifications</h3>
|
||||
|
||||
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clearNotifications</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages .alert'</span><span class="p">);</span>
|
||||
<span class="nx">$notifications</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</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> <h3>DataExplorer.restore</h3>
|
||||
|
||||
@@ -594,95 +620,6 @@ note this.model and dataset returned are the same</p> </td>
|
||||
<span class="p">}</span>
|
||||
<span class="p">});</span>
|
||||
|
||||
<span class="cm">/* ========================================================== */</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <h2>Miscellaneous Utilities</h2> </td> <td class="code"> <div class="highlight"><pre><span class="kd">var</span> <span class="nx">urlPathRegex</span> <span class="o">=</span> <span class="sr">/^([^?]+)(\?.*)?/</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Parse the Hash section of a URL into path and query string</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">parsed</span> <span class="o">=</span> <span class="nx">urlPathRegex</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">hashUrl</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">parsed</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="p">{};</span>
|
||||
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{</span>
|
||||
<span class="nx">path</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span>
|
||||
<span class="nx">query</span><span class="o">:</span> <span class="nx">parsed</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">||</span> <span class="s1">''</span>
|
||||
<span class="p">};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Parse a URL query string (?xyz=abc...) into a dictionary.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">q</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">q</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="p">{};</span>
|
||||
<span class="p">}</span>
|
||||
<span class="kd">var</span> <span class="nx">urlParams</span> <span class="o">=</span> <span class="p">{},</span>
|
||||
<span class="nx">e</span><span class="p">,</span> <span class="nx">d</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="nx">unescape</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\+/g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">));</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">r</span> <span class="o">=</span> <span class="sr">/([^&=]+)=?([^&]*)/g</span><span class="p">;</span>
|
||||
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nx">q</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="nx">q</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">===</span> <span class="s1">'?'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">q</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">while</span> <span class="p">(</span><span class="nx">e</span> <span class="o">=</span> <span class="nx">r</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">q</span><span class="p">))</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>TODO: have values be array as query string allow repetition of keys</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">urlParams</span><span class="p">[</span><span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nx">d</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="k">return</span> <span class="nx">urlParams</span><span class="p">;</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Parse the query string out of the URL hash</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">parseHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">q</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseHashUrl</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">).</span><span class="nx">query</span><span class="p">;</span>
|
||||
<span class="k">return</span> <span class="nx">my</span><span class="p">.</span><span class="nx">parseQueryString</span><span class="p">(</span><span class="nx">q</span><span class="p">);</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>Compse a Query String</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="s1">'?'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">items</span> <span class="o">=</span> <span class="p">[];</span>
|
||||
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">key</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="k">typeof</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="o">===</span> <span class="s1">'object'</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">value</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="nx">items</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">key</span> <span class="o">+</span> <span class="s1">'='</span> <span class="o">+</span> <span class="nx">value</span><span class="p">);</span>
|
||||
<span class="p">});</span>
|
||||
<span class="nx">queryString</span> <span class="o">+=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">'&'</span><span class="p">);</span>
|
||||
<span class="k">return</span> <span class="nx">queryString</span><span class="p">;</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">queryPart</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">composeQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>slice(1) to remove # at start</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'?'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">slice</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">queryPart</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="nx">queryPart</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="nx">my</span><span class="p">.</span><span class="nx">setHashQueryString</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">hash</span> <span class="o">=</span> <span class="nx">my</span><span class="p">.</span><span class="nx">getNewHashForQueryString</span><span class="p">(</span><span class="nx">queryParams</span><span class="p">);</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <h2>notify</h2>
|
||||
|
||||
<p>Create a notification (a div.alert in div.alert-messsages) using provide messages and options. Options are:</p>
|
||||
|
||||
<ul>
|
||||
<li>category: warning (default), success, error</li>
|
||||
<li>persist: if true alert is persistent, o/w hidden after 3s (default = false)</li>
|
||||
<li>loader: if true show loading spinner</li>
|
||||
</ul> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">notify</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">,</span> <span class="nx">options</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">options</span><span class="p">)</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{};</span>
|
||||
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
|
||||
<span class="nx">msg</span><span class="o">:</span> <span class="nx">message</span><span class="p">,</span>
|
||||
<span class="nx">category</span><span class="o">:</span> <span class="s1">'warning'</span>
|
||||
<span class="p">},</span>
|
||||
<span class="nx">options</span><span class="p">);</span>
|
||||
<span class="kd">var</span> <span class="nx">_template</span> <span class="o">=</span> <span class="s1">' \</span>
|
||||
<span class="s1"> <div class="alert alert-{{category}} fade in" data-alert="alert"><a class="close" data-dismiss="alert" href="#">×</a> \</span>
|
||||
<span class="s1"> {{msg}} \</span>
|
||||
<span class="s1"> {{#loader}} \</span>
|
||||
<span class="s1"> <span class="notification-loader">&nbsp;</span> \</span>
|
||||
<span class="s1"> {{/loader}} \</span>
|
||||
<span class="s1"> </div>'</span><span class="p">;</span>
|
||||
<span class="kd">var</span> <span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">mustache</span><span class="p">(</span><span class="nx">_template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
|
||||
<span class="nx">_templated</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">appendTo</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages'</span><span class="p">));</span>
|
||||
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">options</span><span class="p">.</span><span class="nx">persist</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="nx">_templated</span><span class="p">).</span><span class="nx">fadeOut</span><span class="p">(</span><span class="mi">1000</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="p">});</span>
|
||||
<span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <h2>clearNotifications</h2>
|
||||
|
||||
<p>Clear all existing notifications</p> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">clearNotifications</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kd">var</span> <span class="nx">$notifications</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.recline-data-explorer .alert-messages .alert'</span><span class="p">);</span>
|
||||
<span class="nx">$notifications</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
|
||||
<span class="p">};</span>
|
||||
|
||||
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user