kubernetes
/
minikube
mirror of https://github.com/kubernetes/minikube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

made tabs view linkable

pull/18977/head
hritesh04 2024-05-28 19:38:26 +05:30
parent f72619a476
commit edcccb05e3
5 changed files with 164 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/layouts/shortcodes/quiz_button.html
View File

@ -1 +1 @@
<button data-quiz-id="{{ .Parent.Get "base" }}/{{ .Get "option" }}" type="button" class="btn btn-outline-primary option-button{{ if eq (.Get "hide") "true" }} hide{{ end }}">{{ .Get "option" }}</button>
<button data-quiz-id="{{ .Parent.Get "base" | lower }}/{{ .Get "option" | lower}}" type="button" class="btn btn-outline-primary option-button{{ if eq (.Get "hide") "true" }} hide{{ end }}">{{ .Get "option" }}</button>

2
site/layouts/shortcodes/quiz_instruction.html
View File

@ -6,7 +6,7 @@
{{ $release := index $selected 3 }}
{{ $installer := index $selected 4 }}
<div data-quiz-id="{{ with .Get "id"}}{{.}}{{end}}" class="quiz-instruction">
<div data-quiz-id="{{ with .Get "id" | lower }}{{.}}{{end}}" class="quiz-instruction">
<p>To install the latest minikube <b>{{ lower $release }}</b> release on <b>{{ $arch }}</b> <b>{{ $os }}</b> using <b>{{ replace $installer "Binary" "binary" }}</b>:</p>
{{ .Inner }}
</div>

2
site/layouts/shortcodes/quiz_row.html
View File

@ -1,6 +1,6 @@
{{ $level := .Get "base" | strings.Count "/" }}
<div data-quiz-id="{{ .Get "base" }}" data-level="{{ $level }}" class="row option-row hide">
<div data-quiz-id="{{ .Get "base" | lower}}" data-level="{{ $level }}" class="row option-row hide">
<div class="col-lg-2 my-auto">
<p>{{ with .Get "name"}}{{.}}{{end}}</p>
</div>

142
site/static/js/quiz.js
View File

