Skip to content

Commit

Permalink
better control over submit song form
Browse files Browse the repository at this point in the history
  • Loading branch information
@mholta
mholta committed Jul 10, 2021
1 parent 1a08340 commit c333a9c
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 18 deletions.
3 changes: 0 additions & 3 deletions pages/song/song.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,7 @@ const initializeSongPage = (songTemplate) => {
const setState = (newState) => (state[0] = newState);

const setColumns = (columnCount) => {
console.log(getState());
setState({ ...getState(), columns: columnCount ?? getState().columns });

console.log(getState());
const targetSongBody = target.querySelector(".cp-song-body");
targetSongBody.style.columns = 1;
if (columnCount !== 1)
Expand Down
19 changes: 17 additions & 2 deletions pages/submitSong/contribute.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,24 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Contribute</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="fonts.css" />
<link rel="stylesheet" type="text/css" media="screen" href="webflow.css" />
<link
rel="stylesheet"
type="text/css"
media="screen"
href="../css/fonts.css"
/>
<link
rel="stylesheet"
type="text/css"
media="screen"
href="../css/webflow.css"
/>
<link rel="stylesheet" type="text/css" media="screen" href="extra.css" />
<style>
.hide {
display: none;
}
</style>
</head>
<body class="dm-body">
<div class="dm-root">
Expand Down
89 changes: 76 additions & 13 deletions pages/submitSong/contribute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,12 +601,12 @@ const initializeContributeForm = () => {
const Textarea = Element("textarea", "dm-form__input-field", "textarea");
Textarea.id = id;
Textarea.name = name;
Textarea.style.minHeight = rowsHight ?? 6 + "em";
Textarea.style.minHeight = (rowsHight ?? 6) + "em";
Textarea.required = required ?? false;

Textarea.addEventListener("input", () => {
Textarea.style.height = "5px";
Textarea.style.height = Textarea.scrollHeight + "px";
Textarea.style.height = "10px";
Textarea.style.height = Textarea.scrollHeight + 20 + "px";
});

Wrapper.appendChild(Label);
Expand Down Expand Up @@ -647,7 +647,11 @@ const initializeContributeForm = () => {
SongWrapper.appendChild(Element);
break;
case TEXTAREA:
Element = TextareaWithLabel({ ...elementInfo, rowsHight: 5 });
console.log(songFieldObject);
Element = TextareaWithLabel({
...elementInfo,
rowsHight: songFieldObject.textareaRows,
});
SongWrapper.appendChild(Element);
break;
case DATE:
Expand Down Expand Up @@ -729,6 +733,28 @@ const initializeContributeForm = () => {

return hasValidState;
};
/* TODO: Implement
Object.entries(formFields).forEach(([key, songFieldObject], index) => {
if (songFieldObject?.DOMElement?.querySelectorAll("input"))
songFieldObject.DOMElement.querySelectorAll("input").forEach((el) => {
el.addEventListener("keydown", (e) => {
if (e.keyCode === 13) e.preventDefault();
if (index < Object.entries(formFields).length - 1) {
if (Object.entries(formFields)[index + 1].DOMElement)
Object.entries(formFields)
[index + 1].DOMElement.querySelector("input")
.select();
console.log(
"aell",
Object.entries(formFields)
[index + 1][1].DOMElement?.querySelector("input")
?.select()
);
}
});
});
}); */

return {
DOMElement: SongWrapper,
Expand Down Expand Up @@ -765,7 +791,18 @@ const initializeContributeForm = () => {
tempo: "",
time: "",
copyright: "",
chordProBody: "",
chordProBody: `Vers 1:
E A
Dette er et eksempel på en sang.
[B]Du kan skrive inn a[Dsus4]kkordene
både i klammeparantes i teksten og over.
Både [H]H og [B]B kan brukes.
Slik skriver du instrumentaler
Intro:
| A . . . | B . . E/G# | (x2)
`,
chordProSum: "",
},
};
Expand Down Expand Up @@ -1469,12 +1506,13 @@ const initializeContributeForm = () => {
},
chordProBody: {
labelText: "Sang",
detailesLabelText: null,
detailesLabelText: "Her skriver du inn tekst og akkorder.",
inputType: TEXTAREA,
required: true,
DOMElement: null,
reRenderSongList: true,
triggerOnInput: true,
textareaRows: 20,
},
};

Expand Down Expand Up @@ -1514,7 +1552,7 @@ const initializeContributeForm = () => {
"dm-contribute-form__tab-button-wrapper"
);
ArtistTabButtonWrapper.innerHTML = "Steg 1";
const ArtistTabButton = Element("a", "dm-button");
const ArtistTabButton = Element("button", "dm-button");
ArtistTabButton.innerHTML = "Artist";
ArtistTabButtonWrapper.appendChild(ArtistTabButton);
TabButtonsWrapper.appendChild(ArtistTabButtonWrapper);
Expand All @@ -1524,7 +1562,7 @@ const initializeContributeForm = () => {
"dm-contribute-form__tab-button-wrapper"
);
AlbumTabButtonWrapper.innerHTML = "Steg 2";
const AlbumTabButton = Element("a", "dm-button");
const AlbumTabButton = Element("button", "dm-button");
AlbumTabButton.innerHTML = "Album";
AlbumTabButtonWrapper.appendChild(AlbumTabButton);
TabButtonsWrapper.appendChild(AlbumTabButtonWrapper);
Expand All @@ -1534,7 +1572,7 @@ const initializeContributeForm = () => {
"dm-contribute-form__tab-button-wrapper"
);
SongsTabButtonWrapper.innerHTML = "Steg 3";
const SongsTabButton = Element("a", "dm-button");
const SongsTabButton = Element("button", "dm-button");
SongsTabButton.innerHTML = "Sanger";
SongsTabButtonWrapper.appendChild(SongsTabButton);
TabButtonsWrapper.appendChild(SongsTabButtonWrapper);
Expand All @@ -1544,7 +1582,7 @@ const initializeContributeForm = () => {
"dm-contribute-form__tab-button-wrapper"
);
ChartsTabButtonWrapper.innerHTML = "Steg 4";
const ChartTabButton = Element("a", "dm-button");
const ChartTabButton = Element("button", "dm-button");
ChartTabButton.innerHTML = "Blekker";
ChartsTabButtonWrapper.appendChild(ChartTabButton);
TabButtonsWrapper.appendChild(ChartsTabButtonWrapper);
Expand All @@ -1554,7 +1592,7 @@ const initializeContributeForm = () => {
"dm-contribute-form__tab-button-wrapper"
);
AttatchmentsTabButtonWrapper.innerHTML = "Steg 5";
const AttatchmentsTabButton = Element("a", "dm-button");
const AttatchmentsTabButton = Element("button", "dm-button");
AttatchmentsTabButton.innerHTML = "Vedlegg og fullfør";
AttatchmentsTabButton.addEventListener("click", () => {
setWebflowFormValues();
Expand All @@ -1572,7 +1610,7 @@ const initializeContributeForm = () => {
RightButtonWraper.style.marginLeft = "auto";
TabButtonsWrapper.appendChild(RightButtonWraper);

const ClearAllDataButton = Element("a", "dm-button");
const ClearAllDataButton = Element("button", "dm-button");
RightButtonWraper.appendChild(ClearAllDataButton);
ClearAllDataButton.innerHTML = "Nullstill skjema";
ClearAllDataButton.onclick = () => {
Expand Down Expand Up @@ -1610,6 +1648,7 @@ const initializeContributeForm = () => {

const tabState = {
currentTabIndex: 0,
validStatesArray: [false, false, false, false, false],
tabs: [
{
index: 0,
Expand All @@ -1631,6 +1670,7 @@ const initializeContributeForm = () => {
DOMContent: songsTabContent.TabWrapper,
hasValidState: () => {
let validState = true;
if (!getState().songs.length) return false;
getState().songs.forEach((song) => {
if (!song.validState) {
validState = false;
Expand Down Expand Up @@ -1669,18 +1709,41 @@ const initializeContributeForm = () => {

const renderState = () => {
tabState.tabs.forEach((tab) => {
// Disable tabs after not valid tab
if (tab.hasValidState && tab.hasValidState()) {
tab.DOMButton.classList.remove("error");
tabState.validStatesArray[tab.index] = true;
} else {
tab.DOMButton.classList.add("error");
tabState.validStatesArray[tab.index] = false;
}

if (tab.index === tabState.currentTabIndex) {
tab.DOMButton.classList.add("selected");
tab.DOMContent.classList.remove("display-none");
if (tab.hasValidState && tab.hasValidState()) {
tab.DOMButton.classList.remove("error");
tabState.validStatesArray[tab.index] = true;
} else {
tab.DOMButton.classList.add("error");
tabState.validStatesArray[tab.index] = false;
}
} else {
console.log(tab.DOMButton, tabState.validStatesArray);
if (
tabState.validStatesArray.indexOf(false) !== -1 &&
tabState.validStatesArray.indexOf(false) < tab.index
) {
tab.DOMButton.disabled = true;
} else {
tab.DOMButton.disabled = false;
}
tab.DOMButton.classList.remove("selected");
tab.DOMContent.classList.add("display-none");
if (tab.hasValidState && tab.hasValidState()) {
if (
(tab.hasValidState && tab.hasValidState()) ||
tabState.validStatesArray.indexOf(false) < tab.index
) {
tab.DOMButton.classList.remove("error");
} else {
tab.DOMButton.classList.add("error");
Expand Down
84 changes: 84 additions & 0 deletions pages/submitSong/extra.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,13 @@
border-color: #ddd;
}

.dm-contribute-form__tab-button-wrapper > .dm-button:disabled {
background-color: #333;
border-color: #333;
color: #888;
cursor: not-allowed;
}

.dm-contribute-form__tab-button-wrapper > .dm-button.error::after,
.dm-contribute-form__tab-button-wrapper > .dm-button.error.selected::after {
content: "";
Expand Down Expand Up @@ -127,3 +134,80 @@
textarea {
overflow: auto;
}

.cp-song-title {
font-weight: bold;
font-size: 2rem;
line-height: 1;
margin-bottom: 0px;
}

.cp-song-artist {
font-size: 1.4rem;
padding-bottom: 0.5rem;
}

.cp-heading {
font-weight: bold;
}

.cp-section {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
margin: 1px;
}

.cp-meta-wrapper {
position: relative;
}

.cp-key-tempo-wrapper {
position: absolute;
top: 0.4rem;
right: 2.6rem;
font-size: 1.4rem;
}

.chord-pro-preview.open > * {
max-width: 40rem;
background-color: #222;
height: 80%;
}

.monofont {
font-family: "Courier New", Courier, monospace;
}
table,
tbody,
tr,
td {
padding: 0;
margin: 0;
}

td {
line-height: 1.2;
margin-bottom: 0.8em;
}

table {
border-collapse: collapse;
}

td {
display: inline-block;
}

.cp-heading {
font-weight: bold;
}

.cp-chord {
font-weight: 600;
}

.cp-copyright-wrapper {
font-size: 0.7em;
font-weight: 600;
}

0 comments on commit c333a9c

Please sign in to comment.