From d141765752d15450b674ce7dcb10556683e3b7a7 Mon Sep 17 00:00:00 2001 From: colymba Date: Sun, 6 Apr 2014 15:51:15 +0300 Subject: [PATCH] Basic button behavior --- .../javascript/GridFieldBulkManager.js | 348 +++++++++--------- bulkUpload/code/GridFieldBulkUpload.php | 12 +- bulkUpload/javascript/GridFieldBulkUpload.js | 206 +++++------ .../GridFieldBulkUpload_downloadtemplate.js | 2 +- 4 files changed, 278 insertions(+), 290 deletions(-) diff --git a/bulkManager/javascript/GridFieldBulkManager.js b/bulkManager/javascript/GridFieldBulkManager.js index 846f3cf..4c27c0f 100644 --- a/bulkManager/javascript/GridFieldBulkManager.js +++ b/bulkManager/javascript/GridFieldBulkManager.js @@ -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)); \ No newline at end of file diff --git a/bulkUpload/code/GridFieldBulkUpload.php b/bulkUpload/code/GridFieldBulkUpload.php index 8245b63..f8cccc2 100644 --- a/bulkUpload/code/GridFieldBulkUpload.php +++ b/bulkUpload/code/GridFieldBulkUpload.php @@ -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 = ''; } diff --git a/bulkUpload/javascript/GridFieldBulkUpload.js b/bulkUpload/javascript/GridFieldBulkUpload.js index 30709a2..16c41e3 100644 --- a/bulkUpload/javascript/GridFieldBulkUpload.js +++ b/bulkUpload/javascript/GridFieldBulkUpload.js @@ -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)); diff --git a/bulkUpload/javascript/GridFieldBulkUpload_downloadtemplate.js b/bulkUpload/javascript/GridFieldBulkUpload_downloadtemplate.js index f404e59..91e258c 100644 --- a/bulkUpload/javascript/GridFieldBulkUpload_downloadtemplate.js +++ b/bulkUpload/javascript/GridFieldBulkUpload_downloadtemplate.js @@ -1,6 +1,6 @@ window.tmpl.cache['colymba-bulkuploaddownloadtemplate'] = tmpl( '{% for (var i=0, files=o.files, l=files.length, file=files[0]; i' + + '
  • ' + '
    ' + '' + '
    ' +