Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

added slideshow mode, with pulltotop attribute for container

  • Loading branch information...
commit fcc1509924894c8f70b4c9d72a5f7d9f7814f3aa 1 parent ec8c162
@chetanankola authored
View
163 build/gallery-navigate-easy/gallery-navigate-easy-debug.js
@@ -1,5 +1,6 @@
YUI.add('gallery-navigate-easy', function(Y) {
+
/**
* Provides easy and custom navigation across various dom elements using keyboard.
*
@@ -26,6 +27,13 @@ var SHIFT_RIGHT_ARROW = 'down:39+shift',
SMOOTH_SCROLL = true,
+ DURATION_OF_SMOOTHSCROLL = 0.3,
+
+ ANIMTYPE_FOR_SMOOTHSCROLL = Y.Easing.easeIn,
+
+ /** //http://yuilibrary.com/yui/docs/api/classes/Easing.html
+ * backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
+ */
Nav = function(config){
Nav.superclass.constructor.apply(this, arguments);
};
@@ -53,6 +61,10 @@ Nav.ATTRS = {
debug:{
value: null
+ },
+
+ styleContainer: {
+ value: false
}
};
@@ -79,7 +91,9 @@ Y.extend(Nav, Y.Base, {
activeLink : null, /*holds the current link within a child of the container which is receiving focus*/
- isHorizontal: false /*mode of alignment of the children: horizontal , or by default it is vertical*/
+ isHorizontal: false, /*mode of alignment of the children: horizontal , or by default it is vertical*/
+
+ pullToTop: false /*meant for slideshow kind of containers where you want child elements to scroll to top than being centered*/
},
@@ -97,12 +111,10 @@ Y.extend(Nav, Y.Base, {
this.makeNextContainerNavigable();
Y.one('body').on( "key", function( e ) {
- Y.log('Navigation disabled',"info");
self.disableAllNavigation();
},KEY_TO_DISABLE_NAVIGATION);
Y.one('body').on( "key", function( e ) {
- Y.log('Navigation enabled',"info");
self.enableAllNavigation();
},KEY_TO_ENABLE_NAVIGATION);
},
@@ -145,14 +157,9 @@ Y.extend(Nav, Y.Base, {
registry = this.get('registry');
if(Y.one(node)){
- Y.log('Registering new container:',"info");
- Y.log(regEntry,"info");
registry[registry.length] = regEntry;
this.reorderRegistryByRank();
}else{
- Y.log('Trying to register a node that doesnt exist', "warn");
- Y.log('registration of node failed:'+node, "warn");
- Y.log(regEntry,"warn");
}
},
@@ -173,16 +180,11 @@ Y.extend(Nav, Y.Base, {
if( node ){
index = this.isNodeInRegistry(nodeId);
if( index !== null ){
- Y.log('De-Registering Container Node:'+nodeId, "info");
- Y.log(regEntry, "info");
registry.splice(index,1);
- Y.log('after Deregistration: Registry:',"info");
this.reorderRegistryByRank();
}else{
- Y.log('de-registration of node failed:index in registry'+index, "warn");
}
}else{
- Y.log('invalid node provided for deregistration:'+nodeId, "warn");
}
},
@@ -220,9 +222,6 @@ Y.extend(Nav, Y.Base, {
newregistry = [],
rank,j,i;
- Y.log('Reordering Registry',"info");
- Y.log('unordered Registry:', "info");
- Y.log(registry, "info");
for(i=0;i<len;i++){
newregistry[i] = null;
@@ -235,8 +234,6 @@ Y.extend(Nav, Y.Base, {
rank = registry[i].rank;
if(rank && rank>0 && rank<=len){
if(newregistry[rank-1]!==null){
- Y.log('repeated rank,making it null to resolve ambiguity', "warn");
- Y.log(registry[i], "warn");
registry[i].rank = null;
}else{
newregistry[rank-1] = registry[i];
@@ -255,8 +252,6 @@ Y.extend(Nav, Y.Base, {
newregistry[j].rank = j+1; //update the null or invalid rank now
}
}
- Y.log('reordered Registry:', "info");
- Y.log(newregistry, "info");
this.set('registry',newregistry);
//return newregistry;
},
@@ -271,20 +266,17 @@ Y.extend(Nav, Y.Base, {
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('Shift+RightArrow was pressed');
self.makeNextContainerNavigable(_NEXT);
},SHIFT_RIGHT_ARROW);
Y.ContainerSubscr.prev = Y.one('body').on("key", function( e ) {
- Y.log('Shift+Left was pressed');
self.makeNextContainerNavigable(_PREV);
}, SHIFT_LEFT_ARROW);
@@ -306,16 +298,12 @@ Y.extend(Nav, Y.Base, {
if( ContainerSubscr ){
- Y.log("detaching subscriptions to navigate across container","info");
for( subscription in ContainerSubscr ){
if (ContainerSubscr.hasOwnProperty( subscription )) {
- Y.log('detaching subscription:'+subscription,"info");
ContainerSubscr[subscription].detach();
}
}
delete Y.ContainerSubscr;
- }else{
- Y.log('Trying to deactivate container when there are no subscriptions yet', "warn");
}
this.set('activeRegistryIndex',null);
@@ -337,7 +325,9 @@ Y.extend(Nav, Y.Base, {
node,
- isHorizontal = false;
+ isHorizontal = false,
+
+ pullToTop = false;
if( registry.length > 0 ){
index = this.getNextRegistryIndex( shiftRight );
@@ -346,16 +336,14 @@ Y.extend(Nav, Y.Base, {
node = Y.one( registry[index].node );
if( node ){
isHorizontal = registry[index].isHorizontal || false;
+ pullToTop = registry[index].pullToTop || false;
this.deactivateRegisteredContainer();
- this.registerContainer(node,(index+1),isHorizontal); //+1 , since rank starts from 1 to length of registry
+ this.registerContainer(node,(index+1),isHorizontal,pullToTop); //+1 , since rank starts from 1 to length of registry
this.initiateNavigation();
} else {
this.deactivateRegisteredContainer();
- Y.log('Registered Container does not exist:id='+registry[index].node);
}
}
- } else {
- Y.log('nothing was registered for navigation');
}
},
@@ -394,14 +382,10 @@ Y.extend(Nav, Y.Base, {
}
this.set('activeRegistryIndex',regIndex);
- Y.log('NextRegistryIndex:'+this.get('activeRegistryIndex'));
if( Y.one( registry[regIndex].node ) ){//node is fine
return regIndex;
}else{
- Y.log('Registry contains a node which couldnt be found on page. Node:'+registry[regIndex].node,"warn");
- Y.log('registry object format: {node:"#ad",rank:2}, erroneous object looks like below:',"warn");
- Y.log(registry[regIndex],"warn");
}
}
return regIndex;
@@ -416,19 +400,12 @@ Y.extend(Nav, Y.Base, {
* @param : {Node} node (Container to be scanned for its children )
* @param2 {Rank} integer [1-maxlenofregistry]
* @param3 {isHorizontal} Boolean : if true then container is rendered horizontally else otherwise
-
+ * param4 {pullToTop} Boolean: if true then the child will not be centered instead pulled to the top of the page.
*/
- registerContainer: function(node,rank,isHorizontal){
+ registerContainer: function(node,rank,isHorizontal,pullToTop){
if(node){
- Y.log('activating container for navigation. Node:#'+node.generateID(),"info");
- Y.log(node, "info");
- this.updateChildren(node,rank,isHorizontal); //will update node-container.children as array
- Y.log('Navigable Container Object:', "info");
- Y.log(this.container, "info");
- Y.log('container is ready for navigation', "info");
- }else{
- Y.log('Node is invalid',"error");
+ this.updateChildren(node,rank,isHorizontal,pullToTop); //will update node-container.children as array
}
},
@@ -438,12 +415,14 @@ Y.extend(Nav, Y.Base, {
* @param1 {Node} node String representing the navigable containers id.
* @param2 {Rank} integer [1-maxlenofregistry]
* @param3 {isHorizontal} Boolean : if true then container is rendered horizontally else otherwise
+ * @param4 {pullToTop} Boolean: if true then the child will not be centered instead pulled to the top of the page.
+
* 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,rank,isHorizontal){
+ updateChildren: function(node,rank,isHorizontal,pullToTop){
var childrenObj = node.all('> *'),
children = [],
@@ -455,13 +434,12 @@ Y.extend(Nav, Y.Base, {
});
container.isHorizontal = isHorizontal || false;
+ container.pullToTop = pullToTop ||false;
container.rank = rank;
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, "info");
- Y.log('children:['+children+']', "info");
},
/**
@@ -486,7 +464,9 @@ Y.extend(Nav, Y.Base, {
deactivateRegisteredContainer: function(){
this.killAllChildNavigationSubscription();
- this.removeHighlightonContainer();
+ if(this.get('styleContainer')){
+ this.removeHighlightonContainer();
+ }
this.removeHighlightonCurrentChild();
this.resetContainer();
},
@@ -564,7 +544,8 @@ Y.extend(Nav, Y.Base, {
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*/
- isHorizontal: false
+ isHorizontal: false,
+ pullToTop: false
};
this.wasLastChild = false;
},
@@ -624,24 +605,21 @@ Y.extend(Nav, Y.Base, {
xy;
if( container && container.node ){
- this.highlightContainer();
- Y.log('rank of the container:'+container.rank);
- Y.log('Container is horizontal:'+container.isHorizontal);
+ if(this.get('styleContainer')){
+ this.highlightContainer();
+ }
/*splash coordinates*/
if( this.get('debug') ){
//xy = container.node.getXY();
//xy[0] = xy[0] +50;
//xy[1] = xy[1] -50;
xy = [200,200];
- Y.log('Splash coordinates',"info");
- Y.log( xy );
this.splash('Rank:'+container.rank+'<br>id:'+container.node.generateID()+'<br>isHorizontal:'+container.isHorizontal,xy);
}
}
/** on KeyDown **/
Y.BodySubscr = {};
- Y.log('attaching new subscription for child navigation',"info");
if( container.isHorizontal ){
Y.BodySubscr.keyright = Y.one('body').on('right',Y.bind(this.onMyKeyDown,this));
/** ON KeyRight **/
@@ -670,10 +648,8 @@ Y.extend(Nav, Y.Base, {
subscription;
if(BodySubscr){
- Y.log("detaching existing subscriptions","info");
for( subscription in BodySubscr ){
if ( BodySubscr.hasOwnProperty( subscription ) ) {
- Y.log('detaching subscription:'+subscription, "info");
BodySubscr[subscription].detach();
}
}
@@ -697,11 +673,8 @@ Y.extend(Nav, Y.Base, {
e.preventDefault();
childIndexInFocus = container.childIndexInFocus;
newindex = this.getNextIndex(childIndexInFocus);
- Y.log('on down-arrow-Key press:child index infocus:'+newindex, "info");
container.childIndexInFocus=newindex;
this.bringChildtoFocus(container.children[newindex]);
- }else{
- Y.log('no container is active on arrow key down',"warn");
}
},
@@ -719,11 +692,9 @@ Y.extend(Nav, Y.Base, {
e.preventDefault();
childIndexInFocus = container.childIndexInFocus;
newindex = this.getPreviousIndex(childIndexInFocus);
- Y.log('onkeyup:Infocus:'+newindex);
this.bringChildtoFocus(container.children[newindex]);
container.childIndexInFocus=newindex;
}else{
- Y.log('no container is active on arrow key up',"warn");
}
},
@@ -815,8 +786,9 @@ Y.extend(Nav, Y.Base, {
to: {
scroll : [Y.DOM.docScrollX(),y]
},
- duration: 0.2,
- easing: Y.Easing.easeNone
+ duration: DURATION_OF_SMOOTHSCROLL,
+
+ easing: ANIMTYPE_FOR_SMOOTHSCROLL
}).run();
}
@@ -824,12 +796,14 @@ Y.extend(Nav, Y.Base, {
* backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
*/
},
+
+
/**
- * Function to adjust scrolling and centering the child element which is in focus
+ * Function to adjust scrolling child element which is in focus
* @param Node: DOM element(child node in focus of the navigable container)
- * @return : Integer:amount to scroll to get the elem under focus to the center
+ * @return : Integer:amount to scroll to get the elem under focus to the center or to the top
*/
- scrollToCenter: function( Node ){
+ scrollTo: function( Node ){
var childsY = Node.getY(),
childHeight = Node.get('clientHeight'),
adjustScroll = childHeight/2,
@@ -840,26 +814,28 @@ Y.extend(Nav, Y.Base, {
if( childHeight > winHeight ){
adjustScroll = 0; //this is to make sure that if the child is taller than the screen then just position it // position its top at the center of the screen.
}
+
+
if( childsY > halfwinheight ){
if( this.anim && this.anim.get('running') ){
this.anim.pause();
}
- amounttoScroll = childsY-halfwinheight+adjustScroll;
- }else{
- Y.log('Elements Y coordinate is less than half the window height', "info");
+ if(this.container && this.container.pullToTop){
+ amounttoScroll = childsY;
+ }else{
+ amounttoScroll = childsY-halfwinheight+adjustScroll; //will center the div
+ }
}
+
+
if(Y.DOM.inViewportRegion(Y.Node.getDOMNode(Node),true,null)){
- Y.log('No Scroll', "warn");
return null;
}else{
- Y.log('amount to scroll:'+amounttoScroll, "warn");
- Node.scrollIntoView();
+ //Node.scrollIntoView();
return amounttoScroll;
}
-
- return amounttoScroll;
},
/**
@@ -875,26 +851,13 @@ Y.extend(Nav, Y.Base, {
debug_alldim={};
childInFocus.addClass( _CHILD_HIGHLIGHT_CLASS ).focus();
- if( this.activeLink ){
- this.activeLink.blur();
- }
-
- link.each(function(child,i,parent){
- linkArr[i] = child;
- });
-
- if( linkArr[0] ){
- linkArr[0].focus();
- this.activeLink = linkArr[0];
- }
if( this.anim && this.anim.get('running') ){
this.anim.pause();
}
- /** since this is now taken care in scrolltoCenter Function
+ /** since this is now taken care in scrollto Function
if( this.wasLastChild ){
- Y.log('last child', "info"); //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
}
@@ -902,7 +865,8 @@ Y.extend(Nav, Y.Base, {
//childInFocus.scrollIntoView();
}
**/
- amounttoScroll = this.scrollToCenter(childInFocus); //window.scroll(0,amounttoScroll);
+
+ amounttoScroll = this.scrollTo(childInFocus); //window.scroll(0,amounttoScroll);
if(amounttoScroll){
debug_alldim ={
childsY : childInFocus.getY(),
@@ -911,9 +875,22 @@ Y.extend(Nav, Y.Base, {
currentScrollY: Y.DOM.docScrollY(),
amountgoingtoScroll:amounttoScroll
};
- Y.log(debug_alldim, "scroll");
this._scroll(amounttoScroll,childInFocus.getY);
}
+
+ if( this.activeLink ){
+ this.activeLink.blur();
+ }
+
+ link.each(function(child,i,parent){
+ linkArr[i] = child;
+ });
+
+ if( linkArr[0] ){
+ linkArr[0].focus();
+ this.activeLink = linkArr[0];
+ }
+
}
});
View
4 build/gallery-navigate-easy/gallery-navigate-easy-min.js
@@ -1,2 +1,2 @@
-YUI.add("gallery-navigate-easy",function(c){var g="down:39+shift",e="down:37+shift",b="down:68+shift",i="down:69+shift",d=true,k=false,f="transhighlight",j="containerhighlight",h=true,a=function(l){a.superclass.constructor.apply(this,arguments);};a.NAME="Navigation";a.ATTRS={activeRegistryIndex:{value:null},registry:[],debug:{value:null}};c.extend(a,c.Base,{container:{node:null,containerId:null,children:[],childIndexInFocus:-1,activeLink:null,isHorizontal:false},initializer:function(l){var m=this;this.reorderRegistryByRank();this.activateContainerNavigation();this.makeNextContainerNavigable();c.one("body").on("key",function(n){m.disableAllNavigation();},b);c.one("body").on("key",function(n){m.enableAllNavigation();},i);},enableAllNavigation:function(){if(this.activateContainerNavigation()){this.makeNextContainerNavigable(d);}},disableAllNavigation:function(){this.deactivateRegisteredContainer();this.deactivateContainerNavigation();},register:function(m){var o=m||{},n=o.node,l=this.get("registry");if(c.one(n)){l[l.length]=o;this.reorderRegistryByRank();}else{}},deRegister:function(n){var q=n||{},p=q.node,l=this.get("registry"),o=c.one(p),m=null;if(o){m=this.isNodeInRegistry(p);if(m!==null){l.splice(m,1);this.reorderRegistryByRank();}else{}}else{}},isNodeInRegistry:function(o){var n=0,m=this.get("registry"),l=m.length;for(n=0;n<l;n++){if(o===m[n].node){return n;}}return null;},reorderRegistryByRank:function(){var m=this.get("registry"),l=m.length,p=[],q,n,o;for(o=0;o<l;o++){p[o]=null;if(m[o].rank===undefined){m[o].rank=null;}}for(o=0;o<l;o++){q=m[o].rank;if(q&&q>0&&q<=l){if(p[q-1]!==null){m[o].rank=null;}else{p[q-1]=m[o];}}}n=0;for(o=0;o<l;o++){q=m[o].rank;if(q===null||q<=0||q>l){while(p[n]!==null){n++;}p[n]=m[o];p[n].rank=n+1;}}this.set("registry",p);},activateContainerNavigation:function(){var l=this;if(c.ContainerSubscr){return false;}else{c.ContainerSubscr={};}c.ContainerSubscr.next=c.one("body").on("key",function(m){l.makeNextContainerNavigable(d);},g);c.ContainerSubscr.prev=c.one("body").on("key",function(m){l.makeNextContainerNavigable(k);},e);return true;},deactivateContainerNavigation:function(){var m,l=c.ContainerSubscr;if(l){for(m in l){if(l.hasOwnProperty(m)){l[m].detach();}}delete c.ContainerSubscr;}else{}this.set("activeRegistryIndex",null);},makeNextContainerNavigable:function(m){var l=this.get("registry"),n,o,p=false;if(l.length>0){n=this.getNextRegistryIndex(m);if(n!==null&&l[n]){o=c.one(l[n].node);if(o){p=l[n].isHorizontal||false;this.deactivateRegisteredContainer();this.registerContainer(o,(n+1),p);this.initiateNavigation();}else{this.deactivateRegisteredContainer();}}}else{}},getNextRegistryIndex:function(m){var l=this.get("registry"),o,p=null,n=0;if(l&&l.length>0){for(n=0;n<l.length;n++){o=l.length;p=this.get("activeRegistryIndex");if(p===null){p=0;}else{p=m?(p+1):(p-1);if(p>=o){p=0;}if(p<0){p=o-1;}}this.set("activeRegistryIndex",p);if(c.one(l[p].node)){return p;}else{}}return p;}return null;},registerContainer:function(l,n,m){if(l){this.updateChildren(l,n,m);}else{}},updateChildren:function(o,q,p){var n=o.all("> *"),m=[],l=this.container;n.each(function(t,r,s){m[r]=t;});l.isHorizontal=p||false;l.rank=q;l.node=o;l.children=m;l.containerId=o.generateID();},initiateNavigation:function(){this.activateRegisteredContainer();},deactivateRegisteredContainer:function(){this.killAllChildNavigationSubscription();this.removeHighlightonContainer();this.removeHighlightonCurrentChild();this.resetContainer();},removeHighlightonContainer:function(){var l=this.container;if(l&&l.node){l.node.removeClass(j);}},highlightContainer:function(){var l=this.container;if(l&&l.node){l.node.addClass(j);}},removeHighlightonCurrentChild:function(){var l=this.container,m=l.childIndexInFocus;if(m!==null&&m!==-1){l.children[m].removeClass(f);}},resetRegistryIndex:function(){this.set("activeRegistryIndex",null);},resetContainer:function(){this.container={rank:null,node:null,containerId:null,children:[],childIndexInFocus:-1,isHorizontal:false};this.wasLastChild=false;},killAllChildNavigationSubscription:function(){if(c.BodySubscr){this.detachAllChildSubscriptions();}},splash:function(q,r){var o='<h1 style="font-size:3em;color:#444;position:fixed;-webkit-transform: rotate(-10deg);" id="_splash">'+q+"</h1>",p,m,n,l=r||[0,0];p=c.one("#_splash");m=c.one("body");if(p){p.remove();}n=c.DOM.create(o);m.append(n);p=c.one("#_splash").setXY(l).addClass("cramDownOpacity");},activateRegisteredContainer:function(){var l=this.container,m;if(l&&l.node){this.highlightContainer();if(this.get("debug")){m=[200,200];this.splash("Rank:"+l.rank+"<br>id:"+l.node.generateID()+"<br>isHorizontal:"+l.isHorizontal,m);}}c.BodySubscr={};if(l.isHorizontal){c.BodySubscr.keyright=c.one("body").on("right",c.bind(this.onMyKeyDown,this));c.BodySubscr.keyleft=c.one("body").on("left",c.bind(this.onMyKeyUp,this));c.one("body").simulate("keydown",{keyCode:39});}else{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(){var l=c.BodySubscr,m;if(l){for(m in l){if(l.hasOwnProperty(m)){l[m].detach();}}delete c.BodySubscr;}},onMyKeyDown:function(m){var l=this.container,o,n;this.wasLastChild=false;if(l){m.preventDefault();o=l.childIndexInFocus;n=this.getNextIndex(o);l.childIndexInFocus=n;this.bringChildtoFocus(l.children[n]);}else{}},onMyKeyUp:function(m){var l=this.container,o,n;if(l){m.preventDefault();o=l.childIndexInFocus;n=this.getPreviousIndex(o);this.bringChildtoFocus(l.children[n]);l.childIndexInFocus=n;}else{}},destructor:function(){if(this.anim){delete this.anim;}},getNextIndex:function(n){var l=this.container,m=l.children.length;if(n!=-1){l.children[n].removeClass(f);}if(n===m-1){n=-1;this.wasLastChild=true;}else{this.wasLastChild=false;}n++;return n;},getPreviousIndex:function(n){var l=this.container,m=l.children.length;if(n>=0){l.children[n].removeClass(f);}if(n===0){n=m;
-}n--;if(n<0){n=0;}return n;},_scroll:function(l){if(!h){window.scroll(0,l);}else{if(this.anim){delete this.anim;}this.anim=new c.Anim({node:"window",from:{scroll:[c.DOM.docScrollX(),c.DOM.docScrollY()]},to:{scroll:[c.DOM.docScrollX(),l]},duration:0.2,easing:c.Easing.easeNone}).run();}},scrollToCenter:function(n){var p=n.getY(),l=n.get("clientHeight"),r=l/2,m=n.get("winHeight"),o=m/2,q=0;if(l>m){r=0;}if(p>o){if(this.anim&&this.anim.get("running")){this.anim.pause();}q=p-o+r;}else{}if(c.DOM.inViewportRegion(c.Node.getDOMNode(n),true,null)){return null;}else{n.scrollIntoView();return q;}return q;},bringChildtoFocus:function(o){var m=o.all("a"),p=[],n,l={};o.addClass(f).focus();if(this.activeLink){this.activeLink.blur();}m.each(function(s,q,r){p[q]=s;});if(p[0]){p[0].focus();this.activeLink=p[0];}if(this.anim&&this.anim.get("running")){this.anim.pause();}n=this.scrollToCenter(o);if(n){l={childsY:o.getY(),childHeight:o.get("clientHeight"),winHeight:o.get("winHeight"),currentScrollY:c.DOM.docScrollY(),amountgoingtoScroll:n};this._scroll(n,o.getY);}}});c.Nav=a;},"@VERSION@",{requires:["node","event","event-key","gallery-event-nav-keys","base","anim","node-event-simulate"],skinnable:false});
+this.wasLastChild=true;}else{this.wasLastChild=false;}p++;return p;},getPreviousIndex:function(p){var n=this.container,o=n.children.length;if(p>=0){n.children[p].removeClass(f);}if(p===0){p=o;}p--;if(p<0){p=0;}return p;},_scroll:function(n){if(!i){window.scroll(0,n);}else{if(this.anim){delete this.anim;}this.anim=new c.Anim({node:"window",from:{scroll:[c.DOM.docScrollX(),c.DOM.docScrollY()]},to:{scroll:[c.DOM.docScrollX(),n]},duration:g,easing:k}).run();}},scrollTo:function(p){var r=p.getY(),n=p.get("clientHeight"),t=n/2,o=p.get("winHeight"),q=o/2,s=0;if(n>o){t=0;}if(r>q){if(this.anim&&this.anim.get("running")){this.anim.pause();}if(this.container&&this.container.pullToTop){s=r;}else{s=r-q+t;}}if(c.DOM.inViewportRegion(c.Node.getDOMNode(p),true,null)){return null;}else{return s;}},bringChildtoFocus:function(q){var o=q.all("a"),r=[],p,n={};q.addClass(f).focus();if(this.anim&&this.anim.get("running")){this.anim.pause();}p=this.scrollTo(q);if(p){n={childsY:q.getY(),childHeight:q.get("clientHeight"),winHeight:q.get("winHeight"),currentScrollY:c.DOM.docScrollY(),amountgoingtoScroll:p};this._scroll(p,q.getY);}if(this.activeLink){this.activeLink.blur();}o.each(function(u,s,t){r[s]=u;});if(r[0]){r[0].focus();this.activeLink=r[0];}}});c.Nav=a;},"@VERSION@",{requires:["node","event","event-key","gallery-event-nav-keys","base","anim","node-event-simulate"],skinnable:false});
View
108 build/gallery-navigate-easy/gallery-navigate-easy.js
@@ -1,5 +1,6 @@
YUI.add('gallery-navigate-easy', function(Y) {
+
/**
* Provides easy and custom navigation across various dom elements using keyboard.
*
@@ -26,6 +27,13 @@ var SHIFT_RIGHT_ARROW = 'down:39+shift',
SMOOTH_SCROLL = true,
+ DURATION_OF_SMOOTHSCROLL = 0.3,
+
+ ANIMTYPE_FOR_SMOOTHSCROLL = Y.Easing.easeIn,
+
+ /** //http://yuilibrary.com/yui/docs/api/classes/Easing.html
+ * backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
+ */
Nav = function(config){
Nav.superclass.constructor.apply(this, arguments);
};
@@ -53,6 +61,10 @@ Nav.ATTRS = {
debug:{
value: null
+ },
+
+ styleContainer: {
+ value: false
}
};
@@ -79,7 +91,9 @@ Y.extend(Nav, Y.Base, {
activeLink : null, /*holds the current link within a child of the container which is receiving focus*/
- isHorizontal: false /*mode of alignment of the children: horizontal , or by default it is vertical*/
+ isHorizontal: false, /*mode of alignment of the children: horizontal , or by default it is vertical*/
+
+ pullToTop: false /*meant for slideshow kind of containers where you want child elements to scroll to top than being centered*/
},
@@ -290,7 +304,6 @@ Y.extend(Nav, Y.Base, {
}
}
delete Y.ContainerSubscr;
- }else{
}
this.set('activeRegistryIndex',null);
@@ -312,7 +325,9 @@ Y.extend(Nav, Y.Base, {
node,
- isHorizontal = false;
+ isHorizontal = false,
+
+ pullToTop = false;
if( registry.length > 0 ){
index = this.getNextRegistryIndex( shiftRight );
@@ -321,14 +336,14 @@ Y.extend(Nav, Y.Base, {
node = Y.one( registry[index].node );
if( node ){
isHorizontal = registry[index].isHorizontal || false;
+ pullToTop = registry[index].pullToTop || false;
this.deactivateRegisteredContainer();
- this.registerContainer(node,(index+1),isHorizontal); //+1 , since rank starts from 1 to length of registry
+ this.registerContainer(node,(index+1),isHorizontal,pullToTop); //+1 , since rank starts from 1 to length of registry
this.initiateNavigation();
} else {
this.deactivateRegisteredContainer();
}
}
- } else {
}
},
@@ -385,13 +400,12 @@ Y.extend(Nav, Y.Base, {
* @param : {Node} node (Container to be scanned for its children )
* @param2 {Rank} integer [1-maxlenofregistry]
* @param3 {isHorizontal} Boolean : if true then container is rendered horizontally else otherwise
-
+ * param4 {pullToTop} Boolean: if true then the child will not be centered instead pulled to the top of the page.
*/
- registerContainer: function(node,rank,isHorizontal){
+ registerContainer: function(node,rank,isHorizontal,pullToTop){
if(node){
- this.updateChildren(node,rank,isHorizontal); //will update node-container.children as array
- }else{
+ this.updateChildren(node,rank,isHorizontal,pullToTop); //will update node-container.children as array
}
},
@@ -401,12 +415,14 @@ Y.extend(Nav, Y.Base, {
* @param1 {Node} node String representing the navigable containers id.
* @param2 {Rank} integer [1-maxlenofregistry]
* @param3 {isHorizontal} Boolean : if true then container is rendered horizontally else otherwise
+ * @param4 {pullToTop} Boolean: if true then the child will not be centered instead pulled to the top of the page.
+
* 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,rank,isHorizontal){
+ updateChildren: function(node,rank,isHorizontal,pullToTop){
var childrenObj = node.all('> *'),
children = [],
@@ -418,6 +434,7 @@ Y.extend(Nav, Y.Base, {
});
container.isHorizontal = isHorizontal || false;
+ container.pullToTop = pullToTop ||false;
container.rank = rank;
container.node = node;
container.children = children;
@@ -447,7 +464,9 @@ Y.extend(Nav, Y.Base, {
deactivateRegisteredContainer: function(){
this.killAllChildNavigationSubscription();
- this.removeHighlightonContainer();
+ if(this.get('styleContainer')){
+ this.removeHighlightonContainer();
+ }
this.removeHighlightonCurrentChild();
this.resetContainer();
},
@@ -525,7 +544,8 @@ Y.extend(Nav, Y.Base, {
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*/
- isHorizontal: false
+ isHorizontal: false,
+ pullToTop: false
};
this.wasLastChild = false;
},
@@ -585,7 +605,9 @@ Y.extend(Nav, Y.Base, {
xy;
if( container && container.node ){
- this.highlightContainer();
+ if(this.get('styleContainer')){
+ this.highlightContainer();
+ }
/*splash coordinates*/
if( this.get('debug') ){
//xy = container.node.getXY();
@@ -653,7 +675,6 @@ Y.extend(Nav, Y.Base, {
newindex = this.getNextIndex(childIndexInFocus);
container.childIndexInFocus=newindex;
this.bringChildtoFocus(container.children[newindex]);
- }else{
}
},
@@ -765,8 +786,9 @@ Y.extend(Nav, Y.Base, {
to: {
scroll : [Y.DOM.docScrollX(),y]
},
- duration: 0.2,
- easing: Y.Easing.easeNone
+ duration: DURATION_OF_SMOOTHSCROLL,
+
+ easing: ANIMTYPE_FOR_SMOOTHSCROLL
}).run();
}
@@ -774,12 +796,14 @@ Y.extend(Nav, Y.Base, {
* backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
*/
},
+
+
/**
- * Function to adjust scrolling and centering the child element which is in focus
+ * Function to adjust scrolling child element which is in focus
* @param Node: DOM element(child node in focus of the navigable container)
- * @return : Integer:amount to scroll to get the elem under focus to the center
+ * @return : Integer:amount to scroll to get the elem under focus to the center or to the top
*/
- scrollToCenter: function( Node ){
+ scrollTo: function( Node ){
var childsY = Node.getY(),
childHeight = Node.get('clientHeight'),
adjustScroll = childHeight/2,
@@ -790,23 +814,28 @@ Y.extend(Nav, Y.Base, {
if( childHeight > winHeight ){
adjustScroll = 0; //this is to make sure that if the child is taller than the screen then just position it // position its top at the center of the screen.
}
+
+
if( childsY > halfwinheight ){
if( this.anim && this.anim.get('running') ){
this.anim.pause();
}
- amounttoScroll = childsY-halfwinheight+adjustScroll;
- }else{
+ if(this.container && this.container.pullToTop){
+ amounttoScroll = childsY;
+ }else{
+ amounttoScroll = childsY-halfwinheight+adjustScroll; //will center the div
+ }
}
+
+
if(Y.DOM.inViewportRegion(Y.Node.getDOMNode(Node),true,null)){
return null;
}else{
- Node.scrollIntoView();
+ //Node.scrollIntoView();
return amounttoScroll;
}
-
- return amounttoScroll;
},
/**
@@ -822,24 +851,12 @@ Y.extend(Nav, Y.Base, {
debug_alldim={};
childInFocus.addClass( _CHILD_HIGHLIGHT_CLASS ).focus();
- if( this.activeLink ){
- this.activeLink.blur();
- }
-
- link.each(function(child,i,parent){
- linkArr[i] = child;
- });
-
- if( linkArr[0] ){
- linkArr[0].focus();
- this.activeLink = linkArr[0];
- }
if( this.anim && this.anim.get('running') ){
this.anim.pause();
}
- /** since this is now taken care in scrolltoCenter Function
+ /** since this is now taken care in scrollto Function
if( this.wasLastChild ){
//childInFocus.scrollIntoView(); //this is a temp fix try to remove this and fix navigation later
}
@@ -848,7 +865,8 @@ Y.extend(Nav, Y.Base, {
//childInFocus.scrollIntoView();
}
**/
- amounttoScroll = this.scrollToCenter(childInFocus); //window.scroll(0,amounttoScroll);
+
+ amounttoScroll = this.scrollTo(childInFocus); //window.scroll(0,amounttoScroll);
if(amounttoScroll){
debug_alldim ={
childsY : childInFocus.getY(),
@@ -859,6 +877,20 @@ Y.extend(Nav, Y.Base, {
};
this._scroll(amounttoScroll,childInFocus.getY);
}
+
+ if( this.activeLink ){
+ this.activeLink.blur();
+ }
+
+ link.each(function(child,i,parent){
+ linkArr[i] = child;
+ });
+
+ if( linkArr[0] ){
+ linkArr[0].focus();
+ this.activeLink = linkArr[0];
+ }
+
}
});
View
163 src/gallery-navigate-easy/js/navigate-easy.js
@@ -1,3 +1,4 @@
+
/**
* Provides easy and custom navigation across various dom elements using keyboard.
*
@@ -24,6 +25,13 @@ var SHIFT_RIGHT_ARROW = 'down:39+shift',
SMOOTH_SCROLL = true,
+ DURATION_OF_SMOOTHSCROLL = 0.3,
+
+ ANIMTYPE_FOR_SMOOTHSCROLL = Y.Easing.easeIn,
+
+ /** //http://yuilibrary.com/yui/docs/api/classes/Easing.html
+ * backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
+ */
Nav = function(config){
Nav.superclass.constructor.apply(this, arguments);
};
@@ -51,6 +59,10 @@ Nav.ATTRS = {
debug:{
value: null
+ },
+
+ styleContainer: {
+ value: false
}
};
@@ -77,7 +89,9 @@ Y.extend(Nav, Y.Base, {
activeLink : null, /*holds the current link within a child of the container which is receiving focus*/
- isHorizontal: false /*mode of alignment of the children: horizontal , or by default it is vertical*/
+ isHorizontal: false, /*mode of alignment of the children: horizontal , or by default it is vertical*/
+
+ pullToTop: false /*meant for slideshow kind of containers where you want child elements to scroll to top than being centered*/
},
@@ -95,12 +109,10 @@ Y.extend(Nav, Y.Base, {
this.makeNextContainerNavigable();
Y.one('body').on( "key", function( e ) {
- Y.log('Navigation disabled',"info");
self.disableAllNavigation();
},KEY_TO_DISABLE_NAVIGATION);
Y.one('body').on( "key", function( e ) {
- Y.log('Navigation enabled',"info");
self.enableAllNavigation();
},KEY_TO_ENABLE_NAVIGATION);
},
@@ -143,14 +155,9 @@ Y.extend(Nav, Y.Base, {
registry = this.get('registry');
if(Y.one(node)){
- Y.log('Registering new container:',"info");
- Y.log(regEntry,"info");
registry[registry.length] = regEntry;
this.reorderRegistryByRank();
}else{
- Y.log('Trying to register a node that doesnt exist', "warn");
- Y.log('registration of node failed:'+node, "warn");
- Y.log(regEntry,"warn");
}
},
@@ -171,16 +178,11 @@ Y.extend(Nav, Y.Base, {
if( node ){
index = this.isNodeInRegistry(nodeId);
if( index !== null ){
- Y.log('De-Registering Container Node:'+nodeId, "info");
- Y.log(regEntry, "info");
registry.splice(index,1);
- Y.log('after Deregistration: Registry:',"info");
this.reorderRegistryByRank();
}else{
- Y.log('de-registration of node failed:index in registry'+index, "warn");
}
}else{
- Y.log('invalid node provided for deregistration:'+nodeId, "warn");
}
},
@@ -218,9 +220,6 @@ Y.extend(Nav, Y.Base, {
newregistry = [],
rank,j,i;
- Y.log('Reordering Registry',"info");
- Y.log('unordered Registry:', "info");
- Y.log(registry, "info");
for(i=0;i<len;i++){
newregistry[i] = null;
@@ -233,8 +232,6 @@ Y.extend(Nav, Y.Base, {
rank = registry[i].rank;
if(rank && rank>0 && rank<=len){
if(newregistry[rank-1]!==null){
- Y.log('repeated rank,making it null to resolve ambiguity', "warn");
- Y.log(registry[i], "warn");
registry[i].rank = null;
}else{
newregistry[rank-1] = registry[i];
@@ -253,8 +250,6 @@ Y.extend(Nav, Y.Base, {
newregistry[j].rank = j+1; //update the null or invalid rank now
}
}
- Y.log('reordered Registry:', "info");
- Y.log(newregistry, "info");
this.set('registry',newregistry);
//return newregistry;
},
@@ -269,20 +264,17 @@ Y.extend(Nav, Y.Base, {
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('Shift+RightArrow was pressed');
self.makeNextContainerNavigable(_NEXT);
},SHIFT_RIGHT_ARROW);
Y.ContainerSubscr.prev = Y.one('body').on("key", function( e ) {
- Y.log('Shift+Left was pressed');
self.makeNextContainerNavigable(_PREV);
}, SHIFT_LEFT_ARROW);
@@ -304,16 +296,12 @@ Y.extend(Nav, Y.Base, {
if( ContainerSubscr ){
- Y.log("detaching subscriptions to navigate across container","info");
for( subscription in ContainerSubscr ){
if (ContainerSubscr.hasOwnProperty( subscription )) {
- Y.log('detaching subscription:'+subscription,"info");
ContainerSubscr[subscription].detach();
}
}
delete Y.ContainerSubscr;
- }else{
- Y.log('Trying to deactivate container when there are no subscriptions yet', "warn");
}
this.set('activeRegistryIndex',null);
@@ -335,7 +323,9 @@ Y.extend(Nav, Y.Base, {
node,
- isHorizontal = false;
+ isHorizontal = false,
+
+ pullToTop = false;
if( registry.length > 0 ){
index = this.getNextRegistryIndex( shiftRight );
@@ -344,16 +334,14 @@ Y.extend(Nav, Y.Base, {
node = Y.one( registry[index].node );
if( node ){
isHorizontal = registry[index].isHorizontal || false;
+ pullToTop = registry[index].pullToTop || false;
this.deactivateRegisteredContainer();
- this.registerContainer(node,(index+1),isHorizontal); //+1 , since rank starts from 1 to length of registry
+ this.registerContainer(node,(index+1),isHorizontal,pullToTop); //+1 , since rank starts from 1 to length of registry
this.initiateNavigation();
} else {
this.deactivateRegisteredContainer();
- Y.log('Registered Container does not exist:id='+registry[index].node);
}
}
- } else {
- Y.log('nothing was registered for navigation');
}
},
@@ -392,14 +380,10 @@ Y.extend(Nav, Y.Base, {
}
this.set('activeRegistryIndex',regIndex);
- Y.log('NextRegistryIndex:'+this.get('activeRegistryIndex'));
if( Y.one( registry[regIndex].node ) ){//node is fine
return regIndex;
}else{
- Y.log('Registry contains a node which couldnt be found on page. Node:'+registry[regIndex].node,"warn");
- Y.log('registry object format: {node:"#ad",rank:2}, erroneous object looks like below:',"warn");
- Y.log(registry[regIndex],"warn");
}
}
return regIndex;
@@ -414,19 +398,12 @@ Y.extend(Nav, Y.Base, {
* @param : {Node} node (Container to be scanned for its children )
* @param2 {Rank} integer [1-maxlenofregistry]
* @param3 {isHorizontal} Boolean : if true then container is rendered horizontally else otherwise
-
+ * param4 {pullToTop} Boolean: if true then the child will not be centered instead pulled to the top of the page.
*/
- registerContainer: function(node,rank,isHorizontal){
+ registerContainer: function(node,rank,isHorizontal,pullToTop){
if(node){
- Y.log('activating container for navigation. Node:#'+node.generateID(),"info");
- Y.log(node, "info");
- this.updateChildren(node,rank,isHorizontal); //will update node-container.children as array
- Y.log('Navigable Container Object:', "info");
- Y.log(this.container, "info");
- Y.log('container is ready for navigation', "info");
- }else{
- Y.log('Node is invalid',"error");
+ this.updateChildren(node,rank,isHorizontal,pullToTop); //will update node-container.children as array
}
},
@@ -436,12 +413,14 @@ Y.extend(Nav, Y.Base, {
* @param1 {Node} node String representing the navigable containers id.
* @param2 {Rank} integer [1-maxlenofregistry]
* @param3 {isHorizontal} Boolean : if true then container is rendered horizontally else otherwise
+ * @param4 {pullToTop} Boolean: if true then the child will not be centered instead pulled to the top of the page.
+
* 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,rank,isHorizontal){
+ updateChildren: function(node,rank,isHorizontal,pullToTop){
var childrenObj = node.all('> *'),
children = [],
@@ -453,13 +432,12 @@ Y.extend(Nav, Y.Base, {
});
container.isHorizontal = isHorizontal || false;
+ container.pullToTop = pullToTop ||false;
container.rank = rank;
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, "info");
- Y.log('children:['+children+']', "info");
},
/**
@@ -484,7 +462,9 @@ Y.extend(Nav, Y.Base, {
deactivateRegisteredContainer: function(){
this.killAllChildNavigationSubscription();
- this.removeHighlightonContainer();
+ if(this.get('styleContainer')){
+ this.removeHighlightonContainer();
+ }
this.removeHighlightonCurrentChild();
this.resetContainer();
},
@@ -562,7 +542,8 @@ Y.extend(Nav, Y.Base, {
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*/
- isHorizontal: false
+ isHorizontal: false,
+ pullToTop: false
};
this.wasLastChild = false;
},
@@ -622,24 +603,21 @@ Y.extend(Nav, Y.Base, {
xy;
if( container && container.node ){
- this.highlightContainer();
- Y.log('rank of the container:'+container.rank);
- Y.log('Container is horizontal:'+container.isHorizontal);
+ if(this.get('styleContainer')){
+ this.highlightContainer();
+ }
/*splash coordinates*/
if( this.get('debug') ){
//xy = container.node.getXY();
//xy[0] = xy[0] +50;
//xy[1] = xy[1] -50;
xy = [200,200];
- Y.log('Splash coordinates',"info");
- Y.log( xy );
this.splash('Rank:'+container.rank+'<br>id:'+container.node.generateID()+'<br>isHorizontal:'+container.isHorizontal,xy);
}
}
/** on KeyDown **/
Y.BodySubscr = {};
- Y.log('attaching new subscription for child navigation',"info");
if( container.isHorizontal ){
Y.BodySubscr.keyright = Y.one('body').on('right',Y.bind(this.onMyKeyDown,this));
/** ON KeyRight **/
@@ -668,10 +646,8 @@ Y.extend(Nav, Y.Base, {
subscription;
if(BodySubscr){
- Y.log("detaching existing subscriptions","info");
for( subscription in BodySubscr ){
if ( BodySubscr.hasOwnProperty( subscription ) ) {
- Y.log('detaching subscription:'+subscription, "info");
BodySubscr[subscription].detach();
}
}
@@ -695,11 +671,8 @@ Y.extend(Nav, Y.Base, {
e.preventDefault();
childIndexInFocus = container.childIndexInFocus;
newindex = this.getNextIndex(childIndexInFocus);
- Y.log('on down-arrow-Key press:child index infocus:'+newindex, "info");
container.childIndexInFocus=newindex;
this.bringChildtoFocus(container.children[newindex]);
- }else{
- Y.log('no container is active on arrow key down',"warn");
}
},
@@ -717,11 +690,9 @@ Y.extend(Nav, Y.Base, {
e.preventDefault();
childIndexInFocus = container.childIndexInFocus;
newindex = this.getPreviousIndex(childIndexInFocus);
- Y.log('onkeyup:Infocus:'+newindex);
this.bringChildtoFocus(container.children[newindex]);
container.childIndexInFocus=newindex;
}else{
- Y.log('no container is active on arrow key up',"warn");
}
},
@@ -813,8 +784,9 @@ Y.extend(Nav, Y.Base, {
to: {
scroll : [Y.DOM.docScrollX(),y]
},
- duration: 0.2,
- easing: Y.Easing.easeNone
+ duration: DURATION_OF_SMOOTHSCROLL,
+
+ easing: ANIMTYPE_FOR_SMOOTHSCROLL
}).run();
}
@@ -822,12 +794,14 @@ Y.extend(Nav, Y.Base, {
* backBoth backIn backOut bounceBoth bounceIn bounceOut easeBoth easeBothStrong easeIn easeInStrong easeNone easeOut easeOutStrong elasticBoth elasticIn elasticOut
*/
},
+
+
/**
- * Function to adjust scrolling and centering the child element which is in focus
+ * Function to adjust scrolling child element which is in focus
* @param Node: DOM element(child node in focus of the navigable container)
- * @return : Integer:amount to scroll to get the elem under focus to the center
+ * @return : Integer:amount to scroll to get the elem under focus to the center or to the top
*/
- scrollToCenter: function( Node ){
+ scrollTo: function( Node ){
var childsY = Node.getY(),
childHeight = Node.get('clientHeight'),
adjustScroll = childHeight/2,
@@ -838,26 +812,28 @@ Y.extend(Nav, Y.Base, {
if( childHeight > winHeight ){
adjustScroll = 0; //this is to make sure that if the child is taller than the screen then just position it // position its top at the center of the screen.
}
+
+
if( childsY > halfwinheight ){
if( this.anim && this.anim.get('running') ){
this.anim.pause();
}
- amounttoScroll = childsY-halfwinheight+adjustScroll;
- }else{
- Y.log('Elements Y coordinate is less than half the window height', "info");
+ if(this.container && this.container.pullToTop){
+ amounttoScroll = childsY;
+ }else{
+ amounttoScroll = childsY-halfwinheight+adjustScroll; //will center the div
+ }
}
+
+
if(Y.DOM.inViewportRegion(Y.Node.getDOMNode(Node),true,null)){
- Y.log('No Scroll', "warn");
return null;
}else{
- Y.log('amount to scroll:'+amounttoScroll, "warn");
- Node.scrollIntoView();
+ //Node.scrollIntoView();
return amounttoScroll;
}
-
- return amounttoScroll;
},
/**
@@ -873,26 +849,13 @@ Y.extend(Nav, Y.Base, {
debug_alldim={};
childInFocus.addClass( _CHILD_HIGHLIGHT_CLASS ).focus();
- if( this.activeLink ){
- this.activeLink.blur();
- }
-
- link.each(function(child,i,parent){
- linkArr[i] = child;
- });
-
- if( linkArr[0] ){
- linkArr[0].focus();
- this.activeLink = linkArr[0];
- }
if( this.anim && this.anim.get('running') ){
this.anim.pause();
}
- /** since this is now taken care in scrolltoCenter Function
+ /** since this is now taken care in scrollto Function
if( this.wasLastChild ){
- Y.log('last child', "info"); //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
}
@@ -900,7 +863,8 @@ Y.extend(Nav, Y.Base, {
//childInFocus.scrollIntoView();
}
**/
- amounttoScroll = this.scrollToCenter(childInFocus); //window.scroll(0,amounttoScroll);
+
+ amounttoScroll = this.scrollTo(childInFocus); //window.scroll(0,amounttoScroll);
if(amounttoScroll){
debug_alldim ={
childsY : childInFocus.getY(),
@@ -909,9 +873,22 @@ Y.extend(Nav, Y.Base, {
currentScrollY: Y.DOM.docScrollY(),
amountgoingtoScroll:amounttoScroll
};
- Y.log(debug_alldim, "scroll");
this._scroll(amounttoScroll,childInFocus.getY);
}
+
+ if( this.activeLink ){
+ this.activeLink.blur();
+ }
+
+ link.each(function(child,i,parent){
+ linkArr[i] = child;
+ });
+
+ if( linkArr[0] ){
+ linkArr[0].focus();
+ this.activeLink = linkArr[0];
+ }
+
}
});
View
9 src/gallery-navigate-easy/tests/index.html
@@ -168,12 +168,17 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
var Nav = new Y.Nav({
registry:[
- {node:'#main' },
+ {node:'#main',pullToTop:true },
{node:'#rightbar',rank:3},
{node:'#links',rank:4},
{node:'#sidebar',rank:1},
{node:'#tab ul',isHorizontal:true}
- ],debug:true
+ ],
+
+ debug:true,
+
+ styleContainer:true, /*optional*/
+
});
Nav.register({node:'#header'});
Please sign in to comment.
Something went wrong with that request. Please try again.