Skip to content

Commit

Permalink
Merge pull request #16 from Codeinwp/v106
Browse files Browse the repository at this point in the history 
Integrates lazy load feature with support for low-quality placeholders ( LQIP ). 
Integrates Javascript library which delivers images at the right size for each device, including Retina.
Improve image replacement algorithm.
Improves compatibility with Elementor and Gutenberg. 
Adds support for Custom CNAME and Client hints.
Improves support for custom CDN. 
Improves AMP support. 
Improves compatibility with WordPress Multisites.
  • Loading branch information
@selul
selul authored Nov 16, 2018
2 parents c923e94 + b8633c2 commit 2697abd
Show file tree
Hide file tree
Showing 19 changed files with 998 additions and 393 deletions.
6 changes: 3 additions & 3 deletions assets/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
#optimole-app {
padding: 0 30px 0 20px;

$primary: #e7602a;
$primary: #EF686B;
$success: #34a85e;
$danger: #d54222;
$info: #008ec2;
$danger: #D54222;
$info: #5180C1;

@import "~bulma/bulma";

Expand Down
Binary file modified assets/img/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
339 changes: 183 additions & 156 deletions assets/js/bundle.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions assets/js/bundle.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions assets/vue/components/app-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<div class="level-left">
<a class="logo level-item" href="https://optimole.com" target="_blank">
<figure class="media">
<img :src="logo" :alt="strings.optimole + ' ' + strings.service_details">
<img :src="logo" :alt="strings.optimole + ' ' + strings.service_details" width="75" height="75">
</figure>
</a>
<h3 class="has-text-centered has-text-grey-dark is-size-4 level-item">
<span class="has-text-weight-semibold">
{{strings.service_details}}
OptiMole - {{strings.service_details}}
</span>
</h3>
</div>
Expand Down
27 changes: 27 additions & 0 deletions assets/vue/components/options.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,25 @@
color="#008ec2"></toggle-button>
</div>
</div>

<div class="field is-fullwidth columns">
<label class="label column has-text-grey-dark">
{{strings.toggle_lazyload}}
<p class="is-italic has-text-weight-normal">
{{strings.lazyload_desc}}
</p>
</label>

<div class="column ">
<toggle-button :class="'has-text-dark'"
v-model="lazyLoadStatus"
:disabled="this.$store.state.loading"
:labels="{checked: strings.enabled, unchecked: strings.disabled}"
:width="80"
:height="25"
color="#008ec2"></toggle-button>
</div>
</div>

