Skip to content
This repository has been archived by the owner on Oct 28, 2018. It is now read-only.

Commit

Permalink
more progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@ineffyble
ineffyble committed Aug 21, 2016
1 parent 15f6429 commit 6755586
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 42 deletions.
16 changes: 16 additions & 0 deletions causality-admin.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
var causalityAddOverlayField = function(e) {
jQuery("#causality_overlay_fields").append("<div class='causality_overlay_field'><b>Title</b><input type='text' class='causality_overlay_title' value=''><b>URL</b><input type='text' class='causality_overlay_url' value=''></div><br>");
e.preventDefault();
}

jQuery("#causality_settings_form").submit(function(event) {
overlays = {};
jQuery.each(jQuery(".causality_overlay_field"), function(i, f) {
title = jQuery(this).find(".causality_overlay_title").val();
url = jQuery(this).find(".causality_overlay_url").val();
if (title && url) {
overlays[title] = url;
}
});
jQuery("#causality_overlays").val(JSON.stringify(overlays));
});
3 changes: 3 additions & 0 deletions causality.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@
.jcrop-holder div div .jcrop-tracker {
background-size: cover;
}

#causality_upload, .causality-button, #causality_output, #causality_jcrop_container {
display: none;
}
124 changes: 94 additions & 30 deletions causality.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,87 @@
var jcrop_api;
var jcrop_api, causalityStyle;

var causalityActivateUpload = function() {
jQuery("#causality_activate_upload, #causality_facebook_login").fadeOut(function() {jQuery("#causality_upload").fadeIn();});
}

var causalityInitFacebookSDK = function() {
jQuery.ajaxSetup({ cache: true });
jQuery.getScript('//connect.facebook.net/en_US/sdk.js', function() {
FB.init({
appId: causality_fb_app_id,
version: 'v2.7'
});
});
}

var causalityFacebookLogin = function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
causalityGetFacebookPhoto();
} else {
FB.login(function() {
causalityGetFacebookPhoto();
});
}
});
}

var causalityGetFacebookPhoto = function() {
FB.api('/me/picture?width=960&height=960', function(response) {
if (response && !response.error) {
casualityInitCropInterface(response.data.url);
}
});
}

var casualityUploadHandler = function() {
input = this;
var input = this;
if (input.files && input.files[0]) {
causalityReadFile(input.files[0]);
casualityInitCropInterface(input.files[0]);
}
};

