From 4a1cd48c380d5c518c0e98b9869428a3b80642da Mon Sep 17 00:00:00 2001 From: Marco Biedermann Date: Sat, 20 Feb 2016 12:02:36 +0100 Subject: [PATCH] improve javascript --- src/js/main.js | 185 ++++++++++++++++++++++++++----------------------- 1 file changed, 97 insertions(+), 88 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 8e20f59..db20a6b 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,104 +1,113 @@ -/* Toggle grid button - ========================================================================== */ - -/* -// 1. THE JQUERY WAY -var flip = 0; -$('#btnToggleGrid').on('click', function(){ - // Get line-height - var vcLineHeight = parseInt($('p').css("line-height")); - console.log(vcLineHeight); - if(flip == 0){ - $('body').addClass("grid"); - // $('.verticalGrid').css("background", vcImg); - flip = 1; - } else if (flip == 1) { - $('body').addClass("grid-double"); - flip = 2; - } else if (flip == 2) { - $('body').removeClass("grid-double"); - $('body').removeClass("grid"); - // $('.verticalGrid').css("background", "none"); - flip = 0; - }; -}); -*/ - - -// 2. THE JAVASCRIPT WAY -var flip = 0; - -function toggleGrid(){ - var body = document.getElementsByTagName("body")[0]; - var button = document.getElementById("btnToggleGrid"); - - if(flip == 0){ - body.classList.add("grid"); - button.textContent = "Turn Double Grid On"; - button.classList.add("double-grid"); - flip = 1; - } else if (flip == 1) { - body.classList.add("grid-double"); - button.textContent = "Turn Grid Off"; - button.classList.remove("double-grid"); - button.classList.add("grid-off"); - flip = 2; - } else if (flip == 2) { - body.classList.remove("grid"); - body.classList.remove("grid-double"); - button.classList.remove("grid-off"); - button.textContent = "Turn Grid On"; - flip = 0; +(function(window, document) { + 'use strict'; + + /* Toggle grid button + ========================================================================== */ + + /* + // 1. THE JQUERY WAY + var flip = 0; + $('#btnToggleGrid').on('click', function(){ + // Get line-height + var vcLineHeight = parseInt($('p').css('line-height')); + console.log(vcLineHeight); + if(flip == 0){ + $('body').addClass('grid'); + // $('.verticalGrid').css('background', vcImg); + flip = 1; + } else if (flip == 1) { + $('body').addClass('grid-double'); + flip = 2; + } else if (flip == 2) { + $('body').removeClass('grid-double'); + $('body').removeClass('grid'); + // $('.verticalGrid').css('background', 'none'); + flip = 0; + }; + }); + */ + + // 2. THE JAVASCRIPT WAY + var flip = 0; + + function toggleGrid() { + var body = document.getElementsByTagName('body')[0]; + var button = document.getElementById('btnToggleGrid'); + + if (flip === 0) { + body.classList.add('grid'); + button.textContent = 'Turn Double Grid On'; + button.classList.add('double-grid'); + flip = 1; + } else if (flip === 1) { + body.classList.add('grid-double'); + button.textContent = 'Turn Grid Off'; + button.classList.remove('double-grid'); + button.classList.add('grid-off'); + flip = 2; + } else if (flip === 2) { + body.classList.remove('grid'); + body.classList.remove('grid-double'); + button.classList.remove('grid-off'); + button.textContent = 'Turn Grid On'; + flip = 0; + } } -} -/* Fix image height to fit into the baseline grid - ========================================================================== */ + /* Fix image height to fit into the baseline grid + ========================================================================== */ -/* -// 1. THE JQUERY WAY -Construct the function -$.fn.imgFixHeight = function(){ + /* + // 1. THE JQUERY WAY + Construct the function + $.fn.imgFixHeight = function(){ - // get image original height - var imgOriginalHeight = this.height(); + // get image original height + var imgOriginalHeight = this.height(); - // Get Line-height - var lineHeight = parseInt($('p').css("line-height")); + // Get Line-height + var lineHeight = parseInt($('p').css('line-height')); - // Calculate the new image height - var div = Math.floor(imgOriginalHeight/lineHeight); - var imgNewHeight = lineHeight * div; + // Calculate the new image height + var div = Math.floor(imgOriginalHeight/lineHeight); + var imgNewHeight = lineHeight * div; - // Apply the new image height - this.css("height", imgNewHeight); -}; -*/ + // Apply the new image height + this.css('height', imgNewHeight); + }; + */ -// 2. THE JAVASCRIPT WAY -// Construct the function -function fixImgHeight(){ + // 2. THE JAVASCRIPT WAY + // Construct the function + function fixImgHeight() { - // Get all images - var images = document.querySelectorAll('img'); + // Get all images + var images = document.querySelectorAll('img'); - // Get line-height - var element = document.getElementsByTagName("body")[0], - style = window.getComputedStyle(element), - lineHeight = parseInt(style.getPropertyValue('line-height')); + // Get line-height + var element = document.getElementsByTagName('body')[0]; + var style = window.getComputedStyle(element); + var lineHeight = parseInt(style.getPropertyValue('line-height')); + var i; + var length = images.length; + var imgOriginalHeight; + var div; + var imgNewHeight; - // For each image in images get original height, calculate height rounded to baseline grid, set new height - for (i = 0; i < images.length; ++i) { + // For each image in images get original height, calculate height rounded to baseline grid, set new height + for (i = 0; i < length; ++i) { - // Get original height - var imgOriginalHeight = images[i].offsetHeight; + // Get original height + imgOriginalHeight = images[i].offsetHeight; - // Calculate new height - var div = Math.floor(imgOriginalHeight/lineHeight); - var imgNewHeight = lineHeight * div; + // Calculate new height + div = Math.floor(imgOriginalHeight / lineHeight); + imgNewHeight = lineHeight * div; - // Set new height - images[i].style.height = imgNewHeight + 'px'; + // Set new height + images[i].style.height = imgNewHeight + 'px'; + } } -} + +}(window, document));