perf: adaptive big word title and details summary title font size

tisfeng · Dec 21, 2023 · e623924 · e623924
1 parent 0c5374d
commit e623924
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 29 deletions.
diff --git a/Easydict/Feature/Service/Apple/AppleDictionary/apple-dictionary.html b/Easydict/Feature/Service/Apple/AppleDictionary/apple-dictionary.html
@@ -21,6 +21,9 @@
       --iframe-right-margin: 6px;
       --iframe-bottom-margin: 12px;
       --iframe-left-margin: 6px;
+
+      --big-word-title-font-size: 24px;
+      --details-summary-font-size: 18px;
     }
 
     body {
@@ -33,7 +36,7 @@
     .big-word-title {
       margin: 8px 0px 0px 8px;
       font-weight: 550;
-      font-size: 24px;
+      font-size: var(--big-word-title-font-size);
     }
 
     .custom-iframe-container {
@@ -58,7 +61,7 @@
   <style>
     details summary {
       font-weight: 400;
-      font-size: 18px;
+      font-size: var(--details-summary-font-size);
       margin: 5px 0;
       text-align: center;
     }
@@ -293,7 +296,7 @@
         // var bodyHeight = iframeDocument.body.getBoundingClientRect().height;
         // console.log("bodyHeight: " + bodyHeight);
 
-        // 获取body元素的外边距
+        // 获取 body 元素的外边距
         var marginTop = parseInt(bodyStyle.getPropertyValue("margin-top"));
         var marginBottom = parseInt(
           bodyStyle.getPropertyValue("margin-bottom")
@@ -302,7 +305,7 @@
         var marginHeight = marginTop + marginBottom;
         // console.log("marginHeight: " + marginHeight); // 16
 
-        // 获取iframe元素的边框
+        // 获取 iframe 元素的边框
         var borderTop = parseInt(
           iframeStyle.getPropertyValue("border-top-width")
         );
@@ -320,19 +323,19 @@
         var totalHeight = scrollHeight + marginHeight + borderHeight;
 
         // 我也不知道为什么要加这个判断，但是不加的话，有些页面会出现滚动条 😢
-        // 但 documentScollHeight 最小值是 150，所以这里判断一下. hackathon
+        // 但 documentScollHeight 最小值是 150，所以这里判断一下。hackathon
         // if (totalHeight <= documentScollHeight && documentScollHeight > 150) {
         //   totalHeight = documentScollHeight + borderHeight;
         // }
 
         totalHeight = documentElementScrollHeight;
 
-        // 设置iframe的高度
+        // 设置 iframe 的高度
         iframe.style.height = totalHeight + "px";
 
         // console.log(`${i}: frame totalHeight: ${totalHeight}`);
-        
-        
+
+
         var scrollHeight = getScrollHeight();
 
         if (window.webkit && window.webkit.messageHandlers) {
@@ -383,10 +386,10 @@
         bigWordTitleHeight +
         allIframesHeight +
         dictionaryTitleHeight * iframesHeight.length;
-        
+
       // console.log(`iframesHeight: [${iframesHeight}]`);
       // console.log(`scrollHeight: ${scrollHeight}`);
-      
+
       return scrollHeight;
     }
 
@@ -437,20 +440,51 @@
         iframe.style.borderColor = newBorderColor;
       }
     }
-
-      // Change all iframes body font size
-      function changeIframeBodyFontSize(fontSize) {
-          console.log("fontSize: " + fontSize);
-          var iframes = document.getElementsByTagName('iframe');
-          for (var i = 0; i < iframes.length; i++) {
-              var iframe = iframes[i];
-              var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
-
-              // 修改 iframe 中 body 的字体大小
-              frameDoc.body.style.fontSize = fontSize;
-          }
+
+    // Change font size
+    function changeIframeBodyFontSize(fontSizeRatio) {
+      var percentFontSize = fontSizeRatio * 100 + "%";
+      console.log("fontSize: " + fontSizeRatio);
+
+      // change body font size
+      document.body.style.fontSize = percentFontSize;
+
+      // change .big-word-title font size
+      var rootStyles = getComputedStyle(document.documentElement);
+      var originalBigWordTitleFontSize = rootStyles.getPropertyValue(
+        "--big-word-title-font-size"
+      );
+      var bigWordTitle = document.querySelector(".big-word-title");
+      changeElementFontSize(bigWordTitle, originalBigWordTitleFontSize, fontSizeRatio);
+
+      // change details summary font size
+      var detailsSummaryList = document.querySelectorAll("details summary");
+      for (var i = 0; i < detailsSummaryList.length; i++) {
+        var summary = detailsSummaryList[i];
+        var originalDetailsSummaryFontSize = rootStyles.getPropertyValue(
+          "--details-summary-font-size"
+        );
+        changeElementFontSize(summary, originalDetailsSummaryFontSize, fontSizeRatio);
       }
 
+      // change all iframe body font size
+      var iframes = document.getElementsByTagName('iframe');
+      for (var i = 0; i < iframes.length; i++) {
+        var iframe = iframes[i];
+        var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+        // 修改 iframe 中 body 的字体大小
+        frameDoc.body.style.fontSize = percentFontSize;
+      }
+    }
+
+    function changeElementFontSize(element, originalFontSize, fontSizeRatio) {
+      // console.log(`originalFontSize: ${originalFontSize}`);
+      var newFontSize = parseFloat(originalFontSize) * fontSizeRatio;
+      // console.log(`newFontSize: ${newFontSize}`);
+      element.style.fontSize = newFontSize + 'px';
+    }
+
     window.onload = function () {
       // 重写 console.log，以便在 Xcode 中输出日志
       if (
@@ -480,4 +514,4 @@
 
 <body></body>
 
-</html>
+</html>
diff --git a/Easydict/Feature/ViewController/View/WordResultView/EZWebViewManager.m b/Easydict/Feature/ViewController/View/WordResultView/EZWebViewManager.m
@@ -39,13 +39,13 @@ - (WKWebView *)webView {
 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
     id body = message.body;
 
-    if([message.name isEqualToString:kObjcHandler]) {
-        if([body[kMethod] isEqualToString:@"consoleLog"]) {
+    if ([message.name isEqualToString:kObjcHandler]) {
+        if ([body[kMethod] isEqualToString:@"consoleLog"]) {
             NSString *message = body[@"message"];
             NSLog(@"<javascript log>: %@", message);
         }
 
-        if([body[kMethod] isEqualToString:@"noteToUpdateScrollHeight"]) {
+        if ([body[kMethod] isEqualToString:@"noteToUpdateScrollHeight"]) {
             CGFloat scrollHeight = [body[@"scrollHeight"] floatValue];
             if (self.didFinishUpdatingIframeHeightBlock) {
                 self.didFinishUpdatingIframeHeightBlock(scrollHeight);
@@ -57,11 +57,10 @@ - (void)userContentController:(WKUserContentController *)userContentController d
 #pragma mark - WebView evaluateJavaScript
 
 - (void)updateAllIframe {
-    CGFloat fontSize = EZConfiguration.shared.fontSizeRatio * 100; // 140%
-    NSString *script = [NSString stringWithFormat:@"changeIframeBodyFontSize('%.1f%%'); updateAllIframeStyle();", fontSize];
+    CGFloat fontSize = EZConfiguration.shared.fontSizeRatio; // 1.4 --> 140%
+    NSString *script = [NSString stringWithFormat:@"changeIframeBodyFontSize(%.1f); updateAllIframeStyle();", fontSize];
     [self.webView evaluateJavaScript:script completionHandler:^(id _Nullable result, NSError *_Nullable error) {
         if (!error) {
-
         }
     }];
 }