https://www.stepbible.org/html/gospel_harmony.html

1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <title>Harmony of the Gospel</title>
7    <link rel="shortcut icon" href="/images/step-favicon.ico"/>
8    <link href="/css/bootstrap.css" rel="stylesheet" media="screen"/>
9    <link href="/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
10    <link href="/css/select2.css" rel="stylesheet" media="screen"/>
11    <link href="/css/select2-bootstrap.css" rel="stylesheet" media="screen"/>
12    <link href="/scss/step-template.css" rel="stylesheet" media="screen"/>
13    

13<script src="/international/en.js" type="text/javascript"></script>

13
14    

14<script src="/libs/jquery-1.10.2.min.js" type="text/javascript"></script>

14
15    

15<script src="/libs/underscore-min.js" type="text/javascript"></script>

15
16    

16<script src="/libs/bootstrap.min.js" type="text/javascript"></script>

16
17    

17<script src="/libs/backbone.js" type="text/javascript"></script>

17
18    

18<script src="/libs/backbone.localStorage.js" type="text/javascript"></script>

18
19    

19<script src="/js/step_constants.js" type="text/javascript"></script>

19
20    

20<script src="/js/passage_selection.js" type="text/javascript"></script>

20
21    

21<script src="/js/search_selection.js" type="text/javascript"></script>

21
22    

22<script src="/js/backbone/models/model_settings.js" type="text/javascript"></script>

22
23  <style>
24  
25    .fixTableHead {
26      overflow-y: auto;
27    }
28    .fixTableHead .tb_head {
29      position: sticky;
30      top: 0;
31    }
32    table {
33        border-collapse: collapse;        
34        width: 100%;
35        font-family: Georgia, serif;
36        font-size: 15px;
37    }
38    .tb_head{
39        padding: 4px;
40        margin: 3px;
41        border: 2px solid #17758f;
42        background: #17758f;
43        color: white;
44    }
45    .th_col{
46        padding: 4px;
47        margin: 3px;
48        border: 2px solid #17758f;
49        background: #17758f;
50        color: white;
51    }
52    .tb_col {
53        padding: 4px;
54        margin: 3px;
55        border: 1px solid #ccc;
56        cursor: pointer;
57        color: #17758f;
58    }
59
60    :root {
61        --clrHighlight: #17758F;
62        --clrHighlightBg: #17758F;
63        --clrStrongText: #447888;
64        --clrLexiconFocusBG: #c8d8dc;
65        --clrRelatedWordBg: #b2e5f3;
66        --clrBackground: #ffffff;
67        --clrText: #5d5d5d;
68        --clr2ndHover: #d3d3d3;
69    }
70	
71  </style>
72</head>
73<body style="margin:0;background-color:white">
74<div id="header">
75<h2>Harmony of the Gospels</h2>
76&nbsp;<textarea id="userTextInput" rows="1" style="font-size:16px;width:50%;margin-left:5;resize:none;height:24px" placeholder="Search this table"></textarea>
77</div>
78<div class="fixTableHead">
79<table>
80	<colgroup>
81		<col span="1" style="width:38%;">
82		<col span="1" style="width:15%;">
83		<col span="1" style="width:15%;">
84		<col span="1" style="width:15%;">
85		<col span="1" style="width:15%;">
86	</colgroup>
87
88  <thead id="tb_heading">
89    <tr class="tb_head">
90      <th class="th_col">Event</th>
91      <th class="th_col">Matt</th>
92      <th class="th_col">Mark</th>
93      <th class="th_col">Luke</th>
94      <th class="th_col">John</th>
95    </tr>
96  </thead>
97  <tbody id="tb_body">
98
99  </tbody>
100</table>
101</div>

