mirror of
https://github.com/scummvm/scummvm-web.git
synced 2026-06-20 05:45:49 +00:00
WEB: Remove jQuery dependency and modernize the game demo chart
This commit is contained in:
mataniko
Binary file not shown.
|
Before Width: | Height: | Size: 157 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 715 B |
Binary file not shown.
|
Before Width: | Height: | Size: 733 B |
@@ -1,82 +1,42 @@
|
||||
$(document).ready(function () {
|
||||
hideDuplicates();
|
||||
resetDemosTable();
|
||||
attachSubcatListeners();
|
||||
window.addEventListener('load', function () {
|
||||
initalizeTable();
|
||||
});
|
||||
|
||||
function getRowGameDesc(row) {
|
||||
var desc = row.children("td:nth-child(1)").text();
|
||||
var leftBracketIndex = desc.indexOf("(");
|
||||
if (leftBracketIndex == -1)
|
||||
return desc;
|
||||
|
||||
return desc.slice(0, leftBracketIndex - 1);
|
||||
function toggleCollapsibleRow(event) {
|
||||
var clickedImage = event.target;
|
||||
var clickedRow = clickedImage.parentElement.parentElement;
|
||||
var gameTarget = clickedRow.lastElementChild.textContent
|
||||
var next = clickedRow.nextElementSibling;
|
||||
clickedImage.classList.toggle('close');
|
||||
while (gameTarget === next.lastElementChild.textContent) {
|
||||
next.classList.toggle("collapse");
|
||||
next = next.nextElementSibling;
|
||||
}
|
||||
resetDemosTable();
|
||||
}
|
||||
|
||||
function getRowGameVariant(row) {
|
||||
var desc = row.children("td:nth-child(1)").text();
|
||||
var leftBracketIndex = desc.indexOf("(");
|
||||
if (leftBracketIndex == -1)
|
||||
return desc;
|
||||
|
||||
var rightBracketIndex = desc.indexOf(")");
|
||||
return desc.slice(leftBracketIndex + 1, rightBracketIndex);
|
||||
}
|
||||
|
||||
function attachSubcatListeners() {
|
||||
$(".gameDemos .subcatToggle").live("click", function() {
|
||||
var clickedImage = $(this);
|
||||
var clickedDesc = getRowGameDesc(clickedImage.parent().parent());
|
||||
var doOpen = (clickedImage.attr("src") == "images/subcat-open.png");
|
||||
|
||||
$(this).parent().parent().nextAll().each(function() {
|
||||
var curRow = $(this);
|
||||
var curDesc = getRowGameDesc(curRow);
|
||||
if (curDesc == clickedDesc) {
|
||||
if (doOpen) {
|
||||
clickedImage.attr("src", "images/subcat-close.png");
|
||||
curRow.fadeIn("fast", function() {
|
||||
resetDemosTable();
|
||||
});
|
||||
} else {
|
||||
clickedImage.attr("src", "images/subcat-open.png");
|
||||
curRow.fadeOut("fast", function() {
|
||||
resetDemosTable();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function hideDuplicates() {
|
||||
$(".gameDemos tbody tr").each(function() {
|
||||
var curRow = $(this);
|
||||
var curDesc = getRowGameDesc(curRow);
|
||||
var prevDesc = getRowGameDesc(curRow.prev());
|
||||
var nextDesc = getRowGameDesc(curRow.next());
|
||||
var buttonHTML = "";
|
||||
|
||||
if (curDesc == prevDesc) {
|
||||
curRow.hide();
|
||||
buttonHTML = "<img src='images/cat-blank.png' class='noSubcat'>";
|
||||
} else if (curDesc != prevDesc && curDesc == nextDesc) {
|
||||
buttonHTML = "<img src='images/subcat-open.png' class='subcatToggle'>";
|
||||
} else {
|
||||
buttonHTML = "<img src='images/cat-blank.png' class='noSubcat'>";
|
||||
}
|
||||
|
||||
var curCell = curRow.children("td:nth-child(1)");
|
||||
curCell.html(buttonHTML + curCell.html());
|
||||
});
|
||||
function initalizeTable() {
|
||||
var rows = document.querySelectorAll('.gameDemos tr');
|
||||
for (let i = 0; i < rows.length-1; i++) {
|
||||
if (!rows[i].nextElementSibling) {
|
||||
continue;
|
||||
}
|
||||
if (!rows[i].classList.contains('collapse') &&
|
||||
rows[i].nextElementSibling.classList.contains('collapse')) {
|
||||
var button = document.createElement('i');
|
||||
button.classList.add('expand');
|
||||
button.addEventListener('click', toggleCollapsibleRow)
|
||||
rows[i].firstElementChild.append(button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetDemosTable() {
|
||||
$(".gameDemos").each(function() {
|
||||
var curRow = $(this);
|
||||
curRow.filter("tbody tr:visible:odd" ).removeClass("color2 color0").addClass("color2");
|
||||
curRow.filter("tbody tr:visible:even").removeClass("color2 color0").addClass("color0");
|
||||
});
|
||||
var rows = document.querySelectorAll('.gameDemos tr:not(.collapse)');
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const row = rows[i];
|
||||
row.classList.remove("color2", "color0");
|
||||
i % 2 ? row.classList.add('color0') : row.classList.add('color2');
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
-19
File diff suppressed because one or more lines are too long
@@ -47,6 +47,12 @@
|
||||
.gameDemos {
|
||||
tr {
|
||||
padding: 0;
|
||||
transition: opacity 0.2s ease-in-out, visibility 0.2s;
|
||||
|
||||
&.collapse {
|
||||
opacity: 0;
|
||||
visibility: collapse;
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding: 2px;
|
||||
@@ -75,4 +81,43 @@
|
||||
.gameTarget {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
i.expand {
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $tentacle-green;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
&:before{
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
/* horizontal line */
|
||||
&:after{
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
&.close {
|
||||
&:before{ transform: rotate(90deg); }
|
||||
&:after{ transform: rotate(180deg); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
|
||||
<script type="text/javascript" src="/js/game_demos.js"></script>
|
||||
|
||||
{capture "intro"}
|
||||
@@ -6,7 +5,7 @@
|
||||
<div class="navigation col-1-2">
|
||||
<h4 class="subhead">{#gamesDemosHeading#}</h4>
|
||||
<ul>
|
||||
{foreach from=$demos item=group}
|
||||
{foreach $demos $group}
|
||||
<li><a href="/demos/#{$group.href}">{$group.name}</a></li>
|
||||
{/foreach}
|
||||
</ul>
|
||||
@@ -23,7 +22,7 @@
|
||||
{/capture}
|
||||
|
||||
{capture "content"}
|
||||
{foreach from=$demos item=group}
|
||||
{foreach $demos as $group}
|
||||
<table class="chart color4 gameDemos" id="{$group.href}">
|
||||
<caption>{$group.name}</caption>
|
||||
<thead>
|
||||
@@ -33,8 +32,15 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{foreach from=$group.demos item=demo}
|
||||
<tr class="{cycle values="color2, color0"}">
|
||||
{foreach $group.demos as $i => $demo}
|
||||
{if $demo@first}
|
||||
{$collapse = ''}
|
||||
{elseif $group.demos[$i]->getTarget() == $group.demos[$i-1]->getTarget()}
|
||||
{$collapse = 'collapse'}
|
||||
{else}
|
||||
{$collapse = ''}
|
||||
{/if}
|
||||
<tr class="{if $collapse}{$collapse}{else}{cycle values="color2, color0"}{/if}">
|
||||
<td>
|
||||
<a href="{$demo->getURL()}">{$demo->getName()}</a>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user