Merge pull request #64 from locomotivemtl/deven-add-scroll

implement locomotive-scroll

README.md

@@ -73,7 +73,6 @@ If you want to adapt columns by media queries, by example a 2 columns grid for 1
 ```
 
 
-
 ### Form
 
 We included some basic CSS styles and resets to the form elements so we can easily have custom style form elements that work on every browsers.
@@ -120,3 +119,40 @@ Legend
           -> init new modules
 
 `[readyToRemove]` -> reinit()
+
+## Locomotive Scroll
+
+![experimental](https://img.shields.io/badge/stability-experimental-orange.svg)
+ - [locomotive-scroll](https://github.com/locomotivemtl/locomotive-scroll)
+
+### Configuration
+ - Create a `.o-scroll` container with `data-module="Scroll"`
+ - in the module `Scroll.js` you have a basic initialisation
+
+### Options
+
+Options | Type | Description
+--- | --- | ---
+container | $element | Scroll container (with the smooth scroll, this container will be transform)
+selector | String | Every elements will be check by the scroll, can be affect by a followed data attributes
+smooth | Boolean | If you want a smooth scroll
+smoothMobile | Boolean | If you want a smooth scroll on mobile
+mobileContainer | $element | Scroll container on mobile, document by default
+getWay | Boolean | if true, the animate will determine if you scroll down or scroll up
+getSpeed | Boolean | if true, the animate will calcul the velocity of your scroll. Access with `this.scroll.y`
+
+### Data attributes
+
+Data | Value | Description
+--- | --- | ---
+data-speed | number | Speed of transform for parallax elements
+data-repeat | false | Determine if the "In View" class is added one or each times
+data-inview-class | is-show | CSS Class when the element is in view.
+data-position | top/bottom | Trigger from top/bottom of the window instead of the default from bottom to top
+data-target | #id, .class | Trigger from another element
+data-horizontal | false | Use transformX instead of transformY
+data-sticky | false | Set $element sticky when it's in viewport
+data-sticky-target | #id | Stop the element stick when the target is in viewport
+data-callback | `test.Scroll(test:0)` | trigger event, with options way wich return "leave" or "enter" when $element is in viewport
+data-viewport-offset | i,j | value between 0 to 1 (0.3 to start at 30% of the bottom of the viewport), useful to trigger a sequence of callbacks. (i : value wich start at the bottom, j : start at the top, j is optional)
+

assets/scripts/modules.js

@@ -1 +1,2 @@
 export {default as Example} from './modules/Example';
+export {default as Scroll} from './modules/Scroll';

assets/scripts/modules/Scroll.js

@@ -0,0 +1,31 @@
+import { APP_NAME, $document } from '../utils/environment';
+import AbstractModule from './AbstractModule';
+import ScrollManager from '../scroll/vendors/ScrollManager';
+
+const MODULE_NAME = 'Scroll';
+const EVENT_NAMESPACE = `${APP_NAME}.${MODULE_NAME}`;
+
+export default class extends AbstractModule {
+    constructor(options) {
+        super(options);
+    }
+
+    init() {
+        setTimeout(() => {
+            this.scrollManager = new ScrollManager({
+                container: this.$el,
+                selector: '.js-animate',
+                smooth: false,
+                smoothMobile: false,
+                mobileContainer: $document,
+                getWay: false,
+                getSpeed: false
+            });
+        }, 500);
+    }
+
+    destroy() {
+        super.destroy();
+        this.scrollManager.destroy();
+    }
+}

assets/scripts/scroll/Scroll.js

@@ -0,0 +1,26 @@
+// ==========================================================================
+// Extended Locomotive Scroll
+// ==========================================================================
+/* jshint esnext: true */
+import Scroll, { EVENT_KEY as VENDOR_EVENT_KEY, EVENT as VENDOR_EVENTS, DEFAULTS as VENDOR_DEFAULTS } from './vendors/Scroll'
+
+/**
+ * UNCOMMENT ONLY THE LINES YOU NEED
+ */
+// import { $window, $document } from '../../utils/environment';
+// import debounce from '../../utils/debounce';
+// import { isNumeric } from '../../utils/is';
+
+export const EVENT_KEY = VENDOR_EVENT_KEY;
+
+export const EVENT = Object.assign(VENDOR_EVENTS, {
+    // TEST: `test.${EVENT_KEY}`
+});
+
+export const DEFAULTS = Object.assign(VENDOR_DEFAULTS, { });
+
+export default class extends Scroll {
+    constructor(options) {
+        super(options)
+    }
+}

assets/scripts/scroll/SmoothScroll.js

@@ -0,0 +1,21 @@
+// ==========================================================================
+// Extended Locomotive Smooth Scroll
+// ==========================================================================
+/* jshint esnext: true */
+import SmoothScroll from './vendors/SmoothScroll'
+
+/**
+ * UNCOMMENT ONLY THE LINES YOU NEED
+ */
+// import { $window, $document, $html } from '../utils/environment';
+// import Scroll, { DEFAULTS, EVENT } from './Scroll';
+
+// import debounce from '../utils/debounce';
+// import Scrollbar from 'smooth-scrollbar';
+// import { isNumeric } from '../utils/is';
+
+export default class extends SmoothScroll {
+    constructor(options) {
+        super(options)
+    }
+}

assets/styles/main.scss

@@ -42,6 +42,7 @@
 @import "objects/form";
 @import "objects/button";
 @import "objects/pjax";
+@import "objects/scroll";
 
 // Vendors
 // ==========================================================================

assets/styles/objects/_scroll.scss

@@ -0,0 +1,63 @@
+html.has-smooth-scroll {
+    overflow: hidden;
+}
+
+.o-scroll{
+    html.has-smooth-scroll & {
+        height: 100vh;
+        position: relative;
+        overflow: hidden;
+    }
+}
+
+.scroll-content {
+    transform: translate3d(0,0,0);
+    margin: 0;
+    overflow: visible;
+    height: 100%;
+}
+
+// Scrollbar
+// ==========================================================================
+[data-scrollbar],[scrollbar],scrollbar{display:block;position:relative}[data-scrollbar] .scroll-content,[scrollbar] .scroll-content,scrollbar .scroll-content{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}[data-scrollbar].sticky .scrollbar-track,[scrollbar].sticky .scrollbar-track,scrollbar.sticky .scrollbar-track{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track,[scrollbar] .scrollbar-track,scrollbar .scrollbar-track{position:absolute;opacity:0;z-index:1;-webkit-transition:opacity .5s ease-out,background .5s ease-out;transition:opacity .5s ease-out,background .5s ease-out;background:none}[data-scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track.show,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track.show,scrollbar .scrollbar-track:hover{opacity:1}[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track:hover{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track-x,[scrollbar] .scrollbar-track-x,scrollbar .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}[data-scrollbar] .scrollbar-track-y,[scrollbar] .scrollbar-track-y,scrollbar .scrollbar-track-y{top:0;right:0;width:8px;height:100%}[data-scrollbar] .scrollbar-thumb,[scrollbar] .scrollbar-thumb,scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;width:8px;height:8px;background:rgba(0,0,0,.5);border-radius:4px}[data-scrollbar] .overscroll-glow,[scrollbar] .overscroll-glow,scrollbar .overscroll-glow{position:absolute;top:0;left:0;width:100%;height:100%}
+
+.scrollbar-track {
+    user-select: none;
+    background-color: transparent !important;
+    width: 14px !important;
+    opacity: 0 !important;
+    z-index: 99999 !important;
+
+    .scrolling & {
+        opacity: 0.75 !important;
+    }
+
+    &:hover {
+        opacity: 1 !important;
+        background-color: #fafafa !important;
+    }
+}
+
+.scrollbar-thumb {
+    position: relative;
+    width: 14px !important;
+    background-color: transparent !important;
+
+    &::after {
+        content: "";
+        position: absolute;
+        top: 3px;
+        right: 3px;
+        bottom: 3px;
+        left: 3px;
+        background-color: #c1c1c1;
+        border-radius: 4px;
+        transition: background-color $speed $easing;
+    }
+
+    &:hover {
+        &::after {
+            background-color: #7d7d7d;
+        }
+    }
+}

build/copy.js

@@ -0,0 +1,14 @@
+import gulp from 'gulp';
+import paths from '../mconfig.json';
+import error from './error.js';
+
+function copy() {
+    return gulp
+        .src([`./node_modules/locomotive-scroll/assets/scripts/scroll/vendors/*`])
+        .on('error', function(err) {
+            error(this, err);
+        })
+        .pipe(gulp.dest(`${paths.scripts.src}/scroll/vendors`));
+}
+
+export default copy;

gulpfile.babel.js

@@ -5,12 +5,14 @@ import concat from './build/concat.js';
 import svgs from './build/svgs.js';
 import serve from './build/serve.js';
 import watch from './build/watch.js';
+import copy from './build/copy.js';
 import { buildStyles, buildScripts } from './build/build.js';
 
 const compile = gulp.series(styles, scripts, svgs, concat);
-const main = gulp.series(compile, serve, watch);
-const build = gulp.series(compile, buildStyles, buildScripts);
+const main = gulp.series(copy, compile, serve, watch);
+const build = gulp.series(copy, compile, buildStyles, buildScripts);
 
 gulp.task('default', main);
 gulp.task('compile', compile);
 gulp.task('build', build);
+gulp.task('copy', copy);

package.json

@@ -6,7 +6,9 @@
     "author": "Locomotive <info@locomotive.ca>",
     "dependencies": {
         "pjax": "*",
-        "svg4everybody": "*"
+        "svg4everybody": "*",
+        "smooth-scrollbar": "git+https://git@github.com/locomotivemtl/smooth-scrollbar.git#develop",
+        "locomotive-scroll": "git+https://git@github.com/locomotivemtl/locomotive-scroll.git"
     },
     "devDependencies": {
         "gulp-concat": "*"

www/index.html

@@ -32,9 +32,11 @@
 
         <div id="js-pjax-wrapper">
             <div class="js-pjax-container" data-template="home" >
+                <div class="o-scroll" data-module="Scroll">
                     <div data-module="Example">Home page with Example module</div>
                 </div>
             </div>
+        </div>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="assets/scripts/jquery-3.2.1.min.js"><\/script>')</script>