Skip to content

Commit

Permalink
Merge pull request #100 from otacke/minor-refactoring
Browse files Browse the repository at this point in the history 
Minor refactoring
  • Loading branch information
@otacke
otacke authored Sep 12, 2024
2 parents 35c5516 + 5352c93 commit 05520bd
Show file tree
Hide file tree
Showing 23 changed files with 891 additions and 870 deletions.
3 changes: 1 addition & 2 deletions src/entries/dist.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import '@styles/h5p-crossword.scss';
import Crossword from '@scripts/h5p-crossword';
import Crossword from '@scripts/h5p-crossword.js';

// Load library
H5P.Crossword = Crossword;
3 changes: 2 additions & 1 deletion src/scripts/h5p-crossword-cell.js → src/scripts/components/h5p-crossword-cell.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Util from '@services/util';
import Util from '@services/util.js';
import './h5p-crossword-cell.scss';

/** Class representing a cell */
export default class CrosswordCell {
Expand Down
222 changes: 222 additions & 0 deletions src/scripts/components/h5p-crossword-cell.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
@import '@styles/h5p-crossword-main';

.h5p-crossword-cell {
background-color: white;
margin: 0;
outline: none;
padding: 0;
position: relative;
-webkit-user-select: none; /* Safari wants special treatment */
user-select: none;

&::after {
content: '';
display: block;
margin-top: 100%;
}

.h5p-crossword-cell-solution-word-circle {
background-color: transparent;
border: 0.075em solid #bbbbbb;
border-radius: 50%;
height: calc(100% - 0.15em);
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 0.15em);
}

.h5p-crossword-cell-solution-word-marker {
background-color: white;
bottom: 0;
color: #606060;
font-size: 0.5em;
line-height: 0.5em;
padding: 0.4em 0.3em 0.4em 0.4em;
position: absolute;
right: 0;
}

.h5p-crossword-cell-content-wrapper {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;

.h5p-crossword-cell-content {
background-color: transparent;
border: 0;
caret-color: transparent;
color: transparent;
font-size: 1.2em;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
text-align: center;
text-anchor: middle;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 1;
}

.h5p-crossword-cell-canvas {
background-color: transparent;
border: 0;
color: #000000;
font-size: 1.2em;
margin: 0;
padding: 0;
text-align: center;
z-index: 1;
}

.h5p-crossword-cell-clue-id-marker {
background-color: white;
color: #606060;
font-size: 0.5em;
left: 0;
line-height: 0.5em;
padding: 0.4em 0.4em 0.4em 0.3em;
position: absolute;
top: 0;
}
}

/** TODO: Clean this long list of rules up */
&.h5p-crossword-highlight-normal {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: #3e8de8;
}
}

&.h5p-crossword-solution-correct {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: $color-correct-light;
}

&.h5p-crossword-highlight-normal {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: #75a1a9;
}
}
}

&.h5p-crossword-solution-wrong {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: $color-wrong-light;
}
}

&.h5p-crossword-solution-neutral {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: $color-neutral-light;
}
}

&.h5p-crossword-solution-wrong.h5p-crossword-highlight-normal {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: #c0a1bf;
}
}

&.h5p-crossword-solution-neutral.h5p-crossword-highlight-normal {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
background: #ddc0a4;
}
}

&:not(.h5p-crossword-solution-correct):not(.h5p-crossword-solution-wrong):not(.h5p-crossword-solution-neutral).h5p-crossword-highlight-normal {
background-color: #3e8de8;
}

&.h5p-crossword-solution-correct.h5p-crossword-highlight-normal {
background-color: #75a1a9;
}

&.h5p-crossword-solution-wrong.h5p-crossword-highlight-normal {
background-color: #c0a1bf;
}

&.h5p-crossword-solution-neutral.h5p-crossword-highlight-normal {
background-color: #ddc0a4;
}

&.h5p-crossword-highlight-focus {
border-color: rgba(232, 153, 62, 0.8);
box-shadow: 0 0 0.2em 0.2em #e8993e;
z-index: 1;

.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
color: white;
}
}

&.h5p-crossword-highlight-normal {
.h5p-crossword-cell-clue-id-marker,
.h5p-crossword-cell-solution-word-marker {
color: #e0e0e0;
}
}

&.h5p-crossword-highlight-focus {
color: white;
}

&.h5p-crossword-solution-correct {
background: $color-correct-light;

.h5p-crossword-cell-canvas {
color: $color-correct-dark;
}
}

&.h5p-crossword-highlight-normal .h5p-crossword-cell-canvas {
color: white;
}

&.h5p-crossword-solution-wrong {
background: $color-wrong-light;
}

&.h5p-crossword-solution-neutral {
background: $color-neutral-light;
}