<div class="field is-fullwidth columns n">
<label class="label is-half column has-text-grey-dark no-padding-right ">
Expand Down Expand Up @@ -249,6 +268,14 @@
return !(this.site_settings.admin_bar_item === 'disabled');
}
},
lazyLoadStatus: {
set: function (value) {
this.new_data.lazyload = value ? 'enabled' : 'disabled';
},
get: function () {
return !(this.site_settings.lazyload === 'disabled');
}
},
widthStatus: {
set: function (value) {
this.new_data.max_width = value;
Expand Down
2 changes: 1 addition & 1 deletion docker-compose.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ services:
mysql:
image: mysql:5.7
volumes:
- ~/optml/db_data:/var/lib/mysql
- ~/optmlwp/db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: wordpress
Expand Down
154 changes: 151 additions & 3 deletions inc/admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,13 @@ class Optml_Admin {
*/
public function __construct() {
$this->settings = new Optml_Settings();

add_action( 'plugin_action_links_' . plugin_basename( OPTML_BASEFILE ), array( $this, 'add_action_links' ) );
add_action( 'admin_menu', array( $this, 'add_dashboard_page' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue' ), PHP_INT_MIN );
add_action( 'admin_notices', array( $this, 'add_notice' ) );
add_filter( 'admin_body_class', array( $this, 'add_body_class' ) );

add_action( 'wp_enqueue_scripts', array( $this, 'frontend_scripts' ) );
add_action( 'admin_bar_menu', array( $this, 'add_traffic_node' ), 9999 );
add_filter( 'wp_resource_hints', array( $this, 'add_dns_prefetch' ), 10, 2 );
add_action( 'optml_daily_sync', array( $this, 'daily_sync' ) );
Expand All @@ -40,12 +44,149 @@ public function __construct() {
wp_schedule_event( time() + 10, 'daily', 'optml_daily_sync', array() );
}
}

if ( $this->settings->use_lazyload() ) {
add_filter( 'body_class', array( $this, 'optimole_body_classes' ) );
}
}

/**
* Adds body class for no-js.
*
* @param array $classes No js class.
*
* @return array
*/
public function optimole_body_classes( $classes ) {
$classes[] = 'optimole-no-script';
return $classes;
}

/**
* Add settings links in the plugin listing page.
*
* @param array $links Old plugin links.
*
* @return array Altered links.
*/
function add_action_links( $links ) {
if ( ! is_array( $links ) ) {
return $links;
}

return array_merge(
$links,
array(
'<a href="' . admin_url( 'upload.php?page=optimole' ) . '">' . __( 'Settings', 'optimole-wp' ) . '</a>',
)
);
}

/**
* Adds optimole optin class.
*
* @return string Optimole class.
*/
public function add_body_class( $classes ) {

if ( ! $this->should_show_notice() ) {
return $classes;
}
$classes .= ' optimole-optin-show ';

return $classes;
}

/**
* Check if we should show the notice.
*
* @return bool Should show?
*/
public function should_show_notice() {

if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
return false;
}

if ( is_network_admin() ) {
return false;
}

if ( $this->settings->is_connected() ) {
return false;
}
$current_screen = get_current_screen();
if ( empty( $current_screen ) ) {
return false;
}
static $allowed_base = array(
'plugins' => true,
'upload' => true,
'media' => true,
'themes' => true,
'appearance_page_tgmpa-install-plugins' => true,
);
$screen_slug = isset( $current_screen->parent_base ) ? $current_screen->parent_base : isset( $current_screen->base ) ? $current_screen->base : '';

if ( empty( $screen_slug ) ||
( ! isset( $allowed_base[ $screen_slug ] ) ) ) {
return false;
}
if ( ! current_user_can( 'manage_options' ) ) {
return false;
}
if ( ( get_option( 'optml_notice_optin', 'no' ) === 'yes' ) ) {
return false;
}

return true;
}


/**
* Adds optin notice.
*/
public function add_notice() {
if ( ! $this->should_show_notice() ) {
return;
}
?>
<div class="notice notice-success optml-notice-optin">
<p> <?php printf( __( 'Welcome to %1$sOptiMole%2$s, the easiest way to optimize your website images. Your users will enjoy a %3$sfaster%4$s website after you connect it with our service.', 'optimole-wp' ), '<strong>', '</strong>', '<strong>', '</strong>' ); ?></p>
<p>
<a href="<?php echo esc_url( admin_url( 'upload.php?page=optimole' ) ); ?>"
class="button button-primary"><?php _e( 'Connect to OptiMole', 'optimole-wp' ); ?></a>
<a class="button"
href="<?php echo wp_nonce_url( add_query_arg( array( 'optml_hide_optin' => 'yes' ) ), 'hide_nonce', 'optml_nonce' ); ?>"><?php _e( 'I will do it later', 'optimole-wp' ); ?></a>
</p>
</div>
<?php
}

/**
* Enqueue frontend scripts.
*/
public function frontend_scripts() {

if ( ! $this->settings->use_lazyload() ) {
return;
}
wp_enqueue_script( 'optm_lazyload_replacer_js', 'https://' . OPTML_JS_CDN . '/latest/optimole_lib' . ( ! OPTML_DEBUG ? '.min' : '' ) . '.js', array(), OPTML_VERSION, false );
wp_add_inline_script( 'optm_lazyload_replacer_js', 'document.addEventListener( "DOMContentLoaded", function() { document.body.className = document.body.className.replace("optimole-no-script",""); } );' );
wp_register_style( 'optm_lazyload_noscript_style', false );
wp_enqueue_style( 'optm_lazyload_noscript_style' );
wp_add_inline_style( 'optm_lazyload_noscript_style', '.optimole-no-script img[data-opt-src] { display: none !important; }' );
}

/**
* Maybe redirect to dashboard page.
*/
public function maybe_redirect() {

if ( isset( $_GET['optml_nonce'] ) && isset( $_GET['optml_hide_optin'] ) && $_GET['optml_hide_optin'] === 'yes' && wp_verify_nonce( $_GET['optml_nonce'], 'hide_nonce' ) ) {
update_option( 'optml_notice_optin', 'yes' );
}

if ( ! get_transient( 'optml_fresh_install' ) ) {
return;
}
Expand Down Expand Up @@ -129,6 +270,7 @@ public function add_dns_prefetch( $hints, $relation_type ) {
return $hints;
}
$hints[] = sprintf( '//%s', $this->settings->get_cdn_url() );
$hints[] = sprintf( '//%s', OPTML_JS_CDN );

return $hints;
}
Expand All @@ -144,6 +286,9 @@ public function add_dashboard_page() {
* Render dashboard page.
*/
public function render_dashboard_page() {
if ( get_option( 'optml_notice_optin', 'no' ) !== 'yes' ) {
update_option( 'optml_notice_optin', 'yes' );
}
?>
<div id="optimole-app">
<app></app>
Expand All @@ -155,6 +300,7 @@ public function render_dashboard_page() {
* Enqueue scripts needed for admin functionality.
*/
public function enqueue() {

$current_screen = get_current_screen();
if ( ! isset( $current_screen->id ) ) {
return;
Expand Down Expand Up @@ -245,6 +391,7 @@ private function get_dashboard_strings() {
'settings_menu_item' => __( 'Settings', 'optimole-wp' ),
'options_strings' => array(
'toggle_ab_item' => __( 'Admin bar status', 'optimole-wp' ),
'toggle_lazyload' => __( 'Javascript replacement & Lazy load', 'optimole-wp' ),
'enable_image_replace' => __( 'Enable image replacement', 'optimole-wp' ),
'show' => __( 'Show', 'optimole-wp' ),
'hide' => __( 'Hide', 'optimole-wp' ),
Expand All @@ -269,6 +416,7 @@ private function get_dashboard_strings() {
'quality_slider_desc' => __( ' See one sample image which will help you choose the right quality of the compression.', 'optimole-wp' ),
'replacer_desc' => __( 'Replace all the image urls from your website with the ones optimized by Optimole.', 'optimole-wp' ),
'admin_bar_desc' => __( 'Show in the WordPress admin bar the available quota from Optimole service.', 'optimole-wp' ),
'lazyload_desc' => __( 'We will generate images size based on your visitor\'s screen using javascript and render them without blocking the page execution via lazyload.', 'optimole-wp' ),
),
'latest_images' => array(
'image' => __( 'Image', 'optimole-wp' ),
Expand Down Expand Up @@ -307,7 +455,7 @@ public function add_traffic_node( $wp_admin_bar ) {
$args = array(
'id' => 'optml_image_quota',
'title' => 'Optimole' . __( ' Image Traffic', 'optimole-wp' ) . ': ' . number_format( floatval( ( $service_data['usage'] / 1000 ) ), 3 ) . ' / ' . number_format( floatval( ( $service_data['quota'] / 1000 ) ), 0 ) . 'GB',
'href' => 'https://dashboard.optimole.com/',
'href' => admin_url( 'upload.php?page=optimole' ),
'meta' => array(
'target' => '_blank',
'class' => $should_load !== 'enabled' ? 'hidden' : '',
Expand Down
21 changes: 11 additions & 10 deletions inc/api.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ final class Optml_Api {
* @var string Api root.
*/
private $api_root = 'https://dashboard.optimole.com/api/optml/v1/';
// private $api_root = 'http://localhost:8000/api/optml/v1/';
/**
* Hold the user api key.
*
Expand Down Expand Up @@ -55,11 +56,11 @@ private function request( $path, $method = 'GET', $params = array() ) {

// Grab the url to which we'll be making the request.
$url = $this->api_root;
$headers = array();
$headers = array(
'Optml-Site' => get_site_url(),
);
if ( ! empty( $this->api_key ) ) {
$headers = array(
'Authorization' => 'Bearer ' . $this->api_key,
);
$headers['Authorization'] = 'Bearer ' . $this->api_key;
}
// If there is a extra, add that as a url var.
if ( 'GET' === $method && ! empty( $params ) ) {
Expand All @@ -69,12 +70,12 @@ private function request( $path, $method = 'GET', $params = array() ) {
}
$url = trailingslashit( $this->api_root ) . ltrim( $path, '/' );
$args = array(
'url' => $url,
'method' => $method,
'timeout' => 45,
'httpversion' => 'Optimle WP (v' . OPTML_VERSION . ') ',
'sslverify' => false,
'headers' => $headers,
'url' => $url,
'method' => $method,
'timeout' => 45,
'user-agent' => 'Optimle WP (v' . OPTML_VERSION . ') ',
'sslverify' => false,
'headers' => $headers,
);
if ( $method !== 'GET' ) {
$args['body'] = $params;
Expand Down
Loading

0 comments on commit 2697abd

Please sign in to comment.