Skip to content

Instantly share code, notes, and snippets.

@shearichard

shearichard/django-sockpuppet-demo-increment.html

Created March 11, 2021 02:08
Show Gist options
  • Save shearichard/4153e721e45aed5c69d01a5921930cad to your computer and use it in GitHub Desktop.
Save shearichard/4153e721e45aed5c69d01a5921930cad to your computer and use it in GitHub Desktop.
Download ZIP
Some html associated with the increment demo of Django-Sockpuppet (line 31is the significant part)
Raw
django-sockpuppet-demo-increment.html
<header class="flex py-1">
<img alt="" src="https://i.imgur.com/FX0KFM7m.jpg" style="filter: grayscale(0.9) contrast(1.2); height: 4rem;"/>
<h1 class="leading-none m-0 pl-1 self-center">
<a href="/">Sockpuppet</a>
<small>Expo</small>
</h1>
</header>
<hr/>
<flex-container>
<aside class="border-right pr-2">
<nav>
<ul>
<li>
<a href="/example/">Example</a>
</li>
<li>
<a href="/book-search/">BookSearch</a>
</li>
<li>
<a href="/chat/">Chat</a>
</li>
</ul>
</nav>
</aside>
<main class="flex-grow">
<h2> Increment</h2>
<div>
<section>
<a data-action="click-&gt;example#increment" data-controller="example" data-count="9" href="#">
Increment 9
</a>
</section>
<details>
<summary>python</summary>
<br/>
core/views/example.py
<small>(LOC 16)</small>
<div class="highlight">
<pre>
<span></span>
<span class="kn">from</span>
<span class="nn">django.views.generic.base</span>
<span class="kn">import</span>
<span class="n">TemplateView</span>
<span class="kn">from</span>
<span class="nn">.mixins</span>
<span class="kn">import</span>
<span class="n">ExampleMixin</span>
<span class="k">class</span>
<span class="nc">ExampleView</span>
<span class="p">(</span>
<span class="n">ExampleMixin</span>
<span class="p">,</span>
<span class="n">TemplateView</span>
<span class="p">):</span>
<span class="n">demo_template</span>
<span class="o">=</span>
<span class="s1">'_example_demo.html'</span>
<span class="n">subtitle</span>
<span class="o">=</span>
<span class="s1">'Increment'</span>
<span class="k">def</span>
<span class="nf">get_context_data</span>
<span class="p">(</span>
<span class="bp">self</span>
<span class="p">,</span>
<span class="o">*</span>
<span class="n">args</span>
<span class="p">,</span>
<span class="o">**</span>
<span class="n">kwargs</span>
<span class="p">):</span>
<span class="n">context</span>
<span class="o">=</span>
<span class="nb">super</span>
<span class="p">()</span>
<span class="o">.</span>
<span class="n">get_context_data</span>
<span class="p">(</span>
<span class="o">*</span>
<span class="n">args</span>
<span class="p">,</span>
<span class="o">**</span>
<span class="n">kwargs</span>
<span class="p">)</span>
<span class="n">context</span>
<span class="p">[</span>
<span class="s1">'count'</span>
<span class="p">]</span>
<span class="o">=</span>
<span class="bp">self</span>
<span class="o">.</span>
<span class="n">request</span>
<span class="o">.</span>
<span class="n">session</span>
<span class="o">.</span>
<span class="n">get</span>
<span class="p">(</span>
<span class="s2">"count"</span>
<span class="p">,</span>
<span class="mi">0</span>
<span class="p">)</span>
<span class="k">return</span>
<span class="n">context</span>
<span class="n">example</span>
<span class="o">=</span>
<span class="n">ExampleView</span>
<span class="o">.</span>
<span class="n">as_view</span>
<span class="p">()</span>
</pre>
</div>
<br/>
core/reflexes/example_reflex.py
<small>(LOC 8)</small>
<div class="highlight">
<pre>
<span></span>
<span class="kn">from</span>
<span class="nn">sockpuppet.reflex</span>
<span class="kn">import</span>
<span class="n">Reflex</span>
<span class="k">class</span>
<span class="nc">ExampleReflex</span>
<span class="p">(</span>
<span class="n">Reflex</span>
<span class="p">):</span>
<span class="k">def</span>
<span class="nf">increment</span>
<span class="p">(</span>
<span class="bp">self</span>
<span class="p">,</span>
<span class="n">step</span>
<span class="o">=</span>
<span class="mi">1</span>
<span class="p">):</span>
<span class="bp">self</span>
<span class="o">.</span>
<span class="n">count</span>
<span class="o">=</span>
<span class="nb">int</span>
<span class="p">(</span>
<span class="bp">self</span>
<span class="o">.</span>
<span class="n">element</span>
<span class="o">.</span>
<span class="n">dataset</span>
<span class="p">[</span>
<span class="s1">'count'</span>
<span class="p">])</span>
<span class="o">+</span>
<span class="n">step</span>
<span class="bp">self</span>
<span class="o">.</span>
<span class="n">session</span>
<span class="p">[</span>
<span class="s1">'count'</span>
<span class="p">]</span>
<span class="o">=</span>
<span class="bp">self</span>
<span class="o">.</span>
<span class="n">count</span>
</pre>
</div>
</details>
<details>
<summary>javascript</summary>
<br/>
core/javascript/controllers/example_controller.js
<small>(LOC 16)</small>
<div class="highlight">
<pre>
<span></span>
<span class="kr">import</span>
<span class="p">{</span>
<span class="nx">Controller</span>
<span class="p">}</span>
<span class="nx">from</span>
<span class="s1">'stimulus'</span>
<span class="p">;</span>
<span class="kr">import</span>
<span class="nx">StimulusReflex</span>
<span class="nx">from</span>
<span class="s1">'stimulus_reflex'</span>
<span class="p">;</span>
<span class="kr">export</span>
<span class="k">default</span>
<span class="kr">class</span>
<span class="kr">extends</span>
<span class="nx">Controller</span>
<span class="p">{</span>
<span class="nx">connect</span>
<span class="p">()</span>
<span class="p">{</span>
<span class="nx">StimulusReflex</span>
<span class="p">.</span>
<span class="nx">register</span>
<span class="p">(</span>
<span class="k">this</span>
<span class="p">)</span>
<span class="p">}</span>
<span class="nx">increment</span>
<span class="p">(</span>
<span class="nx">event</span>
<span class="p">)</span>
<span class="p">{</span>
<span class="nx">console</span>
<span class="p">.</span>
<span class="nx">log</span>
<span class="p">(</span>
<span class="s1">'increment'</span>
<span class="p">)</span>
<span class="nx">event</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">stimulate</span>
<span class="p">(</span>
<span class="s1">'ExampleReflex#increment'</span>
<span class="p">,</span>
<span class="mf">1</span>
<span class="p">)</span>
<span class="p">}</span>
<span class="p">}</span>
</pre>
</div>
</details>
<details>
<summary>html</summary>
<br/>
core/templates/_example_demo.html
<small>(LOC 11)</small>
<div class="highlight">
<pre>
<span></span>
<span class="p">&lt;</span>
<span class="nt">section</span>
<span class="p">&gt;</span>
<span class="p">&lt;</span>
<span class="nt">a</span>
<span class="na">href</span>
<span class="o">=</span>
<span class="s">"#"</span>
<span class="na">data-controller</span>
<span class="o">=</span>
<span class="s">"example"</span>
<span class="na">data-action</span>
<span class="o">=</span>
<span class="s">"click-&gt;example#increment"</span>
<span class="na">data-count</span>
<span class="o">=</span>
<span class="s">"</span>
<span class="cp">{{</span>
<span class="nv">count</span>
<span class="cp">}}</span>
<span class="s">"</span>
<span class="p">&gt;</span>
Increment
<span class="cp">{{</span>
<span class="nv">count</span>
<span class="cp">}}</span>
<span class="p">&lt;/</span>
<span class="nt">a</span>
<span class="p">&gt;</span>
<span class="p">&lt;/</span>
<span class="nt">section</span>
<span class="p">&gt;</span>
</pre>
</div>
</details>
</div>
</main>
</flex-container>
<footer>
<a href="https://github.com/zodman/django-sockpuppet-expo">
<img src="https://img.shields.io/static/v1?label=github&amp;message=django-sockpuppet-expo&amp;logo=github"/>
</a>
<a href="https://github.com/zodman/django-socketpuppet-expo">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/zodman/django-socketpuppet-expo?style=social"/>
</a>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment