holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use insertAdjacentHTML instead of createElement (#21)

Browse Source 
* web menu

* weather-screen forecast

* search engine selection, change some to beforeend
This commit is contained in:
Gerome Matilla 2020-06-10 15:35:27 +08:00 committed by GitHub
parent 84727755db
commit 7c8ece1d5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/search-engine-settings.js
View File

@ -44,9 +44,14 @@ class SearchEngineSettings {
const seValue = key;
const seData = this._searchEngines[key];
const seOption = document.createElement('option');
seOption.value = seValue;
seOption.innerText = seData.name;
this._selectSearchEngine.appendChild(seOption);
// Generate search engine suggestions
this._selectSearchEngine.insertAdjacentHTML(
'beforeend',
`
<option value='${seValue}'>${seData.name}</option>
`
)
})
// Call to update query string and placeholder

74
js/weather-screen.js
View File

@ -80,62 +80,24 @@ class WeatherScreen {
_createForecastBody = (fIcon, forecastTemp, foreDescription, fHour, fDate) => {
// Main Div
const forecastDay = document.createElement('div');
forecastDay.className = 'weatherForecastDay';
// Icon Container Div
const forecastIconContainer = document.createElement('div');
forecastIconContainer.className = 'weatherForecastDayIconContainer';
// Icon Div
const forecastIcon = document.createElement('div');
forecastIcon.className = 'weatherForecastDayIcon';
forecastIcon.style.background = `url('assets/weather-icons/${fIcon}')`;
forecastIcon.style.backgroundSize = 'cover';
// Details Div
const forecastDetails = document.createElement('div');
forecastDetails.className = 'weatherForecastDayDetails';
const forecastTemperature = document.createElement('div');
forecastTemperature.className = 'weatherForecastDayDetailsTemperature';
forecastTemperature.innerHTML = forecastTemp;
const forecastDescription = document.createElement('div');
forecastDescription.className = 'weatherForecastDayDetailsDescription';
forecastDescription.innerHTML = foreDescription;
// Append details to div container
forecastDetails.appendChild(forecastTemperature);
forecastDetails.appendChild(forecastDescription);
// Date Div
const forecastDayDate = document.createElement('div');
forecastDayDate.className = 'weatherForecastDayDate';
const forecastHour = document.createElement('div');
forecastHour.className = 'weatherForecastDayDateHour';
forecastHour.innerHTML = fHour;
const forecastDate = document.createElement('div');
forecastDate.className = 'weatherForecastDayDateDate';
forecastDate.innerHTML = fDate;
// Append icon image to div container
forecastIconContainer.appendChild(forecastIcon);
// Append details to div container
forecastDayDate.appendChild(forecastHour);
forecastDayDate.appendChild(forecastDate);
// Append to main div
forecastDay.appendChild(forecastIconContainer);
forecastDay.appendChild(forecastDetails);
forecastDay.appendChild(forecastDayDate);
// Append to the main container
this._forecastContainer.appendChild(forecastDay);
// Generate forecast
this._forecastContainer.insertAdjacentHTML(
'beforeend',
`
<div class='weatherForecastDay'>
<div class='weatherForecastDayIconContainer'>
<div class='weatherForecastDayIcon' style='background: url("assets/weather-icons/${fIcon}"); background-size: cover;'></div>
</div>
<div class='weatherForecastDayDetails'>
<div class='weatherForecastDayDetailsTemperature'>${forecastTemp}</div>
<div class='weatherForecastDayDetailsDescription'>${foreDescription}</div>
</div><div class='weatherForecastDayDate'>
<div class='weatherForecastDayDateHour'>${fHour}</div>
<div class='weatherForecastDayDateDate'>${fDate}</div>
</div>
</div>
`
)
}

63
js/web-menu.js
View File

@ -72,53 +72,28 @@ class WebMenu {
const li = document.createElement('li');
// Generate web item/li child
li.insertAdjacentHTML(
'afterbegin',
`
<a class='webMenuLink' href='${url}' tabindex='-1'>
<div class='webItem' id='${'id' + site}'>
<div class='webItemContainer'>
<div class='webItemBody'>
<div class='webItemIconContainer'>
<div class='webItemIcon' style='background: url("assets/webcons/${icon}.svg"); background-size: cover;'></div>
</div>
<div class='webItemName'>${site}</div>
</div>
</div>
</div>
</a>
`
)
// Create callback property
this._createWebItemCallback(li, url);
// Create a href
const aWebLink = document.createElement('a');
aWebLink.className = 'webMenuLink';
aWebLink.href = url;
aWebLink.tabIndex = '-1';
// Create an outer div, child of li
let webItemDiv = document.createElement('div')
webItemDiv.className = 'webItem';
webItemDiv.id = 'id' + site;
// Create a second div, webItemContainer
const webItemContainer = document.createElement('div');
webItemContainer.className = 'webItemContainer';
// Create the innermost div, contains icon and label
const webItemBody = document.createElement('div');
webItemBody.className = 'webItemBody';
// Create div for webItemIcon
const webItemIconContainer = document.createElement('div');
webItemIconContainer.className = 'webItemIconContainer';
const webItemIcon = document.createElement('div');
webItemIcon.className = 'webItemIcon';
webItemIcon.style.background = `url('assets/webcons/${icon}.svg')`;
webItemIcon.style.backgroundSize = 'cover';
// Create webItemName
const webItemName = document.createElement('div');
webItemName.className = 'webItemName';
webItemName.innerHTML = site;
// Append divs with heirarchy
webItemDiv.appendChild(webItemContainer);
webItemContainer.appendChild(webItemBody);
webItemIconContainer.appendChild(webItemIcon);
webItemBody.appendChild(webItemIconContainer);
webItemBody.appendChild(webItemName);
aWebLink.appendChild(webItemDiv);
li.appendChild(aWebLink);
this._webMenuList.appendChild(li);
}