From d34ea0538f9eeb7457f480fa432ff91075e0b8cf Mon Sep 17 00:00:00 2001
From: Ambrose Chua <ambrose@hey.com>
Date: Sun, 15 Aug 2021 15:30:50 +0800
Subject: [PATCH] Shrink and move ferris when possible

---
 ferris.css | 17 ++++++++++++++---
 ferris.js  | 34 ++++++++++++++++++++++++++--------
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/ferris.css b/ferris.css
index 371207924c..03bf2d3117 100644
--- a/ferris.css
+++ b/ferris.css
@@ -19,13 +19,24 @@ body.ayu .not_desired_behavior {
   background: #501f21;
 }
 
-.ferris {
+.ferris-container {
   position: absolute;
   z-index: 99;
   right: 5px;
   top: 30px;
-	width: 10%;
-	height: auto;
+}
+
+.ferris {
+  vertical-align: top;
+  margin-left: 0.5em;
+}
+
+.ferris-large {
+  width: 4.5em;
+}
+
+.ferris-small {
+  width: 3em;
 }
 
 .ferris-explain {
diff --git a/ferris.js b/ferris.js
index 879799c717..bb601a4e28 100644
--- a/ferris.js
+++ b/ferris.js
@@ -19,19 +19,36 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 })
 
-function attachFerrises (type) {
+function attachFerrises(type) {
   var elements = document.getElementsByClassName(type.attr)
 
   for (var codeBlock of elements) {
-    var lines = codeBlock.textContent.split(/\r|\r\n|\n/).length - 1;
-
-    if (lines >= 4) {
-      attachFerris(codeBlock, type)
+    var lines = codeBlock.innerText.replace(/\n$/, '').split(/\n/).length
+    var size = 'large'
+    if (lines < 4) {
+      size = 'small'
     }
+
+    var container = prepareFerrisContainer(codeBlock, size == 'small')
+    container.appendChild(createFerris(type, size))
+  }
+}
+
+function prepareFerrisContainer(element, useButtons) {
+  var foundButtons = element.parentElement.querySelector('.buttons')
+  if (useButtons && foundButtons) {
+    return foundButtons
   }
+
+  var div = document.createElement('div')
+  div.classList.add('ferris-container')
+
+  element.parentElement.insertBefore(div, element)
+
+  return div
 }
 
-function attachFerris (element, type) {
+function createFerris(type, size) {
   var a = document.createElement('a')
   a.setAttribute('href', 'ch00-00-introduction.html#ferris')
   a.setAttribute('target', '_blank')
@@ -39,9 +56,10 @@ function attachFerris (element, type) {
   var img = document.createElement('img')
   img.setAttribute('src', 'img/ferris/' + type.attr + '.svg')
   img.setAttribute('title', type.title)
-  img.className = 'ferris'
+  img.classList.add('ferris')
+  img.classList.add('ferris-' + size)
 
   a.appendChild(img)
 
-  element.parentElement.insertBefore(a, element)
+  return a
 }