Skip to content

Instantly share code, notes, and snippets.

@ka215

ka215/sample3.html

Created March 23, 2021 08:38
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/5ce08eeac67c897828de7c367cbd782f to your computer and use it in GitHub Desktop.
Save ka215/5ce08eeac67c897828de7c367cbd782f to your computer and use it in GitHub Desktop.
Download ZIP
jQuery.Timeline demo source of "https://ka2.org/jqtl-v2/v2.1.html"
Raw
sample3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.Timeline Sample - 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@master/dist/jquery.timeline.min.css" -->
<link rel="stylesheet" href="../dist/jquery.timeline.min.css?210">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; font-family: Arial, Helvetica, sans-serif; }
.darken { background-color: #171615; }
.nightly { background-color: #471060; }
label { font-size: 15px; color: #333333; }
.darken label, .nightly label { color: #F7F7F7; }
select, button { padding: 0.3em 0.8em; font-size: 15px; }
main { display: block; margin: 0 auto; width: calc(100% - 2em); }
h3 { margin: 0.25em 0; }
.mr-h { margin-right: 0.5em; }
.d-flex-col { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-content: center; align-items: start; }
.text-caption { margin-bottom: 2px; font-size: smaller; color: #717477; }
.no-label { margin-top: 16px; }
.occupy-advance { position: relative; height: 755.56px; width: 100%; }
.occupy-advance::before { position: absolute; content: 'Occupy the display area in advance.'; font-size: large; font-weight: 600; color: #CCC; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jqtl-side-index-item > * { padding-left: 1em !important; padding-right: 1em !important; }
#checker-title { padding-bottom: 0.5em; text-align: center; color: #505050; }
#controller { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; font-size: 15px; }
footer { margin: 32px 0 8px; text-align: center; }
footer > * { font-size: 86%; font-family: 'Lucida Console', Monaco, monospace; letter-spacing: -0.5px; color: #717477; }
footer a, footer a:hover, footer a:active, footer a:visited { text-decoration: none; }
.dismiss-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='53.7' height='53.7' viewBox='0 0 53.7 53.7'><path opacity='.6' fill='%23666E6E' d='M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z'/></svg>"); background-repeat: no-repeat; background-size: contain; position: absolute; cursor: pointer; width: 50px; height: 50px; }
</style>
</head>
<body>
<main role="content">
<div id="my-timeline" class="occupy-advance"></div>
<!-- div class="timeline-event-view"></div -->
<hr>
<div id="checker-title">Checker for jQuery.Timeline</div>
<div id="controller">
<div class="d-flex-col">
<label for="change-theme" class="text-caption">Theme:</label>
<select id="change-theme">
<option value="default">Default</option>
<option value="darken" >Darken</option>
<option value="nightly">Nightly</option>
</select>
</div>
<button type="button" id="initialized" class="no-label">Initialized</button>
<button type="button" id="destroy" class="no-label">Destroy</button>
<button type="button" id="toggle-view" data-shown="true" class="no-label">Hide</button>
<button type="button" id="add-event" class="no-label">Add Event</button>
<button type="button" id="update-event" class="no-label">Update Event</button>
<button type="button" id="remove-event" class="no-label">Remove Event</button>
<button type="button" id="dateback" class="no-label">Dateback</button>
<button type="button" id="dateforth" class="no-label">Dateforth</button>
<div class="d-flex-col">
<label for="alignment" class="text-caption">Alignment:</label>
<select id="alignment">
<option value="left">Left(Begin)</option>
<option value="center">Center</option>
<option value="right">Right(End)</option>
<option value="latest">Latest</option>
<option value="current">Currently</option>
</select>
</div>
<button type="button" id="reload" class="no-label">Reload</button>
</div>
</main>
<footer>
<p>&copy; 2020 Monaural Sound <a href="https://ka2.org/">ka2.org</a>, Powered by MAGIC METHODS</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@master/dist/jquery.timeline.min.js"></script -->
<script src="../dist/jquery.timeline.min.js?210"></script>
<script>
$(function(){
var JQTL_VER = $.fn.Timeline ? $.fn.Timeline.Constructor.VERSION : '2.1.x',
JQUERY_VER = '3.5.1',
tlElem = $('#my-timeline'),// Cached timeline element
now = new Date(),
listItems = [],
incr = 1,
maxList = 12,// display max rows of sidebar
begin = now.setDate(now.getDate() - 3),
end = undefined;
now.setMonth(now.getMonth() + 2)
end = now.setDate(now.getDate() - 1);
for ( incr = 1; incr <= maxList; incr++ ) {
listItems.push( '<span>Row ' + incr + '</span>' );
}
// Timeline options are defined as global variables
window.tlOpts = {
type: 'mixed',
startDatetime: begin,
endDatetime: end,
scale: 'day',
minGridSize: 48,
headline: {
display: true,
title: '<i class="jqtl-icon mr-h"></i>jQuery.Timeline '+ JQTL_VER +' via jQuery '+ JQUERY_VER,
range: true,
local: "en-US",
format: {
timeZone: "UTC", hour12: false,
}
},
sidebar: {
list: listItems,
sticky: true,
},
rows: listItems.length,
ruler: {
top: {
lines: [ 'year', 'month', 'day' ],
format: {
year: 'numeric',
month: 'long',
day: 'numeric',
}
},
bottom: {
lines: [ 'day' ],
format: {
day: 'numeric',
}
}
},
hideScrollbar: true,
eventData: generateEventData( begin, end ),// Generate initial event data
};
// Initialize the timeline
tlElem.Timeline( window.tlOpts );
tlElem.Timeline('openEvent', function( event, eventNodes ) {
// Define an event handler for getting event nodes on the timeline
console.log( 'The event node with eventID: '+ event.eventId +' was clicked.', event, eventNodes );
openDialog( eventNodes );
});
// Handler for checking various methods
$('#initialized').on('click', function(){
// For checking the initialized method
tlElem.Timeline( 'initialized', function() {
$(arguments[0]).removeClass( 'occupy-advance' );
console.log( arguments[2].message );
}, { message: 'The "initialized" method can be called at only first time in the instantiated timeline.' } );
$(window).scrollTop(0);
});
$('#destroy').on('click', function(){
// For checking the destroy method
if ( $(this).attr('data-destroyed') ) {
// Reinstantiating the timeline does not recover the previously bound openEvent method event.
/*
$(this).removeAttr('data-destroyed').text('Destroy');
$('main div.occupy-advance').attr('id', 'my-timeline');
tlElem = $('#my-timeline');
tlElem.Timeline( window.tlOpts );
tlElem.Timeline('openEvent', function( event, eventNodes ) {
openDialog( eventNodes );
});
*/
window.location.reload();
} else {
tlElem.Timeline( 'destroy' );
$('main').prepend('<div class="occupy-advance"></div>');
$(this).attr('data-destroyed', 'true').text('Relaunch');
alert( 'At the "destroy" method removed the timeline element itself from the DOM.' );
}
});
$('#toggle-view').on('click', function(e){
var nowShown = $(e.target).attr( 'data-shown' ) === 'true';
if ( nowShown ) {
tlElem.Timeline( 'hide' );
$(e.target).attr( 'data-shown', 'false' ).text( 'Show' );
} else {
tlElem.Timeline( 'show' );
$(e.target).attr( 'data-shown', 'true' ).text( 'Hide' );
}
});
$('#add-event').on('click', function(){
// For checking the addEvent method
var nowDt = new Date(),
newEvt = [
{ eventId: 4, start: getModDateString( nowDt, { day: '+5', h: 'rand', min: 'rand', sec: 'rand' } ), end: getModDateString( nowDt, { day: '+9', h: 'rand', min: 'rand', sec: 'rand' } ), row: 7, label: "Additional event 4", content: "This is an event added by the addEvent method." },
{ eventId: 40, start: getModDateString( nowDt, { day: '+5', h: 'rand', min: 'rand', sec: 'rand' } ), end: getModDateString( nowDt, { day: '+9', h: 'rand', min: 'rand', sec: 'rand' } ), row: 8, label: "Additional event 40", content: "This is an event added by the addEvent method." },
{ eventId: 1, start: getModDateString( nowDt, { day: '+5', h: 'rand', min: 'rand', sec: 'rand' } ), end: getModDateString( nowDt, { day: '+9', h: 'rand', min: 'rand', sec: 'rand' } ), row: 3, label: "Additional event 1", content: "This is an event added by the addEvent method." },
];
//newEvt = createEvents(10);
tlElem.Timeline( 'addEvent', newEvt, function(elm, opts, usrdata, addedEvents ) {
usrdata['elementId'] = $(elm).attr('id');
console.log( 'Added new event(s)', elm, opts, usrdata, addedEvents );
}, {} );
});
$('#update-event').on('click', function(){
// For checking the updateEvent method
var nowDt = new Date(),
newEvt = [
{ eventId: 34,start: getModDateString( nowDt, { day: '+5', h: 'rand', min: 'rand', sec: 'rand' } ), end: getModDateString( nowDt, { day: '+9', h: 'rand', min: 'rand', sec: 'rand' } ), row: 3, label: "Updated event 34", content: "Yahoo!" },
{ eventId: 1, start: getModDateString( nowDt, { day: '+11', h: 'rand', min: 'rand', sec: 'rand' } ), end: getModDateString( nowDt, { day: '+12', h: 'rand', min: 'rand', sec: 'rand' } ), row: 1, label: "Updated event 1", content: "This is an event updated by the updateEvent method." },
{ eventId: 4, start: getModDateString( nowDt, { day: '+11', h: 'rand', min: 'rand', sec: 'rand' } ), end: getModDateString( nowDt, { day: '+12', h: 'rand', min: 'rand', sec: 'rand' } ), row: 8, label: "Updated event 4", content: "This is an event updated by the updateEvent method." },
];
tlElem.Timeline( 'updateEvent', newEvt, function(elm, opts, usrdata, updatedEvents ) {
usrdata['elementId'] = $(elm).attr('id');
console.log( 'Updated any event(s)', elm, opts, usrdata, updatedEvents );
}, [] );
});
$('#remove-event').on('click', function(){
// For checking the removeEvent method
var delCond = [
1, 2, 3, 4,
];
tlElem.Timeline( 'removeEvent', delCond, function(elm, opts, usrdata, removedEvents ) {
usrdata.elementId = $(elm).attr('id');
console.log( 'Removed any event(s)', elm, opts, usrdata, removedEvents );
}, [1,2,3] );
});
$('#dateback').on('click', function(){
// For checking the dateback method
var methodOpts = {
scale: 'day',
range: 5,
shift: true
};
tlElem.Timeline( 'dateback', methodOpts, function() {
console.log( 'The timeline went back to the past.', arguments );
}, methodOpts );
});
$('#dateforth').on('click', function(){
// For checking the dateforth method
var methodOpts = {
scale: 'day',
range: 5,
shift: true
};
tlElem.Timeline( 'dateforth', methodOpts, function() {
console.log( 'The timeline went forth to the future.', arguments );
}, methodOpts );
});
$('#reload').on('click', function(){
// For checking the reload method
tlElem.Timeline( 'reload', { reloadCacheKeep: false }, function( elm ) {
// It is necessary to perform a reload with the cache destroyed once in order to
// completely initialize the timeline, and then enable the new cache.
$(elm).Timeline( 'reload', { reloadCacheKeep: true }, function() {
console.log( arguments[2].message );
$(window).scrollTop(0);
}, { message: 'Completely Reloaded!' } );
} );
});
$('#alignment').on('change', function(e){
var alignValue = e.target.value,
duration = 'fast';
tlElem.Timeline( 'alignment', alignValue, duration );
});
$('#change-theme').on('change', function(e){
// To change the theme of timeline
var themeName = e.target.value,
newTheme = null;
switch( themeName ) {
case 'darken':
newTheme = {
theme: {
name: themeName,
text: '#FAFDFF',
subtext: '#B4AEB1',
offtext: '#736D71',
modesttext: '#594E52',
line: '#9FA09E',
offline: '#595959',
activeline: '#F73734',
background: '#171615',
invertbg: '#F7F6F5',
striped1: '#4C4A49',
striped2: '#C9CACA',
active: '#F73734',
marker: '#FFDC00',
gridbase: '#4E454A'
},
event: {
text: '#24140e',
border: '#7E837F',
background: '#9FA09E'
}
};
break;
case 'nightly':
newTheme = {
theme: {
name: themeName,
text: '#E7E7EB',
subtext: '#C0A2C7',
offtext: '#736D71',
modesttext: '#594E52',
line: '#B578D0',
offline: '#7627A3',
activeline: '#B578D0',
background: '#471060',
invertbg: '#F7F6F5',
striped1: '#3E1950',
striped2: '#9079B6',
active: '#F73734',
marker: '#F6AF98',
gridbase: '#4E454A'
},
event: {
text: '#E7E7EB',
border: '#B578D0',
background: '#915DA3'
}
};
break;
default:
// The bundled defaults of the timeline plugin can be obtained from the properties in the constructor.
newTheme = $.fn.Timeline.Constructor.Default.colorScheme;
break;
}
tlElem.Timeline( 'reload', { reloadCacheKeep: true }, (elm) => {
var newOpts = { reloadCacheKeep: false };
if ( newTheme ) {
newOpts.colorScheme = newTheme;
$('body').removeAttr('class').attr('class', newTheme.theme.name);
}
$(elm).Timeline( 'reload', newOpts );
$(window).scrollTop(0);
});
});
// Various helper functions
function getDateArray( date ) {
// Helper to get each elements of Date object as an array
var _dt = date instanceof Date ? date : new Date( date );
return [ _dt.getFullYear(), _dt.getMonth(), _dt.getDate(), _dt.getHours(), _dt.getMinutes(), _dt.getSeconds(), _dt.getMilliseconds() ];
}
function getDateString( date ) {
// Helper to get Date object as a string of "Y-m-d H:i:s" format
var _dt = getDateArray( date );
// return `${_dt[0]}-${_dt[1] + 1}-${_dt[2]} ${_dt[3]}:${_dt[4]}:${_dt[5]}`;
return _dt[0] +'-'+ (_dt[1] + 1) +'-'+ _dt[2] +' '+ _dt[3] +':'+ _dt[4] +':'+ _dt[5];
}
function getModDateString( date, mods ) {
// Helper to get the date string after updating the date with the specified amount time.
var baseDt = date instanceof Date ? new Date( date.getTime() ) : new Date( date ),
getRandomInt = function( min, max ) {
min = Math.ceil( min );
max = Math.floor( max );
return Math.floor( Math.random() * (max - min) ) + min;
},
found;
if ( mods && typeof mods === 'object' ) {
for ( var _key in mods ) {
found = null;
switch( true ) {
case /^y(|ears?)$/i.test( _key ):
if ( typeof mods[_key] === 'string' && /^(-|\+)\d+$/i.test( mods[_key] ) ) {
found = mods[_key].match( /^(-|\+)(\d+)$/ );
if ( found[1] === '-' ) {
baseDt.setFullYear( baseDt.getFullYear() - Number( found[2] ) );
} else {
baseDt.setFullYear( baseDt.getFullYear() + Number( found[2] ) );
}
} else if ( 'rand' === mods[_key] ) {
baseDt.setFullYear( getRandomInt( 1, new Date().getFullYear() ) );
} else {
baseDt.setFullYear( Number( mods[_key] ) );
}
break;
case /^mon(|ths?)$/i.test( _key ):
if ( typeof mods[_key] === 'string' && /^(-|\+)\d+$/i.test( mods[_key] ) ) {
found = mods[_key].match( /^(-|\+)(\d+)$/ );
if ( found[1] === '-' ) {
baseDt.setMonth( baseDt.getMonth() - Number( found[2] ) );
} else {
baseDt.setMonth( baseDt.getMonth() + Number( found[2] ) );
}
} else if ( 'rand' === mods[_key] ) {
baseDt.setMonth( getRandomInt( 0, 11 ) );
} else {
baseDt.setMonth( Number( mods[_key] ) == 12 ? 11 : Number( mods[_key] ) );
}
break;
case /^d(|ays?)$/i.test( _key ):
if ( typeof mods[_key] === 'string' && /^(-|\+)\d+$/i.test( mods[_key] ) ) {
found = mods[_key].match( /^(-|\+)(\d+)$/ );
if ( found[1] === '-' ) {
baseDt.setDate( baseDt.getDate() - Number( found[2] ) );
} else {
baseDt.setDate( baseDt.getDate() + Number( found[2] ) );
}
} else if ( 'rand' === mods[_key] ) {
baseDt.setDate( getRandomInt( 1, 31 ) );
} else {
baseDt.setDate( Number( mods[_key] ) );
}
break;
case /^h(|ours?)$/i.test( _key ):
if ( typeof mods[_key] === 'string' && /^(-|\+)\d+$/i.test( mods[_key] ) ) {
found = mods[_key].match( /^(-|\+)(\d+)$/ );
if ( found[1] === '-' ) {
baseDt.setHours( baseDt.getHours() - Number( found[2] ) );
} else {
baseDt.setHours( baseDt.getHours() + Number( found[2] ) );
}
} else if ( 'rand' === mods[_key] ) {
baseDt.setHours( getRandomInt( 0, 23 ) );
} else {
baseDt.setHours( Number( mods[_key] ) );
}
break;
case /^min(|utes?)$/i.test( _key ):
if ( typeof mods[_key] === 'string' && /^(-|\+)\d+$/i.test( mods[_key] ) ) {
found = mods[_key].match( /^(-|\+)(\d+)$/ );
if ( found[1] === '-' ) {
baseDt.setMinutes( baseDt.getMinutes() - Number( found[2] ) );
} else {
baseDt.setMinutes( baseDt.getMinutes() + Number( found[2] ) );
}
} else if ( 'rand' === mods[_key] ) {
baseDt.setMinutes( getRandomInt( 0, 59 ) );
} else {
baseDt.setMinutes( Number( mods[_key] ) );
}
break;
case /^s(|(ec|onds?))$/i.test( _key ):
if ( typeof mods[_key] === 'string' && /^(-|\+)\d+$/i.test( mods[_key] ) ) {
found = mods[_key].match( /^(-|\+)(\d+)$/ );
if ( found[1] === '-' ) {
baseDt.setSeconds( baseDt.getSeconds() - Number( found[2] ) );
} else {
baseDt.setSeconds( baseDt.getSeconds() + Number( found[2] ) );
}
} else if ( 'rand' === mods[_key] ) {
baseDt.setSeconds( getRandomInt( 0, 59 ) );
} else {
baseDt.setSeconds( Number( mods[_key] ) );
}
break;
default:
break;
}
}
}
return getDateString( baseDt );
}
function createEvents( num ) {
// Helper to randomly generate a specified number of events
var nowDt = new Date(),
_evts = [],
_max = num || 1,
_startDt, _endDt, _row, i;
for ( i = 0; i < _max; i++ ) {
_startDt = getDateString( nowDt.setDate(nowDt.getDate() + (Math.floor(Math.random() * 10) + 1)) );
_endDt = getDateString( nowDt.getTime() + ((Math.floor(Math.random() * 7) + 1) * 24 * 60 * 60 * 1000) );
_row = Math.floor(Math.random() * 12) + 1;
_evts.push( {start: _startDt, end: _endDt, row: _row, label: 'Created new event (' + (i + 1) + ')', content: 'This is an event added by the addEvent method.' } );
}
return _evts;
}
function generateEventData( begin, end ) {
// Generate an initial event nodes for the timeline.
var events = [
{ start: getModDateString( begin, { day: '+5', h: 12, min: 34, sec: 56 } ), end: getModDateString( begin, { day: '+12', h: 15, min: 43, sec: 21 } ), row: 1, content: 'Event whose start and end points are within the initial range.', label: 'Normal Event Node' },
{ start: getModDateString( begin, { day: '+14', h: 1, min: 23, sec: 45 } ), end: getModDateString( end, { month: '+1', h: 23, min: 59, sec: 59 } ), row: 2, content: 'Event whose endpoint is outside the initial range.', label: 'Outrange Startpoint Event Node' },
{ start: getModDateString( begin, { month: '-1', h: 0, min: 0, sec: 0 } ), end: getModDateString( begin, { day: '+4', h: 21, min: 30 } ), row: 3, content: 'Event whose startpoint is outside the initial range.', label: 'Outrange Endpoint Event Node' },
// straight lines: before
{ start: getModDateString( begin, { day: '+5', h: 12 } ), row: 4, content:'The fourth event content.', label: 'Event Node 4', id: 4, relation: { before: 6 } },
{ start: getModDateString( begin, { day: '+3', h: 12 } ), row: 5, content:'The fifth event content.', label: 'Event Node 5', id: 5, relation: { before: 4 } },
{ start: getModDateString( begin, { day: '+7', h: 12 } ), row: 5, content:'The sixth event content.', label: 'Event Node 6', id: 6, relation: { before: 7 } },
{ start: getModDateString( begin, { day: '+5', h: 12 } ), row: 6, content:'The seventh event content.', label: 'Event Node 7', id: 7, relation: { before: 5 } },
// straight lines: after
{ start: getModDateString( begin, { day: '+11', h: 12 } ), row: 4, content: 'The eighth event content.', label: 'Event Node 8', id: 8, relation: { after: 10, linecolor: '#00A960' }, bdColor: '#00A960', bgColor: '#BEE0C2' },
{ start: getModDateString( begin, { day: '+9', h: 12 } ), row: 5, content: 'The ninth event content.', label: 'Event Node 9', id: 9, relation: { after: 8, linecolor: '#EE7800' }, bdColor: '#EE7800', bgColor: '#F2D58A' },
{ start: getModDateString( begin, { day: '+13', h: 12 } ), row: 5, content: 'The tenth event content.', label: 'Event Node 10', id: 10, relation: { after: 11, linecolor: '#FFDC00' }, bdColor: '#FFDC00', bgColor: '#EAEEA2' },
{ start: getModDateString( begin, { day: '+11', h: 12 } ), row: 6, content: 'The eleventh event content.', label: 'Event Node 11', id: 11, relation: { after: 9, linecolor: '#0075C2' }, bdColor: '#0075C2', bgColor: '#A0D8EF' },
// curve lines: before only
{ start: getModDateString( begin, { day: '+7', h: 12 } ), row: 8, content: 'The 12th event content.', label: 'Base event for relating before', id:12, relation: { before: 13, curve: true } },
{ start: getModDateString( begin, { day: '+7', h: 12 } ), row: 7, content: 'The 13th event content.', label: 'Event Node 13', id:13, relation: { before: 14, curve: 1 } },
{ start: getModDateString( begin, { day: '+5', h: 12 } ), row: 7, content: 'The 14th event content.', label: 'Event Node 14', id:14, relation: { before: 15, curve: 1 } },
{ start: getModDateString( begin, { day: '+4', h: 12 } ), row: 9, content: 'The 15th event content.', label: 'Event Node 15', id:15, relation: { before: 16, curve: 1 } },
{ start: getModDateString( begin, { day: '+3', h: 12 } ), row: 7, content: 'The 16th event content.', label: 'Event Node 16', id:16, relation: { before: 12, curve: 1 } },
// curve lines: after only
{ start: getModDateString( begin, { day: '+9', h: 12 } ), row: 8, content: 'The 17th event content.', label: 'Event Node 17', id:17, relation: { after: 18, curve: 1 } },
{ start: getModDateString( begin, { day: '+9', h: 12 } ), row: 9, content: 'The 18th event content.', label: 'Event Node 18', id:18, relation: { after: 19, curve: 1 } },
{ start: getModDateString( begin, { day: '+11', h: 12 } ), row: 9, content: 'The 19th event content.', label: 'Event Node 19', id:19, relation: { after: 20, curve: 1 } },
{ start: getModDateString( begin, { day: '+12', h: 12 } ), row: 7, content: 'The 20th event content.', label: 'Event Node 20', id:20, relation: { after: 21, curve: 1 } },
{ start: getModDateString( begin, { day: '+13', h: 12 } ), row: 9, content: 'The 21th event content.', label: 'Event Node 21', id:21, relation: { after: 17, curve: 1 } },
// curve lines: before and after
{ start: getModDateString( begin, { day: '+8', h: 0 } ), row: 10, content: 'The 30th event content.', label: 'Event Node 30', id:30, relation: { before: 31, after: 32, curve: 1 } },
{ start: getModDateString( begin, { day: '+6', h: 0 } ), row: 11, content: 'The 31th event content.', label: 'Event Node 31', id:31, relation: { before: 34, after: 33, curve: 1 } },
{ start: getModDateString( begin, { day: '+10', h: 0 } ), row: 11, content: 'The 32th event content.', label: 'Event Node 32', id:32, relation: { before: 30, after: 35, curve: 1 } },
{ start: getModDateString( begin, { day: '+8', h: 0 } ), row: 12, content: 'The 33th event content.', label: 'Event Node 33', id:33, relation: { before: 31, after: 32, curve: 1 } },
{ start: getModDateString( begin, { day: '-3' } ), row: 11, content: 'The 34th event content.', label: 'Event Node 34', id:34, relation: { curve: true } },
{ start: getModDateString( end, { day: '+3' } ), row: 11, content: 'The 35th event content.', label: 'Event Node 35', id:35, relation: { curve: false } },
];
return events;
}
function openDialog( nodes ) {
var $backdrop = $('<div></div>', { id: 'backdrop-overlay' }),
$dialog = $('<div></div>', { id: 'dialog' }),
$headline = $('<div></div>', { id: 'dialog-header' }),
$body = $('<div></div>', { id: 'dialog-body' }),
$footer = $('<div></div>', { id: 'dialog-footer' }),
$dismiss = $('<div></div>', { id: 'dialog-dismiss' }),
$close = $('<button></button>', { id: 'dialog-close' });
if ( $(document).find('#backdrop-overlay').length == 0 ) {
$('body').css({ position: 'relative' });
$backdrop.css({ position: 'absolute', top: 0, left: 0, width: 'calc(100% + 2em)', height: 'calc(100% + 2em)', margin: '-1em', padding: 0, backgroundColor: 'rgba(51,51,51,0.4)', zIndex: 9999 });
$backdrop.on( 'click', function() {
closeDialog();
});
$('body').append( $backdrop );
} else {
$(document).find('#backdrop-overlay').css({ display: 'block', visibility: 'visible' });
}
$dialog.css({ position: 'absolute', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', top: '50%', left: '50%', width: '60%', height: '60%', backgroundColor: '#FFF', borderRadius: '6px', zIndex: 10000, transform: 'translate(-50%,-50%)', boxShadow: '0 0 10px 10px rgba(51,51,51,0.1)', opacity: 0 });
$headline.css({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', margin: 0, padding: '4px 6px', borderRadius: '6px 6px 0 0', borderBottom: 'dotted 1px #E8E8E8', backgroundColor: '#F4F4F4', zIndex: 10001 });
$dismiss.css({ textAlign: 'center', verticalAlign: 'middle', width: '90px' });
$dismiss.append( '<span class="dismiss-icon"></span>' );
$(document).on('click', '.dismiss-icon', function() {
closeDialog();
});
$headline.append( nodes.label, $dismiss );
$body.css({ margin: 0, padding: '6px', height: '100%', backgroundColor: '#FFF', zIndex: 10001 });
$body.append( nodes.content );
$footer.css({ margin: 0, display: 'flex', flexDirection: 'row', justifyContent: 'end', alignContent: 'end', padding: '10px 6px', borderRadius: '0 0 6px 6px', borderTop: 'dotted 1px #E8E8E8', backgroundColor: '#FFF', zIndex: 10001 });
$close.css({ margin: 'auto', alignSelf: 'end', textAlign: 'right' }).text('Close');
$footer.append( $close );
$close.on('click', function() {
closeDialog();
});
$dialog.append( $headline, $body, $footer );
$('body').append( $dialog );
$dialog.animate({ opacity: 1 }, 300);
}
function closeDialog() {
$('#dialog').animate({ opacity: 0 }, 150, 'linear', function() {
$(this).remove();
$(document).find('#backdrop-overlay').css({ display: 'none', visibility: 'hidden' });
});
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment