Skip to content
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.

Sign up for GitHub

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

Feature/crop icons #96

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Feature/crop icons #96

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b786442
Implement Image select & crop on Icon and Splash icon upload
Jan 26, 2019
ef6c3e8
Make input name dynamic in `selectAndCropBtnHandler`
Feb 4, 2019
fbff7a3
Reuse `selectAndCropBtnHandler` for both App & Splash icon
Feb 4, 2019
9f97a07
Set Splash Icon crop wxh to 512x512
Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 205 additions & 30 deletions admin/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,210 @@
var mediaUploader;

function superPWACalculateImageSelectOptions(attachment, controller) {

var control = controller.get( 'control' );

var flexWidth = !! parseInt( control.params.flex_width, 10 );
var flexHeight = !! parseInt( control.params.flex_height, 10 );

var realWidth = attachment.get( 'width' );
var realHeight = attachment.get( 'height' );

var xInit = parseInt(control.params.width, 10);
var yInit = parseInt(control.params.height, 10);

var ratio = xInit / yInit;

controller.set( 'canSkipCrop', ! control.mustBeCropped( flexWidth, flexHeight, xInit, yInit, realWidth, realHeight ) );

var xImg = xInit;
var yImg = yInit;

if ( realWidth / realHeight > ratio ) {
yInit = realHeight;
xInit = yInit * ratio;
} else {
xInit = realWidth;
yInit = xInit / ratio;
}

var x1 = ( realWidth - xInit ) / 2;
var y1 = ( realHeight - yInit ) / 2;

var imgSelectOptions = {
handles: true,
keys: true,
instance: true,
persistent: true,
imageWidth: realWidth,
imageHeight: realHeight,
minWidth: xImg > xInit ? xInit : xImg,
minHeight: yImg > yInit ? yInit : yImg,
x1: x1,
y1: y1,
x2: xInit + x1,
y2: yInit + y1
};

return imgSelectOptions;
}

function superPWAsetImageFromURL(url, attachmentId, width, height, inputName) {
$("input[name='" + inputName + "']").val( url );
}

function superPWAsetImageFromAttachment(attachment, inputName) {
$("input[name='" + inputName +"']").val( attachment.url );
}

function selectAndCropBtnHandler(e) {
e.preventDefault();

var inputFieldsList = {
'superpwa-icon-upload': {name: 'superpwa_settings[icon]', width: 192, height: 192},
'superpwa-splash-icon-upload': {name: 'superpwa_settings[splash_icon]', width: 512, height: 512},
}, inputName, fieldKey;

if($(e.target).hasClass('superpwa-icon-upload')) {
fieldKey = 'superpwa-icon-upload';
inputName = inputFieldsList[fieldKey]['name']
} else if ($(e.target).hasClass('superpwa-splash-icon-upload')) {
fieldKey = 'superpwa-splash-icon-upload';
inputName = inputFieldsList[fieldKey]['name'];
} else {
inputName = '';
}

/* We need to setup a Crop control that contains a few parameters
and a method to indicate if the CropController can skip cropping the image.
In this example I am just creating a control on the fly with the expected properties.
However, the controls used by WordPress Admin are api.CroppedImageControl and api.SiteIconControl
*/

var cropControl = {
id: "control-id",
params: {
flex_width: false, // set to true if the width of the cropped image can be different to the width defined here
flex_height: true, // set to true if the height of the cropped image can be different to the height defined here
width: inputFieldsList[fieldKey]['width'], // set the desired width of the destination image here
height: inputFieldsList[fieldKey]['height'], // set the desired height of the destination image here
}
};

cropControl.mustBeCropped = function (flexW, flexH, dstW, dstH, imgW, imgH) {

// If the width and height are both flexible
// then the user does not need to crop the image.

if (true === flexW && true === flexH) {
return false;
}

// If the width is flexible and the cropped image height matches the current image height,
// then the user does not need to crop the image.
if (true === flexW && dstH === imgH) {
return false;
}

// If the height is flexible and the cropped image width matches the current image width,
// then the user does not need to crop the image.
if (true === flexH && dstW === imgW) {
return false;
}

// If the cropped image width matches the current image width,
// and the cropped image height matches the current image height
// then the user does not need to crop the image.
if (dstW === imgW && dstH === imgH) {
return false;
}

// If the destination width is equal to or greater than the cropped image width
// then the user does not need to crop the image...
if (imgW <= dstW) {
return false;
}

return true;
};

/* NOTE: Need to set this up every time instead of reusing if already there
as the toolbar button does not get reset when doing the following:

mediaUploader.setState('library');
mediaUploader.open();

*/

mediaUploader = wp.media({
button: {
text: 'Select and Crop', // l10n.selectAndCrop,
close: false
},
states: [
new wp.media.controller.Library({
title: 'Select and Crop', // l10n.chooseImage,
library: wp.media.query({type: 'image'}),
multiple: false,
date: false,
priority: 20,
suggestedWidth: inputFieldsList[fieldKey]['width'],
suggestedHeight: inputFieldsList[fieldKey]['height']
}),
new wp.media.controller.CustomizeImageCropper({
imgSelectOptions: superPWACalculateImageSelectOptions,
control: cropControl
})
]
});

mediaUploader.on('cropped', function (croppedImage) {

var url = croppedImage.url,
attachmentId = croppedImage.attachment_id,
w = croppedImage.width,
h = croppedImage.height;

superPWAsetImageFromURL(url, attachmentId, w, h, inputName);

});

mediaUploader.on('skippedcrop', function (selection) {

var url = selection.get('url'),
w = selection.get('width'),
h = selection.get('height');

superPWAsetImageFromURL(url, selection.id, w, h, inputName);

});

mediaUploader.on("select", function () {

var attachment = mediaUploader.state().get('selection').first().toJSON();

if (cropControl.params.width === attachment.width
&& cropControl.params.height === attachment.height
&& !cropControl.params.flex_width
&& !cropControl.params.flex_height) {
superPWAsetImageFromAttachment(attachment, inputName);
mediaUploader.close();
} else {
mediaUploader.setState('cropper');
}

});

mediaUploader.open();
}

jQuery(document).ready(function($){
$('.superpwa-colorpicker').wpColorPicker(); // Color picker
$('.superpwa-icon-upload').click(function(e) { // Application Icon upload
e.preventDefault();
var superpwa_meda_uploader = wp.media({
title: 'Application Icon',
button: {
text: 'Select Icon'
},
multiple: false // Set this to true to allow multiple files to be selected
})
.on('select', function() {
var attachment = superpwa_meda_uploader.state().get('selection').first().toJSON();
$('.superpwa-icon').val(attachment.url);
})
.open();
});
$('.superpwa-splash-icon-upload').click(function(e) { // Splash Screen Icon upload
e.preventDefault();
var superpwa_meda_uploader = wp.media({
title: 'Splash Screen Icon',
button: {
text: 'Select Icon'
},
multiple: false // Set this to true to allow multiple files to be selected
})
.on('select', function() {
var attachment = superpwa_meda_uploader.state().get('selection').first().toJSON();
$('.superpwa-splash-icon').val(attachment.url);
})
.open();
});

$('.superpwa-icon-upload').click(selectAndCropBtnHandler);

$('.superpwa-splash-icon-upload').click(selectAndCropBtnHandler);

$('.superpwa-app-short-name').on('input', function(e) { // Warn when app_short_name exceeds 12 characters.
if ( $('.superpwa-app-short-name').val().length > 12 ) {
$('.superpwa-app-short-name').css({'color': '#dc3232'});
Expand Down