Vortrag für GIT angefangen.
This commit is contained in:
Tim Schumacher
parent
61165635cd
commit
40e34e4a91
60 changed files with 8603 additions and 0 deletions
28
git/extensions/scale/deck.scale.css
Normal file
28
git/extensions/scale/deck.scale.css
Normal file
|
|
@ -0,0 +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) > .slide {
|
||||
-webkit-box-sizing: padding-box;
|
||||
-moz-box-sizing: padding-box;
|
||||
box-sizing: padding-box;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.csstransforms .deck-container.deck-scale:not(.deck-menu) > .slide > .deck-slide-scaler {
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-moz-transform-origin: 50% 0;
|
||||
-o-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;
|
||||
-moz-transform: none !important;
|
||||
-o-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
170
git/extensions/scale/deck.scale.js
Normal file
170
git/extensions/scale/deck.scale.js
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
/*!
|
||||
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($, deck, window, undefined) {
|
||||
var $d = $(document),
|
||||
$w = $(window),
|
||||
baseHeight, // Value to scale against
|
||||
timer, // Timeout id for debouncing
|
||||
rootSlides,
|
||||
|
||||
/*
|
||||
Internal function to do all the dirty work of scaling the slides.
|
||||
*/
|
||||
scaleDeck = function() {
|
||||
var opts = $[deck]('getOptions'),
|
||||
obh = opts.baseHeight,
|
||||
$container = $[deck]('getContainer'),
|
||||
baseHeight = obh ? obh : $container.height();
|
||||
|
||||
// Scale each slide down if necessary (but don't scale up)
|
||||
$.each(rootSlides, function(i, $slide) {
|
||||
var slideHeight = $slide.innerHeight(),
|
||||
$scaler = $slide.find('.' + opts.classes.scaleSlideWrapper),
|
||||
scale = $container.hasClass(opts.classes.scale) ?
|
||||
baseHeight / slideHeight :
|
||||
1;
|
||||
|
||||
$.each('Webkit Moz O ms Khtml'.split(' '), function(i, prefix) {
|
||||
if (scale === 1) {
|
||||
$scaler.css(prefix + 'Transform', '');
|
||||
}
|
||||
else {
|
||||
$scaler.css(prefix + 'Transform', 'scale(' + scale + ')');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
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 $c = $[deck]('getContainer');
|
||||
$[deck]($c.hasClass($[deck]('getOptions').classes.scale) ?
|
||||
'disableScale' : 'enableScale');
|
||||
});
|
||||
|
||||
$d.bind('deck.init', function() {
|
||||
var opts = $[deck]('getOptions'),
|
||||
slideTest = $.map([
|
||||
opts.classes.before,
|
||||
opts.classes.previous,
|
||||
opts.classes.current,
|
||||
opts.classes.next,
|
||||
opts.classes.after
|
||||
], function(el, i) {
|
||||
return '.' + el;
|
||||
}).join(', ');
|
||||
|
||||
// Build top level slides array
|
||||
rootSlides = [];
|
||||
$.each($[deck]('getSlides'), function(i, $el) {
|
||||
if (!$el.parentsUntil(opts.selectors.container, slideTest).length) {
|
||||
rootSlides.push($el);
|
||||
}
|
||||
});
|
||||
|
||||
// Use a wrapper on each slide to handle content scaling
|
||||
$.each(rootSlides, function(i, $slide) {
|
||||
$slide.children().wrapAll('<div class="' + opts.classes.scaleSlideWrapper + '"/>');
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
31
git/extensions/scale/deck.scale.scss
Normal file
31
git/extensions/scale/deck.scale.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/* 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) {
|
||||
> .slide {
|
||||
-webkit-box-sizing: padding-box;
|
||||
-moz-box-sizing: padding-box;
|
||||
box-sizing: padding-box;
|
||||
width:100%;
|
||||
padding-bottom:20px;
|
||||
|
||||
> .deck-slide-scaler {
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-moz-transform-origin: 50% 0;
|
||||
-o-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;
|
||||
-moz-transform:none !important;
|
||||
-o-transform:none !important;
|
||||
-ms-transform:none !important;
|
||||
transform:none !important;
|
||||
}
|
||||
Reference in a new issue