b
This commit is contained in:
mstfyldz
53
enginiptv/panel/plugins/tablednd/.gitignore
vendored
Normal file
53
enginiptv/panel/plugins/tablednd/.gitignore
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
|
||||
|
||||
### JetBrains template
|
||||
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm
|
||||
|
||||
*.iml
|
||||
|
||||
## Directory-based project format:
|
||||
.idea/
|
||||
# if you remove the above rule, at least ignore the following:
|
||||
|
||||
# User-specific stuff:
|
||||
# .idea/workspace.xml
|
||||
# .idea/tasks.xml
|
||||
# .idea/dictionaries
|
||||
|
||||
# Sensitive or high-churn files:
|
||||
# .idea/dataSources.ids
|
||||
# .idea/dataSources.xml
|
||||
# .idea/sqlDataSources.xml
|
||||
# .idea/dynamic.xml
|
||||
# .idea/uiDesigner.xml
|
||||
|
||||
# Gradle:
|
||||
# .idea/gradle.xml
|
||||
# .idea/libraries
|
||||
|
||||
# Mongo Explorer plugin:
|
||||
# .idea/mongoSettings.xml
|
||||
|
||||
## File-based project format:
|
||||
*.ipr
|
||||
*.iws
|
||||
|
||||
## Plugin-specific files:
|
||||
|
||||
# IntelliJ
|
||||
out/
|
||||
|
||||
# mpeltonen/sbt-idea plugin
|
||||
.idea_modules/
|
||||
|
||||
# JIRA plugin
|
||||
atlassian-ide-plugin.xml
|
||||
|
||||
# Crashlytics plugin (for Android Studio and IntelliJ)
|
||||
com_crashlytics_export_strings.xml
|
||||
crashlytics.properties
|
||||
crashlytics-build.properties
|
||||
|
||||
|
||||
|
||||
node_modules
|
||||
3
enginiptv/panel/plugins/tablednd/.hound.yml
Normal file
3
enginiptv/panel/plugins/tablednd/.hound.yml
Normal file
@@ -0,0 +1,3 @@
|
||||
jshint:
|
||||
config_file: .jshintrc
|
||||
ignore_file: .jshintignore
|
||||
6
enginiptv/panel/plugins/tablednd/.jshintignore
Normal file
6
enginiptv/panel/plugins/tablednd/.jshintignore
Normal file
@@ -0,0 +1,6 @@
|
||||
Gruntfile.js
|
||||
node_modules/**/*.js
|
||||
**/*.min.js
|
||||
**/*.rc1.js
|
||||
|
||||
|
||||
11
enginiptv/panel/plugins/tablednd/.jshintrc
Normal file
11
enginiptv/panel/plugins/tablednd/.jshintrc
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"laxbreak": true,
|
||||
"expr": true,
|
||||
|
||||
"globals": {
|
||||
"jQuery": true,
|
||||
"console": true,
|
||||
"module": true,
|
||||
"document": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
organization=isocra
|
||||
projectKey=TableDnD
|
||||
serverUrl=https://sonarcloud.io
|
||||
serverVersion=7.0.0.35052
|
||||
dashboardUrl=https://sonarcloud.io/dashboard/index/TableDnD
|
||||
ceTaskId=AWCoUo8vzhfPH6zNRdlG
|
||||
ceTaskUrl=https://sonarcloud.io/api/ce/task?id=AWCoUo8vzhfPH6zNRdlG
|
||||
37
enginiptv/panel/plugins/tablednd/Gruntfile.js
Normal file
37
enginiptv/panel/plugins/tablednd/Gruntfile.js
Normal file
@@ -0,0 +1,37 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('bower.json'),
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '/*! jquery.tablednd.js <%= grunt.template.today("dd-mm-yyyy") %> */\n'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/jquery.tablednd.min.js': ['js/jquery.tablednd.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
all: {
|
||||
options: {
|
||||
reporterOutput: "",
|
||||
jshintrc: true
|
||||
},
|
||||
src: 'js/*.js'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
|
||||
grunt.registerTask('copyToDist', function() {
|
||||
grunt.file.copy('js/jquery.tablednd.js', 'dist/jquery.tablednd.js');
|
||||
});
|
||||
|
||||
grunt.registerTask('test', ['jshint']);
|
||||
|
||||
grunt.registerTask('default', ['jshint', 'copyToDist', 'uglify']);
|
||||
|
||||
};
|
||||
22
enginiptv/panel/plugins/tablednd/MIT-LICENSE.txt
Normal file
22
enginiptv/panel/plugins/tablednd/MIT-LICENSE.txt
Normal file
@@ -0,0 +1,22 @@
|
||||
Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
Copyright 2012 Nick Lombard - nickl- and other contributors
|
||||
https://github.com/isocra/TableDnD
|
||||
|
||||
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.
|
||||
60
enginiptv/panel/plugins/tablednd/README.md
Normal file
60
enginiptv/panel/plugins/tablednd/README.md
Normal file
@@ -0,0 +1,60 @@
|
||||
# TableDnD
|
||||
[](https://badge.fury.io/js/tablednd)
|
||||
[](https://cdnjs.com/libraries/TableDnD)
|
||||
[](https://www.jsdelivr.com/package/gh/isocra/TableDnD)
|
||||
[](https://houndci.com)
|
||||
|
||||
## Installation
|
||||
|
||||
TableDnD is easy to install:
|
||||
```
|
||||
npm install --save tablednd
|
||||
```
|
||||
or
|
||||
```
|
||||
yarn add tablednd
|
||||
```
|
||||
or
|
||||
```
|
||||
bower install https://github.com/isocra/TableDnD.git
|
||||
```
|
||||
Alternatively you can simply reference from CDNJS:
|
||||
```html
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
|
||||
```
|
||||
or
|
||||
```html
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js" integrity="sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn7A=" crossorigin="anonymous"></script>
|
||||
```
|
||||
You'll also need to include [jQuery](https://jquery.com) before you include this plugin (so that jQuery is defined).
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
Let's create a simple table. The HTML for the table is very straight forward (no Javascript, pure HTML, we haven't added `thead` or `tbody` elements, but it works fine with these too):
|
||||
|
||||
```html
|
||||
<table id="table-1" cellspacing="0" cellpadding="2">
|
||||
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
```
|
||||
To add in the "draggability" all we need to do is add a line to the `$(document).ready(...)` function as follows:
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Initialise the table
|
||||
$("#table-1").tableDnD();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
Basically we get the table element and call `tableDnD`. If you try this, you'll see that the rows are now draggable.
|
||||
|
||||
In the example above we're not setting any parameters at all so we get the default settings. There are a number of parameters you can set in order to control the look and feel of the table and also to add custom behaviour on drag or on drop. The parameters are specified as a map in the usual way and are described the [full documentation](http://isocra.github.io/TableDnD):
|
||||
|
||||
You can also play and experiment with TableDnD using this [jsFiddle](http://jsfiddle.net/DenisHo/dxpLrcd9/embedded/result/). Here you get the documentation, plus live examples.
|
||||
@@ -0,0 +1,30 @@
|
||||
const $ = require('jquery')
|
||||
window.jQuery = $;
|
||||
const tableDnD = require('../js/jquery.tablednd');
|
||||
|
||||
beforeEach(function() {
|
||||
document.body.innerHTML =
|
||||
'<table id="table1">' +
|
||||
' <thead>' +
|
||||
' <tr><th>Col1</th></tr>' +
|
||||
' </thead>' +
|
||||
' <tbody>' +
|
||||
' <tr id="row1"><td>Row1</td></tr>' +
|
||||
' <tr id="row2"><td>Row2</td></tr>' +
|
||||
' <tr id="row3"><td>Row3</td></tr>' +
|
||||
'</tbody>';
|
||||
});
|
||||
|
||||
test('Creates a TableDnD table', function() {
|
||||
var $table = $('#table1');
|
||||
var table = $table.tableDnD();
|
||||
expect(table).not.toBeUndefined();
|
||||
});
|
||||
|
||||
test('Simulate drag and drop', function() {
|
||||
var $table = $('#table1');
|
||||
var table = $table.tableDnD();
|
||||
var $row = $('#row1');
|
||||
TestUtils.Simulate.dragStart($row, {dataTransfer: null});
|
||||
|
||||
});
|
||||
14
enginiptv/panel/plugins/tablednd/bower.json
Normal file
14
enginiptv/panel/plugins/tablednd/bower.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "TableDnD",
|
||||
"version": "0.9.1",
|
||||
"main": [
|
||||
"./js/jquery.tablednd.js"
|
||||
],
|
||||
"ignore": [
|
||||
"LICENCE", "README.md"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">= 1.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/isocra/TableDnD"
|
||||
}
|
||||
675
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.0.9.2.js
vendored
Normal file
675
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.0.9.2.js
vendored
Normal file
@@ -0,0 +1,675 @@
|
||||
/**
|
||||
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||
* You can set up various options to control how the system will work
|
||||
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
* Licensed like jQuery, see http://docs.jquery.com/License.
|
||||
*
|
||||
* Configuration options:
|
||||
*
|
||||
* onDragStyle
|
||||
* This is the style that is assigned to the row during drag. There are limitations to the styles that can be
|
||||
* associated with a row (such as you can't assign a border--well you can, but it won't be
|
||||
* displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
|
||||
* a map (as used in the jQuery css(...) function).
|
||||
* onDropStyle
|
||||
* This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
|
||||
* to what you can do. Also this replaces the original style, so again consider using onDragClass which
|
||||
* is simply added and then removed on drop.
|
||||
* onDragClass
|
||||
* This class is added for the duration of the drag and then removed when the row is dropped. It is more
|
||||
* flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
|
||||
* is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
|
||||
* stylesheet.
|
||||
* onDrop
|
||||
* Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
|
||||
* and the row that was dropped. You can work out the new order of the rows by using
|
||||
* table.rows.
|
||||
* onDragStart
|
||||
* Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
|
||||
* table and the row which the user has started to drag.
|
||||
* onDragStop
|
||||
* Pass a function that will be called when the user stops dragging regardless of if the rows have been
|
||||
* rearranged. The function takes 2 parameters: the table and the row which the user was dragging.
|
||||
* onAllowDrop
|
||||
* Pass a function that will be called as a row is over another row. If the function returns true, allow
|
||||
* dropping on that row, otherwise not. The function takes 2 parameters: the dragged row and the row under
|
||||
* the cursor. It returns a boolean: true allows the drop, false doesn't allow it.
|
||||
* scrollAmount
|
||||
* This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
|
||||
* window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
|
||||
* FF3 beta
|
||||
* dragHandle
|
||||
* This is a jQuery mach string for one or more cells in each row that is draggable. If you
|
||||
* specify this, then you are responsible for setting cursor: move in the CSS and only these cells
|
||||
* will have the drag behaviour. If you do not specify a dragHandle, then you get the old behaviour where
|
||||
* the whole row is draggable.
|
||||
*
|
||||
* Other ways to control behaviour:
|
||||
*
|
||||
* Add class="nodrop" to any rows for which you don't want to allow dropping, and class="nodrag" to any rows
|
||||
* that you don't want to be draggable.
|
||||
*
|
||||
* Inside the onDrop method you can also call $.tableDnD.serialize() this returns a string of the form
|
||||
* <tableID>[]=<rowID1>&<tableID>[]=<rowID2> so that you can send this back to the server. The table must have
|
||||
* an ID as must all the rows.
|
||||
*
|
||||
* Other methods:
|
||||
*
|
||||
* $("...").tableDnDUpdate()
|
||||
* Will update all the matching tables, that is it will reapply the mousedown method to the rows (or handle cells).
|
||||
* This is useful if you have updated the table rows using Ajax and you want to make the table draggable again.
|
||||
* The table maintains the original configuration (so you don't have to specify it again).
|
||||
*
|
||||
* $("...").tableDnDSerialize()
|
||||
* Will serialize and return the serialized string as above, but for each of the matching tables--so it can be
|
||||
* called from anywhere and isn't dependent on the currentTable being set up correctly before calling
|
||||
*
|
||||
* Known problems:
|
||||
* - Auto-scoll has some problems with IE7 (it scrolls even when it shouldn't), work-around: set scrollAmount to 0
|
||||
*
|
||||
* Version 0.2: 2008-02-20 First public version
|
||||
* Version 0.3: 2008-02-07 Added onDragStart option
|
||||
* Made the scroll amount configurable (default is 5 as before)
|
||||
* Version 0.4: 2008-03-15 Changed the noDrag/noDrop attributes to nodrag/nodrop classes
|
||||
* Added onAllowDrop to control dropping
|
||||
* Fixed a bug which meant that you couldn't set the scroll amount in both directions
|
||||
* Added serialize method
|
||||
* Version 0.5: 2008-05-16 Changed so that if you specify a dragHandle class it doesn't make the whole row
|
||||
* draggable
|
||||
* Improved the serialize method to use a default (and settable) regular expression.
|
||||
* Added tableDnDupate() and tableDnDSerialize() to be called when you are outside the table
|
||||
* Version 0.6: 2011-12-02 Added support for touch devices
|
||||
* Version 0.7 2012-04-09 Now works with jQuery 1.7 and supports touch, tidied up tabs and spaces
|
||||
*/
|
||||
!function ($, window, document, undefined) {
|
||||
// Determine if this is a touch device
|
||||
var hasTouch = 'ontouchstart' in document.documentElement,
|
||||
startEvent = 'touchstart mousedown',
|
||||
moveEvent = 'touchmove mousemove',
|
||||
endEvent = 'touchend mouseup';
|
||||
|
||||
$(document).ready(function () {
|
||||
function parseStyle(css) {
|
||||
var objMap = {},
|
||||
parts = css.match(/([^;:]+)/g) || [];
|
||||
while (parts.length)
|
||||
objMap[parts.shift()] = parts.shift().trim();
|
||||
|
||||
return objMap;
|
||||
}
|
||||
$('table').each(function () {
|
||||
if ($(this).data('table') == 'dnd') {
|
||||
|
||||
$(this).tableDnD({
|
||||
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||
onDragClass: $(this).data('ondragclass') == undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||
onDragStop: $(this).data('ondragstop') && new Function('table', 'row' ,$(this).data('ondragstop')),
|
||||
scrollAmount: $(this).data('scrollamount') || 5,
|
||||
sensitivity: $(this).data('sensitivity') || 10,
|
||||
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||
serializeParamName: $(this).data('serializeparamname') || false,
|
||||
dragHandle: $(this).data('draghandle') || null
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.tableDnD = {
|
||||
/** Keep hold of the current table being dragged */
|
||||
currentTable: null,
|
||||
/** Keep hold of the current drag object if any */
|
||||
dragObject: null,
|
||||
/** The current mouse offset */
|
||||
mouseOffset: null,
|
||||
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||
oldX: 0,
|
||||
oldY: 0,
|
||||
|
||||
/** Actually build the structure */
|
||||
build: function(options) {
|
||||
// Set up the defaults if any
|
||||
|
||||
this.each(function() {
|
||||
// This is bound to each matching table, set up the defaults and override with user options
|
||||
this.tableDnDConfig = $.extend({
|
||||
onDragStyle: null,
|
||||
onDropStyle: null,
|
||||
// Add in the default class for whileDragging
|
||||
onDragClass: "tDnD_whileDrag",
|
||||
onDrop: null,
|
||||
onDragStart: null,
|
||||
onDragStop: null,
|
||||
scrollAmount: 5,
|
||||
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||
sensitivity: 10,
|
||||
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||
hierarchyLevel: 0,
|
||||
/** The html artifact to prepend the first cell with as indentation */
|
||||
indentArtifact: '<div class="indent"> </div>',
|
||||
/** Automatically adjust width of first cell */
|
||||
autoWidthAdjust: true,
|
||||
/** Automatic clean-up to ensure relationship integrity */
|
||||
autoCleanRelations: true,
|
||||
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||
jsonPretifySeparator: '\t',
|
||||
/** The regular expression to use to trim row IDs */
|
||||
serializeRegexp: /[^\-]*$/,
|
||||
/** If you want to specify another parameter name instead of the table ID */
|
||||
serializeParamName: false,
|
||||
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||
dragHandle: null
|
||||
}, options || {});
|
||||
|
||||
// Now make the rows draggable
|
||||
$.tableDnD.makeDraggable(this);
|
||||
// Prepare hierarchy support
|
||||
this.tableDnDConfig.hierarchyLevel
|
||||
&& $.tableDnD.makeIndented(this);
|
||||
});
|
||||
|
||||
// Don't break the chain
|
||||
return this;
|
||||
},
|
||||
makeIndented: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
rows = table.rows,
|
||||
firstCell = $(rows).first().find('td:first')[0],
|
||||
indentLevel = 0,
|
||||
cellWidth = 0,
|
||||
longestCell,
|
||||
tableStyle;
|
||||
|
||||
if ($(table).hasClass('indtd'))
|
||||
return null;
|
||||
|
||||
tableStyle = $(table).addClass('indtd').attr('style');
|
||||
$(table).css({whiteSpace: "nowrap"});
|
||||
|
||||
for (var w = 0; w < rows.length; w++) {
|
||||
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||
longestCell = w;
|
||||
}
|
||||
}
|
||||
$(firstCell).css({width: 'auto'});
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||
tableStyle && $(table).css(tableStyle);
|
||||
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||
|
||||
config.hierarchyLevel
|
||||
&& $(rows).each(function () {
|
||||
indentLevel = $(this).data('level') || 0;
|
||||
indentLevel <= config.hierarchyLevel
|
||||
&& $(this).data('level', indentLevel)
|
||||
|| $(this).data('level', 0);
|
||||
for (var i = 0; i < $(this).data('level'); i++)
|
||||
$(this).find('td:first').prepend(config.indentArtifact);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||
makeDraggable: function(table) {
|
||||
var config = table.tableDnDConfig;
|
||||
|
||||
config.dragHandle
|
||||
// We only need to add the event to the specified cells
|
||||
&& $(config.dragHandle, table).each(function() {
|
||||
// The cell is bound to "this"
|
||||
$(this).bind(startEvent, function(e) {
|
||||
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||
return false;
|
||||
});
|
||||
})
|
||||
// For backwards compatibility, we add the event to the whole row
|
||||
// get all the rows as a wrapped set
|
||||
|| $(table.rows).each(function() {
|
||||
// Iterate through each row, the row is bound to "this"
|
||||
if (! $(this).hasClass("nodrag")) {
|
||||
$(this).bind(startEvent, function(e) {
|
||||
if (e.target.tagName == "TD") {
|
||||
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||
return false;
|
||||
}
|
||||
}).css("cursor", "move"); // Store the tableDnD object
|
||||
} else {
|
||||
$(this).css("cursor", ""); // Remove the cursor if we don't have the nodrag class
|
||||
}
|
||||
});
|
||||
},
|
||||
currentOrder: function() {
|
||||
var rows = this.currentTable.rows;
|
||||
return $.map(rows, function (val) {
|
||||
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||
}).join('');
|
||||
},
|
||||
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||
this.dragObject = dragObject;
|
||||
this.currentTable = table;
|
||||
this.mouseOffset = this.getMouseOffset(target, e);
|
||||
this.originalOrder = this.currentOrder();
|
||||
|
||||
// Now we need to capture the mouse up and mouse move event
|
||||
// We can use bind so that we don't interfere with other event handlers
|
||||
$(document)
|
||||
.bind(moveEvent, this.mousemove)
|
||||
.bind(endEvent, this.mouseup);
|
||||
|
||||
// Call the onDragStart method if there is one
|
||||
config.onDragStart
|
||||
&& config.onDragStart(table, target);
|
||||
},
|
||||
updateTables: function() {
|
||||
this.each(function() {
|
||||
// this is now bound to each matching table
|
||||
if (this.tableDnDConfig)
|
||||
$.tableDnD.makeDraggable(this);
|
||||
});
|
||||
},
|
||||
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||
mouseCoords: function(e) {
|
||||
if (e.originalEvent.changedTouches)
|
||||
return {
|
||||
x: e.originalEvent.changedTouches[0].clientX,
|
||||
y: e.originalEvent.changedTouches[0].clientY
|
||||
};
|
||||
|
||||
if(e.pageX || e.pageY)
|
||||
return {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
|
||||
return {
|
||||
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||
};
|
||||
},
|
||||
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||
To do this we need the element's position and the mouse position */
|
||||
getMouseOffset: function(target, e) {
|
||||
var mousePos,
|
||||
docPos;
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
docPos = this.getPosition(target);
|
||||
mousePos = this.mouseCoords(e);
|
||||
|
||||
return {
|
||||
x: mousePos.x - docPos.x,
|
||||
y: mousePos.y - docPos.y
|
||||
};
|
||||
},
|
||||
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||
getPosition: function(element) {
|
||||
var left = 0,
|
||||
top = 0;
|
||||
|
||||
// Safari fix -- thanks to Luis Chato for this!
|
||||
// Safari 2 doesn't correctly grab the offsetTop of a table row
|
||||
// this is detailed here:
|
||||
// http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
|
||||
// the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
|
||||
// note that firefox will return a text node as a first child, so designing a more thorough
|
||||
// solution may need to take that into account, for now this seems to work in firefox, safari, ie
|
||||
if (element.offsetHeight == 0)
|
||||
element = element.firstChild; // a table cell
|
||||
|
||||
while (element.offsetParent) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
},
|
||||
autoScroll: function (mousePos) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
yOffset = window.pageYOffset,
|
||||
windowHeight = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: document.body.clientHeight;
|
||||
|
||||
// Windows version
|
||||
// yOffset=document.body.scrollTop;
|
||||
if (document.all)
|
||||
if (typeof document.compatMode != 'undefined'
|
||||
&& document.compatMode != 'BackCompat')
|
||||
yOffset = document.documentElement.scrollTop;
|
||||
else if (typeof document.body != 'undefined')
|
||||
yOffset = document.body.scrollTop;
|
||||
|
||||
mousePos.y - yOffset < config.scrollAmount
|
||||
&& window.scrollBy(0, - config.scrollAmount)
|
||||
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||
&& window.scrollBy(0, config.scrollAmount);
|
||||
|
||||
},
|
||||
moveVerticle: function (moving, currentRow) {
|
||||
|
||||
if (0 != moving.vertical
|
||||
// If we're over a row then move the dragged row to there so that the user sees the
|
||||
// effect dynamically
|
||||
&& currentRow
|
||||
&& this.dragObject != currentRow
|
||||
&& this.dragObject.parentNode == currentRow.parentNode)
|
||||
0 > moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||
|| 0 < moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||
|
||||
},
|
||||
moveHorizontal: function (moving, currentRow) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
currentLevel;
|
||||
|
||||
if (!config.hierarchyLevel
|
||||
|| 0 == moving.horizontal
|
||||
// We only care if moving left or right on the current row
|
||||
|| !currentRow
|
||||
|| this.dragObject != currentRow)
|
||||
return null;
|
||||
|
||||
currentLevel = $(currentRow).data('level');
|
||||
|
||||
0 < moving.horizontal
|
||||
&& currentLevel > 0
|
||||
&& $(currentRow).find('td:first').children(':first').remove()
|
||||
&& $(currentRow).data('level', --currentLevel);
|
||||
|
||||
0 > moving.horizontal
|
||||
&& currentLevel < config.hierarchyLevel
|
||||
&& $(currentRow).prev().data('level') >= currentLevel
|
||||
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||
&& $(currentRow).data('level', ++currentLevel);
|
||||
|
||||
},
|
||||
mousemove: function(e) {
|
||||
var dragObj = $($.tableDnD.dragObject),
|
||||
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||
currentRow,
|
||||
mousePos,
|
||||
moving,
|
||||
x,
|
||||
y;
|
||||
|
||||
e && e.preventDefault();
|
||||
|
||||
if (!$.tableDnD.dragObject)
|
||||
return false;
|
||||
|
||||
// prevent touch device screen scrolling
|
||||
e.type == 'touchmove'
|
||||
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||
|
||||
// update the style to show we're dragging
|
||||
config.onDragClass
|
||||
&& dragObj.addClass(config.onDragClass)
|
||||
|| dragObj.css(config.onDragStyle);
|
||||
|
||||
mousePos = $.tableDnD.mouseCoords(e);
|
||||
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||
|
||||
// auto scroll the window
|
||||
$.tableDnD.autoScroll(mousePos);
|
||||
|
||||
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||
moving = $.tableDnD.findDragDirection(x, y);
|
||||
|
||||
$.tableDnD.moveVerticle(moving, currentRow);
|
||||
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||
|
||||
return false;
|
||||
},
|
||||
findDragDirection: function (x,y) {
|
||||
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||
oldX = this.oldX,
|
||||
oldY = this.oldY,
|
||||
xMin = oldX - sensitivity,
|
||||
xMax = oldX + sensitivity,
|
||||
yMin = oldY - sensitivity,
|
||||
yMax = oldY + sensitivity,
|
||||
moving = {
|
||||
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||
};
|
||||
|
||||
// update the old value
|
||||
if (moving.horizontal != 0)
|
||||
this.oldX = x;
|
||||
if (moving.vertical != 0)
|
||||
this.oldY = y;
|
||||
|
||||
return moving;
|
||||
},
|
||||
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||
findDropTargetRow: function(draggedRow, y) {
|
||||
var rowHeight = 0,
|
||||
rows = this.currentTable.rows,
|
||||
config = this.currentTable.tableDnDConfig,
|
||||
rowY = 0,
|
||||
row = null;
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
rowY = this.getPosition(row).y;
|
||||
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||
if (row.offsetHeight == 0) {
|
||||
rowY = this.getPosition(row.firstChild).y;
|
||||
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||
}
|
||||
// Because we always have to insert before, we need to offset the height a bit
|
||||
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||
// that's the row we're over
|
||||
// If it's the same as the current row, ignore it
|
||||
if (draggedRow.is(row)
|
||||
|| (config.onAllowDrop
|
||||
&& !config.onAllowDrop(draggedRow, row))
|
||||
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||
|| $(row).hasClass("nodrop"))
|
||||
return null;
|
||||
else
|
||||
return row;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
processMouseup: function() {
|
||||
if (!this.currentTable || !this.dragObject)
|
||||
return null;
|
||||
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
droppedRow = this.dragObject,
|
||||
parentLevel = 0,
|
||||
myLevel = 0;
|
||||
|
||||
// Unbind the event handlers
|
||||
$(document)
|
||||
.unbind(moveEvent, this.mousemove)
|
||||
.unbind(endEvent, this.mouseup);
|
||||
|
||||
config.hierarchyLevel
|
||||
&& config.autoCleanRelations
|
||||
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||
myLevel = $(this).parents('tr:first').data('level');
|
||||
myLevel
|
||||
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||
&& $(this).remove();
|
||||
})
|
||||
&& config.hierarchyLevel > 1
|
||||
&& $(this.currentTable.rows).each(function () {
|
||||
myLevel = $(this).data('level');
|
||||
if (myLevel > 1) {
|
||||
parentLevel = $(this).prev().data('level');
|
||||
while (myLevel > parentLevel + 1) {
|
||||
$(this).find('td:first').children(':first').remove();
|
||||
$(this).data('level', --myLevel);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we have a dragObject, then we need to release it,
|
||||
// The row will already have been moved to the right place so we just reset stuff
|
||||
config.onDragClass
|
||||
&& $(droppedRow).removeClass(config.onDragClass)
|
||||
|| $(droppedRow).css(config.onDropStyle);
|
||||
|
||||
this.dragObject = null;
|
||||
// Call the onDrop method if there is one
|
||||
config.onDrop
|
||||
&& this.originalOrder != this.currentOrder()
|
||||
&& $(droppedRow).hide().fadeIn('fast')
|
||||
&& config.onDrop(this.currentTable, droppedRow);
|
||||
|
||||
// Call the onDragStop method if there is one
|
||||
config.onDragStop
|
||||
&& config.onDragStop(this.currentTable, droppedRow);
|
||||
|
||||
this.currentTable = null; // let go of the table too
|
||||
},
|
||||
mouseup: function(e) {
|
||||
e && e.preventDefault();
|
||||
$.tableDnD.processMouseup();
|
||||
return false;
|
||||
},
|
||||
jsonize: function(pretify) {
|
||||
var table = this.currentTable;
|
||||
if (pretify)
|
||||
return JSON.stringify(
|
||||
this.tableData(table),
|
||||
null,
|
||||
table.tableDnDConfig.jsonPretifySeparator
|
||||
);
|
||||
return JSON.stringify(this.tableData(table));
|
||||
},
|
||||
serialize: function() {
|
||||
return $.param(this.tableData(this.currentTable));
|
||||
},
|
||||
serializeTable: function(table) {
|
||||
var result = "";
|
||||
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||
var rows = table.rows;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
if (result.length > 0) result += "&";
|
||||
var rowId = rows[i].id;
|
||||
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||
result += paramName + '[]=' + rowId;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
serializeTables: function() {
|
||||
var result = [];
|
||||
$('table').each(function() {
|
||||
this.id && result.push($.param($.tableDnD.tableData(this)));
|
||||
});
|
||||
return result.join('&');
|
||||
},
|
||||
tableData: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
previousIDs = [],
|
||||
currentLevel = 0,
|
||||
indentLevel = 0,
|
||||
rowID = null,
|
||||
data = {},
|
||||
getSerializeRegexp,
|
||||
paramName,
|
||||
currentID,
|
||||
rows;
|
||||
|
||||
if (!table)
|
||||
table = this.currentTable;
|
||||
if (!table || !table.rows || !table.rows.length)
|
||||
return {error: { code: 500, message: "Not a valid table."}};
|
||||
if (!table.id && !config.serializeParamName)
|
||||
return {error: { code: 500, message: "No serializable unique id provided."}};
|
||||
|
||||
rows = config.autoCleanRelations
|
||||
&& table.rows
|
||||
|| $.makeArray(table.rows);
|
||||
paramName = config.serializeParamName || table.id;
|
||||
currentID = paramName;
|
||||
|
||||
getSerializeRegexp = function (rowId) {
|
||||
if (rowId && config && config.serializeRegexp)
|
||||
return rowId.match(config.serializeRegexp)[0];
|
||||
return rowId;
|
||||
};
|
||||
|
||||
data[currentID] = [];
|
||||
!config.autoCleanRelations
|
||||
&& $(rows[0]).data('level')
|
||||
&& rows.unshift({id: 'undefined'});
|
||||
|
||||
|
||||
|
||||
for (var i=0; i < rows.length; i++) {
|
||||
if (config.hierarchyLevel) {
|
||||
indentLevel = $(rows[i]).data('level') || 0;
|
||||
if (indentLevel == 0) {
|
||||
currentID = paramName;
|
||||
previousIDs = [];
|
||||
}
|
||||
else if (indentLevel > currentLevel) {
|
||||
previousIDs.push([currentID, currentLevel]);
|
||||
currentID = getSerializeRegexp(rows[i-1].id);
|
||||
}
|
||||
else if (indentLevel < currentLevel) {
|
||||
for (var h = 0; h < previousIDs.length; h++) {
|
||||
if (previousIDs[h][1] == indentLevel)
|
||||
currentID = previousIDs[h][0];
|
||||
if (previousIDs[h][1] >= currentLevel)
|
||||
previousIDs[h][1] = 0;
|
||||
}
|
||||
}
|
||||
currentLevel = indentLevel;
|
||||
|
||||
if (!$.isArray(data[currentID]))
|
||||
data[currentID] = [];
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
else {
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
jQuery.fn.extend(
|
||||
{
|
||||
tableDnD : $.tableDnD.build,
|
||||
tableDnDUpdate : $.tableDnD.updateTables,
|
||||
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||
}
|
||||
);
|
||||
|
||||
}(jQuery, window, window.document);
|
||||
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.0.9.2.min.js
vendored
Normal file
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.0.9.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
601
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.3.js
vendored
Normal file
601
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.3.js
vendored
Normal file
@@ -0,0 +1,601 @@
|
||||
/**
|
||||
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||
* You can set up various options to control how the system will work
|
||||
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
* License: MIT.
|
||||
* See https://github.com/isocra/TableDnD
|
||||
*/
|
||||
|
||||
/*jshint -W054 */
|
||||
|
||||
!function ($, window, document, undefined) {
|
||||
|
||||
var startEvent = 'touchstart mousedown',
|
||||
moveEvent = 'touchmove mousemove',
|
||||
endEvent = 'touchend mouseup';
|
||||
|
||||
$(document).ready(function () {
|
||||
function parseStyle(css) {
|
||||
var objMap = {},
|
||||
parts = css.match(/([^;:]+)/g) || [];
|
||||
while (parts.length)
|
||||
objMap[parts.shift()] = parts.shift().trim();
|
||||
|
||||
return objMap;
|
||||
}
|
||||
$('table').each(function () {
|
||||
if ($(this).data('table') === 'dnd') {
|
||||
|
||||
$(this).tableDnD({
|
||||
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||
onDragClass: $(this).data('ondragclass') === undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||
onDragStop: $(this).data('ondragstop') && new Function('table', 'row' ,$(this).data('ondragstop')),
|
||||
scrollAmount: $(this).data('scrollamount') || 5,
|
||||
sensitivity: $(this).data('sensitivity') || 10,
|
||||
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||
serializeParamName: $(this).data('serializeparamname') || false,
|
||||
dragHandle: $(this).data('draghandle') || null
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.tableDnD = {
|
||||
/** Keep hold of the current table being dragged */
|
||||
currentTable: null,
|
||||
/** Keep hold of the current drag object if any */
|
||||
dragObject: null,
|
||||
/** The current mouse offset */
|
||||
mouseOffset: null,
|
||||
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||
oldX: 0,
|
||||
oldY: 0,
|
||||
|
||||
/** Actually build the structure */
|
||||
build: function(options) {
|
||||
// Set up the defaults if any
|
||||
|
||||
this.each(function() {
|
||||
// This is bound to each matching table, set up the defaults and override with user options
|
||||
this.tableDnDConfig = $.extend({
|
||||
onDragStyle: null,
|
||||
onDropStyle: null,
|
||||
// Add in the default class for whileDragging
|
||||
onDragClass: "tDnD_whileDrag",
|
||||
onDrop: null,
|
||||
onDragStart: null,
|
||||
onDragStop: null,
|
||||
scrollAmount: 5,
|
||||
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||
sensitivity: 10,
|
||||
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||
hierarchyLevel: 0,
|
||||
/** The html artifact to prepend the first cell with as indentation */
|
||||
indentArtifact: '<div class="indent"> </div>',
|
||||
/** Automatically adjust width of first cell */
|
||||
autoWidthAdjust: true,
|
||||
/** Automatic clean-up to ensure relationship integrity */
|
||||
autoCleanRelations: true,
|
||||
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||
jsonPretifySeparator: '\t',
|
||||
/** The regular expression to use to trim row IDs */
|
||||
serializeRegexp: /[^\-]*$/,
|
||||
/** If you want to specify another parameter name instead of the table ID */
|
||||
serializeParamName: false,
|
||||
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||
dragHandle: null
|
||||
}, options || {});
|
||||
|
||||
// Now make the rows draggable
|
||||
$.tableDnD.makeDraggable(this);
|
||||
// Prepare hierarchy support
|
||||
this.tableDnDConfig.hierarchyLevel
|
||||
&& $.tableDnD.makeIndented(this);
|
||||
});
|
||||
|
||||
// Don't break the chain
|
||||
return this;
|
||||
},
|
||||
makeIndented: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
rows = table.rows,
|
||||
firstCell = $(rows).first().find('td:first')[0],
|
||||
indentLevel = 0,
|
||||
cellWidth = 0,
|
||||
longestCell,
|
||||
tableStyle;
|
||||
|
||||
if ($(table).hasClass('indtd'))
|
||||
return null;
|
||||
|
||||
tableStyle = $(table).addClass('indtd').attr('style');
|
||||
$(table).css({whiteSpace: "nowrap"});
|
||||
|
||||
for (var w = 0; w < rows.length; w++) {
|
||||
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||
longestCell = w;
|
||||
}
|
||||
}
|
||||
$(firstCell).css({width: 'auto'});
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||
tableStyle && $(table).css(tableStyle);
|
||||
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||
|
||||
config.hierarchyLevel
|
||||
&& $(rows).each(function () {
|
||||
indentLevel = $(this).data('level') || 0;
|
||||
indentLevel <= config.hierarchyLevel
|
||||
&& $(this).data('level', indentLevel)
|
||||
|| $(this).data('level', 0);
|
||||
for (var i = 0; i < $(this).data('level'); i++)
|
||||
$(this).find('td:first').prepend(config.indentArtifact);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||
makeDraggable: function(table) {
|
||||
var config = table.tableDnDConfig;
|
||||
|
||||
config.dragHandle
|
||||
// We only need to add the event to the specified cells
|
||||
&& $(config.dragHandle, table).each(function() {
|
||||
// The cell is bound to "this"
|
||||
$(this).bind(startEvent, function(e) {
|
||||
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||
return false;
|
||||
});
|
||||
})
|
||||
// For backwards compatibility, we add the event to the whole row
|
||||
// get all the rows as a wrapped set
|
||||
|| $(table.rows).each(function() {
|
||||
// Iterate through each row, the row is bound to "this"
|
||||
if (! $(this).hasClass("nodrag")) {
|
||||
$(this).bind(startEvent, function(e) {
|
||||
if (e.target.tagName === "TD") {
|
||||
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||
return false;
|
||||
}
|
||||
}).css("cursor", "move"); // Store the tableDnD object
|
||||
} else {
|
||||
$(this).css("cursor", ""); // Remove the cursor if we don't have the nodrag class
|
||||
}
|
||||
});
|
||||
},
|
||||
currentOrder: function() {
|
||||
var rows = this.currentTable.rows;
|
||||
return $.map(rows, function (val) {
|
||||
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||
}).join('');
|
||||
},
|
||||
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||
this.dragObject = dragObject;
|
||||
this.currentTable = table;
|
||||
this.mouseOffset = this.getMouseOffset(target, e);
|
||||
this.originalOrder = this.currentOrder();
|
||||
|
||||
// Now we need to capture the mouse up and mouse move event
|
||||
// We can use bind so that we don't interfere with other event handlers
|
||||
$(document)
|
||||
.bind(moveEvent, this.mousemove)
|
||||
.bind(endEvent, this.mouseup);
|
||||
|
||||
// Call the onDragStart method if there is one
|
||||
config.onDragStart
|
||||
&& config.onDragStart(table, target);
|
||||
},
|
||||
updateTables: function() {
|
||||
this.each(function() {
|
||||
// this is now bound to each matching table
|
||||
if (this.tableDnDConfig)
|
||||
$.tableDnD.makeDraggable(this);
|
||||
});
|
||||
},
|
||||
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||
mouseCoords: function(e) {
|
||||
if (e.originalEvent.changedTouches)
|
||||
return {
|
||||
x: e.originalEvent.changedTouches[0].clientX,
|
||||
y: e.originalEvent.changedTouches[0].clientY
|
||||
};
|
||||
|
||||
if(e.pageX || e.pageY)
|
||||
return {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
|
||||
return {
|
||||
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||
};
|
||||
},
|
||||
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||
To do this we need the element's position and the mouse position */
|
||||
getMouseOffset: function(target, e) {
|
||||
var mousePos,
|
||||
docPos;
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
docPos = this.getPosition(target);
|
||||
mousePos = this.mouseCoords(e);
|
||||
|
||||
return {
|
||||
x: mousePos.x - docPos.x,
|
||||
y: mousePos.y - docPos.y
|
||||
};
|
||||
},
|
||||
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||
getPosition: function(element) {
|
||||
var left = 0,
|
||||
top = 0;
|
||||
|
||||
// Safari fix -- thanks to Luis Chato for this!
|
||||
// Safari 2 doesn't correctly grab the offsetTop of a table row
|
||||
// this is detailed here:
|
||||
// http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
|
||||
// the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
|
||||
// note that firefox will return a text node as a first child, so designing a more thorough
|
||||
// solution may need to take that into account, for now this seems to work in firefox, safari, ie
|
||||
if (element.offsetHeight === 0)
|
||||
element = element.firstChild; // a table cell
|
||||
|
||||
while (element.offsetParent) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
},
|
||||
autoScroll: function (mousePos) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
yOffset = window.pageYOffset,
|
||||
windowHeight = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: document.body.clientHeight;
|
||||
|
||||
// Windows version
|
||||
// yOffset=document.body.scrollTop;
|
||||
if (document.all)
|
||||
if (typeof document.compatMode !== 'undefined'
|
||||
&& document.compatMode !== 'BackCompat')
|
||||
yOffset = document.documentElement.scrollTop;
|
||||
else if (typeof document.body !== 'undefined')
|
||||
yOffset = document.body.scrollTop;
|
||||
|
||||
mousePos.y - yOffset < config.scrollAmount
|
||||
&& window.scrollBy(0, - config.scrollAmount)
|
||||
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||
&& window.scrollBy(0, config.scrollAmount);
|
||||
|
||||
},
|
||||
moveVerticle: function (moving, currentRow) {
|
||||
|
||||
if (0 !== moving.vertical
|
||||
// If we're over a row then move the dragged row to there so that the user sees the
|
||||
// effect dynamically
|
||||
&& currentRow
|
||||
&& this.dragObject !== currentRow
|
||||
&& this.dragObject.parentNode === currentRow.parentNode)
|
||||
0 > moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||
|| 0 < moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||
|
||||
},
|
||||
moveHorizontal: function (moving, currentRow) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
currentLevel;
|
||||
|
||||
if (!config.hierarchyLevel
|
||||
|| 0 === moving.horizontal
|
||||
// We only care if moving left or right on the current row
|
||||
|| !currentRow
|
||||
|| this.dragObject !== currentRow)
|
||||
return null;
|
||||
|
||||
currentLevel = $(currentRow).data('level');
|
||||
|
||||
0 < moving.horizontal
|
||||
&& currentLevel > 0
|
||||
&& $(currentRow).find('td:first').children(':first').remove()
|
||||
&& $(currentRow).data('level', --currentLevel);
|
||||
|
||||
0 > moving.horizontal
|
||||
&& currentLevel < config.hierarchyLevel
|
||||
&& $(currentRow).prev().data('level') >= currentLevel
|
||||
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||
&& $(currentRow).data('level', ++currentLevel);
|
||||
|
||||
},
|
||||
mousemove: function(e) {
|
||||
var dragObj = $($.tableDnD.dragObject),
|
||||
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||
currentRow,
|
||||
mousePos,
|
||||
moving,
|
||||
x,
|
||||
y;
|
||||
|
||||
e && e.preventDefault();
|
||||
|
||||
if (!$.tableDnD.dragObject)
|
||||
return false;
|
||||
|
||||
// prevent touch device screen scrolling
|
||||
e.type === 'touchmove'
|
||||
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||
|
||||
// update the style to show we're dragging
|
||||
config.onDragClass
|
||||
&& dragObj.addClass(config.onDragClass)
|
||||
|| dragObj.css(config.onDragStyle);
|
||||
|
||||
mousePos = $.tableDnD.mouseCoords(e);
|
||||
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||
|
||||
// auto scroll the window
|
||||
$.tableDnD.autoScroll(mousePos);
|
||||
|
||||
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||
moving = $.tableDnD.findDragDirection(x, y);
|
||||
|
||||
$.tableDnD.moveVerticle(moving, currentRow);
|
||||
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||
|
||||
return false;
|
||||
},
|
||||
findDragDirection: function (x,y) {
|
||||
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||
oldX = this.oldX,
|
||||
oldY = this.oldY,
|
||||
xMin = oldX - sensitivity,
|
||||
xMax = oldX + sensitivity,
|
||||
yMin = oldY - sensitivity,
|
||||
yMax = oldY + sensitivity,
|
||||
moving = {
|
||||
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||
};
|
||||
|
||||
// update the old value
|
||||
if (moving.horizontal !== 0)
|
||||
this.oldX = x;
|
||||
if (moving.vertical !== 0)
|
||||
this.oldY = y;
|
||||
|
||||
return moving;
|
||||
},
|
||||
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||
findDropTargetRow: function(draggedRow, y) {
|
||||
var rowHeight = 0,
|
||||
rows = this.currentTable.rows,
|
||||
config = this.currentTable.tableDnDConfig,
|
||||
rowY = 0,
|
||||
row = null;
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
rowY = this.getPosition(row).y;
|
||||
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||
if (row.offsetHeight === 0) {
|
||||
rowY = this.getPosition(row.firstChild).y;
|
||||
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||
}
|
||||
// Because we always have to insert before, we need to offset the height a bit
|
||||
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||
// that's the row we're over
|
||||
// If it's the same as the current row, ignore it
|
||||
if (draggedRow.is(row)
|
||||
|| (config.onAllowDrop
|
||||
&& !config.onAllowDrop(draggedRow, row))
|
||||
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||
|| $(row).hasClass("nodrop"))
|
||||
return null;
|
||||
else
|
||||
return row;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
processMouseup: function() {
|
||||
if (!this.currentTable || !this.dragObject)
|
||||
return null;
|
||||
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
droppedRow = this.dragObject,
|
||||
parentLevel = 0,
|
||||
myLevel = 0;
|
||||
|
||||
// Unbind the event handlers
|
||||
$(document)
|
||||
.unbind(moveEvent, this.mousemove)
|
||||
.unbind(endEvent, this.mouseup);
|
||||
|
||||
config.hierarchyLevel
|
||||
&& config.autoCleanRelations
|
||||
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||
myLevel = $(this).parents('tr:first').data('level');
|
||||
myLevel
|
||||
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||
&& $(this).remove();
|
||||
})
|
||||
&& config.hierarchyLevel > 1
|
||||
&& $(this.currentTable.rows).each(function () {
|
||||
myLevel = $(this).data('level');
|
||||
if (myLevel > 1) {
|
||||
parentLevel = $(this).prev().data('level');
|
||||
while (myLevel > parentLevel + 1) {
|
||||
$(this).find('td:first').children(':first').remove();
|
||||
$(this).data('level', --myLevel);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we have a dragObject, then we need to release it,
|
||||
// The row will already have been moved to the right place so we just reset stuff
|
||||
config.onDragClass
|
||||
&& $(droppedRow).removeClass(config.onDragClass)
|
||||
|| $(droppedRow).css(config.onDropStyle);
|
||||
|
||||
this.dragObject = null;
|
||||
// Call the onDrop method if there is one
|
||||
config.onDrop
|
||||
&& this.originalOrder !== this.currentOrder()
|
||||
&& $(droppedRow).hide().fadeIn('fast')
|
||||
&& config.onDrop(this.currentTable, droppedRow);
|
||||
|
||||
// Call the onDragStop method if there is one
|
||||
config.onDragStop
|
||||
&& config.onDragStop(this.currentTable, droppedRow);
|
||||
|
||||
this.currentTable = null; // let go of the table too
|
||||
},
|
||||
mouseup: function(e) {
|
||||
e && e.preventDefault();
|
||||
$.tableDnD.processMouseup();
|
||||
return false;
|
||||
},
|
||||
jsonize: function(pretify) {
|
||||
var table = this.currentTable;
|
||||
if (pretify)
|
||||
return JSON.stringify(
|
||||
this.tableData(table),
|
||||
null,
|
||||
table.tableDnDConfig.jsonPretifySeparator
|
||||
);
|
||||
return JSON.stringify(this.tableData(table));
|
||||
},
|
||||
serialize: function() {
|
||||
return $.param(this.tableData(this.currentTable));
|
||||
},
|
||||
serializeTable: function(table) {
|
||||
var result = "";
|
||||
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||
var rows = table.rows;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
if (result.length > 0) result += "&";
|
||||
var rowId = rows[i].id;
|
||||
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||
result += paramName + '[]=' + rowId;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
serializeTables: function() {
|
||||
var result = [];
|
||||
$('table').each(function() {
|
||||
this.id && result.push($.param($.tableDnD.tableData(this)));
|
||||
});
|
||||
return result.join('&');
|
||||
},
|
||||
tableData: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
previousIDs = [],
|
||||
currentLevel = 0,
|
||||
indentLevel = 0,
|
||||
rowID = null,
|
||||
data = {},
|
||||
getSerializeRegexp,
|
||||
paramName,
|
||||
currentID,
|
||||
rows;
|
||||
|
||||
if (!table)
|
||||
table = this.currentTable;
|
||||
if (!table || !table.rows || !table.rows.length)
|
||||
return {error: { code: 500, message: "Not a valid table."}};
|
||||
if (!table.id && !config.serializeParamName)
|
||||
return {error: { code: 500, message: "No serializable unique id provided."}};
|
||||
|
||||
rows = config.autoCleanRelations
|
||||
&& table.rows
|
||||
|| $.makeArray(table.rows);
|
||||
paramName = config.serializeParamName || table.id;
|
||||
currentID = paramName;
|
||||
|
||||
getSerializeRegexp = function (rowId) {
|
||||
if (rowId && config && config.serializeRegexp)
|
||||
return rowId.match(config.serializeRegexp)[0];
|
||||
return rowId;
|
||||
};
|
||||
|
||||
data[currentID] = [];
|
||||
!config.autoCleanRelations
|
||||
&& $(rows[0]).data('level')
|
||||
&& rows.unshift({id: 'undefined'});
|
||||
|
||||
|
||||
|
||||
for (var i=0; i < rows.length; i++) {
|
||||
if (config.hierarchyLevel) {
|
||||
indentLevel = $(rows[i]).data('level') || 0;
|
||||
if (indentLevel === 0) {
|
||||
currentID = paramName;
|
||||
previousIDs = [];
|
||||
}
|
||||
else if (indentLevel > currentLevel) {
|
||||
previousIDs.push([currentID, currentLevel]);
|
||||
currentID = getSerializeRegexp(rows[i-1].id);
|
||||
}
|
||||
else if (indentLevel < currentLevel) {
|
||||
for (var h = 0; h < previousIDs.length; h++) {
|
||||
if (previousIDs[h][1] === indentLevel)
|
||||
currentID = previousIDs[h][0];
|
||||
if (previousIDs[h][1] >= currentLevel)
|
||||
previousIDs[h][1] = 0;
|
||||
}
|
||||
}
|
||||
currentLevel = indentLevel;
|
||||
|
||||
if (!$.isArray(data[currentID]))
|
||||
data[currentID] = [];
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
else {
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
jQuery.fn.extend(
|
||||
{
|
||||
tableDnD : $.tableDnD.build,
|
||||
tableDnDUpdate : $.tableDnD.updateTables,
|
||||
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||
}
|
||||
);
|
||||
|
||||
}(jQuery, window, window.document);
|
||||
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.3.min.js
vendored
Normal file
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
591
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.4.js
vendored
Normal file
591
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.4.js
vendored
Normal file
@@ -0,0 +1,591 @@
|
||||
/**
|
||||
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||
* You can set up various options to control how the system will work
|
||||
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
* License: MIT.
|
||||
* See https://github.com/isocra/TableDnD
|
||||
*/
|
||||
|
||||
/*jshint -W054 */
|
||||
|
||||
!function ($, window, document, undefined) {
|
||||
|
||||
var startEvent = 'touchstart mousedown',
|
||||
moveEvent = 'touchmove mousemove',
|
||||
endEvent = 'touchend mouseup';
|
||||
|
||||
$(document).ready(function () {
|
||||
function parseStyle(css) {
|
||||
var objMap = {},
|
||||
parts = css.match(/([^;:]+)/g) || [];
|
||||
while (parts.length)
|
||||
objMap[parts.shift()] = parts.shift().trim();
|
||||
|
||||
return objMap;
|
||||
}
|
||||
$('table').each(function () {
|
||||
if ($(this).data('table') === 'dnd') {
|
||||
|
||||
$(this).tableDnD({
|
||||
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||
onDragClass: $(this).data('ondragclass') === undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||
onDragStop: $(this).data('ondragstop') && new Function('table', 'row' ,$(this).data('ondragstop')),
|
||||
scrollAmount: $(this).data('scrollamount') || 5,
|
||||
sensitivity: $(this).data('sensitivity') || 10,
|
||||
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||
serializeParamName: $(this).data('serializeparamname') || false,
|
||||
dragHandle: $(this).data('draghandle') || null
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.tableDnD = {
|
||||
/** Keep hold of the current table being dragged */
|
||||
currentTable: null,
|
||||
/** Keep hold of the current drag object if any */
|
||||
dragObject: null,
|
||||
/** The current mouse offset */
|
||||
mouseOffset: null,
|
||||
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||
oldX: 0,
|
||||
oldY: 0,
|
||||
|
||||
/** Actually build the structure */
|
||||
build: function(options) {
|
||||
// Set up the defaults if any
|
||||
|
||||
this.each(function() {
|
||||
// This is bound to each matching table, set up the defaults and override with user options
|
||||
this.tableDnDConfig = $.extend({
|
||||
onDragStyle: null,
|
||||
onDropStyle: null,
|
||||
// Add in the default class for whileDragging
|
||||
onDragClass: "tDnD_whileDrag",
|
||||
onDrop: null,
|
||||
onDragStart: null,
|
||||
onDragStop: null,
|
||||
scrollAmount: 5,
|
||||
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||
sensitivity: 10,
|
||||
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||
hierarchyLevel: 0,
|
||||
/** The html artifact to prepend the first cell with as indentation */
|
||||
indentArtifact: '<div class="indent"> </div>',
|
||||
/** Automatically adjust width of first cell */
|
||||
autoWidthAdjust: true,
|
||||
/** Automatic clean-up to ensure relationship integrity */
|
||||
autoCleanRelations: true,
|
||||
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||
jsonPretifySeparator: '\t',
|
||||
/** The regular expression to use to trim row IDs */
|
||||
serializeRegexp: /[^\-]*$/,
|
||||
/** If you want to specify another parameter name instead of the table ID */
|
||||
serializeParamName: false,
|
||||
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||
dragHandle: null
|
||||
}, options || {});
|
||||
|
||||
// Now make the rows draggable
|
||||
$.tableDnD.makeDraggable(this);
|
||||
// Prepare hierarchy support
|
||||
this.tableDnDConfig.hierarchyLevel
|
||||
&& $.tableDnD.makeIndented(this);
|
||||
});
|
||||
|
||||
// Don't break the chain
|
||||
return this;
|
||||
},
|
||||
makeIndented: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
rows = table.rows,
|
||||
firstCell = $(rows).first().find('td:first')[0],
|
||||
indentLevel = 0,
|
||||
cellWidth = 0,
|
||||
longestCell,
|
||||
tableStyle;
|
||||
|
||||
if ($(table).hasClass('indtd'))
|
||||
return null;
|
||||
|
||||
tableStyle = $(table).addClass('indtd').attr('style');
|
||||
$(table).css({whiteSpace: "nowrap"});
|
||||
|
||||
for (var w = 0; w < rows.length; w++) {
|
||||
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||
longestCell = w;
|
||||
}
|
||||
}
|
||||
$(firstCell).css({width: 'auto'});
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||
tableStyle && $(table).css(tableStyle);
|
||||
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||
|
||||
config.hierarchyLevel
|
||||
&& $(rows).each(function () {
|
||||
indentLevel = $(this).data('level') || 0;
|
||||
indentLevel <= config.hierarchyLevel
|
||||
&& $(this).data('level', indentLevel)
|
||||
|| $(this).data('level', 0);
|
||||
for (var i = 0; i < $(this).data('level'); i++)
|
||||
$(this).find('td:first').prepend(config.indentArtifact);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||
makeDraggable: function(table) {
|
||||
var config = table.tableDnDConfig;
|
||||
|
||||
config.dragHandle
|
||||
// We only need to add the event to the specified cells
|
||||
&& $(config.dragHandle, table).each(function() {
|
||||
// The cell is bound to "this"
|
||||
$(this).bind(startEvent, function(e) {
|
||||
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||
return false;
|
||||
});
|
||||
})
|
||||
// For backwards compatibility, we add the event to the whole row
|
||||
// get all the rows as a wrapped set
|
||||
|| $(table.rows).each(function() {
|
||||
// Iterate through each row, the row is bound to "this"
|
||||
if (! $(this).hasClass("nodrag")) {
|
||||
$(this).bind(startEvent, function(e) {
|
||||
if (e.target.tagName === "TD") {
|
||||
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||
return false;
|
||||
}
|
||||
}).css("cursor", "move"); // Store the tableDnD object
|
||||
} else {
|
||||
$(this).css("cursor", ""); // Remove the cursor if we don't have the nodrag class
|
||||
}
|
||||
});
|
||||
},
|
||||
currentOrder: function() {
|
||||
var rows = this.currentTable.rows;
|
||||
return $.map(rows, function (val) {
|
||||
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||
}).join('');
|
||||
},
|
||||
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||
this.dragObject = dragObject;
|
||||
this.currentTable = table;
|
||||
this.mouseOffset = this.getMouseOffset(target, e);
|
||||
this.originalOrder = this.currentOrder();
|
||||
|
||||
// Now we need to capture the mouse up and mouse move event
|
||||
// We can use bind so that we don't interfere with other event handlers
|
||||
$(document)
|
||||
.bind(moveEvent, this.mousemove)
|
||||
.bind(endEvent, this.mouseup);
|
||||
|
||||
// Call the onDragStart method if there is one
|
||||
config.onDragStart
|
||||
&& config.onDragStart(table, target);
|
||||
},
|
||||
updateTables: function() {
|
||||
this.each(function() {
|
||||
// this is now bound to each matching table
|
||||
if (this.tableDnDConfig)
|
||||
$.tableDnD.makeDraggable(this);
|
||||
});
|
||||
},
|
||||
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||
mouseCoords: function(e) {
|
||||
if (e.originalEvent.changedTouches)
|
||||
return {
|
||||
x: e.originalEvent.changedTouches[0].clientX,
|
||||
y: e.originalEvent.changedTouches[0].clientY
|
||||
};
|
||||
|
||||
if(e.pageX || e.pageY)
|
||||
return {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
|
||||
return {
|
||||
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||
};
|
||||
},
|
||||
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||
To do this we need the element's position and the mouse position */
|
||||
getMouseOffset: function(target, e) {
|
||||
var mousePos,
|
||||
docPos;
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
docPos = this.getPosition(target);
|
||||
mousePos = this.mouseCoords(e);
|
||||
|
||||
return {
|
||||
x: mousePos.x - docPos.x,
|
||||
y: mousePos.y - docPos.y
|
||||
};
|
||||
},
|
||||
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||
getPosition: function(element) {
|
||||
var left = 0,
|
||||
top = 0;
|
||||
|
||||
while (element.offsetParent) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
},
|
||||
autoScroll: function (mousePos) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
yOffset = window.pageYOffset,
|
||||
windowHeight = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: document.body.clientHeight;
|
||||
|
||||
// Windows version
|
||||
// yOffset=document.body.scrollTop;
|
||||
if (document.all)
|
||||
if (typeof document.compatMode !== 'undefined'
|
||||
&& document.compatMode !== 'BackCompat')
|
||||
yOffset = document.documentElement.scrollTop;
|
||||
else if (typeof document.body !== 'undefined')
|
||||
yOffset = document.body.scrollTop;
|
||||
|
||||
mousePos.y - yOffset < config.scrollAmount
|
||||
&& window.scrollBy(0, - config.scrollAmount)
|
||||
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||
&& window.scrollBy(0, config.scrollAmount);
|
||||
|
||||
},
|
||||
moveVerticle: function (moving, currentRow) {
|
||||
|
||||
if (0 !== moving.vertical
|
||||
// If we're over a row then move the dragged row to there so that the user sees the
|
||||
// effect dynamically
|
||||
&& currentRow
|
||||
&& this.dragObject !== currentRow
|
||||
&& this.dragObject.parentNode === currentRow.parentNode)
|
||||
0 > moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||
|| 0 < moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||
|
||||
},
|
||||
moveHorizontal: function (moving, currentRow) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
currentLevel;
|
||||
|
||||
if (!config.hierarchyLevel
|
||||
|| 0 === moving.horizontal
|
||||
// We only care if moving left or right on the current row
|
||||
|| !currentRow
|
||||
|| this.dragObject !== currentRow)
|
||||
return null;
|
||||
|
||||
currentLevel = $(currentRow).data('level');
|
||||
|
||||
0 < moving.horizontal
|
||||
&& currentLevel > 0
|
||||
&& $(currentRow).find('td:first').children(':first').remove()
|
||||
&& $(currentRow).data('level', --currentLevel);
|
||||
|
||||
0 > moving.horizontal
|
||||
&& currentLevel < config.hierarchyLevel
|
||||
&& $(currentRow).prev().data('level') >= currentLevel
|
||||
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||
&& $(currentRow).data('level', ++currentLevel);
|
||||
|
||||
},
|
||||
mousemove: function(e) {
|
||||
var dragObj = $($.tableDnD.dragObject),
|
||||
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||
currentRow,
|
||||
mousePos,
|
||||
moving,
|
||||
x,
|
||||
y;
|
||||
|
||||
e && e.preventDefault();
|
||||
|
||||
if (!$.tableDnD.dragObject)
|
||||
return false;
|
||||
|
||||
// prevent touch device screen scrolling
|
||||
e.type === 'touchmove'
|
||||
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||
|
||||
// update the style to show we're dragging
|
||||
config.onDragClass
|
||||
&& dragObj.addClass(config.onDragClass)
|
||||
|| dragObj.css(config.onDragStyle);
|
||||
|
||||
mousePos = $.tableDnD.mouseCoords(e);
|
||||
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||
|
||||
// auto scroll the window
|
||||
$.tableDnD.autoScroll(mousePos);
|
||||
|
||||
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||
moving = $.tableDnD.findDragDirection(x, y);
|
||||
|
||||
$.tableDnD.moveVerticle(moving, currentRow);
|
||||
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||
|
||||
return false;
|
||||
},
|
||||
findDragDirection: function (x,y) {
|
||||
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||
oldX = this.oldX,
|
||||
oldY = this.oldY,
|
||||
xMin = oldX - sensitivity,
|
||||
xMax = oldX + sensitivity,
|
||||
yMin = oldY - sensitivity,
|
||||
yMax = oldY + sensitivity,
|
||||
moving = {
|
||||
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||
};
|
||||
|
||||
// update the old value
|
||||
if (moving.horizontal !== 0)
|
||||
this.oldX = x;
|
||||
if (moving.vertical !== 0)
|
||||
this.oldY = y;
|
||||
|
||||
return moving;
|
||||
},
|
||||
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||
findDropTargetRow: function(draggedRow, y) {
|
||||
var rowHeight = 0,
|
||||
rows = this.currentTable.rows,
|
||||
config = this.currentTable.tableDnDConfig,
|
||||
rowY = 0,
|
||||
row = null;
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
rowY = this.getPosition(row).y;
|
||||
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||
if (row.offsetHeight === 0) {
|
||||
rowY = this.getPosition(row.firstChild).y;
|
||||
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||
}
|
||||
// Because we always have to insert before, we need to offset the height a bit
|
||||
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||
// that's the row we're over
|
||||
// If it's the same as the current row, ignore it
|
||||
if (draggedRow.is(row)
|
||||
|| (config.onAllowDrop
|
||||
&& !config.onAllowDrop(draggedRow, row))
|
||||
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||
|| $(row).hasClass("nodrop"))
|
||||
return null;
|
||||
else
|
||||
return row;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
processMouseup: function() {
|
||||
if (!this.currentTable || !this.dragObject)
|
||||
return null;
|
||||
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
droppedRow = this.dragObject,
|
||||
parentLevel = 0,
|
||||
myLevel = 0;
|
||||
|
||||
// Unbind the event handlers
|
||||
$(document)
|
||||
.unbind(moveEvent, this.mousemove)
|
||||
.unbind(endEvent, this.mouseup);
|
||||
|
||||
config.hierarchyLevel
|
||||
&& config.autoCleanRelations
|
||||
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||
myLevel = $(this).parents('tr:first').data('level');
|
||||
myLevel
|
||||
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||
&& $(this).remove();
|
||||
})
|
||||
&& config.hierarchyLevel > 1
|
||||
&& $(this.currentTable.rows).each(function () {
|
||||
myLevel = $(this).data('level');
|
||||
if (myLevel > 1) {
|
||||
parentLevel = $(this).prev().data('level');
|
||||
while (myLevel > parentLevel + 1) {
|
||||
$(this).find('td:first').children(':first').remove();
|
||||
$(this).data('level', --myLevel);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we have a dragObject, then we need to release it,
|
||||
// The row will already have been moved to the right place so we just reset stuff
|
||||
config.onDragClass
|
||||
&& $(droppedRow).removeClass(config.onDragClass)
|
||||
|| $(droppedRow).css(config.onDropStyle);
|
||||
|
||||
this.dragObject = null;
|
||||
// Call the onDrop method if there is one
|
||||
config.onDrop
|
||||
&& this.originalOrder !== this.currentOrder()
|
||||
&& $(droppedRow).hide().fadeIn('fast')
|
||||
&& config.onDrop(this.currentTable, droppedRow);
|
||||
|
||||
// Call the onDragStop method if there is one
|
||||
config.onDragStop
|
||||
&& config.onDragStop(this.currentTable, droppedRow);
|
||||
|
||||
this.currentTable = null; // let go of the table too
|
||||
},
|
||||
mouseup: function(e) {
|
||||
e && e.preventDefault();
|
||||
$.tableDnD.processMouseup();
|
||||
return false;
|
||||
},
|
||||
jsonize: function(pretify) {
|
||||
var table = this.currentTable;
|
||||
if (pretify)
|
||||
return JSON.stringify(
|
||||
this.tableData(table),
|
||||
null,
|
||||
table.tableDnDConfig.jsonPretifySeparator
|
||||
);
|
||||
return JSON.stringify(this.tableData(table));
|
||||
},
|
||||
serialize: function() {
|
||||
return $.param(this.tableData(this.currentTable));
|
||||
},
|
||||
serializeTable: function(table) {
|
||||
var result = "";
|
||||
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||
var rows = table.rows;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
if (result.length > 0) result += "&";
|
||||
var rowId = rows[i].id;
|
||||
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||
result += paramName + '[]=' + rowId;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
serializeTables: function() {
|
||||
var result = [];
|
||||
$('table').each(function() {
|
||||
this.id && result.push($.param($.tableDnD.tableData(this)));
|
||||
});
|
||||
return result.join('&');
|
||||
},
|
||||
tableData: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
previousIDs = [],
|
||||
currentLevel = 0,
|
||||
indentLevel = 0,
|
||||
rowID = null,
|
||||
data = {},
|
||||
getSerializeRegexp,
|
||||
paramName,
|
||||
currentID,
|
||||
rows;
|
||||
|
||||
if (!table)
|
||||
table = this.currentTable;
|
||||
if (!table || !table.rows || !table.rows.length)
|
||||
return {error: { code: 500, message: "Not a valid table."}};
|
||||
if (!table.id && !config.serializeParamName)
|
||||
return {error: { code: 500, message: "No serializable unique id provided."}};
|
||||
|
||||
rows = config.autoCleanRelations
|
||||
&& table.rows
|
||||
|| $.makeArray(table.rows);
|
||||
paramName = config.serializeParamName || table.id;
|
||||
currentID = paramName;
|
||||
|
||||
getSerializeRegexp = function (rowId) {
|
||||
if (rowId && config && config.serializeRegexp)
|
||||
return rowId.match(config.serializeRegexp)[0];
|
||||
return rowId;
|
||||
};
|
||||
|
||||
data[currentID] = [];
|
||||
!config.autoCleanRelations
|
||||
&& $(rows[0]).data('level')
|
||||
&& rows.unshift({id: 'undefined'});
|
||||
|
||||
|
||||
|
||||
for (var i=0; i < rows.length; i++) {
|
||||
if (config.hierarchyLevel) {
|
||||
indentLevel = $(rows[i]).data('level') || 0;
|
||||
if (indentLevel === 0) {
|
||||
currentID = paramName;
|
||||
previousIDs = [];
|
||||
}
|
||||
else if (indentLevel > currentLevel) {
|
||||
previousIDs.push([currentID, currentLevel]);
|
||||
currentID = getSerializeRegexp(rows[i-1].id);
|
||||
}
|
||||
else if (indentLevel < currentLevel) {
|
||||
for (var h = 0; h < previousIDs.length; h++) {
|
||||
if (previousIDs[h][1] === indentLevel)
|
||||
currentID = previousIDs[h][0];
|
||||
if (previousIDs[h][1] >= currentLevel)
|
||||
previousIDs[h][1] = 0;
|
||||
}
|
||||
}
|
||||
currentLevel = indentLevel;
|
||||
|
||||
if (!$.isArray(data[currentID]))
|
||||
data[currentID] = [];
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
else {
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
jQuery.fn.extend(
|
||||
{
|
||||
tableDnD : $.tableDnD.build,
|
||||
tableDnDUpdate : $.tableDnD.updateTables,
|
||||
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||
}
|
||||
);
|
||||
|
||||
}(jQuery, window, window.document);
|
||||
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.4.min.js
vendored
Normal file
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.1.0.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
591
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.js
vendored
Normal file
591
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.js
vendored
Normal file
@@ -0,0 +1,591 @@
|
||||
/**
|
||||
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||
* You can set up various options to control how the system will work
|
||||
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
* License: MIT.
|
||||
* See https://github.com/isocra/TableDnD
|
||||
*/
|
||||
|
||||
/*jshint -W054 */
|
||||
|
||||
!function ($, window, document, undefined) {
|
||||
|
||||
var startEvent = 'touchstart mousedown',
|
||||
moveEvent = 'touchmove mousemove',
|
||||
endEvent = 'touchend mouseup';
|
||||
|
||||
$(document).ready(function () {
|
||||
function parseStyle(css) {
|
||||
var objMap = {},
|
||||
parts = css.match(/([^;:]+)/g) || [];
|
||||
while (parts.length)
|
||||
objMap[parts.shift()] = parts.shift().trim();
|
||||
|
||||
return objMap;
|
||||
}
|
||||
$('table').each(function () {
|
||||
if ($(this).data('table') === 'dnd') {
|
||||
|
||||
$(this).tableDnD({
|
||||
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||
onDragClass: $(this).data('ondragclass') === undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||
onDragStop: $(this).data('ondragstop') && new Function('table', 'row' ,$(this).data('ondragstop')),
|
||||
scrollAmount: $(this).data('scrollamount') || 5,
|
||||
sensitivity: $(this).data('sensitivity') || 10,
|
||||
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||
serializeParamName: $(this).data('serializeparamname') || false,
|
||||
dragHandle: $(this).data('draghandle') || null
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.tableDnD = {
|
||||
/** Keep hold of the current table being dragged */
|
||||
currentTable: null,
|
||||
/** Keep hold of the current drag object if any */
|
||||
dragObject: null,
|
||||
/** The current mouse offset */
|
||||
mouseOffset: null,
|
||||
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||
oldX: 0,
|
||||
oldY: 0,
|
||||
|
||||
/** Actually build the structure */
|
||||
build: function(options) {
|
||||
// Set up the defaults if any
|
||||
|
||||
this.each(function() {
|
||||
// This is bound to each matching table, set up the defaults and override with user options
|
||||
this.tableDnDConfig = $.extend({
|
||||
onDragStyle: null,
|
||||
onDropStyle: null,
|
||||
// Add in the default class for whileDragging
|
||||
onDragClass: "tDnD_whileDrag",
|
||||
onDrop: null,
|
||||
onDragStart: null,
|
||||
onDragStop: null,
|
||||
scrollAmount: 5,
|
||||
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||
sensitivity: 10,
|
||||
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||
hierarchyLevel: 0,
|
||||
/** The html artifact to prepend the first cell with as indentation */
|
||||
indentArtifact: '<div class="indent"> </div>',
|
||||
/** Automatically adjust width of first cell */
|
||||
autoWidthAdjust: true,
|
||||
/** Automatic clean-up to ensure relationship integrity */
|
||||
autoCleanRelations: true,
|
||||
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||
jsonPretifySeparator: '\t',
|
||||
/** The regular expression to use to trim row IDs */
|
||||
serializeRegexp: /[^\-]*$/,
|
||||
/** If you want to specify another parameter name instead of the table ID */
|
||||
serializeParamName: false,
|
||||
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||
dragHandle: null
|
||||
}, options || {});
|
||||
|
||||
// Now make the rows draggable
|
||||
$.tableDnD.makeDraggable(this);
|
||||
// Prepare hierarchy support
|
||||
this.tableDnDConfig.hierarchyLevel
|
||||
&& $.tableDnD.makeIndented(this);
|
||||
});
|
||||
|
||||
// Don't break the chain
|
||||
return this;
|
||||
},
|
||||
makeIndented: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
rows = table.rows,
|
||||
firstCell = $(rows).first().find('td:first')[0],
|
||||
indentLevel = 0,
|
||||
cellWidth = 0,
|
||||
longestCell,
|
||||
tableStyle;
|
||||
|
||||
if ($(table).hasClass('indtd'))
|
||||
return null;
|
||||
|
||||
tableStyle = $(table).addClass('indtd').attr('style');
|
||||
$(table).css({whiteSpace: "nowrap"});
|
||||
|
||||
for (var w = 0; w < rows.length; w++) {
|
||||
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||
longestCell = w;
|
||||
}
|
||||
}
|
||||
$(firstCell).css({width: 'auto'});
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||
tableStyle && $(table).css(tableStyle);
|
||||
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||
|
||||
config.hierarchyLevel
|
||||
&& $(rows).each(function () {
|
||||
indentLevel = $(this).data('level') || 0;
|
||||
indentLevel <= config.hierarchyLevel
|
||||
&& $(this).data('level', indentLevel)
|
||||
|| $(this).data('level', 0);
|
||||
for (var i = 0; i < $(this).data('level'); i++)
|
||||
$(this).find('td:first').prepend(config.indentArtifact);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||
makeDraggable: function(table) {
|
||||
var config = table.tableDnDConfig;
|
||||
|
||||
config.dragHandle
|
||||
// We only need to add the event to the specified cells
|
||||
&& $(config.dragHandle, table).each(function() {
|
||||
// The cell is bound to "this"
|
||||
$(this).bind(startEvent, function(e) {
|
||||
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||
return false;
|
||||
});
|
||||
})
|
||||
// For backwards compatibility, we add the event to the whole row
|
||||
// get all the rows as a wrapped set
|
||||
|| $(table.rows).each(function() {
|
||||
// Iterate through each row, the row is bound to "this"
|
||||
if (! $(this).hasClass("nodrag")) {
|
||||
$(this).bind(startEvent, function(e) {
|
||||
if (e.target.tagName === "TD") {
|
||||
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||
return false;
|
||||
}
|
||||
}).css("cursor", "move"); // Store the tableDnD object
|
||||
} else {
|
||||
$(this).css("cursor", ""); // Remove the cursor if we don't have the nodrag class
|
||||
}
|
||||
});
|
||||
},
|
||||
currentOrder: function() {
|
||||
var rows = this.currentTable.rows;
|
||||
return $.map(rows, function (val) {
|
||||
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||
}).join('');
|
||||
},
|
||||
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||
this.dragObject = dragObject;
|
||||
this.currentTable = table;
|
||||
this.mouseOffset = this.getMouseOffset(target, e);
|
||||
this.originalOrder = this.currentOrder();
|
||||
|
||||
// Now we need to capture the mouse up and mouse move event
|
||||
// We can use bind so that we don't interfere with other event handlers
|
||||
$(document)
|
||||
.bind(moveEvent, this.mousemove)
|
||||
.bind(endEvent, this.mouseup);
|
||||
|
||||
// Call the onDragStart method if there is one
|
||||
config.onDragStart
|
||||
&& config.onDragStart(table, target);
|
||||
},
|
||||
updateTables: function() {
|
||||
this.each(function() {
|
||||
// this is now bound to each matching table
|
||||
if (this.tableDnDConfig)
|
||||
$.tableDnD.makeDraggable(this);
|
||||
});
|
||||
},
|
||||
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||
mouseCoords: function(e) {
|
||||
if (e.originalEvent.changedTouches)
|
||||
return {
|
||||
x: e.originalEvent.changedTouches[0].clientX,
|
||||
y: e.originalEvent.changedTouches[0].clientY
|
||||
};
|
||||
|
||||
if(e.pageX || e.pageY)
|
||||
return {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
|
||||
return {
|
||||
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||
};
|
||||
},
|
||||
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||
To do this we need the element's position and the mouse position */
|
||||
getMouseOffset: function(target, e) {
|
||||
var mousePos,
|
||||
docPos;
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
docPos = this.getPosition(target);
|
||||
mousePos = this.mouseCoords(e);
|
||||
|
||||
return {
|
||||
x: mousePos.x - docPos.x,
|
||||
y: mousePos.y - docPos.y
|
||||
};
|
||||
},
|
||||
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||
getPosition: function(element) {
|
||||
var left = 0,
|
||||
top = 0;
|
||||
|
||||
while (element.offsetParent) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
},
|
||||
autoScroll: function (mousePos) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
yOffset = window.pageYOffset,
|
||||
windowHeight = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: document.body.clientHeight;
|
||||
|
||||
// Windows version
|
||||
// yOffset=document.body.scrollTop;
|
||||
if (document.all)
|
||||
if (typeof document.compatMode !== 'undefined'
|
||||
&& document.compatMode !== 'BackCompat')
|
||||
yOffset = document.documentElement.scrollTop;
|
||||
else if (typeof document.body !== 'undefined')
|
||||
yOffset = document.body.scrollTop;
|
||||
|
||||
mousePos.y - yOffset < config.scrollAmount
|
||||
&& window.scrollBy(0, - config.scrollAmount)
|
||||
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||
&& window.scrollBy(0, config.scrollAmount);
|
||||
|
||||
},
|
||||
moveVerticle: function (moving, currentRow) {
|
||||
|
||||
if (0 !== moving.vertical
|
||||
// If we're over a row then move the dragged row to there so that the user sees the
|
||||
// effect dynamically
|
||||
&& currentRow
|
||||
&& this.dragObject !== currentRow
|
||||
&& this.dragObject.parentNode === currentRow.parentNode)
|
||||
0 > moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||
|| 0 < moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||
|
||||
},
|
||||
moveHorizontal: function (moving, currentRow) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
currentLevel;
|
||||
|
||||
if (!config.hierarchyLevel
|
||||
|| 0 === moving.horizontal
|
||||
// We only care if moving left or right on the current row
|
||||
|| !currentRow
|
||||
|| this.dragObject !== currentRow)
|
||||
return null;
|
||||
|
||||
currentLevel = $(currentRow).data('level');
|
||||
|
||||
0 < moving.horizontal
|
||||
&& currentLevel > 0
|
||||
&& $(currentRow).find('td:first').children(':first').remove()
|
||||
&& $(currentRow).data('level', --currentLevel);
|
||||
|
||||
0 > moving.horizontal
|
||||
&& currentLevel < config.hierarchyLevel
|
||||
&& $(currentRow).prev().data('level') >= currentLevel
|
||||
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||
&& $(currentRow).data('level', ++currentLevel);
|
||||
|
||||
},
|
||||
mousemove: function(e) {
|
||||
var dragObj = $($.tableDnD.dragObject),
|
||||
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||
currentRow,
|
||||
mousePos,
|
||||
moving,
|
||||
x,
|
||||
y;
|
||||
|
||||
e && e.preventDefault();
|
||||
|
||||
if (!$.tableDnD.dragObject)
|
||||
return false;
|
||||
|
||||
// prevent touch device screen scrolling
|
||||
e.type === 'touchmove'
|
||||
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||
|
||||
// update the style to show we're dragging
|
||||
config.onDragClass
|
||||
&& dragObj.addClass(config.onDragClass)
|
||||
|| dragObj.css(config.onDragStyle);
|
||||
|
||||
mousePos = $.tableDnD.mouseCoords(e);
|
||||
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||
|
||||
// auto scroll the window
|
||||
$.tableDnD.autoScroll(mousePos);
|
||||
|
||||
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||
moving = $.tableDnD.findDragDirection(x, y);
|
||||
|
||||
$.tableDnD.moveVerticle(moving, currentRow);
|
||||
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||
|
||||
return false;
|
||||
},
|
||||
findDragDirection: function (x,y) {
|
||||
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||
oldX = this.oldX,
|
||||
oldY = this.oldY,
|
||||
xMin = oldX - sensitivity,
|
||||
xMax = oldX + sensitivity,
|
||||
yMin = oldY - sensitivity,
|
||||
yMax = oldY + sensitivity,
|
||||
moving = {
|
||||
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||
};
|
||||
|
||||
// update the old value
|
||||
if (moving.horizontal !== 0)
|
||||
this.oldX = x;
|
||||
if (moving.vertical !== 0)
|
||||
this.oldY = y;
|
||||
|
||||
return moving;
|
||||
},
|
||||
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||
findDropTargetRow: function(draggedRow, y) {
|
||||
var rowHeight = 0,
|
||||
rows = this.currentTable.rows,
|
||||
config = this.currentTable.tableDnDConfig,
|
||||
rowY = 0,
|
||||
row = null;
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
rowY = this.getPosition(row).y;
|
||||
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||
if (row.offsetHeight === 0) {
|
||||
rowY = this.getPosition(row.firstChild).y;
|
||||
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||
}
|
||||
// Because we always have to insert before, we need to offset the height a bit
|
||||
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||
// that's the row we're over
|
||||
// If it's the same as the current row, ignore it
|
||||
if (draggedRow.is(row)
|
||||
|| (config.onAllowDrop
|
||||
&& !config.onAllowDrop(draggedRow, row))
|
||||
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||
|| $(row).hasClass("nodrop"))
|
||||
return null;
|
||||
else
|
||||
return row;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
processMouseup: function() {
|
||||
if (!this.currentTable || !this.dragObject)
|
||||
return null;
|
||||
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
droppedRow = this.dragObject,
|
||||
parentLevel = 0,
|
||||
myLevel = 0;
|
||||
|
||||
// Unbind the event handlers
|
||||
$(document)
|
||||
.unbind(moveEvent, this.mousemove)
|
||||
.unbind(endEvent, this.mouseup);
|
||||
|
||||
config.hierarchyLevel
|
||||
&& config.autoCleanRelations
|
||||
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||
myLevel = $(this).parents('tr:first').data('level');
|
||||
myLevel
|
||||
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||
&& $(this).remove();
|
||||
})
|
||||
&& config.hierarchyLevel > 1
|
||||
&& $(this.currentTable.rows).each(function () {
|
||||
myLevel = $(this).data('level');
|
||||
if (myLevel > 1) {
|
||||
parentLevel = $(this).prev().data('level');
|
||||
while (myLevel > parentLevel + 1) {
|
||||
$(this).find('td:first').children(':first').remove();
|
||||
$(this).data('level', --myLevel);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we have a dragObject, then we need to release it,
|
||||
// The row will already have been moved to the right place so we just reset stuff
|
||||
config.onDragClass
|
||||
&& $(droppedRow).removeClass(config.onDragClass)
|
||||
|| $(droppedRow).css(config.onDropStyle);
|
||||
|
||||
this.dragObject = null;
|
||||
// Call the onDrop method if there is one
|
||||
config.onDrop
|
||||
&& this.originalOrder !== this.currentOrder()
|
||||
&& $(droppedRow).hide().fadeIn('fast')
|
||||
&& config.onDrop(this.currentTable, droppedRow);
|
||||
|
||||
// Call the onDragStop method if there is one
|
||||
config.onDragStop
|
||||
&& config.onDragStop(this.currentTable, droppedRow);
|
||||
|
||||
this.currentTable = null; // let go of the table too
|
||||
},
|
||||
mouseup: function(e) {
|
||||
e && e.preventDefault();
|
||||
$.tableDnD.processMouseup();
|
||||
return false;
|
||||
},
|
||||
jsonize: function(pretify) {
|
||||
var table = this.currentTable;
|
||||
if (pretify)
|
||||
return JSON.stringify(
|
||||
this.tableData(table),
|
||||
null,
|
||||
table.tableDnDConfig.jsonPretifySeparator
|
||||
);
|
||||
return JSON.stringify(this.tableData(table));
|
||||
},
|
||||
serialize: function() {
|
||||
return $.param(this.tableData(this.currentTable));
|
||||
},
|
||||
serializeTable: function(table) {
|
||||
var result = "";
|
||||
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||
var rows = table.rows;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
if (result.length > 0) result += "&";
|
||||
var rowId = rows[i].id;
|
||||
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||
result += paramName + '[]=' + rowId;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
serializeTables: function() {
|
||||
var result = [];
|
||||
$('table').each(function() {
|
||||
this.id && result.push($.param($.tableDnD.tableData(this)));
|
||||
});
|
||||
return result.join('&');
|
||||
},
|
||||
tableData: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
previousIDs = [],
|
||||
currentLevel = 0,
|
||||
indentLevel = 0,
|
||||
rowID = null,
|
||||
data = {},
|
||||
getSerializeRegexp,
|
||||
paramName,
|
||||
currentID,
|
||||
rows;
|
||||
|
||||
if (!table)
|
||||
table = this.currentTable;
|
||||
if (!table || !table.rows || !table.rows.length)
|
||||
return {error: { code: 500, message: "Not a valid table."}};
|
||||
if (!table.id && !config.serializeParamName)
|
||||
return {error: { code: 500, message: "No serializable unique id provided."}};
|
||||
|
||||
rows = config.autoCleanRelations
|
||||
&& table.rows
|
||||
|| $.makeArray(table.rows);
|
||||
paramName = config.serializeParamName || table.id;
|
||||
currentID = paramName;
|
||||
|
||||
getSerializeRegexp = function (rowId) {
|
||||
if (rowId && config && config.serializeRegexp)
|
||||
return rowId.match(config.serializeRegexp)[0];
|
||||
return rowId;
|
||||
};
|
||||
|
||||
data[currentID] = [];
|
||||
!config.autoCleanRelations
|
||||
&& $(rows[0]).data('level')
|
||||
&& rows.unshift({id: 'undefined'});
|
||||
|
||||
|
||||
|
||||
for (var i=0; i < rows.length; i++) {
|
||||
if (config.hierarchyLevel) {
|
||||
indentLevel = $(rows[i]).data('level') || 0;
|
||||
if (indentLevel === 0) {
|
||||
currentID = paramName;
|
||||
previousIDs = [];
|
||||
}
|
||||
else if (indentLevel > currentLevel) {
|
||||
previousIDs.push([currentID, currentLevel]);
|
||||
currentID = getSerializeRegexp(rows[i-1].id);
|
||||
}
|
||||
else if (indentLevel < currentLevel) {
|
||||
for (var h = 0; h < previousIDs.length; h++) {
|
||||
if (previousIDs[h][1] === indentLevel)
|
||||
currentID = previousIDs[h][0];
|
||||
if (previousIDs[h][1] >= currentLevel)
|
||||
previousIDs[h][1] = 0;
|
||||
}
|
||||
}
|
||||
currentLevel = indentLevel;
|
||||
|
||||
if (!$.isArray(data[currentID]))
|
||||
data[currentID] = [];
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
else {
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
jQuery.fn.extend(
|
||||
{
|
||||
tableDnD : $.tableDnD.build,
|
||||
tableDnDUpdate : $.tableDnD.updateTables,
|
||||
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||
}
|
||||
);
|
||||
|
||||
}(jQuery, window, window.document);
|
||||
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.min.js
vendored
Normal file
2
enginiptv/panel/plugins/tablednd/dist/jquery.tablednd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
enginiptv/panel/plugins/tablednd/images/updown2.gif
Normal file
BIN
enginiptv/panel/plugins/tablednd/images/updown2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 339 B |
527
enginiptv/panel/plugins/tablednd/index.html
Normal file
527
enginiptv/panel/plugins/tablednd/index.html
Normal file
@@ -0,0 +1,527 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Table Drag and Drop jQuery plugin</title>
|
||||
<link rel="stylesheet" href="tablednd.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="//google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<h1>Table Drag and Drop jQuery plugin</h1>
|
||||
<p>This page contains documentation and tests for the TableDnD jQuery plug-in. For more information and
|
||||
to post comments, please go to <a href="http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/">isocra.com</a>.
|
||||
</p>
|
||||
<p>If you have issues or bug reports, then you can post them at the <a href="https://github.com/isocra/TableDnD">TableDnD plug page</a>.</p>
|
||||
|
||||
<h2>How do I use it?</h2>
|
||||
<ol>
|
||||
<li>Since TableDnD is a jquery pligin you will need to include jquery in your page first.
|
||||
<p>No need for any downloads simply reference <a href="https://developers.google.com/speed/libraries/devguide#jquery">jQuery from the Google CDN</a>
|
||||
(Content Distribution Network)
|
||||
All scripts are included at the bottom of the page, to facilitate quicker rendering of the HTML for more responsive pages.
|
||||
The following is the way we are linking to jQuery in the examples and this method can be recommended for use in your implementations too.</p>
|
||||
<pre class="prettyprint"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></pre></li>
|
||||
<li>You will also need a copy of the <a href="https://github.com/isocra/TableDnD">TableDnD plugin</a> (current version 0.9) which you can reference in
|
||||
the normal fashion, anywhere after jQuery.</li>
|
||||
<li>In true jQuery style, the typical way to initialise the tabes is in the <code class="prettyprint">$(document).ready</code> code black function.
|
||||
Use a selector to select your table and then call the following (You can optionally specify a set of properties (described below).
|
||||
<pre class="prettyprint">tableDnD()</pre>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<h2>A basic table</h2>
|
||||
<div class="tableDemo">
|
||||
<div id="debug" style="float:right;"></div>
|
||||
<table id="table-1" cellspacing="0" cellpadding="2">
|
||||
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<p>The HTML for the table is very straight forward (no Javascript, pure HTML):</p>
|
||||
|
||||
<pre class="prettyprint">
|
||||
<table id="table-1" cellspacing="0" cellpadding="2">
|
||||
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
</pre>
|
||||
<p>To add in the "draggability" all we need to do is add a line to the <code class="prettyprint">$(document).ready(...)</code> function
|
||||
as follows:</p>
|
||||
<pre class="prettyprint">
|
||||
<span class="comment"><script type="text/javascript"></span>
|
||||
$(document).ready(function() {
|
||||
<span class="comment">// Initialise the table</span>
|
||||
$("#table-1").tableDnD();
|
||||
});
|
||||
<span class="comment"></script></span>
|
||||
</pre>
|
||||
<p>In the example above we're not setting any parameters at all so we get the default settings. There are a number
|
||||
of parameters you can set in order to control the look and feel of the table and also to add custom behaviour
|
||||
on drag or on drop. The parameters are specified as a map in the usual way and are described below:</p>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<dl>
|
||||
<dt>onDragStyle</dt>
|
||||
<dd>This is the style that is assigned to the row during drag. There are limitations to the styles that can be
|
||||
associated with a row (such as you can't assign a border—well you can, but it won't be
|
||||
displayed). (So instead consider using <code class="prettyprint">onDragClass</code>.) The CSS style to apply is specified as
|
||||
a map (as used in the jQuery <code class="prettyprint">css(...)</code> function).</dd>
|
||||
<dt>onDropStyle</dt>
|
||||
<dd>This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
|
||||
to what you can do. Also this replaces the original style, so again consider using onDragClass which
|
||||
is simply added and then removed on drop.</dd>
|
||||
<dt>onDragClass</dt>
|
||||
<dd>This class is added for the duration of the drag and then removed when the row is dropped. It is more
|
||||
flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
|
||||
is class is <code class="prettyprint">tDnD_whileDrag</code>. So to use the default, simply customise this CSS class in your
|
||||
stylesheet.</dd>
|
||||
<dt>onDrop</dt>
|
||||
<dd>Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
|
||||
and the row that was dropped. You can work out the new order of the rows by using
|
||||
<code class="prettyprint">table.tBodies[0].rows</code>.</dd>
|
||||
<dt>onDragStart</dt>
|
||||
<dd>Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
|
||||
table and the row which the user has started to drag.</dd>
|
||||
<dt>scrollAmount</dt>
|
||||
<dd>This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
|
||||
window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
|
||||
FF3 beta)</dd>
|
||||
</dl>
|
||||
|
||||
<h2>OnDrag custom table</h2>
|
||||
<p>This second table has has an onDrop function applied as well as an onDragClass. The javascript to set this up is
|
||||
as follows:</p>
|
||||
|
||||
<pre class="prettyprint">
|
||||
$(document).ready(function() {
|
||||
|
||||
// Initialise the first table (as before)
|
||||
$("#table-1").tableDnD();
|
||||
|
||||
// Make a nice striped effect on the table
|
||||
$("#table-2 tr:even').addClass('alt')");
|
||||
|
||||
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
|
||||
$("#table-2").tableDnD({
|
||||
onDragClass: "myDragClass",
|
||||
onDrop: function(table, row) {
|
||||
var rows = table.tBodies[0].rows;
|
||||
var debugStr = "Row dropped was "+row.id+". New order: ";
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
debugStr += rows[i].id+" ";
|
||||
}
|
||||
$(table).parent().find('.result').text(debugStr);
|
||||
},
|
||||
onDragStart: function(table, row) {
|
||||
$(table).parent().find('.result').text("Started dragging row "+row.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<div class="tableDemo">
|
||||
<table id="table-2" cellspacing="0" cellpadding="0">
|
||||
<tr id="2.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td><td><input type="radio" name="rone" value="V" />V</td><td><input type="radio" name="rone" value="C" checked="checked" />C</td><td><input type="radio" name="rone" value="N" />N</td></tr>
|
||||
<tr id="2.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td><td><input type="radio" name="rtwo" value="V" />V</td><td><input type="radio" name="rtwo" value="C" checked="checked" />C</td><td><input type="radio" name="rtwo" value="N" />N</td></tr>
|
||||
<tr id="2.3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td><td><input type="radio" name="rthree" value="V" />V</td><td><input type="radio" name="rthree" value="C" checked="checked" />C</td><td><input type="radio" name="rthree" value="N" />N</td></tr>
|
||||
<tr id="2.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td><td><input type="radio" name="rfour" value="V" />V</td><td><input type="radio" name="rfour" value="C" checked="checked" />C</td><td><input type="radio" name="rfour" value="N" />N</td></tr>
|
||||
<tr id="2.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td><td><input type="radio" name="rfive" value="V" />V</td><td><input type="radio" name="rfive" value="C" checked="checked" />C</td><td><input type="radio" name="rfive" value="N" />N</td></tr>
|
||||
<tr id="2.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td><td><input type="radio" name="rsix" value="V" />V</td><td><input type="radio" name="rsix" value="C" checked="checked" />C</td><td><input type="radio" name="rsix" value="N" />N</td></tr>
|
||||
<tr id="2.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="7"/></td><td><input type="radio" name="rseven" value="V" />V</td><td><input type="radio" name="rseven" value="C" checked="checked" />C</td><td><input type="radio" name="rseven" value="N" />N</td></tr>
|
||||
<tr id="2.8"><td>8</td><td>Eight</td><td><input type="text" name="eight" value="8"/></td><td><input type="radio" name="reight" value="V" />V</td><td><input type="radio" name="reight" value="C" checked="checked" />C</td><td><input type="radio" name="reight" value="N" />N</td></tr>
|
||||
<tr id="2.9"><td>9</td><td>Nine</td><td><input type="text" name="nine" value="9"/></td><td><input type="radio" name="rnine" value="V" />V</td><td><input type="radio" name="rnine" value="C" checked="checked" />C</td><td><input type="radio" name="rnine" value="N" />N</td></tr>
|
||||
<tr id="2.10"><td>10</td><td>Ten</td><td><input type="text" name="ten" value="10"/></td><td><input type="radio" name="rten" value="V" />V</td><td><input type="radio" name="rten" value="C" checked="checked" />C</td><td><input type="radio" name="rten" value="N" />N</td></tr>
|
||||
<tr id="2.11"><td>11</td><td>Eleven</td><td><input type="text" name="eleven" value="11"/></td><td><input type="radio" name="releven" value="V" />V</td><td><input type="radio" name="releven" value="C" checked="checked" />C</td><td><input type="radio" name="releven" value="N" />N</td></tr>
|
||||
<tr id="2.12"><td>12</td><td>Twelve</td><td><input type="text" name="twelve" value="12"/></td><td><input type="radio" name="rtwelve" value="V" />V</td><td><input type="radio" name="rtwelve" value="C" checked="checked" />C</td><td><input type="radio" name="rtwelve" value="N" />N</td></tr>
|
||||
<tr id="2.13"><td>13</td><td>Thirteen</td><td><input type="text" name="thirteen" value="13"/></td><td><input type="radio" name="rthirteen" value="V" />V</td><td><input type="radio" name="rthirteen" value="C" checked="checked" />C</td><td><input type="radio" name="rthirteen" value="N" />N</td></tr>
|
||||
<tr id="2.14"><td>14</td><td>Fourteen</td><td><input type="text" name="fourteen" value="14"/></td><td><input type="radio" name="rfourteen" value="V" />V</td><td><input type="radio" name="cfourteen" value="C" checked="checked" />C</td><td><input type="radio" name="rfourteen" value="N" />N</td></tr>
|
||||
</table>
|
||||
<div class="result"> </div>
|
||||
</div>
|
||||
<h2>Communicating with the back-end</h2>
|
||||
<p>Generally once the user has dropped a row, you need to inform the server of the new order. To do this, we've
|
||||
added a method called <code class="prettyprint">serialize()</code>. It takes no parameters but knows the current table from the
|
||||
context. The method returns a string of the form <code class="prettyprint"><i>tableId</i>[]=<i>rowId1</i>&<i>tableId</i>[]=<i>rowId2</i>&<i>tableId</i>[]=<i>rowId3</i>...</code>
|
||||
You can then use this as part of an Ajax load.
|
||||
</p>
|
||||
<p>
|
||||
Since version 0.9, instead of manually creating the serialized data string we instead use <a href="http://api.jquery.com/jQuery.param/">jQuery's param method</a> which has the added benefit of url encoding the data string as well.
|
||||
</p>
|
||||
<p>This third table demonstrates calling the serialize function inside onDrop (as shown below). It also
|
||||
demonstrates the "nodrop" class on row 3 and "nodrag" class on row 5, so you can't pick up row 5 and
|
||||
you can't drop any row on row 3 (but you can drag it).</p>
|
||||
<pre class="prettyprint">
|
||||
$('#table-3').tableDnD({
|
||||
onDrop: function(table, row) {
|
||||
alert($.tableDnD.serialize());
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
<div class="tableDemo">
|
||||
<div id="AjaxResult" style="float: right; width: 250px; border: 1px solid silver; padding: 4px; font-size: 90%">
|
||||
<h3>Ajax result</h3>
|
||||
<p>Drag and drop in this table to test out serialise and using JQuery.load()</p>
|
||||
</div>
|
||||
<table id="table-3" cellspacing="0" cellpadding="2">
|
||||
<tr id="3.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="3.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="3.3" class="nodrop"><td>3</td><td>Three (Can't drop on this row)</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="3.4" class="nodrop"><td>4</td><td>Four (Can't drop on this row)</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="3.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="3.6" class="nodrag"><td>6</td><td>Six (Can't drag this row)</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
<tr id="3.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
|
||||
</table>
|
||||
<div class="result"></div>
|
||||
</div>
|
||||
<h2>Multiple tbody table</h2>
|
||||
<p>This table has multiple TBODYs. The functionality isn't quite working properly. You can only drag the rows inside their
|
||||
own TBODY, you can't drag them outside it. Now this might or might not be what you want, but unfortunately if you then drop a row outside its TBODY you get a Javascript error because inserting after a sibling doesn't work. This will be fixed in the next version. The header rows all have the classes "nodrop" and "nodrag" so that they can't be dragged or dropped on.</p>
|
||||
<div class="tableDemo">
|
||||
<table id="table-4" cellspacing="0" cellpadding="2">
|
||||
<thead>
|
||||
<tr id="4.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="4.1"><td>4.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="4.2"><td>4.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="4.3"><td>4.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="4.4"><td>4.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="4.5"><td>4.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="4.6"><td>4.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr id="5.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
|
||||
<tr id="5.1"><td>5.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="5.2"><td>5.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="5.3"><td>5.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="5.4"><td>5.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="5.5"><td>5.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="5.6"><td>5.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr id="6.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
|
||||
<tr id="6.1"><td>6.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="6.2"><td>6.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="6.3"><td>6.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="6.4"><td>6.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="6.5"><td>6.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="6.6"><td>6.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h2>Identify rows</h2>
|
||||
<p>
|
||||
The following table demonstrates the use of the default regular expression. The rows have IDs of the
|
||||
form table5-row-1, table5-row-2, etc., but the regular expression is <code class="prettyprint">/[^\-]*$/</code> (this is the same
|
||||
as used in the <a href="http://plugins.jquery.com/project/NestedSortable">NestedSortable</a> plugin for consistency).
|
||||
This removes everything before and including the last hyphen, so the serialised string just has 1, 2, 3 etc.
|
||||
You can replace the regular expression by setting the <code class="prettyprint">serializeRegexp</code> option, you can also just set it
|
||||
to null to stop this behaviour.
|
||||
</p>
|
||||
<pre class="prettyprint">
|
||||
$('#table-5').tableDnD({
|
||||
onDrop: function(table, row) {
|
||||
alert($.tableDnD.serialize());
|
||||
},
|
||||
dragHandle: ".dragHandle"
|
||||
});
|
||||
</pre>
|
||||
<div class="tableDemo">
|
||||
<table id="table-5" cellspacing="0" cellpadding="2">
|
||||
<tr id="table5-row-1"><td class="dragHandle"> </td><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="table5-row-2"><td class="dragHandle"> </td><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="table5-row-3"><td class="dragHandle"> </td><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="table5-row-4"><td class="dragHandle"> </td><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="table5-row-5"><td class="dragHandle"> </td><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="table5-row-6"><td class="dragHandle"> </td><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
<div class="result"></div>
|
||||
</div>
|
||||
<p>In fact you will notice that I have also set the dragHandle on this table. This has two effects: firstly only
|
||||
the cell with the drag handle class is draggable and secondly it doesn't automatically add the <code class="prettyprint">cursor: move</code>
|
||||
style to the row (or the drag handle cell), so you are responsible for setting up the style as you see fit.</p>
|
||||
<p>Here I've actually added an extra effect which adds a background image to the first cell in the row whenever
|
||||
you enter it using the jQuery <code class="prettyprint">hover</code> function as follows:</p>
|
||||
<pre class="prettyprint">
|
||||
$("#table-5 tr").hover(function() {
|
||||
$(this.cells[0]).addClass('showDragHandle');
|
||||
}, function() {
|
||||
$(this.cells[0]).removeClass('showDragHandle');
|
||||
});
|
||||
</pre>
|
||||
<p>This provides a better visualisation of what you can do to the row and where you need to go to drag it (I hope).</p>
|
||||
|
||||
<h2>Meta table (auto configure)</h2>
|
||||
|
||||
<script type="text/javascript">
|
||||
function inline_sprintlist_ondrop(table, row) {
|
||||
var result = $(table).parent().find('.result'),
|
||||
pre = $('<pre class="prettyprint">');
|
||||
|
||||
result.html(pre.text($.tableDnD.jsonize(true)));
|
||||
prettyPrint();
|
||||
// pre.text($(table).tableDnD.jsonize())
|
||||
// return true;
|
||||
//// '<div class="indent"> </div>',
|
||||
}
|
||||
</script>
|
||||
<div class="tableDemo">
|
||||
|
||||
<table id="table-6"
|
||||
data-table="dnd"
|
||||
cellspacing="0"
|
||||
cellpadding="2"
|
||||
style=""
|
||||
|
||||
|
||||
data-ondragstyle="display: block; z-index: 5; background-color: #7777cc;"
|
||||
|
||||
data-ondragclass=""
|
||||
>
|
||||
<tr id="6-1"><td>Basic example with extra fancy</td></tr>
|
||||
<tr id="6-2"><td>row styles bot this trick really</td></tr>
|
||||
<tr id="6-3"><td>only works with single column</td></tr>
|
||||
<tr id="6-4"><td>because it looses the corumn</td></tr>
|
||||
<tr id="6-5"><td>width when displaying a table</td></tr>
|
||||
<tr id="6-6"><td>in block style unfortunately</td></tr>
|
||||
</table>
|
||||
|
||||
<table
|
||||
id="sprintlist_table"
|
||||
cellspacing="0" cellpadding="10"
|
||||
data-table="dnd"
|
||||
data-ondragstart="$(table).parent().find('.result').text('data-ondragstart');"
|
||||
data-ondrop="inline_sprintlist_ondrop(table, row);"
|
||||
data-serializeregexp="^.*sprints$|[^\_]*$"
|
||||
data-ondragclass="sprintlist-drag"
|
||||
data-ondragstyle=""
|
||||
data-ondropstyle=""
|
||||
data-scrollamount="100"
|
||||
data-sensitivity="1"
|
||||
data-hierarchylevel="2"
|
||||
data-indentartifact=" "
|
||||
data-autowidthadjust="1"
|
||||
data-autocleanrelations="1"
|
||||
data-jsonpretifyseparator=" "
|
||||
data-serializeparamname="sprintlist"
|
||||
data-draghandle=""
|
||||
|
||||
>
|
||||
<thead id="sprintlist_header">
|
||||
<tr><th class="name">Name</th><th class="start_date">Start Date</th><th class="end_date">End Date</th><th class="actions">Actions</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="present_sprints" class="group_heading nodrag"><td colspan="4">Present Sprints</td></tr>
|
||||
<tr id="sprint_145664"><td>First round - in sprint</td><td>2012-09-19</td><td>2012-09-27</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="future_sprints" class="group_heading nodrag"><td colspan="4">Future Sprints</td></tr>
|
||||
<tr id="sprint_145665" class="toggler_row"><td>Second round</td><td>2012-09-28</td><td>2012-10-04</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145975" class="toggler_row"><td>Third round</td><td>2012-10-04</td><td>2012-10-11</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145965" class="toggler_row"><td>Fourth round</td><td>2012-10-13</td><td>2012-10-20</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145966" class="toggler_row"><td>Release prep</td><td>2012-10-20</td><td>2012-10-27</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145964" class="toggler_row"><td>Fifth run</td><td>2012-10-27</td><td>2012-11-03</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145974" class="toggler_row"><td>Sixth run</td><td>2012-11-03</td><td>2012-11-10</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145985" class="toggler_row"><td>Seventh run</td><td>2012-11-10</td><td>2012-11-17</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="sprint_145976" class="toggler_row"><td>Release 2 prep</td><td>2012-11-17</td><td>2012-11-24</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="past_sprints" class="group_heading nodrag"><td colspan="4">Past Sprints</td></tr>
|
||||
<tr id="sprint_145996" class="toggler_row"><td>Backlog creation - complete</td><td>2012-09-01</td><td>2012-09-08</td>
|
||||
<td class="small_buttons"><div><button onclick="return false;">Edit</button><button onclick="return false;">Delete</button></div></td></tr>
|
||||
<tr id="no_sprints" class="group_heading nodrag"><td colspan="4">No Sprints</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<a class="toggle-json6" href="#">Hide JSON</a><div id="json6" class="result"></div>
|
||||
</div>
|
||||
|
||||
<h2>Hierarchy table</h2>
|
||||
<p>This table allows row order to be dragged horizontally and placed in a hierarchy under a parent row (since version 0.9). We also get a chance to look at the new jsonize method for JSON serialized form of the data. </p>
|
||||
<p>In the onDrop event handler we pass the JSON as data to jquery through a HTTP POST ajax call to the server:</p>
|
||||
<pre class="prettyprint">
|
||||
$.post("server/ajaxJSONTest.php", $.tableDnD.jsonize(), function (data) {
|
||||
$('#table-7-response').html('<br>'+ data);
|
||||
});
|
||||
</pre>
|
||||
<p>On the back-end we have a PHP example that simply retrieves the JSON POST data from the built in stream php://input, decodes the payload and proceeds to build the hierarchy through recursion.</p>
|
||||
<p>To keep the data simple and also stay compatible with the http variable methods as mentioned previously the data structure is formed with separate collections. If a parent has children the children first level are listed and if any of the children have subsequent children an additional collection is created for the first level of these.</p>
|
||||
<p>The following hierarchy for example would generate 3 collections:</p>
|
||||
<ul>
|
||||
<li>7.00 <ul>
|
||||
<li>7.01</li>
|
||||
<li>7.02<ul><li>7.03</li></ul></li>
|
||||
</ul></li>
|
||||
<li>7.04</li>
|
||||
</ul>
|
||||
<p>In JSON the dataset looks like this:</p>
|
||||
<a class="toggle-json7" href="#">Hide JSON</a><pre id="json7" class="prettyprint">
|
||||
{
|
||||
"table-7": [
|
||||
"7.00",
|
||||
"7.04"
|
||||
],
|
||||
"7.00": [
|
||||
"7.01",
|
||||
"7.02"
|
||||
],
|
||||
"7.02": [
|
||||
"7.03"
|
||||
]
|
||||
}
|
||||
</pre>
|
||||
<p>We use the setting hierarchyLevel to indicate how many levels are supported, the example uses 4 levels deep. When populating the table you can use the the data-leve tag to indicate at which level the current row is represented at.</p>
|
||||
|
||||
<div class="hierarchyDemo">
|
||||
<div style="float: right; width: 450px; border: 1px solid silver; padding: 4px; font-size: 90%">
|
||||
<div id="table-7-response" style="float: right; margin-left: 20px">
|
||||
<h3>Ajax result</h3>
|
||||
<p>Drag and drop in this table to test out hierarcies and using JSON payload.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="table-7" cellspacing="0" cellpadding="2">
|
||||
<tr id="7.00"> <td>7.0 One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="7.01" data-level="1"><td>7.1 Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="7.02" data-level="1"><td>7.2 Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="7.03" data-level="2"><td>7.3 Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="7.04"> <td>7.4 Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="7.05" data-level="1"><td>7.5 Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
<tr id="7.06" data-level="2"><td>7.6 Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
|
||||
<tr id="7.07" data-level="3"><td>7.7 Eight</td><td><input type="text" name="eight" value="eight"/></td></tr>
|
||||
<tr id="7.08" data-level="4"><td>7.8 Nine</td><td><input type="text" name="nine" value="nine"/></td></tr>
|
||||
<tr id="7.09" data-level="2"><td>7.9 Ten</td><td><input type="text" name="ten" value="ten"/></td></tr>
|
||||
<tr id="7.10" data-level="2"><td>7.0 One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="7.11"> <td>7.1 Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="7.12"> <td>7.2 Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="7.13"> <td>7.3 Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="7.14"> <td>7.4 Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="7.15" data-level="1"><td>7.5 Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
<tr id="7.16" data-level="2"><td>7.6 Seven</td><td><input type="text" name="seven" value="seven"/></td></tr>
|
||||
<tr id="7.17" data-level="1"><td>7.7 Eight</td><td><input type="text" name="eight" value="eight"/></td></tr>
|
||||
<tr id="7.18" data-level="2"><td>7.8 Nine</td><td><input type="text" name="nine" value="nine"/></td></tr>
|
||||
<tr id="7.19"> <td>7.9 Ten</td><td><input type="text" name="ten" value="ten"/></td></tr>
|
||||
</table>
|
||||
<a class="toggle-json77" href="#">Hide JSON</a><div id="json77" class="result"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Initialise the first table (as before)
|
||||
$("#table-1").tableDnD();
|
||||
// Make a nice striped effect on the table
|
||||
table_2 = $("#table-2");
|
||||
table_2.find("tr:even").addClass("alt");
|
||||
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
|
||||
table_2.tableDnD({
|
||||
onDragClass: "myDragClass",
|
||||
onDrop: function(table, row) {
|
||||
var rows = table.tBodies[0].rows;
|
||||
var debugStr = "Row dropped was "+row.id+". New order: ";
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
debugStr += rows[i].id+" ";
|
||||
}
|
||||
$(table).parent().find('.result').text(debugStr);
|
||||
},
|
||||
onDragStart: function(table, row) {
|
||||
$(table).parent().find('.result').text("Started dragging row "+row.id);
|
||||
}
|
||||
});
|
||||
|
||||
$('#table-3').tableDnD({
|
||||
onDragStart: function(table, row) {
|
||||
$(table).parent().find('.result').text('');
|
||||
},
|
||||
onDrop: function(table, row) {
|
||||
$('#AjaxResult').load("server/ajaxTest.php?"+$.tableDnD.serialize())
|
||||
.parent().find('.result').html($('<p>').append('Result of $.tableDnD.serialize() is url encoded: ')
|
||||
.append($('<pre class="prettyprint">').text($.tableDnD.serialize()))
|
||||
.append(' Which looks like this when decoded (decodeURI): ')
|
||||
.append($('<pre class="prettyprint">').text(decodeURI($.tableDnD.serialize()))));
|
||||
prettyPrint();
|
||||
}
|
||||
});
|
||||
|
||||
$('#table-4').tableDnD(); // no options currently
|
||||
|
||||
$('#table-5').tableDnD({
|
||||
onDragStart: function(table, row) {
|
||||
$(table).parent().find('.result').text('');
|
||||
},
|
||||
onDrop: function(table, row) {
|
||||
var data = $(table).tableDnDSerialize();
|
||||
$(table).parent().find('.result').append(
|
||||
$('<strong>').text('The urlencoded serialized string:'))
|
||||
.append($('<pre class="prettyprint">').text(data))
|
||||
.append($('<strong>').text('Which looks like this through decodeURIComponent:'))
|
||||
.append($('<pre class="prettyprint">').text(decodeURIComponent(data)));
|
||||
prettyPrint();
|
||||
},
|
||||
dragHandle: ".dragHandle"
|
||||
});
|
||||
|
||||
$("#table-5 ").find("tr").hover(function() {
|
||||
$(this.cells[0]).addClass('showDragHandle');
|
||||
}, function() {
|
||||
$(this.cells[0]).removeClass('showDragHandle');
|
||||
});
|
||||
|
||||
$('#table-7').tableDnD({
|
||||
hierarchyLevel: 4,
|
||||
onDragStart: function(table, row) {
|
||||
$(table).parent().find('.result').text('');
|
||||
},
|
||||
onDrop: function(table, row) {
|
||||
$(table).parent().find('.result').append(
|
||||
$('<strong>').text('JSON.stringify result of $.tableDnD.tableData()'))
|
||||
.append($('<pre class="prettyprint">').text($.tableDnD.jsonize(true)));
|
||||
prettyPrint();
|
||||
$.post("server/ajaxJSONTest.php", $.tableDnD.jsonize(), function (data) {
|
||||
$('#table-7-response').html('<br>'+ data);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.toggle-json6').toggle(function() {
|
||||
$(this).text('Show JSON');
|
||||
$('json6').hide();
|
||||
return false;
|
||||
},
|
||||
function() {
|
||||
$(this).text('Hide JSON');
|
||||
$('json6').show();
|
||||
return false;
|
||||
});
|
||||
$('.toggle-json7').toggle(function() {
|
||||
$(this).text('Show JSON');
|
||||
$('json7').hide();
|
||||
return false;
|
||||
},
|
||||
function() {
|
||||
$(this).text('Hide JSON');
|
||||
$('json7').show();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#radio-button-test').tableDnD();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.6.min.js
vendored
Normal file
1
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.6.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.7.min.js
vendored
Normal file
1
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.7.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.8.min.js
vendored
Normal file
1
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.8.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
664
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.9.rc1.js
Normal file
664
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.0.9.rc1.js
Normal file
@@ -0,0 +1,664 @@
|
||||
/**
|
||||
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||
* You can set up various options to control how the system will work
|
||||
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
* Licensed like jQuery, see http://docs.jquery.com/License.
|
||||
*
|
||||
* Configuration options:
|
||||
*
|
||||
* onDragStyle
|
||||
* This is the style that is assigned to the row during drag. There are limitations to the styles that can be
|
||||
* associated with a row (such as you can't assign a border--well you can, but it won't be
|
||||
* displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
|
||||
* a map (as used in the jQuery css(...) function).
|
||||
* onDropStyle
|
||||
* This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
|
||||
* to what you can do. Also this replaces the original style, so again consider using onDragClass which
|
||||
* is simply added and then removed on drop.
|
||||
* onDragClass
|
||||
* This class is added for the duration of the drag and then removed when the row is dropped. It is more
|
||||
* flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
|
||||
* is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
|
||||
* stylesheet.
|
||||
* onDrop
|
||||
* Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
|
||||
* and the row that was dropped. You can work out the new order of the rows by using
|
||||
* table.rows.
|
||||
* onDragStart
|
||||
* Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
|
||||
* table and the row which the user has started to drag.
|
||||
* onAllowDrop
|
||||
* Pass a function that will be called as a row is over another row. If the function returns true, allow
|
||||
* dropping on that row, otherwise not. The function takes 2 parameters: the dragged row and the row under
|
||||
* the cursor. It returns a boolean: true allows the drop, false doesn't allow it.
|
||||
* scrollAmount
|
||||
* This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
|
||||
* window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
|
||||
* FF3 beta
|
||||
* dragHandle
|
||||
* This is a jQuery mach string for one or more cells in each row that is draggable. If you
|
||||
* specify this, then you are responsible for setting cursor: move in the CSS and only these cells
|
||||
* will have the drag behaviour. If you do not specify a dragHandle, then you get the old behaviour where
|
||||
* the whole row is draggable.
|
||||
*
|
||||
* Other ways to control behaviour:
|
||||
*
|
||||
* Add class="nodrop" to any rows for which you don't want to allow dropping, and class="nodrag" to any rows
|
||||
* that you don't want to be draggable.
|
||||
*
|
||||
* Inside the onDrop method you can also call $.tableDnD.serialize() this returns a string of the form
|
||||
* <tableID>[]=<rowID1>&<tableID>[]=<rowID2> so that you can send this back to the server. The table must have
|
||||
* an ID as must all the rows.
|
||||
*
|
||||
* Other methods:
|
||||
*
|
||||
* $("...").tableDnDUpdate()
|
||||
* Will update all the matching tables, that is it will reapply the mousedown method to the rows (or handle cells).
|
||||
* This is useful if you have updated the table rows using Ajax and you want to make the table draggable again.
|
||||
* The table maintains the original configuration (so you don't have to specify it again).
|
||||
*
|
||||
* $("...").tableDnDSerialize()
|
||||
* Will serialize and return the serialized string as above, but for each of the matching tables--so it can be
|
||||
* called from anywhere and isn't dependent on the currentTable being set up correctly before calling
|
||||
*
|
||||
* Known problems:
|
||||
* - Auto-scoll has some problems with IE7 (it scrolls even when it shouldn't), work-around: set scrollAmount to 0
|
||||
*
|
||||
* Version 0.2: 2008-02-20 First public version
|
||||
* Version 0.3: 2008-02-07 Added onDragStart option
|
||||
* Made the scroll amount configurable (default is 5 as before)
|
||||
* Version 0.4: 2008-03-15 Changed the noDrag/noDrop attributes to nodrag/nodrop classes
|
||||
* Added onAllowDrop to control dropping
|
||||
* Fixed a bug which meant that you couldn't set the scroll amount in both directions
|
||||
* Added serialize method
|
||||
* Version 0.5: 2008-05-16 Changed so that if you specify a dragHandle class it doesn't make the whole row
|
||||
* draggable
|
||||
* Improved the serialize method to use a default (and settable) regular expression.
|
||||
* Added tableDnDupate() and tableDnDSerialize() to be called when you are outside the table
|
||||
* Version 0.6: 2011-12-02 Added support for touch devices
|
||||
* Version 0.7 2012-04-09 Now works with jQuery 1.7 and supports touch, tidied up tabs and spaces
|
||||
*/
|
||||
!function ($, window, document, undefined) {
|
||||
// Determine if this is a touch device
|
||||
var hasTouch = 'ontouchstart' in document.documentElement,
|
||||
startEvent = hasTouch ? 'touchstart' : 'mousedown',
|
||||
moveEvent = hasTouch ? 'touchmove' : 'mousemove',
|
||||
endEvent = hasTouch ? 'touchend' : 'mouseup';
|
||||
|
||||
// If we're on a touch device, then wire up the events
|
||||
// see http://stackoverflow.com/a/8456194/1316086
|
||||
hasTouch
|
||||
&& $.each("touchstart touchmove touchend".split(" "), function(i, name) {
|
||||
$.event.fixHooks[name] = $.event.mouseHooks;
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
function parseStyle(css) {
|
||||
var objMap = {},
|
||||
parts = css.match(/([^;:]+)/g) || [];
|
||||
while (parts.length)
|
||||
objMap[parts.shift()] = parts.shift().trim();
|
||||
|
||||
return objMap;
|
||||
}
|
||||
$('table').each(function () {
|
||||
if ($(this).data('table') == 'dnd') {
|
||||
|
||||
$(this).tableDnD({
|
||||
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||
onDragClass: $(this).data('ondragclass') == undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||
scrollAmount: $(this).data('scrollamount') || 5,
|
||||
sensitivity: $(this).data('sensitivity') || 10,
|
||||
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||
serializeParamName: $(this).data('serializeparamname') || false,
|
||||
dragHandle: $(this).data('draghandle') || null
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
window.jQuery.tableDnD = {
|
||||
/** Keep hold of the current table being dragged */
|
||||
currentTable: null,
|
||||
/** Keep hold of the current drag object if any */
|
||||
dragObject: null,
|
||||
/** The current mouse offset */
|
||||
mouseOffset: null,
|
||||
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||
oldX: 0,
|
||||
oldY: 0,
|
||||
|
||||
/** Actually build the structure */
|
||||
build: function(options) {
|
||||
// Set up the defaults if any
|
||||
|
||||
this.each(function() {
|
||||
// This is bound to each matching table, set up the defaults and override with user options
|
||||
this.tableDnDConfig = $.extend({
|
||||
onDragStyle: null,
|
||||
onDropStyle: null,
|
||||
// Add in the default class for whileDragging
|
||||
onDragClass: "tDnD_whileDrag",
|
||||
onDrop: null,
|
||||
onDragStart: null,
|
||||
scrollAmount: 5,
|
||||
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||
sensitivity: 10,
|
||||
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||
hierarchyLevel: 0,
|
||||
/** The html artifact to prepend the first cell with as indentation */
|
||||
indentArtifact: '<div class="indent"> </div>',
|
||||
/** Automatically adjust width of first cell */
|
||||
autoWidthAdjust: true,
|
||||
/** Automatic clean-up to ensure relationship integrity */
|
||||
autoCleanRelations: true,
|
||||
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||
jsonPretifySeparator: '\t',
|
||||
/** The regular expression to use to trim row IDs */
|
||||
serializeRegexp: /[^\-]*$/,
|
||||
/** If you want to specify another parameter name instead of the table ID */
|
||||
serializeParamName: false,
|
||||
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||
dragHandle: null
|
||||
}, options || {});
|
||||
|
||||
// Now make the rows draggable
|
||||
$.tableDnD.makeDraggable(this);
|
||||
// Prepare hierarchy support
|
||||
this.tableDnDConfig.hierarchyLevel
|
||||
&& $.tableDnD.makeIndented(this);
|
||||
});
|
||||
|
||||
// Don't break the chain
|
||||
return this;
|
||||
},
|
||||
makeIndented: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
rows = table.rows,
|
||||
firstCell = $(rows).first().find('td:first')[0],
|
||||
indentLevel = 0,
|
||||
cellWidth = 0,
|
||||
longestCell,
|
||||
tableStyle;
|
||||
|
||||
if ($(table).hasClass('indtd'))
|
||||
return null;
|
||||
|
||||
tableStyle = $(table).addClass('indtd').attr('style');
|
||||
$(table).css({whiteSpace: "nowrap"});
|
||||
|
||||
for (var w = 0; w < rows.length; w++) {
|
||||
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||
longestCell = w;
|
||||
}
|
||||
}
|
||||
$(firstCell).css({width: 'auto'});
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||
tableStyle && $(table).css(tableStyle);
|
||||
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||
|
||||
config.hierarchyLevel
|
||||
&& $(rows).each(function () {
|
||||
indentLevel = $(this).data('level') || 0;
|
||||
indentLevel <= config.hierarchyLevel
|
||||
&& $(this).data('level', indentLevel)
|
||||
|| $(this).data('level', 0);
|
||||
for (var i = 0; i < $(this).data('level'); i++)
|
||||
$(this).find('td:first').prepend(config.indentArtifact);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||
makeDraggable: function(table) {
|
||||
var config = table.tableDnDConfig;
|
||||
|
||||
config.dragHandle
|
||||
// We only need to add the event to the specified cells
|
||||
&& $(config.dragHandle, table).each(function() {
|
||||
// The cell is bound to "this"
|
||||
$(this).bind(startEvent, function(e) {
|
||||
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||
return false;
|
||||
});
|
||||
})
|
||||
// For backwards compatibility, we add the event to the whole row
|
||||
// get all the rows as a wrapped set
|
||||
|| $(table.rows).each(function() {
|
||||
// Iterate through each row, the row is bound to "this"
|
||||
if (! $(this).hasClass("nodrag")) {
|
||||
$(this).bind(startEvent, function(e) {
|
||||
if (e.target.tagName == "TD") {
|
||||
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||
return false;
|
||||
}
|
||||
}).css("cursor", "move"); // Store the tableDnD object
|
||||
}
|
||||
});
|
||||
},
|
||||
currentOrder: function() {
|
||||
var rows = this.currentTable.rows;
|
||||
return $.map(rows, function (val) {
|
||||
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||
}).join('');
|
||||
},
|
||||
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||
this.dragObject = dragObject;
|
||||
this.currentTable = table;
|
||||
this.mouseOffset = this.getMouseOffset(target, e);
|
||||
this.originalOrder = this.currentOrder();
|
||||
|
||||
// Now we need to capture the mouse up and mouse move event
|
||||
// We can use bind so that we don't interfere with other event handlers
|
||||
$(document)
|
||||
.bind(moveEvent, this.mousemove)
|
||||
.bind(endEvent, this.mouseup);
|
||||
|
||||
// Call the onDragStart method if there is one
|
||||
config.onDragStart
|
||||
&& config.onDragStart(table, target);
|
||||
},
|
||||
updateTables: function() {
|
||||
this.each(function() {
|
||||
// this is now bound to each matching table
|
||||
if (this.tableDnDConfig)
|
||||
$.tableDnD.makeDraggable(this);
|
||||
});
|
||||
},
|
||||
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||
mouseCoords: function(e) {
|
||||
if(e.pageX || e.pageY)
|
||||
return {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
|
||||
return {
|
||||
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||
};
|
||||
},
|
||||
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||
To do this we need the element's position and the mouse position */
|
||||
getMouseOffset: function(target, e) {
|
||||
var mousePos,
|
||||
docPos;
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
docPos = this.getPosition(target);
|
||||
mousePos = this.mouseCoords(e);
|
||||
|
||||
return {
|
||||
x: mousePos.x - docPos.x,
|
||||
y: mousePos.y - docPos.y
|
||||
};
|
||||
},
|
||||
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||
getPosition: function(element) {
|
||||
var left = 0,
|
||||
top = 0;
|
||||
|
||||
// Safari fix -- thanks to Luis Chato for this!
|
||||
// Safari 2 doesn't correctly grab the offsetTop of a table row
|
||||
// this is detailed here:
|
||||
// http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
|
||||
// the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
|
||||
// note that firefox will return a text node as a first child, so designing a more thorough
|
||||
// solution may need to take that into account, for now this seems to work in firefox, safari, ie
|
||||
if (element.offsetHeight == 0)
|
||||
element = element.firstChild; // a table cell
|
||||
|
||||
while (element.offsetParent) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
},
|
||||
autoScroll: function (mousePos) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
yOffset = window.pageYOffset,
|
||||
windowHeight = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: document.body.clientHeight;
|
||||
|
||||
// Windows version
|
||||
// yOffset=document.body.scrollTop;
|
||||
if (document.all)
|
||||
if (typeof document.compatMode != 'undefined'
|
||||
&& document.compatMode != 'BackCompat')
|
||||
yOffset = document.documentElement.scrollTop;
|
||||
else if (typeof document.body != 'undefined')
|
||||
yOffset = document.body.scrollTop;
|
||||
|
||||
mousePos.y - yOffset < config.scrollAmount
|
||||
&& window.scrollBy(0, - config.scrollAmount)
|
||||
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||
&& window.scrollBy(0, config.scrollAmount);
|
||||
|
||||
},
|
||||
moveVerticle: function (moving, currentRow) {
|
||||
|
||||
if (0 != moving.vertical
|
||||
// If we're over a row then move the dragged row to there so that the user sees the
|
||||
// effect dynamically
|
||||
&& currentRow
|
||||
&& this.dragObject != currentRow
|
||||
&& this.dragObject.parentNode == currentRow.parentNode)
|
||||
0 > moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||
|| 0 < moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||
|
||||
},
|
||||
moveHorizontal: function (moving, currentRow) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
currentLevel;
|
||||
|
||||
if (!config.hierarchyLevel
|
||||
|| 0 == moving.horizontal
|
||||
// We only care if moving left or right on the current row
|
||||
|| !currentRow
|
||||
|| this.dragObject != currentRow)
|
||||
return null;
|
||||
|
||||
currentLevel = $(currentRow).data('level');
|
||||
|
||||
0 < moving.horizontal
|
||||
&& currentLevel > 0
|
||||
&& $(currentRow).find('td:first').children(':first').remove()
|
||||
&& $(currentRow).data('level', --currentLevel);
|
||||
|
||||
0 > moving.horizontal
|
||||
&& currentLevel < config.hierarchyLevel
|
||||
&& $(currentRow).prev().data('level') >= currentLevel
|
||||
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||
&& $(currentRow).data('level', ++currentLevel);
|
||||
|
||||
},
|
||||
mousemove: function(e) {
|
||||
var dragObj = $($.tableDnD.dragObject),
|
||||
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||
currentRow,
|
||||
mousePos,
|
||||
moving,
|
||||
x,
|
||||
y;
|
||||
|
||||
e && e.preventDefault();
|
||||
|
||||
if (!$.tableDnD.dragObject)
|
||||
return false;
|
||||
|
||||
// prevent touch device screen scrolling
|
||||
e.type == 'touchmove'
|
||||
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||
|
||||
// update the style to show we're dragging
|
||||
config.onDragClass
|
||||
&& dragObj.addClass(config.onDragClass)
|
||||
|| dragObj.css(config.onDragStyle);
|
||||
|
||||
mousePos = $.tableDnD.mouseCoords(e);
|
||||
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||
|
||||
// auto scroll the window
|
||||
$.tableDnD.autoScroll(mousePos);
|
||||
|
||||
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||
moving = $.tableDnD.findDragDirection(x, y);
|
||||
|
||||
$.tableDnD.moveVerticle(moving, currentRow);
|
||||
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||
|
||||
return false;
|
||||
},
|
||||
findDragDirection: function (x,y) {
|
||||
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||
oldX = this.oldX,
|
||||
oldY = this.oldY,
|
||||
xMin = oldX - sensitivity,
|
||||
xMax = oldX + sensitivity,
|
||||
yMin = oldY - sensitivity,
|
||||
yMax = oldY + sensitivity,
|
||||
moving = {
|
||||
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||
};
|
||||
|
||||
// update the old value
|
||||
if (moving.horizontal != 0)
|
||||
this.oldX = x;
|
||||
if (moving.vertical != 0)
|
||||
this.oldY = y;
|
||||
|
||||
return moving;
|
||||
},
|
||||
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||
findDropTargetRow: function(draggedRow, y) {
|
||||
var rowHeight = 0,
|
||||
rows = this.currentTable.rows,
|
||||
config = this.currentTable.tableDnDConfig,
|
||||
rowY = 0,
|
||||
row = null;
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
rowY = this.getPosition(row).y;
|
||||
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||
if (row.offsetHeight == 0) {
|
||||
rowY = this.getPosition(row.firstChild).y;
|
||||
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||
}
|
||||
// Because we always have to insert before, we need to offset the height a bit
|
||||
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||
// that's the row we're over
|
||||
// If it's the same as the current row, ignore it
|
||||
if (row == draggedRow
|
||||
|| (config.onAllowDrop
|
||||
&& !config.onAllowDrop(draggedRow, row))
|
||||
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||
|| $(row).hasClass("nodrop"))
|
||||
return null;
|
||||
else
|
||||
return row;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
processMouseup: function() {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
droppedRow = this.dragObject,
|
||||
parentLevel = 0,
|
||||
myLevel = 0;
|
||||
|
||||
if (!this.currentTable || !droppedRow)
|
||||
return null;
|
||||
|
||||
// Unbind the event handlers
|
||||
$(document)
|
||||
.unbind(moveEvent, this.mousemove)
|
||||
.unbind(endEvent, this.mouseup);
|
||||
|
||||
config.hierarchyLevel
|
||||
&& config.autoCleanRelations
|
||||
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||
myLevel = $(this).parents('tr:first').data('level');
|
||||
myLevel
|
||||
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||
&& $(this).remove();
|
||||
})
|
||||
&& config.hierarchyLevel > 1
|
||||
&& $(this.currentTable.rows).each(function () {
|
||||
myLevel = $(this).data('level');
|
||||
if (myLevel > 1) {
|
||||
parentLevel = $(this).prev().data('level');
|
||||
while (myLevel > parentLevel + 1) {
|
||||
$(this).find('td:first').children(':first').remove();
|
||||
$(this).data('level', --myLevel);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we have a dragObject, then we need to release it,
|
||||
// The row will already have been moved to the right place so we just reset stuff
|
||||
config.onDragClass
|
||||
&& $(droppedRow).removeClass(config.onDragClass)
|
||||
|| $(droppedRow).css(config.onDropStyle);
|
||||
|
||||
this.dragObject = null;
|
||||
// Call the onDrop method if there is one
|
||||
config.onDrop
|
||||
&& this.originalOrder != this.currentOrder()
|
||||
&& $(droppedRow).hide().fadeIn('fast')
|
||||
&& config.onDrop(this.currentTable, droppedRow);
|
||||
|
||||
this.currentTable = null; // let go of the table too
|
||||
},
|
||||
mouseup: function(e) {
|
||||
e && e.preventDefault();
|
||||
$.tableDnD.processMouseup();
|
||||
return false;
|
||||
},
|
||||
jsonize: function(pretify) {
|
||||
var table = this.currentTable;
|
||||
if (pretify)
|
||||
return JSON.stringify(
|
||||
this.tableData(table),
|
||||
null,
|
||||
table.tableDnDConfig.jsonPretifySeparator
|
||||
);
|
||||
return JSON.stringify(this.tableData(table));
|
||||
},
|
||||
serialize: function() {
|
||||
return $.param(this.tableData(this.currentTable));
|
||||
},
|
||||
serializeTable: function(table) {
|
||||
var result = "";
|
||||
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||
var rows = table.rows;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
if (result.length > 0) result += "&";
|
||||
var rowId = rows[i].id;
|
||||
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||
result += paramName + '[]=' + rowId;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
serializeTables: function() {
|
||||
var result = [];
|
||||
$('table').each(function() {
|
||||
this.id && result.push($.param(this.tableData(this)));
|
||||
});
|
||||
return result.join('&');
|
||||
},
|
||||
tableData: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
previousIDs = [],
|
||||
currentLevel = 0,
|
||||
indentLevel = 0,
|
||||
rowID = null,
|
||||
data = {},
|
||||
getSerializeRegexp,
|
||||
paramName,
|
||||
currentID,
|
||||
rows;
|
||||
|
||||
if (!table)
|
||||
table = this.currentTable;
|
||||
if (!table || !table.id || !table.rows || !table.rows.length)
|
||||
return {error: { code: 500, message: "Not a valid table, no serializable unique id provided."}};
|
||||
|
||||
rows = config.autoCleanRelations
|
||||
&& table.rows
|
||||
|| $.makeArray(table.rows);
|
||||
paramName = config.serializeParamName || table.id;
|
||||
currentID = paramName;
|
||||
|
||||
getSerializeRegexp = function (rowId) {
|
||||
if (rowId && config && config.serializeRegexp)
|
||||
return rowId.match(config.serializeRegexp)[0];
|
||||
return rowId;
|
||||
};
|
||||
|
||||
data[currentID] = [];
|
||||
!config.autoCleanRelations
|
||||
&& $(rows[0]).data('level')
|
||||
&& rows.unshift({id: 'undefined'});
|
||||
|
||||
|
||||
|
||||
for (var i=0; i < rows.length; i++) {
|
||||
if (config.hierarchyLevel) {
|
||||
indentLevel = $(rows[i]).data('level') || 0;
|
||||
if (indentLevel == 0) {
|
||||
currentID = paramName;
|
||||
previousIDs = [];
|
||||
}
|
||||
else if (indentLevel > currentLevel) {
|
||||
previousIDs.push([currentID, currentLevel]);
|
||||
currentID = getSerializeRegexp(rows[i-1].id);
|
||||
}
|
||||
else if (indentLevel < currentLevel) {
|
||||
for (var h = 0; h < previousIDs.length; h++) {
|
||||
if (previousIDs[h][1] == indentLevel)
|
||||
currentID = previousIDs[h][0];
|
||||
if (previousIDs[h][1] >= currentLevel)
|
||||
previousIDs[h][1] = 0;
|
||||
}
|
||||
}
|
||||
currentLevel = indentLevel;
|
||||
|
||||
if (!$.isArray(data[currentID]))
|
||||
data[currentID] = [];
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
else {
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
window.jQuery.fn.extend(
|
||||
{
|
||||
tableDnD : $.tableDnD.build,
|
||||
tableDnDUpdate : $.tableDnD.updateTables,
|
||||
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||
}
|
||||
);
|
||||
|
||||
}(window.jQuery, window, window.document);
|
||||
591
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.js
Normal file
591
enginiptv/panel/plugins/tablednd/js/jquery.tablednd.js
Normal file
@@ -0,0 +1,591 @@
|
||||
/**
|
||||
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||
* You can set up various options to control how the system will work
|
||||
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||
* License: MIT.
|
||||
* See https://github.com/isocra/TableDnD
|
||||
*/
|
||||
|
||||
/*jshint -W054 */
|
||||
|
||||
!function ($, window, document, undefined) {
|
||||
|
||||
var startEvent = 'touchstart mousedown',
|
||||
moveEvent = 'touchmove mousemove',
|
||||
endEvent = 'touchend mouseup';
|
||||
|
||||
$(document).ready(function () {
|
||||
function parseStyle(css) {
|
||||
var objMap = {},
|
||||
parts = css.match(/([^;:]+)/g) || [];
|
||||
while (parts.length)
|
||||
objMap[parts.shift()] = parts.shift().trim();
|
||||
|
||||
return objMap;
|
||||
}
|
||||
$('table').each(function () {
|
||||
if ($(this).data('table') === 'dnd') {
|
||||
|
||||
$(this).tableDnD({
|
||||
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||
onDragClass: $(this).data('ondragclass') === undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||
onDragStop: $(this).data('ondragstop') && new Function('table', 'row' ,$(this).data('ondragstop')),
|
||||
scrollAmount: $(this).data('scrollamount') || 5,
|
||||
sensitivity: $(this).data('sensitivity') || 10,
|
||||
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||
serializeParamName: $(this).data('serializeparamname') || false,
|
||||
dragHandle: $(this).data('draghandle') || null
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
jQuery.tableDnD = {
|
||||
/** Keep hold of the current table being dragged */
|
||||
currentTable: null,
|
||||
/** Keep hold of the current drag object if any */
|
||||
dragObject: null,
|
||||
/** The current mouse offset */
|
||||
mouseOffset: null,
|
||||
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||
oldX: 0,
|
||||
oldY: 0,
|
||||
|
||||
/** Actually build the structure */
|
||||
build: function(options) {
|
||||
// Set up the defaults if any
|
||||
|
||||
this.each(function() {
|
||||
// This is bound to each matching table, set up the defaults and override with user options
|
||||
this.tableDnDConfig = $.extend({
|
||||
onDragStyle: null,
|
||||
onDropStyle: null,
|
||||
// Add in the default class for whileDragging
|
||||
onDragClass: "tDnD_whileDrag",
|
||||
onDrop: null,
|
||||
onDragStart: null,
|
||||
onDragStop: null,
|
||||
scrollAmount: 5,
|
||||
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||
sensitivity: 10,
|
||||
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||
hierarchyLevel: 0,
|
||||
/** The html artifact to prepend the first cell with as indentation */
|
||||
indentArtifact: '<div class="indent"> </div>',
|
||||
/** Automatically adjust width of first cell */
|
||||
autoWidthAdjust: true,
|
||||
/** Automatic clean-up to ensure relationship integrity */
|
||||
autoCleanRelations: true,
|
||||
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||
jsonPretifySeparator: '\t',
|
||||
/** The regular expression to use to trim row IDs */
|
||||
serializeRegexp: /[^\-]*$/,
|
||||
/** If you want to specify another parameter name instead of the table ID */
|
||||
serializeParamName: false,
|
||||
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||
dragHandle: null
|
||||
}, options || {});
|
||||
|
||||
// Now make the rows draggable
|
||||
$.tableDnD.makeDraggable(this);
|
||||
// Prepare hierarchy support
|
||||
this.tableDnDConfig.hierarchyLevel
|
||||
&& $.tableDnD.makeIndented(this);
|
||||
});
|
||||
|
||||
// Don't break the chain
|
||||
return this;
|
||||
},
|
||||
makeIndented: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
rows = table.rows,
|
||||
firstCell = $(rows).first().find('td:first')[0],
|
||||
indentLevel = 0,
|
||||
cellWidth = 0,
|
||||
longestCell,
|
||||
tableStyle;
|
||||
|
||||
if ($(table).hasClass('indtd'))
|
||||
return null;
|
||||
|
||||
tableStyle = $(table).addClass('indtd').attr('style');
|
||||
$(table).css({whiteSpace: "nowrap"});
|
||||
|
||||
for (var w = 0; w < rows.length; w++) {
|
||||
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||
longestCell = w;
|
||||
}
|
||||
}
|
||||
$(firstCell).css({width: 'auto'});
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||
tableStyle && $(table).css(tableStyle);
|
||||
|
||||
for (w = 0; w < config.hierarchyLevel; w++)
|
||||
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||
|
||||
config.hierarchyLevel
|
||||
&& $(rows).each(function () {
|
||||
indentLevel = $(this).data('level') || 0;
|
||||
indentLevel <= config.hierarchyLevel
|
||||
&& $(this).data('level', indentLevel)
|
||||
|| $(this).data('level', 0);
|
||||
for (var i = 0; i < $(this).data('level'); i++)
|
||||
$(this).find('td:first').prepend(config.indentArtifact);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||
makeDraggable: function(table) {
|
||||
var config = table.tableDnDConfig;
|
||||
|
||||
config.dragHandle
|
||||
// We only need to add the event to the specified cells
|
||||
&& $(config.dragHandle, table).each(function() {
|
||||
// The cell is bound to "this"
|
||||
$(this).bind(startEvent, function(e) {
|
||||
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||
return false;
|
||||
});
|
||||
})
|
||||
// For backwards compatibility, we add the event to the whole row
|
||||
// get all the rows as a wrapped set
|
||||
|| $(table.rows).each(function() {
|
||||
// Iterate through each row, the row is bound to "this"
|
||||
if (! $(this).hasClass("nodrag")) {
|
||||
$(this).bind(startEvent, function(e) {
|
||||
if (e.target.tagName === "TD") {
|
||||
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||
return false;
|
||||
}
|
||||
}).css("cursor", "move"); // Store the tableDnD object
|
||||
} else {
|
||||
$(this).css("cursor", ""); // Remove the cursor if we don't have the nodrag class
|
||||
}
|
||||
});
|
||||
},
|
||||
currentOrder: function() {
|
||||
var rows = this.currentTable.rows;
|
||||
return $.map(rows, function (val) {
|
||||
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||
}).join('');
|
||||
},
|
||||
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||
this.dragObject = dragObject;
|
||||
this.currentTable = table;
|
||||
this.mouseOffset = this.getMouseOffset(target, e);
|
||||
this.originalOrder = this.currentOrder();
|
||||
|
||||
// Now we need to capture the mouse up and mouse move event
|
||||
// We can use bind so that we don't interfere with other event handlers
|
||||
$(document)
|
||||
.bind(moveEvent, this.mousemove)
|
||||
.bind(endEvent, this.mouseup);
|
||||
|
||||
// Call the onDragStart method if there is one
|
||||
config.onDragStart
|
||||
&& config.onDragStart(table, target);
|
||||
},
|
||||
updateTables: function() {
|
||||
this.each(function() {
|
||||
// this is now bound to each matching table
|
||||
if (this.tableDnDConfig)
|
||||
$.tableDnD.makeDraggable(this);
|
||||
});
|
||||
},
|
||||
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||
mouseCoords: function(e) {
|
||||
if (e.originalEvent.changedTouches)
|
||||
return {
|
||||
x: e.originalEvent.changedTouches[0].clientX,
|
||||
y: e.originalEvent.changedTouches[0].clientY
|
||||
};
|
||||
|
||||
if(e.pageX || e.pageY)
|
||||
return {
|
||||
x: e.pageX,
|
||||
y: e.pageY
|
||||
};
|
||||
|
||||
return {
|
||||
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||
};
|
||||
},
|
||||
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||
To do this we need the element's position and the mouse position */
|
||||
getMouseOffset: function(target, e) {
|
||||
var mousePos,
|
||||
docPos;
|
||||
|
||||
e = e || window.event;
|
||||
|
||||
docPos = this.getPosition(target);
|
||||
mousePos = this.mouseCoords(e);
|
||||
|
||||
return {
|
||||
x: mousePos.x - docPos.x,
|
||||
y: mousePos.y - docPos.y
|
||||
};
|
||||
},
|
||||
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||
getPosition: function(element) {
|
||||
var left = 0,
|
||||
top = 0;
|
||||
|
||||
while (element.offsetParent) {
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
|
||||
left += element.offsetLeft;
|
||||
top += element.offsetTop;
|
||||
|
||||
return {
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
},
|
||||
autoScroll: function (mousePos) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
yOffset = window.pageYOffset,
|
||||
windowHeight = window.innerHeight
|
||||
? window.innerHeight
|
||||
: document.documentElement.clientHeight
|
||||
? document.documentElement.clientHeight
|
||||
: document.body.clientHeight;
|
||||
|
||||
// Windows version
|
||||
// yOffset=document.body.scrollTop;
|
||||
if (document.all)
|
||||
if (typeof document.compatMode !== 'undefined'
|
||||
&& document.compatMode !== 'BackCompat')
|
||||
yOffset = document.documentElement.scrollTop;
|
||||
else if (typeof document.body !== 'undefined')
|
||||
yOffset = document.body.scrollTop;
|
||||
|
||||
mousePos.y - yOffset < config.scrollAmount
|
||||
&& window.scrollBy(0, - config.scrollAmount)
|
||||
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||
&& window.scrollBy(0, config.scrollAmount);
|
||||
|
||||
},
|
||||
moveVerticle: function (moving, currentRow) {
|
||||
|
||||
if (0 !== moving.vertical
|
||||
// If we're over a row then move the dragged row to there so that the user sees the
|
||||
// effect dynamically
|
||||
&& currentRow
|
||||
&& this.dragObject !== currentRow
|
||||
&& this.dragObject.parentNode === currentRow.parentNode)
|
||||
0 > moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||
|| 0 < moving.vertical
|
||||
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||
|
||||
},
|
||||
moveHorizontal: function (moving, currentRow) {
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
currentLevel;
|
||||
|
||||
if (!config.hierarchyLevel
|
||||
|| 0 === moving.horizontal
|
||||
// We only care if moving left or right on the current row
|
||||
|| !currentRow
|
||||
|| this.dragObject !== currentRow)
|
||||
return null;
|
||||
|
||||
currentLevel = $(currentRow).data('level');
|
||||
|
||||
0 < moving.horizontal
|
||||
&& currentLevel > 0
|
||||
&& $(currentRow).find('td:first').children(':first').remove()
|
||||
&& $(currentRow).data('level', --currentLevel);
|
||||
|
||||
0 > moving.horizontal
|
||||
&& currentLevel < config.hierarchyLevel
|
||||
&& $(currentRow).prev().data('level') >= currentLevel
|
||||
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||
&& $(currentRow).data('level', ++currentLevel);
|
||||
|
||||
},
|
||||
mousemove: function(e) {
|
||||
var dragObj = $($.tableDnD.dragObject),
|
||||
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||
currentRow,
|
||||
mousePos,
|
||||
moving,
|
||||
x,
|
||||
y;
|
||||
|
||||
e && e.preventDefault();
|
||||
|
||||
if (!$.tableDnD.dragObject)
|
||||
return false;
|
||||
|
||||
// prevent touch device screen scrolling
|
||||
e.type === 'touchmove'
|
||||
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||
|
||||
// update the style to show we're dragging
|
||||
config.onDragClass
|
||||
&& dragObj.addClass(config.onDragClass)
|
||||
|| dragObj.css(config.onDragStyle);
|
||||
|
||||
mousePos = $.tableDnD.mouseCoords(e);
|
||||
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||
|
||||
// auto scroll the window
|
||||
$.tableDnD.autoScroll(mousePos);
|
||||
|
||||
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||
moving = $.tableDnD.findDragDirection(x, y);
|
||||
|
||||
$.tableDnD.moveVerticle(moving, currentRow);
|
||||
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||
|
||||
return false;
|
||||
},
|
||||
findDragDirection: function (x,y) {
|
||||
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||
oldX = this.oldX,
|
||||
oldY = this.oldY,
|
||||
xMin = oldX - sensitivity,
|
||||
xMax = oldX + sensitivity,
|
||||
yMin = oldY - sensitivity,
|
||||
yMax = oldY + sensitivity,
|
||||
moving = {
|
||||
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||
};
|
||||
|
||||
// update the old value
|
||||
if (moving.horizontal !== 0)
|
||||
this.oldX = x;
|
||||
if (moving.vertical !== 0)
|
||||
this.oldY = y;
|
||||
|
||||
return moving;
|
||||
},
|
||||
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||
findDropTargetRow: function(draggedRow, y) {
|
||||
var rowHeight = 0,
|
||||
rows = this.currentTable.rows,
|
||||
config = this.currentTable.tableDnDConfig,
|
||||
rowY = 0,
|
||||
row = null;
|
||||
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
row = rows[i];
|
||||
rowY = this.getPosition(row).y;
|
||||
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||
if (row.offsetHeight === 0) {
|
||||
rowY = this.getPosition(row.firstChild).y;
|
||||
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||
}
|
||||
// Because we always have to insert before, we need to offset the height a bit
|
||||
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||
// that's the row we're over
|
||||
// If it's the same as the current row, ignore it
|
||||
if (draggedRow.is(row)
|
||||
|| (config.onAllowDrop
|
||||
&& !config.onAllowDrop(draggedRow, row))
|
||||
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||
|| $(row).hasClass("nodrop"))
|
||||
return null;
|
||||
else
|
||||
return row;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
processMouseup: function() {
|
||||
if (!this.currentTable || !this.dragObject)
|
||||
return null;
|
||||
|
||||
var config = this.currentTable.tableDnDConfig,
|
||||
droppedRow = this.dragObject,
|
||||
parentLevel = 0,
|
||||
myLevel = 0;
|
||||
|
||||
// Unbind the event handlers
|
||||
$(document)
|
||||
.unbind(moveEvent, this.mousemove)
|
||||
.unbind(endEvent, this.mouseup);
|
||||
|
||||
config.hierarchyLevel
|
||||
&& config.autoCleanRelations
|
||||
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||
myLevel = $(this).parents('tr:first').data('level');
|
||||
myLevel
|
||||
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||
&& $(this).remove();
|
||||
})
|
||||
&& config.hierarchyLevel > 1
|
||||
&& $(this.currentTable.rows).each(function () {
|
||||
myLevel = $(this).data('level');
|
||||
if (myLevel > 1) {
|
||||
parentLevel = $(this).prev().data('level');
|
||||
while (myLevel > parentLevel + 1) {
|
||||
$(this).find('td:first').children(':first').remove();
|
||||
$(this).data('level', --myLevel);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// If we have a dragObject, then we need to release it,
|
||||
// The row will already have been moved to the right place so we just reset stuff
|
||||
config.onDragClass
|
||||
&& $(droppedRow).removeClass(config.onDragClass)
|
||||
|| $(droppedRow).css(config.onDropStyle);
|
||||
|
||||
this.dragObject = null;
|
||||
// Call the onDrop method if there is one
|
||||
config.onDrop
|
||||
&& this.originalOrder !== this.currentOrder()
|
||||
&& $(droppedRow).hide().fadeIn('fast')
|
||||
&& config.onDrop(this.currentTable, droppedRow);
|
||||
|
||||
// Call the onDragStop method if there is one
|
||||
config.onDragStop
|
||||
&& config.onDragStop(this.currentTable, droppedRow);
|
||||
|
||||
this.currentTable = null; // let go of the table too
|
||||
},
|
||||
mouseup: function(e) {
|
||||
e && e.preventDefault();
|
||||
$.tableDnD.processMouseup();
|
||||
return false;
|
||||
},
|
||||
jsonize: function(pretify) {
|
||||
var table = this.currentTable;
|
||||
if (pretify)
|
||||
return JSON.stringify(
|
||||
this.tableData(table),
|
||||
null,
|
||||
table.tableDnDConfig.jsonPretifySeparator
|
||||
);
|
||||
return JSON.stringify(this.tableData(table));
|
||||
},
|
||||
serialize: function() {
|
||||
return $.param(this.tableData(this.currentTable));
|
||||
},
|
||||
serializeTable: function(table) {
|
||||
var result = "";
|
||||
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||
var rows = table.rows;
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
if (result.length > 0) result += "&";
|
||||
var rowId = rows[i].id;
|
||||
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||
result += paramName + '[]=' + rowId;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
serializeTables: function() {
|
||||
var result = [];
|
||||
$('table').each(function() {
|
||||
this.id && result.push($.param($.tableDnD.tableData(this)));
|
||||
});
|
||||
return result.join('&');
|
||||
},
|
||||
tableData: function (table) {
|
||||
var config = table.tableDnDConfig,
|
||||
previousIDs = [],
|
||||
currentLevel = 0,
|
||||
indentLevel = 0,
|
||||
rowID = null,
|
||||
data = {},
|
||||
getSerializeRegexp,
|
||||
paramName,
|
||||
currentID,
|
||||
rows;
|
||||
|
||||
if (!table)
|
||||
table = this.currentTable;
|
||||
if (!table || !table.rows || !table.rows.length)
|
||||
return {error: { code: 500, message: "Not a valid table."}};
|
||||
if (!table.id && !config.serializeParamName)
|
||||
return {error: { code: 500, message: "No serializable unique id provided."}};
|
||||
|
||||
rows = config.autoCleanRelations
|
||||
&& table.rows
|
||||
|| $.makeArray(table.rows);
|
||||
paramName = config.serializeParamName || table.id;
|
||||
currentID = paramName;
|
||||
|
||||
getSerializeRegexp = function (rowId) {
|
||||
if (rowId && config && config.serializeRegexp)
|
||||
return rowId.match(config.serializeRegexp)[0];
|
||||
return rowId;
|
||||
};
|
||||
|
||||
data[currentID] = [];
|
||||
!config.autoCleanRelations
|
||||
&& $(rows[0]).data('level')
|
||||
&& rows.unshift({id: 'undefined'});
|
||||
|
||||
|
||||
|
||||
for (var i=0; i < rows.length; i++) {
|
||||
if (config.hierarchyLevel) {
|
||||
indentLevel = $(rows[i]).data('level') || 0;
|
||||
if (indentLevel === 0) {
|
||||
currentID = paramName;
|
||||
previousIDs = [];
|
||||
}
|
||||
else if (indentLevel > currentLevel) {
|
||||
previousIDs.push([currentID, currentLevel]);
|
||||
currentID = getSerializeRegexp(rows[i-1].id);
|
||||
}
|
||||
else if (indentLevel < currentLevel) {
|
||||
for (var h = 0; h < previousIDs.length; h++) {
|
||||
if (previousIDs[h][1] === indentLevel)
|
||||
currentID = previousIDs[h][0];
|
||||
if (previousIDs[h][1] >= currentLevel)
|
||||
previousIDs[h][1] = 0;
|
||||
}
|
||||
}
|
||||
currentLevel = indentLevel;
|
||||
|
||||
if (!$.isArray(data[currentID]))
|
||||
data[currentID] = [];
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
else {
|
||||
rowID = getSerializeRegexp(rows[i].id);
|
||||
rowID && data[currentID].push(rowID);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
jQuery.fn.extend(
|
||||
{
|
||||
tableDnD : $.tableDnD.build,
|
||||
tableDnDUpdate : $.tableDnD.updateTables,
|
||||
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||
}
|
||||
);
|
||||
|
||||
}(jQuery, window, window.document);
|
||||
35
enginiptv/panel/plugins/tablednd/package.json
Normal file
35
enginiptv/panel/plugins/tablednd/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "tablednd",
|
||||
"version": "1.0.4",
|
||||
"description": "JQuery plugin for dragging and droping rows in a table",
|
||||
"main": "Gruntfile.js",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"grunt": "^0.4.5",
|
||||
"grunt-contrib-jshint": "^0.10.0",
|
||||
"grunt-contrib-uglify": "^0.6.0",
|
||||
"jshint": "^2.9.3",
|
||||
"release-it": "^5.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "grunt test",
|
||||
"release": "release-it"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/isocra/TableDnD.git"
|
||||
},
|
||||
"keywords": [
|
||||
"tablednd",
|
||||
"drag",
|
||||
"and",
|
||||
"drop",
|
||||
"jquery"
|
||||
],
|
||||
"author": "DenisH",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/isocra/TableDnD/issues"
|
||||
},
|
||||
"homepage": "https://github.com/isocra/TableDnD#readme"
|
||||
}
|
||||
13
enginiptv/panel/plugins/tablednd/server/ajaxJSONTest.php
Normal file
13
enginiptv/panel/plugins/tablednd/server/ajaxJSONTest.php
Normal file
@@ -0,0 +1,13 @@
|
||||
The server says: your row order was<br/>
|
||||
<?php
|
||||
$result = json_decode(file_get_contents('php://input'), true);
|
||||
show_results($result, "table-7");
|
||||
function show_results($result, $id, $indent = null) {
|
||||
foreach($result[$id] as $value) {
|
||||
echo "$indent$value<br/>";
|
||||
if (isset($result["$value"]))
|
||||
show_results($result, $value, $indent.implode(' ', array_fill(0, 12, '')));
|
||||
}
|
||||
}
|
||||
?>
|
||||
See the <a href="server/ajaxJSONTest_php.html" target="_BLANK">PHP Source</a><br/>
|
||||
@@ -0,0 +1,3 @@
|
||||
<code><span style="color: #000000">
|
||||
The server says: your row order was<br/><br /><span style="color: #0000BB"><?php<br />$result </span><span style="color: #007700">= </span><span style="color: #0000BB">json_decode</span><span style="color: #007700">(</span><span style="color: #0000BB">file_get_contents</span><span style="color: #007700">(</span><span style="color: #DD0000">'php://input'</span><span style="color: #007700">), </span><span style="color: #0000BB">true</span><span style="color: #007700">);<br /></span><span style="color: #0000BB">show_results</span><span style="color: #007700">(</span><span style="color: #0000BB">$result</span><span style="color: #007700">, </span><span style="color: #DD0000">"table-7"</span><span style="color: #007700">);<br />function </span><span style="color: #0000BB">show_results</span><span style="color: #007700">(</span><span style="color: #0000BB">$result</span><span style="color: #007700">, </span><span style="color: #0000BB">$id</span><span style="color: #007700">, </span><span style="color: #0000BB">$indent </span><span style="color: #007700">= </span><span style="color: #0000BB">null</span><span style="color: #007700">) {<br /> foreach(</span><span style="color: #0000BB">$result</span><span style="color: #007700">[</span><span style="color: #0000BB">$id</span><span style="color: #007700">] as </span><span style="color: #0000BB">$value</span><span style="color: #007700">) {<br /> echo </span><span style="color: #DD0000">"</span><span style="color: #0000BB">$indent$value</span><span style="color: #DD0000"><br/>"</span><span style="color: #007700">;<br /> if (isset(</span><span style="color: #0000BB">$result</span><span style="color: #007700">[</span><span style="color: #DD0000">"</span><span style="color: #0000BB">$value</span><span style="color: #DD0000">"</span><span style="color: #007700">]))<br /> </span><span style="color: #0000BB">show_results</span><span style="color: #007700">(</span><span style="color: #0000BB">$result</span><span style="color: #007700">, </span><span style="color: #0000BB">$value</span><span style="color: #007700">, </span><span style="color: #0000BB">$indent</span><span style="color: #007700">.</span><span style="color: #0000BB">implode</span><span style="color: #007700">(</span><span style="color: #DD0000">'&nbsp;'</span><span style="color: #007700">, </span><span style="color: #0000BB">array_fill</span><span style="color: #007700">(</span><span style="color: #0000BB">0</span><span style="color: #007700">, </span><span style="color: #0000BB">12</span><span style="color: #007700">, </span><span style="color: #DD0000">''</span><span style="color: #007700">)));<br /> }<br />}<br /></span><span style="color: #0000BB">?><br /></span>See the <a href="server/ajaxJSONTest_php.html" target="_BLANK">PHP Source</a><br/><br /></span>
|
||||
</code>
|
||||
8
enginiptv/panel/plugins/tablednd/server/ajaxTest.php
Normal file
8
enginiptv/panel/plugins/tablednd/server/ajaxTest.php
Normal file
@@ -0,0 +1,8 @@
|
||||
The server says: your row order was<br/>
|
||||
<?php
|
||||
$result = $_REQUEST["table-3"];
|
||||
foreach($result as $value) {
|
||||
echo "$value<br/>";
|
||||
}
|
||||
?>
|
||||
See the <a href="server/ajaxTest_php.html" target="_BLANK">PHP Source</a><br/>
|
||||
@@ -0,0 +1,4 @@
|
||||
<script ></script>
|
||||
<code><span style="color: #000000">
|
||||
The server says: your row order was<br/><br /><span style="color: #0000BB"><?php<br />$result </span><span style="color: #007700">= </span><span style="color: #0000BB">$_REQUEST</span><span style="color: #007700">[</span><span style="color: #DD0000">"table-3"</span><span style="color: #007700">];<br />foreach(</span><span style="color: #0000BB">$result </span><span style="color: #007700">as </span><span style="color: #0000BB">$value</span><span style="color: #007700">) {<br /> echo </span><span style="color: #DD0000">"</span><span style="color: #0000BB">$value</span><span style="color: #DD0000"><br/>"</span><span style="color: #007700">;<br />}<br /></span><span style="color: #0000BB">?><br /></span>See the <a href="server/ajaxTest_php.html" target="_BLANK">PHP Source</a><br/></span>
|
||||
</code>
|
||||
39
enginiptv/panel/plugins/tablednd/serverExample.html
Normal file
39
enginiptv/panel/plugins/tablednd/serverExample.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>TableDnD Server Example</title>
|
||||
<meta name="generator" content="TextMate http://macromates.com/">
|
||||
<meta name="author" content="DenisH">
|
||||
<link rel="stylesheet" href="tablednd.css" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table id="table-1" cellspacing="0" cellpadding="2">
|
||||
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
<button onclick="alert('Serialized table is: '+$('#table-1').tableDnDSerialize())">Serialize</button>
|
||||
<form action="serverTest.php" method="get" accept-charset="utf-8">
|
||||
<input type="hidden" name="....">
|
||||
// TODO serialise doesn't work very well with a form does it!!!
|
||||
|
||||
<p><input type="submit" value="Continue →"></p>
|
||||
</form>
|
||||
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<script src="js/jquery.tablednd.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function() {
|
||||
// Initialise the table
|
||||
$("#table-1").tableDnD();
|
||||
// Make a nice striped effect on the table
|
||||
$("#table-1 tr:even").addClass("alt");
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
294
enginiptv/panel/plugins/tablednd/stripe.html
Normal file
294
enginiptv/panel/plugins/tablednd/stripe.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Table Drag and Drop jQuery plugin</title>
|
||||
<link rel="stylesheet" href="tablednd.css" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<h1>Table Drag and Drop jQuery plugin</h1>
|
||||
<p>This page contains documentation and tests for the TableDnD jQuery plug-in. For more information and
|
||||
to post comments, please go to <a href="http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/">isocra.com</a>.
|
||||
</p>
|
||||
<p>If you have issues or bug reports, then you can post them at the <a href="http://plugins.jquery.com/project/issues/TableDnD">TableDnD plug page</a>
|
||||
at plugins.jquery.com</p>
|
||||
|
||||
<h2>How do I use it?</h2>
|
||||
<ol>
|
||||
<li>Download <a href="http://jquery.com">Download jQuery</a> (version 1.2 or above), then the <a href="/articles/jquery.tablednd.js.zip">TableDnD plugin</a> (current version 0.4).</li>
|
||||
<li>Reference both scripts in your HTML page in the normal way.</li>
|
||||
<li>In true jQuery style, the typical way to initialise the tabes is in the <code>$(document).ready</code> function. Use a selector to select your table and then call <code>tableDnD()</code>. You can optionally specify a set of properties (described below).</li>
|
||||
</ol>
|
||||
<div class="tableDemo">
|
||||
<div id="debug" style="float:right;"></div>
|
||||
<table id="table-1" cellspacing="0" cellpadding="2">
|
||||
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<p>The HTML for the table is very straight forward (no Javascript, pure HTML):</p>
|
||||
|
||||
<pre>
|
||||
<table id="table-1" cellspacing="0" cellpadding="2">
|
||||
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
</pre>
|
||||
<p>To add in the "draggability" all we need to do is add a line to the <code>$(document).ready(...)</code> function
|
||||
as follows:</p>
|
||||
<pre>
|
||||
<span class="comment"><script type="text/javascript"></span>
|
||||
$(document).ready(function() {
|
||||
<span class="comment">// Initialise the table</span>
|
||||
$("#table-1").tableDnD();
|
||||
});
|
||||
<span class="comment"></script></span>
|
||||
</pre>
|
||||
<p>In the example above we're not setting any parameters at all so we get the default settings. There are a number
|
||||
of parameters you can set in order to control the look and feel of the table and also to add custom behaviour
|
||||
on drag or on drop. The parameters are specified as a map in the usual way and are described below:</p>
|
||||
|
||||
<dl>
|
||||
<dt>onDragStyle</dt>
|
||||
<dd>This is the style that is assigned to the row during drag. There are limitations to the styles that can be
|
||||
associated with a row (such as you can't assign a border—well you can, but it won't be
|
||||
displayed). (So instead consider using <code>onDragClass</code>.) The CSS style to apply is specified as
|
||||
a map (as used in the jQuery <code>css(...)</code> function).</dd>
|
||||
<dt>onDropStyle</dt>
|
||||
<dd>This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
|
||||
to what you can do. Also this replaces the original style, so again consider using onDragClass which
|
||||
is simply added and then removed on drop.</dd>
|
||||
<dt>onDragClass</dt>
|
||||
<dd>This class is added for the duration of the drag and then removed when the row is dropped. It is more
|
||||
flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
|
||||
is class is <code>tDnD_whileDrag</code>. So to use the default, simply customise this CSS class in your
|
||||
stylesheet.</dd>
|
||||
<dt>onDrop</dt>
|
||||
<dd>Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
|
||||
and the row that was dropped. You can work out the new order of the rows by using
|
||||
<code>table.tBodies[0].rows</code>.</dd>
|
||||
<dt>onDragStart</dt>
|
||||
<dd>Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
|
||||
table and the row which the user has started to drag.</dd>
|
||||
<dt>scrollAmount</dt>
|
||||
<dd>This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
|
||||
window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
|
||||
FF3 beta)</dd>
|
||||
</dl>
|
||||
<p>This second table has has an onDrop function applied as well as an onDragClass. The javascript to set this up is
|
||||
as follows:</p>
|
||||
<pre>
|
||||
$(document).ready(function() {
|
||||
|
||||
// Initialise the first table (as before)
|
||||
$("#table-1").tableDnD();
|
||||
|
||||
// Make a nice striped effect on the table
|
||||
$("#table-2 tr:even').addClass('alt')");
|
||||
|
||||
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
|
||||
$("#table-2").tableDnD({
|
||||
onDragClass: "myDragClass",
|
||||
onDrop: function(table, row) {
|
||||
var rows = table.tBodies[0].rows;
|
||||
var debugStr = "Row dropped was "+row.id+". New order: ";
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
debugStr += rows[i].id+" ";
|
||||
}
|
||||
$(#debugArea).html(debugStr);
|
||||
},
|
||||
onDragStart: function(table, row) {
|
||||
$(#debugArea).html("Started dragging row "+row.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
</pre>
|
||||
<div class="tableDemo">
|
||||
<div id="debugArea" style="float: right"> </div>
|
||||
<table id="table-2" cellspacing="0" cellpadding="2">
|
||||
<tr id="2.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="2.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="2.3"><td>3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="2.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="2.5"><td>5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="2.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
<tr id="2.7"><td>7</td><td>Seven</td><td><input type="text" name="seven" value="7"/></td></tr>
|
||||
<tr id="2.8"><td>8</td><td>Eight</td><td><input type="text" name="eight" value="8"/></td></tr>
|
||||
<tr id="2.9"><td>9</td><td>Nine</td><td><input type="text" name="nine" value="9"/></td></tr>
|
||||
<tr id="2.10"><td>10</td><td>Ten</td><td><input type="text" name="ten" value="10"/></td></tr>
|
||||
<tr id="2.11"><td>11</td><td>Eleven</td><td><input type="text" name="eleven" value="11"/></td></tr>
|
||||
<tr id="2.12"><td>12</td><td>Twelve</td><td><input type="text" name="twelve" value="12"/></td></tr>
|
||||
<tr id="2.13"><td>13</td><td>Thirteen</td><td><input type="text" name="thirteen" value="13"/></td></tr>
|
||||
<tr id="2.14"><td>14</td><td>Fourteen</td><td><input type="text" name="fourteen" value="14"/></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<h2>What to do afterwards?</h2>
|
||||
<p>Generally once the user has dropped a row, you need to inform the server of the new order. To do this, we've
|
||||
added a method called <code>serialise()</code>. It takes no parameters but knows the current table from the
|
||||
context. The method returns a string of the form <code><i>tableId</i>[]=<i>rowId1</i>&<i>tableId</i>[]=<i>rowId2</i>&<i>tableId</i>[]=<i>rowId3</i>...</code>
|
||||
You can then use this as part of an Ajax load.
|
||||
</p>
|
||||
<p>This third table demonstrates calling the serialise function inside onDrop (as shown below). It also
|
||||
demonstrates the "nodrop" class on row 3 and "nodrag" class on row 5, so you can't pick up row 5 and
|
||||
you can't drop any row on row 3 (but you can drag it).</p>
|
||||
<pre>
|
||||
$('#table-3').tableDnD({
|
||||
onDrop: function(table, row) {
|
||||
alert($.tableDnD.serialize());
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
<div class="tableDemo">
|
||||
<div id="AjaxResult" style="float: right; width: 250px; border: 1px solid silver; padding: 4px; font-size: 90%">
|
||||
<h3>Ajax result</h3>
|
||||
<p>Drag and drop in this table to test out serialise and using JQuery.load()</p>
|
||||
</div>
|
||||
<table id="table-3" cellspacing="0" cellpadding="2">
|
||||
<tr id="3.1"><td>1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="3.2"><td>2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="3.3" class="nodrop"><td>3</td><td>Three (Can't drop on this row)</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="3.4"><td>4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="3.5" class="nodrag"><td>5</td><td>Five (Can't drag this row)</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="3.6"><td>6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<p>This table has multiple TBODYs. The functionality isn't quite working properly. You can only drag the rows inside their
|
||||
own TBODY, you can't drag them outside it. Now this might or might not be what you want, but unfortunately if you then drop a row outside its TBODY you get a Javascript error because inserting after a sibling doesn't work. This will be fixed in the next version. The header rows all have the classes "nodrop" and "nodrag" so that they can't be dragged or dropped on.</p>
|
||||
<div class="tableDemo">
|
||||
<table id="table-4" cellspacing="0" cellpadding="2">
|
||||
<tbody>
|
||||
<tr id="4.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
|
||||
<tr id="4.1"><td>4.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="4.2"><td>4.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="4.3"><td>4.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="4.4"><td>4.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="4.5"><td>4.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="4.6"><td>4.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr id="5.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
|
||||
<tr id="5.1"><td>5.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="5.2"><td>5.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="5.3"><td>5.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="5.4"><td>5.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="5.5"><td>5.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="5.6"><td>5.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr id="6.0" class="nodrop nodrag"><th>H1</th><th>H2</th><th>H3</th></tr>
|
||||
<tr id="6.1"><td>6.1</td><td>One</td><td><input type="text" name="one" value="one"/></td></tr>
|
||||
<tr id="6.2"><td>6.2</td><td>Two</td><td><input type="text" name="two" value="two"/></td></tr>
|
||||
<tr id="6.3"><td>6.3</td><td>Three</td><td><input type="text" name="three" value="three"/></td></tr>
|
||||
<tr id="6.4"><td>6.4</td><td>Four</td><td><input type="text" name="four" value="four"/></td></tr>
|
||||
<tr id="6.5"><td>6.5</td><td>Five</td><td><input type="text" name="five" value="five"/></td></tr>
|
||||
<tr id="6.6"><td>6.6</td><td>Six</td><td><input type="text" name="six" value="six"/></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>
|
||||
The following table demonstrates the use of the default regular expression. The rows have IDs of the
|
||||
form table5-row-1, table5-row-2, etc., but the regular expression is <code>/[^\-]*$/</code> (this is the same
|
||||
as used in the <a href="http://plugins.jquery.com/project/NestedSortable">NestedSortable</a> plugin for consistency).
|
||||
This removes everything before and including the last hyphen, so the serialised string just has 1, 2, 3 etc.
|
||||
You can replace the regular expression by setting the <code>serializeRegexp</code> option, you can also just set it
|
||||
to null to stop this behaviour.
|
||||
</p>
|
||||
<pre>
|
||||
$('#table-5').tableDnD({
|
||||
onDrop: function(table, row) {
|
||||
alert($.tableDnD.serialize());
|
||||
},
|
||||
dragHandle: "dragHandle"
|
||||
});
|
||||
</pre>
|
||||
<div class="tableDemo">
|
||||
<table id="table-5" cellspacing="0" cellpadding="2">
|
||||
<tr id="table5-row-1"><td class="dragHandle"> </td><td>1</td><td>One</td><td>some text</td></tr>
|
||||
<tr id="table5-row-2"><td class="dragHandle"> </td><td>2</td><td>Two</td><td>some text</td></tr>
|
||||
<tr id="table5-row-3"><td class="dragHandle"> </td><td>3</td><td>Three</td><td>some text</td></tr>
|
||||
<tr id="table5-row-4"><td class="dragHandle"> </td><td>4</td><td>Four</td><td>some text</td></tr>
|
||||
<tr id="table5-row-5"><td class="dragHandle"> </td><td>5</td><td>Five</td><td>some text</td></tr>
|
||||
<tr id="table5-row-6"><td class="dragHandle"> </td><td>6</td><td>Six</td><td>some text</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<p>In fact you will notice that I have also set the dragHandle on this table. This has two effects: firstly only
|
||||
the cell with the drag handle class is draggable and secondly it doesn't automatically add the <code>cursor: move</code>
|
||||
style to the row (or the drag handle cell), so you are responsible for setting up the style as you see fit.</p>
|
||||
<p>Here I've actually added an extra effect which adds a background image to the first cell in the row whenever
|
||||
you enter it using the jQuery <code>hover</code> function as follows:</p>
|
||||
<pre>
|
||||
$("#table-5 tr").hover(function() {
|
||||
$(this.cells[0]).addClass('showDragHandle');
|
||||
}, function() {
|
||||
$(this.cells[0]).removeClass('showDragHandle');
|
||||
});
|
||||
</pre>
|
||||
<p>This provides a better visualisation of what you can do to the row and where you need to go to drag it (I hope).</p>
|
||||
<h2>Version History</h2>
|
||||
<table class="versionHistory">
|
||||
<tr><td>0.2</td><td>2008-02-20</td><td>First public release</td></tr>
|
||||
<tr><td>0.3</td><td>2008-02-27</td><td>Added onDragStart option<br/>Made the scroll amount configurable (default is 5 as before)</td></tr>
|
||||
<tr><td>0.4</td><td>2008-03-28</td><td>Fixed the scrollAmount so that if you set this to zero then it switches off this functionality<br/>Fixed the auto-scrolling in IE6 thanks to Phil<br/>Changed the NoDrop attribute to the class "nodrop" (so any row with this class won't allow dropping)<br/>Changed the NoDrag attribute to the class "nodrag" (so any row with this class can't be dragged)<br/>Added support for multiple TBODYs--though it's still not perfect<br/>Added onAllowDrop to allow the developer to customise this behaviour<br/>Added a serialize() method to return the order of the rows in a form suitable for POSTing back to the server</td></tr>
|
||||
<tr><td>0.5</td><td>2008-06-04</td><td>Changed so that if you specify a dragHandle class it doesn't make the whole row<br/>draggable<br/>Improved the serialize method to use a default (and settable) regular expression.<br/>Added tableDnDupate() and tableDnDSerialize() to be called when you are outside the table</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
alert("Here I am");
|
||||
// Initialise the first table (as before)
|
||||
$("#table-1").tableDnD();
|
||||
// Make a nice striped effect on the table
|
||||
$("#table-2 tr:even").addClass("alt");
|
||||
// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
|
||||
$("#table-2").tableDnD({
|
||||
onDragClass: "myDragClass",
|
||||
onDrop: function(table, row) {
|
||||
var rows = table.tBodies[0].rows;
|
||||
var debugStr = "Row dropped was "+row.id+". New order: ";
|
||||
for (var i=0; i<rows.length; i++) {
|
||||
debugStr += rows[i].id+" ";
|
||||
}
|
||||
$("#debugArea").html(debugStr);
|
||||
},
|
||||
onDragStart: function(table, row) {
|
||||
$("#debugArea").html("Started dragging row "+row.id);
|
||||
}
|
||||
});
|
||||
|
||||
$('#table-3').tableDnD({
|
||||
onDrop: function(table, row) {
|
||||
alert("Result of $.tableDnD.serialise() is "+$.tableDnD.serialize());
|
||||
$('#AjaxResult').load("server/ajaxTest.php?"+$.tableDnD.serialize());
|
||||
}
|
||||
});
|
||||
|
||||
//$('#table-4').tableDnD(); // no options currently
|
||||
$('#table-4 tr:even').css('background', '#ecf6fc');
|
||||
|
||||
$('#table-5').tableDnD({
|
||||
onDrop: function(table, row) {
|
||||
alert($('#table-5').tableDnDSerialize());
|
||||
},
|
||||
dragHandle: "dragHandle"
|
||||
});
|
||||
|
||||
$("#table-5 tr").hover(function() {
|
||||
$(this.cells[0]).addClass('showDragHandle');
|
||||
}, function() {
|
||||
$(this.cells[0]).removeClass('showDragHandle');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
340
enginiptv/panel/plugins/tablednd/tablednd.css
Normal file
340
enginiptv/panel/plugins/tablednd/tablednd.css
Normal file
@@ -0,0 +1,340 @@
|
||||
body {
|
||||
color:#333333;
|
||||
font-family:'Lucida Grande',Verdana,Arial,Sans-Serif;
|
||||
font-size: 80%;
|
||||
margin: 1em 9em;
|
||||
background-color: #F0F0F0;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 10px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #114477;
|
||||
}
|
||||
|
||||
pre.prettyprint {
|
||||
margin-bottom: 20px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.prettyprint {
|
||||
background-color: #F7F7F9;
|
||||
}
|
||||
code, pre {
|
||||
display: block;
|
||||
margin: 0 0 10px;
|
||||
line-height: 20px;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
pre {
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: pre;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
color:#264A94;
|
||||
font-family:Monaco,Lucida Console,monospace;
|
||||
font-size:90%;
|
||||
}
|
||||
|
||||
div#page {
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.tableDemo {
|
||||
background-color: white;
|
||||
border: 1px solid #666699;
|
||||
margin-right: 10px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.tableDemo table {
|
||||
border: 1px solid silver;
|
||||
}
|
||||
|
||||
.tableDemo td {
|
||||
padding: 2px 6px
|
||||
}
|
||||
|
||||
.tableDemo th {
|
||||
color: white;
|
||||
text-shadow: 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A, 0 0 18px #29215A;
|
||||
border-bottom: 8px double #29215A;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#table-2 th {
|
||||
background-color: #29215A;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#table-2 td, th {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.category td {
|
||||
background-color: #E4EBF3;
|
||||
}
|
||||
|
||||
table {
|
||||
/*position: relative;*/
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
tr {
|
||||
/*position: relative;*/
|
||||
|
||||
/*display: block;*/
|
||||
}
|
||||
|
||||
.tDnD_whileDrag {
|
||||
/*z-index: 500;*/
|
||||
/*width: 90%;*/
|
||||
/*margin: -10px;*/
|
||||
/*display: table-cell;*/
|
||||
/*color: transparent;*/
|
||||
/*width: 0px*/
|
||||
}
|
||||
.tDnD_whileDrag td {
|
||||
background-color: #eee;
|
||||
/*-webkit-box-shadow: 11px 5px 12px 2px #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
-webkit-box-shadow: 6px 3px 5px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
|
||||
/*-moz-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
/*-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
}
|
||||
/*.tDnD_whileDrag td:first-child {*/
|
||||
/*-webkit-box-shadow: 5px 4px 5px 1px #111, 0 1px 0 #ccc inset, 1px -1px 0 #ccc inset;*/
|
||||
/*-moz-box-shadow: 6px 3px 5px 2px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, 1px 0 0 #ccc inset;*/
|
||||
/*-box-shadow: 6px 3px 5px 2px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, 1px 0 0 #ccc inset;*/
|
||||
/*}*/
|
||||
.tDnD_whileDrag td:last-child {
|
||||
/*-webkit-box-shadow: 8px 7px 12px 0 #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
-webkit-box-shadow: 1px 8px 6px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
|
||||
/*-moz-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
|
||||
/*-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
|
||||
}
|
||||
/*-webkit-box-shadow: 0 0 40px white, 10px 10px 15px black;*/
|
||||
/*-moz-box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;*/
|
||||
/*-webkit-box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black;*/
|
||||
/*box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;*/
|
||||
/*}*/
|
||||
/*.tDnD_whileDrag {*/
|
||||
/*background-color: black;*/
|
||||
/*position: relative;*/
|
||||
/*display: block;*/
|
||||
/*-moz-box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black;*/
|
||||
/*-webkit-box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black;*/
|
||||
/*box-shadow: 0px 0px 40px 1px white, 0px 1px 1px 1px black ;*/
|
||||
/*-webkit-box-shadow: 0 15px 10px -10px black, 0 1px 4px black, 0 0 10px darkgray inset;*/
|
||||
/*-webkit-box-shadow: 0 15px 10px -10px black, 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
|
||||
/*-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
|
||||
/*box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;*/
|
||||
/*width: 90%;*/
|
||||
/*height: 90%;*/
|
||||
/*width: 100%;*/
|
||||
/*overflow: visible;*/
|
||||
/*z-index: 10000;*/
|
||||
/*opacity: .4;*/
|
||||
/*border-collapse: separate;*/
|
||||
/*filter:Alpha(Opacity=50);*/
|
||||
/*width: auto;*/
|
||||
|
||||
/*}*/
|
||||
|
||||
/*tr.alt td {*/
|
||||
/*width:200px*/
|
||||
/*-ms-transform:rotate(1deg;*/
|
||||
/*-moz-transform: rotate(0deg);*/
|
||||
/*-webkit-transform:rotate(0deg);*/
|
||||
/*-o-transform:rotate(0deg);*/
|
||||
/*}*/
|
||||
|
||||
tr.alt td {
|
||||
background-color: #ecf6fc;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tr.myDragClass td {
|
||||
/*position: fixed;*/
|
||||
color: yellow;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 8px black, 0 0 6px black, 0 0 6px black;
|
||||
background-color: #999;
|
||||
-webkit-box-shadow: 0 12px 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
|
||||
}
|
||||
tr.myDragClass td:first-child {
|
||||
-webkit-box-shadow: 0 12px 14px -12px #111 inset, 12px 0 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
|
||||
}
|
||||
tr.myDragClass td:last-child {
|
||||
-webkit-box-shadow: 0 12px 14px -12px #111 inset, -12px 0 14px -12px #111 inset, 0 -2px 2px -1px #333 inset;
|
||||
}
|
||||
|
||||
#table-2 {
|
||||
margin: 0 0 1em 0; padding: 0
|
||||
}
|
||||
tr.nodrop td {
|
||||
border-bottom: 1px solid #00bb00;
|
||||
color: #00bb00;
|
||||
}
|
||||
tr.nodrag td {
|
||||
border-bottom: 1px solid #FF6600;
|
||||
color: #FF6600;
|
||||
}
|
||||
div.result {
|
||||
background-color: #F7F7F9;
|
||||
}
|
||||
|
||||
tr.alt tr:after, .group:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
table input,
|
||||
tr td input,
|
||||
tr input,
|
||||
tr.myDragClass input,
|
||||
tbody tr td input {
|
||||
z-index: -10;
|
||||
text-align: right;
|
||||
float: right;
|
||||
height: 12px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
td.dragHandle {
|
||||
|
||||
}
|
||||
|
||||
td.showDragHandle {
|
||||
background-image: url(images/updown2.gif);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.versionHistory td {
|
||||
vertical-align: top;
|
||||
padding: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
div.indent {
|
||||
width: 30px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#sprintlist_table th {
|
||||
color: white;
|
||||
/*border-style: ;*/
|
||||
text-shadow: 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600, 0 0 18px #FF6600;
|
||||
border-bottom: 14px double #FF6600;
|
||||
padding: 10px;
|
||||
}
|
||||
.sprintlist-drag td.small_buttons div button {
|
||||
/*font-size: xx-small;*/
|
||||
/*height: 18px;*/
|
||||
/*color: #333;*/
|
||||
/*cursor: pointer;*/
|
||||
/*background-color: #f4a460;*/
|
||||
box-shadow:0px 2px 3px black inset;
|
||||
-moz-box-shadow:0px 2px 3px black inset;
|
||||
-webkit-box-shadow:0px 2px 3px black inset;
|
||||
/*border: 0px;*/
|
||||
/*background-color: #ccc;*/
|
||||
}
|
||||
.sprintlist-drag td.small_buttons div button:first-child {
|
||||
box-shadow:2px 2px 3px black inset;
|
||||
-moz-box-shadow:2px 2px 3px black inset;
|
||||
-webkit-box-shadow:2px 2px 3px black inset;
|
||||
/*border: 0px;*/
|
||||
/*background-color: #ccc;*/
|
||||
}
|
||||
.sprintlist-drag td {
|
||||
background-color: #f4a460;
|
||||
/*-webkit-box-shadow: 11px 5px 12px 2px #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
-webkit-box-shadow: 6px 3px 5px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
|
||||
/*-moz-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
/*-box-shadow: 6px 4px 5px 1px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
}
|
||||
.sprintlist-drag td:last-child {
|
||||
/*-webkit-box-shadow: 8px 7px 12px 0 #333, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;*/
|
||||
-webkit-box-shadow: 1px 8px 6px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset;
|
||||
/*-moz-box-shadow: 0 9px 4px -4px #555, 0 1px 0 #ccc inset, 0 -1px 0 #ccc inset, -1px 0 0 #ccc inset;*/
|
||||
}
|
||||
tr.group_heading td {
|
||||
border-bottom: 8px double #FF6600;
|
||||
color: #FF6600;
|
||||
font-size: larger;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
td.small_buttons div {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
#table-6 tr {
|
||||
background-color: red;
|
||||
z-index: -1000;
|
||||
/*background-color:rgb(165, 182, 229);*/
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
/*box-shadow:0 0 0 black;*/
|
||||
/*-moz-box-shadow:0 0 0 black,;*/
|
||||
/*-webkit-box-shadow:0 0 0 black;*/
|
||||
}
|
||||
#table-6 td {
|
||||
padding:5px;
|
||||
/*text-align:left;*/
|
||||
}
|
||||
|
||||
#table-7 {
|
||||
border: #000000 solid 1px;
|
||||
}
|
||||
|
||||
td.small_buttons div button {
|
||||
font-size: xx-small;
|
||||
height: 18px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
background-color: whiteSmoke;
|
||||
}
|
||||
|
||||
td.small_buttons div button:first-child
|
||||
{
|
||||
margin-left: 0;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
}
|
||||
|
||||
td.small_buttons div button:last-child
|
||||
{
|
||||
margin-left: -2px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
}
|
||||
3177
enginiptv/panel/plugins/tablednd/yarn.lock
Normal file
3177
enginiptv/panel/plugins/tablednd/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user