Develop (#132)

* add example videos to frame documentation and update docs

* style fixes

docs/assets/css/main.css

@@ -797,10 +797,24 @@ li.module-sidebar-exp-player {
 }
 
 .class-screenshot {
-  border: medium solid #369;
-  display:inline;
-  max-height: 30em;
+  max-height: 60vh;
+  height: 60vh;
   min-height: 0em;
+  max-width: 80vw;
   box-shadow: 7px 7px 10px #bbb;
-  margin-left: 10%;
+  margin-left: 0;
+}
+
+.class-screenshot video {
+  max-height: 100%;
+  max-width: 100%;
+
+}
+
+.class-screenshot img {
+  display: block;
+  margin: auto;
+  max-height: 100%;
+  max-width: 100%;
+
 }

docs/assets/js/apidocs.js

@@ -12,6 +12,8 @@ var win          = Y.config.win,
     defaultRoute,
 
     classTabView,
+    exampleTabView,
+    selectedExampleTab,
     selectedTab;
 
 // Kill pjax functionality unless serving over HTTP.
@@ -130,26 +132,44 @@ pjax.checkVisibility = function (tab) {
     });
 };
 
-pjax.initClassTabView = function () {
-    if (!Y.all('#classdocs .api-class-tab').size()) {
-        return;
-    }
+pjax.initClassTabViews = function () {
+    if (Y.all('#classdocs .api-class-tab').size()) {
+        if (classTabView) {
+            classTabView.destroy();
+            selectedTab = null;
+        }
 
-    if (classTabView) {
-        classTabView.destroy();
-        selectedTab = null;
+        classTabView = new Y.TabView({
+            srcNode: '#classdocs',
+
+            on: {
+                selectionChange: pjax.onTabSelectionChange
+            }
+        });
+
+        pjax.updateTabState('#classdocs', classTabView);
+        classTabView.render();
     }
 
-    classTabView = new Y.TabView({
-        srcNode: '#classdocs',
 
-        on: {
-            selectionChange: pjax.onTabSelectionChange
+    if (Y.all('#examples .api-class-tab').size()) {
+        if (exampleTabView) {
+            exampleTabView.destroy();
+            selectedExampleTab = null;
         }
-    });
 
-    pjax.updateTabState();
-    classTabView.render();
+        exampleTabView = new Y.TabView({
+            srcNode: '#examples',
+
+            on: {
+                selectionChange: pjax.onTabSelectionChangeExample
+            }
+        });
+
+        pjax.updateTabState('#examples', exampleTabView);
+        exampleTabView.render();
+    }
+
 };
 
 pjax.initLineNumbers = function () {
@@ -193,7 +213,7 @@ pjax.initRoot = function () {
     pjax.set('root', root.join('/'));
 };
 
-pjax.updateTabState = function (src) {
+pjax.updateTabState = function (element, classTabView, src) {
     var hash = win.location.hash.substring(1),
         defaultTab, node, tab, tabPanel;
 
@@ -211,7 +231,7 @@ pjax.updateTabState = function (src) {
         setTimeout(function () {
             // For some reason, unless we re-get the node instance here,
             // getY() always returns 0.
-            var node = Y.one('#classdocs').getById(hash);
+            var node = Y.one(element).getById(hash);
             win.scrollTo(0, node.getY() - 70);
         }, 1);
     }
@@ -231,9 +251,9 @@ pjax.updateTabState = function (src) {
         }
     }
 
-    if (hash && (node = Y.one('#classdocs').getById(hash))) {
+    if (hash && (node = Y.one(element).getById(hash))) {
         if ((tabPanel = node.ancestor('.api-class-tabpanel', true))) {
-            if ((tab = Y.one('#classdocs .api-class-tab.' + tabPanel.get('id')))) {
+            if ((tab = Y.one(element + ' .api-class-tab.' + tabPanel.get('id')))) {
                 if (classTabView.get('rendered')) {
                     Y.Widget.getByNode(tab).set('selected', 1);
                 } else {
@@ -251,11 +271,11 @@ pjax.updateTabState = function (src) {
             }
         }
     } else {
-        tab = Y.one('#classdocs .api-class-tab.' + defaultTab);
+        tab = Y.one(element + ' .api-class-tab.' + defaultTab);
 
         // When the `defaultTab` node isn't found, `localStorage` is stale.
         if (!tab && defaultTab !== 'index') {
-            tab = Y.one('#classdocs .api-class-tab.index');
+            tab = Y.one(element + ' .api-class-tab.index');
         }
 
         if (classTabView.get('rendered')) {
@@ -291,7 +311,7 @@ pjax.handleClasses = function (req, res, next) {
 
     // Handles success and local filesystem XHRs.
     if (res.ioResponse.readyState === 4 && (!status || (status >= 200 && status < 300))) {
-        pjax.initClassTabView();
+        pjax.initClassTabViews();
     }
 
     next();
@@ -317,9 +337,11 @@ pjax.onNavigate = function (e) {
 
     if (hash) {
         tab = originTarget && originTarget.ancestor('.yui3-tab', true);
+        console.log(tab);
 
         if (hash === win.location.hash) {
-            pjax.updateTabState('hashchange');
+            pjax.updateTabState('#classdocs', classTabView, 'hashchange');
+            pjax.updateTabState('#examples', exampleTabView, 'hashchange');
         } else if (!tab) {
             win.location.hash = hash;
         }
@@ -343,16 +365,13 @@ pjax.onTabSelectionChange = function (e) {
         tabId = tab.get('contentBox').getAttribute('href').substring(1);
 
     selectedTab = tab;
+};
 
-    // If switching from a previous tab (i.e., this is not the default tab),
-    // replace the history entry with a hash URL that will cause this tab to
-    // be selected if the user navigates away and then returns using the back
-    // or forward buttons.
-    if (e.prevVal && localStorage) {
-        localStorage.setItem('tab_' + pjax.getPath(), tabId);
-    }
+pjax.onTabSelectionChangeExample = function (e) {
+    var tab   = e.newVal,
+        tabId = tab.get('contentBox').getAttribute('href').substring(1);
 
-    pjax.checkVisibility(tab);
+    selectedExampleTab = tab;
 };
 
 // -- Init ---------------------------------------------------------------------
@@ -361,16 +380,16 @@ pjax.on('navigate', pjax.onNavigate);
 
 pjax.initRoot();
 pjax.upgrade();
-pjax.initClassTabView();
+pjax.initClassTabViews();
 pjax.initLineNumbers();
-pjax.updateVisibility();
 
 Y.APIList.rootPath = pjax.get('root');
 
 Y.one('#api-options').delegate('click', pjax.onOptionClick, 'input');
 
 Y.on('hashchange', function (e) {
-    pjax.updateTabState('hashchange');
+    pjax.updateTabState('#classdocs', classTabView, 'hashchange');
+    pjax.updateTabState('#examples', exampleTabView, 'hashchange');
 }, win);
 
 });

docs/classes/Exp-exit-survey.html

@@ -130,17 +130,40 @@ <h1>Exp-exit-survey Class</h1>
 </div>
 
 
-<div>
-
-    <img src="../assets/screenshots/Exp-exit-survey.png" class="class-screenshot">
+<div id="examples" class="tabview">
+    <ul class="api-class-tabs">
+        <li class="api-class-tab index"><a href="#screenshot">Screenshot</a></li>
+        <li class="api-class-tab methods"><a href="#video">Video</a></li>
+    </ul>
+    <div>
+        <div id="screenshot" class="api-class-tabpanel">
+            <div class="class-screenshot" id="example-screenshot">
+                <img src="../assets/screenshots/Exp-exit-survey.png">
+            </div>
+        </div>
 
+        <div id="video" class="api-class-tabpanel">
+            <div class="class-screenshot" id="example-video">
+                <video controls poster="../assets/screenshots/Exp-exit-survey.png" >
+                    <source src="../assets/framevideos/Exp-exit-survey.mp4" type='video/mp4'>
+                    No video available for this frame.
+                </video>
+            </div>
+        </div>
+    </div>
 </div>
 
+
+
+
 <div class="box intro">
     <p>This is the exit survey used by "Your baby the physicist". Use the updated frame <a href="../classes/Exp-lookit-exit-survey.html" class="crosslink">Exp-lookit-exit-survey</a> instead.</p>
 
 </div>
 
+<div>
+</div>
+
 
 <div id="classdocs" class="tabview">
     <ul class="api-class-tabs">

docs/classes/Exp-frame-base.html

@@ -127,19 +127,17 @@ <h1>Exp-frame-base Class</h1>
 </div>
 
 
-<div>
 
-    <img src="../assets/screenshots/Exp-frame-base.png" class="class-screenshot">
 
-</div>
+
 
 <div class="box intro">
     <p>This provides common base behavior required for any experiment frame. All experiment frames must extend this one.
 This frame has no configuration options because all of its logic is internal, and is almost never directly used
 in an experiment. It exports no data. Sample experiment definition usage (provided for completeness):</p>
-<pre class="code prettyprint"><code class="language-json">  &quot;frames&quot;: {
-     &quot;my-sample-frame&quot;: {
-       &quot;kind&quot;: &quot;exp-base-frame&quot;
+<pre class="code prettyprint"><code class="language-json">  "frames": {
+     "my-sample-frame": {
+       "kind": "exp-base-frame"
      }
   }
 </code></pre>
@@ -164,6 +162,9 @@ <h1>Exp-frame-base Class</h1>
 
 </div>
 
+<div>
+</div>
+
 
 <div id="classdocs" class="tabview">
     <ul class="api-class-tabs">
@@ -478,9 +479,9 @@ <h3 class="name"><code>serializeContent</code></h3>
 
     <div class="description">
         <p>The base class does not define any data to save to the server. It does, however, capture some basic event
-timing data. (such as when the user clicks the &quot;next&quot; button)</p>
+timing data. (such as when the user clicks the "next" button)</p>
 <p>This section slightly breaks YUIDoc conventions- rather than being a literal guide to using the code, the
-&quot;parameters&quot; here are abstract descriptions of what data is captured.</p>
+"parameters" here are abstract descriptions of what data is captured.</p>
 <p>Each frame that extends ExpFrameBase will send an array <code>eventTimings</code>
 back to the server upon completion. This array is an ordered list (oldest
 to newest) of every EVENT that happened during the frame. Each event is
@@ -805,7 +806,7 @@ <h3 class="name"><code>generateProperties</code></h3>
     </div>
 
     <div class="description">
-        <p>Function to generate additional properties for this frame (like {&quot;kind&quot;: &quot;exp-lookit-text&quot;})
+        <p>Function to generate additional properties for this frame (like {"kind": "exp-lookit-text"})
 at the time the frame is initialized. Allows behavior of study to depend on what has
 happened so far (e.g., answers on a form or to previous test trials).
 Must be a valid Javascript function, returning an object, provided as
@@ -825,10 +826,10 @@ <h3 class="name"><code>generateProperties</code></h3>
 <ul>
 <li><code>additionalInformation</code>: String; additional information field from child form</li>
 <li><code>ageAtBirth</code>: String; child's gestational age at birth in weeks. Possible values are
-&quot;24&quot; through &quot;39&quot;, &quot;na&quot; (not sure or prefer not to answer),
-&quot;&lt;24&quot; (under 24 weeks), and &quot;40&gt;&quot; (40 or more weeks).</li>
-<li><code>birthday</code>: timestamp in format &quot;Mon Apr 10 2017 20:00:00 GMT-0400 (Eastern Daylight Time)&quot;</li>
-<li><code>gender</code>: &quot;f&quot; (female), &quot;m&quot; (male), &quot;o&quot; (other), or &quot;na&quot; (prefer not to answer)</li>
+"24" through "39", "na" (not sure or prefer not to answer),
+"&lt;24" (under 24 weeks), and "40&gt;" (40 or more weeks).</li>
+<li><code>birthday</code>: timestamp in format "Mon Apr 10 2017 20:00:00 GMT-0400 (Eastern Daylight Time)"</li>
+<li><code>gender</code>: "f" (female), "m" (male), "o" (other), or "na" (prefer not to answer)</li>
 <li><code>givenName</code>: String, child's given name/nickname</li>
 <li><code>id</code>: String, child UUID</li>
 </ul>
@@ -839,7 +840,7 @@ <h3 class="name"><code>generateProperties</code></h3>
 <li><code>completed</code>: Boolean, whether they submitted an exit survey</li>
 <li><code>completedConsentFrame</code>: Boolean, whether they got through at least a consent frame</li>
 <li><code>conditions</code>: Object representing any conditions assigned by randomizer frames</li>
-<li><code>createdOn</code>: timestamp in format &quot;Thu Apr 18 2019 12:33:26 GMT-0400 (Eastern Daylight Time)&quot;</li>
+<li><code>createdOn</code>: timestamp in format "Thu Apr 18 2019 12:33:26 GMT-0400 (Eastern Daylight Time)"</li>
 <li><code>expData</code>: Object consisting of frameId: frameData pairs</li>
 <li><code>globalEventTimings</code>: list of any events stored outside of individual frames - currently
 just used for attempts to leave the study early</li>
@@ -979,10 +980,10 @@ <h3 class="name"><code>selectNextFrame</code></h3>
 <ul>
 <li><code>additionalInformation</code>: String; additional information field from child form</li>
 <li><code>ageAtBirth</code>: String; child's gestational age at birth in weeks. Possible values are
-&quot;24&quot; through &quot;39&quot;, &quot;na&quot; (not sure or prefer not to answer),
-&quot;&lt;24&quot; (under 24 weeks), and &quot;40&gt;&quot; (40 or more weeks).</li>
-<li><code>birthday</code>: timestamp in format &quot;Mon Apr 10 2017 20:00:00 GMT-0400 (Eastern Daylight Time)&quot;</li>
-<li><code>gender</code>: &quot;f&quot; (female), &quot;m&quot; (male), &quot;o&quot; (other), or &quot;na&quot; (prefer not to answer)</li>
+"24" through "39", "na" (not sure or prefer not to answer),
+"&lt;24" (under 24 weeks), and "40&gt;" (40 or more weeks).</li>
+<li><code>birthday</code>: timestamp in format "Mon Apr 10 2017 20:00:00 GMT-0400 (Eastern Daylight Time)"</li>
+<li><code>gender</code>: "f" (female), "m" (male), "o" (other), or "na" (prefer not to answer)</li>
 <li><code>givenName</code>: String, child's given name/nickname</li>
 <li><code>id</code>: String, child UUID</li>
 </ul>
@@ -993,14 +994,14 @@ <h3 class="name"><code>selectNextFrame</code></h3>
 <li><code>completed</code>: Boolean, whether they submitted an exit survey</li>
 <li><code>completedConsentFrame</code>: Boolean, whether they got through at least a consent frame</li>
 <li><code>conditions</code>: Object representing any conditions assigned by randomizer frames</li>
-<li><code>createdOn</code>: timestamp in format &quot;Thu Apr 18 2019 12:33:26 GMT-0400 (Eastern Daylight Time)&quot;</li>
+<li><code>createdOn</code>: timestamp in format "Thu Apr 18 2019 12:33:26 GMT-0400 (Eastern Daylight Time)"</li>
 <li><code>expData</code>: Object consisting of frameId: frameData pairs</li>
 <li><code>globalEventTimings</code>: list of any events stored outside of individual frames - currently
 just used for attempts to leave the study early</li>
 <li><code>sequence</code>: ordered list of frameIds, corresponding to keys in expData</li>
 </ul>
 <p>Example that just sends us to the last frame of the study no matter what:
-<code>&#x60;&amp;quot;function(frames, frameIndex, frameData, expData, sequence, child, pastSessions) {return frames.length - 1;}&amp;quot;</code>``</p>
+<code>&#x60;&quot;function(frames, frameIndex, frameData, expData, sequence, child, pastSessions) {return frames.length - 1;}&quot;</code>``</p>
 
     </div>