jumping

lib/api_service.dart

@@ -5,6 +5,7 @@ import 'dart:ui_web' as ui;
 import 'dart:html' as html;
 import 'augment.dart';
 import 'dart:js' as js;
+// import 'dart:js_util';
 
 class MailAddress {
   final String? name;
@@ -343,6 +344,7 @@ class _EmailViewState extends State<EmailView> {
   late Key iframeKey;
   late String currentContent;
   late String viewTypeId;
+  TextEditingController _jumpController = TextEditingController();
 
   @override
   void initState() {
@@ -365,6 +367,10 @@ class _EmailViewState extends State<EmailView> {
     });
   }
 
+  void _scrollToNumber(String spanId) {
+    AugmentClasses.handleJump(viewTypeId, spanId);
+  }
+
   @override
   Widget build(BuildContext context) {
     // print(currentContent);
@@ -375,25 +381,29 @@ class _EmailViewState extends State<EmailView> {
         body: Column(
           children: [
             EmailToolbar(
-              onButtonPressed: () {
-                _registerViewFactory(r"""
-                <h1>Welcome to My Website</h1>
-                <p>This is a simple HTML page.</p>
-                <h2>What is HTML?</h2>
-                <p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).</p>
-                <h3>Here's a simple list:</h3>
-                <ul>
-                    <li>HTML elements are the building blocks of HTML pages</li>
-                    <li>HTML uses tags like <code>&lt;tag&gt;</code> to organize and format content</li>
-                    <li>CSS is used with HTML to style pages</li>
-                </ul>
-                <p>Copyright © 2023</p>
-                """);
-                print("change");
-                // widget.emailContent = r"
+              onJumpToSpan: _scrollToNumber,
+              onButtonPressed: () => {},
+              // AugmentClasses.handleJump(viewTypeId, '1');
+              // print("button got pressed?");
+
+              //   _registerViewFactory(r"""
+              // <h1>Welcome to My Website</h1>
+              // <p>This is a simple HTML page.</p>
+              // <h2>What is HTML?</h2>
+              // <p>HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).</p>
+              // <h3>Here's a simple list:</h3>
+              // <ul>
+              //     <li>HTML elements are the building blocks of HTML pages</li>
+              //     <li>HTML uses tags like <code>&lt;tag&gt;</code> to organize and format content</li>
+              //     <li>CSS is used with HTML to style pages</li>
+              // </ul>
+              // <p>Copyright © 2023</p>
+              // """);
+              //   print("change");
+              // widget.emailContent = r"
 
 // "
-              },
+              // },
             ),
             Row(
               // title of email

lib/augment.dart

@@ -1,14 +1,20 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:http/http.dart' as http;
 import 'dart:convert';
 import 'dart:ui_web' as ui;
 import 'dart:html' as html;
 import 'dart:js' as js;
+import 'api_service.dart';
 
 class EmailToolbar extends StatefulWidget {
+  final Function(String) onJumpToSpan;
   final VoidCallback onButtonPressed;
 
-  EmailToolbar({Key? key, required this.onButtonPressed}) : super(key: key);
+  EmailToolbar(
+      {Key? key, required this.onButtonPressed, required this.onJumpToSpan})
+      : super(key: key);
 
   @override
   _DynamicClassesAugment createState() => _DynamicClassesAugment();
@@ -16,6 +22,8 @@ class EmailToolbar extends StatefulWidget {
 
 class _DynamicClassesAugment extends State<EmailToolbar> {
   String selectedClass = 'Class 1';
+  TextEditingController _jumpController = TextEditingController();
+
   late final FocusNode _JumpItemfocusNode;
   late final FocusNode _viewSpecsfocusNode;
 
@@ -39,8 +47,9 @@ class _DynamicClassesAugment extends State<EmailToolbar> {
 
   @override
   void dispose() {
-    _JumpItemfocusNode.dispose();
-    _viewSpecsfocusNode.dispose();
+    // _JumpItemfocusNode.dispose();
+    // _viewSpecsfocusNode.dispose();
+    _jumpController.dispose();
     super.dispose();
   }
 
@@ -115,10 +124,17 @@ class _DynamicClassesAugment extends State<EmailToolbar> {
                 width: 150,
                 height: 30,
                 child: TextField(
+                  controller: _jumpController,
                   decoration: InputDecoration(
                       labelText: 'Jump Item',
                       border: OutlineInputBorder(),
                       suffixIcon: Icon(Icons.search)),
+                  onSubmitted: (value) {
+                    print("onSubmitted");
+                    if (value.isNotEmpty) {
+                      widget.onJumpToSpan(value);
+                    }
+                  },
                 ),
               ),
               //TODO: Make an animation to make the button a textfield
@@ -190,7 +206,7 @@ class AugmentClasses {
   }
 
   static void handleReload() {
-    print("Reload button pressed");
+    print("reload");
   }
 
   static void handleImages() {
@@ -208,4 +224,62 @@ class AugmentClasses {
   static void handleStop() {
     print("Stop button pressed");
   }
+
+  static void handleJump(String viewTypeId, String spanId) {
+    print(spanId);
+    // final jsCode = '''
+    // var iframe = document.getElementById("iframe#$viewTypeId").contentWindow;
+    // var element = iframe.document.getElementById('$spanId');
+    // if (element) {
+    //   element.scrollIntoView({behavior: "smooth", block: "start"});
+    // }
+    // ''';
+// final jsCode = '''
+//     var iframe = document.getElementById("$viewTypeId");
+//     if (iframe) {
+//       var iframeWindow = iframe.contentWindow;
+//       if (iframeWindow && iframeWindow.document) {
+//         var element = iframeWindow.document.getElementById('$spanId');
+//         if (element) {
+//           element.scrollIntoView({behavior: "smooth", block: "start"});
+//           console.log("Scrolling to element with ID: $spanId");
+//         } else {
+//           console.error("Element with ID $spanId not found in iframe.");
+//         }
+//       } else {
+//         console.error("Iframe contentWindow or document is not accessible.");
+//       }
+//     } else {
+//       console.error("Iframe with ID $viewTypeId not found.");
+//     }
+//   ''';
+    // print('jumped'); // For debugging in Dart
+
+    // // Execute the JavaScript code
+    // js.context.callMethod('eval', [jsCode]);
+    // Select the first iframe on the page
+    String js_code = '''
+      var iframe = document.getElementsByTagName('iframe')[0]; // 0 for the first iframe, 1 for the second, etc.
+
+      // Check if the iframe is loaded and has content
+      if (iframe && iframe.contentDocument) {
+          // Access the document inside the iframe
+          var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+          // Find the element with the specific id inside the iframe
+          var targetElement = iframeDoc.getElementById("$spanId"); // Replace '36 ' with the actual id of the target element
+
+          // If the element exists, scroll to it
+          if (targetElement) {
+              targetElement.scrollIntoView();
+              console.log('Scrolled to element with id "$spanId" inside the iframe.');
+          } else {
+              console.log('Element with id "$spanId" not found inside the iframe.');
+          }
+      } else {
+          console.log('Iframe not found or not loaded.');
+      }
+      ''';
+      js.context.callMethod('eval', [js_code]);
+  }
 }

lib/main.dart

@@ -20,7 +20,6 @@ class HyM extends StatelessWidget {
       title: 'HyM',
       home: HomeScreen(),
       routes: {
-        // '/': (context) => HomeScreen(),
         "/email": (context) => EmailPage(),
         "/contacts": (context) => ContactsPage(),
       },