Skip to content

Commit

Permalink
Change indents from tabs to two spaces
Browse files Browse the repository at this point in the history
  • Loading branch information
@ght
ght committed Dec 12, 2016
1 parent 007cf28 commit 17f78d3
Show file tree
Hide file tree
Showing 5 changed files with 322 additions and 312 deletions.
10 changes: 10 additions & 0 deletions .editorconfig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8

[*.{js,json,scss}]
indent_style = spaces
indent_size = 2
152 changes: 76 additions & 76 deletions js/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,92 +2,92 @@
* Swipe navigation
*/
;(function() {
'use strict';
'use strict';

function setupSlider(slider) {
var firstSlide = slider.querySelector('ul > li:first-of-type');
var slides = slider.querySelectorAll('ul > li');
var radios = Array.prototype.slice.call(slider.querySelectorAll('input'));
var active;
var touchStartX;
var touchStartY;
var deltaX;
var deltaY;
var scrolling;
function setupSlider(slider) {
var firstSlide = slider.querySelector('ul > li:first-of-type');
var slides = slider.querySelectorAll('ul > li');
var radios = Array.prototype.slice.call(slider.querySelectorAll('input'));
var active;
var touchStartX;
var touchStartY;
var deltaX;
var deltaY;
var scrolling;

function onTouchstart(event) {
var touch = event.touches ? event.touches[0] : event;
touchStartX = touch.pageX;
touchStartY = touch.pageY;
deltaX = 0;
deltaY = 0;
scrolling = undefined;
function onTouchstart(event) {
var touch = event.touches ? event.touches[0] : event;
touchStartX = touch.pageX;
touchStartY = touch.pageY;
deltaX = 0;
deltaY = 0;
scrolling = undefined;

active = radios
.map(function(el) {
return el.checked;
})
.indexOf(true);
active = radios
.map(function(el) {
return el.checked;
})
.indexOf(true);

// Add event listeners needed during drag
slider.addEventListener('touchmove', onTouchmove);
slider.addEventListener('touchend', onTouchend);
}
// Add event listeners needed during drag
slider.addEventListener('touchmove', onTouchmove);
slider.addEventListener('touchend', onTouchend);
}

function onTouchmove(event) {
var touch = event.touches ? event.touches[0] : event;
deltaX = touch.pageX - touchStartX;
deltaY = touch.pageY - touchStartY;
function onTouchmove(event) {
var touch = event.touches ? event.touches[0] : event;
deltaX = touch.pageX - touchStartX;
deltaY = touch.pageY - touchStartY;

if (typeof scrolling === 'undefined') {
scrolling = Math.abs(deltaX) < Math.abs(deltaY);
}
if (typeof scrolling === 'undefined') {
scrolling = Math.abs(deltaX) < Math.abs(deltaY);
}

if (!scrolling) {
event.preventDefault();
Array.prototype.forEach.call(
slides,
function(slide) {
slide.style.transition = 'none'; // Disable transitions during dragging
slide.style.transform = 'translate3d(' + (deltaX - firstSlide.offsetWidth * active) + 'px' + ', 0, 0)';
}
);
}
}
if (!scrolling) {
event.preventDefault();
Array.prototype.forEach.call(
slides,
function(slide) {
slide.style.transition = 'none'; // Disable transitions during dragging
slide.style.transform = 'translate3d(' + (deltaX - firstSlide.offsetWidth * active) + 'px' + ', 0, 0)';
}
);
}
}

function onTouchend(event) {
var perPage = Math.round(firstSlide.parentNode.clientWidth / firstSlide.offsetWidth);
function onTouchend(event) {
var perPage = Math.round(firstSlide.parentNode.clientWidth / firstSlide.offsetWidth);

if (!scrolling && Math.abs(deltaX) > firstSlide.offsetWidth / 4) {
var next = Math.max(0, Math.min(radios.length - perPage, deltaX > 0
? active - (active % perPage || perPage) // Next page to the left
: active - active % perPage + perPage // Next page to the right
));
radios[next].setAttribute('checked', 'checked');
}
Array.prototype.forEach.call(
slides,
function(slide) {
slide.style.transition = '';
slide.style.transform = '';
}
);
if (!scrolling && Math.abs(deltaX) > firstSlide.offsetWidth / 4) {
var next = Math.max(0, Math.min(radios.length - perPage, deltaX > 0
? active - (active % perPage || perPage) // Next page to the left
: active - active % perPage + perPage // Next page to the right
));
radios[next].setAttribute('checked', 'checked');
}
Array.prototype.forEach.call(
slides,
function(slide) {
slide.style.transition = '';
slide.style.transform = '';
}
);

// Remove event listeners that are only needed during drag
slider.removeEventListener('touchmove', onTouchmove);
slider.removeEventListener('touchend', onTouchend);
}
// Remove event listeners that are only needed during drag
slider.removeEventListener('touchmove', onTouchmove);
slider.removeEventListener('touchend', onTouchend);
}

slider.addEventListener('touchstart', onTouchstart);
}
slider.addEventListener('touchstart', onTouchstart);
}

/**
* Add swipe navigation to all CSS-Sliders
*/
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.forEach.call(
document.querySelectorAll('.css-slider'),
setupSlider
);
});
/**
* Add swipe navigation to all CSS-Sliders
*/
document.addEventListener('DOMContentLoaded', function() {
Array.prototype.forEach.call(
document.querySelectorAll('.css-slider'),
setupSlider
);
});
}());
150 changes: 75 additions & 75 deletions sass/_css-slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,92 +5,92 @@ $css-slider-transition-duration: .5s !default;
@import 'paginate';

@mixin slider-base () {
position: relative; // Position children relative to the slider
position: relative; // Position children relative to the slider

> input[type="radio"] {
display: none; // Hide the radio buttons
}
> input[type="radio"] {
display: none; // Hide the radio buttons
}

&__slides {
font-size: 0; // Ignore whitespace between elements with display:inline-block
overflow: hidden; // Hide slides that scroll off to the sides
white-space: nowrap; // Keep the slides on one line
list-style-type: none; // No bullets
padding-left: 0; // Remove list-padding for bullets
}
&__slides {
font-size: 0; // Ignore whitespace between elements with display:inline-block
overflow: hidden; // Hide slides that scroll off to the sides
white-space: nowrap; // Keep the slides on one line
list-style-type: none; // No bullets
padding-left: 0; // Remove list-padding for bullets
}

&__slide {
display: inline-block; // Put all slides on one line
width: 100%; // One slide per page by default
font-size: 15px; // For "browsers" that do not support :initial
font-size: initial; // For all real browsers
vertical-align: top; // Default of middle is usually not what we want
white-space: normal; // Reset because of :nowrap above
box-sizing: border-box; // Width:100% should include padding
transition: transform $css-slider-transition-duration,
width $css-slider-transition-duration;
}
&__slide {
display: inline-block; // Put all slides on one line
width: 100%; // One slide per page by default
font-size: 15px; // For "browsers" that do not support :initial
font-size: initial; // For all real browsers
vertical-align: top; // Default of middle is usually not what we want
white-space: normal; // Reset because of :nowrap above
box-sizing: border-box; // Width:100% should include padding
transition: transform $css-slider-transition-duration,
width $css-slider-transition-duration;
}

&__dots {
position: absolute;
left: 50%; // Center horizontally, part 1 ...
transform: translate(-50%); // ... part 2
font-size: 0; // Ignore whitespace between elements
white-space: nowrap; // Keep dots on one line
margin-top: 10px; // Put dots under the slides
&__dots {
position: absolute;
left: 50%; // Center horizontally, part 1 ...
transform: translate(-50%); // ... part 2
font-size: 0; // Ignore whitespace between elements
white-space: nowrap; // Keep dots on one line
margin-top: 10px; // Put dots under the slides

&--inside {
margin-top: -10px; // Put dots inside the slides
}
}
&--inside {
margin-top: -10px; // Put dots inside the slides
}
}

&__dot {
cursor: pointer; // Convey clickability
background-color: #eee;
border-radius: 50%;
padding: 5px;
&__dot {
cursor: pointer; // Convey clickability
background-color: #eee;
border-radius: 50%;
padding: 5px;

&:not(:last-child) {
margin-right: 5px; // Spacing between dots
}
&:not(:last-child) {
margin-right: 5px; // Spacing between dots
}

&::before {
content: '';
background-color: #fa0;
border-radius: 50%;
padding: 3px;
position: absolute; // Do not take up space in the label
transform: translate(-50%, -50%); // Center
opacity: 0;
}
&::before {
content: '';
background-color: #fa0;
border-radius: 50%;
padding: 3px;
position: absolute; // Do not take up space in the label
transform: translate(-50%, -50%); // Center
opacity: 0;
}

&:hover {
&::before {
opacity: 1;
}
}
}
&:hover {
&::before {
opacity: 1;
}
}
}

&__arrows {
position: absolute; // Take the arrows out of the flow
height: 100%; // Stretch the arrow container to slider height
top: 0; // Align with slider
&__arrows {
position: absolute; // Take the arrows out of the flow
height: 100%; // Stretch the arrow container to slider height
top: 0; // Align with slider

&--left {
right: 100%; // Left of the slider
}
&--left {
right: 100%; // Left of the slider
}

&--right {
left: 100%; // Right of the slider
}
}
&--right {
left: 100%; // Right of the slider
}
}

&__arrow {
display: none; // Hide all arrows by default
position: relative; // Take up space, so we push the container left
top: 50%; // Center vertically, part 1...
transform: translateY(-50%); // ...part 2
user-select: none; // Do not select arrows if user double clicks
font-size: 3em;
}
&__arrow {
display: none; // Hide all arrows by default
position: relative; // Take up space, so we push the container left
top: 50%; // Center vertically, part 1...
transform: translateY(-50%); // ...part 2
user-select: none; // Do not select arrows if user double clicks
font-size: 3em;
}
}
Loading

0 comments on commit 17f78d3

Please sign in to comment.