forked from matejlatin/Gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
89014b1
commit 4a1cd48
Showing
1 changed file
with
97 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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)); |