smparkin/epoch-flip-clock-screensaver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

light/dark mode and update to WKWebView

Browse Source
This commit is contained in:
Stephen Parkinson
2023-01-24 22:07:55 -08:00
parent cfc75c2ce7
commit 1d7d7a0fc6
4 changed files with 208 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ConfigureSheet.xib
View File

@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="13771" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct"> <document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="21507" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
<dependencies> <dependencies>
<deployment identifier="macosx"/> <deployment identifier="macosx"/>
<plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="13771"/> <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="21507"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/> <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies> </dependencies>
<objects> <objects>
@@ -18,7 +18,7 @@
<windowStyleMask key="styleMask" titled="YES" closable="YES"/> <windowStyleMask key="styleMask" titled="YES" closable="YES"/>
<windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/> <windowPositionMask key="initialPositionMask" leftStrut="YES" rightStrut="YES" topStrut="YES" bottomStrut="YES"/>
<rect key="contentRect" x="196" y="240" width="320" height="102"/> <rect key="contentRect" x="196" y="240" width="320" height="102"/>
<rect key="screenRect" x="0.0" y="0.0" width="2560" height="1418"/> <rect key="screenRect" x="0.0" y="0.0" width="3440" height="1415"/>
<view key="contentView" wantsLayer="YES" id="EiT-Mj-1SZ"> <view key="contentView" wantsLayer="YES" id="EiT-Mj-1SZ">
<rect key="frame" x="0.0" y="0.0" width="320" height="102"/> <rect key="frame" x="0.0" y="0.0" width="320" height="102"/>
<autoresizingMask key="autoresizingMask"/> <autoresizingMask key="autoresizingMask"/>
@@ -77,7 +77,7 @@ Gw
</button> </button>
</subviews> </subviews>
</view> </view>
<point key="canvasLocation" x="34" y="50"/> <point key="canvasLocation" x="126" y="23"/>
</window> </window>
</objects> </objects>
</document> </document>

14
EpochFlipClock.m
View File

