Changeset 886

Timestamp:

02/13/14 17:39:22 (10 years ago)

Author:

ngw8

Message:

Added a 'Reading Mode' to the JFXBrowser, which strips the page down to just the core content for easier reading (and tidier conversions, if you convert a page when it is enabled). The script is a modification of the 'Readability' bookmarklet (Apache 2 License, code.google.com/p/arc90labs-readability/), the main modifications being the removal of code that was unnecessary for the JFXBrowser, addition of zoom and font style buttons and a stylesheet that will work nicely with the Web Parser converter.

Also added code to the webparser that allows <pre> tags to be converted properly (without causing the page to become extremely wide)

Location:

trunk/src/org/expeditee

Files:

• assets/images/readableModeIcon.png (added)
• assets/scripts (added)
• assets/scripts/browserreadablemode (added)
• assets/scripts/browserreadablemode/readability.css (added)
• assets/scripts/browserreadablemode/readability.js (added)
• assets/scripts/browserreadablemode/readability.min.js (added)
• io/WebParser.java (modified) (2 diffs)
• items/widgets/JfxBrowser.java (modified) (11 diffs)

trunk/src/org/expeditee/io/WebParser.java

@@ -365 +365 @@
                                                 webEngine.executeScript(""
                                                                 // Setting all text to be hidden before taking the screenshot
-                                                                + "var style = 'WordSpan { visibility: hidden !important;}';"
-                                                                + "cssHide.appendChild(document.createTextNode(style));");
+                                                                + "cssHide.appendChild(document.createTextNode(wordSpanHiddenStyle));");
                                                 
                                                 WritableImage img = new WritableImage((int)webView.getWidth(), (int)webView.getHeight());
@@ -434 +433 @@
                                                                 + "var scrollCounterHorizontal = 0;");
 
-                                                // Setting up the element that contains the CSS to hide all text.
+                                                // Setting up the element that contains the CSS to hide all text. Also hiding readability mode buttons.
                                                 // This is wiped before the text is converted, then re-added before taking the screenshot
                                                 webEngine.executeScript(""
                                                                 + "var cssHide = document.createElement('style');"
                                                                 + "cssHide.type = 'text/css';"
-                                                                + "var style = 'WordSpan { visibility: hidden !important;}';"
-                                                                + "cssHide.appendChild(document.createTextNode(style));"
-                                                                + "document.getElementsByTagName('head')[0].appendChild(cssHide);");
+                                                                + "var wordSpanHiddenStyle = 'WordSpan, #readOverlay #readTools { visibility: hidden !important;}';"
+                                                                + "cssHide.appendChild(document.createTextNode(wordSpanHiddenStyle));"
+                                                                + "document.getElementsByTagName('head')[0].appendChild(cssHide);"
+                                                                );
+                                                
+                                                // Replacing line breaks in all <pre> tags with <br> tags, otherwise they are lost during the conversion
+                                                webEngine.executeScript(""
+                                                                + "var pres = document.getElementsByTagName ('pre');"
+                                                                + "for(var i = 0; i < pres.length; i++){"
+                                                                + "             pres[i].innerHTML = pres[i].innerHTML.replace(/\\n|\\r/g, '<br />');"
+                                                                + "}");
 
                                                 // Functions to be used later in JavaScript

trunk/src/org/expeditee/items/widgets/JfxBrowser.java

@@ -10 +10 @@
  */
 import java.awt.Point;
+import java.io.BufferedReader;
+import java.io.IOException;
+import java.io.InputStreamReader;
 import java.lang.reflect.Field;
 
@@ -33 +36 @@
 import javafx.scene.control.ProgressIndicator;
 import javafx.scene.control.TextField;
+import javafx.scene.control.ToggleButton;
+import javafx.scene.control.Tooltip;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
 import javafx.scene.input.KeyEvent;
 import javafx.scene.input.MouseButton;
@@ -83 +90 @@
         private Button _backButton;
         private Button _convertButton;
+        private ToggleButton _readableModeButton;
 
         private TextField _urlField;
@@ -192 +200 @@
                         goButton.setMinWidth(Button.USE_PREF_SIZE);
                         goButton.setFocusTraversable(false);
-
+                        
+                        this._readableModeButton = new ToggleButton();
+                        this._readableModeButton.setMinWidth(Button.USE_PREF_SIZE);
+                        this._readableModeButton.setFocusTraversable(false);
+                        this._readableModeButton.setTooltip(new Tooltip("Switch to an easy-to-read view of the page"));
+                        
+                        Image readableModeIcon = new Image(ClassLoader.getSystemResourceAsStream("org/expeditee/assets/images/readableModeIcon.png"));
+                        this._readableModeButton.setGraphic(new ImageView(readableModeIcon));
+                        
                         this._convertButton = new Button("Convert");
                         this._convertButton.setMinWidth(Button.USE_PREF_SIZE);
@@ -204 +220 @@
                         urlbar.getChildren().addAll(_urlProgressBar, this._urlField);
                                                 
-                        horizontal.getChildren().addAll(this._backButton, this._forwardButton, urlbar, goButton, this._convertButton);
+                        horizontal.getChildren().addAll(this._backButton, this._forwardButton, urlbar, goButton, this._readableModeButton, this._convertButton);
 
                         HBox.setHgrow(this._backButton, Priority.NEVER);