var casualityInitCropInterface = function(file) {
var causalityReadFile = function(file) {
var reader = new FileReader();
reader.onload = function (e) {
var read = e.target.result;
profileImage = new Image();
profileImage.id = 'causality_jcrop_img';
profileImage.onload = function() {
jQuery("#causality_jcrop").append(profileImage);
console.log(jQuery(".entry-content").width());
jQuery("#causality_jcrop").Jcrop({aspectRatio: 1, trueSize: [profileImage.naturalWidth, profileImage.naturalHeight]}, function() {
jcrop_api = this;
});
var dim = jcrop_api.getBounds();
var x = 0, y = 0, x_ = dim[0], y_ = dim[1];
reader.onload = function(e) {
casualityInitCropInterface(e.target.result);
}
reader.readAsDataURL(file);
};

var casualityInitCropInterface = function(imagesrc) {
jQuery("#causality_facebook_login, #causality_activate_upload, #causality_upload").fadeOut(function(){jQuery("#causality_jcrop_container").fadeIn()});;
jQuery("#causality_jcrop_container").html('<div id="causality_jcrop"></div>');
profileImage = new Image();
profileImage.crossOrigin = "Anonymous";
profileImage.id = 'causality_jcrop_img';
profileImage.onload = function() {
jQuery("#causality_jcrop").html(profileImage);
jQuery(profileImage).width(jQuery(profileImage).width()); //Set the width to an explicit px based on current width (which should be max-width: 100%). This is required because jCrop computes the max-width wrong (ignores padding).
jQuery("#causality_jcrop").Jcrop({aspectRatio: 1, trueSize: [profileImage.naturalWidth, profileImage.naturalHeight]}, function() {
jcrop_api = this;
});
var dim = jcrop_api.getBounds();
var x = 0, y = 0, x_ = dim[0], y_ = dim[1];

var x_r = (x_ / 1) - y_;
var y_r = (y_ / 1) - x_;
var x_r = (x_ / 1) - y_;
var y_r = (y_ / 1) - x_;

if (x_r > 0) {
x = x_r / 2;
}
if (y_r > 0) {
y = y_r / 2;
}
if (x_r > 0) {
x = x_r / 2;
}
if (y_r > 0) {
y = y_r / 2;
}

jcrop_api.setSelect([x, y, dim[0], dim[1]]);
};
profileImage.src = read;
jcrop_api.setSelect([x, y, dim[0], dim[1]]);
jQuery("#causality_crop").fadeIn();
};
reader.readAsDataURL(file);
profileImage.src = imagesrc;
};

var casualityCrop = function() {
var causalityCrop = function() {
var selection = jcrop_api.tellSelect();
console.log(selection);
causalityRenderProfile(selection.x, selection.y, selection.w, selection.h, selection.x2, selection.y2);
Expand All @@ -56,10 +98,32 @@ var causalityRenderProfile = function(x, y, w, h, x2, y2) {
ctx.drawImage(profileImage, x, y, w, h, 0, 0, 960, 960);
ctx.drawImage(overlayImage, 0, 0, 960, 960);
data = canvas.toDataURL();
jQuery("#causality_output").html('<img src="' + data + '" width="500px" height="500px"/>');
jQuery("#causality_output").html('<img src="' + data + '" width="500px" height="500px"/>');
jQuery("#causality_jcrop_container, #causality_crop").fadeOut(function() {jQuery("#causality_output, #causality_overlay").fadeIn();});;
};

};

var causalitySetOverlay = function(url) {
causality_overlay = url;
if (!causalityStyle) {
causalityStyle = document.createElement('style');
causalityStyle.type = 'text/css';
jQuery("head").append(causalityStyle);
}
jQuery(causalityStyle).html(".jcrop-holder div div .jcrop-tracker{background: url('" + causality_overlay + "');");
if (jQuery("#causality_output").html()) {
causalityCrop();
} else {
jQuery("#causality_overlay").fadeOut(function(){jQuery("#causality_facebook_login, #causality_activate_upload").fadeIn();});
}
}

jQuery('#causality_upload').change(casualityUploadHandler);
jQuery("#causality_crop_button").click(casualityCrop);
jQuery("#causality_crop").click(causalityCrop);
jQuery("#causality_overlay").change(function() {
if (this.value) {
causalitySetOverlay(this.value);
}
});
causalityInitFacebookSDK();
59 changes: 47 additions & 12 deletions causality.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ function causality_settings_init() {
);

add_settings_field(
'causality_image_url',
'Campaign image URL',
'causality_settings_image_url_render',
'causality_fb_app_id',
'Facebook App ID',
'causality_settings_fb_app_id_render',
'causality_settings',
'causality_settings_section'
);
Expand All @@ -51,7 +51,11 @@ function causality_settings_init() {
);

register_setting(
'causality', 'causality_image_url'
'causality', 'causality_overlays'
);

register_setting(
'causality', 'causality_fb_app_id'
);
}

Expand All @@ -64,21 +68,38 @@ function causality_settings_title_render() {
echo "<input type='text' name='causality_title' value='$setting' />"; // XSS ok.
}

function causality_settings_image_url_render() {
$setting = esc_attr( get_option( 'causality_image_url' ) );
echo "<input type='text' name='causality_image_url' value='$setting' />"; // XSS ok.
function causality_settings_overlays_render() {
$setting = get_option( 'causality_overlays' );
echo "<input type='text' id='causality_overlays' name='causality_overlays' value='$setting' style='display: none;'/'>"; // XSS ok.
echo '<div id="causality_overlay_fields">';
if ( $overlays = json_decode( $setting, true ) ) {
foreach ( $overlays as $title => $url ) {
echo "<div class='causality_overlay_field'><b>Title</b><input type='text' class='causality_overlay_title' value='" . esc_attr( $title ) . "'><b>URL</b><input type='text' class='causality_overlay_url' value='" . esc_url( $url ) . "'></div><br>";
}
} else {
echo "<div class='causality_overlay_field'><b>Title</b><input type='text' class='causality_overlay_title' value=''><b>URL</b><input type='text' class='causality_overlay_url' value=''></div><br>";
}
echo '</div>';
echo '<button id="causality_add_overlay_field" onclick="causalityAddOverlayField(event)">Add more</button>';
}

function causality_settings_fb_app_id_render() {
$setting = esc_attr( get_option( 'causality_fb_app_id' ) );
echo "<input type='text' name='causality_fb_app_id' value='$setting' />"; // XSS ok.
}

/**
* Settings page
*/
function causality_settings_page() {
wp_enqueue_script( 'causality-admin', plugins_url( 'causality-admin.js', __FILE__ ), [ 'jquery' ] );
?>
<div class="wrap">
<h1>Causality settings</h1>
<form method="post" action="options.php" id="causality_settings_form">
<?php settings_fields( 'causality' ); ?>
<?php do_settings_sections( 'causality_settings' ); ?>
<?php causality_settings_overlays_render(); ?>
<?php submit_button(); ?>
</form>
</div>
Expand Down Expand Up @@ -106,13 +127,27 @@ function causality_shortcode( $attributes ) {
* Render Causality
*/
function causality_render() {
$overlays = json_decode( get_option( 'causality_overlays' ), true );
if ( ! ( $overlays ) ) {
return '<p>ERROR: No overlays configured</p>';
}
$html = '';
$html .= '<script>var causality_overlay = "' . esc_url( get_option( 'causality_image_url' ) ) . '";</script>';
$html .= "<style>.jcrop-holder div div .jcrop-tracker{background: url('" . esc_url( get_option( 'causality_image_url' ) ) . "');</style>";
$html .= '<script>';
$html .= 'var causality_overlays = "' . esc_js( get_option( 'causality_overlays' ) ) . '";';
$html .= 'var causality_fb_app_id = "' . esc_attr( get_option( 'causality_fb_app_id' ) ) . '";';
$html .= '</script>';
$html .= '<h3>' . esc_attr( get_option( 'causality_title' ) ) . '</h3>';
$html .= '<input type="file" id="causality_upload" value="Upload your profile photo" accept="image/*" />';
$html .= '<div id="causality_jcrop"></div>';
$html .= '<button id="causality_crop_button">Crop</button>';
$html .= '<select name="causality_overlay" id="causality_overlay">';
$html .= '<option title="Choose your overlay" value="">Choose your overlay</option>';
foreach ( $overlays as $title => $url ) {
$html .= '<option title="' . esc_attr( $title ) . '" value="' . esc_url( $url ) . '">' . esc_attr( $title ) . '</option>';
}
$html .= '</select><br>';
$html .= '<input type="file" id="causality_upload" value="Upload your profile photo" accept="image/*"/>';
$html .= '<button id="causality_activate_upload" onclick="causalityActivateUpload()" class="causality-button">Upload a photo</button>';
$html .= '<button id="causality_facebook_login" onclick="causalityFacebookLogin()" class="causality-button">Use my Facebook photo</button>';
$html .= '<div id="causality_jcrop_container"><div id="causality_jcrop"></div></div>';
$html .= '<button id="causality_crop" class="causality-button">Crop</button>';
$html .= '<canvas id="causality_canvas" style="display: none;" width="960px" height="960px"></canvas>';
$html .= '<div id="causality_output"></div>';
return $html;
Expand Down

0 comments on commit 6755586

Please sign in to comment.