From c09832e1918d107e33ca1d4df0b3cdce1dbd8400 Mon Sep 17 00:00:00 2001 From: Felipe Valverde Date: Sun, 29 Jan 2017 14:32:02 -0500 Subject: [PATCH 01/53] fix: jlint --- static/js/webslides-lite.js | 44 ++++++++++++++++++------------------- static/js/webslides.js | 38 ++++++++++++++++---------------- 2 files changed, 41 insertions(+), 41 deletions(-) diff --git a/static/js/webslides-lite.js b/static/js/webslides-lite.js index d13bce2..ff515e0 100644 --- a/static/js/webslides-lite.js +++ b/static/js/webslides-lite.js @@ -1,7 +1,7 @@ /*================================================================== Name: WebSlides Version: Lite (keyboard shortcuts, no trackpad gestures). -Description: HTML presentations made easy. +Description: HTML presentations made easy. URL: https://github.com/jlantunez/WebSlides Thanks @LuisSacristan for your help :) - @@ -20,7 +20,7 @@ jQuery(document).ready(function($){ previous : 'previous', current : 'current', verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding - } + }; var easing = 'swing'; var slideOffset = 50; // minimun number of pixels for sliding var verticalDelay = 150; // to avoid 2 slides in a row @@ -35,7 +35,7 @@ jQuery(document).ready(function($){ $firstSlide = $slides.first(), $lastSlide = $slides.last(), $auxSlide = null; - + var total = $slides.length; var labels = { @@ -90,16 +90,15 @@ jQuery(document).ready(function($){ $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'}); - var nextSlide; - + nextSlide = $currentSlide.next(); slidePointer.current = ((slidePointer.current+1)%total); - if (slidePointer.current == 0) slidePointer.current = total; + if (slidePointer.current === 0) slidePointer.current = total; // show next slide nextSlide.show().addClass(ID.current); @@ -110,7 +109,7 @@ jQuery(document).ready(function($){ $currentSlide.hide().removeClass(ID.current); $currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide = nextSlide; - + // update counter updateCounter(); @@ -134,7 +133,7 @@ jQuery(document).ready(function($){ hideCurrentSlide(); // get the next slide - var nextSlide = $currentSlide.next(); + nextSlide = $currentSlide.next(); nextSlide.show().addClass(ID.current); $currentSlide.siblings('.slide').last().after($currentSlide); @@ -154,6 +153,7 @@ jQuery(document).ready(function($){ }; var previousSlide = function() { + var prevSlide; if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.data('moving')) return; $slideshow.data('moving', true); @@ -161,9 +161,9 @@ jQuery(document).ready(function($){ $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 prevSlide.show().addClass(ID.current); // scroll to next slide @@ -202,7 +202,7 @@ jQuery(document).ready(function($){ // get the previous slide $currentSlide.before($currentSlide.siblings('.slide').last()); - var prevSlide = $currentSlide.prev(); + prevSlide = $currentSlide.prev(); prevSlide.show().addClass(ID.current); $currentSlide = prevSlide; @@ -231,14 +231,14 @@ jQuery(document).ready(function($){ // update counter updateCounter(); - } + }; var fireSlideEvent = function(slide) { var slideEvent = new window.CustomEvent('slidechanged', { detail: { slide: slide || $currentSlide } }); window.dispatchEvent(slideEvent); - } + }; /*** INIT SLIDESHOW ***/ @@ -275,7 +275,7 @@ jQuery(document).ready(function($){ // "previous" arrow clicked => previous slide $previous.click( function(e){ e.preventDefault(); - previousSlide() + previousSlide(); }); // Add keyboard shortcuts for changing slides @@ -311,7 +311,7 @@ jQuery(document).ready(function($){ } } }); - + /** * Bind the event HashChange when the prev/next history button was clicked */ @@ -339,17 +339,17 @@ jQuery(document).ready(function($){ function getArrayOfHashParams() { var hash = window.location.hash.replace('#', '').split('&'); - var paramsArr = new Array(); + var paramsArr = new Array([]); for (var i = 0; i < hash.length; i++) { var itemArray = hash[i].split('='); - var action = new Object(); + var action = new Object({}); action.key = itemArray[0]; action.value = itemArray[1]; paramsArr.push(action); } return paramsArr; } - + // Tabs jQuery('ul.tabs li').click(function(){ var $this = jQuery(this); @@ -358,14 +358,14 @@ jQuery(document).ready(function($){ jQuery('.tab-content').removeClass('current'); $this.addClass('current'); jQuery("#"+tab_id).addClass('current'); - }) + }); }); - + // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard $(document).keypress(function(e) { if(e.which == 13) { $('body').toggleClass('baseline').css('height', $(document).height()); } }); - + diff --git a/static/js/webslides.js b/static/js/webslides.js index 0af5171..ecd8b55 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*================================================================== Name: WebSlides Version: Pro (trackpad gestures and keyboard shortcuts). -Description: HTML presentations made easy. +Description: HTML presentations made easy. URL: https://github.com/jlantunez/WebSlides Thanks @LuisSacristan for your help :) - @@ -20,7 +20,7 @@ jQuery(document).ready(function($){ previous : 'previous', current : 'current', verticalClass : 'vertical' // #webslides.vertical - You must add this class to slideshow for vertical sliding - } + }; var easing = 'swing'; var slideOffset = 50; // minimun number of pixels for sliding var verticalDelay = 150; // to avoid 2 slides in a row @@ -35,7 +35,7 @@ jQuery(document).ready(function($){ $firstSlide = $slides.first(), $lastSlide = $slides.last(), $auxSlide = null; - + var total = $slides.length; var labels = { @@ -90,16 +90,15 @@ jQuery(document).ready(function($){ $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'}); - var nextSlide; - + nextSlide = $currentSlide.next(); slidePointer.current = ((slidePointer.current+1)%total); - if (slidePointer.current == 0) slidePointer.current = total; + if (slidePointer.current === 0) slidePointer.current = total; // show next slide nextSlide.show().addClass(ID.current); @@ -110,7 +109,7 @@ jQuery(document).ready(function($){ $currentSlide.hide().removeClass(ID.current); $currentSlide.siblings('.slide').last().after($currentSlide); $currentSlide = nextSlide; - + // update counter updateCounter(); @@ -134,7 +133,7 @@ jQuery(document).ready(function($){ hideCurrentSlide(); // get the next slide - var nextSlide = $currentSlide.next(); + nextSlide = $currentSlide.next(); nextSlide.show().addClass(ID.current); $currentSlide.siblings('.slide').last().after($currentSlide); @@ -154,6 +153,7 @@ jQuery(document).ready(function($){ }; var previousSlide = function() { + var prevSlide; if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { // Is vertical if ($slideshow.data('moving')) return; $slideshow.data('moving', true); @@ -161,9 +161,9 @@ jQuery(document).ready(function($){ $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 prevSlide.show().addClass(ID.current); // scroll to next slide @@ -202,7 +202,7 @@ jQuery(document).ready(function($){ // get the previous slide $currentSlide.before($currentSlide.siblings('.slide').last()); - var prevSlide = $currentSlide.prev(); + prevSlide = $currentSlide.prev(); prevSlide.show().addClass(ID.current); $currentSlide = prevSlide; @@ -231,14 +231,14 @@ jQuery(document).ready(function($){ // update counter updateCounter(); - } + }; var fireSlideEvent = function(slide) { var slideEvent = new window.CustomEvent('slidechanged', { detail: { slide: slide || $currentSlide } }); window.dispatchEvent(slideEvent); - } + }; /*** INIT SLIDESHOW ***/ @@ -275,7 +275,7 @@ jQuery(document).ready(function($){ // "previous" arrow clicked => previous slide $previous.click( function(e){ e.preventDefault(); - previousSlide() + previousSlide(); }); // Add keyboard shortcuts for changing slides @@ -340,10 +340,10 @@ jQuery(document).ready(function($){ function getArrayOfHashParams() { var hash = window.location.hash.replace('#', '').split('&'); - var paramsArr = new Array(); + var paramsArr = new Array([]); for (var i = 0; i < hash.length; i++) { var itemArray = hash[i].split('='); - var action = new Object(); + var action = new Object({}); action.key = itemArray[0]; action.value = itemArray[1]; paramsArr.push(action); @@ -402,10 +402,10 @@ jQuery(document).ready(function($){ jQuery('.tab-content').removeClass('current'); $this.addClass('current'); jQuery("#"+tab_id).addClass('current'); - }) + }); }); - + // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard $(document).keypress(function(e) { if(e.which == 13) { From 2127a04363f04edc16a6f7a502f42d23e7683d64 Mon Sep 17 00:00:00 2001 From: Felipe Valverde Date: Sun, 29 Jan 2017 15:53:23 -0500 Subject: [PATCH 02/53] fix: jump from any slide to any other slide --- static/js/webslides-lite.js | 6 ++++-- static/js/webslides.js | 7 +++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/static/js/webslides-lite.js b/static/js/webslides-lite.js index ff515e0..1d72552 100644 --- a/static/js/webslides-lite.js +++ b/static/js/webslides-lite.js @@ -226,7 +226,10 @@ jQuery(document).ready(function($){ $currentSlide = $slides.eq(moveToSlide); $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; // update counter @@ -368,4 +371,3 @@ jQuery(document).ready(function($){ $('body').toggleClass('baseline').css('height', $(document).height()); } }); - diff --git a/static/js/webslides.js b/static/js/webslides.js index ecd8b55..2a951c3 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -226,7 +226,10 @@ jQuery(document).ready(function($){ $currentSlide = $slides.eq(moveToSlide); $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; // update counter @@ -411,4 +414,4 @@ jQuery(document).ready(function($){ if(e.which == 13) { $('body').toggleClass('baseline').css('height', $(document).height()); } - }); \ No newline at end of file + }); From 0148cb04055c1d8867812d6d2d3fd5f943d10e6e Mon Sep 17 00:00:00 2001 From: Felipe Valverde Date: Sun, 29 Jan 2017 16:01:08 -0500 Subject: [PATCH 03/53] add: public interface to jump between slides --- static/js/webslides-lite.js | 5 +++++ static/js/webslides.js | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/static/js/webslides-lite.js b/static/js/webslides-lite.js index 1d72552..30896b2 100644 --- a/static/js/webslides-lite.js +++ b/static/js/webslides-lite.js @@ -363,6 +363,11 @@ jQuery(document).ready(function($){ 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 diff --git a/static/js/webslides.js b/static/js/webslides.js index 2a951c3..0b9a329 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -407,6 +407,11 @@ jQuery(document).ready(function($){ 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 From d175a50ff12dd0e5de8998162aec18d14c4c6df0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 4 Feb 2017 09:34:56 +0100 Subject: [PATCH 04/53] A new release every 8th day of the month. --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 5bac176..0bccbd8 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ Finally, everything you need to make HTML presentations in a beautiful way. Just Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. ### Features +A new release every 8th day of the month. + Version 0.1 (Jan 8, 2017): - Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe. From 39faa13eb73ba8aa87375b3790b36565d63adf0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Wed, 8 Feb 2017 11:25:08 +0100 Subject: [PATCH 05/53] [class*="bg-"] .bg-white color: #333, text-shadow:none; --- static/css/colors.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/css/colors.css b/static/css/colors.css index 60d7ea7..30d3caa 100644 --- a/static/css/colors.css +++ b/static/css/colors.css @@ -170,6 +170,10 @@ Slides - Backgrounds
.bg-white { background-color: #fff; } +[class*="bg-"] .bg-white { + text-shadow: none; + color: #333; +} /* BG Apple Keynote*/ From 2019a33cea1072e23ba2ec5f1e1f87328e44d9db Mon Sep 17 00:00:00 2001 From: May Kittens Devour Your Soul Date: Sat, 11 Feb 2017 12:28:27 +0100 Subject: [PATCH 06/53] Create CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1 @@ + From df06b6b13f68183d6657bef10b8bc1137c242ae5 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 14:56:11 +0100 Subject: [PATCH 07/53] FIX: scrolling didn't work in Firefox, changing wheelDetail to 3 --- static/js/webslides.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/js/webslides.js b/static/js/webslides.js index 0b9a329..bd6eb7f 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -24,7 +24,7 @@ jQuery(document).ready(function($){ var easing = 'swing'; var slideOffset = 50; // minimun number of pixels for sliding var verticalDelay = 150; // to avoid 2 slides in a row - var wheelDetail = -6; // how far the wheel turned for Firefox + var wheelDetail = -3; // how far the wheel turned for Firefox var wheelDelta = 150; // how far the wheel turned for Chrome var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); @@ -358,10 +358,10 @@ jQuery(document).ready(function($){ 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) { + if (event.originalEvent.wheelDelta > wheelDelta || event.originalEvent.detail <= wheelDetail) { // Scroll up previousSlide(); - } else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail > -wheelDetail) { + } else if (event.originalEvent.wheelDelta < -wheelDelta || event.originalEvent.detail >= -wheelDetail) { // scroll down nextSlide(); } From b71550d9542f63ac8ec5a740ae237d32f0c1c6d4 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 16:25:46 +0100 Subject: [PATCH 08/53] Transform to javascript object --- demos/classes.html | 47 +-- demos/components.html | 69 ++-- demos/keynote.html | 51 +-- demos/landings.html | 58 +-- demos/portfolios.html | 65 ++-- demos/why-webslides.html | 54 +-- static/js/webslides.js | 805 ++++++++++++++++++++++----------------- 7 files changed, 632 insertions(+), 517 deletions(-) diff --git a/demos/classes.html b/demos/classes.html index fa86b03..094f87a 100644 --- a/demos/classes.html +++ b/demos/classes.html @@ -3,39 +3,39 @@ - + - + WebSlides Tutorial: Classes - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -90,16 +90,16 @@ - +
- + - +
@@ -1928,17 +1928,20 @@
- +
- - + + + diff --git a/demos/components.html b/demos/components.html index b3d03f5..ec19a67 100644 --- a/demos/components.html +++ b/demos/components.html @@ -3,39 +3,39 @@ - + - + WebSlides Documentation: Components - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -90,16 +90,16 @@ - +
- + - +
@@ -303,7 +303,7 @@

- Google + Google @@ -1984,7 +1984,7 @@

  • Founded 2040
    • -
  • +
  • 120+ Prebuilt Slides
    • @@ -2508,7 +2508,7 @@

    Buttons

    - .button + .button @@ -2527,7 +2527,7 @@

    a.badge-ios and a.badge-android

    - iOS App + iOS App Android App

    @@ -2817,7 +2817,7 @@

    Responsive Videos

    <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

    .embed

    @@ -2842,7 +2842,7 @@
    - +
    @@ -2904,7 +2904,7 @@

    Transparent Logos

    - Change the color of a .svg/.png image using CSS. Images are property of their respective owners. + Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

    - +
    @@ -3084,7 +3084,7 @@

  • particles.js

    - A lightweight .js library for creating particles. + A lightweight .js library for creating particles.
  • @@ -3121,17 +3121,20 @@
    • - +
    - + - + + diff --git a/demos/keynote.html b/demos/keynote.html index 78099d2..49f2847 100644 --- a/demos/keynote.html +++ b/demos/keynote.html @@ -3,39 +3,39 @@ - + - + WebSlides Keynote: Make a Keynote presentation using HTML - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -90,16 +90,16 @@ - +
    - + - +
    @@ -473,7 +473,7 @@

    - Redesigning + Redesigning @@ -530,7 +530,7 @@

    Works with all major banks

    - Apple Pay is accepted in restaurants, hotels... + Apple Pay is accepted in restaurants, hotels...
  • @@ -739,7 +739,7 @@

    Responsive Videos

    <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

    .embed

    @@ -838,17 +838,20 @@

    @jlantunez

    * * *

    • - +
    - + + diff --git a/demos/landings.html b/demos/landings.html index 424ddc6..b45f969 100644 --- a/demos/landings.html +++ b/demos/landings.html @@ -3,39 +3,39 @@ - + - + WebSlides Landings: Create your web presence easily - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -92,13 +92,13 @@
    - + - +
    @@ -371,7 +371,7 @@

    New in London

    Hotel Daenerys

    -

    The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.

    +

    The Daenerys has facilities such as a 24-hour front desk, an elevator with access to all rooms, and a terrace with a garden where guests can enjoy breakfast during the summer.

    More info

    @@ -1144,7 +1144,7 @@
  • Founded 1986
    • -
  • +
  • 120+ Prebuilt Slides
    • @@ -1518,7 +1518,7 @@

    Buttons

    - .button + .button @@ -1537,7 +1537,7 @@

    a.badge-ios and a.badge-android

    - iOS App + iOS App Android App

    @@ -1694,7 +1694,7 @@

    Transparent Logos

    - Change the color of a .svg/.png image using CSS. Images are property of their respective owners. + Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

      @@ -1718,7 +1718,7 @@
    • - +

      img.whitelogo

      • @@ -1811,7 +1811,7 @@

      Responsive Videos

      <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

      .embed

      @@ -1836,7 +1836,7 @@
    - +
    @@ -1913,16 +1913,20 @@
    - +
    - + - + + + diff --git a/demos/portfolios.html b/demos/portfolios.html index 6246231..64d318d 100644 --- a/demos/portfolios.html +++ b/demos/portfolios.html @@ -3,39 +3,39 @@ - + - + WebSlides Portfolios: Showcase your work - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,16 +51,16 @@ - + - + - + @@ -90,16 +90,16 @@ - +
    - + - +
    @@ -358,7 +358,7 @@

    - Redesigning + Redesigning @@ -458,7 +458,7 @@
  • Founded 1976
    • -
  • +
  • 120+ Prebuilt Slides
    • @@ -1051,7 +1051,7 @@

    .card-50.bg-white

    - Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro. + Travis is the most popular travel app in the world. It collects reviews from travellers about hotels, restaurants and attractions. We partnered with various divisions to create a campaign for Travis Pro.

    • @@ -1192,7 +1192,7 @@

      Works with all major banks

      - Apple Pay is accepted in restaurants, hotels... + Apple Pay is accepted in restaurants, hotels...
  • @@ -1451,7 +1451,7 @@

    Transparent Logos

    - Change the color of a .svg/.png image using CSS. Images are property of their respective owners. + Change the color of a .svg/.png image using CSS. Images are property of their respective owners.

      @@ -1475,8 +1475,8 @@
    • - - img.whitelogo + + img.whitelogo
    @@ -1722,7 +1722,7 @@

    Responsive Videos

    <div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">  
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
  </iframe>
 </div>

    .embed

    @@ -1747,7 +1747,7 @@
    - +
    • @@ -1857,13 +1857,16 @@
    - + - + + diff --git a/demos/why-webslides.html b/demos/why-webslides.html index 37764ad..6ca4022 100644 --- a/demos/why-webslides.html +++ b/demos/why-webslides.html @@ -3,39 +3,39 @@ - + - + WebSlides: Why WebSlides is so inspiring? - + - + - + - + - + - + - + @@ -45,7 +45,7 @@ - + @@ -53,7 +53,7 @@ - + @@ -62,10 +62,11 @@ - + +
    @@ -92,22 +93,22 @@
    - +
    - + - +

    Good Karma

    - WebSlides — HTML presentations made easy.
    + WebSlides — HTML presentations made easy.
    Hypertext and beauty as narrative elements.

    - +
    - + - + - + + diff --git a/static/js/webslides.js b/static/js/webslides.js index bd6eb7f..007c609 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -9,137 +9,343 @@ 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 easing = 'swing'; - var slideOffset = 50; // minimun number of pixels for sliding - var verticalDelay = 150; // to avoid 2 slides in a row - var wheelDetail = -3; // how far the wheel turned for Firefox - var wheelDelta = 150; // how far the wheel turned for Chrome - var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); + var obj = {}; - var $slideshow = jQuery('#' + ID.slideshow), - $navigation = jQuery('
    ').attr('id','navigation'), - $slides = $slideshow.children('section').addClass(ID.slide), - $currentSlide, - $firstSlide = $slides.first(), - $lastSlide = $slides.last(), - $auxSlide = null; + // Private vars + var easing = 'swing'; + var slideOffset = 50; // minimun number of pixels for sliding + var verticalDelay = 150; // to avoid 2 slides in a row + var wheelDetail = -3; // how far the wheel turned for Firefox + var wheelDelta = 150; // how far the wheel turned for Chrome + var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/)); - var total = $slides.length; + var $slideshow, + $navigation, + $slides, + $counter, + $next, + $previous, + $currentSlide, + $firstSlide, + $lastSlide, + $auxSlide = null, + slidePointer; - var labels = { - next : $slideshow.hasClass(ID.verticalClass)?'↓':'→', - previous : $slideshow.hasClass(ID.verticalClass)?'↑':'←', - separator : ' / ' - }; + var total = 0; + + 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('
    ').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)?'↓':'→', + previous : $slideshow.hasClass(obj.settings.verticalClass)?'↑':'←', + separator : ' / ' + }; + + // make sure the last slide doesn't page break while printing. + jQuery('head').append( '' ); + + // remove non-section children (like html comments which wp wraps in

    tags) + $slideshow.children().not('section').remove(); + + // add navigational arrows and counter + $navigation.append(jQuery('').attr('id',obj.settings.previous).html(labels.previous)); + $navigation.append(jQuery('').attr('id',obj.settings.next).html(labels.next)); + $slideshow.append($navigation); + $slideshow.append(jQuery('').attr('id',obj.settings.counter)); + + $counter = jQuery('#'+obj.settings.counter), + $next = jQuery('#'+obj.settings.next), + $previous = jQuery('#'+obj.settings.previous); + + $navigation.append($counter); + + $slideshow.data('moving', false); + }; + + /** + * Starts sliders + */ + var run = function() { + // Initially hide all slides + $slides.hide(); + + // The first slide is number first, last is slides length + slidePointer = { + current : 1, + last : $slides.length + }; + + var slideState = parseInt(document.location.hash.replace('#slide=', '')); + + if ( slideState && (slideState > 0 && slideState <= $slides.length )) { + // if slide= hash state is given and valid, go to that slide + obj.goToSlide(slideState); + } + else { + // The first slide is the first slide, so make visible and set the counter... + $currentSlide = $firstSlide.show().addClass(obj.settings.current); + updateCounter(); + } + }; + + /** + * Init click events + */ + var initClickEvents = function() { + // "next" arrow clicked => next slide + $next.click( function(e){ + e.preventDefault(); + obj.nextSlide(); + }); + + // "previous" arrow clicked => previous slide + $previous.click( function(e){ + e.preventDefault(); + obj.previousSlide(); + }); + } - // make sure the last slide doesn't page break while printing. - jQuery('head').append( '' ); - - // remove non-section children (like html comments which wp wraps in

    tags) - $slideshow.children().not('section').remove(); - - // add navigational arrows and counter - $navigation.append(jQuery('').attr('id',ID.previous).html(labels.previous)); - $navigation.append(jQuery('').attr('id',ID.next).html(labels.next)); - $slideshow.append($navigation); - $slideshow.append(jQuery('').attr('id',ID.counter)); - - 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('#')); + /** + * Init keypress events + */ + var initKeyEvents = function() { + // Add keyboard shortcuts for changing slides + jQuery(document).keydown(function(e){ + if (!$slideshow.hasClass(obj.settings.verticalClass) || isMobile) { + $slideshow.data('iswheel', false); + if (e.which == 39 || e.which == 32) { + // right key pressed => next slide + obj.nextSlide(); + return false; } - - history.pushState(null, null, '#slide='+ slidePointer.current ); - }; - - var hideCurrentSlide = function() { - // hide the current slide - if ( $currentSlide ) { - $currentSlide.hide().removeClass(ID.current); + else if (e.which == 37) { + // left or l key pressed => previous slide + obj.previousSlide(); + return false; } - }; + } + }); - $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; - }); + // Add keyboard shortcuts for changing slides + jQuery(document).keydown(function(e){ + if ($slideshow.hasClass(obj.settings.verticalClass) && !isMobile) { + $slideshow.data('iswheel', false); + if (e.which == 40 || e.which == 32) { + // right key pressed => next slide + obj.nextSlide(); + return false; + } + else if (e.which == 38) { + // left or l key pressed => previous slide + 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(); + } + } + }); + } - } else { // Is landscape - jQuery("html, body").animate({ scrollTop: 0 }, 0); - // hide current slide - hideCurrentSlide(); + /** + * 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(); + } + } + }); + } - // get the next slide - nextSlide = $currentSlide.next(); + /** + * Init hash + */ + var initHash = function() { + /** + * Bind the event HashChange when the prev/next history button was clicked + */ + jQuery(window).bind("hashchange", function () { + if (hasHash()) { + goToSlideIfSlideHashChange(); + } else { + window.location.reload(); + } + }); - nextSlide.show().addClass(ID.current); + function hasHash() { + return window.location.hash ? true : false; + } + + function goToSlideIfSlideHashChange() { + var paramsArr = getArrayOfHashParams(); + var slideObj = $.grep(paramsArr, function (e) { + return (e.key == "slide"); + }); + if (slideObj.length == 1) { + obj.goToSlide(slideObj[0].value); + } + } + + function getArrayOfHashParams() { + var hash = window.location.hash.replace('#', '').split('&'); + var paramsArr = new Array([]); + for (var i = 0; i < hash.length; i++) { + var itemArray = hash[i].split('='); + var action = new Object({}); + action.key = itemArray[0]; + action.value = itemArray[1]; + paramsArr.push(action); + } + return paramsArr; + } + } + + /*** 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; - slidePointer.current = ((slidePointer.current+1)%total); - if (slidePointer.current == 0) slidePointer.current = total; // update counter updateCounter(); @@ -149,274 +355,163 @@ jQuery(document).ready(function($){ // 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(); - 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'}); + // get the next slide + nextSlide = $currentSlide.next(); - $currentSlide.before($currentSlide.siblings('.slide').last()); + 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; - prevSlide = $currentSlide.prev(); + // update counter + updateCounter(); - 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; + // update url + updateURL(); - // not the last slide => go to the next one and increment the counter - $currentSlide = prevSlide; - slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); + // fire slide event + fireSlideEvent(); + } + }; - // update counter - updateCounter(); + /** + * 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'}); - // update url - updateURL(); + $currentSlide.before($currentSlide.siblings('.slide').last()); - // fire slide event - fireSlideEvent(); + prevSlide = $currentSlide.prev(); - jQuery('html').css({overflow: 'auto'}); - setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); - } - animated = true; - }); + 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; - - - } 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); + // 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 + // update url updateURL(); // fire slide event fireSlideEvent(); + + jQuery('html').css({overflow: 'auto'}); + setTimeout(function() {$slideshow.data('moving', false);}, $slideshow.data('iswheel')?verticalDelay:0); } - }; - - 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 ***/ - - // Initially hide all slides - $slides.hide(); - - // The first slide is number first, last is slides length - var slidePointer = { - current : 1, - last : $slides.length - }; - - var slideState = parseInt(document.location.hash.replace('#slide=', '')); - - if ( slideState && (slideState > 0 && slideState <= $slides.length )) { - // if slide= hash state is given and valid, go to that slide - goToSlide(slideState); - } - else { - // The first slide is the first slide, so make visible and set the counter... - $currentSlide = $firstSlide.show().addClass(ID.current); - updateCounter(); - } - - - /*** EVENTS ***/ - - // "next" arrow clicked => next slide - $next.click( function(e){ - e.preventDefault(); - nextSlide(); + animated = true; }); - // "previous" arrow clicked => previous slide - $previous.click( function(e){ - e.preventDefault(); - previousSlide(); - }); + } else { // Is landscape + jQuery("html, body").animate({ scrollTop: 0 }, 0); + // hide current slide + hideCurrentSlide(); - // Add keyboard shortcuts for changing slides - jQuery(document).keydown(function(e){ - if (!$slideshow.hasClass(ID.verticalClass) || isMobile) { - $slideshow.data('iswheel', false); - if (e.which == 39 || e.which == 32) { - // right key pressed => next slide - nextSlide(); - return false; - } - else if (e.which == 37) { - // left or l key pressed => previous slide - previousSlide(); - return false; - } - } - }); + // get the previous slide + $currentSlide.before($currentSlide.siblings('.slide').last()); + prevSlide = $currentSlide.prev(); - // Add keyboard shortcuts for changing slides - jQuery(document).keydown(function(e){ - if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { - $slideshow.data('iswheel', false); - if (e.which == 40 || e.which == 32) { - // right key pressed => next slide - nextSlide(); - return false; - } - else if (e.which == 38) { - // left or l key pressed => previous slide - previousSlide(); - return false; - } - } - }); + prevSlide.show().addClass(obj.settings.current); + $currentSlide = prevSlide; + slidePointer.current = slidePointer.current== 1? total : (slidePointer.current-1); + // update counter + updateCounter(); - /** - * Bind the event HashChange when the prev/next history button was clicked - */ - jQuery(window).bind("hashchange", function () { - if (hasHash()) { - goToSlideIfSlideHashChange(); - } else { - window.location.reload(); - } - }); + // update URL + updateURL(); - function hasHash() { - return window.location.hash ? true : false; - } - - function goToSlideIfSlideHashChange() { - var paramsArr = getArrayOfHashParams(); - var slideObj = $.grep(paramsArr, function (e) { - return (e.key == "slide"); - }); - if (slideObj.length == 1) { - goToSlide(slideObj[0].value); - } - } - - function getArrayOfHashParams() { - var hash = window.location.hash.replace('#', '').split('&'); - var paramsArr = new Array([]); - for (var i = 0; i < hash.length; i++) { - var itemArray = hash[i].split('='); - var action = new Object({}); - action.key = itemArray[0]; - action.value = itemArray[1]; - paramsArr.push(action); - } - 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(); - } - } - }); - - // 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(); - } - } - }); - - // Tabs - jQuery('ul.tabs li').click(function(){ - var $this = jQuery(this); - var tab_id = $this.attr('data-tab'); - jQuery('ul.tabs li').removeClass('current'); - jQuery('.tab-content').removeClass('current'); - $this.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 - $(document).keypress(function(e) { - if(e.which == 13) { - $('body').toggleClass('baseline').css('height', $(document).height()); + // 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); + var tab_id = $this.attr('data-tab'); + jQuery('ul.tabs li').removeClass('current'); + jQuery('.tab-content').removeClass('current'); + $this.addClass('current'); + jQuery("#"+tab_id).addClass('current'); }); +}); + +// I don't know what it does +// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard +jQuery(document).keypress(function(e) { + if(e.which == 13) { + jQuery('body').toggleClass('baseline').css('height', $(document).height()); + } +}); From 7a8f09cd73c92e12b0704836952d113b70b7f5f1 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 16:37:39 +0100 Subject: [PATCH 09/53] FIX: touch events didn't work --- static/js/webslides.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/js/webslides.js b/static/js/webslides.js index 007c609..cd11636 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -236,11 +236,11 @@ jQuery.fn.webslides = function(options) { 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(); + obj.previousSlide(); // Scroll up } else if(diffX > slideOffset) { // scroll down - nextSlide(); + obj.nextSlide(); } } }); From cab0758f9e930989341fa7358cf6e9ce57ea7f79 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 16:50:24 +0100 Subject: [PATCH 10/53] Initialize webslide in index.html --- index.html | 59 ++++++++++++++++++++++-------------------- static/js/webslides.js | 2 -- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 4c0f900..2bc3e24 100644 --- a/index.html +++ b/index.html @@ -3,39 +3,39 @@ - + - - + + WebSlides: Making HTML presentations easy - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,11 +60,11 @@ - + - +

    @@ -91,16 +91,16 @@
    - +
    - +
    @@ -370,26 +370,29 @@
    - + - - + + - + --> + - + + diff --git a/static/js/webslides.js b/static/js/webslides.js index cd11636..b61eace 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -495,7 +495,6 @@ jQuery.fn.webslides = function(options) { } -// I don't know what it does jQuery(document).ready(function($){ // Tabs jQuery('ul.tabs li').click(function(){ @@ -508,7 +507,6 @@ jQuery(document).ready(function($){ }); }); -// I don't know what it does // Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard jQuery(document).keypress(function(e) { if(e.which == 13) { From d56448431d891c453d6e29c49f05caf2759668ef Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 16:51:46 +0100 Subject: [PATCH 11/53] Moving specific javascript from library to demo --- demos/components.html | 21 ++++++++++++++++++++- static/js/webslides.js | 20 -------------------- 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/demos/components.html b/demos/components.html index ec19a67..49a7368 100644 --- a/demos/components.html +++ b/demos/components.html @@ -3134,7 +3134,26 @@ - + diff --git a/static/js/webslides.js b/static/js/webslides.js index b61eace..e176ad1 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -493,23 +493,3 @@ jQuery.fn.webslides = function(options) { // Return same object return obj; } - - -jQuery(document).ready(function($){ - // Tabs - jQuery('ul.tabs li').click(function(){ - var $this = jQuery(this); - var tab_id = $this.attr('data-tab'); - jQuery('ul.tabs li').removeClass('current'); - jQuery('.tab-content').removeClass('current'); - $this.addClass('current'); - jQuery("#"+tab_id).addClass('current'); - }); -}); - -// Prototype better, faster. To show the grid/baseline.png, press Enter on keyboard -jQuery(document).keypress(function(e) { - if(e.which == 13) { - jQuery('body').toggleClass('baseline').css('height', $(document).height()); - } -}); From 5c1dcdb0fbce7b72da207af35f6e8936b347b4ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 16:55:22 +0100 Subject: [PATCH 12/53] .tabs removed --- demos/components.html | 79 ++++--------------------------------------- 1 file changed, 6 insertions(+), 73 deletions(-) diff --git a/demos/components.html b/demos/components.html index 49a7368..bb5f343 100644 --- a/demos/components.html +++ b/demos/components.html @@ -319,11 +319,7 @@

    Navigation

    -
      -
    • ul.tabs
      • -
    • columns
      • -
    -
    +

    nav.navbar

    -
    - -
    + +

    Company

    @@ -435,8 +430,6 @@
    -
    -
    @@ -1803,49 +1796,8 @@
    -
    -

    Tell a Story

    -

    Hi, this is WebSlides. HTML presentations made simple.
    I'm a cute solution with clean markup and lovely CSS.

    -
    -
    -
      -
    • -
      - - - -

      Indexed content

      - Sharing is caring. -
      -
      • -
    • -
      -

      - - - - Just essential features -

      - Keyboard navigation... -
      -
      • -
    • -
      - - - -

      - Prototype faster -

      - with clean code -
      -
      • -
    -
    -
      -
    • Purpose
      • -
    • Benefits
      • -
    +

    Tell a Story

    +

    Hi, this is WebSlides. HTML presentations made simple.
    I'm a cute solution with clean markup and lovely CSS.

    @@ -3134,26 +3086,7 @@ - + From 605b6f8567bf3ad76f516ce119ccebd0e19492f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 16:56:46 +0100 Subject: [PATCH 13/53] .tabs removed --- static/css/colors.css | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/static/css/colors.css b/static/css/colors.css index 30d3caa..099cc2c 100644 --- a/static/css/colors.css +++ b/static/css/colors.css @@ -363,31 +363,6 @@ nav li.email a:hover { background: #dd4b39; } - -/*========================================= -Tabs -=========================================== */ - - -ul.tabs li { - border: 1px solid rgba(0, 20, 80, 0.1); - border-right: none; -} - -ul.tabs li:last-child { - border-right: 1px solid rgba(0, 20, 80, 0.1); -} - -ul.tabs li.current { - background: rgba(255, 255, 255, 0.09); -} - -ul.tabs li:before { - background-color: #44d; -} - - - /*=================================================== .flexblock li hover/active ===================================================== */ From 8b44dcf718b910e0db2cb137b5e3e4943f43f4bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 16:57:42 +0100 Subject: [PATCH 14/53] .tabs removed --- static/css/base.css | 75 +-------------------------------------------- 1 file changed, 1 insertion(+), 74 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index e929c82..7fc11ef 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -25,7 +25,6 @@ 3.1 Logo 4. Navigation 4.1 Navbars - 4.2 Tabs 5. SLIDES (vertically and horizontally centered) 5.1 Mini container & Alignment 5.2 Counter / Navigation Slides @@ -303,8 +302,7 @@ body { overflow-x: hidden; } -/* == Prototype faster - Vertical rhythm -To show the grid/baseline.png, press ENTER key on keyboard == */ +/* == Prototype faster - Vertical rhythm == */ body.baseline { background: url(../images/baseline.png) left top .8rem/.8rem; @@ -1314,77 +1312,6 @@ nav.navbar li a{justify-content:flex-start; } } -/*=== 4.2. Tabs === */ - -ul.tabs { - display: inline-block; - margin-bottom: 3.2rem; -} - -ul.tabs li { - position: relative; - display: table-cell; - /*ftext-transform: uppercase; - letter-spacing: .1rem;*/ - padding: .8rem 2.4rem; - cursor: pointer; -} - -.tabs li:before { - position: absolute; - content: ""; - display: table; - clear: both; - bottom: 0; - left: 50%; - width: 0; - height: 3px; - -webkit-transition: width 200ms ease, opacity 200ms ease; - transition: width 200ms ease, opacity 200ms ease; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); -} - -.tabs li.current:before { - opacity: 1; - width: 100%; -} - -ul.tabs li.current { - font-weight: 600; -} -/*.tabs li:after{ - position: relative; - right: -2.8rem; - font-size:1.6rem; - font-weight:300; - content: "*"; - -} -.tabs li:last-child:after { - display: none; -} - -*/ - -.tab-content { - display: none; -} - -.tab-content.current { - display: inherit; - -webkit-animation: fadeIn ease-in 1; - animation: fadeIn ease-in 1; - -webkit-animation-duration: .3s; - animation-duration: .3s; -} - -@media (max-width: 400px) { - .tabs li { - display: block; - } -} - /*============================================ 5. SLIDES (Full Screen) Vertically and horizontally centered From dd81ae3bc4a4e9321d0b329fa0e5fe3268c29169 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 16:58:15 +0100 Subject: [PATCH 15/53] README.md update --- README.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0bccbd8..e35654e 100644 --- a/README.md +++ b/README.md @@ -39,9 +39,28 @@ Version 0.1 (Jan 8, 2017): 
    <article id="webslides" class="vertical">
    +### How it works + +You need to add the follow javascript to initialize the webslide objet + +```javascript +var slide = jQuery('#webslides').webslides(); +``` + +Now you can use the slide with these functions + +```javascript +// Moving to next slide +slide.nextSlide(); +// Moving to previous slide +slide.previousSlide(); +// Moving to a specific slide +slide.goToSlide(n); +``` + ### What's in the download? -The download includes demos and images (devices and logos). +The download includes demos and images (devices and logos). All content is for demo purposes only. Images are property of their respective owners. ``` @@ -77,7 +96,7 @@ You can add: ### License -WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT). +WebSlides is licensed under the [MIT License](https://opensource.org/licenses/MIT). Use it to make something cool. ### Credits From 4ba677b7999f99a37e54bbc48a0c3b99eb589b5c Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 11 Feb 2017 17:01:01 +0100 Subject: [PATCH 16/53] Changelog and version updated --- CHANGELOG.md | 2 ++ static/js/webslides.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b13789..38d33de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1 +1,3 @@ +## 0.1 (2017-02-11) +Transform the library into a object diff --git a/static/js/webslides.js b/static/js/webslides.js index e176ad1..c416a9f 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,6 +1,6 @@ /*================================================================== Name: WebSlides -Version: Pro (trackpad gestures and keyboard shortcuts). +Version: 0.1 Pro (trackpad gestures and keyboard shortcuts). Description: HTML presentations made easy. URL: https://github.com/jlantunez/WebSlides Thanks @LuisSacristan for your help :) From e4103d9e2749a908ffd71b0a6463ff566a21721b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:04:56 +0100 Subject: [PATCH 17/53] the webslides object --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e35654e..dcf2154 100644 --- a/README.md +++ b/README.md @@ -41,13 +41,13 @@ Version 0.1 (Jan 8, 2017): ### How it works -You need to add the follow javascript to initialize the webslide objet +You need to add the follow javascript to initialize the webslides object. ```javascript var slide = jQuery('#webslides').webslides(); ``` -Now you can use the slide with these functions +Now you can use the slide with these functions: ```javascript // Moving to next slide From db98d13c14ac8dfeafef94ecac0dcd83c73c25e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:07:22 +0100 Subject: [PATCH 18/53] delete webslides-lite.js --- static/js/webslides-lite.js | 378 ------------------------------------ 1 file changed, 378 deletions(-) delete mode 100644 static/js/webslides-lite.js diff --git a/static/js/webslides-lite.js b/static/js/webslides-lite.js deleted file mode 100644 index 30896b2..0000000 --- a/static/js/webslides-lite.js +++ /dev/null @@ -1,378 +0,0 @@ -/*================================================================== -Name: WebSlides -Version: Lite (keyboard shortcuts, no trackpad gestures). -Description: HTML presentations made easy. -URL: https://github.com/jlantunez/WebSlides -Thanks @LuisSacristan for your help :) -- -Based on SimpleSlides, by Jenn Schiffer: -https://github.com/jennschiffer/SimpleSlides -==================================================================== */ - -jQuery(document).ready(function($){ - - 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 easing = 'swing'; - var slideOffset = 50; // minimun number of pixels for sliding - var verticalDelay = 150; // to avoid 2 slides in a row - var wheelDetail = -6; // how far the wheel turned for Firefox - 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('
    ').attr('id','navigation'), - $slides = $slideshow.children('section').addClass(ID.slide), - $currentSlide, - $firstSlide = $slides.first(), - $lastSlide = $slides.last(), - $auxSlide = null; - - var total = $slides.length; - - var labels = { - next : $slideshow.hasClass(ID.verticalClass)?'↓':'→', - previous : $slideshow.hasClass(ID.verticalClass)?'↑':'←', - separator : ' / ' - }; - - - // make sure the last slide doesn't page break while printing. - jQuery('head').append( '' ); - - // remove non-section children (like html comments which wp wraps in

    tags) - $slideshow.children().not('section').remove(); - - // add navigational arrows and counter - $navigation.append(jQuery('').attr('id',ID.previous).html(labels.previous)); - $navigation.append(jQuery('').attr('id',ID.next).html(labels.next)); - $slideshow.append($navigation); - $slideshow.append(jQuery('').attr('id',ID.counter)); - - 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 ***/ - - // Initially hide all slides - $slides.hide(); - - // The first slide is number first, last is slides length - var slidePointer = { - current : 1, - last : $slides.length - }; - - var slideState = parseInt(document.location.hash.replace('#slide=', '')); - - if ( slideState && (slideState > 0 && slideState <= $slides.length )) { - // if slide= hash state is given and valid, go to that slide - goToSlide(slideState); - } - else { - // The first slide is the first slide, so make visible and set the counter... - $currentSlide = $firstSlide.show().addClass(ID.current); - updateCounter(); - } - - - /*** EVENTS ***/ - - // "next" arrow clicked => next slide - $next.click( function(e){ - e.preventDefault(); - nextSlide(); - }); - - // "previous" arrow clicked => previous slide - $previous.click( function(e){ - e.preventDefault(); - previousSlide(); - }); - - // Add keyboard shortcuts for changing slides - jQuery(document).keydown(function(e){ - if (!$slideshow.hasClass(ID.verticalClass) || isMobile) { - $slideshow.data('iswheel', false); - if (e.which == 39 || e.which == 32) { - // right key pressed => next slide - nextSlide(); - return false; - } - else if (e.which == 37) { - // left or l key pressed => previous slide - previousSlide(); - return false; - } - } - }); - - // Add keyboard shortcuts for changing slides - jQuery(document).keydown(function(e){ - if ($slideshow.hasClass(ID.verticalClass) && !isMobile) { - $slideshow.data('iswheel', false); - if (e.which == 40 || e.which == 32) { - // right key pressed => next slide - nextSlide(); - return false; - } - else if (e.which == 38) { - // left or l key pressed => previous slide - previousSlide(); - return false; - } - } - }); - - /** - * Bind the event HashChange when the prev/next history button was clicked - */ - jQuery(window).bind("hashchange", function () { - if (hasHash()) { - goToSlideIfSlideHashChange(); - } else { - window.location.reload(); - } - }); - - function hasHash() { - return window.location.hash ? true : false; - } - - function goToSlideIfSlideHashChange() { - var paramsArr = getArrayOfHashParams(); - var slideObj = $.grep(paramsArr, function (e) { - return (e.key == "slide"); - }); - if (slideObj.length == 1) { - goToSlide(slideObj[0].value); - } - } - - function getArrayOfHashParams() { - var hash = window.location.hash.replace('#', '').split('&'); - var paramsArr = new Array([]); - for (var i = 0; i < hash.length; i++) { - var itemArray = hash[i].split('='); - var action = new Object({}); - action.key = itemArray[0]; - action.value = itemArray[1]; - paramsArr.push(action); - } - return paramsArr; - } - - // Tabs - jQuery('ul.tabs li').click(function(){ - var $this = jQuery(this); - var tab_id = $this.attr('data-tab'); - jQuery('ul.tabs li').removeClass('current'); - jQuery('.tab-content').removeClass('current'); - $this.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 - $(document).keypress(function(e) { - if(e.which == 13) { - $('body').toggleClass('baseline').css('height', $(document).height()); - } - }); From 20b5d0cf64922fbf61f5b9d45af92f7c645eca50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:17:02 +0100 Subject: [PATCH 19/53] Initialize webslides in index.html --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 2bc3e24..01396ab 100644 --- a/index.html +++ b/index.html @@ -390,6 +390,7 @@ + From 66a694c2511c5fe55963c20d80260150be1ceffa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:18:21 +0100 Subject: [PATCH 20/53] 0.1.1 --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 38d33de..37c808a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ -## 0.1 (2017-02-11) +## 0.1.1 (2017-02-11) Transform the library into a object + +## 0.1 (2017-01-08) + +Initial release. From 9733087b8be621dd0ba1d62610c909dd612f4773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:19:10 +0100 Subject: [PATCH 21/53] 0.1.1 --- static/js/webslides.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/webslides.js b/static/js/webslides.js index c416a9f..4713fbb 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,6 +1,6 @@ /*================================================================== Name: WebSlides -Version: 0.1 Pro (trackpad gestures and keyboard shortcuts). +Version: 0.1.1 (trackpad gestures and keyboard shortcuts). Description: HTML presentations made easy. URL: https://github.com/jlantunez/WebSlides Thanks @LuisSacristan for your help :) From e3fd9de675fce97d0accca3cb32fa3fb515e2499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:20:34 +0100 Subject: [PATCH 22/53] 404 page. --- error.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/error.html b/error.html index 434cc22..2e19a39 100644 --- a/error.html +++ b/error.html @@ -80,7 +80,7 @@ - + - \ No newline at end of file + From f9b9b90384be4704339089947e7caa1910147d5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:23:47 +0100 Subject: [PATCH 23/53] 0.1.1 --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index dcf2154..d921826 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,10 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required. ### Features A new release every 8th day of the month. +Version 0.1 (Feb 11, 2017): + +- Transform the library into a object. + Version 0.1 (Jan 8, 2017): - Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe. From 21de58ed2f7f48bb1bda281235f207246e5d9f63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:24:34 +0100 Subject: [PATCH 24/53] changelog 0.1.1 --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d921826..78e3d33 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,10 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required. ### Features A new release every 8th day of the month. -Version 0.1 (Feb 11, 2017): +Version 0.1.1 (Feb 11, 2017): - Transform the library into a object. +- .tabs removed Version 0.1 (Jan 8, 2017): From e115f854d62b3d40a7a2cd7da34e6cb51f78281d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:25:04 +0100 Subject: [PATCH 25/53] .tabs removed --- CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37c808a..c44887f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ ## 0.1.1 (2017-02-11) -Transform the library into a object +- Transform the library into a object. +- .tabs removed. ## 0.1 (2017-01-08) -Initial release. +- Initial release. From cce61ccf1adb494911c7201323133b06d2a6cd3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:26:18 +0100 Subject: [PATCH 26/53] 0.1.1 --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 78e3d33..683a15d 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,6 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required. ### Features A new release every 8th day of the month. -Version 0.1.1 (Feb 11, 2017): - -- Transform the library into a object. -- .tabs removed - Version 0.1 (Jan 8, 2017): - Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe. @@ -23,6 +18,11 @@ Version 0.1 (Jan 8, 2017): - Fonts: Roboto, Maitree (Serif), and San Francisco. - Vertical rhythm (use multiples of 8). +Version 0.1.1 (Feb 11, 2017): + +- Transform the library into a object. +- .tabs removed + ### Markup - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. From 42311cd011fc147a848fbe704e0c8bf6f3b81bdf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:28:46 +0100 Subject: [PATCH 27/53] webslides-lite.js removed. --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c44887f..1b9fdcc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Transform the library into a object. - .tabs removed. +- webslides-lite.js removed. ## 0.1 (2017-01-08) From 89243c27311d2930172d8431209b71cdc69415f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 17:29:15 +0100 Subject: [PATCH 28/53] webslides-lite.js removed --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 683a15d..dcccae2 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ Version 0.1.1 (Feb 11, 2017): - Transform the library into a object. - .tabs removed +- webslides-lite.js removed. ### Markup From bce938b129c3a35373053e973347fdc304b5b1f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:15:53 +0100 Subject: [PATCH 29/53] 0.1.1 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dcccae2..9615b56 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Version 0.1 (Jan 8, 2017): Version 0.1.1 (Feb 11, 2017): -- Transform the library into a object. +- Transform the library into an object. - .tabs removed - webslides-lite.js removed. From fab1f602ff9bc7bbf5362dae38be57deacf3261b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:16:25 +0100 Subject: [PATCH 30/53] 0.1.1 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b9fdcc..50e97fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## 0.1.1 (2017-02-11) -- Transform the library into a object. +- Transform the library into an object. - .tabs removed. - webslides-lite.js removed. From e54723a1cc6de70be0c2c46c78f91869aa11f352 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:36:56 +0100 Subject: [PATCH 31/53] Initialize webslides --- index.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 01396ab..70943a8 100644 --- a/index.html +++ b/index.html @@ -387,13 +387,14 @@ + + + - - From 3856e4626e1b6fa0da965cef31d462a4c95ae7b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:39:41 +0100 Subject: [PATCH 32/53] Initialize webslides --- demos/classes.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/classes.html b/demos/classes.html index 094f87a..d3bf374 100644 --- a/demos/classes.html +++ b/demos/classes.html @@ -1936,12 +1936,13 @@ - - - + + + + From 520e84daf460ff2dbd76ec1b4e2931a636d62383 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:40:36 +0100 Subject: [PATCH 33/53] Initialize webslides --- demos/components.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/components.html b/demos/components.html index bb5f343..dd421b8 100644 --- a/demos/components.html +++ b/demos/components.html @@ -3081,12 +3081,13 @@ - - - + + + + From dd7f19da33b11b2bab793c10906ff484fa1ce753 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:41:18 +0100 Subject: [PATCH 34/53] Initialize webslides --- demos/keynote.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/keynote.html b/demos/keynote.html index 49f2847..fb2cfc6 100644 --- a/demos/keynote.html +++ b/demos/keynote.html @@ -846,12 +846,13 @@ - - - + + + + From 40807dbb7f6a8d36830a37bb1167268dbeffabe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:41:59 +0100 Subject: [PATCH 35/53] Initialize webslides --- demos/landings.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/landings.html b/demos/landings.html index b45f969..5f92152 100644 --- a/demos/landings.html +++ b/demos/landings.html @@ -1921,12 +1921,13 @@ - - - + + + + From f52735cb5731f73ecf086ef913fc3f59df27661f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:42:40 +0100 Subject: [PATCH 36/53] Initialize webslides --- demos/portfolios.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/portfolios.html b/demos/portfolios.html index 64d318d..a37757c 100644 --- a/demos/portfolios.html +++ b/demos/portfolios.html @@ -1861,12 +1861,13 @@ - - - + + + + From 93628962481a3cfcfe7fc8ac3cc31f855ff4cfb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:43:13 +0100 Subject: [PATCH 37/53] Initialize webslides --- demos/why-webslides.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/demos/why-webslides.html b/demos/why-webslides.html index 6ca4022..81c9fe7 100644 --- a/demos/why-webslides.html +++ b/demos/why-webslides.html @@ -342,12 +342,13 @@ - - - + + + + From 714c3d29acf5a766c163b25b5a3e2066a6b704ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:52:40 +0100 Subject: [PATCH 38/53] 0.1.1 date --- static/js/webslides.js | 1 + 1 file changed, 1 insertion(+) diff --git a/static/js/webslides.js b/static/js/webslides.js index 4713fbb..91785de 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,6 +1,7 @@ /*================================================================== Name: WebSlides Version: 0.1.1 (trackpad gestures and keyboard shortcuts). +Date: 2017-02-11 Description: HTML presentations made easy. URL: https://github.com/jlantunez/WebSlides Thanks @LuisSacristan for your help :) From a75c49a350069ed36a8039940a7d2ccdb1378d7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 18:53:11 +0100 Subject: [PATCH 39/53] 0.1.1 date --- static/css/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 7fc11ef..d50df94 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1,8 +1,8 @@ /*--------------------------------------------------------------------------------- App: WebSlides - Version: 0.1 - Date: 2017-01-08 + Version: 0.1.1 + Date: 2017-02-11 Description: A simple and versatile framework for building HTML presentations, landings, and portfolios. Author: José Luis Antúnez Author URI: http://twitter.com/jlantunez From 846194a65a2854680ead81a503cede21a95c78c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 20:13:33 +0100 Subject: [PATCH 40/53] 0.1.1 --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9615b56..065b25e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ # WebSlides = Good Karma -Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos) +Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos). + +A new release every 8th day of the month. Version 0.1 (Jan 8, 2017). ### Why WebSlides? Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. ### Features -A new release every 8th day of the month. - -Version 0.1 (Jan 8, 2017): - Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe. - Slide counter. From c33af8e5263953bdb147622fb1dbfcea506f3ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sat, 11 Feb 2017 20:14:07 +0100 Subject: [PATCH 41/53] 0.1.1 --- README.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/README.md b/README.md index 065b25e..9555dde 100644 --- a/README.md +++ b/README.md @@ -17,12 +17,6 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required. - Fonts: Roboto, Maitree (Serif), and San Francisco. - Vertical rhythm (use multiples of 8). -Version 0.1.1 (Feb 11, 2017): - -- Transform the library into an object. -- .tabs removed -- webslides-lite.js removed. - ### Markup - Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. From fc19ed4dea622e19d1232cf08da43eb86645b603 Mon Sep 17 00:00:00 2001 From: Luis Date: Sun, 12 Feb 2017 20:15:37 +0100 Subject: [PATCH 42/53] ID param is not longer needed --- demos/index.html | 43 ++++++++++++++++++++++-------------------- static/js/webslides.js | 4 ++-- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/demos/index.html b/demos/index.html index 57e2c2e..90699f3 100644 --- a/demos/index.html +++ b/demos/index.html @@ -3,39 +3,39 @@ - + - + WebSlides Demos - + - + - + - + - + - + - + @@ -43,7 +43,7 @@ - + @@ -51,7 +51,7 @@ - + @@ -60,7 +60,7 @@ - + @@ -93,13 +93,13 @@

    - + - +
    @@ -217,17 +217,20 @@
    - + - + - + + diff --git a/static/js/webslides.js b/static/js/webslides.js index 91785de..18e9264 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -13,6 +13,7 @@ https://github.com/jennschiffer/SimpleSlides jQuery.fn.webslides = function(options) { var obj = {}; + var $this = jQuery(this); // Private vars var easing = 'swing'; @@ -52,7 +53,6 @@ jQuery.fn.webslides = function(options) { */ var init = function(_options) { obj.settings = { - id : 'webslides', class : 'slide', counter : 'counter', navigation : 'navigation', @@ -75,7 +75,7 @@ jQuery.fn.webslides = function(options) { } var setup = function() { - $slideshow = jQuery('#' + obj.settings.id); + $slideshow = $this; $navigation = jQuery('
    ').attr('id', obj.settings.navigation); $slides = $slideshow.children('section').addClass(obj.settings.class); $firstSlide = $slides.first(); From 58cd4e765cf8487327f149520c5ddaeef36ea20d Mon Sep 17 00:00:00 2001 From: Luis Date: Sun, 12 Feb 2017 20:19:18 +0100 Subject: [PATCH 43/53] Wrong script in demos/index.html --- demos/index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/demos/index.html b/demos/index.html index 90699f3..33ab8ab 100644 --- a/demos/index.html +++ b/demos/index.html @@ -228,9 +228,6 @@ - From 19d72c8224d105b096c50aee005d5af59f936599 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sun, 12 Feb 2017 20:55:56 +0100 Subject: [PATCH 44/53] hashtag #webslides --- demos/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/index.html b/demos/index.html index 33ab8ab..a8980c6 100644 --- a/demos/index.html +++ b/demos/index.html @@ -107,7 +107,7 @@

    WebSlides Demos

    All of these presentations are free and responsive.
    40+     components with a solid CSS architecture.

    -

    Share your slides using #WebSlides.

    +

    Share your slides using #WebSlides.

    From dba342362f7eda1a715677fe392e53abd03d033d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sun, 12 Feb 2017 21:14:36 +0100 Subject: [PATCH 45/53] 0.1.1 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9555dde..b775fb1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # WebSlides = Good Karma Finally, everything you need to make HTML presentations in a beautiful way. Just the essentials. You can create your own presentation instantly. Simply choose a demo and customize it in minutes — [https://webslides.tv/demos](https://webslides.tv/demos). -A new release every 8th day of the month. Version 0.1 (Jan 8, 2017). +A new release (at least) every 8th day of the month. Version 0.1: Jan 8, 2017. ### Why WebSlides? Good karma and productivity. Just a basic knowledge of HTML and CSS is required. Designers, marketers, and journalists can now focus on the content. From bf338842f19e4e42c09053a3d1d995f0ff4e3288 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sun, 12 Feb 2017 21:29:29 +0100 Subject: [PATCH 46/53] Initialize webslides --- demos/index.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/demos/index.html b/demos/index.html index a8980c6..4400af9 100644 --- a/demos/index.html +++ b/demos/index.html @@ -92,7 +92,7 @@
    -
    +
    + + From c17e376e79cc23df18cd199ea709a3111819ab57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sun, 19 Feb 2017 07:17:28 +0100 Subject: [PATCH 47/53] 0.1.1 misspelling: shortcuts --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b775fb1..19645dc 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required. ### Features -- Navigation (horizontal and vertical sliding): touchpad, keyboard shorcuts, and swipe. +- Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe. - Slide counter. - Permalinks: go to a specific slide. - Simple CSS alignments. Put content wherever you want (vertical centering...) From 9ea6817b43aad6aedc808c2cbee0c8bc654ec3f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Tue, 21 Feb 2017 16:59:10 +0100 Subject: [PATCH 48/53] textarea width: 100% --- static/css/base.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index d50df94..23bf367 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -2908,11 +2908,6 @@ input[type="checkbox"] { button { width: auto; } - -button[type="submit"] { - width: 100%; -} - /*input:hover, textarea:hover, select:hover { -webkit-transform: translateY(-.2rem); transform: translateY(-.2rem); @@ -2924,6 +2919,10 @@ select:focus { border-width: 1px; } +button[type="submit"],textarea { + width: 100%; +} + textarea { padding: .7rem; } From b68ec7592234f9c56074b44d6278e8ffac56b52a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Tue, 21 Feb 2017 17:04:18 +0100 Subject: [PATCH 49/53] reordering button, textarea --- static/css/base.css | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 23bf367..8be370e 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -2904,33 +2904,19 @@ input[type="checkbox"] { height: auto; padding: 4px; } - -button { - width: auto; -} -/*input:hover, textarea:hover, select:hover { --webkit-transform: translateY(-.2rem); -transform: translateY(-.2rem); -}*/ - -input:focus, -textarea:focus, -select:focus { - border-width: 1px; -} - button[type="submit"],textarea { width: 100%; } - textarea { padding: .7rem; } button { + width: auto; text-align: center; cursor: pointer; } + .button { display: inline-block; line-height: 4.8rem; @@ -2983,6 +2969,12 @@ legend { letter-spacing:.1rem; font-weight: 400; } +/*=== Focus === */ +input:focus, +textarea:focus, +select:focus { + border-width: 1px; +} /*=== App Store Badges === */ /* Change width and height: 216x64px, 162x48px, 135x40... */ From a1710cc2e2f967eb9356917cd829e7d38df9e0e6 Mon Sep 17 00:00:00 2001 From: Luis Date: Wed, 22 Feb 2017 21:15:17 +0100 Subject: [PATCH 50/53] Autoslide function: new interval parameter --- demos/why-webslides.html | 2 +- static/js/webslides.js | 23 +++++++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/demos/why-webslides.html b/demos/why-webslides.html index 81c9fe7..c674dd7 100644 --- a/demos/why-webslides.html +++ b/demos/why-webslides.html @@ -342,7 +342,7 @@ - + diff --git a/static/js/webslides.js b/static/js/webslides.js index 18e9264..b2bb8ce 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -33,7 +33,8 @@ jQuery.fn.webslides = function(options) { $firstSlide, $lastSlide, $auxSlide = null, - slidePointer; + slidePointer, + intervalId; var total = 0; @@ -50,6 +51,7 @@ jQuery.fn.webslides = function(options) { * @param {string} previous Previous HTML element ID * @param {string} current Current HTML element ID * @param {string} verticalClass Vertical class + * @param {boolean} autoslide Auto slide, default false */ var init = function(_options) { obj.settings = { @@ -59,7 +61,8 @@ jQuery.fn.webslides = function(options) { next : 'next', previous : 'previous', 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 + interval : false, }; // Allow overriding the default config @@ -134,6 +137,8 @@ jQuery.fn.webslides = function(options) { $currentSlide = $firstSlide.show().addClass(obj.settings.current); updateCounter(); } + + obj.autoslide(); }; /** @@ -247,6 +252,16 @@ jQuery.fn.webslides = function(options) { }); } + /** + * Autoslide process + */ + obj.autoslide = function() { + if (obj.settings.interval != false && obj.settings.interval > 0) { + clearInterval(intervalId); + intervalId = setInterval(obj.nextSlide, obj.settings.interval); + } + } + /** * Init hash */ @@ -385,6 +400,8 @@ jQuery.fn.webslides = function(options) { // fire slide event fireSlideEvent(); } + + obj.autoslide(); }; /** @@ -453,6 +470,7 @@ jQuery.fn.webslides = function(options) { // fire slide event fireSlideEvent(); } + obj.autoslide(); }; @@ -476,6 +494,7 @@ jQuery.fn.webslides = function(options) { // update counter updateCounter(); + obj.autoslide(); }; /** From c0d52f1aa785ee32801ec9c22ad57002da179bb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Wed, 22 Feb 2017 23:57:59 +0100 Subject: [PATCH 51/53] autoslide (5 seconds) --- demos/why-webslides.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/demos/why-webslides.html b/demos/why-webslides.html index c674dd7..c534449 100644 --- a/demos/why-webslides.html +++ b/demos/why-webslides.html @@ -343,8 +343,9 @@ + From 9f5773350da1d7a5220a6c1126f87ec416e1e81a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Thu, 23 Feb 2017 00:00:04 +0100 Subject: [PATCH 52/53] 0.2 (auto slide) --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 19645dc..31c857c 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ Good karma and productivity. Just a basic knowledge of HTML and CSS is required. - Navigation (horizontal and vertical sliding): touchpad, keyboard shortcuts, and swipe. - Slide counter. - Permalinks: go to a specific slide. +- Autoslide - Simple CSS alignments. Put content wherever you want (vertical centering...) - 40+ components: background images/videos, quotes, cards, covers... - Flexible blocks with auto-fill and equal height. @@ -46,6 +47,11 @@ You need to add the follow javascript to initialize the webslides object. var slide = jQuery('#webslides').webslides(); ``` +#### Auto slide + +```javascript +var slide = jQuery('#webslides').webslides({interval: 5000}); +``` Now you can use the slide with these functions: ```javascript From 95dd4d575b630bc30524a562219475c2647978a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Thu, 23 Feb 2017 00:01:24 +0100 Subject: [PATCH 53/53] 0.2 (auto slide) --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 50e97fc..b2619e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.2 (2017-02-22) + +- Auto slide (Demo: why-webslides.html) + ## 0.1.1 (2017-02-11) - Transform the library into an object.