Implemented directory handling using a cursor #21
Conversation
demo/index.html
Outdated
| @@ -5,6 +5,7 @@ | |||
| <title>Document</title> | |||
| <script src="../dist/fsapi.js"></script> | |||
| <link rel="stylesheet" href="main.css"> | |||
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> | |||
There was a problem hiding this comment.
Remove fontawesome please, as we do not need it 😄
src/main.js
Outdated
| const liElement = document.createElement("li"); | ||
| liElement.classList.add("fs-api-entry", `fs-api-${item.type}`); | ||
| if (item.type === "directory") { | ||
| handler.textContent = "›"; | ||
| handler.classList.add("handler"); |
There was a problem hiding this comment.
The classname handler is too generic. We should prefer something like fs-api-directory-handler.
src/main.js
Outdated
| if (item.type === "directory") { | ||
| handler.textContent = "›"; | ||
| handler.classList.add("handler"); | ||
| handler.classList.add("rotatedHandler"); |
There was a problem hiding this comment.
This is redundant. We can use pure CSS rules to achieve this. Example
.fs-api-directory-collapse > .fs-api-directory-handler {
/* rotate stuff */
}
demo/main.css
Outdated
| cursor: pointer; | ||
| } | ||
|
|
||
| .rotatedHandler { |
There was a problem hiding this comment.
This is redundant. We can use pure CSS rules to achieve this. Example
.fs-api-directory-collapse > .fs-api-directory-handler {
/* rotate stuff */
}
demo/main.css
Outdated
| .fs-api-directory > .fs-api-directory-handler { | ||
| display: inline-block; | ||
| transform: rotate(90deg); | ||
| -ms-transform: rotate(90deg); |
There was a problem hiding this comment.
Remove -ms-transform. We can use it without the -ms- vendor prefix these days: https://caniuse.com/#feat=transforms2d.
demo/main.css
Outdated
| .fs-api-directory-collapse > .fs-api-directory-handler { | ||
| display: inline-block; | ||
| transform: rotate(0deg); | ||
| -ms-transform: rotate(0deg); |
There was a problem hiding this comment.
Remove -ms-transform. We can use it without the -ms- vendor prefix these days: https://caniuse.com/#feat=transforms2d.
demo/main.css
Outdated
| display: inline-block; | ||
| transform: rotate(90deg); | ||
| -ms-transform: rotate(90deg); | ||
| -webkit-transform: rotate(90deg); |
There was a problem hiding this comment.
Remove -webkit-transform. We can use it without the -webkit- vendor prefix these days: https://caniuse.com/#feat=transforms2d.
demo/main.css
Outdated
| display: inline-block; | ||
| transform: rotate(0deg); | ||
| -ms-transform: rotate(0deg); | ||
| -webkit-transform: rotate(0deg); |
There was a problem hiding this comment.
Remove -webkit-transform. We can use it without the -webkit- vendor prefix these days: https://caniuse.com/#feat=transforms2d.
src/main.js
Outdated
| const liElement = document.createElement("li"); | ||
| liElement.classList.add("fs-api-entry", `fs-api-${item.type}`); | ||
| if (item.type === "directory") { | ||
| handler.textContent = "›"; | ||
| handler.classList.add("rotatedHandler"); |
There was a problem hiding this comment.
We do not need rotatedHandler any more.
src/main.js
Outdated
|
|
||
| /**Takes the clicked element and toggles the directory. | ||
| * @param {HTMLSpanElement} nameElement - The clicked element. | ||
| */ | ||
| function toggleDirectory(nameElement) { | ||
| if (nameElement.parentNode.classList.contains("fs-api-directory-collapse")) { | ||
| nameElement.parentNode.classList.remove("fs-api-directory-collapse"); | ||
| nameElement.previousSibling.classList.add("rotatedHandler"); |
There was a problem hiding this comment.
We do not need rotatedHandler any more.
src/main.js
Outdated
| } else { | ||
| nameElement.parentNode.classList.add("fs-api-directory-collapse"); | ||
| nameElement.previousSibling.classList.remove("rotatedHandler"); |
There was a problem hiding this comment.
We do not need rotatedHandler any more.
irokas
force-pushed
the
Implement-directory-handle
branch
from
aacdd6a to
77594da
Compare
No description provided.