* added Book/Chapter Popup for Desktop version

* style improvments
* prepare versePopup for actions on a verse (like bookmarks, notes, highlights and share options)

4 files changed, 96 insertions, 13 deletions

diff --git a/source/App.css b/source/App.css
index a300544..9afde19 100644
--- a/source/App.css
+++ b/source/App.css
@@ -8,11 +8,6 @@
 
 }
 
-.nice-padding {
-	padding: 10px;
-    font-size: 1.2em
-}
-
 .app-panels > * {
     width: 320px;
     background-color: #EAEAEA;
@@ -29,10 +24,19 @@
 }
 
 /* MAIN VIEW */
+.verse-view {
+    padding: 10px;
+    font-size: 1.2em
+}
+
 .module-picker {
     width: 45px;
 }
 
+.modules-button {
+    background-color: #934A15;
+}
+
 .center {
     text-align: center;
 }
@@ -56,6 +60,11 @@
     margin-left: 10px;
 }
 
+.biblez-bc-popup {
+    height: 350px;
+    width: 420px;
+}
+
 /* MODULE MANAGER */
 
 .item {
@@ -77,6 +86,10 @@
     padding: 10px;
 }
 
+.nice-padding {
+    padding: 10px;
+}
+
 /* BOOK CHAPTER SELECTOR */
 .bc-item {
     height: 30px;
@@ -96,9 +109,39 @@
     padding: 10px;
 }
 
