add reader mode display option

step-web/src/main/webapp/js/backbone/views/view_display_passage.js

@@ -117,6 +117,7 @@ var PassageDisplayView = DisplayView.extend({
                 this._doVerseNumbers(passageId, passageHtml, options, interlinearMode, version);
                 this._doHideEmptyNotesPane(passageHtml);
                 this._adjustTextAlignment(passageHtml);
+                step.util.restoreReaderMode(this.model, passageHtml);
                 step.util.restoreFontSize(this.model, passageHtml);
                 this._addStrongHandlers(passageId, passageHtml);
                 this._doDuplicateNotice(passageId, passageHtml);

step-web/src/main/webapp/js/backbone/views/view_display_search.js

@@ -136,6 +136,7 @@ var SearchDisplayView = DisplayView.extend({
 
         var passageId = this.model.get("passageId");
         step.util.restoreFontSize(this.model, results.find(".passageContentHolder"));
+        step.util.restoreReaderMode(this.model, results.find(".passageContentHolder"));
 
         if (append) {
             //already appended?

step-web/src/main/webapp/js/backbone/views/view_menu_passage.js

@@ -18,6 +18,7 @@ var PassageMenuView = Backbone.View.extend({
     fontButtons: '<li><%= __s.font_sizes %><span class="<%= step.state.isLtR() ? "pull-right" : "pull-left" %> btn-group">' +
         '<button class="btn btn-default btn-sm largerFontSize" type="button" title="<%= __s.font %>">' +
         '<span class="largerFont"><%= __s.passage_font_size_symbol %></span></button></span></li>',
+    readerMode: '<li><a href="javascript:void(0)" data-selected="true"><span>Reader Mode</span><span class="glyphicon glyphicon-ok pull-right" style="visibility: <%= isReaderMode ? "visible" : "hidden" %>"></span></a></li>',  // FIXME: Translate
     quickLexicon: '<li><a href="javascript:void(0)" data-selected="true"><span><%= __s.quick_lexicon %></span><span class="glyphicon glyphicon-ok pull-right" style="visibility: <%= isQuickLexicon ? "visible" : "hidden" %>"></span></a></li>',
     similarWord: '<li><a href="javascript:void(0)" data-selected="true"><span><%= __s.similar_word %></span><span class="glyphicon glyphicon-ok pull-right" style="visibility: <%= isSimilarWord ? "visible" : "hidden" %>"></span></a></li>',
     // enWithEsLexicon: '<li><a href="javascript:void(0)" data-selected="true"><span><%= __s.en_with_es_lexicon %></span><span class="glyphicon glyphicon-ok pull-right" style="visibility: <%= isEnWithEsLexicon ? "visible" : "hidden" %>"></span></a></li>',
@@ -434,6 +435,23 @@ var PassageMenuView = Backbone.View.extend({
         });
 
         //create menu options
+        var currentReaderModeSetting = self.model.get("isReaderMode");
+        if (currentReaderModeSetting == null) {
+            this.model.save({isReaderMode: false});
+            currentReaderModeSetting = false;
+        }
+        dropdown.append($(_.template(this.readerMode)({isReaderMode: currentReaderModeSetting})).click(function (e) {
+            //prevent the bubbling up
+            e.stopPropagation();
+
+            //set the setting
+            var readerMode = !self.model.get("isReaderMode");
+            self.model.save({isReaderMode: readerMode});
+            step.util.changeSpecificReaderMode(readerMode, self.model.get("passageId"));
+
+            //toggle the tick
+            self._setVisible(this, readerMode);
+        }));
         var currentQuickLexiconSetting = self.model.get("isQuickLexicon");
         if (currentQuickLexiconSetting == null) {
             this.model.save({isQuickLexicon: true});

step-web/src/main/webapp/js/step.util.js

@@ -909,6 +909,15 @@ step.util = {
 //    getMainLanguage: function (passageModel) {
 //        return (passageModel.get("languageCode") || ["en"])[0];
 //    },
+    restoreReaderMode: function (passageModel, element) {
+        var passageId = passageModel.get("passageId");
+        var passageModel = step.passages.findWhere({ passageId: passageId});
+        if (passageModel.get("isReaderMode")) {
+            element.each(function (e, el) {
+                el.style.setProperty("--clrStrongText", "var(--clrText)");
+            });
+        }
+    },
     restoreFontSize: function (passageModel, element) {
 		var fontArray = ["defaultfont", "hbFont", "unicodeFont", "arabicFont", "burmeseFont", "chineseFont", "copticFont", "farsiFont", "khmerFont", "syriacFont"];
         var passageId = passageModel.get("passageId");
@@ -940,6 +949,22 @@ step.util = {
 			}
 		}
     },
+    changeSpecificReaderMode: function(enabled, panelNumber) {
+		if (typeof panelNumber === "number") {
+			var passageModel = step.passages.findWhere({ passageId: panelNumber});
+			panelId = passageModel.attributes.id;
+			elements = $(".passageContentHolder", step.util.getPassageContainer(panelNumber));
+		}
+		else elements = $(".passageContentHolder", step.util.getPassageContainer(".passageOptionsGroup"));
+                for (var i = 0; i < elements.length; i++) {
+                    var element = elements[i];
+                    if (enabled) {
+                        element.style.setProperty("--clrStrongText", "var(--clrText)")
+                    } else {
+                        element.style.removeProperty("--clrStrongText");
+                    }
+                }
+    },
     changeSpecificFontSize: function (fontName, increment, panelNumber) {
 		var key = fontName;
 		var currentFontSize = 0;

step-web/src/main/webapp/js/step_ready.js

@@ -370,6 +370,7 @@
 
             modelZero.save(window.tempModel, {silent: true});
             modelZero.save({
+                isReaderMode: likelyPreviousPassage ? likelyPreviousPassage.get("isReaderMode") : false,
                 isQuickLexicon: likelyPreviousPassage ? likelyPreviousPassage.get("isQuickLexicon") : true,
 				isSimilarWord: likelyPreviousPassage ? likelyPreviousPassage.get("isSimilarWord") : true,
 				// isEnWithEsLexicon: likelyPreviousPassage ? likelyPreviousPassage.get("isEnWithZhLexicon") : true,