Add notice and info page when AudioContext is not fully supported

data/examples.yml

@@ -1,12 +1,20 @@
 - :url: "basic-connections"
   :file: "1.basic-connections"
   :name: "Basic Connections"
+  :check_support: true
 - :url: "parameters"
   :file: "2.parameters"
   :name: "Parameters"
+  :check_support: true
 - :url: "tracks"
   :file: "2.tracks"
   :name: "Tracks"
+  :check_support: true
 - :url: "envelopes"
   :file: "3.envelopes"
   :name: "Envelopes"
+  :check_support: true
+- :url: "browser-support"
+  :file: "9.browser-support"
+  :name: "Browser Support"
+  :check_support: false

source/9.browser-support.html.erb

@@ -0,0 +1,52 @@
+<div class="row">
+    <div class="small-12 columns">
+
+        <h3>Browser support</h3>
+
+        <div class="row">
+            <div class="small-12  columns">
+                <p>Mooog is not a shim for the deprecated Audio API. It also doesn't (yet) worry
+                    about cross-platform issues. It is developed and tested on the latest version
+                    of Google Chrome, and expects to run there. Ensuring cross-platform
+                    consistency is on the to-do list once the API stabilizes and browser support
+                    improves. </p>
+
+                <p><code>Mooog.browser_test()</code> returns an object with a set of boolean properties indicating whether your
+                    browser is current in its support of the spec.</p>
+
+
+              <ul class="disc">
+                  <li>Your browser <span data-mooog-toggle="unprefixed"></span> support the unprefixed <code>AudioContext</code> object.</li>
+                  <li>Your browser <span data-mooog-toggle="start_stop"></span> support the <code>start</code> and
+                  <code>stop</code> methods instead of <code>noteon</code> and <code>noteoff</code>.</li>
+                  <li>Your browser <span data-mooog-toggle="stereo_panner"></span> support the <code>StereoPannerNode</code></li>
+                  <li>Your browser <span data-mooog-toggle="script_processor"></span> support the <code>ScriptProcessorNode</code></li>
+
+
+              </ul>
+
+            </div>
+
+        </div>
+
+
+
+
+
+        <script>
+            $(document).ready(function(){
+                var support = Mooog.browser_test();
+                $("[data-mooog-toggle]").each(function(){
+                    if( support[$(this).data('mooogToggle')] ){
+                        $(this).addClass('supported').text("does");
+                    }else{
+                        $(this).addClass('unsupported').text("does not");
+                    }
+                })
+            })
+        </script>
+
+
+
+    </div>
+</div>

source/javascripts/all.js

@@ -6,5 +6,6 @@
 //= require foundation/js/foundation/foundation.alert
 //= require foundation/js/foundation/foundation.tooltip
 //= require foundation/js/foundation/foundation.slider
+//= require foundation/js/foundation/foundation.reveal
 //= require foundation/js/foundation/foundation.topbar
 //= require mooog/dist/mooog

source/javascripts/body-end.coffee

@@ -1,5 +1,9 @@
 $(document).foundation()
 
+if(!Mooog.browser_test().all)
+  $('#not-supported').foundation('reveal', 'open')
+
+
 $('[data-slider]').on 'change.fndtn.slider', (e)->
   $t = $(e.target)
   d = $t.data()

source/layouts/layout.erb

@@ -10,6 +10,7 @@
     <title><%= current_page.data.title %></title>
 
     <%= stylesheet_link_tag "all" %>
+    <%= javascript_include_tag  "modernizr" %>
     <%= javascript_include_tag  "all" %>
     <%= javascript_include_tag  "highlight/highlight.pack" %>
     <script>hljs.initHighlightingOnLoad();</script>
@@ -46,7 +47,7 @@
             <% end %>
         </div>
     </div>
-     <%= partial 'partials/footer' %>
+     <%= partial 'partials/footer', locals: locals %>
 
 
      <%= javascript_include_tag "body-end" %>

source/partials/_footer.html.erb

@@ -17,3 +17,11 @@
         </footer>
     </div>
 </div>
+
+<% if locals[:check_support] %>
+<div class="reveal-modal medium" data-reveal id="not-supported">
+    <h3>AudioContext not fully supported</h3>
+    <p>Your browser doesn't fully support the current AudioContext spec, so these examples may not function.</p>
+    <p>For more information, see the section on <%= link_to "browser support", toc_link("browser-support") %>.</p>
+</div>
+<% end %>

source/stylesheets/_typography.scss

@@ -64,7 +64,17 @@ h1,h2{
     @include radius();
   }
 }
+
 h3,h4,h5,h6{
   @include aller-bold();
   @include title-shadow();
 }
+
+span.supported{
+  color: green;
+  @include aller-bold();
+}
+span.unsupported{
+  color: red;
+  @include aller-bold();
+}