Skip to content

Commit 89cf5d0

Browse files
mdleungmdleung
committed
Merge branch 'main' of https://github.com/mdleung/Context-News-Extension into main
2 parents d56bc99 + e2096cd commit 89cf5d0

File tree

3 files changed

+121
-67
lines changed

3 files changed

+121
-67
lines changed

‎popup.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,31 @@
11
<html style="min-width:500px;">
22
<head><link rel="stylesheet" href="style.css">
3-
3+
<script type="text/javascript" src="mustache.js"></script>
4+
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
45
</head>
5-
<body class="center">
6+
<body>
67

7-
<script src="popup.js" charset="utf-8"></script>
8+
<script src="popup.js" charset="utf-8"></script>
89

10+
<script>
911

12+
$( document ).ready(function() {
13+
console.log( "ready!" );
14+
});
1015

16+
$(document.body).append('hello');
1117

18+
var data = { name: "Jonathan" };
19+
var template = "Hello {{ name }}";
20+
21+
var text = Mustache.render(template, data);
1222

13-
<div id="test"></div>
23+
$(".mypanel").append(text)
24+
25+
</script>
26+
27+
28+
<div class="mypanel"></div>
1429

1530
</body>
1631
</html>

‎popup.js‎

Lines changed: 68 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,9 @@
33
document.addEventListener(
44
"DOMContentLoaded",
55
function () {
6-
window.addEventListener("load", onclick, false);
7-
8-
function doThing(res) {
9-
10-
11-
12-
13-
var s = document.createElement('script');
14-
s.setAttribute('src','jquery-3.6.0.min.js');
15-
document.body.appendChild(s);
16-
17-
var g = document.createElement('script');
18-
g.setAttribute('src','handlebars-v4.7.7.js');
19-
document.body.appendChild(g);
20-
21-
22-
//Retrieve the template data from the HTML .
23-
6+
window.addEventListener("load", onload, false);
247

8+
function setCount(res) {
259

2610
var taxonomy = res.verse.taxonomy;
2711
var book = res.verse.book
@@ -34,53 +18,83 @@ document.addEventListener(
3418
var sermon_church = res.video.sermon_url
3519
var sermon_location = res.verse.sermon_location
3620

37-
3821
//alert(taxonomy)
3922

4023
linebreak = document.createElement("br");
4124
paragraph = document.createElement("br");
4225

43-
const div = document.createElement("div");
44-
45-
46-
document.body.appendChild(div);
47-
48-
div.textContent = "What does the bible say about " + taxonomy;
49-
50-
51-
52-
document.body.append(book + " " + chapter + " : " + verse, paragraph);
53-
26+
const div1 = document.createElement("div");
27+
document.body.appendChild(div1);
28+
div1.textContent = "What does the Bible say about " + taxonomy.toLowerCase() + "?";
29+
div1.style.fontWeight = "bold";
30+
div1.style.marginBottom = "10px";
31+
//document.body.append(book + " " + chapter + ":" + verse, paragraph);
32+
document.body.append(book + " " + chapter + ":" + verse);
33+
document.body.append(" says in Scripture:");
5434
document.body.append(linebreak);
55-
56-
57-
document.body.append(verse);
58-
document.body.append(linebreak);
59-
60-
// const video = document.createElement("<iframe title='YouTube video player' type=\"text/html\" width='640' height='390' src='${sermon_url}' frameborder='0' allowFullScreen></iframe>")
61-
62-
63-
// document.body.append(video);
6435

65-
66-
67-
68-
var obj = {"video": {
69-
"value": `<iframe title='YouTube video player' type=\"text/html\" width='640' height='390' src=https://www.youtube.com/embed/${sermon_url} frameborder='0' allowFullScreen></iframe>`
70-
}}
71-
document.body.append(obj.video.value);
36+
const div2 = document.createElement("div");
37+
document.body.appendChild(div2);
38+
//document.body.append('"' + res.verse.quote + '"');
39+
div2.textContent = '"' + res.verse.quote + '"';
40+
div2.style.marginBottom = "10px";
41+
42+
// Show "Watch a sermon" header
43+
const div3 = document.createElement('div')
44+
div3.textContent = "Watch a sermon with Biblical teaching on " + taxonomy.toLowerCase() + ":";
45+
div3.style.marginTop = "10px"
46+
document.body.appendChild(div3)
47+
48+
// Show video recommendations
49+
const div4 = document.createElement('div');
50+
div4.style.marginTop = "10px";
51+
52+
// Video recommendation
53+
const video1 = document.createElement('a');
54+
video1.href = res.video.sermon_url;
55+
video1.title = res.video.sermon_speaker + " - " + res.video.sermon_title + " - " + res.video.sermon_location;
56+
video1.target = "_blank";
57+
const video_img1 = document.createElement('img');
58+
video_img1.src = "https://img.youtube.com/vi/" + res.video.sermon_url.slice(32) + "/0.jpg";
59+
video_img1.width = 120;
60+
video_img1.height = 90;
61+
video1.appendChild(video_img1);
62+
div4.appendChild(video1);
63+
document.body.appendChild(div4);
64+
65+
// Show a dividing line
66+
const hr = document.createElement('hr');
67+
hr.style.marginTop = "10px";
68+
document.body.appendChild(hr);
69+
70+
// Display the action icons
71+
const icon_like = document.createElement('img');
72+
icon_like.src = "like.png";
73+
icon_like.width = 24;
74+
icon_like.height = 24;
75+
76+
const icon_share = document.createElement('img');
77+
icon_share.src = "share.png";
78+
icon_share.width = 24;
79+
icon_share.height = 24;
80+
81+
const icon_settings = document.createElement('img');
82+
icon_settings.src = "settings.png";
83+
icon_settings.width = 24;
84+
icon_settings.height = 24;
85+
86+
document.body.appendChild(icon_like);
87+
document.body.append(' ');
88+
document.body.appendChild(icon_share);
89+
document.body.append(' ');
90+
document.body.appendChild(icon_settings);
91+
7292

7393
}
7494

75-
function onclick() {
76-
77-
78-
console.log(chrome.tabs)
79-
95+
function onload() {
8096
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
81-
82-
83-
chrome.tabs.sendMessage(tabs[0].id, "", doThing);
97+
chrome.tabs.sendMessage(tabs[0].id, "", setCount);
8498

8599

86100
});

‎style.css‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
11
mark {
22

3-
background-color:skyblue !important;
4-
color:blue !important;
3+
background-color:#ceebf4 !important;
54
opacity: 0.6;
65
transition: 0.3s;
6+
padding-top: 5px;
7+
padding-right: 5px;
8+
padding-bottom: 5px;
9+
padding-left: 5px;
10+
border-top-left-radius: 5px;
11+
border-bottom-left-radius: 5px;
12+
border-top-right-radius: 5px;
13+
border-bottom-right-radius: 5px;
714
}
815

916
mark:hover {
10-
1117
opacity: 1
1218
}
1319

1420
.center {
15-
1621
text-align: center;
17-
1822
}
1923

20-
2124
body {
25+
color: #323232;
26+
font-size: 1rem;
27+
font-family: "Karla",sans-serif;
28+
font-weight: 400;
29+
line-height: 1.43;
30+
background-color: #fafafa;
31+
border-top-left-radius: 5px;
32+
border-bottom-left-radius: 5px;
33+
border-top-right-radius: 5px;
34+
border-bottom-right-radius: 5px;
35+
border: 1px solid;
36+
border-color: #ceebf4;
37+
padding-top: 20px;
38+
padding-right: 20px;
39+
padding-bottom: 20px;
40+
padding-left: 20px;
41+
box-shadow: 2px 2px 2px #ceebf4;
42+
}
2243

23-
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
24-
font-size: 25px;
25-
44+
hr {
45+
display: block;
46+
height: 1px;
47+
border: 0;
48+
border-top: 1px solid #ceebf4;
49+
margin: 1em 0;
50+
padding: 0;
2651
}
2752

2853

0 commit comments

Comments
 (0)