mirror of
https://github.com/google/pebble.git
synced 2025-06-04 09:13:12 +00:00
Import the pebble dev site into devsite/
This commit is contained in:
Katharine Berry
parent
3b92768480
commit
527858cf4c
1359 changed files with 265431 additions and 0 deletions
3346
devsite/source/assets/js/tools/color-dict.js
Normal file
3346
devsite/source/assets/js/tools/color-dict.js
Normal file
File diff suppressed because it is too large
Load diff
82
devsite/source/assets/js/tools/color-mapping-sunlight.js
Normal file
82
devsite/source/assets/js/tools/color-mapping-sunlight.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
var colorMappingSunlight = {
|
||||
"#000000": "#000000",
|
||||
"#000055": "#001e41",
|
||||
"#0000aa": "#004387",
|
||||
"#0000ff": "#0068ca",
|
||||
"#005500": "#2b4a2c",
|
||||
"#005555": "#27514f",
|
||||
"#0055aa": "#16638d",
|
||||
"#0055ff": "#007dce",
|
||||
"#00aa00": "#5e9860",
|
||||
"#00aa55": "#5c9b72",
|
||||
"#00aaaa": "#57a5a2",
|
||||
"#00aaff": "#4cb4db",
|
||||
"#00ff00": "#8ee391",
|
||||
"#00ff55": "#8ee69e",
|
||||
"#00ffaa": "#8aebc0",
|
||||
"#00ffff": "#84f5f1",
|
||||
"#550000": "#4a161b",
|
||||
"#550055": "#482748",
|
||||
"#5500aa": "#40488a",
|
||||
"#5500ff": "#2f6bcc",
|
||||
"#555500": "#564e36",
|
||||
"#555555": "#545454",
|
||||
"#5555aa": "#4f6790",
|
||||
"#5555ff": "#4180d0",
|
||||
"#55aa00": "#759a64",
|
||||
"#55aa55": "#759d76",
|
||||
"#55aaaa": "#71a6a4",
|
||||
"#55aaff": "#69b5dd",
|
||||
"#55ff00": "#9ee594",
|
||||
"#55ff55": "#9de7a0",
|
||||
"#55ffaa": "#9becc2",
|
||||
"#55ffff": "#95f6f2",
|
||||
"#aa0000": "#99353f",
|
||||
"#aa0055": "#983e5a",
|
||||
"#aa00aa": "#955694",
|
||||
"#aa00ff": "#8f74d2",
|
||||
"#aa5500": "#9d5b4d",
|
||||
"#aa5555": "#9d6064",
|
||||
"#aa55aa": "#9a7099",
|
||||
"#aa55ff": "#9587d5",
|
||||
"#aaaa00": "#afa072",
|
||||
"#aaaa55": "#aea382",
|
||||
"#aaaaaa": "#ababab",
|
||||
"#ffffff": "#ffffff",
|
||||
"#aaaaff": "#a7bae2",
|
||||
"#aaff00": "#c9e89d",
|
||||
"#aaff55": "#c9eaa7",
|
||||
"#aaffaa": "#c7f0c8",
|
||||
"#aaffff": "#c3f9f7",
|
||||
"#ff0000": "#e35462",
|
||||
"#ff0055": "#e25874",
|
||||
"#ff00aa": "#e16aa3",
|
||||
"#ff00ff": "#de83dc",
|
||||
"#ff5500": "#e66e6b",
|
||||
"#ff5555": "#e6727c",
|
||||
"#ff55aa": "#e37fa7",
|
||||
"#ff55ff": "#e194df",
|
||||
"#ffaa00": "#f1aa86",
|
||||
"#ffaa55": "#f1ad93",
|
||||
"#ffaaaa": "#efb5b8",
|
||||
"#ffaaff": "#ecc3eb",
|
||||
"#ffff00": "#ffeeab",
|
||||
"#ffff55": "#fff1b5",
|
||||
"#ffffaa": "#fff6d3"
|
||||
};
|
||||
122
devsite/source/assets/js/tools/color-picker.js
Normal file
122
devsite/source/assets/js/tools/color-picker.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
/**
|
||||
* Copyright 2025 Google LLC
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
var titleBackup = document.title;
|
||||
|
||||
function updateFavicon(hex) {
|
||||
var canvas = document.createElement('canvas');
|
||||
if (! canvas.getContext) {
|
||||
return;
|
||||
}
|
||||
var ctx = canvas.getContext('2d');
|
||||
var img = document.createElement('img');
|
||||
img.onload = function () {
|
||||
canvas.height = this.height;
|
||||
canvas.width = this.width;
|
||||
ctx.drawImage(this, 0, 0);
|
||||
ctx.fillStyle = hex;
|
||||
ctx.fillRect(2, 4, 9, 8);
|
||||
$('#favicon').attr('href', canvas.toDataURL('image/png'));
|
||||
};
|
||||
img.src = '/assets/favicon.png';
|
||||
}
|
||||
|
||||
function selectColor($polygon) {
|
||||
var hexValue = $polygon.data('hex');
|
||||
var correctedHexValue = $polygon.attr('fill');
|
||||
var name = color_picker_colors[hexValue].name;
|
||||
$('#color-picker polygon').attr('stroke', '#fff').attr('stroke-width', '1.5');
|
||||
$polygon.attr('stroke', '#000').attr('stroke-width', '3');
|
||||
$polygon.parent().append($polygon);
|
||||
|
||||
if (color_picker_colors[hexValue].url) {
|
||||
$('#js-picker-name-no-url').hide();
|
||||
$('#js-picker-name').text(name).attr('href', color_picker_colors[hexValue].url).show();
|
||||
}
|
||||
else {
|
||||
$('#js-picker-name-no-url').show().text(name);
|
||||
$('#js-picker-name').hide();
|
||||
}
|
||||
$('#js-picker-block').css('background-color', correctedHexValue);
|
||||
if (hexValue === '#FFFFFF') {
|
||||
$('#js-picker-block').css('border', '1px solid #000');
|
||||
}
|
||||
else {
|
||||
$('#js-picker-block').css('border', '0');
|
||||
}
|
||||
$('#js-picker-constant').text(color_picker_colors[hexValue].c_identifier);
|
||||
$('#js-picker-html').text(correctedHexValue.toUpperCase());
|
||||
$('#js-picker-html-uncorrected').text(hexValue.toUpperCase());
|
||||
$('#js-picker-rgb').text(color_picker_colors[hexValue].literals[1].value);
|
||||
$('#js-picker-hex').text(color_picker_colors[hexValue].literals[2].value);
|
||||
$('#js-picker-sample').html(Handlebars.templates['color-picker-sample-window']({ color_name: color_picker_colors[hexValue].c_identifier }));
|
||||
document.title = titleBackup.replace('Color Picker Tool', name + ' // Color Picker Tool');
|
||||
updateFavicon(hexValue);
|
||||
|
||||
if (window.location.hash !== hexValue) {
|
||||
window.location = hexValue;
|
||||
}
|
||||
}
|
||||
|
||||
function selectUrlColor() {
|
||||
if (! document.location.hash) {
|
||||
return;
|
||||
}
|
||||
var polygon = $('#color-picker polygon[data-hex="' + document.location.hash + '"]');
|
||||
if (polygon && polygon.length) {
|
||||
selectColor(polygon);
|
||||
}
|
||||
}
|
||||
|
||||
function applyColorMap(map) {
|
||||
$('#color-picker polygon').each(function (index, elem) {
|
||||
if (map) {
|
||||
$(elem).attr('fill', map[$(elem).data('hex').toLowerCase()]);
|
||||
}
|
||||
else {
|
||||
$(elem).attr('fill', $(elem).data('hex'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('#color-picker polygon').on('click', function (event) {
|
||||
selectColor($(this));
|
||||
});
|
||||
|
||||
$('#color-picker polygon').each(function (index, elem) {
|
||||
$(elem).attr('data-hex', $(elem).attr('fill'));
|
||||
});
|
||||
|
||||
$('.js-btn-colormap').on('click', function (event) {
|
||||
var type = $(this).data('colormap');
|
||||
switch (type) {
|
||||
case 'none':
|
||||
applyColorMap(null);
|
||||
break;
|
||||
case 'sunlight':
|
||||
applyColorMap(colorMappingSunlight);
|
||||
break;
|
||||
}
|
||||
selectUrlColor();
|
||||
});
|
||||
|
||||
window.onpopstate = function(event) {
|
||||
selectUrlColor();
|
||||
};
|
||||
|
||||
selectUrlColor();
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue