コード例 #1
0
ファイル: BatchUploader.php プロジェクト: noxian/WP-Filebase
    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 &amp; 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');
    }
コード例 #2
0
    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 &amp; 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);
    }