From 80b7d8ea8975c3eac26f8c6fa01fbe744a2c5b4a Mon Sep 17 00:00:00 2001
From: Angus McLeod <angus@mcleod.org.au>
Date: Sun, 3 Dec 2017 10:44:03 +0800
Subject: [PATCH] Use jQuery to simulate search-header to get width pre-render

---
 desktop/head_tag.html | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/desktop/head_tag.html b/desktop/head_tag.html
index a48f1a0..89d89fd 100755
--- a/desktop/head_tag.html
+++ b/desktop/head_tag.html
@@ -1,27 +1,16 @@
 <script type="text/discourse-plugin" version='0.8.9'>
 
-// from https://stackoverflow.com/questions/2707790/get-a-css-value-from-external-style-sheet-with-javascript-jquery
-function getStyleSheetPropertyValue(selectorText, propertyName) {
-  // search backwards because the last match is more likely the right one
-  for (var s= document.styleSheets.length - 1; s >= 0; s--) {
-    var cssRules = document.styleSheets[s].cssRules ||
-            document.styleSheets[s].rules || []; // IE support
-    for (var c=0; c < cssRules.length; c++) {
-      if (cssRules[c].selectorText === selectorText)
-        return cssRules[c].style[propertyName];
-    }
-  }
-  return null;
-}
-
 const SiteHeader = require('discourse/components/site-header').default;
 SiteHeader.reopen({
   toggleVisibility: function(topicToggled) {
     const headerWidth = this.$('.d-header .contents').width();
     const panelWidth = this.$('.d-header .panel').width();
     const logoWidth = this.$('.d-header .title a').width();
-    const searchWidthStr = getStyleSheetPropertyValue('.search-header', 'width');
-    const searchWidth = searchWidthStr ? parseInt(searchWidthStr) : 600; // needs a backup
+
+    const $searchHeader = $('<div class="search-header"/>').hide().appendTo("body");
+    const searchWidth = parseInt($searchHeader.css("width"));
+    $searchHeader.remove();
+
     const showHeaderSearch = headerWidth > (panelWidth + logoWidth + searchWidth + 30); // 30 is a buffer
     const appController = api.container.lookup('controller:application');
     const currentState = appController.get('showHeaderSearch');