public function Display()
{
wpfb_call('Output', 'PrintJS');
wp_print_scripts('utils');
// setUserSetting
?>
<style type="text/css" media="screen">@import url(<?php
echo WPFB_PLUGIN_URI . 'css/batch-uploader.css';
?>
);</style>
<div id="<?php
echo $this->prefix;
?>
-uploader-wrap">
<div id="<?php
echo $this->prefix;
?>
-uploader-interface" class="wpfb-batch-uploader-interface">
<div class="form-wrap uploader-presets" id="<?php
echo $this->prefix;
?>
-uploader-presets">
<form method="POST" action="" class="validate" name="batch_presets">
<h2><?php
_e('Upload Presets', 'wp-filebase');
?>
</h2>
<?php
self::DisplayUploadPresets($this->prefix);
//wp_nonce_field('batch-presets'); // TODO validate this!
?>
</form>
</div>
<div id="<?php
echo $this->prefix;
?>
-drag-drop-uploader" class="drag-drop-uploader">
<h2>Drag & Drop</h2>
<div id="<?php
echo $this->prefix;
?>
-drag-drop-area" class="drag-drop-area">
<div style="margin: 70px auto 0;">
<p class="drag-drop-info"><?php
_e('Drop files here');
?>
</p>
<p><?php
_ex('or', 'Uploader: Drop files here - or - Select Files');
?>
</p>
<p class="drag-drop-buttons"><input id="<?php
echo $this->prefix;
?>
-browse-button" type="button" value="<?php
esc_attr_e('Select Files');
?>
" class="button" /></p>
</div>
</div>
<div id="<?php
echo $this->prefix;
?>
-uploader-errors"></div>
</div>
<div style="clear: both;"></div>
</div>
<div id="<?php
echo $this->prefix;
?>
-uploader-files" style="position:relative;"></div>
</div>
<?php
wp_print_scripts('jquery-color');
wp_print_scripts('jquery-deserialize');
?>
<script type="text/javascript">
var mouseDragPos = [];
var presetData = '';
var morePresets = 0;
jQuery(document).ready( function() {
var form = jQuery('#<?php
echo $this->prefix;
?>
-uploader-presets').find('form');
jQuery('#<?php
echo $this->prefix;
?>
-drag-drop-area').bind('dragover', function(e){
mouseDragPos = [e.originalEvent.pageX, e.originalEvent.pageY];
});
<?php
?>
wpfb_setupFormAutoSave(form,'batch_presets');
<?php
?>
// "more" toggle init
form.find('tr.more').hide();
form.find('tr.more-more').hide();
morePresets = 0;
jQuery('#<?php
echo $this->prefix;
?>
-uploader-presets-more-toggle').click(function() {
batchUploaderSetPresetsMore(morePresets = ((morePresets+1)%3));
});
batchUploaderSetPresetsMore(typeof(getUserSetting) !== 'function' || getUserSetting('wpfb_batch_presets_more') || 0);
});
function batchUploaderSetPresetsMore(m)
{
if(isNaN(m)) m = 0;
var form = jQuery('#<?php
echo $this->prefix;
?>
-uploader-presets').find('form');
form.find('tr.more')[m == 0 ? 'hide' : 'show'](400);
form.find('tr.more-more')[m != 2 ? 'hide' : 'show'](400);
// TODO show any field with non-default value!!
//form.find('tr.more').toggle(morePresets > 0);
//form.find('tr.more-more').toggle(morePresets > 1);
if(typeof(setUserSetting) !== 'undefined') setUserSetting('wpfb_batch_presets_more',''+morePresets);
jQuery('#<?php
echo $this->prefix;
?>
-uploader-presets-more-toggle td span').html(m==2?'<?php
_e('less');
?>
':'<?php
_e('more');
?>
');
}
function batchUploaderFilesQueued(up, files)
{
var form = jQuery('#<?php
echo $this->prefix;
?>
-uploader-presets').find('form');
up.settings.multipart_params["presets"] = form.serialize();
var hidden_params = form.find('input[type=hidden]').serializeArray();
for (var i = 0; i < hidden_params.length; ++i) {
up.settings.multipart_params[hidden_params[i].name] = hidden_params[i].value;
}
form
.css({ background: "rgba(255,255,0,0.0)" })
.animate({ backgroundColor: "rgba(255,255,0,0.5)"}, 100)
.animate({ backgroundColor: "rgba(255,255,0,0.0)"}, 400);
form.find('input,textarea,select')
.animate({ opacity: 0.2}, 100)
.animate({ opacity: 1.0}, 400);
form.find("input[name='file_display_name']").val('');
}
function batchUploaderFileQueued(up, file)
{
//file.name, file.size
jQuery('#<?php
echo $this->prefix;
?>
-uploader-files').prepend('<div id="<?php
echo $this->prefix;
?>
-uploader-file-'+file.id+'-spacer" class="batch-uploader-file-spacer"></div>');
jQuery('#<?php
echo $this->prefix;
?>
-uploader-files').prepend('<div id="'+file.dom_id+'" class="media-item batch-uploader-file">'+
'<div class="progress"><div class="percent">0%</div><div class="bar"></div></div>'+
'<img src="<?php
echo site_url(WPINC . '/images/crystal/default.png');
?>
" alt="Loading..." /><span class="filename">'+file.name+'</span><span class="error"></span></div>');
var fileEl = jQuery('#'+file.dom_id);
var spacerEl = jQuery('#<?php
echo $this->prefix;
?>
-uploader-file-'+file.id+'-spacer');
var dest = fileEl.offset();
var ppos = fileEl.parent().offset();
var destWidth = fileEl.width();
fileEl.css({position:'absolute', zIndex:100, top:mouseDragPos[1]-ppos.top, left:mouseDragPos[0]-ppos.left-15});
fileEl.animate({
//opacity: 0.25,
left: dest.left-ppos.left,
top: dest.top-ppos.top
}, 400, function() {
spacerEl.remove();
var startWidth = jQuery(this).width();
jQuery(this)
.css({position:'',top:0,left:0,width:startWidth})
.animate({width: destWidth}, 200);
});
spacerEl.animate({height: fileEl.outerHeight(true)}, 400);
jQuery('.error', fileEl).hide();
}
function batchUploaderSuccess(file, serverData)
{
var item = jQuery('#'+file.dom_id);
if(!serverData || serverData == -1 || 'object' != typeof(serverData)) {
jQuery('.error', item).show().html('Server response error! '+serverData);
console.log(serverData);
return;
}
var url = serverData.file_cur_user_can_edit ? serverData.file_edit_url : serverData.file_download_url;
jQuery('.filename', item).html('<a href="'+url+'" target="_blank">'+serverData.file_display_name+'</a> <span class="ok"><?php
_e('Upload OK!', 'wp-filebase');
?>
</span>');
jQuery('img', item).attr('src', serverData.file_thumbnail_url);
}
</script>
<?php
wpfb_loadclass('PLUploader');
$uploader = new WPFB_PLUploader();
$uploader->js_file_queued = 'batchUploaderFileQueued';
$uploader->js_files_queued = 'batchUploaderFilesQueued';
$uploader->js_upload_success = 'batchUploaderSuccess';
$uploader->post_params['file_add_now'] = true;
if (!empty($this->hidden_vars)) {
$uploader->post_params = array_merge($uploader->post_params, $this->hidden_vars);
}
$uploader->Init($this->prefix . '-drag-drop-area', $this->prefix . '-browse-button', $this->prefix . '-uploader-errors');
}
public static function RenderHTML($id, $drag_drop = false, $tpl_tag = null)
{
$jss = md5($id);
?>
<script type="text/javascript">
//<![CDATA[
var wpfb_fbDOMModTimeout<?php
echo $jss;
?>
= -1;
<?php
if ($drag_drop) {
?>
function wpfb_dtContains(dt,t) {
if('undefined' !== typeof dt.types.indexOf) return dt.types.indexOf(t) !== -1;
if('undefined' !== typeof dt.types.contains) return dt.types.contains(t);
for(var s in dt.types) {
if(s === t) return true;
}
return false;
}
<?php
}
?>
function wpfb_fbDOMModHandle<?php
echo $jss;
?>
() {
wpfb_fbDOMModTimeout<?php
echo $jss;
?>
= -1;
<?php
if ($drag_drop) {
?>
jQuery("#<?php
echo $id;
?>
li:not([draggable]):not([id$='-0'])")
.attr('draggable','true')
.bind('dragstart', function(e) {
var li = jQuery(e.currentTarget), t = 'file', id = wpfb_fileBrowserTargetId(e,t)||((t='cat')&&wpfb_fileBrowserTargetId(e,t));
if(id > 0) {
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = (t==='cat')?'move':'linkMove';
dt.clearData();
dt.setData("application/x-wpfilebase-item", t+"-"+id);
dt.setData("application/x-wpfilebase-"+t+"-"+id, ''+id);
try { dt.setDragImage(li.find('img')[0],10,10); }
catch(e) {}
}
}).bind('dragover', function(e){
var id = wpfb_fileBrowserTargetId(e,'cat'), dt = e.originalEvent.dataTransfer;
var hasFiles = wpfb_dtContains(dt,"Files");
var hasWpfbItem = wpfb_dtContains(dt,"application/x-wpfilebase-item");
if(!hasFiles && !hasWpfbItem)
return true;
var ok = hasFiles || (id > 0 && !wpfb_dtContains(dt,"application/x-wpfilebase-cat-"+id));
var idp = wpfb_getFileBrowserIDP('<?php
echo $id;
?>
');
var cat_id = wpfb_fileBrowserTargetId(e,'cat'), cur_id = wpfb_fbDragCat<?php
echo $jss;
?>
;
if(cur_id !== cat_id && cat_id > 0) {
jQuery('#'+idp+'cat-'+cur_id).css({backgroundColor: ''});
if(ok) jQuery('#'+idp+'cat-'+id).css({backgroundColor: 'yellow'});
wpfb_fbDragCat<?php
echo $jss;
?>
= ok?cat_id:0;
}
if(hasFiles)
return true;
if(hasWpfbItem)
e.stopPropagation();
if(hasWpfbItem && ok) { // make dropk OK effect
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move';
}
}).bind('dragleave', function(e){
jQuery(e.currentTarget).css({backgroundColor: ''});
wpfb_fbDragCat<?php
echo $jss;
?>
= 0;
}).bind('drop', function(e){
var li = jQuery(e.currentTarget), id = wpfb_fileBrowserTargetId(e,'cat'), dt = e.originalEvent.dataTransfer;
if(!wpfb_dtContains(dt,"application/x-wpfilebase-item"))
return true;
e.stopPropagation();
var idp = wpfb_getFileBrowserIDP('<?php
echo $id;
?>
');
var tid = dt.getData("application/x-wpfilebase-item").split('-');
if(!tid || tid.length !== 2)
return false;
jQuery('#'+idp+'cat-'+id).css({backgroundColor: '', cursor:'wait'});
wpfb_fbDragCat<?php
echo $jss;
?>
= 0;
jQuery.ajax({url: wpfbConf.ajurl, type: "POST", dataType: "json",
data: {action:"change-category",new_cat_id:id,id:tid[1],type:tid[0]},
success: (function(data){
if(data.error == false) {
var dLi = jQuery('#'+idp+tid.join('-')); // the dragged
if(li.hasClass('expandable')) {
dLi.remove();
jQuery('.hitarea',li).click();
} else {
dLi.appendTo(jQuery('#'+idp+'cat-'+id).children('ul').first());
}
} else {
alert(data.error);
}
}),
complete: (function() { jQuery('#'+idp+'cat-'+id).css({cursor:''}); })
});
});
<?php
}
/* drag_drop */
?>
jQuery("#<?php
echo $id;
?>
a.add-file:not(.file-input)").each(function(i,el) {
var fileInput = new moxie.file.FileInput({
multiple: true,
//container: '<?php
echo $id;
?>
',
browse_button: el
});
jQuery(el).addClass('file-input');
fileInput.onchange = function( event ) {
var up = jQuery("#<?php
echo $id;
?>
").data('uploader');
var cat_id = wpfb_fileBrowserTargetId(jQuery(el).parent(),'cat');
up.settings.multipart_params["btn_cat_id"] = cat_id;
up.addFile( fileInput.files );
};
fileInput.init();
});
}
jQuery(document).ready(function(){
wpfb_fbDragCat<?php
echo $jss;
?>
= 0;
jQuery("#<?php
echo $id;
?>
")
.bind("DOMSubtreeModified", function(e) {
if(wpfb_fbDOMModTimeout<?php
echo $jss;
?>
>= 0)
window.clearTimeout(wpfb_fbDOMModTimeout<?php
echo $jss;
?>
)
wpfb_fbDOMModTimeout<?php
echo $jss;
?>
= window.setTimeout(wpfb_fbDOMModHandle<?php
echo $jss;
?>
,100);
})
<?php
if ($drag_drop) {
?>
.bind('dragleave', function(e){
var idp = wpfb_getFileBrowserIDP('<?php
echo $id;
?>
');
jQuery('#'+idp+'cat-'+wpfb_fbDragCat<?php
echo $jss;
?>
).css({backgroundColor: ''});
wpfb_fbDragCat<?php
echo $jss;
?>
= 0;
})
.before('<div class="wpfb-drag-drop-hint">+ DRAG & DROP enabled</div>')
<?php
}
/* drag_drop */
?>
;
wpfb_fbDOMModHandle<?php
echo $jss;
?>
();
});
var callbacks<?php
echo $jss;
?>
= {
filesQueued: function(up, files) {
var cat_id = wpfb_fbDragCat<?php
echo $jss;
?>
;
if(up.settings.multipart_params["btn_cat_id"]) {
cat_id = up.settings.multipart_params["btn_cat_id"];
up.settings.multipart_params["btn_cat_id"] = null;
}
up.settings.multipart_params["presets"] = "file_category="+cat_id;
up.settings.multipart_params["cat_id"] = cat_id;
up.settings.multipart_params["tpl_tag"] = '<?php
echo $tpl_tag;
?>
';
var idp = wpfb_getFileBrowserIDP('<?php
echo $id;
?>
');
var li = jQuery('#'+idp+'cat-'+cat_id);
if(li.hasClass('expandable'))
jQuery('.hitarea',li).click();
jQuery('#'+idp+'cat-'+cat_id).css({backgroundColor: ''});
wpfb_fbDragCat<?php
echo $jss;
?>
= 0;
},
fileQueued: function(up, file) {
var idp = wpfb_getFileBrowserIDP('<?php
echo $id;
?>
');
var cat_id = up.settings.multipart_params["cat_id"];
var el = (cat_id===0) ? jQuery('#<?php
echo $id;
?>
') : jQuery('#'+idp+'cat-'+cat_id).children('ul').first();
el.after(
'<div id="'+file.dom_id+'" class="wpfb-treeview-upload">'+
'<img src="<?php
echo site_url(WPINC . '/images/crystal/default.png');
?>
" alt="Loading..." style="height:1.2em;margin-right:0.3em;"/>'+
'<span class="filename">'+file.name+'</span><span class="error"></span> '+
'<div class="loading" style="background-image:url(<?php
echo admin_url('images/loading.gif');
?>
);width:1.2em;height:1.2em;background-size:contain;display:inline-block;vertical-align:sub;"></div>'+
'<span class="percent">0%</span>'+
'</div>');
},
success: function(file, serverData) {
var item = jQuery('#'+file.dom_id);
if(serverData.tpl) {
item.html(serverData.tpl);
} else {
var url = serverData.file_cur_user_can_edit ? serverData.file_edit_url : serverData.file_download_url;
jQuery('.filename', item).html('<a href="'+url+'" target="_blank">'+serverData.file_display_name+'</a>');
jQuery('img', item).attr('src', serverData.file_thumbnail_url);
jQuery('.loading,.percent',item).hide();
}
}
};
//]]>
</script>
<?php
wpfb_loadclass('PLUploader');
$uploader = new WPFB_PLUploader();
$cb_prefix = 'callbacks' . $jss . '.';
$uploader->js_files_queued = $cb_prefix . 'filesQueued';
$uploader->js_file_queued = $cb_prefix . 'fileQueued';
$uploader->js_upload_success = $cb_prefix . 'success';
$uploader->post_params['file_add_now'] = true;
$uploader->Init($id);
}
