👔 fix manual lints

gulpfile.js

@@ -9,8 +9,8 @@ let site = {
     productName: 'Flickity',
     description: 'Touch, responsive, flickable carousels',
     majorVersion: 2,
-    isDev: process.argv[2] == 'dev',
-    isExport: process.argv[2] == 'export',
+    isDev: process.argv[2] === 'dev',
+    isExport: process.argv[2] === 'export',
   },
 };
 

js/boilerplate.js

@@ -1,13 +1,12 @@
 // boilerplate
 ( function() {
-'use strict';
 
 // global namespace
 let FlickityDocs = window.FlickityDocs = {};
 
 // ----- utils ----- //
 
-window.utils = fizzyUIUtils;
+window.utils = window.fizzyUIUtils;
 
 // ----- helpers ----- //
 
@@ -24,9 +23,7 @@ FlickityDocs.makeCellElem = function( num ) {
 
 window.filterBind = function( elem, type, selector, listener ) {
   elem.addEventListener( type, function( event ) {
-    if ( matchesSelector( event.target, selector ) ) {
-      listener( event );
-    }
+    if ( event.target.matches( selector ) ) listener( event );
   } );
 };
 

js/init.js

@@ -1,8 +1,8 @@
-( function() {
-'use strict';
+/* globals FlickityDocs, FizzyDocs */
 
-// init all modules, based on their data-js attribute
+( function() {
 
+  // init all modules, based on their data-js attribute
   let jsModuleElems = document.querySelectorAll('[data-js]');
   for ( let i = 0; i < jsModuleElems.length; i++ ) {
     let elem = jsModuleElems[i];

modules/.eslintrc.js

@@ -8,6 +8,12 @@ module.exports = {
     ecmaVersion: 2018,
   },
   globals: {
+    Draggabilly: false,
+    filterBind: false,
+    Flickity: false,
+    FlickityDocs: false,
+    getSize: false,
+    utils: false,
   },
   rules: {
     'prefer-object-spread': 'error',

modules/demos/append/append.js

@@ -1,5 +1,4 @@
 FlickityDocs.append = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/demos/arrow-wiz/arrow-wiz.js

@@ -1,5 +1,4 @@
 FlickityDocs['arrow-wiz'] = function( elem ) {
-  'use strict';
 
   let wiz = elem;
 
@@ -8,6 +7,7 @@ FlickityDocs['arrow-wiz'] = function( elem ) {
   let canvasWidth = canvas.width;
   let canvasHeight = canvas.height;
 
+  /* eslint-disable-next-line max-params */
   function line( ax, ay, bx, by, color ) {
     if ( color ) {
       ctx.strokeStyle = color;

modules/demos/custom-nav/custom-nav.js

@@ -1,5 +1,4 @@
 FlickityDocs['custom-nav'] = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/demos/destroy/destroy.js

@@ -1,5 +1,4 @@
 FlickityDocs.destroy = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/events-table/events-table.js

@@ -1,5 +1,4 @@
 FlickityDocs['events-table'] = function( elem ) {
-  'use strict';
 
   let table = elem.querySelector('.event-table');
   let tbody = table.querySelector('tbody');
@@ -31,7 +30,7 @@ FlickityDocs['events-table'] = function( elem ) {
     row.appendChild( eventCell );
     row.appendChild( messageCell );
     let rows = tbody.children;
-    if ( rows.length == 1 ) {
+    if ( rows.length === 1 ) {
       tbody.appendChild( row );
     } else {
       tbody.insertBefore( row, rows[1] );

modules/demos/fullscreen/view-fullscreen-demo.js

@@ -1,5 +1,4 @@
 FlickityDocs['view-fullscreen-demo'] = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/demos/insert/insert.js

@@ -1,5 +1,4 @@
 FlickityDocs.insert = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/demos/keyhole/keyhole.js

@@ -1,5 +1,4 @@
 FlickityDocs.keyhole = function( elem ) {
-  'use strict';
 
   let transformProp = typeof elem.style.transform == 'string' ?
     'transform' : 'WebkitTransform';

modules/demos/next/next.js

@@ -1,5 +1,4 @@
 FlickityDocs.next = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/parallax/parallax.js

@@ -1,5 +1,4 @@
 FlickityDocs.parallax = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );
@@ -19,6 +18,7 @@ FlickityDocs.parallax = function( elem ) {
   flkty.reposition();
 
   function moveParallaxLayer( layer, layerRatio, progress ) {
-    layer.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * layerRatio ) * 100 + '%';
+    let decimal = 0.5 - ( 0.5 + progress * 4 ) * cellRatio * layerRatio;
+    layer.style.left = decimal * 100 + '%';
   }
 };

modules/demos/player/player.js

@@ -1,5 +1,4 @@
 FlickityDocs.player = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/demos/prepend/prepend.js

@@ -1,5 +1,4 @@
 FlickityDocs.prepend = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/previous/previous.js

@@ -1,5 +1,4 @@
 FlickityDocs.previous = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/progress-bar/progress-bar.js

@@ -1,5 +1,4 @@
 FlickityDocs['progress-bar'] = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let progressBar = elem.querySelector('.progress-bar__bar');

modules/demos/remove/remove.js

@@ -1,5 +1,4 @@
 FlickityDocs.remove = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/demos/reposition/reposition.js

@@ -1,5 +1,4 @@
 FlickityDocs.reposition = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/resize-show/resize-show.js

@@ -1,5 +1,4 @@
 FlickityDocs['resize-show'] = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/resize/resize.js

@@ -1,5 +1,4 @@
 FlickityDocs.resize = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel );

modules/demos/select-cell-selector/select-cell-selector.js

@@ -1,5 +1,4 @@
 FlickityDocs['select-cell-selector'] = function( elem ) {
-  'use strict';
 
   let flkty = new Flickity( elem.querySelector('.carousel'), {
     groupCells: true,

modules/demos/select-cell/select-cell.js

@@ -1,5 +1,4 @@
 FlickityDocs['select-cell'] = function( elem ) {
-  'use strict';
 
   let utils = window.fizzyUIUtils;
 

modules/demos/select-instant/select-instant.js

@@ -1,5 +1,4 @@
 FlickityDocs['select-instant'] = function( elem ) {
-  'use strict';
 
   let utils = window.fizzyUIUtils;
 

modules/demos/select/select.js

@@ -1,5 +1,4 @@
 FlickityDocs.select = function( elem ) {
-  'use strict';
 
   let utils = window.fizzyUIUtils;
 

modules/demos/static-click/static-click.js

@@ -1,5 +1,4 @@
 FlickityDocs['static-click'] = function( elem ) {
-  'use strict';
 
   let carousel = elem.querySelector('.carousel');
   let flkty = new Flickity( carousel, {

modules/hero-carousel/hero-carousel.js

@@ -1,5 +1,4 @@
 FlickityDocs['hero-carousel'] = function( elem ) {
-  'use strict';
 
   let firstCell = elem.querySelector('.hero-carousel__cell--1');
   let illoImg = firstCell.querySelector('.hero-illustration');

modules/page-nav/page-nav.js

@@ -1,6 +1,5 @@
 /* globals Stickeroo */
 FlickityDocs['page-nav'] = function( elem ) {
-  'use strict';
 
   new Stickeroo( elem );
 };

modules/page-nav/stickeroo.js

@@ -1,5 +1,4 @@
 ( function( window ) {
-'use strict';
 
 // -------------------------- Stickeroo -------------------------- //
 
@@ -21,7 +20,7 @@ Stickeroo.prototype.onresize = function() {
   let afterContent = getComputedStyle( this.element, ':after' ).content;
   let size = getSize( this.element );
   // activate if :after { content: 'sticky' } and fits in window
-  if ( afterContent.indexOf('sticky') != -1 && size.innerHeight <= window.innerHeight ) {
+  if ( afterContent.indexOf('sticky') !== -1 && size.innerHeight <= window.innerHeight ) {
     this.activate();
   } else {
     this.deactivate();
@@ -73,9 +72,7 @@ function throttleProto( _class, methodName, threshold ) {
 
 Stickeroo.prototype.onscroll = function() {
   let isFixed = window.pageYOffset >= this.originalY;
-  if ( isFixed == this.isFixed ) {
-    return;
-  }
+  if ( isFixed === this.isFixed ) return;
 
   this.element.classList.toggle('is-fixed');
   this.isFixed = isFixed;

tasks/css.js

@@ -27,5 +27,5 @@ gulp.task( 'css', function() {
 } );
 
 module.exports = function( site ) {
-  site.data.css_paths = getGlobPaths( cssSrc );
+  site.data.cssPaths = getGlobPaths( cssSrc );
 };

tasks/js.js

@@ -51,5 +51,5 @@ gulp.task( 'js', function() {
 } );
 
 module.exports = function( site ) {
-  site.data.js_paths = getGlobPaths( jsSrc );
+  site.data.jsPaths = getGlobPaths( jsSrc );
 };

tasks/utils/highlight-code-block.js

@@ -6,10 +6,11 @@ highlightjs.configure({
 });
 
 let hljsJavascript = highlightjs.getLanguage('javascript');
-// highlight Packery
+// highlight Flickity & flkty
+/* eslint-disable camelcase */
 hljsJavascript.keywords.flickity_keyword = 'Flickity';
-// highlight packery variables
 hljsJavascript.keywords.flickity_var = 'flkty';
+/* eslint-enable camelcase */
 
 hljsJavascript.contains.push({
   className: 'jquery_var',
@@ -32,11 +33,12 @@ function replaceCodeBlock( match, leadingWhiteSpace, block ) {
     block = block.replace( reLeadingWhiteSpace, '' );
   }
   // highlight code
-  let highlighted = language ? highlightjs.highlight( language, block, true ).value : block;
+  let highlighted = language ? highlightjs.highlight( language, block, true ).value :
+    block;
   // wrap in <pre><code>
-  let html = '\n<pre><code' +
-    ( language ? ' class="' + language + '"' : '' ) + '>' +
-    highlighted + '</code></pre>';
+  let html = `<pre>
+      <code class=${language || ''}>${highlighted}</code>
+    </pre>`;
   return html;
 }
 

tasks/utils/page-nav.js

@@ -3,6 +3,7 @@ let transfob = require('transfob');
 
 module.exports = function pageNav() {
   return transfob( function( file, enc, next ) {
+    /* eslint-disable-next-line id-length */
     let $ = cheerio.load( file.contents.toString(), {
       recognizeSelfClosing: true, // for inline SVG
     } );
@@ -14,15 +15,16 @@ module.exports = function pageNav() {
       let title = $header.text();
       let slug = title.replace( /[^\w\d]+/gi, '-' )
         // trim trailing hyphens
-        .replace( /^\-+/, '' )
-        .replace( /\-+$/, '' )
+        .replace( /^-+/, '' )
+        .replace( /-+$/, '' )
         .toLowerCase();
       // set id slug
       $header.attr( 'id', slug );
       // add item to pageNav
-      pageNavHtml += '<li class="page-nav__item page-nav__item--' +
-        header.name + '">' + '<a href="#' + slug + '">' + title +
-        '</a></li>\n';
+
+      pageNavHtml += `<li class="page-nav__item page-nav__item--${header.name}">
+        <a href="#${slug}">${title}</a>
+      </li>`;
     } );
     // add pageNavHtml to page
     $('.page-nav').html( pageNavHtml );

templates/page.hbs

@@ -8,7 +8,7 @@
   <title>{{productName}} v2 &middot; {{#if page.is_homepage}}{{description}}{{else}}{{page.title}}{{/if}}</title>
 
   {{#if isDev}}
-    {{#each css_paths}}
+    {{#each cssPaths}}
       <link rel="stylesheet" href="../{{this}}" />
     {{/each}}
   {{else}}
@@ -55,7 +55,7 @@
 {{> site-footer flickity=true}}
 
 {{#if isDev}}
-  {{#each js_paths}}
+  {{#each jsPaths}}
     <script src="../{{this}}"></script>
   {{/each}}
 {{else}}