Fix redraw flashes at the JavaScript example roulette

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,14 @@ 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 src="$(ROOT_DIR)js/example_roulette.js"></script>
 
 $(DIVC more,
 

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>');
 

js/example_roulette.js

@@ -0,0 +1,30 @@
+/**
+Picking the frontpage example after the page has loaded leads to reflows
+and re-rendering. Hence, we pick the example as soon as possible
+
+Copyright: 1999-2017 by D Language Foundation
+License:   http://boost.org/LICENSE_1_0.txt, Boost License 1.0
+*/
+/**
+Searches any object for the first hit.
+Params:
+    el = object to filter
+    fn = function to be applied as filter
+Returns: first hit, `undefined` otherwise
+*/
+function findFirst(el, fn) {
+    return Array.prototype.filter.call(el, fn)[0];
+}
+(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];
+
+// step 1: select the .runnable-example <div>
+var rouletteChildNode = findFirst(rouletteChild.children, function(e) { return e.className.indexOf("runnable-example") != -1; });
+// step 2: select the first <pre> element (of the .runnable-example <div>)
+var el = findFirst(rouletteChildNode.children, function(e) { return e.nodeName == "PRE";});
+el.style.marginBottom = "20px";
+rouletteChild.style.display = "block";
+})();

js/run.js

@@ -127,6 +127,8 @@ $(document).ready(function()
     {
         var root = $(this);
         var el = root.children("pre");
+        // hack from the front page to avoid redraw flashes due to the buttons showing up
+        el[0].style.marginBottom = "0px";
         var stripedText = el.text().replace(/\s/gm,'');
 
         var stdin = root.children(".runnable-examples-stdin").text();

posix.mak

@@ -157,7 +157,7 @@ IMAGES=favicon.ico $(ORGS_USING_D) $(addprefix images/, \
 
 JAVASCRIPT=$(addsuffix .js, $(addprefix js/, \
 	codemirror-compressed dlang ddox listanchors platform-downloads run \
-	run_examples show_contributors jquery-1.7.2.min))
+	run_examples show_contributors jquery-1.7.2.min example_roulette))
 
 STYLES=$(addsuffix .css, $(addprefix css/, \
 	style print codemirror ddox))