Initial
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
// Notification
|
||||
$(".toast-btn").click(function () {
|
||||
let btnItem = $(this),
|
||||
btnId = btnItem.data("id");
|
||||
|
||||
$(".toast").each(function () {
|
||||
let eachItem = $(this),
|
||||
eachItemId = eachItem.data("id");
|
||||
|
||||
if (eachItemId) {
|
||||
if (btnId === eachItemId) {
|
||||
new bootstrap.Toast($(this)).show();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,191 @@
|
||||
// Sider
|
||||
$(function () {
|
||||
// Menu Link
|
||||
$(".hp-sidebar-container li a").each(function () {
|
||||
if (window.location.pathname.split("/")[window.location.pathname.split("/").length - 1] == $(this).attr("href")) {
|
||||
$(this).addClass("active")
|
||||
|
||||
$(this).parents(".submenu-children").slideDown()
|
||||
$(this).parents(".submenu-children").addClass("active")
|
||||
$(this).parents(".submenu-children").prev("a").addClass("active arrow-active")
|
||||
}
|
||||
});
|
||||
|
||||
// Menu Dropdown
|
||||
$(".hp-sidebar-container li a").click(function () {
|
||||
if ($(this).next(".submenu-children").length) {
|
||||
$(this).toggleClass("arrow-active")
|
||||
$(this).next(".submenu-children").slideToggle(300)
|
||||
}
|
||||
});
|
||||
|
||||
// Mobile Button
|
||||
$(".hp-mobile-sidebar-button").click(function () {
|
||||
$("body").removeClass("collapsed-active collapse-btn-none")
|
||||
});
|
||||
|
||||
// Collapsed
|
||||
$(".hp-sidebar .hp-sidebar-collapse-button").click(function () {
|
||||
$("body").toggleClass("collapsed-active")
|
||||
$(".hp-sidebar .submenu-children").slideUp()
|
||||
$(".hp-sidebar li a").removeClass("arrow-active")
|
||||
$(".hp-sidebar .tooltip-item").toggleClass("in-active")
|
||||
|
||||
if ($("body").hasClass("collapsed-active")) {
|
||||
$(".hp-sidebar .submenu-children").addClass("d-none")
|
||||
} else {
|
||||
$(".hp-sidebar .submenu-children").removeClass("d-none")
|
||||
$(".hp-sidebar .submenu-children").css("display", "none")
|
||||
}
|
||||
});
|
||||
|
||||
if ($("body").hasClass("collapsed-active")) {
|
||||
$(".hp-sidebar .submenu-children").addClass("d-none")
|
||||
$(".hp-sidebar .tooltip-item").removeClass("in-active")
|
||||
}
|
||||
|
||||
// Collapsed Menu Dropdown
|
||||
let position = "left";
|
||||
let sidebarWidth;
|
||||
|
||||
if ($("html").attr("dir") === "rtl") {
|
||||
position = "right";
|
||||
}
|
||||
|
||||
$(".hp-sidebar-container li a").mouseenter(function () {
|
||||
if ($("body").hasClass("collapsed-active")) {
|
||||
sidebarWidth = parseInt($(this).parents(".hp-sidebar").width()) + 38;
|
||||
|
||||
$(".hp-sidebar-dropdown-container").remove();
|
||||
|
||||
if ($(this).next(".submenu-children").length) {
|
||||
$("body").append(
|
||||
`
|
||||
<div class="hp-sidebar-dropdown-container position-absolute">
|
||||
<ul>` +
|
||||
$(this).next(".submenu-children").html() +
|
||||
`</ul>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
if ($(this).offset().top + $(".hp-sidebar-dropdown-container").height() > $(window).height()) {
|
||||
$(".hp-sidebar-dropdown-container > ul").css({
|
||||
maxHeight: "calc(100vh - " + ($(window).height() - $(this).offset().top) + "px)",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
"top", $(this).offset().top - $(".hp-sidebar-dropdown-container").height() + 50 + "px"
|
||||
);
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, (sidebarWidth - 38) + "px"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + sidebarWidth + "px)"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container > ul").css({
|
||||
maxHeight: "none",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
"top", $(this).offset().top + "px"
|
||||
);
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, (sidebarWidth - 38) + "px"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + sidebarWidth + "px)"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//--
|
||||
|
||||
let levelNumber;
|
||||
$(".hp-sidebar-dropdown-container li a").mouseenter(function () {
|
||||
if ($(this).next(".submenu-children").length) {
|
||||
$(this).css("pointer-events", "none");
|
||||
|
||||
levelNumber = $(this)
|
||||
.next(".collapse")
|
||||
.find(".submenu-children")
|
||||
.data("level");
|
||||
|
||||
$("body").append(
|
||||
`
|
||||
<div class="hp-sidebar-dropdown-container position-absolute" data-level="` +
|
||||
levelNumber +
|
||||
`">
|
||||
<ul>` +
|
||||
$(this).next(".submenu-children").html() +
|
||||
`</ul>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
if ($(this).offset().top + $(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").height() > $(window).height()) {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "] > ul").css({
|
||||
maxHeight: "calc(100vh - " + ($(window).height() - $(this).offset().top) + "px)",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
"top", $(this).offset().top - $(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").height() + 50 + "px"
|
||||
);
|
||||
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + ($(this).width() + sidebarWidth - 38 + 27) + "px)"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + (sidebarWidth - 37) * parseInt(levelNumber) + "px)"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "] > ul").css({
|
||||
maxHeight: "none",
|
||||
});
|
||||
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css("top", $(this).offset().top + "px");
|
||||
if (position === "right") {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + ($(this).width() + sidebarWidth - 38 + 27) + "px)"
|
||||
);
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").css(
|
||||
position, "calc(" + $(this).offset().left + "px + " + (sidebarWidth - 37) * parseInt(levelNumber) + "px)"
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container li a").css("pointer-events", "all");
|
||||
$(".hp-sidebar-dropdown-container[data-level=" + levelNumber + "]").remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
$(".hp-sidebar-dropdown-container").remove();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).mousemove(function (e) {
|
||||
let menuItem = $(".hp-sidebar-container li a");
|
||||
let dropdownContainer = $(".hp-sidebar-dropdown-container");
|
||||
|
||||
if (
|
||||
!menuItem.is(event.target) &&
|
||||
!menuItem.has(event.target).length &&
|
||||
!dropdownContainer.is(event.target) &&
|
||||
!dropdownContainer.has(event.target).length
|
||||
) {
|
||||
$(".hp-sidebar-dropdown-container").remove();
|
||||
$(".hp-sidebar-dropdown-container li a").css("pointer-events", "all");
|
||||
}
|
||||
});
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
+6
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
const basicNotification='\n<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small>11 mins ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Hello, world! This is a toast message.\n </div>\n</div>\n\n',live='\n<button type="button" class="btn btn-primary toast-btn" data-id="liveToast" id="liveToastBtn">Show live toast</button>\n\n<div class="position-fixed bottom-0 end-0 p-16" style="z-index: 99">\n <div data-id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small>11 mins ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Hello, world! This is a toast message.\n </div>\n </div>\n</div>\n\n',translucent='\n<div class="hp-bg-black-100 hp-bg-dark-0 rounded p-32">\n <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small class="text-muted">11 mins ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Hello, world! This is a toast message.\n </div>\n </div>\n</div>\n\n',stacking='\n<button type="button" class="btn btn-primary toast-btn" data-id="stacking-1">Toast 1</button>\n\n<button type="button" class="btn btn-primary toast-btn" data-id="stacking-2">Toast 2</button>\n\n<div class="position-fixed top-0 end-0 p-16" style="z-index: 99">\n <div class="toast-container">\n <div data-id="stacking-1" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small class="text-muted">just now</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n See? Just like this.\n </div>\n </div>\n\n <div data-id="stacking-2" class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true">\n <div class="toast-header">\n <img class="me-8" src="..." alt="...">\n <strong class="me-auto">Yoda</strong>\n <small class="text-muted">2 seconds ago</small>\n <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>\n </div>\n\n <div class="toast-body">\n Heads up, toasts will stack automatically\n </div>\n </div>\n </div>\n</div>\n\n';$("pre code").each((function(){"notification"===$(this).data("component")&&($(this).text($.trim($(this).data("code"))),"basic"===$(this).data("code")&&$(this).text(basicNotification),"live"===$(this).data("code")&&$(this).text(live),"translucent"===$(this).data("code")&&$(this).text(translucent),"stacking"===$(this).data("code")&&$(this).text(stacking))}));
|
||||
@@ -0,0 +1 @@
|
||||
$(".show-code-btn").click((function(){$(this).parent().nextAll(".hljs-container").fadeToggle(300)}));
|
||||
Reference in New Issue
Block a user