mirror of
https://codeberg.org/streams/streams.git
synced 2024-09-19 16:55:18 +00:00
add jquery-resizable
This commit is contained in:
Mike Macgirvin
parent
b15c1ac4a5
commit
e4bad0ad35
27 changed files with 1865 additions and 0 deletions
22
library/jquery-resizable/.gitattributes
vendored
Normal file
22
library/jquery-resizable/.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
# Custom for Visual Studio
|
||||
*.cs diff=csharp
|
||||
*.sln merge=union
|
||||
*.csproj merge=union
|
||||
*.vbproj merge=union
|
||||
*.fsproj merge=union
|
||||
*.dbproj merge=union
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
2
library/jquery-resizable/.github/FUNDING.yml
vendored
Normal file
2
library/jquery-resizable/.github/FUNDING.yml
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
github: [RickStrahl]
|
||||
custom: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=K677THUA2MJSE&source=url
|
||||
133
library/jquery-resizable/.gitignore
vendored
Normal file
133
library/jquery-resizable/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
# Build Folders (you can keep bin if you'd like, to store dlls and pdbs)
|
||||
[Bb]in/
|
||||
[Oo]bj/
|
||||
|
||||
# mstest test results
|
||||
TestResults
|
||||
|
||||
## Ignore Visual Studio temporary files, build results, and
|
||||
## files generated by popular Visual Studio add-ons.
|
||||
|
||||
# User-specific files
|
||||
*.suo
|
||||
*.user
|
||||
*.sln.docstates
|
||||
|
||||
# Build results
|
||||
.vs/
|
||||
.vscode/
|
||||
[Dd]ebug/
|
||||
[Rr]elease/
|
||||
x64/
|
||||
*_i.c
|
||||
*_p.c
|
||||
*.ilk
|
||||
*.meta
|
||||
*.mht
|
||||
*.obj
|
||||
*.pch
|
||||
*.pdb
|
||||
*.pgc
|
||||
*.pgd
|
||||
*.rsp
|
||||
*.sbr
|
||||
*.tlb
|
||||
*.tli
|
||||
*.tlh
|
||||
*.tmp
|
||||
*.log
|
||||
*.js.map
|
||||
*.vspscc
|
||||
*.vssscc
|
||||
.builds
|
||||
|
||||
node_modules/
|
||||
bower_components/
|
||||
|
||||
# Visual C++ cache files
|
||||
ipch/
|
||||
*.aps
|
||||
*.ncb
|
||||
*.opensdf
|
||||
*.sdf
|
||||
|
||||
# Visual Studio profiler
|
||||
*.psess
|
||||
*.vsp
|
||||
*.vspx
|
||||
|
||||
# Guidance Automation Toolkit
|
||||
*.gpState
|
||||
|
||||
# ReSharper is a .NET coding add-in
|
||||
_ReSharper*
|
||||
|
||||
# NCrunch
|
||||
*.ncrunch*
|
||||
.*crunch*.local.xml
|
||||
|
||||
# Installshield output folder
|
||||
[Ee]xpress
|
||||
|
||||
# DocProject is a documentation generator add-in
|
||||
DocProject/buildhelp/
|
||||
DocProject/Help/*.HxT
|
||||
DocProject/Help/*.HxC
|
||||
DocProject/Help/*.hhc
|
||||
DocProject/Help/*.hhk
|
||||
DocProject/Help/*.hhp
|
||||
DocProject/Help/Html2
|
||||
DocProject/Help/html
|
||||
|
||||
# Click-Once directory
|
||||
publish
|
||||
|
||||
# Publish Web Output
|
||||
*.Publish.xml
|
||||
|
||||
# NuGet Packages Directory
|
||||
packages
|
||||
|
||||
# Windows Azure Build Output
|
||||
csx
|
||||
*.build.csdef
|
||||
|
||||
# Windows Store app package directory
|
||||
AppPackages/
|
||||
|
||||
thumbs.db
|
||||
|
||||
# Others
|
||||
[Bb]in
|
||||
[Oo]bj
|
||||
sql
|
||||
TestResults
|
||||
[Tt]est[Rr]esult*
|
||||
*.Cache
|
||||
ClientBin
|
||||
[Ss]tyle[Cc]op.*
|
||||
~$*
|
||||
*.dbmdl
|
||||
Generated_Code #added for RIA/Silverlight projects
|
||||
|
||||
#Html Help Builder
|
||||
HelpFile/_*.htm
|
||||
HelpFile/index*.*
|
||||
HelpFile/keywords.htm
|
||||
HelpFile/*.chm
|
||||
HelpFile/*.hh*
|
||||
HelpFile/*.zip
|
||||
HelpFile/*_recover.*
|
||||
|
||||
# Backup & report files from converting an old project file to a newer
|
||||
# Visual Studio version. Backup files are not needed, because we have git ;-)
|
||||
_UpgradeReport_Files/
|
||||
Backup*/
|
||||
UpgradeLog*.XML
|
||||
|
||||
OrderLineImages_Originals
|
||||
Temp
|
||||
/Libs/PullWestwindLibs.bat
|
||||
.idea
|
||||
jquery-watch.sln
|
||||
website.publishproj
|
||||
22
library/jquery-resizable/LICENSE.md
Normal file
22
library/jquery-resizable/LICENSE.md
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
MIT License
|
||||
===========
|
||||
|
||||
Copyright (c) 2013-2019 West Wind Technologies
|
||||
|
||||
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.
|
||||
275
library/jquery-resizable/README.md
Normal file
275
library/jquery-resizable/README.md
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
# jquery-resizable
|
||||
#### A small jQuery plug-in to make HTML DOM elements resizable
|
||||
|
||||
This small, self-contained jQuery plug-in allows you to make DOM elements resizable using a sizing handle. It works with Mouse and Touch events so you can resize elements on mobile devices.
|
||||
|
||||
Resizables are useful if you want to add resizing features to your HTML layouts for things like like resizable dialogs, splitter panes or elements that can be resized by a user in a layout.
|
||||
|
||||
|
||||
### Samples on CodePen
|
||||
* [Simple Resizable Box](http://codepen.io/rstrahl/pen/bEVBdE)
|
||||
* [Resizable Split Panels](http://codepen.io/rstrahl/pen/eJZQej)
|
||||
* [Table Column Resizing](http://codepen.io/rstrahl/pen/xZErXz)
|
||||
|
||||
There's a more info on the how's and why's in this blog post:
|
||||
|
||||
* [A small jquery-resizable Plug-in](http://weblog.west-wind.com/posts/2015/Dec/21/A-small-jQuery-Resizable-Plugin)
|
||||
|
||||
### Installation
|
||||
You can install jquery-resizable from NPM. Please note that the name is `jquery-resizable-dom` due to another component name conflict.
|
||||
|
||||
```
|
||||
npm install jquery-resizable-dom
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
**Global Scope:**
|
||||
```javascript
|
||||
$(selector).resizable(options);
|
||||
```
|
||||
|
||||
> #### Naming Conflict Version: `.resizableSafe()`
|
||||
> If you're using jQuery-resizable with another component that uses the same name - like jquery ui - you can use `.resizableSafe()` instead of `.resizable()` with the same syntax. This allows side by side operation with conflicting libraries.
|
||||
> ```javascript
|
||||
> $(selector).resizableSafe(options);
|
||||
> ```
|
||||
> If you need this feature, just replace any references to `.resizable()` to `.resizableSafe()`.
|
||||
|
||||
|
||||
> #### Module Loading
|
||||
> jquery-resizable supports **commonJs** and **AMD** module loading for the jQuery dependency. Since this is a plug-in there are no exports but resizable is just an extension method on the `jQuery.fn` extension object.
|
||||
|
||||
To use this plug-in add a script reference to jQuery and the resizable plug-in. Then use a jQuery selector to select the element to resize and provide an additional `.handleSelector` to select the sizing handle which initiates the resize operation.
|
||||
|
||||
```html
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script src="../src/jquery-resizableTableColumns.js"></script>
|
||||
<script>
|
||||
$("#box").resizable({
|
||||
handleSelector: ".splitter",
|
||||
resizeHeight: false
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### Options
|
||||
The options parameter can be a map of any of these properties (default values are shown):
|
||||
|
||||
```javascript
|
||||
var opt = {
|
||||
// optional selector for handle that starts dragging
|
||||
handleSelector: null,
|
||||
// resize the width
|
||||
resizeWidth: true,
|
||||
// resize the height
|
||||
resizeHeight: true,
|
||||
// the side that the width resizing is relative to
|
||||
resizeWidthFrom: 'right',
|
||||
// the side that the height resizing is relative to
|
||||
resizeHeightFrom: 'bottom',
|
||||
// hook into start drag operation (event,$el,opt passed - return false to abort drag)
|
||||
onDragStart: null,
|
||||
// hook into stop drag operation (event,$el,opt passed)
|
||||
onDragEnd: null,
|
||||
// hook into each drag operation (event,$el,opt passed)
|
||||
onDrag: null
|
||||
// disable touch-action on the $handle
|
||||
// prevents browser level actions like forward back gestures
|
||||
touchActionNone: true
|
||||
};
|
||||
```
|
||||
|
||||
**handleSelector**
|
||||
A jQuery selector or DOM element that acts as a selector. This can be a string, a DOM object or an existing jQuery selector.
|
||||
|
||||
If no selector is passed the element itself becomes resizable. Usually this results in undesirable behavior but you can limit the drag start location using the `onDragStart` handler.
|
||||
|
||||
If the selector is prepended by a `>` the element is searched inside the resized component.
|
||||
|
||||
```html
|
||||
<!-- first instance -->
|
||||
<div class="box">
|
||||
<div class="handle">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- second instance -->
|
||||
<div class="box">
|
||||
<div class="handle">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(".box").resizable({
|
||||
handleSelector: "> .handle"
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
**resizeWidth, resizeHeight**
|
||||
These two boolean values determine whether the width or height are resizable. Both are true by default so disable which ever dimension you don't want to resize.
|
||||
|
||||
**resizeWidthFrom,resizeHeightFrom**
|
||||
Determines which direction the reszing is done from. By default the directions are "right" and "bottom" but they could be "left" and "top". Useful for RTL locales where drag operations are naturally opposite to LTR.
|
||||
|
||||
**onDragStart**
|
||||
Hook method fired just before you start dragging. You can return an explicit `false` value to abort the drag operation. Gets passed the event, the selected jQuery element and the options object.
|
||||
|
||||
```javascript
|
||||
$(".box").resizable({
|
||||
onDragStart: function (e, $el, opt) {
|
||||
$el.css("cursor", "nwse-resize");
|
||||
},
|
||||
onDragEnd: function (e, $el, opt) {
|
||||
$el.css("cursor", "");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**onDrag**
|
||||
Hook method fired whenever the mouse cursor moves.
|
||||
|
||||
Receives jQuery event, jquery selected element, newWidth, newHeight and the options object. Optionally return an explicit value of `false` to indicate you don't want to set the newWidth, newHeight values after `ondrag` completes.
|
||||
|
||||
```javascript
|
||||
onDrag: function (e, $el, newWidth, newHeight, opt) {
|
||||
// limit box size
|
||||
if (newWidth > 300)
|
||||
newWidth = 300;
|
||||
if (newHeight > 200)
|
||||
newHeight = 200;
|
||||
|
||||
$el.width(newWidth);
|
||||
$el.height(newHeight);
|
||||
|
||||
// explicitly return **false** if you don't want
|
||||
// auto-height computation to occur
|
||||
return false;
|
||||
});
|
||||
```
|
||||
|
||||
**onDragEnd**
|
||||
Hook event fired when the drag operation completes and the mouse is released. Receives event, jquery selected element and the options object.
|
||||
|
||||
**touchActionNone**
|
||||
Sets touch-action: none on the handle element to prevent browser interference to initiating touch drag operations especially on Internet Explorer, Edge and Windows 10 browsers.
|
||||
|
||||
|
||||
### Commands
|
||||
|
||||
**destroy**
|
||||
|
||||
Should the need arise, you can remove a `resizable` instance with:
|
||||
|
||||
```javascript
|
||||
$el.resizable('destroy');
|
||||
```
|
||||
|
||||
|
||||
## jquery-resizableTableColumns Plugin
|
||||
|
||||
### Usage
|
||||
```javascript
|
||||
$(selector).resizableTableColumns(options);
|
||||
```
|
||||
|
||||
The options are the same as for the **.resizable** plug-in. The only parameter you likely will override though is **.resizeHeight** which is defaulted to false.
|
||||
|
||||
To use this plug-in add a script reference to jQuery and the resizable and resizableTableColumns plug-in. Then use a jQuery selector to select columns and headers you want to resize. You also need to provide the CSS for the **.resizer** class shown below.
|
||||
|
||||
```html
|
||||
<style>
|
||||
/*
|
||||
this is important!
|
||||
make sure you define this here
|
||||
or in jQuery codef
|
||||
*/
|
||||
.resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -8px;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
width: 16px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
</style>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script src="../src/jquery-resizableTableColumns.js"></script>
|
||||
<script>
|
||||
$("td,th").resizableTableColumns();
|
||||
//$("td:first-child,td:nth-child(2),td:nth-child(3)").resizableTableColumns();
|
||||
</script>
|
||||
```
|
||||
For more info on this plug-in please see the [jQuery-resizable and Table Column Resizing Blog post](http://weblog.west-wind.com/posts/2016/Jan/04/jQueryresizable-and-Table-Column-Resizing) that describes this plug-in in more detail.
|
||||
|
||||
|
||||
### License
|
||||
Licensed under the MIT License. There's no charge to use, integrate or modify the code for this project. You are free to use it in personal, commercial, government and any other type of application.
|
||||
|
||||
All source code is copyright © Rick Strahl, West Wind Technologies, regardless of changes made to them. Any source code modifications must leave the original copyright code headers intact.
|
||||
|
||||
### Warranty Disclaimer: No Warranty!
|
||||
|
||||
IN NO EVENT SHALL THE AUTHOR, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE THIS PROGRAM AND DOCUMENTATION, BE LIABLE FOR ANY COMMERCIAL, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM INCLUDING, BUT NOT LIMITED TO, LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR LOSSES SUSTAINED BY THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS, EVEN IF YOU OR OTHER PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
||||
|
||||
## Change Log
|
||||
|
||||
#### Version 0.35
|
||||
|
||||
* **Add `.resizableSafe() to allow side by side w/ jquery.ui**
|
||||
Added `.resizableSafe` overload to allow loading resizable in scenarios where another jquery component call `.resizable()` is in use. Most commonly this might be jquery UI. This is useful for other components that might depend on this particular component as a dependency and if they do they should use `.resizableSafe()`. Syntax is otherwise identical.
|
||||
|
||||
#### Version 0.32
|
||||
|
||||
* **Fix iFrame Drag Jitter**
|
||||
Added logic to remove iFrame pointer events on drag start and restore on drag end which removes issue with extreme drag on any resized panel that contains an iframe.
|
||||
|
||||
#### Version 0.28
|
||||
|
||||
* **Small Bug Fixes**
|
||||
Remove console.log commands. Clean up code and add additional source comments.
|
||||
|
||||
* **Typescript definition added**
|
||||
Added typescript definition.
|
||||
|
||||
#### Version 0.25
|
||||
* **Destroy Option to release resizables**
|
||||
Added support removing resizables using `$(el).resizable('destroy')`.
|
||||
|
||||
* **Fix Touch Sizing Code**
|
||||
Fix up end drag detection both for mouse and touch dragging operations for more reliable end-drag detection. Fixes issue where the drag cursor previously would loose connection to the drag handle and continue to drag after releasing.
|
||||
|
||||
* **Support for jQuery 3.x**
|
||||
Fixed a few issues related to running under jQuery 3.x. Switched to `.on()` and `.off()` handlers for all event handlers.
|
||||
|
||||
#### Version 0.20
|
||||
|
||||
* **Module Loader Support for jQuery**
|
||||
jquery-sizable can now use commonJs and AMD to load the jQuery dependency. Thanks Thiago Delgado Pinto for adding.
|
||||
|
||||
#### Version 0.18
|
||||
* **onDrag Behavior Updated to support opting out of move operation**
|
||||
Added additional logic to onDrag processing so that when `false` is returned the auto-resizing of the container is not applied. This allows you to take over the width calculation yourself for things like limiting resize size. <small>(changes by ohcibi)</small>
|
||||
|
||||
#### Version 0.17
|
||||
* **Allow automated child selectors using `>` syntax in handle selector**
|
||||
You can now specify `>` to select child elements inside of the container. Added to simplify referencing contained elements generically without having to explicitly specify the resized container.
|
||||
|
||||
#### Version 0.15
|
||||
* **Add *resizeWidthFrom* and *resizeHeightFrom* Options**
|
||||
These options are useful in RTL environments where drag resizing operations are performed from the left edge of components. You can specify the source edge for resizing operations.
|
||||
|
||||
#### Version 0.14
|
||||
* **Add jquery-resizableTableColumns Plugin**
|
||||
Added a small wrapper plugin that allows resizing of table columns and headers.
|
||||
|
||||
#### Version 0.13
|
||||
* **Fix Touch Support in IE and Edge**
|
||||
Added touch-action:none logic to the drag handle to avoid drag initiation issues in IE and Edge which won't fire touchStart events when the document has touch gestures enabled.
|
||||
|
||||
#### Version 0.11
|
||||
* **initial release **
|
||||
BIN
library/jquery-resizable/assets/hsizegrip.png
Normal file
BIN
library/jquery-resizable/assets/hsizegrip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 B |
BIN
library/jquery-resizable/assets/vsizegrip.png
Normal file
BIN
library/jquery-resizable/assets/vsizegrip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 B |
BIN
library/jquery-resizable/assets/wingrip.png
Normal file
BIN
library/jquery-resizable/assets/wingrip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 B |
11
library/jquery-resizable/build.ps1
Normal file
11
library/jquery-resizable/build.ps1
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
if ( -not (Test-Path ./dist) )
|
||||
{
|
||||
mkdir ./dist
|
||||
}
|
||||
remove-item ./dist/*.*
|
||||
|
||||
copy-item ./src/*.js ./dist -force
|
||||
copy-item ./src/*.d.ts ./dist -force
|
||||
|
||||
uglifyjs ./src/jquery-resizable.js -o dist/jquery-resizable.min.js --source-map
|
||||
uglifyjs ./src/jquery-resizableTableColumns.js -o dist/jquery-resizableTableColumns.min.js --source-map
|
||||
8
library/jquery-resizable/build.sh
Normal file
8
library/jquery-resizable/build.sh
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
if ! test ./dist; then
|
||||
mkdir ./dist
|
||||
fi
|
||||
|
||||
cp ./src/*.js ./dist
|
||||
|
||||
uglifyjs ./src/jquery-resizable.js -o dist/jquery-resizable.min.js --source-map
|
||||
uglifyjs ./src/jquery-resizableTableColumns.js -o dist/jquery-resizableTableColumns.min.js --source-map
|
||||
94
library/jquery-resizable/dist/jquery-resizable.d.ts
vendored
Normal file
94
library/jquery-resizable/dist/jquery-resizable.d.ts
vendored
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
// Some documentation text taken from: https://www.npmjs.com/package/jquery-resizable-dom
|
||||
|
||||
/// <reference types="jquery"/>
|
||||
|
||||
declare namespace JQueryResizeable {
|
||||
interface ResizeableOptions {
|
||||
/**
|
||||
* A jQuery selector or DOM element that acts as a selector. This can be a string, a DOM object or an existing jQuery selector.
|
||||
* If no selector is passed the element itself becomes resizable. Usually this results in undesirable behavior but you can limit the
|
||||
* drag start location using the onDragStart handler.
|
||||
* If the selector is prepended by a ">" the element is searched inside the resized component.
|
||||
* default: null (but "> .resizer" in case of resizableTableColumns).
|
||||
*/
|
||||
handleSelector: JQuery.Selector | Element | JQuery;
|
||||
/**
|
||||
* Determines whether the width is resizable.
|
||||
* default: true
|
||||
*/
|
||||
resizeWidth?: boolean,
|
||||
/**
|
||||
* Determines whether the height is resizable.
|
||||
* default: true (but false in case of resizableTableColumns).
|
||||
*/
|
||||
resizeHeight?: boolean,
|
||||
/**
|
||||
* The side that the width resizing is relative to.
|
||||
* default: "right"
|
||||
*/
|
||||
resizeWidthFrom?: "right"|"left",
|
||||
/**
|
||||
* The side that the height resizing is relative to.
|
||||
* default: "bottom"
|
||||
*/
|
||||
resizeHeightFrom?: "bottom"|"top",
|
||||
/**
|
||||
* Hook method fired just before you start dragging. You can return an explicit false value to abort the drag operation.
|
||||
* Gets passed the event, the selected jQuery element and the options object.
|
||||
* default: null
|
||||
*/
|
||||
onDragStart?: (e: JQuery.Event, element: JQuery, options: JQueryResizeable.ResizeableOptions) => boolean,
|
||||
/**
|
||||
* Hook event fired when the drag operation completes and the mouse is released.
|
||||
* Receives event, jquery selected element and the options object.
|
||||
* default: null
|
||||
*/
|
||||
onDragEnd?: (e: JQuery.Event, element: JQuery, options: JQueryResizeable.ResizeableOptions) => void,
|
||||
/**
|
||||
* Hook method fired whenever the mouse cursor moves.
|
||||
* Receives jQuery event, jquery selected element, newWidth, newHeight and the options object.
|
||||
* Optionally return an explicit value of false to indicate you don't want to set the newWidth, newHeight values
|
||||
* after onDrag completes.
|
||||
* default: null
|
||||
*/
|
||||
onDrag?: (e: JQuery.Event, element: JQuery, newWidth: number, newHeight: number, options: JQueryResizeable.ResizeableOptions) => boolean,
|
||||
/**
|
||||
* Sets touch-action: none on the handle element to prevent browser interference to initiating touch drag operations especially
|
||||
* on Internet Explorer, Edge and Windows 10 browsers.
|
||||
* default: true
|
||||
*/
|
||||
touchActionNone?: boolean,
|
||||
/**
|
||||
* Optionally presets the internal instance id, which is automatically created as a random (starting "rsz_") if not given.
|
||||
* default: null
|
||||
*/
|
||||
instanceId?: string
|
||||
}
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
/**
|
||||
* Initializes or destroys the resizeable feature.
|
||||
*
|
||||
* @param options Either an object passing the options for initialization, or "destroy" as a command.
|
||||
*/
|
||||
resizable(options?: JQueryResizeable.ResizeableOptions | "destroy"): void;
|
||||
/**
|
||||
* Initializes the resizeable feature on a table. Note that it is important to add certain css settings for the ".resizer" class (see comment in this .d.ts file).
|
||||
*
|
||||
* @param options An object passing the options for initialization.
|
||||
*/
|
||||
/* The css code needed is this:
|
||||
* .resizer {
|
||||
* position: absolute;
|
||||
* top: 0;
|
||||
* right: -8px;
|
||||
* bottom: 0;
|
||||
* left: auto;
|
||||
* width: 16px;
|
||||
* cursor: col-resize;
|
||||
* }
|
||||
*
|
||||
*/
|
||||
resizableTableColumns(options?: JQueryResizeable.ResizeableOptions): void;
|
||||
}
|
||||
197
library/jquery-resizable/dist/jquery-resizable.js
vendored
Normal file
197
library/jquery-resizable/dist/jquery-resizable.js
vendored
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
/// <reference path="../bower_components/jquery/dist/jquery.js" />
|
||||
/*
|
||||
jquery-resizable
|
||||
Version 0.35 - 11/18/2019
|
||||
© 2015-2019 Rick Strahl, West Wind Technologies
|
||||
www.west-wind.com
|
||||
Licensed under MIT License
|
||||
*/
|
||||
(function(factory, undefined) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && typeof module.exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Global jQuery
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function($, undefined) {
|
||||
|
||||
if ($.fn.resizableSafe)
|
||||
return;
|
||||
|
||||
$.fn.resizableSafe = function fnResizable(options) {
|
||||
var defaultOptions = {
|
||||
// selector for handle that starts dragging
|
||||
handleSelector: null,
|
||||
// resize the width
|
||||
resizeWidth: true,
|
||||
// resize the height
|
||||
resizeHeight: true,
|
||||
// the side that the width resizing is relative to
|
||||
resizeWidthFrom: 'right',
|
||||
// the side that the height resizing is relative to
|
||||
resizeHeightFrom: 'bottom',
|
||||
// hook into start drag operation (event passed)
|
||||
onDragStart: null,
|
||||
// hook into stop drag operation (event passed)
|
||||
onDragEnd: null,
|
||||
// hook into each drag operation (event passed)
|
||||
onDrag: null,
|
||||
// disable touch-action on $handle
|
||||
// prevents browser level actions like forward back gestures
|
||||
touchActionNone: true,
|
||||
// instance id
|
||||
instanceId: null
|
||||
};
|
||||
if (typeof options == "object")
|
||||
defaultOptions = $.extend(defaultOptions, options);
|
||||
|
||||
return this.each(function () {
|
||||
var opt = $.extend({}, defaultOptions);
|
||||
if (!opt.instanceId)
|
||||
opt.instanceId = "rsz_" + new Date().getTime();
|
||||
|
||||
var startPos, startTransition;
|
||||
|
||||
// get the element to resize
|
||||
var $el = $(this);
|
||||
var $handle;
|
||||
|
||||
if (options === 'destroy') {
|
||||
opt = $el.data('resizable');
|
||||
if (!opt)
|
||||
return;
|
||||
|
||||
$handle = getHandle(opt.handleSelector, $el);
|
||||
$handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
|
||||
if (opt.touchActionNone)
|
||||
$handle.css("touch-action", "");
|
||||
$el.removeClass("resizable");
|
||||
return;
|
||||
}
|
||||
|
||||
$el.data('resizable', opt);
|
||||
|
||||
// get the drag handle
|
||||
|
||||
$handle = getHandle(opt.handleSelector, $el);
|
||||
|
||||
if (opt.touchActionNone)
|
||||
$handle.css("touch-action", "none");
|
||||
|
||||
$el.addClass("resizable");
|
||||
$handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
|
||||
|
||||
function noop(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
function startDragging(e) {
|
||||
// Prevent dragging a ghost image in HTML5 / Firefox and maybe others
|
||||
if ( e.preventDefault ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
startPos = getMousePos(e);
|
||||
startPos.width = parseInt($el.width(), 10);
|
||||
startPos.height = parseInt($el.height(), 10);
|
||||
|
||||
startTransition = $el.css("transition");
|
||||
$el.css("transition", "none");
|
||||
|
||||
if (opt.onDragStart) {
|
||||
if (opt.onDragStart(e, $el, opt) === false)
|
||||
return;
|
||||
}
|
||||
|
||||
$(document).on('mousemove.' + opt.instanceId, doDrag);
|
||||
$(document).on('mouseup.' + opt.instanceId, stopDragging);
|
||||
if (window.Touch || navigator.maxTouchPoints) {
|
||||
$(document).on('touchmove.' + opt.instanceId, doDrag);
|
||||
$(document).on('touchend.' + opt.instanceId, stopDragging);
|
||||
}
|
||||
$(document).on('selectstart.' + opt.instanceId, noop); // disable selection
|
||||
$("iframe").css("pointer-events","none");
|
||||
}
|
||||
|
||||
function doDrag(e) {
|
||||
|
||||
var pos = getMousePos(e), newWidth, newHeight;
|
||||
|
||||
if (opt.resizeWidthFrom === 'left')
|
||||
newWidth = startPos.width - pos.x + startPos.x;
|
||||
else
|
||||
newWidth = startPos.width + pos.x - startPos.x;
|
||||
|
||||
if (opt.resizeHeightFrom === 'top')
|
||||
newHeight = startPos.height - pos.y + startPos.y;
|
||||
else
|
||||
newHeight = startPos.height + pos.y - startPos.y;
|
||||
|
||||
if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
|
||||
if (opt.resizeHeight)
|
||||
$el.height(newHeight);
|
||||
|
||||
if (opt.resizeWidth)
|
||||
$el.width(newWidth);
|
||||
}
|
||||
}
|
||||
|
||||
function stopDragging(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
$(document).off('mousemove.' + opt.instanceId);
|
||||
$(document).off('mouseup.' + opt.instanceId);
|
||||
|
||||
if (window.Touch || navigator.maxTouchPoints) {
|
||||
$(document).off('touchmove.' + opt.instanceId);
|
||||
$(document).off('touchend.' + opt.instanceId);
|
||||
}
|
||||
$(document).off('selectstart.' + opt.instanceId, noop);
|
||||
|
||||
// reset changed values
|
||||
$el.css("transition", startTransition);
|
||||
$("iframe").css("pointer-events","auto");
|
||||
|
||||
if (opt.onDragEnd)
|
||||
opt.onDragEnd(e, $el, opt);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getMousePos(e) {
|
||||
var pos = { x: 0, y: 0, width: 0, height: 0 };
|
||||
if (typeof e.clientX === "number") {
|
||||
pos.x = e.clientX;
|
||||
pos.y = e.clientY;
|
||||
} else if (e.originalEvent.touches) {
|
||||
pos.x = e.originalEvent.touches[0].clientX;
|
||||
pos.y = e.originalEvent.touches[0].clientY;
|
||||
} else
|
||||
return null;
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getHandle(selector, $el) {
|
||||
if (selector && selector.trim()[0] === ">") {
|
||||
selector = selector.trim().replace(/^>\s*/, "");
|
||||
return $el.find(selector);
|
||||
}
|
||||
|
||||
// Search for the selector, but only in the parent element to limit the scope
|
||||
// This works for multiple objects on a page (using .class syntax most likely)
|
||||
// as long as each has a separate parent container.
|
||||
return selector ? $el.parent().find(selector) : $el;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (!$.fn.resizable)
|
||||
$.fn.resizable = $.fn.resizableSafe;
|
||||
}));
|
||||
1
library/jquery-resizable/dist/jquery-resizable.min.js
vendored
Normal file
1
library/jquery-resizable/dist/jquery-resizable.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
(function(factory,undefined){if(typeof define==="function"&&define.amd){define(["jquery"],factory)}else if(typeof module==="object"&&typeof module.exports==="object"){module.exports=factory(require("jquery"))}else{factory(jQuery)}})(function($,undefined){if($.fn.resizableSafe)return;$.fn.resizableSafe=function fnResizable(options){var defaultOptions={handleSelector:null,resizeWidth:true,resizeHeight:true,resizeWidthFrom:"right",resizeHeightFrom:"bottom",onDragStart:null,onDragEnd:null,onDrag:null,touchActionNone:true,instanceId:null};if(typeof options=="object")defaultOptions=$.extend(defaultOptions,options);return this.each(function(){var opt=$.extend({},defaultOptions);if(!opt.instanceId)opt.instanceId="rsz_"+(new Date).getTime();var startPos,startTransition;var $el=$(this);var $handle;if(options==="destroy"){opt=$el.data("resizable");if(!opt)return;$handle=getHandle(opt.handleSelector,$el);$handle.off("mousedown."+opt.instanceId+" touchstart."+opt.instanceId);if(opt.touchActionNone)$handle.css("touch-action","");$el.removeClass("resizable");return}$el.data("resizable",opt);$handle=getHandle(opt.handleSelector,$el);if(opt.touchActionNone)$handle.css("touch-action","none");$el.addClass("resizable");$handle.on("mousedown."+opt.instanceId+" touchstart."+opt.instanceId,startDragging);function noop(e){e.stopPropagation();e.preventDefault()}function startDragging(e){if(e.preventDefault){e.preventDefault()}startPos=getMousePos(e);startPos.width=parseInt($el.width(),10);startPos.height=parseInt($el.height(),10);startTransition=$el.css("transition");$el.css("transition","none");if(opt.onDragStart){if(opt.onDragStart(e,$el,opt)===false)return}$(document).on("mousemove."+opt.instanceId,doDrag);$(document).on("mouseup."+opt.instanceId,stopDragging);if(window.Touch||navigator.maxTouchPoints){$(document).on("touchmove."+opt.instanceId,doDrag);$(document).on("touchend."+opt.instanceId,stopDragging)}$(document).on("selectstart."+opt.instanceId,noop);$("iframe").css("pointer-events","none")}function doDrag(e){var pos=getMousePos(e),newWidth,newHeight;if(opt.resizeWidthFrom==="left")newWidth=startPos.width-pos.x+startPos.x;else newWidth=startPos.width+pos.x-startPos.x;if(opt.resizeHeightFrom==="top")newHeight=startPos.height-pos.y+startPos.y;else newHeight=startPos.height+pos.y-startPos.y;if(!opt.onDrag||opt.onDrag(e,$el,newWidth,newHeight,opt)!==false){if(opt.resizeHeight)$el.height(newHeight);if(opt.resizeWidth)$el.width(newWidth)}}function stopDragging(e){e.stopPropagation();e.preventDefault();$(document).off("mousemove."+opt.instanceId);$(document).off("mouseup."+opt.instanceId);if(window.Touch||navigator.maxTouchPoints){$(document).off("touchmove."+opt.instanceId);$(document).off("touchend."+opt.instanceId)}$(document).off("selectstart."+opt.instanceId,noop);$el.css("transition",startTransition);$("iframe").css("pointer-events","auto");if(opt.onDragEnd)opt.onDragEnd(e,$el,opt);return false}function getMousePos(e){var pos={x:0,y:0,width:0,height:0};if(typeof e.clientX==="number"){pos.x=e.clientX;pos.y=e.clientY}else if(e.originalEvent.touches){pos.x=e.originalEvent.touches[0].clientX;pos.y=e.originalEvent.touches[0].clientY}else return null;return pos}function getHandle(selector,$el){if(selector&&selector.trim()[0]===">"){selector=selector.trim().replace(/^>\s*/,"");return $el.find(selector)}return selector?$el.parent().find(selector):$el}})};if(!$.fn.resizable)$.fn.resizable=$.fn.resizableSafe});
|
||||
35
library/jquery-resizable/dist/jquery-resizableTableColumns.js
vendored
Normal file
35
library/jquery-resizable/dist/jquery-resizableTableColumns.js
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/// <reference path="jquery.js" />
|
||||
/// <reference path="jquery-resizable.js" />
|
||||
/*
|
||||
jquery-resizable-table-columns
|
||||
Version 0.35 - 11/18/2019
|
||||
(c) 2015-2019 Rick Strahl, West Wind Technologies
|
||||
www.west-wind.com
|
||||
Licensed under MIT License
|
||||
*/
|
||||
(function(factory, undefined) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && typeof module.exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Global jQuery
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function($, undefined) {
|
||||
$.fn.resizableTableColumns = function(opt) {
|
||||
opt = $.extend({
|
||||
resizeHeight: false,
|
||||
handleSelector: "> .resizer",
|
||||
}, opt);
|
||||
|
||||
return this.each(function() {
|
||||
$(this)
|
||||
.css({ position: "relative" })
|
||||
.prepend("<div class='resizer'></div>")
|
||||
.resizableSafe(opt);
|
||||
});
|
||||
};
|
||||
}));
|
||||
1
library/jquery-resizable/dist/jquery-resizableTableColumns.min.js
vendored
Normal file
1
library/jquery-resizable/dist/jquery-resizableTableColumns.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
(function(factory,undefined){if(typeof define==="function"&&define.amd){define(["jquery"],factory)}else if(typeof module==="object"&&typeof module.exports==="object"){module.exports=factory(require("jquery"))}else{factory(jQuery)}})(function($,undefined){$.fn.resizableTableColumns=function(opt){opt=$.extend({resizeHeight:false,handleSelector:"> .resizer"},opt);return this.each(function(){$(this).css({position:"relative"}).prepend("<div class='resizer'></div>").resizableSafe(opt)})}});
|
||||
37
library/jquery-resizable/package-lock.json
generated
Normal file
37
library/jquery-resizable/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "jquery-resizable-dom",
|
||||
"version": "0.35.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
|
||||
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.6.9",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.6.9.tgz",
|
||||
"integrity": "sha512-pcnnhaoG6RtrvHJ1dFncAe8Od6Nuy30oaJ82ts6//sGSXOP5UjBMEthiProjXmMNHOfd93sqlkztifFMcb+4yw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"commander": "~2.20.3",
|
||||
"source-map": "~0.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
40
library/jquery-resizable/package.json
Normal file
40
library/jquery-resizable/package.json
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "jquery-resizable-dom",
|
||||
"version": "0.35.0",
|
||||
"description": "A small jquery component to make components resizable",
|
||||
"main": "./dist/jquery-resizable.min.js",
|
||||
"devDependencies": {
|
||||
"uglify-js": "^3.6.9"
|
||||
},
|
||||
"files": [
|
||||
"readme.md",
|
||||
"dist/",
|
||||
"src/",
|
||||
"assets/"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "^3.4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"pack": "uglifyjs ./src/jquery-resizable.js -o dist/jquery-resizable.min.js --source-map;uglifyjs ./src/jquery-resizableTableColumns.js -o dist/jquery-resizableTableColumns.min.js.js --source-map",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/RickStrahl/jquery-resizable"
|
||||
},
|
||||
"keywords": [
|
||||
"resizable",
|
||||
"jquery-resizable",
|
||||
"panel",
|
||||
"jquery",
|
||||
"jquery-plugin",
|
||||
"ecosystem:jquery"
|
||||
],
|
||||
"author": "Rick Strahl, West Wind Technologies",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/RickStrahl/jquery-resizable/issues"
|
||||
},
|
||||
"homepage": "https://github.com/RickStrahl/jquery-resizable"
|
||||
}
|
||||
119
library/jquery-resizable/sample/ResizableBox.html
Normal file
119
library/jquery-resizable/sample/ResizableBox.html
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Simple Box Resizing - jquery-resizable</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
margin: 20px;
|
||||
}
|
||||
.box {
|
||||
margin: 40px;
|
||||
box-shadow: 5px 5px 10px #535353;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
/* limit size with min/max-width/height*/
|
||||
min-height: 100px;
|
||||
min-width: 200px;
|
||||
max-width: 999px;
|
||||
max-height: 800px;
|
||||
}
|
||||
|
||||
.boxheader {
|
||||
background: #535353;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.boxbody {
|
||||
font-size: 24pt;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.win-size-grip {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 4px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: nwse-resize;
|
||||
background: url(../assets/wingrip.png) no-repeat;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
border: 1px solid silver;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page-container">
|
||||
<h1>
|
||||
jquery-resizable - A simple box resize operation.
|
||||
</h1>
|
||||
<hr />
|
||||
<p>
|
||||
This simple example simply resizes a couple of boxes using a sizing grip at the bottom of the window.
|
||||
Note that .resizable() does not handle of the UI aspects - it only manages the actual resizing
|
||||
operation itself. You're responsible for creating placing the sizing handle where it makes sense
|
||||
for your UI.
|
||||
</p>
|
||||
|
||||
<div class="box">
|
||||
<div class="boxheader">Box 1</div>
|
||||
<div class="boxbody">
|
||||
Resize me
|
||||
</div>
|
||||
<div class="win-size-grip"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box">
|
||||
<div class="boxheader">Box 2</div>
|
||||
<div class="boxbody">
|
||||
Resize me
|
||||
</div>
|
||||
<div class="win-size-grip"></div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<p>
|
||||
To apply resizing use the .resizable plugin and specify the resizable container
|
||||
and a sizing handle that initiates resizing:
|
||||
</p>
|
||||
<pre> $(".box").resizable({ handleSelector: ".win-size-grip"});</pre>
|
||||
<p></p>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script>
|
||||
$(".box").resizable({
|
||||
handleSelector: "> .win-size-grip",
|
||||
onDragStart: function (e, $el, opt) {
|
||||
$el.css("cursor", "nwse-resize");
|
||||
},
|
||||
onDragStop: function (e, $el, opt) {
|
||||
$el.css("cursor", "");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
178
library/jquery-resizable/sample/ResizableTable.html
Normal file
178
library/jquery-resizable/sample/ResizableTable.html
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Table Column Resizing - jquery-resizable</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.page-container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 800px;
|
||||
}
|
||||
td,th {
|
||||
padding: 8px;
|
||||
border: 1px solid silver;
|
||||
}
|
||||
th {
|
||||
color: white;
|
||||
background: #535353;
|
||||
}
|
||||
pre {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
border: 1px solid silver;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="page-container">
|
||||
<h1>
|
||||
jquery-resizable - Table Column Resizing
|
||||
</h1>
|
||||
<hr />
|
||||
<p>
|
||||
This example makes the first two columns of the table resizable.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<th>
|
||||
col 1
|
||||
</th>
|
||||
<th>
|
||||
col 2
|
||||
</th>
|
||||
<th>
|
||||
col 3
|
||||
</th>
|
||||
<th>
|
||||
col 4
|
||||
</th>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Column 2
|
||||
</td>
|
||||
<td>
|
||||
|
||||
Column 3
|
||||
</td>
|
||||
<td>
|
||||
Column 4
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1
|
||||
</td>
|
||||
<td>
|
||||
Column 2
|
||||
</td>
|
||||
<td>
|
||||
Column 3
|
||||
</td>
|
||||
<td>
|
||||
Column 4
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
<p>
|
||||
To create resizable columns requires a bit of extra effort as tables don't have an easy way to create
|
||||
a drag handle that can be moved around.
|
||||
</p>
|
||||
<p>
|
||||
To make columns resizable, we can add an element to the right of the column to provide the handle
|
||||
so we have a visual indicator for dragging. The table cell to resize is made <code>position:relative</code>
|
||||
and the injected element is <code>position: absolute</code> and pushed to the right of the cell
|
||||
to provide the drag handle. Dragging then simply resizes the cell.
|
||||
</p>
|
||||
<p>
|
||||
In practice this means you need some CSS (or jquery styling) to force the injected styling
|
||||
and the logic to inject the element.
|
||||
</p>
|
||||
|
||||
<pre><style>
|
||||
.resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
width: 3px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
</style>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script>
|
||||
//$("td,th")
|
||||
$("td:first-child,td:nth-child(2)")
|
||||
.prepend("<div class='resizer'></div>")
|
||||
.css({ position: "relative" })
|
||||
.resizable({
|
||||
resizeHeight: false,
|
||||
// we use the column as handle and filter
|
||||
// by the contained .resizer element
|
||||
handleSelector: "",
|
||||
onDragStart: function (e, $el, opt) {
|
||||
// only drag resizer
|
||||
if (!$(e.target).hasClass("resizer"))
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
this is important!
|
||||
make sure you define this here
|
||||
or in jQuery codef
|
||||
*/
|
||||
.resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -8px;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
width: 16px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
</style>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script src="../src/jquery-resizableTableColumns.js"></script>
|
||||
<script>
|
||||
$("td,th").resizableTableColumns();
|
||||
//$("td:first-child,td:nth-child(2),td:nth-child(3)").resizableTableColumns();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
242
library/jquery-resizable/sample/SplitterPanel.html
Normal file
242
library/jquery-resizable/sample/SplitterPanel.html
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Simple Split Panels - jquery-resizable</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.page-container { margin: 20px; }
|
||||
|
||||
/* horizontal panel*/
|
||||
.panel-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid silver;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-left,.panel2-left {
|
||||
flex: 0 0 auto; /* only manually resize */
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
min-height: 200px;
|
||||
min-width: 150px;
|
||||
white-space: nowrap;
|
||||
|
||||
background: #838383;
|
||||
color: white;
|
||||
}
|
||||
.splitter, .splitter2,.splitter3 {
|
||||
flex: 0 0 auto;
|
||||
width: 18px;
|
||||
background: url(../assets/vsizegrip.png) center center no-repeat #535353;
|
||||
min-height: 200px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
.panel-right, .panel2-right {
|
||||
flex: 1 1 auto; /* resizable */
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
min-width: 200px !important; /* NOTE: This won't be respected! Explicit size of left forces the size to be fixed */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
/* vertical panel */
|
||||
.panel-container-vertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 500px;
|
||||
border: 1px solid silver;
|
||||
overflow: hidden;
|
||||
}
|
||||
.panel-top {
|
||||
flex: 0 0 auto; /* only manually resize */
|
||||
padding: 10px;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
background: #838383;
|
||||
color: white;
|
||||
}
|
||||
.splitter-horizontal {
|
||||
flex: 0 0 auto;
|
||||
height: 18px;
|
||||
background: url(../assets/hsizegrip.png) center center no-repeat #535353;
|
||||
cursor: row-resize;
|
||||
}
|
||||
.panel-bottom {
|
||||
flex: 1 1 auto; /* resizable */
|
||||
padding: 10px;
|
||||
min-height: 200px !important; /* NOTE: This won't be respected! Explicit resize forces size of this panel */
|
||||
background: #eee;
|
||||
}
|
||||
label {
|
||||
font-size: 1.2em;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin: 30px 0 10px;
|
||||
}
|
||||
pre {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
border: 1px solid silver;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="">
|
||||
<div class="page-container">
|
||||
|
||||
<h1>
|
||||
jquery-resizable - A simple splitter panel
|
||||
</h1>
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in.
|
||||
Note that Flexbox is not required, but used here to keep the layout simple.
|
||||
</p>
|
||||
|
||||
<label>Horizontal Splitter Panes:</label>
|
||||
|
||||
<div class="panel-container">
|
||||
|
||||
<div class="panel-left">
|
||||
left panel
|
||||
</div>
|
||||
|
||||
<div class="splitter">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="panel-right">
|
||||
right panel
|
||||
</div>
|
||||
</div>
|
||||
<button id="btnUnbind" style="margin: 30px 0 0; height: 35px; width: 190px;">Unbind Horizontal Resizers</button>
|
||||
|
||||
<div class="panel-container" style="margin-top: 50px;">
|
||||
|
||||
<div class="panel-left">
|
||||
left panel (same ids)
|
||||
</div>
|
||||
|
||||
<div class="splitter">
|
||||
</div>
|
||||
|
||||
<div class="panel-right">
|
||||
right panel (same ids)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-container" style="margin-top: 50px;">
|
||||
<div class="panel2-left">
|
||||
left panel 2
|
||||
</div>
|
||||
|
||||
<div class="splitter2">
|
||||
</div>
|
||||
|
||||
<div class="panel2-right">
|
||||
right panel 2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Vertical Splitter Panes:</label>
|
||||
<div class="panel-container-vertical">
|
||||
|
||||
<div class="panel-top">
|
||||
top panel
|
||||
</div>
|
||||
|
||||
<div class="splitter-horizontal">
|
||||
</div>
|
||||
|
||||
<div class="panel-bottom">
|
||||
bottom panel
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>Horizontal Splitter Panes with IFrame:</label>
|
||||
|
||||
<div class="panel-container">
|
||||
|
||||
<div class="panel-left">
|
||||
left panel
|
||||
</div>
|
||||
|
||||
<div class="splitter">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="panel-right" style="padding: 0;">
|
||||
<iframe src="https://weblog.west-wind.com/posts/2015/Dec/21/A-small-jQuery-Resizable-Plugin"
|
||||
style="width: 100%; height: 100%; border: none"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<button id="btnUnbind" style="margin: 30px 0 0; height: 35px; width: 190px;">Unbind Horizontal Resizers</button>
|
||||
|
||||
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
This example creates two resizables for the horizontal and vertical splitter panes:
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<pre>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script>
|
||||
$(".panel-left").resizable({
|
||||
handleSelector: ".splitter",
|
||||
resizeHeight: false
|
||||
});
|
||||
$(".panel-top").resizable({
|
||||
handleSelector: ".splitter-horizontal",
|
||||
resizeWidth: false
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script>
|
||||
$(".panel-left").resizable({
|
||||
handleSelector: ".splitter",
|
||||
resizeHeight: false
|
||||
});
|
||||
|
||||
$(".panel2-left").resizable({
|
||||
handleSelector: ".splitter2",
|
||||
resizeHeight: false
|
||||
});
|
||||
|
||||
$(".panel-top").resizable({
|
||||
handleSelector: ".splitter-horizontal",
|
||||
resizeWidth: false
|
||||
});
|
||||
|
||||
$("#btnUnbind").on("click",
|
||||
function () {
|
||||
$(".panel-left").resizable("destroy");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
99
library/jquery-resizable/sample/index.html
Normal file
99
library/jquery-resizable/sample/index.html
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8"/>
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.page-container { margin: 20px; }
|
||||
li {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 40px;
|
||||
box-shadow: 5px 5px 10px #535353;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
/* limit size with min/max-width/height*/
|
||||
min-height: 340px;
|
||||
min-width: 300px;
|
||||
max-width: 999px;
|
||||
max-height: 800px;
|
||||
}
|
||||
|
||||
.boxheader {
|
||||
background: #535353;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.boxbody {
|
||||
font-size: 1.1em;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.win-size-grip {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 4px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: nwse-resize;
|
||||
background: url(../assets/wingrip.png) no-repeat;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
border: 1px solid silver;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-container">
|
||||
|
||||
<h1>jquery-resizable Samples</h1>
|
||||
<hr/>
|
||||
|
||||
<div class="box">
|
||||
<div class="boxheader">Samples Box</div>
|
||||
<div class="boxbody">
|
||||
|
||||
<h3>Samples</h3>
|
||||
<ul>
|
||||
<li><a href="ResizableBox.html">Simple Resizable Box</a></li>
|
||||
<li><a href="SplitterPanel.html">Splitter Panels</a></li>
|
||||
<li><a href="ResizableTable.html">Resizable Table Columns</a></li>
|
||||
<li><a target="_blank" href="https://github.com/RickStrahl/jquery-resizable">Documentation on Github</a></li>
|
||||
</ul>
|
||||
<div class="win-size-grip"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="../src/jquery-resizable.js"></script>
|
||||
<script>
|
||||
$(".box").resizable({
|
||||
handleSelector: "> .win-size-grip",
|
||||
resizeHeight: true,
|
||||
resizeWidth: true,
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
94
library/jquery-resizable/src/jquery-resizable.d.ts
vendored
Normal file
94
library/jquery-resizable/src/jquery-resizable.d.ts
vendored
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
// Some documentation text taken from: https://www.npmjs.com/package/jquery-resizable-dom
|
||||
|
||||
/// <reference types="jquery"/>
|
||||
|
||||
declare namespace JQueryResizeable {
|
||||
interface ResizeableOptions {
|
||||
/**
|
||||
* A jQuery selector or DOM element that acts as a selector. This can be a string, a DOM object or an existing jQuery selector.
|
||||
* If no selector is passed the element itself becomes resizable. Usually this results in undesirable behavior but you can limit the
|
||||
* drag start location using the onDragStart handler.
|
||||
* If the selector is prepended by a ">" the element is searched inside the resized component.
|
||||
* default: null (but "> .resizer" in case of resizableTableColumns).
|
||||
*/
|
||||
handleSelector: JQuery.Selector | Element | JQuery;
|
||||
/**
|
||||
* Determines whether the width is resizable.
|
||||
* default: true
|
||||
*/
|
||||
resizeWidth?: boolean,
|
||||
/**
|
||||
* Determines whether the height is resizable.
|
||||
* default: true (but false in case of resizableTableColumns).
|
||||
*/
|
||||
resizeHeight?: boolean,
|
||||
/**
|
||||
* The side that the width resizing is relative to.
|
||||
* default: "right"
|
||||
*/
|
||||
resizeWidthFrom?: "right"|"left",
|
||||
/**
|
||||
* The side that the height resizing is relative to.
|
||||
* default: "bottom"
|
||||
*/
|
||||
resizeHeightFrom?: "bottom"|"top",
|
||||
/**
|
||||
* Hook method fired just before you start dragging. You can return an explicit false value to abort the drag operation.
|
||||
* Gets passed the event, the selected jQuery element and the options object.
|
||||
* default: null
|
||||
*/
|
||||
onDragStart?: (e: JQuery.Event, element: JQuery, options: JQueryResizeable.ResizeableOptions) => boolean,
|
||||
/**
|
||||
* Hook event fired when the drag operation completes and the mouse is released.
|
||||
* Receives event, jquery selected element and the options object.
|
||||
* default: null
|
||||
*/
|
||||
onDragEnd?: (e: JQuery.Event, element: JQuery, options: JQueryResizeable.ResizeableOptions) => void,
|
||||
/**
|
||||
* Hook method fired whenever the mouse cursor moves.
|
||||
* Receives jQuery event, jquery selected element, newWidth, newHeight and the options object.
|
||||
* Optionally return an explicit value of false to indicate you don't want to set the newWidth, newHeight values
|
||||
* after onDrag completes.
|
||||
* default: null
|
||||
*/
|
||||
onDrag?: (e: JQuery.Event, element: JQuery, newWidth: number, newHeight: number, options: JQueryResizeable.ResizeableOptions) => boolean,
|
||||
/**
|
||||
* Sets touch-action: none on the handle element to prevent browser interference to initiating touch drag operations especially
|
||||
* on Internet Explorer, Edge and Windows 10 browsers.
|
||||
* default: true
|
||||
*/
|
||||
touchActionNone?: boolean,
|
||||
/**
|
||||
* Optionally presets the internal instance id, which is automatically created as a random (starting "rsz_") if not given.
|
||||
* default: null
|
||||
*/
|
||||
instanceId?: string
|
||||
}
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
/**
|
||||
* Initializes or destroys the resizeable feature.
|
||||
*
|
||||
* @param options Either an object passing the options for initialization, or "destroy" as a command.
|
||||
*/
|
||||
resizable(options?: JQueryResizeable.ResizeableOptions | "destroy"): void;
|
||||
/**
|
||||
* Initializes the resizeable feature on a table. Note that it is important to add certain css settings for the ".resizer" class (see comment in this .d.ts file).
|
||||
*
|
||||
* @param options An object passing the options for initialization.
|
||||
*/
|
||||
/* The css code needed is this:
|
||||
* .resizer {
|
||||
* position: absolute;
|
||||
* top: 0;
|
||||
* right: -8px;
|
||||
* bottom: 0;
|
||||
* left: auto;
|
||||
* width: 16px;
|
||||
* cursor: col-resize;
|
||||
* }
|
||||
*
|
||||
*/
|
||||
resizableTableColumns(options?: JQueryResizeable.ResizeableOptions): void;
|
||||
}
|
||||
197
library/jquery-resizable/src/jquery-resizable.js
vendored
Normal file
197
library/jquery-resizable/src/jquery-resizable.js
vendored
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
/// <reference path="../bower_components/jquery/dist/jquery.js" />
|
||||
/*
|
||||
jquery-resizable
|
||||
Version 0.35 - 11/18/2019
|
||||
© 2015-2019 Rick Strahl, West Wind Technologies
|
||||
www.west-wind.com
|
||||
Licensed under MIT License
|
||||
*/
|
||||
(function(factory, undefined) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && typeof module.exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Global jQuery
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function($, undefined) {
|
||||
|
||||
if ($.fn.resizableSafe)
|
||||
return;
|
||||
|
||||
$.fn.resizableSafe = function fnResizable(options) {
|
||||
var defaultOptions = {
|
||||
// selector for handle that starts dragging
|
||||
handleSelector: null,
|
||||
// resize the width
|
||||
resizeWidth: true,
|
||||
// resize the height
|
||||
resizeHeight: true,
|
||||
// the side that the width resizing is relative to
|
||||
resizeWidthFrom: 'right',
|
||||
// the side that the height resizing is relative to
|
||||
resizeHeightFrom: 'bottom',
|
||||
// hook into start drag operation (event passed)
|
||||
onDragStart: null,
|
||||
// hook into stop drag operation (event passed)
|
||||
onDragEnd: null,
|
||||
// hook into each drag operation (event passed)
|
||||
onDrag: null,
|
||||
// disable touch-action on $handle
|
||||
// prevents browser level actions like forward back gestures
|
||||
touchActionNone: true,
|
||||
// instance id
|
||||
instanceId: null
|
||||
};
|
||||
if (typeof options == "object")
|
||||
defaultOptions = $.extend(defaultOptions, options);
|
||||
|
||||
return this.each(function () {
|
||||
var opt = $.extend({}, defaultOptions);
|
||||
if (!opt.instanceId)
|
||||
opt.instanceId = "rsz_" + new Date().getTime();
|
||||
|
||||
var startPos, startTransition;
|
||||
|
||||
// get the element to resize
|
||||
var $el = $(this);
|
||||
var $handle;
|
||||
|
||||
if (options === 'destroy') {
|
||||
opt = $el.data('resizable');
|
||||
if (!opt)
|
||||
return;
|
||||
|
||||
$handle = getHandle(opt.handleSelector, $el);
|
||||
$handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
|
||||
if (opt.touchActionNone)
|
||||
$handle.css("touch-action", "");
|
||||
$el.removeClass("resizable");
|
||||
return;
|
||||
}
|
||||
|
||||
$el.data('resizable', opt);
|
||||
|
||||
// get the drag handle
|
||||
|
||||
$handle = getHandle(opt.handleSelector, $el);
|
||||
|
||||
if (opt.touchActionNone)
|
||||
$handle.css("touch-action", "none");
|
||||
|
||||
$el.addClass("resizable");
|
||||
$handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
|
||||
|
||||
function noop(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
function startDragging(e) {
|
||||
// Prevent dragging a ghost image in HTML5 / Firefox and maybe others
|
||||
if ( e.preventDefault ) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
startPos = getMousePos(e);
|
||||
startPos.width = parseInt($el.width(), 10);
|
||||
startPos.height = parseInt($el.height(), 10);
|
||||
|
||||
startTransition = $el.css("transition");
|
||||
$el.css("transition", "none");
|
||||
|
||||
if (opt.onDragStart) {
|
||||
if (opt.onDragStart(e, $el, opt) === false)
|
||||
return;
|
||||
}
|
||||
|
||||
$(document).on('mousemove.' + opt.instanceId, doDrag);
|
||||
$(document).on('mouseup.' + opt.instanceId, stopDragging);
|
||||
if (window.Touch || navigator.maxTouchPoints) {
|
||||
$(document).on('touchmove.' + opt.instanceId, doDrag);
|
||||
$(document).on('touchend.' + opt.instanceId, stopDragging);
|
||||
}
|
||||
$(document).on('selectstart.' + opt.instanceId, noop); // disable selection
|
||||
$("iframe").css("pointer-events","none");
|
||||
}
|
||||
|
||||
function doDrag(e) {
|
||||
|
||||
var pos = getMousePos(e), newWidth, newHeight;
|
||||
|
||||
if (opt.resizeWidthFrom === 'left')
|
||||
newWidth = startPos.width - pos.x + startPos.x;
|
||||
else
|
||||
newWidth = startPos.width + pos.x - startPos.x;
|
||||
|
||||
if (opt.resizeHeightFrom === 'top')
|
||||
newHeight = startPos.height - pos.y + startPos.y;
|
||||
else
|
||||
newHeight = startPos.height + pos.y - startPos.y;
|
||||
|
||||
if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
|
||||
if (opt.resizeHeight)
|
||||
$el.height(newHeight);
|
||||
|
||||
if (opt.resizeWidth)
|
||||
$el.width(newWidth);
|
||||
}
|
||||
}
|
||||
|
||||
function stopDragging(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
$(document).off('mousemove.' + opt.instanceId);
|
||||
$(document).off('mouseup.' + opt.instanceId);
|
||||
|
||||
if (window.Touch || navigator.maxTouchPoints) {
|
||||
$(document).off('touchmove.' + opt.instanceId);
|
||||
$(document).off('touchend.' + opt.instanceId);
|
||||
}
|
||||
$(document).off('selectstart.' + opt.instanceId, noop);
|
||||
|
||||
// reset changed values
|
||||
$el.css("transition", startTransition);
|
||||
$("iframe").css("pointer-events","auto");
|
||||
|
||||
if (opt.onDragEnd)
|
||||
opt.onDragEnd(e, $el, opt);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getMousePos(e) {
|
||||
var pos = { x: 0, y: 0, width: 0, height: 0 };
|
||||
if (typeof e.clientX === "number") {
|
||||
pos.x = e.clientX;
|
||||
pos.y = e.clientY;
|
||||
} else if (e.originalEvent.touches) {
|
||||
pos.x = e.originalEvent.touches[0].clientX;
|
||||
pos.y = e.originalEvent.touches[0].clientY;
|
||||
} else
|
||||
return null;
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
||||
function getHandle(selector, $el) {
|
||||
if (selector && selector.trim()[0] === ">") {
|
||||
selector = selector.trim().replace(/^>\s*/, "");
|
||||
return $el.find(selector);
|
||||
}
|
||||
|
||||
// Search for the selector, but only in the parent element to limit the scope
|
||||
// This works for multiple objects on a page (using .class syntax most likely)
|
||||
// as long as each has a separate parent container.
|
||||
return selector ? $el.parent().find(selector) : $el;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (!$.fn.resizable)
|
||||
$.fn.resizable = $.fn.resizableSafe;
|
||||
}));
|
||||
35
library/jquery-resizable/src/jquery-resizableTableColumns.js
vendored
Normal file
35
library/jquery-resizable/src/jquery-resizableTableColumns.js
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/// <reference path="jquery.js" />
|
||||
/// <reference path="jquery-resizable.js" />
|
||||
/*
|
||||
jquery-resizable-table-columns
|
||||
Version 0.35 - 11/18/2019
|
||||
(c) 2015-2019 Rick Strahl, West Wind Technologies
|
||||
www.west-wind.com
|
||||
Licensed under MIT License
|
||||
*/
|
||||
(function(factory, undefined) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof module === 'object' && typeof module.exports === 'object') {
|
||||
// CommonJS
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
// Global jQuery
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function($, undefined) {
|
||||
$.fn.resizableTableColumns = function(opt) {
|
||||
opt = $.extend({
|
||||
resizeHeight: false,
|
||||
handleSelector: "> .resizer",
|
||||
}, opt);
|
||||
|
||||
return this.each(function() {
|
||||
$(this)
|
||||
.css({ position: "relative" })
|
||||
.prepend("<div class='resizer'></div>")
|
||||
.resizableSafe(opt);
|
||||
});
|
||||
};
|
||||
}));
|
||||
11
library/jquery-resizable/watch.ps1
Normal file
11
library/jquery-resizable/watch.ps1
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# This script launches a local Web Server that includes Live Reload functionality
|
||||
# and navigates to the sample page.
|
||||
|
||||
# Requires the Dotnet Core 3.0+ SDK on Windows, Mac or Linux
|
||||
# To install:
|
||||
#
|
||||
# dotnet tool install -g LiveReloadServer
|
||||
|
||||
Start-Process -FilePath 'http://localhost:5200/sample'
|
||||
|
||||
LiveReloadServer --OpenBrowser false
|
||||
11
library/jquery-resizable/watch.sh
Normal file
11
library/jquery-resizable/watch.sh
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# This script launches a local Web Server that includes Live Reload functionality
|
||||
# and navigates to the sample page.
|
||||
|
||||
# Requires the Dotnet Core 3.0+ SDK on Windows, Mac or Linux
|
||||
# To install:
|
||||
#
|
||||
# dotnet tool install -g LiveReloadServer
|
||||
|
||||
|
||||
x-www-browser 'http://localhost:5200/sample/'
|
||||
LiveReloadServer --OpenBrowser false
|
||||
|
|
@ -21,6 +21,7 @@ Head::add_js('/library/jquery.timeago.js');
|
|||
Head::add_js('/library/readmorejs/readmore.js');
|
||||
Head::add_js('/library/sticky-kit/sticky-kit.min.js');
|
||||
Head::add_js('/library/jgrowl/jquery.jgrowl.min.js');
|
||||
Head::add_js('/library/jquery-resizable/dist/jquery-resizable.min.js');
|
||||
|
||||
Head::add_js('/library/sjcl/sjcl.js');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue