Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/forum/forum-post-new.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@
<a href='#' class='btn btn-default w-auto me-2' {{on 'click' cancel}}>Annuleren</a>
<a href='#' class='btn btn-secondary w-auto' {{on 'click' save}}>Opslaan</a>
</div>
</div>
</div>
58 changes: 56 additions & 2 deletions app/components/forum/forum-post-new.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
// app/components/forum/forum-post-new.js
import { inject as service } from '@ember/service';
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { modifier } from 'ember-apply'; // Import modifier for Glimmer components lifecycle

// todo: incorporate the model-save-util into components?
export default class ForumPostNewComponent extends Component {
@service store;
@service flashNotice;

@tracked focusInTextArea = false;

constructor() {
super(...arguments);
// Bind functions if using them as direct event handlers via modifiers
this.handleFocusIn = this.handleFocusIn.bind(this);
this.handleFocusOut = this.handleFocusOut.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
}

get content() {
return this.args.content;
}
Expand All @@ -15,6 +27,48 @@
this.args.setContent(content);
}

// Modifier to attach and remove event listeners
// This ensures listeners are correctly managed with component lifecycle
@modifier
setupTextAreaListeners(element) {
// element will be the <textarea> itself because we'll apply this modifier directly to it
element.addEventListener('focusin', this.handleFocusIn);
element.addEventListener('focusout', this.handleFocusOut);
element.addEventListener('keydown', this.handleKeyDown); // Add keydown listener

return () => {
element.removeEventListener('focusin', this.handleFocusIn);
element.removeEventListener('focusout', this.handleFocusOut);
element.removeEventListener('keydown', this.handleKeyDown);
};
}

@action
handleFocusIn() {
this.focusInTextArea = true;
// No action here other than setting tracked property
}

@action
handleFocusOut() {
this.focusInTextArea = false;
// No action here other than setting tracked property
}

@action
handleKeyDown(event) {
// These are the shortcut keys from your route's keyboardShortcuts object
// You might need to make these more dynamic or pass them down from the route
// For now, let's hardcode the keys that cause issues (left, up, right, down)
const shortcutKeys = ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'];

if (shortcutKeys.includes(event.key)) {
event.stopPropagation(); // Stop the event from bubbling up to the document
// If stopping propagation isn't enough, you might also need preventDefault
// event.preventDefault(); // Prevents default browser behavior for the key (e.g., cursor movement)
}
}

@action
async save() {
let { content, thread } = this.args;
Expand All @@ -33,4 +87,4 @@
cancel() {
this.content = '';
}
}
}

Check failure on line 90 in app/components/forum/forum-post-new.js

View workflow job for this annotation

GitHub Actions / Lint

Insert `⏎`
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
this.router.on('routeDidChange', () => {
const thread = this.modelFor('forum.categories.category.threads.thread');
if (thread) {
// only mark as read if we are in a thread
this.fetch.fetch(`/forum/threads/${thread.id}/mark_read`, {
method: 'POST',
});
Expand Down Expand Up @@ -68,7 +67,10 @@
}

activate() {
bindKeyboardShortcuts(this);
// CHANGED HERE: Use the specific ID of the textarea
bindKeyboardShortcuts(this, {
except: '#forum-post-new',
});
}

deactivate() {
Expand All @@ -84,4 +86,4 @@
goToNextPage() {
this.controller.send('goToNextPage');
}
}
}

Check failure on line 89 in app/routes/forum/categories/category/threads/thread/posts/index.js

View workflow job for this annotation

GitHub Actions / Lint

Insert `⏎`
Loading