Chapter is quite ok
ajax loaded content graphics ok interactivity ok remains the video interactions
This commit is contained in:
Bachir Soussi Chiadmi
+1
-1
@@ -6,4 +6,4 @@ sites/*/files
|
||||
sites/*/private
|
||||
|
||||
*.sublime*
|
||||
.sass-cache
|
||||
sites/all/themes/gui/jee/.sass-cache
|
||||
|
||||
@@ -141,3 +141,5 @@ DirectoryIndex index.php index.html index.htm
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
</IfModule>
|
||||
|
||||
AddType application/x-web-app-manifest+json .webapp
|
||||
@@ -12,7 +12,7 @@ function jeemod_menu() {
|
||||
);
|
||||
|
||||
$items['jee/chapter'] = $base+array(
|
||||
'title' => 'Matrio base ajax',
|
||||
'title' => 'jee',
|
||||
'page callback' => 'jeemod_chapter',
|
||||
'page arguments' => array(2),
|
||||
'access callback' => TRUE,
|
||||
|
||||
BIN
Binary file not shown.
@@ -3,7 +3,8 @@
|
||||
"dependencies": {
|
||||
"foundation": "~5.5.0",
|
||||
"jquery.transit": "~0.9.12",
|
||||
"jquery.pep": "~0.6.3"
|
||||
"jquery.pep": "~0.6.3",
|
||||
"Peppermint": "~1.3.7"
|
||||
},
|
||||
"version": "7.x-0.1",
|
||||
"authors": [
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "Peppermint",
|
||||
"version": "1.3.7",
|
||||
"homepage": "http://wd.dizaina.net/en/scripts/peppermint/",
|
||||
"authors": [
|
||||
"Oleg Korsunsky <wd@dizaina.net>"
|
||||
],
|
||||
"description": "Responsive touch-enabled slider. Tiny, supports mouse and all sorts of touch, library agnostic.",
|
||||
"main": [
|
||||
"dist/peppermint.min.js",
|
||||
"dist/peppermint.suggested.css"
|
||||
],
|
||||
"keywords": [
|
||||
"touch",
|
||||
"touch-events",
|
||||
"pointer-events",
|
||||
"mouse-events",
|
||||
"slider",
|
||||
"carousel",
|
||||
"gallery",
|
||||
"vanilla-js",
|
||||
"framework-agnostic",
|
||||
"library-agnostic"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test"
|
||||
],
|
||||
"_release": "1.3.7",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.3.7",
|
||||
"commit": "cec00832caa3a1940801a0b20f84c8b9c8518b1f"
|
||||
},
|
||||
"_source": "git://github.com/wilddeer/Peppermint.git",
|
||||
"_target": "~1.3.7",
|
||||
"_originalSource": "Peppermint",
|
||||
"_direct": true
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/*global module */
|
||||
module.exports = function(grunt) {
|
||||
'use strict';
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
banner: '/*!\n * Peppermint touch slider\n * v. <%= pkg.version %> | <%= pkg.homepage %>\n * Copyright <%= pkg.author.name %> | <%= pkg.author.url %>\n *\n * Depends on Event Burrito (included) | https://github.com/wilddeer/Event-Burrito\n * MIT License\n */\n',
|
||||
bannerPure: '/*!\n * Peppermint touch slider\n * v. <%= pkg.version %> | <%= pkg.homepage %>\n * Copyright <%= pkg.author.name %> | <%= pkg.author.url %>\n *\n * Depends on Event Burrito | https://github.com/wilddeer/Event-Burrito\n * MIT License\n */\n',
|
||||
uglify: {
|
||||
options: {
|
||||
mangle: {
|
||||
except: ['Peppermint', '$', 'jQuery', 'EventBurrito']
|
||||
}
|
||||
},
|
||||
peppermint: {
|
||||
files: {
|
||||
'temp/peppermint.min.js': ['src/peppermint.js']
|
||||
}
|
||||
},
|
||||
burrito: {
|
||||
files: {
|
||||
'temp/eventburrito.min.js': ['src/burrito/eventburrito.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
concat: {
|
||||
options: {
|
||||
banner: '<%= banner %>',
|
||||
separator: '\n'
|
||||
},
|
||||
full: {
|
||||
src: ['src/peppermint.js','src/burrito/eventburrito.js'],
|
||||
dest: 'dist/peppermint.js',
|
||||
},
|
||||
min: {
|
||||
src: ['temp/peppermint.min.js','temp/eventburrito.min.js'],
|
||||
dest: 'dist/peppermint.min.js',
|
||||
},
|
||||
pureFull: {
|
||||
options: {
|
||||
banner: '<%= bannerPure %>'
|
||||
},
|
||||
src: ['src/peppermint.js'],
|
||||
dest: 'dist/pure/peppermint.pure.js'
|
||||
},
|
||||
pureMin: {
|
||||
options: {
|
||||
banner: '<%= bannerPure %>'
|
||||
},
|
||||
src: ['temp/peppermint.min.js'],
|
||||
dest: 'dist/pure/peppermint.pure.min.js'
|
||||
},
|
||||
cssRequired: {
|
||||
options: {
|
||||
banner: '/* Peppermint minimal required styles */\n\n'
|
||||
},
|
||||
src: ['src/peppermint.required.css'],
|
||||
dest: 'dist/peppermint.required.css'
|
||||
},
|
||||
cssSuggested: {
|
||||
options: {
|
||||
banner: '/* Peppermint required styles + default appearance styles */\n\n',
|
||||
separator: '\n\n/* default appearance styles */\n'
|
||||
},
|
||||
src: ['src/peppermint.required.css', 'src/peppermint.appearance.css'],
|
||||
dest: 'dist/peppermint.suggested.css'
|
||||
}
|
||||
},
|
||||
|
||||
bump: {
|
||||
options: {
|
||||
files: ['package.json', 'bower.json'],
|
||||
updateConfigs: ['pkg'],
|
||||
commit: true,
|
||||
commitMessage: 'tagging v. %VERSION%',
|
||||
commitFiles: ['.'],
|
||||
createTag: true,
|
||||
tagName: '%VERSION%',
|
||||
tagMessage: 'tagging v. %VERSION%',
|
||||
push: false
|
||||
}
|
||||
},
|
||||
|
||||
shell: {
|
||||
push: {
|
||||
command: 'git push'
|
||||
},
|
||||
|
||||
pushTags: {
|
||||
command: 'git push --tags'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
files: ['src/**/*.js', 'src/**/*.css', 'package.json'],
|
||||
tasks: ['build']
|
||||
},
|
||||
});
|
||||
|
||||
// build
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-bump');
|
||||
grunt.loadNpmTasks('grunt-shell');
|
||||
grunt.registerTask('build', ['uglify', 'concat']);
|
||||
grunt.registerTask('release', ['bump-only:patch', 'uglify', 'concat', 'bump-commit', 'shell:push', 'shell:pushTags']);
|
||||
grunt.registerTask('w', ['build', 'watch']);
|
||||
grunt.registerTask('default', 'build');
|
||||
};
|
||||
@@ -0,0 +1,224 @@
|
||||
#Peppermint touch slider
|
||||
|
||||
[Check out the demo](http://wd.dizaina.net/en/scripts/peppermint/)
|
||||
|
||||
Yet another touch slider. Only better.
|
||||
|
||||
- Works with mouse, [Touch Events](http://www.w3.org/TR/touch-events/), [Pointer Events](http://www.w3.org/TR/pointerevents/), old [IE10 Pointer Events](http://msdn.microsoft.com/en-us/library/ie/hh673557\(v=vs.85\).aspx)
|
||||
- Responsive, works on iPhones, Androids, Windows Phones, Blackberries, Windows 8 devices
|
||||
- IE7+ compatible
|
||||
- Library agnostic. If jQuery is available, registers itself as a plugin.
|
||||
- Uses CSS3 transforms & animations, falls back to timer animations when necessary
|
||||
- Only 7.7 Kb minified
|
||||
- Perfomance-optimized `touch` functions
|
||||
- API and callback functions for extensibility
|
||||
- [Doesn't break](http://wd.dizaina.net/en/internet-maintenance/js-sliders-and-the-tab-key/) when <kbd>tab</kbd>’bing
|
||||
|
||||
##Kit
|
||||
|
||||
- **[peppermint.min.js](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.min.js)** – minified production script
|
||||
- **[peppermint.required.css](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.required.css)** – styles required for proper functioning
|
||||
- **[peppermint.suggested.css](https://raw.github.com/wilddeer/Peppermint/master/dist/peppermint.suggested.css)** – default styles to start with (required styles included)
|
||||
|
||||
Also available in [Bower](http://bower.io):
|
||||
|
||||
```
|
||||
bower install Peppermint --save
|
||||
```
|
||||
|
||||
##Usage
|
||||
|
||||
HTML markup:
|
||||
|
||||
```html
|
||||
<div class="peppermint peppermint-inactive" id="peppermint">
|
||||
<figure> ... </figure>
|
||||
|
||||
<figure> ... </figure>
|
||||
|
||||
<figure> ... </figure>
|
||||
</div>
|
||||
```
|
||||
|
||||
Javascript:
|
||||
|
||||
```javascript
|
||||
var slider = Peppermint(document.getElementById('peppermint'));
|
||||
```
|
||||
|
||||
Or javascript + jQuery:
|
||||
|
||||
```javascript
|
||||
$('.peppermint').Peppermint();
|
||||
```
|
||||
|
||||
`peppermint-inactive` class is not required. It is replaced with `peppermint-active` during setup.
|
||||
|
||||
You are free to use any other tag instead of `figure`. When using `figure`, don't forget to include [html5shiv](https://github.com/aFarkas/html5shiv), otherwise it won't work in old IEs.
|
||||
|
||||
Place anything you want within the slides.
|
||||
|
||||
##Settings
|
||||
|
||||
Peppermint can take settings object as an optional second parameter (first when using jQuery). Default settings:
|
||||
|
||||
```javascript
|
||||
{
|
||||
//transition time when changing slides, ms
|
||||
speed: 300,
|
||||
|
||||
//transition time when changing slides after touch, ms
|
||||
touchSpeed: 300,
|
||||
|
||||
//slideshow enabled
|
||||
slideshow: false,
|
||||
|
||||
//slideshow interval, ms
|
||||
slideshowInterval: 4000,
|
||||
|
||||
//stop slideshow after user interacts with the slider
|
||||
stopSlideshowAfterInteraction: false,
|
||||
|
||||
//slide number to start with
|
||||
startSlide: 0,
|
||||
|
||||
//use mouse to drag the slider
|
||||
mouseDrag: true,
|
||||
|
||||
//don't initialize Peppermint if there's only one slide
|
||||
disableIfOneSlide: true,
|
||||
|
||||
//Prefix to be used with Peppermint classes,
|
||||
//such as `inactive`, `active`, `mouse`, `drag`, etc.
|
||||
//Don't forget to change the stylesheet appropriately!
|
||||
cssPrefix: 'peppermint-',
|
||||
|
||||
//show dots
|
||||
dots: false,
|
||||
|
||||
//prepend dots to dotsContainer (default is append)
|
||||
dotsPrepend: false,
|
||||
|
||||
//Element to contain dots, defaults to Peppermint's root element.
|
||||
//Can be anywhere on the page.
|
||||
dotsContainer: undefined,
|
||||
|
||||
//element containing slides, defaults to Peppermint's root element
|
||||
slidesContainer: undefined,
|
||||
|
||||
//Callback function, runs at slide change.
|
||||
//Receives slide number as a parameter.
|
||||
onSlideChange: undefined,
|
||||
|
||||
//Callback function, runs at setup end.
|
||||
//Receives total number of slides as a parameter.
|
||||
onSetup: undefined
|
||||
}
|
||||
```
|
||||
|
||||
####Examples
|
||||
|
||||
JS:
|
||||
|
||||
```javascript
|
||||
var slider = Peppermint(document.getElementById('peppermint'), {
|
||||
dots: true,
|
||||
slideshow: true,
|
||||
speed: 500,
|
||||
slideshowInterval: 5000,
|
||||
stopSlideshowAfterInteraction: true,
|
||||
onSetup: function(n) {
|
||||
console.log('Peppermint setup done. Slides found: ' + n);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
JS + jQuery:
|
||||
|
||||
```javascript
|
||||
$('.peppermint').Peppermint({
|
||||
dots: true,
|
||||
slideshow: true,
|
||||
speed: 500,
|
||||
slideshowInterval: 5000,
|
||||
stopSlideshowAfterInteraction: true,
|
||||
onSetup: function(n) {
|
||||
console.log('Peppermint setup done. Slides found: ' + n);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
##API
|
||||
|
||||
Peppermint exposes a set of functions upon installation. These functions can be used to controll the slider externally:
|
||||
|
||||
`slideTo(n)` – change active slide to `n`;
|
||||
|
||||
`next()` – next slide;
|
||||
|
||||
`prev()` – previous slide;
|
||||
|
||||
`start()` – start slideshow;
|
||||
|
||||
`stop()` – stop slideshow;
|
||||
|
||||
`pause()` – pause slideshow until the next slide change;
|
||||
|
||||
`getCurrentPos()` – get current slide number;
|
||||
|
||||
`getSlidesNumber()` – get total number of slides;
|
||||
|
||||
`recalcWidth()` – recalculate slider's and slides' widths. Usefull when the container width is changed. Width recalculation runs automatically on window resize and device orientation change.
|
||||
|
||||
####Examples
|
||||
|
||||
JS:
|
||||
|
||||
```javascript
|
||||
//init Peppermint and save the API object
|
||||
var slider = Peppermint(document.getElementById('peppermint')),
|
||||
//save links to HTML nodes
|
||||
rightArr = document.getElementById('right-arr'),
|
||||
leftArr = document.getElementById('left-arr'),
|
||||
getSlidesNumberButton = document.getElementById('getslidesnumber');
|
||||
|
||||
//click `#right-arr` to go to the next slide
|
||||
rightArr.addEventListener('click', slider.next, false);
|
||||
|
||||
//click `#left-arr` to go to the previous slide
|
||||
leftArr.addEventListener('click', slider.prev, false);
|
||||
|
||||
//click `#getslidesnumber` to alert total number of slides
|
||||
getSlidesNumberButton.addEventListener('click', function() {
|
||||
alert('There are ' + slider.getSlidesNumber() + ' slides');
|
||||
}, false);
|
||||
```
|
||||
|
||||
JS + jQuery:
|
||||
|
||||
```javascript
|
||||
//save jQuery link to slider's block
|
||||
var slider = $('#peppermint');
|
||||
|
||||
//init Peppermint
|
||||
slider.Peppermint();
|
||||
|
||||
//click `#right-arr` to go to the next slide
|
||||
$('#right-arr').click(slider.data('Peppermint').next);
|
||||
|
||||
//click `#left-arr` to go to the previous slide
|
||||
$('#left-arr').click(slider.data('Peppermint').prev);
|
||||
|
||||
//click `#getslidesnumber` to alert total number of slides
|
||||
$('#getslidesnumber').click(function() {
|
||||
alert('There are ' + slider.data('Peppermint').getSlidesNumber() + ' slides');
|
||||
});
|
||||
```
|
||||
|
||||
##Using Peppermint?
|
||||
|
||||
Drop me a link → [:envelope: wd@dizaina.net](mailto:wd@dizaina.net).
|
||||
|
||||
##License
|
||||
|
||||
[MIT license](http://opensource.org/licenses/MIT).
|
||||
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "Peppermint",
|
||||
"version": "1.3.7",
|
||||
"homepage": "http://wd.dizaina.net/en/scripts/peppermint/",
|
||||
"authors": [
|
||||
"Oleg Korsunsky <wd@dizaina.net>"
|
||||
],
|
||||
"description": "Responsive touch-enabled slider. Tiny, supports mouse and all sorts of touch, library agnostic.",
|
||||
"main": [
|
||||
"dist/peppermint.min.js",
|
||||
"dist/peppermint.suggested.css"
|
||||
],
|
||||
"keywords": [
|
||||
"touch",
|
||||
"touch-events",
|
||||
"pointer-events",
|
||||
"mouse-events",
|
||||
"slider",
|
||||
"carousel",
|
||||
"gallery",
|
||||
"vanilla-js",
|
||||
"framework-agnostic",
|
||||
"library-agnostic"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,716 @@
|
||||
/*!
|
||||
* Peppermint touch slider
|
||||
* v. 1.3.7 | https://github.com/wilddeer/Peppermint
|
||||
* Copyright Oleg Korsunsky | http://wd.dizaina.net/
|
||||
*
|
||||
* Depends on Event Burrito (included) | https://github.com/wilddeer/Event-Burrito
|
||||
* MIT License
|
||||
*/
|
||||
function Peppermint(_this, options) {
|
||||
var slider = {
|
||||
slides: [],
|
||||
dots: [],
|
||||
left: 0
|
||||
},
|
||||
slidesNumber,
|
||||
flickThreshold = 200, //Flick threshold (ms)
|
||||
activeSlide = 0,
|
||||
slideWidth,
|
||||
dotBlock,
|
||||
slideBlock,
|
||||
slideshowTimeoutId,
|
||||
slideshowActive,
|
||||
animationTimer;
|
||||
|
||||
//default options
|
||||
var o = {
|
||||
speed: 300, //transition between slides in ms
|
||||
touchSpeed: 300, //transition between slides in ms after touch
|
||||
slideshow: false, //launch slideshow at start
|
||||
slideshowInterval: 4000,
|
||||
stopSlideshowAfterInteraction: false, //stop slideshow after user interaction
|
||||
startSlide: 0, //first slide to show
|
||||
mouseDrag: true, //enable mouse drag
|
||||
disableIfOneSlide: true,
|
||||
cssPrefix: 'peppermint-',
|
||||
dots: false, //show dots
|
||||
dotsPrepend: false, //dots before slides
|
||||
dotsContainer: undefined,
|
||||
slidesContainer: undefined,
|
||||
onSlideChange: undefined, //slide change callback
|
||||
onSetup: undefined //setup callback
|
||||
};
|
||||
|
||||
//merge user options into defaults
|
||||
options && mergeObjects(o, options);
|
||||
|
||||
var classes = {
|
||||
inactive: o.cssPrefix + 'inactive',
|
||||
active: o.cssPrefix + 'active',
|
||||
mouse: o.cssPrefix + 'mouse',
|
||||
drag: o.cssPrefix + 'drag',
|
||||
slides: o.cssPrefix + 'slides',
|
||||
dots: o.cssPrefix + 'dots',
|
||||
activeDot: o.cssPrefix + 'active-dot',
|
||||
mouseClicked: o.cssPrefix + 'mouse-clicked'
|
||||
};
|
||||
|
||||
//feature detects
|
||||
var support = {
|
||||
transforms: testProp('transform'),
|
||||
transitions: testProp('transition')
|
||||
};
|
||||
|
||||
function mergeObjects(targetObj, sourceObject) {
|
||||
for (var key in sourceObject) {
|
||||
if (sourceObject.hasOwnProperty(key)) {
|
||||
targetObj[key] = sourceObject[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function testProp(prop) {
|
||||
var prefixes = ['Webkit', 'Moz', 'O', 'ms'],
|
||||
block = document.createElement('div');
|
||||
|
||||
if (block.style[prop] !== undefined) return true;
|
||||
|
||||
prop = prop.charAt(0).toUpperCase() + prop.slice(1);
|
||||
for (var i in prefixes) {
|
||||
if (block.style[prefixes[i]+prop] !== undefined) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function addClass(el, cl) {
|
||||
if (!new RegExp('(\\s|^)'+cl+'(\\s|$)').test(el.className)) {
|
||||
el.className += ' ' + cl;
|
||||
}
|
||||
}
|
||||
|
||||
function removeClass(el, cl) {
|
||||
el.className = el.className.replace(new RegExp('(\\s+|^)'+cl+'(\\s+|$)', 'g'), ' ').replace(/^\s+|\s+$/g, '');
|
||||
}
|
||||
|
||||
//n - slide number (starting from 0)
|
||||
//speed - transition in ms, can be omitted
|
||||
function changeActiveSlide(n, speed) {
|
||||
if (n<0) {
|
||||
n = 0;
|
||||
}
|
||||
else if (n>slidesNumber-1) {
|
||||
n = slidesNumber-1;
|
||||
}
|
||||
|
||||
//change active dot
|
||||
for (var i = slider.dots.length - 1; i >= 0; i--) {
|
||||
removeClass(slider.dots[i], classes.activeDot);
|
||||
}
|
||||
|
||||
addClass(slider.dots[n], classes.activeDot);
|
||||
|
||||
activeSlide = n;
|
||||
|
||||
changePos(-n*slider.width, (speed===undefined?o.speed:speed));
|
||||
|
||||
//reset slideshow timeout whenever active slide is changed for whatever reason
|
||||
stepSlideshow();
|
||||
|
||||
//API callback
|
||||
o.onSlideChange && o.onSlideChange(n);
|
||||
|
||||
return n;
|
||||
}
|
||||
|
||||
//changes position of the slider (in px) with given speed (in ms)
|
||||
function changePos(pos, speed) {
|
||||
var time = speed?speed+'ms':'';
|
||||
|
||||
slideBlock.style.webkitTransitionDuration =
|
||||
slideBlock.style.MozTransitionDuration =
|
||||
slideBlock.style.msTransitionDuration =
|
||||
slideBlock.style.OTransitionDuration =
|
||||
slideBlock.style.transitionDuration = time;
|
||||
|
||||
setPos(pos);
|
||||
}
|
||||
|
||||
//fallback to `setInterval` animations for UAs with no CSS transitions
|
||||
function changePosFallback(pos, speed) {
|
||||
animationTimer && clearInterval(animationTimer);
|
||||
|
||||
if (!speed) {
|
||||
setPos(pos);
|
||||
return;
|
||||
}
|
||||
|
||||
var startTime = +new Date,
|
||||
startPos = slider.left;
|
||||
|
||||
animationTimer = setInterval(function() {
|
||||
//rough bezier emulation
|
||||
var diff, y,
|
||||
elapsed = +new Date - startTime,
|
||||
f = elapsed / speed,
|
||||
bezier = [0, 0.7, 1, 1];
|
||||
|
||||
function getPoint(p1, p2) {
|
||||
return (p2-p1)*f + p1;
|
||||
}
|
||||
|
||||
if (f >= 1) {
|
||||
setPos(pos);
|
||||
clearInterval(animationTimer);
|
||||
return;
|
||||
}
|
||||
|
||||
diff = pos - startPos;
|
||||
|
||||
y = getPoint(
|
||||
getPoint(getPoint(bezier[0], bezier[1]), getPoint(bezier[1], bezier[2])),
|
||||
getPoint(getPoint(bezier[1], bezier[2]), getPoint(bezier[2], bezier[3]))
|
||||
);
|
||||
|
||||
setPos(Math.floor(y*diff + startPos));
|
||||
}, 15);
|
||||
}
|
||||
|
||||
//sets position of the slider (in px)
|
||||
function setPos(pos) {
|
||||
slideBlock.style.webkitTransform = 'translate('+pos+'px,0) translateZ(0)';
|
||||
slideBlock.style.msTransform =
|
||||
slideBlock.style.MozTransform =
|
||||
slideBlock.style.OTransform =
|
||||
slideBlock.style.transform = 'translateX('+pos+'px)';
|
||||
|
||||
slider.left = pos;
|
||||
}
|
||||
|
||||
//`setPos` fallback for UAs with no CSS transforms support
|
||||
function setPosFallback(pos) {
|
||||
slideBlock.style.left = pos+'px';
|
||||
|
||||
slider.left = pos;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
var n = activeSlide + 1;
|
||||
|
||||
if (n > slidesNumber - 1) {
|
||||
n = 0;
|
||||
}
|
||||
|
||||
return changeActiveSlide(n);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
var n = activeSlide - 1;
|
||||
|
||||
if (n < 0) {
|
||||
n = slidesNumber - 1;
|
||||
}
|
||||
|
||||
return changeActiveSlide(n);
|
||||
}
|
||||
|
||||
function startSlideshow() {
|
||||
slideshowActive = true;
|
||||
stepSlideshow();
|
||||
}
|
||||
|
||||
//sets or resets timeout before switching to the next slide
|
||||
function stepSlideshow() {
|
||||
if (slideshowActive) {
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
|
||||
slideshowTimeoutId = setTimeout(function() {
|
||||
nextSlide();
|
||||
},
|
||||
o.slideshowInterval);
|
||||
}
|
||||
}
|
||||
|
||||
//pauses slideshow until `stepSlideshow` is invoked
|
||||
function pauseSlideshow() {
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
}
|
||||
|
||||
function stopSlideshow() {
|
||||
slideshowActive = false;
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
}
|
||||
|
||||
//this should be invoked when the width of the slider is changed
|
||||
function onWidthChange() {
|
||||
slider.width = _this.offsetWidth;
|
||||
|
||||
//have to do this in `px` because of webkit's rounding errors :-(
|
||||
slideBlock.style.width = slider.width*slidesNumber+'px';
|
||||
for (var i = 0; i < slidesNumber; i++) {
|
||||
slider.slides[i].style.width = slider.width+'px';
|
||||
}
|
||||
changePos(-activeSlide*slider.width);
|
||||
}
|
||||
|
||||
function addEvent(el, event, func, bool) {
|
||||
if (!event) return;
|
||||
|
||||
el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
|
||||
}
|
||||
|
||||
//init touch events
|
||||
function touchInit() {
|
||||
EventBurrito(slideBlock, {
|
||||
mouse: o.mouseDrag,
|
||||
start: function(event, start) {
|
||||
//firefox doesn't want to apply cursor from `:active` CSS rule, have to add a class :-/
|
||||
addClass(_this, classes.drag);
|
||||
},
|
||||
move: function(event, start, diff, speed) {
|
||||
pauseSlideshow(); //pause the slideshow when touch is in progress
|
||||
|
||||
//if it's first slide and moving left or last slide and moving right -- resist!
|
||||
diff.x =
|
||||
diff.x /
|
||||
(
|
||||
(!activeSlide && diff.x > 0
|
||||
|| activeSlide == slidesNumber - 1 && diff.x < 0)
|
||||
?
|
||||
(Math.abs(diff.x)/slider.width*2 + 1)
|
||||
:
|
||||
1
|
||||
);
|
||||
|
||||
//change position of the slider appropriately
|
||||
changePos(diff.x - slider.width*activeSlide);
|
||||
},
|
||||
end: function(event, start, diff, speed) {
|
||||
if (diff.x) {
|
||||
var ratio = Math.abs(diff.x)/slider.width,
|
||||
//How many slides to skip. Remainder > 0.25 counts for one slide.
|
||||
skip = Math.floor(ratio) + (ratio - Math.floor(ratio) > 0.25?1:0),
|
||||
//Super-duper formula to detect a flick.
|
||||
//First, it's got to be fast enough.
|
||||
//Second, if `skip==0`, 20px move is enough to switch to the next slide.
|
||||
//If `skip>0`, it's enough to slide to the middle of the slide minus `slider.width/9` to skip even further.
|
||||
flick = diff.time < flickThreshold+flickThreshold*skip/1.8 && Math.abs(diff.x) - skip*slider.width > (skip?-slider.width/9:20);
|
||||
|
||||
skip += (flick?1:0);
|
||||
|
||||
if (diff.x < 0) {
|
||||
changeActiveSlide(activeSlide+skip, o.touchSpeed);
|
||||
}
|
||||
else {
|
||||
changeActiveSlide(activeSlide-skip, o.touchSpeed);
|
||||
}
|
||||
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
}
|
||||
|
||||
//remove the drag class
|
||||
removeClass(_this, classes.drag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setup() {
|
||||
var slideSource = o.slidesContainer || _this,
|
||||
dotsTarget = o.dotsContainer || _this;
|
||||
|
||||
if (o.disableIfOneSlide && slideSource.children.length <= 1) return;
|
||||
|
||||
//If current UA doesn't support css transforms or transitions -- use fallback functions.
|
||||
//(Using separate functions instead of checks for better performance)
|
||||
if (!support.transforms || !!window.opera) setPos = setPosFallback;
|
||||
if (!support.transitions || !!window.opera) changePos = changePosFallback;
|
||||
|
||||
slideBlock = o.slidesContainer || document.createElement('div');
|
||||
addClass(slideBlock, classes.slides);
|
||||
|
||||
//get slides & generate dots
|
||||
for (var i = 0, l = slideSource.children.length; i < l; i++) {
|
||||
var slide = slideSource.children[i],
|
||||
dot = document.createElement('li');
|
||||
|
||||
slider.slides.push(slide);
|
||||
|
||||
//`tabindex` makes dots tabbable
|
||||
dot.setAttribute('tabindex', '0');
|
||||
dot.setAttribute('role', 'button');
|
||||
|
||||
dot.innerHTML = '<span></span>';
|
||||
|
||||
(function(x, dotClosure) {
|
||||
//bind events to dots
|
||||
addEvent(dotClosure, 'click', function(event) {
|
||||
changeActiveSlide(x);
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
});
|
||||
|
||||
//Bind the same function to Enter key except for the `blur` part -- I dont't want
|
||||
//the focus to be lost when the user is using his keyboard to navigate.
|
||||
addEvent(dotClosure, 'keyup', function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
changeActiveSlide(x);
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
}
|
||||
});
|
||||
|
||||
//Don't want to disable outlines completely for accessibility reasons.
|
||||
//Instead, add class with `outline: 0` on mouseup and remove it on blur.
|
||||
addEvent(dotClosure, 'mouseup', function(event) {
|
||||
addClass(dotClosure, classes.mouseClicked);
|
||||
});
|
||||
|
||||
//capturing fixes IE bug
|
||||
addEvent(dotClosure, 'blur', function(){
|
||||
removeClass(dotClosure, classes.mouseClicked);
|
||||
}, true);
|
||||
|
||||
//This solves tabbing problems:
|
||||
//When an element inside a slide catches focus we switch to that slide
|
||||
//and reset `scrollLeft` of the slider block.
|
||||
//`SetTimeout` solves Chrome's bug.
|
||||
//Event capturing is used to catch events on the slide level.
|
||||
//Since older IEs don't have capturing, `onfocusin` is used as a fallback.
|
||||
addEvent(slide, 'focus', slide.onfocusin = function(e) {
|
||||
_this.scrollLeft = 0;
|
||||
setTimeout(function() {
|
||||
_this.scrollLeft = 0;
|
||||
}, 0);
|
||||
changeActiveSlide(x);
|
||||
}, true);
|
||||
})(i, dot)
|
||||
|
||||
slider.dots.push(dot);
|
||||
}
|
||||
|
||||
slidesNumber = slider.slides.length;
|
||||
|
||||
slideWidth = 100/slidesNumber;
|
||||
|
||||
addClass(_this, classes.active);
|
||||
removeClass(_this, classes.inactive);
|
||||
o.mouseDrag && addClass(_this, classes.mouse);
|
||||
|
||||
slider.width = _this.offsetWidth;
|
||||
|
||||
//had to do this in `px` because of webkit's rounding errors :-(
|
||||
slideBlock.style.width = slider.width*slidesNumber+'px';
|
||||
for (var i = 0; i < slidesNumber; i++) {
|
||||
slider.slides[i].style.width = slider.width+'px';
|
||||
slideBlock.appendChild(slider.slides[i]);
|
||||
}
|
||||
|
||||
if (!o.slidesContainer) _this.appendChild(slideBlock);
|
||||
|
||||
//append dots
|
||||
if (o.dots && slidesNumber > 1) {
|
||||
dotBlock = document.createElement('ul');
|
||||
addClass(dotBlock, classes.dots);
|
||||
|
||||
for (var i = 0, l = slider.dots.length; i < l; i++) {
|
||||
dotBlock.appendChild(slider.dots[i]);
|
||||
}
|
||||
|
||||
if (o.dotsPrepend) {
|
||||
dotsTarget.insertBefore(dotBlock,dotsTarget.firstChild);
|
||||
}
|
||||
else {
|
||||
dotsTarget.appendChild(dotBlock);
|
||||
}
|
||||
}
|
||||
|
||||
//watch for slider width changes
|
||||
addEvent(window, 'resize', onWidthChange);
|
||||
addEvent(window, 'orientationchange', onWidthChange);
|
||||
|
||||
//init first slide, timeout to expose the API first
|
||||
setTimeout(function() {
|
||||
changeActiveSlide(o.startSlide, 0);
|
||||
}, 0);
|
||||
|
||||
//init slideshow
|
||||
if (o.slideshow) startSlideshow();
|
||||
|
||||
touchInit();
|
||||
|
||||
//API callback, timeout to expose the API first
|
||||
setTimeout(function() {
|
||||
o.onSetup && o.onSetup(slidesNumber);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
//Init
|
||||
setup();
|
||||
|
||||
//expose the API
|
||||
return {
|
||||
slideTo: function(slide) {
|
||||
return changeActiveSlide(parseInt(slide, 10));
|
||||
},
|
||||
|
||||
next: nextSlide,
|
||||
|
||||
prev: prevSlide,
|
||||
|
||||
//start slideshow
|
||||
start: startSlideshow,
|
||||
|
||||
//stop slideshow
|
||||
stop: stopSlideshow,
|
||||
|
||||
//pause slideshow until the next slide change
|
||||
pause: pauseSlideshow,
|
||||
|
||||
//get current slide number
|
||||
getCurrentPos: function() {
|
||||
return activeSlide;
|
||||
},
|
||||
|
||||
//get total number of slides
|
||||
getSlidesNumber: function() {
|
||||
return slidesNumber;
|
||||
},
|
||||
|
||||
//invoke this when the slider's width is changed
|
||||
recalcWidth: onWidthChange
|
||||
};
|
||||
};
|
||||
|
||||
//if jQuery is present -- create a plugin
|
||||
if (window.jQuery) {
|
||||
(function($) {
|
||||
$.fn.Peppermint = function(options) {
|
||||
this.each(function() {
|
||||
$(this).data('Peppermint', Peppermint(this, options));
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
})(window.jQuery);
|
||||
}
|
||||
|
||||
/*!
|
||||
* Event Burrito is a touch / mouse / pointer event unifier
|
||||
* https://github.com/wilddeer/Event-Burrito
|
||||
* Copyright Oleg Korsunsky | http://wd.dizaina.net/
|
||||
*
|
||||
* MIT License
|
||||
*/
|
||||
function EventBurrito(_this, options) {
|
||||
|
||||
var noop = function() {},
|
||||
o = {
|
||||
preventDefault: true,
|
||||
clickTolerance: 0,
|
||||
preventScroll: false,
|
||||
mouse: true,
|
||||
start: noop,
|
||||
move: noop,
|
||||
end: noop,
|
||||
click: noop
|
||||
};
|
||||
|
||||
//merge user options into defaults
|
||||
options && mergeObjects(o, options);
|
||||
|
||||
var support = {
|
||||
pointerEvents: !!window.navigator.pointerEnabled,
|
||||
msPointerEvents: !!window.navigator.msPointerEnabled
|
||||
},
|
||||
start = {},
|
||||
diff = {},
|
||||
speed = {},
|
||||
stack = [],
|
||||
listeners = [],
|
||||
isScrolling,
|
||||
eventType,
|
||||
clicksAllowed = true, //flag allowing default click actions (e.g. links)
|
||||
eventModel = (support.pointerEvents? 1 : (support.msPointerEvents? 2 : 0)),
|
||||
events = [
|
||||
['touchstart', 'touchmove', 'touchend', 'touchcancel'], //touch events
|
||||
['pointerdown', 'pointermove', 'pointerup', 'pointercancel'], //pointer events
|
||||
['MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel'], //IE10 pointer events
|
||||
['mousedown', 'mousemove', 'mouseup', false] //mouse events
|
||||
],
|
||||
//some checks for different event types
|
||||
checks = [
|
||||
//touch events
|
||||
function(e) {
|
||||
//skip the event if it's multitouch or pinch move
|
||||
return (e.touches && e.touches.length > 1) || (e.scale && e.scale !== 1);
|
||||
},
|
||||
//pointer events
|
||||
function(e) {
|
||||
//Skip it, if:
|
||||
//1. event is not primary (other pointers during multitouch),
|
||||
//2. left mouse button is not pressed,
|
||||
//3. mouse drag is disabled and event is not touch
|
||||
return !e.isPrimary || (e.buttons && e.buttons !== 1) || (!o.mouse && e.pointerType !== 'touch' && e.pointerType !== 'pen');
|
||||
},
|
||||
//IE10 pointer events
|
||||
function(e) {
|
||||
//same checks as in pointer events
|
||||
return !e.isPrimary || (e.buttons && e.buttons !== 1) || (!o.mouse && e.pointerType !== e.MSPOINTER_TYPE_TOUCH && e.pointerType !== e.MSPOINTER_TYPE_PEN);
|
||||
},
|
||||
//mouse events
|
||||
function(e) {
|
||||
//skip the event if left mouse button is not pressed
|
||||
//in IE7-8 `buttons` is not defined, in IE9 LMB is 0
|
||||
return (e.buttons && e.buttons !== 1);
|
||||
}
|
||||
];
|
||||
|
||||
function mergeObjects(targetObj, sourceObject) {
|
||||
for (var key in sourceObject) {
|
||||
if (sourceObject.hasOwnProperty(key)) {
|
||||
targetObj[key] = sourceObject[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addEvent(el, event, func, bool) {
|
||||
if (!event) return;
|
||||
|
||||
el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
|
||||
|
||||
//return event remover to easily remove anonymous functions later
|
||||
return {
|
||||
remove: function() {
|
||||
removeEvent(el, event, func, bool);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function removeEvent(el, event, func, bool) {
|
||||
if (!event) return;
|
||||
|
||||
el.removeEventListener? el.removeEventListener(event, func, !!bool): el.detachEvent('on'+event, func);
|
||||
}
|
||||
|
||||
function preventDefault(event) {
|
||||
event.preventDefault? event.preventDefault() : event.returnValue = false;
|
||||
}
|
||||
|
||||
function getDiff(event) {
|
||||
diff = {
|
||||
x: (eventType? event.clientX : event.touches[0].clientX) - start.x,
|
||||
y: (eventType? event.clientY : event.touches[0].clientY) - start.y,
|
||||
|
||||
time: Number(new Date) - start.time
|
||||
};
|
||||
|
||||
if (diff.time - stack[stack.length - 1].time) {
|
||||
for (var i = 0; i < stack.length - 1 && diff.time - stack[i].time > 80; i++);
|
||||
|
||||
speed = {
|
||||
x: (diff.x - stack[i].x) / (diff.time - stack[i].time),
|
||||
y: (diff.y - stack[i].y) / (diff.time - stack[i].time)
|
||||
};
|
||||
|
||||
if (stack.length >= 5) stack.shift();
|
||||
stack.push({x: diff.x, y: diff.y, time: diff.time});
|
||||
}
|
||||
}
|
||||
|
||||
function tStart(event, eType) {
|
||||
clicksAllowed = true;
|
||||
eventType = eType; //leak event type
|
||||
|
||||
if (checks[eventType](event)) return;
|
||||
|
||||
//attach event listeners to the document, so that the slider
|
||||
//will continue to recieve events wherever the pointer is
|
||||
addEvent(document, events[eventType][1], tMove);
|
||||
addEvent(document, events[eventType][2], tEnd);
|
||||
addEvent(document, events[eventType][3], tEnd);
|
||||
|
||||
//fixes WebKit's cursor while dragging
|
||||
if (o.preventDefault && eventType) preventDefault(event);
|
||||
|
||||
//remember starting time and position
|
||||
start = {
|
||||
x: eventType? event.clientX : event.touches[0].clientX,
|
||||
y: eventType? event.clientY : event.touches[0].clientY,
|
||||
|
||||
time: Number(new Date)
|
||||
};
|
||||
|
||||
//reset
|
||||
isScrolling = undefined;
|
||||
diff = {x:0, y:0, time: 0};
|
||||
speed = {x:0, y:0};
|
||||
stack = [{x:0, y:0, time: 0}];
|
||||
|
||||
o.start(event, start);
|
||||
}
|
||||
|
||||
function tMove(event) {
|
||||
//if user is trying to scroll vertically -- do nothing
|
||||
if ((!o.preventScroll && isScrolling) || checks[eventType](event)) return;
|
||||
|
||||
getDiff(event);
|
||||
|
||||
if (Math.abs(diff.x) > o.clickTolerance || Math.abs(diff.y) > o.clickTolerance) clicksAllowed = false; //if there was a move -- deny all the clicks before the next touchstart
|
||||
|
||||
//check whether the user is trying to scroll vertically
|
||||
if (isScrolling === undefined && eventType !== 3) {
|
||||
//assign and check `isScrolling` at the same time
|
||||
if (isScrolling = (Math.abs(diff.x) < Math.abs(diff.y)) && !o.preventScroll) return;
|
||||
}
|
||||
|
||||
if (o.preventDefault) preventDefault(event); //Prevent scrolling
|
||||
|
||||
o.move(event, start, diff, speed);
|
||||
}
|
||||
|
||||
function tEnd(event) {
|
||||
eventType && getDiff(event);
|
||||
|
||||
//IE likes to focus links after touchend.
|
||||
//Since we don't want to disable link outlines completely for accessibility reasons,
|
||||
//we just defocus it after touch and disable the outline for `:active` links in css.
|
||||
//This way the outline will remain visible when using keyboard.
|
||||
!clicksAllowed && event.target && event.target.blur && event.target.blur();
|
||||
|
||||
//detach event listeners from the document
|
||||
removeEvent(document, events[eventType][1], tMove);
|
||||
removeEvent(document, events[eventType][2], tEnd);
|
||||
removeEvent(document, events[eventType][3], tEnd);
|
||||
|
||||
o.end(event, start, diff, speed);
|
||||
}
|
||||
|
||||
function init() {
|
||||
//bind touchstart
|
||||
listeners.push(addEvent(_this, events[eventModel][0], function(e) {tStart(e, eventModel);}));
|
||||
//prevent stuff from dragging when using mouse
|
||||
listeners.push(addEvent(_this, 'dragstart', preventDefault));
|
||||
|
||||
//bind mousedown if necessary
|
||||
if (o.mouse && !eventModel) {
|
||||
listeners.push(addEvent(_this, events[3][0], function(e) {tStart(e, 3);}));
|
||||
}
|
||||
|
||||
//No clicking during touch
|
||||
listeners.push(addEvent(_this, 'click', function(event) {
|
||||
clicksAllowed? o.click(event): preventDefault(event);
|
||||
}));
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
//expose the API
|
||||
return {
|
||||
getClicksAllowed: function() {
|
||||
return clicksAllowed;
|
||||
},
|
||||
kill: function() {
|
||||
for (var i = listeners.length - 1; i >= 0; i--) {
|
||||
listeners[i].remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/*!
|
||||
* Peppermint touch slider
|
||||
* v. 1.3.7 | https://github.com/wilddeer/Peppermint
|
||||
* Copyright Oleg Korsunsky | http://wd.dizaina.net/
|
||||
*
|
||||
* Depends on Event Burrito (included) | https://github.com/wilddeer/Event-Burrito
|
||||
* MIT License
|
||||
*/
|
||||
function Peppermint(a,b){function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function d(a){var b=["Webkit","Moz","O","ms"],c=document.createElement("div");if(void 0!==c.style[a])return!0;a=a.charAt(0).toUpperCase()+a.slice(1);for(var d in b)if(void 0!==c.style[b[d]+a])return!0;return!1}function e(a,b){new RegExp("(\\s|^)"+b+"(\\s|$)").test(a.className)||(a.className+=" "+b)}function f(a,b){a.className=a.className.replace(new RegExp("(\\s+|^)"+b+"(\\s+|$)","g")," ").replace(/^\s+|\s+$/g,"")}function g(a,b){0>a?a=0:a>v-1&&(a=v-1);for(var c=C.dots.length-1;c>=0;c--)f(C.dots[c],G.activeDot);return e(C.dots[a],G.activeDot),E=a,h(-a*C.width,void 0===b?F.speed:b),o(),F.onSlideChange&&F.onSlideChange(a),a}function h(a,b){var c=b?b+"ms":"";y.style.webkitTransitionDuration=y.style.MozTransitionDuration=y.style.msTransitionDuration=y.style.OTransitionDuration=y.style.transitionDuration=c,j(a)}function i(a,b){if(B&&clearInterval(B),!b)return void j(a);var c=+new Date,d=C.left;B=setInterval(function(){function e(a,b){return(b-a)*i+a}var f,g,h=+new Date-c,i=h/b,k=[0,.7,1,1];return i>=1?(j(a),void clearInterval(B)):(f=a-d,g=e(e(e(k[0],k[1]),e(k[1],k[2])),e(e(k[1],k[2]),e(k[2],k[3]))),void j(Math.floor(g*f+d)))},15)}function j(a){y.style.webkitTransform="translate("+a+"px,0) translateZ(0)",y.style.msTransform=y.style.MozTransform=y.style.OTransform=y.style.transform="translateX("+a+"px)",C.left=a}function k(a){y.style.left=a+"px",C.left=a}function l(){var a=E+1;return a>v-1&&(a=0),g(a)}function m(){var a=E-1;return 0>a&&(a=v-1),g(a)}function n(){A=!0,o()}function o(){A&&(z&&clearTimeout(z),z=setTimeout(function(){l()},F.slideshowInterval))}function p(){z&&clearTimeout(z)}function q(){A=!1,z&&clearTimeout(z)}function r(){C.width=a.offsetWidth,y.style.width=C.width*v+"px";for(var b=0;v>b;b++)C.slides[b].style.width=C.width+"px";h(-E*C.width)}function s(a,b,c,d){b&&(a.addEventListener?a.addEventListener(b,c,!!d):a.attachEvent("on"+b,c))}function t(){EventBurrito(y,{mouse:F.mouseDrag,start:function(){e(a,G.drag)},move:function(a,b,c){p(),c.x=c.x/(!E&&c.x>0||E==v-1&&c.x<0?Math.abs(c.x)/C.width*2+1:1),h(c.x-C.width*E)},end:function(b,c,d){if(d.x){var e=Math.abs(d.x)/C.width,h=Math.floor(e)+(e-Math.floor(e)>.25?1:0),i=d.time<D+D*h/1.8&&Math.abs(d.x)-h*C.width>(h?-C.width/9:20);h+=i?1:0,d.x<0?g(E+h,F.touchSpeed):g(E-h,F.touchSpeed),F.stopSlideshowAfterInteraction&&q()}f(a,G.drag)}})}function u(){var b=F.slidesContainer||a,c=F.dotsContainer||a;if(!(F.disableIfOneSlide&&b.children.length<=1)){(!H.transforms||window.opera)&&(j=k),(!H.transitions||window.opera)&&(h=i),y=F.slidesContainer||document.createElement("div"),e(y,G.slides);for(var d=0,l=b.children.length;l>d;d++){var m=b.children[d],o=document.createElement("li");C.slides.push(m),o.setAttribute("tabindex","0"),o.setAttribute("role","button"),o.innerHTML="<span></span>",function(b,c){s(c,"click",function(){g(b),F.stopSlideshowAfterInteraction&&q()}),s(c,"keyup",function(a){13==a.keyCode&&(g(b),F.stopSlideshowAfterInteraction&&q())}),s(c,"mouseup",function(){e(c,G.mouseClicked)}),s(c,"blur",function(){f(c,G.mouseClicked)},!0),s(m,"focus",m.onfocusin=function(){a.scrollLeft=0,setTimeout(function(){a.scrollLeft=0},0),g(b)},!0)}(d,o),C.dots.push(o)}v=C.slides.length,w=100/v,e(a,G.active),f(a,G.inactive),F.mouseDrag&&e(a,G.mouse),C.width=a.offsetWidth,y.style.width=C.width*v+"px";for(var d=0;v>d;d++)C.slides[d].style.width=C.width+"px",y.appendChild(C.slides[d]);if(F.slidesContainer||a.appendChild(y),F.dots&&v>1){x=document.createElement("ul"),e(x,G.dots);for(var d=0,l=C.dots.length;l>d;d++)x.appendChild(C.dots[d]);F.dotsPrepend?c.insertBefore(x,c.firstChild):c.appendChild(x)}s(window,"resize",r),s(window,"orientationchange",r),setTimeout(function(){g(F.startSlide,0)},0),F.slideshow&&n(),t(),setTimeout(function(){F.onSetup&&F.onSetup(v)},0)}}var v,w,x,y,z,A,B,C={slides:[],dots:[],left:0},D=200,E=0,F={speed:300,touchSpeed:300,slideshow:!1,slideshowInterval:4e3,stopSlideshowAfterInteraction:!1,startSlide:0,mouseDrag:!0,disableIfOneSlide:!0,cssPrefix:"peppermint-",dots:!1,dotsPrepend:!1,dotsContainer:void 0,slidesContainer:void 0,onSlideChange:void 0,onSetup:void 0};b&&c(F,b);var G={inactive:F.cssPrefix+"inactive",active:F.cssPrefix+"active",mouse:F.cssPrefix+"mouse",drag:F.cssPrefix+"drag",slides:F.cssPrefix+"slides",dots:F.cssPrefix+"dots",activeDot:F.cssPrefix+"active-dot",mouseClicked:F.cssPrefix+"mouse-clicked"},H={transforms:d("transform"),transitions:d("transition")};return u(),{slideTo:function(a){return g(parseInt(a,10))},next:l,prev:m,start:n,stop:q,pause:p,getCurrentPos:function(){return E},getSlidesNumber:function(){return v},recalcWidth:r}}window.jQuery&&!function($){$.fn.Peppermint=function(a){return this.each(function(){$(this).data("Peppermint",Peppermint(this,a))}),this}}(window.jQuery);
|
||||
function EventBurrito(a,b){function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function d(a,b,c,d){return b?(a.addEventListener?a.addEventListener(b,c,!!d):a.attachEvent("on"+b,c),{remove:function(){e(a,b,c,d)}}):void 0}function e(a,b,c,d){b&&(a.removeEventListener?a.removeEventListener(b,c,!!d):a.detachEvent("on"+b,c))}function f(a){a.preventDefault?a.preventDefault():a.returnValue=!1}function g(a){if(r={x:(o?a.clientX:a.touches[0].clientX)-q.x,y:(o?a.clientY:a.touches[0].clientY)-q.y,time:Number(new Date)-q.time},r.time-t[t.length-1].time){for(var b=0;b<t.length-1&&r.time-t[b].time>80;b++);s={x:(r.x-t[b].x)/(r.time-t[b].time),y:(r.y-t[b].y)/(r.time-t[b].time)},t.length>=5&&t.shift(),t.push({x:r.x,y:r.y,time:r.time})}}function h(a,b){v=!0,o=b,y[o](a)||(d(document,x[o][1],i),d(document,x[o][2],j),d(document,x[o][3],j),m.preventDefault&&o&&f(a),q={x:o?a.clientX:a.touches[0].clientX,y:o?a.clientY:a.touches[0].clientY,time:Number(new Date)},n=void 0,r={x:0,y:0,time:0},s={x:0,y:0},t=[{x:0,y:0,time:0}],m.start(a,q))}function i(a){!m.preventScroll&&n||y[o](a)||(g(a),(Math.abs(r.x)>m.clickTolerance||Math.abs(r.y)>m.clickTolerance)&&(v=!1),void 0===n&&3!==o&&(n=Math.abs(r.x)<Math.abs(r.y)&&!m.preventScroll)||(m.preventDefault&&f(a),m.move(a,q,r,s)))}function j(a){o&&g(a),!v&&a.target&&a.target.blur&&a.target.blur(),e(document,x[o][1],i),e(document,x[o][2],j),e(document,x[o][3],j),m.end(a,q,r,s)}function k(){u.push(d(a,x[w][0],function(a){h(a,w)})),u.push(d(a,"dragstart",f)),m.mouse&&!w&&u.push(d(a,x[3][0],function(a){h(a,3)})),u.push(d(a,"click",function(a){v?m.click(a):f(a)}))}var l=function(){},m={preventDefault:!0,clickTolerance:0,preventScroll:!1,mouse:!0,start:l,move:l,end:l,click:l};b&&c(m,b);var n,o,p={pointerEvents:!!window.navigator.pointerEnabled,msPointerEvents:!!window.navigator.msPointerEnabled},q={},r={},s={},t=[],u=[],v=!0,w=p.pointerEvents?1:p.msPointerEvents?2:0,x=[["touchstart","touchmove","touchend","touchcancel"],["pointerdown","pointermove","pointerup","pointercancel"],["MSPointerDown","MSPointerMove","MSPointerUp","MSPointerCancel"],["mousedown","mousemove","mouseup",!1]],y=[function(a){return a.touches&&a.touches.length>1||a.scale&&1!==a.scale},function(a){return!a.isPrimary||a.buttons&&1!==a.buttons||!m.mouse&&"touch"!==a.pointerType&&"pen"!==a.pointerType},function(a){return!a.isPrimary||a.buttons&&1!==a.buttons||!m.mouse&&a.pointerType!==a.MSPOINTER_TYPE_TOUCH&&a.pointerType!==a.MSPOINTER_TYPE_PEN},function(a){return a.buttons&&1!==a.buttons}];return k(),{getClicksAllowed:function(){return v},kill:function(){for(var a=u.length-1;a>=0;a--)u[a].remove()}}}
|
||||
+62
@@ -0,0 +1,62 @@
|
||||
/* Peppermint minimal required styles */
|
||||
|
||||
.peppermint.peppermint-active {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides {
|
||||
position: relative;
|
||||
overflow: hidden; /* clearfix */
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides > * {
|
||||
float: left;
|
||||
margin: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides a:active,
|
||||
.peppermint.peppermint-active .peppermint-slides a:active img {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active,
|
||||
.peppermint.peppermint-active .peppermint-dots,
|
||||
.peppermint.peppermint-active .peppermint-slides,
|
||||
.peppermint.peppermint-active .peppermint-slides > * {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-mouse .peppermint-slides {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
/* Peppermint required styles + default appearance styles */
|
||||
|
||||
.peppermint.peppermint-active {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides {
|
||||
position: relative;
|
||||
overflow: hidden; /* clearfix */
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides > * {
|
||||
float: left;
|
||||
margin: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides a:active,
|
||||
.peppermint.peppermint-active .peppermint-slides a:active img {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active,
|
||||
.peppermint.peppermint-active .peppermint-dots,
|
||||
.peppermint.peppermint-active .peppermint-slides,
|
||||
.peppermint.peppermint-active .peppermint-slides > * {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-mouse .peppermint-slides {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* default appearance styles */
|
||||
.peppermint {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.peppermint figure {
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
.peppermint figure img {
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.peppermint figure figcaption {
|
||||
font-style: italic;
|
||||
color: #787575;
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.peppermint-slides {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* dots */
|
||||
ul.peppermint-dots {
|
||||
margin: 0.6em 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active ul.peppermint-dots {
|
||||
margin: 0 0 0.6em 0;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides + ul.peppermint-dots {
|
||||
margin: 0.6em 0 0 0;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0.5em 0.6em;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* ie7 fallback */
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li.peppermint-mouse-clicked,
|
||||
ul.peppermint-dots > li:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li > span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -4px 0 0 -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #9b9890;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li.peppermint-active-dot > span {
|
||||
margin: -6px 0 0 -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #9b9890;
|
||||
background: transparent;
|
||||
}
|
||||
+493
@@ -0,0 +1,493 @@
|
||||
/*!
|
||||
* Peppermint touch slider
|
||||
* v. 1.3.7 | https://github.com/wilddeer/Peppermint
|
||||
* Copyright Oleg Korsunsky | http://wd.dizaina.net/
|
||||
*
|
||||
* Depends on Event Burrito | https://github.com/wilddeer/Event-Burrito
|
||||
* MIT License
|
||||
*/
|
||||
function Peppermint(_this, options) {
|
||||
var slider = {
|
||||
slides: [],
|
||||
dots: [],
|
||||
left: 0
|
||||
},
|
||||
slidesNumber,
|
||||
flickThreshold = 200, //Flick threshold (ms)
|
||||
activeSlide = 0,
|
||||
slideWidth,
|
||||
dotBlock,
|
||||
slideBlock,
|
||||
slideshowTimeoutId,
|
||||
slideshowActive,
|
||||
animationTimer;
|
||||
|
||||
//default options
|
||||
var o = {
|
||||
speed: 300, //transition between slides in ms
|
||||
touchSpeed: 300, //transition between slides in ms after touch
|
||||
slideshow: false, //launch slideshow at start
|
||||
slideshowInterval: 4000,
|
||||
stopSlideshowAfterInteraction: false, //stop slideshow after user interaction
|
||||
startSlide: 0, //first slide to show
|
||||
mouseDrag: true, //enable mouse drag
|
||||
disableIfOneSlide: true,
|
||||
cssPrefix: 'peppermint-',
|
||||
dots: false, //show dots
|
||||
dotsPrepend: false, //dots before slides
|
||||
dotsContainer: undefined,
|
||||
slidesContainer: undefined,
|
||||
onSlideChange: undefined, //slide change callback
|
||||
onSetup: undefined //setup callback
|
||||
};
|
||||
|
||||
//merge user options into defaults
|
||||
options && mergeObjects(o, options);
|
||||
|
||||
var classes = {
|
||||
inactive: o.cssPrefix + 'inactive',
|
||||
active: o.cssPrefix + 'active',
|
||||
mouse: o.cssPrefix + 'mouse',
|
||||
drag: o.cssPrefix + 'drag',
|
||||
slides: o.cssPrefix + 'slides',
|
||||
dots: o.cssPrefix + 'dots',
|
||||
activeDot: o.cssPrefix + 'active-dot',
|
||||
mouseClicked: o.cssPrefix + 'mouse-clicked'
|
||||
};
|
||||
|
||||
//feature detects
|
||||
var support = {
|
||||
transforms: testProp('transform'),
|
||||
transitions: testProp('transition')
|
||||
};
|
||||
|
||||
function mergeObjects(targetObj, sourceObject) {
|
||||
for (var key in sourceObject) {
|
||||
if (sourceObject.hasOwnProperty(key)) {
|
||||
targetObj[key] = sourceObject[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function testProp(prop) {
|
||||
var prefixes = ['Webkit', 'Moz', 'O', 'ms'],
|
||||
block = document.createElement('div');
|
||||
|
||||
if (block.style[prop] !== undefined) return true;
|
||||
|
||||
prop = prop.charAt(0).toUpperCase() + prop.slice(1);
|
||||
for (var i in prefixes) {
|
||||
if (block.style[prefixes[i]+prop] !== undefined) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function addClass(el, cl) {
|
||||
if (!new RegExp('(\\s|^)'+cl+'(\\s|$)').test(el.className)) {
|
||||
el.className += ' ' + cl;
|
||||
}
|
||||
}
|
||||
|
||||
function removeClass(el, cl) {
|
||||
el.className = el.className.replace(new RegExp('(\\s+|^)'+cl+'(\\s+|$)', 'g'), ' ').replace(/^\s+|\s+$/g, '');
|
||||
}
|
||||
|
||||
//n - slide number (starting from 0)
|
||||
//speed - transition in ms, can be omitted
|
||||
function changeActiveSlide(n, speed) {
|
||||
if (n<0) {
|
||||
n = 0;
|
||||
}
|
||||
else if (n>slidesNumber-1) {
|
||||
n = slidesNumber-1;
|
||||
}
|
||||
|
||||
//change active dot
|
||||
for (var i = slider.dots.length - 1; i >= 0; i--) {
|
||||
removeClass(slider.dots[i], classes.activeDot);
|
||||
}
|
||||
|
||||
addClass(slider.dots[n], classes.activeDot);
|
||||
|
||||
activeSlide = n;
|
||||
|
||||
changePos(-n*slider.width, (speed===undefined?o.speed:speed));
|
||||
|
||||
//reset slideshow timeout whenever active slide is changed for whatever reason
|
||||
stepSlideshow();
|
||||
|
||||
//API callback
|
||||
o.onSlideChange && o.onSlideChange(n);
|
||||
|
||||
return n;
|
||||
}
|
||||
|
||||
//changes position of the slider (in px) with given speed (in ms)
|
||||
function changePos(pos, speed) {
|
||||
var time = speed?speed+'ms':'';
|
||||
|
||||
slideBlock.style.webkitTransitionDuration =
|
||||
slideBlock.style.MozTransitionDuration =
|
||||
slideBlock.style.msTransitionDuration =
|
||||
slideBlock.style.OTransitionDuration =
|
||||
slideBlock.style.transitionDuration = time;
|
||||
|
||||
setPos(pos);
|
||||
}
|
||||
|
||||
//fallback to `setInterval` animations for UAs with no CSS transitions
|
||||
function changePosFallback(pos, speed) {
|
||||
animationTimer && clearInterval(animationTimer);
|
||||
|
||||
if (!speed) {
|
||||
setPos(pos);
|
||||
return;
|
||||
}
|
||||
|
||||
var startTime = +new Date,
|
||||
startPos = slider.left;
|
||||
|
||||
animationTimer = setInterval(function() {
|
||||
//rough bezier emulation
|
||||
var diff, y,
|
||||
elapsed = +new Date - startTime,
|
||||
f = elapsed / speed,
|
||||
bezier = [0, 0.7, 1, 1];
|
||||
|
||||
function getPoint(p1, p2) {
|
||||
return (p2-p1)*f + p1;
|
||||
}
|
||||
|
||||
if (f >= 1) {
|
||||
setPos(pos);
|
||||
clearInterval(animationTimer);
|
||||
return;
|
||||
}
|
||||
|
||||
diff = pos - startPos;
|
||||
|
||||
y = getPoint(
|
||||
getPoint(getPoint(bezier[0], bezier[1]), getPoint(bezier[1], bezier[2])),
|
||||
getPoint(getPoint(bezier[1], bezier[2]), getPoint(bezier[2], bezier[3]))
|
||||
);
|
||||
|
||||
setPos(Math.floor(y*diff + startPos));
|
||||
}, 15);
|
||||
}
|
||||
|
||||
//sets position of the slider (in px)
|
||||
function setPos(pos) {
|
||||
slideBlock.style.webkitTransform = 'translate('+pos+'px,0) translateZ(0)';
|
||||
slideBlock.style.msTransform =
|
||||
slideBlock.style.MozTransform =
|
||||
slideBlock.style.OTransform =
|
||||
slideBlock.style.transform = 'translateX('+pos+'px)';
|
||||
|
||||
slider.left = pos;
|
||||
}
|
||||
|
||||
//`setPos` fallback for UAs with no CSS transforms support
|
||||
function setPosFallback(pos) {
|
||||
slideBlock.style.left = pos+'px';
|
||||
|
||||
slider.left = pos;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
var n = activeSlide + 1;
|
||||
|
||||
if (n > slidesNumber - 1) {
|
||||
n = 0;
|
||||
}
|
||||
|
||||
return changeActiveSlide(n);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
var n = activeSlide - 1;
|
||||
|
||||
if (n < 0) {
|
||||
n = slidesNumber - 1;
|
||||
}
|
||||
|
||||
return changeActiveSlide(n);
|
||||
}
|
||||
|
||||
function startSlideshow() {
|
||||
slideshowActive = true;
|
||||
stepSlideshow();
|
||||
}
|
||||
|
||||
//sets or resets timeout before switching to the next slide
|
||||
function stepSlideshow() {
|
||||
if (slideshowActive) {
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
|
||||
slideshowTimeoutId = setTimeout(function() {
|
||||
nextSlide();
|
||||
},
|
||||
o.slideshowInterval);
|
||||
}
|
||||
}
|
||||
|
||||
//pauses slideshow until `stepSlideshow` is invoked
|
||||
function pauseSlideshow() {
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
}
|
||||
|
||||
function stopSlideshow() {
|
||||
slideshowActive = false;
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
}
|
||||
|
||||
//this should be invoked when the width of the slider is changed
|
||||
function onWidthChange() {
|
||||
slider.width = _this.offsetWidth;
|
||||
|
||||
//have to do this in `px` because of webkit's rounding errors :-(
|
||||
slideBlock.style.width = slider.width*slidesNumber+'px';
|
||||
for (var i = 0; i < slidesNumber; i++) {
|
||||
slider.slides[i].style.width = slider.width+'px';
|
||||
}
|
||||
changePos(-activeSlide*slider.width);
|
||||
}
|
||||
|
||||
function addEvent(el, event, func, bool) {
|
||||
if (!event) return;
|
||||
|
||||
el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
|
||||
}
|
||||
|
||||
//init touch events
|
||||
function touchInit() {
|
||||
EventBurrito(slideBlock, {
|
||||
mouse: o.mouseDrag,
|
||||
start: function(event, start) {
|
||||
//firefox doesn't want to apply cursor from `:active` CSS rule, have to add a class :-/
|
||||
addClass(_this, classes.drag);
|
||||
},
|
||||
move: function(event, start, diff, speed) {
|
||||
pauseSlideshow(); //pause the slideshow when touch is in progress
|
||||
|
||||
//if it's first slide and moving left or last slide and moving right -- resist!
|
||||
diff.x =
|
||||
diff.x /
|
||||
(
|
||||
(!activeSlide && diff.x > 0
|
||||
|| activeSlide == slidesNumber - 1 && diff.x < 0)
|
||||
?
|
||||
(Math.abs(diff.x)/slider.width*2 + 1)
|
||||
:
|
||||
1
|
||||
);
|
||||
|
||||
//change position of the slider appropriately
|
||||
changePos(diff.x - slider.width*activeSlide);
|
||||
},
|
||||
end: function(event, start, diff, speed) {
|
||||
if (diff.x) {
|
||||
var ratio = Math.abs(diff.x)/slider.width,
|
||||
//How many slides to skip. Remainder > 0.25 counts for one slide.
|
||||
skip = Math.floor(ratio) + (ratio - Math.floor(ratio) > 0.25?1:0),
|
||||
//Super-duper formula to detect a flick.
|
||||
//First, it's got to be fast enough.
|
||||
//Second, if `skip==0`, 20px move is enough to switch to the next slide.
|
||||
//If `skip>0`, it's enough to slide to the middle of the slide minus `slider.width/9` to skip even further.
|
||||
flick = diff.time < flickThreshold+flickThreshold*skip/1.8 && Math.abs(diff.x) - skip*slider.width > (skip?-slider.width/9:20);
|
||||
|
||||
skip += (flick?1:0);
|
||||
|
||||
if (diff.x < 0) {
|
||||
changeActiveSlide(activeSlide+skip, o.touchSpeed);
|
||||
}
|
||||
else {
|
||||
changeActiveSlide(activeSlide-skip, o.touchSpeed);
|
||||
}
|
||||
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
}
|
||||
|
||||
//remove the drag class
|
||||
removeClass(_this, classes.drag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setup() {
|
||||
var slideSource = o.slidesContainer || _this,
|
||||
dotsTarget = o.dotsContainer || _this;
|
||||
|
||||
if (o.disableIfOneSlide && slideSource.children.length <= 1) return;
|
||||
|
||||
//If current UA doesn't support css transforms or transitions -- use fallback functions.
|
||||
//(Using separate functions instead of checks for better performance)
|
||||
if (!support.transforms || !!window.opera) setPos = setPosFallback;
|
||||
if (!support.transitions || !!window.opera) changePos = changePosFallback;
|
||||
|
||||
slideBlock = o.slidesContainer || document.createElement('div');
|
||||
addClass(slideBlock, classes.slides);
|
||||
|
||||
//get slides & generate dots
|
||||
for (var i = 0, l = slideSource.children.length; i < l; i++) {
|
||||
var slide = slideSource.children[i],
|
||||
dot = document.createElement('li');
|
||||
|
||||
slider.slides.push(slide);
|
||||
|
||||
//`tabindex` makes dots tabbable
|
||||
dot.setAttribute('tabindex', '0');
|
||||
dot.setAttribute('role', 'button');
|
||||
|
||||
dot.innerHTML = '<span></span>';
|
||||
|
||||
(function(x, dotClosure) {
|
||||
//bind events to dots
|
||||
addEvent(dotClosure, 'click', function(event) {
|
||||
changeActiveSlide(x);
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
});
|
||||
|
||||
//Bind the same function to Enter key except for the `blur` part -- I dont't want
|
||||
//the focus to be lost when the user is using his keyboard to navigate.
|
||||
addEvent(dotClosure, 'keyup', function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
changeActiveSlide(x);
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
}
|
||||
});
|
||||
|
||||
//Don't want to disable outlines completely for accessibility reasons.
|
||||
//Instead, add class with `outline: 0` on mouseup and remove it on blur.
|
||||
addEvent(dotClosure, 'mouseup', function(event) {
|
||||
addClass(dotClosure, classes.mouseClicked);
|
||||
});
|
||||
|
||||
//capturing fixes IE bug
|
||||
addEvent(dotClosure, 'blur', function(){
|
||||
removeClass(dotClosure, classes.mouseClicked);
|
||||
}, true);
|
||||
|
||||
//This solves tabbing problems:
|
||||
//When an element inside a slide catches focus we switch to that slide
|
||||
//and reset `scrollLeft` of the slider block.
|
||||
//`SetTimeout` solves Chrome's bug.
|
||||
//Event capturing is used to catch events on the slide level.
|
||||
//Since older IEs don't have capturing, `onfocusin` is used as a fallback.
|
||||
addEvent(slide, 'focus', slide.onfocusin = function(e) {
|
||||
_this.scrollLeft = 0;
|
||||
setTimeout(function() {
|
||||
_this.scrollLeft = 0;
|
||||
}, 0);
|
||||
changeActiveSlide(x);
|
||||
}, true);
|
||||
})(i, dot)
|
||||
|
||||
slider.dots.push(dot);
|
||||
}
|
||||
|
||||
slidesNumber = slider.slides.length;
|
||||
|
||||
slideWidth = 100/slidesNumber;
|
||||
|
||||
addClass(_this, classes.active);
|
||||
removeClass(_this, classes.inactive);
|
||||
o.mouseDrag && addClass(_this, classes.mouse);
|
||||
|
||||
slider.width = _this.offsetWidth;
|
||||
|
||||
//had to do this in `px` because of webkit's rounding errors :-(
|
||||
slideBlock.style.width = slider.width*slidesNumber+'px';
|
||||
for (var i = 0; i < slidesNumber; i++) {
|
||||
slider.slides[i].style.width = slider.width+'px';
|
||||
slideBlock.appendChild(slider.slides[i]);
|
||||
}
|
||||
|
||||
if (!o.slidesContainer) _this.appendChild(slideBlock);
|
||||
|
||||
//append dots
|
||||
if (o.dots && slidesNumber > 1) {
|
||||
dotBlock = document.createElement('ul');
|
||||
addClass(dotBlock, classes.dots);
|
||||
|
||||
for (var i = 0, l = slider.dots.length; i < l; i++) {
|
||||
dotBlock.appendChild(slider.dots[i]);
|
||||
}
|
||||
|
||||
if (o.dotsPrepend) {
|
||||
dotsTarget.insertBefore(dotBlock,dotsTarget.firstChild);
|
||||
}
|
||||
else {
|
||||
dotsTarget.appendChild(dotBlock);
|
||||
}
|
||||
}
|
||||
|
||||
//watch for slider width changes
|
||||
addEvent(window, 'resize', onWidthChange);
|
||||
addEvent(window, 'orientationchange', onWidthChange);
|
||||
|
||||
//init first slide, timeout to expose the API first
|
||||
setTimeout(function() {
|
||||
changeActiveSlide(o.startSlide, 0);
|
||||
}, 0);
|
||||
|
||||
//init slideshow
|
||||
if (o.slideshow) startSlideshow();
|
||||
|
||||
touchInit();
|
||||
|
||||
//API callback, timeout to expose the API first
|
||||
setTimeout(function() {
|
||||
o.onSetup && o.onSetup(slidesNumber);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
//Init
|
||||
setup();
|
||||
|
||||
//expose the API
|
||||
return {
|
||||
slideTo: function(slide) {
|
||||
return changeActiveSlide(parseInt(slide, 10));
|
||||
},
|
||||
|
||||
next: nextSlide,
|
||||
|
||||
prev: prevSlide,
|
||||
|
||||
//start slideshow
|
||||
start: startSlideshow,
|
||||
|
||||
//stop slideshow
|
||||
stop: stopSlideshow,
|
||||
|
||||
//pause slideshow until the next slide change
|
||||
pause: pauseSlideshow,
|
||||
|
||||
//get current slide number
|
||||
getCurrentPos: function() {
|
||||
return activeSlide;
|
||||
},
|
||||
|
||||
//get total number of slides
|
||||
getSlidesNumber: function() {
|
||||
return slidesNumber;
|
||||
},
|
||||
|
||||
//invoke this when the slider's width is changed
|
||||
recalcWidth: onWidthChange
|
||||
};
|
||||
};
|
||||
|
||||
//if jQuery is present -- create a plugin
|
||||
if (window.jQuery) {
|
||||
(function($) {
|
||||
$.fn.Peppermint = function(options) {
|
||||
this.each(function() {
|
||||
$(this).data('Peppermint', Peppermint(this, options));
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
})(window.jQuery);
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* Peppermint touch slider
|
||||
* v. 1.3.7 | https://github.com/wilddeer/Peppermint
|
||||
* Copyright Oleg Korsunsky | http://wd.dizaina.net/
|
||||
*
|
||||
* Depends on Event Burrito | https://github.com/wilddeer/Event-Burrito
|
||||
* MIT License
|
||||
*/
|
||||
function Peppermint(a,b){function c(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function d(a){var b=["Webkit","Moz","O","ms"],c=document.createElement("div");if(void 0!==c.style[a])return!0;a=a.charAt(0).toUpperCase()+a.slice(1);for(var d in b)if(void 0!==c.style[b[d]+a])return!0;return!1}function e(a,b){new RegExp("(\\s|^)"+b+"(\\s|$)").test(a.className)||(a.className+=" "+b)}function f(a,b){a.className=a.className.replace(new RegExp("(\\s+|^)"+b+"(\\s+|$)","g")," ").replace(/^\s+|\s+$/g,"")}function g(a,b){0>a?a=0:a>v-1&&(a=v-1);for(var c=C.dots.length-1;c>=0;c--)f(C.dots[c],G.activeDot);return e(C.dots[a],G.activeDot),E=a,h(-a*C.width,void 0===b?F.speed:b),o(),F.onSlideChange&&F.onSlideChange(a),a}function h(a,b){var c=b?b+"ms":"";y.style.webkitTransitionDuration=y.style.MozTransitionDuration=y.style.msTransitionDuration=y.style.OTransitionDuration=y.style.transitionDuration=c,j(a)}function i(a,b){if(B&&clearInterval(B),!b)return void j(a);var c=+new Date,d=C.left;B=setInterval(function(){function e(a,b){return(b-a)*i+a}var f,g,h=+new Date-c,i=h/b,k=[0,.7,1,1];return i>=1?(j(a),void clearInterval(B)):(f=a-d,g=e(e(e(k[0],k[1]),e(k[1],k[2])),e(e(k[1],k[2]),e(k[2],k[3]))),void j(Math.floor(g*f+d)))},15)}function j(a){y.style.webkitTransform="translate("+a+"px,0) translateZ(0)",y.style.msTransform=y.style.MozTransform=y.style.OTransform=y.style.transform="translateX("+a+"px)",C.left=a}function k(a){y.style.left=a+"px",C.left=a}function l(){var a=E+1;return a>v-1&&(a=0),g(a)}function m(){var a=E-1;return 0>a&&(a=v-1),g(a)}function n(){A=!0,o()}function o(){A&&(z&&clearTimeout(z),z=setTimeout(function(){l()},F.slideshowInterval))}function p(){z&&clearTimeout(z)}function q(){A=!1,z&&clearTimeout(z)}function r(){C.width=a.offsetWidth,y.style.width=C.width*v+"px";for(var b=0;v>b;b++)C.slides[b].style.width=C.width+"px";h(-E*C.width)}function s(a,b,c,d){b&&(a.addEventListener?a.addEventListener(b,c,!!d):a.attachEvent("on"+b,c))}function t(){EventBurrito(y,{mouse:F.mouseDrag,start:function(){e(a,G.drag)},move:function(a,b,c){p(),c.x=c.x/(!E&&c.x>0||E==v-1&&c.x<0?Math.abs(c.x)/C.width*2+1:1),h(c.x-C.width*E)},end:function(b,c,d){if(d.x){var e=Math.abs(d.x)/C.width,h=Math.floor(e)+(e-Math.floor(e)>.25?1:0),i=d.time<D+D*h/1.8&&Math.abs(d.x)-h*C.width>(h?-C.width/9:20);h+=i?1:0,d.x<0?g(E+h,F.touchSpeed):g(E-h,F.touchSpeed),F.stopSlideshowAfterInteraction&&q()}f(a,G.drag)}})}function u(){var b=F.slidesContainer||a,c=F.dotsContainer||a;if(!(F.disableIfOneSlide&&b.children.length<=1)){(!H.transforms||window.opera)&&(j=k),(!H.transitions||window.opera)&&(h=i),y=F.slidesContainer||document.createElement("div"),e(y,G.slides);for(var d=0,l=b.children.length;l>d;d++){var m=b.children[d],o=document.createElement("li");C.slides.push(m),o.setAttribute("tabindex","0"),o.setAttribute("role","button"),o.innerHTML="<span></span>",function(b,c){s(c,"click",function(){g(b),F.stopSlideshowAfterInteraction&&q()}),s(c,"keyup",function(a){13==a.keyCode&&(g(b),F.stopSlideshowAfterInteraction&&q())}),s(c,"mouseup",function(){e(c,G.mouseClicked)}),s(c,"blur",function(){f(c,G.mouseClicked)},!0),s(m,"focus",m.onfocusin=function(){a.scrollLeft=0,setTimeout(function(){a.scrollLeft=0},0),g(b)},!0)}(d,o),C.dots.push(o)}v=C.slides.length,w=100/v,e(a,G.active),f(a,G.inactive),F.mouseDrag&&e(a,G.mouse),C.width=a.offsetWidth,y.style.width=C.width*v+"px";for(var d=0;v>d;d++)C.slides[d].style.width=C.width+"px",y.appendChild(C.slides[d]);if(F.slidesContainer||a.appendChild(y),F.dots&&v>1){x=document.createElement("ul"),e(x,G.dots);for(var d=0,l=C.dots.length;l>d;d++)x.appendChild(C.dots[d]);F.dotsPrepend?c.insertBefore(x,c.firstChild):c.appendChild(x)}s(window,"resize",r),s(window,"orientationchange",r),setTimeout(function(){g(F.startSlide,0)},0),F.slideshow&&n(),t(),setTimeout(function(){F.onSetup&&F.onSetup(v)},0)}}var v,w,x,y,z,A,B,C={slides:[],dots:[],left:0},D=200,E=0,F={speed:300,touchSpeed:300,slideshow:!1,slideshowInterval:4e3,stopSlideshowAfterInteraction:!1,startSlide:0,mouseDrag:!0,disableIfOneSlide:!0,cssPrefix:"peppermint-",dots:!1,dotsPrepend:!1,dotsContainer:void 0,slidesContainer:void 0,onSlideChange:void 0,onSetup:void 0};b&&c(F,b);var G={inactive:F.cssPrefix+"inactive",active:F.cssPrefix+"active",mouse:F.cssPrefix+"mouse",drag:F.cssPrefix+"drag",slides:F.cssPrefix+"slides",dots:F.cssPrefix+"dots",activeDot:F.cssPrefix+"active-dot",mouseClicked:F.cssPrefix+"mouse-clicked"},H={transforms:d("transform"),transitions:d("transition")};return u(),{slideTo:function(a){return g(parseInt(a,10))},next:l,prev:m,start:n,stop:q,pause:p,getCurrentPos:function(){return E},getSlidesNumber:function(){return v},recalcWidth:r}}window.jQuery&&!function($){$.fn.Peppermint=function(a){return this.each(function(){$(this).data("Peppermint",Peppermint(this,a))}),this}}(window.jQuery);
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "Peppermint",
|
||||
"version": "1.3.7",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/wilddeer/Peppermint",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/wilddeer/Peppermint.git"
|
||||
},
|
||||
"author": {
|
||||
"name": "Oleg Korsunsky",
|
||||
"url": "http://wd.dizaina.net/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-uglify": "~0.2.5",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-bump": "0.0.14",
|
||||
"grunt-shell": "~0.7.0"
|
||||
}
|
||||
}
|
||||
+90
@@ -0,0 +1,90 @@
|
||||
.peppermint {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.peppermint figure {
|
||||
margin: 0 0 1.5em 0;
|
||||
}
|
||||
|
||||
.peppermint figure img {
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.peppermint figure figcaption {
|
||||
font-style: italic;
|
||||
color: #787575;
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.peppermint-slides {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* dots */
|
||||
ul.peppermint-dots {
|
||||
margin: 0.6em 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active ul.peppermint-dots {
|
||||
margin: 0 0 0.6em 0;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides + ul.peppermint-dots {
|
||||
margin: 0.6em 0 0 0;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0.5em 0.6em;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* ie7 fallback */
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li.peppermint-mouse-clicked,
|
||||
ul.peppermint-dots > li:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li > span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -4px 0 0 -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #9b9890;
|
||||
}
|
||||
|
||||
ul.peppermint-dots > li.peppermint-active-dot > span {
|
||||
margin: -6px 0 0 -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 1px solid #9b9890;
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,485 @@
|
||||
function Peppermint(_this, options) {
|
||||
var slider = {
|
||||
slides: [],
|
||||
dots: [],
|
||||
left: 0
|
||||
},
|
||||
slidesNumber,
|
||||
flickThreshold = 200, //Flick threshold (ms)
|
||||
activeSlide = 0,
|
||||
slideWidth,
|
||||
dotBlock,
|
||||
slideBlock,
|
||||
slideshowTimeoutId,
|
||||
slideshowActive,
|
||||
animationTimer;
|
||||
|
||||
//default options
|
||||
var o = {
|
||||
speed: 300, //transition between slides in ms
|
||||
touchSpeed: 300, //transition between slides in ms after touch
|
||||
slideshow: false, //launch slideshow at start
|
||||
slideshowInterval: 4000,
|
||||
stopSlideshowAfterInteraction: false, //stop slideshow after user interaction
|
||||
startSlide: 0, //first slide to show
|
||||
mouseDrag: true, //enable mouse drag
|
||||
disableIfOneSlide: true,
|
||||
cssPrefix: 'peppermint-',
|
||||
dots: false, //show dots
|
||||
dotsPrepend: false, //dots before slides
|
||||
dotsContainer: undefined,
|
||||
slidesContainer: undefined,
|
||||
onSlideChange: undefined, //slide change callback
|
||||
onSetup: undefined //setup callback
|
||||
};
|
||||
|
||||
//merge user options into defaults
|
||||
options && mergeObjects(o, options);
|
||||
|
||||
var classes = {
|
||||
inactive: o.cssPrefix + 'inactive',
|
||||
active: o.cssPrefix + 'active',
|
||||
mouse: o.cssPrefix + 'mouse',
|
||||
drag: o.cssPrefix + 'drag',
|
||||
slides: o.cssPrefix + 'slides',
|
||||
dots: o.cssPrefix + 'dots',
|
||||
activeDot: o.cssPrefix + 'active-dot',
|
||||
mouseClicked: o.cssPrefix + 'mouse-clicked'
|
||||
};
|
||||
|
||||
//feature detects
|
||||
var support = {
|
||||
transforms: testProp('transform'),
|
||||
transitions: testProp('transition')
|
||||
};
|
||||
|
||||
function mergeObjects(targetObj, sourceObject) {
|
||||
for (var key in sourceObject) {
|
||||
if (sourceObject.hasOwnProperty(key)) {
|
||||
targetObj[key] = sourceObject[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function testProp(prop) {
|
||||
var prefixes = ['Webkit', 'Moz', 'O', 'ms'],
|
||||
block = document.createElement('div');
|
||||
|
||||
if (block.style[prop] !== undefined) return true;
|
||||
|
||||
prop = prop.charAt(0).toUpperCase() + prop.slice(1);
|
||||
for (var i in prefixes) {
|
||||
if (block.style[prefixes[i]+prop] !== undefined) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function addClass(el, cl) {
|
||||
if (!new RegExp('(\\s|^)'+cl+'(\\s|$)').test(el.className)) {
|
||||
el.className += ' ' + cl;
|
||||
}
|
||||
}
|
||||
|
||||
function removeClass(el, cl) {
|
||||
el.className = el.className.replace(new RegExp('(\\s+|^)'+cl+'(\\s+|$)', 'g'), ' ').replace(/^\s+|\s+$/g, '');
|
||||
}
|
||||
|
||||
//n - slide number (starting from 0)
|
||||
//speed - transition in ms, can be omitted
|
||||
function changeActiveSlide(n, speed) {
|
||||
if (n<0) {
|
||||
n = 0;
|
||||
}
|
||||
else if (n>slidesNumber-1) {
|
||||
n = slidesNumber-1;
|
||||
}
|
||||
|
||||
//change active dot
|
||||
for (var i = slider.dots.length - 1; i >= 0; i--) {
|
||||
removeClass(slider.dots[i], classes.activeDot);
|
||||
}
|
||||
|
||||
addClass(slider.dots[n], classes.activeDot);
|
||||
|
||||
activeSlide = n;
|
||||
|
||||
changePos(-n*slider.width, (speed===undefined?o.speed:speed));
|
||||
|
||||
//reset slideshow timeout whenever active slide is changed for whatever reason
|
||||
stepSlideshow();
|
||||
|
||||
//API callback
|
||||
o.onSlideChange && o.onSlideChange(n);
|
||||
|
||||
return n;
|
||||
}
|
||||
|
||||
//changes position of the slider (in px) with given speed (in ms)
|
||||
function changePos(pos, speed) {
|
||||
var time = speed?speed+'ms':'';
|
||||
|
||||
slideBlock.style.webkitTransitionDuration =
|
||||
slideBlock.style.MozTransitionDuration =
|
||||
slideBlock.style.msTransitionDuration =
|
||||
slideBlock.style.OTransitionDuration =
|
||||
slideBlock.style.transitionDuration = time;
|
||||
|
||||
setPos(pos);
|
||||
}
|
||||
|
||||
//fallback to `setInterval` animations for UAs with no CSS transitions
|
||||
function changePosFallback(pos, speed) {
|
||||
animationTimer && clearInterval(animationTimer);
|
||||
|
||||
if (!speed) {
|
||||
setPos(pos);
|
||||
return;
|
||||
}
|
||||
|
||||
var startTime = +new Date,
|
||||
startPos = slider.left;
|
||||
|
||||
animationTimer = setInterval(function() {
|
||||
//rough bezier emulation
|
||||
var diff, y,
|
||||
elapsed = +new Date - startTime,
|
||||
f = elapsed / speed,
|
||||
bezier = [0, 0.7, 1, 1];
|
||||
|
||||
function getPoint(p1, p2) {
|
||||
return (p2-p1)*f + p1;
|
||||
}
|
||||
|
||||
if (f >= 1) {
|
||||
setPos(pos);
|
||||
clearInterval(animationTimer);
|
||||
return;
|
||||
}
|
||||
|
||||
diff = pos - startPos;
|
||||
|
||||
y = getPoint(
|
||||
getPoint(getPoint(bezier[0], bezier[1]), getPoint(bezier[1], bezier[2])),
|
||||
getPoint(getPoint(bezier[1], bezier[2]), getPoint(bezier[2], bezier[3]))
|
||||
);
|
||||
|
||||
setPos(Math.floor(y*diff + startPos));
|
||||
}, 15);
|
||||
}
|
||||
|
||||
//sets position of the slider (in px)
|
||||
function setPos(pos) {
|
||||
slideBlock.style.webkitTransform = 'translate('+pos+'px,0) translateZ(0)';
|
||||
slideBlock.style.msTransform =
|
||||
slideBlock.style.MozTransform =
|
||||
slideBlock.style.OTransform =
|
||||
slideBlock.style.transform = 'translateX('+pos+'px)';
|
||||
|
||||
slider.left = pos;
|
||||
}
|
||||
|
||||
//`setPos` fallback for UAs with no CSS transforms support
|
||||
function setPosFallback(pos) {
|
||||
slideBlock.style.left = pos+'px';
|
||||
|
||||
slider.left = pos;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
var n = activeSlide + 1;
|
||||
|
||||
if (n > slidesNumber - 1) {
|
||||
n = 0;
|
||||
}
|
||||
|
||||
return changeActiveSlide(n);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
var n = activeSlide - 1;
|
||||
|
||||
if (n < 0) {
|
||||
n = slidesNumber - 1;
|
||||
}
|
||||
|
||||
return changeActiveSlide(n);
|
||||
}
|
||||
|
||||
function startSlideshow() {
|
||||
slideshowActive = true;
|
||||
stepSlideshow();
|
||||
}
|
||||
|
||||
//sets or resets timeout before switching to the next slide
|
||||
function stepSlideshow() {
|
||||
if (slideshowActive) {
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
|
||||
slideshowTimeoutId = setTimeout(function() {
|
||||
nextSlide();
|
||||
},
|
||||
o.slideshowInterval);
|
||||
}
|
||||
}
|
||||
|
||||
//pauses slideshow until `stepSlideshow` is invoked
|
||||
function pauseSlideshow() {
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
}
|
||||
|
||||
function stopSlideshow() {
|
||||
slideshowActive = false;
|
||||
slideshowTimeoutId && clearTimeout(slideshowTimeoutId);
|
||||
}
|
||||
|
||||
//this should be invoked when the width of the slider is changed
|
||||
function onWidthChange() {
|
||||
slider.width = _this.offsetWidth;
|
||||
|
||||
//have to do this in `px` because of webkit's rounding errors :-(
|
||||
slideBlock.style.width = slider.width*slidesNumber+'px';
|
||||
for (var i = 0; i < slidesNumber; i++) {
|
||||
slider.slides[i].style.width = slider.width+'px';
|
||||
}
|
||||
changePos(-activeSlide*slider.width);
|
||||
}
|
||||
|
||||
function addEvent(el, event, func, bool) {
|
||||
if (!event) return;
|
||||
|
||||
el.addEventListener? el.addEventListener(event, func, !!bool): el.attachEvent('on'+event, func);
|
||||
}
|
||||
|
||||
//init touch events
|
||||
function touchInit() {
|
||||
EventBurrito(slideBlock, {
|
||||
mouse: o.mouseDrag,
|
||||
start: function(event, start) {
|
||||
//firefox doesn't want to apply cursor from `:active` CSS rule, have to add a class :-/
|
||||
addClass(_this, classes.drag);
|
||||
},
|
||||
move: function(event, start, diff, speed) {
|
||||
pauseSlideshow(); //pause the slideshow when touch is in progress
|
||||
|
||||
//if it's first slide and moving left or last slide and moving right -- resist!
|
||||
diff.x =
|
||||
diff.x /
|
||||
(
|
||||
(!activeSlide && diff.x > 0
|
||||
|| activeSlide == slidesNumber - 1 && diff.x < 0)
|
||||
?
|
||||
(Math.abs(diff.x)/slider.width*2 + 1)
|
||||
:
|
||||
1
|
||||
);
|
||||
|
||||
//change position of the slider appropriately
|
||||
changePos(diff.x - slider.width*activeSlide);
|
||||
},
|
||||
end: function(event, start, diff, speed) {
|
||||
if (diff.x) {
|
||||
var ratio = Math.abs(diff.x)/slider.width,
|
||||
//How many slides to skip. Remainder > 0.25 counts for one slide.
|
||||
skip = Math.floor(ratio) + (ratio - Math.floor(ratio) > 0.25?1:0),
|
||||
//Super-duper formula to detect a flick.
|
||||
//First, it's got to be fast enough.
|
||||
//Second, if `skip==0`, 20px move is enough to switch to the next slide.
|
||||
//If `skip>0`, it's enough to slide to the middle of the slide minus `slider.width/9` to skip even further.
|
||||
flick = diff.time < flickThreshold+flickThreshold*skip/1.8 && Math.abs(diff.x) - skip*slider.width > (skip?-slider.width/9:20);
|
||||
|
||||
skip += (flick?1:0);
|
||||
|
||||
if (diff.x < 0) {
|
||||
changeActiveSlide(activeSlide+skip, o.touchSpeed);
|
||||
}
|
||||
else {
|
||||
changeActiveSlide(activeSlide-skip, o.touchSpeed);
|
||||
}
|
||||
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
}
|
||||
|
||||
//remove the drag class
|
||||
removeClass(_this, classes.drag);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setup() {
|
||||
var slideSource = o.slidesContainer || _this,
|
||||
dotsTarget = o.dotsContainer || _this;
|
||||
|
||||
if (o.disableIfOneSlide && slideSource.children.length <= 1) return;
|
||||
|
||||
//If current UA doesn't support css transforms or transitions -- use fallback functions.
|
||||
//(Using separate functions instead of checks for better performance)
|
||||
if (!support.transforms || !!window.opera) setPos = setPosFallback;
|
||||
if (!support.transitions || !!window.opera) changePos = changePosFallback;
|
||||
|
||||
slideBlock = o.slidesContainer || document.createElement('div');
|
||||
addClass(slideBlock, classes.slides);
|
||||
|
||||
//get slides & generate dots
|
||||
for (var i = 0, l = slideSource.children.length; i < l; i++) {
|
||||
var slide = slideSource.children[i],
|
||||
dot = document.createElement('li');
|
||||
|
||||
slider.slides.push(slide);
|
||||
|
||||
//`tabindex` makes dots tabbable
|
||||
dot.setAttribute('tabindex', '0');
|
||||
dot.setAttribute('role', 'button');
|
||||
|
||||
dot.innerHTML = '<span></span>';
|
||||
|
||||
(function(x, dotClosure) {
|
||||
//bind events to dots
|
||||
addEvent(dotClosure, 'click', function(event) {
|
||||
changeActiveSlide(x);
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
});
|
||||
|
||||
//Bind the same function to Enter key except for the `blur` part -- I dont't want
|
||||
//the focus to be lost when the user is using his keyboard to navigate.
|
||||
addEvent(dotClosure, 'keyup', function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
changeActiveSlide(x);
|
||||
o.stopSlideshowAfterInteraction && stopSlideshow();
|
||||
}
|
||||
});
|
||||
|
||||
//Don't want to disable outlines completely for accessibility reasons.
|
||||
//Instead, add class with `outline: 0` on mouseup and remove it on blur.
|
||||
addEvent(dotClosure, 'mouseup', function(event) {
|
||||
addClass(dotClosure, classes.mouseClicked);
|
||||
});
|
||||
|
||||
//capturing fixes IE bug
|
||||
addEvent(dotClosure, 'blur', function(){
|
||||
removeClass(dotClosure, classes.mouseClicked);
|
||||
}, true);
|
||||
|
||||
//This solves tabbing problems:
|
||||
//When an element inside a slide catches focus we switch to that slide
|
||||
//and reset `scrollLeft` of the slider block.
|
||||
//`SetTimeout` solves Chrome's bug.
|
||||
//Event capturing is used to catch events on the slide level.
|
||||
//Since older IEs don't have capturing, `onfocusin` is used as a fallback.
|
||||
addEvent(slide, 'focus', slide.onfocusin = function(e) {
|
||||
_this.scrollLeft = 0;
|
||||
setTimeout(function() {
|
||||
_this.scrollLeft = 0;
|
||||
}, 0);
|
||||
changeActiveSlide(x);
|
||||
}, true);
|
||||
})(i, dot)
|
||||
|
||||
slider.dots.push(dot);
|
||||
}
|
||||
|
||||
slidesNumber = slider.slides.length;
|
||||
|
||||
slideWidth = 100/slidesNumber;
|
||||
|
||||
addClass(_this, classes.active);
|
||||
removeClass(_this, classes.inactive);
|
||||
o.mouseDrag && addClass(_this, classes.mouse);
|
||||
|
||||
slider.width = _this.offsetWidth;
|
||||
|
||||
//had to do this in `px` because of webkit's rounding errors :-(
|
||||
slideBlock.style.width = slider.width*slidesNumber+'px';
|
||||
for (var i = 0; i < slidesNumber; i++) {
|
||||
slider.slides[i].style.width = slider.width+'px';
|
||||
slideBlock.appendChild(slider.slides[i]);
|
||||
}
|
||||
|
||||
if (!o.slidesContainer) _this.appendChild(slideBlock);
|
||||
|
||||
//append dots
|
||||
if (o.dots && slidesNumber > 1) {
|
||||
dotBlock = document.createElement('ul');
|
||||
addClass(dotBlock, classes.dots);
|
||||
|
||||
for (var i = 0, l = slider.dots.length; i < l; i++) {
|
||||
dotBlock.appendChild(slider.dots[i]);
|
||||
}
|
||||
|
||||
if (o.dotsPrepend) {
|
||||
dotsTarget.insertBefore(dotBlock,dotsTarget.firstChild);
|
||||
}
|
||||
else {
|
||||
dotsTarget.appendChild(dotBlock);
|
||||
}
|
||||
}
|
||||
|
||||
//watch for slider width changes
|
||||
addEvent(window, 'resize', onWidthChange);
|
||||
addEvent(window, 'orientationchange', onWidthChange);
|
||||
|
||||
//init first slide, timeout to expose the API first
|
||||
setTimeout(function() {
|
||||
changeActiveSlide(o.startSlide, 0);
|
||||
}, 0);
|
||||
|
||||
//init slideshow
|
||||
if (o.slideshow) startSlideshow();
|
||||
|
||||
touchInit();
|
||||
|
||||
//API callback, timeout to expose the API first
|
||||
setTimeout(function() {
|
||||
o.onSetup && o.onSetup(slidesNumber);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
//Init
|
||||
setup();
|
||||
|
||||
//expose the API
|
||||
return {
|
||||
slideTo: function(slide) {
|
||||
return changeActiveSlide(parseInt(slide, 10));
|
||||
},
|
||||
|
||||
next: nextSlide,
|
||||
|
||||
prev: prevSlide,
|
||||
|
||||
//start slideshow
|
||||
start: startSlideshow,
|
||||
|
||||
//stop slideshow
|
||||
stop: stopSlideshow,
|
||||
|
||||
//pause slideshow until the next slide change
|
||||
pause: pauseSlideshow,
|
||||
|
||||
//get current slide number
|
||||
getCurrentPos: function() {
|
||||
return activeSlide;
|
||||
},
|
||||
|
||||
//get total number of slides
|
||||
getSlidesNumber: function() {
|
||||
return slidesNumber;
|
||||
},
|
||||
|
||||
//invoke this when the slider's width is changed
|
||||
recalcWidth: onWidthChange
|
||||
};
|
||||
};
|
||||
|
||||
//if jQuery is present -- create a plugin
|
||||
if (window.jQuery) {
|
||||
(function($) {
|
||||
$.fn.Peppermint = function(options) {
|
||||
this.each(function() {
|
||||
$(this).data('Peppermint', Peppermint(this, options));
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
})(window.jQuery);
|
||||
}
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
.peppermint.peppermint-active {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides {
|
||||
position: relative;
|
||||
overflow: hidden; /* clearfix */
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides > * {
|
||||
float: left;
|
||||
margin: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active .peppermint-slides a:active,
|
||||
.peppermint.peppermint-active .peppermint-slides a:active img {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-active,
|
||||
.peppermint.peppermint-active .peppermint-dots,
|
||||
.peppermint.peppermint-active .peppermint-slides,
|
||||
.peppermint.peppermint-active .peppermint-slides > * {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-ms-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-mouse .peppermint-slides {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: move;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
@@ -3974,6 +3974,12 @@ div.messages {
|
||||
|_____|__|__|__|__|__| |_| |_____|__|__|_____| |_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
|
||||
|__|
|
||||
*/
|
||||
/* ____ ____ _______ ____________ ________ _____ ____ ________________ _____
|
||||
/ __ \/ __ \/ ____/ | / / ____/ __ \ / ____/ / / / | / __ \/_ __/ ____/ __ \/ ___/
|
||||
/ / / / /_/ / __/ / |/ / __/ / / / / / / / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
|
||||
/ /_/ / ____/ /___/ /| / /___/ /_/ / / /___/ __ / ___ |/ ____/ / / / /___/ _, _/___/ /
|
||||
\____/_/ /_____/_/ |_/_____/_____/ \____/_/ /_/_/ |_/_/ /_/ /_____/_/ |_|/____/
|
||||
*/
|
||||
}
|
||||
/* line 174, jee.scss */
|
||||
#main > .region, #main > .region > .block-system, #main > .region > .block-system > .content {
|
||||
@@ -3982,161 +3988,161 @@ div.messages {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* line 189, jee.scss */
|
||||
#main #node-2::after {
|
||||
/* line 190, jee.scss */
|
||||
#main #node-2.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-sol.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-sol.svg") no-repeat center center;
|
||||
}
|
||||
/* line 190, jee.scss */
|
||||
#main #node-2, #main #node-2 a {
|
||||
/* line 191, jee.scss */
|
||||
#main #node-2.node-teaser, #main #node-2.node-teaser a {
|
||||
color: #b24c14;
|
||||
}
|
||||
/* line 191, jee.scss */
|
||||
#main #node-2 h2.node-title, #main #node-2 h2.node-title a {
|
||||
/* line 192, jee.scss */
|
||||
#main #node-2.node-teaser h2.node-title, #main #node-2.node-teaser h2.node-title a {
|
||||
color: #d85509;
|
||||
}
|
||||
/* line 192, jee.scss */
|
||||
#main #node-2 .field-name-field-vignette {
|
||||
/* line 193, jee.scss */
|
||||
#main #node-2.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-sol.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-sol.svg") no-repeat center center;
|
||||
}
|
||||
/* line 193, jee.scss */
|
||||
#main #node-2 .line {
|
||||
/* line 194, jee.scss */
|
||||
#main #node-2.node-teaser .line {
|
||||
background-color: #ea5b0c;
|
||||
}
|
||||
/* line 197, jee.scss */
|
||||
#main #node-3::after {
|
||||
/* line 200, jee.scss */
|
||||
#main #node-3.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-dph.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-dph.svg") no-repeat center center;
|
||||
}
|
||||
/* line 198, jee.scss */
|
||||
#main #node-3, #main #node-3 a {
|
||||
/* line 201, jee.scss */
|
||||
#main #node-3.node-teaser, #main #node-3.node-teaser a {
|
||||
color: #686b00;
|
||||
}
|
||||
/* line 199, jee.scss */
|
||||
#main #node-3 h2.node-title, #main #node-3 h2.node-title a {
|
||||
/* line 202, jee.scss */
|
||||
#main #node-3.node-teaser h2.node-title, #main #node-3.node-teaser h2.node-title a {
|
||||
color: #afaf00;
|
||||
}
|
||||
/* line 200, jee.scss */
|
||||
#main #node-3 .field-name-field-vignette {
|
||||
/* line 203, jee.scss */
|
||||
#main #node-3.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-dph.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-dph.svg") no-repeat center center;
|
||||
}
|
||||
/* line 201, jee.scss */
|
||||
#main #node-3 .line {
|
||||
/* line 204, jee.scss */
|
||||
#main #node-3.node-teaser .line {
|
||||
background-color: #cecd00;
|
||||
}
|
||||
/* line 205, jee.scss */
|
||||
#main #node-4::after {
|
||||
/* line 210, jee.scss */
|
||||
#main #node-4.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-sub.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-sub.svg") no-repeat center center;
|
||||
}
|
||||
/* line 206, jee.scss */
|
||||
#main #node-4, #main #node-4 a {
|
||||
/* line 211, jee.scss */
|
||||
#main #node-4.node-teaser, #main #node-4.node-teaser a {
|
||||
color: #b71330;
|
||||
}
|
||||
/* line 207, jee.scss */
|
||||
#main #node-4 h2.node-title, #main #node-4 h2.node-title a {
|
||||
/* line 212, jee.scss */
|
||||
#main #node-4.node-teaser h2.node-title, #main #node-4.node-teaser h2.node-title a {
|
||||
color: #cd0734;
|
||||
}
|
||||
/* line 208, jee.scss */
|
||||
#main #node-4 .field-name-field-vignette {
|
||||
/* line 213, jee.scss */
|
||||
#main #node-4.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-sub.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-sub.svg") no-repeat center center;
|
||||
}
|
||||
/* line 209, jee.scss */
|
||||
#main #node-4 .line {
|
||||
/* line 214, jee.scss */
|
||||
#main #node-4.node-teaser .line {
|
||||
background-color: #de003a;
|
||||
}
|
||||
/* line 213, jee.scss */
|
||||
#main #node-5::after {
|
||||
/* line 220, jee.scss */
|
||||
#main #node-5.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-bc.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-bc.svg") no-repeat center center;
|
||||
}
|
||||
/* line 214, jee.scss */
|
||||
#main #node-5, #main #node-5 a {
|
||||
/* line 221, jee.scss */
|
||||
#main #node-5.node-teaser, #main #node-5.node-teaser a {
|
||||
color: #033d6f;
|
||||
}
|
||||
/* line 215, jee.scss */
|
||||
#main #node-5 h2.node-title, #main #node-5 h2.node-title a {
|
||||
/* line 222, jee.scss */
|
||||
#main #node-5.node-teaser h2.node-title, #main #node-5.node-teaser h2.node-title a {
|
||||
color: #024b87;
|
||||
}
|
||||
/* line 216, jee.scss */
|
||||
#main #node-5 .field-name-field-vignette {
|
||||
/* line 223, jee.scss */
|
||||
#main #node-5.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-bc.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-bc.svg") no-repeat center center;
|
||||
}
|
||||
/* line 217, jee.scss */
|
||||
#main #node-5 .line {
|
||||
/* line 224, jee.scss */
|
||||
#main #node-5.node-teaser .line {
|
||||
background-color: #0066b1;
|
||||
}
|
||||
/* line 221, jee.scss */
|
||||
#main #node-6::after {
|
||||
/* line 230, jee.scss */
|
||||
#main #node-6.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-opp.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-opp.svg") no-repeat center center;
|
||||
}
|
||||
/* line 222, jee.scss */
|
||||
#main #node-6, #main #node-6 a {
|
||||
/* line 231, jee.scss */
|
||||
#main #node-6.node-teaser, #main #node-6.node-teaser a {
|
||||
color: #7f1965;
|
||||
}
|
||||
/* line 223, jee.scss */
|
||||
#main #node-6 h2.node-title, #main #node-6 h2.node-title a {
|
||||
/* line 232, jee.scss */
|
||||
#main #node-6.node-teaser h2.node-title, #main #node-6.node-teaser h2.node-title a {
|
||||
color: #941b80;
|
||||
}
|
||||
/* line 224, jee.scss */
|
||||
#main #node-6 .field-name-field-vignette {
|
||||
/* line 233, jee.scss */
|
||||
#main #node-6.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-opp.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-opp.svg") no-repeat center center;
|
||||
}
|
||||
/* line 225, jee.scss */
|
||||
#main #node-6 .line {
|
||||
/* line 234, jee.scss */
|
||||
#main #node-6.node-teaser .line {
|
||||
background-color: #af1380;
|
||||
}
|
||||
/* line 229, jee.scss */
|
||||
#main #node-7::after {
|
||||
/* line 240, jee.scss */
|
||||
#main #node-7.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-dub.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-dub.svg") no-repeat center center;
|
||||
}
|
||||
/* line 230, jee.scss */
|
||||
#main #node-7, #main #node-7 a {
|
||||
/* line 241, jee.scss */
|
||||
#main #node-7.node-teaser, #main #node-7.node-teaser a {
|
||||
color: #22742c;
|
||||
}
|
||||
/* line 231, jee.scss */
|
||||
#main #node-7 h2.node-title, #main #node-7 h2.node-title a {
|
||||
/* line 242, jee.scss */
|
||||
#main #node-7.node-teaser h2.node-title, #main #node-7.node-teaser h2.node-title a {
|
||||
color: #288d80;
|
||||
}
|
||||
/* line 232, jee.scss */
|
||||
#main #node-7 .field-name-field-vignette {
|
||||
/* line 243, jee.scss */
|
||||
#main #node-7.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-dub.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-dub.svg") no-repeat center center;
|
||||
}
|
||||
/* line 233, jee.scss */
|
||||
#main #node-7 .line {
|
||||
/* line 244, jee.scss */
|
||||
#main #node-7.node-teaser .line {
|
||||
background-color: #62a530;
|
||||
}
|
||||
/* line 237, jee.scss */
|
||||
#main #node-8::after {
|
||||
/* line 250, jee.scss */
|
||||
#main #node-8.node-teaser::after {
|
||||
background: transparent url("../assets/img/bgd-juso.png") no-repeat center center;
|
||||
background: none, url("../assets/img/bgd-juso.svg") no-repeat center center;
|
||||
}
|
||||
/* line 238, jee.scss */
|
||||
#main #node-8, #main #node-8 a {
|
||||
/* line 251, jee.scss */
|
||||
#main #node-8.node-teaser, #main #node-8.node-teaser a {
|
||||
color: #0b7f8a;
|
||||
}
|
||||
/* line 239, jee.scss */
|
||||
#main #node-8 h2.node-title, #main #node-8 h2.node-title a {
|
||||
/* line 252, jee.scss */
|
||||
#main #node-8.node-teaser h2.node-title, #main #node-8.node-teaser h2.node-title a {
|
||||
color: #009aa8;
|
||||
}
|
||||
/* line 240, jee.scss */
|
||||
#main #node-8 .field-name-field-vignette {
|
||||
/* line 253, jee.scss */
|
||||
#main #node-8.node-teaser .field-name-field-vignette {
|
||||
background: transparent url("../assets/img/shadow-juso.png") no-repeat center center;
|
||||
background: none, url("../assets/img/shadow-juso.svg") no-repeat center center;
|
||||
}
|
||||
/* line 241, jee.scss */
|
||||
#main #node-8 .line {
|
||||
/* line 254, jee.scss */
|
||||
#main #node-8.node-teaser .line {
|
||||
background-color: #33b4b5;
|
||||
}
|
||||
/* line 251, jee.scss */
|
||||
/* line 265, jee.scss */
|
||||
#main .node-chapitre.node-teaser {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
@@ -4147,31 +4153,38 @@ div.messages {
|
||||
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
|
||||
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
|
||||
*/
|
||||
/*
|
||||
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
|
||||
| \| __| __| _ | | | ||_ _| | | | \| __|
|
||||
| | | __| __| | | | |__| | | | | | | | | | __|
|
||||
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
|
||||
/*
|
||||
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
|
||||
| \| __| __| _ | | | ||_ _| | | | \| __|
|
||||
| | | __| __| | | | |__| | | | | | | | | | __|
|
||||
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
|
||||
|
||||
*/
|
||||
*/
|
||||
opacity: 1;
|
||||
-webkit-transition: 1s ease-out;
|
||||
transition: 1s ease-out;
|
||||
-webkit-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
|
||||
| _ | __ | __| | | | __| | | | | | | \| __|
|
||||
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|
||||
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
|
||||
| _ | __ | __| | | | __| | | | | | | \| __|
|
||||
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|
||||
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
|
||||
|
||||
*/
|
||||
*/
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
|
||||
| | |_ _| | __| _ |_ _| __| | | | \| __|
|
||||
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|
||||
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
|
||||
*/
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ ____ _____ _____ _____ __ _____ __ __ _____ ____
|
||||
| | | | _ | _ |_ _| __| __ | | \| | __| _ | | | _ | | | __| \
|
||||
| --| | | __| | | | __| -| | | |- -|__ | __| |__| |_ _| __| | |
|
||||
|_____|__|__|__|__|__| |_| |_____|__|__| |____/|_____|_____|__| |_____|__|__| |_| |_____|____/
|
||||
|
||||
*/
|
||||
/*
|
||||
_____________ ____________ ___ __ _____ __ _ __ __ _ _
|
||||
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
|
||||
@@ -4181,7 +4194,7 @@ div.messages {
|
||||
|_| /_/
|
||||
*/
|
||||
}
|
||||
/* line 274, jee.scss */
|
||||
/* line 288, jee.scss */
|
||||
#main .node-chapitre.node-teaser h2.node-title {
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
@@ -4195,11 +4208,11 @@ div.messages {
|
||||
transition-property: transform;
|
||||
z-index: 5;
|
||||
}
|
||||
/* line 281, jee.scss */
|
||||
/* line 295, jee.scss */
|
||||
#main .node-chapitre.node-teaser > .content {
|
||||
position: relative;
|
||||
}
|
||||
/* line 282, jee.scss */
|
||||
/* line 296, jee.scss */
|
||||
#main .node-chapitre.node-teaser .texts {
|
||||
opacity: 0;
|
||||
height: 1px;
|
||||
@@ -4210,7 +4223,7 @@ div.messages {
|
||||
transition-property: opacity height;
|
||||
position: absolute;
|
||||
}
|
||||
/* line 288, jee.scss */
|
||||
/* line 302, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-partie {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
@@ -4219,12 +4232,12 @@ div.messages {
|
||||
-webkit-transition-property: opacity -webkit-transform;
|
||||
transition-property: opacity transform;
|
||||
}
|
||||
/* line 294, jee.scss */
|
||||
/* line 308, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) {
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
}
|
||||
/* line 298, jee.scss */
|
||||
/* line 312, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-type-text {
|
||||
opacity: 0;
|
||||
-webkit-transition: 1s ease-out 0.9s;
|
||||
@@ -4232,12 +4245,12 @@ div.messages {
|
||||
-webkit-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
}
|
||||
/* line 303, jee.scss */
|
||||
/* line 317, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-name-field-vignette {
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
/* line 306, jee.scss */
|
||||
/* line 320, jee.scss */
|
||||
#main .node-chapitre.node-teaser:after {
|
||||
opacity: 0;
|
||||
-webkit-transition: 2s ease-in;
|
||||
@@ -4249,11 +4262,11 @@ div.messages {
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
}
|
||||
/* line 324, jee.scss */
|
||||
/* line 338, jee.scss */
|
||||
#main .node-chapitre.node-teaser.previewed {
|
||||
z-index: 100;
|
||||
}
|
||||
/* line 326, jee.scss */
|
||||
/* line 340, jee.scss */
|
||||
#main .node-chapitre.node-teaser.previewed:after {
|
||||
opacity: 1;
|
||||
top: 2em;
|
||||
@@ -4261,40 +4274,44 @@ div.messages {
|
||||
right: -12em;
|
||||
bottom: -30em;
|
||||
}
|
||||
/* line 333, jee.scss */
|
||||
/* line 347, jee.scss */
|
||||
#main .node-chapitre.node-teaser.previewed h2.node-title {
|
||||
-webkit-transform: scale(2, 2);
|
||||
-ms-transform: scale(2, 2);
|
||||
transform: scale(2, 2);
|
||||
}
|
||||
/* line 334, jee.scss */
|
||||
/* line 348, jee.scss */
|
||||
#main .node-chapitre.node-teaser.previewed .texts {
|
||||
opacity: 1;
|
||||
height: 8em;
|
||||
}
|
||||
/* line 335, jee.scss */
|
||||
/* line 349, jee.scss */
|
||||
#main .node-chapitre.node-teaser.previewed .field-name-field-partie {
|
||||
opacity: 1;
|
||||
z-index: 0;
|
||||
}
|
||||
/* line 338, jee.scss */
|
||||
/* line 352, jee.scss */
|
||||
#main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field {
|
||||
opacity: 1;
|
||||
z-index: -1;
|
||||
cursor: default;
|
||||
}
|
||||
/* line 348, jee.scss */
|
||||
/* line 362, jee.scss */
|
||||
#main .node-chapitre.node-teaser.mitigated {
|
||||
opacity: 0.3;
|
||||
}
|
||||
/* line 361, jee.scss */
|
||||
/* line 373, jee.scss */
|
||||
.chapter-displayed #main .node-chapitre.node-teaser {
|
||||
opacity: 0.1;
|
||||
}
|
||||
/* line 385, jee.scss */
|
||||
#main .node-chapitre.node-teaser:after {
|
||||
content: " ";
|
||||
background-size: contain !important;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
/* line 368, jee.scss */
|
||||
/* line 392, jee.scss */
|
||||
#main .node-chapitre.node-teaser h2.node-title {
|
||||
font-family: "epflulb";
|
||||
font-weight: normal;
|
||||
@@ -4305,30 +4322,30 @@ div.messages {
|
||||
z-index: 5;
|
||||
}
|
||||
@media only screen and (min-width: 64.063em) {
|
||||
/* line 368, jee.scss */
|
||||
/* line 392, jee.scss */
|
||||
#main .node-chapitre.node-teaser h2.node-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 90.063em) {
|
||||
/* line 368, jee.scss */
|
||||
/* line 392, jee.scss */
|
||||
#main .node-chapitre.node-teaser h2.node-title {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
/* line 388, jee.scss */
|
||||
/* line 412, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-comprendre {
|
||||
min-width: 16em;
|
||||
}
|
||||
/* line 389, jee.scss */
|
||||
/* line 413, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 {
|
||||
display: none !important;
|
||||
}
|
||||
/* line 391, jee.scss */
|
||||
/* line 415, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-comprendre p {
|
||||
margin: 0;
|
||||
}
|
||||
/* line 395, jee.scss */
|
||||
/* line 419, jee.scss */
|
||||
#main .node-chapitre.node-teaser ul.links {
|
||||
display: block;
|
||||
margin: 0;
|
||||
@@ -4337,11 +4354,11 @@ div.messages {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
/* line 397, jee.scss */
|
||||
/* line 421, jee.scss */
|
||||
#main .node-chapitre.node-teaser ul.links li.node-readmore {
|
||||
padding: 0;
|
||||
}
|
||||
/* line 399, jee.scss */
|
||||
/* line 423, jee.scss */
|
||||
#main .node-chapitre.node-teaser ul.links li.node-readmore a {
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
@@ -4353,12 +4370,12 @@ div.messages {
|
||||
background: transparent url("../assets/img/readmore-btn.png") no-repeat right center;
|
||||
background: none, url("../assets/img/readmore-btn.svg") no-repeat right center;
|
||||
}
|
||||
/* line 412, jee.scss */
|
||||
/* line 436, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-partie {
|
||||
clear: both;
|
||||
padding-top: 1em;
|
||||
}
|
||||
/* line 416, jee.scss */
|
||||
/* line 440, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-vignette {
|
||||
position: relative;
|
||||
float: left;
|
||||
@@ -4369,28 +4386,28 @@ div.messages {
|
||||
margin-left: 0;
|
||||
background-size: contain;
|
||||
}
|
||||
/* line 429, jee.scss */
|
||||
/* line 453, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-type-text {
|
||||
min-width: 16em;
|
||||
}
|
||||
/* line 430, jee.scss */
|
||||
/* line 454, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-titre {
|
||||
font-family: "epflul";
|
||||
font-size: 1.6em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* line 435, jee.scss */
|
||||
/* line 459, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-sous-titre {
|
||||
font-family: "epflul";
|
||||
font-size: 1.4em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* line 440, jee.scss */
|
||||
/* line 464, jee.scss */
|
||||
#main .node-chapitre.node-teaser .field-name-field-description {
|
||||
font-size: 0.88em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* line 446, jee.scss */
|
||||
/* line 470, jee.scss */
|
||||
#main .node-chapitre.node-teaser .line {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
@@ -4402,13 +4419,177 @@ div.messages {
|
||||
width: 2px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
/* line 457, jee.scss */
|
||||
#main .chapter-wrapper {
|
||||
/* line 489, jee.scss */
|
||||
#main #chapter-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
-webkit-transition: 2s ease-out;
|
||||
transition: 2s ease-out;
|
||||
-webkit-transition-property: opacity;
|
||||
transition-property: opacity;
|
||||
}
|
||||
/* line 498, jee.scss */
|
||||
#main #chapter-wrapper.visible {
|
||||
opacity: 1;
|
||||
z-index: 500;
|
||||
/*
|
||||
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
|
||||
| | | | | | __ | __| | __ | | | | | | | \| __|
|
||||
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|
||||
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
|
||||
*/
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ _____ _____
|
||||
| __| __| | | __| __ | | | | | __|
|
||||
| | | __| | | | __| -|- -| | | | | __|
|
||||
|_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
|
||||
|__|
|
||||
*/
|
||||
}
|
||||
/* line 509, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-2 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-2 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-2 .field-name-field-dbatre li:before {
|
||||
color: #ea5b0c;
|
||||
}
|
||||
/* line 516, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-3 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-3 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-3 .field-name-field-dbatre li:before {
|
||||
color: #cecd00;
|
||||
}
|
||||
/* line 523, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-4 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-4 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-4 .field-name-field-dbatre li:before {
|
||||
color: #de003a;
|
||||
}
|
||||
/* line 530, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-5 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-5 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-5 .field-name-field-dbatre li:before {
|
||||
color: #0066b1;
|
||||
}
|
||||
/* line 537, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-6 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-6 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-6 .field-name-field-dbatre li:before {
|
||||
color: #af1380;
|
||||
}
|
||||
/* line 544, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-7 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-7 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-7 .field-name-field-dbatre li:before {
|
||||
color: #62a530;
|
||||
}
|
||||
/* line 551, jee.scss */
|
||||
#main #chapter-wrapper.visible #node-8 .field-type-text-long .field-label,
|
||||
#main #chapter-wrapper.visible #node-8 h2.node-title,
|
||||
#main #chapter-wrapper.visible #node-8 .field-name-field-dbatre li:before {
|
||||
color: #33b4b5;
|
||||
}
|
||||
/* line 567, jee.scss */
|
||||
#main #chapter-wrapper .node {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/* line 570, jee.scss */
|
||||
#main #chapter-wrapper .node a {
|
||||
color: inherit;
|
||||
}
|
||||
/* line 573, jee.scss */
|
||||
#main #chapter-wrapper .node-title {
|
||||
font-family: "epflulb";
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
max-width: 8.5em;
|
||||
line-height: 0.85;
|
||||
font-size: 2.268em;
|
||||
}
|
||||
/* line 583, jee.scss */
|
||||
#main #chapter-wrapper .node > .field {
|
||||
position: absolute;
|
||||
}
|
||||
/* line 587, jee.scss */
|
||||
#main #chapter-wrapper .field-type-text-long {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
width: 23em;
|
||||
padding: 1em;
|
||||
z-index: 10;
|
||||
}
|
||||
/* line 592, jee.scss */
|
||||
#main #chapter-wrapper .field-type-text-long .field-label {
|
||||
text-transform: uppercase;
|
||||
font-family: "epflulb";
|
||||
font-size: 1.5em;
|
||||
}
|
||||
/* line 598, jee.scss */
|
||||
#main #chapter-wrapper .field-type-text-long h2 {
|
||||
font-size: 0.88em;
|
||||
}
|
||||
/* line 601, jee.scss */
|
||||
#main #chapter-wrapper .field-type-text-long p {
|
||||
font-size: 0.88em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
/* line 606, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-dbatre {
|
||||
left: 60em;
|
||||
}
|
||||
/* line 608, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-dbatre ul {
|
||||
margin-left: 1em;
|
||||
}
|
||||
/* line 610, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-dbatre ul li {
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
}
|
||||
/* line 615, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-dbatre ul li:before {
|
||||
content: "?";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -1em;
|
||||
font-family: "epflul";
|
||||
}
|
||||
/* line 626, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-partie {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
top: 20%;
|
||||
left: 0;
|
||||
}
|
||||
/* line 629, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-partie .field-items {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
/* line 634, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-partie .field-items .field {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
/* line 637, jee.scss */
|
||||
#main #chapter-wrapper .field-name-field-partie .field-items .field .mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* __________ ____ ________________
|
||||
@@ -4417,13 +4598,13 @@ div.messages {
|
||||
/ __/ / /_/ / /_/ / / / / /___/ _, _/
|
||||
/_/ \____/\____/ /_/ /_____/_/ |_|
|
||||
*/
|
||||
/* line 470, jee.scss */
|
||||
/* line 656, jee.scss */
|
||||
#footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
/* line 473, jee.scss */
|
||||
/* line 659, jee.scss */
|
||||
#footer .block {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
@@ -4436,7 +4617,7 @@ div.messages {
|
||||
/ / / // / ___/ / /___
|
||||
/_/ /_/___//____/\____/
|
||||
*/
|
||||
/* line 485, jee.scss */
|
||||
/* line 671, jee.scss */
|
||||
#fullscreen-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@@ -4444,7 +4625,7 @@ div.messages {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* line 499, jee.scss */
|
||||
/* line 685, jee.scss */
|
||||
.bubble-1 {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
@@ -4457,7 +4638,7 @@ div.messages {
|
||||
left: -200px;
|
||||
}
|
||||
|
||||
/* line 503, jee.scss */
|
||||
/* line 689, jee.scss */
|
||||
.bubble-2 {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
@@ -4470,7 +4651,7 @@ div.messages {
|
||||
right: -400px;
|
||||
}
|
||||
|
||||
/* line 508, jee.scss */
|
||||
/* line 694, jee.scss */
|
||||
.star {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
@@ -4488,7 +4669,7 @@ div.messages {
|
||||
/ /_/ / /___/ /_/ / /_/ / /_/ /
|
||||
/_____/_____/_____/\____/\____/
|
||||
*/
|
||||
/* line 522, jee.scss */
|
||||
/* line 708, jee.scss */
|
||||
#fps {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@@ -4496,7 +4677,7 @@ div.messages {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* line 528, jee.scss */
|
||||
/* line 714, jee.scss */
|
||||
#nav-cursor {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
|
||||
@@ -186,59 +186,73 @@ div.messages{
|
||||
*/
|
||||
//SOL
|
||||
#node-2{
|
||||
&::after{ @include bg-svg-png('bgd-sol');}
|
||||
&, a{color:$SOL-col-txt;}
|
||||
h2.node-title{&,a{color:$SOL-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-sol');}
|
||||
.line{background-color:$SOL-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-sol');}
|
||||
&, a{color:$SOL-col-txt;}
|
||||
h2.node-title{&,a{color:$SOL-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-sol');}
|
||||
.line{background-color:$SOL-col-active;}
|
||||
}
|
||||
}
|
||||
//DPH
|
||||
#node-3{
|
||||
&::after{ @include bg-svg-png('bgd-dph');}
|
||||
&, a{color:$DPH-col-txt;}
|
||||
h2.node-title{&,a{color:$DPH-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-dph');}
|
||||
.line{background-color:$DPH-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-dph');}
|
||||
&, a{color:$DPH-col-txt;}
|
||||
h2.node-title{&,a{color:$DPH-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-dph');}
|
||||
.line{background-color:$DPH-col-active;}
|
||||
}
|
||||
}
|
||||
// SUB
|
||||
#node-4{
|
||||
&::after{ @include bg-svg-png('bgd-sub');}
|
||||
&, a{color:$SUB-col-txt;}
|
||||
h2.node-title{&,a{color:$SUB-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-sub');}
|
||||
.line{background-color:$SUB-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-sub');}
|
||||
&, a{color:$SUB-col-txt;}
|
||||
h2.node-title{&,a{color:$SUB-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-sub');}
|
||||
.line{background-color:$SUB-col-active;}
|
||||
}
|
||||
}
|
||||
// BC
|
||||
#node-5{
|
||||
&::after{ @include bg-svg-png('bgd-bc');}
|
||||
&, a{color:$BC-col-txt;}
|
||||
h2.node-title{&,a{color:$BC-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-bc');}
|
||||
.line{background-color:$BC-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-bc');}
|
||||
&, a{color:$BC-col-txt;}
|
||||
h2.node-title{&,a{color:$BC-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-bc');}
|
||||
.line{background-color:$BC-col-active;}
|
||||
}
|
||||
}
|
||||
//OPP
|
||||
#node-6{
|
||||
&::after{ @include bg-svg-png('bgd-opp');}
|
||||
&, a{color:$OPP-col-txt;}
|
||||
h2.node-title{&,a{color:$OPP-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-opp');}
|
||||
.line{background-color:$OPP-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-opp');}
|
||||
&, a{color:$OPP-col-txt;}
|
||||
h2.node-title{&,a{color:$OPP-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-opp');}
|
||||
.line{background-color:$OPP-col-active;}
|
||||
}
|
||||
}
|
||||
//DUB
|
||||
#node-7{
|
||||
&::after{ @include bg-svg-png('bgd-dub');}
|
||||
&, a{color:$DUB-col-txt;}
|
||||
h2.node-title{&,a{color:$DUB-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-dub');}
|
||||
.line{background-color:$DUB-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-dub');}
|
||||
&, a{color:$DUB-col-txt;}
|
||||
h2.node-title{&,a{color:$DUB-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-dub');}
|
||||
.line{background-color:$DUB-col-active;}
|
||||
}
|
||||
}
|
||||
// JUSO
|
||||
#node-8{
|
||||
&::after{ @include bg-svg-png('bgd-juso');}
|
||||
&, a{color:$JUSO-col-txt;}
|
||||
h2.node-title{&,a{color:$JUSO-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-juso');}
|
||||
.line{background-color:$JUSO-col-active;}
|
||||
&.node-teaser{
|
||||
&::after{ @include bg-svg-png('bgd-juso');}
|
||||
&, a{color:$JUSO-col-txt;}
|
||||
h2.node-title{&,a{color:$JUSO-color;}}
|
||||
.field-name-field-vignette{@include bg-svg-png('shadow-juso');}
|
||||
.line{background-color:$JUSO-col-active;}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -250,215 +264,387 @@ div.messages{
|
||||
*/
|
||||
.node-chapitre.node-teaser{
|
||||
z-index: 2;
|
||||
position:absolute;
|
||||
position:absolute;
|
||||
|
||||
/*
|
||||
_____ __________________ ___ _________________ __________________
|
||||
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
|
||||
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
|
||||
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
|
||||
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
|
||||
*/
|
||||
/*
|
||||
_____ __________________ ___ _________________ __________________
|
||||
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
|
||||
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
|
||||
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
|
||||
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
|
||||
*/
|
||||
|
||||
/*
|
||||
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
|
||||
| \| __| __| _ | | | ||_ _| | | | \| __|
|
||||
| | | __| __| | | | |__| | | | | | | | | | __|
|
||||
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
|
||||
/*
|
||||
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
|
||||
| \| __| __| _ | | | ||_ _| | | | \| __|
|
||||
| | | __| __| | | | |__| | | | | | | | | | __|
|
||||
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
|
||||
|
||||
*/
|
||||
opacity:1;
|
||||
*/
|
||||
opacity:1;
|
||||
transition:1s ease-out;
|
||||
transition-property:opacity;
|
||||
|
||||
h2.node-title{
|
||||
transform:none;
|
||||
transform-origin:bottom center;
|
||||
transition:1s ease-out;
|
||||
transition-property:opacity;
|
||||
|
||||
h2.node-title{
|
||||
transform:none;
|
||||
transform-origin:bottom center;
|
||||
transition:1s ease-out;
|
||||
transition-property:transform;
|
||||
z-index:5;
|
||||
}
|
||||
>.content{position:relative;}
|
||||
.texts{
|
||||
opacity:0; height:1px; overflow:hidden;
|
||||
transition:1s ease-out;
|
||||
transition-property:opacity height;
|
||||
position:absolute;
|
||||
}
|
||||
.field-name-field-partie{
|
||||
opacity:0;
|
||||
position:absolute;
|
||||
transition:1s ease-in-out 0.1s;
|
||||
transition-property: opacity transform;
|
||||
// just let see the field vignette of first partie
|
||||
&:nth-child(2){
|
||||
z-index:2;
|
||||
opacity:1;
|
||||
// transition-delay:0;
|
||||
>.field-type-text{
|
||||
opacity:0;
|
||||
transition:1s ease-out 0.9s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
>.field-name-field-vignette{cursor:pointer;z-index:2;}
|
||||
}
|
||||
}
|
||||
&:after{
|
||||
transition-property:transform;
|
||||
z-index:5;
|
||||
}
|
||||
>.content{position:relative;}
|
||||
.texts{
|
||||
opacity:0; height:1px; overflow:hidden;
|
||||
transition:1s ease-out;
|
||||
transition-property:opacity height;
|
||||
position:absolute;
|
||||
}
|
||||
.field-name-field-partie{
|
||||
opacity:0;
|
||||
transition: 2s ease-in;
|
||||
transition-property:opacity;
|
||||
top:1px; left:1px; bottom:2px; right:2px;
|
||||
}
|
||||
.line{
|
||||
// transition: 0.1s ease-out;
|
||||
// transition-property:height transform;
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
|
||||
| _ | __ | __| | | | __| | | | | | | \| __|
|
||||
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|
||||
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
|
||||
|
||||
*/
|
||||
&.previewed{
|
||||
z-index:100;
|
||||
&:after{
|
||||
position:absolute;
|
||||
transition:1s ease-in-out 0.1s;
|
||||
transition-property: opacity transform;
|
||||
// just let see the field vignette of first partie
|
||||
&:nth-child(2){
|
||||
z-index:2;
|
||||
opacity:1;
|
||||
$pad:-2em;
|
||||
top:-$pad;
|
||||
left:$pad*6; right:$pad*6;
|
||||
bottom:$pad*15;
|
||||
}
|
||||
h2.node-title{transform:scale(2,2);}
|
||||
.texts{opacity:1; height:8em;}
|
||||
.field-name-field-partie{
|
||||
opacity:1; z-index:0;
|
||||
// display all fields inside each parties
|
||||
>.field{opacity:1; z-index:-1; cursor:default;}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
|
||||
| | |_ _| | __| _ |_ _| __| | | | \| __|
|
||||
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|
||||
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
|
||||
*/
|
||||
&.mitigated{
|
||||
opacity:0.3;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
_____________ ____________ ___ __ _____ __ _ __ __ _ _
|
||||
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
|
||||
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
|
||||
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
|
||||
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|
||||
|_| /_/
|
||||
*/
|
||||
&:after{ // background
|
||||
content:" ";
|
||||
background-size:contain!important;
|
||||
position:absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
h2.node-title{
|
||||
font-family: "epflulb";
|
||||
font-weight:normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
max-width: 8.5em;
|
||||
line-height: 0.85;
|
||||
@media #{$large-up} {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
@media #{$xlarge-up} {
|
||||
font-size:1.8em;
|
||||
}
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.texts{
|
||||
// position:relative;
|
||||
}
|
||||
|
||||
.field-name-field-comprendre{
|
||||
h1,h2,h3,h4,h5,h6{display:none!important;}
|
||||
// max-width:15em;
|
||||
p{margin:0;}
|
||||
min-width:16em;
|
||||
}
|
||||
|
||||
ul.links{
|
||||
display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
|
||||
li.node-readmore{
|
||||
padding:0;
|
||||
a{
|
||||
display:inline-block;
|
||||
height:25px;
|
||||
font-family: "open_sans";
|
||||
font-weight: 900;
|
||||
color:#000!important;
|
||||
width:8em; text-align: left;
|
||||
// background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
|
||||
@include bg-svg-png('readmore-btn', no-repeat, right, center);
|
||||
// transition-delay:0;
|
||||
>.field-type-text{
|
||||
opacity:0;
|
||||
transition:1s ease-out 0.9s;
|
||||
transition-property: opacity;
|
||||
}
|
||||
>.field-name-field-vignette{cursor:pointer;z-index:2;}
|
||||
}
|
||||
}
|
||||
&:after{
|
||||
opacity:0;
|
||||
transition: 2s ease-in;
|
||||
transition-property:opacity;
|
||||
top:1px; left:1px; bottom:2px; right:2px;
|
||||
}
|
||||
.line{
|
||||
// transition: 0.1s ease-out;
|
||||
// transition-property:height transform;
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
|
||||
| _ | __ | __| | | | __| | | | | | | \| __|
|
||||
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|
||||
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
|
||||
|
||||
*/
|
||||
&.previewed{
|
||||
z-index:100;
|
||||
&:after{
|
||||
opacity:1;
|
||||
$pad:-2em;
|
||||
top:-$pad;
|
||||
left:$pad*6; right:$pad*6;
|
||||
bottom:$pad*15;
|
||||
}
|
||||
h2.node-title{transform:scale(2,2);}
|
||||
.texts{opacity:1; height:8em;}
|
||||
.field-name-field-partie{
|
||||
opacity:1; z-index:0;
|
||||
// display all fields inside each parties
|
||||
>.field{opacity:1; z-index:-1; cursor:default;}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ ____ _____
|
||||
| | |_ _| | __| _ |_ _| __| | | | \| __|
|
||||
| | | |- -| | | |- -| | | | | | | __| | | | | | | | | __|
|
||||
|_|_|_|_____| |_| |_____|_____|__|__| |_| |_____| |_|_|_|_____|____/|_____|
|
||||
*/
|
||||
&.mitigated{
|
||||
opacity:0.3;
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ ____ _____ _____ _____ __ _____ __ __ _____ ____
|
||||
| | | | _ | _ |_ _| __| __ | | \| | __| _ | | | _ | | | __| \
|
||||
| --| | | __| | | | __| -| | | |- -|__ | __| |__| |_ _| __| | |
|
||||
|_____|__|__|__|__|__| |_| |_____|__|__| |____/|_____|_____|__| |_____|__|__| |_| |_____|____/
|
||||
|
||||
*/
|
||||
.chapter-displayed & {
|
||||
opacity:0.1;
|
||||
}
|
||||
|
||||
/*
|
||||
_____________ ____________ ___ __ _____ __ _ __ __ _ _
|
||||
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
|
||||
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
|
||||
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
|
||||
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|
||||
|_| /_/
|
||||
*/
|
||||
&:after{ // background
|
||||
content:" ";
|
||||
background-size:contain!important;
|
||||
position:absolute;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
h2.node-title{
|
||||
font-family: "epflulb";
|
||||
font-weight:normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
max-width: 8.5em;
|
||||
line-height: 0.85;
|
||||
@media #{$large-up} {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
@media #{$xlarge-up} {
|
||||
font-size:1.8em;
|
||||
}
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.texts{
|
||||
// position:relative;
|
||||
}
|
||||
|
||||
.field-name-field-comprendre{
|
||||
h1,h2,h3,h4,h5,h6{display:none!important;}
|
||||
// max-width:15em;
|
||||
p{margin:0;}
|
||||
min-width:16em;
|
||||
}
|
||||
|
||||
ul.links{
|
||||
display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
|
||||
li.node-readmore{
|
||||
padding:0;
|
||||
a{
|
||||
display:inline-block;
|
||||
height:25px;
|
||||
font-family: "open_sans";
|
||||
font-weight: 900;
|
||||
color:#000!important;
|
||||
width:8em; text-align: left;
|
||||
// background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
|
||||
@include bg-svg-png('readmore-btn', no-repeat, right, center);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.field-name-field-partie{clear:both; padding-top:1em;}
|
||||
.field-name-field-partie{clear:both; padding-top:1em;}
|
||||
|
||||
|
||||
$shadow-size:3.5em;
|
||||
.field-name-field-vignette{
|
||||
position:relative;
|
||||
float:left;
|
||||
$shadow-size:3.5em;
|
||||
.field-name-field-vignette{
|
||||
position:relative;
|
||||
float:left;
|
||||
$shadow-size:3.5em;
|
||||
padding:$shadow-size;
|
||||
margin-top:-$shadow-size*1.15;
|
||||
margin-right:-$shadow-size+1.5em;
|
||||
margin-bottom:0;
|
||||
margin-left:0;
|
||||
background-size: contain;
|
||||
// background-repeat: no-repeat;
|
||||
// background-origin: center center;
|
||||
}
|
||||
.field-type-text{ min-width:16em; }
|
||||
.field-name-field-titre{
|
||||
font-family: "epflul";
|
||||
font-size:1.6em;
|
||||
line-height:1.1;
|
||||
}
|
||||
.field-name-field-sous-titre{
|
||||
font-family: "epflul";
|
||||
font-size:1.4em;
|
||||
line-height:1.2;
|
||||
}
|
||||
.field-name-field-description{
|
||||
// font-family: "epf-lul";
|
||||
font-size:0.88em;
|
||||
line-height:1.2;
|
||||
}
|
||||
padding:$shadow-size;
|
||||
margin-top:-$shadow-size*1.15;
|
||||
margin-right:-$shadow-size+1.5em;
|
||||
margin-bottom:0;
|
||||
margin-left:0;
|
||||
background-size: contain;
|
||||
// background-repeat: no-repeat;
|
||||
// background-origin: center center;
|
||||
}
|
||||
.field-type-text{ min-width:16em; }
|
||||
.field-name-field-titre{
|
||||
font-family: "epflul";
|
||||
font-size:1.6em;
|
||||
line-height:1.1;
|
||||
}
|
||||
.field-name-field-sous-titre{
|
||||
font-family: "epflul";
|
||||
font-size:1.4em;
|
||||
line-height:1.2;
|
||||
}
|
||||
.field-name-field-description{
|
||||
// font-family: "epf-lul";
|
||||
font-size:0.88em;
|
||||
line-height:1.2;
|
||||
}
|
||||
|
||||
.line{
|
||||
z-index:-1;
|
||||
position:absolute;
|
||||
top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
|
||||
transform-origin:top left;
|
||||
width:2px; //background-color:red;
|
||||
opacity:0.4;
|
||||
}
|
||||
.line{
|
||||
z-index:-1;
|
||||
position:absolute;
|
||||
top:$shadow-size - 0.5em; left:$shadow-size+2.5em;
|
||||
transform-origin:top left;
|
||||
width:2px; //background-color:red;
|
||||
opacity:0.4;
|
||||
}
|
||||
|
||||
} // node-chapitre
|
||||
|
||||
.chapter-wrapper{
|
||||
|
||||
/* ____ ____ _______ ____________ ________ _____ ____ ________________ _____
|
||||
/ __ \/ __ \/ ____/ | / / ____/ __ \ / ____/ / / / | / __ \/_ __/ ____/ __ \/ ___/
|
||||
/ / / / /_/ / __/ / |/ / __/ / / / / / / / /_/ / /| | / /_/ / / / / __/ / /_/ /\__ \
|
||||
/ /_/ / ____/ /___/ /| / /___/ /_/ / / /___/ __ / ___ |/ ____/ / / / /___/ _, _/___/ /
|
||||
\____/_/ /_____/_/ |_/_____/_____/ \____/_/ /_/_/ |_/_/ /_/ /_____/_/ |_|/____/
|
||||
*/
|
||||
|
||||
#chapter-wrapper{
|
||||
position:absolute;
|
||||
top:0; left:0; bottom:0; right:0;
|
||||
}
|
||||
} // main
|
||||
top:0; left:0;
|
||||
width:100%; height:100%;
|
||||
z-index: -1;
|
||||
opacity:0;
|
||||
transition:2s ease-out;
|
||||
transition-property:opacity;
|
||||
|
||||
&.visible{
|
||||
opacity:1;
|
||||
z-index: 500;
|
||||
/*
|
||||
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
|
||||
| | | | | | __ | __| | __ | | | | | | | \| __|
|
||||
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|
||||
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
|
||||
*/
|
||||
|
||||
#node-2{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$SOL-col-active;
|
||||
}
|
||||
}
|
||||
#node-3{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$DPH-col-active;
|
||||
}
|
||||
}
|
||||
#node-4{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$SUB-col-active;
|
||||
}
|
||||
}
|
||||
#node-5{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$BC-col-active;
|
||||
}
|
||||
}
|
||||
#node-6{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$OPP-col-active;
|
||||
}
|
||||
}
|
||||
#node-7{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$DUB-col-active;
|
||||
}
|
||||
}
|
||||
#node-8{
|
||||
.field-type-text-long .field-label,
|
||||
h2.node-title,
|
||||
.field-name-field-dbatre li:before{
|
||||
color:$JUSO-col-active;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _____ _____ _____ _____ _____ _____ _____ _____
|
||||
| __| __| | | __| __ | | | | | __|
|
||||
| | | __| | | | __| -|- -| | | | | __|
|
||||
|_____|_____|_|___|_____|__|__|_____|__ _|_____|_____|
|
||||
|__|
|
||||
*/
|
||||
}
|
||||
|
||||
.node{
|
||||
position:relative;
|
||||
height:100%; width:100%;
|
||||
a{color:inherit;}
|
||||
}
|
||||
|
||||
.node-title{
|
||||
font-family: "epflulb";
|
||||
font-weight:normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
max-width: 8.5em;
|
||||
line-height: 0.85;
|
||||
font-size: 2.268em;
|
||||
}
|
||||
|
||||
.node>.field{
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.field-type-text-long{
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
width:23em; padding:1em;
|
||||
z-index:10;
|
||||
|
||||
.field-label{
|
||||
text-transform: uppercase;
|
||||
font-family: "epflulb";
|
||||
font-size:1.5em;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size:0.88em;
|
||||
}
|
||||
p{
|
||||
font-size: 0.88em;
|
||||
margin-bottom:0.5em;
|
||||
}
|
||||
}
|
||||
.field-name-field-dbatre{
|
||||
left:60em;
|
||||
ul{
|
||||
margin-left:1em;
|
||||
li{
|
||||
list-style: none;
|
||||
line-height:1;
|
||||
margin-bottom: 1em;
|
||||
position:relative;
|
||||
&:before{
|
||||
content:"?";
|
||||
position:absolute;
|
||||
top:0; left:-1em;
|
||||
font-family: "epflul";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.field-name-field-partie{
|
||||
height:60%; width:100%;
|
||||
top:20%; left:0;
|
||||
.field-items{
|
||||
position:relative;
|
||||
top:0; left:0;
|
||||
height:100%; width:auto;
|
||||
// overflow:hidden;
|
||||
.field{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
.mask{
|
||||
position:absolute;
|
||||
width:100%; height:100%;
|
||||
top:0; left:0;
|
||||
z-index:10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} // #chapter-wrapper
|
||||
} // #main
|
||||
|
||||
/* __________ ____ ________________
|
||||
/ ____/ __ \/ __ \/_ __/ ____/ __ \
|
||||
@@ -531,4 +717,4 @@ div.messages{
|
||||
margin-top: -3px; margin-left: -3px;
|
||||
background-color: red;
|
||||
z-index:1000;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,10 +7,12 @@ core = "7.x"
|
||||
engine = "phptemplate"
|
||||
|
||||
;----------// Styles
|
||||
stylesheets[all][] = "bower_components/Peppermint/dist/peppermint.required.css"
|
||||
stylesheets[all][] = "css/jee.css"
|
||||
|
||||
;----------// Scripts
|
||||
scripts[] = "bower_components/jquery.transit/jquery.transit.js"
|
||||
scripts[] = "bower_components/jquery.pep/src/jquery.pep.js"
|
||||
scripts[] = "bower_components/Peppermint/dist/peppermint.min.js"
|
||||
scripts[] = "js/jee.js"
|
||||
|
||||
;----------// Regions
|
||||
|
||||
@@ -35,6 +35,9 @@ jQuery(document).ready(function($) {
|
||||
_fps = 1000/12,
|
||||
_dragging = false, _timeout_dragging;
|
||||
|
||||
var _$chapter_wrapper = $('<div>').attr('id', 'chapter-wrapper').appendTo(_$container),
|
||||
_loaded_chapter = false;
|
||||
|
||||
var _bubbles = new Array(),
|
||||
_stars = new Array();
|
||||
|
||||
@@ -46,17 +49,17 @@ jQuery(document).ready(function($) {
|
||||
initChapters();
|
||||
launchNav();
|
||||
|
||||
// FULL SCREEN
|
||||
var $fullscreenBtn = $('<div>enter</div>').attr('id','fullscreen-btn').appendTo("#root");
|
||||
// Launch fullscreen for browsers that support it!
|
||||
$fullscreenBtn.on('click', function(e){
|
||||
// launchIntoFullscreen(document.documentElement); // the whole page
|
||||
launchIntoFullscreen(document.getElementById("root")); // any individual element
|
||||
});
|
||||
$fullscreenBtn.on('click', onFullScreen);
|
||||
|
||||
|
||||
// create bubbles
|
||||
for (var i = 2; i > 0; i--) {
|
||||
_bubbles.push($('<div>').addClass('bubble bubble-'+i).prependTo(_$container));
|
||||
};
|
||||
|
||||
// create stars
|
||||
for (var i = 20; i > 0; i--) {
|
||||
_stars.push(
|
||||
$('<div>')
|
||||
@@ -116,15 +119,19 @@ jQuery(document).ready(function($) {
|
||||
|____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____|
|
||||
*/
|
||||
.bind('mousedown', function(e){
|
||||
console.log('mousedown');
|
||||
console.log('document mousedown');
|
||||
clearTimeout(_timeout_dragging);
|
||||
|
||||
if(_loaded_chapter)
|
||||
return false;
|
||||
|
||||
// set initial cursor pos
|
||||
_mouse_down_pos.x = e.clientX;
|
||||
_mouse_down_pos.y = e.clientY;
|
||||
updateNavPos(e.clientX, e.clientY, true);
|
||||
|
||||
$(this).bind('mousemove', function(e){
|
||||
console.log('mousemove');
|
||||
console.log('document mousemove');
|
||||
updateNavPos(e.clientX, e.clientY, false);
|
||||
});
|
||||
|
||||
@@ -135,9 +142,14 @@ jQuery(document).ready(function($) {
|
||||
}
|
||||
})
|
||||
.bind('mouseup', function(e){
|
||||
console.log('mouseup');
|
||||
console.log('document mouseup');
|
||||
|
||||
if(_loaded_chapter)
|
||||
return false;
|
||||
|
||||
stopMoveNav();
|
||||
$(this).unbind('mousemove');
|
||||
|
||||
// close all preview
|
||||
if(Math.abs(e.clientX - _mouse_down_pos.x) < 2
|
||||
&& Math.abs(e.clientY - _mouse_down_pos.y) < 2)
|
||||
@@ -150,7 +162,7 @@ jQuery(document).ready(function($) {
|
||||
| | | | | | | --| | | __| | | __| | | | | | |__ |
|
||||
|_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____|
|
||||
*/
|
||||
.bind('touchstart', function(e){
|
||||
.bind('document touchstart', function(e){
|
||||
console.log('touchstart');
|
||||
clearTimeout(_timeout_dragging);
|
||||
// set initial pos
|
||||
@@ -163,11 +175,11 @@ jQuery(document).ready(function($) {
|
||||
}
|
||||
})
|
||||
.bind('touchmove', function(e){
|
||||
console.log('touchmove');
|
||||
console.log('document touchmove');
|
||||
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
|
||||
})
|
||||
.bind('touchend', function(e){
|
||||
console.log("touchend");
|
||||
console.log("document touchend");
|
||||
stopMoveNav();
|
||||
});
|
||||
};
|
||||
@@ -256,6 +268,11 @@ jQuery(document).ready(function($) {
|
||||
stopMoveNav();
|
||||
};
|
||||
|
||||
function onFullScreen(e){
|
||||
launchIntoFullscreen(document.getElementById("root"));
|
||||
if(_loaded_chapter)
|
||||
setTimeout(_loaded_chapter.buildVideos(), 100);
|
||||
};
|
||||
/*
|
||||
________ __
|
||||
/ ____/ /_ ____ _____ / /____ _____
|
||||
@@ -295,6 +312,13 @@ jQuery(document).ready(function($) {
|
||||
this.linesAnimeStartTime = 0,
|
||||
this.linesAnimeDuration = 2000; // milli sec
|
||||
|
||||
// chapter
|
||||
this.$n = false;
|
||||
this.$blocks = false;
|
||||
this.$vids = false;
|
||||
this.texts_pos = shuffleArray([1,2,3]);
|
||||
this.dimvideo = {w:0, h:0};
|
||||
|
||||
// prototypes
|
||||
if (typeof Chapter.initialized == "undefined") {
|
||||
|
||||
@@ -376,8 +400,8 @@ jQuery(document).ready(function($) {
|
||||
// )
|
||||
// ));
|
||||
|
||||
if(this.i === 0)
|
||||
console.log(this.i+" this.trans.z", this.trans.z);
|
||||
// if(this.i === 0)
|
||||
// console.log(this.i+" this.trans.z", this.trans.z);
|
||||
|
||||
this.$e.css({
|
||||
transform:'translate3d('+this.trans.x+'px,'+this.trans.y+'px,0)'
|
||||
@@ -526,16 +550,119 @@ jQuery(document).ready(function($) {
|
||||
$.getJSON(
|
||||
'/jee/chapter/'+this.nid,
|
||||
{},
|
||||
this.displayNode
|
||||
this.nodeLoaded.bind(this)
|
||||
);
|
||||
_$body.addClass('chapter-displayed');
|
||||
};
|
||||
|
||||
Chapter.prototype.displayNode = function(json, textstatus){
|
||||
console.log('Chapter :: displayNode : json', json);
|
||||
Chapter.prototype.nodeLoaded = function(json, textstatus){
|
||||
console.log('Chapter :: nodeLoaded '+this.nid+' : json', json);
|
||||
|
||||
// insert ajax loaded into dom
|
||||
_$chapter_wrapper.html(json.node);
|
||||
|
||||
// record some usefull data
|
||||
this.$n = $('.node-chapitre', _$chapter_wrapper);
|
||||
this.$blocks = $('.field-type-text-long', this.$n);
|
||||
this.$vids = $('.field-name-field-partie', this.$n);
|
||||
|
||||
// record the current loaded chapter
|
||||
// this will stop first interface to run
|
||||
_loaded_chapter = this;
|
||||
|
||||
// wait to build correct display of chapter
|
||||
setTimeout(this.displayNode.bind(this), 100);
|
||||
};
|
||||
|
||||
Chapter.prototype.displayNode = function(){
|
||||
console.log('Chapter :: displayNode '+this.nid);
|
||||
|
||||
// place text blocks
|
||||
this.texts_pos = shuffleArray([1,2,3]);
|
||||
this.$blocks
|
||||
.each(this.placeText.bind(this))
|
||||
.pep({
|
||||
allowDragEventPropagation:false,
|
||||
disableSelect:true,
|
||||
velocityMultiplier:1
|
||||
});
|
||||
|
||||
// build video player
|
||||
this.buildVideos();
|
||||
|
||||
$('.node-title', this.$n).pep();
|
||||
|
||||
// show the whole thing
|
||||
_$chapter_wrapper.addClass('visible');
|
||||
};
|
||||
|
||||
Chapter.prototype.placeText = function(i, e){
|
||||
// console.log("Chapter :: placeText", e);
|
||||
switch(this.texts_pos[i]){
|
||||
case 1: // top right
|
||||
$(e)
|
||||
.css({
|
||||
top:randB(_container.h*0.05-$(e).height(),_container.h*0.15-$(e).height()),
|
||||
left:randB(_container.w*0.8-$(e).width(),_container.w*0.9-$(e).width())
|
||||
})
|
||||
// .pep({debug:true, startPos:{bottom:randB(80,90),right:randB(80,90)}})
|
||||
.find('.field-label')
|
||||
.appendTo(e);
|
||||
break;
|
||||
case 2: // bottom left
|
||||
$(e).css({
|
||||
top:randB(_container.h*0.8,_container.h*0.9),
|
||||
left:randB(_container.w*0.1,_container.w*0.2)
|
||||
});
|
||||
// $(e).pep({debug:true, startPos:{top:randB(80,90),left:randB(10,30)}});
|
||||
break;
|
||||
case 3: // bottom right
|
||||
$(e).css({
|
||||
top:randB(_container.h*0.8,_container.h*0.9),
|
||||
left:randB(_container.w*0.7,_container.w*0.9-$(e).width())
|
||||
});
|
||||
// $(e).pep({debug:true, startPos:{top:randB(80,90),right:randB(10,30)}});
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
Chapter.prototype.buildVideos = function(){
|
||||
console.log('Chapter :: buildVideos');
|
||||
|
||||
this.dimvideo.h = this.$vids.height();
|
||||
|
||||
// redim each iframe to fit
|
||||
// add a mask on top of each iframe to avoid bad interaction with vimeo
|
||||
$('iframe', this.$vids)
|
||||
.each(this.redimVideo.bind(this))
|
||||
.after('<div class="mask"></div>');
|
||||
|
||||
this.$vids.css({
|
||||
width:this.dimvideo.w*1.3,
|
||||
height:this.dimvideo.h,
|
||||
marginLeft:(_container.w-this.dimvideo.w*1.3)/2
|
||||
});
|
||||
|
||||
// create the slider with peppermint
|
||||
$('.field-items', this.$vids).Peppermint();
|
||||
};
|
||||
|
||||
Chapter.prototype.redimVideo = function(i,e){
|
||||
// compute proportional video width ragarding the parent height
|
||||
this.dimvideo.w = (this.dimvideo.h * parseInt($(e).attr("width")))/parseInt($(e).attr("height"));
|
||||
// apply thees sizes
|
||||
$(e)
|
||||
.css({ width:this.dimvideo.w, height:this.dimvideo.h })
|
||||
.attr({ width:this.dimvideo.w, height:this.dimvideo.h })
|
||||
// add some paading to parent for slider display
|
||||
.parent().css({
|
||||
paddingLeft:this.dimvideo.w*0.15,
|
||||
paddingright:this.dimvideo.w*0.15
|
||||
});
|
||||
};
|
||||
|
||||
Node.initialized = true;
|
||||
}
|
||||
};
|
||||
|
||||
this.init();
|
||||
};//Chapter
|
||||
@@ -566,6 +693,10 @@ jQuery(document).ready(function($) {
|
||||
};
|
||||
}
|
||||
|
||||
function translate3d(x, y, z){
|
||||
// return
|
||||
};
|
||||
|
||||
/*
|
||||
_ _ __
|
||||
(_)___ (_) /_
|
||||
@@ -577,7 +708,55 @@ jQuery(document).ready(function($) {
|
||||
init();
|
||||
});
|
||||
|
||||
/*
|
||||
____ __ __ _____________ _______
|
||||
/ __ \/ / / / / / ____/ _/ | / / ___/
|
||||
/ /_/ / / / / / / / __ / // |/ /\__ \
|
||||
/ ____/ /___/ /_/ / /_/ // // /| /___/ /
|
||||
/_/ /_____/\____/\____/___/_/ |_//____/
|
||||
*/
|
||||
// https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
|
||||
// (function($) {
|
||||
// $.fn.drags = function(opt) {
|
||||
|
||||
// opt = $.extend({handle:"",cursor:"move"}, opt);
|
||||
|
||||
// if(opt.handle === "") {
|
||||
// var $el = this;
|
||||
// } else {
|
||||
// var $el = this.find(opt.handle);
|
||||
// }
|
||||
|
||||
// return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
|
||||
// if(opt.handle === "") {
|
||||
// var $drag = $(this).addClass('draggable');
|
||||
// } else {
|
||||
// var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
|
||||
// }
|
||||
// var z_idx = $drag.css('z-index'),
|
||||
// drg_h = $drag.outerHeight(),
|
||||
// drg_w = $drag.outerWidth(),
|
||||
// pos_y = $drag.offset().top + drg_h - e.pageY,
|
||||
// pos_x = $drag.offset().left + drg_w - e.pageX;
|
||||
// $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
|
||||
// $('.draggable').offset({
|
||||
// top:e.pageY + pos_y - drg_h,
|
||||
// left:e.pageX + pos_x - drg_w
|
||||
// }).on("mouseup", function() {
|
||||
// $(this).removeClass('draggable').css('z-index', z_idx);
|
||||
// });
|
||||
// });
|
||||
// e.preventDefault(); // disable selection
|
||||
// }).on("mouseup", function() {
|
||||
// if(opt.handle === "") {
|
||||
// $(this).removeClass('draggable');
|
||||
// } else {
|
||||
// $(this).removeClass('active-handle').parent().removeClass('draggable');
|
||||
// }
|
||||
// });
|
||||
|
||||
// }
|
||||
// })(jQuery);
|
||||
|
||||
/*
|
||||
____ __________ __ ___________________ ___ _ ________ ______ ______________ _ __ __________ ___ __ _________
|
||||
|
||||
@@ -21,8 +21,6 @@ $heads['HandheldFriendly'] = array(
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
|
||||
# Mobile Viewport Fix
|
||||
# j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
|
||||
# device-width : Occupy full width of the screen in its current orientation
|
||||
@@ -33,12 +31,10 @@ $heads['viewport'] = array(
|
||||
'#tag' => 'meta',
|
||||
'#attributes' => array(
|
||||
'name' => 'viewport',
|
||||
'content' => 'width=device-width,initial-scale=1',
|
||||
'content' => 'width=device-width,initial-scale=1,maximum-scale=1',
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
|
||||
# Add these icons links to your sub theme
|
||||
# or Place favicon.ico and apple-touch-icon.png in the root of your domain and delete these references
|
||||
|
||||
@@ -62,6 +58,22 @@ $heads['apple-touch-icon'] = array(
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
$heads['manifest'] = array(
|
||||
'#tag' => 'link',
|
||||
'#attributes' => array(
|
||||
'href' => base_path() . path_to_theme() .'/manifest.webapp'
|
||||
),
|
||||
);
|
||||
|
||||
$heads['manifest'] = array(
|
||||
'#tag' => 'meta',
|
||||
'#attributes' => array(
|
||||
'name' => "application-name",
|
||||
'content' => "Store Finder"
|
||||
),
|
||||
);
|
||||
|
||||
foreach ($heads as $type=>$head)
|
||||
drupal_add_html_head($head, $type);
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
|
||||
<div class="field-items"<?php print $content_attributes; ?>>
|
||||
<?php foreach ($items as $delta => $item): ?>
|
||||
<?php print render($item); ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</section>
|
||||
@@ -50,7 +50,7 @@ HTML comment.
|
||||
-->
|
||||
<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
|
||||
<?php if (!$label_hidden): ?>
|
||||
<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>: </div>
|
||||
<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if(count($items) > 1): ?>
|
||||
<div class="field-items"<?php print $content_attributes; ?>>
|
||||
|
||||
@@ -58,11 +58,10 @@
|
||||
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
|
||||
Remove this if you use the .htaccess -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> -->
|
||||
|
||||
<?php print $head; ?>
|
||||
|
||||
|
||||
<title><?php print $head_title; ?></title>
|
||||
<?php print $styles; ?>
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
|
||||
<?php if (!$page): ?>
|
||||
<h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
|
||||
<?php endif; ?>
|
||||
<div class="content">
|
||||
<?php
|
||||
// We hide the comments and links now so that we can render them later.
|
||||
// dsm($content, "content");
|
||||
hide($content['comments']);
|
||||
hide($content['links']);
|
||||
hide($content['field_comprendre']);
|
||||
?>
|
||||
<div class="texts">
|
||||
<?php
|
||||
print render($content['field_comprendre']);
|
||||
print render($content['links']);
|
||||
?>
|
||||
</div>
|
||||
<?php print render($content); ?>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,21 +1,13 @@
|
||||
<section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
|
||||
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
|
||||
|
||||
<?php if (!$page): ?>
|
||||
<h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
|
||||
<h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
|
||||
<?php endif; ?>
|
||||
<div class="content">
|
||||
<?php
|
||||
<?php
|
||||
// We hide the comments and links now so that we can render them later.
|
||||
// dsm($content, "content");
|
||||
hide($content['comments']);
|
||||
hide($content['links']);
|
||||
hide($content['field_comprendre']);
|
||||
// hide($content['links']);
|
||||
print render($content);
|
||||
// print render($content['links']);
|
||||
?>
|
||||
<div class="texts">
|
||||
<?php
|
||||
print render($content['field_comprendre']);
|
||||
print render($content['links']);
|
||||
?>
|
||||
</div>
|
||||
<?php print render($content); ?>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
<?php
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation to display a video embed field.
|
||||
*
|
||||
* Variables available:
|
||||
* - $url: The URL of the video to display embed code for
|
||||
* - $style: The style name of the embed code to use
|
||||
* - $style_settings: The style settings for the embed code
|
||||
* - $handler: The name of the video handler
|
||||
* - $embed_code: The embed code
|
||||
* - $data: Additional video data
|
||||
*
|
||||
* @see template_preprocess_video_embed()
|
||||
*/
|
||||
?>
|
||||
<?php print $embed_code; ?>
|
||||
Reference in New Issue
Block a user