Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added if statement and replaced jQuery with Vanilla JS #76

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added if statement and replaced jQuery with Vanilla JS #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97af247
Added if statement so the file can't be accessed directly, you should…
PlanB007 Oct 2, 2018
eedd500
changed jQuery code to Vanilla JS
PlanB007 Oct 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 14 additions & 20 deletions js/customizer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,26 @@
// Site title and description.
wp.customize( 'blogname', function( value ) {
value.bind( function( to ) {
$( '.site-title a' ).text( to );
} );
} );
document.querySelector( '.site-title a' ).textContent( to );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is invalid since textContent is not a function.

Suggested change
document.querySelector( '.site-title a' ).textContent( to );
document.querySelector( '.site-title a' ).textContent = to;

});
});
wp.customize( 'blogdescription', function( value ) {
value.bind( function( to ) {
$( '.site-description' ).text( to );
} );
} );
document.querySelector( '.site-description' ).textContent( to );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
document.querySelector( '.site-description' ).textContent( to );
document.querySelector( '.site-description' ).textContent = to;

});
});

// Header text color.
wp.customize( 'header_textcolor', function( value ) {
value.bind( function( to ) {
if ( 'blank' === to ) {
$( '.site-title, .site-description' ).css( {
'clip': 'rect(1px, 1px, 1px, 1px)',
'position': 'absolute'
} );
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where we're changing multiple styles at the same time it may be preferrable to use the Object.assign syntax. For example:

Object.assign( document.querySelector( '.site-title, .site-description' ).style, 
	{
		'clip': 'rect(1px, 1px, 1px, 1px)',
		'position': 'absolute''
	} );

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you mean there are multiple .site-title and .site-description you can use Object.assign. I haven't used it before, always could solve it easy with just document.querySelector.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are multiple statements that start document.querySelector( '.site-title, .site-description' ).style to change more than one property of the element's style. Using Object.assign like this would mean that document.querySelector is only called once.

document.querySelector( '.site-title, .site-description' ).style.position = 'absolute'
} else {
$( '.site-title, .site-description' ).css( {
'clip': 'auto',
'position': 'relative'
} );
$( '.site-title a, .site-description' ).css( {
'color': to
} );
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again Object.assign syntax could simplify this. There's also a whitespace issue here, it looks like spaces and not tabs at the start of the line.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There maybe went something wrong with the indent/whitespace there, although it seems weird since it doesn't happen al the time.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its definitely spaces used instead of tabs

document.querySelector( '.site-title, .site-description' ).style.position = 'relative';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spaces here too

document.querySelector( '.site-title a, .site-description' ).style.color = to ;
}
} );
} );
} )( jQuery );
});
});
})( jQuery );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we've removed the dependency in jQuery we can remove it as a parameter. Alternatively, we can probably remove the closure altogether, which would simplify things further.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was marked resolved... looks like "jQuery" is still here? Also the $ parameter up top.

2 changes: 1 addition & 1 deletion single.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?php
<?php if( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's often a good idea to use this check in themes and plugin files that are running code that access globals like $_GET and $_POST. That isn't the case here and so the check is probably unnecessary. If we were to add it then it should be a separate change in a new PR.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree this is unnecessary here but doesn't hurt either. What does hurt is my OCD because it's before the file comment :p

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be a separate change in a new PR.

💯

/**
* The template for displaying all single posts
*
Expand Down