@@ -19,9 +19,11 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
// Webview // Webview
NSURL* indexHTMLDocumentURL = [NSURL URLWithString:[[[NSURL fileURLWithPath:[[NSBundle bundleForClass:self.class].resourcePath stringByAppendingString:@"/Webview/index.html"] isDirectory:NO] description] stringByAppendingFormat:@"?screensaver=1%@", self.isPreview ? @"&is_preview=1" : @""]]; NSURL* indexHTMLDocumentURL = [NSURL URLWithString:[[[NSURL fileURLWithPath:[[NSBundle bundleForClass:self.class].resourcePath stringByAppendingString:@"/Webview/index.html"] isDirectory:NO] description] stringByAppendingFormat:@"?screensaver=1%@", self.isPreview ? @"&is_preview=1" : @""]];
WebView* webView = [[WebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)]; WKWebView* webView = [[WKWebView alloc] initWithFrame:NSMakeRect(0, 0, frame.size.width, frame.size.height)];
webView.drawsBackground = NO; // Avoids a "white flash" just before the index.html file has loaded NSColor *color = [NSColor colorWithCalibratedWhite:0.0 alpha:1.0];
[webView.mainFrame loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]]; [[webView layer] setBackgroundColor:color.CGColor]; // hacky af but it works,
[webView setValue:@(YES) forKey:@"drawsTransparentBackground"]; // prevents a white flash while loading the web view
[webView loadRequest:[NSURLRequest requestWithURL:indexHTMLDocumentURL cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.0]];
// Show on screens based on preferences // Show on screens based on preferences
NSArray* screens = [NSScreen screens]; NSArray* screens = [NSScreen screens];
@@ -68,9 +70,11 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
ScreenSaverDefaults *defaults; ScreenSaverDefaults *defaults;
defaults = [ScreenSaverDefaults defaultsForModuleWithName:epochFlipClockModule]; defaults = [ScreenSaverDefaults defaultsForModuleWithName:epochFlipClockModule];
NSBundle* bundle = [NSBundle bundleForClass:[self class]];
if (!configSheet) if (!configSheet)
{ {
if (![NSBundle loadNibNamed:@"ConfigureSheet" owner:self]) if (![bundle loadNibNamed:@"ConfigureSheet" owner:self topLevelObjects:nil])
{ {
NSLog( @"Failed to load configure sheet." ); NSLog( @"Failed to load configure sheet." );
} }
@@ -104,7 +108,7 @@ static NSString * const epochFlipClockModule = @"com.epochflipclock";
#pragma mark - WebFrameLoadDelegate #pragma mark - WebFrameLoadDelegate
- (void)webView:(WebView *)sender didFailLoadWithError:(NSError *)error forFrame:(WebFrame *)frame { - (void)webView:(WKWebView *)sender didFailLoadWithError:(NSError *)error {
NSLog(@"%@ error=%@", NSStringFromSelector(_cmd), error); NSLog(@"%@ error=%@", NSStringFromSelector(_cmd), error);
} }

278
Webview/index.css
View File

@@ -3,16 +3,32 @@ html, body {
height: 100%; height: 100%;
} }
body { @media (prefers-color-scheme: dark) {
display: flex; body {
margin: 0; display: flex;
padding: 0; margin: 0;
font-family: '-apple-system', sans-serif; padding: 0;
align-items: center; font-family: '-apple-system', sans-serif;
justify-content: center; align-items: center;
background-color: black; justify-content: center;
perspective: 100vw; background-color: black;
-webkit-text-smoothing: anti-aliased; perspective: 100vw;
-webkit-text-smoothing: anti-aliased;
}
}
@media (prefers-color-scheme: light) {
body {
display: flex;
margin: 0;
padding: 0;
font-family: '-apple-system', sans-serif;
align-items: center;
justify-content: center;
background-color: white;
perspective: 100vw;
-webkit-text-smoothing: anti-aliased;
}
} }
digit { digit {
@@ -25,23 +41,46 @@ digit {
/* Flip Flaps /* Flip Flaps
------------------------------------------------*/ ------------------------------------------------*/
flap-top, @media (prefers-color-scheme: dark) {
flap-top-flip, flap-top,
flap-bottom, flap-top-flip,
flap-bottom-flip { flap-bottom,
box-sizing: border-box; flap-bottom-flip {
position: absolute; box-sizing: border-box;
display: flex; position: absolute;
width: 100%; display: flex;
height: 50%; width: 100%;
left: 0; height: 50%;
justify-content: center; left: 0;
overflow: hidden; justify-content: center;
color: #e1e1e1; overflow: hidden;
background-color: rgb(12,12,12); color: #e1e1e1;
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04); background-color: rgb(12,12,12);
-webkit-backface-visibility: hidden; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.04);
-webkit-backface-visibility: hidden;
}
} }
@media (prefers-color-scheme: light) {
flap-top,
flap-top-flip,
flap-bottom,
flap-bottom-flip {
box-sizing: border-box;
position: absolute;
display: flex;
width: 100%;
height: 50%;
left: 0;
justify-content: center;
overflow: hidden;
color: #323232;
background-color: rgb(200,200,200);
box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.04);
-webkit-backface-visibility: hidden;
}
}
flap-top, flap-top,
flap-top-flip { flap-top-flip {
top: 0; top: 0;
@@ -129,69 +168,140 @@ n {
/* Animations /* Animations
------------------------------------------------*/ ------------------------------------------------*/
@keyframes flip-top-down { @media (prefers-color-scheme: light) {
0% { @keyframes flip-top-down {
transform: rotateX(0); 0% {
} transform: rotateX(0);
100% { }
transform: rotateX(-90deg); 100% {
color: black; transform: rotateX(-90deg);
background-color: black; color: gray;
} background-color: gray;
} }
@keyframes flip-bottom-down { }
0% { @keyframes flip-bottom-down {
color: white; 0% {
background-color: rgb(30,30,30); color: black;
transform: rotateX(90deg); background-color: rgb(220,220,220);
} transform: rotateX(90deg);
100% { }
transform: rotateX(0deg); 100% {
} transform: rotateX(0deg);
}
}
@media screen and (min-width: 800px) {
@keyframes flip-top-down {
0% {
transform: translateY(-1px) rotateX(0);
}
100% {
transform: translateY(-1px) rotateX(-90deg);
color: gray;
background-color: gray;
}
}
@keyframes flip-bottom-down {
0% {
color: black;
background-color: rgb(220,220,220);
transform: translateY(1px) rotateX(90deg);
}
100% {
transform: translateY(1px) rotateX(0deg);
}
}
}
@media screen and (min-width: 1280px) {
@keyframes flip-top-down {
0% {
transform: translateY(-2px) rotateX(0);
}
100% {
transform: translateY(-2px) rotateX(-90deg);
color: gray;
background-color: gray;
}
}
@keyframes flip-bottom-down {
0% {
color: black;
background-color: rgb(220,220,220);
transform: translateY(2px) rotateX(90deg);
}
100% {
transform: translateY(2px) rotateX(0deg);
}
}
}
} }
@media screen and (min-width: 800px) { @media (prefers-color-scheme: dark) {
@keyframes flip-top-down { @keyframes flip-top-down {
0% { 0% {
transform: translateY(-1px) rotateX(0); transform: rotateX(0);
}
100% {
transform: rotateX(-90deg);
color: black;
background-color: black;
}
} }
100% { @keyframes flip-bottom-down {
transform: translateY(-1px) rotateX(-90deg); 0% {
color: black; color: white;
background-color: black; background-color: rgb(30,30,30);
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
} }
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(1px) rotateX(90deg);
}
100% {
transform: translateY(1px) rotateX(0deg);
}
}
}
@media screen and (min-width: 1280px) { @media screen and (min-width: 800px) {
@keyframes flip-top-down { @keyframes flip-top-down {
0% { 0% {
transform: translateY(-2px) rotateX(0); transform: translateY(-1px) rotateX(0);
}
100% {
transform: translateY(-1px) rotateX(-90deg);
color: black;
background-color: black;
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(1px) rotateX(90deg);
}
100% {
transform: translateY(1px) rotateX(0deg);
}
}
} }
100% {
transform: translateY(-2px) rotateX(-90deg); @media screen and (min-width: 1280px) {
color: black; @keyframes flip-top-down {
background-color: black; 0% {
transform: translateY(-2px) rotateX(0);
}
100% {
transform: translateY(-2px) rotateX(-90deg);
color: black;
background-color: black;
}
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(2px) rotateX(90deg);
}
100% {
transform: translateY(2px) rotateX(0deg);
}
}
} }
}
@keyframes flip-bottom-down {
0% {
color: white;
background-color: rgb(30,30,30);
transform: translateY(2px) rotateX(90deg);
}
100% {
transform: translateY(2px) rotateX(0deg);
}
}
} }

2
Webview/index.js
View File

@@ -45,7 +45,7 @@ function flipDigitTo(digit, currentVal, updatedVal, i) {
setTimeout(function() { setTimeout(function() {
bottomFlapNum.innerHTML = updatedVal; bottomFlapNum.innerHTML = updatedVal;
bottomFlapFlip.style.display = 'none'; bottomFlapFlip.style.display = 'none';
}, [10, 11, 12].includes(i) ? 45 : (10-i) * 450); }, [10, 11, 12].includes(i) ? 45 : (10-i) * 425);
digit.setAttribute('current-val', updatedVal); digit.setAttribute('current-val', updatedVal);
} }