@ -1,57 +1,99 @@
function selectQuizOption(selectedId) {
const currentLevel = selectedId.split('/').length - 1;
$('.option-row').each(function (i) {
const rowId = $(this).attr('data-quiz-id');
// don't hide option rows if it has a lower level
// e.g. when clicking "x86_64" under Linux, we don't want to hide the operating system row
if ($(this).attr('data-level') < currentLevel) {
return;
}
if (rowId === selectedId) {
$(this).removeClass('hide');
$(this).find('.option-button').removeClass('active');
return;
}
// hide all other option rows
$(this).addClass('hide');
});
// hide other answers
$('.quiz-instruction').addClass('hide');
// show the selected answer
$('.quiz-instruction[data-quiz-id=\'' + selectedId + '\']').removeClass('hide');
const buttons = $('.option-row[data-quiz-id=\'' + selectedId + '\']').find('.option-button');
// auto-select the first option for the user, to reduce the number of clicks
if (buttons.length > 0) {
const btn = buttons.first();
btn.addClass('active');
selectQuizOption(btn.attr('data-quiz-id'));
function selectQuizOption(selectedId, autoselect = true) {
const currentLevel = selectedId.split("/").length - 1;
$(".option-row").each(function (i) {
const rowId = $(this).attr("data-quiz-id");
// don't hide option rows if it has a lower level
// e.g. when clicking "x86_64" under Linux, we don't want to hide the operating system row
if ($(this).attr("data-level") < currentLevel) {
return;
}
if (rowId === selectedId) {
$(this).removeClass("hide");
$(this).find(".option-button").removeClass("active");
return;
}
// hide all other option rows
$(this).addClass("hide");
});
// hide other answers
$(".quiz-instruction").addClass("hide");
// show the selected answer
$(".quiz-instruction[data-quiz-id='" + selectedId + "']").removeClass("hide");
const buttons = $(".option-row[data-quiz-id='" + selectedId + "']").find(
".option-button"
);
//auto-select the first option for the user, to reduce the number of clicks
if (buttons.length > 0) {
if (autoselect) {
const btn = buttons.first();
const dataContainerId = btn.attr("data-quiz-id");
btn.addClass("active");
const url = new URL(window.location);
url.searchParams.set("arch", dataContainerId); // Add selectedId as query parameter
// Update the browser's location with the new URL
window.history.replaceState({}, document.title, url);
selectQuizOption(dataContainerId);
}
}
}
function initQuiz() {
try {
$('.option-button').click(function(e) {
$(this).parent().find('.option-button').removeClass('active');
$(this).addClass('active');
const dataContainerId = $(this).attr('data-quiz-id');
try {
$(".option-button").click(function (e) {
$(this).parent().find(".option-button").removeClass("active");
$(this).addClass("active");
const dataContainerId = $(this).attr("data-quiz-id");
selectQuizOption(dataContainerId);
});
let userOS = getUserOS();
if (userOS === 'Mac') {
// use the name "macOS" to match the button
userOS = 'macOS';
}
$('.option-row[data-level=0]').removeClass('hide');
// auto-select the OS for user
const btn = $('.option-button[data-quiz-id=\'/' + userOS + '\']').first();
btn.addClass('active');
selectQuizOption(btn.attr('data-quiz-id'));
} catch(e) {
const elements = document.getElementsByClassName("quiz-instruction");
for (let element of elements) {
element.classList.remove("hide");
}
const url = new URL(window.location);
url.searchParams.set("arch", dataContainerId); // Add selectedId as query parameter
window.history.replaceState({}, document.title, url);
// Update the browser's location with the new URL
selectQuizOption(dataContainerId);
});
let userOS = getUserOS().toLowerCase();
if (userOS === "Mac") {
// use the name "macos" to match the button
userOS = "macos";
}
$(".option-row[data-level=0]").removeClass("hide");
const urlParams = new URLSearchParams(window.location.search);
const archParam = urlParams.get("arch");
//checks for query params and process each option one by one
if (archParam) {
const options = archParam.split("/").filter(Boolean);
let quizId = "";
options.forEach((option, index) => {
quizId = quizId + "/" + option;
const archBtn = $(
".option-button[data-quiz-id='" + quizId + "']"
).first();
archBtn.addClass("active");
// passes false as argument when there are more options to process to prevent auto selection of 1st option in following options
if (index === option.length - 1) {
selectQuizOption(archBtn.attr("data-quiz-id"));
} else {
selectQuizOption(archBtn.attr("data-quiz-id"), false);
}
});
} else {
// auto-select the OS for user
const btn = $(".option-button[data-quiz-id='/" + userOS + "']").first();
btn.addClass("active");
selectQuizOption(btn.attr("data-quiz-id"));
}
} catch (e) {
const elements = document.getElementsByClassName("quiz-instruction");
for (let element of elements) {
element.classList.remove("hide");
}
}
}

103
site/static/js/tabs.js
View File

@ -1,35 +1,70 @@
/* Tabs JS implementation. Borrowed from Skaffold */
function initTabs() {
try{
$('.tab-content').children('.tab-pane').each(function(idx, item) {
var navTabs = $(this).closest('.code-tabs').children('.nav-tabs'),
title = escape($(this).attr('title')).replace(/%20/g, ' '),
os = escape($(this).attr('os') || '');
navTabs.append('<li class="nav-tab '+os+'"><a href="#" class="nav-tab">'+title+'</a></li>');
try {
$(".tab-content")
.children(".tab-pane")
.each(function (idx, item) {
var navTabs = $(this).closest(".code-tabs").children(".nav-tabs"),
title = escape($(this).attr("title")).replace(/%20/g, " "),
os = escape($(this).attr("os") || "");
navTabs.append(
'<li class="nav-tab ' +
os +
'"><a href="#' +
title +
'" class="nav-tab">' +
title +
"</a></li>"
);
});
$(".code-tabs ul.nav-tabs").each(function () {
let tabSelector = getTabSelector(this);
$(this)
.find("li" + tabSelector)
.addClass("active");
});
$('.code-tabs ul.nav-tabs').each(function() {
$(".code-tabs .tab-content").each(function () {
let tabSelector = getTabSelector(this);
$(this).find('li'+tabSelector).addClass('active');
$(this)
.find("div" + tabSelector)
.addClass("active");
});
$('.code-tabs .tab-content').each(function() {
let tabSelector = getTabSelector(this);
$(this).find('div'+tabSelector).addClass('active');
})
$('.nav-tabs a').click(function(e){
$(".nav-tabs a").click(function (e) {
e.preventDefault();
var tab = $(this).parent(),
tabIndex = tab.index(),
tabPanel = $(this).closest('.code-tabs'),
tabPane = tabPanel.find('.tab-content:first').children('.tab-pane').eq(tabIndex);
tab.siblings().removeClass('active');
tabPane.siblings().removeClass('active');
tab.addClass('active');
tabPane.addClass('active');
tabIndex = tab.index(),
tabPanel = $(this).closest(".code-tabs"),
tabPane = tabPanel
.find(".tab-content:first")
.children(".tab-pane")
.eq(tabIndex);
tab.siblings().removeClass("active");
tabPane.siblings().removeClass("active");
tab.addClass("active");
tabPane.addClass("active");
// changes the anchor in the url
var tabTitle = $(this).attr("href");
window.location.hash = tabTitle;
});
} catch(e) {
const hash = window.location.hash;
// checks for anchor in the url and simulate anchor click to see the particular tab
if (hash) {
const tabTitle = unescape(hash.replace("#", ""));
const tab = $(".nav-tabs a[href='#" + tabTitle + "']");
tab.click(); // Trigger click to activate the tab
}
const url = new URL(window.location);
if (url.pathname === "/docs/handbook/addons/ingress-dns/") {
url.hash = getUserOS();
window.history.replaceState({}, document.title, url);
}
} catch (e) {
const elements = document.getElementsByClassName("tab-pane");
for (let element of elements) {
element.style.display = "block";
@ -41,17 +76,17 @@ function initTabs() {
}
}
const getTabSelector = currElement => {
let osSelector = '.'+getUserOS();
let hasMatchingOSTab = $(currElement).find(osSelector).length;
return hasMatchingOSTab ? osSelector : ':first';
}
const getTabSelector = (currElement) => {
let osSelector = "." + getUserOS();
let hasMatchingOSTab = $(currElement).find(osSelector).length;
return hasMatchingOSTab ? osSelector : ":first";
};
const getUserOS = () => {
let os = ['Linux', 'Mac', 'Windows'];
let userAgent = navigator.userAgent;
for (let currentOS of os) {
if (userAgent.indexOf(currentOS) !== -1) return currentOS;
}
return 'Linux';
}
let os = ["Linux", "Mac", "Windows"];
let userAgent = navigator.userAgent;
for (let currentOS of os) {
if (userAgent.indexOf(currentOS) !== -1) return currentOS;
}
return "Linux";
};