Merge pull request #483 from cloudinary/uat

2.7.5-rc-3

Author: bruckercloud

.eslintrc.json

@@ -7,6 +7,7 @@
     "jQuery": "readonly",
     "$": "readonly",
     "CLDN": "readonly",
+    "CLDLB": "readonly",
     "CLD_GLOBAL_TRANSFORMATIONS": "readonly",
     "samplePlayer": "readonly",
     "CLDCACHE": "readonly"

.version

@@ -1 +1 @@
-2.7.4
+2.7.5-rc-3

css/cloudinary.css

@@ -198,8 +198,6 @@
 			align-self: center;
 			padding: 0 0.45rem;
 			cursor: pointer;
-			position: absolute;
-			right: 0;
 		}
 
 		&-title {
@@ -318,16 +316,23 @@
 	}
 
 	&-group {
+		.cld-group .cld-group {
+			padding-left: 4px;
+		}
 
 		hr {
 			border-top: 1px solid $color-light-grey;
 			margin: 1.5rem 0;
 			clear: both;
 		}
 
+		.cld-group .cld-group hr {
+			display: none;
+		}
+
 		&-heading {
 			display: flex;
-
+			justify-content: space-between;
 			h3 {
 				font-size: 0.9rem;
 

css/src/components/_ui.scss

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => '4f54b160de748912ea5ea5d8ce80f326');

js/cloudinary.js

@@ -17,12 +17,13 @@ const UI = {
 		const triggers = context.querySelectorAll( '[data-bind-trigger]' );
 		const masters = context.querySelectorAll( '[data-master]' );
 		const files = context.querySelectorAll( '[data-file]' );
+		const autoSuffix = context.querySelectorAll( '[data-auto-suffix]' );
 		const self = this;
 		const compilerDebounce = {};
 
 		// Bind on offs.
 		OnOff.bind( masters );
-
+		autoSuffix.forEach( ( input ) => this._autoSuffix( input ) );
 		triggers.forEach( ( input ) => this._trigger( input ) );
 		toggles.forEach( ( toggle ) => this._toggle( toggle ) );
 		conditions.forEach( ( condition ) => this._bind( condition ) );
@@ -48,6 +49,30 @@ const UI = {
 		// Start cache manager.
 		CacheManage.init( context );
 	},
+	_autoSuffix( input ) {
+		const suffixes = input.dataset.autoSuffix;
+		let defaultSuffix = '';
+		const valid = [ ...suffixes.split( ';' ) ].map( ( suffix ) => {
+			if ( 0 === suffix.indexOf( '*' ) ) {
+				defaultSuffix = suffix.replace( '*', '' );
+				return defaultSuffix;
+			}
+			return suffix;
+		} );
+		input.addEventListener( 'change', () => {
+			const value = input.value.replace( ' ', '' );
+			const number = value.replace( /[^0-9]/g, '' );
+			const type = value.replace( /[0-9]/g, '' ).toLowerCase();
+			if ( number ) {
+				if ( -1 === valid.indexOf( type ) ) {
+					input.value = number + defaultSuffix;
+				} else {
+					input.value = number + type;
+				}
+			}
+		} );
+		input.dispatchEvent( new Event( 'change' ) );
+	},
 	_files( file, compilerDebounce ) {
 		const parent = file.dataset.parent;
 		if ( ! parent ) {

js/lazy-load.asset.php

@@ -0,0 +1,200 @@
+const LazyLoad = {
+	density: window.devicePixelRatio ? window.devicePixelRatio : 'auto',
+	images: [],
+	debounce: null,
+	config: CLDLB ? CLDLB : {},
+	lazyThreshold: 0,
+	_init() {
+		this._calcThreshold();
+		[ ...document.images ].forEach( ( image ) => {
+			if ( ! image.dataset.src ) {
+				return;
+			}
+			image.originalWidth = image.dataset.width;
+			this.images.push( image );
+		} );
+
+		// Resize handler.
+		window.addEventListener( 'resize', ( ev ) => {
+			this._debounceBuild();
+		} );
+		window.addEventListener( 'scroll', ( ev ) => {
+			this._debounceBuild();
+		} );
+		// Build images.
+		this._build();
+	},
+	_calcThreshold() {
+		const number = this.config.lazy_threshold.replace( /[^0-9]/g, '' );
+		const type = this.config.lazy_threshold
+			.replace( /[0-9]/g, '' )
+			.toLowerCase();
+		let unit = 0;
+		switch ( type ) {
+			case 'em':
+				unit =
+					parseFloat( getComputedStyle( document.body ).fontSize ) *
+					number;
+				break;
+			case 'rem':
+				unit =
+					parseFloat(
+						getComputedStyle( document.documentElement ).fontSize
+					) * number;
+				break;
+			case 'vh':
+				unit = ( window.innerHeight / number ) * 100;
+				break;
+			default:
+				unit = number;
+		}
+		this.lazyThreshold = window.innerHeight + parseInt( unit, 10 );
+	},
+	_debounceBuild() {
+		if ( this.debounce ) {
+			clearTimeout( this.debounce );
+		}
+		this.debounce = setTimeout( () => {
+			this._build();
+		}, 100 );
+	},
+	_getDensity() {
+		const maxDensity = CLDLB.dpr ? CLDLB.dpr.replace( 'X', '' ) : 'off';
+		if ( 'off' === maxDensity ) {
+			return 1;
+		}
+		let deviceDensity = this.density;
+		if (
+			! CLDLB.dpr_precise &&
+			'auto' !== maxDensity &&
+			'auto' !== deviceDensity
+		) {
+			deviceDensity =
+				deviceDensity > Math.ceil( maxDensity )
+					? maxDensity
+					: deviceDensity;
+		} else if ( 'auto' === CLDLB.dpr && 'auto' !== deviceDensity ) {
+			deviceDensity = 'auto';
+		}
+
+		return deviceDensity;
+	},
+	_build() {
+		this.images.forEach( ( image ) => {
+			this.buildSize( image );
+		} );
+	},
+	_shouldRebuild( image ) {
+		const width = this.scaleSize(
+			image.originalWidth,
+			image.width,
+			this.config.pixel_step
+		);
+		const rect = image.getBoundingClientRect();
+		const density = 'auto' !== this.density ? this._getDensity() : 1;
+		return (
+			rect.top < this.lazyThreshold &&
+			( width > image.naturalWidth / density || ! image.cld_loaded )
+		);
+	},
+	_shouldPlacehold( image ) {
+		const width = this.scaleSize(
+			image.originalWidth,
+			image.width,
+			this.config.pixel_step
+		);
+		const rect = image.getBoundingClientRect();
+		const density = 'auto' !== this.density ? this._getDensity() : 1;
+		return (
+			! image.cld_loaded &&
+			rect.top < this.lazyThreshold * 2 &&
+			( width > image.naturalWidth / density || ! image.cld_placehold )
+		);
+	},
+	getResponsiveSteps( image ) {
+		const steps = Math.ceil(
+			image.dataset.breakpoints
+				? image.originalWidth / image.dataset.breakpoints
+				: this.responsiveStep
+		);
+		return steps;
+	},
+	getQuality() {
+		let quality = 'q_auto';
+		switch (
+			navigator && navigator.connection
+				? navigator.connection.effectiveType
+				: 'none'
+		) {
+			case 'none':
+				break;
+			case '4g':
+				quality = 'q_auto:good';
+				break;
+			case '3g':
+				quality = 'q_auto:eco';
+				break;
+			case '2g':
+			case 'slow-2g':
+				quality = 'q_auto:low';
+				break;
+			default:
+				quality = 'q_auto:best';
+				break;
+		}
+		return quality;
+	},
+	scaleSize( original, newSize, responsiveStep ) {
+		const diff = Math.floor( ( original - newSize ) / responsiveStep );
+		let scaledSize = original - responsiveStep * diff;
+		if ( scaledSize > original ) {
+			scaledSize = original;
+		} else if ( this.config.max_width < scaledSize ) {
+			scaledSize = original;
+		}
+		return scaledSize;
+	},
+	buildSize( image ) {
+		if ( this._shouldRebuild( image ) ) {
+			if ( image.dataset.srcset ) {
+				image.srcset = image.dataset.srcset;
+			} else {
+				image.src = this.getSizeURL( image );
+			}
+		} else if ( this._shouldPlacehold( image ) ) {
+			image.src = this.getPlaceholderURL( image );
+		}
+	},
+	getSizeURL( image ) {
+		image.cld_loaded = true;
+		if ( image.dataset.srcset ) {
+			image.srcset = image.dataset.srcset;
+			delete image.dataset.srcset;
+			return '';
+		}
+		const width = this.scaleSize(
+			image.originalWidth,
+			image.width,
+			this.config.pixel_step
+		);
+		const density = this._getDensity();
+		let newSize = '';
+		if ( width ) {
+			newSize += 'w_' + width;
+			if ( 1 !== density ) {
+				newSize += ',dpr_' + density;
+			}
+		}
+		return image.dataset.src
+			.replace( '--size--', newSize )
+			.replace( /q_auto(?!:)/gi, this.getQuality() );
+	},
+	getPlaceholderURL( image ) {
+		image.cld_placehold = true;
+		return image.dataset.placeholder.replace( '/--size--', '/' );
+	},
+};
+// Init.
+window.addEventListener( 'load', () => {
+	LazyLoad._init();
+} );