Restructured wikipedia webview to build HTML in memory

It was becoming too complicated trying to modify the index file on disk to account for relative paths. I restructured the code so that the HTML is now built dynamically, in memory, and then saved to a temp file, from which it is loaded into webkit. This way we can write all the paths based on the current directory [endlessm/eos-sdk#220]
author: Rory MacQueen <rorymacqueen@gmail.com> 2013-08-06 00:19:24 -0700
committer: Rory MacQueen <rorymacqueen@gmail.com> 2013-08-06 11:34:17 -0700
commit: e7fb92889791785ad3c663808d4e40cb481d1503 (patch)
tree: 01416a0a8bd0ef089899b0e730ff19d9ba842b4d /wikipedia
parent: c80c9e765f7ba6c3ba5d5e78f90fe37f58b1e818 (diff)
3 files changed, 87 insertions, 86 deletions
diff --git a/wikipedia/views/index.html b/wikipedia/views/index.html
deleted file mode 100644
index b0aefd0..0000000
--- a/wikipedia/views/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title></title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width">
-        <link rel="stylesheet" href="css/first_load.css">
-        <link rel="stylesheet" href="css/second_load.css"> 
-        <link rel="stylesheet" href="css/main.css">
-        <link rel="stylesheet" href="css/wikipedia.css">
-        <link rel="stylesheet" href="css/nolinks.css">        
-        <script src="js/jquery-min.js"></script>
-    </head>
-    <body class="">
-    <div id="main">
-        
-            <section id="main-content">
-                <header id="header-content">
-                </header>
-
-                <section id="inside-content">
-                </section>
-            </section>     
-    </div>
-    <script src="js/main.js"></script>
-    </body>
-</html>
-\ No newline at end of file
diff --git a/wikipedia/views/js/main.js b/wikipedia/views/js/main.js
index bd76576..531d7fa 100644
--- a/wikipedia/views/js/main.js
+++ b/wikipedia/views/js/main.js
@@ -10,63 +10,49 @@ Endless.Wikipedia = Endless.Wikipedia || {};
             $body = $("body"),
             $image = $(".image"),
             $main = $("#main"),
-            $main_wrapper_home = $("#main-wrapper-home"),
-            $main_results = $("#main-results"),
-            $main_wrapper = $("#main-wrapper"),
             $main_content = $("#main-content"),
             $inside_content = $("#inside-content"),
             $header_content = $("#header-content"),
-            $main_wrapper_middle = $("#main-wrapper-middle"),
             $wiki_content = $("#wiki_content"),
             lang = "pt",
 
-            _resultPageView = function(pageHtml, titlePage, resultError) {
-                if (resultError === false) {
-                    $inside_content.html(pageHtml);
-                    $header_content.html('<h1>' + titlePage + '</h1>');
-                    $('#inside-content').prepend('<hr class="hr-title">');
-
-                    $('#inside-content [src^="//"]').each(function() {
-                        var parent = $(this).parent();
-                        if($(this).is("img")){
-                            var url = $(this).attr("src");
-                            var theSplit = url.split("/");
-                            var filename = theSplit[theSplit.length - 2];
-                            if(filename.length == 2){
-                                filename = theSplit[theSplit.length - 1];
-                            }
-                            var newSrc = "article_images/" + encodeURI(filename)
-                            if(newSrc.substring(newSrc.length - 4) == ".svg"){
-                                newSrc += ".png";
-                            }
-                            $(this).attr('src', newSrc);
+            _resultPageView = function(image_path) {
+                $('#inside-content [src^="//"]').each(function() {
+                    var parent = $(this).parent();
+                    if($(this).is("img")){
+                        var url = $(this).attr("src");
+                        var theSplit = url.split("/");
+                        var filename = theSplit[theSplit.length - 2];
+                        if(filename.length == 2){
+                            filename = theSplit[theSplit.length - 1];
+                        }
+                        var newSrc = image_path + encodeURI(filename)
+                        if(newSrc.substring(newSrc.length - 4) == ".svg"){
+                            newSrc += ".png";
                         }
-                        
-                    });
-                }
+                        $(this).attr('src', newSrc);
+                    } 
+                });
+                // May need this back at some point
+                // $('link[rel=stylesheet]').each(function(){
+                //     var src = $(this).attr("href");
+                //     console.log(asset_path + src);
+                //     $(this).attr("href", asset_path + "/" + src);
+                // });
             },
 
             wresize = function() {
-                $main_wrapper_home.height($(window).height());
-                $main_results.height($(window).height());
-                $main_wrapper.height($(window).height());
-                $main_content.height($(window).height() - $("#header-top").outerHeight());
+                $main_content.height($(window).height());
                 $inside_content.height($main_content.outerHeight() - ($("#header-content").outerHeight() + 15));
-                $main_wrapper_home.css("background-size", "100% " + $(window).height() + "px");
-                $main_results.css("background-size", "100% " + $(window).height() + "px");
             }
 
         return {
             init: function() {
                 $(document).hide();
-                $(window).resize(wresize);
-                var content = $('#wiki_content').html();
-                var title = $('#wiki_content').attr('name');
-                _resultPageView(content, title, false);
-                $('#wiki_content').remove();
+                var image_path = $inside_content.attr('image_path');
+                _resultPageView(image_path);
                 wresize();
                 $(document).show();
-                
             },
             wresize: wresize
         };
diff --git a/wikipedia/views/wikipedia_view.js b/wikipedia/views/wikipedia_view.js
index 77015b7..05d7647 100644
--- a/wikipedia/views/wikipedia_view.js
+++ b/wikipedia/views/wikipedia_view.js
@@ -5,8 +5,6 @@ const WebKit = imports.gi.WebKit2;
 const Utils = imports.utils;
 
 const getPageURL = "http://localhost:3000/getArticleByTitle?title=";
-const PATH_TO_INDEX = "web_view/index.html";
-const PATH_TO_TEMP = "web_view/temp.html";
 
 const WikipediaView = new Lang.Class({
     Name: 'EndlessWikipediaView',
@@ -16,10 +14,51 @@ const WikipediaView = new Lang.Class({
         this._httpSession = new Soup.Session();
         this.parent(params);
         // For debugging
-        // let settings = this.get_settings();
-        // settings.set_enable_developer_extras(true);
-        // this.set_settings(settings);
-        this._is_first_time = true;
+        //let settings = this.get_settings();
+        //settings.set_enable_developer_extras(true);
+        //this.set_settings(settings);
+    },
+
+    _get_body_html:function(articleHTML, title, image_path){
+        let html = "";
+        html += "<div id='main'>";
+        html += "<section id='main-content'>";
+        html += "<header id='header-content'>";
+        html += "<h1>" + title + "</h1>";
+        html += "</header>";
+        html += "<section image_path=" + image_path +" id='inside-content'>";
+        html += "<hr class='hr-title'>";
+        html += articleHTML;
+        html += "</section>";
+        html += "</section>";
+        html += "</div>";
+        return html;
+    },
+
+    _get_style_sheet_html: function(current_dir, sheets){
+        let html = "";
+        for(let i = 0; i < sheets.length; i++){
+            html += "<link rel='stylesheet' href=" + current_dir + "/css/" + sheets[i] + ">";
+        }
+        return html;
+    },
+
+    _get_script_html:function(current_dir, scripts){
+        let html = "";
+        for(let i = 0; i < scripts.length; i++){
+            html += "<script src='" + current_dir + "/js/" + scripts[i] + "'></script>";
+        }
+        return html;
+    },
+
+    _get_meta_html:function(){
+        let html = "";
+        html += "<meta charset='utf-8'>";
+        html += "<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>";
+        html += "<meta name='description' content=''>";
+        html += "<title></title>";
+        html += "<meta name='viewport' content='width=device-width'>";
+        return html;
     },
 
     loadArticleByTitle: function(title) {
@@ -33,18 +72,23 @@ const WikipediaView = new Lang.Class({
             let article = JSON.parse(articleJSON);
             let articleHTML = article["text"];
             let title = article['title'];
-            let skeletonHTML = Utils.load_file(PATH_TO_INDEX);
-            skeletonHTML = skeletonHTML + "<div id='wiki_content' name='"+ title +"'>" + articleHTML + "</div>"
-            Utils.write_contents_to_file(PATH_TO_TEMP, skeletonHTML);
-            // TODO: Ask about how we can load directly from HTML. Right now, WebKit can't seem to open 
-            // CSS file correctly. All characters in CSS file are in Chinese
-            let temp_uri = Utils.get_uri_for_relative_path(PATH_TO_TEMP)
-            if(this._is_first_time) {
-                this.load_uri(temp_uri);
-                this._is_first_time = false;
-            } else {
-                this.reload();
-            }
+            let current_dir = Endless.getCurrentFileDir();
+            let cur_exec = Utils.get_path_for_relative_path(".");
+            let image_path = cur_exec + "/web_view/article_images/";
+
+            let documentHTML = this._get_meta_html() + this._get_body_html(articleHTML, title, image_path);
+
+            let sheets = new Array("first_load.css", "second_load.css","main.css","wikipedia.css","nolinks.css");
+            documentHTML = this._get_style_sheet_html(current_dir, sheets) + documentHTML;
+
+            let scripts = new Array("jquery-min.js", "main.js");
+            documentHTML = documentHTML + this._get_script_html(current_dir, scripts);
+
+            let temp_uri = Utils.write_contents_to_temp_file("wiki.html", documentHTML);
+            
+            // TODO: Ask about how we can load directly from HTML using load_html. 
+            // Right now, this doesn't work, regardless of what we put in for base_uri
+            this.load_uri(temp_uri);
         }));
     }
 });
author	Rory MacQueen <rorymacqueen@gmail.com>	2013-08-06 00:19:24 -0700
committer	Rory MacQueen <rorymacqueen@gmail.com>	2013-08-06 11:34:17 -0700
commit	e7fb92889791785ad3c663808d4e40cb481d1503 (patch)
tree	01416a0a8bd0ef089899b0e730ff19d9ba842b4d /wikipedia
parent	c80c9e765f7ba6c3ba5d5e78f90fe37f58b1e818 (diff)