From e4139fc73856f41772ad04e0188b7025a9b93c19 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 22 Apr 2015 21:31:55 -0500 Subject: [PATCH] tab focusing --- src/components/app/util.scss | 27 +++++++++++++++ src/components/item/test/accessories/main.js | 2 +- src/components/item/test/basic/main.js | 2 +- .../test/basic/pages/first-page.js | 3 +- .../test/settings/groups/general.js | 2 +- .../test/settings/groups/privacy.js | 2 +- src/components/tabs/test/advanced/main.js | 3 +- .../tabs/test/advanced/pages/sign-in.html | 4 +++ .../tabs/test/advanced/pages/sign-in.js | 2 +- .../tabs/test/advanced/pages/tabs.js | 4 +-- src/components/tabs/test/basic/main.js | 2 +- .../tabs/test/tab-bar-bottom/main.js | 2 +- src/components/tabs/test/tab-bar-top/main.js | 2 +- src/ionic2.js | 1 + src/util/focus.js | 34 +++++++++++++++++++ 15 files changed, 79 insertions(+), 13 deletions(-) create mode 100644 src/util/focus.js diff --git a/src/components/app/util.scss b/src/components/app/util.scss index b36965d8eb..eb81b20791 100644 --- a/src/components/app/util.scss +++ b/src/components/app/util.scss @@ -38,3 +38,30 @@ $content-padding: 10px !default; .padding-horizontal { padding-left: $content-padding; } + + +// Focus Outline +// -------------------------------------------------- +// When a keydown event happens then .key-input is added +// to the body element so focusable elements have an outline. +// On a mousedown or touchstart event the .key-input class +// is removed + +:focus, +:active { + outline: none; +} + +.key-input { + + :focus { + outline-offset: -1px; + outline: thin dotted; + } + + .button:focus { + outline-offset: -2px; + outline: 2px solid red; + } + +} diff --git a/src/components/item/test/accessories/main.js b/src/components/item/test/accessories/main.js index 7337888590..d7101bb3ad 100644 --- a/src/components/item/test/accessories/main.js +++ b/src/components/item/test/accessories/main.js @@ -1,6 +1,6 @@ import {bootstrap} from 'angular2/core' import {Component, Template, For} from 'angular2/angular2' -import {Item, View, List} from 'ionic2/components' +import {Item, View, List} from 'ionic2/ionic2' import {ItemPrimarySwipeButtons} from 'ionic2/components/item/item-swipe-buttons' diff --git a/src/components/item/test/basic/main.js b/src/components/item/test/basic/main.js index 7337888590..d7101bb3ad 100644 --- a/src/components/item/test/basic/main.js +++ b/src/components/item/test/basic/main.js @@ -1,6 +1,6 @@ import {bootstrap} from 'angular2/core' import {Component, Template, For} from 'angular2/angular2' -import {Item, View, List} from 'ionic2/components' +import {Item, View, List} from 'ionic2/ionic2' import {ItemPrimarySwipeButtons} from 'ionic2/components/item/item-swipe-buttons' diff --git a/src/components/nav-viewport/test/basic/pages/first-page.js b/src/components/nav-viewport/test/basic/pages/first-page.js index c6af15e970..184f1dcae6 100644 --- a/src/components/nav-viewport/test/basic/pages/first-page.js +++ b/src/components/nav-viewport/test/basic/pages/first-page.js @@ -1,6 +1,5 @@ import {Component, Template, Parent} from 'angular2/angular2' -import {NavViewport} from 'ionic2/components' -import {View} from 'ionic2/components/view/view' +import {NavViewport, View} from 'ionic2/ionic2' import {SecondPage} from 'app/pages/second-page' @Component({ diff --git a/src/components/split-view/test/settings/groups/general.js b/src/components/split-view/test/settings/groups/general.js index 11c2a24b32..153d027b83 100644 --- a/src/components/split-view/test/settings/groups/general.js +++ b/src/components/split-view/test/settings/groups/general.js @@ -1,5 +1,5 @@ import {Component, Template} from 'angular2/angular2' -import {View} from 'ionic2/components' +import {View} from 'ionic2/ionic2' @Component({ selector: 'settings-general' diff --git a/src/components/split-view/test/settings/groups/privacy.js b/src/components/split-view/test/settings/groups/privacy.js index e918bdd688..0da4141517 100644 --- a/src/components/split-view/test/settings/groups/privacy.js +++ b/src/components/split-view/test/settings/groups/privacy.js @@ -1,5 +1,5 @@ import {Component, Template} from 'angular2/angular2' -import {View, NavPane} from 'ionic2/components' +import {View, NavPane} from 'ionic2/ionic2' @Component({ selector: 'privacy-settings' }) @Template({ diff --git a/src/components/tabs/test/advanced/main.js b/src/components/tabs/test/advanced/main.js index 46ccf1d2c2..79e1f3af07 100644 --- a/src/components/tabs/test/advanced/main.js +++ b/src/components/tabs/test/advanced/main.js @@ -1,7 +1,8 @@ import {Component, Template, bootstrap} from 'angular2/angular2' -import {NavViewport, Aside} from 'ionic2/components' +import {NavViewport, Aside} from 'ionic2/ionic2' import {SignInPage} from 'app/pages/sign-in' + @Component({ selector: '[ion-app]', }) diff --git a/src/components/tabs/test/advanced/pages/sign-in.html b/src/components/tabs/test/advanced/pages/sign-in.html index 5063540f1d..300551d280 100644 --- a/src/components/tabs/test/advanced/pages/sign-in.html +++ b/src/components/tabs/test/advanced/pages/sign-in.html @@ -17,6 +17,10 @@