+.verse-popup {
+
+}
+
+.verse-popup-cell {
+    width: 100px;
+    text-align: center;
+    padding: 5px;
+}
+
+.cell-bottom-right {
+    border-left: 1px solid;
+    border-color: gray;
+}
+
+.cell-top-right {
+    border-bottom: 1px solid;
+    border-left: 1px solid;
+    border-color: gray;
+}
+
+.cell-top-left {
+    border-bottom: 1px solid;
+    border-color: gray;
+}
+
 /* BIBLE TEXT STYLE */
 .verse-number {
     font-weight: bold;
+    font-size: 1.3em;
+    line-height: 1em;
+    text-decoration: none;
+    color: #010101;
 }
 
 h3, h1 {
diff --git a/source/bcSelector.js b/source/bcSelector.js
index d2da696..d02bc6d 100644
--- a/source/bcSelector.js
+++ b/source/bcSelector.js
@@ -5,6 +5,7 @@ enyo.kind({
         onSelect: "",
         onBack: ""
     },
+    classes: "enyo-fit",
     published: {
         module: null
     },
@@ -44,7 +45,7 @@ enyo.kind({
     },
 
     handleBack: function (inSender, inEvent) {
-        this.$.bcPanel.setIndex(0)
+        this.$.bcPanel.setIndex(0);
     },
 
     moduleChanged: function (inSender, inEvent) {
diff --git a/source/main.js b/source/main.js
index 9debb8a..506834f 100644
--- a/source/main.js
+++ b/source/main.js
@@ -12,16 +12,21 @@ enyo.kind({
     },
     components:[
         {kind: "Signals", onOrientationChange: "handleOrientation"},
+        {kind: "biblez.versePopup", name: "versePopup"},
         //{kind: "Signals", onbeforeunload: "handleUnload"},
         {name: "messagePopup", kind: "onyx.Popup", centered: true, floating: true, classes: "message-popup"},
         {kind: "onyx.MoreToolbar", name: "topTB", components: [
             {name: "moduleSelector", kind: "onyx.MenuDecorator", onSelect: "moduleSelected", components: [
-                {kind: "onyx.IconButton", src: "assets/modules.png"},
+                //{kind: "onyx.IconButton", src: "assets/modules.png"},
+                {kind: "onyx.Button", name: "btnModules", style: "background-color: #934A15;"},
                 {kind: "onyx.Menu", name: "moduleMenu"}
             ]},
-            {kind: "onyx.Button", name: "btnPassage", ontap: "doOpenBC"},
+            {kind: "onyx.Button", name: "btnPassage", ontap: "handleBcSelector"},
             {fit: true},
-            {name: "plus", kind: "onyx.IconButton", src: "assets/add.png", ontap: "doOpenModuleManager"}
+            {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"}
             ]}*/
@@ -34,7 +39,7 @@ enyo.kind({
             ]},
             {name: "verseScroller", kind: "enyo.Scroller", touch: true, fit: true, components: [
                 {classes: "center", components: [{kind: "onyx.Spinner", name: "spinner", classes: "onyx-light center"}]},
-                {name: "main", classes: "nice-padding", allowHtml: true}
+                {name: "main", classes: "verse-view", allowHtml: true, onclick: "handleVerseTap"}
             ]},
             {kind: "FittableColumns", noStretch: true, components: [
                 {content: "Next >", classes: "chapter-nav chapter-nav-right"},
@@ -98,6 +103,7 @@ enyo.kind({
         this.modules.forEach(enyo.bind(this, function (mod, idx) {
             if ((lastModule && lastModule === mod.modKey)) {
                 //mods.push({content: mod.config.moduleKey, index: idx, active: true, style: "background-color: lightblue"});
+                this.$.btnModules.setContent(lastModule);
                 mods.push({active: true, components: [
                     {content: mod.config.moduleKey, index: idx},
                     {kind: "onyx.IconButton", src: "assets/checkmark.png", style: "float: right;"}
@@ -109,11 +115,14 @@ enyo.kind({
         if(this.currentModule === null) {
             this.currentModule = this.modules[0];
             mods[0]["active"] = true;
+            this.$.btnModules.setContent(this.currentModule.modKey);
         }
         this.$.moduleMenu.createComponents(mods, {owner: this.$.moduleMenu});
         this.$.moduleMenu.render();
 
         this.doModuleChanged({module: this.currentModule});
+        if(enyo.platform.firefox)
+            this.$.bcSelector.setModule(this.currentModule);
 
         //Load the verses
         if(this.settings)
@@ -128,12 +137,11 @@ enyo.kind({
             this.settings["lastModule"] = this.currentModule.modKey;
             this.handleUnload();
             this.renderModuleMenu();
-            //this.doModuleChanged({module: this.currentModule});
-            //this.handlePassage();
         }
     },
 
     passageChanged: function (inSender, inEvent) {
+        this.$.bcPopup.hide();
         this.currentPassage = inEvent.book.abbrev + " " + inEvent.chapter;
         this.handlePassage(inEvent.osis);
     },
@@ -150,7 +158,7 @@ enyo.kind({
         this.handleUnload();
 
         this.$.btnPassage.setContent(this.currentPassage.replace(".", " "));
-        this.currentModule.renderText(this.currentPassage, {oneVersePerLine: true}, enyo.bind(this, function (inError, inText) {
+        this.currentModule.renderText(this.currentPassage, {oneVersePerLine: false}, enyo.bind(this, function (inError, inText) {
             this.$.spinner.stop();
             if(!inError) {
                 this.$.verseScroller.scrollToTop();
@@ -160,6 +168,18 @@ enyo.kind({
         }));
     },
 
+    handleBcSelector: function (inSender, inEvent) {
+        if(enyo.platform.firefox) {
+            this.$.bcPopup.showAtEvent(inEvent);
+            this.$.bcSelector.setPanel(0);
+        } else
+            this.doOpenBC();
+    },
+
+    closePopup: function (inSender, inEvent) {
+        this.$.bcPopup.hide();
+    },
+
     handleChangeChapter: function (inSender, inEvent) {
         if(this.currentModule) {
             if(this.panelIndex === 1) {
@@ -171,6 +191,24 @@ enyo.kind({
         this.$.mainPanel.setIndexDirect(2);
     },
 
+    handleVerseTap: function (inSender, inEvent) {
+        inEvent.preventDefault();
+        var attributes = {};
+        if(inEvent.target.href) {
+            var url = inEvent.target.href;
+            url.split("?")[1].split("&").forEach(function(item) {
+                item = item.split("=");
+                attributes[item[0]] = item[1];
+            });
+        }
+        if(attributes.type === "verseNum") {
+            console.log(attributes.osisRef);
+            this.$.versePopup.showAtEvent(inEvent);
+        }
+
+        return true;
+    },
+
     handlePanelIndex: function (inSender, inEvent) {
         this.panelIndex = inEvent.toIndex;
     },
diff --git a/source/package.js b/source/package.js
index 0c5c2e7..2f89e95 100644
--- a/source/package.js
+++ b/source/package.js
@@ -10,5 +10,6 @@ enyo.depends(
     "main.js",
     "moduleManager.js",
     "moduleManagerDesktop.js",
+    "popup.js",
 	"App.js"
 );