@@ -210 +226 @@
                         HBox.setHgrow(this._convertButton, Priority.NEVER);
                         HBox.setHgrow(goButton, Priority.NEVER);
+                        HBox.setHgrow(this._readableModeButton, Priority.NEVER);
                         HBox.setHgrow(urlbar, Priority.ALWAYS);
                         
                         HBox.setMargin(goButton, new Insets(0, 5, 0, 0));
+                        HBox.setMargin(this._readableModeButton, new Insets(0, 5, 0, 0));
                         HBox.setMargin(this._forwardButton, new Insets(0, 5, 0, 0));
 
@@ -274 +292 @@
                         
                         final String cssPath = ClassLoader.getSystemResource("org/expeditee/assets/style/jfx.css").toString();
+                        
                         scene.getStylesheets().add(cssPath);
                 
@@ -314 +333 @@
                                 public void handle(ActionEvent arg0) {
                     navigate(JfxBrowser.this._urlField.getText());
+                                }
+                        });
+                        
+                        this._readableModeButton.setOnAction(new EventHandler<ActionEvent>() {
+
+                                @Override
+                                public void handle(ActionEvent arg0) {
+                                        if (arg0.getSource() instanceof ToggleButton) {
+                                                ToggleButton source = (ToggleButton) arg0.getSource();
+                                                
+                                                // This seems backwards, but because the button's just been clicked, its state has already changed
+                                                if(!source.isSelected()) {
+                                                        // Disable readable mode by refreshing the page
+                                                        JfxBrowser.this._webEngine.reload();
+                                                } else {
+                                                        JfxBrowser.this.enableReadableMode();
+                                                }
+                                        }
                                 }
                         });
@@ -472 +509 @@
 
                                                 JfxBrowser.this._convertButton.setDisable(true);
+                                                JfxBrowser.this._readableModeButton.setDisable(true);
 
                                                 break;
@@ -477 +515 @@
                                                 MessageBay.displayMessage("Finished loading page");
                                                 JfxBrowser.this._urlProgressBar.getStyleClass().add("completed");
+                                                
+                                                if(JfxBrowser.this._readableModeButton.isSelected()) {
+                                                        JfxBrowser.this.enableReadableMode();
+                                                }
 
                                         case CANCELLED: // CANCELLED
                                                 JfxBrowser.this._convertButton.setDisable(false);
+                                                JfxBrowser.this._readableModeButton.setDisable(false);
                                                 break;
                                         case FAILED: // FAILED
@@ -858 +901 @@
                 return r;
         }
+        
+        private void enableReadableMode() {
+                String readabilityJs;
+                String readabilityCss;
+
+                readabilityJs = readResourceFile("org/expeditee/assets/scripts/browserreadablemode/readability.min.js");
+                readabilityCss = readResourceFile("org/expeditee/assets/scripts/browserreadablemode/readability.css");
+                        
+                JSObject window = (JSObject)JfxBrowser.this._webEngine.executeScript("window");
+                window.setMember("readabilityJs", readabilityJs);
+                window.setMember("readabilityCss", readabilityCss);
+                
+                JfxBrowser.this._webEngine.executeScript(""
+                                + "javascript:("
+                                        + "function(){  "
+                                                + "readStyle = '';"
+                                                + "readSize = 'size-medium';"
+                                                + "readMargin = 'margin-medium';"
+                                                + "_readability_script = document.createElement('SCRIPT');"
+                                                + "_readability_script.type = 'text/javascript';"
+                                                + "_readability_script.appendChild(document.createTextNode(readabilityJs));"
+                                                + "document.head.appendChild(_readability_script);"
+                                                + "readability.init();"
+                                                
+                                                // readability.init() removes all css, so have to add the stylesheet after init
+                                                + "_readability_css = document.createElement('STYLE');"
+                                                + "_readability_css.type='text/css';"
+                                                + "_readability_css.appendChild(document.createTextNode(readabilityCss));"
+                                                + "document.head.appendChild(_readability_css);"
+                                                
+                                                // Font Awesome CSS from the Bootstrap CDN
+                                                + "_fontawesome_css = document.createElement('LINK');"
+                                                + "_fontawesome_css.rel = 'stylesheet'; "
+                                                + "_fontawesome_css.href = '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css';"
+                                                + "_fontawesome_css.type = 'text/css';"
+                                                + "document.head.appendChild(_fontawesome_css);"
+                                        + "}"
+                                + ")();"
+                   );
+        }
+        
+        /**
+         * Reads a resource file into a string
+         * @return The contents of the specified file as a string
+         */
+        private static String readResourceFile(String path) {
+                BufferedReader bufferedReader = null;
+                StringBuilder stringBuilder = new StringBuilder();
+ 
+                String line;
+                
+                try {
+                        bufferedReader = new BufferedReader(new InputStreamReader(ClassLoader.getSystemResourceAsStream(path)));
+
+                        while ((line = bufferedReader.readLine()) != null) {
+                                stringBuilder.append(line + "\n");
+                        }
+ 
+                } catch (IOException e) {
+                        e.printStackTrace();
+                } finally {
+                        if (bufferedReader != null) {
+                                try {
+                                        bufferedReader.close();
+                                } catch (IOException e) {
+                                        e.printStackTrace();
+                                }
+                        }
+                }
+ 
+                return stringBuilder.toString();
+        }
 }