Skip to content

Commit

Permalink
Update list.js
Browse files Browse the repository at this point in the history 
Revamp of CSV Export popup
  • Loading branch information
@bauer-git
bauer-git committed May 20, 2016
1 parent 98d2c43 commit 33e9490
Showing 1 changed file with 141 additions and 19 deletions.
160 changes: 141 additions & 19 deletions media/com_fabrik/js/list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,8 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
modal : true,
bootstrap : this.options.j3
};
this.exportWindowOpts.width = parseInt(this.options.csvOpts.popupwidth,10)>0 ? this.options.csvOpts.popupwidth : 340;
this.exportWindowOpts.optswidth = parseInt(this.options.csvOpts.optswidth,10)>0 ? this.options.csvOpts.optswidth : 200;
if (this.options.view === 'csv') {

// For csv links e.g. index.php?option=com_fabrik&view=csv&listid=10
Expand All @@ -214,7 +216,66 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
});
}
},
centerCSVWindow: function(start) {
/* hide the 'Save to' until file name is known */
var savingto = (start > 0) ? 'block' : 'none';
jQuery('p.saveto').css('display',savingto);

/* allow modal to collapse height once form options are hidden
* so that only csvmsg div is shown
*/
if(start >= 0 || jQuery('div.itemContent').outerHeight()==0){
/* If selectable options - hide and remove space in DOM by setting outerHeight to 0 */
if(jQuery('div.modal-footer').length) {
jQuery('div.itemContent').outerHeight(0);
jQuery('div.modal').css('height','auto');
}else{
jQuery('div.itemContent').css('overflow','initial');
}
}else{
/* reset the itemContent height to max */
if(jQuery('div.modal-footer').length) {
jQuery('div.opt__file-type div').css({'float':'left','width': (this.exportWindowOpts.optswidth-8)+'px','background-color':'bisque','margin':'0px','padding':'4px 8px','font-weight':'600'});
jQuery('div.itemContent').css('height','auto');
jQuery('div.modal').css('height','auto');
}
}
jQuery('div.contentWrapper').css('height','auto');
jQuery('#csvmsg').css('text-align','center');

/* re-center the modal vertically */
var viewHeight = jQuery(window).outerHeight();
var headHeight = jQuery('div.modal-header').outerHeight(true);

/* modHeight source depends on if there is a mod_footer (options were are shown) */
if(jQuery('div.modal-footer').length) {
var modHeight = jQuery('div.itemContent').outerHeight(true);
var footHeight = jQuery('div.modal-footer').outerHeight(true);
}else{
/* just hard-code the itemContent height to accomodate
* the csvmsg div if no options and footer are used */
var modHeight = 134;
var footHeight = 0;
jQuery( 'div.modal' ).css('height',(headHeight+modHeight)+'px');
}

var frameHeight = parseInt(headHeight+modHeight+footHeight);

/* If modal height will be within 10px of max (viewport) height
* set height of scrolling content be to 80% of viewport height
* (allowing for header and footer)
*/
if(frameHeight+10 > viewHeight){
var fullHeight= parseInt(headHeight+(viewHeight*.8)+footHeight);
jQuery( 'div.itemContent' ).outerHeight(parseInt(viewHeight*.8));
jQuery( 'div.modal' ).outerHeight(fullHeight);
var offtop = parseInt((viewHeight-fullHeight)/2);
jQuery( 'div.modal' ).css('top',offtop+'px');
}else{
var offtop = parseInt((viewHeight-frameHeight)/2);
jQuery('div.modal').css('top',offtop+'px');
}
},
/**
* Open either the window to choose csv export options or auto-start the CSV
* download
Expand All @@ -223,20 +284,58 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
var self = this;
this.exportWindowOpts.content = this.makeCSVExportForm();
this.csvWindow = Fabrik.getWindow(this.exportWindowOpts);

/* set modal window height to auto to allow collapes/expansion */
jQuery('div.modal').css('height','auto');

/* Prevent browser window from being scrolled */
jQuery('body').css({'height':'100%','overflow':'hidden'});

