keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

First implementation of dynamic requests with dummy data

Browse Source 
Not yet tested for mobile.
This commit is contained in:
Théo Marchal
2021-01-24 15:43:02 +01:00
parent 25135304f9
commit 69b18017b0
16 changed files with 1095 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
scripts/divers.js
View File

@ -1,6 +1,7 @@
jQuery(document).ready(function($) {
$('[data-fancybox="divers"]').fancybox({
jQuery(document).ready(function($)
{
$('[data-fancybox="divers"]').fancybox(
{
infobar: false,
toolbar: true,
smallBtn: false,

345
scripts/explorer.js Normal file
View File

@ -0,0 +1,345 @@
jQuery(document).ready(function($)
{
// get URL parameters
urlParams = new URLSearchParams(window.location.search);
paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
paramCategory = (urlParams.get('categories') == null ? urlParams.getAll('category') : urlParams.getAll('categories'));
paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
$.getJSON("data.json", function(data)
{
/**********/
/** MENU **/
/**********/
var dimensions = [];
var themes = [];
var categories = [];
var places = [];
var tags = [];
function generateMenu()
{
for (i of data)
{
if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
dimensions.push(i.dimension);
if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
themes.push(i.theme);
if (categories.indexOf(i.category) === -1 && i.category != "" && i.category != "—")
categories.push(i.category);
if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
places.push(i.place);
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
{
splitTags = i.tags.split(", ");
for (splitTag of splitTags) {
if (tags.indexOf(splitTag) === -1)
{
tags.push(splitTag);
}
}
}
}
dimensions.sort();
themes.sort();
categories.sort();
places.sort();
tags.sort();
for (dimension of dimensions)
{
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
html += '<label for="' + dimension + '">' + dimension + '</label></span>';
$(".box.dimensions").append(html);
}
for (theme of themes)
{
html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
html += '<label for="' + theme + '">' + theme + '</label></span>';
$(".box.themes").append(html);
}
for (category of categories)
{
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
html += '<label for="' + category + '">' + category + '</label></span>';
$(".box.categories").append(html);
}
for (place of places)
{
html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
html += '<label for="'+place+'">' + place + '</label></span>';
$(".box.places").append(html);
}
for (tag of tags)
{
html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
html += '<label for="'+tag+'">' + tag + '</label></span>';
$(".box.tags").append(html);
}
// populate checkboxes depending on URL
function checkBoxSelector(names, name, urlParam)
{
if (urlParam == "all")
{
$('input[name="'+names+'"]').prop("checked", true);
$('input[name="'+name+'"]').prop("disabled", true);
$('input[name="'+name+'"]').prop("checked", true);
}
else
{
for (a of urlParam)
{
$('input[id="'+a+'"]').prop("checked", true);
}
}
}
checkBoxSelector("years", "year", paramYear)
checkBoxSelector("months", "month", paramMonth);
checkBoxSelector("dimensions", "dimension", paramDimension);
checkBoxSelector("themes", "theme", paramTheme);
checkBoxSelector("categories", "category", paramCategory);
checkBoxSelector("places", "place", paramPlace);
checkBoxSelector("tags", "tag", paramTag);
checkBoxSelector("photos", "photo", paramPhoto);
checkBoxSelector("helps", "help", paramHelp);
}
// if "all" is selected, check all other options and disable them
function AllCheckBoxSelector(names, name)
{
$('input[id="' + names + '"]').click(function()
{
if ($(this).prop("checked") == true)
{
$('input[name="' + name + '"]').prop("checked", true);
$('input[name="' + name + '"]').prop("disabled", true);
}
else if ($(this).prop("checked") == false)
{
$('input[name="' + name + '"]').prop("checked", false);
$('input[name="' + name + '"]').prop("disabled", false);
}
});
}
$("input").prop("checked", false); // by default, uncheck all options
AllCheckBoxSelector("years", "year");
AllCheckBoxSelector("months", "month");
AllCheckBoxSelector("dimensions", "dimension");
AllCheckBoxSelector("themes", "theme");
AllCheckBoxSelector("categories", "category");
AllCheckBoxSelector("places", "place");
AllCheckBoxSelector("tags", "tag");
AllCheckBoxSelector("photos", "photo");
AllCheckBoxSelector("helps", "help");
// menu configurer show / hide
$("article.explorer h2").click(function()
{
if ($(this).hasClass("active"))
{
$(this).removeClass("active");
$("form").slideUp(200);
}
else
{
$(this).addClass("active");
$("form").slideDown(200);
}
});
/***********/
/** TABLE **/
/***********/
function generateTable()
{
function checkYear(year)
{
if (paramYear == "all") return true;
if (paramYear.includes("50s") && year >= 1950 && year <= 1959) return true;
if (paramYear.includes("60s") && year >= 1960 && year <= 1969) return true;
if (paramYear.includes("70s") && year >= 1970 && year <= 1979) return true;
if (paramYear.includes("80s") && year >= 1980 && year <= 1989) return true;
if (paramYear.includes("90s") && year >= 1990 && year <= 1999) return true;
if (paramYear.includes("00s") && year >= 2000 && year <= 2009) return true;
if (paramYear.includes("10s") && year >= 2010 && year <= 2020) return true;
return false;
}
function checkMonth(month)
{
if (paramMonth == "all") return true;
if (paramMonth.includes("01") && month == "janvier") return true;
if (paramMonth.includes("02") && month == "février") return true;
if (paramMonth.includes("03") && month == "mars") return true;
if (paramMonth.includes("04") && month == "avril") return true;
if (paramMonth.includes("05") && month == "mai") return true;
if (paramMonth.includes("06") && month == "juin") return true;
if (paramMonth.includes("07") && month == "juillet") return true;
if (paramMonth.includes("08") && month == "août") return true;
if (paramMonth.includes("09") && month == "septembre") return true;
if (paramMonth.includes("10") && month == "octobre") return true;
if (paramMonth.includes("11") && month == "novembre") return true;
if (paramMonth.includes("12") && month == "décembre") return true;
return false;
}
function checkDimension(dimension)
{
if (paramDimension == "all")
return true;
if (paramDimension.includes(dimension))
return true;
return false;
}
function checkTheme(theme)
{
if (paramTheme == "all")
return true;
if (paramTheme.includes(theme))
return true;
return false;
}
function checkCategory(category)
{
if (paramCategory == "all")
return true;
if (paramCategory.includes(category))
return true;
return false;
}
function checkPlace(place)
{
if (paramPlace == "all")
return true;
if (paramPlace.includes(place))
return true;
return false;
}
function checkTag(tag)
{
if (paramTag == "all")
return true;
console.log("tag: " + tag);
console.log("paramTag: " + paramTag);
splitTag = tag.split(", ");
console.log(splitTag);
for (t of splitTag)
{
if (paramTag.includes(t))
return true;
}
return false;
}
function checkPhoto(photo)
{
if (paramPhoto == "all") return true;
if (paramPhoto.includes("none") && photo == "none") return true;
if (paramPhoto.includes("bad") && photo == "bad") return true;
if (paramPhoto.includes("ok") && photo == "ok") return true;
if (paramPhoto.includes("good") && photo == "good") return true;
return false;
}
function checkHelp(help)
{
if (paramHelp == "all") return true;
if (paramHelp.includes("no") && help == "no") return true;
if (paramHelp.includes("yes") && help == "yes") return true;
return false;
}
hasResult = false;
for (i of data)
{
if (urlParams.toString() === "") // no parameter in URL
res = false;
else
res = true;
// check URL parameters and compute result
if (paramYear != "") res &&= checkYear(i.year);
if (paramMonth != "") res &&= checkMonth(i.month);
if (paramDimension != "") res &&= checkDimension(i.dimension);
if (paramTheme != "") res &&= checkTheme(i.theme);
if (paramCategory != "") res &&= checkCategory(i.category);
if (paramPlace != "") res &&= checkPlace(i.place);
if (paramTag != "") res &&= checkTag(i.tags);
if (paramPhoto != "") res &&= checkPhoto(i.photo);
if (paramHelp != "") res &&= checkHelp(i.help);
if (!res)
continue;
hasResult = true;
$("table").css("display", "block");
result = "<tr>";
result += "<td>" + i.number + "</td>";
result += "<td>" + i.title + "</td>";
result += "<td>" + i.year + "</td>";
result += "<td>" + i.dimension + "</td>";
result += "<td>" + i.theme + "</td>";
result += "<td>" + i.category + "</td>";
result += "<td>" + i.place + "</td>";
result += "<td>" + i.tags + "</td>";
if (i.photo == "good")
result += '<td class="photo">&#x2605;&#x2605;&#x2605;</td>';
else if (i.photo == "ok")
result += '<td class="photo">&#x2605;&#x2605;</td>';
else if (i.photo == "bad")
result += '<td class="photo">&#x2605;</td>';
else if (i.photo == "none")
result += '<td class="photo">&#x2606;</td>';
if (i.help == "yes")
result += '<td class="help">&#8252;&#xFE0E;</td>'
else
result += '<td>&nbsp;</td>'
result += '<td><a href="painting.html?number=' + i.number + '">👁</a></td>';
result += "</tr>";
$("table").append(result);
}
return hasResult;
}
generateMenu();
var res = generateTable();
// display table or no result depending of computed result
if (res)
{
$("article.explorer h2").removeClass("active")
$("form").slideUp(200);
}
else
$("article.explorer p.no-result").css("display", "block");
});
});

62
scripts/exposition.js
View File

@ -1,27 +1,41 @@
jQuery(document).ready(function($) {
$('[data-fancybox="exposition"]').fancybox({
infobar: false,
toolbar: true,
smallBtn: false,
buttons : [ "arrowLeft", "arrowRight", "close" ],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
caption : function( instance, item ) {
// index put inside, we can get the number: `item.opts.fancyboxIndex`
// and thus what we what inside the caption!
// TODO read json to input good captions info
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=26">&#8505;&#xFE0E;</span></a></span>\
<span class="title">La Truite</span><span class="year">1960</span>\
<span class="format">Huile sur toile (55x35)</span>\
<span class="comment">Reproduction de Courbet</span>\
</div>\
';
jQuery(document).ready(function($)
{
$.getJSON("data.json", function(data)
{
for (i of data)
{
if (i.photo == "ok" || i.photo == "good")
{
console.log(i.number);
paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>';
console.log(paintingHtml);
$("#gallery").append(paintingHtml);
}
}
$('[data-fancybox="exposition"]').fancybox(
{
infobar: false,
toolbar: true,
smallBtn: false,
buttons: ["arrowLeft", "arrowRight", "close"],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
return '\
<div id="info">\
<span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
<span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\
<span class="comment">' + data[idx].comment + '</span>\
</div>\
';
}
});
});
});

7
scripts/mail.js
View File

@ -1,7 +1,8 @@
jQuery(document).ready(function($) {
jQuery(document).ready(function($)
{
// a n t i s p a m (hopefully)
$('a.mail').on('click', function() {
$('a.mail').on('click', function()
{
var href = $(this).attr('href');
var a1 = "adres" ; var a2 = "se em"; var a3 = "ail";
var goodMail = a1 + a2 + a3;

5
scripts/menu.js
View File

@ -1,7 +1,6 @@
function mobilemenu() {
function mobilemenu()
{
var navmenu = document.getElementsByTagName("nav");
if (navmenu[0].classList.contains("active"))
navmenu[0].classList.remove("active");
else

53
scripts/painting.js Normal file
View File

@ -0,0 +1,53 @@
jQuery(document).ready(function($)
{
const urlParams = new URLSearchParams(window.location.search);
const pageId = urlParams.get('number');
i = pageId - 1; // index is 0
$.getJSON("data.json", function(data)
{
// page title
$("head title").append(data[i].number);
// photo
if (data[i].photo != "none")
$(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
else
$(".photo img").attr("src", "images/unknown.jpg");
// metadata
$(".metadata .content.number").append(data[i].number);
if (data[i].month != "—") $(".metadata .content.date").append(data[i].month + " " + data[i].year);
else $(".metadata .content.date").append(data[i].year);
$(".metadata .content.dimension").append(data[i].dimension);
$(".metadata .content.support").append(data[i].support);
$(".metadata .content.theme").append(data[i].theme);
$(".metadata .content.place").append(data[i].place);
$(".metadata .content.category").append(data[i].category);
if (data[i].photo == "none") photoState = "aucune";
if (data[i].photo == "bad") photoState = "mauvais";
if (data[i].photo == "ok") photoState = "acceptable";
if (data[i].photo == "good") photoState = "bon";
$(".metadata .content.photo").append(photoState);
if (data[i].help == "yes") $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
else $(".metadata .content.help").append("non");
$(".metadata .content.comment").append(data[i].comment);
if (data[i].photo != "none")
$(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg");
else
$(".metadata .content.original").parent().css("display", "none");
// cartel
$("#info .title").append(data[i].title);
if (data[i].month != "—") $("#info .year").append(data[i].month + " " + data[i].year);
else $("#info .year").append(data[i].year);
format = data[i].paint + " sur " + data[i].support;
format += " (" + data[i].dimension + ")";
$("#info .format").append(format);
$("#info .comment").prepend(data[i].comment);
});
});

4
scripts/stats.js
View File

@ -1,5 +1,5 @@
jQuery(document).ready(function($) {
jQuery(document).ready(function($)
{
var canvasMonth = document.getElementById("month").getContext('2d');
var chartMonth = new Chart(canvasMonth, {
type: 'bar',