Merge pull request #1169 from zklosko/widget
Library change for Weekly Schedule widget
This commit is contained in:
Kyle Robbertze
GitHub
commit
b65ded9fc2
|
|
@ -26,7 +26,7 @@ class EmbedController extends Zend_Controller_Action
|
|||
$request = $this->getRequest();
|
||||
|
||||
$this->view->playerhtml5_js = "/js/airtime/player/playerhtml5.js?".$CC_CONFIG['airtime_version'];
|
||||
$this->view->jquery = "/js/libs/jquery-1.10.2.js";
|
||||
$this->view->jquery = "/js/libs/jquery-1.10.2.min.js";
|
||||
$this->view->metadata_api_url = "/api/live-info";
|
||||
$this->view->player_title = json_encode($this->view->escape($request->getParam('title')));
|
||||
$this->view->jquery_i18n = "/js/i18n/jquery.i18n.js?";
|
||||
|
|
@ -86,7 +86,7 @@ class EmbedController extends Zend_Controller_Action
|
|||
$this->view->widgetStyle = "basic";
|
||||
$this->view->css = "/css/embed/weekly-schedule-widget-basic.css?" . $CC_CONFIG['airtime_version'];
|
||||
}
|
||||
$this->view->jquery = "/js/libs/jquery-1.6.1.min.js?".$CC_CONFIG['airtime_version'];
|
||||
$this->view->jquery = "/js/libs/jquery-1.8.3.min.js?".$CC_CONFIG['airtime_version'];
|
||||
|
||||
$weeklyScheduleData = WidgetHelper::getWeekInfoV2();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
|
||||
<script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
|
||||
<script src="<?php echo $this->jquery_custom ?>" type="text/javascript"></script>
|
||||
<script src="<?php echo $this->widget_js ?>" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#onAirToday").airtimeShowSchedule({
|
||||
sourceDomain: "http://localhost",
|
||||
text: {onAirToday:"On air today"},
|
||||
updatePeriod: 5, //seconds
|
||||
showLimit: 10
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="onAirToday"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
@ -2,103 +2,103 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<script src="<?php echo $this->angular ?>" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="<?php echo $this->css?>" type="text/css">
|
||||
<script src="<?php echo $this->jquery ?>" type="text/javascript"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
||||
//initialize first day to active
|
||||
$('.tabs').find("li").first().addClass("active");
|
||||
$('.schedule_content').find('.schedule_item').first().addClass("active");
|
||||
|
||||
$('.tabs li').click(function(){
|
||||
//var tab_id = $(this).attr('data-tab');
|
||||
var tab_id = "day-"+$(this).find('span').text();
|
||||
|
||||
$('.tabs li').removeClass('active');
|
||||
$('.schedule_item').removeClass('active');
|
||||
|
||||
$(this).addClass('active');
|
||||
$("#"+tab_id).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
String.prototype.paddingLeft = function(paddingValue) {
|
||||
return String(paddingValue + this).slice(-paddingValue.length);
|
||||
};
|
||||
|
||||
var schedule_data = <?php echo $this->schedule_data; ?>;
|
||||
|
||||
var app = angular.module('scheduleWidget', []);
|
||||
app.controller('scheduleController', ['$scope', '$window', function($scope, $window) {
|
||||
|
||||
// Loop through every show and assign it to the corresponding day of the week's
|
||||
// show array.
|
||||
angular.forEach($window.schedule_data["shows"], function(value, key) {
|
||||
|
||||
// First we have to create a Date object out of the show time in UTC.
|
||||
// Then we can format the string in the client's local timezone.
|
||||
// NOTE: we have to multiply the timestamp by 1000 because in PHP
|
||||
// the timestamps are in seconds and are in milliseconds in javascript.
|
||||
var start_date = new Date(value.starts_timestamp*1000);
|
||||
var end_date = new Date(value.ends_timestamp*1000);
|
||||
|
||||
// This variable is used to identify which schedule_data object (which day of the week)
|
||||
// we should assign the show to.
|
||||
// NOTE: we have to add 1 to the month because javascript's Date.getMonth()
|
||||
// function returns the month number starting with an index of 0. In PHP,
|
||||
// the months are indexed starting at 1.
|
||||
var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth()+1) + "-" + start_date.getDate();
|
||||
|
||||
if ($window.schedule_data["weekDays"][format_start_date] !== undefined) {
|
||||
$window.schedule_data["weekDays"][format_start_date]["shows"].push(
|
||||
{
|
||||
"show_start_hour": start_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
|
||||
"show_end_hour": end_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
|
||||
"name": value.name
|
||||
});
|
||||
}
|
||||
});
|
||||
// Convert the object into an array to maintain the same order when we
|
||||
// iterate over each weekday
|
||||
$scope.weekDays = $.map($window.schedule_data["weekDays"], function(value, index) {
|
||||
return [value];
|
||||
});
|
||||
|
||||
$scope.isEmpty = function(obj) {
|
||||
return obj.length == 0;
|
||||
};
|
||||
}]);
|
||||
</script>
|
||||
<script src="/js/libs/handlebars.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body ng-app="scheduleWidget" ng-controller="scheduleController">
|
||||
<div class="schedule tab_content current">
|
||||
<ul class="tabs">
|
||||
<li ng-repeat="x in weekDays track by $index">
|
||||
{{x.dayOfWeek}}<span>{{x.dayOfMonth}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<body>
|
||||
<div id="wpBody" class="schedule tab_content current">
|
||||
<script id="wpWidget" type="text/x-handlebars-template">
|
||||
<ul class="tabs">
|
||||
{{#each this}}
|
||||
<li>
|
||||
{{dayOfWeek}}<span>{{dayOfMonth}}</span>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
<div class="schedule_content">
|
||||
<div ng-repeat="x in weekDays track by $index" ng-attr-id="{{'day-' + x.dayOfMonth}}" class="schedule_item">
|
||||
<div ng-if="isEmpty(x.shows)" class="row empty-schedule"><?php echo _('Looks like there are no shows scheduled on this day.') ?></div>
|
||||
<div ng-repeat="show in x.shows" class="row">
|
||||
<div class="time_grid">{{show.show_start_hour}} - {{show.show_end_hour}}</div>
|
||||
<div class="name_grid">{{show.name}}</div>
|
||||
<div class="schedule_content">
|
||||
{{#each this}}
|
||||
<div id="day-{{dayOfMonth}}" class="schedule_item">
|
||||
{{#if (noShowsCheck this.shows)}}
|
||||
<div class="row empty-schedule"><?php echo _('Looks like there are no shows scheduled on this day.') ?></div>
|
||||
{{else}}
|
||||
{{#each shows}}
|
||||
<div class="row">
|
||||
<div class="time_grid">{{show_start_hour}} - {{show_end_hour}}</div>
|
||||
<div class="name_grid">{{{name}}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weekly-schedule-widget-footer" <?php if ($this->widgetStyle == "premium") echo "style='display:none'"; ?>>
|
||||
<a href="<?php echo PRODUCT_SITE_URL; ?>" target="_blank"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
|
||||
</div>
|
||||
<div class="weekly-schedule-widget-footer" <?php if ($this->widgetStyle == "premium") echo "style='display:none'"; ?>>
|
||||
<a href="<?php echo PRODUCT_SITE_URL; ?>" target="_blank"><?php printf(_('Powered by %s'), PRODUCT_NAME); ?></a>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
let importSchedule = <?php echo $this->schedule_data; ?>; // Object prepared in JSON, w/o API call
|
||||
let cleanSchedule = [];
|
||||
|
||||
// Insert shows into correct locations in importShows array (work-around for API v.1)
|
||||
let importShows = importSchedule["shows"];
|
||||
importShows.forEach(element => {
|
||||
// Convert timestamps to JS (sec -> millisec)
|
||||
var start_date = new Date(element.starts_timestamp*1000);
|
||||
var end_date = new Date(element.ends_timestamp*1000);
|
||||
// Check date of show so we know where to assign it to
|
||||
var format_start_date = start_date.getFullYear() + "-" + (start_date.getMonth()+1) + "-" + start_date.getDate();
|
||||
// Assign show to correct location
|
||||
if (importSchedule["weekDays"][format_start_date] !== undefined) {
|
||||
importSchedule["weekDays"][format_start_date]["shows"].push(
|
||||
{
|
||||
"show_start_hour": start_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
|
||||
"show_end_hour": end_date.toLocaleTimeString([], { hour: 'numeric', minute : 'numeric' }),
|
||||
"name": element.name
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Re-arraying data into a Handlebars-friendly format
|
||||
for (var i = 0; i <= 6; i++) {
|
||||
cleanSchedule.push(Object.values(importSchedule.weekDays)[i]);
|
||||
}
|
||||
|
||||
// Checker
|
||||
Handlebars.registerHelper('noShowsCheck', function(obj){
|
||||
return obj.length == 0;
|
||||
});
|
||||
|
||||
// Templating with Handlebars.js
|
||||
var wpWidget = document.querySelector('#wpWidget').innerHTML;
|
||||
var wpTemplate = Handlebars.compile(wpWidget);
|
||||
var compiledHTML = wpTemplate(cleanSchedule);
|
||||
document.querySelector('#wpBody').innerHTML = compiledHTML;
|
||||
|
||||
// Tabs logic
|
||||
$(document).ready(function() {
|
||||
//initialize first day to active
|
||||
$('.tabs').find("li").first().addClass("active");
|
||||
$('.schedule_content').find('.schedule_item').first().addClass("active");
|
||||
|
||||
$('.tabs li').click(function(){
|
||||
//var tab_id = $(this).attr('data-tab');
|
||||
var tab_id = "day-"+$(this).find('span').text();
|
||||
|
||||
$('.tabs li').removeClass('active');
|
||||
$('.schedule_item').removeClass('active');
|
||||
|
||||
$(this).addClass('active');
|
||||
$("#"+tab_id).addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ body {
|
|||
}
|
||||
|
||||
.schedule .tabs li {
|
||||
width: 105px;
|
||||
width: 103px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ body {
|
|||
}
|
||||
|
||||
.schedule .tabs li {
|
||||
width: 105px;
|
||||
width: 103px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue