Permalink
Browse files

gallery-2011.05.12-13-26 santhoshbabun gallery-spotlight

  • Loading branch information...
1 parent 81ad470 commit efe4961df0c1d28ec3a1964f1c1c246f1cff2dea YUI Builder committed May 12, 2011
@@ -1,15 +1,34 @@
-.yui3-skin-sam .spotlight{
+.yui3-skin-sam .spotlight {
+ -moz-border-radius:5px 5px;
+ -webkit-border-radius:5px 5px;
+ border:1px solid #ccc;
+ padding:10px;
width:310px;
- background:none;
- border:0;
- margin-top:-25px;
- background:transparent;
}
+.spotlight .spot-content{
+ max-width:300px;
+ max-height:300px;
+}
+.spotlight .spot-content img{
+ max-width:300px;
+ max-height:300px;
+}
+
.yui3-skin-sam .spotlight .yui3-carousel {border:0px;}
.yui3-skin-sam .spotlight .yui3-carousel-nav{background:none;}
.yui3-skin-sam .spotlight .yui3-carousel-nav > ul{display:none;}
.yui3-skin-sam .spotlight .yui3-carousel-content li{height:140px;width:94px;margin-right:5px;border:0;}
.yui3-skin-sam .spotlight .yui3-carousel-content li.yui3-carousel-selected{border:0;}
+.yui3-skin-sam .spotlight li.yui3-carousel-selected .arrow p{color:#fff;font-weight:bold;}
+
+.yui3-skin-sam .spotlight .yui3-carousel-button{
+ background-image:url("http://l.yimg.com/a/i/us/sh/gr/deals/deals_details_sprite_2.png")!important;
+ background-position:-41px -236px!important;background-repeat:no-repeat!important;
+}
+.yui3-skin-sam .spotlight .yui3-carousel-first-button{margin-right:50px;background-position:0 -236px!important;position: relative;right:-15px;}
+.yui3-skin-sam .spotlight .yui3-carousel-first-button-disabled{background-position:0 -265px!important;}
+.yui3-skin-sam .spotlight .yui3-carousel-button-disabled{background-position:-41px -265px!important;}
+
li.yui3-carousel-selected .arrow{
border:1px solid #222;
-webkit-border-radius:5px 5px;
@@ -40,12 +59,3 @@ li.yui3-carousel-selected .arrow:after{
padding:2px 2px 5px 2px;
margin:0px;
}
-.yui3-skin-sam .spotlight li.yui3-carousel-selected .arrow p{color:#fff;font-weight:bold;}
-
-.yui3-skin-sam .spotlight .yui3-carousel-button{
- background-image:url("http://l.yimg.com/a/i/us/sh/gr/deals/deals_details_sprite_2.png")!important;
- background-position:-41px -236px!important;background-repeat:no-repeat!important;
-}
-.yui3-skin-sam .spotlight .yui3-carousel-first-button{margin-right:50px;background-position:0 -236px!important;}
-.yui3-skin-sam .spotlight .yui3-carousel-first-button-disabled{background-position:0 -265px!important;}
-.yui3-skin-sam .spotlight .yui3-carousel-button-disabled{background-position:-41px -265px!important;}
@@ -17,7 +17,7 @@ component=gallery-spotlight
component.jsfiles=spotlight.js
# The list of modules this component. requires. Used to set up the Y.add module call for YUI 3.
-component.requires=gallery-carousel, gallery-carousel-anim, substitute
+component.requires=gallery-carousel, gallery-carousel-anim, substitute, gallery-lazyloadimages
# The list of modules this component. supersedes. Used to set up the Y.add module call for YUI 3.
component.supersedes=
@@ -3,22 +3,70 @@ function Spotlight(conf) {
}
Spotlight.NAME = "Spotlight";
Spotlight.ATTRS = {
- data : {},
- liTplId: {},
- contentTplId: {},
- containerId: {},
- numVisible:3,
- height: 200,
+ data : {}, // Mandatory - Should be JSON.
+ liTplId: {},//Optional, if not provided will use the default template at liTpl
+ contentTplId: {}, // Optional, if not provided will use the default template at conTpl
+ containerId: {}, // Mandatory
+ numVisible:3,// Optional
+ height: 200,// Optional
width: 300
};
Y.extend(Spotlight, Y.Base, {
+ /**
+ * Returns the innerHtml of the given htmlid
+ *
+ * @param {String} htmlid of the element whose innerHtml need to be fetched.
+ *
+ */
+ getHtml : function (htmlid) {
+ var html, htmlNode;
+ if(htmlid){
+ htmlNode = Y.one("#"+htmlid);
+ if(htmlNode){
+ html = htmlNode.get("innerHTML");
+ }
+ }
+ return html;
+ },
+ /**
+ * Function which build the html from data and template and appends it to the container
+ *
+ * @param {String} tpl html template String
+ * @param {String} conId ContainerId to which the built html should be appended.
+ * @param {String} data JSON data
+ *
+ */
+ templatize : function (tpl, conId, data) {
+ var self = this, content = '', conNode;
+ conNode = Y.one("#" + conId);
+
+ if(data && data instanceof Array){
+ Y.each(data, function (i) {
+ content += Y.substitute(tpl, i);
+ }, this);
+ }
+ else{
+ content += Y.substitute(tpl, data);
+ }
+ if(conNode){
+ conNode.set('innerHTML', content);
+ Y.LazyloadImages.processnow("#"+conId);
+ }
+ },
+ /**
+ *
+ * Registers the Carousel used in the spotlight and sets up the Event handling
+ *
+ */
register : function () {
- var self = this, contId, carcontId, spotNode, carousel, data, conTplId, olheight;
+ var self = this, contId, carcontId, spotNode, carousel, data, olheight, conHtml;
contId = self.get('containerId');
carcontId = contId + "-carousel";
spotNode = Y.one("#" + contId + "-content");
data = self.get('data');
- conTplId = self.get('contentTplId');
+
+ conHtml = self.getHtml(self.get('contentTplId'));
+ conHtml = (conHtml)?conHtml:self.conTpl;
carousel = new Y.Carousel({
boundingBox: "#" + carcontId,
@@ -32,8 +80,8 @@ Y.extend(Spotlight, Y.Base, {
carousel.on("itemSelected", function (index) {
var itemdata;
itemdata = data[index.pos];
- if(itemdata && conTplId){
- self.templatize(conTplId, contId + "-content", itemdata);
+ if(itemdata && conHtml){
+ self.templatize(conHtml, contId + "-content", itemdata);
}
});
olheight = self.get('height')-40+"px";
@@ -42,62 +90,65 @@ Y.extend(Spotlight, Y.Base, {
carousel.scrollTo(1);
carousel.scrollTo(0);
},
- templatize : function (tplId, conId, data) {
- var self = this, content = '', htmlSnip = "", tplNode, conNode;
- tplNode = Y.one("#" + tplId);
- conNode = Y.one("#" + conId);
-
- if(tplNode){
- htmlSnip = tplNode.get('innerHTML');
- //htmlSnip = unescape(htmlSnip);
- }
- if(data instanceof Array){
- Y.each(data, function (i) {
- content += Y.substitute(htmlSnip, i);
- }, this);
- }
- else{
- content += Y.substitute(htmlSnip, data);
- }
- conNode.set('innerHTML', content);
- self.lazyLoad(conId);
- },
- lazyLoad : function (conId){
- Y.all("#" + conId + " img[xrc]").each(function (el, i) {
- var url = el.getAttribute('xrc');
- if(url){
- el.setAttribute('src', url);
- el.removeAttribute('xrc');
- }
- });
- },
- doSkeleton : function(){
- var self = this, data = {}, skeleton, contId, conNode;
- contId = self.get('containerId');
+ /**
+ * Builds the neccessary empty DOM's for Spotlight
+ *
+ * @param {String} Container Id of the Spotlight
+ *
+ */
+ buildSkeleton : function(contId){
+ var self = this, data = {}, skeleton, conNode;
conNode = Y.one("#"+contId);
data.containerId = contId;
skeleton = Y.substitute(self.tpl,data);
if(conNode){
conNode.set("innerHTML",skeleton);
}
},
+ /**
+ * Builds the Thumbnails (list of small version of the images) for the Carousel
+ *
+ * @param {String} Container Id of the Spotlight
+ *
+ */
+ buildThumbnails : function (contId){
+ var self = this, liHtml;
+ liHtml = self.getHtml(self.get('liTplId'));
+ liHtml = (liHtml)?liHtml:self.liTpl;
+ liHtml = "<li>" + liHtml + "</li>";
+ self.templatize(liHtml, contId+"-ol",self.get('data'));
+ },
+ /**
+ * The Main Function to be executed on the Spotlight instance, will do everything needed.
+ */
process : function () {
- var self = this, contId, data, conTplId, liTplId;
+ var self = this, contId, data;
contId = self.get('containerId');
data = self.get('data');
- conTplId = self.get('contentTplId');
- liTplId = self.get('liTplId');
-
- if(!contId || !data || !conTplId){
+ if(!contId || !data){
+ // These two are mandatory inputs if not provided dont do anything return back.
return;
}
- self.doSkeleton();
- self.templatize(liTplId, contId+"-ol",self.get('data'));
+ self.buildSkeleton(contId);
+ self.buildThumbnails(contId);
self.register();
},
+ /**
+ * The Template for basic skeleton of the carousel.
+ */
tpl : "<div class=\"spotlight\"><div id=\"{containerId}-carousel\" class=\"yui3-carousel yui3-carousel-horizontal\">" +
"<ol id=\"{containerId}-ol\"></ol></div>" + "<div id=\"{containerId}-content\"></div>" +
- "<div id=\"{containerId}-hiddencontent\" style=\"dislay:none\"></div></div>"
+ "<div id=\"{containerId}-hiddencontent\" style=\"dislay:none\"></div></div>",
+
+ /**
+ * The default template for the thumbnail. it can be overwritten using the input attribute
+ */
+ liTpl: "<div class=\"arrow\"><img data-src=\"{photo}\" class=\"thumbnail\" title=\"{title}\" alt=\"{title}\"><p class=\"title\">{title}</p></div>",
+
+ /**
+ * The default template for the spotlight content. it can be overwritten using the input attribute
+ */
+ conTpl:"<div class=\"spot-content\"><img data-src=\"{photo}\"/></div>"
});
Y.Spotlight = Spotlight;
@@ -5,14 +5,14 @@
<title>Spotlight - YUI Gallery Module Example</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Santhosh Babu Nageshwar Rao"><!-- Date: 2011-02-15 -->
- <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2010.10.13-20-59/build/gallery-carousel/assets/skins/sam/gallery-carousel.css">
+ <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/gallery-2011.05.04-20-03/build/gallery-carousel/assets/skins/sam/gallery-carousel.css">
<link rel="stylesheet" type="text/css" href="../../../build/gallery-spotlight/assets/gallery-spotlight.css">
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-debug.js" type="text/javascript"></script>
</head>
<body class="yui3-skin-sam">
<h3>Spotlight - YUI Gallery Module Example</h3>
<div id="container"></div>
- <div id="templates" style="display:none">
+ <!--div id="templates" style="display:none">
<div id="content-template">
<div><img xrc="{photo}" width="300px" heigh="450px"/></div>
</div>
@@ -24,15 +24,15 @@
</div>
</li>
</div>
- </div>
+ </div-->
<script type="text/javascript">
- YUI({gallery: "gallery-2011.04.27-18-16"}).use("node",function(Y){
+ YUI({gallery: "gallery-2011.05.04-20-03",filter:"raw",debug:true}).use("node",function(Y){
Y.on("domready",function(){
- Y.use("gallery-spotlight",function(Y){
+ Y.use("gallery-spotlight","gallery-lazyloadimages",function(Y){
var spotlight = new Y.Spotlight({
data : JSON_Data,
- liTplId: "li-template",
- contentTplId:"content-template",
+ /*liTplId: "li-template",
+ contentTplId:"content-template",*/
containerId:"container",
height:180,
width:300

0 comments on commit efe4961

Please sign in to comment.