gabrielkheisa/ryzen-controller
1
0
Fork 0
mirror of https://gitlab.com/ryzen-controller-team/ryzen-controller.git synced 2024-12-22 18:13:28 +07:00
Code Issues Projects Releases Wiki Activity

feat(developers): Allow developers to create tabs using options_data.json.

Browse Source
This commit is contained in:
Quentin DECAUNES 2019-08-01 18:54:41 +02:00 committed by Quentin “Storm1er” Decaunes
parent 58a8b60826
commit 90e15811c3
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -21,19 +21,13 @@
<body class="uk-animation-fade" uk-height-viewport="expand: true"> <body class="uk-animation-fade" uk-height-viewport="expand: true">
<h1>Ryzen Controller <span id="version" class="uk-badge"></span></h1> <h1>Ryzen Controller <span id="version" class="uk-badge"></span></h1>
<ul uk-switcher="animation: uk-animation-fade" uk-tab uk-sticky class="uk-background-default uk-margin-remove"> <ul uk-switcher="animation: uk-animation-fade" uk-tab uk-sticky class="uk-background-default uk-margin-remove" id="main-container-selector">
<li><a href="#">Controller</a></li>
<li><a href="#">Experimental</a></li>
<li><a href="#">Presets</a></li> <li><a href="#">Presets</a></li>
<li><a href="#">Settings</a></li> <li><a href="#">Settings</a></li>
<li><a href="#">Releases</a></li> <li><a href="#">Releases</a></li>
<li><a href="#">Logs</a></li> <li><a href="#">Logs</a></li>
</ul> </ul>
<ul class="uk-switcher uk-margin-remove" uk-height-viewport="expand: true" style="position:relative;"> <ul class="uk-switcher uk-margin-remove" id="main-container" uk-height-viewport="expand: true" style="position:relative;">
<li class="uk-margin-top uk-margin-bottom uk-container" id="controller-tab"></li>
<li class="uk-margin-top uk-margin-bottom uk-container" id="experimental-tab"></li>
<li class="uk-margin-top uk-margin-bottom uk-container"> <li class="uk-margin-top uk-margin-bottom uk-container">
<div id="presetTab"></div> <div id="presetTab"></div>
@ -93,7 +87,7 @@
<webview <webview
style="height:100%;" style="height:100%;"
frameborder="0" frameborder="0"
src="https://gitlab.com/le.storm1er/ryzen-controller/releases" src="https://gitlab.com/ryzen-controller-team/ryzen-controller/releases"
></webview> ></webview>
</li> </li>

37
js/methods.js
View File

@ -14,14 +14,25 @@ function displayOptions(){
appendLog(`Error while loading ${option_name} tab property.`); appendLog(`Error while loading ${option_name} tab property.`);
continue; continue;
} }
let option_tab = option_data['tab']; let tab_name = option_data['tab'];
let tab = document.querySelector(`#${option_tab}-tab`); let tab_name_css = tab_name.toLowerCase().replace(/ /g, "-");
let tab = document.querySelector(`#${tab_name_css}-tab`);
if (!tab) { if (!tab) {
appendLog(`Error while loading ${option_tab} tab.`); let selectorContent = document.querySelector(`#main-container-selector`).innerHTML;
continue; let tabContent = document.querySelector(`#main-container`).innerHTML;
document.querySelector('#main-container-selector').innerHTML = /*html*/`
<li><a href="#">${tab_name}</a></li>
${selectorContent}
`;
document.querySelector(`#main-container`).innerHTML = /*html*/`
<li class="uk-margin-top uk-margin-bottom uk-container" id="${tab_name_css}-tab"></li>
${tabContent}
`;
tab = document.querySelector(`#${tab_name_css}-tab`);
} }
tabs[option_tab] = true; tabs[tab_name_css] = true;
tab.innerHTML += ` tab.innerHTML += /*html*/`
<h3 id="${option_name}-label" uk-tooltip="${option_data.description}"><label> <h3 id="${option_name}-label" uk-tooltip="${option_data.description}"><label>
<input class="uk-checkbox uk-margin-small-right" type="checkbox" id="apply_${option_name}"/> <input class="uk-checkbox uk-margin-small-right" type="checkbox" id="apply_${option_name}"/>
<span class="option-label">${option_data.label}</span> <span class="option-label">${option_data.label}</span>
@ -56,10 +67,10 @@ function displayOptions(){
UIkit.tooltip(document.querySelector(`#${option_name}-label`)); UIkit.tooltip(document.querySelector(`#${option_name}-label`));
} }
for (const tab_name in tabs) { for (const tab_name_css in tabs) {
if (tabs.hasOwnProperty(tab_name)) { if (tabs.hasOwnProperty(tab_name_css)) {
const tab = document.querySelector(`#${tab_name}-tab`); const tab = document.querySelector(`#${tab_name_css}-tab`);
tab.innerHTML += ` tab.innerHTML += /*html*/`
<p class="uk-margin"> <p class="uk-margin">
<button class="uk-button uk-button-primary" onClick="applyRyzenSettings()">Apply</button> <button class="uk-button uk-button-primary" onClick="applyRyzenSettings()">Apply</button>
<button class="uk-button uk-button-secondary" uk-toggle="target: #modal-new-preset">Save to preset</button> <button class="uk-button uk-button-secondary" uk-toggle="target: #modal-new-preset">Save to preset</button>
@ -256,7 +267,7 @@ function appendLog(message) {
* Will save the latest used settings. * Will save the latest used settings.
*/ */
function saveLatestUsedSettings() { function saveLatestUsedSettings() {
var inputs = document.querySelectorAll('#controller-tab input, #experimental-tab input'); var inputs = document.querySelectorAll('#main-container *[id$="-tab"] input');
var latest_controller_tabs_settings = {}; var latest_controller_tabs_settings = {};
inputs.forEach(element => { inputs.forEach(element => {
let id = element.id; let id = element.id;
@ -303,7 +314,7 @@ function loadLatestUsedSettings() {
* Will show or display options based on apply checkboxes value. * Will show or display options based on apply checkboxes value.
*/ */
function toggleOptionDisplayBasedOnApplyCheckbox() { function toggleOptionDisplayBasedOnApplyCheckbox() {
var checkbox_toggle_options = document.querySelectorAll('#controller-tab input[id^=apply_], #experimental-tab input[id^=apply_]'); var checkbox_toggle_options = document.querySelectorAll('#main-container *[id$="-tab"] input[id^=apply_]');
const hideOptionBasedOnInput = function (input) { const hideOptionBasedOnInput = function (input) {
if (input.checked) { if (input.checked) {
input.parentElement.parentElement.nextElementSibling.removeAttribute('hidden'); input.parentElement.parentElement.nextElementSibling.removeAttribute('hidden');
@ -476,7 +487,7 @@ function getCurrentSettings(keyType) {
return settingsToBeUsed; return settingsToBeUsed;
} else { } else {
var inputs = document.querySelectorAll('#controller-tab input, #experimental-tab input'); var inputs = document.querySelectorAll('#main-container *[id$="-tab"] input');
var currentSettings = {}; var currentSettings = {};
inputs.forEach(element => { inputs.forEach(element => {
let id = element.id; let id = element.id;