lib/api_service.dart

@@ -5,7 +5,7 @@ import 'dart:ui_web' as ui;
 import 'dart:html' as html;
 import 'augment.dart';
 import 'dart:js' as js;
-// import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+// import 'dart:js_util';
 
 class MailAddress {
   final String? name;
@@ -344,6 +344,7 @@ class _EmailViewState extends State<EmailView> {
   late Key iframeKey;
   late String currentContent;
   late String viewTypeId;
+  TextEditingController _jumpController = TextEditingController();
 
   @override
   void initState() {
@@ -366,8 +367,13 @@ class _EmailViewState extends State<EmailView> {
     });
   }
 
+  void _scrollToNumber(String spanId) {
+    AugmentClasses.handleJump(viewTypeId, spanId);
+  }
+
   @override
   Widget build(BuildContext context) {
+    // print(currentContent);
     return Scaffold(
         appBar: AppBar(
           title: Text(widget.name),
@@ -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,35 +1,285 @@
+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 StatelessWidget {
+class EmailToolbar extends StatefulWidget {
+  final Function(String) onJumpToSpan;
   final VoidCallback onButtonPressed;
 
-  const 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();
+}
+
+class _DynamicClassesAugment extends State<EmailToolbar> {
+  String selectedClass = 'Class 1';
+  TextEditingController _jumpController = TextEditingController();
+
+  late final FocusNode _JumpItemfocusNode;
+  late final FocusNode _viewSpecsfocusNode;
+
+  bool _jumpItemHasFocus = false;
+  bool _viewSpecsHasFocus = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _JumpItemfocusNode = FocusNode();
+    _viewSpecsfocusNode = FocusNode();
+
+    _JumpItemfocusNode.addListener(() {
+      setState(() => _jumpItemHasFocus = _JumpItemfocusNode.hasFocus);
+    });
+
+    _viewSpecsfocusNode.addListener(() {
+      setState(() => _viewSpecsHasFocus = _viewSpecsfocusNode.hasFocus);
+    });
+  }
+
+  @override
+  void dispose() {
+    // _JumpItemfocusNode.dispose();
+    // _viewSpecsfocusNode.dispose();
+    _jumpController.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        ElevatedButton(
-          onPressed: onButtonPressed,
-          child: Text('Home'),
-        ),
-        SizedBox(width: 8),
-        ElevatedButton(
-          onPressed: onButtonPressed,
-          child: Text('Reload'),
-        ),
-        Spacer(),
-        ElevatedButton(
-          onPressed: onButtonPressed,
-          child: Text('Options'),
-        )
-      
-      ],
-    );
+    const animationDuration = Duration(milliseconds: 250);
+
+    return Column(children: [
+      Row(
+        children: [
+          ElevatedButton(
+            onPressed: () => AugmentClasses.handleHome(context),
+            child: Text('Home'),
+          ),
+          SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleReload,
+            child: Text('Reload'),
+          ),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleImages,
+            child: Text('Images'),
+          ),
+          SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleOpen,
+            child: Text('Open'),
+          ),
+          // SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleFind,
+            child: Text('Find'),
+          ),
+          // SizedBox(width: 8),
+          ElevatedButton(
+            onPressed: AugmentClasses.handleStop,
+            child: Text('Stop'),
+          ),
+          Spacer(),
+          PopupMenuButton<String>(
+            onSelected: (String value) {
+              setState(() {
+                selectedClass = value;
+                print(selectedClass);
+              });
+            },
+            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+              const PopupMenuItem<String>(
+                value: 'Class 1',
+                child: Text('Class 1'),
+              ),
+              const PopupMenuItem<String>(
+                value: 'Class 2',
+                child: Text('Class 2'),
+              ),
+              const PopupMenuItem<String>(
+                value: 'Turbo 3',
+                child: Text('Turbo 3'),
+              ),
+            ],
+            // child: ElevatedButton(
+            // onPressed: () {},
+            child: Text('Options'),
+          ),
+        ],
+      ),
+      if (selectedClass == 'Class 2')
+        Stack(children: [
+          Row(
+            children: [
+              Container(
+                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
+              // AnimatedSwitcher(
+              //   duration: animationDuration,
+              //   transitionBuilder: (Widget child, Animation<double> animation) {
+              //     return FadeTransition(opacity: animation, child: child);
+              //   },
+              //   child: _jumpItemHasFocus
+              //       ? Container(
+              //           key: ValueKey('TextField1'),
+              //           width: 150,
+              //           child: TextField(
+              //             focusNode: _JumpItemfocusNode,
+              //             decoration: InputDecoration(
+              //               hintText: 'Enter Text',
+              //               border: OutlineInputBorder(),
+              //             ),
+              //           ),
+
+              //         )
+              //       : Container(
+              //           key: ValueKey('Button1'),
+              //           child: ElevatedButton(
+              //             onPressed: () => _JumpItemfocusNode.requestFocus(),
+              //             child: Text('Jump Item:'),
+              //         ),
+              //       ),
+              // ),
+              SizedBox(width: 8),
+              Container(
+                width: 150,
+                height: 30,
+                child: TextField(
+                  decoration: InputDecoration(
+                      labelText: 'viewSpecs',
+                      border: OutlineInputBorder(),
+                      suffixIcon: Icon(Icons.style_rounded)),
+                ),
+              ),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleImages,
+                child: Text('Filter'),
+              ),
+              SizedBox(width: 8),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleOpen,
+                child: Text('Lookup'),
+              ),
+              // SizedBox(width: 8),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleFind,
+                child: Text('Create Link'),
+              ),
+              ElevatedButton(
+                onPressed: AugmentClasses.handleFind,
+                child: Text('Paste Link'),
+              ),
+            ],
+          )
+        ])
+    ]);
+  }
+}
+
+class AugmentClasses {
+  static void handleHome(BuildContext context) {
+    Navigator.of(context).popUntil((route) => route.isFirst);
+  }
+
+  static void handleReload() {
+    print("reload");
+  }
+
+  static void handleImages() {
+    print("Images button pressed");
+  }
+
+  static void handleOpen() {
+    print("Open button pressed");
+  }
+
+  static void handleFind() {
+    print("Find button pressed");
+  }
+
+  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]);
   }
 }