mirror of
https://github.com/10h30/ultimatemember.git
synced 2026-07-19 14:43:49 +09:00
Image upload modal, crop feature development
This commit is contained in:
ultimatemember
@@ -961,6 +961,20 @@ class UM_Admin_Metabox {
|
||||
|
||||
break;
|
||||
|
||||
case '_crop':
|
||||
?>
|
||||
|
||||
<p><label for="_crop">Crop Feature <?php $this->tooltip('Enable/disable crop feature for this image upload and define ratio'); ?></label>
|
||||
<select name="_crop" id="_crop" class="umaf-selectjs" style="width: 100%">
|
||||
<option value="0" <?php selected( '0', $this->edit_mode_value ); ?>>Turn Off (Default)</option>
|
||||
<option value="1" <?php selected( '1', $this->edit_mode_value ); ?>>Crop and force 1:1 ratio</option>
|
||||
<option value="2" <?php selected( '2', $this->edit_mode_value ); ?>>Crop and force user-defined ratio</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<?php
|
||||
break;
|
||||
|
||||
case '_allowed_types':
|
||||
|
||||
if ( $this->set_field_type == 'image' ) {
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
* imgAreaSelect default style
|
||||
*/
|
||||
|
||||
.imgareaselect-border1 {
|
||||
background: url(../img/border-v.gif) repeat-y left top;
|
||||
}
|
||||
|
||||
.imgareaselect-border2 {
|
||||
background: url(../img/border-h.gif) repeat-x left top;
|
||||
}
|
||||
|
||||
.imgareaselect-border3 {
|
||||
background: url(../img/border-v.gif) repeat-y right top;
|
||||
}
|
||||
|
||||
.imgareaselect-border4 {
|
||||
background: url(../img/border-h.gif) repeat-x left bottom;
|
||||
}
|
||||
|
||||
.imgareaselect-border1, .imgareaselect-border2,
|
||||
.imgareaselect-border3, .imgareaselect-border4 {
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.imgareaselect-handle {
|
||||
background-color: #fff;
|
||||
border: solid 1px #000;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.imgareaselect-outer {
|
||||
background-color: #000;
|
||||
filter: alpha(opacity=50);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.imgareaselect-selection {
|
||||
}
|
||||
@@ -2,48 +2,46 @@
|
||||
- image preview
|
||||
*/
|
||||
|
||||
.um .um-single-image-preview,
|
||||
.um .um-single-file-preview {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.um-single-image-preview,
|
||||
.um-single-file-preview {
|
||||
display: none;
|
||||
width: 100%;
|
||||
background: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
border: 2px dashed #ddd;
|
||||
text-align: center;
|
||||
margin: 15px 0 0 0;
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.um-single-image-preview a.cancel,
|
||||
.um-single-file-preview a.cancel {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 999px;
|
||||
background: #f5f5f5;
|
||||
background: #ddd;
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: 0.2s;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.um-single-image-preview a.cancel:hover,
|
||||
.um-single-file-preview a.cancel:hover
|
||||
{opacity: 1}
|
||||
|
||||
.um-single-image-preview a.cancel i,
|
||||
.um-single-file-preview a.cancel i {
|
||||
font-size: 22px;
|
||||
color: #424242;
|
||||
vertical-align: middle;
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.um-single-image-preview img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto !important;
|
||||
max-height: 250px;
|
||||
padding: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
@@ -85,7 +83,6 @@
|
||||
*/
|
||||
|
||||
.upload-statusbar {
|
||||
background: #fff;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
@@ -96,15 +93,15 @@
|
||||
.upload-progress {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.upload-bar {
|
||||
width: 0;
|
||||
height: 12px;
|
||||
height: 10px;
|
||||
color: #666;
|
||||
background: #3ba1da;
|
||||
background: #7ACF58;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -116,11 +113,10 @@
|
||||
text-align: center;
|
||||
vertical-align:middle;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 3px;
|
||||
font-size: 18px;
|
||||
margin: 15px 0 0 0;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
@@ -167,4 +163,4 @@
|
||||
background: #44b0ec;
|
||||
}
|
||||
|
||||
.um-form input[type="file"]::-webkit-file-upload-button { cursor: pointer }
|
||||
.um-modal input[type="file"]::-webkit-file-upload-button { cursor: pointer }
|
||||
+69
-8
@@ -16,27 +16,40 @@
|
||||
- modal
|
||||
*/
|
||||
|
||||
.um-modal * {-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale;}
|
||||
.um-modal * {
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
}
|
||||
|
||||
.um-modal-hidden-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.um-modal {
|
||||
border-radius: 3px;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
left: 50%;
|
||||
display: none;
|
||||
z-index: 100010;
|
||||
box-sizing: border-box;
|
||||
bottom: -50px;
|
||||
}
|
||||
.um-modal.normal {width: 500px;margin-left: -250px;}
|
||||
.um-modal.large {width: 730px;margin-left: -365px;}
|
||||
.um-modal.small {width: 400px;margin-left: -200px;}
|
||||
|
||||
.um-modal-body {
|
||||
min-height: 100px;
|
||||
padding: 0 20px;
|
||||
min-height: 3px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
.um-modal.loading .um-modal-body {
|
||||
background: #fff url(../img/loading.gif) no-repeat center;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.um-modal div.um {
|
||||
@@ -48,8 +61,56 @@
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
color: #fff;
|
||||
background: #aaa;
|
||||
background: #3ba1da;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.um-modal-footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.um-modal-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.um-modal-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.um-modal-btn.disabled,
|
||||
.um-modal-btn.disabled:hover {
|
||||
opacity: 0.5;
|
||||
cursor: default !important;
|
||||
background: #3ba1da;
|
||||
}
|
||||
|
||||
.um-modal-btn {
|
||||
cursor: pointer !important;
|
||||
line-height: 34px !important;
|
||||
height: 34px;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
padding: 0 20px;
|
||||
color: #fff;
|
||||
background: #3ba1da;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
transition: 0.2s;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.um-modal-btn:hover {
|
||||
background: #44b0ec;
|
||||
}
|
||||
|
||||
.um-modal-btn.alt {
|
||||
color: #666;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.um-modal-btn.alt:hover {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
.uimob340-show,
|
||||
.uimob500-show,
|
||||
.uimob800-show,
|
||||
.uimob960-show
|
||||
@@ -5,6 +6,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.uimob340 .uimob340-show,
|
||||
div.uimob500 .uimob500-show,
|
||||
div.uimob800 .uimob800-show,
|
||||
div.uimob960 .uimob960-show
|
||||
@@ -12,6 +14,7 @@ div.uimob960 .uimob960-show
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.uimob340 .uimob340-hide,
|
||||
div.uimob500 .uimob500-hide,
|
||||
div.uimob800 .uimob800-hide,
|
||||
div.uimob960 .uimob960-hide
|
||||
@@ -19,12 +22,54 @@ div.uimob960 .uimob960-hide
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
for 340px and below
|
||||
**/
|
||||
|
||||
/********************************************/
|
||||
|
||||
.uimob340 .um-half {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.uimob340 .um-button.um-btn-auto-width {
|
||||
min-width: auto;
|
||||
max-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.um-modal.uimob340 {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.um-modal.uimob340,
|
||||
.um-modal.uimob340 .um-modal-body,
|
||||
.um-modal.uimob340 .um-modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
for 500px and below
|
||||
**/
|
||||
|
||||
/********************************************/
|
||||
|
||||
.um-modal.uimob500 {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.um-modal.uimob500,
|
||||
.um-modal.uimob500 .um-modal-body,
|
||||
.um-modal.uimob500 .um-modal-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
div.uimob500 .um-profile-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
@@ -247,4 +292,34 @@ div.uimob960 .um-member {
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
div.uimob960 .um-gutter-sizer { width: 4% }
|
||||
div.uimob960 .um-gutter-sizer { width: 4% }
|
||||
|
||||
/************************************************/
|
||||
|
||||
@media screen and ( max-height: 900px ){
|
||||
.um-single-image-preview img {max-height: 500px}
|
||||
}
|
||||
|
||||
@media screen and ( max-height: 800px ){
|
||||
.um-single-image-preview img {max-height: 500px}
|
||||
}
|
||||
|
||||
@media screen and ( max-height: 700px ){
|
||||
.um-single-image-preview img {max-height: 350px}
|
||||
}
|
||||
|
||||
@media screen and ( max-height: 600px ){
|
||||
.um-single-image-preview img {max-height: 300px}
|
||||
}
|
||||
|
||||
@media screen and ( max-height: 500px ){
|
||||
.um-single-image-preview img {max-height: 250px}
|
||||
}
|
||||
|
||||
@media screen and ( max-height: 400px ){
|
||||
.um-single-image-preview img {max-height: 200px}
|
||||
}
|
||||
|
||||
@media screen and ( max-height: 300px ){
|
||||
.um-single-image-preview img {max-height: 150px}
|
||||
}
|
||||
@@ -8,7 +8,6 @@
|
||||
box-sizing: border-box;
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
-moz-osx-font-smoothing: grayscale !important;
|
||||
@@ -448,6 +447,7 @@ input[type=submit].um-button:focus {
|
||||
}
|
||||
|
||||
.um-button {
|
||||
font-size: 15px;
|
||||
border: none !important;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -468,6 +468,15 @@ input[type=submit].um-button:focus {
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
|
||||
.um-button.um-btn-auto-width {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
padding: 14px 20px !important;
|
||||
min-width: 200px;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
a.um-link-alt {
|
||||
line-height: 22px;
|
||||
color: #888 !important;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 219 B |
Binary file not shown.
|
After Width: | Height: | Size: 72 B |
Binary file not shown.
|
After Width: | Height: | Size: 72 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,80 @@
|
||||
function initCrop_UM() {
|
||||
|
||||
jQuery('.um-single-image-preview.crop img').imgAreaSelect({
|
||||
handles: true,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function initImageUpload_UM( trigger ) {
|
||||
|
||||
if (trigger.data('upload_help_text')){
|
||||
upload_help_text = '<span class="help">' + trigger.data('upload_help_text') + '</span>';
|
||||
} else {
|
||||
upload_help_text = '';
|
||||
}
|
||||
|
||||
if ( trigger.data('icon') ) {
|
||||
icon = '<span class="icon"><i class="'+ trigger.data('icon') + '"></i></span>';
|
||||
} else {
|
||||
icon = '';
|
||||
}
|
||||
|
||||
if ( trigger.data('upload_text') ) {
|
||||
upload_text = '<span class="str">' + trigger.data('upload_text') + '</span>';
|
||||
} else {
|
||||
upload_text = '';
|
||||
}
|
||||
|
||||
trigger.uploadFile({
|
||||
url: ultimatemember_image_upload_url,
|
||||
method: "POST",
|
||||
multiple: false,
|
||||
formData: {key: trigger.data('key'), set_id: trigger.data('set_id'), set_mode: trigger.data('set_mode') },
|
||||
fileName: trigger.data('key'),
|
||||
allowedTypes: trigger.data('allowed_types'),
|
||||
maxFileSize: trigger.data('max_size'),
|
||||
dragDropStr: icon + upload_text + upload_help_text,
|
||||
sizeErrorStr: trigger.data('max_size_error'),
|
||||
extErrorStr: trigger.data('extension_error'),
|
||||
maxFileCountErrorStr: trigger.data('max_files_error'),
|
||||
maxFileCount: 1,
|
||||
showDelete: false,
|
||||
showAbort: false,
|
||||
showDone: false,
|
||||
showFileCounter: false,
|
||||
showStatusAfterSuccess: false,
|
||||
onSubmit:function(files){
|
||||
|
||||
trigger.parents('.um-modal-body').find('.um-error-block').remove();
|
||||
|
||||
},
|
||||
onSuccess:function(files,data,xhr){
|
||||
|
||||
trigger.selectedFiles = 0;
|
||||
|
||||
data = jQuery.parseJSON(data);
|
||||
if (data.error && data.error != '') {
|
||||
|
||||
trigger.parents('.um-modal-body').append('<div class="um-error-block">'+data.error+'</div>');
|
||||
|
||||
} else {
|
||||
|
||||
jQuery.each( data, function(key, value) {
|
||||
trigger.parents('.um-modal-body').find('.um-single-image-preview img').attr('src', value);
|
||||
});
|
||||
|
||||
trigger.parents('.um-modal-body').find('.ajax-upload-dragdrop').fadeOut( function () {
|
||||
trigger.parents('.um-modal-body').find('.um-single-image-preview').show();
|
||||
trigger.parents('.um-modal-body').find('.um-modal-btn.um-finish-upload.disabled').removeClass('disabled');
|
||||
um_modal_responsive();
|
||||
} );
|
||||
|
||||
initCrop_UM();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
+99
-48
@@ -1,66 +1,73 @@
|
||||
function um_new_modal( id, ajax, size ){
|
||||
function um_new_modal( id, size ){
|
||||
|
||||
var modal = jQuery('body').find('.um-modal-overlay');
|
||||
|
||||
jQuery('.tipsy').hide();
|
||||
|
||||
um_remove_modal();
|
||||
|
||||
|
||||
jQuery('body,html').css("overflow", "hidden");
|
||||
jQuery('body').append('<div class="um-modal-overlay" /><div class="um-modal" />');
|
||||
|
||||
jQuery('#' + id).prependTo('.um-modal');
|
||||
jQuery('#' + id).show();
|
||||
jQuery('.um-modal').show();
|
||||
|
||||
|
||||
um_modal_size( size );
|
||||
if ( ajax == true ) { um_modal_preload(); }
|
||||
|
||||
initImageUpload_UM( jQuery('.um-modal:visible').find('.um-single-image-upload') );
|
||||
|
||||
um_modal_responsive();
|
||||
|
||||
}
|
||||
|
||||
function um_modal_ajaxcall( act_id, arg1, arg2, arg3 ) {
|
||||
|
||||
if ( arg2 ) {
|
||||
jQuery('.um-modal-header:visible').html( arg2 );
|
||||
}
|
||||
|
||||
jQuery.ajax({
|
||||
url: ultimatemember_ajax_url,
|
||||
type: 'POST',
|
||||
data: {action: 'ultimatemember_frontend_modal', act_id: act_id, arg1 : arg1, arg2 : arg2, arg3: arg3 },
|
||||
complete: function(){
|
||||
um_modal_loaded();
|
||||
um_modal_responsive();
|
||||
},
|
||||
success: function(data){
|
||||
|
||||
jQuery('.um-modal').find('.um-modal-body').html( data );
|
||||
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function um_modal_responsive() {
|
||||
var required_margin = jQuery('.um-modal:visible').innerHeight() / 2 + 'px';
|
||||
jQuery('.um-modal:visible').css({'margin-top': '-' + required_margin });
|
||||
|
||||
var modal = jQuery('.um-modal:visible');
|
||||
|
||||
if ( modal.length ) {
|
||||
|
||||
var window_height_diff = jQuery(window).height() - modal.innerHeight();
|
||||
|
||||
var half_gap = window_height_diff / 2 + 'px';
|
||||
|
||||
var element_width = jQuery(window).width();
|
||||
|
||||
modal.removeClass('uimob340');
|
||||
modal.removeClass('uimob500');
|
||||
|
||||
if ( element_width <= 340 ) {
|
||||
|
||||
modal.addClass('uimob340');
|
||||
modal.animate({ 'bottom' : 0 }, 300);
|
||||
|
||||
} else if ( element_width <= 500 ) {
|
||||
|
||||
modal.addClass('uimob500');
|
||||
modal.animate({ 'bottom' : 0 }, 300);
|
||||
|
||||
} else if ( element_width <= 800 ) {
|
||||
|
||||
modal.animate({ 'bottom' : half_gap }, 300);
|
||||
|
||||
} else if ( element_width <= 960 ) {
|
||||
|
||||
modal.animate({ 'bottom' : half_gap }, 300);
|
||||
|
||||
} else if ( element_width > 960 ) {
|
||||
|
||||
modal.animate({ 'bottom' : half_gap }, 300);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function um_remove_modal(){
|
||||
jQuery('body,html').css("overflow", "inherit");
|
||||
jQuery('.um-single-image-preview.crop img').imgAreaSelect({ hide: true });
|
||||
jQuery('body,html').css("overflow", "auto");
|
||||
jQuery('.um-modal div[id^="um_"]').hide().appendTo('body');
|
||||
jQuery('.um-modal,.um-modal-overlay').remove();
|
||||
}
|
||||
|
||||
function um_modal_preload() {
|
||||
jQuery('.um-modal:visible').addClass('loading');
|
||||
jQuery('.um-modal-body:visible').empty();
|
||||
}
|
||||
|
||||
function um_modal_loaded() {
|
||||
jQuery('.um-modal:visible').removeClass('loading');
|
||||
}
|
||||
|
||||
function um_modal_size( aclass ) {
|
||||
jQuery('.um-modal:visible').addClass(aclass);
|
||||
}
|
||||
@@ -82,11 +89,55 @@ jQuery(document).ready(function() {
|
||||
um_remove_modal();
|
||||
});
|
||||
|
||||
/**
|
||||
disable link event
|
||||
**/
|
||||
jQuery(document).on('click', 'a[data-modal^="um_"], span[data-modal^="um_"], .um-modal a', function(e){
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
remove uploaded image
|
||||
**/
|
||||
jQuery(document).on('click', '.um-modal .um-single-image-preview a.cancel', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var parent = jQuery(this).parents('.um-modal-body');
|
||||
|
||||
parent.find('.um-single-image-preview').hide();
|
||||
|
||||
parent.find('.ajax-upload-dragdrop').show();
|
||||
|
||||
parent.find('.um-modal-btn.um-finish-upload').addClass('disabled');
|
||||
|
||||
um_modal_responsive();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
finish upload
|
||||
**/
|
||||
jQuery(document).on('click', '.um-finish-upload', function(){
|
||||
|
||||
var key = jQuery(this).attr('data-key');
|
||||
|
||||
var src = jQuery(this).parents('.um-modal-body').find('.um-single-image-preview img').attr('src');
|
||||
|
||||
jQuery('.um-single-image-preview[data-key='+key+']').fadeIn().find('img').attr('src', src);
|
||||
|
||||
um_remove_modal();
|
||||
|
||||
jQuery('.um-single-image-preview[data-key='+key+']').parents('.um-field').find('.um-btn-auto-width').html('Change/Modify Photo');
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
fire new modal
|
||||
**/
|
||||
jQuery(document).on('click', 'a[data-modal^="um_"], span[data-modal^="um_"]', function(){
|
||||
|
||||
jQuery(document).on('click', 'a[data-modal^="um_"], span[data-modal^="um_"]', function(e){
|
||||
|
||||
var modal_id = jQuery(this).attr('data-modal');
|
||||
|
||||
if ( jQuery(this).data('modal-size') ) {
|
||||
@@ -95,13 +146,13 @@ jQuery(document).ready(function() {
|
||||
var size = 'normal';
|
||||
}
|
||||
|
||||
if ( jQuery(this).data('dynamic-content') ) {
|
||||
um_new_modal( modal_id, true, size );
|
||||
um_modal_ajaxcall( jQuery(this).data('dynamic-content'), jQuery(this).data('arg1'), jQuery(this).data('arg2'), jQuery(this).data('arg3') );
|
||||
if ( jQuery(this).data('modal-copy') ) {
|
||||
jQuery('#' + modal_id).html( jQuery(this).parents('.um-field').find('.um-modal-hidden-content').html() );
|
||||
um_new_modal( modal_id, size );
|
||||
} else {
|
||||
um_new_modal( modal_id, false, size );
|
||||
um_new_modal( modal_id, size );
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,12 +1,21 @@
|
||||
function um_responsive(){
|
||||
|
||||
/* responsive layout */
|
||||
|
||||
jQuery('.um').each(function(){
|
||||
|
||||
element_width = jQuery(this).width();
|
||||
|
||||
if ( element_width <= 340 ) {
|
||||
|
||||
if ( element_width <= 500 ) {
|
||||
|
||||
jQuery(this).removeClass('uimob340');
|
||||
jQuery(this).removeClass('uimob500');
|
||||
jQuery(this).removeClass('uimob800');
|
||||
jQuery(this).removeClass('uimob960');
|
||||
|
||||
jQuery(this).addClass('uimob340');
|
||||
|
||||
} else if ( element_width <= 500 ) {
|
||||
|
||||
jQuery(this).removeClass('uimob340');
|
||||
jQuery(this).removeClass('uimob500');
|
||||
jQuery(this).removeClass('uimob800');
|
||||
jQuery(this).removeClass('uimob960');
|
||||
@@ -15,6 +24,7 @@ function um_responsive(){
|
||||
|
||||
} else if ( element_width <= 800 ) {
|
||||
|
||||
jQuery(this).removeClass('uimob340');
|
||||
jQuery(this).removeClass('uimob500');
|
||||
jQuery(this).removeClass('uimob800');
|
||||
jQuery(this).removeClass('uimob960');
|
||||
@@ -23,6 +33,7 @@ function um_responsive(){
|
||||
|
||||
} else if ( element_width <= 960 ) {
|
||||
|
||||
jQuery(this).removeClass('uimob340');
|
||||
jQuery(this).removeClass('uimob500');
|
||||
jQuery(this).removeClass('uimob800');
|
||||
jQuery(this).removeClass('uimob960');
|
||||
@@ -31,6 +42,7 @@ function um_responsive(){
|
||||
|
||||
} else if ( element_width > 960 ) {
|
||||
|
||||
jQuery(this).removeClass('uimob340');
|
||||
jQuery(this).removeClass('uimob500');
|
||||
jQuery(this).removeClass('uimob800');
|
||||
jQuery(this).removeClass('uimob960');
|
||||
@@ -55,6 +67,7 @@ function um_responsive(){
|
||||
jQuery(window).load(function() {
|
||||
|
||||
um_responsive();
|
||||
um_modal_responsive();
|
||||
|
||||
});
|
||||
|
||||
@@ -62,5 +75,6 @@ jQuery(window).load(function() {
|
||||
jQuery(window).resize(function() {
|
||||
|
||||
um_responsive();
|
||||
um_modal_responsive();
|
||||
|
||||
});
|
||||
+8
-79
@@ -66,7 +66,7 @@ jQuery(document).ready(function() {
|
||||
hiddenSuffix: '__true'
|
||||
});
|
||||
|
||||
/* Rating field */
|
||||
/* rating field */
|
||||
jQuery('.um-rating').raty({
|
||||
half: false,
|
||||
starType: 'i',
|
||||
@@ -81,6 +81,7 @@ jQuery(document).ready(function() {
|
||||
}
|
||||
});
|
||||
|
||||
/* rating read-only field */
|
||||
jQuery('.um-rating-readonly').raty({
|
||||
half: false,
|
||||
starType: 'i',
|
||||
@@ -91,87 +92,15 @@ jQuery(document).ready(function() {
|
||||
readOnly: true
|
||||
});
|
||||
|
||||
/* Image Upload */
|
||||
jQuery(".um-single-image-upload").each(function(){
|
||||
|
||||
var trigger = jQuery(this);
|
||||
|
||||
if (trigger.data('upload_help_text')){
|
||||
upload_help_text = '<span class="help">' + trigger.data('upload_help_text') + '</span>';
|
||||
} else {
|
||||
upload_help_text = '';
|
||||
}
|
||||
|
||||
if ( trigger.data('icon') ) {
|
||||
icon = '<span class="icon"><i class="'+ trigger.data('icon') + '"></i></span>';
|
||||
} else {
|
||||
icon = '';
|
||||
}
|
||||
|
||||
if ( trigger.data('upload_text') ) {
|
||||
upload_text = '<span class="str">' + trigger.data('upload_text') + '</span>';
|
||||
} else {
|
||||
upload_text = '';
|
||||
}
|
||||
|
||||
trigger.uploadFile({
|
||||
url: ultimatemember_image_upload_url,
|
||||
method: "POST",
|
||||
multiple: false,
|
||||
formData: {key: trigger.data('key'), set_id: trigger.data('set_id'), set_mode: trigger.data('set_mode') },
|
||||
fileName: trigger.data('key'),
|
||||
allowedTypes: trigger.data('allowed_types'),
|
||||
maxFileSize: trigger.data('max_size'),
|
||||
dragDropStr: icon + upload_text + upload_help_text,
|
||||
sizeErrorStr: trigger.data('max_size_error'),
|
||||
extErrorStr: trigger.data('extension_error'),
|
||||
maxFileCountErrorStr: trigger.data('max_files_error'),
|
||||
maxFileCount: 1,
|
||||
showDelete: false,
|
||||
showAbort: false,
|
||||
showDone: false,
|
||||
showFileCounter: false,
|
||||
showStatusAfterSuccess: false,
|
||||
onSubmit:function(files){
|
||||
|
||||
trigger.parents('.um-field').find('.um-error-block').remove();
|
||||
|
||||
},
|
||||
onSuccess:function(files,data,xhr){
|
||||
|
||||
trigger.selectedFiles = 0;
|
||||
|
||||
data = jQuery.parseJSON(data);
|
||||
if (data.error && data.error != '') {
|
||||
|
||||
trigger.parents('.um-field').append('<div class="um-error-block">'+data.error+'</div>');
|
||||
|
||||
} else {
|
||||
|
||||
trigger.parents('.um-field').find('.ajax-upload-dragdrop').fadeOut( function() {
|
||||
trigger.parents('.um-field').find('.um-single-image-preview').fadeIn();
|
||||
});
|
||||
|
||||
jQuery.each( data, function(key, value) {
|
||||
trigger.parents('.um-field').find('.um-single-image-preview img').attr('src', value);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* Remove a single image upload */
|
||||
jQuery(document).on('click', '.um-single-image-preview a.cancel', function(e){
|
||||
/* remove uploaded image */
|
||||
jQuery(document).on('click', '.um .um-single-image-preview a.cancel', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var trigger = jQuery(this).parents('.um-field').find('.um-single-image-upload');
|
||||
var parent = jQuery(this).parents('.um-field');
|
||||
|
||||
trigger.parents('.um-field').find('.um-single-image-preview').fadeOut(function(){
|
||||
trigger.parents('.um-field').find('.ajax-upload-dragdrop').fadeIn();
|
||||
});
|
||||
parent.find('.um-single-image-preview').hide();
|
||||
|
||||
parent.find('.um-btn-auto-width').html('Upload');
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
@@ -20,11 +20,12 @@ if(isset($_FILES[$id]['name'])) {
|
||||
|
||||
$error = $ultimatemember->files->check_image_upload( $temp, $id );
|
||||
if ( $error ){
|
||||
|
||||
$ret['error'] = $error;
|
||||
|
||||
} else {
|
||||
$ret[] = $ultimatemember->files->new_image_upload_temp( $temp, $file, 35 );
|
||||
|
||||
|
||||
$ret[] = $ultimatemember->files->new_image_upload_temp( $temp, $file, um_get_option('image_compression') );
|
||||
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -239,7 +239,7 @@ class UM_Builtin {
|
||||
|
||||
'image' => array(
|
||||
'name' => 'Image Upload',
|
||||
'col1' => array('_title','_metakey','_help','_allowed_types','_max_size'),
|
||||
'col1' => array('_title','_metakey','_help','_allowed_types','_max_size','_crop'),
|
||||
'col2' => array('_label','_public','_roles','_upload_text','_upload_help_text','_button_text'),
|
||||
'col3' => array('_required','_editable','_icon'),
|
||||
'validate' => array(
|
||||
|
||||
@@ -149,6 +149,19 @@ class UM_Enqueue {
|
||||
|
||||
}
|
||||
|
||||
/***
|
||||
*** @Load crop script
|
||||
***/
|
||||
function load_imagecrop(){
|
||||
|
||||
wp_register_script('um_crop', um_url . 'assets/js/um-crop.js' );
|
||||
wp_enqueue_script('um_crop');
|
||||
|
||||
wp_register_style('um_crop', um_url . 'assets/css/um-crop.css' );
|
||||
wp_enqueue_style('um_crop');
|
||||
|
||||
}
|
||||
|
||||
/***
|
||||
*** @Load masonry
|
||||
***/
|
||||
@@ -219,6 +232,8 @@ class UM_Enqueue {
|
||||
|
||||
$this->load_raty();
|
||||
|
||||
$this->load_imagecrop();
|
||||
|
||||
$this->load_masonry();
|
||||
|
||||
$this->load_tipsy();
|
||||
|
||||
+47
-12
@@ -593,6 +593,8 @@ class UM_Fields {
|
||||
|
||||
case 'image':
|
||||
|
||||
if ( !isset( $array['crop'] ) ) $array['crop'] = 0;
|
||||
|
||||
if (!isset($array['invalid_image'])) $array['invalid_image'] = "Please upload a valid image!";
|
||||
if (!isset($array['allowed_types'])) {
|
||||
$array['allowed_types'] = "gif,jpg,jpeg,png";
|
||||
@@ -975,19 +977,52 @@ class UM_Fields {
|
||||
$output .= $this->field_label($label, $key, $data);
|
||||
}
|
||||
|
||||
$output .= '<div class="um-field-area">';
|
||||
|
||||
$output .= '<div class="um-single-image-preview"><a href="#" class="cancel"><i class="um-icon-remove"></i></a><img src="" alt="" /></div>';
|
||||
|
||||
$output .= '<div class="um-single-image-upload" data-icon="'.$icon.'" data-set_id="'.$this->set_id.'" data-set_mode="'.$this->set_mode.'" data-type="'.$type.'" data-key="'.$key.'" data-max_size="'.$max_size.'" data-max_size_error="'.$max_size_error.'" data-min_size_error="'.$min_size_error.'" data-extension_error="'.$extension_error.'" data-allowed_types="'.$allowed_types.'" data-upload_text="'.$upload_text.'" data-max_files_error="'.$max_files_error.'" data-upload_help_text="'.$upload_help_text.'">'.$button_text.'</div>';
|
||||
|
||||
$output .= '</div>';
|
||||
|
||||
if ( $this->is_error($key) ) {
|
||||
$output .= $this->field_error( $this->show_error($key) );
|
||||
}
|
||||
if ( $crop ) {
|
||||
$crop_class = 'crop';
|
||||
} else {
|
||||
$crop_class = '';
|
||||
}
|
||||
|
||||
$output .= '</div>';
|
||||
$modal_label = ( isset( $data['label'] ) ) ? $data['label'] : __('Upload Photo','ultimatemember');
|
||||
|
||||
$output .= '<div class="um-field-area" style="text-align: center">
|
||||
|
||||
<div class="um-single-image-preview '. $crop_class .'" data-key="'.$key.'"><a href="#" class="cancel"><i class="um-icon-remove"></i></a><img src="" alt="" /></div>
|
||||
|
||||
<a href="#" data-modal="um_upload_image" data-modal-copy="1" class="um-button um-btn-auto-width">'. $button_text . '</a>
|
||||
|
||||
</div>';
|
||||
|
||||
/* modal hidden */
|
||||
$output .= '<div class="um-modal-hidden-content">';
|
||||
|
||||
$output .= '<div class="um-modal-header"> ' . $modal_label . '</div>';
|
||||
|
||||
$output .= '<div class="um-modal-body">';
|
||||
|
||||
$output .= '<div class="um-single-image-preview '. $crop_class .'"><a href="#" class="cancel"><i class="um-icon-remove"></i></a><img src="" alt="" /></div>';
|
||||
$output .= '<div class="um-single-image-upload" data-icon="'.$icon.'" data-set_id="'.$this->set_id.'" data-set_mode="'.$this->set_mode.'" data-type="'.$type.'" data-key="'.$key.'" data-max_size="'.$max_size.'" data-max_size_error="'.$max_size_error.'" data-min_size_error="'.$min_size_error.'" data-extension_error="'.$extension_error.'" data-allowed_types="'.$allowed_types.'" data-upload_text="'.$upload_text.'" data-max_files_error="'.$max_files_error.'" data-upload_help_text="'.$upload_help_text.'">'.$button_text.'</div>';
|
||||
|
||||
$output .= '<div class="um-modal-footer">
|
||||
<div class="um-modal-right">
|
||||
<a href="#" class="um-modal-btn um-finish-upload disabled" data-key="'.$key.'"> ' . __('Apply','ultimatemember') . '</a>
|
||||
<a href="#" class="um-modal-btn alt" data-action="um_remove_modal"> ' . __('Cancel','ultimatemember') . '</a>
|
||||
</div>
|
||||
<div class="um-clear"></div>
|
||||
</div>';
|
||||
|
||||
$output .= '</div>';
|
||||
|
||||
$output .= '</div>';
|
||||
|
||||
/* end */
|
||||
|
||||
if ( $this->is_error($key) ) {
|
||||
$output .= $this->field_error( $this->show_error($key) );
|
||||
}
|
||||
|
||||
$output .= '</div>';
|
||||
|
||||
break;
|
||||
|
||||
/* Single File Upload */
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
<div id="um_dynamic_content" style="display:none">
|
||||
|
||||
<div class="um-modal-header">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="um-modal-body">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div id="um_upload_image" style="display:none">
|
||||
|
||||
</div>
|
||||
@@ -736,6 +736,29 @@ $this->sections[] = array(
|
||||
*** @
|
||||
***/
|
||||
|
||||
$this->sections[] = array(
|
||||
|
||||
'icon' => 'um-icon-files',
|
||||
'title' => __( 'Image & File Uploads'),
|
||||
'fields' => array(
|
||||
|
||||
array(
|
||||
'id' => 'image_compression',
|
||||
'type' => 'text',
|
||||
'title' => __( 'Image Quality' ),
|
||||
'desc' => __( 'Quality is used to determine quality of image uploads, and ranges from 0 (worst quality, smaller file) to 100 (best quality, biggest file). The default range is 75.' ),
|
||||
'default' => 60,
|
||||
'validate' => 'numeric',
|
||||
),
|
||||
|
||||
)
|
||||
|
||||
);
|
||||
|
||||
/***
|
||||
*** @
|
||||
***/
|
||||
|
||||
$this->sections[] = array(
|
||||
|
||||
'icon' => 'um-icon-search',
|
||||
|
||||
Reference in New Issue
Block a user