mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-20 11:51:40 +02:00
Code Issues Releases Wiki Activity

Merge pull request #32 from fvalverd/master

Browse Source 
Fixed the jumping between slides and added a jQuery public interface to do it
This commit is contained in:
José Luis Antúnez
2017-01-29 23:44:49 +01:00
committed by GitHub
parent 8bb9e1c475 0148cb0405
commit 41f314b198
2 changed files with 59 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
static/js/webslides-lite.js
View File

@@ -1,7 +1,7 @@
/*================================================================== /*==================================================================
Name: WebSlides Name: WebSlides
Version: Lite (keyboard shortcuts, no trackpad gestures). Version: Lite (keyboard shortcuts, no trackpad gestures).
Description: HTML presentations made easy. Description: HTML presentations made easy.
URL: https://github.com/jlantunez/WebSlides URL: https://github.com/jlantunez/WebSlides
Thanks @LuisSacristan for your help :) Thanks @LuisSacristan for your help :)
- -
@@ -20,7 +20,7 @@ jQuery(document).ready(function($){
previous : 'previous', previous : 'previous',
current : 'current', current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
} };
var easing = 'swing'; var easing = 'swing';
var slideOffset = 50; // minimun number of pixels for sliding var slideOffset = 50; // minimun number of pixels for sliding
var verticalDelay = 150; // to avoid 2 slides in a row var verticalDelay = 150; // to avoid 2 slides in a row
@@ -35,7 +35,7 @@ jQuery(document).ready(function($){
$firstSlide = $slides.first(), $firstSlide = $slides.first(),
$lastSlide = $slides.last(), $lastSlide = $slides.last(),
$auxSlide = null; $auxSlide = null;
var total = $slides.length; var total = $slides.length;
var labels = { var labels = {
@@ -90,16 +90,15 @@ jQuery(document).ready(function($){
$slideshow.data('moving', false); $slideshow.data('moving', false);
var nextSlide = function() { var nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'}); jQuery('html').css({overflow: 'hidden'});
var nextSlide;
nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total); slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total; if (slidePointer.current === 0) slidePointer.current = total;
// show next slide // show next slide
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
@@ -110,7 +109,7 @@ jQuery(document).ready(function($){
$currentSlide.hide().removeClass(ID.current); $currentSlide.hide().removeClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide; $currentSlide = nextSlide;
// update counter // update counter
updateCounter(); updateCounter();
@@ -134,7 +133,7 @@ jQuery(document).ready(function($){
hideCurrentSlide(); hideCurrentSlide();
// get the next slide // get the next slide
var nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
@@ -154,6 +153,7 @@ jQuery(document).ready(function($){
}; };
var previousSlide = function() { var previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
@@ -161,9 +161,9 @@ jQuery(document).ready(function($){
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
if (prevSlide.length == 0) return false; if (prevSlide.length === 0) return false;
// show next slide // show next slide
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
// scroll to next slide // scroll to next slide
@@ -202,7 +202,7 @@ jQuery(document).ready(function($){
// get the previous slide // get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
$currentSlide = prevSlide; $currentSlide = prevSlide;
@@ -226,19 +226,22 @@ jQuery(document).ready(function($){
$currentSlide = $slides.eq(moveToSlide); $currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(ID.current); $currentSlide.show().addClass(ID.current);
jQuery('.slide:lt('+(slideNumber-1)+')').each(function() {var $this = jQuery(this); $this.siblings('.slide').last().after($this); }); jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber; slidePointer.current = slideNumber;
// update counter // update counter
updateCounter(); updateCounter();
} };
var fireSlideEvent = function(slide) { var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', { var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide } detail: { slide: slide || $currentSlide }
}); });
window.dispatchEvent(slideEvent); window.dispatchEvent(slideEvent);
} };
/*** INIT SLIDESHOW ***/ /*** INIT SLIDESHOW ***/
@@ -275,7 +278,7 @@ jQuery(document).ready(function($){
// "previous" arrow clicked => previous slide // "previous" arrow clicked => previous slide
$previous.click( function(e){ $previous.click( function(e){
e.preventDefault(); e.preventDefault();
previousSlide() previousSlide();
}); });
// Add keyboard shortcuts for changing slides // Add keyboard shortcuts for changing slides
@@ -311,7 +314,7 @@ jQuery(document).ready(function($){
} }
} }
}); });
/** /**
* Bind the event HashChange when the prev/next history button was clicked * Bind the event HashChange when the prev/next history button was clicked
*/ */
@@ -339,17 +342,17 @@ jQuery(document).ready(function($){
function getArrayOfHashParams() { function getArrayOfHashParams() {
var hash = window.location.hash.replace('#', '').split('&'); var hash = window.location.hash.replace('#', '').split('&');
var paramsArr = new Array(); var paramsArr = new Array([]);
for (var i = 0; i < hash.length; i++) { for (var i = 0; i < hash.length; i++) {
var itemArray = hash[i].split('='); var itemArray = hash[i].split('=');
var action = new Object(); var action = new Object({});
action.key = itemArray[0]; action.key = itemArray[0];
action.value = itemArray[1]; action.value = itemArray[1];
paramsArr.push(action); paramsArr.push(action);
} }
return paramsArr; return paramsArr;
} }
// Tabs // Tabs
jQuery('ul.tabs li').click(function(){ jQuery('ul.tabs li').click(function(){
var $this = jQuery(this); var $this = jQuery(this);
@@ -358,14 +361,18 @@ jQuery(document).ready(function($){
jQuery('.tab-content').removeClass('current'); jQuery('.tab-content').removeClass('current');
$this.addClass('current'); $this.addClass('current');
jQuery("#"+tab_id).addClass('current'); jQuery("#"+tab_id).addClass('current');
}) });
/* jQuery plugin */
$.WebSlides = function () {};
/* Public goToSlide */
$.WebSlides.goToSlide = goToSlide;
}); });
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
$(document).keypress(function(e) { $(document).keypress(function(e) {
if(e.which == 13) { if(e.which == 13) {
$('body').toggleClass('baseline').css('height', $(document).height()); $('body').toggleClass('baseline').css('height', $(document).height());
} }
}); });

