Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

shift-e enables navigation, shift-d disables navigation, the first li…

…nk in the child receives focusand hence on enter navigates to the link
  • Loading branch information...
commit e94dc653b7efea692713730cb74bf7bdb61cca56 1 parent cc27817
@chetanankola authored
View
9 build/gallery-navigate-easy/assets/index.css
@@ -153,6 +153,15 @@ text-shadow: 0px 1px 0 #eee;
font-weight:strong !important;
box-shadow:0 1px 7px rgba(0,0,0,.4) !important;
}
+
+a {
+ outline:0
+}
+
+a:hover,a:focus,a:active {
+ outline:#777 dotted 2px;
+}
+
.bright {
margin:20px 4% auto;
position:relative;
View
106 build/gallery-navigate-easy/gallery-navigate-easy-debug.js
@@ -10,6 +10,8 @@ YUI.add('gallery-navigate-easy', function(Y) {
/*CONSTANTS*/
var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
+ KEY_TO_DISABLE_NAVIGATION = 'down:68+shift',
+ KEY_TO_ENABLE_NAVIGATION = 'down:69+shift',
_NEXT = true,
_PREV = false,
_CHILD_HIGHLIGHT_CLASS = 'transhighlight',
@@ -48,17 +50,10 @@ Nav.NAME = "Navigation";
*/
Nav.ATTRS = {
- /*node: {
- setter: function(node) {
- var n = Y.one(node);
- if (!n) {
- Y.log('Invalid Node Given in initialization ' + node);
- }
- return n;
- }
- },*/
activeRegistryIndex:{value:null},
+
registry:[]
+
};
@@ -82,10 +77,16 @@ Y.extend(Nav, Y.Base, {
* - childIndexInFocus: Integer, that indicates the current index selected for the navigable container.
*/
container:{
+
node:null, /*DOM elem*/
+
containerId:null, /*String*/
+
children:[], /*array type*/
- childIndexInFocus:-1/* if there are 10 div elements in navigable container then this variable holds the index of the one in focus*/
+
+ childIndexInFocus:-1,/* if there are 10 div elements in navigable container then this variable holds the index of the one in focus*/
+
+ activeLink : null /*holds the current link within a child of the container which is receiving focus*/
},
@@ -109,26 +110,67 @@ Y.extend(Nav, Y.Base, {
initializer: function(cfg){
var self = this;
+ this.activateContainerNavigation();
+
+ this.makeNextContainerNavigable();
+
+ Y.one('body').on("key", function(e) {
+ Y.log("============================");
+ Y.log('Navigation disabled');
+ self.deactivateAllNavigation();
+ },KEY_TO_DISABLE_NAVIGATION);
+
Y.one('body').on("key", function(e) {
Y.log("============================");
+ Y.log('Navigation enabled');
+ if(self.activateContainerNavigation()){
+ self.makeNextContainerNavigable(_NEXT);
+ }
+ },KEY_TO_ENABLE_NAVIGATION);
+ },
+
+
+ activateContainerNavigation:function(){
+ var self = this;
+ if(Y.ContainerSubscr){
+ Y.log('Container navigation is already enabled');
+ return false;
+ }else{
+ Y.ContainerSubscr = {};
+ }
+
+ Y.ContainerSubscr.next = Y.one('body').on("key", function(e) {
+ Y.log("============================");
Y.log('Shift+RightArrow was pressed');
self.makeNextContainerNavigable(_NEXT);
},SHIFT_RIGHT_ARROW);
- Y.one('body').on("key", function(e) {
+ Y.ContainerSubscr.prev = Y.one('body').on("key", function(e) {
Y.log("============================");
Y.log('Shift+Left was pressed');
self.makeNextContainerNavigable(_PREV);
},SHIFT_LEFT_ARROW);
- this.makeNextContainerNavigable();
+ return true;
},
+ deactivateAllNavigation:function(){
+ this.deactivateRegisteredContainer(); //will also disable child events
+ this.deactivateContainerNavigation();
+ },
+ deactivateContainerNavigation:function(){
+ if(Y.ContainerSubscr){
+ Y.log("detaching subscriptions to navigate across container");
-
-
+ for(var subscription in Y.ContainerSubscr){
+ Y.log('detaching subscription:'+subscription);
+ Y.ContainerSubscr[subscription].detach();
+ }
+ delete Y.ContainerSubscr;
+ }
+ },
@@ -145,8 +187,11 @@ Y.extend(Nav, Y.Base, {
* @return {Mixed} The sanitized transition.
*/
makeNextContainerNavigable:function(shiftRight){
+
var registry = this.get('registry'),
+
index;
+
if(registry.length>0){
index = this.getNextRegistryIndex(shiftRight);
if(index!== null && registry[index]){
@@ -187,8 +232,11 @@ Y.extend(Nav, Y.Base, {
* @return {integer} valid registered container index
*/
getNextRegistryIndex:function(isRightKeyPressed) {
+
var registry = this.get('registry'),
+
regLen,
+
regIndex=null;
if(registry && registry.length>0) { //if no registry exists then nothing was registered
@@ -326,7 +374,7 @@ Y.extend(Nav, Y.Base, {
*
*/
deactivateRegisteredContainer:function(){
- this.killAllSubscription();
+ this.killAllChildNavigationSubscription();
this.removeHighlightonContainer();
this.removeHighlightonCurrentChild();
this.resetContainer();
@@ -434,15 +482,15 @@ Y.extend(Nav, Y.Base, {
/**
- * @method killAllSubscription
+ * @method killAllChildNavigationSubscription
* @protected
* Detach all the subscriptions to the body
* @param
*
*/
- killAllSubscription:function() {
+ killAllChildNavigationSubscription:function() {
if(Y.BodySubscr){
- this.detachAllSubscriptions();
+ this.detachAllChildSubscriptions();
}
},
@@ -468,7 +516,7 @@ Y.extend(Nav, Y.Base, {
/** on KeyDown **/
Y.BodySubscr = {};
- Y.log('attaching new subscription');
+ Y.log('attaching new subscription for child navigation');
Y.BodySubscr.keydown = Y.one('body').on('down',Y.bind(this.onMyKeyDown,this));
/** ON KeyUp **/
Y.BodySubscr.keyup = Y.one('body').on('up',Y.bind(this.onMyKeyUp,this));
@@ -486,14 +534,14 @@ Y.extend(Nav, Y.Base, {
/**
- * @method detachAllSubscriptions
+ * @method detachAllChildSubscriptions
* @protected
* Function to detach navigation and all events on the body key events
*
* @param none
*
*/
- detachAllSubscriptions: function() {
+ detachAllChildSubscriptions: function() {
Y.log("detaching existing subscriptions");
for(var subscription in Y.BodySubscr){
@@ -753,11 +801,22 @@ Y.extend(Nav, Y.Base, {
*/
bringChildtoFocus:function(childInFocus){
- var link = childInFocus.all('> a');
+ var link = childInFocus.all('a');
+
+ if(this.activeLink){
+ this.activeLink.blur();
+ }
+
+ var linkArr = [];
link.each(function(child,i,parent){
- child.focus();
+ linkArr[i] = child;
});
+ if(linkArr[0]){
+ linkArr[0].focus();
+ this.activeLink = linkArr[0];
+ }
+
childInFocus.addClass(_CHILD_HIGHLIGHT_CLASS).focus();
if(this.anim && this.anim.get('running')){
this.anim.pause();
@@ -768,7 +827,6 @@ Y.extend(Nav, Y.Base, {
childInFocus.scrollIntoView(); //this is a temp fix try to remove this and fix navigation later
}
-
if(this.container.childIndexInFocus===0){
childInFocus.scrollIntoView();
}
View
2  build/gallery-navigate-easy/gallery-navigate-easy-min.js
@@ -1 +1 @@
-YUI.add("gallery-navigate-easy",function(g){var c="down:39+shift",h="down:37+shift",e=true,f=false,b="transhighlight",a="containerhighlight",d=function(i){d.superclass.constructor.apply(this,arguments);};d.NAME="Navigation";d.ATTRS={activeRegistryIndex:{value:null},registry:[]};g.extend(d,g.Base,{container:{node:null,containerId:null,children:[],childIndexInFocus:-1},initializer:function(i){var j=this;g.one("body").on("key",function(k){j.makeNextContainerNavigable(e);},c);g.one("body").on("key",function(k){j.makeNextContainerNavigable(f);},h);this.makeNextContainerNavigable();},makeNextContainerNavigable:function(j){var i=this.get("registry"),k;if(i.length>0){k=this.getNextRegistryIndex(j);if(k!==null&&i[k]){var l=g.one(i[k].node);if(l){this.deactivateRegisteredContainer();this.registerContainer(l);this.initiateNavigation();}else{this.deactivateRegisteredContainer();}}}else{}},getNextRegistryIndex:function(k){var j=this.get("registry"),m,n=null;if(j&&j.length>0){var l=0;for(l=0;l<j.length;l++){m=j.length;n=this.get("activeRegistryIndex");if(n===null){n=0;}else{n=k?(n+1):(n-1);if(n>=m){n=0;}if(n<0){n=m-1;}}this.set("activeRegistryIndex",n);if(g.one(j[n].node)){return n;}else{}}return n;}return null;},registerContainer:function(i){if(i){this.updateChildren(i);}},updateChildren:function(l){var k=l.all("> *"),j=[],i=this.container;k.each(function(o,m,n){j[m]=o;});i.node=l;i.children=j;i.containerId=l.generateID();},initiateNavigation:function(){this.activateRegisteredContainer();},deactivateRegisteredContainer:function(){this.killAllSubscription();this.removeHighlightonContainer();this.removeHighlightonCurrentChild();this.resetContainer();},removeHighlightonContainer:function(){var i=this.container;if(i&&i.node){i.node.removeClass(a);}},removeHighlightonCurrentChild:function(){var i=this.container;var j=i.childIndexInFocus;if(j!==null&&j!==-1){i.children[j].removeClass(b);}},resetRegistryIndex:function(){this.set("activeRegistryIndex",null);},resetContainer:function(){this.container={node:null,containerId:null,children:[],childIndexInFocus:-1};this.wasLastChild=false;},killAllSubscription:function(){if(g.BodySubscr){this.detachAllSubscriptions();}},activateRegisteredContainer:function(){var i=this.container;if(i&&i.node){i.node.addClass(a);}g.BodySubscr={};g.BodySubscr.keydown=g.one("body").on("down",g.bind(this.onMyKeyDown,this));g.BodySubscr.keyup=g.one("body").on("up",g.bind(this.onMyKeyUp,this));g.one("body").simulate("keydown",{keyCode:40});},detachAllSubscriptions:function(){for(var i in g.BodySubscr){g.BodySubscr[i].detach();}delete g.BodySubscr;},onMyKeyDown:function(j){this.wasLastChild=false;if(this.container){j.preventDefault();var i=this.container,l=i.childIndexInFocus,k=this.getNextIndex(l);i.childIndexInFocus=k;this.bringChildtoFocus(i.children[k]);}},onMyKeyUp:function(j){if(this.container){j.preventDefault();var i=this.container,l=i.childIndexInFocus,k=this.getPreviousIndex(l);this.bringChildtoFocus(i.children[k]);i.childIndexInFocus=k;}},destructor:function(){delete this.anim;},animateScroll:function(i){this.anim=new g.Anim({node:"window",from:{scroll:[g.DOM.docScrollX(),g.DOM.docScrollY()]},to:{scroll:[g.DOM.docScrollX(),i]},duration:0.1,easing:g.Easing.easeNone}).run();},getNextIndex:function(k){var i=this.container,j=i.children.length;if(k!=-1){i.children[k].removeClass(b);}if(k===j-1){k=-1;this.wasLastChild=true;}else{this.wasLastChild=false;}k++;return k;},getPreviousIndex:function(k){var i=this.container,j=i.children.length;if(k>=0){i.children[k].removeClass(b);}if(k===0){k=j;}k--;if(k<0){k=0;}return k;},scrollToCenter:function(k){var m=k.getY(),i=k.get("clientHeight"),n=i/2,j=k.get("winHeight");if(i>j){n=0;}var l=j/2;if(m>l){if(this.anim&&this.anim.get("running")){this.anim.pause();}return m-l+n;}},bringChildtoFocus:function(k){var i=k.all("> a");i.each(function(n,l,m){n.focus();});k.addClass(b).focus();if(this.anim&&this.anim.get("running")){this.anim.pause();}if(this.wasLastChild){k.scrollIntoView();}if(this.container.childIndexInFocus===0){k.scrollIntoView();}var j=this.scrollToCenter(k);this.animateScroll(j);}});g.Nav=d;},"@VERSION@",{requires:["node","event","event-key","gallery-event-nav-keys","base","anim","node-event-simulate"],skinnable:false});
+YUI.add("gallery-navigate-easy",function(c){var g="down:39+shift",e="down:37+shift",b="down:68+shift",h="down:69+shift",d=true,j=false,f="transhighlight",i="containerhighlight",a=function(k){a.superclass.constructor.apply(this,arguments);};a.NAME="Navigation";a.ATTRS={activeRegistryIndex:{value:null},registry:[]};c.extend(a,c.Base,{container:{node:null,containerId:null,children:[],childIndexInFocus:-1,activeLink:null},initializer:function(k){var l=this;this.activateContainerNavigation();this.makeNextContainerNavigable();c.one("body").on("key",function(m){l.deactivateAllNavigation();},b);c.one("body").on("key",function(m){if(l.activateContainerNavigation()){l.makeNextContainerNavigable(d);}},h);},activateContainerNavigation:function(){var k=this;if(c.ContainerSubscr){return false;}else{c.ContainerSubscr={};}c.ContainerSubscr.next=c.one("body").on("key",function(l){k.makeNextContainerNavigable(d);},g);c.ContainerSubscr.prev=c.one("body").on("key",function(l){k.makeNextContainerNavigable(j);},e);return true;},deactivateAllNavigation:function(){this.deactivateRegisteredContainer();this.deactivateContainerNavigation();},deactivateContainerNavigation:function(){if(c.ContainerSubscr){for(var k in c.ContainerSubscr){c.ContainerSubscr[k].detach();}delete c.ContainerSubscr;}},makeNextContainerNavigable:function(l){var k=this.get("registry"),m;if(k.length>0){m=this.getNextRegistryIndex(l);if(m!==null&&k[m]){var n=c.one(k[m].node);if(n){this.deactivateRegisteredContainer();this.registerContainer(n);this.initiateNavigation();}else{this.deactivateRegisteredContainer();}}}else{}},getNextRegistryIndex:function(l){var k=this.get("registry"),n,o=null;if(k&&k.length>0){var m=0;for(m=0;m<k.length;m++){n=k.length;o=this.get("activeRegistryIndex");if(o===null){o=0;}else{o=l?(o+1):(o-1);if(o>=n){o=0;}if(o<0){o=n-1;}}this.set("activeRegistryIndex",o);if(c.one(k[o].node)){return o;}else{}}return o;}return null;},registerContainer:function(k){if(k){this.updateChildren(k);}},updateChildren:function(n){var m=n.all("> *"),l=[],k=this.container;m.each(function(q,o,p){l[o]=q;});k.node=n;k.children=l;k.containerId=n.generateID();},initiateNavigation:function(){this.activateRegisteredContainer();},deactivateRegisteredContainer:function(){this.killAllChildNavigationSubscription();this.removeHighlightonContainer();this.removeHighlightonCurrentChild();this.resetContainer();},removeHighlightonContainer:function(){var k=this.container;if(k&&k.node){k.node.removeClass(i);}},removeHighlightonCurrentChild:function(){var k=this.container;var l=k.childIndexInFocus;if(l!==null&&l!==-1){k.children[l].removeClass(f);}},resetRegistryIndex:function(){this.set("activeRegistryIndex",null);},resetContainer:function(){this.container={node:null,containerId:null,children:[],childIndexInFocus:-1};this.wasLastChild=false;},killAllChildNavigationSubscription:function(){if(c.BodySubscr){this.detachAllChildSubscriptions();}},activateRegisteredContainer:function(){var k=this.container;if(k&&k.node){k.node.addClass(i);}c.BodySubscr={};c.BodySubscr.keydown=c.one("body").on("down",c.bind(this.onMyKeyDown,this));c.BodySubscr.keyup=c.one("body").on("up",c.bind(this.onMyKeyUp,this));c.one("body").simulate("keydown",{keyCode:40});},detachAllChildSubscriptions:function(){for(var k in c.BodySubscr){c.BodySubscr[k].detach();}delete c.BodySubscr;},onMyKeyDown:function(l){this.wasLastChild=false;if(this.container){l.preventDefault();var k=this.container,n=k.childIndexInFocus,m=this.getNextIndex(n);k.childIndexInFocus=m;this.bringChildtoFocus(k.children[m]);}},onMyKeyUp:function(l){if(this.container){l.preventDefault();var k=this.container,n=k.childIndexInFocus,m=this.getPreviousIndex(n);this.bringChildtoFocus(k.children[m]);k.childIndexInFocus=m;}},destructor:function(){delete this.anim;},animateScroll:function(k){this.anim=new c.Anim({node:"window",from:{scroll:[c.DOM.docScrollX(),c.DOM.docScrollY()]},to:{scroll:[c.DOM.docScrollX(),k]},duration:0.1,easing:c.Easing.easeNone}).run();},getNextIndex:function(m){var k=this.container,l=k.children.length;if(m!=-1){k.children[m].removeClass(f);}if(m===l-1){m=-1;this.wasLastChild=true;}else{this.wasLastChild=false;}m++;return m;},getPreviousIndex:function(m){var k=this.container,l=k.children.length;if(m>=0){k.children[m].removeClass(f);}if(m===0){m=l;}m--;if(m<0){m=0;}return m;},scrollToCenter:function(m){var o=m.getY(),k=m.get("clientHeight"),p=k/2,l=m.get("winHeight");if(k>l){p=0;}var n=l/2;if(o>n){if(this.anim&&this.anim.get("running")){this.anim.pause();}return o-n+p;}},bringChildtoFocus:function(m){var k=m.all("a");if(this.activeLink){this.activeLink.blur();}var n=[];k.each(function(q,o,p){n[o]=q;});if(n[0]){n[0].focus();this.activeLink=n[0];}m.addClass(f).focus();if(this.anim&&this.anim.get("running")){this.anim.pause();}if(this.wasLastChild){m.scrollIntoView();}if(this.container.childIndexInFocus===0){m.scrollIntoView();}var l=this.scrollToCenter(m);this.animateScroll(l);}});c.Nav=a;},"@VERSION@",{requires:["node","event","event-key","gallery-event-nav-keys","base","anim","node-event-simulate"],skinnable:false});
View
96 build/gallery-navigate-easy/gallery-navigate-easy.js
@@ -10,6 +10,8 @@ YUI.add('gallery-navigate-easy', function(Y) {
/*CONSTANTS*/
var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
+ KEY_TO_DISABLE_NAVIGATION = 'down:68+shift',
+ KEY_TO_ENABLE_NAVIGATION = 'down:69+shift',
_NEXT = true,
_PREV = false,
_CHILD_HIGHLIGHT_CLASS = 'transhighlight',
@@ -48,16 +50,10 @@ Nav.NAME = "Navigation";
*/
Nav.ATTRS = {
- /*node: {
- setter: function(node) {
- var n = Y.one(node);
- if (!n) {
- }
- return n;
- }
- },*/
activeRegistryIndex:{value:null},
+
registry:[]
+
};
@@ -81,10 +77,16 @@ Y.extend(Nav, Y.Base, {
* - childIndexInFocus: Integer, that indicates the current index selected for the navigable container.
*/
container:{
+
node:null, /*DOM elem*/
+
containerId:null, /*String*/
+
children:[], /*array type*/
- childIndexInFocus:-1/* if there are 10 div elements in navigable container then this variable holds the index of the one in focus*/
+
+ childIndexInFocus:-1,/* if there are 10 div elements in navigable container then this variable holds the index of the one in focus*/
+
+ activeLink : null /*holds the current link within a child of the container which is receiving focus*/
},
@@ -108,22 +110,56 @@ Y.extend(Nav, Y.Base, {
initializer: function(cfg){
var self = this;
+ this.activateContainerNavigation();
+
+ this.makeNextContainerNavigable();
+
Y.one('body').on("key", function(e) {
+ self.deactivateAllNavigation();
+ },KEY_TO_DISABLE_NAVIGATION);
+
+ Y.one('body').on("key", function(e) {
+ if(self.activateContainerNavigation()){
+ self.makeNextContainerNavigable(_NEXT);
+ }
+ },KEY_TO_ENABLE_NAVIGATION);
+ },
+
+
+ activateContainerNavigation:function(){
+ var self = this;
+ if(Y.ContainerSubscr){
+ return false;
+ }else{
+ Y.ContainerSubscr = {};
+ }
+
+ Y.ContainerSubscr.next = Y.one('body').on("key", function(e) {
self.makeNextContainerNavigable(_NEXT);
},SHIFT_RIGHT_ARROW);
- Y.one('body').on("key", function(e) {
+ Y.ContainerSubscr.prev = Y.one('body').on("key", function(e) {
self.makeNextContainerNavigable(_PREV);
},SHIFT_LEFT_ARROW);
- this.makeNextContainerNavigable();
+ return true;
},
+ deactivateAllNavigation:function(){
+ this.deactivateRegisteredContainer(); //will also disable child events
+ this.deactivateContainerNavigation();
+ },
+ deactivateContainerNavigation:function(){
+ if(Y.ContainerSubscr){
-
-
+ for(var subscription in Y.ContainerSubscr){
+ Y.ContainerSubscr[subscription].detach();
+ }
+ delete Y.ContainerSubscr;
+ }
+ },
@@ -140,8 +176,11 @@ Y.extend(Nav, Y.Base, {
* @return {Mixed} The sanitized transition.
*/
makeNextContainerNavigable:function(shiftRight){
+
var registry = this.get('registry'),
+
index;
+
if(registry.length>0){
index = this.getNextRegistryIndex(shiftRight);
if(index!== null && registry[index]){
@@ -180,8 +219,11 @@ Y.extend(Nav, Y.Base, {
* @return {integer} valid registered container index
*/
getNextRegistryIndex:function(isRightKeyPressed) {
+
var registry = this.get('registry'),
+
regLen,
+
regIndex=null;
if(registry && registry.length>0) { //if no registry exists then nothing was registered
@@ -310,7 +352,7 @@ Y.extend(Nav, Y.Base, {
*
*/
deactivateRegisteredContainer:function(){
- this.killAllSubscription();
+ this.killAllChildNavigationSubscription();
this.removeHighlightonContainer();
this.removeHighlightonCurrentChild();
this.resetContainer();
@@ -418,15 +460,15 @@ Y.extend(Nav, Y.Base, {
/**
- * @method killAllSubscription
+ * @method killAllChildNavigationSubscription
* @protected
* Detach all the subscriptions to the body
* @param
*
*/
- killAllSubscription:function() {
+ killAllChildNavigationSubscription:function() {
if(Y.BodySubscr){
- this.detachAllSubscriptions();
+ this.detachAllChildSubscriptions();
}
},
@@ -469,14 +511,14 @@ Y.extend(Nav, Y.Base, {
/**
- * @method detachAllSubscriptions
+ * @method detachAllChildSubscriptions
* @protected
* Function to detach navigation and all events on the body key events
*
* @param none
*
*/
- detachAllSubscriptions: function() {
+ detachAllChildSubscriptions: function() {
for(var subscription in Y.BodySubscr){
Y.BodySubscr[subscription].detach();
@@ -732,11 +774,22 @@ Y.extend(Nav, Y.Base, {
*/
bringChildtoFocus:function(childInFocus){
- var link = childInFocus.all('> a');
+ var link = childInFocus.all('a');
+
+ if(this.activeLink){
+ this.activeLink.blur();
+ }
+
+ var linkArr = [];
link.each(function(child,i,parent){
- child.focus();
+ linkArr[i] = child;
});
+ if(linkArr[0]){
+ linkArr[0].focus();
+ this.activeLink = linkArr[0];
+ }
+
childInFocus.addClass(_CHILD_HIGHLIGHT_CLASS).focus();
if(this.anim && this.anim.get('running')){
this.anim.pause();
@@ -746,7 +799,6 @@ Y.extend(Nav, Y.Base, {
childInFocus.scrollIntoView(); //this is a temp fix try to remove this and fix navigation later
}
-
if(this.container.childIndexInFocus===0){
childInFocus.scrollIntoView();
}
View
9 src/gallery-navigate-easy/assets/index.css
@@ -153,6 +153,15 @@ text-shadow: 0px 1px 0 #eee;
font-weight:strong !important;
box-shadow:0 1px 7px rgba(0,0,0,.4) !important;
}
+
+a {
+ outline:0
+}
+
+a:hover,a:focus,a:active {
+ outline:#777 dotted 2px;
+}
+
.bright {
margin:20px 4% auto;
position:relative;
View
106 src/gallery-navigate-easy/js/navigate-easy.js
@@ -8,6 +8,8 @@
/*CONSTANTS*/
var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
+ KEY_TO_DISABLE_NAVIGATION = 'down:68+shift',
+ KEY_TO_ENABLE_NAVIGATION = 'down:69+shift',
_NEXT = true,
_PREV = false,
_CHILD_HIGHLIGHT_CLASS = 'transhighlight',
@@ -46,17 +48,10 @@ Nav.NAME = "Navigation";
*/
Nav.ATTRS = {
- /*node: {
- setter: function(node) {
- var n = Y.one(node);
- if (!n) {
- Y.log('Invalid Node Given in initialization ' + node);
- }
- return n;
- }
- },*/
activeRegistryIndex:{value:null},
+
registry:[]
+
};
@@ -80,10 +75,16 @@ Y.extend(Nav, Y.Base, {
* - childIndexInFocus: Integer, that indicates the current index selected for the navigable container.
*/
container:{
+
node:null, /*DOM elem*/
+
containerId:null, /*String*/
+
children:[], /*array type*/
- childIndexInFocus:-1/* if there are 10 div elements in navigable container then this variable holds the index of the one in focus*/
+
+ childIndexInFocus:-1,/* if there are 10 div elements in navigable container then this variable holds the index of the one in focus*/
+
+ activeLink : null /*holds the current link within a child of the container which is receiving focus*/
},
@@ -107,26 +108,67 @@ Y.extend(Nav, Y.Base, {
initializer: function(cfg){
var self = this;
+ this.activateContainerNavigation();
+
+ this.makeNextContainerNavigable();
+
+ Y.one('body').on("key", function(e) {
+ Y.log("============================");
+ Y.log('Navigation disabled');
+ self.deactivateAllNavigation();
+ },KEY_TO_DISABLE_NAVIGATION);
+
Y.one('body').on("key", function(e) {
Y.log("============================");
+ Y.log('Navigation enabled');
+ if(self.activateContainerNavigation()){
+ self.makeNextContainerNavigable(_NEXT);
+ }
+ },KEY_TO_ENABLE_NAVIGATION);
+ },
+
+
+ activateContainerNavigation:function(){
+ var self = this;
+ if(Y.ContainerSubscr){
+ Y.log('Container navigation is already enabled');
+ return false;
+ }else{
+ Y.ContainerSubscr = {};
+ }
+
+ Y.ContainerSubscr.next = Y.one('body').on("key", function(e) {
+ Y.log("============================");
Y.log('Shift+RightArrow was pressed');
self.makeNextContainerNavigable(_NEXT);
},SHIFT_RIGHT_ARROW);
- Y.one('body').on("key", function(e) {
+ Y.ContainerSubscr.prev = Y.one('body').on("key", function(e) {
Y.log("============================");
Y.log('Shift+Left was pressed');
self.makeNextContainerNavigable(_PREV);
},SHIFT_LEFT_ARROW);
- this.makeNextContainerNavigable();
+ return true;
},
+ deactivateAllNavigation:function(){
+ this.deactivateRegisteredContainer(); //will also disable child events
+ this.deactivateContainerNavigation();
+ },
+ deactivateContainerNavigation:function(){
+ if(Y.ContainerSubscr){
+ Y.log("detaching subscriptions to navigate across container");
-
-
+ for(var subscription in Y.ContainerSubscr){
+ Y.log('detaching subscription:'+subscription);
+ Y.ContainerSubscr[subscription].detach();
+ }
+ delete Y.ContainerSubscr;
+ }
+ },
@@ -143,8 +185,11 @@ Y.extend(Nav, Y.Base, {
* @return {Mixed} The sanitized transition.
*/
makeNextContainerNavigable:function(shiftRight){
+
var registry = this.get('registry'),
+
index;
+
if(registry.length>0){
index = this.getNextRegistryIndex(shiftRight);
if(index!== null && registry[index]){
@@ -185,8 +230,11 @@ Y.extend(Nav, Y.Base, {
* @return {integer} valid registered container index
*/
getNextRegistryIndex:function(isRightKeyPressed) {
+
var registry = this.get('registry'),
+
regLen,
+
regIndex=null;
if(registry && registry.length>0) { //if no registry exists then nothing was registered
@@ -324,7 +372,7 @@ Y.extend(Nav, Y.Base, {
*
*/
deactivateRegisteredContainer:function(){
- this.killAllSubscription();
+ this.killAllChildNavigationSubscription();
this.removeHighlightonContainer();
this.removeHighlightonCurrentChild();
this.resetContainer();
@@ -432,15 +480,15 @@ Y.extend(Nav, Y.Base, {
/**
- * @method killAllSubscription
+ * @method killAllChildNavigationSubscription
* @protected
* Detach all the subscriptions to the body
* @param
*
*/
- killAllSubscription:function() {
+ killAllChildNavigationSubscription:function() {
if(Y.BodySubscr){
- this.detachAllSubscriptions();
+ this.detachAllChildSubscriptions();
}
},
@@ -466,7 +514,7 @@ Y.extend(Nav, Y.Base, {
/** on KeyDown **/
Y.BodySubscr = {};
- Y.log('attaching new subscription');
+ Y.log('attaching new subscription for child navigation');
Y.BodySubscr.keydown = Y.one('body').on('down',Y.bind(this.onMyKeyDown,this));
/** ON KeyUp **/
Y.BodySubscr.keyup = Y.one('body').on('up',Y.bind(this.onMyKeyUp,this));
@@ -484,14 +532,14 @@ Y.extend(Nav, Y.Base, {
/**
- * @method detachAllSubscriptions
+ * @method detachAllChildSubscriptions
* @protected
* Function to detach navigation and all events on the body key events
*
* @param none
*
*/
- detachAllSubscriptions: function() {
+ detachAllChildSubscriptions: function() {
Y.log("detaching existing subscriptions");
for(var subscription in Y.BodySubscr){
@@ -751,11 +799,22 @@ Y.extend(Nav, Y.Base, {
*/
bringChildtoFocus:function(childInFocus){
- var link = childInFocus.all('> a');
+ var link = childInFocus.all('a');
+
+ if(this.activeLink){
+ this.activeLink.blur();
+ }
+
+ var linkArr = [];
link.each(function(child,i,parent){
- child.focus();
+ linkArr[i] = child;
});
+ if(linkArr[0]){
+ linkArr[0].focus();
+ this.activeLink = linkArr[0];
+ }
+
childInFocus.addClass(_CHILD_HIGHLIGHT_CLASS).focus();
if(this.anim && this.anim.get('running')){
this.anim.pause();
@@ -766,7 +825,6 @@ Y.extend(Nav, Y.Base, {
childInFocus.scrollIntoView(); //this is a temp fix try to remove this and fix navigation later
}
-
if(this.container.childIndexInFocus===0){
childInFocus.scrollIntoView();
}
View
29 src/gallery-navigate-easy/tests/index.html
@@ -48,6 +48,11 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
</div>
<div class="bright">
<p>1. var keyword is important </p>
+
+ <p> really? check
+ <a href="http://bonsaiden.github.com/JavaScript-Garden/">this </a> then
+ <a href="http://bonsaiden.github.com/JavaScript-Garden/">this </a> then
+ </p>
</div>
<div class="bright">
@@ -68,6 +73,25 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
<div class="bright">
<p> 4. use Shift-right or shift-left to move thru containers and say if a list has horizontal elements then register them appropriately so that on left and right arrow keys you can move through them. </p>
</div>
+ <div class="bright">
+ <p>Right now for every child inside a container when gains focus is scanned for links inside and the first link found is given the focus so that on return-key press made to navigate to the link </p>
+ </div>
+ <div class="bright">
+ <p>Bigger problem is: what if the item highlighted is a button? does it always have to contain some link? </p>
+ </div>
+ <div class="bright">
+ <p> Removing default outline when a link is active,focused or hovered, <br>
+ a {
+ outline:0
+ }
+ <br>
+ a:hover,a:focus,a:active { <br>
+ outline:#777 dotted 4px;<br>
+ }
+</p>
+ </div>
+
+ <div class="bright"> <p> how about be able to browse through every link within the child!! </p> </div>
</div>
<ul id="links">
@@ -102,9 +126,10 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
var registry = new Y.Nav({
registry:[
{node:'#main' },
- {node:'#sidebar'},
{node:'#rightbar'},
- {node:'#links'}
+ {node:'#links'},
+ {node:'#sidebar'},
+ {node: '#header'}
]
});
Please sign in to comment.
Something went wrong with that request. Please try again.