diff options
| -rw-r--r-- | source/App.css | 32 | ||||
| -rw-r--r-- | source/App.js | 19 | ||||
| -rw-r--r-- | source/main.js | 4 | ||||
| -rw-r--r-- | source/moduleManager.js | 109 |
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 |