From fffa5d71258dd71f1d3ea9c9efc05a8ef8f0c0ed Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 2 May 2018 17:31:17 +0100
Subject: [PATCH] Koenig - Remove reliance on CSS class selectors

no issue
- switch to using data attributes instead of class names to target elements to avoid problems if CSS class names change or are removed
---
 lib/koenig-editor/addon/components/koenig-editor.js       | 6 +++---
 lib/koenig-editor/addon/components/koenig-slash-menu.js   | 2 +-
 .../addon/templates/components/koenig-editor.hbs          | 4 ++--
 .../addon/templates/components/koenig-plus-menu.hbs       | 8 ++++----
 .../addon/templates/components/koenig-slash-menu.hbs      | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/lib/koenig-editor/addon/components/koenig-editor.js b/lib/koenig-editor/addon/components/koenig-editor.js
index 63713c191..f44113c00 100644
--- a/lib/koenig-editor/addon/components/koenig-editor.js
+++ b/lib/koenig-editor/addon/components/koenig-editor.js
@@ -337,7 +337,7 @@ export default Component.extend({
 
     didInsertElement() {
         this._super(...arguments);
-        let editorElement = this.element.querySelector('.koenig-editor__editor');
+        let editorElement = this.element.querySelector('[data-kg="editor"]');
 
         this._pasteHandler = run.bind(this, this.handlePaste);
         editorElement.addEventListener('paste', this._pasteHandler);
@@ -349,7 +349,7 @@ export default Component.extend({
         this._super(...arguments);
         let editor = this.editor;
         if (!editor.hasRendered) {
-            let editorElement = this.element.querySelector('.koenig-editor__editor');
+            let editorElement = this.element.querySelector('[data-kg="editor"]');
             this._isRenderingEditor = true;
             editor.render(editorElement);
             this._isRenderingEditor = false;
@@ -358,7 +358,7 @@ export default Component.extend({
 
     willDestroyElement() {
         let editor = this.editor;
-        let editorElement = this.element.querySelector('.koenig-editor__editor');
+        let editorElement = this.element.querySelector('[data-kg="editor"]');
 
         editorElement.removeEventListener('paste', this._pasteHandler);
         editor.destroy();
diff --git a/lib/koenig-editor/addon/components/koenig-slash-menu.js b/lib/koenig-editor/addon/components/koenig-slash-menu.js
index b90710ff7..d16d5738c 100644
--- a/lib/koenig-editor/addon/components/koenig-slash-menu.js
+++ b/lib/koenig-editor/addon/components/koenig-slash-menu.js
@@ -198,7 +198,7 @@ export default Component.extend({
 
         // clicks on the menu but not on a button should be ignored so that the
         // cursor position isn't lost
-        } else if (!event.target.closest('.koenig-cardmenu-card')) {
+        } else if (!event.target.closest('[data-kg="cardmenu-card"]')) {
             event.preventDefault();
         }
     },
diff --git a/lib/koenig-editor/addon/templates/components/koenig-editor.hbs b/lib/koenig-editor/addon/templates/components/koenig-editor.hbs
index 2695e13ab..c49519c8b 100644
--- a/lib/koenig-editor/addon/templates/components/koenig-editor.hbs
+++ b/lib/koenig-editor/addon/templates/components/koenig-editor.hbs
@@ -1,5 +1,5 @@
-<div class="koenig-editor__editor-wrapper">
-    <div class="koenig-editor__editor"></div>
+<div class="koenig-editor__editor-wrapper" data-kg="editor-wrapper">
+    <div class="koenig-editor__editor" data-kg="editor"></div>
 </div>
 
 {{!-- pop-up markup toolbar is shown when there's a selection --}}
diff --git a/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs b/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
index 23dd41bff..00b3cf28e 100644
--- a/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
+++ b/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
@@ -11,19 +11,19 @@
         <div class="koenig-cardmenu-divider">
             Primary
         </div> --}}
-        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "markdown" on="click"}}>
+        <div class="{{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "markdown" on="click"}} data-kg="cardmenu-card">
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/markdown" class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">Markdown</div>
         </div>
-        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "image" on="click"}}>
+        <div class="{{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "image" on="click"}} data-kg="cardmenu-card">
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/image" class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">Image</div>
         </div>
-        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "html" on="click"}}>
+        <div class="{{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "html" on="click"}} data-kg="cardmenu-card">
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/html" class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">HTML</div>
         </div>
-        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "hr" on="click"}}>
+        <div class="{{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "hr" on="click"}} data-kg="cardmenu-card">
             <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/divider" class="w8 h8 stroke-midgrey"}}</div>
             <div class="{{kg-style "cardmenu-label"}}">Divider</div>
         </div>
diff --git a/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs b/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
index 658b31812..9392170be 100644
--- a/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
+++ b/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
@@ -1,7 +1,7 @@
 {{#if showMenu}}
     <div class="koenig-cardmenu {{kg-style "cardmenu"}}">
         {{#each items as |item|}}
-            <div class="koenig-cardmenu-card {{if item.selected "kg-blue-selected"}} {{kg-style "cardmenu-card"}}" {{action "itemClicked" item on="click"}}>
+            <div class="{{if item.selected "kg-blue-selected"}} {{kg-style "cardmenu-card"}}" {{action "itemClicked" item on="click"}} data-kg="cardmenu-card">
                 <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar item.icon class="w8 h8 stroke-midgrey"}}</div>
                 <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
             </div>