mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
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
This commit is contained in:
parent
8d7f13b285
commit
fffa5d7125
|
@ -337,7 +337,7 @@ export default Component.extend({
|
||||||
|
|
||||||
didInsertElement() {
|
didInsertElement() {
|
||||||
this._super(...arguments);
|
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);
|
this._pasteHandler = run.bind(this, this.handlePaste);
|
||||||
editorElement.addEventListener('paste', this._pasteHandler);
|
editorElement.addEventListener('paste', this._pasteHandler);
|
||||||
|
@ -349,7 +349,7 @@ export default Component.extend({
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
let editor = this.editor;
|
let editor = this.editor;
|
||||||
if (!editor.hasRendered) {
|
if (!editor.hasRendered) {
|
||||||
let editorElement = this.element.querySelector('.koenig-editor__editor');
|
let editorElement = this.element.querySelector('[data-kg="editor"]');
|
||||||
this._isRenderingEditor = true;
|
this._isRenderingEditor = true;
|
||||||
editor.render(editorElement);
|
editor.render(editorElement);
|
||||||
this._isRenderingEditor = false;
|
this._isRenderingEditor = false;
|
||||||
|
@ -358,7 +358,7 @@ export default Component.extend({
|
||||||
|
|
||||||
willDestroyElement() {
|
willDestroyElement() {
|
||||||
let editor = this.editor;
|
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);
|
editorElement.removeEventListener('paste', this._pasteHandler);
|
||||||
editor.destroy();
|
editor.destroy();
|
||||||
|
|
|
@ -198,7 +198,7 @@ export default Component.extend({
|
||||||
|
|
||||||
// clicks on the menu but not on a button should be ignored so that the
|
// clicks on the menu but not on a button should be ignored so that the
|
||||||
// cursor position isn't lost
|
// cursor position isn't lost
|
||||||
} else if (!event.target.closest('.koenig-cardmenu-card')) {
|
} else if (!event.target.closest('[data-kg="cardmenu-card"]')) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="koenig-editor__editor-wrapper">
|
<div class="koenig-editor__editor-wrapper" data-kg="editor-wrapper">
|
||||||
<div class="koenig-editor__editor"></div>
|
<div class="koenig-editor__editor" data-kg="editor"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{!-- pop-up markup toolbar is shown when there's a selection --}}
|
{{!-- pop-up markup toolbar is shown when there's a selection --}}
|
||||||
|
|
|
@ -11,19 +11,19 @@
|
||||||
<div class="koenig-cardmenu-divider">
|
<div class="koenig-cardmenu-divider">
|
||||||
Primary
|
Primary
|
||||||
</div> --}}
|
</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-icon"}}">{{svg-jar "koenig/markdown" class="w8 h8 stroke-midgrey"}}</div>
|
||||||
<div class="{{kg-style "cardmenu-label"}}">Markdown</div>
|
<div class="{{kg-style "cardmenu-label"}}">Markdown</div>
|
||||||
</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-icon"}}">{{svg-jar "koenig/image" class="w8 h8 stroke-midgrey"}}</div>
|
||||||
<div class="{{kg-style "cardmenu-label"}}">Image</div>
|
<div class="{{kg-style "cardmenu-label"}}">Image</div>
|
||||||
</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-icon"}}">{{svg-jar "koenig/html" class="w8 h8 stroke-midgrey"}}</div>
|
||||||
<div class="{{kg-style "cardmenu-label"}}">HTML</div>
|
<div class="{{kg-style "cardmenu-label"}}">HTML</div>
|
||||||
</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-icon"}}">{{svg-jar "koenig/divider" class="w8 h8 stroke-midgrey"}}</div>
|
||||||
<div class="{{kg-style "cardmenu-label"}}">Divider</div>
|
<div class="{{kg-style "cardmenu-label"}}">Divider</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{{#if showMenu}}
|
{{#if showMenu}}
|
||||||
<div class="koenig-cardmenu {{kg-style "cardmenu"}}">
|
<div class="koenig-cardmenu {{kg-style "cardmenu"}}">
|
||||||
{{#each items as |item|}}
|
{{#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-icon"}}">{{svg-jar item.icon class="w8 h8 stroke-midgrey"}}</div>
|
||||||
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
|
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue