* added Module Manager

4 files changed, 133 insertions, 31 deletions

diff --git a/source/App.css b/source/App.css
index 1ae2687..80154e6 100644
--- a/source/App.css
+++ b/source/App.css
@@ -3,5 +3,35 @@
 	This way, you can minify your application, and just remove the "source" folder for production
 */
 .nice-padding {
-	padding: 15px;
+	padding: 10px;
+}
+
+.app-panels > * {
+    width: 320px;
+    background-color: #EAEAEA;
+    border-left: 1px solid #000;
+    /* box-shadow: -4px -4px 4px rgba(0,0,0,0.3); */
+}
+
+/* on small devices, make each panel fit to the app width */
+@media all and (max-width: 800px) {
+    .app-panels > * {
+        min-width: 100%;
+        max-width: 100%;
+    }
+}
+
+.item {
+    border-bottom: 1px solid #ccc;
+    padding: 12px 16px;
+}
+
+.content-container {
+    margin: 10px;
+}
+
+.title {
+    font-weight: bold;
+    font-size: 1.2em;
+    padding: 10px;
 }
\ No newline at end of file
diff --git a/source/App.js b/source/App.js
index 6894c22..9b2a18b 100644
--- a/source/App.js
+++ b/source/App.js
@@ -1,26 +1,25 @@
 enyo.kind({
 	name: "App",
-	kind: "Panels",
+    kind: enyo.FittableRows,
     fit: true,
-    classes: "app-panels",
-    arrangerKind: "CardArranger",
-    draggable: false,
     components: [
-        {name: "main", kind: "biblez.main", onOpenModuleManager: "openModuleManager"},
-        {name: "moduleManager", kind: "biblez.moduleManager", onBack: "handleBack"}
-        //{name: "settings"}
+        {name: "panel", kind: "Panels", fit: true, classes: "app-panels", arrangerKind: "CardArranger", draggable: false, components: [
+            {name: "main", kind: "biblez.main", onOpenModuleManager: "openModuleManager"},
+            {name: "moduleManager", kind: "biblez.moduleManager", onBack: "handleBack"}
+            //{name: "settings"}
+        ]}
     ],
 
     rendered: function () {
         this.inherited(arguments);
-        this.setIndex(1);
+        this.$.panel.setIndex(1);
     },
 
     handleBack: function (inSender, inEvent) {
-        this.setIndex(0);
+        this.$.panel.setIndex(0);
     },
 
     openModuleManager: function (inSender, inEvent) {
-        this.setIndex(1);
+        this.$.panel.setIndex(1);
     }
 });
diff --git a/source/main.js b/source/main.js
index 2e4cdb2..3f239fb 100644
--- a/source/main.js
+++ b/source/main.js
@@ -33,8 +33,6 @@ enyo.kind({
 		this.getBible();
 	},
 
-
-
 	getBible: function (inSender, inEvent) {
 		sword.moduleMgr.getModules(enyo.bind(this, function(inError, inModules) {
 			if(inModules.length !== 0) {
@@ -72,7 +70,7 @@ enyo.kind({
 
 	handlePassage: function (inSender, inEvent) {
 		//console.log("PASSAGE", inSender.getValue());
-		this.bible.renderText(inSender.getValue(), enyo.bind(this, function (inError, inText) {
+		this.bible.renderText(inSender.getValue(), {oneVersePerLine: true}, enyo.bind(this, function (inError, inText) {
 			//console.log(inError, inText);
 			this.$.main.setContent(inText);
 		}));
diff --git a/source/moduleManager.js b/source/moduleManager.js
index f518dcb..6326717 100644
--- a/source/moduleManager.js
+++ b/source/moduleManager.js
@@ -2,8 +2,6 @@ enyo.kind({
     name: "biblez.moduleManager",
     kind: "enyo.FittableRows",
     fit: true,
-    classes: "app-panels",
-    arrangerKind: "CollapsingArranger",
     events: {
         onBack: ""
     },
@@ -13,27 +11,40 @@ enyo.kind({
             {content: $L("Module Manager")},
             {kind: "onyx.PickerDecorator", components: [
                 {},
-                {name: "repoPicker", kind: "onyx.Picker"}
+                {name: "repoPicker", kind: "onyx.Picker", onSelect: "handleRepoChange"}
             ]}
         ]},
-        {name: "panel", kind: "Panels", components: [
-            {name: "panelLang", components: [
-                {name: "langList", kind: "List", fit: true, onSetupItem: "setupLangItem", components: [
-                    {classes: "item", ontap: "itemTap", components: [
-                        {name: "lang"},
-                        {name: "index", style: "float: right;"}
+        {name: "panel", arrangerKind: "CollapsingArranger", fit: true, kind: "Panels", classes: "app-panels", components: [
+            {name: "panelLang", kind: "enyo.FittableRows", components: [
+                {name: "langList", kind: "List", fit: true, touch: true, onSetupItem: "setupLangItem", components: [
+                    {classes: "item", ontap: "handleLanguage", components: [
+                        {name: "langName"}
                     ]}
                 ]}
             ]},
-            {name: "panelModules"},
-            {name: "panelDescription"}
+            {name: "panelModules", kind: "enyo.FittableRows", components: [
+                {name: "modList", kind: "List", fit: true, touch: true, onSetupItem: "setupModItem", components: [
+                    {classes: "item", ontap: "handleModule", components: [
+                        {name: "modName"}
+                    ]}
+                ]}
+            ]},
+            {name: "panelDescription", kind: "enyo.FittableRows", components: [
+                {kind: enyo.Scroller, touch: true, fit: true, components: [
+                    {name: "detailsContainer", showing: false, classes: "content-container", components: [
+                        {name: "detailsName", classes: "title"},
+                        {kind: "onyx.Button", onTap: "installModule", name: "btnInstall", content: $L("Install Module"), style: "margin-left: 10px;"},
+                        {name: "detailsDescription", allowHtml: true, classes: "nice-padding"}
+                    ]}
+                ]}
+            ]}
         ]}
-
     ],
 
     lang: [],
     repos: [],
     modules: [],
+    langModules: [],
 
     rendered: function () {
         this.inherited(arguments);
@@ -43,6 +54,11 @@ enyo.kind({
             this.setupRepoPicker();
     },
 
+    handleRepoChange: function (inSender, inEvent) {
+        this.$.detailsContainer.hide();
+        api.set("currentRepo", this.repos[inEvent.selected.index]);
+    },
+
     getRepos: function () {
         sword.installMgr.getRepositories(enyo.bind(this, function (inError, inRepos) {
             console.log(inError, inRepos);
@@ -56,25 +72,84 @@ enyo.kind({
         if(!inRepos)
             inRepos = api.get("repos");
 
-        var items = [];
+        var items = [],
+            cw = null;
+        var currentRepo = api.get("currentRepo");
         inRepos.forEach(function(repo,idx) {
-            if (repo.name === "CrossWire") items.push({content: repo.name, index: idx, active: true});
-            else items.push({content: repo.name, index: idx});
+            if (repo.name === currentRepo.name || repo.name === "CrossWire") {
+                items.push({content: repo.name, index: idx, active: true});
+                cw = repo;
+            } else items.push({content: repo.name, index: idx});
         });
 
         this.repos = inRepos;
         this.$.repoPicker.createComponents(items, {owner: this});
         this.$.repoPicker.render();
 
+        enyo.log("currentRepo:", currentRepo);
+        if(currentRepo) this.getRemoteModules(currentRepo);
+        else this.getRemoteModules(cw);
+    },
+
+    getRemoteModules: function (inRepo) {
+        var currentModules = api.get("currentModules");
+        if(currentModules && inRepo.name === currentModules.name) {
+            this.modules = currentModules.modules;
+            this.prepareLangList(this.modules);
+        } else {
+            sword.installMgr.getModules(inRepo.confUrl, enyo.bind(this, function (inError, inModules) {
+                enyo.log(inError, inModules, inModules.length);
+                if(!inError) {
+                    api.set("currentModules", {modules: inModules, name: inRepo.name});
+                    this.modules = inModules;
+                    //this.$.langList.setCount(inModules.length);
+                    this.prepareLangList(this.modules);
 
+                }
+            }));
+        }
+    },
+
+    prepareLangList: function (inModules) {
+        this.lang = [];
+        inModules.forEach(enyo.bind(this, function(module, idx) {
+            //console.log(module.Lang, inModules[idx+1].Lang);
+            if (idx === 0) {
+                this.lang.push({lang: module.Lang});
+            } else if (idx > 0 && module.Lang !== inModules[idx-1].Lang) {
+                this.lang.push({lang: module.Lang});
+            }
+        }));
+        this.$.langList.setCount(this.lang.length);
+        this.$.langList.refresh();
     },
 
     setupLangItem: function(inSender, inEvent) {
         var data = this.lang[inEvent.index];
-        //this.$.name.setContent(data.name);
+        this.$.langName.setContent(data.lang);
         //this.$.index.setContent(inEvent.index);
     },
+
     handleLanguage: function(inSender, inEvent) {
-        //alert("You tapped on row: " + inEvent.index);
+        this.langModules = [];
+        this.modules.forEach(enyo.bind(this, function (module, idx) {
+            if(module.Lang === this.lang[inEvent.index].lang)
+                this.langModules.push(module);
+        }));
+        this.$.modList.setCount(this.langModules.length);
+        this.$.modList.refresh();
+    },
+
+    // Module List //
+    setupModItem: function (inSender, inEvent) {
+        var data = this.langModules[inEvent.index];
+        this.$.modName.setContent(data.Description);
+    },
+
+    handleModule: function (inSender, inEvent) {
+        this.$.detailsContainer.show();
+        var data = this.langModules[inEvent.index];
+        this.$.detailsName.setContent(data.Description);
+        this.$.detailsDescription.setContent(data.About.replace(/\\par/g, "<br></br>"));
     }
 });
\ No newline at end of file