diff --git a/Epoch Flip Clock.xcodeproj/project.pbxproj b/Epoch Flip Clock.xcodeproj/project.pbxproj index 7a0aed1..20b6cdf 100755 --- a/Epoch Flip Clock.xcodeproj/project.pbxproj +++ b/Epoch Flip Clock.xcodeproj/project.pbxproj @@ -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 = ""; }; /* 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; }; diff --git a/EpochFlipClock.m b/EpochFlipClock.m index 6be5dfd..7e08598 100755 --- a/EpochFlipClock.m +++ b/EpochFlipClock.m @@ -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 diff --git a/index.html b/Webview/index.css old mode 100755 new mode 100644 similarity index 59% rename from index.html rename to Webview/index.css index 4c6d7f7..9d5e918 --- a/index.html +++ b/Webview/index.css @@ -1,9 +1,3 @@ - - - - - - - - - - diff --git a/Webview/index.html b/Webview/index.html new file mode 100755 index 0000000..4e4812d --- /dev/null +++ b/Webview/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Webview/index.js b/Webview/index.js new file mode 100644 index 0000000..dcce152 --- /dev/null +++ b/Webview/index.js @@ -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 = '\ + \ + \ + \ + '; + 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);