rework fade in code

there were a number of issues with preloading:
- it could result in duplicate IDs in the document
- embedded styles failed to apply, because a preloaded item was
overriding them
- the type answer code needed rewriting to support it

so we're back to something closer to the old approach - a single node
that we fade out, update, and then fade in again. this means there's a
longer delay when revealing mathjax, but should minimize the breakage of
existing notes

aqt/reviewer.py

@@ -119,11 +119,7 @@ class Reviewer:
 
     _revHtml = """
 <img src="qrc:/icons/rating.png" id=star class=marked>
-<div id=qa>\
+<div id=qa></div>
-<div class=qaelem><div id=_question></div></div>\
-<div class=qaelem><div id=_answer1></div></div>\
-<div class=qaelem><div id=_answer2></div></div>\
-</div>
 """
 
     def _initWeb(self):
@@ -168,11 +164,10 @@ The front of this card is empty. Please run Tools>Empty Cards.""")
             playFromText(q)
         # render & update bottom
         q = self._mungeQA(q)
-        a = self._mungeQA(a)
 
         bodyclass = "card card%d" % (c.ord+1)
 
-        self.web.eval("_showQuestion(%s, %s, '%s');" % (json.dumps(q), json.dumps(a), bodyclass))
+        self.web.eval("_showQuestion(%s,'%s');" % (json.dumps(q), bodyclass))
         self._toggleStar()
         self._showAnswerButton()
         # if we have a type answer field, focus main web
@@ -204,11 +199,12 @@ The front of this card is empty. Please run Tools>Empty Cards.""")
         self.state = "answer"
         c = self.card
         a = c.a()
+        a = self._mungeQA(a)
         # play audio?
         if self.autoplay(c):
             playFromText(a)
         # render and update bottom
-        self.web.eval("_showAnswer(%s);" % json.dumps(''))
+        self.web.eval("_showAnswer(%s);" % json.dumps(a))
         self._showEaseButtons()
         # user hook
         runHook('showAnswer')

web/reviewer.css

@@ -6,5 +6,3 @@ img { max-width: 95%; max-height: 95%; }
 .typeGood { background: #0f0; }
 .typeBad { background: #f00; }
 .typeMissed { background: #ccc; }
-#qa { position: relative; }
-.qaelem { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

web/reviewer.js

@@ -1,76 +1,54 @@
 var ankiPlatform = "desktop";
 var typeans;
-var currentAns = "_answer1";
+var fadeTime = 100;
-var nextAns = "_answer2";
-var fadeTime = 200;
 
-function _switchAnswerTarget() {
+function _updateQA(html, onupdate, onshown) {
-    if (currentAns === "_answer1") {
+    // fade out current text
-        currentAns = "_answer2";
+    var qa = $("#qa");
-        nextAns = "_answer1";
+    qa.fadeTo(fadeTime, 0, function() {
-    } else {
+        // update text
-        currentAns = "_answer1";
+        qa.html(html);
-        nextAns = "_answer2";
+        onupdate(qa);
-    }
-}
-
-function _makeVisible(jquery) {
-    return jquery.css("visibility", "visible").css("opacity", "1");
-}
-
-function _makeHidden(jquery) {
-    // must alter visibility as well so hidden elements are not clickable
-    return jquery.css("visibility", "hidden").css("opacity", "0");
-}
-
-function _showQuestion(q, a, bodyclass) {
-    document.body.className = bodyclass;
-
-    // update question text
-    _makeHidden($("#_question")).html(q);
-
-    // preload answer
-    _makeHidden($("#"+nextAns)).html(a);
-
-    // fade out previous answer
-    $("#"+currentAns).fadeTo(fadeTime, 0, function () {
-        // hide fully
-        _makeHidden($("#"+currentAns));
-        // and reveal question when processing is done
-        MathJax.Hub.Queue(function () {
-            $("#_question").css("visibility", "visible").fadeTo(
-                fadeTime, 1, function () {
-                    // focus typing area if visible
-                    typeans = document.getElementById("typeans");
-                    if (typeans) {
-                        typeans.focus();
-                    }
-                });
-        });
-    });
-
-    // return to top of window
-    window.scrollTo(0, 0);
 
         // don't allow drags of images, which cause them to be deleted
         $("img").attr("draggable", false);
 
         // render mathjax
         MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+
+        // and reveal when processing is done
+        MathJax.Hub.Queue(function () {
+            qa.fadeTo(fadeTime, 1, function () {
+                onshown(qa);
+            });
+        });
+    });
 }
 
-function _showAnswer(nextQuestion){
+function _showQuestion(q, bodyclass) {
-    // hide question; show answer
+    _updateQA(q, function(obj) {
-    _makeHidden($("#_question"));
+        // return to top of window
-    _makeVisible($("#"+nextAns));
+        window.scrollTo(0, 0);
 
+        document.body.className = bodyclass;
+    }, function(obj) {
+        // focus typing area if visible
+        typeans = document.getElementById("typeans");
+        if (typeans) {
+            typeans.focus();
+        }
+    });
+}
+
+function _showAnswer(a) {
+    _updateQA(a, function(obj) {
         // scroll to answer?
         var e = $("#answer");
         if (e[0]) {
             e[0].scrollIntoView();
         }
-
+    }, function(obj) {
-    _switchAnswerTarget();
+    });
 }
 
 function _toggleStar(show) {