Koenig - Sticky card icons (#1013)

refs TryGhost/Ghost#9505
- use `ember-sticky-element` to stick card icons in top left when scrolling
- pass an `headerOffset` down from the `{{gh-editor}}` component through Koenig and the card components so that it can be used for adjustments where necessary
    - calculate `headerHeight` in `{{gh-editor}}` any time we change the header class

app/components/gh-editor.js

@@ -23,6 +23,7 @@ export default Component.extend({
     // Internal attributes
     droppedFiles: null,
     headerClass: '',
+    headerHeight: 0,
     imageExtensions: IMAGE_EXTENSIONS,
     imageMimeTypes: IMAGE_MIME_TYPES,
     isDraggedOver: false,
@@ -107,6 +108,20 @@ export default Component.extend({
             return;
         }
 
+        // grab height of header so that we can pass it as an offset to other
+        // editor components
+        run.scheduleOnce('afterRender', this, function () {
+            if (this.headerClass) {
+                let headerElement = this.element.querySelector(`.${this.headerClass}`);
+                if (headerElement) {
+                    let height = headerElement.offsetHeight;
+                    return this.set('headerHeight', height);
+                }
+            }
+
+            this.set('headerHeight', 0);
+        });
+
         if ($editorTitle.length > 0) {
             let boundingRect = $editorTitle[0].getBoundingClientRect();
             let maxRight = window.innerWidth - this._viewActionsWidth;

app/templates/components/gh-editor.hbs

@@ -1,5 +1,6 @@
 {{yield (hash
     headerClass=headerClass
+    headerHeight=headerHeight
     isDraggedOver=isDraggedOver
     isFullScreen=isFullScreen
     droppedFiles=droppedFiles

app/templates/components/gh-koenig-editor.hbs

@@ -17,6 +17,7 @@
         placeholder=bodyPlaceholder
         autofocus=bodyAutofocus
         spellcheck=true
+        headerOffset=headerOffset
         onChange=(action "onBodyChange")
         didCreateEditor=(action "onEditorCreated")
         cursorDidExitAtTop=(action "focusTitle")

app/templates/editor.hbs

@@ -55,6 +55,7 @@
                 bodyPlaceholder="Begin writing your story..."
                 bodyAutofocus=shouldFocusEditor
                 onBodyChange=(action "updateScratch")
+                headerOffset=editor.headerHeight
             }}
 
         {{else}}

lib/koenig-editor/addon/components/koenig-card-html.js

@@ -12,6 +12,7 @@ export default Component.extend({
     payload: null,
     isSelected: false,
     isEditing: false,
+    headerOffset: 0,
 
     // closure actions
     editCard() {},

lib/koenig-editor/addon/components/koenig-card-markdown.js

@@ -16,6 +16,7 @@ export default Component.extend({
     payload: null,
     isSelected: false,
     isEditing: false,
+    headerOffset: 0,
 
     // internal attrs
     bottomOffset: 0,

lib/koenig-editor/addon/components/koenig-card.js

@@ -18,6 +18,7 @@ export default Component.extend({
     isSelected: false,
     isEditing: false,
     hasEditMode: true,
+    headerOffset: 0,
 
     // properties
     showToolbar: false,
@@ -59,6 +60,10 @@ export default Component.extend({
         return htmlSafe(styles.join('; '));
     }),
 
+    iconTop: computed('headerOffset', function () {
+        return this.headerOffset + 24;
+    }),
+
     didReceiveAttrs() {
         this._super(...arguments);
 

lib/koenig-editor/addon/components/koenig-editor.js

@@ -89,6 +89,7 @@ export default Component.extend({
     spellcheck: true,
     options: null,
     scrollContainer: '',
+    headerOffset: 0,
 
     // internal properties
     editor: null,

lib/koenig-editor/addon/templates/components/koenig-card-html.hbs

@@ -1,6 +1,7 @@
 {{#koenig-card
     icon="koenig/card-indicator-html"
     class=(concat (kg-style "container-card") " mih10 miw-100 relative koenig-card-html-rendered")
+    headerOffset=headerOffset
     toolbar=toolbar
     isSelected=isSelected
     isEditing=isEditing

lib/koenig-editor/addon/templates/components/koenig-card-markdown.hbs

@@ -1,6 +1,7 @@
 {{#koenig-card
     icon="koenig/card-indicator-markdown"
     class=(concat (kg-style "container-card") " koenig-card-markdown-rendered")
+    headerOffset=headerOffset
     toolbar=toolbar
     isSelected=isSelected
     isEditing=isEditing

lib/koenig-editor/addon/templates/components/koenig-card.hbs

@@ -1,4 +1,8 @@
-{{#if icon}}{{svg-jar icon class=iconClass}}{{/if}}
+{{#if icon}}
+    {{#sticky-element top=iconTop bottom=36}}
+        {{svg-jar icon class=iconClass}}
+    {{/sticky-element}}
+{{/if}}
 
 {{yield}}
 

lib/koenig-editor/addon/templates/components/koenig-editor.hbs

@@ -60,6 +60,7 @@
             payload=card.payload
             env=card.env
             options=card.options
+            headerOffset=headerOffset
             saveCard=(action card.env.save)
             cancelCard=(action card.env.cancel)
             removeCard=(action card.env.remove)

package.json

@@ -88,7 +88,7 @@
     "ember-simple-auth": "1.6.0",
     "ember-sinon": "2.1.0",
     "ember-source": "3.1.1",
-    "ember-sticky-element": "^0.2.0",
+    "ember-sticky-element": "0.2.1",
     "ember-svg-jar": "1.1.1",
     "ember-test-selectors": "1.0.0",
     "ember-truth-helpers": "2.0.0",

yarn.lock

@@ -4191,9 +4191,9 @@ [email protected]:
     jquery "^3.3.1"
     resolve "^1.5.0"
 
-ember-sticky-element@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ember-sticky-element/-/ember-sticky-element-0.2.0.tgz#0f85b29e3d31313b05094cca6fe0ab152caab668"
+[email protected].1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ember-sticky-element/-/ember-sticky-element-0.2.1.tgz#ba120f4c81df27c66aa556605c84f19d561f293f"
   dependencies:
     ember-cli-babel "^6.8.2"
     ember-cli-htmlbars "^2.0.1"