+

+ +

+ diff --git a/src/components/tabs/test/advanced/pages/sign-in.js b/src/components/tabs/test/advanced/pages/sign-in.js index 1122c67bf0..0af829d9ee 100644 --- a/src/components/tabs/test/advanced/pages/sign-in.js +++ b/src/components/tabs/test/advanced/pages/sign-in.js @@ -1,5 +1,5 @@ import {Component, Template} from 'angular2/angular2' -import {View, NavPane, Content} from 'ionic2/components' +import {View, NavPane, Content} from 'ionic2/ionic2' import {TabsPage} from 'app/pages/tabs' @Component({ diff --git a/src/components/tabs/test/advanced/pages/tabs.js b/src/components/tabs/test/advanced/pages/tabs.js index 8817352764..c7c64e5c16 100644 --- a/src/components/tabs/test/advanced/pages/tabs.js +++ b/src/components/tabs/test/advanced/pages/tabs.js @@ -1,6 +1,6 @@ import {Component, Template, Parent} from 'angular2/angular2' -import {View, Tabs, Tab, Aside, Content} from 'ionic2/components' -import {NavPane} from 'ionic2/components' +import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic2/ionic2' + @Component({ selector: 'tabs-page' diff --git a/src/components/tabs/test/basic/main.js b/src/components/tabs/test/basic/main.js index 4fc7e9438b..49678f9e25 100644 --- a/src/components/tabs/test/basic/main.js +++ b/src/components/tabs/test/basic/main.js @@ -1,6 +1,6 @@ import {bootstrap} from 'angular2/core' import {Component, Template} from 'angular2/angular2' -import {View, Tabs, Tab} from 'ionic2/components' +import {View, Tabs, Tab} from 'ionic2/ionic2' import {webview} from 'ionic2/webview/webview' import {cordova} from 'ionic2/webview/cordova/cordova' import {nodeWebkit} from 'ionic2/webview/node-webkit/node-webkit' diff --git a/src/components/tabs/test/tab-bar-bottom/main.js b/src/components/tabs/test/tab-bar-bottom/main.js index 7e020f891a..017398bab0 100644 --- a/src/components/tabs/test/tab-bar-bottom/main.js +++ b/src/components/tabs/test/tab-bar-bottom/main.js @@ -1,6 +1,6 @@ import {bootstrap} from 'angular2/core'; import {Component, Template} from 'angular2/angular2'; -import {View, Tabs, Tab} from 'ionic2/components'; +import {View, Tabs, Tab} from 'ionic2/ionic2'; @Component({ selector: '[ion-app]' }) diff --git a/src/components/tabs/test/tab-bar-top/main.js b/src/components/tabs/test/tab-bar-top/main.js index 7e020f891a..017398bab0 100644 --- a/src/components/tabs/test/tab-bar-top/main.js +++ b/src/components/tabs/test/tab-bar-top/main.js @@ -1,6 +1,6 @@ import {bootstrap} from 'angular2/core'; import {Component, Template} from 'angular2/angular2'; -import {View, Tabs, Tab} from 'ionic2/components'; +import {View, Tabs, Tab} from 'ionic2/ionic2'; @Component({ selector: '[ion-app]' }) diff --git a/src/ionic2.js b/src/ionic2.js index bfb4ea612a..ea940844ae 100644 --- a/src/ionic2.js +++ b/src/ionic2.js @@ -4,3 +4,4 @@ export * from 'ionic2/platform/platform' export * from 'ionic2/webview/webview' export * from 'ionic2/webview/cordova/cordova' export * from 'ionic2/webview/node-webkit/node-webkit' +export * from 'ionic2/util/focus' diff --git a/src/util/focus.js b/src/util/focus.js new file mode 100644 index 0000000000..3854d1d74e --- /dev/null +++ b/src/util/focus.js @@ -0,0 +1,34 @@ +import {dom} from 'ionic2/util' + + +let isKeyInputEnabled = false + +function keyDown() { + if (!isKeyInputEnabled) { + isKeyInputEnabled = true + dom.raf(enableKeyInput) + } +} +dom.ready().then(function() { + document.addEventListener('keydown', keyDown) +}) + + +function enableKeyInput() { + document.body.classList[isKeyInputEnabled ? 'add' : 'remove']('key-input') + + if (isKeyInputEnabled) { + document.addEventListener('mousedown', pointerDown) + document.addEventListener('touchstart', pointerDown) + + } else { + document.removeEventListener('mousedown', pointerDown) + document.removeEventListener('touchstart', pointerDown) + } +} + +function pointerDown() { + isKeyInputEnabled = false + dom.raf(enableKeyInput) +} +