feat: sticky method, property, and event headers (ember-learn#336)

* feat: sticky method, property, and event headers

* fix: h3 indentation for linting

* fix template lint

* update sticky dep

* Only show sticky for areas with a greater height

Author: knownasilya

app/components/class-field-description.js

@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
+import { gt } from '@ember/object/computed';
 
 export default Component.extend({
   legacyModuleMappings: service(),
@@ -9,6 +10,17 @@ export default Component.extend({
     return this.get('legacyModuleMappings').hasFunctionMapping(this.get('field.name'), this.get('field.class'));
   }),
 
+  stickyEnabled: gt('ownHeight', 200),
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.setOwnHeight(this.element);
+  },
+
+  setOwnHeight(element) {
+    this.set('ownHeight', element.clientHeight);
+  },
+
   /**
    * Callback for updating the anchor with the field name that was clicked by a user.
    *

app/styles/components/_class-field-desc.scss

@@ -17,6 +17,14 @@
   font-size: $base-font-size;
 }
 
+.sticky-element--sticky .class-field-description--link {
+  margin: 0 -1.45em;
+  background-color: #FDFDFD;
+  padding: 0.4em 1.4em;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 4px -1px;
+  transition: 0.3s top, 0.3s box-shadow, 0.3s padding;
+}
+
 .class-field-description--link .return-type,
 .return .return-type,
 .parameter .parameter-type {
@@ -54,6 +62,7 @@ h3 .access{
 
 .method, .property, .event {
   border-bottom: $base-border;
+  position: relative;
 
   .method-name, .property-name, .event-name {
     font-family: $monospace-font-family;

app/styles/components/_highlight.scss

@@ -8,6 +8,7 @@
   margin: $small-spacing 0 $large-spacing;
   overflow: hidden;
   position: relative;
+  z-index: -1;
 
   &.handlebars {
     .inline,

app/templates/components/class-field-description.hbs

@@ -1,24 +1,26 @@
 <section class="{{type}}">
-  <h3 class="class-field-description--link" data-anchor="{{field.name}}" role="link" onclick={{action updateAnchor field.name}}>
-    <a class="anchor">
-      {{svg-jar 'fa-link' class="class-field-description--link-hover" width="20px" height="20px"}}
-    </a>
-    <span class="{{type}}-name">{{field.name}}</span>
-    {{#if field.params}}
-      <span class="args">
-        ({{join ", " (map-by "name" field.params)}})
-      </span>
-    {{/if}}
-    {{#if field.return}}
-      <span class="return-type">{{field.return.type}}</span>
-    {{/if}}
-    {{#if field.access}}
-      <span class="access">{{field.access}}</span>
-    {{/if}}
-    {{#if field.deprecated}}
-      <span class="access">deprecated</span>
-    {{/if}}
-  </h3>
+  {{#sticky-element top=0 bottom=0 enabled=this.stickyEnabled}}
+    <h3 class="class-field-description--link" data-anchor="{{field.name}}" role="link" onclick={{action updateAnchor field.name}}>
+      <a class="anchor">
+        {{svg-jar 'fa-link' class="class-field-description--link-hover" width="20px" height="20px"}}
+      </a>
+      <span class="{{type}}-name">{{field.name}}</span>
+      {{#if field.params}}
+        <span class="args">
+          ({{join ", " (map-by "name" field.params)}})
+        </span>
+      {{/if}}
+      {{#if field.return}}
+        <span class="return-type">{{field.return.type}}</span>
+      {{/if}}
+      {{#if field.access}}
+        <span class="access">{{field.access}}</span>
+      {{/if}}
+      {{#if field.deprecated}}
+        <span class="access">deprecated</span>
+      {{/if}}
+    </h3>
+  {{/sticky-element}}
   {{#if model.module}}
     <div class="attributes">
       <div class="attribute">

package.json

@@ -87,6 +87,7 @@
     "ember-route-action-helper": "^2.0.5",
     "ember-sinon": "^2.1.0",
     "ember-source": "~2.18.0",
+    "ember-sticky-element": "^0.2.3",
     "ember-styleguide": "^2.3.1",
     "ember-svg-jar": "^1.2.2",
     "ember-test-selectors": "^2.0.0",

yarn.lock

@@ -4759,6 +4759,13 @@ ember-in-element-polyfill@^0.1.2:
     ember-cli-version-checker "^2.1.0"
     ember-wormhole "^0.5.4"
 
+ember-in-viewport@~3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ember-in-viewport/-/ember-in-viewport-3.0.3.tgz#49c60b52525795246761742ed4495ad6cd9bf70d"
+  integrity sha512-Iw8qquApABdrP9xA8hJFaYAxz/iOGLJ0Acq4QptemEnpsHcQqAET/SKL/A1fbtDGQAVtB5+bULaJcsrzRMCteg==
+  dependencies:
+    ember-cli-babel "^6.6.0"
+
 ember-inflector@^2.0.0, ember-inflector@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ember-inflector/-/ember-inflector-2.1.0.tgz#afcb92d022a4eab58f08ff4578eafc3a1de2d09b"
@@ -4944,6 +4951,15 @@ ember-source@~2.18.0:
     jquery "^3.2.1"
     resolve "^1.3.3"
 
+ember-sticky-element@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/ember-sticky-element/-/ember-sticky-element-0.2.3.tgz#39702e0fc0f04905a7b34add61a85a9186d3d16b"
+  integrity sha512-AtKkM8zh6LK5FsPxtsDywUSodGk5c2AI03vcgk995dC5Z7DG4XLJoAwV0FZM5RYnymnYEJvOs6VTcIM8uwcX5w==
+  dependencies:
+    ember-cli-babel "^6.8.2"
+    ember-cli-htmlbars "^2.0.1"
+    ember-in-viewport "~3.0.0"
+
 ember-styleguide@^2.3.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/ember-styleguide/-/ember-styleguide-2.5.0.tgz#f0a43630c3adf527f966ae77af850a411e86e6b6"