Skip to content

Instantly share code, notes, and snippets.

@SteveShaffer

SteveShaffer/timelinePlayer.html

Created March 17, 2017 16:11
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 SteveShaffer/ecfccd45bc8d703930951e7f5678404c to your computer and use it in GitHub Desktop.
Save SteveShaffer/ecfccd45bc8d703930951e7f5678404c to your computer and use it in GitHub Desktop.
Download ZIP
A super basic timeline player concept
Raw
timelinePlayer.html
<html ng-app="app">
<head>
<style>
* {
margin: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<app-timeline></app-timeline>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.component('appTimeline', {
template: `
<div style="position: relative; width: 100%; height: 600px; background-color: black;" ng-click="$ctrl.resetPlay($event)">
<app-grid></app-grid>
<app-track track="track" ng-repeat="track in $ctrl.tracks"></app-track>
<app-play-marker position="$ctrl.playPosition"></app-play-marker>
</div>`,
controller: function ($interval) {
var $ctrl = this;
$ctrl.tracks = [{
name: 'Track 1',
events: [{
name: 'Event 1',
color: 'red',
start: 20,
end: 50
}]
}, {
name: 'Track 2',
events: [{
name: 'Event 2',
color: 'green',
start: 40,
end: 45
}, {
name: 'Event 3',
color: 'blue',
start: 70,
end: 100
}]
}];
$ctrl.playPosition = 0;
$interval(function () {
$ctrl.playPosition = $ctrl.playPosition - Math.floor($ctrl.playPosition) + .001;
}, 10);
$ctrl.resetPlay = function ($event) {
$ctrl.playPosition = $event.x / document.body.clientWidth;
}
}
});
app.component('appTrack', {
template: `
<div style="width: 100%; height: 60px; border-bottom: solid 1px white;">
<div style="position: absolute; height: 100%; width: 100px; color: white;" ng-bind="$ctrl.track.name"></div>
<div style="height: 100%;">
<app-event event="event" ng-repeat="event in $ctrl.track.events"></app-event>
</div>
</div>`,
bindings: {
track: '<'
}
});
app.component('appEvent', {
template: `
<div style="position: absolute; height: 60px; left: {{$ctrl.event.start}}%; right: {{100 - $ctrl.event.end}}%; color: white; background-color: {{$ctrl.event.color}};" ng-bind="$ctrl.event.name"></div>
`,
bindings: {
event: '<'
}
});
app.component('appGrid', {
template: `
<div style="position: absolute; left: 100px; right: 0; top: 0; bottom: 0;">
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]" style="position: absolute; left: {{i*10}}%; right: {{90 - i*10}}%; top: 0; bottom: 0; border: solid 1px gray;"></div>
</div>`
});
app.component('appPlayMarker', {
template: `
<div style="position: absolute; left: {{$ctrl.position * 100}}%; top: 0; bottom: 0; border: solid 1px orange;"></div>`,
bindings: {
position: '<'
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment