Automattic / Automattic/jetpack
Sharing: change how resources are loaded to allow for defer loading
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
---
I wrote a[ plugin for defer loading javascript](http://wordpress.org/plugins/wp-defer-loading/). This plugin requires all javascript enqueued right with setting dependency properly.
Jetpack sharing plugin write javascript code direct to output (page) i understand why, but i also think it is the wrong way to do.
Examples of this issue are in [sharedaddy/sharing-sources.php](https://github.com/Automattic/jetpack/blob/master/modules/sharedaddy/sharing-sources.php); `js_dialog()` and several `display_footer()` / `display_header()` functions.
One possible solution will be to let the function mentioned above store their data in a global variable. After all function calls call a function which use the global to write right enqueued javascript.
Example for the `js_dialog()` function:
``` php
public $js_dialog_data; // array as global
public function js_dialog( $name, $params = array() ) {
//if($name!=='facebook') return;
$defaults = array(
'menubar' => 1,
'resizable' => 1,
'width' => 600,
'height' => 400,
);
$params = array_merge( $defaults, $params );
$opts = array();
foreach( $params as $key => $val ) {
$opts[] = "$key=$val";
}
$opts = implode( ',', $opts );
$this->js_dialog_data[]=$opts;
}
```
After all js_dialog() call you should call by example:
``` php
public function parse_js_dialog_data()
{
wp_register_script( 'parse_js_dialog_data', plugin_dir_url( __FILE__ ).'parse_js_dialog_data.js', array( 'jquery' ), '20121205' );
wp_enqueue_script( 'parse_js_dialog_data' );
wp_localize_script('parse_js_dialog_data', 'parse_js_dialog_data_options', $this->js_dialog_data);
}
```
With parse_js_dialog_data.js:
``` javascript
jQuery(document).on( 'ready post-load', function(){
jQuery.each( parse_js_dialog_data_option, function( name, options ) {
jQuery( 'a.share-'+name ).on( 'click', function() {
window.open( jQuery(this).attr( 'href' ), 'wpcom'+name, options );
return false;
});
});
});
```
---
Original trac ticket:
- https://plugins.trac.wordpress.org/ticket/2028
Another alternative was proposed in [this ticket](https://plugins.trac.wordpress.org/ticket/1824):
> [Socialite.js](https://github.com/dbushell/Socialite/) allows you to delay the loading of sharing buttons:
Contributor guide
Research direction
Start with sharedaddy/sharing-sources.php, especially js_dialog() and the display_footer() and display_header() functions, and trace where their JavaScript is written directly to the page. Review the linked Trac tickets and existing resource-loading flow; done means sharing scripts are enqueued with their dependencies while preserving the current dialog and sharing-button behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, php
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100