Improving quality of JavaScript, adding XO lint globals

Moved to use all jQuery listeners, cleaned up wasted duplicate code,
moved jQuery element queries into variables for cleanliness and
niceness, also moved all listeners into document.ready since thats
where they belong and all.

.editorconfig

@@ -6,4 +6,4 @@ indent_size = 4
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = false
+insert_final_newline = true

gulpfile.js

@@ -7,7 +7,6 @@ var rename = require('gulp-rename');
 var surge = require('gulp-surge');
 var uglify = require('gulp-uglify');
 var xo = require('gulp-xo');
-var notify = require('gulp-notify');
 
 // BROWSER-SYNC
 gulp.task('browser-sync', function () {
@@ -30,10 +29,7 @@ gulp.task('styles', function () {
 	return gulp.src('./scss/**/*.scss')
 		.pipe(sass({
 			outputStyle: 'compressed'
-		}).on('error', function (err) {
-			notify().write(err);
-			this.emit('end');
-		}))
+		}).on('error', sass.logError))
 		.pipe(rename('master.min.css'))
 		.pipe(gulp.dest('./dist/'))
 		.pipe(browserSync.stream());
@@ -42,8 +38,8 @@ gulp.task('styles', function () {
 // UGLIFY SCRIPTS
 gulp.task('scripts', function () {
 	return gulp.src('./js/*.js')
+		.pipe(xo())
 		.pipe(uglify())
-		// .pipe(xo())
 		.pipe(rename('master.min.js'))
 		.pipe(gulp.dest('./dist/'));
 });

js/master.js

@@ -1,119 +1,115 @@
 // TOASTR OPTIONS
 toastr.options = {
-	"newestOnTop": true,
-	"progressBar": true,
-	"extendedTimeOut": "2500"
+	newestOnTop: true,
+	progressBar: true,
+	extendedTimeOut: '2500'
 };
 
-// KEYUP LISTENERS
-$(document).ready(function() {
+// LISTENERS
+$(document).ready(function () {
 	// MAKE SURE BUTTON IS ONLY ACTIVE WHEN REQUIRED FIELDS ARE GOOD
-	$('input').keyup(function() {
-		$('#getThumb').attr('disabled', $('input[required]').toArray().some(function(el) {
+	$('input').keyup(function () {
+		$('#getThumb').attr('disabled', $('input[required]').toArray().some(function (el) {
 			return el.value.length === 0;
 		}));
 	});
 
 	// MAKE SURE WISTIA PLAY BUTTON CHECKBOX ISN'T ENABLED BY DEFAULT
-	$('#wistiaPlayButtonColor').keyup(function() {
-		$('#wistiaPlayButton').attr('disabled', $('#wistiaPlayButtonColor').toArray().some(function(el) {
+	$('#wistiaPlayButtonColor').keyup(function () {
+		$('#wistiaPlayButton').attr('disabled', $('#wistiaPlayButtonColor').toArray().some(function (el) {
 			return el.value.length === 0;
 		}));
 	});
-});
-
-
-// SET HEIGHT BASED ON WIDTH AND KEEP ASPECT RATIO
-$("#wistiaThumbWidth").keyup(function() {
-	if ($('#wistiaThumbRatio').is(':checked')) {
-		var value = $(this).val();
-		value *= 1;
-
-		window.valueHeight = Math.round((value / 16) * 10);
-	}
-	else {
-		var value = $(this).val();
-		value *= 1;
-
-		window.valueHeight = Math.round((value / 16) * 9);
-	}
-
-	$('#wistiaThumbHeight').text(valueHeight);
-});
-document.getElementById('wistiaThumbRatio').addEventListener('click', function() {
-	var value = $('#wistiaThumbWidth').val();
-	value *= 1;
 
-	window.valueHeight = Math.round((value / 16) * 10);
+	// RUN calcHeight() FUNCTION WHEN TEXT IS INPUT OR CHECKBOX IS CLICKED
+	$('#wistiaThumbWidth').keyup(calcHeight);
+	$('#wistiaThumbRatio').click(calcHeight);
 
-	if (!$('#wistiaThumbRatio').is(':checked')) {
-		var value = $('#wistiaThumbWidth').val();
-		value *= 1;
-
-		window.valueHeight = Math.round((value / 16) * 9);
-	}
-
-	$('#wistiaThumbHeight').text(valueHeight);
+	// SET BUTTON LISTENER
+	$('#getThumb').click(getThumbnail);
 });
 
-
 // AJAX REQUEST LOADING
 var $loading = $('#loading').hide();
 $(document)
-	.ajaxStart(function() {
+	.ajaxStart(function () {
 		$loading.show();
 	})
-	.ajaxStop(function() {
+	.ajaxStop(function () {
 		$loading.hide();
 	});
 
-// SET BUTTON LISTENER
-document.getElementById('getThumb').addEventListener('click', getThumbnail);
+// CALCULATE HEIGHT FOR VIDEO BASED ON ASPECT RATIO
+function calcHeight() {
+	// VARS
+	var value = $('#wistiaThumbWidth').val();
+	// MATHS
+	if ($('#wistiaThumbRatio').is(':checked')) {
+		// CALC FOR 16:10
+		value *= 1;
+		window.valueHeight = Math.round((value / 16) * 10);
+	} else {
+		// CALC FOR 16:9
+		value *= 1;
+		window.valueHeight = Math.round((value / 16) * 9);
+	}
+	// SET HEIGHT TEXT PREVIEW
+	$('#wistiaThumbHeight').text(window.valueHeight);
+}
 
+// POST CALL TO WISTIA AND BUILD THUMBNAIL AND URL
 function getThumbnail() {
+	// JQUERY VARS
+	var id = $('#wistiaID');
+	var button = $('#wistiaPlayButton');
+	var buttoncolor = $('#wistiaPlayButtonColor');
+	var thumbUrl = $('#url');
+	var downloadThumb = $('#downloadThumb');
+
 	// RESET FIELDS
 	$('#dynamic').remove();
-	$('#url').text("Thumbnail URL");
-	$('#downloadThumb').attr('href', "#");
+	thumbUrl.text('Thumbnail URL');
+	downloadThumb.attr('href', '#');
 
 	// GET / SET VALUES FROM INPUT FIELDS
-	var mediaHashedId = $('#wistiaID').val();
+	var mediaHashedId = id.val();
 	var width = $('#wistiaThumbWidth').val();
-
-	var buttonColor = $('#wistiaPlayButtonColor').val();
+	var buttonColor = buttoncolor.val();
 
 	// BUILD CALL TO WISTIA
 	function getThumbnailUrl(hashedId, callback) {
 		$.getJSON('https://fast.wistia.com/oembed/?url=http://home.wistia.com/medias/' + mediaHashedId + '&format=json&callback=?', callback)
-			.fail(function() {
-				$('#wistiaID').addClass("invalid");
+			.fail(function () {
+				id.addClass('invalid');
 				toastr.error('Something went wrong. Try again');
 			})
-			.done(function() {
-				$('#wistiaID').removeClass("invalid");
+			.done(function () {
+				id.removeClass('invalid');
 			});
 	}
 
 	// PARSE THE JSON FILE FROM WISTIA
 	function parseJSON(json) {
 		var thumbnailURL;
 
-		if ($('#wistiaPlayButton').is(':checked') && !$('#wistiaPlayButton').is(':disabled') && !$('#wistiaPlayButtonColor').is(':invalid')) {
+		if (button.is(':checked') && !button.is(':disabled') && !buttoncolor.is(':invalid')) {
+			// ADD PLAY BUTTON IN DESIRED COLOR
 			thumbnailURL = json.thumbnail_url.replace(/\d+x\d+/, width + 'x' + window.valueHeight) + '&image_play_button=true&image_play_button_color=' + buttonColor + 'CC'; // CC = 80% Opacity
 		} else {
+			// DISPLAY THUMBNAIL NO PLAY BUTTON
 			thumbnailURL = json.thumbnail_url.replace(/\d+x\d+/, width + 'x' + window.valueHeight);
 		}
 
 		// DISPLAY IMAGE THUMBNAIL
 		var thumb = $('<img id="dynamic" class="responsive-img">');
 
 		thumb.attr('src', thumbnailURL);
-		thumb.appendTo('#downloadThumb');
+		thumb.appendTo(downloadThumb);
 
-		$('#url').text(thumbnailURL);
-		$('#downloadThumb').attr('href', thumbnailURL);
+		thumbUrl.text(thumbnailURL);
+		downloadThumb.attr('href', thumbnailURL);
 	}
 
 	// CALL THE FUNCTIONS TO GET THE ID FROM WISTIA AND THE INPUT FIELD
 	getThumbnailUrl(mediaHashedId, parseJSON);
-}
+}

package.json

@@ -12,18 +12,19 @@
 	"devDependencies": {
 		"browser-sync": "^2.18.5",
 		"gulp": "^3.9.1",
-		"gulp-notify": "^3.0.0",
 		"gulp-rename": "^1.2.2",
 		"gulp-sass": "^3.0.0",
 		"gulp-surge": "^0.1.0",
 		"gulp-uglify": "^2.0.1",
 		"gulp-xo": "^0.14.0"
 	},
-	"eslintConfig": {
-		"env": {
-			"browser": true,
-			"jQuery": true
-		}
+	"xo": {
+		"globals": [
+			"$",
+			"document",
+			"window",
+			"toastr"
+		]
 	},
 	"dependencies": {}
 }