https://pytorch.kr/assets/get-started-sidebar.js

1// Create the sidebar menus for each OS and Cloud Partner
2
3// For pytorch.md page: build sidebar from all h2/h3 tags in the article
4if ($('.pytorch-2').length > 0) {
5  buildSidebarMenu('.pytorch-article', '#get-started-locally-sidebar-list');
6  $('.get-started-locally-sidebar li').show(); // Show all items for pytorch page
7}
8
9$([".macos", ".linux", ".windows"]).each(function(index, osClass) {
10  buildSidebarMenu(osClass, "#get-started-locally-sidebar-list");
11});
12
13$([".alibaba", ".aws", ".microsoft-azure", ".google-cloud", ".lightning-studios"]).each(function(index, cloudPartner) {
14  buildSidebarMenu(cloudPartner, "#get-started-cloud-sidebar-list");
15});
16
17$(["macos", "linux", "windows"]).each(function(index, osClass) {
18  $("#" + osClass).on("click", function() {
19    showSidebar(osClass, ".get-started-locally-sidebar li");
20  });
21});
22
23// Show cloud partner side nav on click or hide side nav if already open
24$(["alibaba", "aws", "microsoft-azure", "google-cloud", "lightning-studios"]).each(function(index, sidebarClass) {
25  $("#" + sidebarClass).click(function() {
26    showSidebar(sidebarClass, ".get-started-cloud-sidebar li");
27    // alibaba filter for centering cloud module
28    if (sidebarClass == "alibaba") {
29      $(".article-wrapper").parent().removeClass("col-md-8 offset-md-1").addClass("col-md-12");
30      $(".cloud-nav").hide();
31    } else {
32      $(".article-wrapper").parent().removeClass("col-md-12").addClass("col-md-8 offset-md-1");
33      $(".cloud-nav").show();
34    }
35    if ($("#" + sidebarClass).parent().hasClass("open")) {
36      $(".get-started-cloud-sidebar li").hide();
37      $(".cloud-nav").hide();
38      $(".article-wrapper").parent().removeClass("col-md-8 offset-md-1").addClass("col-md-12");
39    }
40  })
41});
42
43function buildSidebarMenu(menuClass, menuItem) {
44  var currentH2 = null;
45  var h2Index = 0;
46
47  $(menuClass + " > h2," + menuClass + " > h3").each(function(index, element) {
48    menuClass = menuClass.replace(".", "");
49    var tagName = $(element).get(0).tagName;
50
51    if (tagName == "H2") {
52      // H2 항목: 토글 가능한 메인 아이템
53      h2Index++;
54      var h2Id = "sidebar-h2-" + h2Index;
55      currentH2 = h2Id;
56
57      $(menuItem).append(
58        "<li class='" + menuClass + " sidebar-h2' data-h2-id='" + h2Id + "' style='display:none'>" +
59          "<a href='#" + this.id + "' class='sidebar-h2-link'>" +
60            "<span class='toggle-icon'>▸</span>" +
61            "<span class='menu-text'>" + this.textContent + "</span>" +
62          "</a>" +
63        "</li>"
64      );
65    } else if (tagName == "H3" && currentH2) {
66      // H3 항목: 숨겨진 서브아이템
67      $(menuItem).append(
68        "<li class='" + menuClass + " subitem sidebar-h3' data-parent='" + currentH2 + "' style='display:none'>" +
69          "<a href='#" + this.id + "'>" + this.textContent + "</a>" +
70        "</li>"
71      );
72    }
73  });
74}
75
76function showSidebar(selectedClass, menuItem) {
77  // Hide all of the menu items at first
78  // Then filter for the selected OS/cloud partner
79  $(menuItem)
80    .hide()
81    .filter(function() {
82      return $(this)
83        .attr("class")
84        .includes(selectedClass);
85    })
86    .show();
87}
88
89// H2 토글 기능
90$(document).on("click", ".get-started-locally-sidebar li.sidebar-h2 .sidebar-h2-link", function(e) {
91  var $li = $(this).closest("li");
92  var h2Id = $li.data("h2-id");
93  var $icon = $li.find(".toggle-icon");
94  var $children = $(".get-started-locally-sidebar li.sidebar-h3[data-parent='" + h2Id + "']");
95
96  // 토글 아이콘 클릭 시에만 펼침/접힘, 텍스트 클릭 시에는 스크롤만
97  var isIconClick = $(e.target).hasClass("toggle-icon") || $(e.target).closest(".toggle-icon").length > 0;
98
99  if (isIconClick) {
100    e.preventDefault();
101
102    // 토글 상태 변경
103    if ($li.hasClass("expanded")) {
104      $li.removeClass("expanded");
105      $icon.text("▸");
106      $children.slideUp(200);
107    } else {
108      $li.addClass("expanded");
109      $icon.text("▾");
110      $children.slideDown(200);
111    }
112  } else {
113    // 텍스트 클릭 시 해당 섹션으로 스크롤
114    removeActiveClass();
115    addActiveClass($li);
116  }
117});
118
119// H3 링크 클릭 시
120$(document).on("click", ".get-started-locally-sidebar li.sidebar-h3 a", function() {
121  removeActiveClass();
122  addActiveClass($(this).closest("li"));
123});
124
125// 스크롤 시 현재 섹션 하이라이트 및 자동 확장
126var scrollTimeout;
127$(window).on("scroll", function() {
128  clearTimeout(scrollTimeout);
129  scrollTimeout = setTimeout(function() {
130    updateActiveSection();
131  }, 100);
132});
133
134function updateActiveSection() {
135  if ($('.pytorch-2').length === 0) return;
136
137  var scrollPos = $(window).scrollTop() + 100;
138  var $h2Elements = $(".pytorch-article > h2");
139  var $h3Elements = $(".pytorch-article > h3");
140  var currentH2 = null;
141  var currentH3 = null;
142
143  // 현재 보고 있는 H2 찾기
144  $h2Elements.each(function() {
145    if ($(this).offset().top <= scrollPos) {
146      currentH2 = $(this).attr("id");
147    }
148  });
149
150  // 현재 보고 있는 H3 찾기
151  $h3Elements.each(function() {
152    if ($(this).offset().top <= scrollPos) {
153      currentH3 = $(this).attr("id");
154    }
155  });
156
157  if (currentH2) {
158    var $activeH2 = $(".get-started-locally-sidebar li.sidebar-h2 a[href='#" + currentH2 + "']").closest("li");
159
160    // 먼저 모든 섹션을 접고 현재 섹션만 확장
161    if ($activeH2.length) {
162      // 다른 모든 H2 섹션 접기
163      $(".get-started-locally-sidebar li.sidebar-h2").not($activeH2).each(function() {
164        var $otherH2 = $(this);
165        if ($otherH2.hasClass("expanded")) {
166          $otherH2.removeClass("expanded");
167          $otherH2.find(".toggle-icon").text("▸");
168          var otherId = $otherH2.data("h2-id");

169          $(".get-started-locally-sidebar li.sidebar-h3[data-parent='" + otherId + "']").slideUp(200);
170        }
171      });
172
173      // 현재 섹션 자동 확장
174      if (!$activeH2.hasClass("expanded")) {
175        var h2Id = $activeH2.data("h2-id");
176        $activeH2.addClass("expanded");
177        $activeH2.find(".toggle-icon").text("▾");
178        $(".get-started-locally-sidebar li.sidebar-h3[data-parent='" + h2Id + "']").slideDown(200);
179      }
180    }
181
182    removeActiveClass();
183
184    if (currentH3) {
185      var $activeH3 = $(".get-started-locally-sidebar li.sidebar-h3 a[href='#" + currentH3 + "']").closest("li");
186      if ($activeH3.length) {
187        addActiveClass($activeH3);
188        return;
189      }
190    }
191
192    addActiveClass($activeH2);
193  }
194}
195
196// 페이지 로드 시 초기 섹션 업데이트 (모든 메뉴 접힌 상태로 시작)
197$(document).ready(function() {
198  if ($('.pytorch-2').length > 0) {
199    setTimeout(function() {
200      updateActiveSection();
201    }, 100);
202  }
203});
204
205function removeActiveClass() {
206  $(".get-started-locally-sidebar li a").each(function() {
207    $(this).removeClass("active");
208  });
209}
210
211function addActiveClass(element) {
212  $(element)
213    .find("a")
214    .addClass("active");
215}
216
217if ($("#get-started-locally-sidebar-list").text() == "") {
218  $("#get-started-shortcuts-menu").hide();
219}