tonyair/GridFieldBulkEditingTools
1
0
Fork 0
mirror of https://github.com/colymba/GridFieldBulkEditingTools.git synced 2024-10-22 11:05:57 +02:00
Code Issues Projects Releases Wiki Activity

Add progress info + clear button

Browse Source
This commit is contained in:
colymba 2014-04-06 14:30:54 +03:00 committed by Thierry Francois
parent ade47d5e80
commit a726cce755
6 changed files with 204 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
bulkUpload/code/GridFieldBulkUpload.php
View File

@ -272,13 +272,19 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle
->setUseButtonTag(true)
->setAttribute('src', '');//changes type to image so isn't hooked by default actions handlers
$cancelButton = FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel & delete all'))
$cancelButton = FormAction::create('Cancel', _t('GridFieldBulkTools.CANCEL_BTN_LABEL', 'Cancel'))
->addExtraClass('bulkUploadCancelButton ss-ui-action-destructive')
->setAttribute('data-icon', 'decline')
->setAttribute('data-url', $gridField->Link('bulkupload/cancel'))
->setUseButtonTag(true)
->setAttribute('src', '');
$clearErrorButton = FormAction::create('ClearError', _t('GridFieldBulkTools.CLEAR_ERROR_BTN_LABEL', 'Clear errors'))
->addExtraClass('bulkUploadClearErrorButton')
->setAttribute('data-icon', 'arrow-circle-double')
->setUseButtonTag(true)
->setAttribute('src', '');
if ( $gridField->getConfig()->getComponentsByType('GridFieldBulkManager') )
{
$editAllButton = FormAction::create('EditAll', _t('GridFieldBulkTools.EDIT_ALL_BTN_LABEL', 'Edit all'))
@ -293,9 +299,10 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle
// get uploadField + inject extra buttons
$uploadField = $this->bulkUploadField($gridField);
$uploadField->FinishButton = $finishButton;
$uploadField->CancelButton = $cancelButton;
$uploadField->EditAllButton = $editAllButton;
$uploadField->FinishButton = $finishButton;
$uploadField->CancelButton = $cancelButton;
$uploadField->EditAllButton = $editAllButton;
$uploadField->ClearErrorButton = $clearErrorButton;
$data = ArrayData::create(array(
'Colspan' => count($gridField->getColumns()),

30
bulkUpload/css/GridFieldBulkUpload.css
View File

@ -14,8 +14,7 @@
position: relative;
float: left;
clear: both;
width: 100%;
padding-top: 70px; }
width: 100%; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-files {
float: left;
clear: both;
@ -86,13 +85,9 @@
float: right;
margin-top: 2px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile {
position: absolute;
top: 0;
left: 0;
float: left;
clear: both;
width: 98%;
height: 50px;
padding: 1%; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile.borderTop {
border: none; }
@ -114,7 +109,8 @@
width: 60%;
margin: 0; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-item-name {
height: 20px; }
height: auto;
margin-bottom: 2px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-ui-button .ui-button-text .ui-button-text {
padding: 0px; }
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromcomputer {
@ -122,3 +118,23 @@
.bulkUpload .component div.ss-uploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info .ss-uploadfield-fromfiles {
margin-bottom: 0;
padding: .5px; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons {
display: none;
float: left;
width: 98%;
padding: 6px 1% 6px 1%;
border-top: 1px solid rgba(0, 0, 0, 0.1); }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button {
float: left;
margin: 0 6px 0 0; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button .ui-button-text .ui-button-text {
padding: 0; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button.bulkUploadEditButton, .bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons button.bulkUploadClearErrorButton {
float: right;
margin: 0 0 0 6px; }
.bulkUpload .component div.ss-uploadfield .colymba-bulkupload-buttons .colymba-bulkupload-info {
float: left;
margin: 0 6px 0 0;
line-height: 28px;
height: 28px;
color: #73818a; }

52
bulkUpload/css/GridFieldBulkUpload.scss
View File

@ -29,8 +29,6 @@
clear: both;
width: 100%;
padding-top: 70px;
// uploading file progress
.ss-uploadfield-files
{
@ -168,15 +166,10 @@
// upload tools
.ss-uploadfield-addfile
{
position: absolute;
top: 0;
left: 0;
float: left;
clear: both;
width: 98%;
height: 50px;
padding: 1%;
@ -214,7 +207,8 @@
.ss-uploadfield-item-name
{
height: 20px;
height: auto;
margin-bottom: 2px;
}
.ss-ui-button
@ -239,7 +233,47 @@
padding: .5px;
}
}
}// .ss-uploadfield-item
}// .ss-uploadfield-addfile
.colymba-bulkupload-buttons
{
display: none;
float: left;
width: 98%;
padding: 6px 1% 6px 1%;
border-top: 1px solid rgba(0, 0, 0, 0.1);
button
{
float: left;
margin: 0 6px 0 0;
.ui-button-text
{
.ui-button-text
{
padding: 0;
}
}
&.bulkUploadEditButton,
&.bulkUploadClearErrorButton
{
float: right;
margin: 0 0 0 6px;
}
}// button
.colymba-bulkupload-info
{
float: left;
margin: 0 6px 0 0;
line-height: 28px;
height: 28px;
color: #73818a;
}
}
}// .ss-uploadfield

173
bulkUpload/javascript/GridFieldBulkUpload.js
View File

@ -134,61 +134,131 @@
});
/*
* handles individual edit forms changes
* updates buttons and visual styles
*/
$('.bulkImageUploadUpdateForm').entwine({
/**
* Track upload progress...
*/
$('ul.ss-uploadfield-files').entwine({
onmatch: function(){},
onunmatch: function(){},
haschanged: function()
onunmatch: function(){},
trackProgress: function()
{
var itemInfo,
itemStatus
var $li = this.find('li.ss-uploadfield-item'),
total = $li.length,
$done = $li.filter('.done'),
done = $done.length,
$errors = $li.not($done).find('.ui-state-warning-text,.ui-state-error-text'),
errors = $errors.length
;
itemStatus = $(this).parents('li').find('.ss-uploadfield-item-status');
itemInfo = $(this).parents('li').find('.ss-uploadfield-item-info');
if ( !$(this).hasClass('hasUpdate') )
{
$(this).addClass('hasUpdate');
}
$(itemStatus).removeClass('updated').addClass('dirty').html(ss.i18n._t('GridFieldBulkTools.EDIT_CHANGED'));
if ( $(itemInfo).hasClass('updated') ) $(itemInfo).removeClass('updated');
if ( !$(itemInfo).hasClass('dirty') ) $(itemInfo).addClass('dirty');
$('#bulkImageUploadUpdateBtn').removeClass('ui-state-disabled ssui-button-disabled');
$('#bulkImageUploadUpdateBtn').attr('aria-disabled', 'false');
$('#bulkImageUploadUpdateBtn').removeAttr('disabled');
this.parents('.ss-uploadfield').find('.colymba-bulkupload-buttons').refresh(total, done, errors);
/*
this.closest('.colymba-bulkupload-info').html(ss.i18n.sprintf(
ss.i18n._t('GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO'),
total,
done,
total
));*/
}
});
/*
* catches edit form changes
*/
$('.bulkImageUploadUpdateForm input.text, .bulkImageUploadUpdateForm input.checkbox, .bulkImageUploadUpdateForm select, .bulkImageUploadUpdateForm textarea').entwine({
onchange: function()
{
this.closest('.bulkImageUploadUpdateForm').haschanged();
}
});
/*
* catches edit form changes
* HTMLEditorField hack
*/
//textarea node is being removed from the DOM when the HTMLEditorFieldChanges, not the best but works
$('.field.htmleditor textarea').entwine({
onmatch: function(){},
onunmatch: function()
{
//note sure why querying straight from the texarea doesn't work... maybe because it is already removed from DOM?
$('input[type="hidden"][name="'+$(this).attr('name')+'"]').parents('.bulkImageUploadUpdateForm').haschanged();
}
/**
* Track new and canceled updloads
*/
$('li.ss-uploadfield-item').entwine({
onmatch: function(){
this.parents('ul.ss-uploadfield-files').trackProgress();
},
onunmatch: function(){
$('ul.ss-uploadfield-files').trackProgress();
},
});
/**
* Track updload warning/errors
*/
$('li.ss-uploadfield-item .ui-state-warning-text,li.ss-uploadfield-item .ui-state-error-text').entwine({
onmatch: function(){
this.parents('ul.ss-uploadfield-files').trackProgress();
},
onunmatch: function(){
$('ul.ss-uploadfield-files').trackProgress();
},
});
/**
* Track completed uploads
*//*
$('li.ss-uploadfield-item.done').entwine({
onmatch: function(){
this.parents('ul.ss-uploadfield-files').trackProgress();
},
onunmatch: function(){},
});*/
/**
* Update buttons state and progress info...
*/
$('.colymba-bulkupload-buttons').entwine({
onmatch: function(){},
onunmatch: function(){},
refresh: function(total, done, error)
{
var $info = this.find('.colymba-bulkupload-info'),
$editBtn = this.find('.bulkUploadEditButton'),
$cancelBtn = this.find('.bulkUploadCancelButton'),
$finishBtn = this.find('.bulkUploadFinishButton'),
$clearErrorBtn = this.find('.bulkUploadClearErrorButton')
;
if ( total > 0 )
{
this.css({display: 'block'});
$info.html(ss.i18n.sprintf(
ss.i18n._t('GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO'),
total,
done,
error
));
$cancelBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
$finishBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
if ( total === done )
{
$editBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
}
else{
$editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
}
if ( error > 0 )
{
$clearErrorBtn.removeClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'false').removeAttr('disabled');
}
else{
$clearErrorBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
}
}
else{
this.css({display: 'none'});
$editBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
$cancelBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
$finishBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
$clearErrorBtn.addClass('ui-state-disabled ssui-button-disabled').attr('aria-disabled', 'true').attr('disabled', 'true');
}
}
});
/*
* save changes button behaviour
* loop through edited forms and submit data
@ -264,19 +334,6 @@
}
});
/*
* edit forms ovverides
*/
$('.ss-uploadfield-item-editform').entwine({
onmatch: function(e)
{
$('#bulkImageUploadUpdateCancelBtn').removeClass('ui-state-disabled ssui-button-disabled');
$('#bulkImageUploadUpdateCancelBtn').attr('aria-disabled', 'false');
$('#bulkImageUploadUpdateCancelBtn').removeAttr('disabled');
},
onunmatch: function(){}
});
/*
* cancel button behaviour
* loop through edit forms and submit for deletion

1
bulkUpload/javascript/lang/en.js
View File

@ -4,6 +4,7 @@ if(typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') {
if(typeof(console) != 'undefined') console.error('Class ss.i18n not defined');
} else {
ss.i18n.addDictionary('en', {
"GRIDFIELD_BULK_UPLOAD.PROGRESS_INFO": "Uploading %s file(s). %s done. %s error(s).",
"GridFieldBulkTools.FINISH_CONFIRM": "You have unsaved changes. Continuing will loose all unsaved data.\n\nDo your really want to continue?",
"GridFieldBulkTools.EDIT_CHANGED": "Modified",
"GridFieldBulkTools.EDIT_UPDATED": "Saved",

4
bulkUpload/templates/GridFieldBulkUploadField.ss
View File

@ -42,9 +42,11 @@
<div class="clear"><!-- --></div>
</div>
<div class="colymba-bulkupload-progress">
<div class="colymba-bulkupload-buttons">
$FinishButton
$CancelButton
<span class="colymba-bulkupload-info"></span>
$ClearErrorButton
$EditAllButton
</div>
<% end_if %>