New Default Web Site Information: Difference between revisions

Line 25: Line 25:
=== Adding new pages to the new site menus ===
=== Adding new pages to the new site menus ===
Unlike the old site where you had the edit the menu on every existing page in order to add a new one, the new site has the menus defined once.
Unlike the old site where you had the edit the menu on every existing page in order to add a new one, the new site has the menus defined once.
You will find them (one for large screens, one for mobile) in the /js/setpagedata.js file defined as two long strings.
You will find it in the /js/menu.js file defined as a single object.
Here is the full menu...
Here is the full menu...
  <nowiki>
  <nowiki>
let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
menuSrc = [
'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
{title: "Now",          menu: "b",    url: "index.htm"},
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Today",        menu: "b",    url: "today.htm"},
'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
{title: "Yesterday",    menu: "b",    url: "yesterday.htm"},
'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
{title: "Gauges",      menu: "b",    url: "gauges.htm"},
'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
{title: "Records",      menu: "b",    submenu: true,      items: [
'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
{title: "This Month",        menu: "b",    url: "thismonth.htm"},
'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
{title: "This Year",        menu: "b",    url: "thisyear.htm"},
'<div class="w3-dropdown-hover">' +
{title: "All Time",          menu: "b",    url: "record.htm"},
'<button class="w3-btn w3-theme-hvr  at-slim w3-hide-medium w3-hide-small">Charts</button>' +
{title: "Monthly",          menu: "b",    url: "monthlyrecord.htm"}
'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
]},
'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
{title: "Charts",    menu: "b",    submenu: true,    items: [
'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
{title: "Trends",            menu: "b",    url: "trends.htm"},
'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
{title: "Select-a-graph",    menu: "b",    url: "selectachart.htm"},
'</div>' +
{title: "Historic",          menu: "b",    url: "historic.htm"}
'</div>' +
]},
'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
{title: "Reports",  menu: "b",    url: "noaareport.htm"},
'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
{title: "Forum",    menu: "b",    url: "#",    forum: true,    new_window: true},
'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">&#9776;</button>';</nowiki>
{title: "Webcam",    menu: "b",    url: "#",    webcam: true}
];
</nowiki>
You can see each page is defined in this format...
You can see each page is defined in this format...
  <nowiki>
  <nowiki>
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Now",          menu: "b",    url: "index.htm"},</nowiki>
</nowiki>
Where:
You can just add to this string variable, and the new menu item will then appear on every page. So to add a NOAA page add this...
title = the text that appears on the menu
menu = b - appears on both the full and mobile menus, w - show on full (wide) menu only, n - show on mobile (narrow) menu only
 
You can just add new items to this object, and the new menu item will then appear on every page. So to add a Custom page add this...
  <nowiki>
  <nowiki>
'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
{title: "Custom",          menu: "b",    url: "custom.htm"},</nowiki>
</nowiki>
So it becomes...
So it becomes...
  <nowiki>
  <nowiki>
let menu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Now</a>' +
{title: "Now",          menu: "b",    url: "index.htm"},
'<a href="gauges.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Gauges</a>' +
{title: "Today",        menu: "b",    url: "today.htm"},
'<a href="today.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Today</a>' +
{title: "Custom",      menu: "b",    url: "custom.htm"},
'<a href="yesterday.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Yesterday</a>' +
{title: "Yesterday",    menu: "b",    url: "yesterday.htm"},
'<a href="thismonth.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Month</a>' +
{title: "Gauges",      menu: "b",    url: "gauges.htm"},
'<a href="thisyear.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">This Year</a>' +
{title: "Records",      menu: "b",    submenu: true,      items: [
'<a href="noaa.php" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">NOAA Reports</a>' +
{title: "This Month",        menu: "b",    url: "thismonth.htm"},
'<a href="record.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Records</a>' +
{title: "This Year",        menu: "b",    url: "thisyear.htm"},
'<a href="monthlyrecord.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium">Monthly Records</a>' +
{title: "All Time",          menu: "b",    url: "record.htm"},
'<div class="w3-dropdown-hover">' +
{title: "Monthly",          menu: "b",    url: "monthlyrecord.htm"}
'<button class="w3-btn w3-theme-hvr  at-slim w3-hide-medium w3-hide-small">Charts</button>' +
]},
'<div class="w3-dropdown-content w3-bar-block w3-theme">' +
{title: "Charts",    menu: "b",    submenu: true,    items: [
'<a href="trends.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Trends</a>' +
{title: "Trends",            menu: "b",    url: "trends.htm"},
'<a href="selectachart.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Select-a-graph</a>' +
{title: "Select-a-graph",    menu: "b",    url: "selectachart.htm"},
'<a href="historic.htm" class="w3-bar-item w3-btn w3-theme-d5-hvr at-slim">Historic</a>' +
{title: "Historic",          menu: "b",    url: "historic.htm"}
'</div>' +
]},
'</div>' +
{title: "Reports",  menu: "b",    url: "noaareport.htm"},
'<a href="https://cumulus.hosiene.co.uk/index.php" data-cmx-forumlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide" target="_blank">Forum</a>' +
{title: "Forum",    menu: "b",    url: "#",    forum: true,    new_window: true},
'<a href="#" data-cmx-webcamlink class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium w3-hide webcamlink">Webcam</a>' +
{title: "Webcam",    menu: "b",    url: "#",    webcam: true}
'<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">&#9776;</button>';
</nowiki>
</nowiki>
Where I have inserted the new NOAA page between "This Year" and "Records"
Where I have inserted the new Custom page between "Now" and "Yesterday"
 
Submenus can also be defined, they use the property "submenu: true", and then have an array of submenu items (defined as above) added to the "items: []" array.
 
You will also find an example extended menu called "menuSample.js" in the webfiles/js folder.
 
Note: the forum and webcam menu items only have special properties "forum" and "webcam", these are used by the main page code to determine if these menu items should be displayed or not.


You will need to do a similar thing for the mobile menu, which begins...
<nowiki>
let mobileMenu = '<a href="index.htm" class="w3-bar-item w3-btn w3-theme-hvr at-slim">Now</a>' +
</nowiki>
Note that because the mobile menu is separate from the full screen menu, you can make the menu entries a little more descriptive if you wish.
=== Making changes to the pages===
=== Making changes to the pages===
Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard.  There are just a few classes that are really useful.
Although looking at the new template pages makes the idea of editing them daunting, it really is not that hard.  There are just a few classes that are really useful.