From 6199afa7316230243d86f66863b5ca028ac534f9 Mon Sep 17 00:00:00 2001 From: zefanja Date: Tue, 24 Dec 2013 11:14:01 +0700 Subject: * added Book/Chapter Popup for Desktop version * style improvments * prepare versePopup for actions on a verse (like bookmarks, notes, highlights and share options) --- source/App.css | 53 +++++++++++++++++++++++++++++++++++++++++++++++----- source/bcSelector.js | 3 ++- source/main.js | 52 ++++++++++++++++++++++++++++++++++++++++++++------- source/package.js | 1 + 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" ); -- cgit