295 lines
7.8 KiB
JavaScript
295 lines
7.8 KiB
JavaScript
/**
|
||
Copyright (c) 2012 Marco Pegoraro, http://movableapp.com/
|
||
|
||
Permission is hereby granted, free of charge, to any person obtaining
|
||
a copy of this software and associated documentation files (the
|
||
"Software"), to deal in the Software without restriction, including
|
||
without limitation the rights to use, copy, modify, merge, publish,
|
||
distribute, sublicense, and/or sell copies of the Software, and to
|
||
permit persons to whom the Software is furnished to do so, subject to
|
||
the following conditions:
|
||
|
||
The above copyright notice and this permission notice shall be
|
||
included in all copies or substantial portions of the Software.
|
||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||
|
||
|
||
WHERE TO FIND MEDIA TABLE:
|
||
https://github.com/thepeg/MediaTable
|
||
http://consulenza-web.com/jquery/MediaTable/
|
||
http://www.consulenza-web.com/2012/01/mediatable-jquery-plugin/
|
||
|
||
**/
|
||
|
||
|
||
/**
|
||
* jtQuery Bacheca
|
||
* Plugin Dimostrativo
|
||
*/
|
||
|
||
;(function($){
|
||
|
||
|
||
/**
|
||
* DOM Initialization Logic
|
||
*/
|
||
|
||
var __loop = function( cfg, i ) {
|
||
|
||
var $this = $(this),
|
||
wdg = $this.data( 'MediaTable' );
|
||
|
||
// Prevent re-initialization of the widget!
|
||
if ( !$.isEmptyObject(wdg) ) return;
|
||
|
||
// Build the widget context.
|
||
wdg = {
|
||
$wrap: $('<div>'), // Refer to the main content of the widget
|
||
$table: $this, // Refer to the MediaTable DOM (TABLE TAG)
|
||
$menu: false, // Refer to the column's toggler menu container
|
||
cfg: cfg, // widget local configuration object
|
||
id: $this.attr('id')
|
||
};
|
||
|
||
// Setup Widget ID if not specified into DOM Table.
|
||
if ( !wdg.id ) {
|
||
wdg.id = 'MediaTable-' + i;
|
||
wdg.$table.attr( 'id', wdg.id );
|
||
}
|
||
|
||
// Activate the MediaTable.
|
||
wdg.$table.addClass('activeMediaTable');
|
||
|
||
// Create the wrapper.
|
||
wdg.$wrap.addClass('mediaTableWrapper');
|
||
|
||
// Place the wrapper near the table and fill with MediaTable.
|
||
wdg.$table.before(wdg.$wrap).appendTo(wdg.$wrap);
|
||
|
||
// Menu initialization logic.
|
||
if ( wdg.cfg.menu ) __initMenu( wdg );
|
||
|
||
// Columns Initialization Loop.
|
||
wdg.$table.find('thead tr:first td').each(function(i){ __thInit.call( this, i, wdg ); });
|
||
|
||
// Save widget context into table DOM.
|
||
wdg.$table.data( 'MediaTable', wdg );
|
||
|
||
}; // EndOf: "__loop()" ###
|
||
|
||
|
||
var __initMenu = function( wdg ) {
|
||
|
||
// Buid menu objects
|
||
wdg.$menu = $('<div />');
|
||
wdg.$menu.$header = $('<a />');
|
||
wdg.$menu.$list = $('<ul />');
|
||
|
||
// Setup menu general properties and append to DOM.
|
||
wdg.$menu
|
||
.addClass('mediaTableMenu')
|
||
.addClass('mediaTableMenuClosed')
|
||
.append(wdg.$menu.$header)
|
||
.append(wdg.$menu.$list);
|
||
|
||
// Add a class to the wrapper to inform about menu presence.
|
||
wdg.$wrap.addClass('mediaTableWrapperWithMenu');
|
||
|
||
// Setup menu title (handler)
|
||
wdg.$menu.$header.text(wdg.cfg.menuTitle);
|
||
wdg.$table.before(wdg.$menu);
|
||
|
||
// Bind screen change events to update checkbox status of displayed fields.
|
||
$(window).bind('orientationchange resize',function(){
|
||
wdg.$menu.find('input').trigger('updateCheck');
|
||
});
|
||
|
||
// Toggle list visibility when clicking the menu title.
|
||
wdg.$menu.$header.bind('click',function(){
|
||
wdg.$menu.toggleClass('mediaTableMenuClosed');
|
||
});
|
||
|
||
wdg.$table.click(function() {
|
||
wdg.$menu.addClass('mediaTableMenuClosed');
|
||
});
|
||
|
||
// Toggle list visibilty when mouse go outside the list itself.
|
||
wdg.$menu.$list.bind('mouseleave',function(e){
|
||
wdg.$menu.toggleClass('mediaTableMenuClosed');
|
||
e.stopPropagation();
|
||
});
|
||
|
||
|
||
|
||
}; // EndOf: "__initMenu()" ###
|
||
|
||
var __thInit = function( i, wdg ) {
|
||
|
||
var $th = $(this),
|
||
id = $th.attr('id'),
|
||
classes = $th.attr('class'),
|
||
th_label = $th.text().trim();
|
||
|
||
// mourlouk: ignore empty column headers
|
||
if (th_label == "") return;
|
||
|
||
// Set up an auto-generated ID for the column.
|
||
// the ID is based upon widget's ID to allow multiple tables into one page.
|
||
if ( !id ) {
|
||
id = wdg.id + '-mediaTableCol-' + i;
|
||
$th.attr( 'id', id );
|
||
}
|
||
|
||
// Add toggle link to the menu.
|
||
if ( wdg.cfg.menu && !$th.is('.persist') ) {
|
||
|
||
var $li = $('<li><input type="checkbox" name="toggle-cols" id="toggle-col-'+wdg.id+'-'+i+'" value="'+id+'" /> <label for="toggle-col-'+wdg.id+'-'+i+'">'+$th.text()+'</label></li>');
|
||
wdg.$menu.$list.append($li);
|
||
|
||
__liInitActions( $th, $li.find('input'), wdg );
|
||
|
||
}
|
||
|
||
// Propagate column's properties to each cell.
|
||
$('thead tr',wdg.$table).not(':first').each(function(){ __trInit.call( this, i, id, classes ); });
|
||
$('tbody tr',wdg.$table).each(function(){ __trInit.call( this, i, id, classes ); });
|
||
|
||
}; // EndOf: "__thInit()" ###
|
||
|
||
|
||
var __trInit = function( i, id, classes ) {
|
||
|
||
var $cell = $(this).find('td,th').eq(i);
|
||
|
||
$cell.attr( 'headers', id );
|
||
|
||
if ( classes ) $cell.addClass(classes);
|
||
|
||
}; // EndOf: "__trInit()" ###
|
||
|
||
|
||
var __liInitActions = function( $th, $checkbox, wdg ) {
|
||
|
||
var change = function() {
|
||
|
||
var val = $checkbox.val(), // this equals the header's ID, i.e. "company"
|
||
cols = wdg.$table.find("#" + val + ", [headers="+ val +"]"); // so we can easily find the matching header (id="company") and cells (headers="company")
|
||
|
||
|
||
if ( $checkbox.is(":checked")) {
|
||
cols.show();
|
||
|
||
} else {
|
||
cols.hide();
|
||
|
||
};
|
||
|
||
};
|
||
|
||
var updateCheck = function() {
|
||
|
||
//if ( $th.css("display") == "table-cell") {
|
||
if ( $th.is(':visible') ) {
|
||
$checkbox.attr("checked", true);
|
||
}
|
||
else {
|
||
$checkbox.attr("checked", false);
|
||
};
|
||
|
||
};
|
||
|
||
$checkbox
|
||
.bind('change', change )
|
||
.bind('updateCheck', updateCheck )
|
||
.trigger( 'updateCheck' );
|
||
|
||
} // EndOf: "__liInitActions()" ###
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/**
|
||
* Widget Destroy Logic
|
||
*/
|
||
|
||
var __destroy = function() {
|
||
|
||
// Get the widget context.
|
||
var wdg = $(this).data( 'MediaTable' );
|
||
if ( !wdg ) return;
|
||
|
||
|
||
// Remove the wrapper from the MediaTable.
|
||
wdg.$wrap.after(wdg.$table).remove();
|
||
|
||
// Remove MediaTable active class so media-query will not work.
|
||
wdg.$table.removeClass('activeMediaTable');
|
||
|
||
|
||
// Remove DOM reference to the widget context.
|
||
wdg.$table.data( 'MediaTable', null );
|
||
|
||
}; // EndOf: "__destroy()" ###
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/**
|
||
* jtQuery Extension
|
||
*/
|
||
$.fn.mediaTable = function() {
|
||
|
||
var cfg = false;
|
||
var $this = $(this);
|
||
|
||
// Default configuration block
|
||
if ( !arguments.length || $.isPlainObject(arguments[0]) ) cfg = $.extend({},{
|
||
|
||
// Teach the widget to create a toggle menu to declare column's visibility
|
||
menu: true,
|
||
menuTitle: $this.attr( 'data-select-label' ),
|
||
|
||
t:'e'},arguments[0]);
|
||
// -- default configuration block --
|
||
|
||
|
||
|
||
// Items initialization loop:
|
||
if ( cfg !== false ) {
|
||
$(this).each(function( i ){ __loop.call( this, cfg, i ); });
|
||
|
||
|
||
|
||
|
||
// Item actions loop - switch throught actions
|
||
} else if ( arguments.length ) switch ( arguments[0] ) {
|
||
|
||
case 'destroy':
|
||
$(this).each(function(){ __destroy.call( this ); });
|
||
break;
|
||
|
||
}
|
||
|
||
|
||
// Mantengo la possibilit<69> di concatenare plugins.
|
||
return this;
|
||
|
||
}; // EndOf: "$.fn.mediaTable()" ###
|
||
|
||
|
||
})( jtQuery );
|
||
|