diff --git a/functions.js b/functions.js
index 17b3aacf7858edefe2a8a8ee93ff82843ee19cd6..8162393781ab2b98ebae800582e0c0d1fbddc66f 100644
--- a/functions.js
+++ b/functions.js
@@ -11,11 +11,50 @@ document.addEventListener("DOMContentLoaded", function() {
function onload() {
console.log("Page loaded");
+ handleSearchChanged();
setInterval(slideImage, 30000);
-
setHoverForOverlay();
}
+function handleSearchChanged() {
+ const searchForm = document.forms['search-form'];
+ const searchInput = searchForm.elements['search-input'];
+
+ searchInput.addEventListener("input", onInputChanged);
+}
+
+async function onInputChanged(event) {
+ let searchWord = event.target.value;
+
+ let json = await fetchNews(searchWord);
+
+ if (json === undefined)
+ return;
+
+ displaySearchResults(json);
+}
+
+function fetchNews(searchWord) {
+ let request = fetch(`NewsFetch.php?searchWord=${searchWord}`)
+ .then((response) => {
+ if (response.status >= 200 && response.status < 300) {
+ return response.json();
+ } else {
+ return Promise.reject("An error occured while fetching the news!");
+ }
+ })
+ .catch((error) => console.error(error));
+
+ return request;
+}
+
+function displaySearchResults(json) {
+ let searchResults = document.getElementById();
+ json.forEach((news) => {
+ console.log(news['title']);
+ });
+}
+
function slideImage() {
slideNumber = (slideNumber + 1) % 3;
@@ -35,13 +74,14 @@ function slideImage() {
}
function setHoverForOverlay() {
- let overlayDescription = document.querySelector('.overlay > .overlay-description');
-
- overlayDescription.addEventListener("mouseover", function() { hover(true); })
- overlayDescription.addEventListener("mouseout", function() { hover(false); })
+ document.querySelectorAll('.overlay > .overlay-description').forEach(function(element) {
+ element.addEventListener("mouseover", function() { hover(this, true); });
+ element.addEventListener("mouseout", function() { hover(this, false); });
+ });
}
-function hover(hoverActivated) {
+function hover(element, hoverActivated) {
+ console.log(element);
let height = "";
if (hoverActivated)
@@ -49,7 +89,5 @@ function hover(hoverActivated) {
else
height = "auto";
- document.querySelectorAll(".overlay").forEach(function(element) {
- element.style.height = height;
- });
+ element.parentElement.style.height = height;
}
\ No newline at end of file
diff --git a/php/Admin.php b/php/Admin.php
index 25f192276d5957389751f145515dffa970fd7c36..4f4cf6ada618d4b80f59e045f9c448de0b0a3574 100644
--- a/php/Admin.php
+++ b/php/Admin.php
@@ -1,7 +1,7 @@
<?php declare(strict_types=1);
require_once 'Page.php';
-require_once 'constants.php';
+require_once 'util/constants.php';
class Admin extends Page
{
diff --git a/php/Index.php b/php/Index.php
index 1b25c234babc3730a3220678b473fa8a719c16db..84fa7710171cca5a3b70bd61010c73bec03b9412 100644
--- a/php/Index.php
+++ b/php/Index.php
@@ -1,7 +1,7 @@
<?php declare(strict_types=1);
require_once 'Page.php';
-require_once 'constants.php';
+require_once 'util/constants.php';
require_once 'data/News.php';
class Index extends Page {
@@ -10,10 +10,14 @@ class Index extends Page {
private const IMGURL = 'imgurl';
private const CONTENT = 'content';
+ private array $news;
+
protected function __construct()
{
parent::__construct();
+ $this->news = array();
+
session_start();
}
@@ -41,7 +45,7 @@ class Index extends Page {
protected function generateView():void
{
- $data = $this->getViewData();
+ $this->news = $this->getViewData();
$this->generatePageHeader('NASA');
echo <<<EOT
@@ -60,10 +64,13 @@ class Index extends Page {
<li><a href="#">About</a></li>
<li><a href="#">NASA Audiences</a></li>
<li>
- <form class="search-form" method="post" accept-charset="UTF-8">
- <input type="search" placeholder="Search" />
- <input type="button" value="" />
+ <form id="search-form" class="search-form" method="post" accept-charset="UTF-8">
+ <input id="search-input" name="search-input" type="search" placeholder="Search" />
+ <input id="search-button" type="button" value="" />
</form>
+ <div class="search-results">
+ <p>sdfdsfsdfasfdasfasfas</p>
+ </div>
</li>
<li><img src="../img/share_icon.png" alt="" /></li>
<li class="admin-button"><a href="Admin.php">Admin</a></li>
@@ -104,12 +111,12 @@ class Index extends Page {
</div>
</article>
<article class="content-small">
- <div>
+ <div>
<div class="article-content-container">
EOT;
- $title = $data[0]->title();
- $imgurl = $data[0]->imgurl();
- $content = $data[0]->content();
+ $title = $this->news[0]->title();
+ $imgurl = $this->news[0]->imgurl();
+ $content = $this->news[0]->content();
echo <<<EOT
@@ -119,22 +126,23 @@ EOT;
<img class="article-image" src="$imgurl" alt="" />
- <div class="article-content nasa-events-container">
-
- <div class="nasa-events-top">
- <p class="nasa-events-title">$title</p>
+ <div class="article-content">
+ <div class="nasa-events-container">
+ <div class="nasa-events-top">
+ <p class="nasa-events-title">$title</p>
- <div class="line"></div>
+ <div class="line"></div>
- <a class="nasa-event" href="#">$content</a>
- </div>
+ <a class="nasa-event" href="#">$content</a>
+ </div>
- <div class="nasa-events-bottom">
- <div class="line"></div>
-
- <div class="nasa-events-bottom-horizontal">
- <a href="#">Calendar</a>
- <a href="#">Launches and Landings</a>
+ <div class="nasa-events-bottom">
+ <div class="line"></div>
+
+ <div class="nasa-events-bottom-horizontal">
+ <a href="#">Calendar</a>
+ <a href="#">Launches and Landings</a>
+ </div>
</div>
</div>
</div>
@@ -146,9 +154,9 @@ EOT;
<div>
<div class="article-content-container">
EOT;
- $title = $data[1]->title();
- $imgurl = $data[1]->imgurl();
- $content = $data[1]->content();
+ $title = $this->news[1]->title();
+ $imgurl = $this->news[1]->imgurl();
+ $content = $this->news[1]->content();
echo <<<EOT
@@ -171,29 +179,33 @@ EOT;
<div>
<div class="article-content-container">
EOT;
- $title = $data[2]->title();
- $imgurl = $data[2]->imgurl();
- $content = $data[2]->content();
+ $title = $this->news[2]->title();
+ $imgurl = $this->news[2]->imgurl();
+ $content = $this->news[2]->content();
echo <<<EOT
<div class="article-background"></div>
- <a class="article-link" href="#"></a>
+ <a class="article-link" href="#"></a>
- <img class="article-half-image" src="$imgurl" alt="" />
+ <img class="article-image" src="$imgurl" alt="" />
+
+ <div class="article-content">
+ <img class="article-half-image" src="$imgurl" alt="" />
- <div class="article-triangle"></div>
+ <div class="article-triangle"></div>
- <div class="article-content-second-half nasa-launch">
- <h4>$title</h4>
+ <div class="nasa-launch">
+ <h4>$title</h4>
- <p>$content</p>
+ <p>$content</p>
- <div class="nasa-launch-links">
- <a href="#">Mission Site</a>
- <a href="#">Briefing Schedule</a>
- <a href="#">Launch Updates</a>
- <a href="#">Video to Bennu and Back</a>
+ <div class="nasa-launch-links">
+ <a href="#">Mission Site</a>
+ <a href="#">Briefing Schedule</a>
+ <a href="#">Launch Updates</a>
+ <a href="#">Video to Bennu and Back</a>
+ </div>
</div>
</div>
</div>
@@ -202,8 +214,12 @@ EOT;
<article class="content-small">
<div>
<div class="article-content-container">
+ <div class="article-background"></div>
+
<a class="article-link" href="#"></a>
+ <img class="article-image" src="" alt="" />
+
<div class="article-content">
<iframe src="https://www.youtube.com/embed/XY6idnRlPsU?si=HnFL8-if6-zB6tU2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
@@ -218,6 +234,8 @@ EOT;
<a class="article-link" href="#"></a>
<img class="article-image" src="../img/ocean_worlds.jpg" alt="" />
+
+ <div class="article-content"></div>
</div>
</div>
</article>
@@ -228,10 +246,19 @@ EOT;
<a class="article-link" href="#"></a>
- <img class="article-image article-image-full" src="../img/tweet.png" alt="" />
+ <img class="article-image" src="../img/tweet.png" alt="" />
+
+ <div class="article-content"></div>
</div>
</div>
</article>
+
+EOT;
+ foreach ($this->news as $news) {
+ $this->createSmallContent($news);
+ }
+
+ echo <<<EOT
</main>
</body>
EOT;
@@ -239,6 +266,34 @@ EOT;
$this->generatePageFooter();
}
+ private function createSmallContent(News $news):void {
+ $title = $news->title();
+ $imgurl = $news->imgurl();
+ $content = $news->content();
+
+ echo <<<EOT
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+
+ <div class="article-background"></div>
+
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image" src="$imgurl" alt="" />
+
+ <div class="article-content">
+ <div class="overlay">
+ <h4 class="overlay-title">$title</h4>
+ <h4 class="overlay-description">$content</h4>
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+EOT;
+ }
+
protected function processReceivedData():void
{
parent::processReceivedData();
diff --git a/php/Login.php b/php/Login.php
index 5775bfd2baa5528be78628d0116173895263c86b..caca368c7d8de63e2f88048d87492d338b936f57 100644
--- a/php/Login.php
+++ b/php/Login.php
@@ -1,7 +1,7 @@
<?php declare(strict_types=1);
require_once 'Page.php';
-require_once 'constants.php';
+require_once 'util/constants.php';
class Login extends Page
{
diff --git a/php/NewsFetch.php b/php/NewsFetch.php
new file mode 100644
index 0000000000000000000000000000000000000000..fa21ad5d5925038a1901755fb090db581092511e
--- /dev/null
+++ b/php/NewsFetch.php
@@ -0,0 +1,79 @@
+<?php declare(strict_types=1);
+
+require_once 'Page.php';
+require_once 'util/constants.php';
+
+class NewsFetch extends Page
+{
+ private const TITLE = "title";
+ private const SEARCH_WORD = "searchWord";
+
+ private string $searchWord;
+
+ protected function __construct()
+ {
+ parent::__construct();
+
+ $this->searchWord = "";
+ }
+
+ public function __destruct()
+ {
+ parent::__destruct();
+ }
+
+ protected function getViewData():array
+ {
+ $data = array();
+
+ $likeSearchWord = "%" . $this->searchWord . "%";
+
+ $stmt = $this->database->prepare("SELECT n.title FROM news n WHERE n.title LIKE ? LIMIT 5");
+ $stmt->bind_param("s", $likeSearchWord);
+ $stmt->execute();
+ $resultSet = $stmt->get_result();
+
+ while($row = $resultSet->fetch_assoc()) {
+ $title = $row[self::TITLE];
+
+ $data[] = array(self::TITLE => $title);
+ }
+
+ return $data;
+ }
+
+ protected function generateView():void
+ {
+ $data = $this->getViewData();
+
+ header("Content-type: application/json");
+
+ $json = json_encode($data);
+ echo $json;
+ }
+
+ protected function processReceivedData():void
+ {
+ parent::processReceivedData();
+
+ if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+ if (isset($_GET[self::SEARCH_WORD])) {
+ $this->searchWord = $_GET[self::SEARCH_WORD];
+ }
+ }
+ }
+
+ public static function main():void
+ {
+ try {
+ $page = new NewsFetch();
+ $page->processReceivedData();
+ $page->generateView();
+ } catch (Exception $e) {
+ header("Content-type: application/json");
+ echo $e->getMessage();
+ }
+ }
+}
+
+NewsFetch::main();
\ No newline at end of file
diff --git a/php/util/Template.php b/php/util/Template.php
new file mode 100644
index 0000000000000000000000000000000000000000..35cbb441b22b25f6d33dfb158422da811ac3956f
--- /dev/null
+++ b/php/util/Template.php
@@ -0,0 +1,8 @@
+<?php declare(strict_types=1)
+
+class Template {
+
+ public static function contentSmallTweet(): {
+
+ }
+}
\ No newline at end of file
diff --git a/php/constants.php b/php/util/constants.php
similarity index 81%
rename from php/constants.php
rename to php/util/constants.php
index e4c033ef299aa60f69926f513cf5b6873e7c3d8c..b59fff2ad753789d4f6b3055b860f54b0db0f3ac 100644
--- a/php/constants.php
+++ b/php/util/constants.php
@@ -1,4 +1,4 @@
-<?php
+<?php declare(strict_types=1);
define('NEWS_FILE', 'news_file');
define('DEFAULT_NEWS_FILE', '../data/uploads/news_01.json');
define('EXPIRES', 'EXPIRES')
diff --git a/styles.css b/styles.css
index e32344b78d2a2061cbd12135e43db094cd2ab9bc..15c03eaaecf30549b2c12e763c72b10b2eac0298 100644
--- a/styles.css
+++ b/styles.css
@@ -113,6 +113,15 @@ a {
cursor: pointer;
}
+.search-results {
+ position: absolute;
+ background-color: #333333;
+ opacity: 0.9;
+ border: 0.1rem solid white;
+ border-radius: 0.1rem;
+ max-width: 20rem;
+}
+
.admin-button a {
display: block;
padding: 0.5rem;
@@ -217,14 +226,6 @@ main {
background-color: #39719e;
}
-.article-content-container > .article-content {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-
.article-content-container > .article-link {
position: absolute;
top: 0;
@@ -240,20 +241,6 @@ main {
object-fit: cover;
}
-.article-content-container > .article-half-image {
- position: absolute;
- width: 50%;
- height: 100%;
- object-fit: cover;
-}
-
-.article-content-container > .article-image-full {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: contain;
-}
-
.article-content-container > .article-content {
position: absolute;
top: 0;
@@ -262,15 +249,14 @@ main {
height: 100%;
}
-.article-content-container > .article-content-second-half {
+.article-half-image {
position: absolute;
- top: 0;
- left: 50%;
width: 50%;
- height: 100%;
+ height: 100%;
+ object-fit: cover;
}
-.article-content-container > .article-triangle {
+.article-triangle {
position: absolute;
top: 50%;
left: 50%;
@@ -403,6 +389,11 @@ main {
.nasa-launch {
background-color: #eeeeee;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 50%;
+ height: 100%;
}
.nasa-launch h4 {