mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 12:21:36 +03: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
4c05d618bd
commit
1096e8c3d2
@ -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();
|
||||
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
@ -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 --}}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user