b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
96 lines
2.5 KiB
JavaScript
Executable file
96 lines
2.5 KiB
JavaScript
Executable file
define(function(require, exports, module) {
|
|
'use strict';
|
|
|
|
var DateSpan = require('./date_span');
|
|
var colorUtils = require('utils/color');
|
|
var create = require('template').create;
|
|
|
|
var multiday = {};
|
|
|
|
multiday.hour = function() {
|
|
var hour = this.arg('hour');
|
|
|
|
var html = DateSpan.hour.render({
|
|
hour: hour,
|
|
format: this.arg('format'),
|
|
addAmPmClass: this.arg('addAmPmClass'),
|
|
className: 'md__display-hour'
|
|
});
|
|
|
|
// we use this temporary element just to grab the textContent
|
|
var tmp = document.createElement('div');
|
|
tmp.innerHTML = html;
|
|
var text = tmp.textContent;
|
|
|
|
return `<li aria-label="${text}" class="md__hour md__hour-${hour}">
|
|
${html}
|
|
</li>`;
|
|
};
|
|
|
|
multiday.day = function() {
|
|
return `<div class="md__day" data-date="${this.h('date')}"></div>`;
|
|
};
|
|
|
|
multiday.allday = function() {
|
|
return `<div class="md__allday" data-date="${this.h('date')}">
|
|
<h1 class="md__day-name" aria-level="2"
|
|
id="md__day-name-${this.h('id')}"></h1>
|
|
<div class="md__allday-events"></div>
|
|
</div>`;
|
|
};
|
|
|
|
multiday.event = function() {
|
|
var labels = [];
|
|
var id = this.h('id');
|
|
var instance = this.h('instance');
|
|
var color = this.h('color');
|
|
var bgColor = colorUtils.hexToBackground(color);
|
|
|
|
var titleId = `md__event-${id}-title-${instance}`;
|
|
labels.push(titleId);
|
|
|
|
var location = this.h('location');
|
|
var locationHtml = '';
|
|
if (location) {
|
|
var locationId = `md__event-${id}-location-${instance}`;
|
|
labels.push(locationId);
|
|
locationHtml = `<bdi class="md__event-location" id="${locationId}">
|
|
${location}
|
|
</bdi>`;
|
|
}
|
|
|
|
var alarmIcon = '';
|
|
if (this.arg('hasAlarms')) {
|
|
var iconId = `md__event-${id}-icon-${instance}`;
|
|
labels.push(iconId);
|
|
alarmIcon = `<i class="gaia-icon icon-calendar-alarm"
|
|
style="color: ${color}" aria-hidden="true" id="${iconId}"
|
|
data-l10n-id="icon-calendar-alarm">
|
|
</i>`;
|
|
}
|
|
|
|
var className = ['md__event'];
|
|
if (alarmIcon) {
|
|
className.push('has-alarms');
|
|
}
|
|
|
|
var descriptionId = `md__event-${id}-description-${instance}`;
|
|
labels.push(descriptionId);
|
|
|
|
return `<a href="/event/show/${id}"
|
|
class="${className.join(' ')}"
|
|
style="border-color: ${color}; background-color: ${bgColor}"
|
|
aria-labelledby="${labels.join(' ')}">
|
|
<bdi class="md__event-title" id="${titleId}">${this.h('title')}</bdi>
|
|
${locationHtml}
|
|
${alarmIcon}
|
|
<span id="${descriptionId}" aria-hidden="true"
|
|
data-l10n-id="${this.h('labelFormat')}"
|
|
data-l10n-args="${this.h('labelFormatArgs')}">
|
|
</span>
|
|
</a>`;
|
|
};
|
|
|
|
module.exports = create(multiday);
|
|
|
|
});
|