From 33409e448f34e1fe62c8eb4a1087f61e267fed5b Mon Sep 17 00:00:00 2001 From: zefanja Date: Thu, 24 Apr 2014 21:03:18 +0700 Subject: * added search field in dataView * added sidebar for bigger screens --- assets/oldPaper.png | Bin 121338 -> 104519 bytes assets/search-input.png | Bin 0 -> 447 bytes biblez.appcache | 2 +- source/App.css | 15 +++++ source/bcSelector.js | 2 +- source/dataView.js | 48 ++++++++++++++-- source/main.js | 146 ++++++++++++++++++++++++++++-------------------- source/package.js | 3 +- 8 files changed, 147 insertions(+), 69 deletions(-) create mode 100644 assets/search-input.png diff --git a/assets/oldPaper.png b/assets/oldPaper.png index 03a987f..4a350c1 100644 Binary files a/assets/oldPaper.png and b/assets/oldPaper.png differ diff --git a/assets/search-input.png b/assets/search-input.png new file mode 100644 index 0000000..36bf1b5 Binary files /dev/null and b/assets/search-input.png differ 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", -- cgit