/* Allow browser window to be scrolled again when modal is released from DOM */
jQuery('div.modal').on('remove', function () {
jQuery('body').css({'height':'initial','overflow':'initial'});
});

/* adds draggable feature to modal popup */
jQuery('div.modal').draggable({
handle: '.modal-header'
});
jQuery('.modal-header').on('mouseover', function(){
jQuery(this).css('cursor','move');
});

/* recenter popup if window viewport gets resized */
jQuery(window).on('resize', function(){
self.centerCSVWindow();
});

/* force every form option to new line */
jQuery('div.modal').find('form div[class^=opt__]').css({'clear':'left','float':'left','white-space':'nowrap'});

/* Allow wide option labels to wrap */
jQuery('div.modal').find('form div[class^=opt__] div').css({'line-height':'1.1em','white-space':'initial'});

/* vertically center the popup */
self.centerCSVWindow();

jQuery('.exportCSVButton').on('click', function (e) {
e.stopPropagation();
this.disabled = true;

/* immediately hide the Export button and form options */
jQuery(this).hide();
jQuery(this).closest('div.modal').find('.contentWrapper').hide();

var csvMsg = jQuery('#csvmsg');
if (csvMsg.length === 0) {
csvMsg = jQuery('<div />').attr({
'id': 'csvmsg'
}).insertBefore(jQuery(this));
}
csvMsg.html(Joomla.JText._('COM_FABRIK_LOADING') +
' <br /><span id="csvcount">0</span> / <span id="csvtotal"></span> ' +
Joomla.JText._('COM_FABRIK_RECORDS') + '.<br/>' + Joomla.JText._('COM_FABRIK_SAVING_TO') +
'<span id="csvfile"></span>');
' <p><span id="csvcount">0</span> / <span id="csvtotal"></span> ' +
Joomla.JText._('COM_FABRIK_RECORDS') + '</p><p class="saveto">' + Joomla.JText._('COM_FABRIK_SAVING_TO') +
' <span id="csvfile"></span></p>');
self.triggerCSVExport(0);
});
},
Expand Down Expand Up @@ -274,7 +373,18 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
this.triggerCSVExport(-1);
return c;
},

/* Used to create class names for every line in the form options.
* This will allow for more easilly adding custom css styling to
* hide options that you don't want the user to be able to change.
*/
makeSafeForCSS: function(name) {
return name.replace(/[^a-z0-9]/g, function(s) {
var c = s.charCodeAt(0);
if (c == 32) return '-';
if (c >= 65 && c <= 90) return s.toLowerCase();
return ('000' + c.toString(16)).slice(-4);
});
},
/**
* Create a csv yes/no radio div.
* @param {string} name
Expand All @@ -286,7 +396,7 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
* @private
*/
_csvYesNo: function (name, yesValue, yesLabel, noLabel, title) {
var label = jQuery('<label />').css('float', 'left');
var label = jQuery('<label />').css({'display':'inline-block','margin-left':'15px'});

var yes = label.clone().append(
[jQuery('<input />').attr({
Expand All @@ -308,12 +418,13 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
jQuery('<span />').text(noLabel)
]),
titleLabel = jQuery('<div>').css({
'width': '200px',
'margin': '3px 0px 1px 8px',
'width': this.exportWindowOpts.optswidth + 'px',
'float': 'left'
}).text(title);

return jQuery('<div>').append([titleLabel, yes, no]);

var thisClass = 'opt__' + this.makeSafeForCSS(title);
return jQuery('<div class="' + thisClass + '">').css({'border-bottom':'1px solid #dddddd'}).append([titleLabel, yes, no]);
},

/**
Expand All @@ -322,14 +433,15 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
* @private
*/
_csvExportForm: function () {
var thisClass,thisText;
var yes = Joomla.JText._('JYES'),
no = Joomla.JText._('JNO'),
self = this,
url = 'index.php?option=com_fabrik&view=list&listid=' +
this.id + '&format=csv&Itemid=' + this.options.Itemid,
label = jQuery('<label />').css('float', 'left');
label = jQuery('<label />').css('clear', 'left');

var c = jQuery('<form />').attr({
var c = jQuery('<form />').css('margin-bottom','0px').attr({
'action': url,
'method': 'post'
}).append([
Expand All @@ -345,16 +457,20 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
yes, no, Joomla.JText._('COM_FABRIK_INCLUDE_CALCULATIONS')),

]);
jQuery('<h4 />').css('clear', 'left')
.text(Joomla.JText._('COM_FABRIK_SELECT_COLUMNS_TO_EXPORT')).appendTo(c);
thisText = Joomla.JText._('COM_FABRIK_SELECT_COLUMNS_TO_EXPORT');
thisClass = 'opt__' + self.makeSafeForCSS(thisText);
jQuery('<div />').prop('class',thisClass)
.css({'clear':'left','float':'left','white-space':'nowrap','background-color':'bisque','padding':'2px 8px','font-weight':'600','margin-top':'10px'})
.text(thisText).appendTo(c);
var g = '';
var i = 0;
jQuery.each(this.options.labels, function (k, labelText) {
if (k.substr(0, 7) !== 'fabrik_' && k !== '____form_heading') {
var newg = k.split('___')[0];
if (newg !== g) {
g = newg;
jQuery('<h5 />').text(g).appendTo(c);
thisClass = 'opt__' + self.makeSafeForCSS(g);
jQuery('<div />').prop('class',thisClass).css({'clear':'left','font-weight':'600'}).text(g).appendTo(c);
}

labelText = labelText.replace(/<\/?[^>]+(>|jQuery)/g, '');
Expand All @@ -367,8 +483,11 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '

// elements not shown in table
if (this.options.formels.length > 0) {
jQuery('<h5 />').css('clear', 'left')
.text(Joomla.JText._('COM_FABRIK_FORM_FIELDS')).appendTo(c);
thisText = Joomla.JText._('COM_FABRIK_FORM_FIELDS');
thisClass = 'opt__' + self.makeSafeForCSS(thisText);
jQuery('<div />').prop('class',thisClass)
.css({'clear':'left','float':'left','white-space':'nowrap','background-color':'bisque','padding':'2px 8px','font-weight':'600','margin-top':'10px'})
.text(thisText).appendTo(c);
this.options.formels.each(function (el) {
self._csvYesNo('fields[' + el.name + ']', false,
yes, no, el.label).appendTo(c);
Expand Down Expand Up @@ -406,6 +525,7 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '

triggerCSVExport: function (start, opts, fields) {
var self = this;
self.centerCSVWindow(start);
if (start !== 0) {
if (start === -1) {
// not triggered from front end selections
Expand Down Expand Up @@ -469,6 +589,7 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
fconsole(text, error);
},
onComplete: function (res) {
self.centerCSVWindow(start);
if (res.err) {
window.alert(res.err);
Fabrik.Windows.exportcsv.close();
Expand All @@ -481,16 +602,17 @@ define(['jquery', 'fab/fabrik', 'fab/list-toggle', 'fab/list-grouped-toggler', '
} else {
var finalurl = 'index.php?option=com_fabrik&view=list&format=csv&listid=' + self.id +
'&start=' + res.count + '&Itemid=' + self.options.Itemid;
var msg = '<div class="alert alert-success"><h3>' +
Joomla.JText._('COM_FABRIK_CSV_COMPLETE');
var msg = '<div class="alert alert-success" style="padding:10px;margin-bottom:3px"><h3>' + Joomla.JText._('COM_FABRIK_CSV_COMPLETE');
msg += '</h3><p><a class="btn btn-success" href="' + finalurl + '">' +
'<i class="icon-download"></i> ' +
Joomla.JText._('COM_FABRIK_CSV_DOWNLOAD_HERE') + '</a></p></div>';
jQuery('#csvmsg').html(msg);
self.csvWindow.fitToContent(false);
self.csvWindow.center();
document.getElements('input.exportCSVButton').removeProperty('disabled');

jQuery('#csvmsg a.btn-success').mouseup(function () {
jQuery(this).hide();
});

jQuery('#csvmsg a.btn-success').focusout(function () {
Fabrik.Windows.exportcsv.close(true);
});
Expand Down

0 comments on commit 33e9490

Please sign in to comment.