You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
8.4 KiB
329 lines
8.4 KiB
define(['activity/data-model', 'activity/draw', 'webL10n', 'sugar-web/env', 'sugar-web/datastore', 'moment-with-locales.min'], function(DataModel, Draw, l10n, env, datastore, moment) {
|
|
|
|
'use strict';
|
|
|
|
var toggleGridBtn = document.querySelector('#toggle-grid-button'),
|
|
toggleHemisphereBtn = document.querySelector('#toggle-hemisphere-button');
|
|
|
|
var canvas = document.querySelector('canvas'),
|
|
ctx = canvas.getContext('2d');
|
|
|
|
var _ = l10n.get;
|
|
|
|
var first = true;
|
|
|
|
l10n.ready(function() {
|
|
if (first) {
|
|
first = false;
|
|
env.getEnvironment(function(err, environment) {
|
|
var defaultLanguage = (typeof chrome != 'undefined' && chrome.app && chrome.app.runtime) ? chrome.i18n.getUILanguage() : navigator.language;
|
|
var language = environment.user ? environment.user.language : defaultLanguage;
|
|
l10n.language.code = language;
|
|
moment.locale(language);
|
|
var refreshTime = setTimeout(function() {
|
|
clearTimeout(refreshTime);
|
|
updateView();
|
|
}, 50);
|
|
});
|
|
}
|
|
});
|
|
|
|
var IMAGE_SIZE, HALF_SIZE, updateTimeout;
|
|
var showGrid, showSouth;
|
|
|
|
|
|
|
|
function setup() {
|
|
/*
|
|
Exposed function - calls all other functions
|
|
*/
|
|
|
|
initEventListeners();
|
|
updateSizes();
|
|
}
|
|
|
|
|
|
function initPrefs(pref) {
|
|
/*
|
|
Read user preferences from datastore
|
|
*/
|
|
|
|
showGrid = pref.showGrid;
|
|
if (showGrid) {
|
|
showGrid = true;
|
|
toggleGridBtn.classList.add('active');
|
|
} else {
|
|
showGrid = false;
|
|
toggleGridBtn.classList.remove('active');
|
|
}
|
|
|
|
showSouth = pref.showSouth;
|
|
if (showSouth) {
|
|
showSouth = true;
|
|
toggleHemisphereBtn.classList.add('active');
|
|
} else {
|
|
showSouth = false;
|
|
toggleHemisphereBtn.classList.remove('active');
|
|
}
|
|
|
|
}
|
|
|
|
function getPrefs() {
|
|
return {
|
|
showGrid: showGrid,
|
|
showSouth: showSouth
|
|
};
|
|
}
|
|
|
|
|
|
function updateSizes() {
|
|
/*
|
|
Dynamically resize elements as and when the window resizes.
|
|
*/
|
|
|
|
var navbarOffset = document.querySelector('#main-toolbar').clientHeight;
|
|
document.querySelector('#panel-container').style.height = (window.innerHeight - navbarOffset) + 'px';
|
|
|
|
var canvasPanelHeight = document.querySelector('#panel-right').clientHeight;
|
|
var canvasPanelWidth = document.querySelector('#panel-right').clientWidth;
|
|
var paddingPercent = 0.05;
|
|
|
|
IMAGE_SIZE = (1 - paddingPercent) * Math.min(canvasPanelWidth, canvasPanelHeight);
|
|
HALF_SIZE = 0.5 * IMAGE_SIZE;
|
|
|
|
canvas.width = IMAGE_SIZE;
|
|
canvas.height = IMAGE_SIZE;
|
|
|
|
canvas.style.top = 0.5 * (canvasPanelHeight - canvas.height) + 'px';
|
|
canvas.style.left = 0.5 * (canvasPanelWidth - canvas.width) + 'px';
|
|
}
|
|
|
|
|
|
function updateView() {
|
|
/*
|
|
Update moon data and
|
|
draw moon, repeteadly, after a fixed interval.
|
|
|
|
Also, depending on user's preferences:
|
|
* Toggle hemisphere
|
|
* Draw grid
|
|
*/
|
|
|
|
clearTimeout(updateTimeout);
|
|
updateInfo();
|
|
Draw.setImageSize(IMAGE_SIZE);
|
|
Draw.moon();
|
|
if (showSouth) {
|
|
ctx.save();
|
|
ctx.rotate(Math.PI);
|
|
ctx.drawImage(canvas, -IMAGE_SIZE, -IMAGE_SIZE);
|
|
ctx.restore();
|
|
|
|
if (showGrid) {
|
|
Draw.grid(_('SNWE'));
|
|
}
|
|
} else if (showGrid) {
|
|
Draw.grid(_('NSEW'));
|
|
}
|
|
updateTimeout = setTimeout(updateView, 5000);
|
|
}
|
|
|
|
|
|
function updateInfo() {
|
|
/*
|
|
Update moon data and
|
|
render updated information as HTML
|
|
*/
|
|
|
|
DataModel.update_moon_calculations();
|
|
|
|
var infoParts = {};
|
|
var keys = [
|
|
'moonInfo',
|
|
'phase',
|
|
'julian',
|
|
'age',
|
|
'lunation',
|
|
'visibility',
|
|
'seleno',
|
|
'full',
|
|
'new',
|
|
'lunar',
|
|
'solar'
|
|
];
|
|
|
|
infoParts[_(keys[0])] = [
|
|
formatDate()
|
|
];
|
|
|
|
infoParts[_(keys[1])] = [
|
|
_(DataModel.moon_phase_name())
|
|
];
|
|
|
|
infoParts[_(keys[2])] = [
|
|
DataModel.julian_date.toFixed(2),
|
|
_('astro')
|
|
];
|
|
|
|
infoParts[_(keys[3])] = [DataModel.days_old,
|
|
_('days') + ',',
|
|
DataModel.hours_old,
|
|
_('hours') + ',',
|
|
DataModel.minutes_old,
|
|
_('minutes')
|
|
];
|
|
|
|
infoParts[_(keys[4])] = [
|
|
(100 * DataModel.phase_of_moon).toFixed(4) + '%',
|
|
_('thru'),
|
|
DataModel.lunation
|
|
];
|
|
|
|
infoParts[_(keys[5])] = [
|
|
(100 * DataModel.percent_of_full_moon).toFixed(4) + '%',
|
|
_('estimated')
|
|
];
|
|
|
|
infoParts[_(keys[6])] = [
|
|
DataModel.selenographic_deg.toFixed(2) + '\u00b0',
|
|
_(DataModel.west_or_east),
|
|
'(' + _(DataModel.rise_or_set) + ')'
|
|
];
|
|
|
|
infoParts[_(keys[7])] = [
|
|
formatDate(DataModel.next_full_moon_date),
|
|
_('in'),
|
|
DataModel.days_until_full_moon.toFixed(),
|
|
_('days')
|
|
];
|
|
|
|
infoParts[_(keys[8])] = [
|
|
formatDate(DataModel.next_new_moon_date),
|
|
_('in'),
|
|
DataModel.days_until_new_moon.toFixed(),
|
|
_('days')
|
|
];
|
|
|
|
infoParts[_(keys[9])] = [
|
|
formatDate(DataModel.next_lunar_eclipse_date),
|
|
_('in'),
|
|
DataModel.days_until_lunar_eclipse.toFixed(),
|
|
_('days')
|
|
];
|
|
|
|
infoParts[_(keys[10])] = [
|
|
formatDate(DataModel.next_solar_eclipse_date),
|
|
_('in'),
|
|
DataModel.days_until_solar_eclipse.toFixed(),
|
|
_('days')
|
|
];
|
|
|
|
|
|
var infoHTML = [];
|
|
for (var k in infoParts) {
|
|
var html = '<p>' + k + ':<br>' + infoParts[k].join(' ') + '</p>';
|
|
infoHTML.push(html);
|
|
}
|
|
|
|
infoHTML = infoHTML.join('');
|
|
document.querySelector('#panel-left').innerHTML = infoHTML;
|
|
|
|
document.getElementById("toggle-grid-button").title = _('ToggleGrid');
|
|
document.getElementById("toggle-hemisphere-button").title = _('ToggleHemisphere');
|
|
document.getElementById("save-image-button").title = _('SaveImage');
|
|
}
|
|
|
|
|
|
function initEventListeners() {
|
|
/*
|
|
Bind event-listeners.
|
|
*/
|
|
|
|
window.addEventListener('resize', function() {
|
|
updateSizes();
|
|
updateView();
|
|
});
|
|
|
|
toggleGridBtn.addEventListener('click', toggleGrid);
|
|
toggleHemisphereBtn.addEventListener('click', toggleHemisphere);
|
|
document.querySelector('#save-image-button').addEventListener('click', saveImage);
|
|
}
|
|
|
|
|
|
function toggleGrid() {
|
|
/*
|
|
Show/hide grid
|
|
*/
|
|
|
|
showGrid = !showGrid;
|
|
if (showGrid) {
|
|
toggleGridBtn.classList.add('active');
|
|
} else {
|
|
toggleGridBtn.classList.remove('active');
|
|
}
|
|
|
|
updateView();
|
|
}
|
|
|
|
|
|
function toggleHemisphere() {
|
|
/*
|
|
Rotate moon image to represent southern-hemisphere view.
|
|
*/
|
|
|
|
showSouth = !showSouth;
|
|
if (showSouth) {
|
|
toggleHemisphereBtn.classList.add('active');
|
|
} else {
|
|
toggleHemisphereBtn.classList.remove('active');
|
|
}
|
|
|
|
updateView();
|
|
}
|
|
|
|
|
|
function saveImage() {
|
|
/*
|
|
Read canvas data as base64 string and
|
|
store image in datastore
|
|
*/
|
|
|
|
var mimetype = 'image/jpeg';
|
|
var inputData = canvas.toDataURL(mimetype, 1);
|
|
var metadata = {
|
|
mimetype: mimetype,
|
|
title: "Image Moon",
|
|
activity: "org.olpcfrance.MediaViewerActivity",
|
|
timestamp: new Date().getTime(),
|
|
creation_time: new Date().getTime(),
|
|
file_size: 0
|
|
};
|
|
datastore.create(metadata, function() {
|
|
console.log("export done.")
|
|
}, inputData);
|
|
}
|
|
|
|
|
|
function formatDate(date) {
|
|
/*
|
|
Modify rendered dates to match Sugar Moon format
|
|
*/
|
|
|
|
if (!date) {
|
|
date = new Date();
|
|
} else {
|
|
|
|
date = new Date(1000 * date);
|
|
}
|
|
|
|
var momentDate = moment(date);
|
|
return momentDate.format('LLLL').replace(momentDate.format('LT'), momentDate.format('LTS'));
|
|
}
|
|
|
|
return {
|
|
setup: setup,
|
|
initPrefs: initPrefs,
|
|
getPrefs: getPrefs,
|
|
updateInfo: updateInfo
|
|
};
|
|
});
|