* added search field in dataView

* added sidebar for bigger screens

8 files changed, 147 insertions, 69 deletions

diff --git a/assets/oldPaper.png b/assets/oldPaper.png
index 03a987f..4a350c1 100644
--- a/assets/oldPaper.png
+++ b/assets/oldPaper.png
diff --git a/assets/search-input.png b/assets/search-input.png
new file mode 100644
index 0000000..36bf1b5
--- /dev/null
+++ b/assets/search-input.png
diff --git a/biblez.appcache b/biblez.appcache
index 292b087..5ee32d7 100644
--- a/biblez.appcache
+++ b/biblez.appcache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# v16 - 2014-04-18
+# v17 - 2014-04-18
 CACHE:
 icon.png
 index.html
diff --git a/source/App.css b/source/App.css
index 97e29b7..5a00f80 100644
--- a/source/App.css
+++ b/source/App.css
@@ -127,6 +127,21 @@
     position: absolute;
 }
 
+.sidebar-left {
+    /* border-left: 2px solid #000; */
+    box-shadow: inset -4px 0px 4px rgba(0,0,0,0.3);
+}
+
+.modules-tree-label {
+    font-variant: small-caps;
+    font-weight: bold;
+}
+
+.module-label {
+    font-variant: normal;
+    font-weight: normal;
+}
+
 /* MODULE MANAGER */
 
 .item {
diff --git a/source/bcSelector.js b/source/bcSelector.js
index 5ad4828..292c989 100644
--- a/source/bcSelector.js
+++ b/source/bcSelector.js
@@ -94,8 +94,8 @@ enyo.kind({
     },
 
     handleChapter: function (inSender, inEvent) {
-        this.doSelect({book: this.currentBook.abbrev, chapter: inEvent.index+1, osisRef: this.currentBook.abbrev + "." + (inEvent.index+1), label: this.currentBook.abbrev + " " + (inEvent.index+1)});
         this.$.bcPanel.setIndex(0);
+        this.doSelect({book: this.currentBook.abbrev, chapter: inEvent.index+1, osisRef: this.currentBook.abbrev + "." + (inEvent.index+1), label: this.currentBook.abbrev + " " + (inEvent.index+1)});
     },
 
     resizeHandler: function () {
diff --git a/source/dataView.js b/source/dataView.js
index e102995..e64bd43 100644
--- a/source/dataView.js
+++ b/source/dataView.js
@@ -11,7 +11,7 @@ enyo.kind({
     },
     components: [
         {name: "messagePopup", kind: "onyx.Popup", centered: true, floating: true, classes: "message-popup"},
-        {kind: "onyx.MoreToolbar", layoutKind:"FittableColumnsLayout", components: [
+        {kind: "onyx.MoreToolbar", layoutKind:"FittableColumnsLayout", classes: "main-toolbar", components: [
             {name: "btBack", kind: "onyx.IconButton", src: "assets/back.png", ontap: "handleBack"},
             {name: "btHide", kind: "onyx.IconButton", src: "assets/hide.png", showing: false, ontap: "handleBack"},
             {kind: "onyx.RadioGroup", onActivate:"sectionActivated", classes: "center", fit: true, defaultKind: "onyx.IconButton", components: [
@@ -21,7 +21,14 @@ enyo.kind({
             ]},
         ]},
         {name: "noData", classes: "center", style: "margin-top: 10px;", showing: false},
-        {name: "dataList", kind: "List", fit: true, touch: true, onSetupItem: "setupItem", components: [
+        {name: "dataList", kind: "AroundList", fit: true, onSetupItem: "setupItem", aboveComponents: [
+            {kind: "onyx.Toolbar", layoutKind: "FittableColumnsLayout", components: [
+                {kind: "onyx.InputDecorator", fit: true, noStretch: true, layoutKind: "FittableColumnsLayout", components: [
+                    {kind: "onyx.Input", placeholder: $L("Search..."), fit: true, oninput: "searchInputChange"},
+                    {kind: "Image", src: "assets/search-input.png", style: "height: 20px; width: 20px;"}
+                ]}
+            ]},
+        ], components: [
             {name: "item", classes: "item", ontap: "handleListTap", components: [
                 //{kind: "enyo.FittableRows", components: [
                     {name: "itemOsis", classes: ""},
@@ -32,6 +39,7 @@ enyo.kind({
     ],
 
     data: [],
+    filtered: [],
 
     showHideButton: function () {
         this.$.btHide.show();
@@ -52,6 +60,7 @@ enyo.kind({
     },
 
     sectionChanged: function (inSender, inEvent) {
+        this.filter = null;
         if (this.section === "bookmarks") {
             this.$.rbBm.setActive(true);
             api.getAllBookmarks(enyo.bind(this, function (inError, inData) {
@@ -67,7 +76,6 @@ enyo.kind({
                 if(!inError) {
                     this.data = inData;
                     this.updateList();
-                    this.$.dataList.refresh();
                 } else
                     this.handleError(inError);
             }));
@@ -86,6 +94,7 @@ enyo.kind({
     updateList: function () {
         this.$.dataList.setCount(this.data.length);
         if(this.data.length === 0) {
+            this.$.dataList.hide();
             this.$.noData.show();
             if(this.section === "bookmarks")
                 this.$.noData.setContent($L("No Bookmarks.") + " " + $L("Tap on a verse number to add one."));
@@ -93,14 +102,17 @@ enyo.kind({
                 this.$.noData.setContent($L("No Notes.") + " " + $L("Tap on a verse number to add one."));
             else if(this.section === "highlights")
                 this.$.noData.setContent($L("No Highlights.") + " " + $L("Tap on a verse number to add one."));
-        } else
+        } else {
             this.$.noData.hide();
-        this.$.dataList.refresh();
+            this.$.dataList.show();
+        }
+        this.$.dataList.reset();
         this.$.dataList.reflow();
+        this.$.dataList.scrollToRow(0);
     },
 
     setupItem: function(inSender, inEvent) {
-        var data = this.data[inEvent.index];
+        var data = this.filter ? this.filtered[inEvent.index] : this.data[inEvent.index];
         this.$.itemOsis.setContent(api.formatOsis(data.osisRef));
         if(this.section === "highlights") {
             this.$.item.applyStyle("background-color", data.color);
@@ -121,6 +133,30 @@ enyo.kind({
         this.doVerse({osisRef: this.data[inEvent.index].osisRef});
     },
 
+    searchInputChange: function(inSender) {
+        enyo.job(this.id + ":search", this.bindSafely("filterList", inSender.getValue()), 200);
+        return true;
+    },
+
+    filterList: function(inFilter) {
+        if (inFilter != this.filter) {
+            this.filter = inFilter;
+            this.filtered = this.generateFilteredData(inFilter);
+            this.$.dataList.setCount(this.filtered.length);
+            this.$.dataList.reset();
+        }
+    },
+    generateFilteredData: function(inFilter) {
+        var re = new RegExp(inFilter, "i");
+        var r = [];
+        for (var i=0, d; (d=this.data[i]); i++) {
+            if (d.osisRef.match(re) || api.formatOsis(d.osisRef).match(re) || (d.text && d.text.match(re))) {
+                r.push(d);
+            }
+        }
+        return r;
+    },
+
     handleBack: function() {
         this.doBack();
     },
diff --git a/source/main.js b/source/main.js
index 420fdd4..8b974f5 100644
--- a/source/main.js
+++ b/source/main.js
@@ -22,65 +22,67 @@ enyo.kind({
         {name: "footnotePopup", kind: "biblez.footnotePopup"},
         {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: "biblez.bcSelector", name: "bcSelector", onSelect: "passageChanged", onBack: "closePopup"}
         ]},
-        {kind: "onyx.Toolbar", showing: false, classes: "main-toolbar", noStretch: true, name: "topTB", layoutKind: "FittableColumnsLayout", components: [
-            {name: "moduleSelector", kind: "onyx.MenuDecorator", onSelect: "moduleSelected", components: [
-                {kind: "onyx.Button", name: "btnModules", classes: "tb-button", style: "background-color: #934A15;"},
-                {kind: "onyx.Menu", maxHeight: "300", name: "moduleMenu", style: "width: 250px;"}
-            ]},
-            {kind: "onyx.Button", name: "btnPassage", classes: "tb-button", ontap: "handleBcSelector"},
-            {name: "historySelector", kind: "onyx.MenuDecorator", onSelect: "historySelected", components: [
-                //Clock Icon by Thomas Le Bas from The Noun Project
-                {kind: "onyx.IconButton", name: "btnHistory", src: "assets/history.png"},
-                {kind: "onyx.Menu", maxHeight: "300", name: "historyMenu"}
-            ]},
-            {fit: true},
-            {classes: "toolbar-spinner", name: "tbSpinner", showing: false},
-            {name: "actionSelector", kind: "onyx.MenuDecorator", onSelect: "actionSelected", components: [
-                {kind: "onyx.IconButton", src: "assets/menu.png"},
-                {kind: "onyx.Menu", name: "actionMenu", maxHeight: "400", style: "width: 200px;", components: [
-                    {action: "bookmarks", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/bookmarks.png"},
-                        {content: $L("Bookmarks"), classes: "menu-label"}
-                    ]},
-                    {action: "notes", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/notes.png"},
-                        {content: $L("Notes"), classes: "menu-label"}
+        {kind: "enyo.FittableColumns", fit: true, name: "mainView", components: [
+            {kind: "enyo.FittableRows", fit: true, components: [
+                {kind: "onyx.Toolbar", showing: false, classes: "main-toolbar", noStretch: true, name: "topTB", layoutKind: "FittableColumnsLayout", components: [
+                    {name: "moduleSelector", kind: "onyx.MenuDecorator", onSelect: "moduleSelected", components: [
+                        {kind: "onyx.Button", name: "btnModules", classes: "tb-button", style: "background-color: #934A15;"},
+                        {kind: "onyx.Menu", maxHeight: "300", name: "moduleMenu", style: "width: 250px;"}
                     ]},
-                    {action: "highlights", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/highlights.png"},
-                        {content: $L("Highlights"), classes: "menu-label"}
+                    {kind: "onyx.Button", name: "btnPassage", classes: "tb-button", ontap: "handleBcSelector"},
+                    {name: "historySelector", kind: "onyx.MenuDecorator", onSelect: "historySelected", components: [
+                        //Clock Icon by Thomas Le Bas from The Noun Project
+                        {kind: "onyx.IconButton", name: "btnHistory", src: "assets/history.png"},
+                        {kind: "onyx.Menu", maxHeight: "300", name: "historyMenu"}
                     ]},
-                    {classes: "onyx-menu-divider"},
-                    {action: "moduleManager", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/add.png"},
-                        {content: $L("Module Manager"), classes: "menu-label"}
+                    {fit: true},
+                    {classes: "toolbar-spinner", name: "tbSpinner", showing: false},
+                    {name: "actionSelector", kind: "onyx.MenuDecorator", onSelect: "actionSelected", components: [
+                        {kind: "onyx.IconButton", src: "assets/menu.png"},
+                        {kind: "onyx.Menu", name: "actionMenu", maxHeight: "400", style: "width: 200px;", components: [
+                            {action: "bookmarks", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/bookmarks.png"},
+                                {content: $L("Bookmarks"), classes: "menu-label"}
+                            ]},
+                            {action: "notes", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/notes.png"},
+                                {content: $L("Notes"), classes: "menu-label"}
+                            ]},
+                            {action: "highlights", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/highlights.png"},
+                                {content: $L("Highlights"), classes: "menu-label"}
+                            ]},
+                            {classes: "onyx-menu-divider"},
+                            {action: "moduleManager", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/add.png"},
+                                {content: $L("Module Manager"), classes: "menu-label"}
+                            ]},
+                            {action: "preferences", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/settings.png"},
+                                {content: $L("Preferences"), classes: "menu-label"}
+                            ]},
+                            {action: "font", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/font.png"},
+                                {content: $L("Font"), classes: "menu-label"}
+                            ]},
+                            {action: "about", classes: "menu-item", components: [
+                                {kind: "onyx.IconButton", src: "assets/info.png"},
+                                {content: $L("About"), classes: "menu-label"}
+                            ]}
+                        ]}
                     ]},
-                    {action: "preferences", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/settings.png"},
-                        {content: $L("Preferences"), classes: "menu-label"}
-                    ]},
-                    {action: "font", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/font.png"},
-                        {content: $L("Font"), classes: "menu-label"}
-                    ]},
-                    {action: "about", classes: "menu-item", components: [
-                        {kind: "onyx.IconButton", src: "assets/info.png"},
-                        {content: $L("About"), classes: "menu-label"}
+                    //{name: "btFont", kind: "onyx.IconButton", src: "assets/font.png", ontap: "handleFontMenu"}
+                ]},
+                {name: "mainPanel", kind: "Panels", draggable: false, /*index: 2, */fit: true, ondragfinish: "handleChangeChapter", onTransitionStart: "handlePanelIndex", arrangerKind: "LeftRightArranger", margin: 0, classes: "background", components: [
+                    {name: "verseList", kind: "VerseList", touch: false, thumb: false, touchOverscroll: false, count: 0, onSetupItem: "setVerses", onScroll: "handleOnScroll", classes: "enyo-selectable", components: [
+                        {name: "text", allowHtml: true, style: "display: inline;", ontap: "handleVerseTap", onclick: "handleVerseTap"},
+                        {name: "imgBm", tag: "img", style: "display: inline;", showing: false, src: "assets/bookmark.png"},
+                        {name: "imgNote", content: "", allowHtml: true, style: "display: inline; margin: 0 3px;", showing: false, ontap: "handleVerseTap", onclick: "handleVerseTap"}
                     ]}
                 ]}
             ]},
-            //{name: "btFont", kind: "onyx.IconButton", src: "assets/font.png", ontap: "handleFontMenu"}
-        ]},
-        {name: "mainView", kind: "enyo.FittableColumns", fit: true, components: [
-            {name: "mainPanel", kind: "Panels", draggable: false, /*index: 2, */fit: true, ondragfinish: "handleChangeChapter", onTransitionStart: "handlePanelIndex", arrangerKind: "LeftRightArranger", margin: 0, classes: "background", components: [
-                {name: "verseList", kind: "VerseList", touch: true, thumb: false, touchOverscroll: false, count: 0, onSetupItem: "setVerses", onScroll: "handleOnScroll", classes: "enyo-selectable", components: [
-                    {name: "text", allowHtml: true, style: "display: inline;", ontap: "handleVerseTap", onclick: "handleVerseTap"},
-                    {name: "imgBm", tag: "img", style: "display: inline;", showing: false, src: "assets/bookmark.png"},
-                    {name: "imgNote", content: "", allowHtml: true, style: "display: inline; margin: 0 3px;", showing: false, ontap: "handleVerseTap", onclick: "handleVerseTap"}
-                ]}
-            ]},
             {name: "sidebar", content: "", classes: "sidebar", showing: false, style: "width: 320px;"}
         ]}
     ],
@@ -181,16 +183,18 @@ enyo.kind({
         }));
     },
 
-    renderModuleMenu: function (inModules) {
+    renderModuleMenu: function (inModules, inRenderAgain) {
         var lastModule = null;
         if(!inModules)
             inModules = this.modules;
         if(this.settings.lastModule)
             lastModule = this.settings.lastModule;
-        //console.log(this.modules);
+
+
         this.$.moduleMenu.destroyClientControls();
         var mods = [];
         this.currentModule = null;
+
         this.modules.forEach(enyo.bind(this, function (mod, idx) {
             if ((lastModule && lastModule === mod.modKey)) {
                 this.$.btnModules.setContent(lastModule);
@@ -216,19 +220,17 @@ enyo.kind({
                 {kind: "onyx.IconButton", src: "assets/checkmark.png", style: "float: right;"},
                 {content: this.currentModule.modKey, index: 0},
                 {tag: "br"},
-                {content: mod.config.description, classes: "menu-module-title", index: 0}
+                {content: this.currentModule.config.description, classes: "menu-module-title", index: 0}
             ];
             mods[0]["classes"] = "menu-modules-item";
             mods[0]["index"] = 0;
             this.$.btnModules.setContent(this.currentModule.modKey);
             this.settings["lastModule"] = this.currentModule.modKey;
         }
+
         this.$.moduleMenu.createComponents(mods, {owner: this.$.moduleMenu});
         this.$.moduleMenu.render();
-
         this.doModuleChanged({module: this.currentModule});
-        if(enyo.platform.firefox || enyo.platform.androidFirefox)
-            this.$.bcSelector.setModule(this.currentModule);
 
         //Load the verses
         if(this.passage === this.settings.lastRead || !this.settings.lastRead) {
@@ -250,8 +252,16 @@ enyo.kind({
         }
     },
 
+    handleModuleTree: function (inSender, inEvent) {
+        this.currentModule = inEvent.module;
+        this.settings["lastModule"] = this.currentModule.modKey;
+        this.renderModuleMenu(null, false);
+    },
+
     passageChanged: function (inSender, inEvent) {
         //console.log("passageChanged: ", inEvent);
+        if(this.$.bcSelector)
+            this.$.bcPopup.destroyClientControls();
         this.$.bcPopup.hide();
         if (!inEvent.offsetRef) {
             delete inEvent.originator;
@@ -301,7 +311,7 @@ enyo.kind({
 
         if (typeof inOsis === "string" || (inEvent && inEvent.osisRef && !inEvent.label && !inEvent.chapter)) {
             //BibleZ currently supports only Book.Chapter Osis passages in the mainView
-            inOsis = (inEvent.osisRef) ? inEvent.osisRef : inOsis;
+            inOsis = (inEvent && inEvent.osisRef) ? inEvent.osisRef : inOsis;
             if(inOsis.split(".").length > 2) {
                 verseNumber = parseInt(inOsis.slice(inOsis.lastIndexOf(".")+1, inOsis.length), 10);
                 inOsis = inOsis.slice(0, inOsis.lastIndexOf("."));
@@ -348,6 +358,7 @@ enyo.kind({
 
         //Render History Menu
         this.renderHistory();
+        return true;
     },
 
     setVerses: function (inSender, inEvent) {
@@ -485,13 +496,17 @@ enyo.kind({
     },
 
     handleBcSelector: function (inSender, inEvent) {
-        if(enyo.platform.firefox || enyo.platform.androidFirefox) {
+        if(!enyo.Panels.isScreenNarrow()) {
+            this.$.bcPopup.createComponent({kind: "biblez.bcSelector", name: "bcSelector", onSelect: "passageChanged", onBack: "closePopup"}, {owner: this}).render();
+            this.$.bcSelector.setModule(this.currentModule);
             this.$.bcPopup.showAtEvent(inEvent);
         } else
             this.doOpenBC();
     },
 
     closePopup: function (inSender, inEvent) {
+        if(this.$.bcSelector)
+            this.$.bcPopup.destroyClientControls();
         this.$.bcPopup.hide();
     },
 
@@ -789,6 +804,17 @@ enyo.kind({
         this.$.sidebar.hide();
         this.$.mainView.resized();
         this.$.verseList.reset(this.offset);
+        return true;
+    },
+
+    handleBackLeft: function (inSender, inEvent) {
+        this.$.leftBar.destroyClientControls();
+        this.$.leftBar.hide();
+        this.$.moduleSelector.show();
+        this.$.btnPassage.applyStyle("margin-left", "6px;");
+        this.$.mainView.resized();
+        this.$.verseList.reset(this.offset);
+        return true;
     },
 
     handlePanelIndex: function (inSender, inEvent) {
diff --git a/source/package.js b/source/package.js
index 0904315..ae9e7a0 100644
--- a/source/package.js
+++ b/source/package.js
@@ -8,9 +8,10 @@ enyo.depends(
     "mapping.js",
     "bcSelector.js",
     "kinds.js",
+    //"moduleTree.js",
     "main.js",
     "moduleManager.js",
-    "moduleManagerDesktop.js",
+    //"moduleManagerDesktop.js",
     "popup.js",
     "settings.js",
     "notes.js",