Add a way to pause the background animation #220

I currently set href to "" because I don't currently know how to interface with session variables directly through html tags. "Basic View" and "Standard View" have different lengths, so the footer shifts when the button is pressed. The paused background state is different from the paused state when the user once again switches to the tab after a period of time, where the triangles are all orange and regular. The session variable can also be renamed and used elsewhere to perhaps make the page less reactive, for example in displaying search results, to reduce lag.
I tried the same with this and it still didn’t resume background animation

<template name="footer">
  <footer class="{{indexFooter}} {{noIndexFooter}} {{currentPage}} {{publicationDisplayed}}">
    <ul class="subpages">
      <li><a href="{{aboutPath}}">About</a></li>
      <li><a href="{{helpPath}}">Help</a></li>
      <li><a href="{{privacyPath}}">Privacy</a></li>
      <li><a href="{{termsPath}}">Terms</a></li>
      <li><a href="https://github.com/peerlibrary/peerlibrary" title="Running version {{VERSION}}">Source</a></li>
      <li><a href="https://github.com/peerlibrary/peerlibrary/wiki/Public-API">API</a></li>
    </ul>
    <ul class="connect">
      <li>{{> backgroundPauseButton}}</li>
      <li><a href="http://blog.peerlibrary.org">Blog</a></li>
      <li><a href="https://twitter.com/PeerLibrary">Twitter</a></li>
      <li><a href="http://lists.peerlibrary.org/lists/info/news" class="newsletter">Newsletter</a></li>
      <li><a href="mailto:hello@peerlibrary.org">Contact</a></li>
    </ul>
  </footer>
</template>

<template name="backgroundPauseButton">
    <button>
      {{#if backgroundPaused}}
      Start Background
      {{else}}
      Stop Background
      {{/if}}
    </button>
</template>

<template name="baseFooter">
  {{#unless searchActive}}
    {{> footer}}
  {{/unless}}
</template>

On Jun 28, 2014, at 10:23 PM, Tiantong Qin <tiantongqin@gmail.com> wrote:

> background.coffee:
> 
> class Vector
>   constructor: (@x, @y) ->
>     @originX = x or 0
>     @originY = y or 0
>     @duration = null
>     @start = null
>     @deltaX = 0
>     @deltaY = 0
> 
>   update: (time) =>
>     return if Session.get ‘backgroundPaused'
>     distance = Math.sin(Math.min(Math.abs(@originY + 0.5 * @originX + 150 - (time / 2) / 5 % (Math.max(window.innerWidth, window.innerHeight) + 300)) / Math.sqrt(1.25), 200) / 200 * Math.PI / 2) * 60
>     if not @duration or time > @start + @duration
>       @start = time
>       @duration = Math.random() * 2000 + 5000
>       @deltaX = Math.random() * 8 + 5
>       @deltaY = Math.random() * 20 + 5
>     delta = (time - @start) / @duration
>     sin = Math.sin(delta * Math.PI * 2)
>     @x = @originX + sin * @deltaX + distance
>     @y = @originY + sin * @deltaY + distance
> 
>   toString = =>
>     "#<Vector x: #{ @x }, y: #{ @y }>"
> 
> and...
> 
>   draw: (time) =>
>     return unless @renderer
> 
>     return if Session.get ‘backgroundPaused'
> 
>     vector.update time for key, vector of @vectors
>     triangle.draw() for key, triangle of @triangles
>     @renderer.render @stage
> 
>     frame @draw
> 
> footer.coffee:
> 
> Template.baseFooter.searchActive = ->
>   Session.get 'searchActive'
> 
> Template.footer.indexFooter = ->
>   'index-footer' if Session.get('indexActive') and not Session.get('searchActive')
> 
> Template.footer.noIndexFooter = ->
>   'no-index-footer' if not Template.footer.indexFooter()
> 
> Session.setDefault 'backgroundPaused', false
> 
> Template.backgroundPauseButton.events
>   'click': (e, template) ->
>     Session.set('backgroundPaused', not Template.backgroundPaused)
>     return # Make sure CoffeeScript does not return anything
> 
> Template.backgroundPauseButton.backgroundPaused = ->
>   Session.get 'backgroundPaused'
> 
> footer.html:
> 
> <template name="footer">
>   <footer class="{{indexFooter}} {{noIndexFooter}} {{currentPage}} {{publicationDisplayed}}">
>     <ul class="subpages">
>       <li><a href="{{aboutPath}}">About</a></li>
>       <li><a href="{{helpPath}}">Help</a></li>
>       <li><a href="{{privacyPath}}">Privacy</a></li>
>       <li><a href="{{termsPath}}">Terms</a></li>
>       <li><a href="https://github.com/peerlibrary/peerlibrary" title="Running version {{VERSION}}">Source</a></li>
>       <li><a href="https://github.com/peerlibrary/peerlibrary/wiki/Public-API">API</a></li>
>     </ul>
>     <ul class="connect">
>       <ul>
>         <li>
>           <div>
>             {{> backgroundPauseButton}}
>           </div>
>         </li>
>       </ul>
>       <ul>
>         <li><a href="http://blog.peerlibrary.org">Blog</a></li>
>         <li><a href="https://twitter.com/PeerLibrary">Twitter</a></li>
>         <li><a href="http://lists.peerlibrary.org/lists/info/news" class="newsletter">Newsletter</a></li>
>         <li><a href="mailto:hello@peerlibrary.org">Contact</a></li>
>       </ul>
>     </ul>
>   </footer>
> </template>
> 
> <template name="backgroundPauseButton">
>     <button>
>       {{#if backgroundPaused}}
>       Start Background
>       {{else}}
>       Stop Background
>       {{/if}}
>     </button>
> </template>
> 
> <template name="baseFooter">
>   {{#unless searchActive}}
>     {{> footer}}
>   {{/unless}}
> </template>
> 
> The <div> doesn’t seem to make a difference now, in that no matter what either I can pause it but not resume the background, or can’t pause it in the first place. Thanks
> 
> On Jun 28, 2014, at 3:53 PM, Mitar <notifications@github.com> wrote:
> 
>> In client/footer.coffee:
>> 
>> > \ No newline at end of file
>> > +  'no-index-footer' if not Template.footer.indexFooter()
>> > +
>> > +Session.setDefault 'backgroundPaused', false
>> > +
>> > +Template.backgroundPauseButton.events
>> > +  'click': (e, template) ->
>> > +    Session.set 'backgroundPaused', not Session.get 'backgroundPaused'
>> > +    return # Make sure CoffeeScript does not return anything
>> > +
>> > +Template.backgroundPauseButton.backgroundPauseButtonText = ->
>> What is the general rule with
>> 
>> ,
>> ,
>> ? can
>> and
>> be nested indefinitely? And
>> should never be within nor nesting any of the three elements?
>> I do not understand this question. <ul> and <ol> are parent elements of <li>. <li> can then include arbitrary other elements, including new <ul> or <ol>. <div> can be used in some places.
>> 
>> I think you should read about HTML block and inline elements, which are which and where you can use which.
>> 
>> —
>> Reply to this email directly or view it on GitHub.
>> 
>