Skip to content
This repository was archived by the owner on Jun 24, 2025. It is now read-only.

Added if statement and replaced jQuery with Vanilla JS #76

Open
PlanB007 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 );

@ZebulanStanphill ZebulanStanphill Dec 6, 2019

Copy link
Copy Markdown
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 );

@ZebulanStanphill ZebulanStanphill Dec 6, 2019

Copy link
Copy Markdown
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';

@pablinos pablinos Nov 5, 2018

Copy link
Copy Markdown
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''
	} );

@PlanB007 PlanB007 Nov 5, 2018

Copy link
Copy Markdown
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.

@pablinos pablinos Nov 5, 2018

Copy link
Copy Markdown
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';

@pablinos pablinos Nov 5, 2018

Copy link
Copy Markdown
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.

@PlanB007 PlanB007 Nov 5, 2018

Copy link
Copy Markdown
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.

@ntwb ntwb Dec 6, 2019

Copy link
Copy Markdown
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';

@ntwb ntwb Dec 6, 2019

Copy link
Copy Markdown
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 );

@pablinos pablinos Nov 5, 2018

Copy link
Copy Markdown
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.

@m-e-h m-e-h Dec 6, 2019

Copy link
Copy Markdown
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

@pablinos pablinos Nov 5, 2018

Copy link
Copy Markdown
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.

@pattonwebz pattonwebz Dec 3, 2019

Copy link
Copy Markdown
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

@m-e-h m-e-h Dec 6, 2019

Copy link
Copy Markdown
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