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

Break webview into sane files

Browse Source
This commit is contained in:
Christopher Newton
2018-02-24 18:28:23 +01:00
parent 45c8f4673f
commit 751a150392
5 changed files with 102 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Epoch Flip Clock.xcodeproj/project.pbxproj
View File

@@ -9,8 +9,8 @@
/* Begin PBXBuildFile section */
3A40066E18B53113005F43A6 /* ScreenSaver.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3A40066D18B53113005F43A6 /* ScreenSaver.framework */; };
3A40068318B53129005F43A6 /* WebKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3A40068218B53129005F43A6 /* WebKit.framework */; };
7713E3931C961B5D009075D4 /* index.html in Resources */ = {isa = PBXBuildFile; fileRef = 7713E3921C961B5D009075D4 /* index.html */; };
77996CD91C94B825006B0FF7 /* EpochFlipClock.m in Sources */ = {isa = PBXBuildFile; fileRef = 77996CD81C94B825006B0FF7 /* EpochFlipClock.m */; };
77AD4D2D2041D6A9001100EC /* Webview in Resources */ = {isa = PBXBuildFile; fileRef = 77AD4D2C2041D6A9001100EC /* Webview */; };
/* End PBXBuildFile section */
/* Begin PBXFileReference section */
@@ -18,9 +18,9 @@
3A40066D18B53113005F43A6 /* ScreenSaver.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = ScreenSaver.framework; path = System/Library/Frameworks/ScreenSaver.framework; sourceTree = SDKROOT; };
3A40068218B53129005F43A6 /* WebKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = WebKit.framework; path = System/Library/Frameworks/WebKit.framework; sourceTree = SDKROOT; };
3A95A94B18EA12D30036779C /* EpochFlipClock.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = EpochFlipClock.h; sourceTree = SOURCE_ROOT; };
7713E3921C961B5D009075D4 /* index.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = index.html; sourceTree = SOURCE_ROOT; };
77996CD61C94B804006B0FF7 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = SOURCE_ROOT; };
77996CD81C94B825006B0FF7 /* EpochFlipClock.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = EpochFlipClock.m; sourceTree = SOURCE_ROOT; };
77AD4D2C2041D6A9001100EC /* Webview */ = {isa = PBXFileReference; lastKnownFileType = folder; path = Webview; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@@ -65,7 +65,7 @@
3A40067318B53113005F43A6 /* Source */ = {
isa = PBXGroup;
children = (
7713E3921C961B5D009075D4 /* index.html */,
77AD4D2C2041D6A9001100EC /* Webview */,
3A95A94B18EA12D30036779C /* EpochFlipClock.h */,
77996CD81C94B825006B0FF7 /* EpochFlipClock.m */,
77996CD61C94B804006B0FF7 /* Info.plist */,
@@ -141,7 +141,7 @@
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
7713E3931C961B5D009075D4 /* index.html in Resources */,
77AD4D2D2041D6A9001100EC /* Webview in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};

2
EpochFlipClock.m
View File

@@ -6,7 +6,7 @@
- (id)initWithFrame:(NSRect)frame isPreview:(BOOL)isPreview {
if (!(self = [super initWithFrame:frame isPreview:isPreview])) return nil;
NSURL* indexHTMLDocumentURL = [NSURL URLWithString:[[[NSURL fileURLWithPath:[[NSBundle bundleForClass:self.class].resourcePath stringByAppendingString:@"/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)];
webView.drawsBackground = NO; // Avoids a "white flash" just before the index.html file has loaded

109
index.html → Webview/index.css Executable file → Normal file
View File

@@ -1,9 +1,3 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<style>
html, body {
width: 100%;
height: 100%;
@@ -201,106 +195,3 @@ n {
}
}
}
</style>
</head>
<body>
<script>
(function() {
'use strict';
var digits = [];
function getEpoch() {
return Date.now().toString().slice(0,-3);
}
function createDigit() {
var digit = document.createElement('digit');
digit.innerHTML = '\
<flap-top> <n></n> </flap-top>\
<flap-top-flip> <n></n> </flap-top-flip>\
<flap-bottom> <n></n> </flap-bottom>\
<flap-bottom-flip> <n></n> </flap-bottom-flip>';
return digit;
}
function flipDigitTo(digit, currentVal, updatedVal) {
var topFlapNum = digit.querySelector('flap-top > n'),
topFlapFlip = digit.querySelector('flap-top-flip'),
topFlapFlipNum = topFlapFlip.querySelector('n'),
bottomFlapNum = digit.querySelector('flap-bottom > n'),
bottomFlapFlip = digit.querySelector('flap-bottom-flip'),
bottomFlapFlipNum = bottomFlapFlip.querySelector('n');
topFlapNum.innerHTML = updatedVal;
bottomFlapNum.innerHTML = currentVal;
topFlapFlipNum.innerHTML = currentVal;
topFlapFlip.style.display = 'block';
setTimeout(function() {
topFlapFlip.style.display = 'none';
}, 300);
setTimeout(function() {
bottomFlapFlipNum.innerHTML = updatedVal;
bottomFlapFlip.style.display = 'block';
}, 300);
setTimeout(function() {
bottomFlapNum.innerHTML = updatedVal;
bottomFlapFlip.style.display = 'none';
}, 450);
digit.setAttribute('current-val', updatedVal);
}
function updateClock() {
var epoch = getEpoch(),
staggerDelay,
currentVal,
updatedVal,
i;
for (i = 0; i < epoch.length; i+=1) {
if(i === epoch.length-1) {
staggerDelay = 0;
} else {
staggerDelay = Math.random() * 400;
}
currentVal = digits[i].getAttribute('current-val');
updatedVal = epoch[i];
if(currentVal !== updatedVal) {
setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
}
}
}
function setupClock() {
var epoch = getEpoch(),
staggerDelay,
digit,
i;
for (i = 0; i < epoch.length; i+=1) {
digit = createDigit();
staggerDelay = Math.random() * 400;
document.body.appendChild(digit);
setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
}
digits = document.querySelectorAll('digit');
}
setupClock();
setInterval(updateClock, 1000);
}());
</script>
</body>
</html>

10
Webview/index.html Executable file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel='stylesheet' href='index.css'>
</head>
<body>
<script src='index.js'></script>
</body>
</html>

87
Webview/index.js Normal file
View File

@@ -0,0 +1,87 @@
'use strict';
var digits = [];
function getEpoch() {
return Date.now().toString().slice(0,-3);
}
function createDigit() {
var digit = document.createElement('digit');
digit.innerHTML = '\
<flap-top> <n></n> </flap-top>\
<flap-top-flip> <n></n> </flap-top-flip>\
<flap-bottom> <n></n> </flap-bottom>\
<flap-bottom-flip> <n></n> </flap-bottom-flip>';
return digit;
}
function flipDigitTo(digit, currentVal, updatedVal) {
var topFlapNum = digit.querySelector('flap-top > n'),
topFlapFlip = digit.querySelector('flap-top-flip'),
topFlapFlipNum = topFlapFlip.querySelector('n'),
bottomFlapNum = digit.querySelector('flap-bottom > n'),
bottomFlapFlip = digit.querySelector('flap-bottom-flip'),
bottomFlapFlipNum = bottomFlapFlip.querySelector('n');
topFlapNum.innerHTML = updatedVal;
bottomFlapNum.innerHTML = currentVal;
topFlapFlipNum.innerHTML = currentVal;
topFlapFlip.style.display = 'block';
setTimeout(function() {
topFlapFlip.style.display = 'none';
}, 300);
setTimeout(function() {
bottomFlapFlipNum.innerHTML = updatedVal;
bottomFlapFlip.style.display = 'block';
}, 300);
setTimeout(function() {
bottomFlapNum.innerHTML = updatedVal;
bottomFlapFlip.style.display = 'none';
}, 450);
digit.setAttribute('current-val', updatedVal);
}
function updateClock() {
var epoch = getEpoch(),
staggerDelay,
currentVal,
updatedVal,
i;
for (i = 0; i < epoch.length; i+=1) {
if(i === epoch.length-1) {
staggerDelay = 0;
} else {
staggerDelay = Math.random() * 400;
}
currentVal = digits[i].getAttribute('current-val');
updatedVal = epoch[i];
if(currentVal !== updatedVal) {
setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
}
}
}
function setupClock() {
var epoch = getEpoch(),
staggerDelay,
digit,
i;
for (i = 0; i < epoch.length; i+=1) {
digit = createDigit();
staggerDelay = Math.random() * 400;
document.body.appendChild(digit);
setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
}
digits = document.querySelectorAll('digit');
}
setupClock();
setInterval(updateClock, 1000);