102<script>
103
104(function() {
105    var inIFrame = false;
106    try {
107        inIFrame = window.self !== window.top;
108    } catch (e) {
109        inIFrame = true;
110    }
111	var debugOption = "";
112	var urlPart1 = window.location.origin;
113	var pos = window.location.href.indexOf("/html/gospel_harmony.html");
114	if (pos > 8) { // probably running in development environment.
115		urlPart1 = window.location.href.substr(0, pos);
116		debugOption = "&debug";
117	}
118    if (window.innerWidth > 960) {
119        if (!inIFrame)
120            window.location = urlPart1 + "/html/split.html?" + urlPart1 + "/?q=reference=Mat.1.1-17;luk.3.23-38;joh.1.1-18&skipwelcome" + debugOption + "&secondURL=" + window.location.origin + window.location.pathname;
121    }
122	
123	if (typeof jQuery == 'undefined') {
124		(function() {
125			loadFile(urlPart1 + "/css/bootstrap.css");
126			loadFile(urlPart1 + "/css/bootstrap-theme.min.css");
127			loadFile(urlPart1 + "/css/select2.css");
128			loadFile(urlPart1 + "/css/select2-bootstrap.css");
129			loadFile(urlPart1 + "/scss/step-template.css");
130			loadFile(urlPart1 + "/international/en.js");
131			loadFile(urlPart1 + '/libs/jquery-1.10.2.min.js'); // Load the script
132			loadFile(urlPart1 + "/libs/underscore-min.js");
133			loadFile(urlPart1 + "/libs/bootstrap.min.js");
134			loadFile(urlPart1 + "/libs/backbone.js");
135			loadFile(urlPart1 + "/libs/backbone.localStorage.js");
136			loadFile(urlPart1 + "/js/backbone/models/model_settings.js");
137			loadFile(urlPart1 + "/js/step_constants.js");
138			loadFile(urlPart1 + "/js/passage_selection.js");
139			loadFile(urlPart1 + "/js/search_selection.js");
140			
141			// Poll for jQuery to come into existance
142			var checkReady = function(callback) {
143				if (window.jQuery) {
144					callback(jQuery);
145				}
146				else {
147					window.setTimeout(function() { checkReady(callback); }, 200);
148				}
149			};
150			// Start polling...
151			checkReady(function($) {
152				$(function() {
153					buildTable(urlPart1);
154				});
155			});
156		})();
157	}
158	else buildTable(urlPart1);
159})();
160
161function loadFile(path) {
162  if (path.endsWith(".js")) {
163    var fileref = document.createElement("script");
164    fileref.setAttribute("type", "text/javascript");
165    fileref.setAttribute("src", path);
166  } else if (path.endsWith(".css")) {
167    var fileref = document.createElement("link");
168    fileref.setAttribute("rel", "stylesheet");
169    fileref.setAttribute("type", "text/css");
170    fileref.setAttribute("href", path);
171  }
172  else return;
173  fileref.async = false;
174  document.getElementsByTagName("head")[0].appendChild(fileref);
175}
176
177function buildTable(urlPart1) {
178	var fullHeight = $(window).height();
179	var remainingHeight = Math.floor((fullHeight - $("#header").height()) * 0.95);
180	$(".fixTableHead").css("height", remainingHeight + "px");
181    var settings = new SettingsModelList;
182    settings.fetch();
183    if (settings.length > 0) {
184        step.settings = settings.at(0);
185        var sz = step.settings.get("defaultfont");
186        if (typeof sz !== "number") sz = 15;
187        $("table").css("font-size", sz + "px");
188    }
189
190	var jsonFileName = "gospel_harmony";
191    var queryString = window.location.search;
192	var pos = queryString.indexOf("jsonFN=");
193	if ((pos > 0) && ((queryString.substr(pos-1,1) == "?") || (queryString.substr(pos-1,1) == "&")) ) {
194		var tmp = queryString.substr(pos + 7);
195		pos = tmp.indexOf("&");
196		if (pos == -1) jsonFileName = tmp;
197		else if (pos > 0) jsonFileName = tmp.substr(0,pos);
198	}
199	$.ajaxSetup({async: false});
200    var jsonPath =  urlPart1 + "/html/json/";
201    if (urlPart1.indexOf("localhost") == -1 && urlPart1.indexOf("127.0.0.1") == -1) {
202        jsonPath += ("26.9.5".toLowerCase() !== "step_server_version_token") ? "26.9.5/" : "";
203    }
204
205	var tblRowHTML = ""
206    $.getJSON(jsonPath + jsonFileName + ".json", function(array) {
207		for (var i = 0; i < array.length; i ++ ) {
208			tblRowHTML += 
209				'<tr><td class="tb_col1 tb_col">' + array[i][0] + '</td>' +
210				    '<td class="tb_col">' + array[i][1] + '</td>' +
211					'<td class="tb_col">' + array[i][2] + '</td>' +
212					'<td class="tb_col">' + array[i][3] + '</td>' +
213					'<td class="tb_col">' + array[i][4] + '</td></tr>';
214		}
215		$("#tb_body").append(tblRowHTML);
216    });
217    $.ajaxSetup({async: true});
218
219    var rows = $("#tb_body").find("tr");
220    for (var i = 0; i < rows.length; i ++) {
221        rows[i].i = i;
222        rows[i].cells[0].addEventListener("click", function() {
223            goToNewRowSection(this);
224        }, false);
225        for (var j = 1; j <= 4; j ++) {
226             rows[i].cells[j].addEventListener("click", function() {
227                 goToNewSection(this);
228             }, false);
229        }
230    }
231
232	$(function(){
233		$('textarea#userTextInput').on('input', function(e){
234			this.timer && clearTimeout(this.timer);
235			this.timer = setTimeout(handleKeyboardInput, 300, e);
236		});
237	});
238}
239
240function goToNewRowSection(item) {
241    var inIFrame = false;

242    try {
243        inIFrame = window.self !== window.top;
244    } catch (e) {
245        inIFrame = true;
246    }
247
248	var urlPart1 = window.location.origin;
249
250    var row = item.parentNode;
251    var matt = row.cells[1].innerText;
252    var mark = row.cells[2].innerText;
253	var luke = row.cells[3].innerText;
254	var john = row.cells[4].innerText;
255	books = ["mat", "mar", "luk", "joh"];
256	var passages = "";
257	for (var i = 1; i <= 4; i ++ ) {
258		if (row.cells[i].innerText.length > 0) {
259			if (passages.length > 0) passages += ";";
260			passages += books[i-1] + "." + row.cells[i].innerText;
261		}
262	}
263    $(".tb_col").css("background-color", "white");
264    $(row.cells[0]).css("background-color","cyan")
265    passages = passages.replace(/ /g, ";").replace(/luk.Act/, "act");
266
267    if (!inIFrame) {
268        var tabURL = urlPart1 + "/?skipwelcome&q=";
269    	tabURL += "reference=" + passages;
270        window.open(tabURL, "_blank");
271    }
272    else
273    {
274        window.top.postMessage(passages, '*');
275    }
276}
277
278function goToNewSection(item) {
279    var inIFrame = false;
280    try {
281        inIFrame = window.self !== window.top;
282    } catch (e) {
283        inIFrame = true;
284    }
285
286	var urlPart1 = window.location.origin;
287
288    var colNum = item.cellIndex;
289    var rows = $("#tb_heading").find("tr");
290    var passages = "";
291    if (item.innerText.length > 0) {
292        passages += rows[0].cells[colNum].innerText + item.innerText;
293        $(".tb_col").css("background-color", "white");
294        $(item).css("background-color","cyan")
295
296        passages = passages.replace(/ /g, ";").replace(/LukeAct/, "Act");
297        if (!inIFrame) {
298            var tabURL = urlPart1 + "/?skipwelcome&q=";
299        	tabURL += "reference=" + passages;
300            window.open(tabURL, "_blank");
301        }
302        else
303        {
304            window.top.postMessage(passages, '*');
305        }
306    }
307
308}
309
310function handleKeyboardInput(e) {
311	var userInput =  $('textarea#userTextInput').val();
312	if ((userInput.slice(-1) === "\n") || (e.originalEvent.inputType === "insertLineBreak")) {
313		userInput = userInput.replace(/[\n\r]/g, '').replace(/\t/g, ' ').replace(/\s\s+/g, ' ').replace(/^\s+/g, '');
314		$('textarea#userTextInput').val(userInput);
315	}
316	if ((typeof userInput !== "string") || (userInput.length = 0)) {
317		$("tr").show();
318	}
319	else {
320		$("#tb_body").find("tr").hide();
321		var re = new RegExp(userInput, "i");
322		$("tr").filter(function () { return re.test($(this).find(".tb_col1").text());}).show();
323	}
324}
325
326</script>

326

327<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"c69d685af69a41bf83d4517172b000f8","r":1,"spa":2}' crossorigin="anonymous"></script>

327

328<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a440dd52bc72a0b6',t:'MTc5MDkxNDMwMQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>

328</body>
329</html>