Fix code formatting after auto-format
Isaiah Odhner
parent
8053b38e58
commit
028c1198d8
130
index.html
130
index.html
|
|
@ -8,13 +8,13 @@
|
|||
<!-- This should mirror CSP in electron-main.js, except maybe for firebase stuff. -->
|
||||
<!-- Firebase stuff is somewhat speculative, as the quota is exceeded as I'm adding this. -->
|
||||
<meta http-equiv="Content-Security-Policy" content="
|
||||
default-src 'self';
|
||||
script-src 'self' https://jspaint.firebaseio.com;
|
||||
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
|
||||
img-src 'self' data: blob: https://i.postimg.cc;
|
||||
font-src 'self' https://fonts.gstatic.com;
|
||||
connect-src * data: blob: https://jspaint.firebaseio.com wss://jspaint.firebaseio.com;
|
||||
">
|
||||
default-src 'self';
|
||||
script-src 'self' https://jspaint.firebaseio.com;
|
||||
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
|
||||
img-src 'self' data: blob: https://i.postimg.cc;
|
||||
font-src 'self' https://fonts.gstatic.com;
|
||||
connect-src * data: blob: https://jspaint.firebaseio.com wss://jspaint.firebaseio.com;
|
||||
">
|
||||
|
||||
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
|
||||
<link href="styles/layout.css" class="flippable-layout-stylesheet" rel="stylesheet" type="text/css">
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
Text inputs and dropdowns are styled in classic.css, but should also be included in OS-GUI at some point.
|
||||
This is not an @import in classic.css because it needs RTLCSS and I'm not applying RTLCSS to themes yet.
|
||||
So I added .not-for-modern logic to theme.js to exclude these styles depending on the theme.
|
||||
-->
|
||||
-->
|
||||
<link href="lib/98.css/98.custom-build.css" class="flippable-layout-stylesheet not-for-modern" rel="stylesheet"
|
||||
type="text/css">
|
||||
|
||||
|
|
@ -116,49 +116,49 @@
|
|||
</div>
|
||||
<div id="news" hidden>
|
||||
<!-- <article class="news-entry" id="news-2021-saving">
|
||||
<h1>The Savior Update</h1>
|
||||
<time datetime=""></time>
|
||||
<img width="" height="" style="max-width: 100%; height: auto; image-rendering: auto;" alt="" src=""/>
|
||||
<p>
|
||||
<b>Save</b> (<kbd>Ctrl+S</kbd>) can now save over the open file, in Chrome, Edge, and Opera browsers.
|
||||
This works using new <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API">File System Access API</a>.
|
||||
Always use <b>Save As</b> (<kbd>Ctrl+Shift+S</kbd>) if you want to save a new file.
|
||||
</p>
|
||||
<p>
|
||||
<b>Save As</b> now asks for a file name and format.
|
||||
PNG, GIF, and BMP are supported, including indexed color BMPs.
|
||||
</p>
|
||||
<p>
|
||||
Tip: Use PNG if you don't have a specific reason to use another format,
|
||||
as it has the best quality when saving.
|
||||
</p>
|
||||
<p>
|
||||
If you open a BMP file with a palette, the palette is loaded into the Colors box.
|
||||
If you load a monochrome BMP file, it loads a gradient of dither patterns into the Colors box.
|
||||
</p>
|
||||
<p>
|
||||
<b>Black and White</b> mode in <b>Image > Attributes</b> is generalized to a monochrome mode
|
||||
(although it's still called "Black and White" in the Attributes window.)
|
||||
If an image has only two colors, when switching to "Black and White" mode,
|
||||
it automatically adapts to these colors and gives you a gradient of dither patterns in the Colors box.
|
||||
</p>
|
||||
<p>
|
||||
If you use <b>Image > Invert</b>, in monochrome mode, it flips the two colors in the image,
|
||||
instead of changing colors to their RGB opposites.
|
||||
(If the image is pure black and white, these two operations are equivalent.)
|
||||
</p>
|
||||
<p>
|
||||
<b>Colors > Save Colors</b> also now asks for a file name and format.
|
||||
An absurd number of file formats are supported.
|
||||
You can even export CSS variables for use in a web design project.
|
||||
RIFF Palette (*.pal) is compatible with MS Paint, and GIMP Palette (*.gpl) is compatible with many open source graphics programs such as Inkscape and Krita.
|
||||
</p>
|
||||
<p>
|
||||
You can find lots of palettes to use on <a target="_blank" href="https://lospec.com/palette-list">Lospec</a>.
|
||||
Download a palette as GIMP GPL (or several other formats) and use <b>Colors > Get Colors</b> and select the file,
|
||||
or simply drag and drop the file onto JS Paint to load the palette.
|
||||
</p>
|
||||
</article> -->
|
||||
<h1>The Savior Update</h1>
|
||||
<time datetime=""></time>
|
||||
<img width="" height="" style="max-width: 100%; height: auto; image-rendering: auto;" alt="" src=""/>
|
||||
<p>
|
||||
<b>Save</b> (<kbd>Ctrl+S</kbd>) can now save over the open file, in Chrome, Edge, and Opera browsers.
|
||||
This works using new <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API">File System Access API</a>.
|
||||
Always use <b>Save As</b> (<kbd>Ctrl+Shift+S</kbd>) if you want to save a new file.
|
||||
</p>
|
||||
<p>
|
||||
<b>Save As</b> now asks for a file name and format.
|
||||
PNG, GIF, and BMP are supported, including indexed color BMPs.
|
||||
</p>
|
||||
<p>
|
||||
Tip: Use PNG if you don't have a specific reason to use another format,
|
||||
as it has the best quality when saving.
|
||||
</p>
|
||||
<p>
|
||||
If you open a BMP file with a palette, the palette is loaded into the Colors box.
|
||||
If you load a monochrome BMP file, it loads a gradient of dither patterns into the Colors box.
|
||||
</p>
|
||||
<p>
|
||||
<b>Black and White</b> mode in <b>Image > Attributes</b> is generalized to a monochrome mode
|
||||
(although it's still called "Black and White" in the Attributes window.)
|
||||
If an image has only two colors, when switching to "Black and White" mode,
|
||||
it automatically adapts to these colors and gives you a gradient of dither patterns in the Colors box.
|
||||
</p>
|
||||
<p>
|
||||
If you use <b>Image > Invert</b>, in monochrome mode, it flips the two colors in the image,
|
||||
instead of changing colors to their RGB opposites.
|
||||
(If the image is pure black and white, these two operations are equivalent.)
|
||||
</p>
|
||||
<p>
|
||||
<b>Colors > Save Colors</b> also now asks for a file name and format.
|
||||
An absurd number of file formats are supported.
|
||||
You can even export CSS variables for use in a web design project.
|
||||
RIFF Palette (*.pal) is compatible with MS Paint, and GIMP Palette (*.gpl) is compatible with many open source graphics programs such as Inkscape and Krita.
|
||||
</p>
|
||||
<p>
|
||||
You can find lots of palettes to use on <a target="_blank" href="https://lospec.com/palette-list">Lospec</a>.
|
||||
Download a palette as GIMP GPL (or several other formats) and use <b>Colors > Get Colors</b> and select the file,
|
||||
or simply drag and drop the file onto JS Paint to load the palette.
|
||||
</p>
|
||||
</article> -->
|
||||
<article class="news-entry" id="news-2021-saving">
|
||||
<h1>The GUIcci Update</h1>
|
||||
<time datetime="2021-12-08">2021-12-08</time>
|
||||
|
|
@ -539,8 +539,10 @@
|
|||
With that, combined with multitouch panning,
|
||||
JS Paint is much more useable on a phone.
|
||||
</p>
|
||||
<p><b class="bad">Caveat:</b> It's slow on some devices, and parts of the interface are still too small for
|
||||
touch.</p>
|
||||
<p>
|
||||
<b class="bad">Caveat:</b> It's slow on some devices, and parts of the interface are still too small for
|
||||
touch.
|
||||
</p>
|
||||
</article>
|
||||
<article class="news-entry" id="news-2019-polygon-text-and-select">
|
||||
<h1>Polygon, Text, and Select</h1>
|
||||
|
|
@ -688,7 +690,7 @@
|
|||
<script src="src/$ToolWindow.js"></script>
|
||||
|
||||
<!-- After show_error_message, showMessageBox, make_window_supporting_scale, and localize are defined,
|
||||
set up better global error handling. -->
|
||||
set up better global error handling. -->
|
||||
<!-- Note: This must be in the <body> as it also handles showing a message for Internet Explorer. -->
|
||||
<script src="src/error-handling-enhanced.js"></script>
|
||||
|
||||
|
|
@ -734,11 +736,11 @@
|
|||
<defs>
|
||||
<filter id="disabled-inset-filter" x="0" y="0" width="1px" height="1px">
|
||||
<feColorMatrix in="SourceGraphic" type="matrix" values="
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
-1000 -1000 -1000 1 0
|
||||
" result="black-parts-isolated" />
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
-1000 -1000 -1000 1 0
|
||||
" result="black-parts-isolated" />
|
||||
<feFlood result="shadow-color" flood-color="var(--ButtonShadow)" />
|
||||
<feFlood result="hilight-color" flood-color="var(--ButtonHilight)" />
|
||||
<feOffset in="black-parts-isolated" dx="1" dy="1" result="offset" />
|
||||
|
|
@ -751,11 +753,11 @@
|
|||
</filter>
|
||||
<filter id="disabled-inset-filter-2" x="0" y="0" width="1px" height="1px">
|
||||
<feColorMatrix in="SourceGraphic" type="matrix" values="
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
-1 -1 -0 1 0
|
||||
" result="black-and-blue-parts-isolated" />
|
||||
1 0 0 0 0
|
||||
0 1 0 0 0
|
||||
0 0 1 0 0
|
||||
-1 -1 -0 1 0
|
||||
" result="black-and-blue-parts-isolated" />
|
||||
<feFlood result="shadow-color" flood-color="var(--ButtonShadow)" />
|
||||
<feFlood result="hilight-color" flood-color="var(--ButtonHilight)" />
|
||||
<feOffset in="black-and-blue-parts-isolated" dx="1" dy="1" result="offset" />
|
||||
|
|
|
|||
27
src/app.js
27
src/app.js
|
|
@ -484,11 +484,11 @@ const image_format_categories = (image_formats) => {
|
|||
const palette_formats = [];
|
||||
for (const [format_id, format] of Object.entries(AnyPalette.formats)) {
|
||||
if (format.write) {
|
||||
const inside_parens = format.fileExtensions.map((extension) => `*.${extension}`).join(";");
|
||||
palette_formats.push({
|
||||
formatID: format_id,
|
||||
name: format.name,
|
||||
nameWithExtensions: `${format.name} (${format.fileExtensions.map((extension) => `*.${extension}`).join(";")
|
||||
})`,
|
||||
nameWithExtensions: `${format.name} (${inside_parens})`,
|
||||
extensions: format.fileExtensions,
|
||||
});
|
||||
}
|
||||
|
|
@ -971,10 +971,10 @@ $G.on("keydown", e => {
|
|||
e.preventDefault();
|
||||
} else if (e.key === "F4") {
|
||||
redo();
|
||||
} else if (e.key === "Delete" || e.key === "Backspace") {
|
||||
// alt+backspace: undo
|
||||
// shift+delete: cut
|
||||
// delete/backspace: delete selection
|
||||
} else if (e.key === "Delete" || e.key === "Backspace") {
|
||||
if (e.key === "Delete" && e.shiftKey) {
|
||||
cut();
|
||||
} else if (e.key === "Backspace" && e.altKey) {
|
||||
|
|
@ -983,9 +983,9 @@ $G.on("keydown", e => {
|
|||
delete_selection();
|
||||
}
|
||||
e.preventDefault();
|
||||
} else if (e.key === "Insert") {
|
||||
// ctrl+insert: copy
|
||||
// shift+insert: paste
|
||||
} else if (e.key === "Insert") {
|
||||
if (e.ctrlKey) {
|
||||
copy();
|
||||
e.preventDefault();
|
||||
|
|
@ -1296,13 +1296,14 @@ if (window.initial_system_file_handle) {
|
|||
const lerp = (a, b, b_ness) => a + (b - a) * b_ness;
|
||||
|
||||
const color_ramp = (num_colors, start_hsla, end_hsla) =>
|
||||
Array(num_colors).fill().map((_undefined, index, array) =>
|
||||
`hsla(${lerp(start_hsla[0], end_hsla[0], index / array.length)
|
||||
}deg, ${lerp(start_hsla[1], end_hsla[1], index / array.length)
|
||||
}%, ${lerp(start_hsla[2], end_hsla[2], index / array.length)
|
||||
}%, ${lerp(start_hsla[3], end_hsla[3], index / array.length)
|
||||
}%)`
|
||||
);
|
||||
Array(num_colors).fill().map((_undefined, ramp_index, array) => {
|
||||
// TODO: should this use (array.length - 1)?
|
||||
const h = lerp(start_hsla[0], end_hsla[0], ramp_index / array.length);
|
||||
const s = lerp(start_hsla[1], end_hsla[1], ramp_index / array.length);
|
||||
const l = lerp(start_hsla[2], end_hsla[2], ramp_index / array.length);
|
||||
const a = lerp(start_hsla[3], end_hsla[3], ramp_index / array.length);
|
||||
return `hsla(${h}deg, ${s}%, ${l}%, ${a})`;
|
||||
});
|
||||
|
||||
const update_palette_from_theme = () => {
|
||||
if (get_theme() === "winter.css") {
|
||||
|
|
@ -2390,9 +2391,9 @@ function iOS() {
|
|||
'iPad',
|
||||
'iPhone',
|
||||
'iPod'
|
||||
].includes(navigator.platform)
|
||||
].includes(navigator.platform) ||
|
||||
// iPad on iOS 13 detection
|
||||
|| (navigator.userAgent.includes("Mac") && "ontouchend" in document)
|
||||
(navigator.userAgent.includes("Mac") && "ontouchend" in document)
|
||||
}
|
||||
$("html").toggleClass("ios", iOS());
|
||||
$G.on("fullscreenchange webkitfullscreenchange", () => {
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
|
|||
document.write(
|
||||
'<style>body { text-align: center; }</style>' +
|
||||
'<div className="not-supported">' +
|
||||
'<h1 className="not-supported-header">Internet Explorer is not supported!</h1>' +
|
||||
'<p className="not-supported-details">Try Chrome, Firefox, or Edge.</p>' +
|
||||
' <h1 className="not-supported-header">Internet Explorer is not supported!</h1>' +
|
||||
' <p className="not-supported-details">Try Chrome, Firefox, or Edge.</p>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2223,8 +2223,10 @@ function getSelectionText() {
|
|||
const activeEl = document.activeElement;
|
||||
const activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
|
||||
if (
|
||||
(activeElTagName == "textarea") || (activeElTagName == "input" &&
|
||||
/^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
|
||||
(activeElTagName == "textarea") || (
|
||||
activeElTagName == "input" &&
|
||||
/^(?:text|search|password|tel|url)$/i.test(activeEl.type)
|
||||
) &&
|
||||
(typeof activeEl.selectionStart == "number")
|
||||
) {
|
||||
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
|
||||
|
|
@ -3673,9 +3675,9 @@ function show_multi_user_setup_dialog(from_current_document) {
|
|||
|
||||
if (name == "") {
|
||||
show_error_message("The session name cannot be empty.");
|
||||
// }else if(name.match(/[./[\]#$]/)){
|
||||
// } else if (name.match(/[./[\]#$]/)) {
|
||||
// show_error_message("The session name cannot contain any of ./[]#$");
|
||||
// }else if(name.match(/\s/)){
|
||||
// } else if (name.match(/\s/)) {
|
||||
// show_error_message("The session name cannot contain spaces.");
|
||||
} else if ($session_name.is(":invalid")) {
|
||||
show_error_message("The session name must be made from only numbers, letters, and hyphens.");
|
||||
|
|
|
|||
10
src/help.js
10
src/help.js
|
|
@ -419,11 +419,11 @@ function $Iframe(options) {
|
|||
return $iframe;
|
||||
}
|
||||
|
||||
// function $IframeWindow(options){
|
||||
// function $IframeWindow(options) {
|
||||
|
||||
// var $win = new $Window(options);
|
||||
|
||||
// var $iframe = $win.$iframe = $Iframe({src: options.src});
|
||||
// var $iframe = $win.$iframe = $Iframe({ src: options.src });
|
||||
// $win.$content.append($iframe);
|
||||
// var iframe = $win.iframe = $iframe[0];
|
||||
// // @TODO: should I instead of having iframe.$window, have something like get$Window?
|
||||
|
|
@ -431,18 +431,18 @@ function $Iframe(options) {
|
|||
// // I know it's used from within the iframe contents as frameElement.$window
|
||||
// iframe.$window = $win;
|
||||
|
||||
// $win.on("close", function(){
|
||||
// $win.on("close", function () {
|
||||
// $iframe.destroy();
|
||||
// });
|
||||
// $win.onFocus($iframe.focus_contents);
|
||||
|
||||
// $iframe.on("load", function(){
|
||||
// $iframe.on("load", function () {
|
||||
// $win.show();
|
||||
// $win.focus();
|
||||
// // $iframe.focus_contents();
|
||||
// });
|
||||
|
||||
// $win.setInnerDimensions = ({width, height})=> {
|
||||
// $win.setInnerDimensions = ({ width, height }) => {
|
||||
// const width_from_frame = $win.width() - $win.$content.width();
|
||||
// const height_from_frame = $win.height() - $win.$content.height();
|
||||
// $win.css({
|
||||
|
|
|
|||
|
|
@ -1,25 +1,26 @@
|
|||
|
||||
const TAU = //////|//////
|
||||
///// | /////
|
||||
/// tau ///
|
||||
/// ...--> | <--... ///
|
||||
/// -' one | turn '- ///
|
||||
// .' | '. //
|
||||
// / | \ //
|
||||
// | | <-.. | //
|
||||
// | .->| \ | //
|
||||
// | / | | | //
|
||||
- - - - - - Math.PI + Math.PI - - - - - 0;
|
||||
// | \ | | | //
|
||||
// | '->| / | //
|
||||
// | | <-'' | //
|
||||
// \ | / //
|
||||
// '. | .' //
|
||||
/// -. | .- ///
|
||||
/// '''----|----''' ///
|
||||
/// | ///
|
||||
////// | /////
|
||||
//////|////// C/r;
|
||||
const TAU =
|
||||
// //////|//////
|
||||
// ///// | /////
|
||||
// /// tau ///
|
||||
// /// ...--> | <--... ///
|
||||
// /// -' one | turn '- ///
|
||||
// // .' | '. //
|
||||
// // / | \ //
|
||||
// // | | <-.. | //
|
||||
// // | .->| \ | //
|
||||
// // | / | | | //
|
||||
- - - - - - - - Math.PI + Math.PI - - - - - 0;
|
||||
// // // | \ | | | //
|
||||
// // // | '->| / | //
|
||||
// // // | | <-'' | //
|
||||
// // // \ | / //
|
||||
// // // '. | .' //
|
||||
// // /// -. | .- ///
|
||||
// // /// '''----|----''' ///
|
||||
// // /// | ///
|
||||
// // ////// | /////
|
||||
// // //////|////// C/r;
|
||||
|
||||
const is_pride_month = new Date().getMonth() === 5; // June (0-based, 0 is January)
|
||||
|
||||
|
|
|
|||
|
|
@ -41,13 +41,13 @@
|
|||
: (
|
||||
no_longer_blank ?
|
||||
`<p>
|
||||
<b>Note:</b> normally a backup is saved automatically,<br>
|
||||
but autosave is paused while this dialog is open<br>
|
||||
to avoid overwriting the (singular) backup.
|
||||
</p>
|
||||
<p>
|
||||
(See <b>File > Manage Storage</b> to view backups.)
|
||||
</p>`
|
||||
<b>Note:</b> normally a backup is saved automatically,<br>
|
||||
but autosave is paused while this dialog is open<br>
|
||||
to avoid overwriting the (singular) backup.
|
||||
</p>
|
||||
<p>
|
||||
(See <b>File > Manage Storage</b> to view backups.)
|
||||
</p>`
|
||||
: ""
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -161,14 +161,14 @@ window.simulateRandomGesturesPeriodically = () => {
|
|||
window.console && console.log("Using seed:", seed);
|
||||
window.console && console.log("Note: Seeds are not guaranteed to work with different versions of the app, but within the same version it should produce the same results given the same starting document & other state & NO interference... except for airbrush randomness");
|
||||
window.console && console.log(`To use this seed:
|
||||
|
||||
window.drawRandomlySeed = ${seed};
|
||||
document.body.style.width = "${getComputedStyle(document.body).width}";
|
||||
document.body.style.height = "${getComputedStyle(document.body).height}";
|
||||
simulateRandomGesturesPeriodically();
|
||||
delete window.drawRandomlySeed;
|
||||
|
||||
`);
|
||||
|
||||
window.drawRandomlySeed = ${seed};
|
||||
document.body.style.width = "${getComputedStyle(document.body).width}";
|
||||
document.body.style.height = "${getComputedStyle(document.body).height}";
|
||||
simulateRandomGesturesPeriodically();
|
||||
delete window.drawRandomlySeed;
|
||||
|
||||
`);
|
||||
|
||||
let delayBetweenGestures = 500;
|
||||
let shiftStart = false;
|
||||
|
|
|
|||
|
|
@ -1259,8 +1259,8 @@ const toolNames = tools.map((tool) => tool.speech_recognition).flat();
|
|||
// @TODO: "convert image to black-and-white" / "convert image to monochrome" / "make image monochrome", "increase/decrease threshold" / "more white" / "more black"
|
||||
// @TODO: in Image Attributes, "Color"/"Colors"/"Not black and white" for Colors
|
||||
// @TODO: select tool options like selection opacity and brush sizes
|
||||
// opaque/transparent/translucent/see-through selection / make selection opaque/transparent/translucent/see-through
|
||||
// "increase size"(too vague) / "increase brush size" / "increase eraser size" / "larger eraser" / "enlarge eraser"
|
||||
// opaque/transparent/translucent/see-through selection / make selection opaque/transparent/translucent/see-through
|
||||
// "increase size"(too vague) / "increase brush size" / "increase eraser size" / "larger eraser" / "enlarge eraser"
|
||||
|
||||
// @TODO: Is there a way to enable the grammar only as a hint, non-restrictively?
|
||||
// Construct a grammar that just contains an English dictionary, and set it as lower weight?
|
||||
|
|
@ -1343,11 +1343,12 @@ recognition.onresult = function (event) {
|
|||
const interpretations = interpret_command(command, true);
|
||||
if (interpretations.length) {
|
||||
const interpretation = choose_interpretation(interpretations);
|
||||
$status_text.html(`Speech: <span style="white-space: pre;">${command.replace(
|
||||
// @TODO: escape HTML around and inside the <b> tag
|
||||
const speech_html = command.replace(
|
||||
new RegExp(escapeRegExp(interpretation.match_text), "i"),
|
||||
(important_text) => `<b>${important_text}</b>`,
|
||||
)
|
||||
}</span>`);
|
||||
(important_text) => `<b>${important_text}</b>`
|
||||
);
|
||||
$status_text.html(`Speech: <span style="white-space: pre;">${speech_html}</span>`);
|
||||
console.log(`Interpreting command "${command}" as`, interpretation);
|
||||
interpretation.exec();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@ const $choose_magnification = $Choose(
|
|||
scale => scale === magnification,
|
||||
true,
|
||||
).addClass("choose-magnification")
|
||||
.css({ position: "relative" }); // positioning context for above `position: "absolute"` canvas
|
||||
.css({ position: "relative" }); // positioning context for .secret-option `position: "absolute"` canvas
|
||||
|
||||
$choose_magnification.on("update", () => {
|
||||
$choose_magnification
|
||||
|
|
|
|||
|
|
@ -69,15 +69,12 @@
|
|||
const animate = () => {
|
||||
rAF_ID = requestAnimationFrame(animate);
|
||||
|
||||
// @TODO: slow down and stop when you pause?
|
||||
const turns = Math.sin(Date.now() / 5000);
|
||||
const hueTurns = Math.sin(Date.now() / 4000);
|
||||
$(rotologo).css({
|
||||
transform:
|
||||
`perspective(4000px) rotateY(${Math.sin(Date.now() / 5000)
|
||||
}turn) rotateX(${0
|
||||
}turn) translate(-50%, -50%) translateZ(500px)`,
|
||||
filter:
|
||||
`hue-rotate(${Math.sin(Date.now() / 4000)
|
||||
// @TODO: slow down and stop when you pause
|
||||
}turn)`,
|
||||
transform: `perspective(4000px) rotateY(${turns}turn) translate(-50%, -50%) translateZ(500px)`,
|
||||
filter: `hue-rotate(${hueTurns}turn)`,
|
||||
});
|
||||
|
||||
if ($window.length) {
|
||||
|
|
@ -90,11 +87,10 @@
|
|||
el = el.offsetParent;
|
||||
} while (el);
|
||||
|
||||
const rotateY = -(offsetLeft + ($window.outerWidth() - parent.innerWidth) / 2) / parent.innerWidth / 3;
|
||||
const rotateX = (offsetTop + ($window.outerHeight() - parent.innerHeight) / 2) / parent.innerHeight / 3;
|
||||
$window.css({
|
||||
transform:
|
||||
`perspective(4000px) rotateY(${-(offsetLeft + ($window.outerWidth() - parent.innerWidth) / 2) / parent.innerWidth / 3
|
||||
}turn) rotateX(${(offsetTop + ($window.outerHeight() - parent.innerHeight) / 2) / parent.innerHeight / 3
|
||||
}turn)`,
|
||||
transform: `perspective(4000px) rotateY(${rotateY}turn) rotateX(${rotateX}turn)`,
|
||||
transformOrigin: "50% 50%",
|
||||
transformStyle: "preserve-3d",
|
||||
// @FIXME: interactivity problems (with order elements are considered to have), I think related to preserve-3d
|
||||
|
|
|
|||
Loading…
Reference in New Issue