Skip to content

Commit

Permalink
A quick checkpoint
Browse files Browse the repository at this point in the history 
- Made examples collapsible
- Added EffectSection support
- Added a template for a yet-to-come docs feature (By Addon) cell which tells which addon created this element (this is still under progress so I left it commented to finish later)
- Solved SkriptLang#4508
  • Loading branch information
@AyhamAl-Ali
AyhamAl-Ali committed Jan 30, 2022
1 parent 6bf907e commit 17b1405
Show file tree
Hide file tree
Showing 12 changed files with 224 additions and 88 deletions.
90 changes: 80 additions & 10 deletions docs/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,39 +143,47 @@ a:visited {
.type-Event {
border-left: 5px solid rgb(28, 181, 152);
}

.type-Event .item-type {
color: rgb(28, 181, 152);
}

.type-Event .item-examples p {
background-color: rgb(28, 181, 152);
}

.type-Effect {
border-left: 5px solid rgb(139, 255, 0);
}

.type-Effect .item-type {
color: rgb(139, 255, 0);
}

.type-Effect .item-examples p {
background-color: rgb(139, 255, 0);
}

.type-Expression {
border-left: 5px solid rgb(255, 152, 0);
}

.type-Expression .item-type {
color: rgb(255, 152, 0);
}

.type-Expression .item-examples p {
background-color: rgb(255, 152, 0);
}

.type-Condition {
border-left: 5px solid rgb(181, 28, 28);
}

.type-Condition .item-type {
color: rgb(181, 28, 28);
}

.type-Condition .item-examples p {
background-color: rgb(181, 28, 28);
color: white;
Expand All @@ -184,20 +192,37 @@ a:visited {
.type-Section {
border-left: 5px solid rgb(181, 28, 121);
}

.type-Section .item-type {
color: rgb(181, 28, 121);
}

.type-Section .item-examples p {
background-color: rgb(181, 28, 121);
color: white;
}

.type-EffectSection {
border-left: 5px solid rgb(199, 0, 255);
}

.type-EffectSection .item-type {
color: rgb(199, 0, 255);
}

.type-EffectSection .item-examples p {
background-color: rgb(199, 0, 255);
color: white;
}

.type-Type {
border-left: 5px solid rgb(0, 100, 255);
}

.type-Type .item-type {
color: rgb(0, 100, 255);
}

.type-Type .item-examples p {
background-color: rgb(0, 100, 255);
color: white;
Expand All @@ -206,9 +231,11 @@ a:visited {
.type-Function {
border-left: 5px solid rgb(128, 0, 255);
}

.type-Function .item-type {
color: rgb(128, 0, 255);
}

.type-Function .item-examples p {
background-color: rgb(128, 0, 255);
color: white;
Expand Down Expand Up @@ -269,11 +296,24 @@ a:visited {
div.active-syntax {
border-left: 5px solid #ff4e4e;
}

div.active-syntax .item-examples p {
background-color: #ff4e4e;
color: white;
}

.item-examples p {
cursor: pointer;
}

.example-details-closed:before {
content: '▶ ';
}

.example-details-opened:before {
content: '▼ ';
}

/* Active tab for sub menus */
.menu-subtabs .active-tab {
color: #ffc107 !important;
Expand Down Expand Up @@ -364,7 +404,8 @@ div.active-syntax .item-examples p {
margin-top: 110px;
height: calc(100vh - 110px);
/* Fixed the TOP CSS 110px due to body having overflow hidden and top = 110px so the last 110px is hidden, this will fix it */
/* padding: calc(0.22em + 30px); */ /* When applied it will break the padding when an anchor is clicked */
/* padding: calc(0.22em + 30px); */
/* When applied it will break the padding when an anchor is clicked */
padding-right: 30px;
overflow-x: hidden;
overflow-y: scroll;
Expand Down Expand Up @@ -572,6 +613,7 @@ td ul {
padding: 30px;
font-size: 0.9em;
color: var(--code-font-color);
display: none;
}

.box-title {
Expand Down Expand Up @@ -639,7 +681,8 @@ td ul {
display: none;
}

span .search-bar-version { /* More specific to override the other */
span .search-bar-version {
/* More specific to override the other */
left: calc(20% + 150px) !important;
}

Expand Down Expand Up @@ -732,7 +775,8 @@ td ul {
top: calc(4.1em + 24px) !important;
}

span .search-bar-version { /* More specific to override the other */
span .search-bar-version {
/* More specific to override the other */
left: 150px !important;
}

Expand All @@ -750,13 +794,16 @@ td ul {
div.item-content {
max-width: 100vw;
}

div.grid-container {
grid-template-columns: initial;
}

.box.code {
height: 300px;
font-size: 14px;
}

p.item-type {
display: none;
}
Expand All @@ -772,7 +819,12 @@ td ul {
color: var(--font-color);
}

p, h1, h2, h3, h4, h5 {
p,
h1,
h2,
h3,
h4,
h5 {
color: var(--font-color);
}

Expand Down Expand Up @@ -929,7 +981,7 @@ pre {
color: var(--search-color);
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .05);
right: 0.8%;
top: 102px;
top: 101px;
text-align: right;
}

Expand Down Expand Up @@ -1009,58 +1061,76 @@ pre {
#global-navigation .menu-subtabs a:hover {
box-shadow: unset;
/* border-left: 3px solid #ff9800; */
background: rgba(0,0,0,.1);
background: rgba(0, 0, 0, .1);
}

/* Syntax Highlighting */
.sk-cond, .sk-loop {
.sk-cond,
.sk-loop {
color: #a52e91;
font-weight: bold;
}
.sk-eff {

.sk-eff {
color: rgb(255, 174, 0)
}

.sk-expr {
color: rgb(199, 152, 66)
}

.sk-event {
color: #c23838;
}

.sk-command {
color: #c27715;
}

.sk-arg-type {
color: #dbab28;
}

.sk-loop-value {
color: #ff6600;
}

.sk-false {
color: #b10000;
font-weight: bold;
}

.sk-true {
color: #20b628;
font-weight: bold;
}

.sk-operators {
font-weight: bold;
}

.sk-var {
color: #e74040;
}
.sk-string [class*="sk-"], .sk-string { /* More specific = higher priority to override other css in strings and comments */

.sk-string [class*="sk-"],
.sk-string {
/* More specific = higher priority to override other css in strings and comments */
color: #34a52a !important;
font-weight: unset;
}
.sk-comment, .sk-comment [class*="sk-"] {

.sk-comment,
.sk-comment [class*="sk-"] {
color: #696969 !important;
font-weight: unset;
}

.sk-function {
color: #e873ff;
font-weight: bold;
}

.sk-timespan {
color: #ff5967;
font-style: italic;
Expand Down
46 changes: 34 additions & 12 deletions docs/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ function checkVersionFilter() {
function searchNow(value = "") {
if (value != "") // Update searchBar value
searchBar.value = value;

let allElements = document.querySelectorAll(".item-wrapper");
let searchValue = searchBar.value;
let count = 0; // Check if any matches found
Expand All @@ -298,7 +298,7 @@ function searchNow(value = "") {
}
searchValue = searchValue.replaceAll(versionPattern, "") // Don't include filters in the search
}

// Type
let filterType;
if (searchValue.match(typePattern)) {
Expand All @@ -323,12 +323,12 @@ function searchNow(value = "") {
let regex = new RegExp(searchValue, "gi")
let name = document.querySelectorAll(`#${e.id} .item-title h1`)[0].textContent // Syntax Name
let filtersFound = false;

// Version check
let versionFound;
if (version != "") {
versionFound = document.querySelectorAll(`#${e.id} .item-details:nth-child(2) td:nth-child(2)`)[0].textContent.includes(version);

if (versionAndUp || versionAndDown) {
let versions = document.querySelectorAll(`#${e.id} .item-details:nth-child(2) td:nth-child(2)`)[0].textContent.split(",");
for (const v in versions) { // split on ',' without space in case some version didn't have space and versionCompare will handle it
Expand Down Expand Up @@ -415,11 +415,11 @@ if (searchBar) {
setTimeout(() => { // Important to actually get the value after typing or deleting + better performance
searchNow();
}, 100);
});
});
}
// Search Bar </>

// <> Dark Mode
// <> Dark Mode

// Auto load DarkMode from cookies
if (getCookie("darkMode") == "false") {
Expand Down Expand Up @@ -550,7 +550,7 @@ function getCookie(cname) {
// Example: (.+) = ✓
const patterns = [ // [REGEX, CLASS]
[/((?<!#)#(?!#).*)/gi, "sk-comment"], // Must be first, : must be before ::
[/(\:|\:\:)/gi, "sk-var"], //
[/(\:|\:\:)/gi, "sk-var"],
[/((?<!href=)\".+?\")/gi, "sk-string"], // before others to not edit non skript code
[/\b(add|give|increase|set|to|from|make|remove( all| every|)|subtract|reduce|delete|clear|reset|send|broadcast|wait|halt|create|(dis)?enchant|shoot|rotate|reload|enable|(re)?start|teleport|feed|heal|hide|kick|(IP(-| )|un|)ban|break|launch|leash|force|message|close|show|reveal|cure|poison|spawn)(?=[ <])\b/gi, "sk-eff"],
[/\b(on (?=.+\:))/gi, "sk-event"],
Expand All @@ -570,17 +570,17 @@ const patterns = [ // [REGEX, CLASS]
]

function highlightElement(element) {

let lines = element.innerHTML.split("<br>")

for (let j = 0; j < lines.length; j++) {
Loop2:
for (let i = 0; i < patterns.length; i++) {
let match;
let regex = patterns[i][0];
let oldLine = lines[j];
// console.log(regex)

while ((match = regex.exec(oldLine)) != null) {
lines[j] = lines[j].replaceAll(regex, `<span class='${patterns[i][1]}'>$1</span>`)
if (regex.lastIndex == 0) // Break after it reaches the end of exec count to avoid inf loop
Expand All @@ -591,7 +591,7 @@ function highlightElement(element) {
element.innerHTML = lines.join("<br>")
}

document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("DOMContentLoaded", function(event) {
setTimeout(() => {
document.querySelectorAll('.item-examples .skript-code-block').forEach(el => {
highlightElement(el);
Expand All @@ -604,4 +604,26 @@ document.addEventListener("DOMContentLoaded", function(event) {
});
}, 100);
});
// Syntax Highlighting </>
// Syntax Highlighting </>


// <> Collapsible Examples
var examples = document.querySelectorAll(".item-examples p");
if (examples) {
examples.forEach(e => {
let pElement = e;
let divElement = e.parentElement.children[1];
pElement.addEventListener("click", ev => {
if (pElement.classList.contains("example-details-opened")) {
pElement.classList.remove("example-details-opened");
pElement.classList.add("example-details-closed");
divElement.style.display = "none";
} else {
pElement.classList.remove("example-details-closed");
pElement.classList.add("example-details-opened");
divElement.style.display = "block";
}
})
})
}
// Collapsible Examples </>
Loading

0 comments on commit 17b1405

Please sign in to comment.