'); - }); - - // Debounce the resize scaling - $w.unbind('resize.deckscale').bind('resize.deckscale', function() { - window.clearTimeout(timer); - timer = window.setTimeout(scaleDeck, opts.scaleDebounce); - }) - // Scale once on load, in case images or something change layout - .unbind('load.deckscale').bind('load.deckscale', scaleDeck); - - // Bind key events - $d.unbind('keydown.deckscale').bind('keydown.deckscale', function(e) { - if (e.which === opts.keys.scale || $.inArray(e.which, opts.keys.scale) > -1) { - $[deck]('toggleScale'); - e.preventDefault(); - } - }); - - // Enable scale on init - $[deck]('enableScale'); - }); -})(jQuery, 'deck', this); - +/*! +Deck JS - deck.scale +Copyright (c) 2011-2012 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds automatic scaling to the deck. Slides are scaled down +using CSS transforms to fit within the deck container. If the container is +big enough to hold the slides without scaling, no scaling occurs. The user +can disable and enable scaling with a keyboard shortcut. + +Note: CSS transforms may make Flash videos render incorrectly. Presenters +that need to use video may want to disable scaling to play them. HTML5 video +works fine. +*/ +(function($, undefined) { + var $document = $(document); + var $window = $(window); + var baseHeight, timer, rootSlides; + + /* + Internal function to do all the dirty work of scaling the slides. + */ + var scaleDeck = function() { + var options = $.deck('getOptions'); + var $container = $.deck('getContainer'); + var baseHeight = options.baseHeight; + + if (!baseHeight) { + baseHeight = $container.height(); + } + + // Scale each slide down if necessary (but don't scale up) + $.each(rootSlides, function(i, $slide) { + var slideHeight = $slide.innerHeight(); + var $scaler = $slide.find('.' + options.classes.scaleSlideWrapper); + var shouldScale = $container.hasClass(options.classes.scale); + var scale = shouldScale ? baseHeight / slideHeight : 1; + + if (scale === 1) { + $scaler.css('transform', ''); + } + else { + $scaler.css('transform', 'scale(' + scale + ')'); + } + }); + }; + + var populateRootSlides = function() { + var options = $.deck('getOptions'); + var slideTest = $.map([ + options.classes.before, + options.classes.previous, + options.classes.current, + options.classes.next, + options.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + rootSlides = []; + $.each($.deck('getSlides'), function(i, $slide) { + var $parentSlides = $slide.parentsUntil( + options.selectors.container, + slideTest + ); + if (!$parentSlides.length) { + rootSlides.push($slide); + } + }); + }; + + var wrapRootSlideContent = function() { + var options = $.deck('getOptions'); + var wrap = '

'; + $.each(rootSlides, function(i, $slide) { + $slide.children().wrapAll(wrap); + }); + }; + + var scaleOnResizeAndLoad = function() { + var options = $.deck('getOptions'); + + $window.unbind('resize.deckscale'); + $window.bind('resize.deckscale', function() { + window.clearTimeout(timer); + timer = window.setTimeout(scaleDeck, options.scaleDebounce); + }); + $window.unbind('load.deckscale').bind('load.deckscale', scaleDeck); + }; + + var bindKeyEvents = function() { + var options = $.deck('getOptions'); + $document.unbind('keydown.deckscale'); + $document.bind('keydown.deckscale', function(event) { + var isKey = event.which === options.keys.scale; + isKey = isKey || $.inArray(event.which, options.keys.scale) > -1; + if (isKey) { + $.deck('toggleScale'); + event.preventDefault(); + } + }); + }; + + /* + Extends defaults/options. + + options.classes.scale + This class is added to the deck container when scaling is enabled. + It is enabled by default when the module is included. + + options.classes.scaleSlideWrapper + Scaling is done using a wrapper around the contents of each slide. This + class is applied to that wrapper. + + options.keys.scale + The numeric keycode used to toggle enabling and disabling scaling. + + options.baseHeight + When baseHeight is falsy, as it is by default, the deck is scaled in + proportion to the height of the deck container. You may instead specify + a height as a number of px, and slides will be scaled against this + height regardless of the container size. + + options.scaleDebounce + Scaling on the browser resize event is debounced. This number is the + threshold in milliseconds. You can learn more about debouncing here: + http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + + */ + $.extend(true, $.deck.defaults, { + classes: { + scale: 'deck-scale', + scaleSlideWrapper: 'deck-slide-scaler' + }, + + keys: { + scale: 83 // s + }, + + baseHeight: null, + scaleDebounce: 200 + }); + + /* + jQuery.deck('disableScale') + + Disables scaling and removes the scale class from the deck container. + */ + $.deck('extend', 'disableScale', function() { + $.deck('getContainer').removeClass($.deck('getOptions').classes.scale); + scaleDeck(); + }); + + /* + jQuery.deck('enableScale') + + Enables scaling and adds the scale class to the deck container. + */ + $.deck('extend', 'enableScale', function() { + $.deck('getContainer').addClass($.deck('getOptions').classes.scale); + scaleDeck(); + }); + + /* + jQuery.deck('toggleScale') + + Toggles between enabling and disabling scaling. + */ + $.deck('extend', 'toggleScale', function() { + var $container = $.deck('getContainer'); + var isScaled = $container.hasClass($.deck('getOptions').classes.scale); + $.deck(isScaled? 'disableScale' : 'enableScale'); + }); + + $document.bind('deck.init', function() { + populateRootSlides(); + wrapRootSlideContent(); + scaleOnResizeAndLoad(); + bindKeyEvents(); + $.deck('enableScale'); + }); +})(jQuery, 'deck', this); + diff --git a/extensions/scale/deck.scale.scss b/extensions/scale/deck.scale.scss dissimilarity index 60% index 817abe8..5f56916 100644 --- a/extensions/scale/deck.scale.scss +++ b/extensions/scale/deck.scale.scss @@ -1,28 +1,28 @@ -/* Remove this line if you are embedding deck.js in a page and -using the scale extension. */ -// .csstransforms { -// overflow:hidden; -// } - -.csstransforms .deck-container.deck-scale:not(.deck-menu) { - overflow:hidden; - - > .slide { - -moz-box-sizing: padding-box; - box-sizing: padding-box; - width:100%; - padding-bottom:20px; - - > .deck-slide-scaler { - -webkit-transform-origin: 50% 0; - -ms-transform-origin: 50% 0; - transform-origin: 50% 0; - } - } -} - -.csstransforms .deck-container.deck-menu .deck-slide-scaler { - -webkit-transform:none !important; - -ms-transform:none !important; - transform:none !important; -} \ No newline at end of file +/* Remove this line if you are embedding deck.js in a page and +using the scale extension. */ +// .csstransforms { +// overflow:hidden; +// } + +.csstransforms .deck-container.deck-scale:not(.deck-menu) { + overflow:hidden; + + > .slide { + -moz-box-sizing: padding-box; + box-sizing: padding-box; + width:100%; + padding-bottom:20px; + + > .deck-slide-scaler { + -webkit-transform-origin: 50% 0; + -ms-transform-origin: 50% 0; + transform-origin: 50% 0; + } + } +} + +.csstransforms .deck-container.deck-menu .deck-slide-scaler { + -webkit-transform:none !important; + -ms-transform:none !important; + transform:none !important; +} \ No newline at end of file diff --git a/extensions/status/deck.status.html b/extensions/status/deck.status.html index 310a025..557fc76 100644 --- a/extensions/status/deck.status.html +++ b/extensions/status/deck.status.html @@ -1,6 +1,6 @@

- - / - + + / +

\ No newline at end of file diff --git a/extensions/status/deck.status.js b/extensions/status/deck.status.js dissimilarity index 85% index b876554..ba0bdf3 100644 --- a/extensions/status/deck.status.js +++ b/extensions/status/deck.status.js @@ -1,95 +1,109 @@ -/*! -Deck JS - deck.status -Copyright (c) 2011 Caleb Troughton -Dual licensed under the MIT license and GPL license. -https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt -https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt -*/ - -/* -This module adds a (current)/(total) style status indicator to the deck. -*/ -(function($, deck, undefined) { - var $d = $(document), - - updateCurrent = function(e, from, to) { - var opts = $[deck]('getOptions'); - - $(opts.selectors.statusCurrent).text(opts.countNested ? - to + 1 : - $[deck]('getSlide', to).data('rootSlide') - ); - }; - - /* - Extends defaults/options. - - options.selectors.statusCurrent - The element matching this selector displays the current slide number. - - options.selectors.statusTotal - The element matching this selector displays the total number of slides. - - options.countNested - If false, only top level slides will be counted in the current and - total numbers. - */ - $.extend(true, $[deck].defaults, { - selectors: { - statusCurrent: '.deck-status-current', - statusTotal: '.deck-status-total' - }, - - countNested: true - }); - - $d.bind('deck.init', function() { - var opts = $[deck]('getOptions'), - slides = $[deck]('getSlides'), - $current = $[deck]('getSlide'), - ndx; - - // Set total slides once - if (opts.countNested) { - $(opts.selectors.statusTotal).text(slides.length); - } - else { - /* Determine root slides by checking each slide's ancestor tree for - any of the slide classes. */ - var rootIndex = 1, - slideTest = $.map([ - opts.classes.before, - opts.classes.previous, - opts.classes.current, - opts.classes.next, - opts.classes.after - ], function(el, i) { - return '.' + el; - }).join(', '); - - /* Store the 'real' root slide number for use during slide changes. */ - $.each(slides, function(i, $el) { - var $parentSlides = $el.parentsUntil(opts.selectors.container, slideTest); - - $el.data('rootSlide', $parentSlides.length ? - $parentSlides.last().data('rootSlide') : - rootIndex++ - ); - }); - - $(opts.selectors.statusTotal).text(rootIndex - 1); - } - - // Find where we started in the deck and set initial state - $.each(slides, function(i, $el) { - if ($el === $current) { - ndx = i; - return false; - } - }); - updateCurrent(null, ndx, ndx); - }) - /* Update current slide number with each change event */ - .bind('deck.change', updateCurrent); -})(jQuery, 'deck'); - +/*! +Deck JS - deck.status +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds a (current)/(total) style status indicator to the deck. +*/ +(function($, undefined) { + var $document = $(document); + var rootCounter; + + var updateCurrent = function(event, from, to) { + var options = $.deck('getOptions'); + var currentSlideNumber = to + 1; + if (!options.countNested) { + currentSlideNumber = $.deck('getSlide', to).data('rootSlide'); + } + $(options.selectors.statusCurrent).text(currentSlideNumber); + }; + + var markRootSlides = function() { + var options = $.deck('getOptions'); + var slideTest = $.map([ + options.classes.before, + options.classes.previous, + options.classes.current, + options.classes.next, + options.classes.after + ], function(el, i) { + return '.' + el; + }).join(', '); + + rootCounter = 0; + $.each($.deck('getSlides'), function(i, $slide) { + var $parentSlides = $slide.parentsUntil( + options.selectors.container, + slideTest + ); + + if ($parentSlides.length) { + $slide.data('rootSlide', $parentSlides.last().data('rootSlide')); + } + else { + ++rootCounter; + $slide.data('rootSlide', rootCounter); + } + }); + }; + + var setInitialSlideNumber = function() { + var slides = $.deck('getSlides'); + var $currentSlide = $.deck('getSlide'); + var index; + + $.each(slides, function(i, $slide) { + if ($slide === $currentSlide) { + index = i; + return false; + } + }); + updateCurrent(null, index, index); + }; + + var setTotalSlideNumber = function() { + var options = $.deck('getOptions'); + var slides = $.deck('getSlides'); + + if (options.countNested) { + $(options.selectors.statusTotal).text(slides.length); + } + else { + $(options.selectors.statusTotal).text(rootCounter); + } + }; + + /* + Extends defaults/options. + + options.selectors.statusCurrent + The element matching this selector displays the current slide number. + + options.selectors.statusTotal + The element matching this selector displays the total number of slides. + + options.countNested + If false, only top level slides will be counted in the current and + total numbers. + */ + $.extend(true, $.deck.defaults, { + selectors: { + statusCurrent: '.deck-status-current', + statusTotal: '.deck-status-total' + }, + + countNested: true + }); + + $document.bind('deck.init', function() { + markRootSlides(); + setInitialSlideNumber(); + setTotalSlideNumber(); + }); + $document.bind('deck.change', updateCurrent); +})(jQuery, 'deck'); + diff --git a/extensions/status/deck.status.scss b/extensions/status/deck.status.scss index 5a4ea84..d0722bf 100755 --- a/extensions/status/deck.status.scss +++ b/extensions/status/deck.status.scss @@ -1,18 +1,18 @@ .deck-status { - position:absolute; - bottom:10px; - right:5px; - color:#888; - z-index:3; - margin:0; + position:absolute; + bottom:10px; + right:5px; + color:#888; + z-index:3; + margin:0; } body > .deck-container .deck-status { - position:fixed; + position:fixed; } @media print { - .deck-status { - display:none; - } + .deck-status { + display:none; + } } diff --git a/introduction/index.html b/introduction/index.html dissimilarity index 63% index 989457a..4782b14 100644 --- a/introduction/index.html +++ b/introduction/index.html @@ -1,222 +1,222 @@ - - - - - - - - - - Getting Started with deck.js - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- - -

Getting Started with deck.js

- -

How to Make a Deck

-
Write Slides
-
Slide content is simple HTML.
-
-
Choose Themes
-
One for slide styles and one for deck transitions.
-
-
Include Extensions
-
Add extra functionality to your deck, or leave it stripped down.
-

- -

Quick Start

When you download deck.js, it will include a file named boilerplate.html. You can immediately start editing slides in this page and viewing them in your web browser. Later on, when you are comfortable customizing the deck, you can edit the various pieces of the boilerplate or make your own to suit your needs.

- -

The Markup

Slides are just HTML elements with a class of slide.

<section class="slide">
-  <h2>How to Make a Deck</h2>
-  <ol>
-    <li>
-      <h3>Write Slides</h3>
-      <p>Slide content is simple HTML.</p>
-    </li>
-    <li>
-      <h3>Choose Themes</h3>
-      <p>One for slide styles and one for deck transitions.</p>
-    </li>
-    …
-  </ol>
-</section>

- -

Style Themes

Customizes the colors, typography, and layout of slide content.

<link rel="stylesheet" href="/path/to/css/style-theme.css">

Transition Themes

Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But you aren’t using those browsers to give your presentations, are you…

<link rel="stylesheet" href="/path/to/css/transition-theme.css">

- -

Extensions

Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:

- -

- deck.goto: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter. -
- deck.hash: Enables internal linking within slides, deep linking to individual slides, and updates the address bar & a permalink anchor with each slide change. -
- deck.menu: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view. Touch devices can double-tap the deck to switch between views. -
- deck.navigation: Adds clickable left and right buttons for the less keyboard inclined. -
- deck.status: Adds a page number indicator. (current/total) -
- deck.scale: Scales each slide to fit within the deck container using CSS Transforms for those browsers that support them. -

- -

Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the documentation.

- -

Nested Slides

That last slide had a few steps. To create substeps in slides, just nest them:

<section class="slide">
-  <h2>Extensions</h2>
-  <p>Core gives you basic slide functionality...</p>
-  <ul>
-    <li class="slide">
-      <h3>deck.goto</h3>
-      <p>Adds a shortcut key to jump to any slide number...</p>
-    </li>
-    <li class="slide">...</li>
-    <li class="slide">...</li>
-    <li class="slide">...</li>
-  </ul>
-</section>

- -

Other Elements: Images

<img src="http://placekitten.com/600/375" alt="Kitties">

- -

Other Elements: Blockquotes

-
Food is an important part of a balanced diet.
-
Fran Lebowitz
-

<blockquote cite="http://example.org">
-  <p>Food is an important part of a balanced diet.</p>
-  <p><cite>Fran Lebowitz</cite></p>
-</blockquote>

- - -

Other Elements: Video Embeds

Embed videos from your favorite online video service or with an HTML5 video element.

- - - -

<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

- -

Digging Deeper

If you want to learn about making your own themes, extending deck.js, and more, check out the documentation.

- - - ← - → - - -

- - / - -

- - - - - - # -

- - - - - - - - - - - - - - - - - + + + + + + + + + + Getting Started with deck.js + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + +

Getting Started with deck.js

+ +

How to Make a Deck

+
Write Slides
+
Slide content is simple HTML.
+
+
Choose Themes
+
One for slide styles and one for deck transitions.
+
+
Include Extensions
+
Add extra functionality to your deck, or leave it stripped down.
+

+ +

Quick Start

+ +

The Markup

Slides are just HTML elements with a class of slide.

<section class="slide">
+  <h2>How to Make a Deck</h2>
+  <ol>
+    <li>
+      <h3>Write Slides</h3>
+      <p>Slide content is simple HTML.</p>
+    </li>
+    <li>
+      <h3>Choose Themes</h3>
+      <p>One for slide styles and one for deck transitions.</p>
+    </li>
+    …
+  </ol>
+</section>

+ +

Style Themes

Customizes the colors, typography, and layout of slide content.

<link rel="stylesheet" href="/path/to/css/style-theme.css">

Transition Themes

Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But you aren’t using those browsers to give your presentations, are you…

<link rel="stylesheet" href="/path/to/css/transition-theme.css">

+ +

Extensions

Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this deck:

+ +

+ deck.goto: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter. +
+ deck.hash: Enables internal linking within slides, deep linking to individual slides, and updates the address bar & a permalink anchor with each slide change. +
+ deck.menu: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view. Touch devices can double-tap the deck to switch between views. +
+ deck.navigation: Adds clickable left and right buttons for the less keyboard inclined. +
+ deck.status: Adds a page number indicator. (current/total) +
+ deck.scale: Scales each slide to fit within the deck container using CSS Transforms for those browsers that support them. +

+ +

Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML files. For a complete list of extension modules included in deck.js, check out the documentation.

+ +

Nested Slides

That last slide had a few steps. To create substeps in slides, just nest them:

<section class="slide">
+  <h2>Extensions</h2>
+  <p>Core gives you basic slide functionality...</p>
+  <ul>
+    <li class="slide">
+      <h3>deck.goto</h3>
+      <p>Adds a shortcut key to jump to any slide number...</p>
+    </li>
+    <li class="slide">...</li>
+    <li class="slide">...</li>
+    <li class="slide">...</li>
+  </ul>
+</section>

+ +

Other Elements: Images

<img src="http://placekitten.com/600/375" alt="Kitties">

+ +

Other Elements: Blockquotes

+
Food is an important part of a balanced diet.
+
Fran Lebowitz
+

<blockquote cite="http://example.org">
+  <p>Food is an important part of a balanced diet.</p>
+  <p><cite>Fran Lebowitz</cite></p>
+</blockquote>

+ + +

Other Elements: Video Embeds

Embed videos from your favorite online video service or with an HTML5 video element.

+ + + +

<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>

+ +

Digging Deeper

If you want to learn about making your own themes, extending deck.js, and more, check out the documentation.

+ + + ← + → + + +

+ + / + +

+ + + + + + # +

+ + + + + + + + + + + + + + + + + diff --git a/test/fixtures/empty.html b/test/fixtures/empty.html dissimilarity index 94% index d669ac5..e5d8be2 100644 --- a/test/fixtures/empty.html +++ b/test/fixtures/empty.html @@ -1,19 +1,19 @@ -

- Previous - Next - -

- - / - -

- - - - # - Internal Test Link -

\ No newline at end of file +

+ Previous + Next + +

+ + / + +

+ + + + # + Internal Test Link +

\ No newline at end of file diff --git a/test/fixtures/nesteds.html b/test/fixtures/nesteds.html dissimilarity index 95% index a19f5d3..564a7ca 100644 --- a/test/fixtures/nesteds.html +++ b/test/fixtures/nesteds.html @@ -1,36 +1,36 @@ -

- -

- - / - -

- - -

\ No newline at end of file +

+ +

+ + / + +

+ + +

\ No newline at end of file diff --git a/test/fixtures/standard.html b/test/fixtures/standard.html dissimilarity index 94% index b9e307b..009a7c9 100644 --- a/test/fixtures/standard.html +++ b/test/fixtures/standard.html @@ -1,42 +1,42 @@ -

- -

- - Previous - Next - -

- - / - -

- - - - # - Internal Test Link -

- -

\ No newline at end of file +

+ +

+ + Previous + Next + +

+ + / + +

+ + + + # + Internal Test Link +

+ +

\ No newline at end of file diff --git a/test/index.html b/test/index.html dissimilarity index 88% index 8a7ff2f..ffa1ccc 100644 --- a/test/index.html +++ b/test/index.html @@ -1,39 +1,39 @@ - - - - deck.js - Jasmine Test Runner - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + deck.js - Jasmine Test Runner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/spec.core.js b/test/spec.core.js dissimilarity index 98% index 8b0bafc..14953ff 100755 --- a/test/spec.core.js +++ b/test/spec.core.js @@ -1,334 +1,334 @@ -// Go tests, go -describe('Deck JS', function() { - describe('standard html structure', function() { - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - }); - - describe('init(selector)', function() { - it('should create slides', function() { - $.deck('.slide'); - expect($.deck('getSlides').length).toEqual($('.slide').length); - }); - }); - - describe('init([selectors])', function() { - it('should create slides', function() { - $.deck([ - '.slide1', - '.slide2', - '.slide3', - '.slide4', - '.slide5' - ]); - expect($.deck('getSlides').length).toEqual($('.slide').length); - }); - }); - - describe('navigation functions', function() { - beforeEach(function() { - $.deck('.slide'); - }); - - describe('go(i)', function() { - it('should go to the i slide (0 based index)', function() { - $.deck('go', 3); - expect($.deck('getSlide')).toHaveClass('slide4'); - }); - - it('should go to the slide with specified id', function() { - $.deck('go', 'custom-id'); - expect($.deck('getSlide')).toHaveId('custom-id'); - }); - - it('should go nowhere if i is out of bounds', function() { - $.deck('go', 5); - expect($.deck('getSlide')).toHaveClass('slide1'); - }); - - it('should go nowhere if id does not exist', function() { - $.deck('go', 'i-dont-exist'); - expect($.deck('getSlide')).toHaveClass('slide1'); - }); - }); - - describe('next()', function() { - it('should go to the next slide', function() { - $.deck('next'); - expect($.deck('getSlide')).toHaveClass('slide2'); - }); - - it('should go nowhere if on the last slide', function() { - $.deck('go', 4); - $.deck('next'); - expect($.deck('getSlide')).toHaveClass('slide5'); - }); - }); - - describe('prev()', function() { - it('should go to the previous slide', function() { - $.deck('go', 2); - $.deck('prev'); - expect($.deck('getSlide')).toHaveClass('slide2'); - }); - - it('should go nowhere if on the first slide', function() { - $.deck('prev'); - expect($.deck('getSlide')).toHaveClass('slide1'); - }); - }); - }); - - describe('getters', function() { - beforeEach(function() { - $.deck('.slide'); - }); - - describe('getSlide()', function() { - it('should get the current slide', function() { - expect($.deck('getSlide')).toHaveClass('slide1'); - $.deck('go', 2); - expect($.deck('getSlide')).toHaveClass('slide3'); - }); - }); - - describe('getSlide(i)', function() { - it('should get slide number i (0 based index)', function() { - expect($.deck('getSlide', 1)).toHaveClass('slide2'); - expect($.deck('getSlide', 3)).toHaveClass('slide4'); - }); - - it('should return null if i is NaN', function() { - expect($.deck('getSlide', 'barfoo')).toBeNull(); - }); - - it('should return null if i is out of bounds', function() { - expect($.deck('getSlide', 6)).toBeNull(); - }); - }); - - describe('getSlides()', function() { - it('should return an array of jQuery objects for each slide', function() { - var expectation = [], - slides = $.deck('getSlides'); - $('.slide').each(function() { - expectation.push($(this)); - }); - expect(slides).toEqual(expectation); - }); - }); - - describe('getContainer()', function() { - it('should return a jQuery object with the container element(s)', function() { - expect($.deck('getContainer')).toBe(defaults.selectors.container); - }); - }); - - describe('getOptions()', function() { - it('should return the current options object', function() { - expect($.deck('getOptions')).toEqual(defaults); - }); - }); - }); - - describe('container states', function() { - beforeEach(function() { - $.deck('.slide'); - }); - - it('should start at state 0', function() { - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '0'); - }); - - it('should change states with the slide number', function() { - $.deck('next'); - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '1'); - $.deck('go', 3); - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '3'); - $.deck('prev'); - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '2'); - }); - }); - - describe('options object', function() { - var $d = $(document); - - beforeEach(function() { - $.deck('.alt-slide', { - classes: { - after: 'alt-after', - before: 'alt-before', - current: 'alt-current', - onPrefix: 'alt-on-', - next: 'alt-next', - previous: 'alt-prev' - }, - - selectors: { - container: '.alt-container' - }, - - keys: { - next: 87, - previous: 69 - } - }); - }); - - describe('classes', function() { - it('should use the specified after class', function() { - expect($('.alt-slide3, .alt-slide4, .alt-slide5')).toHaveClass('alt-after'); - }); - - it('should use the specified before class', function() { - $.deck('go', 4); - expect($('.alt-slide1, .alt-slide2, .alt-slide3')).toHaveClass('alt-before'); - }); - - it('should use the specified container class', function() { - $.deck('go', 2); - expect($('.alt-container')).toHaveClass('alt-on-2'); - }); - - it('should use the specified current class', function() { - expect($.deck('getSlide')).toHaveClass('alt-current'); - }); - - it('should use the specified next class', function() { - expect($('.alt-slide2')).toHaveClass('alt-next'); - }); - - it('should use the specified previous class', function() { - $.deck('next'); - expect($('.alt-slide1')).toHaveClass('alt-prev'); - }); - }); - - describe('key bindings', function() { - var e; - - beforeEach(function() { - e = jQuery.Event('keydown.deck'); - }); - - it('should go to the next slide using the specified key', function() { - e.which = 87; // 'w' - $d.trigger(e); - expect($.deck('getSlide')).toHaveClass('alt-slide2'); - }); - - it('should go to the previous slide using the specified key', function() { - $.deck('next'); - e.which = 69; // 'e' - $d.trigger(e); - expect($.deck('getSlide')).toHaveClass('alt-slide1'); - }); - - it('should not trigger events that originate within editable elements', function() { - var $outside = $('').appendTo('body'); - e = jQuery.Event('keydown'); - e.which = 87; - $outside.trigger(e); - expect($.deck('getSlide')).toHaveClass('alt-slide1'); - $outside.remove(); - }); - }); - }); - - describe('events', function() { - var $d = $(document); - - beforeEach(function() { - spyOnEvent($d, 'deck.init'); - spyOnEvent($d, 'deck.beforeInit'); - $.deck('.slide'); - $.deck('go', 1); - spyOnEvent($d, 'deck.change'); - }); - - describe('deck.change', function() { - it('should fire on go(i)', function() { - $.deck('go', 3); - expect('deck.change').toHaveBeenTriggeredOn($d); - }); - - it('should fire on next()', function() { - $.deck('next'); - expect('deck.change').toHaveBeenTriggeredOn($d); - }); - - it('should fire on prev()', function() { - $.deck('prev'); - expect('deck.change').toHaveBeenTriggeredOn($d); - }); - - it('should pass parameters with from and to indices', function() { - var f = function(e, from, to) { - expect(from).toEqual(1); - expect(to).toEqual(3); - }; - - $d.bind('deck.change', f); - $.deck('go', 3); - $d.unbind('deck.change', f); - }); - - it('should not fire if default prevented in beforeChange', function() { - $d.bind('deck.beforeChange', false); - $.deck('go', 3); - expect($.deck('getSlide')).toEqual($.deck('getSlide', 1)); - $d.unbind('deck.beforeChange', false); - }); - }); - - describe('deck.init', function() { - it('should fire on deck initialization', function() { - expect('deck.init').toHaveBeenTriggeredOn($d); - }); - - it('should have already populated the slides array', function() { - var f = function() { - expect($.deck('getSlides').length).toBeGreaterThan(0); - }; - - $d.bind('deck.init', f); - $.deck('.slide'); - $d.unbind('deck.init', f); - }); - }); - - describe('deck.beforeInit', function() { - it('should fire on deck initialization', function() { - expect('deck.beforeInit').toHaveBeenTriggeredOn($d); - }); - - it('should have not populated the slides array', function() { - var f = function() { - expect($.deck('getSlides').length).toEqual(0); - }; - - $d.bind('deck.beforeInit', f); - $.deck('.slide'); - $d.unbind('deck.beforeInit', f); - }); - }); - }); - }); - - describe('empty deck', function() { - beforeEach(function() { - loadFixtures('empty.html'); - $.deck('.slide'); - }); - - describe('getSlide()', function() { - it('should not error on init', $.noop); - }); - }); -}); +// Go tests, go +describe('Deck JS', function() { + describe('standard html structure', function() { + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + }); + + describe('init(selector)', function() { + it('should create slides', function() { + $.deck('.slide'); + expect($.deck('getSlides').length).toEqual($('.slide').length); + }); + }); + + describe('init([selectors])', function() { + it('should create slides', function() { + $.deck([ + '.slide1', + '.slide2', + '.slide3', + '.slide4', + '.slide5' + ]); + expect($.deck('getSlides').length).toEqual($('.slide').length); + }); + }); + + describe('navigation functions', function() { + beforeEach(function() { + $.deck('.slide'); + }); + + describe('go(i)', function() { + it('should go to the i slide (0 based index)', function() { + $.deck('go', 3); + expect($.deck('getSlide')).toHaveClass('slide4'); + }); + + it('should go to the slide with specified id', function() { + $.deck('go', 'custom-id'); + expect($.deck('getSlide')).toHaveId('custom-id'); + }); + + it('should go nowhere if i is out of bounds', function() { + $.deck('go', 5); + expect($.deck('getSlide')).toHaveClass('slide1'); + }); + + it('should go nowhere if id does not exist', function() { + $.deck('go', 'i-dont-exist'); + expect($.deck('getSlide')).toHaveClass('slide1'); + }); + }); + + describe('next()', function() { + it('should go to the next slide', function() { + $.deck('next'); + expect($.deck('getSlide')).toHaveClass('slide2'); + }); + + it('should go nowhere if on the last slide', function() { + $.deck('go', 4); + $.deck('next'); + expect($.deck('getSlide')).toHaveClass('slide5'); + }); + }); + + describe('prev()', function() { + it('should go to the previous slide', function() { + $.deck('go', 2); + $.deck('prev'); + expect($.deck('getSlide')).toHaveClass('slide2'); + }); + + it('should go nowhere if on the first slide', function() { + $.deck('prev'); + expect($.deck('getSlide')).toHaveClass('slide1'); + }); + }); + }); + + describe('getters', function() { + beforeEach(function() { + $.deck('.slide'); + }); + + describe('getSlide()', function() { + it('should get the current slide', function() { + expect($.deck('getSlide')).toHaveClass('slide1'); + $.deck('go', 2); + expect($.deck('getSlide')).toHaveClass('slide3'); + }); + }); + + describe('getSlide(i)', function() { + it('should get slide number i (0 based index)', function() { + expect($.deck('getSlide', 1)).toHaveClass('slide2'); + expect($.deck('getSlide', 3)).toHaveClass('slide4'); + }); + + it('should return null if i is NaN', function() { + expect($.deck('getSlide', 'barfoo')).toBeNull(); + }); + + it('should return null if i is out of bounds', function() { + expect($.deck('getSlide', 6)).toBeNull(); + }); + }); + + describe('getSlides()', function() { + it('should return an array of jQuery objects for each slide', function() { + var expectation = []; + var slides = $.deck('getSlides'); + $('.slide').each(function() { + expectation.push($(this)); + }); + expect(slides).toEqual(expectation); + }); + }); + + describe('getContainer()', function() { + it('should return a jQuery object with the container element(s)', function() { + expect($.deck('getContainer')).toBe(defaults.selectors.container); + }); + }); + + describe('getOptions()', function() { + it('should return the current options object', function() { + expect($.deck('getOptions')).toEqual(defaults); + }); + }); + }); + + describe('container states', function() { + beforeEach(function() { + $.deck('.slide'); + }); + + it('should start at state 0', function() { + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '0'); + }); + + it('should change states with the slide number', function() { + $.deck('next'); + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '1'); + $.deck('go', 3); + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '3'); + $.deck('prev'); + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '2'); + }); + }); + + describe('options object', function() { + var $d = $(document); + + beforeEach(function() { + $.deck('.alt-slide', { + classes: { + after: 'alt-after', + before: 'alt-before', + current: 'alt-current', + onPrefix: 'alt-on-', + next: 'alt-next', + previous: 'alt-prev' + }, + + selectors: { + container: '.alt-container' + }, + + keys: { + next: 87, + previous: 69 + } + }); + }); + + describe('classes', function() { + it('should use the specified after class', function() { + expect($('.alt-slide3, .alt-slide4, .alt-slide5')).toHaveClass('alt-after'); + }); + + it('should use the specified before class', function() { + $.deck('go', 4); + expect($('.alt-slide1, .alt-slide2, .alt-slide3')).toHaveClass('alt-before'); + }); + + it('should use the specified container class', function() { + $.deck('go', 2); + expect($('.alt-container')).toHaveClass('alt-on-2'); + }); + + it('should use the specified current class', function() { + expect($.deck('getSlide')).toHaveClass('alt-current'); + }); + + it('should use the specified next class', function() { + expect($('.alt-slide2')).toHaveClass('alt-next'); + }); + + it('should use the specified previous class', function() { + $.deck('next'); + expect($('.alt-slide1')).toHaveClass('alt-prev'); + }); + }); + + describe('key bindings', function() { + var e; + + beforeEach(function() { + e = jQuery.Event('keydown.deck'); + }); + + it('should go to the next slide using the specified key', function() { + e.which = 87; // 'w' + $d.trigger(e); + expect($.deck('getSlide')).toHaveClass('alt-slide2'); + }); + + it('should go to the previous slide using the specified key', function() { + $.deck('next'); + e.which = 69; // 'e' + $d.trigger(e); + expect($.deck('getSlide')).toHaveClass('alt-slide1'); + }); + + it('should not trigger events that originate within editable elements', function() { + var $outside = $('').appendTo('body'); + e = jQuery.Event('keydown'); + e.which = 87; + $outside.trigger(e); + expect($.deck('getSlide')).toHaveClass('alt-slide1'); + $outside.remove(); + }); + }); + }); + + describe('events', function() { + var $d = $(document); + + beforeEach(function() { + spyOnEvent($d, 'deck.init'); + spyOnEvent($d, 'deck.beforeInit'); + $.deck('.slide'); + $.deck('go', 1); + spyOnEvent($d, 'deck.change'); + }); + + describe('deck.change', function() { + it('should fire on go(i)', function() { + $.deck('go', 3); + expect('deck.change').toHaveBeenTriggeredOn($d); + }); + + it('should fire on next()', function() { + $.deck('next'); + expect('deck.change').toHaveBeenTriggeredOn($d); + }); + + it('should fire on prev()', function() { + $.deck('prev'); + expect('deck.change').toHaveBeenTriggeredOn($d); + }); + + it('should pass parameters with from and to indices', function() { + var f = function(e, from, to) { + expect(from).toEqual(1); + expect(to).toEqual(3); + }; + + $d.bind('deck.change', f); + $.deck('go', 3); + $d.unbind('deck.change', f); + }); + + it('should not fire if default prevented in beforeChange', function() { + $d.bind('deck.beforeChange', false); + $.deck('go', 3); + expect($.deck('getSlide')).toEqual($.deck('getSlide', 1)); + $d.unbind('deck.beforeChange', false); + }); + }); + + describe('deck.init', function() { + it('should fire on deck initialization', function() { + expect('deck.init').toHaveBeenTriggeredOn($d); + }); + + it('should have already populated the slides array', function() { + var f = function() { + expect($.deck('getSlides').length).toBeGreaterThan(0); + }; + + $d.bind('deck.init', f); + $.deck('.slide'); + $d.unbind('deck.init', f); + }); + }); + + describe('deck.beforeInit', function() { + it('should fire on deck initialization', function() { + expect('deck.beforeInit').toHaveBeenTriggeredOn($d); + }); + + it('should have not populated the slides array', function() { + var f = function() { + expect($.deck('getSlides').length).toEqual(0); + }; + + $d.bind('deck.beforeInit', f); + $.deck('.slide'); + $d.unbind('deck.beforeInit', f); + }); + }); + }); + }); + + describe('empty deck', function() { + beforeEach(function() { + loadFixtures('empty.html'); + $.deck('.slide'); + }); + + describe('getSlide()', function() { + it('should not error on init', $.noop); + }); + }); +}); diff --git a/test/spec.goto.js b/test/spec.goto.js dissimilarity index 98% index 391d80c..91edd19 100644 --- a/test/spec.goto.js +++ b/test/spec.goto.js @@ -1,142 +1,142 @@ -describe('Deck JS Quick Go-To', function() { - var $d = $(document); - - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide'); - }); - - describe('showGoTo()', function() { - it('should show the go-to helper', function() { - expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); - $.deck('showGoTo'); - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto); - }); - - it('should focus the go-to input', function() { - $.deck('showGoTo'); - expect($(defaults.selectors.gotoInput)[0]).toEqual(document.activeElement); - }); - }); - - describe('hideGoTo()', function() { - beforeEach(function() { - $.deck('showGoTo'); - $.deck('hideGoTo'); - }); - - it('should hide the go-to helper', function() { - expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); - }); - - it('should blur the go-to input', function() { - expect($(defaults.selectors.gotoInput)[0]).not.toEqual(document.activeElement); - }); - }); - - describe('toggleGoTo()', function() { - it('should toggle the go-to helper on and off', function() { - expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); - $.deck('toggleGoTo'); - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto); - $.deck('toggleGoTo'); - expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); - }); - }); - - describe('Go-To submit', function() { - beforeEach(function() { - $.deck('showGoTo'); - }); - - it('should hide the go-to helper', function() { - $(defaults.selectors.gotoInput).val('3'); - $(defaults.selectors.gotoForm).submit(); - expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); - }); - - it('should go to the slide number entered', function() { - $(defaults.selectors.gotoInput).val('3'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toEqual($.deck('getSlide'), 2); - }); - - it('should go to the slide id entered', function() { - $(defaults.selectors.gotoInput).val('custom-id'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toEqual($.deck('getSlide'), 1); - }); - - it('should go nowhere if the number is negative', function() { - $(defaults.selectors.gotoInput).val('-2'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0); - }); - - it('should go nowhere if the number is greater than the number of slides', function() { - $(defaults.selectors.gotoInput).val('9'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0); - }); - - it('should go nowhere if the id does not exist', function() { - $(defaults.selectors.gotoInput).val('do-not-exist'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0); - }); - }); - - describe('Datalist population', function() { - it('should fill in options with all the slide ids', function() { - var $dataOptions = $(defaults.selectors.gotoDatalist).find('option'); - expect($dataOptions.length).toEqual(5); - expect($dataOptions.eq(0).attr('value')).toEqual('slide-0'); - expect($dataOptions.eq(1).attr('value')).toEqual('custom-id'); - }); - }); - - describe('key bindings', function() { - var e; - - beforeEach(function() { - e = jQuery.Event('keydown.deckgoto'); - }); - - it('should toggle the go-to helper if the specified key is pressed', function() { - e.which = 71; // g - $d.trigger(e); - expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto); - $d.trigger(e); - expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); - }); - }); - - describe('countNested false', function() { - beforeEach(function() { - loadFixtures('nesteds.html'); - $.deck('.slide', { - countNested: false - }); - $.deck('showGoTo'); - }); - - it('should ignore nested slides when given a slide number', function() { - $(defaults.selectors.gotoInput).val('4'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toHaveId('after'); - }); - - it('should respect top side of new slide range', function() { - $.deck('go', 0); - $(defaults.selectors.gotoInput).val('6'); - $(defaults.selectors.gotoForm).submit(); - expect($.deck('getSlide')).toHaveId('slide-0'); - }); - }); -}); \ No newline at end of file +describe('Deck JS Quick Go-To', function() { + var $d = $(document); + + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide'); + }); + + describe('showGoTo()', function() { + it('should show the go-to helper', function() { + expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); + $.deck('showGoTo'); + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto); + }); + + it('should focus the go-to input', function() { + $.deck('showGoTo'); + expect($(defaults.selectors.gotoInput)[0]).toEqual(document.activeElement); + }); + }); + + describe('hideGoTo()', function() { + beforeEach(function() { + $.deck('showGoTo'); + $.deck('hideGoTo'); + }); + + it('should hide the go-to helper', function() { + expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); + }); + + it('should blur the go-to input', function() { + expect($(defaults.selectors.gotoInput)[0]).not.toEqual(document.activeElement); + }); + }); + + describe('toggleGoTo()', function() { + it('should toggle the go-to helper on and off', function() { + expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); + $.deck('toggleGoTo'); + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto); + $.deck('toggleGoTo'); + expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); + }); + }); + + describe('Go-To submit', function() { + beforeEach(function() { + $.deck('showGoTo'); + }); + + it('should hide the go-to helper', function() { + $(defaults.selectors.gotoInput).val('3'); + $(defaults.selectors.gotoForm).submit(); + expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); + }); + + it('should go to the slide number entered', function() { + $(defaults.selectors.gotoInput).val('3'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toEqual($.deck('getSlide'), 2); + }); + + it('should go to the slide id entered', function() { + $(defaults.selectors.gotoInput).val('custom-id'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toEqual($.deck('getSlide'), 1); + }); + + it('should go nowhere if the number is negative', function() { + $(defaults.selectors.gotoInput).val('-2'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0); + }); + + it('should go nowhere if the number is greater than the number of slides', function() { + $(defaults.selectors.gotoInput).val('9'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0); + }); + + it('should go nowhere if the id does not exist', function() { + $(defaults.selectors.gotoInput).val('do-not-exist'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toEqual($.deck('getSlide'), 0); + }); + }); + + describe('Datalist population', function() { + it('should fill in options with all the slide ids', function() { + var $dataOptions = $(defaults.selectors.gotoDatalist).find('option'); + expect($dataOptions.length).toEqual(5); + expect($dataOptions.eq(0).attr('value')).toEqual('slide-0'); + expect($dataOptions.eq(1).attr('value')).toEqual('custom-id'); + }); + }); + + describe('key bindings', function() { + var e; + + beforeEach(function() { + e = jQuery.Event('keydown.deckgoto'); + }); + + it('should toggle the go-to helper if the specified key is pressed', function() { + e.which = 71; // g + $d.trigger(e); + expect($(defaults.selectors.container)).toHaveClass(defaults.classes.goto); + $d.trigger(e); + expect($(defaults.selectors.container)).not.toHaveClass(defaults.classes.goto); + }); + }); + + describe('countNested false', function() { + beforeEach(function() { + loadFixtures('nesteds.html'); + $.deck('.slide', { + countNested: false + }); + $.deck('showGoTo'); + }); + + it('should ignore nested slides when given a slide number', function() { + $(defaults.selectors.gotoInput).val('4'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toHaveId('after'); + }); + + it('should respect top side of new slide range', function() { + $.deck('go', 0); + $(defaults.selectors.gotoInput).val('6'); + $(defaults.selectors.gotoForm).submit(); + expect($.deck('getSlide')).toHaveId('slide-0'); + }); + }); +}); \ No newline at end of file diff --git a/test/spec.hash.js b/test/spec.hash.js dissimilarity index 80% index c1746fe..3b9ae01 100644 --- a/test/spec.hash.js +++ b/test/spec.hash.js @@ -1,83 +1,80 @@ -describe('Deck JS Hash Extension', function() { - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide'); - }); - - it('should assign ids to slides that do not have them', function() { - var slides = $.deck('getSlides'); - $.each(slides, function(i, $e) { - expect($e.attr('id')).toBeTruthy(); - }); - }); - - it('should reassign ids on reinitialization', function() { - var $firstSlide = $.deck('getSlide', 0), - firstID = $firstSlide.attr('id'); - - $firstSlide.before('

'); - $.deck('.slide'); - expect($firstSlide).not.toHaveId(firstID); - }); - - it('should update container with a state class including the slide id', function() { - var $c = $.deck('getContainer'), - osp = defaults.classes.onPrefix; - - expect($c).toHaveClass(osp + $.deck('getSlide', 0).attr('id')); - $.deck('next'); - expect($c).toHaveClass(osp + $.deck('getSlide', 1).attr('id')); - $.deck('next'); - expect($c).not.toHaveClass(osp + $.deck('getSlide', 1).attr('id')); - expect($c).toHaveClass(osp + $.deck('getSlide', 2).attr('id')); - }); - - it('should update the href on slide change', function() { - var $hashLink = $(defaults.selectors.hashLink); - $.deck('go', 3); - expect($hashLink.attr('href')).toMatch('#slide-3'); - }); - - it('should use existing ids if they exist', function() { - var $hashLink = $(defaults.selectors.hashLink); - $.deck('go', 1); - expect($hashLink.attr('href')).toMatch('#custom-id'); - }); - - it('should update the URL on slide change (if supported)', function() { - if (Modernizr.history) { - $.deck('go', 3); - expect(window.location.hash).toEqual('#slide-3'); - } - }); - - it('should deep link to slide on deck init', function() { - window.location.hash = "#slide-3"; - $.deck('.slide'); - waitsFor(function() { - return $.deck('getSlide').attr('id') === 'slide-3'; - }); - }); - - it('should follow internal hash links using hashchange (if supported)', function() { - if (Modernizr.hashchange) { - window.location.hash = "#slide-3"; - - // Hashchange event doesn't fire right when the hash changes? - waitsFor(function() { - return $.deck('getSlide').attr('id') === 'slide-3'; - }, 'hash to change to slide-3', 2000); - } - }); - - it('should follow internal hash links on click', function() { - /* Triggered clicks dont generate hashchanges, so until I find - a way to do this in an automated fashion, needs to be hand tested. */ - }); -}); \ No newline at end of file +describe('Deck JS Hash Extension', function() { + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide'); + }); + + it('should assign ids to slides that do not have them', function() { + var slides = $.deck('getSlides'); + $.each(slides, function(i, $e) { + expect($e.attr('id')).toBeTruthy(); + }); + }); + + it('should reassign ids on reinitialization', function() { + var $firstSlide = $.deck('getSlide', 0); + var firstID = $firstSlide.attr('id'); + + $firstSlide.before('

'); + $.deck('.slide'); + expect($firstSlide).not.toHaveId(firstID); + }); + + it('should update container with a state class including the slide id', function() { + var $c = $.deck('getContainer'); + var osp = defaults.classes.onPrefix; + + expect($c).toHaveClass(osp + $.deck('getSlide', 0).attr('id')); + $.deck('next'); + expect($c).toHaveClass(osp + $.deck('getSlide', 1).attr('id')); + $.deck('next'); + expect($c).not.toHaveClass(osp + $.deck('getSlide', 1).attr('id')); + expect($c).toHaveClass(osp + $.deck('getSlide', 2).attr('id')); + }); + + it('should update the href on slide change', function() { + var $hashLink = $(defaults.selectors.hashLink); + $.deck('go', 3); + expect($hashLink.attr('href')).toMatch('#slide-3'); + }); + + it('should use existing ids if they exist', function() { + var $hashLink = $(defaults.selectors.hashLink); + $.deck('go', 1); + expect($hashLink.attr('href')).toMatch('#custom-id'); + }); + + it('should update the URL on slide change (if supported)', function() { + if (Modernizr.history) { + $.deck('go', 3); + expect(window.location.hash).toEqual('#slide-3'); + } + }); + + it('should deep link to slide on deck init', function() { + window.location.hash = "#slide-3"; + $.deck('.slide'); + waitsFor(function() { + return $.deck('getSlide').attr('id') === 'slide-3'; + }); + }); + + it('should follow internal hash links using hashchange (if supported)', function() { + window.location.hash = "#slide-3"; + // Hashchange event doesn't fire right when the hash changes? + waitsFor(function() { + return $.deck('getSlide').attr('id') === 'slide-3'; + }, 'hash to change to slide-3', 2000); + }); + + it('should follow internal hash links on click', function() { + /* Triggered clicks dont generate hashchanges, so until I find + a way to do this in an automated fashion, needs to be hand tested. */ + }); +}); \ No newline at end of file diff --git a/test/spec.menu.js b/test/spec.menu.js dissimilarity index 94% index c819f9f..3abca9f 100644 --- a/test/spec.menu.js +++ b/test/spec.menu.js @@ -1,84 +1,83 @@ -describe('Deck JS Menu', function() { - var $d = $(document), - dsc = defaults.selectors.container; - - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide'); - }); - - describe('showMenu()', function() { - it('should show the menu', function() { - expect($(dsc)).not.toHaveClass(defaults.classes.menu); - $.deck('showMenu'); - expect($(dsc)).toHaveClass(defaults.classes.menu); - }); - - it('should do nothing if menu is already showing', function() { - if (Modernizr.csstransforms) { - $.deck('showMenu'); - $.deck('showMenu'); - $.deck('hideMenu'); - expect($('.slide').attr('style')).toBeFalsy(); - } - }); - }); - - describe('hideMenu()', function() { - it('should hide the menu', function() { - $.deck('showMenu'); - $.deck('hideMenu'); - expect($(dsc)).not.toHaveClass(defaults.classes.menu); - }); - }); - - describe('toggleMenu()', function() { - it('should toggle menu on and off', function() { - expect($(dsc)).not.toHaveClass(defaults.classes.menu); - $.deck('toggleMenu'); - expect($(dsc)).toHaveClass(defaults.classes.menu); - $.deck('toggleMenu'); - expect($(dsc)).not.toHaveClass(defaults.classes.menu); - }); - }); - - describe('key bindings', function() { - var e; - - beforeEach(function() { - e = jQuery.Event('keydown.deckmenu'); - }); - - it('should toggle the menu if the specified key is pressed', function() { - e.which = 77; // m - $d.trigger(e); - expect($(dsc)).toHaveClass(defaults.classes.menu); - $d.trigger(e); - expect($(dsc)).not.toHaveClass(defaults.classes.menu); - }); - }); - - describe('touch bindings', function() { - var estart; - var eend; - - beforeEach(function() { - estart = jQuery.Event('touchstart.deckmenu'); - eend = jQuery.Event('touchend.deckmenu'); - }); - - it('should toggle the menu if the screen is touched', function() { - $.deck('getOptions').touch.doubletapWindow = Date.now() + 100000; - $.deck('getContainer').trigger(estart); - $.deck('getContainer').trigger(eend); - expect($(dsc)).toHaveClass(defaults.classes.menu); - }); - }); - -}); +describe('Deck JS Menu', function() { + var $d = $(document); + var dsc = defaults.selectors.container; + + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide'); + }); + + describe('showMenu()', function() { + it('should show the menu', function() { + expect($(dsc)).not.toHaveClass(defaults.classes.menu); + $.deck('showMenu'); + expect($(dsc)).toHaveClass(defaults.classes.menu); + }); + + it('should do nothing if menu is already showing', function() { + if (Modernizr.csstransforms) { + $.deck('showMenu'); + $.deck('showMenu'); + $.deck('hideMenu'); + expect($('.slide').attr('style')).toBeFalsy(); + } + }); + }); + + describe('hideMenu()', function() { + it('should hide the menu', function() { + $.deck('showMenu'); + $.deck('hideMenu'); + expect($(dsc)).not.toHaveClass(defaults.classes.menu); + }); + }); + + describe('toggleMenu()', function() { + it('should toggle menu on and off', function() { + expect($(dsc)).not.toHaveClass(defaults.classes.menu); + $.deck('toggleMenu'); + expect($(dsc)).toHaveClass(defaults.classes.menu); + $.deck('toggleMenu'); + expect($(dsc)).not.toHaveClass(defaults.classes.menu); + }); + }); + + describe('key bindings', function() { + var e; + + beforeEach(function() { + e = jQuery.Event('keydown.deckmenu'); + }); + + it('should toggle the menu if the specified key is pressed', function() { + e.which = 77; // m + $d.trigger(e); + expect($(dsc)).toHaveClass(defaults.classes.menu); + $d.trigger(e); + expect($(dsc)).not.toHaveClass(defaults.classes.menu); + }); + }); + + describe('touch bindings', function() { + var estart, eend; + + beforeEach(function() { + estart = jQuery.Event('touchstart.deckmenu'); + eend = jQuery.Event('touchend.deckmenu'); + }); + + it('should toggle the menu if the screen is touched', function() { + $.deck('getOptions').touch.doubletapWindow = Date.now() + 100000; + $.deck('getContainer').trigger(estart); + $.deck('getContainer').trigger(eend); + expect($(dsc)).toHaveClass(defaults.classes.menu); + }); + }); + +}); diff --git a/test/spec.navigation.js b/test/spec.navigation.js dissimilarity index 95% index 9102518..9fd180f 100644 --- a/test/spec.navigation.js +++ b/test/spec.navigation.js @@ -1,53 +1,53 @@ -describe('Deck JS Navigation Buttons', function() { - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide'); - }); - - it('should go to the next slide if next link is clicked', function() { - $(defaults.selectors.nextLink).click(); - expect($.deck('getSlide')).toHaveClass('slide2'); - }); - - it('should go to the previous slide if previous link is clicked', function() { - $.deck('go', 2); - $(defaults.selectors.previousLink).click(); - expect($.deck('getSlide')).toHaveClass('slide2'); - }); - - it('should add the disabled class to the previous link if on first slide', function() { - expect($(defaults.selectors.previousLink)).toHaveClass(defaults.classes.navDisabled); - $(defaults.selectors.nextLink).click(); - expect($(defaults.selectors.previousLink)).not.toHaveClass(defaults.classes.navDisabled); - $(defaults.selectors.previousLink).click(); - expect($(defaults.selectors.previousLink)).toHaveClass(defaults.classes.navDisabled); - }); - - it('should add the disabled class to the next link if on last slide', function() { - expect($(defaults.selectors.nextLink)).not.toHaveClass(defaults.classes.navDisabled); - $.deck('go', $.deck('getSlides').length - 1); - expect($(defaults.selectors.nextLink)).toHaveClass(defaults.classes.navDisabled); - }); - - it('should not start disabled if deck initialized in the middle', function() { - $.deck('go', 2); - $.deck('.slide'); - waitsFor(function() { - return !$(defaults.selectors.previousLink).hasClass(defaults.classes.navDisabled); - }); - }); - - it('should update the links hrefs with real fragment ids', function() { - expect($(defaults.selectors.previousLink).attr('href')).toMatch(/#$/); - expect($(defaults.selectors.nextLink).attr('href')).toMatch('#custom-id'); - $.deck('go', 2); - expect($(defaults.selectors.previousLink).attr('href')).toMatch('#custom-id'); - expect($(defaults.selectors.nextLink).attr('href')).toMatch('#slide-3'); - }); -}); \ No newline at end of file +describe('Deck JS Navigation Buttons', function() { + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide'); + }); + + it('should go to the next slide if next link is clicked', function() { + $(defaults.selectors.nextLink).click(); + expect($.deck('getSlide')).toHaveClass('slide2'); + }); + + it('should go to the previous slide if previous link is clicked', function() { + $.deck('go', 2); + $(defaults.selectors.previousLink).click(); + expect($.deck('getSlide')).toHaveClass('slide2'); + }); + + it('should add the disabled class to the previous link if on first slide', function() { + expect($(defaults.selectors.previousLink)).toHaveClass(defaults.classes.navDisabled); + $(defaults.selectors.nextLink).click(); + expect($(defaults.selectors.previousLink)).not.toHaveClass(defaults.classes.navDisabled); + $(defaults.selectors.previousLink).click(); + expect($(defaults.selectors.previousLink)).toHaveClass(defaults.classes.navDisabled); + }); + + it('should add the disabled class to the next link if on last slide', function() { + expect($(defaults.selectors.nextLink)).not.toHaveClass(defaults.classes.navDisabled); + $.deck('go', $.deck('getSlides').length - 1); + expect($(defaults.selectors.nextLink)).toHaveClass(defaults.classes.navDisabled); + }); + + it('should not start disabled if deck initialized in the middle', function() { + $.deck('go', 2); + $.deck('.slide'); + waitsFor(function() { + return !$(defaults.selectors.previousLink).hasClass(defaults.classes.navDisabled); + }); + }); + + it('should update the links hrefs with real fragment ids', function() { + expect($(defaults.selectors.previousLink).attr('href')).toMatch(/#$/); + expect($(defaults.selectors.nextLink).attr('href')).toMatch('#custom-id'); + $.deck('go', 2); + expect($(defaults.selectors.previousLink).attr('href')).toMatch('#custom-id'); + expect($(defaults.selectors.nextLink).attr('href')).toMatch('#slide-3'); + }); +}); \ No newline at end of file diff --git a/test/spec.scale.js b/test/spec.scale.js dissimilarity index 96% index 0976ba1..02be2d8 100644 --- a/test/spec.scale.js +++ b/test/spec.scale.js @@ -1,57 +1,57 @@ -describe('Deck JS Status Indicator', function() { - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide'); - }); - - it('should start with scaling enabled', function() { - expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); - }); - - describe('disableScale()', function() { - it('should remove the scale class from the container', function() { - $.deck('disableScale'); - expect($.deck('getContainer')).not.toHaveClass(defaults.classes.scale); - }); - }); - - describe('enableScale()', function() { - it('should add the scale class to the container', function() { - $.deck('disableScale'); - $.deck('enableScale'); - expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); - }); - }); - - describe('toggleScale()', function() { - it('should toggle between adding and removing the scale class', function() { - $.deck('toggleScale'); - expect($.deck('getContainer')).not.toHaveClass(defaults.classes.scale); - $.deck('toggleScale'); - expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); - }); - }); - - describe('key bindings', function() { - var e, - $d = $(document); - - beforeEach(function() { - e = jQuery.Event('keydown.deckscale'); - }); - - it('should toggle scaling if the specified key is pressed', function() { - e.which = 83; // s - $d.trigger(e); - expect($.deck('getContainer')).not.toHaveClass(defaults.classes.scale); - $d.trigger(e); - expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); - }); - }); -}); \ No newline at end of file +describe('Deck JS Status Indicator', function() { + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide'); + }); + + it('should start with scaling enabled', function() { + expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); + }); + + describe('disableScale()', function() { + it('should remove the scale class from the container', function() { + $.deck('disableScale'); + expect($.deck('getContainer')).not.toHaveClass(defaults.classes.scale); + }); + }); + + describe('enableScale()', function() { + it('should add the scale class to the container', function() { + $.deck('disableScale'); + $.deck('enableScale'); + expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); + }); + }); + + describe('toggleScale()', function() { + it('should toggle between adding and removing the scale class', function() { + $.deck('toggleScale'); + expect($.deck('getContainer')).not.toHaveClass(defaults.classes.scale); + $.deck('toggleScale'); + expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); + }); + }); + + describe('key bindings', function() { + var e; + var $d = $(document); + + beforeEach(function() { + e = jQuery.Event('keydown.deckscale'); + }); + + it('should toggle scaling if the specified key is pressed', function() { + e.which = 83; // s + $d.trigger(e); + expect($.deck('getContainer')).not.toHaveClass(defaults.classes.scale); + $d.trigger(e); + expect($.deck('getContainer')).toHaveClass(defaults.classes.scale); + }); + }); +}); \ No newline at end of file diff --git a/test/spec.status.js b/test/spec.status.js dissimilarity index 93% index da7a6bf..5232f1c 100644 --- a/test/spec.status.js +++ b/test/spec.status.js @@ -1,60 +1,60 @@ -describe('Deck JS Status Indicator', function() { - beforeEach(function() { - loadFixtures('standard.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide'); - }); - - it('should show the correct total number of slides', function() { - expect($(defaults.selectors.statusTotal)).toHaveText($.deck('getSlides').length); - }); - - it('should start at the right current slide', function() { - expect($(defaults.selectors.statusCurrent)).toHaveText(1); - $.deck('go', 2); - $.deck('.slide'); - waitsFor(function() { - return $(defaults.selectors.statusCurrent).text() === '3'; - }); - }); - - it('should update to the correct number on slide change', function() { - $.deck('go', 2); - expect($(defaults.selectors.statusCurrent)).toHaveText('3'); - }); -}); - -describe('countNested false indicator', function() { - beforeEach(function() { - loadFixtures('nesteds.html'); - if (Modernizr.history) { - history.replaceState({}, "", "#") - } - else { - window.location.hash = '#'; - } - $.deck('.slide', { - countNested: false - }); - }); - - it('should ignore nested slides in the total', function() { - expect($(defaults.selectors.statusTotal)).toHaveText('5'); - }); - - it('should update to the root slide number when nested becomes active', function() { - $.deck('go', 10); - expect($(defaults.selectors.statusCurrent)).toHaveText('4'); - $.deck('prev'); - expect($(defaults.selectors.statusCurrent)).toHaveText('3'); - $.deck('go', 3); - expect($(defaults.selectors.statusCurrent)).toHaveText('3'); - $.deck('go', 1); - expect($(defaults.selectors.statusCurrent)).toHaveText('2'); - }); -}); \ No newline at end of file +describe('Deck JS Status Indicator', function() { + beforeEach(function() { + loadFixtures('standard.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide'); + }); + + it('should show the correct total number of slides', function() { + expect($(defaults.selectors.statusTotal)).toHaveText($.deck('getSlides').length); + }); + + it('should start at the right current slide', function() { + expect($(defaults.selectors.statusCurrent)).toHaveText(1); + $.deck('go', 2); + $.deck('.slide'); + waitsFor(function() { + return $(defaults.selectors.statusCurrent).text() === '3'; + }); + }); + + it('should update to the correct number on slide change', function() { + $.deck('go', 2); + expect($(defaults.selectors.statusCurrent)).toHaveText('3'); + }); +}); + +describe('countNested false indicator', function() { + beforeEach(function() { + loadFixtures('nesteds.html'); + if (Modernizr.history) { + history.replaceState({}, "", "#") + } + else { + window.location.hash = '#'; + } + $.deck('.slide', { + countNested: false + }); + }); + + it('should ignore nested slides in the total', function() { + expect($(defaults.selectors.statusTotal)).toHaveText('5'); + }); + + it('should update to the root slide number when nested becomes active', function() { + $.deck('go', 10); + expect($(defaults.selectors.statusCurrent)).toHaveText('4'); + $.deck('prev'); + expect($(defaults.selectors.statusCurrent)).toHaveText('3'); + $.deck('go', 3); + expect($(defaults.selectors.statusCurrent)).toHaveText('3'); + $.deck('go', 1); + expect($(defaults.selectors.statusCurrent)).toHaveText('2'); + }); +}); \ No newline at end of file diff --git a/themes/style/web-2.0.scss b/themes/style/web-2.0.scss index 4bc54ee..aa9e9b0 100644 --- a/themes/style/web-2.0.scss +++ b/themes/style/web-2.0.scss @@ -1,7 +1,7 @@ @mixin rotate($deg) { - -webkit-transform:rotate($deg); - -ms-transform:rotate($deg); - transform:rotate($deg); + -webkit-transform:rotate($deg); + -ms-transform:rotate($deg); + transform:rotate($deg); } @import "reset"; diff --git a/themes/transition/fade.scss b/themes/transition/fade.scss dissimilarity index 84% index 422a361..56fbd4c 100644 --- a/themes/transition/fade.scss +++ b/themes/transition/fade.scss @@ -1,59 +1,59 @@ -@mixin translate($x: 0, $y: 0, $z: 0) { - -webkit-transform:translate3d($x, $y, $z); - -ms-transform:translate($x, $y); - transform:translate3d($x, $y, $z); -} - -@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { - -webkit-transition:$prop $duration $easing $delay; - transition:$prop $duration $easing $delay; -} - -.csstransitions.csstransforms { - .deck-container .slide { - @include transition(opacity, 500ms); - } - - .deck-container:not(.deck-menu) { - > .slide { - position:absolute; - top:0; - left:0; - - .slide { - position:relative; - left:0; - top:0; - } - - .deck-next, .deck-after { - opacity:0; - } - - .deck-current { - opacity:1; - } - } - - > .deck-previous, > .deck-before, > .deck-next, > .deck-after { - opacity:0; - pointer-events:none; - } - - > .deck-before, > .deck-previous { - .slide { - visibility:visible; - } - } - - > .deck-child-current { - opacity:1; - visibility:visible; - pointer-events:auto; - - .deck-next, .deck-after { - visibility:hidden; - } - } - } -} +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -ms-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +.csstransitions.csstransforms { + .deck-container .slide { + @include transition(opacity, 500ms); + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + + .slide { + position:relative; + left:0; + top:0; + } + + .deck-next, .deck-after { + opacity:0; + } + + .deck-current { + opacity:1; + } + } + + > .deck-previous, > .deck-before, > .deck-next, > .deck-after { + opacity:0; + pointer-events:none; + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + opacity:1; + visibility:visible; + pointer-events:auto; + + .deck-next, .deck-after { + visibility:hidden; + } + } + } +} diff --git a/themes/transition/horizontal-slide.scss b/themes/transition/horizontal-slide.scss dissimilarity index 86% index bb57697..d24f8ed 100644 --- a/themes/transition/horizontal-slide.scss +++ b/themes/transition/horizontal-slide.scss @@ -1,72 +1,72 @@ -@mixin translate($x: 0, $y: 0, $z: 0) { - -webkit-transform:translate3d($x, $y, $z); - -ms-transform:translate($x, $y); - transform:translate3d($x, $y, $z); -} - -@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { - -webkit-transition:$prop $duration $easing $delay; - transition:$prop $duration $easing $delay; -} - -@mixin transform($val) { - -webkit-transform:$val; - -ms-transform:$val; - transform:$val; -} - -.csstransitions.csstransforms { - overflow-x:hidden; - - .deck-container > .slide { - -webkit-transition:-webkit-transform 500ms ease-in-out; - transition:transform 500ms ease-in-out; - } - - .deck-container:not(.deck-menu) { - > .slide { - position:absolute; - top:0; - left:0; - - .slide { - position:relative; - left:0; - top:0; - -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; - transition:transform 500ms ease-in-out, opacity 500ms ease-in-out; - } - - .deck-next, .deck-after { - visibility:visible; - @include translate(200%); - } - } - - > .deck-previous { - @include translate(-200%); - } - - > .deck-before { - @include translate(-400%); - } - - > .deck-next { - @include translate(200%); - } - - > .deck-after { - @include translate(400%); - } - - > .deck-before, > .deck-previous { - .slide { - visibility:visible; - } - } - - > .deck-child-current { - @include transform(none); - } - } -} \ No newline at end of file +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -ms-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +@mixin transform($val) { + -webkit-transform:$val; + -ms-transform:$val; + transform:$val; +} + +.csstransitions.csstransforms { + overflow-x:hidden; + + .deck-container > .slide { + -webkit-transition:-webkit-transform 500ms ease-in-out; + transition:transform 500ms ease-in-out; + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + + .slide { + position:relative; + left:0; + top:0; + -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition:transform 500ms ease-in-out, opacity 500ms ease-in-out; + } + + .deck-next, .deck-after { + visibility:visible; + @include translate(200%); + } + } + + > .deck-previous { + @include translate(-200%); + } + + > .deck-before { + @include translate(-400%); + } + + > .deck-next { + @include translate(200%); + } + + > .deck-after { + @include translate(400%); + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + @include transform(none); + } + } +} \ No newline at end of file diff --git a/themes/transition/vertical-slide.scss b/themes/transition/vertical-slide.scss dissimilarity index 86% index aa974cf..2187725 100644 --- a/themes/transition/vertical-slide.scss +++ b/themes/transition/vertical-slide.scss @@ -1,92 +1,92 @@ -@mixin translate($x: 0, $y: 0, $z: 0) { - -webkit-transform:translate3d($x, $y, $z); - -ms-transform:translate($x, $y); - transform:translate3d($x, $y, $z); -} - -@mixin rotate($deg) { - -webkit-transform:rotate($deg); - -ms-transform:rotate($deg); - transform:rotate($deg); -} - -@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { - -webkit-transition:$prop $duration $easing $delay; - transition:$prop $duration $easing $delay; -} - -@mixin transform($val) { - -webkit-transform:$val; - -ms-transform:$val; - transform:$val; -} - -.csstransitions.csstransforms { - .deck-container { - overflow-y:hidden; - - > .slide { - -webkit-transition:-webkit-transform 500ms ease-in-out; - transition:transform 500ms ease-in-out; - } - } - - .deck-container:not(.deck-menu) { - > .slide { - position:absolute; - top:0; - left:0; - - .slide { - position:relative; - left:0; - top:0; - -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; - transition:transform 500ms ease-in-out, opacity 500ms ease-in-out; - } - - .deck-next, .deck-after { - visibility:visible; - @include translate(0, 1600px); - } - } - - > .deck-previous { - @include translate(0, -200%); - } - - > .deck-before { - @include translate(0, -400%); - } - - > .deck-next { - @include translate(0, 200%); - } - - > .deck-after { - @include translate(0, 400%); - } - - > .deck-before, > .deck-previous { - .slide { - visibility:visible; - } - } - - > .deck-child-current { - @include transform(none); - } - } - - .deck-prev-link { - left:auto; - right:8px; - top:59px; - @include rotate(90deg); - } - - .deck-next-link { - top:99px; - @include rotate(90deg); - } -} \ No newline at end of file +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -ms-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin rotate($deg) { + -webkit-transform:rotate($deg); + -ms-transform:rotate($deg); + transform:rotate($deg); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +@mixin transform($val) { + -webkit-transform:$val; + -ms-transform:$val; + transform:$val; +} + +.csstransitions.csstransforms { + .deck-container { + overflow-y:hidden; + + > .slide { + -webkit-transition:-webkit-transform 500ms ease-in-out; + transition:transform 500ms ease-in-out; + } + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + + .slide { + position:relative; + left:0; + top:0; + -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition:transform 500ms ease-in-out, opacity 500ms ease-in-out; + } + + .deck-next, .deck-after { + visibility:visible; + @include translate(0, 1600px); + } + } + + > .deck-previous { + @include translate(0, -200%); + } + + > .deck-before { + @include translate(0, -400%); + } + + > .deck-next { + @include translate(0, 200%); + } + + > .deck-after { + @include translate(0, 400%); + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + @include transform(none); + } + } + + .deck-prev-link { + left:auto; + right:8px; + top:59px; + @include rotate(90deg); + } + + .deck-next-link { + top:99px; + @include rotate(90deg); + } +} \ No newline at end of file -- 2.11.4.GIT

Slide

Content

Here

Slide

Content

Here

Getting Started with deck.js

How to Make a Deck

Write Slides

Choose Themes

Include Extensions

Quick Start

The Markup

Style Themes

Transition Themes

Extensions

Nested Slides

Other Elements: Images

Other Elements: Blockquotes

Other Elements: Video Embeds

Digging Deeper

Getting Started with deck.js

How to Make a Deck

Write Slides

Choose Themes

Include Extensions

Quick Start

The Markup

Style Themes

Transition Themes

Extensions

Nested Slides

Other Elements: Images

Other Elements: Blockquotes

Other Elements: Video Embeds

Digging Deeper