50
static/js/webslides.js
View File

@@ -1,7 +1,7 @@
/*================================================================== /*==================================================================
Name: WebSlides Name: WebSlides
Version: Pro (trackpad gestures and keyboard shortcuts). Version: Pro (trackpad gestures and keyboard shortcuts).
Description: HTML presentations made easy. Description: HTML presentations made easy.
URL: https://github.com/jlantunez/WebSlides URL: https://github.com/jlantunez/WebSlides
Thanks @LuisSacristan for your help :) Thanks @LuisSacristan for your help :)
- -
@@ -20,7 +20,7 @@ jQuery(document).ready(function($){
previous : 'previous', previous : 'previous',
current : 'current', current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
} };
var easing = 'swing'; var easing = 'swing';
var slideOffset = 50; // minimun number of pixels for sliding var slideOffset = 50; // minimun number of pixels for sliding
var verticalDelay = 150; // to avoid 2 slides in a row var verticalDelay = 150; // to avoid 2 slides in a row
@@ -35,7 +35,7 @@ jQuery(document).ready(function($){
$firstSlide = $slides.first(), $firstSlide = $slides.first(),
$lastSlide = $slides.last(), $lastSlide = $slides.last(),
$auxSlide = null; $auxSlide = null;
var total = $slides.length; var total = $slides.length;
var labels = { var labels = {
@@ -90,16 +90,15 @@ jQuery(document).ready(function($){
$slideshow.data('moving', false); $slideshow.data('moving', false);
var nextSlide = function() { var nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'}); jQuery('html').css({overflow: 'hidden'});
var nextSlide;
nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total); slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total; if (slidePointer.current === 0) slidePointer.current = total;
// show next slide // show next slide
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
@@ -110,7 +109,7 @@ jQuery(document).ready(function($){
$currentSlide.hide().removeClass(ID.current); $currentSlide.hide().removeClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide; $currentSlide = nextSlide;
// update counter // update counter
updateCounter(); updateCounter();
@@ -134,7 +133,7 @@ jQuery(document).ready(function($){
hideCurrentSlide(); hideCurrentSlide();
// get the next slide // get the next slide
var nextSlide = $currentSlide.next(); nextSlide = $currentSlide.next();
nextSlide.show().addClass(ID.current); nextSlide.show().addClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide.siblings('.slide').last().after($currentSlide);
@@ -154,6 +153,7 @@ jQuery(document).ready(function($){
}; };
var previousSlide = function() { var previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return; if ($slideshow.data('moving')) return;
$slideshow.data('moving', true); $slideshow.data('moving', true);
@@ -161,9 +161,9 @@ jQuery(document).ready(function($){
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
if (prevSlide.length == 0) return false; if (prevSlide.length === 0) return false;
// show next slide // show next slide
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
// scroll to next slide // scroll to next slide
@@ -202,7 +202,7 @@ jQuery(document).ready(function($){
// get the previous slide // get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last()); $currentSlide.before($currentSlide.siblings('.slide').last());
var prevSlide = $currentSlide.prev(); prevSlide = $currentSlide.prev();
prevSlide.show().addClass(ID.current); prevSlide.show().addClass(ID.current);
$currentSlide = prevSlide; $currentSlide = prevSlide;
@@ -226,19 +226,22 @@ jQuery(document).ready(function($){
$currentSlide = $slides.eq(moveToSlide); $currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(ID.current); $currentSlide.show().addClass(ID.current);
jQuery('.slide:lt('+(slideNumber-1)+')').each(function() {var $this = jQuery(this); $this.siblings('.slide').last().after($this); }); jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber; slidePointer.current = slideNumber;
// update counter // update counter
updateCounter(); updateCounter();
} };
var fireSlideEvent = function(slide) { var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', { var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide } detail: { slide: slide || $currentSlide }
}); });
window.dispatchEvent(slideEvent); window.dispatchEvent(slideEvent);
} };
/*** INIT SLIDESHOW ***/ /*** INIT SLIDESHOW ***/
@@ -275,7 +278,7 @@ jQuery(document).ready(function($){
// "previous" arrow clicked => previous slide // "previous" arrow clicked => previous slide
$previous.click( function(e){ $previous.click( function(e){
e.preventDefault(); e.preventDefault();
previousSlide() previousSlide();
}); });
// Add keyboard shortcuts for changing slides // Add keyboard shortcuts for changing slides
@@ -340,10 +343,10 @@ jQuery(document).ready(function($){
function getArrayOfHashParams() { function getArrayOfHashParams() {
var hash = window.location.hash.replace('#', '').split('&'); var hash = window.location.hash.replace('#', '').split('&');
var paramsArr = new Array(); var paramsArr = new Array([]);
for (var i = 0; i < hash.length; i++) { for (var i = 0; i < hash.length; i++) {
var itemArray = hash[i].split('='); var itemArray = hash[i].split('=');
var action = new Object(); var action = new Object({});
action.key = itemArray[0]; action.key = itemArray[0];
action.value = itemArray[1]; action.value = itemArray[1];
paramsArr.push(action); paramsArr.push(action);
@@ -402,13 +405,18 @@ jQuery(document).ready(function($){
jQuery('.tab-content').removeClass('current'); jQuery('.tab-content').removeClass('current');
$this.addClass('current'); $this.addClass('current');
jQuery("#"+tab_id).addClass('current'); jQuery("#"+tab_id).addClass('current');
}) });
/* jQuery plugin */
$.WebSlides = function () {};
/* Public goToSlide */
$.WebSlides.goToSlide = goToSlide;
}); });
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
$(document).keypress(function(e) { $(document).keypress(function(e) {
if(e.which == 13) { if(e.which == 13) {
$('body').toggleClass('baseline').css('height', $(document).height()); $('body').toggleClass('baseline').css('height', $(document).height());
} }
}); });