Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu
parent
93e3a48004
commit
b38dea0597
25901 changed files with 9982925 additions and 369 deletions
279
gaia/apps/settings/js/panels/date_time/panel.js
Executable file
279
gaia/apps/settings/js/panels/date_time/panel.js
Executable file
|
|
@ -0,0 +1,279 @@
|
|||
/**
|
||||
* Used to show Personalization/Date & Time panel
|
||||
*/
|
||||
define(function(require) {
|
||||
'use strict';
|
||||
|
||||
var SettingsPanel = require('modules/settings_panel');
|
||||
var DateTime = require('modules/date_time');
|
||||
var tzSelect = require('shared/tz_select');
|
||||
|
||||
var _debug = false;
|
||||
var debug = function() {};
|
||||
if (_debug) {
|
||||
debug = function btam_debug(msg) {
|
||||
console.log('--> [DateTime]: ' + msg);
|
||||
};
|
||||
}
|
||||
|
||||
return function ctor_date_time_panel() {
|
||||
var HOUR_12 = 'ampm';
|
||||
var HOUR_24 = '24';
|
||||
return SettingsPanel({
|
||||
onInit: function(panel) {
|
||||
this._elements = {
|
||||
timeAutoSwitch: panel.querySelector('.time-auto'),
|
||||
timezoneRegion: panel.querySelector('.timezone-region'),
|
||||
timezoneCity: panel.querySelector('.timezone-city'),
|
||||
datePicker: panel.querySelector('.date-picker'),
|
||||
timePicker: panel.querySelector('.time-picker'),
|
||||
clockDate: panel.querySelector('.clock-date'),
|
||||
clockTime: panel.querySelector('.clock-time'),
|
||||
timeManual: panel.querySelector('.time-manual'),
|
||||
timezone: panel.querySelector('.timezone'),
|
||||
timezonePickers: [].slice.apply(
|
||||
panel.querySelectorAll('.timezone-picker')),
|
||||
timezoneInfo: panel.querySelector('.timezone-info'),
|
||||
timezoneInfoText: panel.querySelector('.timezone-info-text'),
|
||||
timeFormat: panel.querySelector('.timeformat'),
|
||||
timeFormatAutoSwitch:
|
||||
panel.querySelector('.time-format-auto gaia-switch'),
|
||||
timeFormatSwitch: panel.querySelector('.time-format-time')
|
||||
};
|
||||
|
||||
// update date/clock periodically
|
||||
this._boundSetDate = () => {
|
||||
this._elements.clockDate.textContent = DateTime.date;
|
||||
};
|
||||
|
||||
this._boundSetTime = () => {
|
||||
this._elements.clockTime.textContent = DateTime.time;
|
||||
};
|
||||
|
||||
this._boundSetTimezoneInfo = () => {
|
||||
// Only display the timezone info when auto time is enabled.
|
||||
var info = DateTime.clockAutoEnabled ? DateTime.timezone : '';
|
||||
debug('Timezone: ' + info);
|
||||
this._elements.timezoneInfoText.textContent = info;
|
||||
};
|
||||
|
||||
// Reset the timezone to the previous user selected value
|
||||
this._boundSetSelectedTimeZone = (selected) => {
|
||||
DateTime.setUserSelectedTimezone(selected);
|
||||
};
|
||||
|
||||
this._boundUpdateUI = this._updateUI.bind(this);
|
||||
this._boundRenderTimeFormat = this._renderTimeFormat.bind(this);
|
||||
this._boundDatePickerChange = this._datePickerChange.bind(this);
|
||||
this._boundTimePickerChange = this._timePickerChange.bind(this);
|
||||
this._boundTimeFormatAutoChange = () => {
|
||||
var checked = this._elements.timeFormatAutoSwitch.checked;
|
||||
|
||||
if (checked) {
|
||||
DateTime.setCurrentHour12(null);
|
||||
} else {
|
||||
var isHour12 = DateTime.getHour12ForCurrentLocale();
|
||||
DateTime.setCurrentHour12(isHour12);
|
||||
}
|
||||
};
|
||||
|
||||
this._boundTimeFormatChange = () => {
|
||||
var value = (this._elements.timeFormatSwitch.value === HOUR_12);
|
||||
DateTime.setCurrentHour12(value);
|
||||
};
|
||||
},
|
||||
onBeforeShow: function() {
|
||||
DateTime.observe('date', this._boundSetDate);
|
||||
DateTime.observe('time', this._boundSetTime);
|
||||
DateTime.observe('timezone', this._boundSetTimezoneInfo);
|
||||
DateTime.observe('clockAutoEnabled', this._boundUpdateUI);
|
||||
DateTime.observe('clockAutoAvailable', this._boundUpdateUI);
|
||||
DateTime.observe('timezoneAutoAvailable', this._boundUpdateUI);
|
||||
DateTime.observe('currentHour12', this._boundRenderTimeFormat);
|
||||
DateTime.observe('userSelectedTimezone',
|
||||
this._boundSetSelectedTimeZone);
|
||||
|
||||
this._elements.datePicker.addEventListener('input',
|
||||
this._boundDatePickerChange);
|
||||
this._elements.timePicker.addEventListener('input',
|
||||
this._boundTimePickerChange);
|
||||
this._elements.timeFormatSwitch.addEventListener('change',
|
||||
this._boundTimeFormatChange);
|
||||
this._elements.timeFormatAutoSwitch.addEventListener('change',
|
||||
this._boundTimeFormatAutoChange);
|
||||
|
||||
this._renderTimeZone();
|
||||
this._boundSetDate();
|
||||
this._boundSetTime();
|
||||
this._boundSetTimezoneInfo();
|
||||
if (DateTime.userSelectedTimezone && !DateTime.clockAutoEnabled) {
|
||||
this._boundSetSelectedTimeZone(DateTime.userSelectedTimezone);
|
||||
}
|
||||
this._renderTimeFormat();
|
||||
this._boundUpdateUI();
|
||||
|
||||
document.addEventListener('DOMRetranslated', this);
|
||||
},
|
||||
|
||||
onHide: function() {
|
||||
DateTime.unobserve('date', this._boundSetDate);
|
||||
DateTime.unobserve('time', this._boundSetTime);
|
||||
DateTime.unobserve('timezone', this._boundSetTimezoneInfo);
|
||||
DateTime.unobserve('clockAutoEnabled', this._boundUpdateUI);
|
||||
DateTime.unobserve('clockAutoAvailable', this._boundUpdateUI);
|
||||
DateTime.unobserve('timezoneAutoAvailable', this._boundUpdateUI);
|
||||
DateTime.unobserve('currentHour12', this._boundRenderTimeFormat);
|
||||
DateTime.unobserve('userSelectedTimezone',
|
||||
this._boundSetSelectedTimeZone);
|
||||
|
||||
this._elements.datePicker.removeEventListener('input',
|
||||
this._boundDatePickerChange);
|
||||
this._elements.timePicker.removeEventListener('input',
|
||||
this._boundTimePickerChange);
|
||||
this._elements.timeFormatSwitch.removeEventListener('change',
|
||||
this._boundTimeFormatChange);
|
||||
this._elements.timeFormatAutoSwitch.removeEventListener('change',
|
||||
this._boundTimeFormatAutoChange);
|
||||
|
||||
document.removeEventListener('DOMRetranslated', this);
|
||||
},
|
||||
|
||||
/**
|
||||
* monitor time.timezone changes, see /shared/js/tz_select.js
|
||||
*/
|
||||
_renderTimeZone: function dt_renderTimeZone() {
|
||||
var noOp = function() {};
|
||||
tzSelect(this._elements.timezoneRegion, this._elements.timezoneCity,
|
||||
noOp, noOp);
|
||||
},
|
||||
|
||||
/**
|
||||
* Update DatePicker value
|
||||
*/
|
||||
_datePickerChange: function dt_datePickerChange() {
|
||||
DateTime.setTime('date', this._elements.datePicker.value);
|
||||
// Clean up the value of picker once we get date set by the user.
|
||||
// It will get new date according system time when pop out again.
|
||||
this._elements.datePicker.value = '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Update TimePicker value
|
||||
*/
|
||||
_timePickerChange: function dt_timePickerChange() {
|
||||
DateTime.setTime('time', this._elements.timePicker.value);
|
||||
// Clean up the value of picker once we get time set by the user.
|
||||
// It will get new time according system time when pop out again.
|
||||
this._elements.timePicker.value = '';
|
||||
},
|
||||
|
||||
handleEvent: function dt_handleEvent(evt) {
|
||||
switch (evt.type) {
|
||||
case 'DOMRetranslated':
|
||||
this._renderTimeZone();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update Panel UI elements
|
||||
*/
|
||||
_updateUI: function dt_updateUI() {
|
||||
this._elements.timeAutoSwitch.dataset.state =
|
||||
DateTime.clockAutoEnabled ? 'auto' : 'manual';
|
||||
// There are three possible combinations:
|
||||
// - clockAutoAvailable is true, timezoneAutoAvailable is true
|
||||
// - clockAutoAvailable is false, timezoneAutoAvailable is false
|
||||
// - clockAutoAvailable is true, timezoneAutoAvailable is false
|
||||
// We show the auto time switch only when clockAutoAvailable is true.
|
||||
this._elements.timeAutoSwitch.hidden = !DateTime.clockAutoAvailable;
|
||||
|
||||
// DataTime.clockAutoEnabled is a user preference and in some cases it
|
||||
// can be true while DateTime.clockAutoAvailable is false. The reason is
|
||||
// the device may not connect to the network to retrieve the correct
|
||||
// time automatically after startup. That being said, we should always
|
||||
// check both `DateTime.clockAutoEnabled` and
|
||||
// `DateTime.clockAutoAvailable` to determine whether the device is in
|
||||
// the auto time mode.
|
||||
var autoTimeMode =
|
||||
DateTime.clockAutoEnabled && DateTime.clockAutoAvailable;
|
||||
|
||||
this._elements.datePicker.disabled = autoTimeMode;
|
||||
this._elements.timePicker.disabled = autoTimeMode;
|
||||
this._elements.timezoneRegion.disabled =
|
||||
DateTime.timezoneAutoAvailable && autoTimeMode;
|
||||
this._elements.timezoneCity.disabled =
|
||||
DateTime.timezoneAutoAvailable && autoTimeMode;
|
||||
|
||||
// XXX: Force to trigger the selector change so that tz_select is able
|
||||
// to write the previous user-selected value back to time.timezone.
|
||||
if (!DateTime.clockAutoEnabled) {
|
||||
this._elements.timezoneRegion.dispatchEvent(new Event('change'));
|
||||
this._elements.timezoneCity.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
if (autoTimeMode) {
|
||||
this._elements.timeManual.classList.add('disabled');
|
||||
this._elements.timezonePickers.forEach((picker) => {
|
||||
picker.hidden = DateTime.timezoneAutoAvailable;
|
||||
});
|
||||
debug('force update timezone string');
|
||||
this._boundSetTimezoneInfo();
|
||||
this._elements.timezoneInfo.hidden = !DateTime.timezoneAutoAvailable;
|
||||
} else {
|
||||
this._elements.timeManual.classList.remove('disabled');
|
||||
this._elements.timezonePickers.forEach((picker) => {
|
||||
picker.hidden = false;
|
||||
});
|
||||
this._elements.timezoneInfo.hidden = true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update TimeFormat selector
|
||||
*/
|
||||
_renderTimeFormat: function dt_renderTimeFormat() {
|
||||
var hour12Value = DateTime.currentHour12;
|
||||
if (hour12Value === null) {
|
||||
hour12Value = undefined;
|
||||
}
|
||||
if (hour12Value === undefined) {
|
||||
this._elements.timeFormatAutoSwitch.checked = true;
|
||||
this._elements.timeFormat.classList.add('disabled');
|
||||
} else {
|
||||
this._elements.timeFormatAutoSwitch.checked = false;
|
||||
this._elements.timeFormat.classList.remove('disabled');
|
||||
}
|
||||
// restore default selection
|
||||
if (hour12Value === undefined) {
|
||||
hour12Value = DateTime.getHour12ForCurrentLocale();
|
||||
}
|
||||
|
||||
var selectedItem = 0;
|
||||
if (hour12Value === false) {
|
||||
selectedItem = 1;
|
||||
}
|
||||
|
||||
var options = [{
|
||||
attr: 'hour-12', // 2:00PM
|
||||
value: HOUR_12,
|
||||
}, {
|
||||
attr: 'hour-24', // 14:00
|
||||
value: HOUR_24
|
||||
}];
|
||||
|
||||
var obj = this._elements.timeFormatSwitch;
|
||||
while(obj.options.length) { // clean options
|
||||
obj.remove(0);
|
||||
}
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
var option = document.createElement('option');
|
||||
option.setAttribute('data-l10n-id', options[i].attr);
|
||||
option.selected = (selectedItem === i);
|
||||
option.value = options[i].value;
|
||||
obj.appendChild(option);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
Loading…
Reference in a new issue