From 1652635158495d51e23c002d0a5e74bb0a567e32 Mon Sep 17 00:00:00 2001
From: Anne-Greeth van Herwijnen <a.g.vanherwijnen@outlook.com>
Date: Fri, 14 Jun 2024 10:13:44 +0200
Subject: [PATCH] Make styling work, remove ember-anchor + updateAnchor
 implementation

---
 app/components/class-field-description.hbs    |  4 +-
 app/components/class-field-description.js     | 11 -----
 app/components/ember-anchor.js                | 29 -----------
 app/styles/app.css                            | 13 +++++
 app/templates/class-index.hbs                 | 16 ++-----
 app/templates/project-version.hbs             |  2 +-
 .../project-version/classes/class.hbs         | 48 ++++++++-----------
 app/utils/get-offset.js                       |  9 ----
 8 files changed, 41 insertions(+), 91 deletions(-)
 delete mode 100644 app/components/ember-anchor.js
 delete mode 100644 app/utils/get-offset.js

diff --git a/app/components/class-field-description.hbs b/app/components/class-field-description.hbs
index 599c3faf..450fc4f7 100644
--- a/app/components/class-field-description.hbs
+++ b/app/components/class-field-description.hbs
@@ -1,5 +1,5 @@
 <section class='{{@type}}'>
-  <h3 data-anchor='{{@field.name}}'>
+  <h3 id='{{@field.name}}'>
     <span class='{{@type}}-name'>{{@field.name}}</span>
     {{#if @field.params}}
       <span class='args'>
@@ -16,7 +16,7 @@
       <span class='access'>deprecated</span>
     {{/if}}
     {{!-- TODO: Fix this link for a11y --}}
-    <a class='class-field-description--link' data-test-anchor="{{@field.name}}" role='link' {{on 'click' (fn this.updateAnchor @field.name)}} {{!-- template-lint-disable link-href-attributes --}}>
+    <a class='class-field-description--link' href="#{{@field.name}}" role='link'>
       {{svg-jar 'link' width='20px' height='20px'}}
     </a>
   </h3>
diff --git a/app/components/class-field-description.js b/app/components/class-field-description.js
index 3e9afe64..9df8a990 100644
--- a/app/components/class-field-description.js
+++ b/app/components/class-field-description.js
@@ -12,15 +12,4 @@ export default class ClassFieldDescription extends Component {
       this.args.field.class
     );
   }
-
-  /**
-   * Callback for updating the anchor with the field name that was clicked by a user.
-   *
-   * @method updateAnchor
-   * @method fieldName String The name representing the field that was clicked.
-   */
-  @action
-  updateAnchor(fieldName) {
-    this.args.updateAnchor?.(fieldName);
-  }
 }
diff --git a/app/components/ember-anchor.js b/app/components/ember-anchor.js
deleted file mode 100644
index a7814999..00000000
--- a/app/components/ember-anchor.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable ember/classic-decorator-no-classic-methods */
-import AnchorComponent from 'ember-anchor/components/ember-anchor';
-import config from 'ember-api-docs/config/environment';
-import getOffset from 'ember-api-docs/utils/get-offset';
-
-export default class EmberAnchor extends AnchorComponent {
-  // This overrides Ember Anchor to support scrolling within a fixed position element
-  _scrollToElemPosition() {
-    let elem = document.querySelector(
-      `[data-${this.anchorQueryParam}="${this.a}"]`
-    );
-
-    if (elem && elem.offsetHeight) {
-      const offsetToScroll = getOffset(
-        elem,
-        config.APP.scrollContainerSelector
-      );
-      const scrollContainer = document.querySelector(
-        config.APP.scrollContainerSelector
-      );
-      if (scrollContainer.scrollTo) {
-        scrollContainer.scrollTo(0, offsetToScroll);
-      } else {
-        // fallback for IE11
-        scrollContainer.scrollTop = offsetToScroll;
-      }
-    }
-  }
-}
diff --git a/app/styles/app.css b/app/styles/app.css
index 0c004ce5..834748e2 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -129,6 +129,19 @@ dd {
   color: var(--color-gray-600);
 }
 
+.on-this-page-wrapper .access-checkbox-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.on-this-page-wrapper .api-index-filter {
+  margin-top: var(--spacing-2)
+}
+
+.on-this-page-wrapper ul {
+  margin-top: 0;
+}
+
 .whoops {
   display: flex;
   justify-content: center;
diff --git a/app/templates/class-index.hbs b/app/templates/class-index.hbs
index 57c63ab4..749fa051 100644
--- a/app/templates/class-index.hbs
+++ b/app/templates/class-index.hbs
@@ -1,27 +1,19 @@
 <ApiIndexFilter @model={{this.model}} @filterData={{this.filterData}} as |filteredModel|>
   <ApiIndex @itemData={{filteredModel}} @classNames="api__index__content" as |sectionData|>
     {{#each sectionData.sections as |section|}}
-      <h3 class="api-index-section-title">{{section.title}}</h3>
       {{#if section.items}}
+      <h3 class="api-index-section-title">{{section.title}}</h3>
         <ul class="{{section.class}}">
           {{#each section.items as |item|}}
             <li data-test-item={{item.name}}>
-              <LinkTo
-                @route="{{this.parentName}}{{section.routeSuffix}}"
-                @models={{array
-                  @model.project.id
-                  @model.projectVersion.compactVersion
-                  @model.name item.name
-                }}
-                @query={{hash anchor=item.name}}
+              <a
+                href="#{{item.name}}"
               >
                 {{item.name}}
-              </LinkTo>
+              </a>
             </li>
           {{/each}}
         </ul>
-      {{else}}
-        <p>No documented items</p>
       {{/if}}
     {{/each}}
   </ApiIndex>
diff --git a/app/templates/project-version.hbs b/app/templates/project-version.hbs
index 396b21ba..eea4d03f 100644
--- a/app/templates/project-version.hbs
+++ b/app/templates/project-version.hbs
@@ -27,7 +27,7 @@
       @isShowingNamespaces={{version-lt this.selectedProjectVersion.compactVersion "2.16"}}
     />
   </EsSidebar>
-  <section class="content">
+  <section class="content-wrapper">
     {{outlet}}
   </section>
 </div>
diff --git a/app/templates/project-version/classes/class.hbs b/app/templates/project-version/classes/class.hbs
index 174cd17c..af8421d8 100644
--- a/app/templates/project-version/classes/class.hbs
+++ b/app/templates/project-version/classes/class.hbs
@@ -69,31 +69,26 @@
     <ImportExample @item={{@model.name}} @package={{this.module}} />
   {{/if}}
   <p class="description">{{html-safe @model.description}}</p>
-
-  {{#if (or @model.methods @model.properties @model.events)}}
+  <hr>
+  {{#if @model.methods}}
+  <h2>Methods</h2>
+  <Methods @model={{@model}} @filterData={{this.filterData}}/>
+  {{/if}}
+  {{#if @model.properties}}
+  <h2>Properties</h2>
+  <Properties @model={{@model}} @filterData={{this.filterData}}/>
+  {{/if}}
+  {{#if @model.events}}
+  <h2>Events</h2>
+  <Events @model={{@model}} @filterData={{this.filterData}}/>
+  {{/if}}
+</article>
+<div class="on-this-page-wrapper">
+    <div class="on-this-page-wrapper-header">On this page</div>
+    <hr>
+{{#if (or @model.methods @model.properties @model.events)}}
     <div class="tabbed-layout">
-      <nav class="tabbed-layout__menu">
-        <LinkTo @route={{concat this.parentName ".index" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".index"}} data-test-tab="index">
-          <span>Index</span>
-        </LinkTo>
-        {{#if @model.methods}}
-          <LinkTo @route={{concat this.parentName ".methods" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".methods"}} data-test-tab="methods">
-            <span>Methods</span>
-          </LinkTo>
-        {{/if}}
-        {{#if @model.properties}}
-          <LinkTo @route={{concat this.parentName ".properties" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".properties"}} data-test-tab="properties">
-            <span>Properties</span>
-          </LinkTo>
-        {{/if}}
-        {{#if @model.events}}
-          <LinkTo @route={{concat this.parentName ".events" }} @models={{array @model.project.id @model.projectVersion.compactVersion @model.name}} @query={{hash anchor=undefined}} class="tabbed-layout__menu__item" @activeClass="tabbed-layout__menu__item_selected" @current-when={{concat this.parentName ".events"}} data-test-tab="events">
-            <span>Events</span>
-          </LinkTo>
-        {{/if}}
-      </nav>
-      <section>
-        Show:
+      <section class="access-checkbox-list">
         <label class="access-checkbox">
           <input id="inherited-toggle"
                  data-test-checkbox="inherited"
@@ -128,8 +123,7 @@
         </label>
       </section>
       <hr>
-      {{outlet}}
     </div>
+    {{outlet}}
   {{/if}}
-
-</article>
+</div>
\ No newline at end of file
diff --git a/app/utils/get-offset.js b/app/utils/get-offset.js
deleted file mode 100644
index 1204e64e..00000000
--- a/app/utils/get-offset.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default function getOffset(element, container) {
-  let offsetTop = element.offsetTop;
-  let parent = element.offsetParent;
-  while (parent != null && parent != container) {
-    offsetTop += parent.offsetTop;
-    parent = parent.offsetParent;
-  }
-  return offsetTop;
-}