From 27b1ce69a5a4997c1d3052808a2c400e0f96cad3 Mon Sep 17 00:00:00 2001
From: juan <juanmarulandadelosri@cmail.carleton.ca>
Date: Wed, 4 Sep 2024 17:06:53 -0400
Subject: [PATCH] jumping

---
 lib/api_service.dart | 44 +++++++++++++++---------
 lib/augment.dart     | 82 +++++++++++++++++++++++++++++++++++++++++---
 lib/main.dart        |  1 -
 3 files changed, 105 insertions(+), 22 deletions(-)

diff --git a/lib/api_service.dart b/lib/api_service.dart
index 350a4e4..90041df 100644
--- a/lib/api_service.dart
+++ b/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
diff --git a/lib/augment.dart b/lib/augment.dart
index 1cb9e92..2d18ca2 100644
--- a/lib/augment.dart
+++ b/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]);
+  }
 }
diff --git a/lib/main.dart b/lib/main.dart
index 5caf612..3abf8db 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -20,7 +20,6 @@ class HyM extends StatelessWidget {
       title: 'HyM',
       home: HomeScreen(),
       routes: {
-        // '/': (context) => HomeScreen(),
         "/email": (context) => EmailPage(),
         "/contacts": (context) => ContactsPage(),
       },