Share and Enjoy!

.gitignore

@@ -0,0 +1,6 @@
+# rake standalone
+standalone/flying-focus.js
+
+# rake safari
+FlyingFocus.safariextension/flying-focus.css
+FlyingFocus.safariextension/flying-focus.js

FlyingFocus.safariextension/Info.plist

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>Author</key>
+	<string>Nikita Vasilyev</string>
+	<key>Builder Version</key>
+	<string>9537.66</string>
+	<key>CFBundleDisplayName</key>
+	<string>Flying Focus</string>
+	<key>CFBundleIdentifier</key>
+	<string>com.n12v.flying-focus</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleVersion</key>
+	<string>1.0</string>
+	<key>Chrome</key>
+	<dict/>
+	<key>Content</key>
+	<dict>
+		<key>Scripts</key>
+		<dict>
+			<key>End</key>
+			<array>
+				<string>flying-focus.js</string>
+			</array>
+		</dict>
+		<key>Stylesheets</key>
+		<array>
+			<string>flying-focus.css</string>
+		</array>
+	</dict>
+	<key>Description</key>
+	<string>Smooth focus transition</string>
+	<key>ExtensionInfoDictionaryVersion</key>
+	<string>1.0</string>
+	<key>Permissions</key>
+	<dict>
+		<key>Website Access</key>
+		<dict>
+			<key>Include Secure Pages</key>
+			<true/>
+			<key>Level</key>
+			<string>All</string>
+		</dict>
+	</dict>
+	<key>Update Manifest URL</key>
+	<string>http://n12v.com/focus-transition/update.plist</string>
+	<key>Website</key>
+	<string>http://n12v.com/focus-transition/</string>
+</dict>
+</plist>

MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) Nikita Vasilyev
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.markdown

@@ -0,0 +1,22 @@
+# [Focus Transition](http://n12v.com/focus-transition/)
+
+![Flying Focus icon](http://nv.github.io/flying-focus/chrome/icon_128.png)
+
+Flying Focus is a UI concept.
+
+# How to build
+
+## A single-file library
+
+Create a flying-focus.js that can be included to any web page.
+It includes all necessary CSS and has no external dependencies.
+
+    rake standalone
+
+## Safari extension
+
+    rake safari
+
+## Chrome extension
+
+No build step required. Just load it as an unpacked extension from `chrome/`.

Rakefile

@@ -0,0 +1,28 @@
+task :default => [:safari, :standalone]
+
+desc 'Build standalone file'
+task :standalone => ['chrome/flying-focus.js', 'chrome/flying-focus.css'] do
+  require 'jspp'
+  File.open('standalone/flying-focus.js', 'w') { |file|
+    text = JSPP('standalone/flying-focus.jspp.js')
+    file.write(text)
+  }
+  puts 'standalone/flying-focus.js'
+end
+
+
+desc 'Build Safari extension to ./FlyingFocus.safariextension/'
+task :safari => ['chrome/flying-focus.js', 'chrome/flying-focus.css'] do
+  cp_r ['chrome/flying-focus.js', 'chrome/flying-focus.css'], 'FlyingFocus.safariextension'
+  puts 'FlyingFocus.safariextension'
+end
+
+#FIXME
+#task :firefox do
+#
+#end
+
+#FIXME
+#task :ie do
+#
+#end

chrome/flying-focus.css

@@ -0,0 +1,28 @@
+#flying-focus {
+	position: absolute;
+	margin: 0;
+	background: transparent;
+	-webkit-transition-property: left, top, width, height, opacity;
+	transition-property: left, top, width, height, opacity;
+	-webkit-transition-timing-function: cubic-bezier(0, 0.2, 0, 1);
+	transition-timing-function: cubic-bezier(0, 0.2, 0, 1);
+	visibility: hidden;
+	pointer-events: none;
+	box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset; border-radius: 2px;
+}
+#flying-focus.flying-focus_visible {
+	visibility: visible;
+	z-index: 9999;
+}
+.flying-focus_target {
+	outline: none !important; /* Doens't work in Firefox :( */
+}
+
+/* Replace it with @supports rule when browsers catch up */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+	#flying-focus {
+		box-shadow: none;
+		outline: 5px auto -webkit-focus-ring-color;
+		outline-offset: -3px;
+	}
+}

chrome/flying-focus.js

@@ -0,0 +1,70 @@
+var flyingFocus = document.createElement('flying-focus'); // use uniq element name to decrease the chances of a conflict with website styles
+flyingFocus.id = 'flying-focus';
+document.body.appendChild(flyingFocus);
+
+var DURATION = 100;
+flyingFocus.style.transitionDuration = flyingFocus.style.WebkitTransitionDuration = DURATION / 1000 + 's';
+
+function offsetOf(elem) {
+	var rect = elem.getBoundingClientRect();
+	var docElem = document.documentElement;
+	var win = document.defaultView;
+	var body = document.body;
+
+	var clientTop  = docElem.clientTop  || body.clientTop  || 0,
+		clientLeft = docElem.clientLeft || body.clientLeft || 0,
+		scrollTop  = win.pageYOffset || docElem.scrollTop  || body.scrollTop,
+		scrollLeft = win.pageXOffset || docElem.scrollLeft || body.scrollLeft,
+		top  = rect.top  + scrollTop  - clientTop,
+		left = rect.left + scrollLeft - clientLeft;
+
+	return {top: top, left: left};
+}
+
+var movingId = 0;
+
+var prevFocused;
+
+document.documentElement.addEventListener('focus', function(event) {
+	var target = event.target;
+	if (target.id === 'flying-focus') {
+		return;
+	}
+	var offset = offsetOf(target);
+	flyingFocus.style.left = offset.left + 'px';
+	flyingFocus.style.top = offset.top + 'px';
+	flyingFocus.style.width = target.offsetWidth + 'px';
+	flyingFocus.style.height = target.offsetHeight + 'px';
+
+	// Would be nice to use:
+	//
+	//   flyingFocus.style['outline-offset'] = getComputedStyle(target, null)['outline-offset']
+	//
+	// but it always '0px' in WebKit and Blink for some reason :(
+
+	if (prevFocused) {
+		target.classList.add('flying-focus_target');
+		show();
+		if (movingId) {
+			clearTimeout(movingId);
+		}
+		movingId = setTimeout(function() {
+			target.classList.remove('flying-focus_target');
+			hide();
+		}, DURATION);
+	}
+	prevFocused = target;
+}, true);
+
+document.documentElement.addEventListener('blur', function() {
+	hide();
+}, true);
+
+
+function hide() {
+	flyingFocus.classList.remove('flying-focus_visible');
+}
+
+function show() {
+	flyingFocus.classList.add('flying-focus_visible');
+}

chrome/manifest.json

@@ -0,0 +1,17 @@
+{
+	"manifest_version": 2,
+	"name": "Flying Focus",
+	"version": "1.0",
+	"description": "Smooth focus transition",
+	"content_scripts": [
+		{
+			"js": ["flying-focus.js"],
+			"css": ["flying-focus.css"],
+			"matches": [
+				"<all_urls>"
+			]
+		}
+	],
+	"author": "Nikita Vasilyev",
+	"homepage_url": "http://n12v.com/focus-transition/"
+}

standalone/flying-focus.jspp.js

@@ -0,0 +1,11 @@
+(function() {
+
+if (document.getElementById('flying-focus')) return;
+
+/*> ../chrome/flying-focus.js */
+
+var style = document.createElement('style');
+style.textContent = "/*> ../chrome/flying-focus.css */";
+document.body.appendChild(style);
+
+})();