Skip to content

Instantly share code, notes, and snippets.

@ka215

ka215/demo-mcuh.php

Created March 23, 2021 08:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ka215/50b7d4d61ff2316dd1c1783b1c98de9f to your computer and use it in GitHub Desktop.
Save ka215/50b7d4d61ff2316dd1c1783b1c98de9f to your computer and use it in GitHub Desktop.
Download ZIP
MARVEL Cinematic Universe History as demo of jQuery.Timeline
Raw
demo-mcuh.php
<?php
// Const
define( 'USE_LOCAL_TIMEZONE', true );
// Local Valiables
try {
// Get now datetime by using DateTimeImmutable Object
$timezone = USE_LOCAL_TIMEZONE ? date_default_timezone_get() : 'UTC';
// $timezone = 'Asia/Tokyo';
// $timezone = 'Europe/London';
$current_datetime = new \DateTimeImmutable( 'now', new \DateTimeZone( $timezone ) );
} catch ( Exception $e ) {
echo $e->getMessage();
exit( 1 );
}
$auto_datetime = true;
$default_timeline_span = 3;
$_start_datetime = $current_datetime->modify( '-1 day' );
$_end_datetime = intval( $default_timeline_span ) > 0 ? $current_datetime->modify( sprintf( '+%d month', $default_timeline_span ) ) : 'auto';
$date_range = [
'start' => $_start_datetime->format( 'Y-m-d' ),
'end' => $_end_datetime === 'auto' ? $_end_datetime : $_end_datetime->format( 'Y-m-d' )
];
$user_locale = 'en-US';
$is_point_type = true;
$is_ruler_colored = false;
$ruler_top_color = randColorSet( 141 );
$ruler_bottom_color = randColorSet( 141 );
$auto_put_events = false;
$default_timeline_rows = $auto_put_events ? 9 : 'auto';
$sidebar_type = 1;
$scale = '';
// Plugin Default Settings
$defaults = [
'type' => (bool) $is_point_type ? 'point' : 'bar',
'startDatetime' => $date_range['start'],
'endDatetime' => $date_range['end'],
'scale' => ! empty( $scale ) ? $scale : 'day',
'rows' => $default_timeline_rows,
'minGridSize' => 48,
'headline' => [
'display' => true,
'title' => 'Demo of jQuery.Timeline',
'range' => true,
'locale' => $user_locale,
'format' => [
'timeZone' => $timezone,
],
],
'footer' => [
'display' => true,
'content' => '<small>&copy; MAGIC METHODS '. date( 'Y' ) .'</small>',
'range' => true,
'locale' => $user_locale,
'format' => [
'timeZone' => $timezone,
],
],
'sidebar' => [
'sticky' => true,
'list' => [
'<a name="row-01"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-001.png' ) .'" class="rounded" alt="Tony Stark"></span> "Tony" Stark</a>',
'<a name="row-02"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-002.png' ) .'" class="rounded" alt="Steve Rogers"></span> Steve Rogers</a>',
'<a name="row-03"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-003.png' ) .'" class="rounded" alt="Thor"></span> Thor</a>',
'<a name="row-04"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-004.png' ) .'" class="rounded" alt="Bruce Banner/Hulk"></span> Bruce Banner/Hulk</a>',
'<a name="row-05"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-005.png' ) .'" class="rounded" alt="Natasha Romanoff"></span> Natasha Romanoff</a>',
'<a name="row-06"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-006.png' ) .'" class="rounded" alt="Clint Barton"></span> Clint Barton</a>',
'<a name="row-07"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-010.png' ) .'" class="rounded" alt="Peter Quill"></span> Peter Quill/Star-Lord</a>',
'<a name="row-08"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-007.png' ) .'" class="rounded" alt="Scott Lang"></span> Scott Lang</a>',
'<a name="row-09"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-009.png' ) .'" class="rounded" alt="Peter Parker"></span> Peter Parker</a>',
'<a name="row-10"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-011.png' ) .'" class="rounded" alt="Stephen Strange"></span> Stephen Strange</a>',
'<a name="row-11"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-012.png' ) .'" class="rounded" alt="T\'Challa"></span> T\'Challa</a>',
'<a name="row-12"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-008.png' ) .'" class="rounded" alt="Carol Danvers"></span> Carol Danvers</a>',
/* '<a name="row-13"><span class="avatar-icon"><img src="'. loadAsset( 'imgs/a4eg-thumb-v001.png' ) .'" class="rounded" alt="Thanos"></span> Thanos</a>', */
],
],
'ruler' => [
'top' => [
// 'lines' => [ 'millennium', 'century', 'decade', 'lustrum', 'year', 'month', 'week', 'day', 'weekday', 'hour', 'minute', 'second' ],
'lines' => [ 'year', 'month', 'day', 'weekday' ],
'height' => 26,
'fontSize' => 13,
'color' => $is_ruler_colored ? $ruler_top_color['text'] : '#777777',
'background' => $is_ruler_colored ? $ruler_top_color['bg'] : '#FFFFFF',
'locale' => $user_locale,
'format' => [
'timeZone' => $timezone, 'hour12' => false, 'year' => 'numeric', 'month' => 'long', 'day' => 'numeric', 'weekday' => 'short',
],
],
'bottom' => [
'lines' => [ 'week', 'year' ],
'color' => $is_ruler_colored ? $ruler_bottom_color['text'] : '#777777',
'background' => $is_ruler_colored ? $ruler_bottom_color['bg'] : '#FFFFFF',
'locale' => $user_locale,
'format' => [
'timeZone' => $timezone, 'hour12' => false, 'year' => 'numeric', 'week' => 'ordinal',
],
]
],
'rangeAlign' => 'end',
'eventMeta' => [
'display' => false,
'scale' => 'day',
'locale' => $user_locale,
'format' => [
'timeZone' => $timezone,
],
'content' => '',
],
'reloadCacheKeep' => false,
'zoom' => false,
'debug' => false,
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MARVEL Cinematic Universe History as demo of jQuery.Timeline</title>
<!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome latest 5.3.1 -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- jQuery Timeline -->
<link href="//cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.css" rel="stylesheet">
<link rel="stylesheet" href="./dist/jquery.timeline.demo.css?v=<?= filemtime( './dist/jquery.timeline.demo.css' ); ?>">
<style>
.thumbnail { height: 32px; width: 32px; margin: auto 1em auto 0; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
.thumbnail.circled { border-radius: 50%; }
#myModal .modal-body { opacity: 0; transition: all 0.5s ease; }
#myModal .jqtl-event-view { display: flex; }
#myModal .jqtl-event-view > * { width: 50%; }
#notices p { margin-bottom: 0; }
#notice-php label, #notice-js label { font-weight: 600; margin-right: 1em; }
/* .popover { box-shadow: 0 1px 0 4px rgba(51,51,51,0.05); } */
.popover-body { color: #444; }
.popover-body b { font-weight: 500; color: #212529; }
</style>
</head>
<body>
<div class="container-fluid">
<section class="row">
<div class="col-12">
<div id="my-timeline" class="test-timeline test-1">
<ul class="timeline-events">
<?php
if ( $auto_put_events ) :
$events = generate_random_events( $date_range['start'], 30, 90, $default_timeline_rows, 60 * 24, 60 * 24 * 3 );
if ( $defaults['type'] === 'bar' ) :
foreach ( $events as $_evt ) {
printf( '<li data-timeline-node=\'%s\'></li>', json_encode( $_evt ) );
}
else :
foreach ( $events as $_i => $_evt ) {
$_evt['id'] = $_i + 1;
if ( $_i > 0 && mt_rand( 0, 1 ) == 1 ) {
$_evt['relation'] = [
'before' => $_i > 0 ? $_i : -1,
'curve' => mt_rand( 0, 1 ),
'linesize' => mt_rand( 1, 6 ),
'linecolor' => randColorSet()['bg'],
];
}
printf( '<li data-timeline-node=\'%s\'></li>', json_encode( $_evt ) );
}
endif;
else : ?>
<li data-timeline-node="">invalid event</li>
<li data-timeline-node="{}">invalid event</li>
<li data-timeline-node="{id:1,start:'2008-5-2',row:1,content:'Villain: Iron Monger (Obadiah Stane)',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/7/70/Ironmanposter.JPG',extend:{toggle:'modal',target:'#myModal'}}">IRON MAN</li>
<li data-timeline-node="{id:2,start:'2008-6-13',row:1,content:'An uncredited cameo appearances as one of guest.',size:'small',relation:{before:1},extend:{toggle:'popover',trigger:'hover'}}">The Incredible Hulk</li>
<li data-timeline-node="{id:3,start:'2010-5-10',row:1,content:'Villains: Whiplash (Ivan Vanko), Justin Hammer',size:'large',relation:{before:2},image:'https://upload.wikimedia.org/wikipedia/en/e/ed/Iron_Man_2_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">IRON MAN 2</li>
<li data-timeline-node="{id:4,start:'2013-5-3',row:1,content:'Villains: Extremis (Aldrich Killian), Mandarin (Trevor Slattery)',size:'large',relation:{before:3},image:'https://upload.wikimedia.org/wikipedia/en/d/d5/Iron_Man_3_theatrical_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">IRON MAN 3</li>
<li data-timeline-node="{id:5,start:'2010-5-10',row:5,content:'An undercover spy for S.H.I.E.L.D. posing as Stark\'s new assistant.',extend:{toggle:'popover',trigger:'hover'}}">IRON MAN 2</li>
<li data-timeline-node="{id:6,start:'2008-6-13',row:4,content:'Villain: Abomination (Emil Blonsky)',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/8/88/The_Incredible_Hulk_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Incredible Hulk</li>
<li data-timeline-node="{id:7,start:'2011-5-6',row:3,content:'Villains: Loki, Destroyer',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/fc/Thor_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Thor</li>
<li data-timeline-node="{id:8,start:'2011-5-6',row:6,content:'An uncredited cameo appearances as one of guest.',size:'small',extend:{toggle:'popover',trigger:'hover'}}">Thor</li>
<li data-timeline-node="{id:9,start:'2011-7-22',row:2,content:'Villain: Red Skull (Johann Schmidt)',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/3/37/Captain_America_The_First_Avenger_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Captain America: The First Avenger</li>
<li data-timeline-node="{id:10,start:'2012-5-4',row:1,content:'Villains: Loki, Chitauri',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Avengers</li>
<li data-timeline-node="{id:11,start:'2012-5-4',row:2,content:'Villains: Loki, Chitauri',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Avengers</li>
<li data-timeline-node="{id:12,start:'2012-5-4',row:3,content:'Villains: Loki, Chitauri',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Avengers</li>
<li data-timeline-node="{id:13,start:'2012-5-4',row:4,content:'Villains: Loki, Chitauri',size:'large',relation:{before:6},image:'https://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Avengers</li>
<li data-timeline-node="{id:14,start:'2012-5-4',row:5,content:'Villains: Loki, Chitauri',size:'large',relation:{before:5},image:'https://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Avengers</li>
<li data-timeline-node="{id:15,start:'2012-5-4',row:6,content:'Villains: Loki, Chitauri',size:'large',relation:{before:8},image:'https://upload.wikimedia.org/wikipedia/en/f/f9/TheAvengers2012Poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">The Avengers</li>
<li data-timeline-node="{id:16,start:'2013-11-8',row:3,content:'Villains: Malekith, Kurse (Algrim)',size:'large',relation:{before:7},image:'https://upload.wikimedia.org/wikipedia/en/7/7e/Thor_-_The_Dark_World_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Thor: The Dark World</li>
<li data-timeline-node="{id:17,start:'2014-4-4',row:2,content:'Villains: Winter Soldier (Bucky Barnes), Brock Rumlow, Alexander Pierce',size:'large',relation:{before:9},image:'https://upload.wikimedia.org/wikipedia/en/e/e8/Captain_America_The_Winter_Soldier.jpg',extend:{toggle:'modal',target:'#myModal'}}">Captain America: The Winter Soldier</li>
<li data-timeline-node="{id:18,start:'2014-4-4',row:5,content:'A highly trained spy and assassin working for S.H.I.E.L.D. who teams up with Rogers.',relation:{before:14},extend:{toggle:'popover',trigger:'hover'}}">Captain America: The Winter Soldier</li>
<li data-timeline-node="{id:19,start:'2014-8-1',row:7,content:'Villains: Ronan the Accuser, Nebula, Korath',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/b/b5/Guardians_of_the_Galaxy_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Guardians of the Galaxy</li>
<li data-timeline-node="{id:20,start:'2015-5-1',row:1,content:'Villain: Ultron',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Age of Ultron</li>
<li data-timeline-node="{id:21,start:'2015-5-1',row:2,content:'Villain: Ultron',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Age of Ultron</li>
<li data-timeline-node="{id:22,start:'2015-5-1',row:3,content:'Villain: Ultron',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Age of Ultron</li>
<li data-timeline-node="{id:23,start:'2015-5-1',row:4,content:'Villain: Ultron',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Age of Ultron</li>
<li data-timeline-node="{id:24,start:'2015-5-1',row:5,content:'Villain: Ultron',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Age of Ultron</li>
<li data-timeline-node="{id:25,start:'2015-5-1',row:6,content:'Villain: Ultron',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/f/ff/Avengers_Age_of_Ultron_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Age of Ultron</li>
<li data-timeline-node="{id:26,start:'2015-7-17',row:8,content:'Villains: Yellowjacket (Darren Cross)',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/7/75/Ant-Man_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Ant-Man</li>
<li data-timeline-node="{id:27,start:'2015-7-17',row:2,content:'An uncredited cameo appearances as one of guest.',size:'small',extend:{toggle:'popover',trigger:'hover'}}">Ant-Man</li>
<li data-timeline-node="{id:28,start:'2016-5-6',row:2,content:'Villains: Helmut Zemo, Crossbones (Brock Rumlow)',size:'large',relation:{before:17},image:'https://upload.wikimedia.org/wikipedia/en/5/53/Captain_America_Civil_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Captain America: Civil War</li>
<li data-timeline-node="{id:29,start:'2016-5-6',row:1,content:'Villains: Helmut Zemo, Crossbones (Brock Rumlow)',relation:{before:4},extend:{toggle:'popover',trigger:'hover'}}">Captain America: Civil War</li>
<li data-timeline-node="{id:30,start:'2016-5-6',row:5,relation:{before:14},extend:{toggle:'popover',trigger:'click',html:true}}"><h4 class="event-label">Captain America: Civil War</h4><p class="event-content"><b>Villains:</b> Helmut Zemo, Crossbones (Brock Rumlow)<br><b>Release date:</b> May 6, 2016 (United States)</p></li>
<li data-timeline-node="{id:31,start:'2016-5-6',row:6,content:'Villains: Helmut Zemo, Crossbones (Brock Rumlow)',relation:{before:15},extend:{toggle:'popover',trigger:'hover'}}">Captain America: Civil War</li>
<li data-timeline-node="{id:32,start:'2016-5-6',row:8,content:'Villains: Helmut Zemo, Crossbones (Brock Rumlow)',relation:{before:26},extend:{toggle:'popover',trigger:'hover'}}">Captain America: Civil War</li>
<li data-timeline-node="{id:33,start:'2016-5-6',row:9,content:'Villains: Helmut Zemo, Crossbones (Brock Rumlow)',extend:{toggle:'popover',trigger:'hover'}}">Captain America: Civil War</li>
<li data-timeline-node="{id:34,start:'2016-5-6',row:11,content:'Villains: Helmut Zemo, Crossbones (Brock Rumlow)',extend:{toggle:'popover',trigger:'hover'}}">Captain America: Civil War</li>
<li data-timeline-node="{id:35,start:'2016-11-4',row:10,content:'Villains: Dormammu, Kaecilius',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/c/c7/Doctor_Strange_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Doctor Strange</li>
<li data-timeline-node="{id:36,start:'2016-11-4',row:3,content:'An uncredited cameo appearances as one of guest.',size:'small',extend:{toggle:'popover',trigger:'hover'}}">Doctor Strange</li>
<li data-timeline-node="{id:37,start:'2017-5-5',row:7,content:'Villain: Ego',size:'large',relation:{before:19},image:'https://upload.wikimedia.org/wikipedia/en/a/ab/Guardians_of_the_Galaxy_Vol_2_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Guardians of the Galaxy Vol. 2</li>
<li data-timeline-node="{id:38,start:'2017-7-7',row:9,content:'Villains: Vulture (Adrian Toomes), Shocker (Herman Schultz)',size:'large',relation:{before:33},image:'https://upload.wikimedia.org/wikipedia/en/f/f9/Spider-Man_Homecoming_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Spider-Man: Homecoming</li>
<li data-timeline-node="{id:39,start:'2017-7-7',row:1,content:'Villains: Vulture (Adrian Toomes), Shocker (Herman Schultz)',extend:{toggle:'popover',trigger:'hover'}}">Spider-Man: Homecoming</li>
<li data-timeline-node="{id:40,start:'2017-7-7',row:2,content:'Villains: Vulture (Adrian Toomes), Shocker (Herman Schultz)',extend:{toggle:'popover',trigger:'hover'}}">Spider-Man: Homecoming</li>
<li data-timeline-node="{id:41,start:'2017-11-3',row:3,content:'Villain: Hela',size:'large',relation:{before:16},image:'https://upload.wikimedia.org/wikipedia/en/7/7d/Thor_Ragnarok_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Thor: Ragnarok</li>
<li data-timeline-node="{id:42,start:'2017-11-3',row:4,content:'Villain: Hela',relation:{before:13},extend:{toggle:'popover',trigger:'hover'}}">Thor: Ragnarok</li>
<li data-timeline-node="{id:43,start:'2017-11-3',row:10,content:'Villain: Hela',relation:{before:35},extend:{toggle:'popover',trigger:'hover'}}">Thor: Ragnarok</li>
<li data-timeline-node="{id:44,start:'2018-2-16',row:11,content:'Villains: Erik Killmonger Stevens, Ulysses Klaue',size:'large',relation:{before:34},image:'https://upload.wikimedia.org/wikipedia/en/0/0c/Black_Panther_film_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Black Panther</li>
<li data-timeline-node="{id:45,start:'2018-4-27',row:1,content:'Villain: Thanos',size:'large',relation:{before:20},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:46,start:'2018-4-27',row:2,content:'Villain: Thanos',size:'large',relation:{before:28},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:47,start:'2018-4-27',row:3,content:'Villain: Thanos',size:'large',relation:{before:41},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:48,start:'2018-4-27',row:4,content:'Villain: Thanos',size:'large',relation:{before:42},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:49,start:'2018-4-27',row:5,content:'Villain: Thanos',size:'large',relation:{before:30},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:50,start:'2018-4-27',row:7,content:'Villain: Thanos',size:'large',relation:{before:37},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:51,start:'2018-4-27',row:9,content:'Villain: Thanos',size:'large',relation:{before:38},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:52,start:'2018-4-27',row:10,content:'Villain: Thanos',size:'large',relation:{before:43},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:53,start:'2018-4-27',row:11,content:'Villain: Thanos',size:'large',relation:{before:44},image:'https://upload.wikimedia.org/wikipedia/en/4/4d/Avengers_Infinity_War_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Infinity War</li>
<li data-timeline-node="{id:54,start:'2018-7-6',row:8,content:'Villain: Ghost (Ava Starr)',size:'large',relation:{before:32},image:'https://upload.wikimedia.org/wikipedia/en/2/2c/Ant-Man_and_the_Wasp_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Ant-Man and the Wasp</li>
<li data-timeline-node="{id:55,start:'2019-3-8',row:12,content:'Villains: Yon-Rogg, Ronan the Accuser, Korath',size:'large',image:'https://upload.wikimedia.org/wikipedia/en/8/85/Captain_Marvel_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Captain Marvel</li>
<li data-timeline-node="{id:56,start:'2019-3-8',row:2,content:'An uncredited cameo appearances as one of guest.',size:'small',extend:{toggle:'popover',trigger:'hover'}}">Captain Marvel</li>
<li data-timeline-node="{id:57,start:'2019-3-8',row:4,content:'An uncredited cameo appearances as one of guest.',size:'small',extend:{toggle:'popover',trigger:'hover'}}">Captain Marvel</li>
<li data-timeline-node="{id:58,start:'2019-3-8',row:5,content:'An uncredited cameo appearances as one of guest.',size:'small',extend:{toggle:'popover',trigger:'hover'}}">Captain Marvel</li>
<li data-timeline-node="{id:59,start:'2019-4-26',row:1,content:'Villain: Thanos',size:'large',relation:{before:45},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:60,start:'2019-4-26',row:1,content:'Villain: Thanos',size:'large',relation:{before:45},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:61,start:'2019-4-26',row:2,content:'Villain: Thanos',size:'large',relation:{before:46},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:62,start:'2019-4-26',row:3,content:'Villain: Thanos',size:'large',relation:{before:47},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:63,start:'2019-4-26',row:4,content:'Villain: Thanos',size:'large',relation:{before:48},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:64,start:'2019-4-26',row:5,content:'Villain: Thanos',size:'large',relation:{before:49},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:65,start:'2019-4-26',row:6,content:'Villain: Thanos',size:'large',relation:{before:31},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:66,start:'2019-4-26',row:7,content:'Villain: Thanos',size:'large',relation:{before:50},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:67,start:'2019-4-26',row:8,content:'Villain: Thanos',size:'large',relation:{before:54},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:68,start:'2019-4-26',row:9,content:'Villain: Thanos',size:'large',relation:{before:51},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:69,start:'2019-4-26',row:10,content:'Villain: Thanos',size:'large',relation:{before:52},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:70,start:'2019-4-26',row:11,content:'Villain: Thanos',size:'large',relation:{before:53},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:71,start:'2019-4-26',row:12,content:'Villain: Thanos',size:'large',relation:{before:55},image:'https://upload.wikimedia.org/wikipedia/en/0/0d/Avengers_Endgame_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Avengers: Endgame</li>
<li data-timeline-node="{id:72,start:'2019-7-2',row:9,content:'Villain: Secret!',size:'large',relation:{before:68},image:'https://upload.wikimedia.org/wikipedia/en/b/bd/Spider-Man_Far_From_Home_poster.jpg',extend:{toggle:'modal',target:'#myModal'}}">Spider-Man: Far From Home</li>
<li data-timeline-node="{id:73,start:'2020-5-1',row:5,content:'Still rumor',relation:{before:64,color:'#ccc'},bdColor:'#ccc',extend:{toggle:'popover',trigger:'hover'}}">Black Widow</li>
<li data-timeline-node="{id:74,start:'2020-11-6',row:10,content:'Undecided',relation:{before:69,color:'#ccc'},bdColor:'#ccc',extend:{toggle:'popover',trigger:'hover'}}">Doctor Strange 2</li>
<li data-timeline-node="{id:75,start:'2021-5-1',row:7,content:'Undecided',relation:{before:66,color:'#ccc'},bdColor:'#ccc',extend:{toggle:'popover',trigger:'hover'}}">Guardians of the Galaxy Vol. 3</li>
<li data-timeline-node="{id:76,start:'2021-11-6',row:11,content:'Undecided',relation:{before:70,color:'#ccc'},bdColor:'#ccc',extend:{toggle:'popover',trigger:'hover'}}">Black Panther 2</li>
<?php
endif; ?>
</ul>
</div><!-- /#my-timeline -->
</div><!-- /.col -->
</section><!-- /.row -->
<div id="copyright" class="text-center m-2">
&copy; <?= date('Y') ?> Monaural Sound ka2.org, Powered by MAGIC METHODS
</div>
</div><!-- /.container-fluid -->
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="jqtl-event-view"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div><!-- /.modal -->
<div class="custom-loader"></div>
<!-- REQUIRED JS SCRIPTS -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- jQuery (latest 3.3.1) -->
<script defer src="//code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script defer src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- -->
<!-- Bootstrap 4.1.3 -->
<script defer src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- jQuery Timeline -->
<script defer src="//cdn.jsdelivr.net/gh/ka215/jquery.timeline@main/dist/jquery.timeline.min.js"></script>
<!-- local scripts -->
<script>
window.addEventListener('load',function(){
const dt = new Date()
let defaults = <?= json_encode( $defaults ) ?>,
overrides = {
<?php if ( $is_point_type ) : ?>
startDatetime: '2008-1-1',
endDatetime: '2021-12-31',
scale: '<?= ! empty( $scale ) ? $scale : 'year' ?>',
minGridSize: 240,
headline: {
title: 'Marvel Cinematic Universe History',
range: false,
},
footer: {
display: false,
},
ruler: {
top: {
lines: [ 'year' ],
format: { month: 'numeric' }
},
bottom: {
lines: [ 'year' ],
format: { month: 'short' }
}
},
<?php else : ?>
startDatetime: /*'2019-3-1', */'2019-10-01', //'2019-04-01 00:00', //'184-11-30',
endDatetime: /*'2019-4-1', */'2019-11-01', //'184-12-31',
scale: '<?= ! empty( $scale ) ? $scale : 'day' ?>',
rows: 'auto',
minGridSize: 40 * 7,
headline: { title: <?php if ( $sidebar_type == 1 ) : ?>'Characters in "The brave warlord\'s way"'<?php else : ?>'Members Schedule'<?php endif; ?> }, // "The brave warlord Lü Bu's way"
ruler: {
top: {
lines: [ 'year', 'month', 'week', 'day', 'weekday', 'hour' ],
// locale: 'en-GB',
format: { hour12: false, year: 'numeric', month: 'numeric', week: 'ordinal', day: 'numeric', weekday: 'short', hour: 'numeric' }
},
},
<?php endif; ?>
effects: {
hoverEvent: true,
},
reloadCacheKeep: true,
zoom: false,
debug: false
},
mcu_options = Object.assign( defaults, overrides )
$('#my-timeline').Timeline( mcu_options )
.Timeline('initialized', function(e,v){
$('.jqtl-headline-wrapper').append('<div><a href="/" class="btn btn-secondary btn-sm">&laquo; Home</a></div>')
//$('[data-toggle="popover"]').popover()
})
$('#myModal').on('shown.bs.modal', function(){
$(this).find('.modal-title').empty().append( $(this).find('.jqtl-event-title').html() ).end()
.find('.jqtl-event-title').remove().end()
.find('.modal-body').css('opacity','1')
})
},false);
</script>
</body>
</html>
<?php
// Utility
/**
* Generate random events
*
* @param string $start_datetime (reqired)
* @param int $number (optional; defaults to 10 events)
* @param int $timeline_span (optional; defaults to 3 days)
* @param int $timeline_rows (optional; defaults to 5)
* @param int $min_interval_minute (optional; defaults to 15 minutes)
* @param int $max_interval_minute (optional; defaults to 60 * 12 = 720 minutes)
*
* @return array $events
*/
function generate_random_events( $start_datetime, $number = 10, $timeline_span = 3, $timeline_rows = 5, $min_interval_minute = 15, $max_interval_minute = 720 ) {
$events = [];
$number = (int) $number > 0 ? (int) $number : 10;
$_min_date = new \DateTimeImmutable( $start_datetime );
$base_text = <<<EOL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel vehicula nibh, a accumsan nisi. Aliquam tempor augue imperdiet, finibus lectus eget, mattis mi. Vestibulum vel ligula lorem. Vestibulum sapien arcu, dictum id pulvinar aliquam, porttitor eu lacus. Maecenas viverra eleifend posuere. Etiam ligula tellus, lobortis id pharetra sed, porttitor vel urna. Cras dictum nunc tempus, placerat dolor lacinia, vestibulum risus. Nulla a tincidunt est, vel feugiat felis. Ut tincidunt placerat tempor. Curabitur leo est, posuere pharetra enim in, tristique dapibus justo. Integer hendrerit est non metus auctor, eu sollicitudin felis facilisis. Maecenas at scelerisque nibh.
Nunc porttitor est urna, vel scelerisque ipsum commodo sed. Morbi eros nulla, hendrerit nec convallis non, lacinia vitae dui. Etiam molestie nisl eget nibh posuere, ac dictum tortor elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris dictum dui ut feugiat pharetra. Vivamus consequat massa magna, in ultrices eros bibendum at. Donec cursus et erat a rutrum. Etiam dolor magna, auctor in porta quis, pretium et risus. Ut felis elit, ornare sed mauris ut, interdum imperdiet urna. Morbi commodo neque nec mauris mattis, nec elementum massa pulvinar. Vivamus suscipit, neque ac sagittis maximus, magna turpis pulvinar sem, et elementum urna nisi vitae diam. Vivamus pretium pulvinar laoreet. Proin tortor sapien, viverra vel arcu sed, accumsan congue lectus. Vestibulum sem arcu, fermentum varius laoreet a, elementum nec ipsum. Sed consectetur nibh justo, congue porttitor metus laoreet eget.
Pellentesque porttitor ac libero ac mattis. Aliquam faucibus mattis dolor, tempus fermentum orci fermentum eu. Vestibulum ultrices vulputate aliquet. Donec ligula lacus, dictum vitae euismod ac, vulputate sed nibh. Suspendisse rutrum urna vitae vulputate hendrerit. Maecenas vestibulum erat ipsum, quis accumsan nunc mollis ut. Vestibulum faucibus tellus sed mollis consequat. Maecenas et nulla quam. Morbi quis diam est. Mauris nisl ex, consectetur a molestie sed, ultricies vitae nunc. Cras id arcu sed quam dignissim laoreet. Nam sit amet ex non mauris ornare varius.
Nullam eu diam ligula. Fusce a dolor dui. Vivamus neque metus, convallis at neque a, imperdiet placerat turpis. Proin sed turpis et tellus cursus ultricies. Etiam iaculis facilisis leo eu ullamcorper. Integer sed accumsan quam. Integer eros mi, iaculis vestibulum nisi et, porta consequat odio. Vestibulum molestie, lorem vitae convallis ornare, libero purus ullamcorper nibh, at bibendum ex lectus quis erat.
Aenean dolor dui, vehicula eu porttitor quis, euismod quis turpis. Morbi porta nisi non porttitor efficitur. Cras finibus, mauris nec aliquam hendrerit, massa est posuere dui, ut congue felis dui et mauris. Maecenas convallis dui in purus lacinia condimentum. In non sagittis odio. Duis scelerisque porta feugiat. Proin sit amet odio et sapien volutpat blandit. Suspendisse at nisl non nulla interdum bibendum. Curabitur consequat ut risus nec rhoncus. Nam nec justo dapibus, consectetur eros ut, consequat ex. Nulla vitae eleifend lectus. Phasellus commodo lectus a ipsum posuere, in rutrum leo auctor. Nulla facilisi. Aliquam posuere, massa nec commodo euismod, velit odio ullamcorper mauris, egestas congue diam libero vitae nibh. In odio elit, tincidunt nec eros sit amet, pulvinar hendrerit nibh. Ut porta maximus ex vel cursus.
EOL;
$text_seeds = explode( ' ', str_replace( [ "\r", "\n" ], '', $base_text ) );
for ( $i = 0; $i < $number; $i++ ) {
$event_start_date = $_min_date->modify( sprintf( '+%d minutes', mt_rand( 0, 60 * 24 * $timeline_span ) ) );
$_interval_string = sprintf( 'PT%dM', mt_rand( (int) $min_interval_minute, (int) $max_interval_minute ) );
$elapsed_date = $event_start_date->add( new \DateInterval( $_interval_string ) );
$_sdt = $event_start_date->format( 'Y-m-d H:i' );
$_edt = $elapsed_date->format( 'Y-m-d H:i' );
$_erw = mt_rand( 1, $timeline_rows );
$_label_seeds = array_rand( array_flip( $text_seeds ), 16 );
$_label_hash = hash( 'crc32b', "$_sdt$_edt$_erw" );
$_label_elms = [];
foreach ( str_split( $_label_hash ) as $_str ) {
$_label_elms[] = $_label_seeds[hexdec( strtolower( $_str ) )];
}
$_body_seeds = array_rand( array_flip( $text_seeds ), 16 );
$_body_hash = hash( 'sha1', "$_sdt$_edt$_erw" );
$_body_elms = [];
foreach ( str_split( $_body_hash ) as $_str ) {
$_body_elms[] = $_body_seeds[hexdec( strtolower( $_str ) )];
}
// $_bgcolor = '#' . substr( md5( mt_rand() ), 0, 6 );
$colorset = randColorSet( 141 );
array_push( $events, [
'start' => $_sdt,
'end' => $_edt,
'row' => $_erw,
'bgColor' => $colorset['bg'],
'color' => $colorset['text'],
'label' => ucfirst( str_replace( [ '.', ',' ], '', trim( implode( ' ', $_label_elms ) ) ) ),
'content' => ucfirst( trim( implode( ' ', $_body_elms ), " ." ) ) . '.',
] );
}
return $events;
}
/**
* Retrieve a color set of random background color and text color.
* It is optimized for a text color with high readability according to the luminance of the background color.
*
* @param int $luminance (optional; Luminance as a branch point of light and darkness is in the range of 0 to 255)
*
* @return array $colorset (has keys of "bg" and "text")
*/
function randColorSet( $luminance = 128 ) {
$rgb = [ 'r' => 0, 'g' => 0, 'b' => 0 ];
$colorset = [ 'bg' => '#', 'text' => '#FFFFFF' ];
foreach( $rgb as $_key => $_val ) {
$rgb[$_key] = mt_rand( 0, 255 );
$colorset['bg'] .= str_pad( dechex( $rgb[$_key] ), 2, '0', STR_PAD_LEFT );
}
$yuv = 0.299 * $rgb['r'] + 0.587 * $rgb['g'] + 0.114 * $rgb['b'];
if ( $yuv >= $luminance ) {
$colorset['text'] = '#101010';
}
return $colorset;
}
function loadAsset( $file_relative_path ) {
if ( file_exists( './'. $file_relative_path ) ) {
return $file_relative_path;
} else {
return '';
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment