Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added comments and changed css and added highlighting for container

  • Loading branch information...
commit cc27817077ec7eae39f4ac3cb3d1aa6ce810b318 1 parent d1c0610
@chetanankola authored
View
16 build/gallery-navigate-easy/assets/index.css
@@ -132,10 +132,22 @@ text-shadow: 0px 1px 0 #eee;
}
.containerhighlight {
- border:1px solid #444 !important;
+ border:4px solid #ccc !important;
+ box-shadow:3px 3px 17px rgba(0,0,0,.4) !important;
+ -webkit-transition:box-shadow 0.3s !important;
}
+
+.transhighlight{
+ border:1px solid #aaa !important;
+ background:#dfdfdf !important;
+ color:#444 !important;
+ font-weight:strong !important;
+ box-shadow:0 10px 7px rgba(0,0,0,.4) !important;
+ -webkit-transition:all .4s ease-in;
+}
+
.highlight {
- border:1px solid #ccc !important;
+ border:1px solid #aaa !important;
background:#dfdfdf !important;
color:#444 !important;
font-weight:strong !important;
View
395 build/gallery-navigate-easy/gallery-navigate-easy-debug.js
@@ -8,22 +8,22 @@ YUI.add('gallery-navigate-easy', function(Y) {
/*CONSTANTS*/
-var KEY_DOWN = 40,
- KEY_ENTER = 13,
- KEY_ESC = 27,
- KEY_TAB = 9,
- KEY_UP = 38,
- KEY_RIGHT = 39,
- SHIFT_RIGHT_ARROW = 'down:39+shift',
+var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
_NEXT = true,
_PREV = false,
+ _CHILD_HIGHLIGHT_CLASS = 'transhighlight',
+ _CONTAINER_HIGHLIGHT_CLASS = 'containerhighlight',
Nav = function(config){
Nav.superclass.constructor.apply(this, arguments);
};
+
+
+
+
/**
* @property NAME
* @type String
@@ -35,6 +35,11 @@ Nav.NAME = "Navigation";
+
+
+
+
+
/**
* "Associative Array", used to define the set of attributes
* added by this class. The name of the attribute is the key,
@@ -56,6 +61,17 @@ Nav.ATTRS = {
registry:[]
};
+
+
+
+
+
+
+
+
+
+
+
Y.extend(Nav, Y.Base, {
/**
@@ -66,6 +82,7 @@ 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*/
@@ -73,6 +90,17 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
+
+
+
+
/**
* Tasks MyClass needs to perform during
* the init() lifecycle phase
@@ -85,6 +113,7 @@ Y.extend(Nav, Y.Base, {
Y.log("============================");
Y.log('Shift+RightArrow was pressed');
self.makeNextContainerNavigable(_NEXT);
+
},SHIFT_RIGHT_ARROW);
Y.one('body').on("key", function(e) {
@@ -94,14 +123,27 @@ Y.extend(Nav, Y.Base, {
},SHIFT_LEFT_ARROW);
this.makeNextContainerNavigable();
+ },
+
+
+
+
+
+
+
+
+
- },
/**
- * @param : boolean (true: get next container, false: get previous container)
- */
+ * Function that chooses the next registered container makes it navigable
+ * @method makeNextContainerNavigable
+ * @protected
+ * @param : {boolean} shiftRight (true: get next container, false: get previous container)
+ * @return {Mixed} The sanitized transition.
+ */
makeNextContainerNavigable:function(shiftRight){
var registry = this.get('registry'),
index;
@@ -125,9 +167,25 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+
+
+
+
/**
- * @param: boolean: true: meaning Shift-Right
- */
+ * Function that chooses the next or previous registered container index to be made navigable from registry
+ * @method getNextRegistryIndex
+ * @protected
+ * @param : {boolean} isRightKeyPressed (true: get next container index, false: get previous container index)
+ * @return {integer} valid registered container index
+ */
getNextRegistryIndex:function(isRightKeyPressed) {
var registry = this.get('registry'),
regLen,
@@ -163,10 +221,24 @@ Y.extend(Nav, Y.Base, {
return null;
},
+
+
+
+
+
+
+
+
+
+
+
+
/**
- * Function to update the Class's container object with children of current node being registered.
- *
- */
+ * Function to update the Class's container object with the children of current container/node being registered.
+ * @method registerContainer
+ * @protected
+ * @param : {Node} node (Container to be scanned for its children )
+ */
registerContainer:function(node){
if(node){
@@ -180,30 +252,55 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+
+
+
/**
- * @param node: String representing the navigable containers id.
+ * @method updateChildren
+ * @protected
+ * @param {Node} node String representing the navigable containers id.
* register the container that needs navigation
* updates the container-object:
* - gets all the children of the @param node, and puts them in an array.
* - updates the container id if it has one else generates a dummy one.
*/
updateChildren: function(node){
- var childrenObj = node.all('> *');
- var children = [];
+ var childrenObj = node.all('> *'),
+ children = [],
+ container = this.container;
+
childrenObj.each(function(child,i,parent){
children[i] = child;
});
- this.container.children = children;
- this.container.containerId = node.generateID();//generateID() returns existing node id or creates one if it doesnt exist
- //Y.log('Navigable ContainerId:'+this.container.containerId);
+ container.node = node;
+ container.children = children;
+ container.containerId = node.generateID();//generateID() returns existing node id or creates one if it doesnt exist
Y.log('total num of children:'+children.length);
Y.log('children:['+children+']');
},
+
+
+
+
+
+
+
+
+
/**
- * Function to intiate navigation on the children of the container,
- * bind the key up and down events to the relevant functions
+ * @method initiateNavigation
+ * @protected
+ * make the children of the navigable container 'navigable'
* @param
*
*/
@@ -212,25 +309,114 @@ Y.extend(Nav, Y.Base, {
this.activateRegisteredContainer();
},
+
+
+
+
+
+
+
+
+
+ /**
+ * @method deactivateRegisteredContainer
+ * @protected
+ * remove all subscriptions,css on the current navigable container and its children, reset Container object
+ * @param
+ *
+ */
deactivateRegisteredContainer:function(){
this.killAllSubscription();
+ this.removeHighlightonContainer();
this.removeHighlightonCurrentChild();
this.resetContainer();
},
+
+
+
+
+
+
+
+
+
+ /**
+ * @method removeHighlightonContainer
+ * @protected
+ * remove any CSS highlight on the current navigable container
+ * @param
+ *
+ */
+ removeHighlightonContainer: function(){
+ var container = this.container;
+ if(container && container.node){
+ container.node.removeClass(_CONTAINER_HIGHLIGHT_CLASS);
+ }
+ },
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method removeHighlightonCurrentChild
+ * @protected
+ * remove any CSS highlight on the current container's children
+ * @param
+ *
+ */
removeHighlightonCurrentChild: function(){
var container = this.container;
var index = container.childIndexInFocus;
if(index!==null && index!==-1){
- container.children[index].removeClass('highlight');
+ container.children[index].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
},
+
+
+
+
+
+
+
+
+ /**
+ * @method resetRegistryIndex
+ * @protected
+ * set the Attr:activeRegistryIndex to null
+ * @param
+ *
+ */
resetRegistryIndex:function(){
this.set('activeRegistryIndex',null);
},
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method resetContainer
+ * @protected
+ * Reset the contents of the container object
+ * @param
+ *
+ */
resetContainer:function(){
this.container = {
+ node:null,
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*/
@@ -239,23 +425,69 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+ /**
+ * @method killAllSubscription
+ * @protected
+ * Detach all the subscriptions to the body
+ * @param
+ *
+ */
killAllSubscription:function() {
if(Y.BodySubscr){
this.detachAllSubscriptions();
}
},
+
+
+
+
+
+
+
+ /**
+ * @method activateRegisteredContainer
+ * @protected
+ * Add CSS highlight to new container, attach key event subscriptions for the container and simulate arrow-key-down
+ * @param
+ *
+ */
activateRegisteredContainer:function(){
+ var container = this.container;
+ if(container && container.node){
+ container.node.addClass(_CONTAINER_HIGHLIGHT_CLASS);
+ }
+
/** on KeyDown **/
Y.BodySubscr = {};
Y.log('attaching new subscription');
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));
+
+ Y.one('body').simulate("keydown", { keyCode: 40 });
},
+
+
+
+
+
+
+
+
/**
+ * @method detachAllSubscriptions
+ * @protected
* Function to detach navigation and all events on the body key events
*
* @param none
@@ -272,8 +504,20 @@ Y.extend(Nav, Y.Base, {
},
- /**
- * Function
+
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method onMyKeyDown
+ * @protected
* on keyboard down key press, will focus/navigate to next child of the container registered
*/
onMyKeyDown: function(e){
@@ -283,7 +527,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
childIndexInFocus = container.childIndexInFocus,
newindex = this.getNextIndex(childIndexInFocus);
- Y.log('onkeydown:infocus:'+newindex);
+ Y.log('on down-arrow-Key press:child index infocus:'+newindex);
container.childIndexInFocus=newindex;
this.bringChildtoFocus(container.children[newindex]);
@@ -293,8 +537,16 @@ Y.extend(Nav, Y.Base, {
- /**
- * Function
+
+
+
+
+
+
+
+ /**
+ * @method onMyKeyUp
+ * @protected
* on keyboard up key press, will focus/navigate to next child of the container registered
*/
onMyKeyUp: function(e){
@@ -313,6 +565,13 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
/**
* Tasks MyClass needs to perform during
*
@@ -327,6 +586,17 @@ Y.extend(Nav, Y.Base, {
delete this.anim;
},
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to enable smooth scrolling
* @param: y - integer, that represents the calculated height by which scroll should happen on Y axis on window object
@@ -355,6 +625,13 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
/**
* Function to get the next child index on key down event.
* @param :integer, previous child index (for eg: 0 means 1st child)
@@ -364,7 +641,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
numofChildren = container.children.length;
if(childIndexInFocus!=-1){
- container.children[childIndexInFocus].removeClass('highlight');
+ container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
if(childIndexInFocus===numofChildren-1) {
childIndexInFocus=-1;
@@ -380,6 +657,16 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
+
+
+
/**
* Function to retrieve the child-index previous to the @param1 on key up event.
* @param :integer, current child index in focus (for eg: 0 means 1st child)
@@ -389,7 +676,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
numofChildren = container.children.length;
if(childIndexInFocus>=0){
- container.children[childIndexInFocus].removeClass('highlight');
+ container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
if(childIndexInFocus===0) {
childIndexInFocus=numofChildren;
@@ -401,6 +688,22 @@ Y.extend(Nav, Y.Base, {
return childIndexInFocus;
},
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to adjust scrolling and centering the child element which is in focus
* @param Node: DOM element(child node in focus of the navigable container)
@@ -425,6 +728,24 @@ Y.extend(Nav, Y.Base, {
}
},
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to get the new child into focus and right scroll
* @param: Node, representing the child that should gain focus.
@@ -432,19 +753,15 @@ Y.extend(Nav, Y.Base, {
*/
bringChildtoFocus:function(childInFocus){
-
- childInFocus.addClass('highlight').focus();
-
- console.log('$$$$$$$$$$$$$$$$$$$$$$$$$$$');
var link = childInFocus.all('> a');
link.each(function(child,i,parent){
child.focus();
});
+
+ childInFocus.addClass(_CHILD_HIGHLIGHT_CLASS).focus();
if(this.anim && this.anim.get('running')){
this.anim.pause();
}
-
-
if(this.wasLastChild){
Y.log('last child');
//this needs to be outside since both up and down needs this
@@ -465,7 +782,9 @@ Y.extend(Nav, Y.Base, {
+
+
Y.Nav = Nav;
-}, '@VERSION@' ,{requires:['node', 'event', 'event-key', 'gallery-event-nav-keys', 'base', 'anim'], skinnable:false});
+}, '@VERSION@' ,{requires:['node', 'event', 'event-key', 'gallery-event-nav-keys', 'base', 'anim', 'node-event-simulate'], skinnable:false});
View
2  build/gallery-navigate-easy/gallery-navigate-easy-min.js
@@ -1 +1 @@
-YUI.add("gallery-navigate-easy",function(c){var i=40,h=13,f=27,l=9,g=38,j=39,e="down:39+shift",d="down:37+shift",b=true,k=false,a=function(m){a.superclass.constructor.apply(this,arguments);};a.NAME="Navigation";a.ATTRS={activeRegistryIndex:{value:null},registry:[]};c.extend(a,c.Base,{container:{containerId:null,children:[],childIndexInFocus:-1},initializer:function(m){var n=this;c.one("body").on("key",function(o){n.makeNextContainerNavigable(b);},e);c.one("body").on("key",function(o){n.makeNextContainerNavigable(k);},d);this.makeNextContainerNavigable();},makeNextContainerNavigable:function(n){var m=this.get("registry"),o;if(m.length>0){o=this.getNextRegistryIndex(n);if(o!==null&&m[o]){var p=c.one(m[o].node);if(p){this.deactivateRegisteredContainer();this.registerContainer(p);this.initiateNavigation();}else{this.deactivateRegisteredContainer();}}}else{}},getNextRegistryIndex:function(n){var m=this.get("registry"),p,q=null;if(m&&m.length>0){var o=0;for(o=0;o<m.length;o++){p=m.length;q=this.get("activeRegistryIndex");if(q===null){q=0;}else{q=n?(q+1):(q-1);if(q>=p){q=0;}if(q<0){q=p-1;}}this.set("activeRegistryIndex",q);if(c.one(m[q].node)){return q;}else{}}return q;}return null;},registerContainer:function(m){if(m){this.updateChildren(m);}},updateChildren:function(o){var n=o.all("> *");var m=[];n.each(function(r,p,q){m[p]=r;});this.container.children=m;this.container.containerId=o.generateID();},initiateNavigation:function(){this.activateRegisteredContainer();},deactivateRegisteredContainer:function(){this.killAllSubscription();this.removeHighlightonCurrentChild();this.resetContainer();},removeHighlightonCurrentChild:function(){var m=this.container;var n=m.childIndexInFocus;if(n!==null&&n!==-1){m.children[n].removeClass("highlight");}},resetRegistryIndex:function(){this.set("activeRegistryIndex",null);},resetContainer:function(){this.container={containerId:null,children:[],childIndexInFocus:-1};this.wasLastChild=false;},killAllSubscription:function(){if(c.BodySubscr){this.detachAllSubscriptions();}},activateRegisteredContainer:function(){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));},detachAllSubscriptions:function(){for(var m in c.BodySubscr){c.BodySubscr[m].detach();}delete c.BodySubscr;},onMyKeyDown:function(n){this.wasLastChild=false;if(this.container){n.preventDefault();var m=this.container,p=m.childIndexInFocus,o=this.getNextIndex(p);m.childIndexInFocus=o;this.bringChildtoFocus(m.children[o]);}},onMyKeyUp:function(n){if(this.container){n.preventDefault();var m=this.container,p=m.childIndexInFocus,o=this.getPreviousIndex(p);this.bringChildtoFocus(m.children[o]);m.childIndexInFocus=o;}},destructor:function(){delete this.anim;},animateScroll:function(m){this.anim=new c.Anim({node:"window",from:{scroll:[c.DOM.docScrollX(),c.DOM.docScrollY()]},to:{scroll:[c.DOM.docScrollX(),m]},duration:0.1,easing:c.Easing.easeNone}).run();},getNextIndex:function(o){var m=this.container,n=m.children.length;if(o!=-1){m.children[o].removeClass("highlight");}if(o===n-1){o=-1;this.wasLastChild=true;}else{this.wasLastChild=false;}o++;return o;},getPreviousIndex:function(o){var m=this.container,n=m.children.length;if(o>=0){m.children[o].removeClass("highlight");}if(o===0){o=n;}o--;if(o<0){o=0;}return o;},scrollToCenter:function(o){var q=o.getY(),m=o.get("clientHeight"),r=m/2,n=o.get("winHeight");if(m>n){r=0;}var p=n/2;if(q>p){if(this.anim&&this.anim.get("running")){this.anim.pause();}return q-p+r;}},bringChildtoFocus:function(o){o.addClass("highlight").focus();console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$");var m=o.all("> a");m.each(function(r,p,q){r.focus();});if(this.anim&&this.anim.get("running")){this.anim.pause();}if(this.wasLastChild){o.scrollIntoView();}if(this.container.childIndexInFocus===0){o.scrollIntoView();}var n=this.scrollToCenter(o);this.animateScroll(n);}});c.Nav=a;},"@VERSION@",{requires:["node","event","event-key","gallery-event-nav-keys","base","anim"],skinnable:false});
+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});
View
392 build/gallery-navigate-easy/gallery-navigate-easy.js
@@ -8,22 +8,22 @@ YUI.add('gallery-navigate-easy', function(Y) {
/*CONSTANTS*/
-var KEY_DOWN = 40,
- KEY_ENTER = 13,
- KEY_ESC = 27,
- KEY_TAB = 9,
- KEY_UP = 38,
- KEY_RIGHT = 39,
- SHIFT_RIGHT_ARROW = 'down:39+shift',
+var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
_NEXT = true,
_PREV = false,
+ _CHILD_HIGHLIGHT_CLASS = 'transhighlight',
+ _CONTAINER_HIGHLIGHT_CLASS = 'containerhighlight',
Nav = function(config){
Nav.superclass.constructor.apply(this, arguments);
};
+
+
+
+
/**
* @property NAME
* @type String
@@ -35,6 +35,11 @@ Nav.NAME = "Navigation";
+
+
+
+
+
/**
* "Associative Array", used to define the set of attributes
* added by this class. The name of the attribute is the key,
@@ -55,6 +60,17 @@ Nav.ATTRS = {
registry:[]
};
+
+
+
+
+
+
+
+
+
+
+
Y.extend(Nav, Y.Base, {
/**
@@ -65,6 +81,7 @@ 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*/
@@ -72,6 +89,17 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
+
+
+
+
/**
* Tasks MyClass needs to perform during
* the init() lifecycle phase
@@ -82,6 +110,7 @@ Y.extend(Nav, Y.Base, {
Y.one('body').on("key", function(e) {
self.makeNextContainerNavigable(_NEXT);
+
},SHIFT_RIGHT_ARROW);
Y.one('body').on("key", function(e) {
@@ -89,14 +118,27 @@ Y.extend(Nav, Y.Base, {
},SHIFT_LEFT_ARROW);
this.makeNextContainerNavigable();
+ },
+
+
+
+
+
+
+
+
+
- },
/**
- * @param : boolean (true: get next container, false: get previous container)
- */
+ * Function that chooses the next registered container makes it navigable
+ * @method makeNextContainerNavigable
+ * @protected
+ * @param : {boolean} shiftRight (true: get next container, false: get previous container)
+ * @return {Mixed} The sanitized transition.
+ */
makeNextContainerNavigable:function(shiftRight){
var registry = this.get('registry'),
index;
@@ -118,9 +160,25 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+
+
+
+
/**
- * @param: boolean: true: meaning Shift-Right
- */
+ * Function that chooses the next or previous registered container index to be made navigable from registry
+ * @method getNextRegistryIndex
+ * @protected
+ * @param : {boolean} isRightKeyPressed (true: get next container index, false: get previous container index)
+ * @return {integer} valid registered container index
+ */
getNextRegistryIndex:function(isRightKeyPressed) {
var registry = this.get('registry'),
regLen,
@@ -154,10 +212,24 @@ Y.extend(Nav, Y.Base, {
return null;
},
+
+
+
+
+
+
+
+
+
+
+
+
/**
- * Function to update the Class's container object with children of current node being registered.
- *
- */
+ * Function to update the Class's container object with the children of current container/node being registered.
+ * @method registerContainer
+ * @protected
+ * @param : {Node} node (Container to be scanned for its children )
+ */
registerContainer:function(node){
if(node){
@@ -166,27 +238,53 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+
+
+
/**
- * @param node: String representing the navigable containers id.
+ * @method updateChildren
+ * @protected
+ * @param {Node} node String representing the navigable containers id.
* register the container that needs navigation
* updates the container-object:
* - gets all the children of the @param node, and puts them in an array.
* - updates the container id if it has one else generates a dummy one.
*/
updateChildren: function(node){
- var childrenObj = node.all('> *');
- var children = [];
+ var childrenObj = node.all('> *'),
+ children = [],
+ container = this.container;
+
childrenObj.each(function(child,i,parent){
children[i] = child;
});
- this.container.children = children;
- this.container.containerId = node.generateID();//generateID() returns existing node id or creates one if it doesnt exist
+ container.node = node;
+ container.children = children;
+ container.containerId = node.generateID();//generateID() returns existing node id or creates one if it doesnt exist
},
+
+
+
+
+
+
+
+
+
/**
- * Function to intiate navigation on the children of the container,
- * bind the key up and down events to the relevant functions
+ * @method initiateNavigation
+ * @protected
+ * make the children of the navigable container 'navigable'
* @param
*
*/
@@ -195,25 +293,114 @@ Y.extend(Nav, Y.Base, {
this.activateRegisteredContainer();
},
+
+
+
+
+
+
+
+
+
+ /**
+ * @method deactivateRegisteredContainer
+ * @protected
+ * remove all subscriptions,css on the current navigable container and its children, reset Container object
+ * @param
+ *
+ */
deactivateRegisteredContainer:function(){
this.killAllSubscription();
+ this.removeHighlightonContainer();
this.removeHighlightonCurrentChild();
this.resetContainer();
},
+
+
+
+
+
+
+
+
+
+ /**
+ * @method removeHighlightonContainer
+ * @protected
+ * remove any CSS highlight on the current navigable container
+ * @param
+ *
+ */
+ removeHighlightonContainer: function(){
+ var container = this.container;
+ if(container && container.node){
+ container.node.removeClass(_CONTAINER_HIGHLIGHT_CLASS);
+ }
+ },
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method removeHighlightonCurrentChild
+ * @protected
+ * remove any CSS highlight on the current container's children
+ * @param
+ *
+ */
removeHighlightonCurrentChild: function(){
var container = this.container;
var index = container.childIndexInFocus;
if(index!==null && index!==-1){
- container.children[index].removeClass('highlight');
+ container.children[index].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
},
+
+
+
+
+
+
+
+
+ /**
+ * @method resetRegistryIndex
+ * @protected
+ * set the Attr:activeRegistryIndex to null
+ * @param
+ *
+ */
resetRegistryIndex:function(){
this.set('activeRegistryIndex',null);
},
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method resetContainer
+ * @protected
+ * Reset the contents of the container object
+ * @param
+ *
+ */
resetContainer:function(){
this.container = {
+ node:null,
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*/
@@ -222,22 +409,68 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+ /**
+ * @method killAllSubscription
+ * @protected
+ * Detach all the subscriptions to the body
+ * @param
+ *
+ */
killAllSubscription:function() {
if(Y.BodySubscr){
this.detachAllSubscriptions();
}
},
+
+
+
+
+
+
+
+ /**
+ * @method activateRegisteredContainer
+ * @protected
+ * Add CSS highlight to new container, attach key event subscriptions for the container and simulate arrow-key-down
+ * @param
+ *
+ */
activateRegisteredContainer:function(){
+ var container = this.container;
+ if(container && container.node){
+ container.node.addClass(_CONTAINER_HIGHLIGHT_CLASS);
+ }
+
/** on KeyDown **/
Y.BodySubscr = {};
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));
+
+ Y.one('body').simulate("keydown", { keyCode: 40 });
},
+
+
+
+
+
+
+
+
/**
+ * @method detachAllSubscriptions
+ * @protected
* Function to detach navigation and all events on the body key events
*
* @param none
@@ -252,8 +485,20 @@ Y.extend(Nav, Y.Base, {
},
- /**
- * Function
+
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method onMyKeyDown
+ * @protected
* on keyboard down key press, will focus/navigate to next child of the container registered
*/
onMyKeyDown: function(e){
@@ -272,8 +517,16 @@ Y.extend(Nav, Y.Base, {
- /**
- * Function
+
+
+
+
+
+
+
+ /**
+ * @method onMyKeyUp
+ * @protected
* on keyboard up key press, will focus/navigate to next child of the container registered
*/
onMyKeyUp: function(e){
@@ -291,6 +544,13 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
/**
* Tasks MyClass needs to perform during
*
@@ -305,6 +565,17 @@ Y.extend(Nav, Y.Base, {
delete this.anim;
},
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to enable smooth scrolling
* @param: y - integer, that represents the calculated height by which scroll should happen on Y axis on window object
@@ -333,6 +604,13 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
/**
* Function to get the next child index on key down event.
* @param :integer, previous child index (for eg: 0 means 1st child)
@@ -342,7 +620,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
numofChildren = container.children.length;
if(childIndexInFocus!=-1){
- container.children[childIndexInFocus].removeClass('highlight');
+ container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
if(childIndexInFocus===numofChildren-1) {
childIndexInFocus=-1;
@@ -358,6 +636,16 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
+
+
+
/**
* Function to retrieve the child-index previous to the @param1 on key up event.
* @param :integer, current child index in focus (for eg: 0 means 1st child)
@@ -367,7 +655,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
numofChildren = container.children.length;
if(childIndexInFocus>=0){
- container.children[childIndexInFocus].removeClass('highlight');
+ container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
if(childIndexInFocus===0) {
childIndexInFocus=numofChildren;
@@ -379,6 +667,22 @@ Y.extend(Nav, Y.Base, {
return childIndexInFocus;
},
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to adjust scrolling and centering the child element which is in focus
* @param Node: DOM element(child node in focus of the navigable container)
@@ -403,6 +707,24 @@ Y.extend(Nav, Y.Base, {
}
},
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to get the new child into focus and right scroll
* @param: Node, representing the child that should gain focus.
@@ -410,19 +732,15 @@ Y.extend(Nav, Y.Base, {
*/
bringChildtoFocus:function(childInFocus){
-
- childInFocus.addClass('highlight').focus();
-
- console.log('$$$$$$$$$$$$$$$$$$$$$$$$$$$');
var link = childInFocus.all('> a');
link.each(function(child,i,parent){
child.focus();
});
+
+ childInFocus.addClass(_CHILD_HIGHLIGHT_CLASS).focus();
if(this.anim && this.anim.get('running')){
this.anim.pause();
}
-
-
if(this.wasLastChild){
//this needs to be outside since both up and down needs this
childInFocus.scrollIntoView(); //this is a temp fix try to remove this and fix navigation later
@@ -442,7 +760,9 @@ Y.extend(Nav, Y.Base, {
+
+
Y.Nav = Nav;
-}, '@VERSION@' ,{requires:['node', 'event', 'event-key', 'gallery-event-nav-keys', 'base', 'anim'], skinnable:false});
+}, '@VERSION@' ,{requires:['node', 'event', 'event-key', 'gallery-event-nav-keys', 'base', 'anim', 'node-event-simulate'], skinnable:false});
View
16 src/gallery-navigate-easy/assets/index.css
@@ -132,10 +132,22 @@ text-shadow: 0px 1px 0 #eee;
}
.containerhighlight {
- border:1px solid #444 !important;
+ border:4px solid #ccc !important;
+ box-shadow:3px 3px 17px rgba(0,0,0,.4) !important;
+ -webkit-transition:box-shadow 0.3s !important;
}
+
+.transhighlight{
+ border:1px solid #aaa !important;
+ background:#dfdfdf !important;
+ color:#444 !important;
+ font-weight:strong !important;
+ box-shadow:0 10px 7px rgba(0,0,0,.4) !important;
+ -webkit-transition:all .4s ease-in;
+}
+
.highlight {
- border:1px solid #ccc !important;
+ border:1px solid #aaa !important;
background:#dfdfdf !important;
color:#444 !important;
font-weight:strong !important;
View
2  src/gallery-navigate-easy/build.properties
@@ -17,7 +17,7 @@ component=gallery-navigate-easy
component.jsfiles=navigate-easy.js
# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
-component.requires=node, event, event-key, gallery-event-nav-keys, base, anim
+component.requires=node, event, event-key, gallery-event-nav-keys, base, anim, node-event-simulate
# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
component.supersedes=
View
393 src/gallery-navigate-easy/js/navigate-easy.js
@@ -6,22 +6,22 @@
/*CONSTANTS*/
-var KEY_DOWN = 40,
- KEY_ENTER = 13,
- KEY_ESC = 27,
- KEY_TAB = 9,
- KEY_UP = 38,
- KEY_RIGHT = 39,
- SHIFT_RIGHT_ARROW = 'down:39+shift',
+var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
_NEXT = true,
_PREV = false,
+ _CHILD_HIGHLIGHT_CLASS = 'transhighlight',
+ _CONTAINER_HIGHLIGHT_CLASS = 'containerhighlight',
Nav = function(config){
Nav.superclass.constructor.apply(this, arguments);
};
+
+
+
+
/**
* @property NAME
* @type String
@@ -33,6 +33,11 @@ Nav.NAME = "Navigation";
+
+
+
+
+
/**
* "Associative Array", used to define the set of attributes
* added by this class. The name of the attribute is the key,
@@ -54,6 +59,17 @@ Nav.ATTRS = {
registry:[]
};
+
+
+
+
+
+
+
+
+
+
+
Y.extend(Nav, Y.Base, {
/**
@@ -64,6 +80,7 @@ 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*/
@@ -71,6 +88,17 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
+
+
+
+
/**
* Tasks MyClass needs to perform during
* the init() lifecycle phase
@@ -83,6 +111,7 @@ Y.extend(Nav, Y.Base, {
Y.log("============================");
Y.log('Shift+RightArrow was pressed');
self.makeNextContainerNavigable(_NEXT);
+
},SHIFT_RIGHT_ARROW);
Y.one('body').on("key", function(e) {
@@ -92,14 +121,27 @@ Y.extend(Nav, Y.Base, {
},SHIFT_LEFT_ARROW);
this.makeNextContainerNavigable();
+ },
+
+
+
+
+
+
+
+
+
- },
/**
- * @param : boolean (true: get next container, false: get previous container)
- */
+ * Function that chooses the next registered container makes it navigable
+ * @method makeNextContainerNavigable
+ * @protected
+ * @param : {boolean} shiftRight (true: get next container, false: get previous container)
+ * @return {Mixed} The sanitized transition.
+ */
makeNextContainerNavigable:function(shiftRight){
var registry = this.get('registry'),
index;
@@ -123,9 +165,25 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+
+
+
+
/**
- * @param: boolean: true: meaning Shift-Right
- */
+ * Function that chooses the next or previous registered container index to be made navigable from registry
+ * @method getNextRegistryIndex
+ * @protected
+ * @param : {boolean} isRightKeyPressed (true: get next container index, false: get previous container index)
+ * @return {integer} valid registered container index
+ */
getNextRegistryIndex:function(isRightKeyPressed) {
var registry = this.get('registry'),
regLen,
@@ -161,10 +219,24 @@ Y.extend(Nav, Y.Base, {
return null;
},
+
+
+
+
+
+
+
+
+
+
+
+
/**
- * Function to update the Class's container object with children of current node being registered.
- *
- */
+ * Function to update the Class's container object with the children of current container/node being registered.
+ * @method registerContainer
+ * @protected
+ * @param : {Node} node (Container to be scanned for its children )
+ */
registerContainer:function(node){
if(node){
@@ -178,30 +250,55 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+
+
+
/**
- * @param node: String representing the navigable containers id.
+ * @method updateChildren
+ * @protected
+ * @param {Node} node String representing the navigable containers id.
* register the container that needs navigation
* updates the container-object:
* - gets all the children of the @param node, and puts them in an array.
* - updates the container id if it has one else generates a dummy one.
*/
updateChildren: function(node){
- var childrenObj = node.all('> *');
- var children = [];
+ var childrenObj = node.all('> *'),
+ children = [],
+ container = this.container;
+
childrenObj.each(function(child,i,parent){
children[i] = child;
});
- this.container.children = children;
- this.container.containerId = node.generateID();//generateID() returns existing node id or creates one if it doesnt exist
- //Y.log('Navigable ContainerId:'+this.container.containerId);
+ container.node = node;
+ container.children = children;
+ container.containerId = node.generateID();//generateID() returns existing node id or creates one if it doesnt exist
Y.log('total num of children:'+children.length);
Y.log('children:['+children+']');
},
+
+
+
+
+
+
+
+
+
/**
- * Function to intiate navigation on the children of the container,
- * bind the key up and down events to the relevant functions
+ * @method initiateNavigation
+ * @protected
+ * make the children of the navigable container 'navigable'
* @param
*
*/
@@ -210,25 +307,114 @@ Y.extend(Nav, Y.Base, {
this.activateRegisteredContainer();
},
+
+
+
+
+
+
+
+
+
+ /**
+ * @method deactivateRegisteredContainer
+ * @protected
+ * remove all subscriptions,css on the current navigable container and its children, reset Container object
+ * @param
+ *
+ */
deactivateRegisteredContainer:function(){
this.killAllSubscription();
+ this.removeHighlightonContainer();
this.removeHighlightonCurrentChild();
this.resetContainer();
},
+
+
+
+
+
+
+
+
+
+ /**
+ * @method removeHighlightonContainer
+ * @protected
+ * remove any CSS highlight on the current navigable container
+ * @param
+ *
+ */
+ removeHighlightonContainer: function(){
+ var container = this.container;
+ if(container && container.node){
+ container.node.removeClass(_CONTAINER_HIGHLIGHT_CLASS);
+ }
+ },
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method removeHighlightonCurrentChild
+ * @protected
+ * remove any CSS highlight on the current container's children
+ * @param
+ *
+ */
removeHighlightonCurrentChild: function(){
var container = this.container;
var index = container.childIndexInFocus;
if(index!==null && index!==-1){
- container.children[index].removeClass('highlight');
+ container.children[index].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
},
+
+
+
+
+
+
+
+
+ /**
+ * @method resetRegistryIndex
+ * @protected
+ * set the Attr:activeRegistryIndex to null
+ * @param
+ *
+ */
resetRegistryIndex:function(){
this.set('activeRegistryIndex',null);
},
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method resetContainer
+ * @protected
+ * Reset the contents of the container object
+ * @param
+ *
+ */
resetContainer:function(){
this.container = {
+ node:null,
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*/
@@ -237,23 +423,69 @@ Y.extend(Nav, Y.Base, {
},
+
+
+
+
+
+
+
+
+ /**
+ * @method killAllSubscription
+ * @protected
+ * Detach all the subscriptions to the body
+ * @param
+ *
+ */
killAllSubscription:function() {
if(Y.BodySubscr){
this.detachAllSubscriptions();
}
},
+
+
+
+
+
+
+
+ /**
+ * @method activateRegisteredContainer
+ * @protected
+ * Add CSS highlight to new container, attach key event subscriptions for the container and simulate arrow-key-down
+ * @param
+ *
+ */
activateRegisteredContainer:function(){
+ var container = this.container;
+ if(container && container.node){
+ container.node.addClass(_CONTAINER_HIGHLIGHT_CLASS);
+ }
+
/** on KeyDown **/
Y.BodySubscr = {};
Y.log('attaching new subscription');
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));
+
+ Y.one('body').simulate("keydown", { keyCode: 40 });
},
+
+
+
+
+
+
+
+
/**
+ * @method detachAllSubscriptions
+ * @protected
* Function to detach navigation and all events on the body key events
*
* @param none
@@ -270,8 +502,20 @@ Y.extend(Nav, Y.Base, {
},
- /**
- * Function
+
+
+
+
+
+
+
+
+
+
+
+ /**
+ * @method onMyKeyDown
+ * @protected
* on keyboard down key press, will focus/navigate to next child of the container registered
*/
onMyKeyDown: function(e){
@@ -281,7 +525,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
childIndexInFocus = container.childIndexInFocus,
newindex = this.getNextIndex(childIndexInFocus);
- Y.log('onkeydown:infocus:'+newindex);
+ Y.log('on down-arrow-Key press:child index infocus:'+newindex);
container.childIndexInFocus=newindex;
this.bringChildtoFocus(container.children[newindex]);
@@ -291,8 +535,16 @@ Y.extend(Nav, Y.Base, {
- /**
- * Function
+
+
+
+
+
+
+
+ /**
+ * @method onMyKeyUp
+ * @protected
* on keyboard up key press, will focus/navigate to next child of the container registered
*/
onMyKeyUp: function(e){
@@ -311,6 +563,13 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
/**
* Tasks MyClass needs to perform during
*
@@ -325,6 +584,17 @@ Y.extend(Nav, Y.Base, {
delete this.anim;
},
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to enable smooth scrolling
* @param: y - integer, that represents the calculated height by which scroll should happen on Y axis on window object
@@ -353,6 +623,13 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
/**
* Function to get the next child index on key down event.
* @param :integer, previous child index (for eg: 0 means 1st child)
@@ -362,7 +639,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
numofChildren = container.children.length;
if(childIndexInFocus!=-1){
- container.children[childIndexInFocus].removeClass('highlight');
+ container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
if(childIndexInFocus===numofChildren-1) {
childIndexInFocus=-1;
@@ -378,6 +655,16 @@ Y.extend(Nav, Y.Base, {
+
+
+
+
+
+
+
+
+
+
/**
* Function to retrieve the child-index previous to the @param1 on key up event.
* @param :integer, current child index in focus (for eg: 0 means 1st child)
@@ -387,7 +674,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container,
numofChildren = container.children.length;
if(childIndexInFocus>=0){
- container.children[childIndexInFocus].removeClass('highlight');
+ container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
}
if(childIndexInFocus===0) {
childIndexInFocus=numofChildren;
@@ -399,6 +686,22 @@ Y.extend(Nav, Y.Base, {
return childIndexInFocus;
},
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to adjust scrolling and centering the child element which is in focus
* @param Node: DOM element(child node in focus of the navigable container)
@@ -423,6 +726,24 @@ Y.extend(Nav, Y.Base, {
}
},
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
/**
* Function to get the new child into focus and right scroll
* @param: Node, representing the child that should gain focus.
@@ -430,19 +751,15 @@ Y.extend(Nav, Y.Base, {
*/
bringChildtoFocus:function(childInFocus){
-
- childInFocus.addClass('highlight').focus();
-
- console.log('$$$$$$$$$$$$$$$$$$$$$$$$$$$');
var link = childInFocus.all('> a');
link.each(function(child,i,parent){
child.focus();
});
+
+ childInFocus.addClass(_CHILD_HIGHLIGHT_CLASS).focus();
if(this.anim && this.anim.get('running')){
this.anim.pause();
}
-
-
if(this.wasLastChild){
Y.log('last child');
//this needs to be outside since both up and down needs this
@@ -463,4 +780,6 @@ Y.extend(Nav, Y.Base, {
+
+
Y.Nav = Nav;

0 comments on commit cc27817

Please sign in to comment.
Something went wrong with that request. Please try again.