Merge pull request #50 from ChicoState/bookListDisplay

Proper HTML list added for displaying books

Charcoal/Charcoal/Charcoal.cpp

@@ -12,9 +12,16 @@
 #include <Appcore/AppCore.h>
 #include <JavaScriptCore/JavaScript.h>
 #include "Library.h"
+#include <iostream>
+#include <JavaScriptCore/JSRetainPtr.h>
+
+
 #define WINDOW_WIDTH  900
 #define WINDOW_HEIGHT 600
 
+
+RefPtr<JSContext> context;
+
 using namespace ultralight;
 Library ebooks;
 Charcoal::Charcoal() {
@@ -76,26 +83,53 @@ Charcoal::Charcoal() {
 Charcoal::~Charcoal() {
 }
 
-JSValue Charcoal::printAllBooks(const JSObject& thisObject, const JSArgs& args) {
 
+
+JSValueRef OnButtonClick(JSContextRef ctx, JSObjectRef function,
+    JSObjectRef thisObject, size_t argumentCount,
+    const JSValueRef arguments[], JSValueRef* exception) { //LISTS BOOKS
+
+    std::string bookList = ebooks.printall();
+    std::string str = "document.getElementById('bookList').innerHTML = ('";
+
+    str += bookList;
+    str += "');";
+    const char* ct = str.c_str();
+
+    //MessageBoxA(NULL, ct, "Book List2", MB_OK);
+
+    // Create our list with JavaScript
+    JSStringRef script = JSStringCreateWithUTF8CString(ct);
+
+    // Execute it with JSEvaluateScript, ignoring other parameters for now
+    JSEvaluateScript(ctx, script, 0, 0, 0, 0);
+
+    // Release our string (we only Release what we Create)
+    JSStringRelease(script);
+
+    return JSValueMakeNull(ctx);
+}
+
+JSValue Charcoal::printAllBooks(const JSObject& thisObject, const JSArgs& args) {
+
     std::string bookList = ebooks.printall();
 
     MessageBoxA(NULL, bookList.c_str(), "Book List", MB_OK); //this confirms there is an actual booklist.
 
-    //convert the book list string to a JavaScript string
+    //convert the book list string to a JavaScript string, but does not work. 
 
     JSStringRef jsBookList = JSStringCreateWithUTF8CString(bookList.c_str());
 
     JSValue jsValue = JSValue(jsBookList);
 
     JSStringRelease(jsBookList);
 
-    //return the JSValue object
+    //return the JSValue object, I tried with JSString and the issue persisted. 
 
     return jsValue;
 
 }
-void Charcoal::grayscaleName(const JSObject& thisObject, const JSArgs& args) { //at the moment just gets metadata, you will put your grayscale hooks here.
+void Charcoal::grayscaleName(const JSObject& thisObject, const JSArgs& args) { //at the moment just gets metadata, Thomas will puts grayscale hooks here.
     //std::string added = ebooks.getStringData();
     //MessageBoxA(NULL, added.c_str(), "Book Data", MB_OK);
 }
@@ -140,12 +174,35 @@ void Charcoal::OnDOMReady(ultralight::View* caller,
     uint64_t frame_id,
     bool is_main_frame,
     const String& url) {
-    RefPtr<JSContext> context = caller->LockJSContext();
+    context = caller->LockJSContext();
     SetJSContext(context->ctx());
     JSObject global = JSGlobalObject();
     global["AddBook"] = BindJSCallback(&Charcoal::OpenFile);
     global["listAllBooks"] = BindJSCallback(&Charcoal::printAllBooks);
     global["nameToGrayscale"] = BindJSCallback(&Charcoal::grayscaleName);
+
+    auto scoped_context = context;
+
+    // Typecast to the underlying JSContextRef.
+    JSContextRef ctx = (*scoped_context);
+
+    // Create a JavaScript String containing the name of our callback.
+    JSStringRef name = JSStringCreateWithUTF8CString("OnButtonClick");
+
+    // Create a garbage-collected JavaScript function that is bound to our
+    // native C callback 'OnButtonClick()'.
+    JSObjectRef func = JSObjectMakeFunctionWithCallback(ctx, name, OnButtonClick);
+
+    // Get the global JavaScript object (aka 'window')
+    JSObjectRef globalObj = JSContextGetGlobalObject(ctx);
+
+    // Store our function in the page's global JavaScript object so that it
+    // accessible from the page as 'OnButtonClick()'.
+    JSObjectSetProperty(ctx, globalObj, name, func, 0, 0);
+
+    // Release the JavaScript String we created earlier.
+    JSStringRelease(name);
+
 
 }
 
@@ -205,3 +262,41 @@ void Charcoal::OnChangeTitle(ultralight::View* caller,
     ///
     window_->SetTitle(title.utf8().data());
 }
+
+#include <Ultralight/Ultralight.h>
+
+using namespace ultralight;
+
+inline std::string ToUTF8(const String& str) {
+    String8 utf8 = str.utf8();
+    return std::string(utf8.data(), utf8.length());
+}
+
+inline const char* Stringify(MessageSource source) {
+    switch (source) {
+    case kMessageSource_XML: return "XML";
+    case kMessageSource_JS: return "JS";
+    case kMessageSource_Network: return "Network";
+    case kMessageSource_ConsoleAPI: return "ConsoleAPI";
+    case kMessageSource_Storage: return "Storage";
+    case kMessageSource_AppCache: return "AppCache";
+    case kMessageSource_Rendering: return "Rendering";
+    case kMessageSource_CSS: return "CSS";
+    case kMessageSource_Security: return "Security";
+    case kMessageSource_ContentBlocker: return "ContentBlocker";
+    case kMessageSource_Other: return "Other";
+    default: return "";
+    }
+}
+
+inline const char* Stringify(MessageLevel level) {
+    switch (level) {
+    case kMessageLevel_Log: return "Log";
+    case kMessageLevel_Warning: return "Warning";
+    case kMessageLevel_Error: return "Error";
+    case kMessageLevel_Debug: return "Debug";
+    case kMessageLevel_Info: return "Info";
+    default: return "";
+    }
+}
+

Charcoal/Charcoal/Charcoal.h

@@ -32,6 +32,8 @@ class Charcoal : public AppListener,
         uint64_t frame_id,
         bool is_main_frame,
         const String& url) override;
+
+
     virtual JSValue printAllBooks(const JSObject& thisObject, const JSArgs& args);
     virtual void grayscaleName(const JSObject& thisObject, const JSArgs& args);
 

Charcoal/Charcoal/Library.cpp

@@ -13,13 +13,13 @@
 #pragma once
 std::string Library::printall()
 {
-    std::string allBooks = "Book list: \n";
+    std::string allBooks = "";
     std::vector<book>::iterator it;
     for (it = collection.begin(); it != collection.end(); ++it)
     {
 
 		book curr = *it;
-		allBooks += (curr.title + '\n');
+		allBooks += ("<li><span>' + \"" + curr.title + "\"+ '</span></li>");
 		/*std::cout << "Author: " << curr.author << std::endl;
 		std::cout << "Publisher: " << curr.publisher << std::endl;
 		std::cout << "Contributor: " << curr.contributor << std::endl;

Charcoal/x64/Debug/assets/books.html

@@ -69,8 +69,7 @@
         }
 
         h3 {
-            margin-left: 10px;
-            margin-top: 32px;
+            margin:auto
         }
 
         #contents {
@@ -96,41 +95,45 @@
                 top: 49%;
                 box-shadow: 0 8px 24px -6px #1a225a72;
             }
+
+        ul {
+            text-align: left;
+            list-style-position: inside;
+        }
+        .list ul li:hover {
+            left: 10px;
+        }
+
     </style>
 
 </head>
-<body>
+<body onload="OnButtonClick()">
     <div class="sidebar">
         <iframe src="sidebar.html" frameborder="0" scrolling="no" style=" border: 0px none; width: 20%; height: 100%; position: fixed; overflow: hidden;"></iframe>
     </div>
     <div id="divider"></div>
     <div id="contents">
         <div id="message">
+            <h3 id="result">BOOKS: </h3>
+            <div class="list">
+                <ul id="bookList">
+                </ul>
+            </div>
             <button class="button-28" onclick="gscalebutton()">Grayscale</button>
             <script>
                 function gscalebutton() {
                     nameToGrayscale();
                 }
             </script>
-            <p id="bookString">Your list of books will go here.</p>
-            <button class="button-28" onclick="listbooks()">List All Books</button>
-            <script>
-                function listbooks() {
-                    //supposed to call the listAllBooks function and get the JSString object, however it doesn't seem to get anything
-                    var bookString = listAllBooks();
-
-                    //displays the book list string
-                    var bookElement = document.getElementById('bookString');
-                    bookElement.innerHTML = bookString.toString();
-                }
-            </script>
-
+
+            <div id="bs"></div>
             <button class="button-28" onclick="rmbooksbutton()">Remove Books</button>
             <script>
                 function rmbooksbutton() {
-                    //add rmbooks function hook here
+                    //add rmbooks function hook here also above make sure to check out overflow-y for p
                 }
             </script>
+
         </div>
     </div>
 </body>

Charcoal/x64/Debug/assets/help.html

@@ -61,8 +61,9 @@
     </div>
     <div id="divider"></div>
     <div id="contents">
+
         <div id="message">
-            This is the help page.
+            This is the help page! No help for you :D
         </div>
     </div>
 </body>

Charcoal/x64/Debug/assets/test.json

@@ -0,0 +1,7 @@
+<!--./test.JSON-->
+
+{
+    "id": 1,
+    "title": "Hello World",
+    "completed": false
+}