-
Notifications
You must be signed in to change notification settings - Fork 167
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.
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
Added if statement and replaced jQuery with Vanilla JS #76
base: master
Are you sure you want to change the base?
Conversation
… have this snippet on all the php files. It's up to you if you want that. Pro tip: it's safer
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for working on this @PlanB007! Removing the dependency on jQuery is a great improvement. Just a few comments on how we might be able to improve things further.
'clip': 'rect(1px, 1px, 1px, 1px)', | ||
'position': 'absolute' | ||
} ); | ||
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto'; |
There was a problem hiding this comment.
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''
} );
There was a problem hiding this comment.
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
.
There was a problem hiding this comment.
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.
$( '.site-title a, .site-description' ).css( { | ||
'color': to | ||
} ); | ||
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto'; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
@@ -1,4 +1,4 @@ | |||
<?php | |||
<?php if( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
💯
} )( jQuery ); | ||
}); | ||
}); | ||
})( jQuery ); |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
'color': to | ||
} ); | ||
document.querySelector( '.site-title, .site-description' ).style.clip = 'auto'; | ||
document.querySelector( '.site-title, .site-description' ).style.position = 'relative'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Spaces here too
$( '.site-title a' ).text( to ); | ||
} ); | ||
} ); | ||
document.querySelector( '.site-title a' ).textContent( to ); |
There was a problem hiding this comment.
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.
document.querySelector( '.site-title a' ).textContent( to ); | |
document.querySelector( '.site-title a' ).textContent = to; |
$( '.site-description' ).text( to ); | ||
} ); | ||
} ); | ||
document.querySelector( '.site-description' ).textContent( to ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
document.querySelector( '.site-description' ).textContent( to ); | |
document.querySelector( '.site-description' ).textContent = to; |
As you can see by my commits I've added an if statement on one of your files. For WP this is a best practices pieces of code, you can find all the extra info on Google. For the jQuery, you used there was some very easy Vanilla JS which is, in this case, better than jQuery (check out youmightnotneedjquery.com ) always keep libs and frameworks as low as possible.