From 6d8eb93282ac066b53fb6dbb8452ec5ff347847b Mon Sep 17 00:00:00 2001
From: Sebastian Wilzbach <seb@wilzba.ch>
Date: Tue, 27 Jun 2017 09:34:35 +0200
Subject: [PATCH] Fix redraw flashes at the JavaScript example roulette

---
 index.dd    | 20 ++++++++++++++++----
 js/dlang.js |  8 --------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/index.dd b/index.dd
index d75a861a44..c30b1ed6f6 100644
--- a/index.dd
+++ b/index.dd
@@ -28,8 +28,7 @@ $(DIVC intro, $(DIV, $(DIV,
                 $(P Upon approval it will be showcased here on a random schedule.)
             )
         )
-        $(DIVID your-code-here-default,
-$(RUNNABLE_EXAMPLE
+$(EXTRA_EXAMPLE
 $(RUNNABLE_EXAMPLE_STDIN
 The D programming language
 Modern convenience.
@@ -50,7 +49,6 @@ void main()
 }
 ----
 )
-)
 $(EXTRA_EXAMPLE
 $(RUNNABLE_EXAMPLE_STDIN 2.4 plus 2.4 equals 5 for sufficiently large values of 2.)
 ----
@@ -98,8 +96,22 @@ void main()
 ----
 )
 
+) $(COMMENT your-code-here)
+))) $(COMMENT intro, div, div)
+
+$(COMMENT
+Picking the frontpage example after the page has loaded leads to reflows
+and re-rendering. Hence, we pick the example as soon as possible
+)
+$(SCRIPT
+    (function() {
+    // randomly pick one example and bootstrap the runnable editor
+    var examples = document.getElementsByClassName('your-code-here-extra');
+    var rouletteIndex = Math.floor(Math.random() * examples.length);
+    var rouletteChild = examples[rouletteIndex];
+    rouletteChild.style.display = "block";
+    })();
 )
-)))
 
 $(DIVC more,
 
diff --git a/js/dlang.js b/js/dlang.js
index a404ba6169..2ff4b721d5 100644
--- a/js/dlang.js
+++ b/js/dlang.js
@@ -58,14 +58,6 @@
             $('#search-query input').focus();
         });
 
-        // [your code here] rotation for index.html
-        var $examples = $('.your-code-here-extra .d_code');
-        if ($examples.length) {
-            var n = Math.floor(Math.random() * ($examples.length+1));
-            if (n)
-                $('#your-code-here-default .d_code').replaceWith($examples[n-1]);
-        }
-
         // Insert the show/hide button if the contents section exists
         $('.page-contents-header').append('<span><a href="javascript:void(0);">[hide]</a></span>');