&.h5p-crossword-solution-wrong .h5p-crossword-cell-canvas {
color: $color-wrong-dark;
}

&.h5p-crossword-solution-neutral:not(.h5p-crossword-highlight-normal) .h5p-crossword-cell-canvas {
color: $color-neutral-dark;
}

&.h5p-crossword-solution-correct .h5p-crossword-cell-solution-word-circle {
border-color: $color-correct-dark;
}

&.h5p-crossword-solution-wrong .h5p-crossword-cell-solution-word-circle {
border-color: $color-wrong-dark;
}

&.h5p-crossword-solution-neutral .h5p-crossword-cell-solution-word-circle {
border-color: $color-neutral-dark;
}
}

9 changes: 5 additions & 4 deletions src/scripts/h5p-crossword-char-list.js → ...pts/components/h5p-crossword-char-list.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Util from '@services/util';
import Util from '@services/util.js';
import './h5p-crossword-char-list.scss';

/** Class representing the content */
export default class CrosswordCharList {
Expand Down Expand Up @@ -36,7 +37,7 @@ export default class CrosswordCharList {
buildListContainer(params) {
const content = document.createElement('div');
content.classList.add('h5p-crossword-input-fields-group-solution-container');
content.classList.add('h5p-crossword-display-none');
content.classList.add('display-none');

const listWrapper = document.createElement('div');
listWrapper.classList.add('h5p-crossword-input-fields-group-solution-inner');
Expand Down Expand Up @@ -208,14 +209,14 @@ export default class CrosswordCharList {
* Show solution.
*/
show() {
this.content.classList.remove('h5p-crossword-display-none');
this.content.classList.remove('display-none');
}

/**
* Hide solution.
*/
hide() {
this.content.classList.add('h5p-crossword-display-none');
this.content.classList.add('display-none');
}

/**
Expand Down
91 changes: 91 additions & 0 deletions src/scripts/components/h5p-crossword-char-list.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
@import '@styles/h5p-crossword-main';

.h5p-crossword-input-fields-group-solution-container {
position: relative;
width: calc(100% - .5em);
left: .25em;

.h5p-crossword-input-fields-group-solution-inner {
background: #fbfbfb;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
font-size: 0.9em;
line-height: 1em;
text-align: left;
position: relative;

.h5p-crossword-input-fields-group-solution-word {
position: relative;
z-index: 3;
display: inline-flex;
flex-wrap: wrap;
/* Compensating the value in https://github.com/h5p/h5p-question/blob/3676a7053120fcfe439747d7bcc8206755d7b4c3/styles/question.css#L327 */
padding-right: 1.615384615em;
padding-bottom: .5em;
padding-left: .5em;

.h5p-crossword-input-fields-group-solution-char-wrapper {
border-radius: .25em;
color: inherit;
line-height: 1em;
margin-right: .25em;
margin-top: .5em;
padding: .15em;
position: relative;

&:last-child {
margin-right: 0;
}

&.h5p-crossword-solution-no-input {
background-color: $color-neutral-light;
border: 1px solid $color-neutral-light;
color: $color-neutral-dark;
display: inline-block;
height: 1em;

&.h5p-crossword-solution-no-char {
width: 1em;
}
}

&.h5p-crossword-solution-correct {
background: $color-correct-light;
border: 1px solid $color-correct-light;
color: $color-correct-dark;

&::after {
color: $color-correct-dark;
content: "\f00c";
font-family: H5PFontAwesome4;
padding-left: .25em;
right: .5em;
text-decoration: none;
top: 0;
}
}

&.h5p-crossword-solution-wrong {
background-color: $color-wrong-light;
border: 1px solid $color-wrong-light;
color: $color-wrong-dark;

&::after {
color: $color-wrong-dark;
content: "\f00d";
font-family: H5PFontAwesome4;
padding-left: .25em;
right: .5em;
text-decoration: none;
top: 0;
}
}
}
}
}

&.display-none {
display: none;
}
}
6 changes: 4 additions & 2 deletions src/scripts/h5p-crossword-clue-announcer.js → ...omponents/h5p-crossword-clue-announcer.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import './h5p-crossword-clue-announcer.scss';

/** Class representing the content */
export default class CrosswordClueAnnouncer {
/**
Expand Down Expand Up @@ -56,14 +58,14 @@ export default class CrosswordClueAnnouncer {
* Show.
*/
show() {
this.content.classList.remove('h5p-crossword-display-none');
this.content.classList.remove('display-none');
}

/**
* Hide.
*/
hide() {
this.content.classList.add('h5p-crossword-display-none');
this.content.classList.add('display-none');
}

/**
Expand Down
Loading

0 comments on commit 05520bd

Please sign in to comment.