Adapt app for better iframe embedding

mc-wiki · Jan 22, 2025 · 9aa2ab7 · 9aa2ab7
1 parent ad62223
commit 9aa2ab7
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -4,45 +4,47 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="utf-8">
         <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
-        <script src="data.js?10"></script>
-        <script src="script.js?15"></script>
-        <link rel="stylesheet" type="text/css" href="style.css?3">
+        <script src="data.js?11"></script>
+        <script src="script.js?16"></script>
+        <link rel="stylesheet" type="text/css" href="style.css?4">
         <script src="https://unpkg.com/@hungrybluedev/theme-switcher@latest/dist/switch.js" type="module" defer></script>
     </head>
     <body>
 
         <div class="inner">
-
-            <div class="top-container">
+
+            <header>
+                <div class="top-container">
+                    <p>
+                        <label for="language"></label>
+                        <select id="language" class="selectLanguage">
+                            <option value="">Choose a language</option>
+                        </select>
+                    </p>
+
+                </div>
+
+                <h1>Minecraft Enchantment Ordering Tool</h1>
+
                 <p>
-                    <label for="language"></label>
-                    <select id="language" class="selectLanguage">
-                        <option value="">Choose a language</option>
-                    </select>
+                    When enchanting items in Minecraft, the order in which you combine armor, weapons and tools with books in your
+                    anvil makes a huge difference. Each time you work on an anvil, you increase the <a href="https://minecraft.wiki/w/Anvil_mechanics">work penalty</a> for future workings. Once that
+                    penalty gets too high, you simply can't add any more enchantments and the anvil says "Too Expensive!". This tool
+                    helps you plan the optimal order of combining and applying books, to give you the cheapest possible cost.
                 </p>
-
-            </div>
-
-            <h1>Minecraft Enchantment Ordering Tool</h1>
-
-            <p>
-                When enchanting items in Minecraft, the order in which you combine armor, weapons and tools with books in your
-                anvil makes a huge difference. Each time you work on an anvil, you increase the <a href="https://minecraft.wiki/w/Anvil_mechanics">work penalty</a> for future workings. Once that
-                penalty gets too high, you simply can't add any more enchantments and the anvil says "Too Expensive!". This tool
-                helps you plan the optimal order of combining and applying books, to give you the cheapest possible cost.
-            </p>
-            <p>
-                This tool assume your gear and books start with zero "work penalty". That means you have not previously combined
-                the books (e.g. to turn two level 1 books into a single level 2 book) or worked the items or books in an anvil
-                in any way. To create gear with the maximum possible enchantment, you cannot combine lower-level books and must
-                start with high-level books from villager trading.
-            </p>
-            <p>
-                Allowing incompatible enchantments may be useful for combining protection-type enchantments (1.14 to 1.14.3pre-1)
-                and mending/infinity (1.9 to 1.11.1).
-            </p>
-
-            <hr>
+                <p>
+                    This tool assume your gear and books start with zero "work penalty". That means you have not previously combined
+                    the books (e.g. to turn two level 1 books into a single level 2 book) or worked the items or books in an anvil
+                    in any way. To create gear with the maximum possible enchantment, you cannot combine lower-level books and must
+                    start with high-level books from villager trading.
+                </p>
+                <p>
+                    Allowing incompatible enchantments may be useful for combining protection-type enchantments (1.14 to 1.14.3pre-1)
+                    and mending/infinity (1.9 to 1.11.1).
+                </p>
+
+                <hr>
+            </header>
 
             <div id="left">
 

diff --git a/script.js b/script.js
@@ -30,6 +30,15 @@ const languages = {
 
 const languages_cache_key = 6;
 
+
+function isEmbedded() {
+    try {
+        return window.self !== window.top;
+    } catch {
+        return true;
+    }
+}
+
 window.onload = function() {
 
     worker = new Worker("work.js?6");
@@ -43,6 +52,15 @@ window.onload = function() {
         data: data
     });
 
+    if (isEmbedded()) {
+        document.body.classList.add('embedded');
+        // this is not optimal, but it's the only way unless we fork theme-switcher
+        const theme = new URLSearchParams(location.search).get('theme');
+        if (theme) {
+            localStorage.setItem('tswitch-theme', theme)
+        }
+    }
+
     buildItemSelection();
     buildEnchantmentSelection();
     buildCalculateButton();
@@ -683,21 +701,29 @@ async function setupLanguage(){
 }
 
 function defineBrowserLanguage(){
-    if (!localStorage.getItem("savedlanguage")) {
-        // language isn't saved and has to be detected
-        const browserLanguage = navigator.language || navigator.userLanguage;
-        if (languages[browserLanguage]){
-            changePageLanguage(browserLanguage);
-        } else {
-            changePageLanguage('en');
+    if (localStorage.getItem("savedlanguage")) {
+        // language is saved, load from save
+        return changePageLanguage(localStorage.getItem('savedlanguage'));
+    }
+
+    if (new URLSearchParams(location.search).has('lang')) {
+        // language is set in the URL
+        const urlLanguage = new URLSearchParams(location.search).get('lang');
+        if (languages[urlLanguage]) {
+            return changePageLanguage(urlLanguage);
         }
+    }
+
+    // language isn't saved and has to be detected
+    const browserLanguage = navigator.language || navigator.userLanguage;
+    if (languages[browserLanguage]) {
+        return changePageLanguage(browserLanguage);
     } else {
-        // language is saved, load from save
-        changePageLanguage(localStorage.getItem("savedlanguage"));
+        return changePageLanguage('en');
     }
 }
 
-async function changePageLanguage(language){
+async function changePageLanguage(language, saveToLocalStorage = true){
     if (!languages[language]){
         console.error("Trying to switch to unknown language:", language);
         return;
@@ -707,8 +733,10 @@ async function changePageLanguage(language){
     languageJson = await loadJsonLanguage(language).then(languageData => { return languageData});
     if (languageJson){
         changeLanguageByJson(languageJson);
-        localStorage.setItem("savedlanguage", language);
-        // ^ Save language choice to localstorage
+        if (saveToLocalStorage) {
+            localStorage.setItem("savedlanguage", language)
+            // ^ Save language choice to localstorage
+        }
     }
 }
 

diff --git a/style.css b/style.css
@@ -77,6 +77,10 @@ html[data-theme="crimson"] {
   --solution: var(--enchantment-results);
 }
 
+body.embedded {
+  --bg-primary: transparent;
+}
+
 /* TODO: fix enchantment results variable name, misnomer */
 
 .selectItem:focus, .selectLanguage:focus {
@@ -324,12 +328,30 @@ a:hover {
   outline: 2px solid var(--fg-primary);
 }
 
+/* When used in iframe */
+body.embedded #theme-switcher-form,
+body.embedded header :not(h1) {
+  display: none;
+}
+
+body.embedded h1 {
+  font-size: 18px;
+}
+
+body.embedded .inner {
+  margin: 0;
+  padding: 0;
+}
+
+body.embedded .footer {
+  font-size: 14px;
+}
 
 @media only screen and (max-width: 422px) {
   .footer {
     text-align: center
   }
-  
+
   .footer * {
     margin-right: auto;
     margin-left: auto;
@@ -354,7 +376,7 @@ a:hover {
     margin-top: 13px;
     margin-left: 12px;
   }
-  
+
   /*#theme-switcher-form {
     width: 90px;
   }*/