2021-01-09 13:04:43 +00:00
< ? php
2021-01-22 16:19:51 +00:00
/**
2021-01-09 13:04:43 +00:00
* Template Name : Experience Timeline
* /
2021-01-22 16:19:51 +00:00
2021-01-09 13:04:43 +00:00
/**
2021-01-21 10:24:10 +00:00
* The template for displaying all roles in a timeline .
2021-01-09 13:04:43 +00:00
*
2021-01-21 10:24:10 +00:00
* @ package Omphaloskepsis
* @ since Omphaloskepsis 1.0
2021-01-09 13:04:43 +00:00
*/
2021-01-22 16:19:51 +00:00
2021-01-09 13:04:43 +00:00
get_header (); ?>
< ? php
2021-01-22 16:19:51 +00:00
/**
* Calculates wether a role is within the max . and min . dates
* for the timeline .
*
* @ param string $role_start_date The role ' s start date .
* @ param string $role_end_date The role ' s end date .
* @ return bool
*/
function within_dates ( $role_start_date , $role_end_date ) {
$end_year = gmdate ( 'Y' );
$end_date = $end_year . '-12-31' ;
$start_date = ( $end_year - 2 ) . '-01-01' ;
$role_end_date = ( ! $role_end_date ) ? gmdate ( 'Y-m-d' ) : ( ( $role_end_date > $end_date ) ? $end_date : $role_end_date );
return ( ( ( strtotime ( $role_start_date ) < strtotime ( $end_date ) ) && ( strtotime ( $role_start_date ) > strtotime ( $start_date ) ) ) && ( strtotime ( $role_end_date ) > strtotime ( $start_date ) ) );
}
2021-01-09 13:04:43 +00:00
$args = array (
2021-01-22 16:19:51 +00:00
'post_type' => array (
2021-01-09 13:04:43 +00:00
'job' ,
),
'posts_per_page' => - 1 ,
);
$loop = new WP_Query ( $args );
2021-01-22 16:19:51 +00:00
?>
2021-01-09 13:04:43 +00:00
2021-01-21 10:24:10 +00:00
< main id = " experience-wrapper " class = " content-area col-10 col-m-12 " >
2021-01-09 13:04:43 +00:00
< header class = " post-header-title " >
2021-01-22 16:19:51 +00:00
< h1 id = " page-title " > Experience </ h1 >
< h2 id = " page-subtitle " > or , a brief history of Ben </ h2 >
2021-01-09 13:04:43 +00:00
< ? php
2021-01-22 16:19:51 +00:00
while ( have_posts () ) :
the_post ();
?>
< div class = " entry-content tile " id = " taxonomy-description " >
< ? php the_content (); ?>
</ div >
< div class = " entry-content tile " id = " settings " >
< h3 style = " margin-bottom: 14px; " class = " subheading " > Settings </ h3 >
< form action = " /experience-timeline " id = " settings " method = " GET " >
< input class = " checkbox " type = " checkbox " id = " separate " value = " separate " checked = " checked " >
< label for = " separate " > Separate past and current roles </ label >
< input class = " ui-button ui-widget ui-corner-all " id = " refresh " type = " submit " value = " Refresh " >
</ form >
2021-01-09 13:04:43 +00:00
</ div >
< ? php endwhile ; ?>
</ header >
< div id = " primary " class = " content-area " >
2021-01-22 16:19:51 +00:00
< main id = " company-main " class = " site-main " role = " main " >
< ? php // phpcs:disable WordPress.WP.EnqueuedResources ?>
< link rel = " stylesheet " href = " //code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css " >
< script src = " https://code.jquery.com/ui/1.12.1/jquery-ui.js " ></ script >
< script type = " text/javascript " src = " https://www.gstatic.com/charts/loader.js " ></ script >
< script type = " text/javascript " >
jQuery ( document ) . ready ( function ( $ ) {
$ ( 'input:checkbox' ) . checkboxradio ();
$ ( '.refresh' ) . button ();
google . charts . load ( 'current' , { 'packages' : [ 'timeline' ]});
google . charts . setOnLoadCallback ( drawChart );
$ ( 'input[type="checkbox"]' ) . change ( function () {
alert ( " Feature in progress " );
$ ( '#refresh' ) . css ( 'border-width' , '5px' );
});
$ ( '#refresh' ) . click ( function ( event ) {
$ ( this ) . css ( 'border-width' , '1px' );
event . preventDefault ();
drawChart ();
2021-01-09 13:04:43 +00:00
});
});
2021-01-22 16:19:51 +00:00
function drawChart () {
var container = document . getElementById ( 'timeline' );
var chart = new google . visualization . Timeline ( container );
var dataTable = new google . visualization . DataTable ();
dataTable . addColumn ({ type : 'string' , id : 'Type' });
dataTable . addColumn ({ type : 'string' , id : 'Role' });
dataTable . addColumn ({ type : 'string' , role : 'tooltip' , 'p' : { 'html' : true } });
dataTable . addColumn ({ type : 'date' , id : 'Start' });
dataTable . addColumn ({ type : 'date' , id : 'End' });
dataTable . addRows ([
< ? php
while ( $loop -> have_posts () ) :
$loop -> the_post ();
?>
< ? php
$end_date = get_post_meta ( get_the_ID (), 'end-date' , true );
$is_current = ( ! $end_date || ( $end_date && $end_date > gmdate ( 'Y-m-d' ) ) ) ? true : false ;
$company = wp_get_object_terms (
get_the_ID (),
'company' ,
array (
'fields' => 'names' ,
)
);
$role_title = htmlspecialchars_decode ( strip_tags ( get_the_title () ) );
$start = get_the_date ();
$end = ( ! $end_date || ( $end_date && $end_date > gmdate ( 'Y-m-d' ) ) ) ? gmdate ( 'Y-m-d' ) : $end_date ;
?>
[
'<?php echo ( $is_current ) ? ' Current ' : ' Past '; ?>' ,
'<?php echo esc_html( $role_title . ' , ' . html_entity_decode( $company[0] ) ); ?>' ,
'<div style="padding: 20px"><h1 class="timeline-entry-title"><?php echo wp_kses_post( $role_title ); ?></h1><h2><?php echo wp_kses_post( html_entity_decode( $company[0] ) ); ?></h2><ul><li><?php echo esc_html( $start ); ?>—<?php echo esc_html( ( $is_current ) ? ' present ' : $end ); ?></li></ul></div>' ,
new Date ( '<?php echo esc_attr( $start ); ?>' ),
new Date ( '<?php echo esc_attr( $end ); ?>' )
],
< ? php endwhile ; ?>
]);
var rowHeight = 15 ;
var chartHeight = dataTable . getNumberOfRows () * rowHeight + 50 ;
var options = {
tooltip : { isHtml : true },
timeline : {
showRowLabels : true ,
},
height : chartHeight ,
width : window . innerWidth - 200 ,
};
chart . draw ( dataTable , options );
}
</ script >
< ? php // phpcs:disable ?>
< div id = " slider-range " ></ div >
< section id = " timeline " >
< div class = " row " >
< div id = " timeline " class = " col-12 " >
< img class = " loading " src = " /wp-content/uploads/2016/12/ajax-loader.gif " >
</ div >
</ div >
</ section >
</ main >
2021-01-09 13:04:43 +00:00
</ div >
2021-01-21 10:24:10 +00:00
</ main >
2021-01-09 13:04:43 +00:00
< ? php // get_sidebar(); ?>
< ? php get_footer (); ?>