Permalink
Browse files

Resize logos fix and simple carousel for 50%-100% window size

  • Loading branch information...
1 parent f8fe9b9 commit a360a6d1dadc43f0a54d761650cd313f54dba21e @lstalis lstalis committed Aug 13, 2012
Showing with 142 additions and 29 deletions.
  1. +86 −14 scripts/index.js
  2. +56 −15 styles/index.css
View
@@ -3,6 +3,7 @@ var domLoaded = false;
var Data = function(url){
var self = this;
this.loaded = false;
+
this.data = null;
this.rq = new XMLHttpRequest();
var rq = this.rq;
@@ -41,14 +42,17 @@ var Data = function(url){
if(widget.preferences.categories.length==0){
for(var i=0;i<self.data.length;i++)cData.push(i);
-
+
return;
};
categories = '|'+cats.join('|')+'|';
for(var i=0;i<self.data.length;i++)if(cats.indexOf(String(self.data[i].category))!=-1)cData.push(i);
};
+ this.length = function(){
+ return cData.length;
+ };
this.getNext = function(index){
updateList();
@@ -63,7 +67,7 @@ var Data = function(url){
break;
};
- return cData[(item+1)%cData.length];
+ return item+1==cData.length?-1:cData[item+1];
};
rq.addEventListener('readystatechange',function(){
@@ -98,32 +102,71 @@ var Carousel = function(){
return;
};
- var data = Data.data[i];
- current = i;
- var maxW = parseInt(window.getComputedStyle(document.querySelector('#list section .logo img')).maxWidth);
- var maxH = parseInt(window.getComputedStyle(document.querySelector('#list section .logo img')).maxHeight);
+
+
+
+ var maxW, maxH;
+
+ if(window.outerWidth>249){
+ maxW = parseInt(window.getComputedStyle(document.querySelector('#list section .logo img')).maxWidth);
+ maxH = parseInt(window.getComputedStyle(document.querySelector('#list section .logo img')).maxHeight);
+ } else {
+ maxW = parseInt(window.outerWidth)-10;
+ maxH = parseInt(window.outerHeight)-10;
+ };
+
+ var image = new Image();
var img = section.getElementsByTagName('img')[0];
- img.onload = function(){
+ if(window.outerWidth<340&&current!=-1){
+
+ var src = Data.data[current].logo;
+
+ while(Data.data[i].logo==src&&i!=current){
+ i = Data.getNext(i);
+ };
+
+ if(Data.data[i].logo==src){
+ section.classList.add('empty');
+ current = -1;
+ callback();
+ return;
+ };
+ };
+
+ current = i;
+
+ var data = Data.data[i];
+
+ image.onload = function(){
var ow = this.width;
var oh = this.height;
+
+ img.setAttribute('data-width',ow);
+ img.setAttribute('data-height',oh);
+
if(ow/oh>maxW/maxH){
var w = ow>maxW?maxW:ow;
- this.style.width = w+'px';
- this.style.marginTop = parseInt(maxH*0.5-w*oh/ow*0.5)+'px';
+ img.style.width = w+'px';
+ img.style.height = 'auto';
+ img.style.marginTop = parseInt((maxH-w*oh/ow)*0.5)+'px';
} else {
var h = oh>maxH?maxH:oh;
- this.style.height = h+'px';
- this.style.marginTop = parseInt(maxH*0.5-h/2)+'px';
- };
+ img.style.height = h+'px';
+ img.style.width = 'auto';
+ img.style.marginTop = parseInt((maxH-h)*0.5)+'px';
+ };
+
callback();
};
+ image.src = data.logo;
img.src = data.logo;
img.alt = data.brand;
section.getElementsByClassName('promoName')[0].textContent = data.name;
section.getElementsByTagName('h2')[0].textContent = data.tag;
section.getElementsByTagName('p')[0].textContent = data.description;
+
};
elements[0].style.left = 0;
@@ -189,7 +232,6 @@ var Carousel = function(){
},widget.preferences.time*1000);
},10000);
-
self.fill(elements[parseInt(elements[0].style.left)==0?1:0],Data.getNext(current),rotateMove);
};
@@ -205,5 +247,35 @@ window.addEventListener("load",function(e){
domLoaded = true;
if(Data.data!=null&&typeof Carousel == 'function')Carousel = new Carousel();
},false);
-
+window.addEventListener('resize',function(e){
+ var maxW, maxH;
+
+ if(window.outerWidth>249){
+ maxW = parseInt(window.getComputedStyle(document.querySelector('#list section .logo img')).maxWidth);
+ maxH = parseInt(window.getComputedStyle(document.querySelector('#list section .logo img')).maxHeight);
+ } else {
+ maxW = parseInt(window.outerWidth)-10;
+ maxH = parseInt(window.outerHeight)-10;
+ };
+
+ var img = document.getElementsByTagName('img');
+
+ for(var i=0;i<img.length;i++)if(img[i].getAttribute('data-width')!=undefined&&img[i].getAttribute('data-height')!=undefined){
+
+ var ow = parseInt(img[i].getAttribute('data-width'));
+ var oh = parseInt(img[i].getAttribute('data-height'));
+
+ if(ow/oh>maxW/maxH){
+ var w = ow>maxW?maxW:ow;
+ img[i].style.width = w+'px';
+ img[i].style.height = 'auto';
+ img[i].style.marginTop = parseInt((maxH-w*oh/ow)*0.5)+'px';
+ } else {
+ var h = oh>maxH?maxH:oh;
+ img[i].style.height = h+'px';
+ img[i].style.width = 'auto';
+ img[i].style.marginTop = parseInt((maxH-h)*0.5)+'px';
+ };
+ };
+},false);
View
@@ -225,30 +225,71 @@ body{
max-width: 136px;
}
}
-@media (max-width: 249px) and (min-width: 220px){
- #logo{
- background-image: url(../images/ck_logo_200.png);
- background-size: 200px 80px;
- }
-}
-@media (max-width: 249px){
- body #bg{display: none;}
+@media (max-width: 249px) and (min-width: 130px){
body{
display: block;
- background: #ebe7e0 url(../images/lines_bg.png) repeat 50% 0;
+ background-color: #fff;
}
- #logo{
+ body #bg{
+ padding: 0;
+ width: 100%;
+ height: 100%;
display: block;
}
-}
-@media (max-width: 219px) and (min-width: 130px){
- #logo{
- background-image: url(../images/ck_logo_120.png);
+ body #bgWrap{
+ background-color: transparent;
+ background-image: none;
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ box-shadow: none;
+ display: block;
+ }
+ #list{
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ position: relative;
+ left: 0;
+ top: 0;
+ }
+ #list section.empty{
+ height: 100%;
+ background: transparent url(../images/ck_logo_120.png) no-repeat 50% 50%;
background-size: 120px 48px;
- }
+ }
+ #list section.empty .logoLeft{
+ visibility: hidden;
+ }
+ #list section header,#list section p{
+ display: none;
+ }
+ #list section .logoLeft{
+ background-image: none;
+ padding-left: 0;
+ }
+ #list section .logoRight{
+ background-image: none;
+ padding-right: 0;
+ }
+ #list section .logo{
+ height: auto;
+ padding: 5px 0 0 0;
+ background-image: none;
+ }
+ #list section .logo img{
+ max-width: 100%;
+ max-height: 100%;
+ }
}
@media (max-width: 129px){
+ body #bg{display: none;}
+ body{
+ display: block;
+ background: #ebe7e0 url(../images/lines_bg.png) repeat 50% 0;
+ }
#logo{
+ display: block;
background-image: url(../images/ck_logo_62.png);
background-size: 60px 24px;
}

0 comments on commit a360a6d

Please sign in to comment.