tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues Releases Wiki Activity

Koenig - Remove reliance on CSS class selectors

Browse source 
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
This commit is contained in:
Kevin Ansfield 2018-05-02 17:31:17 +01:00
parent 8d7f13b285
commit fffa5d7125
5 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/koenig-editor/addon/components/koenig-editor.js
View file

@ -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();

2
lib/koenig-editor/addon/components/koenig-slash-menu.js
View file

@ -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();
}
},

4
lib/koenig-editor/addon/templates/components/koenig-editor.hbs
View file

@ -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 --}}

8
lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
View file

@ -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>

2
lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
View file

@ -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>