Added requirejs demo
22
Gruntfile.js
|
@ -22,8 +22,6 @@ module.exports = function (grunt) {
|
||||||
},
|
},
|
||||||
|
|
||||||
qunit: {
|
qunit: {
|
||||||
// files: ['test/**/*.html'],
|
|
||||||
// urls: ['http://localhost:9000/test/test.html']
|
|
||||||
all: {
|
all: {
|
||||||
options: {
|
options: {
|
||||||
urls: getTestFiles(testDir, testHost)
|
urls: getTestFiles(testDir, testHost)
|
||||||
|
@ -46,20 +44,20 @@ module.exports = function (grunt) {
|
||||||
templates: {
|
templates: {
|
||||||
src: ['**'],
|
src: ['**'],
|
||||||
cwd: 'static/templates',
|
cwd: 'static/templates',
|
||||||
dest: 'examples',
|
dest: 'demos',
|
||||||
expand: true
|
expand: true
|
||||||
},
|
},
|
||||||
assets: {
|
assets: {
|
||||||
src: ['**'],
|
src: ['**'],
|
||||||
cwd: 'static/examples-assets',
|
cwd: 'static/demos-assets',
|
||||||
dest: 'examples/assets',
|
dest: 'demos/assets',
|
||||||
expand: true
|
expand: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
'string-replace': {
|
'string-replace': {
|
||||||
examples: {
|
demos: {
|
||||||
files: { 'examples/': 'examples/*.html' },
|
files: { 'demos/': 'demos/*.html' },
|
||||||
options: {
|
options: {
|
||||||
replacements: [
|
replacements: [
|
||||||
{
|
{
|
||||||
|
@ -109,7 +107,7 @@ module.exports = function (grunt) {
|
||||||
},
|
},
|
||||||
templates: {
|
templates: {
|
||||||
files: ['static/templates/**/*', 'static/partials/**/*'],
|
files: ['static/templates/**/*', 'static/partials/**/*'],
|
||||||
tasks: ['build-examples'],
|
tasks: ['build-demos'],
|
||||||
options: {
|
options: {
|
||||||
spawn: false
|
spawn: false
|
||||||
}
|
}
|
||||||
|
@ -156,10 +154,10 @@ module.exports = function (grunt) {
|
||||||
grunt.registerTask('build',
|
grunt.registerTask('build',
|
||||||
['jshint', 'webpack:build', 'copy:dist']);
|
['jshint', 'webpack:build', 'copy:dist']);
|
||||||
|
|
||||||
// Build examples
|
// Build demos
|
||||||
grunt.registerTask('dev-examples', ['build-examples', 'watch:templates']);
|
grunt.registerTask('dev-demos', ['build-demos', 'watch:templates']);
|
||||||
grunt.registerTask('build-examples',
|
grunt.registerTask('build-demos',
|
||||||
['copy:templates', 'copy:assets', 'string-replace:examples']);
|
['copy:templates', 'copy:assets', 'string-replace:demos']);
|
||||||
|
|
||||||
// Transpile with Babel
|
// Transpile with Babel
|
||||||
grunt.registerTask('dev-modules', ['babel', 'copy:dist']);
|
grunt.registerTask('dev-modules', ['babel', 'copy:dist']);
|
||||||
|
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
2645
demos/requirejs-dev.html
Normal file
2243
dist/tablefilter/1-4139a7961dcf632fbba6.js
vendored
7151
dist/tablefilter/tablefilter.js
vendored
9
dist/tablefilter/tf1.js
vendored
Normal file
|
@ -1,193 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>HTML Table Filter Generator</title>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var tf;
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.test{ color: red !important; }
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<p align="right">
|
|
||||||
<input type="button" value="Remove grid" onclick="tf.remove();" />
|
|
||||||
<input type="button" value="Reset grid" onclick="tf.init();" />
|
|
||||||
<input type="button" value="Reset paging"
|
|
||||||
onclick="
|
|
||||||
if( tf.paging ) return;
|
|
||||||
tf.Cpt.paging.addPaging();" >
|
|
||||||
<input type="button" value="Remove paging"
|
|
||||||
onclick="
|
|
||||||
if( !tf.paging ) return;
|
|
||||||
tf.paging = false; //behaviour is removed here
|
|
||||||
tf.Cpt.paging.destroy();
|
|
||||||
tf.filter();" >
|
|
||||||
</p>
|
|
||||||
<div id="test_cont">sss</div>
|
|
||||||
<div style="width: 500px;">
|
|
||||||
<table id="demo" cellpadding="0" cellspacing="0">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>From</th>
|
|
||||||
<th>Destination</th>
|
|
||||||
<th>Road Distance (km)</th>
|
|
||||||
<th>By Air (hrs)</th>
|
|
||||||
<th>By Rail (hrs)</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Sydney</strong></td>
|
|
||||||
<td>Adelaide</td>
|
|
||||||
<td>1412</td>
|
|
||||||
<td>1.4</td>
|
|
||||||
<td>25.3</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Sydney</strong></td>
|
|
||||||
<td>Brisbane</td>
|
|
||||||
<td>982</td>
|
|
||||||
<td>1.5</td>
|
|
||||||
<td>16</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Sydney</strong></td>
|
|
||||||
<td>Canberra</td>
|
|
||||||
<td>286</td>
|
|
||||||
<td>.6</td>
|
|
||||||
<td>4.3</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Sydney</strong></td>
|
|
||||||
<td>Melbourne</td>
|
|
||||||
<td>872</td>
|
|
||||||
<td>1.1</td>
|
|
||||||
<td>10.5</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Adelaide</strong></td>
|
|
||||||
<td>Perth</td>
|
|
||||||
<td>2781</td>
|
|
||||||
<td>3.1</td>
|
|
||||||
<td>38</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Adelaide</strong></td>
|
|
||||||
<td>Alice Springs</td>
|
|
||||||
<td>1533</td>
|
|
||||||
<td>2</td>
|
|
||||||
<td>20.25</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><strong>Adelaide</strong></td>
|
|
||||||
<td>Brisbane</td>
|
|
||||||
<td>2045</td>
|
|
||||||
<td>2.15</td>
|
|
||||||
<td>40</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
|
|
||||||
<!-- <script src="../libs/sortabletable.js"></script> -->
|
|
||||||
<script>
|
|
||||||
requirejs(['../build/tablefilter/tablefilter', '../libs/sortabletable'], function(mod){
|
|
||||||
var TableFilter = mod.TableFilter;
|
|
||||||
tf = new TableFilter("demo", {
|
|
||||||
col_0: 'select',
|
|
||||||
col_2: 'multiple',
|
|
||||||
col_3: 'checklist',
|
|
||||||
base_path: '../build/tablefilter/',
|
|
||||||
loader: false,
|
|
||||||
rows_counter: true,
|
|
||||||
enable_default_theme: false,
|
|
||||||
// slc_filling_method: 'innerhtml',
|
|
||||||
sort: true,
|
|
||||||
sort_config: {
|
|
||||||
path: '../build/tablefilter/extensions/sort/',
|
|
||||||
sort_types: ['string','string','number','number','number']
|
|
||||||
},
|
|
||||||
paging: false,
|
|
||||||
paging_length: 4,
|
|
||||||
// page_selector_type: 'input',
|
|
||||||
//results_per_page: ['Results per page', [2,4,6]],
|
|
||||||
remember_grid_values: true,
|
|
||||||
// remember_page_number: true,
|
|
||||||
// remember_page_length: true,
|
|
||||||
fill_slc_on_demand: false,
|
|
||||||
linked_filters: false,
|
|
||||||
popup_filters: false,
|
|
||||||
alternate_rows: true,
|
|
||||||
highlight_keywords: true,
|
|
||||||
match_case: false,
|
|
||||||
btn_reset: true,
|
|
||||||
status_bar: true,
|
|
||||||
watermark: [null, 'Filter column...', null, null, 'Helo'],
|
|
||||||
selectable: false,
|
|
||||||
editable: false,
|
|
||||||
ezEditTable_config:{
|
|
||||||
default_selection: 'both',
|
|
||||||
loadStylesheet: true
|
|
||||||
},
|
|
||||||
grid_layout: true,
|
|
||||||
grid_width: '600px',
|
|
||||||
// grid_height: '200px',
|
|
||||||
on_before_show_msg: function(tf){
|
|
||||||
// console.log('on_before_show_msg');
|
|
||||||
},
|
|
||||||
|
|
||||||
extensions: [{
|
|
||||||
name: 'advancedGrid',
|
|
||||||
path: '../build/tablefilter/extensions/advancedGrid/',
|
|
||||||
vendor_path: '../libs/ezEditTable/',
|
|
||||||
selectable: true,
|
|
||||||
editable: true,
|
|
||||||
default_selection: 'both',
|
|
||||||
auto_save: false
|
|
||||||
},{
|
|
||||||
/*** Columns Visibility Manager extension load ***/
|
|
||||||
name: 'colsVisibility',
|
|
||||||
path: '../build/tablefilter/extensions/colsVisibility/',
|
|
||||||
description: 'Columns visibility manager',/*
|
|
||||||
initialize: function(o){o.SetColsVisibility();}*/
|
|
||||||
// manager: true,
|
|
||||||
tick_to_hide: true,
|
|
||||||
// headers_table: true,
|
|
||||||
// container_target_id: 'test_cont',
|
|
||||||
// headers_text: ['1','2','3','4','5','6'],
|
|
||||||
btn_target_id: 'test_cont',
|
|
||||||
// btn_text: 'Hola',
|
|
||||||
// btn_html: '<button>Columns</button>',
|
|
||||||
// btn_css_class: 'test',
|
|
||||||
// btn_close_text: 'jj',
|
|
||||||
// btn_close_html: '<button>close</button>',
|
|
||||||
// btn_close_css_class: 'test',
|
|
||||||
// stylesheet: 'hola.css',
|
|
||||||
// cont_css_class: 'test',
|
|
||||||
// checklist_item_css_class: 'test',
|
|
||||||
// at_start: [0,1,2,3,4],
|
|
||||||
// enable_hover: true,
|
|
||||||
enable_tick_all: true
|
|
||||||
// ,
|
|
||||||
// tick_all_text: 'Hola',
|
|
||||||
// text: 'tutu',
|
|
||||||
// on_loaded: function(){ console.log(arguments); },
|
|
||||||
// on_before_open: function(){ console.log('on_before_open', arguments); },
|
|
||||||
// on_after_open: function(){ console.log('on_after_open',arguments); },
|
|
||||||
// on_before_close: function(){ console.log('on_before_close',arguments); },
|
|
||||||
// on_after_close: function(){ console.log('on_after_close',arguments); },
|
|
||||||
// on_before_col_hidden: function(){ console.log('on_before_col_hidden',arguments); },
|
|
||||||
// on_after_col_hidden: function(){ console.log('on_after_col_hidden',arguments); },
|
|
||||||
// on_before_col_displayed: function(){ console.log('on_before_col_displayed',arguments); },
|
|
||||||
// on_after_col_displayed: function(){ console.log('on_after_col_displayed',arguments); }
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
|
|
||||||
tf.init();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<button onclick="javascript:tf.ExtRegistry.colsVisibility.toggleCol(2);">Toggle col 2</button>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -16,7 +16,6 @@ export default class FiltersVisibility{
|
||||||
this.desc = f.description || 'Filters row visibility manager';
|
this.desc = f.description || 'Filters row visibility manager';
|
||||||
|
|
||||||
// Path and image filenames
|
// Path and image filenames
|
||||||
this.path = f.path || tf.stylePath;
|
|
||||||
this.stylesheet = f.stylesheet || 'filtersVisibility.css';
|
this.stylesheet = f.stylesheet || 'filtersVisibility.css';
|
||||||
this.icnExpand = f.expand_icon_name || 'icn_exp.png';
|
this.icnExpand = f.expand_icon_name || 'icn_exp.png';
|
||||||
this.icnCollapse = f.collapse_icon_name || 'icn_clp.png';
|
this.icnCollapse = f.collapse_icon_name || 'icn_clp.png';
|
||||||
|
@ -26,9 +25,9 @@ export default class FiltersVisibility{
|
||||||
//expand/collapse filters btn element
|
//expand/collapse filters btn element
|
||||||
this.btnEl = null;
|
this.btnEl = null;
|
||||||
|
|
||||||
this.icnExpandHtml = '<img src="'+ this.path + this.icnExpand +
|
this.icnExpandHtml = '<img src="'+ tf.stylePath + this.icnExpand +
|
||||||
'" alt="Expand filters" >';
|
'" alt="Expand filters" >';
|
||||||
this.icnCollapseHtml = '<img src="'+ this.path + this.icnCollapse +
|
this.icnCollapseHtml = '<img src="'+ tf.stylePath + this.icnCollapse +
|
||||||
'" alt="Collapse filters" >';
|
'" alt="Collapse filters" >';
|
||||||
this.defaultText = 'Toggle filters';
|
this.defaultText = 'Toggle filters';
|
||||||
|
|
||||||
|
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
62
static/templates/requirejs-dev.html
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>{NAME} v{VERSION} - Development workflow with RequireJs</title>
|
||||||
|
<!-- @import partials/style.html -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>{NAME} v{VERSION}</h1>
|
||||||
|
<h2>Development workflow with RequireJs</h2>
|
||||||
|
<p>
|
||||||
|
To take advantage of a development workflow with RequireJs, you first need
|
||||||
|
to run the <code>grunt dev-modules</code> task.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- @import partials/pre.html -->
|
||||||
|
|
||||||
|
<!-- @import partials/countries-by-continent.html -->
|
||||||
|
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
|
||||||
|
<script data-config>
|
||||||
|
requirejs(
|
||||||
|
['../dist/tablefilter/tablefilter', '../libs/sortabletable'],
|
||||||
|
function(mod){
|
||||||
|
var TableFilter = mod.TableFilter;
|
||||||
|
var tfConfig = {
|
||||||
|
base_path: '../dist/tablefilter/',
|
||||||
|
col_1: 'multiple',
|
||||||
|
col_2: 'checklist',
|
||||||
|
alternate_rows: true,
|
||||||
|
rows_counter: true,
|
||||||
|
enable_default_theme: true,
|
||||||
|
col_widths: [
|
||||||
|
'70px', '170px', '170px',
|
||||||
|
'110px', '90px', '250px'
|
||||||
|
],
|
||||||
|
extensions:[
|
||||||
|
{
|
||||||
|
name: 'sort',
|
||||||
|
path: '../dist/tablefilter/extensions/sort/',
|
||||||
|
types: [
|
||||||
|
'number', 'string', 'string',
|
||||||
|
'US', 'none', 'string'
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
name: 'colsVisibility',
|
||||||
|
path: '../dist/tablefilter/extensions/colsVisibility/'
|
||||||
|
}, {
|
||||||
|
name: 'filtersVisibility',
|
||||||
|
path: '../dist/tablefilter/extensions/filtersVisibility/'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
tf = new TableFilter('demo', tfConfig);
|
||||||
|
tf.init();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- @import partials/pre-inline-script.html -->
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -12,8 +12,8 @@ module.exports = {
|
||||||
publicPath: '/dist/tablefilter/',
|
publicPath: '/dist/tablefilter/',
|
||||||
path: path.join(__dirname, '/dist/tablefilter'),
|
path: path.join(__dirname, '/dist/tablefilter'),
|
||||||
filename: 'tablefilter.js',
|
filename: 'tablefilter.js',
|
||||||
chunkFilename: '[name]-[chunkhash].js',
|
// chunkFilename: '[name]-[chunkhash].js',
|
||||||
// chunkFilename: '[name].js',
|
chunkFilename: 'tf[name].js',
|
||||||
libraryTarget: 'umd'
|
libraryTarget: 'umd'
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
|