17.01.2014: download, FileAPI.saveAs, b-shortcut.js, jQuery.event.tap.js

Как сохранить файл на компьютер?

				<a href="/api/download/uniqId"></a>

				
					Content-Description: File Transfer
					Content-Type: image/png
					Content-Disposition: attachment; filename=image.png
				
				Content-Transfer-Encoding: binary
				
					Expires: 0
					Cache-Control: must-revalidate
					Pragma: public

<a download />

При наличии атрибута download браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки.

И даже лучше! Можно сразу задать имя:

					<a download="image" href="/files/uniqId.png" />

IE10+: navigator.msSaveBlob

Позволяет пользователю сохранять файлы на клиенте так же, как при скачивании из Интернета.

				var blobObject = new Blob(["Hello blob"]);
				navigator.msSaveBlob(blobObject, "msSaveBlob.txt");
				// Это круто господа!

				function saveAs(blob, file) {
				   if (navigator.msSaveBlob) {
				      #! navigator.msSaveBlob(blob, file);
				   } else {
					  #!+ var a = docuemnt.createElement("a");
					  a.href = URL.createObjectURL(blob);
					  a.download = file;
					  #!- a.click();
				   }
				}

FileAPI: 2.1.0 (dev)

				FileAPI.saveAs(file, "image.png").fail(function () {
				    // ..
				});
				#!+ // и ещё
				FileAPI.upload("/ctrl/", files, { paralle: 3 })
				   .progress(function (evt) {  })
				   .success(function (xhr) {  })
				   .fail(function (err) {  })
				#!- ;

Shortcuts

Но как?

<a accesskey="s"/>

Позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой.

И оно работает

IE: alt + s
FF: shift + alt + s
Chrome: alt + s
Opera: shift + esc, s

Мда…

b-shortcut.js

Декларативность
Активны только те shortcut, которые «видны»

				<div data-shortcut="ctrl+up"/>

b-shortcut.js

				<div class="js-shortcut" data-shortcut="ctrl+up"/>

				var shortcuts = document.getElementsByClassName(".js-shortcut");
				document.onkeydown = function (evt) {
				   var i = shortcuts.length;
				   while (i--) {
				      // ...
				   }
				};

Touch vs. Click

Проблемы:

~250ms задержка перед click
Проверка не дает 100% гарантии наличия touch событий
Пользователь может одновременно использовать разные устройтсва ввода (mouse/touch)

Google Fast Buttons

Обработчик вешается на touch и click
Если срабатывает touch, то убиваем click

Подробнее

Основная идея реализации GFB

Вешаем два обработчика touchstart и click
На touchstart запоминаем координаты и вешаем touchend
На touchend проверяем разницу координат, есть они меньше определенной дельты, вызываем обработчик события. Кроме этого, добавляем координаты в массив.
Помимо этого, на document висит глобальный обработчик click на фазе погружения и если разница координат меньше определенной дельты, событие подавляется.

jQuery.event.tap (gist)

			$("#btn").on("tap", function (evt) {
			   // Обязательно вызываем, чтобы
			   // остановить последущий вызов click.
			   evt.preventDefault();
			   // ...
			});

The End

github.com/RubaXa
@ibnRubaXa