* added font menu to change font and font size

5 files changed, 199 insertions, 18 deletions

diff --git a/assets/font.png b/assets/font.png
new file mode 100644
index 0000000..2551d25
--- /dev/null
+++ b/assets/font.png
diff --git a/source/App.css b/source/App.css
index ef93c0c..fc5c11f 100644
--- a/source/App.css
+++ b/source/App.css
@@ -26,7 +26,7 @@
 /* MAIN VIEW */
 .verse-view {
     padding: 10px;
-    font-size: 1.2em
+    font-size: 1.2em;
 }
 
 .module-picker {
@@ -165,8 +165,8 @@
 @media all and (max-width: 800px) {
     .verse-number {
         font-weight: bold;
-        font-size: 1.3em;
-        line-height: 1em;
+        font-size: 1.2em;
+        line-height: .9em;
         text-decoration: none;
         color: #010101;
     }
@@ -176,6 +176,20 @@ h3, h1 {
     font-size: 1.3em;
 }
 
+/* FONT MENU */
+.font-selector {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.font-slider {
+    margin: 8px 5px;
+}
+
+.font-popup {
+    width: 200px;
+}
+
 /* SETTINGS */
 .settings-container {
     max-width: 600px;
@@ -190,4 +204,9 @@ h3, h1 {
 
 .settings-row {
     padding: 5px;
+}
+
+/* OVERRIDE SOME ONYX SETTINGS */
+.onyx-toolbar {
+    padding: 2px 5px;
 }
\ No newline at end of file
diff --git a/source/api.js b/source/api.js
index ef5deac..7141417 100644
--- a/source/api.js
+++ b/source/api.js
@@ -261,6 +261,28 @@ var api = {
         }));
     },
 
+    removeHighlight: function (inHighlight, inCallback) {
+        this.hlWrapper(enyo.bind(this, function (inError, inDB) {
+            if(!inError)
+                this._remove(inDB, inHighlight.id, enyo.bind(this, function(inError) {
+                    if(!inError)
+                        this.get(inHighlight.osisRef, enyo.bind(this, function(inError, inOsisObject) {
+                            if(!inError) {
+                                if(inOsisObject !== undefined) {
+                                    delete inOsisObject["highlightId"];
+                                    this.put(inOsisObject, inCallback);
+                                } else
+                                    inCallback({message: "api.removeHighlight: Couldn't remove highlightId from osisObject"});
+                            } else
+                                inCallback(inError);
+                        }));
+                    else
+                        inCallback(inError);
+                }));
+            else inCallback(inError);
+        }));
+    },
+
     putSetting: function (inKey, inValue, inCallback) {
         this.get("settings", enyo.bind(this, function (inError, inSettings) {
             if(!inError) {
diff --git a/source/main.js b/source/main.js
index 707f3cd..56c8885 100644
--- a/source/main.js
+++ b/source/main.js
@@ -14,8 +14,12 @@ enyo.kind({
     components:[
         {kind: "Signals", onOrientationChange: "handleOrientation"},
         {kind: "biblez.versePopup", name: "versePopup", onBookmark: "handleBookmark", onHighlight: "handleHighlight"},
+        {name: "fontMenu", kind: "biblez.fontMenu", onFontSize: "handleFontSize", onFont: "handleFont"},
         //{kind: "Signals", onbeforeunload: "handleUnload"},
         {name: "messagePopup", kind: "onyx.Popup", centered: true, floating: true, classes: "message-popup"},
+        {name: "bcPopup", classes: "biblez-bc-popup", kind: "onyx.Popup", modal: true, floating: true, components: [
+            {kind: "biblez.bcSelector", name: "bcSelector", onSelect: "passageChanged", onBack: "closePopup"}
+        ]},
         {kind: "onyx.MoreToolbar", name: "topTB", components: [
             {name: "moduleSelector", kind: "onyx.MenuDecorator", onSelect: "moduleSelected", components: [
                 //{kind: "onyx.IconButton", src: "assets/modules.png"},
@@ -39,14 +43,11 @@ enyo.kind({
                         {kind: "onyx.IconButton", src: "assets/bookmarks.png"},
                         {content: $L("Bookmarks")}
                     ]}
-
                 ]}
             ]},
+            {kind: "onyx.IconButton", src: "assets/font.png", ontap: "handleFontMenu", style:"position:absolute; right:0;"},
             //{name: "btnPrefs", kind:"onyx.IconButton", src: "assets/settings.png", ontap: "handlePrefs"},
             //{name: "plus", kind: "onyx.IconButton", src: "assets/add.png", style:"position:absolute;right:0;", ontap: "doOpenModuleManager"},
-            {name: "bcPopup", classes: "biblez-bc-popup", kind: "onyx.Popup", modal: true, floating: true, components: [
-                {kind: "biblez.bcSelector", name: "bcSelector", onSelect: "passageChanged", onBack: "closePopup"}
-            ]}
             /*{kind: "onyx.InputDecorator", components: [
                 {kind: "onyx.Input", placeholder: "Enter a passage...", onchange: "handlePassage", name: "passageInput", value: "Matt 1"}
             ]}*/
@@ -82,20 +83,32 @@ enyo.kind({
     create: function () {
         this.inherited(arguments);
         this.$.spinner.stop();
+        this.startUp();
+        this.$.mainPanel.setIndexDirect(2);
+    },
+
+    rendered: function () {
+        this.inherited(arguments);
+    },
+
+    startUp: function () {
         api.get("settings", enyo.bind(this, function(inError, inSettings) {
-            //console.log("create", inSettings, this.settings, inError);
             if(!inError) {
                 this.settings = (inSettings) ? inSettings: this.settings;
                 this.getInstalledModules();
+                if(this.settings.fontSize) {
+                    this.$.fontMenu.setFontSize(this.settings.fontSize);
+                    this.$.main.applyStyle("font-size", this.settings.fontSize + "em");
+                }
+                if(this.settings.font) {
+                    this.$.fontMenu.setFont(this.settings.font);
+                    if(this.settings.font !== "default")
+                        this.$.main.applyStyle("font-family", this.settings.font);
+                }
             } else {
                 this.handleError("Couldn't load settings!");
             }
         }));
-        this.$.mainPanel.setIndexDirect(2);
-    },
-
-    rendered: function () {
-        this.inherited(arguments);
     },
 
     handleSettings: function (inSender, inEvent) {
@@ -226,7 +239,9 @@ enyo.kind({
                 if (hlKeys.length !== 0) {
                     api.getHighlights(hlKeys, enyo.bind(this, function (inError, inHighlights) {
                         if(!inError) {
-                            console.log(inHighlights);
+                            inHighlights.forEach(enyo.bind(this, function (hl) {
+                                enyo.dom.byId(hl.osisRef).style.backgroundColor = hl.color;
+                            }));
                         } else
                             this.handleError(inError);
                     }));
@@ -245,7 +260,9 @@ enyo.kind({
     },
 
     handleHighlight: function (inSender, inEvent) {
-        console.log("Added Highlight");
+        if(inEvent.action === "remove") {
+            enyo.dom.byId(inEvent.osisRef).style.backgroundColor = "transparent";
+        }
         this.handleUserData(this.currentPassage.osis);
     },
 
@@ -261,6 +278,23 @@ enyo.kind({
         this.$.bcPopup.hide();
     },
 
+    handleFontMenu: function (inSender, inEvent) {
+        this.$.fontMenu.showAtEvent(inEvent);
+    },
+
+    handleFont: function (inSender, inEvent) {
+        this.$.main.applyStyle("font-family", inEvent.font);
+        api.putSetting("font", inEvent.font);
+    },
+
+    handleFontSize: function (inSender, inEvent) {
+        if(inEvent.font !== "default")
+            this.$.main.applyStyle("font-size", inEvent.fontSize + "em");
+        else
+            this.$.main.applyStyle("font-size", null);
+        api.putSetting("fontSize", inEvent.fontSize);
+    },
+
     handleChangeChapter: function (inSender, inEvent) {
         if(this.currentModule) {
             if(this.panelIndex === 1) {
@@ -284,14 +318,20 @@ enyo.kind({
         }
         if(attributes.type === "verseNum") {
             this.$.versePopup.setOsisRef(attributes.osisRef);
-            if(this.userData.hasOwnProperty(attributes.osisRef))
+            if(this.userData.hasOwnProperty(attributes.osisRef)) {
                 if (this.userData[attributes.osisRef].bookmarkId) {
                     this.$.versePopup.setBmExists(true);
                     this.$.versePopup.setBmId(this.userData[attributes.osisRef].bookmarkId);
                 } else
                     this.$.versePopup.setBmExists(false);
-            else {
+                if (this.userData[attributes.osisRef].highlightId) {
+                    this.$.versePopup.setHlExists(true);
+                    this.$.versePopup.setHlId(this.userData[attributes.osisRef].highlightId);
+                } else
+                    this.$.versePopup.setHlExists(false);
+            } else {
                 this.$.versePopup.setBmExists(false);
+                this.$.versePopup.setHlExists(false);
                 this.$.versePopup.setNoteExists(false);
             }
             this.$.versePopup.setLabels();
diff --git a/source/popup.js b/source/popup.js
index 4cd7e00..b0cd1ce 100644
--- a/source/popup.js
+++ b/source/popup.js
@@ -1,6 +1,9 @@
 enyo.kind({
     name: "biblez.versePopup",
     kind: "onyx.Popup",
+    modal: true,
+    scrimWhenModal: true,
+    scrim: true,
     classes: "verse-popup",
     events: {
         onBookmark: "",
@@ -11,6 +14,7 @@ enyo.kind({
         osisRef: null,
         bmExists: false,
         noteExists: false,
+        hlExists: false,
         bmId: null,
         noteId: null,
         hlId: null
@@ -27,7 +31,7 @@ enyo.kind({
                 {kind: "onyx.Button", content: " ", ontap: "highlightVerse", classes: "color-button", color: "rgba(152,251,152,0.5)", style: "background-color: green;"},
                 {kind: "onyx.Button", content: " ", ontap: "highlightVerse", classes: "color-button", color: "rgba(238,130,238,0.5)", style: "background-color: violet;"},
                 {kind: "onyx.Button", caption: " ", ontap: "highlightVerse", classes: "color-button", color: "rgba(255,165,0,0.5)", style: "background-color: orange;"},
-                {kind: "onyx.IconButton", src: "assets/delete.png", ontap: "highlightVerse"}
+                {kind: "onyx.IconButton", src: "assets/delete.png", ontap: "removeHighlight"}
                 //{content: $L("Highlight"), classes: "verse-popup-cell", ontap: "handleHighlight"},
                 //{content: $L("Copy&Share"), classes: "verse-popup-cell cell-bottom-right", ontap: "handleCopyShare"},
             ]}
@@ -67,6 +71,102 @@ enyo.kind({
             else
                 console.log(inError);
         }));
+    },
+
+    removeHighlight: function (inSender, inEvent) {
+        this.hide();
+        if(this.hlExists)
+            api.removeHighlight({id: this.hlId, osisRef: this.osisRef}, enyo.bind(this, function (inError) {
+                if(!inError)
+                    this.doHighlight({action: "remove", osisRef: this.osisRef});
+                else
+                    console.log(inError);
+            }));
+    }
+});
+
+enyo.kind({
+    name: "biblez.fontMenu",
+    kind: "onyx.Popup",
+    events: {
+      onFontSize: "",
+      onFont: ""
+    },
+    classes: "font-popup",
+    published: {
+        fontSize: 1.2,
+        font: "default"
+    },
+    components:[
+        {kind: "enyo.FittableRows", fit: true, components: [
+            {name: "fontSlider", kind: "onyx.Slider", value: 50, onChange: "sliderChanged", classes: "font-slider"},
+            {kind: "onyx.PickerDecorator", classes: "font-selector", onSelect: "fontSelected", components: [
+                {}, //{kind: "onyx.Button", content: $L("Select Font")},
+                {kind: "onyx.Picker", components: [
+                    {content: $L("Default"), name: "default", active: true},
+                    {content: "Verdana", name: "Verdana"},
+                    {content: "Arial", name: "Arial"},
+                    {content: "Georgia", name: "Georgia"},
+                    {content: "Times", name: "Times"}
+                ]}
+            ]}
+        ]}
+    ],
+
+    sliderChanged: function (inSender, inEvent) {
+        if(inSender.value < 10) {
+            this.fontSize = 0.8;
+        } else if(inSender.value < 20) {
+            this.fontSize = 0.9;
+        } else if(inSender.value < 30) {
+            this.fontSize = 1;
+        } else if(inSender.value < 40) {
+            this.fontSize = 1.1;
+        } else if(inSender.value < 50) {
+            this.fontSize = 1.2;
+        } else if(inSender.value < 60) {
+            this.fontSize = 1.3;
+        } else if(inSender.value < 70) {
+            this.fontSize = 1.4;
+        } else if(inSender.value < 80) {
+            this.fontSize = 1.6;
+        } else if(inSender.value < 90) {
+            this.fontSize = 1.8;
+        } else {
+            this.fontSize = 2;
+        }
+        this.doFontSize({fontSize: this.fontSize});
+    },
+
+    fontSizeChanged: function (inSender, inEvent) {
+        if(this.fontSize === 0.8) {
+            this.$.fontSlider.setValue(10);
+        } else if(this.fontSize === 0.9) {
+            this.$.fontSlider.setValue(20);
+        } else if(this.fontSize === 1) {
+            this.$.fontSlider.setValue(30);
+        } else if(this.fontSize === 1.1) {
+            this.$.fontSlider.setValue(40);
+        } else if(this.fontSize === 1.2) {
+            this.$.fontSlider.setValue(50);
+        } else if(this.fontSize === 1.3) {
+            this.$.fontSlider.setValue(60);
+        } else if(this.fontSize === 1.4) {
+            this.$.fontSlider.setValue(70);
+        } else if(this.fontSize === 1.6) {
+            this.$.fontSlider.setValue(80);
+        } else if(this.fontSize === 1.8) {
+            this.$.fontSlider.setValue(90);
+        } else {
+            this.$.fontSlider.setValue(100);
+        }
+    },
+
+    fontSelected: function (inSender, inEvent) {
+        this.doFont({font: inEvent.selected.name});
+    },
 
+    fontChanged: function(inSender, inEvent) {
+        this.$[this.font].setActive(true);
     }
 });
\ No newline at end of file