mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-09-02 17:42:45 +02:00
Code Issues Releases Wiki Activity

Transform to javascript object

Browse Source
This commit is contained in:
Luis
2017-02-11 16:25:46 +01:00
parent df06b6b13f
commit b71550d954
7 changed files with 632 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demos/classes.html
View File

@@ -1939,6 +1939,9 @@
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

3
demos/components.html
View File

@@ -3132,6 +3132,9 @@
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

3
demos/keynote.html
View File

@@ -849,6 +849,9 @@
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

4
demos/landings.html
View File

@@ -1924,5 +1924,9 @@
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

3
demos/portfolios.html
View File

@@ -1864,6 +1864,9 @@
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

4
demos/why-webslides.html
View File

@@ -66,6 +66,7 @@
<!-- Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#333333">
</head>
<body>
<header role="banner">
@@ -344,6 +345,9 @@
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
<script defer src="../static/js/svg-icons.js"></script>
<script type="text/javascript">
var slide = jQuery('#webslides').webslides();
</script>
</body>
</html>

633
static/js/webslides.js
View File

@@ -9,18 +9,11 @@ Based on SimpleSlides, by Jenn Schiffer:
https://github.com/jennschiffer/SimpleSlides
==================================================================== */
jQuery(document).ready(function($){
jQuery.fn.webslides = function(options) {
var ID = {
slideshow : 'webslides',
slide : 'slide',
counter : 'counter',
navigation : 'navigation',
next : 'next',
previous : 'previous',
current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
};
var obj = {};
// Private vars
var easing = 'swing';
var slideOffset = 50; // minimun number of pixels for sliding
var verticalDelay = 150; // to avoid 2 slides in a row
@@ -28,22 +21,72 @@ jQuery(document).ready(function($){
var wheelDelta = 150; // how far the wheel turned for Chrome
var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
var $slideshow = jQuery('#' + ID.slideshow),
$navigation = jQuery('<div>').attr('id','navigation'),
$slides = $slideshow.children('section').addClass(ID.slide),
var $slideshow,
$navigation,
$slides,
$counter,
$next,
$previous,
$currentSlide,
$firstSlide = $slides.first(),
$lastSlide = $slides.last(),
$auxSlide = null;
$firstSlide,
$lastSlide,
$auxSlide = null,
slidePointer;
var total = $slides.length;
var total = 0;
var labels = {
next : $slideshow.hasClass(ID.verticalClass)?'&darr;':'&rarr;',
previous : $slideshow.hasClass(ID.verticalClass)?'&uarr;':'&larr;',
separator : ' / '
var labels = {};
/**
* Init function
* @param {Object} settings Plugin settings
* @param {string} id Container HTML ID
* @param {string} class Slide class
* @param {string} counter Counter container ID
* @param {string} navigation Navigation container ID
* @param {string} next Next HTML element ID
* @param {string} previous Previous HTML element ID
* @param {string} current Current HTML element ID
* @param {string} verticalClass Vertical class
*/
var init = function(_options) {
obj.settings = {
id : 'webslides',
class : 'slide',
counter : 'counter',
navigation : 'navigation',
next : 'next',
previous : 'previous',
current : 'current',
verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding
};
// Allow overriding the default config
$.extend( obj.settings, _options );
setup();
run();
initClickEvents();
initKeyEvents();
initMouseWheel();
initTouchEvents();
initHash();
}
var setup = function() {
$slideshow = jQuery('#' + obj.settings.id);
$navigation = jQuery('<div>').attr('id', obj.settings.navigation);
$slides = $slideshow.children('section').addClass(obj.settings.class);
$firstSlide = $slides.first();
$lastSlide = $slides.last();
total = $slides.length;
labels = {
next : $slideshow.hasClass(obj.settings.verticalClass)?'&darr;':'&rarr;',
previous : $slideshow.hasClass(obj.settings.verticalClass)?'&uarr;':'&larr;',
separator : ' / '
};
// make sure the last slide doesn't page break while printing.
jQuery('head').append( '<style> .slide:nth-child(' + total + ') { page-break-after: auto }</style>' );
@@ -52,204 +95,29 @@ jQuery(document).ready(function($){
$slideshow.children().not('section').remove();
// add navigational arrows and counter
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.previous).html(labels.previous));
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',ID.next).html(labels.next));
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',obj.settings.previous).html(labels.previous));
$navigation.append(jQuery('<a href="#" title="Arrow Keys">').attr('id',obj.settings.next).html(labels.next));
$slideshow.append($navigation);
$slideshow.append(jQuery('<span>').attr('id',ID.counter));
$slideshow.append(jQuery('<span>').attr('id',obj.settings.counter));
$counter = jQuery('#'+obj.settings.counter),
$next = jQuery('#'+obj.settings.next),
$previous = jQuery('#'+obj.settings.previous);
var $counter = jQuery('#'+ID.counter),
$next = jQuery('#'+ID.next),
$previous = jQuery('#'+ID.previous);
$navigation.append($counter);
/*** FUNCTIONS ***/
var updateCounter = function() {
// updates the counter
$counter.text(slidePointer.current + labels.separator + slidePointer.last);
};
var updateURL = function() {
// updates slide state
var currentURL = document.location.toString();
if (currentURL.indexOf('#') != 1){
currentURL = currentURL.substr(0,currentURL.indexOf('#'));
}
history.pushState(null, null, '#slide='+ slidePointer.current );
};
var hideCurrentSlide = function() {
// hide the current slide
if ( $currentSlide ) {
$currentSlide.hide().removeClass(ID.current);
}
};
$slideshow.data('moving', false);
var nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current === 0) slidePointer.current = total;
// show next slide
nextSlide.show().addClass(ID.current);
// scroll to next slide
var animated = false;
jQuery('html, body').animate({scrollTop: nextSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide;
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
animated = true;
});
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
// get the next slide
nextSlide = $currentSlide.next();
nextSlide.show().addClass(ID.current);
$currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide;
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total;
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
}
};
var previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
$currentSlide.before($currentSlide.siblings('.slide').last());
prevSlide = $currentSlide.prev();
if (prevSlide.length === 0) return false;
// show next slide
prevSlide.show().addClass(ID.current);
// scroll to next slide
var animated = false;
jQuery('html, body').scrollTop($currentSlide.offset().top);
jQuery('html, body').animate({scrollTop: prevSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(ID.current);
$currentSlide = prevSlide;
// not the last slide => go to the next one and increment the counter
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
animated = true;
});
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
// get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last());
prevSlide = $currentSlide.prev();
prevSlide.show().addClass(ID.current);
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter
updateCounter();
// update URL
updateURL();
// fire slide event
fireSlideEvent();
}
};
var goToSlide = function(slideNumber) {
// hide current slide
hideCurrentSlide();
moveToSlide = slideNumber-1;
$currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(ID.current);
jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber;
// update counter
updateCounter();
};
var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide }
});
window.dispatchEvent(slideEvent);
};
/*** INIT SLIDESHOW ***/
/**
* Starts sliders
*/
var run = function() {
// Initially hide all slides
$slides.hide();
// The first slide is number first, last is slides length
var slidePointer = {
slidePointer = {
current : 1,
last : $slides.length
};
@@ -258,41 +126,49 @@ jQuery(document).ready(function($){
if ( slideState && (slideState > 0 && slideState <= $slides.length )) {
// if slide= hash state is given and valid, go to that slide
goToSlide(slideState);
obj.goToSlide(slideState);
}
else {
// The first slide is the first slide, so make visible and set the counter...
$currentSlide = $firstSlide.show().addClass(ID.current);
$currentSlide = $firstSlide.show().addClass(obj.settings.current);
updateCounter();
}
};
/*** EVENTS ***/
/**
* Init click events
*/
var initClickEvents = function() {
// "next" arrow clicked => next slide
$next.click( function(e){
e.preventDefault();
nextSlide();
obj.nextSlide();
});
// "previous" arrow clicked => previous slide
$previous.click( function(e){
e.preventDefault();
previousSlide();
obj.previousSlide();
});
}
/**
* Init keypress events
*/
var initKeyEvents = function() {
// Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
if (!$slideshow.hasClass(ID.verticalClass) || isMobile) {
if (!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) {
$slideshow.data('iswheel', false);
if (e.which == 39 || e.which == 32) {
// right key pressed => next slide
nextSlide();
obj.nextSlide();
return false;
}
else if (e.which == 37) {
// left or l key pressed => previous slide
previousSlide();
obj.previousSlide();
return false;
}
}
@@ -300,22 +176,80 @@ jQuery(document).ready(function($){
// Add keyboard shortcuts for changing slides
jQuery(document).keydown(function(e){
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) {
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) {
$slideshow.data('iswheel', false);
if (e.which == 40 || e.which == 32) {
// right key pressed => next slide
nextSlide();
obj.nextSlide();
return false;
}
else if (e.which == 38) {
// left or l key pressed => previous slide
previousSlide();
obj.previousSlide();
return false;
}
}
});
}
/**
* Init mouse wheel
*/
var initMouseWheel = function() {
// Mouse wheel
jQuery(window).bind('mousewheel DOMMouseScroll', function(event){
$slideshow.data('iswheel', true);
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) {
if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) {
// Scroll up
obj.previousSlide();
} else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) {
// scroll down
obj.nextSlide();
}
}
});
}
/**
* Init touch events
*/
var initTouchEvents = function() {
// Touch
jQuery(window).on("touchstart", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYStart', e.touches[0].screenY);
$slideshow.data('touchXStart', e.touches[0].screenX);
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchmove", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchend", function(ev) {
$slideshow.data('iswheel', false);
var e = ev.originalEvent;
var diffX = $slideshow.data('touchXStart') - $slideshow.data('touchXEnd');
var diffY = $slideshow.data('touchYStart') - $slideshow.data('touchYEnd');
if ((!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) && Math.abs(diffX) > Math.abs(diffY)) {
if(diffX < -slideOffset) {
previousSlide();
// Scroll up
} else if(diffX > slideOffset) {
// scroll down
nextSlide();
}
}
});
}
/**
* Init hash
*/
var initHash = function() {
/**
* Bind the event HashChange when the prev/next history button was clicked
*/
@@ -337,7 +271,7 @@ jQuery(document).ready(function($){
return (e.key == "slide");
});
if (slideObj.length == 1) {
goToSlide(slideObj[0].value);
obj.goToSlide(slideObj[0].value);
}
}
@@ -353,50 +287,216 @@ jQuery(document).ready(function($){
}
return paramsArr;
}
}
// Mouse wheel
jQuery(window).bind('mousewheel DOMMouseScroll', function(event){
$slideshow.data('iswheel', true);
if ($slideshow.hasClass(ID.verticalClass) && !isMobile) {
if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) {
// Scroll up
previousSlide();
} else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) {
// scroll down
nextSlide();
/*** FUNCTIONS ***/
/**
* Updates slider counter
*/
var updateCounter = function() {
// updates the counter
$counter.text(slidePointer.current + labels.separator + slidePointer.last);
};
/**
* Updates current URL with counter position
*/
var updateURL = function() {
// updates slide state
var currentURL = document.location.toString();
if (currentURL.indexOf('#') != 1){
currentURL = currentURL.substr(0,currentURL.indexOf('#'));
}
history.pushState(null, null, '#slide='+ slidePointer.current );
};
/**
* Hides current Slide
*/
var hideCurrentSlide = function() {
// hide the current slide
if ( $currentSlide ) {
$currentSlide.hide().removeClass(obj.settings.current);
}
};
/**
* Goes to next slide
*/
obj.nextSlide = function() {
var nextSlide;
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
nextSlide = $currentSlide.next();
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current === 0) slidePointer.current = total;
// show next slide
nextSlide.show().addClass(obj.settings.current);
// scroll to next slide
var animated = false;
jQuery('html, body').animate({scrollTop: nextSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(obj.settings.current);
$currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide;
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
animated = true;
});
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
// get the next slide
nextSlide = $currentSlide.next();
nextSlide.show().addClass(obj.settings.current);
$currentSlide.siblings('.slide').last().after($currentSlide);
$currentSlide = nextSlide;
slidePointer.current = ((slidePointer.current+1)%total);
if (slidePointer.current == 0) slidePointer.current = total;
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
}
};
/**
* Goes to previous slide
*/
obj.previousSlide = function() {
var prevSlide;
if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { // Is vertical
if ($slideshow.data('moving')) return;
$slideshow.data('moving', true);
jQuery('html').css({overflow: 'hidden'});
$currentSlide.before($currentSlide.siblings('.slide').last());
prevSlide = $currentSlide.prev();
if (prevSlide.length === 0) return false;
// show next slide
prevSlide.show().addClass(obj.settings.current);
// scroll to next slide
var animated = false;
jQuery('html, body').scrollTop($currentSlide.offset().top);
jQuery('html, body').animate({scrollTop: prevSlide.offset().top}, 500, easing, function() {
if (!animated) {
$currentSlide.hide().removeClass(obj.settings.current);
$currentSlide = prevSlide;
// not the last slide => go to the next one and increment the counter
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter
updateCounter();
// update url
updateURL();
// fire slide event
fireSlideEvent();
jQuery('html').css({overflow: 'auto'});
setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0);
}
animated = true;
});
// Touch
jQuery(window).on("touchstart", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYStart', e.touches[0].screenY);
$slideshow.data('touchXStart', e.touches[0].screenX);
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchmove", function(ev) {
var e = ev.originalEvent;
$slideshow.data('touchYEnd', e.touches[0].screenY);
$slideshow.data('touchXEnd', e.touches[0].screenX);
});
jQuery(window).on("touchend", function(ev) {
$slideshow.data('iswheel', false);
var e = ev.originalEvent;
var diffX = $slideshow.data('touchXStart') - $slideshow.data('touchXEnd');
var diffY = $slideshow.data('touchYStart') - $slideshow.data('touchYEnd');
if ((!$slideshow.hasClass(ID.verticalClass) || isMobile) && Math.abs(diffX) > Math.abs(diffY)) {
if(diffX < -slideOffset) {
previousSlide();
// Scroll up
} else if(diffX > slideOffset) {
// scroll down
nextSlide();
}
}
});
} else { // Is landscape
jQuery("html, body").animate({ scrollTop: 0 }, 0);
// hide current slide
hideCurrentSlide();
// get the previous slide
$currentSlide.before($currentSlide.siblings('.slide').last());
prevSlide = $currentSlide.prev();
prevSlide.show().addClass(obj.settings.current);
$currentSlide = prevSlide;
slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1);
// update counter
updateCounter();
// update URL
updateURL();
// fire slide event
fireSlideEvent();
}
};
/**
* Goes to a specific slide
*
* @param {number} slideNumber Where to go
*/
obj.goToSlide = function(slideNumber) {
// hide current slide
hideCurrentSlide();
moveToSlide = slideNumber-1;
$currentSlide = $slides.eq(moveToSlide);
$currentSlide.show().addClass(obj.settings.current);
jQuery('.slide:lt('+$currentSlide.index()+')').each(function() {
var $this = jQuery(this);
$this.siblings('.slide').last().after($this);
});
slidePointer.current = slideNumber;
// update counter
updateCounter();
};
/**
* Fires slide event
*/
var fireSlideEvent = function(slide) {
var slideEvent = new window.CustomEvent('slidechanged', {
detail: { slide: slide || $currentSlide }
});
window.dispatchEvent(slideEvent);
};
// Init plugin
init(options);
// Return same object
return obj;
}
// I don't know what it does
jQuery(document).ready(function($){
// Tabs
jQuery('ul.tabs li').click(function(){
var $this = jQuery(this);
@@ -406,17 +506,12 @@ jQuery(document).ready(function($){
$this.addClass('current');
jQuery("#"+tab_id).addClass('current');
});
/* jQuery plugin */
$.WebSlides = function () {};
/* Public goToSlide */
$.WebSlides.goToSlide = goToSlide;
});
// I don't know what it does
// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard
$(document).keypress(function(e) {
jQuery(document).keypress(function(e) {
if(e.which == 13) {
$('body').toggleClass('baseline').css('height', $(document).height());
jQuery('body').toggleClass('baseline').css('height', $(document).height());
}
});