mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
MINOR Overloading 'create' button for AssetAdmin.js to perform action instead of opening a tab.
MINOR Moved drag/drop functionality into new AssetAdmin.DragDrop.js location (will most likely be temporary until we switch to jQuery drag/drop) git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@92787 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer
parent
8d0c82ba52
commit
a9adcbefaa
@ -81,6 +81,7 @@ class AssetAdmin extends LeftAndMain {
|
|||||||
// needed for MemberTableField (Requirements not determined before Ajax-Call)
|
// needed for MemberTableField (Requirements not determined before Ajax-Call)
|
||||||
Requirements::css(SAPPHIRE_DIR . "/css/ComplexTableField.css");
|
Requirements::css(SAPPHIRE_DIR . "/css/ComplexTableField.css");
|
||||||
|
|
||||||
|
Requirements::javascript(CMS_DIR . "/javascript/AssetAdmin.DragDrop.js");
|
||||||
Requirements::javascript(CMS_DIR . "/javascript/AssetAdmin.js");
|
Requirements::javascript(CMS_DIR . "/javascript/AssetAdmin.js");
|
||||||
|
|
||||||
Requirements::javascript(CMS_DIR . "/javascript/CMSMain_upload.js");
|
Requirements::javascript(CMS_DIR . "/javascript/CMSMain_upload.js");
|
||||||
|
|||||||
@ -15,223 +15,29 @@ var _HANDLER_FORMS = {
|
|||||||
sortitems : 'sortitems_options'
|
sortitems : 'sortitems_options'
|
||||||
};
|
};
|
||||||
|
|
||||||
MarkingPropertiesButton = Class.create();
|
(function($) {
|
||||||
MarkingPropertiesButton.applyTo('#Form_EditForm_deletemarked', "Please select some files to delete!", 'deletemarked', 'Do you really want to delete the marked files?');
|
/**
|
||||||
|
* Overload the "Create" tab to execute action instead of
|
||||||
|
* opening the tab content.
|
||||||
|
*/
|
||||||
|
$('#TreeActions-create-btn').concrete('ss', function($) {
|
||||||
|
return {
|
||||||
|
onmatch: function() {
|
||||||
|
this.bind('click', function(e) {
|
||||||
|
var form = $('form#addpage_options');
|
||||||
|
jQuery.post(
|
||||||
|
form.attr('action'),
|
||||||
|
form.serialize(),
|
||||||
|
function(data) {
|
||||||
|
|
||||||
MarkingPropertiesButton.prototype = {
|
}
|
||||||
initialize: function(noneCheckedError, action, confirmMessage) {
|
);
|
||||||
this.noneCheckedError = noneCheckedError;
|
return false;
|
||||||
this.action = action;
|
})
|
||||||
this.confirmMessage = confirmMessage;
|
|
||||||
},
|
|
||||||
|
|
||||||
onclick: function() {
|
|
||||||
var i, list = "", checkboxes = $('Form_EditForm').elements['Files[]'];
|
|
||||||
if(!checkboxes) checkboxes = [];
|
|
||||||
if(!checkboxes.length) checkboxes = [ checkboxes ];
|
|
||||||
for(i=0;i<checkboxes.length;i++) {
|
|
||||||
if(checkboxes[i].checked) list += (list?',':'') + checkboxes[i].value;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(list == "") {
|
|
||||||
alert(this.noneCheckedError);
|
|
||||||
return false;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$('Form_EditForm_FileIDs').value = list;
|
|
||||||
}
|
|
||||||
// If there is a confirmation message, show it before submitting
|
|
||||||
if('' != this.confirmMessage) {
|
|
||||||
// Only submit if OK button is clicked
|
|
||||||
if (confirm(this.confirmMessage)) {
|
|
||||||
$('Form_EditForm').save(false, null, this.action);
|
|
||||||
}
|
}
|
||||||
} else {
|
};
|
||||||
$('Form_EditForm').save(false, null, this.action);
|
});
|
||||||
}
|
}(jQuery));
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// CheckBoxRange adapted from: http://jroller.com/page/rmcmahon?entry=checkboxrange_with_prototype
|
|
||||||
var CheckBoxRange = Class.create();
|
|
||||||
|
|
||||||
CheckBoxRange.prototype = {
|
|
||||||
currentBox: null,
|
|
||||||
form: null,
|
|
||||||
field: null,
|
|
||||||
|
|
||||||
initialize: function(form, field) {
|
|
||||||
this.form = form;
|
|
||||||
this.field = field;
|
|
||||||
this.eventPossibleCheckHappened = this.possibleCheckHappened.bindAsEventListener(this);
|
|
||||||
if(form) {
|
|
||||||
Event.observe(form, "click", this.eventPossibleCheckHappened);
|
|
||||||
Event.observe(form, "keyup", this.eventPossibleCheckHappened);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
possibleCheckHappened: function(event) {
|
|
||||||
var target = Event.element(event);
|
|
||||||
|
|
||||||
if ((event.button == 0 || event.keyCode == 32 || event.keyCode == 17) &&
|
|
||||||
this.isCheckBox(target) && target.form == $(this.form) && target.name == this.field) {
|
|
||||||
// If ctrl or shift is keys are pressed
|
|
||||||
if ((event.shiftKey || event.ctrlKey ) && this.currentBox)
|
|
||||||
this.updateCheckBoxRange(this.currentBox, target);
|
|
||||||
this.currentBox = target;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
isCheckBox: function(e) {
|
|
||||||
return (e.tagName.toLowerCase() == "input" && e.type.toLowerCase() == "checkbox");
|
|
||||||
},
|
|
||||||
|
|
||||||
updateCheckBoxRange: function(start, end) {
|
|
||||||
var last_clicked = end;
|
|
||||||
var checkboxes = Form.getInputs(this.form, 'checkbox', this.field);
|
|
||||||
var checkbox;
|
|
||||||
var last;
|
|
||||||
|
|
||||||
for (var i=0; (checkbox = checkboxes[i]); ++i) {
|
|
||||||
if (checkbox == end) {
|
|
||||||
last = start;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (checkbox == start) {
|
|
||||||
last = end;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (; (checkbox = checkboxes[i]); ++i) {
|
|
||||||
if (checkbox != last_clicked && checkbox.checked != last_clicked.checked)
|
|
||||||
checkbox.click();
|
|
||||||
if (checkbox == last)
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// SubsDraggable adapted from http://dev.rubyonrails.org/ticket/5771
|
|
||||||
|
|
||||||
// extentions for scriptaculous dragdrop.js
|
|
||||||
Object.extend(Class, {
|
|
||||||
superrise: function(obj, names){
|
|
||||||
names.each( function(n){ obj['super_' + n] = obj[n] } )
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Draggable that allows substitution of draggable element
|
|
||||||
var SubsDraggable = Class.create();
|
|
||||||
|
|
||||||
SubsDraggable.prototype = Object.extend({}, Draggable.prototype);
|
|
||||||
Class.superrise(SubsDraggable.prototype, ['initialize', 'startDrag', 'finishDrag'])
|
|
||||||
Object.extend( SubsDraggable.prototype , {
|
|
||||||
initialize: function(event) {
|
|
||||||
this.super_initialize.apply(this, arguments);
|
|
||||||
if( typeof(this.options.dragelement) == 'undefined' ) this.options.dragelement = false;
|
|
||||||
},
|
|
||||||
startDrag: function(event) {
|
|
||||||
if( this.options.dragelement ) {
|
|
||||||
this._originalElement = this.element;
|
|
||||||
// Get the id of the file being dragged
|
|
||||||
var beingDraggedId = this.element.id.replace('drag-Files-','');
|
|
||||||
this.element = this.options.dragelement(this.element);
|
|
||||||
Position.absolutize(this.element);
|
|
||||||
Position.clone(this._originalElement, this.element);
|
|
||||||
// Add # files being moved message
|
|
||||||
this.element.className = 'dragfile DraggedHandle';
|
|
||||||
// We are at least moving the 1 file being dragged
|
|
||||||
var numMoved = 1;
|
|
||||||
var i, checkboxes = $('Form_EditForm').elements['Files[]'];
|
|
||||||
if(!checkboxes) checkboxes = [];
|
|
||||||
if(!checkboxes.length) checkboxes = [ checkboxes ];
|
|
||||||
for(i=0;i<checkboxes.length;i++) {
|
|
||||||
// Total up the other files that are checked
|
|
||||||
if(checkboxes[i].checked && checkboxes[i].value != beingDraggedId) {
|
|
||||||
numMoved++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
numFilesIndicator = document.createElement('span');
|
|
||||||
numFilesIndicator.innerHTML = 'Moving ' + numMoved + ' files';
|
|
||||||
numFilesIndicator.className = 'NumFilesIndicator';
|
|
||||||
this.element.appendChild(numFilesIndicator);
|
|
||||||
}
|
|
||||||
this.super_startDrag(event);
|
|
||||||
},
|
|
||||||
finishDrag: function(event, success) {
|
|
||||||
this.super_finishDrag(event, success);
|
|
||||||
|
|
||||||
if(this.options.dragelement){
|
|
||||||
Element.remove(this.element);
|
|
||||||
this.element = this._originalElement;
|
|
||||||
this._originalElement = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// gets element that should be dragged instead of original element
|
|
||||||
// returned element should be added to DOM tree, and will be deleted by dragdrop library
|
|
||||||
function getDragElement(element){
|
|
||||||
var el = element.cloneNode(true);
|
|
||||||
el.id = '';
|
|
||||||
document.body.appendChild(el);
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set up DRAG handle
|
|
||||||
DragFileItem = Class.create();
|
|
||||||
DragFileItem.prototype = {
|
|
||||||
initialize: function() {
|
|
||||||
if (this.id)
|
|
||||||
{
|
|
||||||
this.draggable = new SubsDraggable(this.id, {revert:true,ghosting:false,dragelement:getDragElement});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy: function() {
|
|
||||||
this.draggable = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
DragFileItem.applyTo('#Form_EditForm_Files tr td.dragfile');
|
|
||||||
|
|
||||||
// Set up folder drop target
|
|
||||||
DropFileItem = Class.create();
|
|
||||||
DropFileItem.prototype = {
|
|
||||||
initialize: function() {
|
|
||||||
// Get this.recordID from the last "-" separated chunk of the id HTML attribute
|
|
||||||
// eg: <li id="treenode-6"> would give a recordID of 6
|
|
||||||
if(this.id && this.id.match(/-([^-]+)$/))
|
|
||||||
this.recordID = RegExp.$1;
|
|
||||||
this.droppable = Droppables.add(this.id, {accept:'dragfile', hoverclass:'filefolderhover',
|
|
||||||
onDrop:function(droppedElement) {
|
|
||||||
// Get this.recordID from the last "-" separated chunk of the id HTML attribute
|
|
||||||
// eg: <li id="treenode-6"> would give a recordID of 6
|
|
||||||
if(this.element.id && this.element.id.match(/-([^-]+)$/))
|
|
||||||
this.recordID = RegExp.$1;
|
|
||||||
$('Form_EditForm').elements['DestFolderID'].value = this.recordID;
|
|
||||||
|
|
||||||
// Add the dropped file to the list of files to move
|
|
||||||
var list = droppedElement.getElementsByTagName('img')[0].id.replace('drag-img-Files-','');
|
|
||||||
var i, checkboxes = $('Form_EditForm').elements['Files[]'];
|
|
||||||
if(!checkboxes) checkboxes = [];
|
|
||||||
if(!checkboxes.length) checkboxes = [ checkboxes ];
|
|
||||||
// Add each checked file to the list of ones to move
|
|
||||||
for(i=0;i<checkboxes.length;i++) {
|
|
||||||
if(checkboxes[i].checked) list += (list?',':'') + checkboxes[i].value;
|
|
||||||
}
|
|
||||||
$('Form_EditForm_FileIDs').value = list;
|
|
||||||
$('Form_EditForm').save(false, null, 'movemarked')
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
destroy: function() {
|
|
||||||
this.droppable = null;
|
|
||||||
this.recordID = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
DropFileItem.applyTo('#sitetree li');
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -8,12 +8,12 @@
|
|||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href="#TreeActions-create">
|
<a href="#TreeActions-create" id="TreeActions-create-btn">
|
||||||
<% _t('CREATE','Create',PR_HIGH) %>
|
<% _t('CREATE','Create',PR_HIGH) %>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#TreeActions-delete">
|
<a href="#TreeActions-delete" id="TreeActions-delete-btn">
|
||||||
<% _t('DELETE','Delete',PR_HIGH) %>
|
<% _t('DELETE','Delete',PR_HIGH) %>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user