Build a CMS Step 4d
Streamline the update functions
The website has the same capabilities, but a small javascript file has been added to the 'inc' folder to simply the update process. This addition allows you to rearrange blocks on a page pages on the menu
inc folder
CLICK HERE FOR DEMO
admin.php ▾
<?php
session_start();
include ("inc/functions.php");
$loggedin = false;
if (isset ($_SESSION['admin'])) {
if ($_SESSION ['admin'] === true) {
$loggedin = true;
}
}
include ('inc/admin-header.php');
if ($loggedin === true){
$adminpage = 'control-panel';
if (isset ($_GET['adminpage'])) {
$adminpage = filter_input(INPUT_GET, "adminpage", FILTER_SANITIZE_STRING) ;
}
include ("admin/" . $adminpage . ".php");
}
else {
echo "You must be logged in to access this page: <a href = 'index.php?page=loginp'>LOGIN</a>";
}
echo "<br><br><a class = 'adminbutton' href = 'index.php?page=logout'>Log Out</a>";
include ("inc/footer.php");
?>
index.php ▾
<?php
session_start();
$loggedin = false;
if (isset ($_SESSION['admin'])) {
if ($_SESSION['admin'] === true) {
$loggedin = true;
}
}
include ('inc/header.php');
//The default page is 'home'
$pageid = 'home';
//Use the $_GET statement to check the query string
if (isset ($_GET['page'])) {
$pageid = filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;
}
if (file_exists ('data/pages/' . $pageid . '.txt')) {
$pageblockstring = file_get_contents ('data/pages/' . $pageid . ".txt");
$pageblockarray = explode (',', $pageblockstring);
foreach ($pageblockarray as $item) {
$item = trim ($item);
$pos1 = strpos ($item, ":");
$blockid = substr ($item, $pos1 + 1);
if (file_exists ('data/blocks/' . $blockid . '.txt')){
$content = file_get_contents ('data/blocks/' . $blockid . '.txt');
echo $content;
if ($loggedin === true){
echo "<a class = 'edit-block' href = 'admin.php?adminpage=add-update-block&block=" . $blockid . "' >Edit Block</a>";
}
}
else if (file_exists ('data/blocks/' . $blockid . '.php')) {
include ('data/blocks/' . $blockid . '.php');
}
}
}
if ($loggedin === true){
if ($pageid !== 'login' && $pageid !== 'logout') {
echo "<a class = 'adminbutton' href = 'admin.php?adminpage=update-page&page=" . $pageid . "' >Edit Page</a>";
}
echo "<a class = 'adminbutton' href = 'admin.php?page=control-panel'</a>Control Panel</a>";
echo "<a class = 'adminbutton' href = 'index.php?page=logout'>Log Out</a>";
}
else if ($pageid !== 'login'){
echo "<a class = 'adminbutton' href = 'index.php?page=login'>Login</a>";
}
include ("inc/footer.php");
?>
Pages
about.txt ▾
PAGE-BLOCK:about contact.txt ▾
PAGE-BLOCK:contact,PAGE-BLOCK:holiday-hours home.txt ▾
PAGE-BLOCK:home,PAGE-BLOCK:holiday-hours login.txt ▾
PAGE-BLOCK:login logout.txt ▾
PAGE-BLOCK:logoutadmin
add-page.php ▾
<?php
$pageaddedflag = false;
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['title'])) {
$title = $_POST['title'];
//Check if this is a new page
$pageid = "";
if ($pageid === ""){
$pageid = createRecordKey ('pages', $title);
if ($pageid !== "") {
file_put_contents ('data/pages/' . $pageid . ".txt", "");
$pageaddedflag = true;
}
}
}
}
?>
<h3>Add Page</h3>
<div class = 'content-column'>
<?php
if ($pageaddedflag === true) {
echo "<h3>Page added: " . $pageid . "</h3>";
}
else {
?>
<form method = 'post' action = 'admin.php?adminpage=add-page'>
<label for= 'title'>Page Title</label><br>
<textarea id = 'title' name = 'title' rows = '1' ></textarea><br><br>
<input class = 'submitbutton' type = 'submit' name = 'submit' value = 'Submit' />
</form>
<?php
}
?>
<br><br>
</div><div class = 'sidebar-column'>
<a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=update-page&page=<? echo pageid; ?>'>Edit Page</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=remove-page&page=<?php echo $pageid; ?>'>Remove Page</a>
<a class = 'adminbutton' href = 'index.php'>View Website</a>
</div>
add-update-block.php ▾
<?php
$blockid = "";
if (isset ($_GET['block'])) {
if ($_GET['block'] !== ""){
$blockid = filter_input(INPUT_GET, "block", FILTER_SANITIZE_STRING) ;
$blockid = trim ($blockid);
}
}
if (file_exists ('data/blocks/' . $blockid . '.txt') || $blockid === "") {
$content = "";
if (file_exists ('data/blocks/' . $blockid . '.txt')) {
$content = file_get_contents ('data/blocks/' . $blockid . '.txt');
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['content'])) {
$content = $_POST['content'];
}
if (isset ($_POST['title'])) {
$title = $_POST['title'];
}
//Check if this is a new block
if ($blockid === ""){
$blockid = createRecordKey ('blocks', $title);
}
if ($blockid !== "") {
file_put_contents ('data/blocks/' . $blockid . ".txt", $content);
}
}
?>
<h3>Update block: <?php echo $blockid; ?></h3>
<div class = 'content-column'>
<form method = 'post' action = 'admin.php?adminpage=add-update-block&block=<?php echo $blockid; ?>'>
<?php
if ($blockid === ""){
echo "<label for= 'title'>Block Title</label><br>";
echo "<textarea id = 'title' name = 'title' rows = '1' ></textarea><br><br>";
}
?>
<label for='text'>Block Content</label><br>
<textarea name = 'content' rows = '10' ><?php echo $content; ?> </textarea>
<br><br>
<input class = 'submitbutton' type = 'submit' name = 'submit' value = 'Submit' />
</form>
<br><br>
</div><div class = 'sidebar-column'>
<a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=remove-block&block=<?php echo $blockid; ?>'>Remove block</a>
<a class = 'adminbutton' href = 'index.php'>View Website</a>
</div>
<?php
}
control-panel.php ▾
<?php
$username = file_get_contents ('data/username.txt');
$password = file_get_contents ('data/password.txt');
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['submit-settings'])) {
if (isset ($_POST['title'])) {
$settingsrecord['title'] = $_POST['title'];
}
if (isset ($_POST['description'])) {
$settingsrecod['description'] = $_POST['description'];
}
if (isset ($_POST['username']) ){
$settingsrecord['username'] = $_POST['username'];
}
if (isset ($_POST['password'])) {
$settingsrecord['password'] = $_POST['password'];
}
writeDatabaseRecord('settings', $settingsrecord,"" , 'data/settings.txt');
}
else if (isset ($_POST['checkboxarray'])) {
$menuarray = $_POST['checkboxarray'];
$menuarray = array_filter ($menuarray);
$string = implode (",", $menuarray);
file_put_contents ('data/menu.txt', $string);
}
else if (isset ($_POST['submit-css'])) {
if (isset ($_POST['newcssstring'])) {
$newcssstring = trim ($_POST['newcssstring']);
//Save current style in versions folder
$versionfile = "themes/css-versions/" . date ("Y-m-d-h-ia") . ".css";
file_put_contents ($versionfile, $cssstring);
//copy this version to current css file
$filename = "themes/style.css";
file_put_contents ($filename, $newcssstring);
}
}
}
?>
<h2>Control Panel</h2>
<div class = 'left'>
<div class = 'manage-heading'>Pages</div>
<div class = 'content-column'>
<?php
$array1 = scandir ("data/pages");
foreach ($array1 as $item) {
if ($item !== "." && $item !== "..") {
$pageid = str_replace('.txt', '', $item);
$pageid = trim ($pageid);
echo "<a href = 'admin.php?adminpage=update-page&page=" . $pageid . "'>" . $pageid . "</a><br>";
}
}
?>
</div><div class = 'sidebar-column'>
<a class = 'adminbutton' href = 'admin.php?adminpage=add-page'>New Page</a>
</div>
<div class = 'manage-heading'>Page Blocks</div>
<div class = 'content-column'>
<?php
$array1 = scandir ("data/blocks");
foreach ($array1 as $item) {
if ($item !== "." && $item !== "..") {
$item = trim ($item);
$pos1 = strpos ($item, '.');
$blockid = substr ($item, 0, $pos1);
$extension = substr ($item, $pos1);
if ($extension === '.php') {
echo $blockid . "<br>";
}
else if ($extension === '.txt'){
echo "<a href = 'admin.php?adminpage=add-update-block&block=" . $blockid . "'>" . $blockid . "</a><br>";
}
}
}
?>
</div><div class = 'sidebar-column'>
<a class = 'adminbutton' href = 'admin.php?adminpage=add-update-block'>New BLock</a>
</div>
<div class = 'manage-heading'>Menu</div>
<div class = 'third-column'>
<h3>Available Pages</h3>
<?php
$array1 = scandir ("data/pages");
foreach ($array1 as $item) {
if ($item !== "." && $item !== "..") {
$pageid = str_replace('.txt', '', $item);
$pageid = trim ($pageid);
$pagetitle = ucwords (str_replace ('-', " ", $pageid));
if (in_array ($pageid, $menuarray)) {
echo "<div id = '" . $pageid . "' class = 'resource-blocks highlighted' onclick = 'selectResource(id)'>" . $pageid . "</div><br>";
}
else {
echo "<div id = '" . $pageid . "' class = 'resource-blocks ' onclick = 'selectResource(id)'>" . $pageid . "</div><br>";
}
}
}
?>
</div><div class = 'third-column'>
<h3>Current Menu </h3>
<form method = 'post' action = 'admin.php?adminpage=control-panel'>
<?php
echo "<div id = 'slots'>";
//add extra slot at beginning
echo "<div id = '0' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxrray[]' value = '' checked />" ;
//fill in slots with menuitems
$limit = 100;
$id = 1;
$length = count ($menuarray);
foreach ($menuarray as $x => $item){
$item = trim($item);
if ($id < $limit) {
echo "<div id = '". $id . "' class = 'jssort1' onclick = 'clickOnList(id)'>" . $item . "</div>";
//Create a checkbox for this slot
echo "<input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '" . $item . "' checked />" ;
$id++;
//add empty slot after each filled slot
echo "<div id = '" . $id . "' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />";
$id++;
}
}
echo "</div>";
?>
<br><input class = 'submitbutton2' type = 'submit' name = 'submit' value = 'Update' />
</form>
</div><div class = 'third-column'>
<div class = 'instructions'>
<h3>Instructions </h3>
<b>To Add a Page: </b> - click available page(s), then click vertical bar to insert
<br><br><b>To Rearrange </b>- click item(s) to select, then click vertical bar to insert
<br><br><button class = 'slot' onclick = 'chooseToDelete()' >Click here to delete selected page items (blue)</button>
</div>
</div>
<div style = 'display: none;'>
Selected Resources: <div id = 'saved-resources'></div>
</div>
<div class = 'manage-heading'>Username and Password</div>
<form method = 'post' action = 'admin.php?adminpage=control-panel'>
<div class = 'content-column'>
<label for= 'username-id'>Username</label><br>
<input id = 'username-id' type = 'text' name = 'username' value = '<?php echo $username;?>'/>
<br><br><label for= 'password-id'>Password - Letters, Numbers and/or special characters: '-$!?\#*' </label><br>
<input id = 'password-id' type = 'text' name = 'password' value = '<?php echo $password;?>'/>
<br><input class = 'submitbutton' type = 'submit' name = 'submit-settings' value = 'Submit' />
</div>
</form>
</div>
remove-block.php ▾
<?php
echo "<div class = 'content-column'>";
$blockid = "";
if (isset ($_GET["block"])){
$blockid = filter_input(INPUT_GET, "block", FILTER_SANITIZE_STRING) ;
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST ['removeflag'])) {
$removeflag = trim($_POST['removeflag']);
if ($removeflag === "REMOVE") {
if (file_exists ("data/blocks/" . $blockid . ".txt")) {
$oldfilename = 'data/blocks/' . $blockid . '.txt';
$newfilename = 'data/trash/' . $blockid . ".txt";
rename ($oldfilename, $newfilename);
//Remove this block from all pages
$array1 = scandir ('data/pages');
foreach ($array1 as $item1) {
if ($item1 !== "." & $item1 !== "..") {
$item1 = trim ($item1);
$pageid = str_replace ('.txt', '', $item1);
$pageblockstring = file_get_contents ('data/pages/' . $pageid . '.txt');
echo $pageblockstring;
$pageblockarray = explode (',' , $pageblockstring);
foreach ($pageblockarray as $id => $item2) {
$item2 = trim ($item2);
if ($item2 === 'TEXT-BLOCK:' . $blockid) {
unset ($pageblockarray [$id]);
}
}
array_values ($pageblockarray);
$pageblockstring = implode (',', $pageblockarray);
file_put_contents ('data/pages/' . $pageid . '.txt', $pageblockstring);
}
}
}
}
}
}
if (file_exists ("data/blocks/" . $blockid . ".txt") ) {
echo "<h2>Remove block: " . $blockid . "</h2>";
?>
<form method = 'post' action = 'admin.php?adminpage=remove-block&block=<?php echo $blockid ;?>'>
<h3>Are you sure you want to move <?php echo $blockid ; ?> to the Trash Bin?</h3><br>
NO: <input type = 'radio' name = 'removeflag' value = '' checked />
YES <input type = 'radio' name = 'removeflag' value = 'REMOVE' />
<br><br><input class = 'submitbutton' type = 'submit' name = 'submit' value='Remove'/>
</form>
<?php
}
else {
echo "This block has been removed";
}
echo "</div><div class = 'sidebar-column'>";
echo "<br><a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>";
echo "</div>";
?>
remove-page.php ▾
<?php
echo "<div class = 'content-column'>";
$pageid = "";
if (isset ($_GET["page"])){
$pageid = filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset($_POST ['removeflag'])) {
$removeflag = trim($_POST['removeflag']);
if ($removeflag === "REMOVE") {
if (file_exists ("data/pages/" . $pageid . ".txt")) {
$oldfilename = 'data/pages/' . $pageid . '.txt';
$newfilename = 'data/trash/' . $pageid . ".txt";
rename ($oldfilename, $newfilename);
foreach ($menuarray as $id => $item) {
if (trim ($item) === $pageid) {
unset ($menuarray[$id]);
$string = implode (",", $menuarray);
file_put_contents ('data/menu.txt', $string);
}
}
}
}
}
}
if (file_exists ("data/pages/" . $pageid . ".txt") ) {
echo "<h2>Remove page: " . $pageid . "</h2>";
?>
<form method = 'post' action = 'admin.php?adminpage=remove-page&page=<?php echo $pageid ;?>'>
<h3>Are you sure you want to move <?php echo $pageid ; ?> to the Trash Bin?</h3><br>
NO: <input type = 'radio' name = 'removeflag' value = '' checked />
YES <input type = 'radio' name = 'removeflag' value = 'REMOVE' />
<br><br><input class = 'submitbutton' type = 'submit' name = 'submit' value='Remove'/>
</form>
<?php
}
else {
echo "This page has been removed";
}
echo "</div><div class = 'sidebar-column'>";
echo "<br><a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>";
echo "</div>";
?>
update-page.php ▾
<?php
$pageblockarray = array();
$pageid = "";
if (isset ($_GET['page'])) {
if ($_GET['page'] !== ""){
$pageid = filter_input(INPUT_GET, "page", FILTER_SANITIZE_STRING) ;
$pageid = trim ($pageid);
if (file_exists ('data/pages/' . $pageid . '.txt')) {
$pageblockstring = file_get_contents ('data/pages/' . $pageid . '.txt');
$pageblockarray = explode (',', $pageblockstring);
}
}
}
if ($_SERVER ["REQUEST_METHOD"] == "POST" ) {
if (isset ($_POST['checkboxarray'])) {
$pageblockarray = $_POST['checkboxarray'];
$pageblockarray = array_filter ($pageblockarray);
$pageblockstring = implode (",", $pageblockarray);
}
if (isset ($_POST['title'])) {
$title = $_POST['title'];
}
//Check if this is a new page
if ($pageid === ""){
$pageid = createRecordKey ('pages', $title);
}
if ($pageid !== "") {
file_put_contents ('data/pages/' . $pageid . '.txt', $pageblockstring);
}
}
echo "<h1>Edit Page </h1>";
if ($pageid === "") {
?>
<form method = 'post' action = 'admin.php?adminpage=update-page'>
<label for= 'title'>Page Title</label><br> <textarea id = 'title' name = 'title' rows = '1' ><?php echo $title; ?> </textarea>
<br><br>
<br><input class = 'submitbutton2' type = 'submit' name = 'submit' value = 'Update' />
</form>
<?php
}
if ($pageid !== "" && file_exists ('data/pages/' . $pageid . ".txt")) {
?>
<h2>Page: <?php echo ucwords (str_replace ('-', ' ', $pageid)); ?></h2>
<div class = 'left'>
<div class = 'third-column'>
<h3>Available Content</h3>
<?php
$array1 = scandir ("data/blocks");
foreach ($array1 as $item) {
if ($item !== "." && $item !== "..") {
$item = trim ($item);
$blockid = str_replace ('.txt', '', $item);
$blockid = str_replace ('.php', '', $blockid);
if (in_array ($blockid, $pageblockarray)) {
echo "<div id = '" . $blockid . "' class = 'resource-blocks highlighted' onclick = 'selectResource(id)'>PAGE-BLOCK:" . $blockid . "</div><br>";
}
else {
echo "<div id = '" . $blockid . "' class = 'resource-blocks ' onclick = 'selectResource(id)'>PAGE-BLOCK:" . $blockid . "</div><br>";
}
}
}
?>
</div><div class = 'third-column'>
<h3>Current Page Content</h3>
<form method = 'post' action = 'admin.php?adminpage=update-page&page=<?php echo $pageid; ?>'>
<?php
echo "<div id = 'slots'>";
//add extra slot at beginning
echo "<div id = '0' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />" ;
//fill in slots with pageitems
$limit = 100;
$id = 1;
$length = count ($pageblockarray);
foreach ($pageblockarray as $x => $item){
$item = trim($item);
if ($id < $limit) {
echo "<div id = '". $id . "' class = 'jssort1' onclick = 'clickOnList(id)'>" . $item . "</div>";
//Create a checkbox for this slot
echo "<input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '" . $item . "' checked />" ;
$id++;
//add empty slot after each filled slot
echo "<div id = '" . $id . "' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div>";
echo "<input class = 'jssort4 hidden' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />";
echo "<br>";
$id++;
}
}
echo "</div>";
?>
<br><input class = 'submitbutton2' type = 'submit' name = 'submit' value = 'Update' />
</form>
</div><div class = 'third-column'>
<div class = 'instructions'>
<h3>Instructions: </h3>
<b>To Add Content: </b> - click available item(s), then click vertical bar to insert
<br><br><b>To Rearrange Items </b>- click item(s) to select, then click vertical bar to insert
<br><br>
<button class = 'slot' onclick = 'chooseToDelete()' >Click here to selected page items </button><br><br>
</div>
<div style = 'display: none;'>
Selected Resources: <div id = 'saved-resources'></div>
</div>
<a class = 'adminbutton' href = 'admin.php?adminpage=control-panel'>Control Panel</a>
<a class = 'adminbutton' href = 'index.php?page=<?php echo $pageid; ?>'>View Page</a>
<a class = 'adminbutton' href = 'admin.php?adminpage=remove-page&page=<?php echo $pageid; ?>'>Remove Page</a>
</div>
</div>
<?php
}?>
Inc
admin-header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 4a</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
<?php
if ($loggedin === true) {
echo "<meta name = 'robots' content = 'nofollow, noindex'> ";
}
?>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-4a'>← Return to CMS Step 4a</a><br>
<a href = 'index.php' ><h1>The Nip Shoppe</h1></a>
<?php
$string = file_get_contents ('data/menu.txt');
$menuarray = explode (",", $string);
foreach ($menuarray as $item) {
$item = trim ($item);
echo "<a class = 'menuitem' href = 'index.php?page=" . $item . "'>" . ucwords (str_replace ('-', " ", $item)) . "</a>";
}
?>
<main class = 'admin'>
footer.php ▾
<footer>
<br><br>
<br><br><br>Copyright © The Nip Shoppe<br>
</footer>
<script src= 'inc/script.js'></script>
</body>
</html>
functions.php ▾
<?php
function createRecordKey ($folder, $newname) {
$newkey = "";
if ($newname === '') {
echo "<div class = 'error'>Missing Name</div>";
}
else {
if (strlen ($newname) > 50) {
echo "<div class = 'error'>Title must be less than 50 characters</div>";
}
else {
$newkey = str_replace(" ", "-", $newname);
$newkey = strtolower ($newkey);
$newkey = html_entity_decode($newkey, ENT_QUOTES);
$newkey = preg_replace('/[^A-Za-z0-9-]/', '', $newkey);
$newkey = preg_replace('/-+/', '-', $newkey);
if ($newkey === "") {
echo "<div class = 'error'>Invalid Record Name</div>";
}
else {
// CHECK THAT THIS RECORD DOESN'T ALREADY EXIST
$filename = "data/" . $folder . "/" . $newkey . ".txt";
if (file_exists ($filename)) {
echo "<div class = 'error'>'" . $folder . "' record with this name already exists</div>";
$newkey = "";
}
}
}
}
return $newkey;
}
?> header.php ▾
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CMS-Step 4d</title>
<link rel= 'stylesheet' type='text/css' href= 'inc/style.css'>
<?php
if ($loggedin === true) {
echo "<meta name = 'robots' content = 'nofollow, noindex'> ";
}
?>
</head>
<body>
<header>
<a class = 'return' href = '../../build-a-cms-step-4d'>← Return to CMS Step 4d</a><br>
<a href = 'index.php' ><h1>The Nip Shoppe</h1></a>
<?php
$string = file_get_contents ('data/menu.txt');
$menuarray = explode (",", $string);
foreach ($menuarray as $item) {
$item = trim ($item);
echo "<a class = 'menuitem' href = 'index.php?page=" . $item . "'>" . ucwords (str_replace ('-', " ", $item)) . "</a>";
}
?>
</header>
<main>
script.js ▾
function selectResource(id) {
// Called when a resource in Column 1 is clicked
//Save selected resource
var newvalue = document.getElementById(id).innerHTML ;
var oldvalue = document.getElementById('saved-resources').innerHTML;
//alert ('new: ' + newvalue);
//Item has already been selected - need to remove it from saved resources
if (document.getElementById(id).style.backgroundColor === 'pink') {
document.getElementById(id).style.backgroundColor = 'white';
newvalue = oldvalue.replace (newvalue, '');
}
else {
newvalue = oldvalue + ',' + newvalue;
document.getElementById(id).style.backgroundColor = 'pink';
}
document.getElementById('saved-resources').innerHTML = newvalue;
}
function clickOnList(id) {
//Column 1 - Resources
var resourcearray = document.getElementsByClassName ('resource-blocks');
//Column2 All slots, filled and empty
var array1 = document.getElementsByClassName('jssort1');
//Column 2 - Innut form checkboxes
var array4 = document.getElementsByClassName('jssort4');
//Reset background in resources
for (i = 0; i < resourcearray.length ; i++) {
resourcearray[i].style.backgroundColor = '#fff';
}
//Reset background and color in list
var limit = array1.length;
for (var i = 0; i < limit ; i++) {
if (array1[i].innerHTML.includes("DROPDOWN") || array1[i].innerHTML.includes("COLUMN")) {
array1[i].style.color = 'red';
}
}
//NON-EMPTY SLOT - item is saved and can be moved or deleted
if (array1[id].innerHTML !== "" ) {
//Item to be moved or deleted
var newvalue = array1[id].innerHTML;
var oldvalue = document.getElementById('saved-resources').innerHTML;
if (document.getElementById(id).style.backgroundColor === 'blue') {
document.getElementById(id).style.backgroundColor = '#eee';
newvalue = oldvalue.replace (newvalue, '');
}
else {
newvalue = oldvalue + ',' + newvalue;
document.getElementById(id).style.backgroundColor = 'blue';
}
document.getElementById('saved-resources').innerHTML = newvalue;
}
else {
//EMPTY SLOT - any previously saved resources and list items will be moved to slot
//Retrieve list of new resources
var savedResources = document.getElementById('saved-resources').innerHTML;
var savedResourcesArray = savedResources.split(',');
var savedlength = savedResourcesArray.length;
//delete items with blue background
for ( i = 0; i < limit ; i++) {
if (array1[i].style.backgroundColor === 'blue') {
//remove contents of slot
array1[i].innerHTML = "";
array4[i].value = "";
}
}
//create array of non-empty slots
var updatedarray = new Array();
for (i = 0; i < limit ; i++) {
if (i == id) {
for (j = 0; j < savedlength; j++){
//insert saved resources into updated array
updatedarray.push (savedResourcesArray[j]);
}
}
else if (array1[i] !== '') {
updatedarray.push (array1[i].innerHTML);
}
}
//show updated resource list on page
var newlimit = updatedarray.length;
document.getElementById('slots').innerHTML = "<div id = '0' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div><input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />" ;
var j = 1;
for (i = 0; i < newlimit ; i++) {
if (updatedarray[i] !== "" && updatedarray[i] !== ','){
//Filled slot
//Check if this is a column or a dropdown
var c = updatedarray[i].search("COLUMN");
var n = updatedarray[i].search("DROPDOWN");
//alert ("C: " + c + " N: " + n);
if ( (c > -1 || n > -1) && i > 1) {
document.getElementById('slots').innerHTML += '<br>';
}
document.getElementById('slots').innerHTML +=
"<div id = '" + j + "' class = 'jssort1' onclick = 'clickOnList(id)'>" + updatedarray[i] + "</div><input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '" + updatedarray[i] + "' checked />";
//Check if item is to be colored red
if (n === -1 && c === -1) {
//no action
}
else {
document.getElementById (j).style.color = 'red';
}
j++;
//empty slot
document.getElementById('slots').innerHTML +=
"<div id = '" + j + "' class = 'jssort1 pink' onclick = 'clickOnList(id)'></div><input class = 'jssort4 hidden ' type = 'checkbox' name = 'checkboxarray[]' value = '' checked />" ;
j++;
if ( (c > -1 || n > -1) && i < newlimit - 1) {
document.getElementById('slots').innerHTML += '<br>';
}
}
}
//Return saved resources list to empty
document.getElementById('saved-resources').innerHTML = "";
}
}
function chooseToDelete() {
//Array1 - all itmes inlist, empty and filled
var array1 = document.getElementsByClassName('jssort1');
//array4 - Input form checkboxes
var array4 = document.getElementsByClassName('jssort4');
//Remove item with blue background
var limit = array1.length;
for (var i = 0; i < limit ; i++) {
if (array1[i].style.backgroundColor === 'blue') {
//remove contents of slot
array1[i].innerHTML = "";
array4[i].value = "";
array1[i].style.backgroundColor = '#eac0c7';
}
}
//remove item from saved resources.
document.getElementById('saved-resources').innerHTML = '';
}
style.css ▾
@font-face {
font-family: Chelsea_Market;
src: url('../data/fonts/ChelseaMarket-Regular.ttf');
}
@font-face {
font-family:Open_Sans;
src: url('../fonts/data/OpenSans-Regular.ttf');
}
body {
font-family: "Open_Sans", sans-serif;
text-align: center;
color: black;
margin: 0 auto;
text-align: center;
width: 1100px;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
h1 {
font-family: 'Chelsea_Market', cursive;
margin: 10px auto;
}
h2 {
text-align: center;
color: #3e4871;
}
h3 {
font-size: 16px;
color: #0d4a4d;
}
b {
color: navy;
}
a {
text-decoration: none;
color: purple;
}
a:hover {
color: purple;
}
img {
max-width: 100%;
}
label {
font-size: 14px;
font-weight: bold;
}
.error {
color: red;
padding: 20px;
font-size: 18px;
}
.return {
font-size: 12px;
}
textarea {
width: 100%;
max-width: 100%;
}
/** HEADER */
.header {
text-align: center;
display: block;
margin: auto;
padding: 20px 0;
}
a.title {
color: black;
}
a.menuitem {
display: inline-block;
margin: 0 10px;
padding: 3px 7px;
text-decoration: underline;
font-size: 14px;
}
/** MAIN */
main {
text-align: center;
display: block;
margin: auto;
margin-top: 30px;
width: 1000px;
max-width: 100%;
}
/** COLUMNS */
.content-column, .sidebar-column , .half-column-1,.half-column-2, .manage-column, .third-column {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
vertical-align: top;
}
.content-column {
width: 65%;
text-align: left;
}
.sidebar-column {
width: 35%;
text-align: center;
}
.third-column {
width: 33%;
text-align: left;
}
.half-column-1, .half-column-2 {
width: 50%;
}
.full-column {
text-align: left;
width: 100%;
padding: 20px;
}
/** Admin */
main.admin {
width: 1300px;
}
.manage-heading {
background-color: #3e4871;
padding: 5px;
margin: 20px auto 10px auto;
color: white;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}
.manage-sidebar-column, .instructions {
text-align: left;
display: inline-block;
vertical-align: top;
width: 35%;
max-width: 100%;
box-sizing: border-box;
margin-top: 30px;
font-size: 14px;
}
.instructions {
width: 100%;
margin: 20px auto;
padding: 12px 15px;
border: 1px solid #bbb;
background-color: #eee;
}
.edit-block {
border: 1px solid #bbb;
width: 120px;
max-width: 100px;
padding: 5px 7px;
margin: 10px auto;
}
a.adminbutton, input.submitbutton, input.submitbutton2 {
background-color: #3e4871;
color: white;
padding: 5px 7px;
border: 1px solid black;
margin: 10px auto;
width: 140px;
display: block;
}
input.submitbutton, input.submitbutton2 {
background-color: purple;
border: 1px solid black;
border-radius: 3px;
margin-bottom: 20px;
width: 100px;
}
input.submitbutton2 {
display: inline-block;
}
input.submitbutton{
background-color: purple;
border: 1px solid black;
border-radius: 3px;
margin-bottom: 20px;
width: 100px;
}
/** Menu building */
.resource-blocks {
border: 1px solid #bbb;
cursor: pointer;
padding: 5px;
word-break: break-all;
font-size: 14px;
margin: 3px auto;
display: inline-block;
vertical-align: top;
}
button.slot {
color: white;
margin: 5px;
padding: 7px 12px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
background-color: blue;
display: inline-block;
border-radius: 2px;
font-style: normal;
width: 160px;
}
.jssort1 {
display: inline-block;
padding: 5px;
border: 1px solid #bbb;
margin: 3px 5px;
max-width: 100%;
font-size: .9em;
cursor: pointer;
background-color: #eee;
min-height: 40px;
vertical-align: top;
}
.jssort1.pink {
background-color: #eac0c7;
}
.hidden {
display: none;
}
.highlighted {
border: 2px solid blue;
}
/** FOOTER */
footer {
font-size: .8em;
margin: 40px auto;
}
/**BREAKPOINTS */
@media only screen and (max-width: 600px) {
.content-column, .sidebar-column {
width: 100%;
text-align: center;
}
}