tablesorter/js/widgets/widget-view.js
2015-10-30 15:29:13 -05:00

193 lines
4.4 KiB
JavaScript

/* Widget: view (beta) - updated 10/26/2015 (v2.23.6) */
/* By Justin F. Hallett (https://github.com/TheSin-)
* Requires tablesorter v2.8+ and jQuery 1.7+
*/
/*jshint browser:true, jquery:true, unused:false */
/*global jQuery: false */
;(function($) {
'use strict';
var ts = $.tablesorter,
is_hidden = false,
tpos, ttop, tleft,
view = ts.view = {
copyCaption: function(c, wo) {
view.removeCaption(c, wo);
if (c.$table.find('caption').length > 0) {
$(wo.view_caption).text(c.$table.find('caption').text());
}
},
removeCaption: function(c, wo) {
$(wo.view_caption).empty();
},
buildToolBar: function(c, wo) {
view.removeToolBar(c, wo);
view.copyCaption(c, wo);
var $toolbar = $(wo.view_toolbar);
$.each(wo.view_layouts, function(k, v) {
var classes = wo.view_switcher_class;
if (k == wo.view_layout) {
classes += ' active';
}
var $switcher = $('<a>', {
'href': '#',
'class': classes,
'data-view-type': k,
'title': v.title
});
$switcher.append($('<i>', {
'class': v.icon
}));
$toolbar.append($switcher);
});
$toolbar.find('.' + wo.view_switcher_class).on('click', function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
// if currently clicked button has the active class
// then we do nothing!
return false;
} else {
// otherwise we are clicking on the inactive button
// and in the process of switching views!
$toolbar.find('.' + wo.view_switcher_class).removeClass('active');
$(this).addClass('active');
wo.view_layout = $(this).attr('data-view-type');
if (wo.view_layouts[wo.view_layout].raw === true) {
view.remove(c, wo);
view.buildToolBar(c, wo);
} else {
if (is_hidden === false) {
view.hideTable(c, wo);
}
view.buildView(c, wo);
}
}
});
},
removeToolBar: function(c, wo) {
$(wo.view_toolbar).empty();
view.removeCaption(c, wo);
},
buildView: function(c, wo) {
view.removeView(c, wo);
var myview = wo.view_layouts[wo.view_layout];
var $container = $(myview.container, {
'class': wo.view_layout
});
ts.getColumnText(c.$table, 0, function(data) {
var tmpl = myview.tmpl;
$.each($(data.$row).find('td'), function(k, v) {
var attrs = {};
var reg = '{col' + k + '}';
$.each(v.attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
var content = $(v).html();
// Add 2 spans, one is dropped when using .html()
var span = $('<span />').append($('<span/>', attrs).append(content));
tmpl = tmpl.replace(reg, span.html());
});
var $tmpl = $(tmpl);
$.each(data.$row[0].attributes, function(idx, attr) {
if (attr.nodeName == 'class') {
$tmpl.attr(attr.nodeName, $tmpl.attr(attr.nodeName) + ' ' + attr.nodeValue);
} else {
$tmpl.attr(attr.nodeName, attr.nodeValue);
}
});
$container.append($tmpl);
});
$(wo.view_container).append($container);
},
removeView: function(c, wo) {
$(wo.view_container).empty();
},
hideTable: function(c, wo) {
tpos = c.$table.css('position');
ttop = c.$table.css('bottom');
tleft = c.$table.css('left');
c.$table.css({
'position': 'absolute',
'top': '-10000px',
'left': '-10000px'
});
is_hidden = true;
},
init: function(c, wo) {
if (wo.view_layout === false) {
return;
}
if (typeof wo.view_layouts[wo.view_layout] === 'undefined') {
return;
}
if (is_hidden === false) {
view.hideTable(c, wo);
}
$(c.$table).on('tablesorter-ready', function() {
view.buildToolBar(c, wo);
view.buildView(c, wo);
$(c.$table).trigger('viewComplete');
});
},
remove: function(c, wo) {
view.removeToolBar(c, wo);
view.removeView(c, wo);
c.$table.css({
'position': tpos,
'top': ttop,
'left': tleft
});
is_hidden = false;
}
};
ts.addWidget({
id: 'view',
options: {
view_toolbar: '#ts-view-toolbar',
view_container: '#ts-view',
view_caption: '#ts-view-caption',
view_switcher_class: 'ts-view-switcher',
view_layout: false,
view_layouts: {}
},
init: function(table, thisWidget, c, wo) {
view.init(c, wo);
},
remove: function(table, c, wo) {
view.remove(c, wo);
}
});
})(jQuery);