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.
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.
>