Automattic / Automattic/jetpack

Sharing: change how resources are loaded to allow for defer loading

Open
#848 3 comments 0 reactions 0 assignees View on GitHub
[Feature] Sharing Enhancement Good For Community
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.