mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-03-27 13:29:34 +07:00
5bf419b385
* Remove docs folder. This was a redirect from a GitHub pages site that does not appear to be in use. * Rename api folder to api-samples. * Move examples to functional-samples folder. * Move cookbook sample to functional-samples. * Move tutorials to functional-samples folder. * Move mv2 and apps folders to _archive. * Rename tools folder to .repo. * Move reference folder to functional-samples. * Update README. Update README with new relative links for reorg. * Update README.md Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com> --------- Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>
542 lines
16 KiB
JavaScript
542 lines
16 KiB
JavaScript
var local;
|
|
var local_class;
|
|
var clocks = {};
|
|
var alarms = {};
|
|
var alarm_clocks = {};
|
|
|
|
var base_url = 'http://api.worldweatheronline.com/free/v1/tz.ashx?key=vfc3k7q22tjedr2rxse7xzke&format=json&q=';
|
|
|
|
var view = 'world';
|
|
|
|
var stopwatch;
|
|
var timer;
|
|
|
|
$(document).ready(function() {
|
|
|
|
$('.close').click(function() {
|
|
window.close();
|
|
});
|
|
|
|
$('.menu-item.world').tipTip({ edgeOffset: -5, defaultPosition: 'top' });
|
|
$('.menu-item.alarm').tipTip({ edgeOffset: -5, defaultPosition: 'top' });
|
|
$('.menu-item.timer').tipTip({ edgeOffset: -5, defaultPosition: 'top' });
|
|
$('.menu-item.stopwatch').tipTip({ edgeOffset: -5, defaultPosition: 'top' });
|
|
|
|
setInterval(function() {
|
|
if (view == 'world' && !navigator.onLine)
|
|
$('.menu-item.new-world').addClass('hidden');
|
|
else if (view == 'world')
|
|
$('.menu-item.new-world').removeClass('hidden');
|
|
})
|
|
|
|
$('.menu-item.world').click(function() {
|
|
$('.menu-item.button').addClass('hidden');
|
|
$('#container > div').addClass('hidden');
|
|
$('#container .world').removeClass('hidden');
|
|
$('.menu-item').removeClass('selected');
|
|
$('.menu-item.world').addClass('selected');
|
|
view = 'world';
|
|
if (sizeOf(clocks) == 0)
|
|
$('.menu-item.new-world').click();
|
|
$('.new-world').removeClass('hidden');
|
|
});
|
|
|
|
$('.menu-item.alarm').click(function() {
|
|
$('.menu-item.button').addClass('hidden');
|
|
$('#container > div').addClass('hidden');
|
|
$('#container .alarm').removeClass('hidden');
|
|
$('.menu-item').removeClass('selected');
|
|
$('.menu-item.alarm').addClass('selected');
|
|
view = 'alarm';
|
|
if (sizeOf(alarms) == 0)
|
|
$('.menu-item.new-alarm').click();
|
|
$('.new-alarm').removeClass('hidden');
|
|
});
|
|
|
|
$('.menu-item.timer').click(function() {
|
|
$('.menu-item.button').addClass('hidden');
|
|
$('#container > div').addClass('hidden');
|
|
$('#container .timer').removeClass('hidden');
|
|
$('.menu-item').removeClass('selected');
|
|
$('.menu-item.timer').addClass('selected');
|
|
view = 'timer';
|
|
});
|
|
|
|
$('.menu-item.stopwatch').click(function() {
|
|
$('.menu-item.button').addClass('hidden');
|
|
$('#container > div').addClass('hidden');
|
|
$('#container .stopwatch').removeClass('hidden');
|
|
$('.menu-item').removeClass('selected');
|
|
$('.menu-item.stopwatch').addClass('selected');
|
|
view = 'stopwatch';
|
|
});
|
|
|
|
$('.menu-item.new-world').click(function() {
|
|
openNewClock();
|
|
});
|
|
|
|
$('.menu-item.new-alarm').click(function() {
|
|
openNewAlarm();
|
|
});
|
|
|
|
$('.world .new .add').click(function() {
|
|
addWorldClock();
|
|
});
|
|
|
|
$('.alarm .new .add').click(function() {
|
|
addAlarmClock();
|
|
});
|
|
|
|
$('#new-city').keyup(function(event) {
|
|
if (event.which == 13) $('.world .new .add').click();
|
|
});
|
|
|
|
$('.world .new .cancel').click(function() {
|
|
$('.world .new #new-city').val('');
|
|
$('.world .new #new-city').removeClass('form-error');
|
|
$('.new .error-message').addClass('hidden');
|
|
$('.new .error-message').html('');
|
|
$('.world .new').addClass('hidden');
|
|
resize();
|
|
});
|
|
|
|
$('.alarm .new .cancel').click(function() {
|
|
$('.alarm .new #new-alarm-name').val('');
|
|
$('#new-alarm-hour').val('');
|
|
$('#new-alarm-minute').val('');
|
|
$('#new-alarm-noon').val('');
|
|
$('.alarm .new').addClass('hidden');
|
|
resize();
|
|
});
|
|
|
|
$('.alarm .edit .cancel').live('click', function() {
|
|
var id = $(this).parent().attr('class').split(' ')[0];
|
|
$('.edit.' + id).addClass('hidden');
|
|
$('.info.' + id).removeClass('hidden');
|
|
$(this).parent().parent().removeClass('editing');
|
|
});
|
|
|
|
$('.alarm .edit .save').live('click', function() {
|
|
var id = $(this).parent().attr('class').split(' ')[0];
|
|
editAlarmClock(id);
|
|
$('.edit.' + id).addClass('hidden');
|
|
$('.info.' + id).removeClass('hidden');
|
|
$(this).parent().parent().removeClass('editing');
|
|
});
|
|
|
|
createDefaultText('00', $('#timer-minute'));
|
|
createDefaultText('00', $('#timer-second'));
|
|
|
|
$('#timer-minute').keyup(function() {
|
|
if ($('#timer-minute').val() != '00') {
|
|
$('.timer .button.start').removeClass('disabled');
|
|
}
|
|
});
|
|
$('#timer-second').keyup(function() {
|
|
if ($('#timer-second').val() != '00') {
|
|
$('.timer .button.start').removeClass('disabled');
|
|
}
|
|
});
|
|
|
|
$('.timer .button.start').click(function() {
|
|
if (!$(this).hasClass('disabled')) {
|
|
var minute = parseInt($('#timer-minute').val()) % 60;
|
|
var second = parseInt($('#timer-second').val()) % 60;
|
|
if (isNaN(minute)) {
|
|
minute = 0;
|
|
$('#timer-minute').val('00');
|
|
} if (isNaN(second)) {
|
|
second = 0;
|
|
$('#timer-second').val('00');
|
|
}
|
|
timer.setWatch(minute, second);
|
|
timer.startTiming();
|
|
$('.timer #timer-minute').addClass('disabled');
|
|
$('.timer #timer-second').addClass('disabled');
|
|
$('.timer .button.start').addClass('hidden');
|
|
$('.timer .button.stop').removeClass('disabled');
|
|
$('.timer .button.stop').removeClass('hidden');
|
|
$('.timer .button.reset').removeClass('disabled');
|
|
}
|
|
});
|
|
|
|
$('.timer .button.stop').click(function() {
|
|
timer.stopTiming();
|
|
$('.timer .button.start').removeClass('hidden');
|
|
$('.timer .button.stop').addClass('hidden');
|
|
});
|
|
|
|
$('.timer .button.reset').click(function() {
|
|
$('.timer .button.start').removeClass('hidden');
|
|
$('.timer .button.stop').addClass('hidden');
|
|
$('.timer .button.start').addClass('disabled');
|
|
$('.timer .button.reset').addClass('disabled');
|
|
timer.resetWatch();
|
|
$('.timer #timer-minute').val('00');
|
|
$('.timer #timer-second').val('00');
|
|
$('.timer #timer-minute').removeClass('disabled');
|
|
$('.timer #timer-second').removeClass('disabled');
|
|
});
|
|
|
|
$('.stopwatch .button.start').click(function() {
|
|
stopwatch.startTiming();
|
|
$('.stopwatch .button.start').addClass('hidden');
|
|
$('.stopwatch .button.stop').removeClass('hidden');
|
|
});
|
|
|
|
$('.stopwatch .button.stop').click(function() {
|
|
stopwatch.stopTiming();
|
|
$('.stopwatch .button.start').removeClass('hidden');
|
|
$('.stopwatch .button.stop').addClass('hidden');
|
|
});
|
|
|
|
$('.stopwatch .button.reset').click(function() {
|
|
stopwatch.resetWatch();
|
|
$('.stopwatch .button.start').removeClass('hidden');
|
|
$('.stopwatch .button.stop').addClass('hidden');
|
|
});
|
|
|
|
$('.delete').live('click', function() {
|
|
var class_name = $(this).parent().attr('class').split(' ')[1];
|
|
$('.' + class_name).remove();
|
|
if (view == 'alarm') {
|
|
var num = parseInt(class_name.slice(1));
|
|
var cur_num = sizeOf(alarms);
|
|
if (cur_num === 1) {
|
|
delete alarms[class_name];
|
|
delete alarm_clocks[class_name];
|
|
}
|
|
else {
|
|
while (cur_num > num) {
|
|
var id = 'a' + cur_num;
|
|
var alarm = alarms[id];
|
|
var alarm_clock = alarm_clocks[id];
|
|
delete alarms[id];
|
|
delete alarm_clocks[id];
|
|
cur_num -= 1;
|
|
alarms['a' + cur_num] = alarm;
|
|
alarm_clocks['a' + cur_num] = alarm_clock;
|
|
$('.' + id).removeClass(id).addClass('a' + cur_num);
|
|
}
|
|
}
|
|
}
|
|
delete clocks[class_name];
|
|
chrome.storage.sync.set({ 'clocks': clocks, 'alarms': alarms });
|
|
if (sizeOf(clocks) == 0)
|
|
$('.menu-item.new-world').click();
|
|
if (sizeOf(alarms) == 0)
|
|
$('.menu-item.new-alarm').click();
|
|
|
|
resize();
|
|
});
|
|
|
|
$('.info').live('click', function() {
|
|
$(this).parent().addClass('editing');
|
|
var id = $(this).attr('class').split(' ')[0];
|
|
var hour = parseInt(alarms[id]['hour']);
|
|
var minute = parseInt(alarms[id]['minute']);
|
|
var noon = 'AM';
|
|
if (hour == 12) {
|
|
noon = 'PM';
|
|
}
|
|
if (hour > 12) {
|
|
noon = 'PM';
|
|
hour -= 12;
|
|
}
|
|
if (hour == 0) {
|
|
hour = 12;
|
|
}
|
|
if (hour < 10) {
|
|
hour = '0' + hour;
|
|
}
|
|
if (minute < 10) {
|
|
minute = '0' + minute;
|
|
}
|
|
$('.' + id + ' .edit-alarm-name').val(alarms[id]['name']);
|
|
$('.' + id + ' .edit-alarm-hour').val(hour);
|
|
$('.' + id + ' .edit-alarm-minute').val(minute);
|
|
$('.' + id + ' .edit-alarm-noon').val(noon);
|
|
$(this).addClass('hidden');
|
|
$('.' + id + '.edit').removeClass('hidden');
|
|
});
|
|
|
|
$(window).resize(function() {
|
|
resize();
|
|
});
|
|
|
|
setup();
|
|
|
|
});
|
|
|
|
function createDefaultText(default_text, $input) {
|
|
$input.css('color', '#666');
|
|
$input.val(default_text);
|
|
$input.focus(function() {
|
|
var actual_text = $input.val();
|
|
if (actual_text == default_text) {
|
|
$input.val('');
|
|
$input.css('color', '#333');
|
|
}
|
|
});
|
|
$input.blur(function() {
|
|
var actual_text = $input.val();
|
|
if (!actual_text) {
|
|
$input.val(default_text);
|
|
$input.css('color', '#666');
|
|
}
|
|
});
|
|
}
|
|
|
|
function openNewClock() {
|
|
$('.world .new').removeClass('hidden');
|
|
$('#new-city').focus();
|
|
resize();
|
|
}
|
|
|
|
function openNewAlarm() {
|
|
var default_text = 'Alarm ' + (sizeOf(alarms) + 1);
|
|
var $input = $('#new-alarm-name');
|
|
createDefaultText(default_text, $input);
|
|
createDefaultText('00', $('#new-alarm-hour'));
|
|
createDefaultText('00', $('#new-alarm-minute'));
|
|
createDefaultText('AM', $('#new-alarm-noon'));
|
|
$('.alarm .new').removeClass('hidden');
|
|
resize();
|
|
}
|
|
|
|
function setup() {
|
|
chrome.storage.sync.get(function(items) {
|
|
for (var clock_class in items['clocks']) {
|
|
clocks[clock_class] = items['clocks'][clock_class];
|
|
}
|
|
for (var alarm_class in items['alarms']) {
|
|
alarms[alarm_class] = items['alarms'][alarm_class];
|
|
}
|
|
local = items['local'];
|
|
|
|
navigator.geolocation.getCurrentPosition(getCurrentPosSuccessFunction,
|
|
getCurrentPosErrorFunction);
|
|
});
|
|
}
|
|
|
|
function setupClocks() {
|
|
var clock = new Clock('new', 0);
|
|
clock.create();
|
|
var found_local = false;
|
|
for (var city_class in clocks) {
|
|
if (city_class == local_class) found_local = true;
|
|
addClock(city_class);
|
|
}
|
|
if (local_class && !found_local) addClock(local_class);
|
|
if (sizeOf(clocks) == 0) {
|
|
$('.menu-item.new-world').click();
|
|
}
|
|
}
|
|
|
|
function setupAlarms() {
|
|
var alarm = new Alarm('new', 'new', 0, 0, 0);
|
|
alarm.create();
|
|
for (var id in alarms) {
|
|
addAlarm(id);
|
|
}
|
|
if (sizeOf(alarms) == 0)
|
|
$('.menu-item.new-alarm').click();
|
|
}
|
|
|
|
function setupTimer() {
|
|
timer = new Timer();
|
|
timer.create();
|
|
}
|
|
|
|
function setupStopwatch() {
|
|
stopwatch = new Stopwatch();
|
|
stopwatch.create();
|
|
}
|
|
|
|
function getCurrentPosSuccessFunction(position) {
|
|
var lat = position.coords.latitude;
|
|
var lng = position.coords.longitude;
|
|
var url = encodeURI(base_url + lat + ',' + lng);
|
|
$.get(url,
|
|
function(data) {
|
|
if (!data['data']['error']) {
|
|
local = parseInt(data['data']['time_zone'][0]['utcOffset']);
|
|
chrome.storage.sync.set({ 'local' : local });
|
|
}
|
|
},
|
|
'json'
|
|
);
|
|
setupClocks();
|
|
setupAlarms();
|
|
setupTimer();
|
|
setupStopwatch();
|
|
}
|
|
|
|
function getCurrentPosErrorFunction(error) {
|
|
console.log("Geocoder failed");
|
|
local = -new Date().getTimezoneOffset()/60;
|
|
setupClocks();
|
|
setupAlarms();
|
|
setupTimer();
|
|
setupStopwatch();
|
|
}
|
|
|
|
// Function adds a canvas element and initializes a new clock for that canvas
|
|
function addClock(city_class) {
|
|
var city = clocks[city_class][0];
|
|
var offset = clocks[city_class][1] - local;
|
|
$('#container .world .new').before('<div class="city-clock ' + city_class + '"></div>');
|
|
$('.' + city_class).append('<div class="delete"></div>');
|
|
$('.' + city_class).append('<canvas class="clock"></canvas>');
|
|
$('.' + city_class).append('<div class="city">' + city + '</div>');
|
|
$('.' + city_class).append('<div class="time"></div>');
|
|
$('.' + city_class).append('<div class="day"></div>');
|
|
var clock = new Clock(city_class, offset);
|
|
clock.create();
|
|
resize();
|
|
}
|
|
|
|
// Function adds a canvas element and initializes a new alarm for that canvas
|
|
function addAlarm(id) {
|
|
var alarm = alarms[id];
|
|
var edit = '<div class="' + id + ' edit hidden">\
|
|
<input type="text" class="edit-alarm-name" /><br>\
|
|
<input type="text" class="edit-alarm-hour" maxlength="2" />\
|
|
<input type="text" class="edit-alarm-minute" maxlength="2" />\
|
|
<input type="text" class="edit-alarm-noon" maxlength="2" /><br>\
|
|
<div class="button save">Save</div>\
|
|
<div class="button cancel">Cancel</div>\
|
|
</div>';
|
|
var info = '<div class="' + id + ' info">\
|
|
<div class="name">' + alarm['name'] + '</div>\
|
|
<div class="time"></div>\
|
|
</div>'
|
|
$('#container .alarm .new').before('<div class="alarm-clock ' + id + '"></div>');
|
|
$('.alarm-clock.' + id).append('<div class="delete"></div>');
|
|
$('.alarm-clock.' + id).append('<canvas class="clock"></canvas>');
|
|
$('.alarm-clock.' + id).append(info);
|
|
$('.alarm-clock.' + id).append(edit);
|
|
var alarm_clock = new Alarm(id,
|
|
alarm['name'],
|
|
alarm['hour'],
|
|
alarm['minute'],
|
|
alarm['on']);
|
|
alarm_clock.create();
|
|
alarm_clocks[id] = alarm_clock;
|
|
resize();
|
|
}
|
|
|
|
function addWorldClock() {
|
|
var city = $('.world .new #new-city').val();
|
|
if (city.split(' ').join('-') in clocks) {
|
|
$('.world .new .button.cancel').click();
|
|
}
|
|
else {
|
|
var url = encodeURI(base_url + city);
|
|
$.get(url,
|
|
function(data) {
|
|
if (data['data']['error']) {
|
|
var city = $('.world .new #new-city').val();
|
|
$('.world .new #new-city').addClass('form-error');
|
|
$('.new .error-message').html('Could not find the time for ' + city + '.<br>');
|
|
$('.new .error-message').removeClass('hidden');
|
|
}
|
|
else {
|
|
var city = data['data']['request'][0]['query'].split(', ')[0];
|
|
var city_class = city.split(' ').join('-');
|
|
var time_zone = parseInt(data['data']['time_zone'][0]['utcOffset']);
|
|
clocks[city_class] = [city, time_zone];
|
|
chrome.storage.sync.set({ 'clocks' : clocks });
|
|
addClock(city_class);
|
|
$('.world .new #new-city').val('');
|
|
$('.new .error-message').html('');
|
|
$('.world .new').addClass('hidden');
|
|
}
|
|
},
|
|
'json'
|
|
);
|
|
}
|
|
}
|
|
|
|
function addAlarmClock() {
|
|
var name = $('#new-alarm-name').val();
|
|
var hour = parseInt($('#new-alarm-hour').val());
|
|
var minute = parseInt($('#new-alarm-minute').val());
|
|
if (isNaN(hour)) {
|
|
hour = 12;
|
|
} if (isNaN(minute)) {
|
|
minute = 0;
|
|
}
|
|
var noon = $('#new-alarm-noon').val();
|
|
if (noon.toLowerCase() == 'pm' && hour != 12) hour += 12;
|
|
else if (noon.toLowerCase() == 'am' && hour == 12) hour -= 12;
|
|
var id = 'a' + (sizeOf(alarms) + 1);
|
|
alarm = { 'name' : name, 'hour' : hour, 'minute' : minute, 'on' : true };
|
|
alarms[id] = alarm;
|
|
chrome.storage.sync.set({ 'alarms' : alarms });
|
|
$('#new-alarm-name').val('');
|
|
$('#new-alarm-hour').val('');
|
|
$('#new-alarm-minute').val('');
|
|
$('#new-alarm-noon').val('');
|
|
addAlarm(id);
|
|
$('.alarm .new').addClass('hidden');
|
|
}
|
|
|
|
function editAlarmClock(id) {
|
|
var name = $('.edit.' + id + ' .edit-alarm-name').val();
|
|
console.log(name);
|
|
var hour = parseInt($('.edit.' + id + ' .edit-alarm-hour').val());
|
|
var minute = parseInt($('.edit.' + id + ' .edit-alarm-minute').val());
|
|
if (isNaN(hour)) {
|
|
hour = alarms[id]['hour'];
|
|
} if (isNaN(minute)) {
|
|
minute = alarms[id]['minute'];
|
|
}
|
|
var noon = $('.edit.' + id + ' .edit-alarm-noon').val();
|
|
if (noon.toLowerCase() == 'pm' && hour != 12) hour += 12;
|
|
else if (noon.toLowerCase() == 'am' && hour == 12) hour -= 12;
|
|
alarm = { 'name' : name, 'hour' : hour, 'minute' : minute, 'on' : alarms[id]['on'] };
|
|
alarms[id] = alarm;
|
|
alarm_clock = alarm_clocks[id];
|
|
console.log(hour);
|
|
console.log(minute);
|
|
alarm_clock.update(name, hour, minute);
|
|
chrome.storage.sync.set({ 'alarms' : alarms });
|
|
$('.' + id + '.info .name').text(name);
|
|
}
|
|
|
|
function resize() {
|
|
var clock_width = 330.0;
|
|
var clocks_size = sizeOf(clocks);
|
|
if (!$('.world .new').hasClass('hidden'))
|
|
clocks_size += 1;
|
|
var lines = Math.ceil(clock_width * clocks_size / window.innerWidth);
|
|
var height = 350 * lines;
|
|
if (window.innerHeight > height + 100) {
|
|
$('.world').css({ 'top' : '50%', 'margin-top' : '-' + height/2 + 'px' });
|
|
} else {
|
|
$('.world').css({ 'top' : '0px', 'margin-top' : '0px' });
|
|
}
|
|
|
|
var alarm_width = 300.0;
|
|
var alarms_size = sizeOf(alarms);
|
|
if (!$('.alarm .new').hasClass('hidden'))
|
|
alarms_size += 1;
|
|
var lines = Math.ceil(alarm_width * alarms_size / window.innerWidth);
|
|
var height = 385 * lines;
|
|
if (window.innerHeight > height) {
|
|
$('.alarm').css({ 'top' : '50%', 'margin-top' : '-' + height/2 + 'px' });
|
|
} else {
|
|
$('.alarm').css({ 'top' : '0px', 'margin-top' : '0px' });
|
|
}
|
|
}
|
|
|
|
function sizeOf(dictionary) {
|
|
var count = 0;
|
|
for (var key in dictionary) {
|
|
if (dictionary.hasOwnProperty(key)) count++;
|
|
}
|
|
return count;
|
|
}
|
|
|