[Xfce4-commits] [www/www.xfce.org] 02/29: Update the slider; use less JS and more CSS. Support flexible width content area.
noreply at xfce.org
noreply at xfce.org
Sun May 21 22:00:44 CEST 2017
This is an automated email from the git hooks/post-receive script.
k n o m e p u s h e d a c o m m i t t o b r a n c h m a s t e r
in repository www/www.xfce.org.
commit fe3c3e4dd4fb2d00564b17702672c7ac5dabfcaf
Author: Pasi Lallinaho <pasi at shimmerproject.org>
Date: Wed May 17 01:07:21 2017 +0300
Update the slider; use less JS and more CSS. Support flexible width content area.
---
pages/frontpage.php | 50 ++++++++--------------------------------------
style/frontpage.css | 57 ++++++++++++++++++++++++++++++++++++++++++-----------
style/mobile.css | 7 +++++--
style/slider.js | 38 +++++++++++++++++++++++++++++++++++
style/tinyslider.js | 48 --------------------------------------------
5 files changed, 97 insertions(+), 103 deletions(-)
diff --git a/pages/frontpage.php b/pages/frontpage.php
index b6ccb97..458b694 100644
--- a/pages/frontpage.php
+++ b/pages/frontpage.php
@@ -10,54 +10,20 @@ $head['feed'] = 'https://www.xfce.org/feed?lang='.$lang;
<div id="slidewrap">
<div id="slide">
- <ul>
- <li>
- <img src="<?php echo $static_media; ?>/frontpage/slider-desktop.jpg" width="800" height="400" alt="Xfce Desktop" title="<?php E_('The default Xfce Desktop provides a simple and attractive desktop for Unix users.') ?>" />
- </li>
- <li>
- <img src="<?php echo $static_media; ?>/frontpage/slider-thunar.jpg" width="800" height="400" alt="File Manager" title="<?php E_('Thunar is the file manager for the Xfce Desktop. It has been designed from the ground up to be fast and easy-to-use. Its user interface is clean and intuitive, and does not include any confusing or useless options by default.') ?>" />
- </li>
- <li>
- <img src="<?php echo $static_media; ?>/frontpage/slider-settings.jpg" width="800" height="400" alt="Settings" title="<?php E_('The Xfce Desktop provides all the required settings to configure your hardware, desktop appearance and other desktop-critical settings allowing you to easily manage your system.') ?>" />
- </li>
- <li>
- <img src="<?php echo $static_media; ?>/frontpage/slider-xfwm4.jpg" width="800" height="400" alt="Window Manager" title="<?php E_('The Xfce Window Manager is the core of the desktop. It can be tuned to make window management quick and predictable. It also features around 100 border styles giving it the look you want!') ?>" />
- </li>
- <li>
- <img src="<?php echo $static_media; ?>/frontpage/slider-panel.jpg" width="800" height="400" alt="Panel" title="<?php E_('The Xfce Panel can be customized in numerous ways so it provides all the items you need right where you need them. It has three different display modes, transparency and a few dozen different plugins.') ?>" />
- </li>
- <li>
- <img src="<?php echo $static_media; ?>/frontpage/slider-apps.jpg" width="800" height="400" alt="Applications" title="<?php E_('Beside the core desktop functionality, a number of other applications are developed in the Xfce repositories, like an image viewer, the Midori web browser, task manager, notes plugin and calendar.') ?>" />
- </li>
- </ul>
-</div>
-<div id="slidenavwrap" class="group">
- <ul id="slidenav">
- <li onclick="slideshow.pos(0)"></li>
- <li onclick="slideshow.pos(1)"></li>
- <li onclick="slideshow.pos(2)"></li>
- <li onclick="slideshow.pos(3)"></li>
- <li onclick="slideshow.pos(4)"></li>
- <li onclick="slideshow.pos(5)"></li>
- </ul>
+ <div style="background-image: url(<?php echo $static_media; ?>/frontpage/slider-desktop.jpg);" alt="Xfce Desktop" title="<?php E_('The default Xfce Desktop provides a simple and attractive desktop for Unix users.') ?>"></div>
+ <div style="background-image: url(<?php echo $static_media; ?>/frontpage/slider-thunar.jpg);" alt="File Manager" title="<?php E_('Thunar is the file manager for the Xfce Desktop. It has been designed from the ground up to be fast and easy-to-use. Its user interface is clean and intuitive, and does not include any confusing or useless options by default.') ?>"></div>
+ <div style="background-image: url(<?php echo $static_media; ?>/frontpage/slider-settings.jpg);" alt="Settings" title="<?php E_('The Xfce Desktop provides all the required settings to configure your hardware, desktop appearance and other desktop-critical settings allowing you to easily manage your system.') ?>"></div>
+ <div style="background-image: url(<?php echo $static_media; ?>/frontpage/slider-xfwm4.jpg);" alt="Window Manager" title="<?php E_('The Xfce Window Manager is the core of the desktop. It can be tuned to make window management quick and predictable. It also features around 100 border styles giving it the look you want!') ?>"></div>
+ <div style="background-image: url(<?php echo $static_media; ?>/frontpage/slider-panel.jpg);" alt="Panel" title="<?php E_('The Xfce Panel can be customized in numerous ways so it provides all the items you need right where you need them. It has three different display modes, transparency and a few dozen different plugins.') ?>"></div>
+ <div style="background-image: url(<?php echo $static_media; ?>/frontpage/slider-apps.jpg);" alt="Applications" title="<?php E_('Beside the core desktop functionality, a number of other applications are developed in the Xfce repositories, like an image viewer, the Midori web browser, task manager, notes plugin and calendar.') ?>"></div>
</div>
+<div id="slidenav"></div>
</div>
<script type="text/javascript">
//<![CDATA[
-<?php include ('style/tinyslider.js'); ?>
+<?php include ('style/slider.js'); ?>
//]]>
-
-var slideshow=new TINY.slider.slide('slideshow',{
- id:'slide',
- auto:10,
- vertical:false,
- navid:'slidenav',
- activeclass:'current',
- position:0,
- rewind:false,
- elastic:false
-});
</script>
<div class="frontpage_cols">
diff --git a/style/frontpage.css b/style/frontpage.css
index eeeecf0..a1acc26 100644
--- a/style/frontpage.css
+++ b/style/frontpage.css
@@ -29,7 +29,8 @@
#slidewrap {
margin: auto;
border-bottom: 1px solid #bcbcbc;
- background: #368999 url('img/slider-bg.jpg') 50% 0 no-repeat; /* 348bb1 average of image */
+/* background: #368999 url('img/slider-bg.jpg') 50% 0 no-repeat; /* 348bb1 average of image */
+ background: transparent linear-gradient( to bottom right, #fff, #348bb1 ) no-repeat 0 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
@@ -38,11 +39,45 @@
#slide {
position: relative;
overflow: hidden;
- width: 800px;
+ width: 100%;
height: 400px;
cursor: default;
margin: auto;
}
+ #slide div {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 400px;
+ text-align: center;
+
+ transform: translateX(100%);
+
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ background-size: auto 400px;
+ }
+ #slide div:first-child {
+ transform: translateX(0%);
+ }
+ #slide .current {
+ animation: slide-in 1s forwards;
+ }
+ #slide .prev {
+ animation: slide-out 1s forwards;
+ }
+
+ at keyframes slide-in {
+ 0% { transform: translateX(100%); }
+ 100% { transform: translateX(0%); }
+}
+ at keyframes slide-out {
+ 0% { transform: translateX(0%); }
+ 100% { transform: translateX(-100%); }
+}
#slide ul {
position: absolute;
@@ -63,20 +98,20 @@
background: #fff;
}
-ul#slidenav {
- list-style:none;
- width: 156px;
+#slidenav {
margin: 0 auto;
- padding:0;
+ padding: 0;
line-height: 0;
+ background-color: #fff;
+ text-align: center;
}
-#slidenav li {
+#slidenav a {
+ display: inline-block;
border: 1px solid #bcbcbc;
width: 12px;
height: 12px;
- float: left;
- cursor:pointer;
+ cursor: pointer;
margin: 12px 6px;
background: #dcdcdc;
@@ -90,11 +125,11 @@ ul#slidenav {
-o-transition: background 0.2s linear;
}
-#slidenav li:hover {
+#slidenav a:hover {
background: #bababa;
}
-#slidenav li.current {
+#slidenav a.current {
background: #acacac;
border-color: #5f5f5f;
}
diff --git a/style/mobile.css b/style/mobile.css
index f6db9fd..4324d95 100644
--- a/style/mobile.css
+++ b/style/mobile.css
@@ -59,10 +59,13 @@
}
/* Frontpage: Slider */
- #slidewrap {
+/* #slidewrap {
background-size: auto 185px;
+ } */
+ #slide {
+ height: 185px;
}
- #slide img, #slide {
+ #slide img {
width: 370px;
height: 185px;
}
diff --git a/style/slider.js b/style/slider.js
new file mode 100644
index 0000000..493062c
--- /dev/null
+++ b/style/slider.js
@@ -0,0 +1,38 @@
+var s_timeout=10000;
+var s_timer=window.setInterval(s_adv,s_timeout);
+var slider=document.getElementById('slide');
+var slides=slider.getElementsByTagName('div');
+var buttonhtml='';
+var s_cur=0;
+for(var i=0;i<slides.length;i++) {
+ buttonhtml+='<a onclick="s_adv('+i+')"></a>';
+}
+document.getElementById('slidenav').innerHTML=buttonhtml;
+var navitems=document.getElementById('slidenav').getElementsByTagName('a');
+navitems.item(s_cur).className='current';
+function s_adv(pos){
+ var cur=slider.getElementsByClassName('current').item(0);
+ if(cur==null){
+ cur=slides.item(0);
+ if(pos==0){
+ return;
+ }
+ }
+ navitems.item(s_cur).className='';
+ if(pos!=null){
+ next=slides.item(pos);
+ window.clearTimeout(s_timer);
+ s_timer=window.setInterval(s_adv,s_timeout);
+ s_cur=pos;
+ } else {
+ next=cur.nextElementSibling;
+ s_cur+=1;
+ if(next==null) {
+ next=slides.item(0);
+ s_cur=0;
+ }
+ }
+ cur.className='prev';
+ next.className='current';
+ navitems.item(s_cur).className='current';
+}
diff --git a/style/tinyslider.js b/style/tinyslider.js
deleted file mode 100644
index 9eaeb71..0000000
--- a/style/tinyslider.js
+++ /dev/null
@@ -1,48 +0,0 @@
-var TINY={};
-function T$(i){return document.getElementById(i)}
-function T$$(e,p){return p.getElementsByTagName(e)}
-TINY.slider=function(){
-function slide(n,p){this.n=n; this.init(p)}
-slide.prototype.init=function(p){
-var s=this.x=T$(p.id), u=this.u=T$$('ul',s)[0], c=this.m=T$$('li',u), l=c.length, i=this.l=this.c=0; this.b=1;
-if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
-this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow='hidden';
-for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
-if(this.v){;
-u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'}else{
-u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'}
-this.nav(p.position||0);
-if(p.position){this.pos(p.position||0,this.a?1:0,1)}else if(this.a){this.auto()}
-if(p.left){this.sel(p.left)}
-if(p.right){this.sel(p.right)}},
-slide.prototype.auto=function(){
-this.x.ai=setInterval(new Function(this.n+'.move(1,1,1)'),this.a*1000)},
-slide.prototype.move=function(d,a){
-var n=this.c+d;if(this.r){n=d==1?n==this.l?0:n:n<0?this.l-1:n}
-this.pos(n,a,1)},slide.prototype.pos=function(p,a,m){
-var v=p; clearInterval(this.x.ai); clearInterval(this.x.si);
-if(!this.r){if(m){if(p==-1||(p!=0&&Math.abs(p)%this.l==0)){this.b++;
-for(var i=0;i<this.l;i++){this.u.appendChild(this.m[i].cloneNode(1))}
-this.v?this.u.style.height=(this.l*this.h*this.b)+'px':this.u.style.width=(this.l*this.w*this.b)+'px';}
-if(p==-1||(p<0&&Math.abs(p)%this.l==0)){
-this.v?this.u.style.top=(this.l*this.h*-1)+'px':this.u.style.left=(this.l*this.w*-1)+'px'; v=this.l-1}}else if(this.c>this.l&&this.b>1){
-v=(this.l*(this.b-1))+p; p=v}}
-var t=this.v?v*this.h*-1:v*this.w*-1, d=p<this.c?-1:1; this.c=v; var n=this.c%this.l; this.nav(n);
-if(this.e){t=t-(8*d)}
-this.x.si=setInterval(new Function(this.n+'.slide('+t+','+d+',1,'+a+')'),10)},
-slide.prototype.nav=function(n){
-if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==n?this.s:''}}},
-slide.prototype.slide=function(t,d,i,a){
-var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
-if(o==t){clearInterval(this.x.si);
-if(this.e&&i<3){
-this.x.si=setInterval(new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')'),10)}else{
-if(a||(this.a&&this.p)){this.auto()}
-if(this.b>1&&this.c%this.l==0){this.clear()}}}else{
-var v=o-Math.ceil(Math.abs(t-o)*.1)*d+'px';
-this.v?this.u.style.top=v:this.u.style.left=v}},
-slide.prototype.clear=function(){
-var c=T$$('li',this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
-for(i;i>0;i--){var e=c[i-1];if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t--}}},slide.prototype.sel=function(i){
-var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}}
-return{slide:slide}}();
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the Xfce4-commits
mailing list