diff --git a/frontend/javascript/modules/majorProjectForm.js b/frontend/javascript/modules/majorProjectForm.js index 28c545a..93752a0 100644 --- a/frontend/javascript/modules/majorProjectForm.js +++ b/frontend/javascript/modules/majorProjectForm.js @@ -2,49 +2,59 @@ import FetchUtil from "../utils/fetchUtil"; export default class MajorProjectForm { - tags_written = false; - - constructor(form) { - this.form = form; - this.endpoint = '/major_project/submit'; - this.render(); - } - - render() { - this.form.querySelector('input[type=submit]') - .addEventListener('click', e => this._submitForm(e)); - this.form.querySelector('input[id=skill-input]') - .addEventListener('focusout', e => this.onWriteSkill(e)); - } - - onWriteSkill(e) { - let input = document.getElementById("skill-input") - if (!this.tags_written) { - this.tags_written = true - document.getElementsByClassName("placeholder").item(0).remove() + + constructor(form) { + this.form = form; + this.endpoint = '/major_project/submit'; + this.tags_written = false; + this.tag_keys = ["Enter", "Comma", "Tab"]; + this.render(); + } + + render() { + this.form.querySelector('input[type=submit]') + .addEventListener('click', e => this._submitForm(e)); + this.form.querySelector('input[id=skill-input]') + .addEventListener('focusout', e => this.onWriteSkill(e)); + this.form.querySelector('input[id=skill-input]') + .addEventListener('keyup', e => this.onKeyPress(e)); + } + + onKeyPress(e) { + if (this.tag_keys.includes(e.code)) { + e.preventDefault(); + this.onWriteSkill(e); + } } + + onWriteSkill(e) { + let input = document.getElementById("skill-input") + if (!this.tags_written) { + this.tags_written = true + document.getElementsByClassName("placeholder").item(0).remove() + } let txt = input.value.replace(/[^a-zA-Z0-9\+\-\.\# ]/g, ''); // allowed characters list - if (txt) input.insertAdjacentHTML("beforebegin", '' + txt + ''); - input.value = ""; - input.focus(); - - } - - _submitForm(e) { - e.preventDefault(); - - let payload = { - projectName: this.form.querySelector('input[name=name]').value, - projectTldr: this.form.querySelector('input[name=tldr]').value, - projectTimeSpent: this.form.querySelector('textarea[name=time-commitment]').value, - projectDescription: - this.form.querySelector('textarea[name=description]').value - }; - - FetchUtil.postWithWarning(this.endpoint, payload, { - warningText: "You will not be able to edit your " + - "project once it has been submitted.", - successText: "Your project has been submitted." - }); - } + if (txt) input.insertAdjacentHTML("beforebegin", '' + txt + ''); + input.value = ""; + input.focus(); + + } + + _submitForm(e) { + e.preventDefault(); + + let payload = { + projectName: this.form.querySelector('input[name=name]').value, + projectTldr: this.form.querySelector('input[name=tldr]').value, + projectTimeSpent: this.form.querySelector('textarea[name=time-commitment]').value, + projectDescription: + this.form.querySelector('textarea[name=description]').value + }; + + FetchUtil.postWithWarning(this.endpoint, payload, { + warningText: "You will not be able to edit your " + + "project once it has been submitted.", + successText: "Your project has been submitted." + }); + } } diff --git a/frontend/stylesheets/pages/_major-project.scss b/frontend/stylesheets/pages/_major-project.scss index 4b6e098..7bb8992 100644 --- a/frontend/stylesheets/pages/_major-project.scss +++ b/frontend/stylesheets/pages/_major-project.scss @@ -13,15 +13,24 @@ } .form-skilltags { - display: block; + box-shadow: inset 0 -1px 0 #ddd; + border: none; + padding: 0; +} + +.placeholder { + color: #bbb; + font-size: 16px; +} + +.skill-tag { + display: block; float: left; background: #d979e3; padding: 5px 10px; - box-shadow: inset 0 -1px 0 #ddd; - border: none; } -.form-skilltags:after { +.skill-tag:after { position: absolute; content: "×"; border: 1px solid; @@ -29,9 +38,4 @@ padding: 0 4px; margin: 3px 0 10px 7px; font-size: 10px; -} - -.placeholder { - color: #bbb; - font-size: 16px; } \ No newline at end of file