webcraftmedia/wecker-manufaktur.org
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

grey out inactive persons/projects, refactor js to be more compact/reusable

Browse Source
This commit is contained in:
Ulf Gebhardt 2019-08-26 16:59:48 +02:00
parent 1c4b79d196
commit cfd31f7c9a
No known key found for this signature in database
GPG Key ID: 81308EFE29ABFEBD
5 changed files with 72 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
wecker_manufaktur/page/default_page/css/default_page.scss
View File

@ -80,6 +80,10 @@ body {
#persons{
padding-top: $padding_heading_top;
padding-bottom: $padding_heading_bottom;
.person.disabled{
filter: grayscale(100%);
}
}
#projects{
@ -87,6 +91,10 @@ body {
padding-top: $padding_heading_top;
padding-bottom: $padding_heading_bottom;
}
.project.disabled{
filter: grayscale(100%);
}
}
#apply{

4
wecker_manufaktur/page/default_page/default_page.php
View File

@ -41,9 +41,9 @@ class default_page implements \SYSTEM\PAGE\DefaultPage {
$project['link'] = $project['visible'] != 1 ? $project['website'] : '#project-'.$project['project'];
$project['target'] = $project['visible'] != 1 ? '_blank' : '';
$row['projects'] .= \SYSTEM\PAGE\replace::replaceFile((new PPAGE('default_page/tpl/person_project.tpl'))->SERVERPATH(),$project);
$row['projects'] .= ', ';
$row['projects'] .= ' | ';
}
$row['projects'] = substr($row['projects'],0,-2);
$row['projects'] = substr($row['projects'],0,-3);
$_content_imgs .= \SYSTEM\PAGE\replace::replaceFile((new PPAGE('default_page/tpl/person_img.tpl'))->SERVERPATH(),$row);
$_content_details .= \SYSTEM\PAGE\replace::replaceFile((new PPAGE('default_page/tpl/person_details.tpl'))->SERVERPATH(),$row);

93
wecker_manufaktur/page/default_page/js/default_page.js
View File

@ -1,41 +1,64 @@
$(document).ready(function() {
//new SYSTEM('./api.php',1,'start');
$('.person-link').click(function(e){
e.preventDefault();
$person = $(this).attr('person');
$isHidden = $('#person-details-'+$person).hasClass('d-none');
$('.person-details').addClass('d-none');
if($isHidden){
$('#person-details-'+$person).removeClass('d-none');
}
})
$('.person-link').click(function(e){showPerson(e,$(this).attr('person'),false,true)})
$('.person-project-link').click(function(e){
$project = $(this).attr('project');
$isHidden = $('#project-details-'+$project).hasClass('d-none');
$('.project-details').addClass('d-none');
if($isHidden){
$('#project-details-'+$project).removeClass('d-none');
}
})
$('.person-project-link').click(function(e){showProject(e,$(this).attr('project'),true,false)})
$('.project-link').click(function(e){
e.preventDefault();
$project = $(this).attr('project');
$isHidden = $('#project-details-'+$project).hasClass('d-none');
$('.project-details').addClass('d-none');
if($isHidden){
$('#project-details-'+$project).removeClass('d-none');
}
})
$('.project-link').click(function(e){showProject(e,$(this).attr('project'),false,true)})
$('.project-person-link').click(function(e){
$person = $(this).attr('person');
$isHidden = $('#person-details-'+$person).hasClass('d-none');
$('.person-details').addClass('d-none');
if($isHidden){
$('#person-details-'+$person).removeClass('d-none');
}
})
});
$('.project-person-link').click(function(e){showPerson(e,$(this).attr('person'),true,false)})
});
function showPerson(event,subject_id,jump,toggle){
// Jump to anchor
if(!jump){
event.preventDefault();
}
// Is the element already shown?
isHidden = $('#person-details-'+subject_id).hasClass('d-none');
// Grey out all
if(isHidden){
$('.person').addClass('disabled');
$('#person-'+subject_id).removeClass('disabled');
} else {
$('.person').removeClass('disabled');
}
// Hide all details
$('.person-details').addClass('d-none');
// Toggle or ensure visibility of specific detail
console.log(toggle, isHidden)
if(!toggle || isHidden){
$('#person-details-'+subject_id).removeClass('d-none');
}
}
function showProject(event,subject_id,jump,toggle){
// Jump to anchor
if(!jump){
event.preventDefault();
}
// Is the element already shown?
isHidden = $('#project-details-'+subject_id).hasClass('d-none');
// Grey out all others
if(isHidden){
$('.project').addClass('disabled');
$('#project-'+subject_id).removeClass('disabled');
} else {
$('.project').removeClass('disabled');
}
// Hide all details
$('.project-details').addClass('d-none');
// Toggle or ensure visibility of specific detail
console.log(toggle, isHidden)
if(!toggle || isHidden){
$('#project-details-'+subject_id).removeClass('d-none');
}
}

4
wecker_manufaktur/page/default_page/tpl/person_img.tpl
View File

@ -1,5 +1,5 @@
<div class="col-lg-4">
<a id="person-${id}" href="#person-details-${id}" person="${id}" class="person-link">
<div id="person-${id}" class="col-lg-4 person">
<a id="person-img-${id}" href="#person-details-${id}" person="${id}" class="person-link">
<div>
<img src="./files/persons/${img}" class="rounded-circle" alt="${name}" style="object-fit: cover; width: 300px; height: 300px;">
</div>

4
wecker_manufaktur/page/default_page/tpl/project_img.tpl
View File

@ -1,5 +1,5 @@
<div class="col-lg-4">
<a id="project-${id}" href="#project-details-${id}" project="${id}" class="project-link">
<div id="project-${id}" class="col-lg-4 project">
<a id="project-img-${id}" href="#project-details-${id}" project="${id}" class="project-link">
<div>
<img src="./files/projects/${img}" class="rounded" alt="${name}" style="object-fit: cover; width: 300px; height: 300px;">
</div>