-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Added the ability to run the code by pressing CMD/Ctrl+Enter #23
base: master
Are you sure you want to change the base?
Added the ability to run the code by pressing CMD/Ctrl+Enter #23
Conversation
client/components/submitProgram.js
Outdated
//init | ||
(() => { | ||
//DOM binding | ||
submitProgramElem = document.getElementById('submitBtn'); | ||
editorElement = document.getElementById('editor'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@EricTurf in this project I'm using pub-sub design pattern to enable proper Separation of Concerns. Each component is responsible to deal with their own DOM. submitProgram component shouldn't querySelect the codeEditor component.
The components interact with each other by dispatching events and subscribing to events.
What you have to do is in the codeEditor component, add the _keyDown event listener and the whole CMD + P
logic. When you detect that it was indeed CMD + P
you dispatch an event say codeEditor:runcode
.
Then in the submitProgram component, listen to the codeEditor:runcode
event using addEvent
helper. When the codeEditor:runcode
is triggered, you have to call the _onClick method.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For reference see how submitProgram and langSel components interact with each other.
@EricTurf, pub-sub design pattern is pretty advanced stuff, so don't worry if you feel overwhelmed. If you get stuck, ask me without any hesitance. The objective is that you learn something new. |
@itaditya Pushed changes based on your comments. |
@@ -34,10 +34,27 @@ const _onChange = event => { | |||
dispatchEvent('codeEditor:change'); | |||
}; | |||
|
|||
let MacCMDPressed = false; | |||
|
|||
const MacCommandKeys = ['MetaLeft', 'MetaRight']; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what does this do?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So for mac if you want to run the code using the Command
key you cannot use the normal event.ctrlKey + enter
to run the command.
The key to the left and right Command
keys on MAC are MetaLeft/Right
so if you pressed the Command
key it will set MacCMDPressed
to true and if your next keystroke is enter
it will run the command.
On any key that is not MetaLeft/Right
it will set MacCMDPressed
back to false
Fixes #22
CMD + ENTER
orCTRL + Enter
I also added
nodemon
as a dev dependency since everyone would need to have it installed globally. I can remove if you want.