Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

custom css can be specified now

  • Loading branch information...
commit 3bfc975658ef010e130c9a808c1c4ad16166869d 1 parent 2428f95
@chetanankola authored
View
283 src/gallery-navigate-easy/assets/gallery-navigate-easy-core.css
@@ -1,279 +1,22 @@
-
-body {
- background:#F2F2F2;
- background: url(http://chetanankola.com/homepage/images/applelinen.png);
-}
-
-#header {
-margin:20px 10% auto;
-position:relative;
-
-padding:10px;
-border-radius:2px;
-/*background: -moz-linear-gradient(top, #aeaeae, #d8d8d8);
-background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa ));
-*/
-background:#fff;
-border-bottom: 4px solid #000;
-
-}
-
-#header h1 {
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:2.5em;
-color:#666;
-text-shadow: 0px 3px 0 white;
-}
-
-#main, #links {
-margin:20px 30% auto;
-background:#fff;
-padding-top:30px;
-padding-bottom:30px;
-border-bottom: 4px solid #000;
-}
-
-
-
-#rightbar {
-position:absolute;
-margin:70px 71% auto;
-background:#fff;
-padding:10px;
-padding-top:30px;
-padding-bottom:30px;
-border-bottom: 4px solid #000;
-margin-right: 100px;
-}
-
-#rightbar h2 {
-margin:20px 4% auto;
-position:relative;
-background:#eee;
-padding:10px;
-border-radius:2px;
-border:1px solid #cccccc;
--webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
--moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
-box-shadow:0 1px 7px rgba(0,0,0,.4);
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#444;
-font-weight:strong;
-text-shadow: 0px 1px 0 #eee;
+.yui3-container-highlight {
+ border:2px dashed #000 !important;
+ /*box-shadow:0 0 7px rgba(0,0,0,.4) !important;
+ -webkit-transition:box-shadow 0.1s !important;*/
}
-#sidebar {
-position:absolute;
-margin:70px 10% auto;
-background:#fff;
-padding:10px;
-padding-top:30px;
-padding-bottom:30px;
-border-bottom: 4px solid #000;
-}
-
-#sidebar h2 {
-margin:20px 4% auto;
-position:relative;
-background:#eee;
-padding:10px;
-border-radius:2px;
-border:1px solid #cccccc;
--webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
--moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
-box-shadow:0 1px 7px rgba(0,0,0,.4);
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#444;
-font-weight:strong;
-text-shadow: 0px 1px 0 #eee;
-}
-
-
-
-
-#links li {
- margin:20px 4% auto;
- position:relative;
- padding:10px;
- border-radius:2px;
- border:1px solid #ccc;
- -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
- -moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
- box-shadow:0 1px 7px rgba(0,0,0,.4);
- background:#fff;
- list-style:none;
- text-decoration:none;
-}
-.dark {
-margin:20px 4% auto;
-position:relative;
-background:#ccc;
-padding:10px;
-border-radius:2px;
-border:1px solid #cccccc;
--webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
--moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
-box-shadow:0 1px 7px rgba(0,0,0,.4);
-}
-
-.dark p,h3 {
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#444;
-font-weight:strong;
-text-shadow: 0px 1px 0 #eee;
-}
-
-.containerhighlight {
- border:4px solid #ccc !important;
- box-shadow:0 0 7px rgba(0,0,0,.4) !important;
- -webkit-transition:box-shadow 0.1s !important;
-}
-
-.transhighlight{
- border:1px solid #aaa !important;
- background:#dfdfdf !important;
+.yui3-elem-highlight{
+ border:1px solid #000 !important;
+ /*background:#dfdfdf !important;
color:#444 !important;
font-weight:strong !important;
- box-shadow:0 0px 8px rgba(0,0,0,.6) !important;
- -webkit-transition:all .1s ease-in;
+ box-shadow:0 0 8px rgba(0,0,0,.6) !important;
+ -webkit-transition:all .1s ease-in; */
}
-.highlight {
- border:1px solid #aaa !important;
- background:#dfdfdf !important;
+.yui3-bright-highlight {
+ border:1px solid #fff !important;
+ /*background:#dfdfdf !important;
color:#444 !important;
font-weight:strong !important;
- box-shadow:0 1px 7px rgba(0,0,0,.4) !important;
-}
-
-.cramDownOpacity{
- opacity:0;
- -webkit-transition:opacity 5.7s ease-out;
- z-index:1000;
- background:#ccc;
- border-radius:10px;
-}
-
-a {
- outline:0
-}
-
-a:focus,a:active {
- outline:#777 dotted 1px;
- /*box-shadow: 0 0 5px rgba(0, 0, 255, 1);
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
- border:1px solid rgba(0,0,255, 0.8); */
-}
-a:hover {
- outline:none;
-}
-
-#tab {
- margin:20px 10% auto;
- padding:0;
-}
-#tab ul{
- margin:0 auto;
- padding:0;
-}
-#tab li{
- margin:14px 13px;
- text-align:center;
- line-height:3em;
- border:1px solid #ccc;
- list-style: none;
- display: inline-block;
- list-style-type: none;
- background:#ccc;
- border-radius:8px;
- padding:4px;
-
-
-}
-#tab a{
- text-decoration:none;
- font-weight: bold;
- color: #555;
- font-size: 2em;
- text-shadow: 0px 1px 0 white;
- vertical-align: middle;
- padding-left:10px;
- padding-right:10px;
- padding-top:5px;
- padding-bottom:5px;
-}
-
-#tab input {
- margin:14px 13px;
- height: 30px;
- width: 301px;
- border-radius: 9px;
- padding:3px;
-
-
-}
-
-
-
-.bright {
-margin:20px 4% auto;
-position:relative;
-background:#fff;/*background:#0089CF; is blue*/
-
-padding:10px;
-border-radius:3px;
-border:1px solid #eee;
-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
--moz-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
--webkit-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
-}
-
-.bright p,h3 {
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#888;
-text-shadow: 0px 1px 0 white;
+ box-shadow:0 1px 7px rgba(0,0,0,.4) !important;*/
}
-
-
-.center {
- text-align:center;
-}
-
-#footer{
-text-align:center;
-margin:20px 10% auto;
-position:relative;
-padding:10px;
-border-radius:2px;
-}
-
-#footer h3 {
-font-family: 'Waiting for the Sunrise', cursive;
-font-size:1.0em;
-color:#777;
-font-weight:strong;
-text-shadow: 0px 1px 0 white;
-}
-
-.gradient {
-background: -moz-linear-gradient(top, #aeaeae, #d8d8d8);
-background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#d8d8d8));
-border-radius: 3px;
--webkit-border-radius: 3px;
--moz-border-radius: 3px;
-}
View
223 src/gallery-navigate-easy/assets/skins/sam/gallery-navigate-easy-skin.css
@@ -1,223 +0,0 @@
-
-body {
- background:#F2F2F2;
- background: url(http://chetanankola.com/homepage/images/applelinen.png);
-}
-
-#header {
-margin:20px 10% auto;
-position:relative;
-
-padding:10px;
-border-radius:2px;
-/*background: -moz-linear-gradient(top, #aeaeae, #d8d8d8);
-background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa ));
-*/
-background:#fff;
-border-bottom: 4px solid #000;
-
-}
-
-#header h1 {
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:2.5em;
-color:#666;
-text-shadow: 0px 3px 0 white;
-}
-
-#main, #links {
-margin:20px 30% auto;
-background:#fff;
-padding-top:30px;
-padding-bottom:30px;
-border-bottom: 4px solid #000;
-}
-
-
-
-#rightbar {
-position:absolute;
-margin:70px 71% auto;
-background:#fff;
-padding:10px;
-padding-top:30px;
-padding-bottom:30px;
-border-bottom: 4px solid #000;
-margin-right: 100px;
-}
-
-#rightbar h2 {
-margin:20px 4% auto;
-position:relative;
-background:#eee;
-padding:10px;
-border-radius:2px;
-border:1px solid #cccccc;
--webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
--moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
-box-shadow:0 1px 7px rgba(0,0,0,.4);
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#444;
-font-weight:strong;
-text-shadow: 0px 1px 0 #eee;
-}
-
-#sidebar {
-position:absolute;
-margin:70px 10% auto;
-background:#fff;
-padding:10px;
-padding-top:30px;
-padding-bottom:30px;
-border-bottom: 4px solid #000;
-}
-
-#sidebar h2 {
-margin:20px 4% auto;
-position:relative;
-background:#eee;
-padding:10px;
-border-radius:2px;
-border:1px solid #cccccc;
--webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
--moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
-box-shadow:0 1px 7px rgba(0,0,0,.4);
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#444;
-font-weight:strong;
-text-shadow: 0px 1px 0 #eee;
-}
-
-#links li {
- margin:20px 4% auto;
- position:relative;
- padding:10px;
- border-radius:2px;
- border:1px solid #ccc;
- -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
- -moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
- box-shadow:0 1px 7px rgba(0,0,0,.4);
- background:#fff;
- list-style:none;
- text-decoration:none;
-}
-.dark {
-margin:20px 4% auto;
-position:relative;
-background:#ccc;
-padding:10px;
-border-radius:2px;
-border:1px solid #cccccc;
--webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
--moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
-box-shadow:0 1px 7px rgba(0,0,0,.4);
-}
-
-.dark p,h3 {
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#444;
-font-weight:strong;
-text-shadow: 0px 1px 0 #eee;
-}
-
-.containerhighlight {
- 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 #aaa !important;
- background:#dfdfdf !important;
- color:#444 !important;
- font-weight:strong !important;
- box-shadow:0 1px 7px rgba(0,0,0,.4) !important;
-}
-
-.cramDownOpacity{
- opacity:0;
- -webkit-transition:opacity 1.7s ease-in;
-}
-
-a {
- outline:0
-}
-
-a:hover,a:focus,a:active {
- outline:#777 dotted 2px;
- /*box-shadow: 0 0 5px rgba(0, 0, 255, 1);
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
- border:1px solid rgba(0,0,255, 0.8); */
-}
-
-.bright {
-margin:20px 4% auto;
-position:relative;
-background:#fff;/*background:#0089CF; is blue*/
-
-padding:10px;
-border-radius:3px;
-border:1px solid #eee;
-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
--moz-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
--webkit-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
-}
-
-.bright p,h3 {
-font-family: 'Signika Negative', sans-serif;
-font-family: 'Exo', sans-serif;
-font-family: 'Unna', serif;
-font-size:1.7em;
-color:#888;
-text-shadow: 0px 1px 0 white;
-}
-
-
-.center {
- text-align:center;
-}
-
-#footer{
-text-align:center;
-margin:20px 10% auto;
-position:relative;
-padding:10px;
-border-radius:2px;
-}
-
-#footer h3 {
-font-family: 'Waiting for the Sunrise', cursive;
-font-size:1.0em;
-color:#777;
-font-weight:strong;
-text-shadow: 0px 1px 0 white;
-}
-
-.gradient {
-background: -moz-linear-gradient(top, #aeaeae, #d8d8d8);
-background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#d8d8d8));
-border-radius: 3px;
--webkit-border-radius: 3px;
--moz-border-radius: 3px;
-}
View
9 src/gallery-navigate-easy/build.properties
@@ -19,11 +19,6 @@ 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, node-event-simulate
-# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
-component.supersedes=
-
-# The list of modules that are optional for this module. Used to set up the Y.add module call for YUI 3.
-component.optional=
# If your module has a skin file, set this flag to "true"
-component.skinnable=false
-#component.skinnable=true
+#component.skinnable=false
+component.skinnable=true
View
194 src/gallery-navigate-easy/js/navigate-easy.js
@@ -6,7 +6,7 @@
*/
-/*CONSTANTS*/
+/*CONSTANTS - application using this library shall not alter these values*/
var SHIFT_RIGHT_ARROW = 'down:39+shift',
SHIFT_LEFT_ARROW = 'down:37+shift',
@@ -19,9 +19,9 @@ var SHIFT_RIGHT_ARROW = 'down:39+shift',
_PREV = false,
- _CHILD_HIGHLIGHT_CLASS = 'transhighlight',
+ _ELEM_HIGHLIGHT_CLASS_DEFAULT = 'yui3-elem-highlight',
- _CONTAINER_HIGHLIGHT_CLASS = 'containerhighlight',
+ _CONTAINER_HIGHLIGHT_CLASS_DEFAULT = 'yui3-container-highlight',
SMOOTH_SCROLL = true,
@@ -29,10 +29,12 @@ var SHIFT_RIGHT_ARROW = 'down:39+shift',
ANIMTYPE_FOR_SMOOTHSCROLL = Y.Easing.easeIn,
+ REORDER_REGISTRY = true,
+
/** //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 = function (config) {
Nav.superclass.constructor.apply(this, arguments);
};
@@ -48,22 +50,26 @@ Nav.NAME = "Navigation";
* added by this class. The name of the attribute is the key,
* and the object literal value acts as the configuration
* object passed to addAttrs
+* Note: On new object creation by application, this template is auto mapped and is filled
*/
Nav.ATTRS = {
- activeRegistryIndex:{
- value: null
+ /*TODO: no need to validate this as it will be set to null in inititalizer even if app tampers with it*/
+ activeRegistryIndex: {
+ value: null /*value needs to range from */
},
-
+
registry: [],
-
- debug:{
+
+ debug: {
value: null
},
-
+ /*by default the container will be styled, app needs to disable it if it doesn want any styling */
styleContainer: {
- value: false
- }
+ value: true
+ },
+ defaultContainerHightlightStyle: {},
+ defaultElemHighlightStyle:{}
};
@@ -77,46 +83,76 @@ Y.extend(Nav, Y.Base, {
* - children[]: Node-Array that has all the child nodes of the navigable container
* - childIndexInFocus: Integer, that indicates the current index selected for the navigable container.
*/
- container:{
-
- node:null, /*DOM elem*/
-
- containerId:null, /*String*/
+ 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*/
+ 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*/
- pullToTop: false /*meant for slideshow kind of containers where you want child elements to scroll to top than being centered*/
+ pullToTop: false, /*meant for slideshow kind of containers where you want child elements to scroll to top than being centered*/
+
+ containerHighlightCustomStyle: null, /*application defined custom highlight for the container when selected*/
+
+ elemHighlightCustomStyle: null /* application defined custom highlight for the child element when selected*/
+
},
/**
- * Tasks MyClass needs to perform during
+ * Tasks needed to be performed during
* the init() lifecycle phase
* Function for initialization, it defaults registers the node provided in the contructor, during object creation.
*/
- initializer: function(cfg){
+ initializer: function (cfg) {
var self = this;
- this.reorderRegistryByRank();
- //this.set('registry',this.reorderRegistryByRank());
+ Y.one('head').append("<link href='../../../build/gallery-navigate-easy/assets/gallery-navigate-easy-core.css' rel='stylesheet' type='text/css'>");
+ this.setDefaultContainerHighlightStyle(this.get('defaultContainerHightlightStyle'));
+ this.setDefaultElemHighlightStyle(this.get('defaultElemHighlightStyle'));
+ this.set('activeRegistryIndex', null); /*to make sure anything set by the app is overridden */
+ if(REORDER_REGISTRY === true){
+ this.reorderRegistryByRank(); //this is not really needed but is useful when ranks are provided so that registry is in the order of the ranks
+ }
+ /*this.set('registry',this.reorderRegistryByRank());*/
this.activateContainerNavigation();
this.makeNextContainerNavigable();
- Y.one('body').on( "key", function( e ) {
+ Y.one('body').on("key", function (e) {
self.disableAllNavigation();
- },KEY_TO_DISABLE_NAVIGATION);
+ }, KEY_TO_DISABLE_NAVIGATION);
- Y.one('body').on( "key", function( e ) {
+ Y.one('body').on( "key", function (e) {
self.enableAllNavigation();
- },KEY_TO_ENABLE_NAVIGATION);
+ }, KEY_TO_ENABLE_NAVIGATION);
+ },
+
+
+ setDefaultContainerHighlightStyle: function (styleObj) {
+ if(styleObj) {
+ _CONTAINER_HIGHLIGHT_CLASS_DEFAULT = styleObj.className || _CONTAINER_HIGHLIGHT_CLASS_DEFAULT;
+
+ if(!styleObj.className) {
+ Y.log('no default className attribute: please specify as follows: new Y.Nav({defaultContainerHightlightStyle: {className:"my-defined-default-container-classname"} }', 'warn');
+ }
+ }
},
+ setDefaultElemHighlightStyle: function (styleObj) {
+ if(styleObj) {
+ _ELEM_HIGHLIGHT_CLASS_DEFAULT = styleObj.className || _ELEM_HIGHLIGHT_CLASS_DEFAULT;
+ if(!styleObj.className) {
+ Y.log('no default className attribute: please specify as follows: new Y.Nav({defaultElemHightlightStyle: {className:"my-defined-default-element-classname"} }', 'warn');
+ }
+ }
+ },
/**
* Function that enables all navigation on the page using keyboard
* @method enableAllNavigation
@@ -124,8 +160,8 @@ Y.extend(Nav, Y.Base, {
* @param : object :config{node:string,rank:integer,isHorizontal:boolean}
*
*/
- enableAllNavigation: function(){
- if( this.activateContainerNavigation() ){
+ enableAllNavigation: function () {
+ if(this.activateContainerNavigation()){
this.makeNextContainerNavigable( _NEXT );
}
},
@@ -137,7 +173,7 @@ Y.extend(Nav, Y.Base, {
* @param
*
*/
- disableAllNavigation:function(){
+ disableAllNavigation:function () {
this.deactivateRegisteredContainer(); //will also disable child events
this.deactivateContainerNavigation();
},
@@ -156,7 +192,9 @@ Y.extend(Nav, Y.Base, {
if(Y.one(node)){
registry[registry.length] = regEntry;
- this.reorderRegistryByRank();
+ if(REORDER_REGISTRY === true){
+ this.reorderRegistryByRank();
+ }
}else{
}
},
@@ -168,22 +206,25 @@ Y.extend(Nav, Y.Base, {
* @param : object :config{node:string}
*
*/
- deRegister: function(config){
+ deRegister: function(config) {
var regEntry = config || {},
nodeId = regEntry.node,
registry = this.get('registry'),
node = Y.one(nodeId),
index = null;
- if( node ){
+ if (node) {
index = this.isNodeInRegistry(nodeId);
- if( index !== null ){
- registry.splice(index,1);
- this.reorderRegistryByRank();
- }else{
- }
- }else{
- }
+ if(index !== null) {
+ registry.splice(index, 1); //var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2,0,"Lemon","Kiwi")
+ if(REORDER_REGISTRY === true){
+ this.reorderRegistryByRank();
+ }
+ }/* else {
+ }*/
+ }/* else {
+
+ }*/
},
/**
@@ -196,9 +237,8 @@ Y.extend(Nav, Y.Base, {
*/
isNodeInRegistry: function(nodeId){
var i = 0,
- registry = this.get('registry'),
- len = registry.length;
-
+ registry = this.get('registry'),
+ len = registry.length;
for( i=0; i<len; i++ ){
if( nodeId === registry[i].node ){
return i;
@@ -223,7 +263,7 @@ Y.extend(Nav, Y.Base, {
for(i=0;i<len;i++){
newregistry[i] = null;
- if(registry[i].rank ===undefined){
+ if(registry[i].rank === undefined){
registry[i].rank = null;
}
}
@@ -333,10 +373,15 @@ Y.extend(Nav, Y.Base, {
node = Y.one( registry[index].node );
if( node ){
+
+
+
isHorizontal = registry[index].isHorizontal || false;
pullToTop = registry[index].pullToTop || false;
+ containerHighlightCustomStyle = registry[index].containerStyle || null;
+ elemHighlightCustomStyle = registry[index].elemStyle || null;
this.deactivateRegisteredContainer();
- this.registerContainer(node,(index+1),isHorizontal,pullToTop); //+1 , since rank starts from 1 to length of registry
+ this.registerContainer(node,(index+1),isHorizontal,pullToTop,containerHighlightCustomStyle,elemHighlightCustomStyle); //+1 , since rank starts from 1 to length of registry
this.initiateNavigation();
} else {
this.deactivateRegisteredContainer();
@@ -384,6 +429,7 @@ Y.extend(Nav, Y.Base, {
if( Y.one( registry[regIndex].node ) ){//node is fine
return regIndex;
}else{
+ Y.log('invalid node is being tried to register or node could not be found', 'warn');
}
}
return regIndex;
@@ -400,10 +446,10 @@ Y.extend(Nav, Y.Base, {
* @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,pullToTop){
+ registerContainer: function(node,rank,isHorizontal,pullToTop,containerHighlightCustomStyle,elemHighlightCustomStyle){
if(node){
- this.updateChildren(node,rank,isHorizontal,pullToTop); //will update node-container.children as array
+ this.updateChildren(node,rank,isHorizontal,pullToTop,containerHighlightCustomStyle,elemHighlightCustomStyle); //will update node-container.children as array
}
},
@@ -420,7 +466,7 @@ Y.extend(Nav, Y.Base, {
* - 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,pullToTop){
+ updateChildren: function(node,rank,isHorizontal,pullToTop, containerStyleObj, elemStyleObj){
var childrenObj = node.all('> *'),
children = [],
@@ -431,6 +477,13 @@ Y.extend(Nav, Y.Base, {
children[i] = child;
});
+ if(containerStyleObj && containerStyleObj.className){
+ container.containerStyle = containerStyleObj.className;
+
+ }
+ if(elemStyleObj && elemStyleObj.className){
+ container.elemStyle = elemStyleObj.className;
+ }
container.isHorizontal = isHorizontal || false;
container.pullToTop = pullToTop ||false;
container.rank = rank;
@@ -463,24 +516,24 @@ Y.extend(Nav, Y.Base, {
this.killAllChildNavigationSubscription();
if(this.get('styleContainer')){
- this.removeHighlightonContainer();
+ this.removeHighlightOnContainer();
}
this.removeHighlightonCurrentChild();
this.resetContainer();
},
/**
- * @method removeHighlightonContainer
+ * @method removeHighlightOnContainer
* @protected
* remove any CSS highlight on the current navigable container
* @param
*
*/
- removeHighlightonContainer: function(){
+ removeHighlightOnContainer: function(){
var container = this.container;
if( container && container.node ){
- container.node.removeClass( _CONTAINER_HIGHLIGHT_CLASS );
+ container.node.removeClass( container.containerStyle || _CONTAINER_HIGHLIGHT_CLASS_DEFAULT );
}
},
@@ -495,7 +548,7 @@ Y.extend(Nav, Y.Base, {
var container = this.container;
if(container && container.node){
- container.node.addClass( _CONTAINER_HIGHLIGHT_CLASS );
+ container.node.addClass( container.containerStyle || _CONTAINER_HIGHLIGHT_CLASS_DEFAULT);
}
},
@@ -511,7 +564,7 @@ Y.extend(Nav, Y.Base, {
index = container.childIndexInFocus;
if( index !== null && index !== -1 ){
- container.children[index].removeClass( _CHILD_HIGHLIGHT_CLASS );
+ container.children[index].removeClass( this.container.elemStyle || _ELEM_HIGHLIGHT_CLASS_DEFAULT);
}
},
@@ -543,7 +596,9 @@ Y.extend(Nav, Y.Base, {
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,
- pullToTop: false
+ pullToTop: false,
+ containerStyle:null,
+ elemStyle:null
};
this.wasLastChild = false;
},
@@ -612,7 +667,7 @@ Y.extend(Nav, Y.Base, {
//xy[0] = xy[0] +50;
//xy[1] = xy[1] -50;
xy = [200,200];
- this.splash('Rank:'+container.rank+'<br>id:'+container.node.generateID()+'<br>isHorizontal:'+container.isHorizontal,xy);
+ this.splash('style=' + this.get('styleContainer') +'Rank:'+container.rank+'<br>id:'+container.node.generateID()+'<br>isHorizontal:'+container.isHorizontal,xy);
}
}
@@ -620,12 +675,10 @@ Y.extend(Nav, Y.Base, {
Y.BodySubscr = {};
if( container.isHorizontal ){
Y.BodySubscr.keyright = Y.one('body').on('right',Y.bind(this.onMyKeyDown,this));
- /** ON KeyRight **/
Y.BodySubscr.keyleft = Y.one('body').on('left',Y.bind(this.onMyKeyUp,this));
Y.one('body').simulate("keydown", { keyCode: 39 });
} else {
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 });
}
@@ -686,6 +739,8 @@ Y.extend(Nav, Y.Base, {
childIndexInFocus,
newindex;
+
+
if( container ){
e.preventDefault();
childIndexInFocus = container.childIndexInFocus;
@@ -723,12 +778,12 @@ Y.extend(Nav, Y.Base, {
getNextIndex: function(childIndexInFocus){
var container = this.container,
numofChildren = container.children.length;
- if(childIndexInFocus!=-1){
- container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
+ if(childIndexInFocus != -1){
+ container.children[childIndexInFocus].removeClass( this.container.elemStyle || _ELEM_HIGHLIGHT_CLASS_DEFAULT);
}
- if(childIndexInFocus===numofChildren-1) {
- childIndexInFocus=-1;
- this.wasLastChild= true;
+ if(childIndexInFocus === numofChildren-1) {
+ childIndexInFocus = -1;
+ this.wasLastChild = true;
} else {
this.wasLastChild = false;
}
@@ -747,7 +802,7 @@ Y.extend(Nav, Y.Base, {
numofChildren = container.children.length;
if( childIndexInFocus >= 0 ){
- container.children[childIndexInFocus].removeClass(_CHILD_HIGHLIGHT_CLASS);
+ container.children[childIndexInFocus].removeClass( this.container.elemStyle || _ELEM_HIGHLIGHT_CLASS_DEFAULT);
}
if( childIndexInFocus === 0 ) {
@@ -769,7 +824,7 @@ Y.extend(Nav, Y.Base, {
_scroll: function(y){
- if(!SMOOTH_SCROLL) {
+ if( !SMOOTH_SCROLL ) {
window.scroll(0,y);
} else {
@@ -841,14 +896,13 @@ Y.extend(Nav, Y.Base, {
* @param: Node, representing the child that should gain focus.
*
*/
- bringChildtoFocus: function( childInFocus ){
- /**related to getting the first link on reaching a child node**/
- var link = childInFocus.all('a'),
+ bringChildtoFocus: function( childInFocus){
+ var link = childInFocus.all('a'),/**related to getting the first link on reaching a child node**/
linkArr = [],
amounttoScroll,
debug_alldim={};
- childInFocus.addClass( _CHILD_HIGHLIGHT_CLASS ).focus();
+ childInFocus.addClass( this.container.elemStyle || _ELEM_HIGHLIGHT_CLASS_DEFAULT ).focus();
if( this.anim && this.anim.get('running') ){
this.anim.pause();
View
288 src/gallery-navigate-easy/tests/index.css
@@ -0,0 +1,288 @@
+
+body {
+ background:#F2F2F2;
+ background: url(http://chetanankola.com/homepage/images/applelinen.png);
+}
+
+#header {
+margin:20px 10% auto;
+position:relative;
+
+padding:10px;
+border-radius:2px;
+/*background: -moz-linear-gradient(top, #aeaeae, #d8d8d8);
+background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa ));
+*/
+background:#fff;
+border-bottom: 4px solid #000;
+
+}
+
+#header h1 {
+font-family: 'Signika Negative', sans-serif;
+font-family: 'Exo', sans-serif;
+font-family: 'Unna', serif;
+font-size:2.5em;
+color:#666;
+text-shadow: 0px 3px 0 white;
+}
+
+#main, #links {
+margin:20px 30% auto;
+background:#fff;
+padding-top:30px;
+padding-bottom:30px;
+border-bottom: 4px solid #000;
+}
+
+
+
+#rightbar {
+position:absolute;
+margin:70px 71% auto;
+background:#fff;
+padding:10px;
+padding-top:30px;
+padding-bottom:30px;
+border-bottom: 4px solid #000;
+margin-right: 100px;
+}
+
+#rightbar h2 {
+margin:20px 4% auto;
+position:relative;
+background:#eee;
+padding:10px;
+border-radius:2px;
+border:1px solid #cccccc;
+-webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
+-moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
+box-shadow:0 1px 7px rgba(0,0,0,.4);
+font-family: 'Signika Negative', sans-serif;
+font-family: 'Exo', sans-serif;
+font-family: 'Unna', serif;
+font-size:1.7em;
+color:#444;
+font-weight:strong;
+text-shadow: 0px 1px 0 #eee;
+}
+
+#sidebar {
+position:absolute;
+margin:70px 10% auto;
+background:#fff;
+padding:10px;
+padding-top:30px;
+padding-bottom:30px;
+border-bottom: 4px solid #000;
+}
+
+#sidebar h2 {
+margin:20px 4% auto;
+position:relative;
+background:#eee;
+padding:10px;
+border-radius:2px;
+border:1px solid #cccccc;
+-webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
+-moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
+box-shadow:0 1px 7px rgba(0,0,0,.4);
+font-family: 'Signika Negative', sans-serif;
+font-family: 'Exo', sans-serif;
+font-family: 'Unna', serif;
+font-size:1.7em;
+color:#444;
+font-weight:strong;
+text-shadow: 0px 1px 0 #eee;
+}
+
+
+
+
+#links li {
+ margin:20px 4% auto;
+ position:relative;
+ padding:10px;
+ border-radius:2px;
+ border:1px solid #ccc;
+ -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
+ -moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
+ box-shadow:0 1px 7px rgba(0,0,0,.4);
+ background:#fff;
+ list-style:none;
+ text-decoration:none;
+}
+.dark {
+margin:20px 4% auto;
+position:relative;
+background:#ccc;
+padding:10px;
+border-radius:2px;
+border:1px solid #cccccc;
+-webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);
+-moz-box-shadow:0 1px 7px rgba(0,0,0,.4);
+box-shadow:0 1px 7px rgba(0,0,0,.4);
+}
+
+.dark p,h3 {
+font-family: 'Signika Negative', sans-serif;
+font-family: 'Exo', sans-serif;
+font-family: 'Unna', serif;
+font-size:1.7em;
+color:#444;
+font-weight:strong;
+text-shadow: 0px 1px 0 #eee;
+}
+
+
+.containerhighlight {
+ border:4px solid #ccc !important;
+ box-shadow:0 0 7px rgba(0,0,0,.4) !important;
+ -webkit-transition:box-shadow 0.1s !important;
+}
+
+.transhighlight{
+ border:1px solid #aaa !important;
+ background:#dfdfdf !important;
+ color:#444 !important;
+ font-weight:strong !important;
+ box-shadow:0 0px 8px rgba(0,0,0,.6) !important;
+ -webkit-transition:all .1s ease-in;
+}
+
+
+.main-elem-custom-highlight{
+ border:3px solid green !important;
+}
+.main-container-custom-highlight {
+ border:4px solid yellow !important;
+}
+
+.highlight {
+ border:1px solid #aaa !important;
+ background:#dfdfdf !important;
+ color:#444 !important;
+ font-weight:strong !important;
+ box-shadow:0 1px 7px rgba(0,0,0,.4) !important;
+}
+
+.cramDownOpacity{
+ opacity:0;
+ -webkit-transition:opacity 5.7s ease-out;
+ z-index:1000;
+ background:#ccc;
+ border-radius:10px;
+}
+
+a {
+ outline:0
+}
+
+a:focus,a:active {
+ outline:#777 dotted 1px;
+ /*box-shadow: 0 0 5px rgba(0, 0, 255, 1);
+ -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
+ -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
+ border:1px solid rgba(0,0,255, 0.8); */
+}
+a:hover {
+ outline:none;
+}
+
+#tab {
+ margin:20px 10% auto;
+ padding:0;
+}
+#tab ul{
+ margin:0 auto;
+ padding:0;
+}
+#tab li{
+ margin:14px 13px;
+ text-align:center;
+ line-height:3em;
+ border:1px solid #ccc;
+ list-style: none;
+ display: inline-block;
+ list-style-type: none;
+ background:#ccc;
+ border-radius:8px;
+ padding:4px;
+
+
+}
+#tab a{
+ text-decoration:none;
+ font-weight: bold;
+ color: #555;
+ font-size: 2em;
+ text-shadow: 0px 1px 0 white;
+ vertical-align: middle;
+ padding-left:10px;
+ padding-right:10px;
+ padding-top:5px;
+ padding-bottom:5px;
+}
+
+#tab input {
+ margin:14px 13px;
+ height: 30px;
+ width: 301px;
+ border-radius: 9px;
+ padding:3px;
+
+
+}
+
+
+
+.bright {
+margin:20px 4% auto;
+position:relative;
+background:#fff;/*background:#0089CF; is blue*/
+
+padding:10px;
+border-radius:3px;
+border:1px solid #eee;
+box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
+-moz-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
+-webkit-box-shadow:0 1px 6px rgba(0, 0, 0, 0.3);
+}
+
+.bright p,h3 {
+font-family: 'Signika Negative', sans-serif;
+font-family: 'Exo', sans-serif;
+font-family: 'Unna', serif;
+font-size:1.7em;
+color:#888;
+text-shadow: 0px 1px 0 white;
+}
+
+
+.center {
+ text-align:center;
+}
+
+#footer{
+text-align:center;
+margin:20px 10% auto;
+position:relative;
+padding:10px;
+border-radius:2px;
+}
+
+#footer h3 {
+font-family: 'Waiting for the Sunrise', cursive;
+font-size:1.0em;
+color:#777;
+font-weight:strong;
+text-shadow: 0px 1px 0 white;
+}
+
+.gradient {
+background: -moz-linear-gradient(top, #aeaeae, #d8d8d8);
+background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#d8d8d8));
+border-radius: 3px;
+-webkit-border-radius: 3px;
+-moz-border-radius: 3px;
+}
View
57 src/gallery-navigate-easy/tests/index.html
@@ -2,7 +2,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
- <title>Javascript and CSS3 best practices</title>
+ <title>NAVIGATE EASY YUI GALLERY DEMO</title>
<meta http-equiv="Content-Language" content="en_US" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
@@ -13,7 +13,8 @@
<link href='http://fonts.googleapis.com/css?family=Signika+Negative|Exo|Unna' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>
- <link href='../../../build/gallery-navigate-easy/assets/gallery-navigate-easy-core.css' rel='stylesheet' type='text/css'>
+ <!--<link href='../../../build/gallery-navigate-easy/assets/gallery-navigate-easy-core.css' rel='stylesheet' type='text/css'>-->
+ <link href='index.css' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/gif" href="http://chetanankola.com/homepage/images/logo.gif" />
</head>
@@ -93,6 +94,16 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
<div class="bright"><p> be able to register a new node without specifying it in the config</p></div>
+ <div class="bright"><p>
+
+ cd yui3-gallery <br>
+
+#if not already created <br>
+mkdir -p src/gallery-my.custom.module/assets/skins/sam <br>
+
+touch src/gallery-my.custom.module/assets/gallery-my.custom.module-core.css<br>
+touch src/gallery-my.custom.module/assets/skins/sam/gallery-my.custom.module-skin.css<br>
+ </p></div>
@@ -127,14 +138,8 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
<div class="bright"> <p> CUSTOM CSS- for highlighting is extremely important!! </p> </div>
<div class="bright"> <p> provide a flag for the container node in the registry to specify if all the children needs to be center-viewed or scrolled-top for eg: scroll-top is a awesome usecase for "slideshow"</p> </div>
<div class="bright"> <p> Also think about integrating this with carousal where you can move to next image by left and right arrow.</p> </div>
-
-
</div>
-
-
-
-
<ul id="links">
<li> `Every time this happens its a FAIL` </li>
<li> I mean Epic Fail! </li>
@@ -147,16 +152,33 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
<!-- SCRIPT -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>
- <script type="text/javascript" src="../../../build/gallery-navigate-easy/gallery-navigate-easy-debug.js"></script>
-
+ <!--<script type="text/javascript" src="../../../../../yui3/build/yui/yui.js"></script>-->
+ <!--<script type="text/javascript" src="../../../../../yui3/build/loader/loader.js"></script>-->
+ <!--<script type="text/javascript" src="../../../build/gallery-navigate-easy/gallery-navigate-easy-debug.js"></script> -->
+ <script type="text/javascript">
+ var Y = YUI({
+ modules: {
+ 'gallery-navigate-easy': '../../../build/gallery-navigate-easy/gallery-navigate-easy-debug.js'
+ }
+ })
+
+ /*var loader = new Y.Loader({
+ base: '../../',
+ root: 'build/',
+ combine: true,
+ require: ['gallery-navigate-easy']
+ });
+ var out = loader.resolve(true);
+
+ console.log(out);*/
+ </script>
<!-- http://yui.yahooapis.com/combo?3.6.0pr3/build/gallery-navigate-easy/assets/skins/sam/gallery-navigate-easy.css when you set skin to true this is where default is picked from-->
<script type="text/javascript">
// YUI SANDBOX
- YUI().use('gallery-navigate-easy', function (Y) {
+ Y.use('gallery-navigate-easy', function (Y) {
//var body = new Y.Nav({node:'body' }).initiateNavigation();
//var main = new Y.Nav({node:'#main' }).initiateNavigation();
//var sidebar = new Y.Nav({node:'#sidebar' }).initiateNavigation();
@@ -166,16 +188,21 @@ <h2 id="bleh"><a style="display:block;" href="http://facebook.com">Facebook Goss
//Y.Nav.attachNavigation('main');
var Nav = new Y.Nav({
+ defaultContainerHightlightStyle: {className:'containerhighlight'},
+ defaultElemHighlightStyle: {className: 'transhighlight'},
registry:[
- {node:'#main',pullToTop:true },
+ { node:'#main',
+ pullToTop:true,
+ elemStyle:{ className:'main-elem-custom-highlight' },
+ containerStyle:{ className:'main-container-custom-highlight'}
+ },
{node:'#rightbar',rank:3},
{node:'#links',rank:4},
{node:'#sidebar',rank:1},
{node:'#tab ul',isHorizontal:true}
],
debug:true,
- styleContainer:true, /*optional*/
-
+ styleContainer: true
});
Nav.register({node:'#header'});
Please sign in to comment.
Something went wrong with that request. Please try again.