Basic button behavior
This commit is contained in:
colymba
Thierry Francois
parent
a726cce755
commit
d141765752
|
|
@ -1,177 +1,189 @@
|
|||
(function($) {
|
||||
$.entwine('colymba', function($) {
|
||||
$.entwine('ss', function($) {
|
||||
|
||||
// start SS namespace overrides
|
||||
|
||||
// end SS namespace overrides
|
||||
|
||||
|
||||
$.entwine('colymba', function($) {
|
||||
|
||||
$('td.col-bulkSelect').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onmouseover: function(){
|
||||
//disable default row click behaviour -> avoid navigation to edit form when clicking the checkbox
|
||||
$(this).parents('.ss-gridfield-item').find('.edit-link').removeClass('edit-link').addClass('tempDisabledEditLink');
|
||||
},
|
||||
onmouseout: function(){
|
||||
//re-enable default row click behaviour
|
||||
$(this).parents('.ss-gridfield-item').find('.tempDisabledEditLink').addClass('edit-link').removeClass('tempDisabledEditLink');
|
||||
},
|
||||
onclick: function(e) {
|
||||
//check/uncheck checkbox when clicking cell
|
||||
var cb = $(e.target).find('input');
|
||||
if ( !$(cb).prop('checked') ) $(cb).prop('checked', true);
|
||||
else $(cb).prop('checked', false);
|
||||
}
|
||||
});
|
||||
|
||||
$('td.col-bulkSelect input').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onclick: function(e) {
|
||||
$(this).parents('.ss-gridfield-table').find('input.bulkSelectAll').prop('checked', '');
|
||||
}
|
||||
});
|
||||
|
||||
$('input.bulkSelectAll').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onclick: function()
|
||||
{
|
||||
var state = $(this).prop('checked');
|
||||
$(this).parents('.ss-gridfield-table')
|
||||
.find('td.col-bulkSelect input')
|
||||
.prop('checked', state);
|
||||
},
|
||||
getSelectRecordsID: function()
|
||||
{
|
||||
return $(this).parents('.ss-gridfield-table')
|
||||
.find('td.col-bulkSelect input:checked')
|
||||
.map(function() {
|
||||
return parseInt( $(this).data('record') )
|
||||
})
|
||||
.get();
|
||||
}
|
||||
});
|
||||
|
||||
$('select.bulkActionName').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onchange: function(e)
|
||||
{
|
||||
var value = $(this).val(),
|
||||
$parent = $(this).parents('.bulkManagerOptions'),
|
||||
$btn = $parent.find('.doBulkActionButton'),
|
||||
config = $btn.data('config'),
|
||||
$icon = $parent.find('.doBulkActionButton .ui-icon')
|
||||
;
|
||||
|
||||
$.each( config, function( configKey, configData )
|
||||
$('td.col-bulkSelect').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onmouseover: function(){
|
||||
//disable default row click behaviour -> avoid navigation to edit form when clicking the checkbox
|
||||
$(this).parents('.ss-gridfield-item').find('.edit-link').removeClass('edit-link').addClass('tempDisabledEditLink');
|
||||
},
|
||||
onmouseout: function(){
|
||||
//re-enable default row click behaviour
|
||||
$(this).parents('.ss-gridfield-item').find('.tempDisabledEditLink').addClass('edit-link').removeClass('tempDisabledEditLink');
|
||||
},
|
||||
onclick: function(e) {
|
||||
//check/uncheck checkbox when clicking cell
|
||||
var cb = $(e.target).find('input');
|
||||
if ( !$(cb).prop('checked') ) $(cb).prop('checked', true);
|
||||
else $(cb).prop('checked', false);
|
||||
}
|
||||
});
|
||||
|
||||
$('td.col-bulkSelect input').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onclick: function(e) {
|
||||
$(this).parents('.ss-gridfield-table').find('input.bulkSelectAll').prop('checked', '');
|
||||
}
|
||||
});
|
||||
|
||||
$('input.bulkSelectAll').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onclick: function()
|
||||
{
|
||||
var state = $(this).prop('checked');
|
||||
$(this).parents('.ss-gridfield-table')
|
||||
.find('td.col-bulkSelect input')
|
||||
.prop('checked', state);
|
||||
},
|
||||
getSelectRecordsID: function()
|
||||
{
|
||||
return $(this).parents('.ss-gridfield-table')
|
||||
.find('td.col-bulkSelect input:checked')
|
||||
.map(function() {
|
||||
return parseInt( $(this).data('record') )
|
||||
})
|
||||
.get();
|
||||
}
|
||||
});
|
||||
|
||||
$('select.bulkActionName').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
onchange: function(e)
|
||||
{
|
||||
if ( configKey != value )
|
||||
var value = $(this).val(),
|
||||
$parent = $(this).parents('.bulkManagerOptions'),
|
||||
$btn = $parent.find('.doBulkActionButton'),
|
||||
config = $btn.data('config'),
|
||||
$icon = $parent.find('.doBulkActionButton .ui-icon')
|
||||
;
|
||||
|
||||
$.each( config, function( configKey, configData )
|
||||
{
|
||||
$icon.removeClass('btn-icon-'+configData['icon']);
|
||||
}
|
||||
});
|
||||
$icon.addClass('btn-icon-'+config[value]['icon']);
|
||||
|
||||
|
||||
if ( config[value]['isDestructive'] )
|
||||
{
|
||||
$btn.addClass('ss-ui-action-destructive');
|
||||
}
|
||||
else{
|
||||
$btn.removeClass('ss-ui-action-destructive');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$('.doBulkActionButton').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
getActionURL: function(action, url)
|
||||
{
|
||||
var cacheBuster = new Date().getTime();
|
||||
url = url.split('?');
|
||||
|
||||
if ( action )
|
||||
{
|
||||
action = '/' + action;
|
||||
}
|
||||
else{
|
||||
action = '';
|
||||
}
|
||||
|
||||
if ( url[1] )
|
||||
{
|
||||
url = url[0] + action + '?' + url[1] + '&' + 'cacheBuster=' + cacheBuster;
|
||||
}
|
||||
else{
|
||||
url = url[0] + action + '?' + 'cacheBuster=' + cacheBuster;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
onclick: function(e)
|
||||
{
|
||||
var $parent = $(this).parents('.bulkManagerOptions'),
|
||||
$btn = $parent.find('a.doBulkActionButton'),
|
||||
|
||||
action = $parent.find('select.bulkActionName').val(),
|
||||
config = $btn.data('config'),
|
||||
|
||||
url = this.getActionURL(action, $(this).data('url')),
|
||||
|
||||
ids = $(this).parents('.bulkManagerOptions').find('input.bulkSelectAll:first').getSelectRecordsID(),
|
||||
data = { records: ids }
|
||||
;
|
||||
|
||||
|
||||
if ( ids.length <= 0 )
|
||||
{
|
||||
alert( ss.i18n._t('GridFieldBulkManager.BULKACTION_EMPTY_SELECT') );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( $btn.hasClass('ss-ui-action-destructive') )
|
||||
{
|
||||
if( !confirm(ss.i18n._t('GridFieldBulkManager.CONFIRM_DESTRUCTIVE_ACTION')) )
|
||||
{
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
$btn.addClass('loading');
|
||||
|
||||
if ( config[action]['isAjax'] )
|
||||
{
|
||||
$.ajax({
|
||||
url: url,
|
||||
data: data,
|
||||
type: "POST",
|
||||
context: $(this)
|
||||
}).done(function() {
|
||||
$(this).parents('.ss-gridfield').entwine('.').entwine('ss').reload();
|
||||
$btn.removeClass('loading');
|
||||
if ( configKey != value )
|
||||
{
|
||||
$icon.removeClass('btn-icon-'+configData['icon']);
|
||||
}
|
||||
});
|
||||
}
|
||||
else{
|
||||
var records = 'records[]='+ids.join('&records[]=');
|
||||
url = url + '&' + records;
|
||||
$icon.addClass('btn-icon-'+config[value]['icon']);
|
||||
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
if ( config[value]['isDestructive'] )
|
||||
{
|
||||
$btn.addClass('ss-ui-action-destructive');
|
||||
}
|
||||
else{
|
||||
$btn.removeClass('ss-ui-action-destructive');
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$('.doBulkActionButton').entwine({
|
||||
onmatch: function(){
|
||||
},
|
||||
onunmatch: function(){
|
||||
},
|
||||
getActionURL: function(action, url)
|
||||
{
|
||||
var cacheBuster = new Date().getTime();
|
||||
url = url.split('?');
|
||||
|
||||
if ( action )
|
||||
{
|
||||
action = '/' + action;
|
||||
}
|
||||
else{
|
||||
action = '';
|
||||
}
|
||||
|
||||
if ( url[1] )
|
||||
{
|
||||
url = url[0] + action + '?' + url[1] + '&' + 'cacheBuster=' + cacheBuster;
|
||||
}
|
||||
else{
|
||||
url = url[0] + action + '?' + 'cacheBuster=' + cacheBuster;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
onclick: function(e)
|
||||
{
|
||||
var $parent = $(this).parents('.bulkManagerOptions'),
|
||||
$btn = $parent.find('a.doBulkActionButton'),
|
||||
|
||||
action = $parent.find('select.bulkActionName').val(),
|
||||
config = $btn.data('config'),
|
||||
|
||||
url = this.getActionURL(action, $(this).data('url')),
|
||||
|
||||
ids = $(this).parents('.bulkManagerOptions').find('input.bulkSelectAll:first').getSelectRecordsID(),
|
||||
data = { records: ids }
|
||||
;
|
||||
|
||||
|
||||
if ( ids.length <= 0 )
|
||||
{
|
||||
alert( ss.i18n._t('GridFieldBulkManager.BULKACTION_EMPTY_SELECT') );
|
||||
return;
|
||||
}
|
||||
|
||||
if ( $btn.hasClass('ss-ui-action-destructive') )
|
||||
{
|
||||
if( !confirm(ss.i18n._t('GridFieldBulkManager.CONFIRM_DESTRUCTIVE_ACTION')) )
|
||||
{
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
$btn.addClass('loading');
|
||||
|
||||
if ( config[action]['isAjax'] )
|
||||
{
|
||||
$.ajax({
|
||||
url: url,
|
||||
data: data,
|
||||
type: "POST",
|
||||
context: $(this)
|
||||
}).done(function() {
|
||||
$(this).parents('.ss-gridfield').entwine('.').entwine('ss').reload();
|
||||
$btn.removeClass('loading');
|
||||
});
|
||||
}
|
||||
else{
|
||||
var records = 'records[]='+ids.join('&records[]=');
|
||||
url = url + '&' + records;
|
||||
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
doBulkAction: function(action, ids)
|
||||
{
|
||||
console.log(action, ids);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
}(jQuery));
|
||||
|
|
@ -269,21 +269,18 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle
|
|||
$finishButton = FormAction::create('Finish', _t('GridFieldBulkTools.FINISH_BTN_LABEL', 'Finish'))
|
||||
->addExtraClass('bulkUploadFinishButton')
|
||||
->setAttribute('data-icon', 'accept')
|
||||
->setUseButtonTag(true)
|
||||
->setAttribute('src', '');//changes type to image so isn't hooked by default actions handlers
|
||||
->setUseButtonTag(true);
|
||||
|
||||
$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', '');
|
||||
->setUseButtonTag(true);
|
||||
|
||||
$clearErrorButton = FormAction::create('ClearError', _t('GridFieldBulkTools.CLEAR_ERROR_BTN_LABEL', 'Clear errors'))
|
||||
->addExtraClass('bulkUploadClearErrorButton')
|
||||
->setAttribute('data-icon', 'arrow-circle-double')
|
||||
->setUseButtonTag(true)
|
||||
->setAttribute('src', '');
|
||||
->setUseButtonTag(true);
|
||||
|
||||
if ( $gridField->getConfig()->getComponentsByType('GridFieldBulkManager') )
|
||||
{
|
||||
|
|
@ -291,8 +288,7 @@ class GridFieldBulkUpload implements GridField_HTMLProvider, GridField_URLHandle
|
|||
->addExtraClass('bulkUploadEditButton')
|
||||
->setAttribute('data-icon', 'pencil')
|
||||
->setAttribute('data-url', $gridField->Link('bulkupload/edit'))
|
||||
->setUseButtonTag(true)
|
||||
->setAttribute('src', '');
|
||||
->setUseButtonTag(true);
|
||||
}else{
|
||||
$editAllButton = '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,118 +1,12 @@
|
|||
(function($) {
|
||||
$.entwine('ss', function($) {
|
||||
|
||||
// ============================================================================================
|
||||
// start SS namespace overrides
|
||||
// ============================================================================================
|
||||
|
||||
/*
|
||||
* open/close edit form
|
||||
*/
|
||||
$('div.ss-upload .ss-uploadfield-item-edit, div.ss-upload .ss-uploadfield-item-name').entwine({
|
||||
onclick: function(e)
|
||||
{
|
||||
this.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform').toggleEditForm();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* edit all button
|
||||
* @TODO fix
|
||||
*/
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').entwine({
|
||||
onmatch: function()
|
||||
{
|
||||
if( !$(this).hasClass('opened') ){
|
||||
$(this).addClass('opened');
|
||||
}
|
||||
},
|
||||
onunmatch: function(){},
|
||||
onclick: function(e)
|
||||
{
|
||||
if( $(this).hasClass('opened') )
|
||||
{
|
||||
$('.ss-uploadfield-files .ss-uploadfield-item-editform').hide();
|
||||
$(this).removeClass('opened');
|
||||
}
|
||||
else{
|
||||
$('.ss-uploadfield-files .ss-uploadfield-item-editform').show();
|
||||
$(this).addClass('opened');
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* show/hide edit form
|
||||
* overrides default behaviour
|
||||
*/
|
||||
$('div.ss-upload .ss-uploadfield-item-editform').entwine({
|
||||
toggleEditForm: function()
|
||||
{
|
||||
if( this.css('display') == 'none' ) {
|
||||
this.show();
|
||||
}
|
||||
else{
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* prevent submitting of individual edit forms
|
||||
*/
|
||||
$('#Form_uploadForm, div.ss-upload .ss-uploadfield-item-editform form').entwine({
|
||||
onsubmit: function(e)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* initialise disabled state
|
||||
*/
|
||||
$('#bulkImageUploadUpdateBtn,#bulkImageUploadUpdateCancelBtn').entwine({
|
||||
onmatch: function()
|
||||
{
|
||||
$(this).addClass('ui-state-disabled ssui-button-disabled');
|
||||
$(this).attr('aria-disabled', 'true');
|
||||
$(this).attr('disabled', 'true');
|
||||
},
|
||||
onunmatch: function(){}
|
||||
});
|
||||
|
||||
/*
|
||||
* finish/return button
|
||||
*/
|
||||
$('#bulkImageUploadFinishBtn').entwine({
|
||||
onmatch: function(){},
|
||||
onunmatch: function(){},
|
||||
onclick: function(e)
|
||||
{
|
||||
var formsWithUpadtes = $('form.bulkImageUploadUpdateForm.hasUpdate').length,
|
||||
confirmed = true;
|
||||
|
||||
if ( formsWithUpadtes > 0 )
|
||||
{
|
||||
confirmed = confirm( ss.i18n._t('GridFieldBulkTools.FINISH_CONFIRM') );
|
||||
}
|
||||
|
||||
if (confirmed)
|
||||
{
|
||||
$('.cms-container').loadPanel(this.attr('href'), null, {});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================================================
|
||||
// end SS namespace overrides
|
||||
// ============================================================================================
|
||||
|
||||
// ============================================================================================
|
||||
// start add-on behaviours
|
||||
// ============================================================================================
|
||||
|
||||
|
||||
$.entwine('colymba', function($) {
|
||||
|
||||
/**
|
||||
|
|
@ -254,7 +148,96 @@
|
|||
});
|
||||
|
||||
|
||||
$('.bulkUploadClearErrorButton').entwine({
|
||||
onmatch: function(){
|
||||
this.removeClass('action');
|
||||
},
|
||||
onunmatch: function(){},
|
||||
onclick: function(e)
|
||||
{
|
||||
var $bulkUpload = this.parents('.bulkUpload'),
|
||||
$errors = $bulkUpload.find('li.ss-uploadfield-item .ui-state-warning-text,li.ss-uploadfield-item .ui-state-error-text').parents('li')
|
||||
;
|
||||
|
||||
$($errors.get().reverse()).each(function(index, Element){
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.bulkUploadCancelButton').entwine({
|
||||
onmatch: function(){
|
||||
this.removeClass('action');
|
||||
},
|
||||
onunmatch: function(){},
|
||||
onclick: function()
|
||||
{
|
||||
var $bulkUpload = this.parents('.bulkUpload'),
|
||||
$li = $bulkUpload.find('li.ss-uploadfield-item'),
|
||||
$records = $li.filter('[data-recordid]'),
|
||||
recordsID,
|
||||
$other = $li.not($records),
|
||||
$doBulkActionButton = $bulkUpload.parents('.ss-gridfield-table').find('.doBulkActionButton')
|
||||
;
|
||||
|
||||
$other.each(function(index, Element){
|
||||
// skip in progress
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
if ( $doBulkActionButton.length > 0 )
|
||||
{
|
||||
recordsID = $records.map(function() {
|
||||
return parseInt( $(this).data('recordid') )
|
||||
}).get();
|
||||
|
||||
$doBulkActionButton.doBulkAction('delete', recordsID);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.bulkUploadFinishButton').entwine({
|
||||
onmatch: function(){
|
||||
this.removeClass('action');
|
||||
},
|
||||
onunmatch: function(){},
|
||||
onclick: function()
|
||||
{
|
||||
var $bulkUpload = this.parents('.bulkUpload'),
|
||||
$li = $bulkUpload.find('li.ss-uploadfield-item')
|
||||
;
|
||||
|
||||
$li.each(function(index, Element){
|
||||
// skip in progress
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.bulkUploadEditButton').entwine({
|
||||
onmatch: function(){
|
||||
this.removeClass('action');
|
||||
},
|
||||
onunmatch: function(){},
|
||||
onclick: function()
|
||||
{
|
||||
var $bulkUpload = this.parents('.bulkUpload'),
|
||||
$li = $bulkUpload.find('li.ss-uploadfield-item'),
|
||||
$records = $li.filter('[data-recordid]'),
|
||||
recordsID,
|
||||
$doBulkActionButton = $bulkUpload.parents('.ss-gridfield-table').find('.doBulkActionButton')
|
||||
;
|
||||
|
||||
if ( $doBulkActionButton.length > 0 )
|
||||
{
|
||||
recordsID = $records.map(function() {
|
||||
return parseInt( $(this).data('recordid') )
|
||||
}).get();
|
||||
|
||||
$doBulkActionButton.doBulkAction('edit', recordsID);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -380,10 +363,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
});
|
||||
// ============================================================================================
|
||||
// end add-on behaviours
|
||||
// ============================================================================================
|
||||
}); // colymba namespace
|
||||
|
||||
});
|
||||
}); // ss namespace
|
||||
}(jQuery));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
window.tmpl.cache['colymba-bulkuploaddownloadtemplate'] = tmpl(
|
||||
'{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}' +
|
||||
'<li class="ss-uploadfield-item template-download{% if (file.error) { %} ui-state-error{% }else{ %} done{% } %}" data-fileid="{%=file.id%} data-recordid="{%=file.record.id%}">' +
|
||||
'<li class="ss-uploadfield-item template-download{% if (file.error) { %} ui-state-error{% }else{ %} done{% } %}" data-fileid="{%=file.id%}" data-recordid="{%=file.record.id%}">' +
|
||||
'<div class="ss-uploadfield-item-preview preview"><span>' +
|
||||
'<img src="{%=file.thumbnail_url%}" alt="" />' +
|
||||
'</span></div>' +
|
||||
|
|
|
|||
Loading…
Reference in New Issue