增加LIB css文件

This commit is contained in:
appqy 2023-01-12 11:29:16 +08:00
parent 03f0df3a59
commit 59e193e7df
1877 changed files with 342182 additions and 0 deletions

View File

@ -0,0 +1,40 @@
{
"name": "Sortable",
"main": [
"Sortable.js"
],
"homepage": "http://SortableJS.github.io/Sortable/",
"authors": [
"RubaXa <ibnRubaXa@gmail.com>",
"owenm <owen23355@gmail.com>"
],
"description": "JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.",
"keywords": [
"sortable",
"reorder",
"list",
"html5",
"drag",
"and",
"drop",
"dnd",
"web-components"
],
"license": "MIT",
"ignore": [
"node_modules",
"bower_components",
"test",
"tests"
],
"version": "1.10.2",
"_release": "1.10.2",
"_resolution": {
"type": "version",
"tag": "1.10.2",
"commit": "2addddd67387b6e4b6b5e51806eb698f0a3eee88"
},
"_source": "https://github.com/RubaXa/Sortable.git",
"_target": "~1.10.0",
"_originalSource": "Sortable"
}

View File

@ -0,0 +1,33 @@
version: 2.0
jobs:
build:
docker:
- image: circleci/node:10.16-browsers
steps:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
- v1-dependencies-
- run: npm install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run: npm run build:umd
- run:
name: Compatibility Test
command: |
if [ -z "$CIRCLE_PR_NUMBER" ];
then
npm run test:compat
fi
- run: npm run test
- store_test_results:
path: /tmp/test-results

View File

@ -0,0 +1,15 @@
# editorconfig.org
root = true
[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.yml]
indent_style = space

View File

@ -0,0 +1,6 @@
node_modules
mock.png
.*.sw*
.build*
jquery.fn.*
.idea/

View File

@ -0,0 +1,25 @@
{
"strict": false,
"newcap": false,
"node": true,
"expr": true,
"supernew": true,
"laxbreak": true,
"esversion": 9,
"white": true,
"globals": {
"define": true,
"test": true,
"expect": true,
"module": true,
"asyncTest": true,
"start": true,
"ok": true,
"equal": true,
"notEqual": true,
"deepEqual": true,
"window": true,
"document": true,
"performance": true
}
}

View File

@ -0,0 +1,7 @@
{
"speed": 0.4,
"reporter": {
"name": "xunit",
"output": "/tmp/test-results/res.xml"
}
}

View File

@ -0,0 +1,26 @@
# Contribution Guidelines
### Issue
1. Try [master](https://github.com/SortableJS/Sortable/tree/master/)-branch, perhaps the problem has been solved;
2. [Use the search](https://github.com/SortableJS/Sortable/search?type=Issues&q=problem), maybe already have an answer;
3. If not found, create example on [jsbin.com (draft)](https://jsbin.com/kamiwez/edit?html,js,output) and describe the problem.
---
### Pull Request
1. Only request to merge with the [master](https://github.com/SortableJS/Sortable/tree/master/)-branch.
2. Only modify source files, **do not commit the resulting build**
### Setup
1. Fork the repo on [github](https://github.com)
2. Clone locally
3. Run `npm i` in the local repo
### Building
- For development, build the `./Sortable.js` file using the command `npm run build:umd:watch`
- To build everything and minify it, run `npm run build`
- Do not commit the resulting builds in any pull request they will be generated at release

View File

@ -0,0 +1,24 @@
#### Problem:
#### JSBin/JSFiddle demonstrating the problem:
---
Before you create an issue, check it:
1. Try [master](https://github.com/SortableJS/Sortable/tree/master/)-branch, perhaps the problem has been solved;
2. [Use the search](https://github.com/SortableJS/Sortable/search?q=problem), maybe we already have an answer;
3. If not found, create an example on [jsbin.com (draft)](http://jsbin.com/vojixek/edit?html,js,output) and describe the problem.
Bindings:
- Angular
- 2.0+: https://github.com/SortableJS/angular-sortablejs/issues
- legacy: https://github.com/SortableJS/angular-legacy-sortablejs/issues
- React
- ES2015+: https://github.com/SortableJS/react-sortablejs/issues
- mixin: https://github.com/SortableJS/react-mixin-sortablejs/issues
- Polymer: https://github.com/SortableJS/polymer-sortablejs/issues
- Knockout: https://github.com/SortableJS/knockout-sortablejs/issues
- Meteor: https://github.com/SortableJS/meteor-sortablejs/issues

View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 All contributors to Sortable
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.

View File

@ -0,0 +1,813 @@
# Sortable &nbsp; [![Financial Contributors on Open Collective](https://opencollective.com/Sortable/all/badge.svg?label=financial+contributors)](https://opencollective.com/Sortable) [![CircleCI](https://circleci.com/gh/SortableJS/Sortable.svg?style=svg)](https://circleci.com/gh/SortableJS/Sortable) [![DeepScan grade](https://deepscan.io/api/teams/3901/projects/5666/branches/43977/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3901&pid=5666&bid=43977) [![](https://data.jsdelivr.com/v1/package/npm/sortablejs/badge)](https://www.jsdelivr.com/package/npm/sortablejs) [![npm](https://img.shields.io/npm/v/sortablejs.svg)](https://www.npmjs.com/package/sortablejs)
Sortable is a JavaScript library for reorderable drag-and-drop lists.
Demo: http://sortablejs.github.io/Sortable/
[<img width="250px" src="https://raw.githubusercontent.com/SortableJS/Sortable/HEAD/st/saucelabs.svg?sanitize=true">](https://saucelabs.com/)
## Features
* Supports touch devices and [modern](http://caniuse.com/#search=drag) browsers (including IE9)
* Can drag from one list to another or within the same list
* CSS animation when moving items
* Supports drag handles *and selectable text* (better than voidberg's html5sortable)
* Smart auto-scrolling
* Advanced swap detection
* Smooth animations
* [Multi-drag](https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag) support
* Support for CSS transforms
* Built using native HTML5 drag and drop API
* Supports
* [Meteor](https://github.com/SortableJS/meteor-sortablejs)
* Angular
* [2.0+](https://github.com/SortableJS/angular-sortablejs)
* [1.&ast;](https://github.com/SortableJS/angular-legacy-sortablejs)
* React
* [ES2015+](https://github.com/SortableJS/react-sortablejs)
* [Mixin](https://github.com/SortableJS/react-mixin-sortablejs)
* [Knockout](https://github.com/SortableJS/knockout-sortablejs)
* [Polymer](https://github.com/SortableJS/polymer-sortablejs)
* [Vue](https://github.com/SortableJS/Vue.Draggable)
* [Ember](https://github.com/SortableJS/ember-sortablejs)
* Supports any CSS library, e.g. [Bootstrap](#bs)
* Simple API
* Support for [plugins](#plugins)
* [CDN](#cdn)
* No jQuery required (but there is [support](https://github.com/SortableJS/jquery-sortablejs))
* Typescript definitions at `@types/sortablejs`
<br/>
### Articles
* [Dragging Multiple Items in Sortable](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable) (April 26, 2019)
* [Swap Thresholds and Direction](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction) (December 2, 2018)
* [Sortable v1.0 — New capabilities](https://github.com/SortableJS/Sortable/wiki/Sortable-v1.0-—-New-capabilities/) (December 22, 2014)
* [Sorting with the help of HTML5 Drag'n'Drop API](https://github.com/SortableJS/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/) (December 23, 2013)
<br/>
### Getting Started
Install with NPM:
```bash
$ npm install sortablejs --save
```
Install with Bower:
```bash
$ bower install --save sortablejs
```
Import into your project:
```js
// Default SortableJS
import Sortable from 'sortablejs';
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
```
Cherrypick plugins:
```js
// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';
Sortable.mount(new MultiDrag(), new Swap());
// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
Sortable.mount(new AutoScroll());
```
---
### Usage
```html
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
```
```js
var el = document.getElementById('items');
var sortable = Sortable.create(el);
```
You can use any element for the list and its elements, not just `ul`/`li`. Here is an [example with `div`s](https://jsbin.com/visimub/edit?html,js,output).
---
### Options
```js
var sortable = new Sortable(el, {
group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort: true, // sorting inside list
delay: 0, // time in milliseconds to define when the sorting should start
delayOnTouchOnly: false, // only delay if user is using touch
touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
disabled: false, // Disables the sortable if set to true.
store: null, // @see Store
animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
handle: ".my-handle", // Drag handle selector within list items
filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
draggable: ".item", // Specifies which items inside the element should be draggable
dataIdAttr: 'data-id',
ghostClass: "sortable-ghost", // Class name for the drop placeholder
chosenClass: "sortable-chosen", // Class name for the chosen item
dragClass: "sortable-drag", // Class name for the dragging item
swapThreshold: 1, // Threshold of the swap zone
invertSwap: false, // Will always use inverted swap zone if set to true
invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
direction: 'horizontal', // Direction of Sortable (will be detected automatically if not given)
forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
dragoverBubble: false,
removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it
setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},
// Element is chosen
onChoose: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},
// Element is unchosen
onUnchoose: function(/**Event*/evt) {
// same properties as onEnd
},
// Element dragging started
onStart: function (/**Event*/evt) {
evt.oldIndex; // element index within parent
},
// Element dragging ended
onEnd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
evt.to; // target list
evt.from; // previous list
evt.oldIndex; // element's old index within old parent
evt.newIndex; // element's new index within new parent
evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
evt.clone // the clone element
evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
},
// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
// same properties as onEnd
},
// Changed sorting within list
onUpdate: function (/**Event*/evt) {
// same properties as onEnd
},
// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/evt) {
// same properties as onEnd
},
// Element is removed from the list into another list
onRemove: function (/**Event*/evt) {
// same properties as onEnd
},
// Attempt to drag a filtered element
onFilter: function (/**Event*/evt) {
var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
},
// Event when you move an item in the list or between lists
onMove: function (/**Event*/evt, /**Event*/originalEvent) {
// Example: https://jsbin.com/nawahef/edit?js,output
evt.dragged; // dragged HTMLElement
evt.draggedRect; // DOMRect {left, top, right, bottom}
evt.related; // HTMLElement on which have guided
evt.relatedRect; // DOMRect
evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
originalEvent.clientY; // mouse position
// return false; — for cancel
// return -1; — insert before target
// return 1; — insert after target
},
// Called when creating a clone of element
onClone: function (/**Event*/evt) {
var origEl = evt.item;
var cloneEl = evt.clone;
},
// Called when dragging element changes position
onChange: function(/**Event*/evt) {
evt.newIndex // most likely why this event is used is to get the dragging element's current index
// same properties as onEnd
}
});
```
---
#### `group` option
To drag elements from one list into another, both lists must have the same `group` value.
You can also define whether lists can give away, give and keep a copy (`clone`), and receive elements.
* name: `String` — group name
* pull: `true|false|["foo", "bar"]|'clone'|function` — ability to move from the list. `clone` — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to `true`.
* put: `true|false|["baz", "qux"]|function` — whether elements can be added from other lists, or an array of group names from which elements can be added.
* revertClone: `boolean` — revert cloned element to initial position after moving to a another list.
Demo:
- https://jsbin.com/hijetos/edit?js,output
- https://jsbin.com/nacoyah/edit?js,output — use of complex logic in the `pull` and` put`
- https://jsbin.com/bifuyab/edit?js,output — use `revertClone: true`
---
#### `sort` option
Allow sorting inside list.
Demo: https://jsbin.com/jayedig/edit?js,output
---
#### `delay` option
Time in milliseconds to define when the sorting should start.
Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop.
Demo: https://jsbin.com/zosiwah/edit?js,output
---
#### `delayOnTouchOnly` option
Whether or not the delay should be applied only if the user is using touch (eg. on a mobile device). No delay will be applied in any other case. Defaults to `false`.
---
#### `swapThreshold` option
Percentage of the target that the swap zone will take up, as a float between `0` and `1`.
[Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold)
Demo: http://sortablejs.github.io/Sortable#thresholds
---
#### `invertSwap` option
Set to `true` to set the swap zone to the sides of the target, for the effect of sorting "in between" items.
[Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#forcing-inverted-swap-zone)
Demo: http://sortablejs.github.io/Sortable#thresholds
---
#### `invertedSwapThreshold` option
Percentage of the target that the inverted swap zone will take up, as a float between `0` and `1`. If not given, will default to `swapThreshold`.
[Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#dealing-with-swap-glitching)
---
#### `direction` option
Direction that the Sortable should sort in. Can be set to `'vertical'`, `'horizontal'`, or a function, which will be called whenever a target is dragged over. Must return `'vertical'` or `'horizontal'`.
[Read more](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction)
Example of direction detection for vertical list that includes full column and half column elements:
```js
Sortable.create(el, {
direction: function(evt, target, dragEl) {
if (target !== null && target.className.includes('half-column') && dragEl.className.includes('half-column')) {
return 'horizontal';
}
return 'vertical';
}
});
```
---
#### `touchStartThreshold` option
This option is similar to `fallbackTolerance` option.
When the `delay` option is set, some phones with very sensitive touch displays like the Samsung Galaxy S8 will fire
unwanted touchmove events even when your finger is not moving, resulting in the sort not triggering.
This option sets the minimum pointer movement that must occur before the delayed sorting is cancelled.
Values between 3 to 5 are good.
---
#### `disabled` options
Disables the sortable if set to `true`.
Demo: https://jsbin.com/sewokud/edit?js,output
```js
var sortable = Sortable.create(list);
document.getElementById("switcher").onclick = function () {
var state = sortable.option("disabled"); // get
sortable.option("disabled", !state); // set
};
```
---
#### `handle` option
To make list items draggable, Sortable disables text selection by the user.
That's not always desirable. To allow text selection, define a drag handler,
which is an area of every list element that allows it to be dragged around.
Demo: https://jsbin.com/numakuh/edit?html,js,output
```js
Sortable.create(el, {
handle: ".my-handle"
});
```
```html
<ul>
<li><span class="my-handle">::</span> list item text one
<li><span class="my-handle">::</span> list item text two
</ul>
```
```css
.my-handle {
cursor: move;
cursor: -webkit-grabbing;
}
```
---
#### `filter` option
```js
Sortable.create(list, {
filter: ".js-remove, .js-edit",
onFilter: function (evt) {
var item = evt.item,
ctrl = evt.target;
if (Sortable.utils.is(ctrl, ".js-remove")) { // Click on remove button
item.parentNode.removeChild(item); // remove sortable item
}
else if (Sortable.utils.is(ctrl, ".js-edit")) { // Click on edit link
// ...
}
}
})
```
---
#### `ghostClass` option
Class name for the drop placeholder (default `sortable-ghost`).
Demo: https://jsbin.com/henuyiw/edit?css,js,output
```css
.ghost {
opacity: 0.4;
}
```
```js
Sortable.create(list, {
ghostClass: "ghost"
});
```
---
#### `chosenClass` option
Class name for the chosen item (default `sortable-chosen`).
Demo: https://jsbin.com/hoqufox/edit?css,js,output
```css
.chosen {
color: #fff;
background-color: #c00;
}
```
```js
Sortable.create(list, {
delay: 500,
chosenClass: "chosen"
});
```
---
#### `forceFallback` option
If set to `true`, the Fallback for non HTML5 Browser will be used, even if we are using an HTML5 Browser.
This gives us the possibility to test the behaviour for older Browsers even in newer Browser, or make the Drag 'n Drop feel more consistent between Desktop , Mobile and old Browsers.
On top of that, the Fallback always generates a copy of that DOM Element and appends the class `fallbackClass` defined in the options. This behaviour controls the look of this 'dragged' Element.
Demo: https://jsbin.com/sibiput/edit?html,css,js,output
---
#### `fallbackTolerance` option
Emulates the native drag threshold. Specify in pixels how far the mouse should move before it's considered as a drag.
Useful if the items are also clickable like in a list of links.
When the user clicks inside a sortable element, it's not uncommon for your hand to move a little between the time you press and the time you release.
Dragging only starts if you move the pointer past a certain tolerance, so that you don't accidentally start dragging every time you click.
3 to 5 are probably good values.
---
#### `dragoverBubble` option
If set to `true`, the dragover event will bubble to parent sortables. Works on both fallback and native dragover event.
By default, it is false, but Sortable will only stop bubbling the event once the element has been inserted into a parent Sortable, or *can* be inserted into a parent Sortable, but isn't at that specific time (due to animation, etc).
Since 1.8.0, you will probably want to leave this option as false. Before 1.8.0, it may need to be `true` for nested sortables to work.
---
#### `removeCloneOnHide` option
If set to `false`, the clone is hidden by having it's CSS `display` property set to `none`.
By default, this option is `true`, meaning Sortable will remove the cloned element from the DOM when it is supposed to be hidden.
---
#### `emptyInsertThreshold` option
The distance (in pixels) the mouse must be from an empty sortable while dragging for the drag element to be inserted into that sortable. Defaults to `5`. Set to `0` to disable this feature.
Demo: https://jsbin.com/becavoj/edit?js,output
---
### Event object ([demo](https://jsbin.com/fogujiv/edit?js,output))
- to:`HTMLElement` — list, in which moved element
- from:`HTMLElement` — previous list
- item:`HTMLElement` — dragged element
- clone:`HTMLElement`
- oldIndex:`Number|undefined` — old index within parent
- newIndex:`Number|undefined` — new index within parent
- oldDraggableIndex: `Number|undefined` — old index within parent, only counting draggable elements
- newDraggableIndex: `Number|undefined` — new index within parent, only counting draggable elements
- pullMode:`String|Boolean|undefined` — Pull mode if dragging into another sortable (`"clone"`, `true`, or `false`), otherwise undefined
#### `move` event object
- to:`HTMLElement`
- from:`HTMLElement`
- dragged:`HTMLElement`
- draggedRect:`DOMRect`
- related:`HTMLElement` — element on which have guided
- relatedRect:`DOMRect`
- willInsertAfter:`Boolean` — `true` if will element be inserted after target (or `false` if before)
---
### Method
##### option(name:`String`[, value:`*`]):`*`
Get or set the option.
##### closest(el:`String`[, selector:`HTMLElement`]):`HTMLElement|null`
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
##### toArray():`String[]`
Serializes the sortable's item `data-id`'s (`dataIdAttr` option) into an array of string.
##### sort(order:`String[]`)
Sorts the elements according to the array.
```js
var order = sortable.toArray();
sortable.sort(order.reverse()); // apply
```
##### save()
Save the current sorting (see [store](#store))
##### destroy()
Removes the sortable functionality completely.
---
<a name="store"></a>
### Store
Saving and restoring of the sort.
```html
<ul>
<li data-id="1">order</li>
<li data-id="2">save</li>
<li data-id="3">restore</li>
</ul>
```
```js
Sortable.create(el, {
group: "localStorage-example",
store: {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get: function (sortable) {
var order = localStorage.getItem(sortable.options.group.name);
return order ? order.split('|') : [];
},
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set: function (sortable) {
var order = sortable.toArray();
localStorage.setItem(sortable.options.group.name, order.join('|'));
}
}
})
```
---
<a name="bs"></a>
### Bootstrap
Demo: https://jsbin.com/visimub/edit?html,js,output
```html
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- Latest Sortable -->
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<!-- Simple List -->
<ul id="simpleList" class="list-group">
<li class="list-group-item">This is <a href="http://SortableJS.github.io/Sortable/">Sortable</a></li>
<li class="list-group-item">It works with Bootstrap...</li>
<li class="list-group-item">...out of the box.</li>
<li class="list-group-item">It has support for touch devices.</li>
<li class="list-group-item">Just drag some elements around.</li>
</ul>
<script>
// Simple list
Sortable.create(simpleList, { /* options */ });
</script>
```
---
### Static methods & properties
##### Sortable.create(el:`HTMLElement`[, options:`Object`]):`Sortable`
Create new instance.
---
##### Sortable.active:`Sortable`
The active Sortable instance.
---
##### Sortable.dragged:`HTMLElement`
The element being dragged.
---
##### Sortable.ghost:`HTMLElement`
The ghost element.
---
##### Sortable.clone:`HTMLElement`
The clone element.
---
##### Sortable.get(element:`HTMLElement`):`Sortable`
Get the Sortable instance on an element.
---
##### Sortable.mount(plugin:`...SortablePlugin|SortablePlugin[]`)
Mounts a plugin to Sortable.
---
##### Sortable.utils
* on(el`:HTMLElement`, event`:String`, fn`:Function`) — attach an event handler function
* off(el`:HTMLElement`, event`:String`, fn`:Function`) — remove an event handler
* css(el`:HTMLElement`)`:Object` — get the values of all the CSS properties
* css(el`:HTMLElement`, prop`:String`)`:Mixed` — get the value of style properties
* css(el`:HTMLElement`, prop`:String`, value`:String`) — set one CSS properties
* css(el`:HTMLElement`, props`:Object`) — set more CSS properties
* find(ctx`:HTMLElement`, tagName`:String`[, iterator`:Function`])`:Array` — get elements by tag name
* bind(ctx`:Mixed`, fn`:Function`)`:Function` — Takes a function and returns a new one that will always have a particular context
* is(el`:HTMLElement`, selector`:String`)`:Boolean` — check the current matched set of elements against a selector
* closest(el`:HTMLElement`, selector`:String`[, ctx`:HTMLElement`])`:HTMLElement|Null` — for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
* clone(el`:HTMLElement`)`:HTMLElement` — create a deep copy of the set of matched elements
* toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — add or remove one classes from each element
* detectDirection(el`:HTMLElement`)`:String` — automatically detect the [direction](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction) of the element as either `'vertical'` or `'horizontal'`
---
### Plugins
#### Extra Plugins (included in complete versions)
- [MultiDrag](https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag)
- [Swap](https://github.com/SortableJS/Sortable/tree/master/plugins/Swap)
#### Default Plugins (included in default versions)
- [AutoScroll](https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll)
- [OnSpill](https://github.com/SortableJS/Sortable/tree/master/plugins/OnSpill)
---
<a name="cdn"></a>
### CDN
```html
<!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
```
---
### Contributing (Issue/PR)
Please, [read this](CONTRIBUTING.md).
---
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
<a href="https://github.com/SortableJS/Sortable/graphs/contributors"><img src="https://opencollective.com/Sortable/contributors.svg?width=890&button=false" /></a>
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/Sortable/contribute)]
#### Individuals
<a href="https://opencollective.com/Sortable"><img src="https://opencollective.com/Sortable/individuals.svg?width=890"></a>
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/Sortable/contribute)]
<a href="https://opencollective.com/Sortable/organization/0/website"><img src="https://opencollective.com/Sortable/organization/0/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/1/website"><img src="https://opencollective.com/Sortable/organization/1/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/2/website"><img src="https://opencollective.com/Sortable/organization/2/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/3/website"><img src="https://opencollective.com/Sortable/organization/3/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/4/website"><img src="https://opencollective.com/Sortable/organization/4/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/5/website"><img src="https://opencollective.com/Sortable/organization/5/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/6/website"><img src="https://opencollective.com/Sortable/organization/6/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/7/website"><img src="https://opencollective.com/Sortable/organization/7/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/8/website"><img src="https://opencollective.com/Sortable/organization/8/avatar.svg"></a>
<a href="https://opencollective.com/Sortable/organization/9/website"><img src="https://opencollective.com/Sortable/organization/9/avatar.svg"></a>
## MIT LICENSE
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.

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,27 @@
module.exports = function(api) {
api.cache(true);
let presets;
if (process.env.NODE_ENV === 'es') {
presets = [
[
"@babel/preset-env",
{
"modules": false
}
]
];
} else if (process.env.NODE_ENV === 'umd') {
presets = [
[
"@babel/preset-env"
]
];
}
return {
plugins: ['@babel/plugin-transform-object-assign'],
presets
};
};

View File

@ -0,0 +1,30 @@
{
"name": "Sortable",
"main": [
"Sortable.js"
],
"homepage": "http://SortableJS.github.io/Sortable/",
"authors": [
"RubaXa <ibnRubaXa@gmail.com>",
"owenm <owen23355@gmail.com>"
],
"description": "JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.",
"keywords": [
"sortable",
"reorder",
"list",
"html5",
"drag",
"and",
"drop",
"dnd",
"web-components"
],
"license": "MIT",
"ignore": [
"node_modules",
"bower_components",
"test",
"tests"
]
}

View File

@ -0,0 +1,8 @@
import Sortable from './entry-defaults.js';
import Swap from '../plugins/Swap';
import MultiDrag from '../plugins/MultiDrag';
Sortable.mount(new Swap());
Sortable.mount(new MultiDrag());
export default Sortable;

View File

@ -0,0 +1,19 @@
import Sortable from '../src/Sortable.js';
import AutoScroll from '../plugins/AutoScroll';
import OnSpill from '../plugins/OnSpill';
import Swap from '../plugins/Swap';
import MultiDrag from '../plugins/MultiDrag';
export default Sortable;
export {
Sortable,
// Default
AutoScroll,
OnSpill,
// Extra
Swap,
MultiDrag
};

View File

@ -0,0 +1,19 @@
import Sortable from '../src/Sortable.js';
import AutoScroll from '../plugins/AutoScroll';
import { RemoveOnSpill, RevertOnSpill } from '../plugins/OnSpill';
// Extra
import Swap from '../plugins/Swap';
import MultiDrag from '../plugins/MultiDrag';
Sortable.mount(new AutoScroll());
Sortable.mount(RemoveOnSpill, RevertOnSpill);
export default Sortable;
export {
Sortable,
// Extra
Swap,
MultiDrag
};

View File

@ -0,0 +1,459 @@
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="st/og-image.png">
<title>SortableJS</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="st/theme.css">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta property="og:image" content="/st/og-image.png"/>
<meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, dnd, sortableJS"/>
<meta name="description" content="Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap."/>
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
</head>
<body>
<a href="https://github.com/SortableJS/Sortable"><img style="position: fixed; top: 0; right: 0; border: 0; z-index:99999" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="text-center row header">
<img class="mx-auto d-block" src="st/og-image.png" style="max-width: 200px; max-height: 200px" />
<h1 class="col-12">SortableJS</h1>
<h3 class="col-12 text-center">JavaScript library for reorderable drag-and-drop lists</h3>
<div class="toc col-12 col-md-5 mt-3">
<h5>Features</h5>
<li><a href="#simple-list">Simple list</a></li>
<li><a href="#shared-lists">Shared lists</a></li>
<li><a href="#cloning">Cloning</a></li>
<li><a href="#sorting-disabled">Disabling sorting</a></li>
<li><a href="#handle">Handles</a></li>
<li><a href="#filter">Filter</a></li>
<li><a href="#thresholds">Thresholds</a></li>
<h5>Examples</h5>
<li><a href="#grid">Grid</a></li>
<li><a href="#nested">Nested sortables</a></li>
<h5>Plugins</h5>
<li><a href="#multi-drag">MultiDrag</a></li>
<li><a href="#swap">Swap</a></li>
<h5><a href="#comparisons">Comparisons</a></h5>
<h5><a href="#frameworks">Framework Support</a></h5>
</div>
</div>
<div class="row">
<h2 class="col-12">Features</h2>
</div>
<hr />
<div id="simple-list" class="row">
<h4 class="col-12">Simple list example</h4>
<div id="example1" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});</pre>
</div>
</div>
<hr />
<div id="shared-lists" class="row">
<h4 class="col-12">Shared lists</h4>
<div id="example2-left" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<div id="example2-right" class="list-group col">
<div class="list-group-item tinted">Item 1</div>
<div class="list-group-item tinted">Item 2</div>
<div class="list-group-item tinted">Item 3</div>
<div class="list-group-item tinted">Item 4</div>
<div class="list-group-item tinted">Item 5</div>
<div class="list-group-item tinted">Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example2Left, {
group: 'shared', // set both lists to same group
animation: 150
});
new Sortable(example2Right, {
group: 'shared',
animation: 150
});</pre>
</div>
</div>
<hr />
<div id="cloning" class="row">
<h4 class="col-12">Cloning</h4>
<p class="col-12">Try dragging from one list to another. The item you drag will be cloned and the clone will stay in the original list.</p>
<div id="example3-left" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<div id="example3-right" class="list-group col">
<div class="list-group-item tinted">Item 1</div>
<div class="list-group-item tinted">Item 2</div>
<div class="list-group-item tinted">Item 3</div>
<div class="list-group-item tinted">Item 4</div>
<div class="list-group-item tinted">Item 5</div>
<div class="list-group-item tinted">Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example3Left, {
group: {
name: 'shared',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150
});
new Sortable(example3Right, {
group: {
name: 'shared',
pull: 'clone'
},
animation: 150
});</pre>
</div>
</div>
<hr />
<div id="sorting-disabled" class="row">
<h4 class="col-12">Disabling Sorting</h4>
<p class="col-12">Try sorting the list on the left. It is not possible because it has it's <code>sort</code> option set to false. However, you can still drag from the list on the left to the list on the right.</p>
<div id="example4-left" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<div id="example4-right" class="list-group col">
<div class="list-group-item tinted">Item 1</div>
<div class="list-group-item tinted">Item 2</div>
<div class="list-group-item tinted">Item 3</div>
<div class="list-group-item tinted">Item 4</div>
<div class="list-group-item tinted">Item 5</div>
<div class="list-group-item tinted">Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example4Left, {
group: {
name: 'shared',
pull: 'clone',
put: false // Do not allow items to be put into this list
},
animation: 150,
sort: false // To disable sorting: set sort to false
});
new Sortable(example4Right, {
group: 'shared',
animation: 150
});</pre>
</div>
</div>
<hr />
<div id="handle" class="row">
<h4 class="col-12">Handle</h4>
<div id="example5" class="list-group col">
<div class="list-group-item"><i class="fas fa-arrows-alt handle"></i>&nbsp;&nbsp;Item 1</div>
<div class="list-group-item"><i class="fas fa-arrows-alt handle"></i>&nbsp;&nbsp;Item 2</div>
<div class="list-group-item"><i class="fas fa-arrows-alt handle"></i>&nbsp;&nbsp;Item 3</div>
<div class="list-group-item"><i class="fas fa-arrows-alt handle"></i>&nbsp;&nbsp;Item 4</div>
<div class="list-group-item"><i class="fas fa-arrows-alt handle"></i>&nbsp;&nbsp;Item 5</div>
<div class="list-group-item"><i class="fas fa-arrows-alt handle"></i>&nbsp;&nbsp;Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example5, {
handle: '.handle', // handle's class
animation: 150
});</pre>
</div>
</div>
<hr />
<div id="filter" class="row">
<h4 class="col-12">Filter</h4>
<p class="col-12">Try dragging the item with a red background. It cannot be done, because that item is filtered out using the <code>filter</code> option.</p>
<div id="example6" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item bg-danger filtered">Filtered</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example6, {
filter: '.filtered', // 'filtered' class is not draggable
animation: 150
});</pre>
</div>
</div>
<hr />
<div id="thresholds" class="row">
<h4 class="col-12">Thresholds</h4>
<p class="col-12">Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue.</p>
<div id="example7" class="square-section col">
<div class="square">
<div style="display: none;" class="inverted-swap-threshold-indicator indicator-left"></div>
<div class="swap-threshold-indicator"></div>
<div style="display: none;" class="inverted-swap-threshold-indicator indicator-right"></div>
<div class="num-indicator">1</div>
</div><!--
--><div class="square">
<div style="display: none;" class="inverted-swap-threshold-indicator indicator-left"></div>
<div class="swap-threshold-indicator"></div>
<div style="display: none;" class="inverted-swap-threshold-indicator indicator-right"></div>
<div class="num-indicator">2</div>
</div>
</div>
<div class="col-12 input-section">
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="example7SwapThresholdInput">Swap Threshold</label>
<div class="col-sm-8 col-form-label">
<input min="0" max="1" value="1" step="0.01" type="range" class="form-control-range" id="example7SwapThresholdInput">
</div>
</div>
<div class="form-group row">
<div class="col-sm-2">Invert Swap</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="example7InvertSwapInput">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="example7DirectionInput">Direction</label>
<select class="col-sm-4 form-control" id="example7DirectionInput">
<option value="h" selected>Horizontal</option>
<option value="v">Vertical</option>
</select>
</div>
</form>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(example7, {
swapThreshold: <span id="example7SwapThresholdCode">1</span>,<span id="example7InvertSwapCode" style="display: none">
invertSwap: true,</span>
animation: 150
});</pre>
</div>
</div>
<div class="row">
<h2 class="col-12">Examples</h2>
</div>
<hr />
<div id="grid" class="row">
<h4 class="col-12">Grid Example</h4>
<div id="gridDemo" class="col">
<div class="grid-square">Item 1</div><!--
--><div class="grid-square">Item 2</div><!--
--><div class="grid-square">Item 3</div><!--
--><div class="grid-square">Item 4</div><!--
--><div class="grid-square">Item 5</div><!--
--><div class="grid-square">Item 6</div><!--
--><div class="grid-square">Item 7</div><!--
--><div class="grid-square">Item 8</div><!--
--><div class="grid-square">Item 9</div><!--
--><div class="grid-square">Item 10</div><!--
--><div class="grid-square">Item 11</div><!--
--><div class="grid-square">Item 12</div><!--
--><div class="grid-square">Item 13</div><!--
--><div class="grid-square">Item 14</div><!--
--><div class="grid-square">Item 15</div><!--
--><div class="grid-square">Item 16</div><!--
--><div class="grid-square">Item 17</div><!--
--><div class="grid-square">Item 18</div><!--
--><div class="grid-square">Item 19</div><!--
--><div class="grid-square">Item 20</div>
</div>
</div>
<hr />
<div id="nested" class="row">
<h4 class="col-12">Nested Sortables Example</h4>
<p class="col-12">NOTE: When using nested Sortables with animation, it is recommended that the <code>fallbackOnBody</code> option is set to true. <br />It is also always recommended that either the <code>invertSwap</code> option is set to true, or the <code>swapThreshold</code> option is lower than the default value of 1 (eg <code>0.65</code>).</p>
<div id="nestedDemo" class="list-group col nested-sortable">
<div class="list-group-item nested-1">Item 1.1
<div class="list-group nested-sortable">
<div class="list-group-item nested-2">Item 2.1</div>
<div class="list-group-item nested-2">Item 2.2
<div class="list-group nested-sortable">
<div class="list-group-item nested-3">Item 3.1</div>
<div class="list-group-item nested-3">Item 3.2</div>
<div class="list-group-item nested-3">Item 3.3</div>
<div class="list-group-item nested-3">Item 3.4</div>
</div>
</div>
<div class="list-group-item nested-2">Item 2.3</div>
<div class="list-group-item nested-2">Item 2.4</div>
</div>
</div>
<div class="list-group-item nested-1">Item 1.2</div>
<div class="list-group-item nested-1">Item 1.3</div>
<div class="list-group-item nested-1">Item 1.4
<div class="list-group nested-sortable">
<div class="list-group-item nested-2">Item 2.1</div>
<div class="list-group-item nested-2">Item 2.2</div>
<div class="list-group-item nested-2">Item 2.3</div>
<div class="list-group-item nested-2">Item 2.4</div>
</div>
</div>
<div class="list-group-item nested-1">Item 1.5</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}</pre>
</div>
</div>
<div class="row">
<h2 class="col-12">Plugins</h2>
</div>
<hr />
<div id="multi-drag" class="row">
<h4 class="col-12">MultiDrag</h4>
<p class="col-12">The <a target="_blank" href="https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag">MultiDrag</a> plugin allows for multiple items to be dragged at a time. You can click to "select" multiple items, and then drag them as one item.</p>
<div id="multiDragDemo" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(multiDragDemo, {
multiDrag: true, // Enable multi-drag
selectedClass: 'selected', // The class applied to the selected items
animation: 150
});</pre>
</div>
</div>
<hr />
<div id="swap" class="row">
<h4 class="col-12">Swap</h4>
<p class="col-12">The <a target="_blank" href="https://github.com/SortableJS/Sortable/tree/master/plugins/Swap">Swap</a> plugin changes the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted.</p>
<div id="swapDemo" class="list-group col">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 6</div>
</div>
<div style="padding: 0" class="col-12">
<pre class="prettyprint">new Sortable(swapDemo, {
swap: true, // Enable swap plugin
swapClass: 'highlight', // The class applied to the hovered swap item
animation: 150
});</pre>
</div>
</div>
<hr />
<div class="mt-4"></div>
<div id="comparisons" class="row">
<h2 class="col-12">Comparisons</h2>
</div>
<hr />
<div class="row frameworks">
<h2 class="col-12 text-center">jQuery-UI</h2>
<iframe class="mx-auto" src="https://player.vimeo.com/video/311581236?title=0&byline=0&portrait=0" width="640" height="361" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<h2 class="col-12 text-center mt-5">Dragula</h2>
<iframe class="mx-auto" src="https://player.vimeo.com/video/311584137?title=0&byline=0&portrait=0" width="640" height="361" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="mt-4"></div>
<div id="frameworks" class="row">
<h2 class="col-12">Framework Support</h2>
</div>
<hr />
<div class="row frameworks">
<h3 class="col-6">Vue</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/Vue.Draggable">Vue.Draggable</a></h3>
<h3 class="col-6">React</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/react-sortablejs">react-sortablejs</a></h3>
<h3 class="col-6">Angular</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/ngx-sortablejs">ngx-sortablejs</a></h3>
<h3 class="col-6">jQuery</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/jquery-sortablejs">jquery-sortablejs</a></h3>
<h3 class="col-6">Knockout</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/knockout-sortablejs">knockout-sortablejs</a></h3>
<h3 class="col-6">Meteor</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/meteor-sortablejs">meteor-sortablejs</a></h3>
<h3 class="col-6">Polymer</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/polymer-sortablejs">polymer-sortablejs</a></h3>
<h3 class="col-6">Ember</h3>
<h3 class="col-6"><a target="_blank" href="https://github.com/SortableJS/ember-sortablejs">ember-sortablejs</a></h3>
</div>
</div>
<!-- Latest Sortable -->
<script src="./Sortable.js"></script>
<script type="text/javascript" src="st/prettify/prettify.js"></script>
<script type="text/javascript" src="st/prettify/run_prettify.js"></script>
<script src="st/app.js"></script>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,56 @@
{
"name": "sortablejs",
"exportName": "Sortable",
"version": "1.10.2",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-transform-object-assign": "^7.2.0",
"@babel/preset-env": "^7.4.4",
"rollup": "^1.11.3",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.0.0",
"testcafe": "^1.3.1",
"testcafe-browser-provider-saucelabs": "^1.7.0",
"testcafe-reporter-xunit": "^2.1.0",
"uglify-js": "^3.5.12"
},
"description": "JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.",
"main": "./Sortable.js",
"module": "modular/sortable.esm.js",
"scripts": {
"build:umd": "NODE_ENV=umd rollup -c ./scripts/umd-build.js",
"build:umd:watch": "set NODE_ENV=umd&& rollup -w -c ./scripts/umd-build.js",
"build:es": "set NODE_ENV=es&& rollup -c ./scripts/esm-build.js",
"build:es:watch": "set NODE_ENV=es&& rollup -w -c ./scripts/esm-build.js",
"minify": "node ./scripts/minify.js",
"build": "npm run build:es && npm run build:umd && npm run minify",
"test:compat": "node ./scripts/test-compat.js",
"test": "node ./scripts/test.js"
},
"maintainers": [
"Konstantin Lebedev <ibnRubaXa@gmail.com>",
"Owen Mills <owen23355@gmail.com>"
],
"repository": {
"type": "git",
"url": "git://github.com/SortableJS/Sortable.git"
},
"files": [
"Sortable.js",
"Sortable.min.js",
"modular/"
],
"keywords": [
"sortable",
"reorder",
"drag",
"meteor",
"angular",
"ng-sortable",
"react",
"vue",
"mixin"
],
"license": "MIT"
}

View File

@ -0,0 +1,270 @@
import {
on,
off,
css,
throttle,
cancelThrottle,
scrollBy,
getParentAutoScrollElement,
expando,
getRect,
getWindowScrollingElement
} from '../../src/utils.js';
import Sortable from '../../src/Sortable.js';
import { Edge, IE11OrLess, Safari } from '../../src/BrowserInfo.js';
let autoScrolls = [],
scrollEl,
scrollRootEl,
scrolling = false,
lastAutoScrollX,
lastAutoScrollY,
touchEvt,
pointerElemChangedInterval;
function AutoScrollPlugin() {
function AutoScroll() {
this.defaults = {
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
bubbleScroll: true
};
// Bind all private methods
for (let fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
this[fn] = this[fn].bind(this);
}
}
}
AutoScroll.prototype = {
dragStarted({ originalEvent }) {
if (this.sortable.nativeDraggable) {
on(document, 'dragover', this._handleAutoScroll);
} else {
if (this.options.supportPointer) {
on(document, 'pointermove', this._handleFallbackAutoScroll);
} else if (originalEvent.touches) {
on(document, 'touchmove', this._handleFallbackAutoScroll);
} else {
on(document, 'mousemove', this._handleFallbackAutoScroll);
}
}
},
dragOverCompleted({ originalEvent }) {
// For when bubbling is canceled and using fallback (fallback 'touchmove' always reached)
if (!this.options.dragOverBubble && !originalEvent.rootEl) {
this._handleAutoScroll(originalEvent);
}
},
drop() {
if (this.sortable.nativeDraggable) {
off(document, 'dragover', this._handleAutoScroll);
} else {
off(document, 'pointermove', this._handleFallbackAutoScroll);
off(document, 'touchmove', this._handleFallbackAutoScroll);
off(document, 'mousemove', this._handleFallbackAutoScroll);
}
clearPointerElemChangedInterval();
clearAutoScrolls();
cancelThrottle();
},
nulling() {
touchEvt =
scrollRootEl =
scrollEl =
scrolling =
pointerElemChangedInterval =
lastAutoScrollX =
lastAutoScrollY = null;
autoScrolls.length = 0;
},
_handleFallbackAutoScroll(evt) {
this._handleAutoScroll(evt, true);
},
_handleAutoScroll(evt, fallback) {
const x = (evt.touches ? evt.touches[0] : evt).clientX,
y = (evt.touches ? evt.touches[0] : evt).clientY,
elem = document.elementFromPoint(x, y);
touchEvt = evt;
// IE does not seem to have native autoscroll,
// Edge's autoscroll seems too conditional,
// MACOS Safari does not have autoscroll,
// Firefox and Chrome are good
if (fallback || Edge || IE11OrLess || Safari) {
autoScroll(evt, this.options, elem, fallback);
// Listener for pointer element change
let ogElemScroller = getParentAutoScrollElement(elem, true);
if (
scrolling &&
(
!pointerElemChangedInterval ||
x !== lastAutoScrollX ||
y !== lastAutoScrollY
)
) {
pointerElemChangedInterval && clearPointerElemChangedInterval();
// Detect for pointer elem change, emulating native DnD behaviour
pointerElemChangedInterval = setInterval(() => {
let newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true);
if (newElem !== ogElemScroller) {
ogElemScroller = newElem;
clearAutoScrolls();
}
autoScroll(evt, this.options, newElem, fallback);
}, 10);
lastAutoScrollX = x;
lastAutoScrollY = y;
}
} else {
// if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll
if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) {
clearAutoScrolls();
return;
}
autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false);
}
}
};
return Object.assign(AutoScroll, {
pluginName: 'scroll',
initializeByDefault: true
});
}
function clearAutoScrolls() {
autoScrolls.forEach(function(autoScroll) {
clearInterval(autoScroll.pid);
});
autoScrolls = [];
}
function clearPointerElemChangedInterval() {
clearInterval(pointerElemChangedInterval);
}
const autoScroll = throttle(function(evt, options, rootEl, isFallback) {
// Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521
if (!options.scroll) return;
const x = (evt.touches ? evt.touches[0] : evt).clientX,
y = (evt.touches ? evt.touches[0] : evt).clientY,
sens = options.scrollSensitivity,
speed = options.scrollSpeed,
winScroller = getWindowScrollingElement();
let scrollThisInstance = false,
scrollCustomFn;
// New scroll root, set scrollEl
if (scrollRootEl !== rootEl) {
scrollRootEl = rootEl;
clearAutoScrolls();
scrollEl = options.scroll;
scrollCustomFn = options.scrollFn;
if (scrollEl === true) {
scrollEl = getParentAutoScrollElement(rootEl, true);
}
}
let layersOut = 0;
let currentParent = scrollEl;
do {
let el = currentParent,
rect = getRect(el),
top = rect.top,
bottom = rect.bottom,
left = rect.left,
right = rect.right,
width = rect.width,
height = rect.height,
canScrollX,
canScrollY,
scrollWidth = el.scrollWidth,
scrollHeight = el.scrollHeight,
elCSS = css(el),
scrollPosX = el.scrollLeft,
scrollPosY = el.scrollTop;
if (el === winScroller) {
canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible');
canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible');
} else {
canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll');
canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll');
}
let vx = canScrollX && (Math.abs(right - x) <= sens && (scrollPosX + width) < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX);
let vy = canScrollY && (Math.abs(bottom - y) <= sens && (scrollPosY + height) < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY);
if (!autoScrolls[layersOut]) {
for (let i = 0; i <= layersOut; i++) {
if (!autoScrolls[i]) {
autoScrolls[i] = {};
}
}
}
if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) {
autoScrolls[layersOut].el = el;
autoScrolls[layersOut].vx = vx;
autoScrolls[layersOut].vy = vy;
clearInterval(autoScrolls[layersOut].pid);
if (vx != 0 || vy != 0) {
scrollThisInstance = true;
/* jshint loopfunc:true */
autoScrolls[layersOut].pid = setInterval((function () {
// emulate drag over during autoscroll (fallback), emulating native DnD behaviour
if (isFallback && this.layer === 0) {
Sortable.active._onTouchMove(touchEvt); // To move ghost if it is positioned absolutely
}
let scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0;
let scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0;
if (typeof(scrollCustomFn) === 'function') {
if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt, autoScrolls[this.layer].el) !== 'continue') {
return;
}
}
scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY);
}).bind({layer: layersOut}), 24);
}
}
layersOut++;
} while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false)));
scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not
}, 30);
export default AutoScrollPlugin;

View File

@ -0,0 +1,80 @@
## AutoScroll
This plugin allows for the page to automatically scroll during dragging near a scrollable element's edge on mobile devices and IE9 (or whenever fallback is enabled), and also enhances most browser's native drag-and-drop autoscrolling.
Demo:
- `window`: https://jsbin.com/dosilir/edit?js,output
- `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output
**This plugin is a default plugin, and is included in the default UMD and ESM builds of Sortable**
---
### Mounting
```js
import { Sortable, AutoScroll } from 'sortablejs';
Sortable.mount(new AutoScroll());
```
---
### Options
```js
new Sortable(el, {
scroll: true, // Enable the plugin. Can be HTMLElement.
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px, speed of the scrolling
bubbleScroll: true // apply autoscroll to all parent elements, allowing for easier movement
});
```
---
#### `scroll` option
Enables the plugin. Defaults to `true`. May also be set to an HTMLElement which will be where autoscrolling is rooted.
Demo:
- `window`: https://jsbin.com/dosilir/edit?js,output
- `overflow: hidden`: https://jsbin.com/xecihez/edit?html,js,output
---
#### `scrollFn` option
Defines function that will be used for autoscrolling. el.scrollTop/el.scrollLeft is used by default.
Useful when you have custom scrollbar with dedicated scroll function.
This function should return `'continue'` if it wishes to allow Sortable's native autoscrolling.
---
#### `scrollSensitivity` option
Defines how near the mouse must be to an edge to start scrolling.
---
#### `scrollSpeed` option
The speed at which the window should scroll once the mouse pointer gets within the `scrollSensitivity` distance.
---
#### `bubbleScroll` option
If set to `true`, the normal `autoscroll` function will also be applied to all parent elements of the element the user is dragging over.
Demo: https://jsbin.com/kesewor/edit?html,js,output
---

View File

@ -0,0 +1 @@
export { default } from './AutoScroll.js';

View File

@ -0,0 +1,617 @@
import {
toggleClass,
getRect,
index,
closest,
on,
off,
clone,
css,
setRect,
unsetRect,
matrix,
expando
} from '../../src/utils.js';
import dispatchEvent from '../../src/EventDispatcher.js';
let multiDragElements = [],
multiDragClones = [],
lastMultiDragSelect, // for selection with modifier key down (SHIFT)
multiDragSortable,
initialFolding = false, // Initial multi-drag fold when drag started
folding = false, // Folding any other time
dragStarted = false,
dragEl,
clonesFromRect,
clonesHidden;
function MultiDragPlugin() {
function MultiDrag(sortable) {
// Bind all private methods
for (let fn in this) {
if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {
this[fn] = this[fn].bind(this);
}
}
if (sortable.options.supportPointer) {
on(document, 'pointerup', this._deselectMultiDrag);
} else {
on(document, 'mouseup', this._deselectMultiDrag);
on(document, 'touchend', this._deselectMultiDrag);
}
on(document, 'keydown', this._checkKeyDown);
on(document, 'keyup', this._checkKeyUp);
this.defaults = {
selectedClass: 'sortable-selected',
multiDragKey: null,
setData(dataTransfer, dragEl) {
let data = '';
if (multiDragElements.length && multiDragSortable === sortable) {
multiDragElements.forEach((multiDragElement, i) => {
data += (!i ? '' : ', ') + multiDragElement.textContent;
});
} else {
data = dragEl.textContent;
}
dataTransfer.setData('Text', data);
}
};
}
MultiDrag.prototype = {
multiDragKeyDown: false,
isMultiDrag: false,
delayStartGlobal({ dragEl: dragged }) {
dragEl = dragged;
},
delayEnded() {
this.isMultiDrag = ~multiDragElements.indexOf(dragEl);
},
setupClone({ sortable, cancel }) {
if (!this.isMultiDrag) return;
for (let i = 0; i < multiDragElements.length; i++) {
multiDragClones.push(clone(multiDragElements[i]));
multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex;
multiDragClones[i].draggable = false;
multiDragClones[i].style['will-change'] = '';
toggleClass(multiDragClones[i], this.options.selectedClass, false);
multiDragElements[i] === dragEl && toggleClass(multiDragClones[i], this.options.chosenClass, false);
}
sortable._hideClone();
cancel();
},
clone({ sortable, rootEl, dispatchSortableEvent, cancel }) {
if (!this.isMultiDrag) return;
if (!this.options.removeCloneOnHide) {
if (multiDragElements.length && multiDragSortable === sortable) {
insertMultiDragClones(true, rootEl);
dispatchSortableEvent('clone');
cancel();
}
}
},
showClone({ cloneNowShown, rootEl, cancel }) {
if (!this.isMultiDrag) return;
insertMultiDragClones(false, rootEl);
multiDragClones.forEach(clone => {
css(clone, 'display', '');
});
cloneNowShown();
clonesHidden = false;
cancel();
},
hideClone({ sortable, cloneNowHidden, cancel }) {
if (!this.isMultiDrag) return;
multiDragClones.forEach(clone => {
css(clone, 'display', 'none');
if (this.options.removeCloneOnHide && clone.parentNode) {
clone.parentNode.removeChild(clone);
}
});
cloneNowHidden();
clonesHidden = true;
cancel();
},
dragStartGlobal({ sortable }) {
if (!this.isMultiDrag && multiDragSortable) {
multiDragSortable.multiDrag._deselectMultiDrag();
}
multiDragElements.forEach(multiDragElement => {
multiDragElement.sortableIndex = index(multiDragElement);
});
// Sort multi-drag elements
multiDragElements = multiDragElements.sort(function(a, b) {
return a.sortableIndex - b.sortableIndex;
});
dragStarted = true;
},
dragStarted({ sortable }) {
if (!this.isMultiDrag) return;
if (this.options.sort) {
// Capture rects,
// hide multi drag elements (by positioning them absolute),
// set multi drag elements rects to dragRect,
// show multi drag elements,
// animate to rects,
// unset rects & remove from DOM
sortable.captureAnimationState();
if (this.options.animation) {
multiDragElements.forEach(multiDragElement => {
if (multiDragElement === dragEl) return;
css(multiDragElement, 'position', 'absolute');
});
let dragRect = getRect(dragEl, false, true, true);
multiDragElements.forEach(multiDragElement => {
if (multiDragElement === dragEl) return;
setRect(multiDragElement, dragRect);
});
folding = true;
initialFolding = true;
}
}
sortable.animateAll(() => {
folding = false;
initialFolding = false;
if (this.options.animation) {
multiDragElements.forEach(multiDragElement => {
unsetRect(multiDragElement);
});
}
// Remove all auxiliary multidrag items from el, if sorting enabled
if (this.options.sort) {
removeMultiDragElements();
}
});
},
dragOver({ target, completed, cancel }) {
if (folding && ~multiDragElements.indexOf(target)) {
completed(false);
cancel();
}
},
revert({ fromSortable, rootEl, sortable, dragRect }) {
if (multiDragElements.length > 1) {
// Setup unfold animation
multiDragElements.forEach(multiDragElement => {
sortable.addAnimationState({
target: multiDragElement,
rect: folding ? getRect(multiDragElement) : dragRect
});
unsetRect(multiDragElement);
multiDragElement.fromRect = dragRect;
fromSortable.removeAnimationState(multiDragElement);
});
folding = false;
insertMultiDragElements(!this.options.removeCloneOnHide, rootEl);
}
},
dragOverCompleted({ sortable, isOwner, insertion, activeSortable, parentEl, putSortable }) {
let options = this.options;
if (insertion) {
// Clones must be hidden before folding animation to capture dragRectAbsolute properly
if (isOwner) {
activeSortable._hideClone();
}
initialFolding = false;
// If leaving sort:false root, or already folding - Fold to new location
if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) {
// Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible
let dragRectAbsolute = getRect(dragEl, false, true, true);
multiDragElements.forEach(multiDragElement => {
if (multiDragElement === dragEl) return;
setRect(multiDragElement, dragRectAbsolute);
// Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted
// while folding, and so that we can capture them again because old sortable will no longer be fromSortable
parentEl.appendChild(multiDragElement);
});
folding = true;
}
// Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out
if (!isOwner) {
// Only remove if not folding (folding will remove them anyways)
if (!folding) {
removeMultiDragElements();
}
if (multiDragElements.length > 1) {
let clonesHiddenBefore = clonesHidden;
activeSortable._showClone(sortable);
// Unfold animation for clones if showing from hidden
if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) {
multiDragClones.forEach(clone => {
activeSortable.addAnimationState({
target: clone,
rect: clonesFromRect
});
clone.fromRect = clonesFromRect;
clone.thisAnimationDuration = null;
});
}
} else {
activeSortable._showClone(sortable);
}
}
}
},
dragOverAnimationCapture({ dragRect, isOwner, activeSortable }) {
multiDragElements.forEach(multiDragElement => {
multiDragElement.thisAnimationDuration = null;
});
if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) {
clonesFromRect = Object.assign({}, dragRect);
let dragMatrix = matrix(dragEl, true);
clonesFromRect.top -= dragMatrix.f;
clonesFromRect.left -= dragMatrix.e;
}
},
dragOverAnimationComplete() {
if (folding) {
folding = false;
removeMultiDragElements();
}
},
drop({ originalEvent: evt, rootEl, parentEl, sortable, dispatchSortableEvent, oldIndex, putSortable }) {
let toSortable = (putSortable || this.sortable);
if (!evt) return;
let options = this.options,
children = parentEl.children;
// Multi-drag selection
if (!dragStarted) {
if (options.multiDragKey && !this.multiDragKeyDown) {
this._deselectMultiDrag();
}
toggleClass(dragEl, options.selectedClass, !~multiDragElements.indexOf(dragEl));
if (!~multiDragElements.indexOf(dragEl)) {
multiDragElements.push(dragEl);
dispatchEvent({
sortable,
rootEl,
name: 'select',
targetEl: dragEl,
originalEvt: evt
});
// Modifier activated, select from last to dragEl
if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) {
let lastIndex = index(lastMultiDragSelect),
currentIndex = index(dragEl);
if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) {
// Must include lastMultiDragSelect (select it), in case modified selection from no selection
// (but previous selection existed)
let n, i;
if (currentIndex > lastIndex) {
i = lastIndex;
n = currentIndex;
} else {
i = currentIndex;
n = lastIndex + 1;
}
for (; i < n; i++) {
if (~multiDragElements.indexOf(children[i])) continue;
toggleClass(children[i], options.selectedClass, true);
multiDragElements.push(children[i]);
dispatchEvent({
sortable,
rootEl,
name: 'select',
targetEl: children[i],
originalEvt: evt
});
}
}
} else {
lastMultiDragSelect = dragEl;
}
multiDragSortable = toSortable;
} else {
multiDragElements.splice(multiDragElements.indexOf(dragEl), 1);
lastMultiDragSelect = null;
dispatchEvent({
sortable,
rootEl,
name: 'deselect',
targetEl: dragEl,
originalEvt: evt
});
}
}
// Multi-drag drop
if (dragStarted && this.isMultiDrag) {
// Do not "unfold" after around dragEl if reverted
if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) {
let dragRect = getRect(dragEl),
multiDragIndex = index(dragEl, ':not(.' + this.options.selectedClass + ')');
if (!initialFolding && options.animation) dragEl.thisAnimationDuration = null;
toSortable.captureAnimationState();
if (!initialFolding) {
if (options.animation) {
dragEl.fromRect = dragRect;
multiDragElements.forEach(multiDragElement => {
multiDragElement.thisAnimationDuration = null;
if (multiDragElement !== dragEl) {
let rect = folding ? getRect(multiDragElement) : dragRect;
multiDragElement.fromRect = rect;
// Prepare unfold animation
toSortable.addAnimationState({
target: multiDragElement,
rect: rect
});
}
});
}
// Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert
// properly they must all be removed
removeMultiDragElements();
multiDragElements.forEach(multiDragElement => {
if (children[multiDragIndex]) {
parentEl.insertBefore(multiDragElement, children[multiDragIndex]);
} else {
parentEl.appendChild(multiDragElement);
}
multiDragIndex++;
});
// If initial folding is done, the elements may have changed position because they are now
// unfolding around dragEl, even though dragEl may not have his index changed, so update event
// must be fired here as Sortable will not.
if (oldIndex === index(dragEl)) {
let update = false;
multiDragElements.forEach(multiDragElement => {
if (multiDragElement.sortableIndex !== index(multiDragElement)) {
update = true;
return;
}
});
if (update) {
dispatchSortableEvent('update');
}
}
}
// Must be done after capturing individual rects (scroll bar)
multiDragElements.forEach(multiDragElement => {
unsetRect(multiDragElement);
});
toSortable.animateAll();
}
multiDragSortable = toSortable;
}
// Remove clones if necessary
if (rootEl === parentEl || (putSortable && putSortable.lastPutMode !== 'clone')) {
multiDragClones.forEach(clone => {
clone.parentNode && clone.parentNode.removeChild(clone);
});
}
},
nullingGlobal() {
this.isMultiDrag =
dragStarted = false;
multiDragClones.length = 0;
},
destroyGlobal() {
this._deselectMultiDrag();
off(document, 'pointerup', this._deselectMultiDrag);
off(document, 'mouseup', this._deselectMultiDrag);
off(document, 'touchend', this._deselectMultiDrag);
off(document, 'keydown', this._checkKeyDown);
off(document, 'keyup', this._checkKeyUp);
},
_deselectMultiDrag(evt) {
if (typeof dragStarted !== "undefined" && dragStarted) return;
// Only deselect if selection is in this sortable
if (multiDragSortable !== this.sortable) return;
// Only deselect if target is not item in this sortable
if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return;
// Only deselect if left click
if (evt && evt.button !== 0) return;
while (multiDragElements.length) {
let el = multiDragElements[0];
toggleClass(el, this.options.selectedClass, false);
multiDragElements.shift();
dispatchEvent({
sortable: this.sortable,
rootEl: this.sortable.el,
name: 'deselect',
targetEl: el,
originalEvt: evt
});
}
},
_checkKeyDown(evt) {
if (evt.key === this.options.multiDragKey) {
this.multiDragKeyDown = true;
}
},
_checkKeyUp(evt) {
if (evt.key === this.options.multiDragKey) {
this.multiDragKeyDown = false;
}
}
};
return Object.assign(MultiDrag, {
// Static methods & properties
pluginName: 'multiDrag',
utils: {
/**
* Selects the provided multi-drag item
* @param {HTMLElement} el The element to be selected
*/
select(el) {
let sortable = el.parentNode[expando];
if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return;
if (multiDragSortable && multiDragSortable !== sortable) {
multiDragSortable.multiDrag._deselectMultiDrag();
multiDragSortable = sortable;
}
toggleClass(el, sortable.options.selectedClass, true);
multiDragElements.push(el);
},
/**
* Deselects the provided multi-drag item
* @param {HTMLElement} el The element to be deselected
*/
deselect(el) {
let sortable = el.parentNode[expando],
index = multiDragElements.indexOf(el);
if (!sortable || !sortable.options.multiDrag || !~index) return;
toggleClass(el, sortable.options.selectedClass, false);
multiDragElements.splice(index, 1);
}
},
eventProperties() {
const oldIndicies = [],
newIndicies = [];
multiDragElements.forEach(multiDragElement => {
oldIndicies.push({
multiDragElement,
index: multiDragElement.sortableIndex
});
// multiDragElements will already be sorted if folding
let newIndex;
if (folding && multiDragElement !== dragEl) {
newIndex = -1;
} else if (folding) {
newIndex = index(multiDragElement, ':not(.' + this.options.selectedClass + ')');
} else {
newIndex = index(multiDragElement);
}
newIndicies.push({
multiDragElement,
index: newIndex
});
});
return {
items: [...multiDragElements],
clones: [...multiDragClones],
oldIndicies,
newIndicies
};
},
optionListeners: {
multiDragKey(key) {
key = key.toLowerCase();
if (key === 'ctrl') {
key = 'Control';
} else if (key.length > 1) {
key = key.charAt(0).toUpperCase() + key.substr(1);
}
return key;
}
}
});
}
function insertMultiDragElements(clonesInserted, rootEl) {
multiDragElements.forEach((multiDragElement, i) => {
let target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)];
if (target) {
rootEl.insertBefore(multiDragElement, target);
} else {
rootEl.appendChild(multiDragElement);
}
});
}
/**
* Insert multi-drag clones
* @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted
* @param {HTMLElement} rootEl
*/
function insertMultiDragClones(elementsInserted, rootEl) {
multiDragClones.forEach((clone, i) => {
let target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)];
if (target) {
rootEl.insertBefore(clone, target);
} else {
rootEl.appendChild(clone);
}
});
}
function removeMultiDragElements() {
multiDragElements.forEach(multiDragElement => {
if (multiDragElement === dragEl) return;
multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement);
});
}
export default MultiDragPlugin;

View File

@ -0,0 +1,96 @@
## MultiDrag Plugin
This plugin allows users to select multiple items within a sortable at once, and drag them as one item.
Once placed, the items will unfold into their original order, but all beside each other at the new position.
[Read More](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable)
Demo: https://jsbin.com/wopavom/edit?js,output
---
### Mounting
```js
import { Sortable, MultiDrag } from 'sortablejs';
Sortable.mount(new MultiDrag());
```
---
### Options
```js
new Sortable(el, {
multiDrag: true, // Enable the plugin
selectedClass: "sortable-selected", // Class name for selected item
multiDragKey: null, // Key that must be down for items to be selected
// Called when an item is selected
onSelect: function(/**Event*/evt) {
evt.item // The selected item
},
// Called when an item is deselected
onDeselect: function(/**Event*/evt) {
evt.item // The deselected item
}
});
```
---
#### `multiDragKey` option
The key that must be down for multiple items to be selected. The default is `null`, meaning no key must be down.
For special keys, such as the <kbd>CTRL</kbd> key, simply specify the option as `'CTRL'` (casing does not matter).
---
#### `selectedClass` option
Class name for the selected item(s) if multiDrag is enabled. Defaults to `sortable-selected`.
```css
.selected {
background-color: #f9c7c8;
border: solid red 1px;
}
```
```js
Sortable.create(list, {
multiDrag: true,
selectedClass: "selected"
});
```
---
### Event Properties
- items:`HTMLElement[]` — Array of selected items, or empty
- clones:`HTMLElement[]` — Array of clones, or empty
- oldIndicies:`Index[]` — Array containing information on the old indicies of the selected elements.
- newIndicies:`Index[]` — Array containing information on the new indicies of the selected elements.
#### Index Object
- element:`HTMLElement` — The element whose index is being given
- index:`Number` — The index of the element
#### Note on `newIndicies`
For any event that is fired during sorting, the index of any selected element that is not the main dragged element is given as `-1`.
This is because it has either been removed from the DOM, or because it is in a folding animation (folding to the dragged element) and will be removed after this animation is complete.
---
### Sortable.utils
* select(el:`HTMLElement`) — select the given multi-drag item
* deselect(el:`HTMLElement`) — deselect the given multi-drag item

View File

@ -0,0 +1 @@
export { default } from './MultiDrag.js';

View File

@ -0,0 +1,79 @@
import { getChild } from '../../src/utils.js';
const drop = function({
originalEvent,
putSortable,
dragEl,
activeSortable,
dispatchSortableEvent,
hideGhostForTarget,
unhideGhostForTarget
}) {
if (!originalEvent) return;
let toSortable = putSortable || activeSortable;
hideGhostForTarget();
let touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent;
let target = document.elementFromPoint(touch.clientX, touch.clientY);
unhideGhostForTarget();
if (toSortable && !toSortable.el.contains(target)) {
dispatchSortableEvent('spill');
this.onSpill({ dragEl, putSortable });
}
};
function Revert() {}
Revert.prototype = {
startIndex: null,
dragStart({ oldDraggableIndex }) {
this.startIndex = oldDraggableIndex;
},
onSpill({ dragEl, putSortable }) {
this.sortable.captureAnimationState();
if (putSortable) {
putSortable.captureAnimationState();
}
let nextSibling = getChild(this.sortable.el, this.startIndex, this.options);
if (nextSibling) {
this.sortable.el.insertBefore(dragEl, nextSibling);
} else {
this.sortable.el.appendChild(dragEl);
}
this.sortable.animateAll();
if (putSortable) {
putSortable.animateAll();
}
},
drop
};
Object.assign(Revert, {
pluginName: 'revertOnSpill'
});
function Remove() {}
Remove.prototype = {
onSpill({ dragEl, putSortable }) {
const parentSortable = putSortable || this.sortable;
parentSortable.captureAnimationState();
dragEl.parentNode && dragEl.parentNode.removeChild(dragEl);
parentSortable.animateAll();
},
drop
};
Object.assign(Remove, {
pluginName: 'removeOnSpill'
});
export default [Remove, Revert];
export {
Remove as RemoveOnSpill,
Revert as RevertOnSpill
};

View File

@ -0,0 +1,60 @@
# OnSpill Plugins
This file contains two seperate plugins, RemoveOnSpill and RevertOnSpill. They can be imported individually, or the default export (an array of both plugins) can be passed to `Sortable.mount` as well.
**These plugins are default plugins, and are included in the default UMD and ESM builds of Sortable**
---
### Mounting
```js
import { Sortable, OnSpill } from 'sortablejs/modular/sortable.core.esm';
Sortable.mount(OnSpill);
```
---
## RevertOnSpill Plugin
This plugin, when enabled, will cause the dragged item to be reverted to it's original position if it is spilled (ie. it is dropped outside of a valid Sortable drop target)
### Options
```js
new Sortable(el, {
revertOnSpill: true, // Enable plugin
// Called when item is spilled
onSpill: function(/**Event*/evt) {
evt.item // The spilled item
}
});
```
---
## RemoveOnSpill Plugin
This plugin, when enabled, will cause the dragged item to be removed from the DOM if it is spilled (ie. it is dropped outside of a valid Sortable drop target)
---
### Options
```js
new Sortable(el, {
removeOnSpill: true, // Enable plugin
// Called when item is spilled
onSpill: function(/**Event*/evt) {
evt.item // The spilled item
}
});
```

View File

@ -0,0 +1 @@
export { default, RemoveOnSpill, RevertOnSpill } from './OnSpill.js';

View File

@ -0,0 +1,178 @@
# Creating Sortable Plugins
Sortable plugins are plugins that can be directly mounted to the Sortable class. They are a powerful way of modifying the default behaviour of Sortable beyond what simply using events alone allows. To mount your plugin to Sortable, it must pass a constructor function to the `Sortable.mount` function. This constructor function will be called (with the `new` keyword in front of it) whenever a Sortable instance with your plugin enabled is initialized. The constructor function will be called with the parameters `sortable` and `el`, which is the HTMLElement that the Sortable is being initialized on. This means that there will be a new instance of your plugin each time it is enabled in a Sortable.
## Constructor Parameters
`sortable: Sortable` — The sortable that the plugin is being initialized on
`el: HTMLElement` — The element that the sortable is being initialized on
`options: Object` — The options object that the user has passed into Sortable (not merged with defaults yet)
## Static Properties
The constructor function passed to `Sortable.mount` may contain several static properties and methods. The following static properties may be defined:
`pluginName: String` (Required)
The name of the option that the user will use in their sortable's options to enable the plugin. Should start with a lower case and be camel-cased. For example: `'multiDrag'`. This is also the property name that the plugin's instance will be under in a sortable instance (ex. `sortableInstance.multiDrag`).
`utils: Object`
Object containing functions that will be added to the `Sortable.utils` static object on the Sortable class.
`eventOptions(eventName: String): Function`
A function that is called whenever Sortable fires an event. This function should return an object to be combined with the event object that Sortable will emit. The function will be called in the context of the instance of the plugin on the Sortable that is firing the event (ie. the `this` keyword will be the plugin instance).
`initializeByDefault: Boolean`
Determines whether or not the plugin will always be initialized on every new Sortable instance. If this option is enabled, it does not mean that by default the plugin will be enabled on the Sortable - this must still be done in the options via the plugin's `pluginName`, or it can be enabled by default if your plugin specifies it's pluginName as a default option that is truthy. Since the plugin will already be initialized on every Sortable instance, it can also be enabled dynamically via `sortableInstance.option('pluginName', true)`.
It is a good idea to have this option set to `false` if the plugin modifies the behaviour of Sortable in such a way that enabling or disabling the plugin dynamically could cause it to break. Likewise, this option should be disabled if the plugin should only be instantiated on Sortables in which that plugin is enabled.
This option defaults to `true`.
`optionListeners: Object`
An object that may contain event listeners that are fired when a specific option is updated.
These listeners are useful because the user's provided options are not necessarily unchanging once the plugin is initialized, and could be changed dynamically via the `option()` method.
The listener will be fired in the context of the instance of the plugin that it is being changed in (ie. the `this` keyword will be the instance of your plugin).
The name of the method should match the name of the option it listens for. The new value of the option will be passed in as an argument, and any returned value will be what the option is stored as. If no value is returned, the option will be stored as the value the user provided.
Example:
```js
Plugin.name = 'generateTitle';
Plugin.optionListeners = {
// Listen for option 'generateTitle'
generateTitle: function(title) {
// Store the option in all caps
return title.toUpperCase();
// OR save it to this instance of your plugin as a private field.
// This way it can be accessed in events, but will not modify the user's options.
this.titleAllCaps = title.toUpperCase();
}
};
```
## Plugin Options
Plugins may have custom default options or may override the defaults of other options. In order to do this, there must be a `defaults` object on the initialized plugin. This can be set in the plugin's prototype, or during the initialization of the plugin (when the `el` is available). For example:
```js
function myPlugin(sortable, el, options) {
this.defaults = {
color: el.style.backgroundColor
};
}
Sortable.mount(myPlugin);
```
## Plugin Events
### Context
The events will be fired in the context of their own parent object (ie. context is not changed), however the plugin instance's Sortable instance is available under `this.sortable`. Likewise, the options are available under `this.options`.
### Event List
The following table contains details on the events that a plugin may handle in the prototype of the plugin's constructor function.
| Event Name | Description | Cancelable? | Cancel Behaviour | Event Type | Custom Event Object Properties |
|---------------------------|------------------------------------------------------------------------------------------------------------------|-------------|----------------------------------------------------|------------|-------------------------------------------------------------------------|
| filter | Fired when the element is filtered, and dragging is therefore canceled | No | - | Normal | None |
| delayStart | Fired when the delay starts, even if there is no delay | Yes | Cancels sorting | Normal | None |
| delayEnded | Fired when the delay ends, even if there is no delay | Yes | Cancels sorting | Normal | None |
| setupClone | Fired when Sortable clones the dragged element | Yes | Cancels normal clone setup | Normal | None |
| dragStart | Fired when the dragging is first started | Yes | Cancels sorting | Normal | None |
| clone | Fired when the clone is inserted into the DOM (if `removeCloneOnHide: false`). Tick after dragStart. | Yes | Cancels normal clone insertion & hiding | Normal | None |
| dragStarted | Fired tick after dragStart | No | - | Normal | None |
| dragOver | Fired when the user drags over a sortable | Yes | Cancels normal dragover behaviour | DragOver | None |
| dragOverValid | Fired when the user drags over a sortable that the dragged item can be inserted into | Yes | Cancels normal valid dragover behaviour | DragOver | None |
| revert | Fired when the dragged item is reverted to it's original position when entering it's `sort:false` root | Yes | Cancels normal reverting, but is still completed() | DragOver | None |
| dragOverCompleted | Fired when dragOver is completed (ie. bubbling is disabled). To check if inserted, use `inserted` even property. | No | - | DragOver | `insertion: Boolean` — Whether or not the dragged element was inserted |
| dragOverAnimationCapture | Fired right before the animation state is captured in dragOver | No | - | DragOver | None |
| dragOverAnimationComplete | Fired after the animation is completed after a dragOver insertion | No | - | DragOver | None |
| drop | Fired on drop | Yes | Cancels normal drop behavior | Normal | None |
| nulling | Fired when the plugin should preform cleanups, once all drop events have fired | No | - | Normal | None |
| destroy | Fired when Sortable is destroyed | No | - | Normal | None |
### Global Events
Normally, an event will only be fired in a plugin if the plugin is enabled on the Sortable from which the event is being fired. However, it sometimes may be desirable for a plugin to listen in on an event from Sortables in which it is not enabled on. This is possible with global events. For an event to be global, simply add the suffix 'Global' to the event's name (casing matters) (eg. `dragStartGlobal`).
Please note that your plugin must be initialized on any Sortable from which it expects to recieve events, and that includes global events. In other words, you will want to keep the `initializeByDefault` option as it's default `true` value if your plugin needs to recieve events from Sortables it is not enabled on.
Please also note that if both normal and global event handlers are set, the global event handler will always be fired before the regular one.
### Event Object
An object with the following properties is passed as an argument to each plugin event when it is fired.
#### Properties:
`dragEl: HTMLElement` — The element being dragged
`parentEl: HTMLElement` — The element that the dragged element is currently in
`ghostEl: HTMLElement|undefined` — If using fallback, the element dragged under the cursor (undefined until after `dragStarted` plugin event)
`rootEl: HTMLElement` — The element that the dragged element originated from
`nextEl: HTMLElement` — The original next sibling of dragEl
`cloneEl: HTMLElement|undefined` — The clone element (undefined until after `setupClone` plugin event)
`cloneHidden: Boolean` — Whether or not the clone is hidden
`dragStarted: Boolean` — Boolean indicating whether or not the dragStart event has fired
`putSortable: Sortable|undefined` — The element that dragEl is dragged into from it's root, otherwise undefined
`activeSortable: Sortable` — The active Sortable instance
`originalEvent: Event` — The original HTML event corresponding to the Sortable event
`oldIndex: Number` — The old index of dragEl
`oldDraggableIndex: Number` — The old index of dragEl, only counting draggable elements
`newIndex: Number` — The new index of dragEl
`newDraggableIndex: Number` — The new index of dragEl, only counting draggable elements
#### Methods:
`cloneNowHidden()` — Function to be called if the plugin has hidden the clone
`cloneNowShown()` — Function to be called if the plugin has shown the clone
`hideGhostForTarget()` — Hides the fallback ghost element if CSS pointer-events are not available. Call this before using document.elementFromPoint at the mouse position.
`unhideGhostForTarget()` — Unhides the ghost element. To be called after `hideGhostForTarget()`.
`dispatchSortableEvent(eventName: String)` — Function that can be used to emit an event on the current sortable while sorting, with all usual event properties set (eg. indexes, rootEl, cloneEl, originalEvent, etc.).
### DragOverEvent Object
This event is passed to dragover events, and extends the normal event object.
#### Properties:
`isOwner: Boolean` — Whether or not the dragged over sortable currently contains the dragged element
`axis: String` — Direction of the dragged over sortable, `'vertical'` or `'horizontal'`
`revert: Boolean` — Whether or not the dragged element is being reverted to it's original position from another position
`dragRect: DOMRect` — DOMRect of the dragged element
`targetRect: DOMRect` — DOMRect of the target element
`canSort: Boolean` — Whether or not sorting is enabled in the dragged over sortable
`fromSortable: Sortable` — The sortable that the dragged element is coming from
`target: HTMLElement` — The sortable item that is being dragged over
#### Methods:
`onMove(target: HTMLElement, after: Boolean): Boolean|Number` — Calls the `onMove` function the user specified in the options
`changed()` — Fires the `onChange` event with event properties preconfigured
`completed(insertion: Boolean)` — Should be called when dragover has "completed", meaning bubbling should be stopped. If `insertion` is `true`, Sortable will treat it as if the dragged element was inserted into the sortable, and hide/show clone, set ghost class, animate, etc.

View File

@ -0,0 +1,55 @@
## Swap Plugin
This plugin modifies the behaviour of Sortable to allow for items to be swapped with eachother rather than sorted. Once dragging starts, the user can drag over other items and there will be no change in the elements. However, the item that the user drops on will be swapped with the originally dragged item.
Demo: https://jsbin.com/yejehog/edit?html,js,output
---
### Mounting
```js
import { Sortable, Swap } from 'sortablejs/modular/sortable.core.esm';
Sortable.mount(new Swap());
```
---
### Options
```js
new Sortable(el, {
swap: true, // Enable swap mode
swapClass: "sortable-swap-highlight" // Class name for swap item (if swap mode is enabled)
});
```
---
#### `swapClass` option
Class name for the item to be swapped with, if swap mode is enabled. Defaults to `sortable-swap-highlight`.
```css
.highlighted {
background-color: #9AB6F1;
}
```
```js
Sortable.create(list, {
swap: true,
swapClass: "highlighted"
});
```
---
### Event Properties
- swapItem:`HTMLElement|undefined` — The element that the dragged element was swapped with

View File

@ -0,0 +1,90 @@
import {
toggleClass,
index
} from '../../src/utils.js';
let lastSwapEl;
function SwapPlugin() {
function Swap() {
this.defaults = {
swapClass: 'sortable-swap-highlight'
};
}
Swap.prototype = {
dragStart({ dragEl }) {
lastSwapEl = dragEl;
},
dragOverValid({ completed, target, onMove, activeSortable, changed, cancel }) {
if (!activeSortable.options.swap) return;
let el = this.sortable.el,
options = this.options;
if (target && target !== el) {
let prevSwapEl = lastSwapEl;
if (onMove(target) !== false) {
toggleClass(target, options.swapClass, true);
lastSwapEl = target;
} else {
lastSwapEl = null;
}
if (prevSwapEl && prevSwapEl !== lastSwapEl) {
toggleClass(prevSwapEl, options.swapClass, false);
}
}
changed();
completed(true);
cancel();
},
drop({ activeSortable, putSortable, dragEl }) {
let toSortable = (putSortable || this.sortable);
let options = this.options;
lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false);
if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) {
if (dragEl !== lastSwapEl) {
toSortable.captureAnimationState();
if (toSortable !== activeSortable) activeSortable.captureAnimationState();
swapNodes(dragEl, lastSwapEl);
toSortable.animateAll();
if (toSortable !== activeSortable) activeSortable.animateAll();
}
}
},
nulling() {
lastSwapEl = null;
}
};
return Object.assign(Swap, {
pluginName: 'swap',
eventProperties() {
return {
swapItem: lastSwapEl
};
}
});
}
function swapNodes(n1, n2) {
let p1 = n1.parentNode,
p2 = n2.parentNode,
i1, i2;
if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return;
i1 = index(n1);
i2 = index(n2);
if (p1.isEqualNode(p2) && i1 < i2) {
i2++;
}
p1.insertBefore(n2, p1.children[i1]);
p2.insertBefore(n1, p2.children[i2]);
}
export default SwapPlugin;

View File

@ -0,0 +1 @@
export { default } from './Swap.js';

View File

@ -0,0 +1,8 @@
import { version } from '../package.json';
export default `/**!
* Sortable ${ version }
* @author RubaXa <trash@rubaxa.org>
* @author owenm <owen23355@gmail.com>
* @license MIT
*/`;

View File

@ -0,0 +1,17 @@
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
import resolve from 'rollup-plugin-node-resolve';
import banner from './banner.js';
export default {
output: {
banner,
name: 'Sortable'
},
plugins: [
json(),
babel(),
resolve()
]
};

View File

@ -0,0 +1,28 @@
import build from './build.js';
export default ([
{
input: 'entry/entry-core.js',
output: Object.assign({}, build.output, {
file: 'modular/sortable.core.esm.js',
format: 'esm'
})
},
{
input: 'entry/entry-defaults.js',
output: Object.assign({}, build.output, {
file: 'modular/sortable.esm.js',
format: 'esm'
})
},
{
input: 'entry/entry-complete.js',
output: Object.assign({}, build.output, {
file: 'modular/sortable.complete.esm.js',
format: 'esm'
})
}
]).map(config => {
let buildCopy = { ...build };
return Object.assign(buildCopy, config);
});

View File

@ -0,0 +1,11 @@
const UglifyJS = require('uglify-js'),
fs = require('fs'),
package = require('../package.json');
const banner = `/*! Sortable ${ package.version } - ${ package.license } | ${ package.repository.url } */\n`;
fs.writeFileSync(
`./Sortable.min.js`,
banner + UglifyJS.minify(fs.readFileSync(`./Sortable.js`, 'utf8')).code,
'utf8'
);

View File

@ -0,0 +1,30 @@
const createTestCafe = require('testcafe');
// Testcafe cannot test on IE < 11
// Testcafe testing on Chrome Android is currently broken (https://github.com/DevExpress/testcafe/issues/3948)
const browsers = [
'saucelabs:Internet Explorer@11.285:Windows 10',
'saucelabs:MicrosoftEdge@16.16299:Windows 10',
'saucelabs:iPhone XS Simulator@12.2',
'saucelabs:Safari@12.0:macOS 10.14',
'chrome:headless',
'firefox:headless'
];
let testcafe;
let runner;
let failedCount;
createTestCafe(null, 8000, 8001).then((tc) => {
testcafe = tc;
runner = tc.createRunner();
return runner
.src('./tests/Sortable.compat.test.js')
.browsers(browsers)
.run();
}).then((actualFailedCount) => {
// https://testcafe-discuss.devexpress.com/t/why-circleci-marked-build-as-green-even-if-this-build-contain-failed-test/726/2
failedCount = actualFailedCount;
return testcafe.close();
}).then(() => process.exit(failedCount));

View File

@ -0,0 +1,21 @@
const createTestCafe = require('testcafe');
let testcafe;
let runner;
let failedCount;
createTestCafe().then((tc) => {
testcafe = tc;
runner = tc.createRunner();
return runner
.src('./tests/Sortable.test.js')
.browsers('chrome:headless')
.concurrency(3)
.run();
}).then((actualFailedCount) => {
failedCount = actualFailedCount;
console.log('FAILED COUNT', actualFailedCount)
return testcafe.close();
}).then(() => process.exit(failedCount));

View File

@ -0,0 +1,15 @@
import build from './build.js';
export default ([
{
input: 'entry/entry-complete.js',
output: Object.assign({}, build.output, {
file: './Sortable.js',
format: 'umd'
})
}
]).map(config => {
let buildCopy = { ...build };
return Object.assign(buildCopy, config);
});

View File

@ -0,0 +1,175 @@
import { getRect, css, matrix, isRectEqual, indexOfObject } from './utils.js';
import Sortable from './Sortable.js';
export default function AnimationStateManager() {
let animationStates = [],
animationCallbackId;
return {
captureAnimationState() {
animationStates = [];
if (!this.options.animation) return;
let children = [].slice.call(this.el.children);
children.forEach(child => {
if (css(child, 'display') === 'none' || child === Sortable.ghost) return;
animationStates.push({
target: child,
rect: getRect(child)
});
let fromRect = { ...animationStates[animationStates.length - 1].rect };
// If animating: compensate for current animation
if (child.thisAnimationDuration) {
let childMatrix = matrix(child, true);
if (childMatrix) {
fromRect.top -= childMatrix.f;
fromRect.left -= childMatrix.e;
}
}
child.fromRect = fromRect;
});
},
addAnimationState(state) {
animationStates.push(state);
},
removeAnimationState(target) {
animationStates.splice(indexOfObject(animationStates, { target }), 1);
},
animateAll(callback) {
if (!this.options.animation) {
clearTimeout(animationCallbackId);
if (typeof(callback) === 'function') callback();
return;
}
let animating = false,
animationTime = 0;
animationStates.forEach((state) => {
let time = 0,
animatingThis = false,
target = state.target,
fromRect = target.fromRect,
toRect = getRect(target),
prevFromRect = target.prevFromRect,
prevToRect = target.prevToRect,
animatingRect = state.rect,
targetMatrix = matrix(target, true);
if (targetMatrix) {
// Compensate for current animation
toRect.top -= targetMatrix.f;
toRect.left -= targetMatrix.e;
}
target.toRect = toRect;
if (target.thisAnimationDuration) {
// Could also check if animatingRect is between fromRect and toRect
if (
isRectEqual(prevFromRect, toRect) &&
!isRectEqual(fromRect, toRect) &&
// Make sure animatingRect is on line between toRect & fromRect
(animatingRect.top - toRect.top) /
(animatingRect.left - toRect.left) ===
(fromRect.top - toRect.top) /
(fromRect.left - toRect.left)
) {
// If returning to same place as started from animation and on same axis
time = calculateRealTime(animatingRect, prevFromRect, prevToRect, this.options);
}
}
// if fromRect != toRect: animate
if (!isRectEqual(toRect, fromRect)) {
target.prevFromRect = fromRect;
target.prevToRect = toRect;
if (!time) {
time = this.options.animation;
}
this.animate(
target,
animatingRect,
toRect,
time
);
}
if (time) {
animating = true;
animationTime = Math.max(animationTime, time);
clearTimeout(target.animationResetTimer);
target.animationResetTimer = setTimeout(function() {
target.animationTime = 0;
target.prevFromRect = null;
target.fromRect = null;
target.prevToRect = null;
target.thisAnimationDuration = null;
}, time);
target.thisAnimationDuration = time;
}
});
clearTimeout(animationCallbackId);
if (!animating) {
if (typeof(callback) === 'function') callback();
} else {
animationCallbackId = setTimeout(function() {
if (typeof(callback) === 'function') callback();
}, animationTime);
}
animationStates = [];
},
animate(target, currentRect, toRect, duration) {
if (duration) {
css(target, 'transition', '');
css(target, 'transform', '');
let elMatrix = matrix(this.el),
scaleX = elMatrix && elMatrix.a,
scaleY = elMatrix && elMatrix.d,
translateX = (currentRect.left - toRect.left) / (scaleX || 1),
translateY = (currentRect.top - toRect.top) / (scaleY || 1);
target.animatingX = !!translateX;
target.animatingY = !!translateY;
css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
repaint(target); // repaint
css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
css(target, 'transform', 'translate3d(0,0,0)');
(typeof target.animated === 'number') && clearTimeout(target.animated);
target.animated = setTimeout(function () {
css(target, 'transition', '');
css(target, 'transform', '');
target.animated = false;
target.animatingX = false;
target.animatingY = false;
}, duration);
}
}
};
}
function repaint(target) {
return target.offsetWidth;
}
function calculateRealTime(animatingRect, fromRect, toRect, options) {
return (
Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) /
Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2))
) * options.animation;
}

View File

@ -0,0 +1,12 @@
function userAgent(pattern) {
if (typeof window !== 'undefined' && window.navigator) {
return !!/*@__PURE__*/navigator.userAgent.match(pattern);
}
}
export const IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
export const Edge = userAgent(/Edge/i);
export const FireFox = userAgent(/firefox/i);
export const Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);
export const IOS = userAgent(/iP(ad|od|hone)/i);
export const ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i);

View File

@ -0,0 +1,57 @@
import { IE11OrLess, Edge } from './BrowserInfo.js';
import { expando } from './utils.js';
import PluginManager from './PluginManager.js';
export default function dispatchEvent(
{
sortable, rootEl, name,
targetEl, cloneEl, toEl, fromEl,
oldIndex, newIndex,
oldDraggableIndex, newDraggableIndex,
originalEvent, putSortable, extraEventProperties
}
) {
sortable = (sortable || (rootEl && rootEl[expando]));
if (!sortable) return;
let evt,
options = sortable.options,
onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);
// Support for new CustomEvent feature
if (window.CustomEvent && !IE11OrLess && !Edge) {
evt = new CustomEvent(name, {
bubbles: true,
cancelable: true
});
} else {
evt = document.createEvent('Event');
evt.initEvent(name, true, true);
}
evt.to = toEl || rootEl;
evt.from = fromEl || rootEl;
evt.item = targetEl || rootEl;
evt.clone = cloneEl;
evt.oldIndex = oldIndex;
evt.newIndex = newIndex;
evt.oldDraggableIndex = oldDraggableIndex;
evt.newDraggableIndex = newDraggableIndex;
evt.originalEvent = originalEvent;
evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
let allEventProperties = { ...extraEventProperties, ...PluginManager.getEventProperties(name, sortable) };
for (let option in allEventProperties) {
evt[option] = allEventProperties[option];
}
if (rootEl) {
rootEl.dispatchEvent(evt);
}
if (options[onName]) {
options[onName].call(sortable, evt);
}
}

View File

@ -0,0 +1,87 @@
let plugins = [];
const defaults = {
initializeByDefault: true
};
export default {
mount(plugin) {
// Set default static properties
for (let option in defaults) {
if (defaults.hasOwnProperty(option) && !(option in plugin)) {
plugin[option] = defaults[option];
}
}
plugins.push(plugin);
},
pluginEvent(eventName, sortable, evt) {
this.eventCanceled = false;
evt.cancel = () => {
this.eventCanceled = true;
};
const eventNameGlobal = eventName + 'Global';
plugins.forEach(plugin => {
if (!sortable[plugin.pluginName]) return;
// Fire global events if it exists in this sortable
if (
sortable[plugin.pluginName][eventNameGlobal]
) {
sortable[plugin.pluginName][eventNameGlobal]({ sortable, ...evt });
}
// Only fire plugin event if plugin is enabled in this sortable,
// and plugin has event defined
if (
sortable.options[plugin.pluginName] &&
sortable[plugin.pluginName][eventName]
) {
sortable[plugin.pluginName][eventName]({ sortable, ...evt });
}
});
},
initializePlugins(sortable, el, defaults, options) {
plugins.forEach(plugin => {
const pluginName = plugin.pluginName;
if (!sortable.options[pluginName] && !plugin.initializeByDefault) return;
let initialized = new plugin(sortable, el, sortable.options);
initialized.sortable = sortable;
initialized.options = sortable.options;
sortable[pluginName] = initialized;
// Add default options from plugin
Object.assign(defaults, initialized.defaults);
});
for (let option in sortable.options) {
if (!sortable.options.hasOwnProperty(option)) continue;
let modified = this.modifyOption(sortable, option, sortable.options[option]);
if (typeof(modified) !== 'undefined') {
sortable.options[option] = modified;
}
}
},
getEventProperties(name, sortable) {
let eventProperties = {};
plugins.forEach(plugin => {
if (typeof(plugin.eventProperties) !== 'function') return;
Object.assign(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name));
});
return eventProperties;
},
modifyOption(sortable, name, value) {
let modifiedValue;
plugins.forEach(plugin => {
// Plugin must exist on the Sortable
if (!sortable[plugin.pluginName]) return;
// If static option listener exists for this option, call in the context of the Sortable's instance of this plugin
if (plugin.optionListeners && typeof(plugin.optionListeners[name]) === 'function') {
modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value);
}
});
return modifiedValue;
}
};

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,556 @@
import { IE11OrLess } from './BrowserInfo.js';
import Sortable from './Sortable.js';
const captureMode = {
capture: false,
passive: false
};
function on(el, event, fn) {
el.addEventListener(event, fn, !IE11OrLess && captureMode);
}
function off(el, event, fn) {
el.removeEventListener(event, fn, !IE11OrLess && captureMode);
}
function matches(/**HTMLElement*/el, /**String*/selector) {
if (!selector) return;
selector[0] === '>' && (selector = selector.substring(1));
if (el) {
try {
if (el.matches) {
return el.matches(selector);
} else if (el.msMatchesSelector) {
return el.msMatchesSelector(selector);
} else if (el.webkitMatchesSelector) {
return el.webkitMatchesSelector(selector);
}
} catch(_) {
return false;
}
}
return false;
}
function getParentOrHost(el) {
return (el.host && el !== document && el.host.nodeType)
? el.host
: el.parentNode;
}
function closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx, includeCTX) {
if (el) {
ctx = ctx || document;
do {
if (
selector != null &&
(
selector[0] === '>' ?
el.parentNode === ctx && matches(el, selector) :
matches(el, selector)
) ||
includeCTX && el === ctx
) {
return el;
}
if (el === ctx) break;
/* jshint boss:true */
} while (el = getParentOrHost(el));
}
return null;
}
const R_SPACE = /\s+/g;
function toggleClass(el, name, state) {
if (el && name) {
if (el.classList) {
el.classList[state ? 'add' : 'remove'](name);
}
else {
let className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' ');
el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' ');
}
}
}
function css(el, prop, val) {
let style = el && el.style;
if (style) {
if (val === void 0) {
if (document.defaultView && document.defaultView.getComputedStyle) {
val = document.defaultView.getComputedStyle(el, '');
}
else if (el.currentStyle) {
val = el.currentStyle;
}
return prop === void 0 ? val : val[prop];
}
else {
if (!(prop in style) && prop.indexOf('webkit') === -1) {
prop = '-webkit-' + prop;
}
style[prop] = val + (typeof val === 'string' ? '' : 'px');
}
}
}
function matrix(el, selfOnly) {
let appliedTransforms = '';
if (typeof(el) === 'string') {
appliedTransforms = el;
} else {
do {
let transform = css(el, 'transform');
if (transform && transform !== 'none') {
appliedTransforms = transform + ' ' + appliedTransforms;
}
/* jshint boss:true */
} while (!selfOnly && (el = el.parentNode));
}
const matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;
/*jshint -W056 */
return matrixFn && (new matrixFn(appliedTransforms));
}
function find(ctx, tagName, iterator) {
if (ctx) {
let list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;
if (iterator) {
for (; i < n; i++) {
iterator(list[i], i);
}
}
return list;
}
return [];
}
function getWindowScrollingElement() {
let scrollingElement = document.scrollingElement;
if (scrollingElement) {
return scrollingElement
} else {
return document.documentElement
}
}
/**
* Returns the "bounding client rect" of given element
* @param {HTMLElement} el The element whose boundingClientRect is wanted
* @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container
* @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr
* @param {[Boolean]} undoScale Whether the container's scale() should be undone
* @param {[HTMLElement]} container The parent the element will be placed in
* @return {Object} The boundingClientRect of el, with specified adjustments
*/
function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) {
if (!el.getBoundingClientRect && el !== window) return;
let elRect,
top,
left,
bottom,
right,
height,
width;
if (el !== window && el !== getWindowScrollingElement()) {
elRect = el.getBoundingClientRect();
top = elRect.top;
left = elRect.left;
bottom = elRect.bottom;
right = elRect.right;
height = elRect.height;
width = elRect.width;
} else {
top = 0;
left = 0;
bottom = window.innerHeight;
right = window.innerWidth;
height = window.innerHeight;
width = window.innerWidth;
}
if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) {
// Adjust for translate()
container = container || el.parentNode;
// solves #1123 (see: https://stackoverflow.com/a/37953806/6088312)
// Not needed on <= IE11
if (!IE11OrLess) {
do {
if (
container &&
container.getBoundingClientRect &&
(
css(container, 'transform') !== 'none' ||
relativeToNonStaticParent &&
css(container, 'position') !== 'static'
)
) {
let containerRect = container.getBoundingClientRect();
// Set relative to edges of padding box of container
top -= containerRect.top + parseInt(css(container, 'border-top-width'));
left -= containerRect.left + parseInt(css(container, 'border-left-width'));
bottom = top + elRect.height;
right = left + elRect.width;
break;
}
/* jshint boss:true */
} while (container = container.parentNode);
}
}
if (undoScale && el !== window) {
// Adjust for scale()
let elMatrix = matrix(container || el),
scaleX = elMatrix && elMatrix.a,
scaleY = elMatrix && elMatrix.d;
if (elMatrix) {
top /= scaleY;
left /= scaleX;
width /= scaleX;
height /= scaleY;
bottom = top + height;
right = left + width;
}
}
return {
top: top,
left: left,
bottom: bottom,
right: right,
width: width,
height: height
};
}
/**
* Checks if a side of an element is scrolled past a side of its parents
* @param {HTMLElement} el The element who's side being scrolled out of view is in question
* @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom')
* @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom')
* @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element
*/
function isScrolledPast(el, elSide, parentSide) {
let parent = getParentAutoScrollElement(el, true),
elSideVal = getRect(el)[elSide];
/* jshint boss:true */
while (parent) {
let parentSideVal = getRect(parent)[parentSide],
visible;
if (parentSide === 'top' || parentSide === 'left') {
visible = elSideVal >= parentSideVal;
} else {
visible = elSideVal <= parentSideVal;
}
if (!visible) return parent;
if (parent === getWindowScrollingElement()) break;
parent = getParentAutoScrollElement(parent, false);
}
return false;
}
/**
* Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible)
* and non-draggable elements
* @param {HTMLElement} el The parent element
* @param {Number} childNum The index of the child
* @param {Object} options Parent Sortable's options
* @return {HTMLElement} The child at index childNum, or null if not found
*/
function getChild(el, childNum, options) {
let currentChild = 0,
i = 0,
children = el.children;
while (i < children.length) {
if (
children[i].style.display !== 'none' &&
children[i] !== Sortable.ghost &&
children[i] !== Sortable.dragged &&
closest(children[i], options.draggable, el, false)
) {
if (currentChild === childNum) {
return children[i];
}
currentChild++;
}
i++;
}
return null;
}
/**
* Gets the last child in the el, ignoring ghostEl or invisible elements (clones)
* @param {HTMLElement} el Parent element
* @param {selector} selector Any other elements that should be ignored
* @return {HTMLElement} The last child, ignoring ghostEl
*/
function lastChild(el, selector) {
let last = el.lastElementChild;
while (
last &&
(
last === Sortable.ghost ||
css(last, 'display') === 'none' ||
selector && !matches(last, selector)
)
) {
last = last.previousElementSibling;
}
return last || null;
}
/**
* Returns the index of an element within its parent for a selected set of
* elements
* @param {HTMLElement} el
* @param {selector} selector
* @return {number}
*/
function index(el, selector) {
let index = 0;
if (!el || !el.parentNode) {
return -1;
}
/* jshint boss:true */
while (el = el.previousElementSibling) {
if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && el !== Sortable.clone && (!selector || matches(el, selector))) {
index++;
}
}
return index;
}
/**
* Returns the scroll offset of the given element, added with all the scroll offsets of parent elements.
* The value is returned in real pixels.
* @param {HTMLElement} el
* @return {Array} Offsets in the format of [left, top]
*/
function getRelativeScrollOffset(el) {
let offsetLeft = 0,
offsetTop = 0,
winScroller = getWindowScrollingElement();
if (el) {
do {
let elMatrix = matrix(el),
scaleX = elMatrix.a,
scaleY = elMatrix.d;
offsetLeft += el.scrollLeft * scaleX;
offsetTop += el.scrollTop * scaleY;
} while (el !== winScroller && (el = el.parentNode));
}
return [offsetLeft, offsetTop];
}
/**
* Returns the index of the object within the given array
* @param {Array} arr Array that may or may not hold the object
* @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find
* @return {Number} The index of the object in the array, or -1
*/
function indexOfObject(arr, obj) {
for (let i in arr) {
if (!arr.hasOwnProperty(i)) continue;
for (let key in obj) {
if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i);
}
}
return -1;
}
function getParentAutoScrollElement(el, includeSelf) {
// skip to window
if (!el || !el.getBoundingClientRect) return getWindowScrollingElement();
let elem = el;
let gotSelf = false;
do {
// we don't need to get elem css if it isn't even overflowing in the first place (performance)
if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {
let elemCSS = css(elem);
if (
elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') ||
elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')
) {
if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement();
if (gotSelf || includeSelf) return elem;
gotSelf = true;
}
}
/* jshint boss:true */
} while (elem = elem.parentNode);
return getWindowScrollingElement();
}
function extend(dst, src) {
if (dst && src) {
for (let key in src) {
if (src.hasOwnProperty(key)) {
dst[key] = src[key];
}
}
}
return dst;
}
function isRectEqual(rect1, rect2) {
return Math.round(rect1.top) === Math.round(rect2.top) &&
Math.round(rect1.left) === Math.round(rect2.left) &&
Math.round(rect1.height) === Math.round(rect2.height) &&
Math.round(rect1.width) === Math.round(rect2.width);
}
let _throttleTimeout;
function throttle(callback, ms) {
return function () {
if (!_throttleTimeout) {
let args = arguments,
_this = this;
if (args.length === 1) {
callback.call(_this, args[0]);
} else {
callback.apply(_this, args);
}
_throttleTimeout = setTimeout(function () {
_throttleTimeout = void 0;
}, ms);
}
};
}
function cancelThrottle() {
clearTimeout(_throttleTimeout);
_throttleTimeout = void 0;
}
function scrollBy(el, x, y) {
el.scrollLeft += x;
el.scrollTop += y;
}
function clone(el) {
let Polymer = window.Polymer;
let $ = window.jQuery || window.Zepto;
if (Polymer && Polymer.dom) {
return Polymer.dom(el).cloneNode(true);
}
else if ($) {
return $(el).clone(true)[0];
}
else {
return el.cloneNode(true);
}
}
function setRect(el, rect) {
css(el, 'position', 'absolute');
css(el, 'top', rect.top);
css(el, 'left', rect.left);
css(el, 'width', rect.width);
css(el, 'height', rect.height);
}
function unsetRect(el) {
css(el, 'position', '');
css(el, 'top', '');
css(el, 'left', '');
css(el, 'width', '');
css(el, 'height', '');
}
const expando = 'Sortable' + (new Date).getTime();
export {
on,
off,
matches,
getParentOrHost,
closest,
toggleClass,
css,
matrix,
find,
getWindowScrollingElement,
getRect,
isScrolledPast,
getChild,
lastChild,
index,
getRelativeScrollOffset,
indexOfObject,
getParentAutoScrollElement,
extend,
isRectEqual,
throttle,
cancelThrottle,
scrollBy,
clone,
setRect,
unsetRect,
expando
};

View File

@ -0,0 +1,222 @@
var example1 = document.getElementById('example1'),
example2Left = document.getElementById('example2-left'),
example2Right = document.getElementById('example2-right'),
example3Left = document.getElementById('example3-left'),
example3Right = document.getElementById('example3-right'),
example4Left = document.getElementById('example4-left'),
example4Right = document.getElementById('example4-right'),
example5 = document.getElementById('example5'),
example6 = document.getElementById('example6'),
example7 = document.getElementById('example7'),
gridDemo = document.getElementById('gridDemo'),
multiDragDemo = document.getElementById('multiDragDemo'),
swapDemo = document.getElementById('swapDemo');
// Example 1 - Simple list
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
// Example 2 - Shared lists
new Sortable(example2Left, {
group: 'shared', // set both lists to same group
animation: 150
});
new Sortable(example2Right, {
group: 'shared',
animation: 150
});
// Example 3 - Cloning
new Sortable(example3Left, {
group: {
name: 'shared',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150
});
new Sortable(example3Right, {
group: {
name: 'shared',
pull: 'clone'
},
animation: 150
});
// Example 4 - No Sorting
new Sortable(example4Left, {
group: {
name: 'shared',
pull: 'clone',
put: false // Do not allow items to be put into this list
},
animation: 150,
sort: false // To disable sorting: set sort to false
});
new Sortable(example4Right, {
group: 'shared',
animation: 150
});
// Example 5 - Handle
new Sortable(example5, {
handle: '.handle', // handle class
animation: 150
});
// Example 6 - Filter
new Sortable(example6, {
filter: '.filtered',
animation: 150
});
// Example 7 - Thresholds
var example7Sortable = new Sortable(example7, {
animation: 150
});
var example7SwapThreshold = 1;
var example7SwapThresholdInput = document.getElementById('example7SwapThresholdInput');
var example7SwapThresholdCode = document.getElementById('example7SwapThresholdCode');
var example7SwapThresholdIndicators = [].slice.call(document.querySelectorAll('.swap-threshold-indicator'));
var example7InvertSwapInput = document.getElementById('example7InvertSwapInput');
var example7InvertSwapCode = document.getElementById('example7InvertSwapCode');
var example7InvertedSwapThresholdIndicators = [].slice.call(document.querySelectorAll('.inverted-swap-threshold-indicator'));
var example7Squares = [].slice.call(document.querySelectorAll('.square'));
var activeIndicators = example7SwapThresholdIndicators;
var example7DirectionInput = document.getElementById('example7DirectionInput');
var example7SizeProperty = 'width';
function renderThresholdWidth(evt) {
example7SwapThreshold = Number(evt.target.value);
example7SwapThresholdCode.innerHTML = evt.target.value.indexOf('.') > -1 ? evt.target.value.padEnd(4, '0') : evt.target.value;
for (var i = 0; i < activeIndicators.length; i++) {
activeIndicators[i].style[example7SizeProperty] = (evt.target.value * 100) /
(activeIndicators == example7SwapThresholdIndicators ? 1 : 2) + '%';
}
example7Sortable.option('swapThreshold', example7SwapThreshold);
}
example7SwapThresholdInput.addEventListener('input', renderThresholdWidth);
example7InvertSwapInput.addEventListener('input', function(evt) {
example7Sortable.option('invertSwap', evt.target.checked);
for (var i = 0; i < activeIndicators.length; i++) {
activeIndicators[i].style.display = 'none';
}
if (evt.target.checked) {
example7InvertSwapCode.style.display = '';
activeIndicators = example7InvertedSwapThresholdIndicators;
} else {
example7InvertSwapCode.style.display = 'none';
activeIndicators = example7SwapThresholdIndicators;
}
renderThresholdWidth({
target: example7SwapThresholdInput
});
for (i = 0; i < activeIndicators.length; i++) {
activeIndicators[i].style.display = '';
}
});
function renderDirection(evt) {
for (var i = 0; i < example7Squares.length; i++) {
example7Squares[i].style.display = evt.target.value === 'h' ? 'inline-block' : 'block';
}
for (i = 0; i < example7InvertedSwapThresholdIndicators.length; i++) {
/* jshint expr:true */
evt.target.value === 'h' && (example7InvertedSwapThresholdIndicators[i].style.height = '100%');
evt.target.value === 'v' && (example7InvertedSwapThresholdIndicators[i].style.width = '100%');
}
for (i = 0; i < example7SwapThresholdIndicators.length; i++) {
if (evt.target.value === 'h') {
example7SwapThresholdIndicators[i].style.height = '100%';
example7SwapThresholdIndicators[i].style.marginLeft = '50%';
example7SwapThresholdIndicators[i].style.transform = 'translateX(-50%)';
example7SwapThresholdIndicators[i].style.marginTop = '0';
} else {
example7SwapThresholdIndicators[i].style.width = '100%';
example7SwapThresholdIndicators[i].style.marginTop = '50%';
example7SwapThresholdIndicators[i].style.transform = 'translateY(-50%)';
example7SwapThresholdIndicators[i].style.marginLeft = '0';
}
}
if (evt.target.value === 'h') {
example7SizeProperty = 'width';
example7Sortable.option('direction', 'horizontal');
} else {
example7SizeProperty = 'height';
example7Sortable.option('direction', 'vertical');
}
renderThresholdWidth({
target: example7SwapThresholdInput
});
}
example7DirectionInput.addEventListener('input', renderDirection);
renderDirection({
target: example7DirectionInput
});
// Grid demo
new Sortable(gridDemo, {
animation: 150,
ghostClass: 'blue-background-class'
});
// Nested demo
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}
// MultiDrag demo
new Sortable(multiDragDemo, {
multiDrag: true,
selectedClass: 'selected',
animation: 150
});
// Swap demo
new Sortable(swapDemo, {
swap: true,
swapClass: 'highlight',
animation: 150
});

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- List with handle -->
<div id="listWithHandle" class="list-group">
<div class="list-group-item">
<span class="badge">14</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
Drag me by the handle
</div>
<div class="list-group-item">
<span class="badge">2</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
You can also select text
</div>
<div class="list-group-item">
<span class="badge">1</span>
<span class="glyphicon glyphicon-move" aria-hidden="true"></span>
Best of both worlds!
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IFrame playground</title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<!-- Latest Sortable -->
<script src="../../Sortable.js"></script>
<!-- Simple List -->
<div id="simpleList" class="list-group">
<div class="list-group-item">This is <a href="http://rubaxa.github.io/Sortable/">Sortable</a></div>
<div class="list-group-item">It works with Bootstrap...</div>
<div class="list-group-item">...out of the box.</div>
<div class="list-group-item">It has support for touch devices.</div>
<div class="list-group-item">Just drag some elements around.</div>
</div>
<script>
(function () {
Sortable.create(simpleList, {group: 'shared'});
var iframe = document.createElement('iframe');
iframe.src = 'frame.html';
iframe.width = '100%';
iframe.onload = function () {
var doc = iframe.contentDocument,
list = doc.getElementById('listWithHandle');
Sortable.create(list, {group: 'shared'});
};
document.body.appendChild(iframe);
})();
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -0,0 +1 @@
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

View File

@ -0,0 +1,46 @@
!function(){/*
Copyright (C) 2006 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
"undefined"!==typeof window&&(window.PR_SHOULD_USE_CONTINUATION=!0);
(function(){function T(a){function d(e){var a=e.charCodeAt(0);if(92!==a)return a;var c=e.charAt(1);return(a=w[c])?a:"0"<=c&&"7">=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));
e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,g=c.length;a<g;++a){var h=c[a];if(/\\[bdsw]/i.test(h))b.push(h);else{var h=d(h),k;a+2<g&&"-"===c[a+1]?(k=d(c[a+2]),a+=2):k=h;e.push([h,k]);65>k||122<h||(65>k||90<h||e.push([Math.max(65,h)|32,Math.min(k,90)|32]),97>k||122<h||e.push([Math.max(97,h)&-33,Math.min(k,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});c=[];g=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=g[1]+1?g[1]=Math.max(g[1],h[1]):c.push(g=h);for(a=0;a<c.length;++a)h=
c[a],b.push(f(h[0])),h[1]>h[0]&&(h[1]+1>h[0]&&b.push("-"),b.push(f(h[1])));b.push("]");return b.join("")}function m(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),b=a.length,d=[],g=0,h=0;g<b;++g){var k=a[g];"("===k?++h:"\\"===k.charAt(0)&&(k=+k.substring(1))&&(k<=h?d[k]=-1:a[g]=f(k))}for(g=1;g<d.length;++g)-1===d[g]&&(d[g]=++E);for(h=g=0;g<b;++g)k=a[g],
"("===k?(++h,d[h]||(a[g]="(?:")):"\\"===k.charAt(0)&&(k=+k.substring(1))&&k<=h&&(a[g]="\\"+d[k]);for(g=0;g<b;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(e.ignoreCase&&q)for(g=0;g<b;++g)k=a[g],e=k.charAt(0),2<=k.length&&"["===e?a[g]=c(k):"\\"!==e&&(a[g]=k.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var E=0,q=!1,l=!1,n=0,b=a.length;n<b;++n){var p=a[n];if(p.ignoreCase)l=!0;else if(/[a-z]/i.test(p.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
""))){q=!0;l=!1;break}}for(var w={b:8,t:9,n:10,v:11,f:12,r:13},r=[],n=0,b=a.length;n<b;++n){p=a[n];if(p.global||p.multiline)throw Error(""+p);r.push("(?:"+m(p)+")")}return new RegExp(r.join("|"),l?"gi":"g")}function U(a,d){function f(a){var b=a.nodeType;if(1==b){if(!c.test(a.className)){for(b=a.firstChild;b;b=b.nextSibling)f(b);b=a.nodeName.toLowerCase();if("br"===b||"li"===b)m[l]="\n",q[l<<1]=E++,q[l++<<1|1]=a}}else if(3==b||4==b)b=a.nodeValue,b.length&&(b=d?b.replace(/\r\n?/g,"\n"):b.replace(/[ \t\r\n]+/g,
" "),m[l]=b,q[l<<1]=E,E+=b.length,q[l++<<1|1]=a)}var c=/(?:^|\s)nocode(?:\s|$)/,m=[],E=0,q=[],l=0;f(a);return{a:m.join("").replace(/\n$/,""),c:q}}function J(a,d,f,c,m){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},c(a),m.push.apply(m,a.g))}function V(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var c=f.nodeType,d=1===c?d?a:f:3===c?W.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function G(a,d){function f(a){for(var l=a.i,n=a.h,b=[l,"pln"],p=0,q=a.a.match(m)||[],r={},e=0,t=q.length;e<
t;++e){var z=q[e],v=r[z],g=void 0,h;if("string"===typeof v)h=!1;else{var k=c[z.charAt(0)];if(k)g=z.match(k[1]),v=k[0];else{for(h=0;h<E;++h)if(k=d[h],g=z.match(k[1])){v=k[0];break}g||(v="pln")}!(h=5<=v.length&&"lang-"===v.substring(0,5))||g&&"string"===typeof g[1]||(h=!1,v="src");h||(r[z]=v)}k=p;p+=z.length;if(h){h=g[1];var A=z.indexOf(h),C=A+h.length;g[2]&&(C=z.length-g[2].length,A=C-h.length);v=v.substring(5);J(n,l+k,z.substring(0,A),f,b);J(n,l+k+A,h,K(v,h),b);J(n,l+k+C,z.substring(C),f,b)}else b.push(l+
k,v)}a.g=b}var c={},m;(function(){for(var f=a.concat(d),l=[],n={},b=0,p=f.length;b<p;++b){var w=f[b],r=w[3];if(r)for(var e=r.length;0<=--e;)c[r.charAt(e)]=w;w=w[1];r=""+w;n.hasOwnProperty(r)||(l.push(w),n[r]=null)}l.push(/[\0-\uffff]/);m=T(l)})();var E=d.length;return f}function x(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var c=a.hashComments;c&&(a.cStyleComments?(1<c?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(c=a.regexLiterals){var m=(c=1<c?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+m+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+m+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd",new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return G(d,f)}function L(a,d,f){function c(a){var b=a.nodeType;if(1==b&&!t.test(a.className))if("br"===a.nodeName.toLowerCase())m(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(q);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+
d[0].length))&&a.parentNode.insertBefore(l.createTextNode(e),a.nextSibling),m(a),b||a.parentNode.removeChild(a))}}function m(a){function c(a,b){var e=b?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=c(k,1),d=a.nextSibling;k.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,k.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var t=/(?:^|\s)nocode(?:\s|$)/,q=/\r\n?|\n/,l=a.ownerDocument,n=l.createElement("li");a.firstChild;)n.appendChild(a.firstChild);
for(var b=[n],p=0;p<b.length;++p)c(b[p]);d===(d|0)&&b[0].setAttribute("value",d);var w=l.createElement("ol");w.className="linenums";d=Math.max(0,d-1|0)||0;for(var p=0,r=b.length;p<r;++p)n=b[p],n.className="L"+(p+d)%10,n.firstChild||n.appendChild(l.createTextNode("\u00a0")),w.appendChild(n);a.appendChild(w)}function t(a,d){for(var f=d.length;0<=--f;){var c=d[f];I.hasOwnProperty(c)?D.console&&console.warn("cannot override language handler %s",c):I[c]=a}}function K(a,d){a&&I.hasOwnProperty(a)||(a=/^\s*</.test(d)?
"default-markup":"default-code");return I[a]}function M(a){var d=a.j;try{var f=U(a.h,a.l),c=f.a;a.a=c;a.c=f.c;a.i=0;K(d,c)(a);var m=/\bMSIE\s(\d+)/.exec(navigator.userAgent),m=m&&8>=+m[1],d=/\n/g,t=a.a,q=t.length,f=0,l=a.c,n=l.length,c=0,b=a.g,p=b.length,w=0;b[p]=q;var r,e;for(e=r=0;e<p;)b[e]!==b[e+2]?(b[r++]=b[e++],b[r++]=b[e++]):e+=2;p=r;for(e=r=0;e<p;){for(var x=b[e],z=b[e+1],v=e+2;v+2<=p&&b[v+1]===z;)v+=2;b[r++]=x;b[r++]=z;e=v}b.length=r;var g=a.h;a="";g&&(a=g.style.display,g.style.display="none");
try{for(;c<n;){var h=l[c+2]||q,k=b[w+2]||q,v=Math.min(h,k),A=l[c+1],C;if(1!==A.nodeType&&(C=t.substring(f,v))){m&&(C=C.replace(d,"\r"));A.nodeValue=C;var N=A.ownerDocument,u=N.createElement("span");u.className=b[w+1];var B=A.parentNode;B.replaceChild(u,A);u.appendChild(A);f<h&&(l[c+1]=A=N.createTextNode(t.substring(v,h)),B.insertBefore(A,u.nextSibling))}f=v;f>=h&&(c+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(y){D.console&&console.log(y&&y.stack||y)}}var D="undefined"!==typeof window?
window:{},B=["break,continue,do,else,for,if,return,while"],F=[[B,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],
F=[F,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"],Q=[B,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[B,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],
B=[B,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],S=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,W=/\S/,X=x({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,B],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),
I={};t(X,["default-code"]);t(G([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/,
null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);
t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(x({keywords:H,hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(x({keywords:"null,true,false"}),["json"]);t(x({keywords:P,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:S}),["cs"]);t(x({keywords:O,cStyleComments:!0}),["java"]);t(x({keywords:B,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(x({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(x({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",
hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);t(x({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(x({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);t(x({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,
regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="<pre>"+a+"</pre>";
c=c.firstChild;f&&L(c,f,!0);M({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});return c.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function f(){for(var c=D.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;p<x.length&&b.now()<c;p++){for(var d=x[p],l=g,n=d;n=n.previousSibling;){var m=n.nodeType,u=(7===m||8===m)&&n.nodeValue;if(u?!/^\??prettify\b/.test(u):3!==m||/\S/.test(n.nodeValue))break;if(u){l={};u.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){l[b]=c});break}}n=d.className;if((l!==g||r.test(n))&&
!e.test(n)){m=!1;for(u=d.parentNode;u;u=u.parentNode)if(v.test(u.tagName)&&u.className&&r.test(u.className)){m=!0;break}if(!m){d.className+=" prettyprinted";m=l.lang;if(!m){var m=n.match(w),q;!m&&(q=V(d))&&z.test(q.tagName)&&(m=q.className.match(w));m&&(m=m[1])}if(B.test(d.tagName))u=1;else var u=d.currentStyle,y=t.defaultView,u=(u=u?u.whiteSpace:y&&y.getComputedStyle?y.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===u.substring(0,3);y=l.linenums;(y="true"===y||+y)||(y=(y=n.match(/\blinenums\b(?::(\d+))?/))?
y[1]&&y[1].length?+y[1]:!0:!1);y&&L(d,y,u);M({j:m,h:d,m:y,l:u,a:null,i:null,c:null,g:null})}}}p<x.length?D.setTimeout(f,250):"function"===typeof a&&a()}for(var c=d||document.body,t=c.ownerDocument||document,c=[c.getElementsByTagName("pre"),c.getElementsByTagName("code"),c.getElementsByTagName("xmp")],x=[],q=0;q<c.length;++q)for(var l=0,n=c[q].length;l<n;++l)x.push(c[q][l]);var c=null,b=Date;b.now||(b={now:function(){return+new Date}});var p=0,w=/\blang(?:uage)?-([\w.]+)(?!\S)/,r=/\bprettyprint\b/,
e=/\bprettyprinted\b/,B=/pre|xmp/i,z=/^code$/i,v=/^(?:pre|code|xmp)$/i,g={};f()}},H=D.define;"function"===typeof H&&H.amd&&H("google-code-prettify",[],function(){return Y})})();}()

View File

@ -0,0 +1,64 @@
!function(){/*
Copyright (C) 2013 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Copyright (C) 2006 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
(function(){function aa(g){function r(){try{L.doScroll("left")}catch(ba){k.setTimeout(r,50);return}x("poll")}function x(r){if("readystatechange"!=r.type||"complete"==z.readyState)("load"==r.type?k:z)[B](n+r.type,x,!1),!l&&(l=!0)&&g.call(k,r.type||r)}var X=z.addEventListener,l=!1,E=!0,v=X?"addEventListener":"attachEvent",B=X?"removeEventListener":"detachEvent",n=X?"":"on";if("complete"==z.readyState)g.call(k,"lazy");else{if(z.createEventObject&&L.doScroll){try{E=!k.frameElement}catch(ba){}E&&r()}z[v](n+
"DOMContentLoaded",x,!1);z[v](n+"readystatechange",x,!1);k[v](n+"load",x,!1)}}function T(){U&&aa(function(){var g=M.length;ca(g?function(){for(var r=0;r<g;++r)(function(g){k.setTimeout(function(){k.exports[M[g]].apply(k,arguments)},0)})(r)}:void 0)})}for(var k=window,z=document,L=z.documentElement,N=z.head||z.getElementsByTagName("head")[0]||L,B="",F=z.getElementsByTagName("script"),l=F.length;0<=--l;){var O=F[l],Y=O.src.match(/^[^?#]*\/run_prettify\.js(\?[^#]*)?(?:#.*)?$/);if(Y){B=Y[1]||"";O.parentNode.removeChild(O);
break}}var U=!0,H=[],P=[],M=[];B.replace(/[?&]([^&=]+)=([^&]+)/g,function(g,r,x){x=decodeURIComponent(x);r=decodeURIComponent(r);"autorun"==r?U=!/^[0fn]/i.test(x):"lang"==r?H.push(x):"skin"==r?P.push(x):"callback"==r&&M.push(x)});l=0;for(B=H.length;l<B;++l)(function(){var g=z.createElement("script");g.onload=g.onerror=g.onreadystatechange=function(){!g||g.readyState&&!/loaded|complete/.test(g.readyState)||(g.onerror=g.onload=g.onreadystatechange=null,--S,S||k.setTimeout(T,0),g.parentNode&&g.parentNode.removeChild(g),
g=null)};g.type="text/javascript";g.src="https://cdn.rawgit.com/google/code-prettify/master/loader/lang-"+encodeURIComponent(H[l])+".js";N.insertBefore(g,N.firstChild)})(H[l]);for(var S=H.length,F=[],l=0,B=P.length;l<B;++l)F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/skins/"+encodeURIComponent(P[l])+".css");F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/prettify.css");(function(g){function r(l){if(l!==x){var k=z.createElement("link");k.rel="stylesheet";k.type=
"text/css";l+1<x&&(k.error=k.onerror=function(){r(l+1)});k.href=g[l];N.appendChild(k)}}var x=g.length;r(0)})(F);var ca=function(){"undefined"!==typeof window&&(window.PR_SHOULD_USE_CONTINUATION=!0);var g;(function(){function r(a){function d(e){var a=e.charCodeAt(0);if(92!==a)return a;var c=e.charAt(1);return(a=k[c])?a:"0"<=c&&"7">=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);
return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,h=c.length;a<h;++a){var m=c[a];if(/\\[bdsw]/i.test(m))b.push(m);else{var m=d(m),p;a+2<h&&"-"===c[a+1]?(p=d(c[a+2]),a+=2):p=m;e.push([m,p]);65>p||122<m||(65>p||90<m||e.push([Math.max(65,m)|32,Math.min(p,90)|32]),97>p||122<m||
e.push([Math.max(97,m)&-33,Math.min(p,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});c=[];h=[];for(a=0;a<e.length;++a)m=e[a],m[0]<=h[1]+1?h[1]=Math.max(h[1],m[1]):c.push(h=m);for(a=0;a<c.length;++a)m=c[a],b.push(f(m[0])),m[1]>m[0]&&(m[1]+1>m[0]&&b.push("-"),b.push(f(m[1])));b.push("]");return b.join("")}function g(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)",
"g")),b=a.length,d=[],h=0,m=0;h<b;++h){var p=a[h];"("===p?++m:"\\"===p.charAt(0)&&(p=+p.substring(1))&&(p<=m?d[p]=-1:a[h]=f(p))}for(h=1;h<d.length;++h)-1===d[h]&&(d[h]=++r);for(m=h=0;h<b;++h)p=a[h],"("===p?(++m,d[m]||(a[h]="(?:")):"\\"===p.charAt(0)&&(p=+p.substring(1))&&p<=m&&(a[h]="\\"+d[p]);for(h=0;h<b;++h)"^"===a[h]&&"^"!==a[h+1]&&(a[h]="");if(e.ignoreCase&&A)for(h=0;h<b;++h)p=a[h],e=p.charAt(0),2<=p.length&&"["===e?a[h]=c(p):"\\"!==e&&(a[h]=p.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);
return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var r=0,A=!1,q=!1,I=0,b=a.length;I<b;++I){var t=a[I];if(t.ignoreCase)q=!0;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,""))){A=!0;q=!1;break}}for(var k={b:8,t:9,n:10,v:11,f:12,r:13},u=[],I=0,b=a.length;I<b;++I){t=a[I];if(t.global||t.multiline)throw Error(""+t);u.push("(?:"+g(t)+")")}return new RegExp(u.join("|"),q?"gi":"g")}function l(a,d){function f(a){var b=a.nodeType;if(1==b){if(!c.test(a.className)){for(b=
a.firstChild;b;b=b.nextSibling)f(b);b=a.nodeName.toLowerCase();if("br"===b||"li"===b)g[q]="\n",A[q<<1]=r++,A[q++<<1|1]=a}}else if(3==b||4==b)b=a.nodeValue,b.length&&(b=d?b.replace(/\r\n?/g,"\n"):b.replace(/[ \t\r\n]+/g," "),g[q]=b,A[q<<1]=r,r+=b.length,A[q++<<1|1]=a)}var c=/(?:^|\s)nocode(?:\s|$)/,g=[],r=0,A=[],q=0;f(a);return{a:g.join("").replace(/\n$/,""),c:A}}function k(a,d,f,c,g){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},c(a),g.push.apply(g,a.g))}function z(a){for(var d=void 0,f=a.firstChild;f;f=
f.nextSibling)var c=f.nodeType,d=1===c?d?a:f:3===c?S.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function E(a,d){function f(a){for(var q=a.i,r=a.h,b=[q,"pln"],t=0,A=a.a.match(g)||[],u={},e=0,l=A.length;e<l;++e){var D=A[e],w=u[D],h=void 0,m;if("string"===typeof w)m=!1;else{var p=c[D.charAt(0)];if(p)h=D.match(p[1]),w=p[0];else{for(m=0;m<n;++m)if(p=d[m],h=D.match(p[1])){w=p[0];break}h||(w="pln")}!(m=5<=w.length&&"lang-"===w.substring(0,5))||h&&"string"===typeof h[1]||(m=!1,w="src");m||(u[D]=w)}p=t;
t+=D.length;if(m){m=h[1];var C=D.indexOf(m),G=C+m.length;h[2]&&(G=D.length-h[2].length,C=G-m.length);w=w.substring(5);k(r,q+p,D.substring(0,C),f,b);k(r,q+p+C,m,F(w,m),b);k(r,q+p+G,D.substring(G),f,b)}else b.push(q+p,w)}a.g=b}var c={},g;(function(){for(var f=a.concat(d),q=[],k={},b=0,t=f.length;b<t;++b){var n=f[b],u=n[3];if(u)for(var e=u.length;0<=--e;)c[u.charAt(e)]=n;n=n[1];u=""+n;k.hasOwnProperty(u)||(q.push(n),k[u]=null)}q.push(/[\0-\uffff]/);g=r(q)})();var n=d.length;return f}function v(a){var d=
[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&
f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var c=a.hashComments;c&&(a.cStyleComments?(1<c?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,
null]));if(c=a.regexLiterals){var g=(c=1<c?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+g+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+g+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd",
new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return E(d,f)}function B(a,d,f){function c(a){var b=
a.nodeType;if(1==b&&!r.test(a.className))if("br"===a.nodeName.toLowerCase())g(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(n);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+d[0].length))&&a.parentNode.insertBefore(q.createTextNode(e),a.nextSibling),g(a),b||a.parentNode.removeChild(a))}}function g(a){function c(a,b){var e=b?a.cloneNode(!1):a,p=a.parentNode;if(p){var p=c(p,1),d=a.nextSibling;
p.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,p.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var r=/(?:^|\s)nocode(?:\s|$)/,n=/\r\n?|\n/,q=a.ownerDocument,k=q.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var b=[k],t=0;t<b.length;++t)c(b[t]);d===(d|0)&&b[0].setAttribute("value",d);var l=q.createElement("ol");l.className="linenums";d=Math.max(0,d-1|0)||0;for(var t=
0,u=b.length;t<u;++t)k=b[t],k.className="L"+(t+d)%10,k.firstChild||k.appendChild(q.createTextNode("\u00a0")),l.appendChild(k);a.appendChild(l)}function n(a,d){for(var f=d.length;0<=--f;){var c=d[f];V.hasOwnProperty(c)?Q.console&&console.warn("cannot override language handler %s",c):V[c]=a}}function F(a,d){a&&V.hasOwnProperty(a)||(a=/^\s*</.test(d)?"default-markup":"default-code");return V[a]}function H(a){var d=a.j;try{var f=l(a.h,a.l),c=f.a;a.a=c;a.c=f.c;a.i=0;F(d,c)(a);var g=/\bMSIE\s(\d+)/.exec(navigator.userAgent),
g=g&&8>=+g[1],d=/\n/g,r=a.a,k=r.length,f=0,q=a.c,n=q.length,c=0,b=a.g,t=b.length,v=0;b[t]=k;var u,e;for(e=u=0;e<t;)b[e]!==b[e+2]?(b[u++]=b[e++],b[u++]=b[e++]):e+=2;t=u;for(e=u=0;e<t;){for(var x=b[e],z=b[e+1],w=e+2;w+2<=t&&b[w+1]===z;)w+=2;b[u++]=x;b[u++]=z;e=w}b.length=u;var h=a.h;a="";h&&(a=h.style.display,h.style.display="none");try{for(;c<n;){var m=q[c+2]||k,p=b[v+2]||k,w=Math.min(m,p),C=q[c+1],G;if(1!==C.nodeType&&(G=r.substring(f,w))){g&&(G=G.replace(d,"\r"));C.nodeValue=G;var Z=C.ownerDocument,
W=Z.createElement("span");W.className=b[v+1];var B=C.parentNode;B.replaceChild(W,C);W.appendChild(C);f<m&&(q[c+1]=C=Z.createTextNode(r.substring(w,m)),B.insertBefore(C,W.nextSibling))}f=w;f>=m&&(c+=2);f>=p&&(v+=2)}}finally{h&&(h.style.display=a)}}catch(y){Q.console&&console.log(y&&y.stack||y)}}var Q="undefined"!==typeof window?window:{},J=["break,continue,do,else,for,if,return,while"],K=[[J,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],R=[K,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],L=[K,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],
M=[K,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],K=[K,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"],
N=[J,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],O=[J,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],J=[J,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],P=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
S=/\S/,T=v({keywords:[R,M,L,K,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",N,O,J],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),V={};n(T,["default-code"]);n(E([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",
/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));n(E([["pln",/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);n(E([],[["atv",/^[\s\S]+/]]),["uq.val"]);n(v({keywords:R,hashComments:!0,cStyleComments:!0,types:P}),"c cc cpp cxx cyc m".split(" "));n(v({keywords:"null,true,false"}),["json"]);n(v({keywords:M,hashComments:!0,cStyleComments:!0,
verbatimStrings:!0,types:P}),["cs"]);n(v({keywords:L,cStyleComments:!0}),["java"]);n(v({keywords:J,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);n(v({keywords:N,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);n(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),
["perl","pl","pm"]);n(v({keywords:O,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);n(v({keywords:K,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);n(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);n(E([],[["str",/^[\s\S]+/]]),
["regex"]);var U=Q.PR={createSimpleLexer:E,registerLangHandler:n,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="<pre>"+a+"</pre>";c=c.firstChild;f&&B(c,f,!0);H({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});
return c.innerHTML},prettyPrint:g=function(a,d){function f(){for(var c=Q.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;t<r.length&&b.now()<c;t++){for(var d=r[t],k=h,n=d;n=n.previousSibling;){var q=n.nodeType,l=(7===q||8===q)&&n.nodeValue;if(l?!/^\??prettify\b/.test(l):3!==q||/\S/.test(n.nodeValue))break;if(l){k={};l.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){k[b]=c});break}}n=d.className;if((k!==h||u.test(n))&&!e.test(n)){q=!1;for(l=d.parentNode;l;l=l.parentNode)if(w.test(l.tagName)&&l.className&&
u.test(l.className)){q=!0;break}if(!q){d.className+=" prettyprinted";q=k.lang;if(!q){var q=n.match(v),A;!q&&(A=z(d))&&D.test(A.tagName)&&(q=A.className.match(v));q&&(q=q[1])}if(x.test(d.tagName))l=1;else var l=d.currentStyle,y=g.defaultView,l=(l=l?l.whiteSpace:y&&y.getComputedStyle?y.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===l.substring(0,3);y=k.linenums;(y="true"===y||+y)||(y=(y=n.match(/\blinenums\b(?::(\d+))?/))?y[1]&&y[1].length?+y[1]:!0:!1);y&&B(d,y,l);H({j:q,h:d,m:y,
l:l,a:null,i:null,c:null,g:null})}}}t<r.length?Q.setTimeout(f,250):"function"===typeof a&&a()}for(var c=d||document.body,g=c.ownerDocument||document,c=[c.getElementsByTagName("pre"),c.getElementsByTagName("code"),c.getElementsByTagName("xmp")],r=[],k=0;k<c.length;++k)for(var n=0,l=c[k].length;n<l;++n)r.push(c[k][n]);var c=null,b=Date;b.now||(b={now:function(){return+new Date}});var t=0,v=/\blang(?:uage)?-([\w.]+)(?!\S)/,u=/\bprettyprint\b/,e=/\bprettyprinted\b/,x=/pre|xmp/i,D=/^code$/i,w=/^(?:pre|code|xmp)$/i,
h={};f()}},R=Q.define;"function"===typeof R&&R.amd&&R("google-code-prettify",[],function(){return U})})();return g}();S||k.setTimeout(T,0)})();}()

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -0,0 +1,254 @@
body {
font-family: Helvetica Neue, Helvetica, Arial;
background: rgb(244,215,201); /* Old browsers */
background: -moz-linear-gradient(top, rgb(244,215,201) 0%, rgb(244,226,201) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(244,215,201) 0%,rgb(244,226,201) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(244,215,201) 0%,rgb(244,226,201) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
margin-bottom: 100px;
}
.header {
margin-top: 30px;
}
.header h1 {
margin-top: 10px;
}
h4 {
padding-bottom: 10px;
}
.prettyprinted {
margin-top: 5px;
border-top: none !important;
border-bottom: none !important;
border-right: none !important;
border-left: 1px solid rgba(0,0,0,.1) !important;
padding-left: 15px !important;
word-wrap: break-word !important;
overflow: default !important;
text-overflow: default !important;
}
.tinted {
background-color: #fff6b2;
}
.handle {
cursor: grab;
}
code {
color: #606;
}
.toc {
background-color: rgb(255,255,255,0.5);
border: solid #444 1px;
padding: 20px;
margin-left: auto;
margin-right: auto;
list-style: none;
}
.toc h5 {
margin-top: 8px;
}
.list-group-item:hover {
z-index: 0;
}
.input-section {
background-color: rgb(255,255,255,0.5);
padding: 20px;
}
.square-section {
background-color: rgb(255,255,255,0.5);
}
.square {
width: 20vw;
height: 20vw;
background-color: #00a2ff;
margin-top: 2vw;
margin-left: 2vw;
display: inline-block;
position: relative;
}
.swap-threshold-indicator {
background-color: #0079bf;
height: 100%;
display: inline-block;
}
.inverted-swap-threshold-indicator {
background-color: #0079bf;
height: 100%;
position: absolute;
}
.indicator-left {
left: 0;
top: 0;
}
.indicator-right {
right: 0;
bottom: 0;
}
.num-indicator {
position: absolute;
font-size: 50px;
width: 25px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.grid-square {
width: 100px;
height: 100px;
display: inline-block;
background-color: #fff;
border: solid 1px rgb(0,0,0,0.2);
padding: 10px;
margin: 12px;
}
.nested-sortable, .nested-1, .nested-2, .nested-3 {
margin-top: 5px;
}
.nested-1 {
background-color: #e6e6e6;
}
.nested-2 {
background-color: #cccccc;
}
.nested-3 {
background-color: #b3b3b3;
}
.frameworks {
background-color: rgb(255,255,255,0.5);
border: solid rgb(0,0,0,0.3) 1px;
padding: 20px;
}
.frameworks h3 {
margin-top: 5px;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 3.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: rgba(48, 113, 169, 0);
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
border: 1.3px solid rgba(0, 0, 0, 0.7);
height: 16px;
width: 16px;
border-radius: 49px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(54, 126, 189, 0);
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: rgba(48, 113, 169, 0);
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
border: 1.3px solid rgba(0, 0, 0, 0.7);
height: 16px;
width: 16px;
border-radius: 49px;
background: #ffffff;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: rgba(42, 100, 149, 0);
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: rgba(48, 113, 169, 0);
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0.9px #000000, 0px 0px 0px #0d0d0d;
border: 1.3px solid rgba(0, 0, 0, 0.7);
height: 16px;
width: 16px;
border-radius: 49px;
background: #ffffff;
cursor: pointer;
height: 8.4px;
}
input[type=range]:focus::-ms-fill-lower {
background: rgba(48, 113, 169, 0);
}
input[type=range]:focus::-ms-fill-upper {
background: rgba(54, 126, 189, 0);
}
.blue-background-class {
background-color: #C8EBFB;
}
.col {
padding-right: 0;
margin-right: 15px;
}
.selected {
background-color: #f9c7c8;
border: solid red 1px !important;
z-index: 1 !important;
}
.highlight {
background-color: #B7F8C7;
}

View File

@ -0,0 +1,14 @@
{
"name": "art-template",
"homepage": "https://github.com/aui/artTemplate",
"version": "3.1.3",
"_release": "3.1.3",
"_resolution": {
"type": "version",
"tag": "v3.1.3",
"commit": "b1085f546f6d3abbf74d10a5f69d24a63e932e86"
},
"_source": "https://github.com/aui/artTemplate.git",
"_target": "~3.1.3",
"_originalSource": "art-template"
}

View File

@ -0,0 +1,4 @@
.DS_Store
node_modules
.vscode
coverage

View File

@ -0,0 +1,3 @@
test
demo
doc

View File

@ -0,0 +1,99 @@
module.exports = function (grunt) {
var sources_native = [
'src/intro.js',
'src/template.js',
'src/config.js',
'src/cache.js',
'src/render.js',
'src/renderFile.js',
'src/get.js',
'src/utils.js',
'src/helper.js',
'src/onerror.js',
'src/compile.js',
//<<<< 'src/syntax.js',
'src/outro.js'
];
var sources_simple = Array.apply(null, sources_native);
sources_simple.splice(sources_native.length - 1, 0, 'src/syntax.js');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
meta: {
banner: '/*!<%= pkg.name %> - Template Engine | <%= pkg.homepage %>*/\n'
},
concat: {
options: {
separator: ''
},
'native': {
src: sources_native,
dest: 'dist/template-native-debug.js'
},
simple: {
src: sources_simple,
dest: 'dist/template-debug.js'
}
},
uglify: {
options: {
banner: '<%= meta.banner %>'
},
'native': {
src: '<%= concat.native.dest %>',
dest: 'dist/template-native.js'
},
simple: {
src: '<%= concat.simple.dest %>',
dest: 'dist/template.js'
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: [
'dist/template-native.js',
'dist/template.js'
],
options: {
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true
},
globals: {
console: true,
define: true,
global: true,
module: true
}
},
watch: {
files: '<config:lint.files>',
tasks: 'lint qunit'
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
//grunt.loadNpmTasks('grunt-contrib-qunit');
//grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat', /*'jshint',*/ 'uglify']);
};

View File

@ -0,0 +1,303 @@
# artTemplate-3.0
新一代 javascript 模板引擎
> 后会无期。2016-12-22
## 目录
* [特性](#特性)
* [快速上手](#快速上手)
* [模板语法](#模板语法)
* [下载](#下载)
* [方法](#方法)
* [NodeJS](#nodejs)
* [使用预编译](#使用预编译)
* [更新日志](#更新日志)
* [授权协议](#授权协议)
## 特性
1. 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍([性能测试](http://aui.github.com/artTemplate/test/test-speed.html)
2. 支持运行时调试,可精确定位异常模板所在语句([演示](http://aui.github.io/artTemplate/demo/debug.html)
3. 对 NodeJS Express 友好支持
4. 安全默认对输出进行转义、在沙箱中运行编译后的代码Node版本可以安全执行用户上传的模板
5. 支持``include``语句
6. 可在浏览器端实现按路径加载模板([详情](#使用预编译)
7. 支持预编译,可将模板转换成为非常精简的 js 文件
8. 模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
9. 支持所有流行的浏览器
## 快速上手
### 编写模板
使用一个``type="text/html"``的``script``标签存放模板:
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} {{value}}</li>
{{/each}}
</ul>
</script>
### 渲染模板
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
[演示](http://aui.github.com/artTemplate/demo/basic.html)
## 模板语法
有两个版本的模板语法可以选择。
### 简洁语法
推荐使用,语法简单实用,利于读写。
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
[查看语法与演示](https://github.com/aui/artTemplate/wiki/syntax:simple)
### 原生语法
<%if (admin){%>
<%include('admin_content')%>
<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>
[查看语法与演示](https://github.com/aui/artTemplate/wiki/syntax:native)
## 下载
* [template.js](https://raw.github.com/aui/artTemplate/master/dist/template.js) *(简洁语法版, 2.7kb)*
* [template-native.js](https://raw.github.com/aui/artTemplate/master/dist/template-native.js) *(原生语法版, 2.3kb)*
## 方法
### template(id, data)
根据 id 渲染模板。内部会根据``document.getElementById(id)``查找模板。
如果没有 data 参数,那么将返回一渲染函数。
### template.``compile``(source, options)
将返回一个渲染函数。[演示](http://aui.github.com/artTemplate/demo/compile.html)
### template.``render``(source, options)
将返回渲染结果。
### template.``helper``(name, callback)
添加辅助方法。
例如时间格式器:[演示](http://aui.github.com/artTemplate/demo/helper.html)
### template.``config``(name, value)
更改引擎的默认配置。
字段 | 类型 | 默认值| 说明
------------ | ------------- | ------------ | ------------
openTag | String | ``'{{'`` | 逻辑语法开始标签
closeTag | String | ``"}}"`` | 逻辑语法结束标签
escape | Boolean | ``true`` | 是否编码输出 HTML 字符
cache | Boolean | ``true`` | 是否开启缓存(依赖 options 的 filename 字段)
compress | Boolean | ``false`` | 是否压缩 HTML 多余空白字符
## 使用预编译
可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:
一、**按文件与目录组织模板**
```
template('tpl/home/main', data)
```
二、**模板支持引入子模板**
{{include '../public/header'}}
### 基于预编译:
* 可将模板转换成为非常精简的 js 文件(不依赖引擎)
* 使用同步模板加载接口
* 支持多种 js 模块输出AMD、CMD、CommonJS
* 支持作为 GruntJS 插件构建
* 前端模板可共享给 NodeJS 执行
* 自动压缩打包模板
预编译工具:[TmodJS](http://github.com/aui/tmodjs/)
## NodeJS
### 安装
npm install art-template
### 使用
var template = require('art-template');
var data = {list: ["aui", "test"]};
var html = template(__dirname + '/index/main', data);
### 配置
NodeJS 版本新增了如下默认配置:
字段 | 类型 | 默认值| 说明
------------ | ------------- | ------------ | ------------
base | String | ``''`` | 指定模板目录
extname | String | ``'.html'`` | 指定模板后缀名
encoding | String | ``'utf-8'`` | 指定模板编码
配置``base``指定模板目录可以缩短模板的路径,并且能够避免``include``语句越级访问任意路径引发安全隐患,例如:
template.config('base', __dirname);
var html = template('index/main', data)
### NodeJS + Express
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
//app.set('views', __dirname + '/views');
运行 demo:
node demo/node-template-express.js
> 若使用 js 原生语法作为模板语法,请改用 ``require('art-template/node/template-native.js')``
## 升级参考
为了适配 NodeJS expressartTemplate v3.0.0 接口有调整。
### 接口变更
1. 默认使用简洁语法
2. ``template.render()``方法的第一个参数不再是 id而是模板字符串
3. 使用新的配置接口``template.config()``并且字段名有修改
4. ``template.compile()``方法不支持 id 参数
5. helper 方法不再强制原文输出,是否编码取决于模板语句
6. ``template.helpers`` 中的``$string``、``$escape``、``$each``已迁移到``template.utils``中
7. ``template()``方法不支持传入模板直接编译
### 升级方法
1. 如果想继续使用 js 原生语法作为模板语言,请使用 [template-native.js](https://raw.github.com/aui/artTemplate/master/dist/template-native.js)
2. 查找项目```template.render```替换为```template```
3. 使用``template.config(name, value)``来替换以前的配置
4. ``template()``方法直接传入的模板改用``template.compile()``v2初期版本
## 更新日志
### v3.1.0
1. 修复``template.runder()``方法与文档表现不一致的问题
2. 去掉鸡肋的``fs.watch``特性
### v3.0.3
1. 解决``template.helper()``方法传入的数据被转成字符串的问题 #96
2. 解决``{{value || value2}}``被识别为管道语句的问题 #105 <https://github.com/aui/tmodjs/issues/48>
### v3.0.2
1. ~~解决管道语法必须使用空格分隔的问题~~
### v3.0.1
1. 适配 express3.x 与 4.x修复路径 BUG
### v3.0.0
1. 提供 NodeJS 专属版本,支持使用路径加载模板,并且模板的``include``语句也支持相对路径
2. 适配 [express](http://expressjs.com) 框架
3. 内置``print``语句支持传入多个参数
4. 支持全局缓存配置
5. 简洁语法版支持管道风格的 helper 调用,例如:``{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}``
当前版本接口有调整,请阅读 [升级参考](#升级参考)
> artTemplate 预编译工具 [TmodJS](https://github.com/aui/tmodjs) 已更新
### v2.0.4
1. 修复低版本安卓浏览器编译后可能产生语法错误的问题(因为此版本浏览器 js 引擎存在 BUG
### v2.0.3
1. 优化辅助方法性能
2. NodeJS 用户可以通过 npm 获取 artTemplate``$ npm install art-template -g``
3. 不转义输出语句推荐使用``<%=#value%>``(兼容 v2.0.3 版本之前使用的``<%==value%>``),而简版语法则可以使用``{{#value}}``
4. 提供简版语法的合并版本 dist/[template-simple.js](https://raw.github.com/aui/artTemplate/master/dist/template-simple.js)
### v2.0.2
1. 优化自定义语法扩展,减少体积
2. [重要]为了最大化兼容第三方库,自定义语法扩展默认界定符修改为``{{``与``}}``。
3. 修复合并工具的BUG [#25](https://github.com/aui/artTemplate/issues/25)
4. 公开了内部缓存,可以通过``template.cache``访问到编译后的函数
5. 公开了辅助方法缓存,可以通过``template.helpers``访问到
6. 优化了调试信息
### v2.0.1
1. 修复模板变量静态分析的[BUG](https://github.com/aui/artTemplate/pull/22)
### v2.0 release
1. ~~编译工具更名为 atc成为 artTemplate 的子项目单独维护:<https://github.com/cdc-im/atc>~~
### v2.0 beta5
1. 修复编译工具可能存在重复依赖的问题。感谢 @warmhug
2. 修复预编译``include``内部实现可能产生上下文不一致的问题。感谢 @warmhug
3. 编译工具支持使用拖拽文件进行单独编译
### v2.0 beta4
1. 修复编译工具在压缩模板可能导致 HTML 意外截断的问题。感谢 @warmhug
2. 完善编译工具对``include``支持支持,可以支持不同目录之间模板嵌套
3. 修复编译工具没能正确处理自定义语法插件的辅助方法
### v2.0 beta1
1. 对非 String、Number 类型的数据不输出,而 Function 类型求值后输出。
2. 默认对 html 进行转义输出,原文输出可使用``<%==value%>``备注v2.0.3 推荐使用``<%=#value%>``),也可以关闭默认的转义功能``template.defaults.escape = false``。
3. 增加批处理工具支持把模板编译成不依赖模板引擎的 js 文件,可通过 RequireJS、SeaJS 等模块加载器进行异步加载。
## 授权协议
Released under the MIT, BSD, and GPL Licenses
============
[所有演示例子](http://aui.github.com/artTemplate/demo/index.html) | [引擎原理](http://cdc.tencent.com/?p=5723)
© tencent.com

View File

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} {{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} {{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
{{2 a ba d}}
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
<ul>
{{each list}}
{{/each}}
{{window.alert=null}}
</ul>
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,87 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>
<script>
/**
* 对日期进行格式化,
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有:
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
template.helper('dateFormat', function (date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
});
// --------
var data = {
time: 1408536771253,
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} {{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h1>演示</h1>
<nav>简洁语法演示 | <a href="template-native/index.html">js 原生语法演示</a></nav>
<ul>
<li><a href="basic.html">基本例子</a></li>
<li><a href="no-escape.html">不转义HTML</a></li>
<li><a href="compile.html">在javascript中存放模板</a></li>
<li><a href="include.html">嵌入子模板(include)</a></li>
<li><a href="helper.html">访问外部公用函数(辅助方法)</a></li>
<li><a href="debug.html">错误调试</a></li>
<li><a href="print.html">print方法</a></li>
</ul>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义:{{#value}}</p>
<p>默认转义: {{value}}</p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,48 @@
var express = require('express');
var template = require('../node/template.js');
var app = module.exports = express();
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');
app.set('views', __dirname + '/node-template');
var demoData = {
title: '国内要闻',
time: (new Date).toString(),
list: [
{
title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
},
{
title: '明起汽油价格每吨下调310元 单价回归7元时代',
url: 'http://finance.qq.com/a/20130326/007060.htm'
},
{
title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
url: 'http://news.qq.com/a/20130326/001254.htm'
},
{
title: '湖南27岁副县长回应质疑父亲已不是领导',
url: 'http://news.qq.com/a/20130326/000959.htm'
},
{
title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
url: 'http://news.qq.com/a/20130326/001307.htm'
}
]
};
app.get('/', function(req, res){
res.render('./index', demoData);
});
/* istanbul ignore next */
if (!module.parent) {
app.listen(3000);
console.log('Express started on port 3000');
}

View File

@ -0,0 +1,35 @@
var template = require('../node/template.js');
//console.log(template);
template.config('base', __dirname);// 设置模板根目录,默认为引擎所在目录
template.config('compress', true);// 压缩输出
var html = template('node-template/index', {
title: '国内要闻',
time: (new Date).toString(),
list: [
{
title: '<油价>调整周期缩至10个工作日 无4%幅度限制',
url: 'http://finance.qq.com/zt2013/2013yj/index.htm'
},
{
title: '明起汽油价格每吨下调310元 单价回归7元时代',
url: 'http://finance.qq.com/a/20130326/007060.htm'
},
{
title: '广东副县长疑因抛弃情妇遭6女子围殴 纪检调查',
url: 'http://news.qq.com/a/20130326/001254.htm'
},
{
title: '湖南27岁副县长回应质疑父亲已不是领导',
url: 'http://news.qq.com/a/20130326/000959.htm'
},
{
title: '朝军进入战斗工作状态 称随时准备导弹攻击美国',
url: 'http://news.qq.com/a/20130326/001307.htm'
}
]
});
console.log(html);
//console.log(template.cache)

View File

@ -0,0 +1 @@
(c) 2013

View File

@ -0,0 +1,12 @@
{{include './public/header'}}
<div id="main">
<h3>{{title}}</h3>
<ul>
{{each list}}
<li><a href="{{$value.url}}">{{$value.title}}</a></li>
{{/each}}
</ul>
</div>
{{include './public/footer'}}

View File

@ -0,0 +1,6 @@
<div id="footer">
{{if time}}
<p class='time'>{{time}}</p>
{{/if}}
{{include '../copyright'}}
</div>

View File

@ -0,0 +1,11 @@
<!-- 头部 开始 -->
<div id="header">
{{include './logo'}}
<ul id="nav">
<li><a href="http://www.qq.com">首页</a></li>
<li><a href="http://news.qq.com/">新闻</a></li>
<li><a href="http://pp.qq.com/">图片</a></li>
<li><a href="http://mil.qq.com/">军事</a></li>
</ul>
</div>
<!-- 头部 结束 -->

View File

@ -0,0 +1,7 @@
<!-- logo start -->
<h1 id="logo">
<a href="http://www.qq.com">
<img width='134' height='44' src="http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png" alt="腾讯网" />
</a>
</h1>
<!-- logo end -->

View File

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>print-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>print</h1>
<script id="test" type="text/html">
{{print a b c}}
</script>
<script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<% if (isAdmin) { %>
<h1><%=title%></h1>
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> <%= list[i] %></li>
<% } %>
</ul>
<% } %>
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> <%= list[i] %></li>'
+ '<% } %>'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
<ul>
<% for7777777 (var i = 0; i < list.length; i ++) { %>
<% } %>
<% window.alert = function (e) {
(new Image).src = 'http://g.cn/log?'+ e;
alert(e);
};
var alert = window.alert;
%>
</ul>
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>debug-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>错误捕获(请打开控制台)</h1>
<script id="test" type="text/html">
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<% } %>
<% window.alert = function (e) {
(new Image).src = 'http://g.cn/log?'+ e;
alert(e);
};
var alert = window.alert;
%>
</ul>
</script>
<script>
var html = '';
html = template('test', {});
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>helper-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>辅助方法</h1>
<div id="content"></div>
<script id="test" type="text/html">
<%=dateFormat(time, 'yyyy<b></b> MM月 dd日 hh:mm:ss')%>
</script>
<script>
/**
* 对日期进行格式化,
* @param date 要格式化的日期
* @param format 进行格式化的模式字符串
* 支持的模式字母有:
* y:年,
* M:年中的月份(1-12),
* d:月份中的天(1-31),
* h:小时(0-23),
* m:分(0-59),
* s:秒(0-59),
* S:毫秒(0-999),
* q:季度(1-4)
* @return String
* @author yanis.wang
* @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
*/
template.helper('dateFormat', function (date, format) {
date = new Date(date);
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t){
var v = map[t];
if(v !== undefined){
if(all.length > 1){
v = '0' + v;
v = v.substr(v.length-2);
}
return v;
}
else if(t === 'y'){
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
});
// --------
var data = {
time: (new Date).toString(),
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>
<script id="list" type="text/html">
<ul>
<% for (var i = 0; i < list.length; i ++) { %>
<li>索引 <%= i + 1 %> <%= list[i] %></li>
<% } %>
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<h1>演示</h1>
<nav><a href="../index.html">简洁语法演示</a> | js 原生语法演示</nav>
<ul>
<li><a href="basic.html">基本例子</a></li>
<li><a href="no-escape.html">不转义HTML</a></li>
<li><a href="compile.html">在javascript中存放模板</a></li>
<li><a href="include.html">嵌入子模板(include)</a></li>
<li><a href="helper.html">访问外部公用函数(辅助方法)</a></li>
<li><a href="debug.html">错误调试</a></li>
<li><a href="print.html">print方法</a></li>
<li><a href="tag.html">自定义界定符</a></li>
</ul>
</body>
</html>

View File

@ -0,0 +1,25 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>no escape-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>不转义HTML</h1>
<div id="content"></div>
<script id="test" type="text/html">
<p>不转义:<%=#value%></p>
<p>默认转义: <%=value%></p>
</script>
<script>
var data = {
value: '<span style="color:#F00">hello world!</span>'
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>print-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>print</h1>
<script id="test" type="text/html">
<% print(a, b, c) %>
</script>
<script>
var html = '';
var data = {
a: 'hello',
b: '--world',
c: '--!!!'
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,42 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>tag-demo</title>
<script src="../../dist/template-native.js"></script>
</head>
<body>
<h1>自定义界定符</h1>
<script id="test" type="text/html">
<!--[if (title) {]-->
<h3><!--[= title]--></h3>
<!--[} else {]-->
<h3>无标题</h3>
<!--[}]-->
<ul>
<!--[for (var i = 0; i < list.length; i ++) {]-->
<li>索引 <!--[= i + 1 ]--> <!--[= list[i]]--></li>
<!--[}]-->
</ul>
</script>
<script>
template.defaults.openTag = '<!--[';
template.defaults.closeTag = ']-->';
var html = '';
var data = {
title: '我的标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
html = template('test', data);
document.write(html);
</script>
</body>
</html>

View File

@ -0,0 +1,739 @@
/*!
* artTemplate - Template Engine
* https://github.com/aui/artTemplate
* Released under the MIT, BSD, and GPL Licenses
*/
!(function () {
/**
* 模板引擎
* @name template
* @param {String} 模板名
* @param {Object, String} 数据如果为字符串则编译并缓存编译结果
* @return {String, Function} 渲染好的HTML字符串或者渲染方法
*/
var template = function (filename, content) {
return typeof content === 'string'
? compile(content, {
filename: filename
})
: renderFile(filename, content);
};
template.version = '3.0.0';
/**
* 设置全局配置
* @name template.config
* @param {String} 名称
* @param {Any}
*/
template.config = function (name, value) {
defaults[name] = value;
};
var defaults = template.defaults = {
openTag: '<%', // 逻辑语法开始标签
closeTag: '%>', // 逻辑语法结束标签
escape: true, // 是否编码输出变量的 HTML 字符
cache: true, // 是否开启缓存(依赖 options 的 filename 字段)
compress: false, // 是否压缩输出
parser: null // 自定义语法格式器 @see: template-syntax.js
};
var cacheStore = template.cache = {};
/**
* 渲染模板
* @name template.render
* @param {String} 模板
* @param {Object} 数据
* @return {String} 渲染好的字符串
*/
template.render = function (source, options) {
return compile(source)(options);
};
/**
* 渲染模板(根据模板名)
* @name template.render
* @param {String} 模板名
* @param {Object} 数据
* @return {String} 渲染好的字符串
*/
var renderFile = template.renderFile = function (filename, data) {
var fn = template.get(filename) || showDebugInfo({
filename: filename,
name: 'Render Error',
message: 'Template not found'
});
return data ? fn(data) : fn;
};
/**
* 获取编译缓存可由外部重写此方法
* @param {String} 模板名
* @param {Function} 编译好的函数
*/
template.get = function (filename) {
var cache;
if (cacheStore[filename]) {
// 使用内存缓存
cache = cacheStore[filename];
} else if (typeof document === 'object') {
// 加载模板并编译
var elem = document.getElementById(filename);
if (elem) {
var source = (elem.value || elem.innerHTML)
.replace(/^\s*|\s*$/g, '');
cache = compile(source, {
filename: filename
});
}
}
return cache;
};
var toString = function (value, type) {
if (typeof value !== 'string') {
type = typeof value;
if (type === 'number') {
value += '';
} else if (type === 'function') {
value = toString(value.call(value));
} else {
value = '';
}
}
return value;
};
var escapeMap = {
"<": "&#60;",
">": "&#62;",
'"': "&#34;",
"'": "&#39;",
"&": "&#38;"
};
var escapeFn = function (s) {
return escapeMap[s];
};
var escapeHTML = function (content) {
return toString(content)
.replace(/&(?![\w#]+;)|[<>"']/g, escapeFn);
};
var isArray = Array.isArray || function (obj) {
return ({}).toString.call(obj) === '[object Array]';
};
var each = function (data, callback) {
var i, len;
if (isArray(data)) {
for (i = 0, len = data.length; i < len; i++) {
callback.call(data, data[i], i, data);
}
} else {
for (i in data) {
callback.call(data, data[i], i);
}
}
};
var utils = template.utils = {
$helpers: {},
$include: renderFile,
$string: toString,
$escape: escapeHTML,
$each: each
};/**
* 添加模板辅助方法
* @name template.helper
* @param {String} 名称
* @param {Function} 方法
*/
template.helper = function (name, helper) {
helpers[name] = helper;
};
var helpers = template.helpers = utils.$helpers;
/**
* 模板错误事件可由外部重写此方法
* @name template.onerror
* @event
*/
template.onerror = function (e) {
var message = 'Template Error\n\n';
for (var name in e) {
message += '<' + name + '>\n' + e[name] + '\n\n';
}
if (typeof console === 'object') {
console.error(message);
}
};
// 模板调试器
var showDebugInfo = function (e) {
template.onerror(e);
return function () {
return '{Template Error}';
};
};
/**
* 编译模板
* 2012-6-6 @TooBug: define 方法名改为 compile Node Express 保持一致
* @name template.compile
* @param {String} 模板字符串
* @param {Object} 编译选项
*
* - openTag {String}
* - closeTag {String}
* - filename {String}
* - escape {Boolean}
* - compress {Boolean}
* - debug {Boolean}
* - cache {Boolean}
* - parser {Function}
*
* @return {Function} 渲染方法
*/
var compile = template.compile = function (source, options) {
// 合并默认配置
options = options || {};
for (var name in defaults) {
if (options[name] === undefined) {
options[name] = defaults[name];
}
}
var filename = options.filename;
try {
var Render = compiler(source, options);
} catch (e) {
e.filename = filename || 'anonymous';
e.name = 'Syntax Error';
return showDebugInfo(e);
}
// 对编译结果进行一次包装
function render (data) {
try {
return new Render(data, filename) + '';
} catch (e) {
// 运行时出错后自动开启调试模式重新编译
if (!options.debug) {
options.debug = true;
return compile(source, options)(data);
}
return showDebugInfo(e)();
}
}
render.prototype = Render.prototype;
render.toString = function () {
return Render.toString();
};
if (filename && options.cache) {
cacheStore[filename] = render;
}
return render;
};
// 数组迭代
var forEach = utils.$each;
// 静态分析模板变量
var KEYWORDS =
// 关键字
'break,case,catch,continue,debugger,default,delete,do,else,false'
+ ',finally,for,function,if,in,instanceof,new,null,return,switch,this'
+ ',throw,true,try,typeof,var,void,while,with'
// 保留字
+ ',abstract,boolean,byte,char,class,const,double,enum,export,extends'
+ ',final,float,goto,implements,import,int,interface,long,native'
+ ',package,private,protected,public,short,static,super,synchronized'
+ ',throws,transient,volatile'
// ECMA 5 - use strict
+ ',arguments,let,yield'
+ ',undefined';
var REMOVE_RE = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g;
var SPLIT_RE = /[^\w$]+/g;
var KEYWORDS_RE = new RegExp(["\\b" + KEYWORDS.replace(/,/g, '\\b|\\b') + "\\b"].join('|'), 'g');
var NUMBER_RE = /^\d[^,]*|,\d[^,]*/g;
var BOUNDARY_RE = /^,+|,+$/g;
var SPLIT2_RE = /^$|,+/;
// 获取变量
function getVariable (code) {
return code
.replace(REMOVE_RE, '')
.replace(SPLIT_RE, ',')
.replace(KEYWORDS_RE, '')
.replace(NUMBER_RE, '')
.replace(BOUNDARY_RE, '')
.split(SPLIT2_RE);
};
// 字符串转义
function stringify (code) {
return "'" + code
// 单引号与反斜杠转义
.replace(/('|\\)/g, '\\$1')
// 换行符转义(windows + linux)
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n') + "'";
}
function compiler (source, options) {
var debug = options.debug;
var openTag = options.openTag;
var closeTag = options.closeTag;
var parser = options.parser;
var compress = options.compress;
var escape = options.escape;
var line = 1;
var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1};
var isNewEngine = ''.trim;// '__proto__' in {}
var replaces = isNewEngine
? ["$out='';", "$out+=", ";", "$out"]
: ["$out=[];", "$out.push(", ");", "$out.join('')"];
var concat = isNewEngine
? "$out+=text;return $out;"
: "$out.push(text);";
var print = "function(){"
+ "var text=''.concat.apply('',arguments);"
+ concat
+ "}";
var include = "function(filename,data){"
+ "data=data||$data;"
+ "var text=$utils.$include(filename,data,$filename);"
+ concat
+ "}";
var headerCode = "'use strict';"
+ "var $utils=this,$helpers=$utils.$helpers,"
+ (debug ? "$line=0," : "");
var mainCode = replaces[0];
var footerCode = "return new String(" + replaces[3] + ");"
// html与逻辑语法分离
forEach(source.split(openTag), function (code) {
code = code.split(closeTag);
var $0 = code[0];
var $1 = code[1];
// code: [html]
if (code.length === 1) {
mainCode += html($0);
// code: [logic, html]
} else {
mainCode += logic($0);
if ($1) {
mainCode += html($1);
}
}
});
var code = headerCode + mainCode + footerCode;
// 调试语句
if (debug) {
code = "try{" + code + "}catch(e){"
+ "throw {"
+ "filename:$filename,"
+ "name:'Render Error',"
+ "message:e.message,"
+ "line:$line,"
+ "source:" + stringify(source)
+ ".split(/\\n/)[$line-1].replace(/^\\s+/,'')"
+ "};"
+ "}";
}
try {
var Render = new Function("$data", "$filename", code);
Render.prototype = utils;
return Render;
} catch (e) {
e.temp = "function anonymous($data,$filename) {" + code + "}";
throw e;
}
// 处理 HTML 语句
function html (code) {
// 记录行号
line += code.split(/\n/).length - 1;
// 压缩多余空白与注释
if (compress) {
code = code
.replace(/\s+/g, ' ')
.replace(/<!--[\w\W]*?-->/g, '');
}
if (code) {
code = replaces[1] + stringify(code) + replaces[2] + "\n";
}
return code;
}
// 处理逻辑语句
function logic (code) {
var thisLine = line;
if (parser) {
// 语法转换插件钩子
code = parser(code, options);
} else if (debug) {
// 记录行号
code = code.replace(/\n/g, function () {
line ++;
return "$line=" + line + ";";
});
}
// 输出语句. 编码: <%=value%> 不编码:<%=#value%>
// <%=#value%> 等同 v2.0.3 之前的 <%==value%>
if (code.indexOf('=') === 0) {
var escapeSyntax = escape && !/^=[=#]/.test(code);
code = code.replace(/^=[=#]?|[\s;]*$/g, '');
// 对内容编码
if (escapeSyntax) {
var name = code.replace(/\s*\([^\)]+\)/, '');
// 排除 utils.* | include | print
if (!utils[name] && !/^(include|print)$/.test(name)) {
code = "$escape(" + code + ")";
}
// 不编码
} else {
code = "$string(" + code + ")";
}
code = replaces[1] + code + replaces[2];
}
if (debug) {
code = "$line=" + thisLine + ";" + code;
}
// 提取模板中的变量名
forEach(getVariable(code), function (name) {
// name 值可能为空,在安卓低版本浏览器下
if (!name || uniq[name]) {
return;
}
var value;
// 声明模板变量
// 赋值优先级:
// [include, print] > utils > helpers > data
if (name === 'print') {
value = print;
} else if (name === 'include') {
value = include;
} else if (utils[name]) {
value = "$utils." + name;
} else if (helpers[name]) {
value = "$helpers." + name;
} else {
value = "$data." + name;
}
headerCode += name + "=" + value + ",";
uniq[name] = true;
});
return code + "\n";
}
};
// 定义模板引擎的语法
defaults.openTag = '{{';
defaults.closeTag = '}}';
var filtered = function (js, filter) {
var parts = filter.split(':');
var name = parts.shift();
var args = parts.join(':') || '';
if (args) {
args = ', ' + args;
}
return '$helpers.' + name + '(' + js + args + ')';
}
defaults.parser = function (code, options) {
// var match = code.match(/([\w\$]*)(\b.*)/);
// var key = match[1];
// var args = match[2];
// var split = args.split(' ');
// split.shift();
code = code.replace(/^\s/, '');
var split = code.split(' ');
var key = split.shift();
var args = split.join(' ');
switch (key) {
case 'if':
code = 'if(' + args + '){';
break;
case 'else':
if (split.shift() === 'if') {
split = ' if(' + split.join(' ') + ')';
} else {
split = '';
}
code = '}else' + split + '{';
break;
case '/if':
code = '}';
break;
case 'each':
var object = split[0] || '$data';
var as = split[1] || 'as';
var value = split[2] || '$value';
var index = split[3] || '$index';
var param = value + ',' + index;
if (as !== 'as') {
object = '[]';
}
code = '$each(' + object + ',function(' + param + '){';
break;
case '/each':
code = '});';
break;
case 'echo':
code = 'print(' + args + ');';
break;
case 'print':
case 'include':
code = key + '(' + split.join(',') + ');';
break;
default:
// 过滤器(辅助方法)
// {{value | filterA:'abcd' | filterB}}
// >>> $helpers.filterB($helpers.filterA(value, 'abcd'))
// TODO: {{ddd||aaa}} 不包含空格
if (/^\s*\|\s*[\w\$]/.test(args)) {
var escape = true;
// {{#value | link}}
if (code.indexOf('#') === 0) {
code = code.substr(1);
escape = false;
}
var i = 0;
var array = code.split('|');
var len = array.length;
var val = array[i++];
for (; i < len; i ++) {
val = filtered(val, array[i]);
}
code = (escape ? '=' : '=#') + val;
// 即将弃用 {{helperName value}}
} else if (template.helpers[key]) {
code = '=#' + key + '(' + split.join(',') + ');';
// 内容直接输出 {{value}}
} else {
code = '=' + code;
}
break;
}
return code;
};
// CommonJs
if (typeof exports === 'object' && typeof module !== 'undefined') {
module.exports = template;
// RequireJS && SeaJS
} else if (typeof define === 'function') {
define(function() {
return template;
});
} else {
this.template = template;
}
})();

View File

@ -0,0 +1,602 @@
/*!
* artTemplate - Template Engine
* https://github.com/aui/artTemplate
* Released under the MIT, BSD, and GPL Licenses
*/
!(function () {
/**
* 模板引擎
* @name template
* @param {String} 模板名
* @param {Object, String} 数据如果为字符串则编译并缓存编译结果
* @return {String, Function} 渲染好的HTML字符串或者渲染方法
*/
var template = function (filename, content) {
return typeof content === 'string'
? compile(content, {
filename: filename
})
: renderFile(filename, content);
};
template.version = '3.0.0';
/**
* 设置全局配置
* @name template.config
* @param {String} 名称
* @param {Any}
*/
template.config = function (name, value) {
defaults[name] = value;
};
var defaults = template.defaults = {
openTag: '<%', // 逻辑语法开始标签
closeTag: '%>', // 逻辑语法结束标签
escape: true, // 是否编码输出变量的 HTML 字符
cache: true, // 是否开启缓存(依赖 options 的 filename 字段)
compress: false, // 是否压缩输出
parser: null // 自定义语法格式器 @see: template-syntax.js
};
var cacheStore = template.cache = {};
/**
* 渲染模板
* @name template.render
* @param {String} 模板
* @param {Object} 数据
* @return {String} 渲染好的字符串
*/
template.render = function (source, options) {
return compile(source)(options);
};
/**
* 渲染模板(根据模板名)
* @name template.render
* @param {String} 模板名
* @param {Object} 数据
* @return {String} 渲染好的字符串
*/
var renderFile = template.renderFile = function (filename, data) {
var fn = template.get(filename) || showDebugInfo({
filename: filename,
name: 'Render Error',
message: 'Template not found'
});
return data ? fn(data) : fn;
};
/**
* 获取编译缓存可由外部重写此方法
* @param {String} 模板名
* @param {Function} 编译好的函数
*/
template.get = function (filename) {
var cache;
if (cacheStore[filename]) {
// 使用内存缓存
cache = cacheStore[filename];
} else if (typeof document === 'object') {
// 加载模板并编译
var elem = document.getElementById(filename);
if (elem) {
var source = (elem.value || elem.innerHTML)
.replace(/^\s*|\s*$/g, '');
cache = compile(source, {
filename: filename
});
}
}
return cache;
};
var toString = function (value, type) {
if (typeof value !== 'string') {
type = typeof value;
if (type === 'number') {
value += '';
} else if (type === 'function') {
value = toString(value.call(value));
} else {
value = '';
}
}
return value;
};
var escapeMap = {
"<": "&#60;",
">": "&#62;",
'"': "&#34;",
"'": "&#39;",
"&": "&#38;"
};
var escapeFn = function (s) {
return escapeMap[s];
};
var escapeHTML = function (content) {
return toString(content)
.replace(/&(?![\w#]+;)|[<>"']/g, escapeFn);
};
var isArray = Array.isArray || function (obj) {
return ({}).toString.call(obj) === '[object Array]';
};
var each = function (data, callback) {
var i, len;
if (isArray(data)) {
for (i = 0, len = data.length; i < len; i++) {
callback.call(data, data[i], i, data);
}
} else {
for (i in data) {
callback.call(data, data[i], i);
}
}
};
var utils = template.utils = {
$helpers: {},
$include: renderFile,
$string: toString,
$escape: escapeHTML,
$each: each
};/**
* 添加模板辅助方法
* @name template.helper
* @param {String} 名称
* @param {Function} 方法
*/
template.helper = function (name, helper) {
helpers[name] = helper;
};
var helpers = template.helpers = utils.$helpers;
/**
* 模板错误事件可由外部重写此方法
* @name template.onerror
* @event
*/
template.onerror = function (e) {
var message = 'Template Error\n\n';
for (var name in e) {
message += '<' + name + '>\n' + e[name] + '\n\n';
}
if (typeof console === 'object') {
console.error(message);
}
};
// 模板调试器
var showDebugInfo = function (e) {
template.onerror(e);
return function () {
return '{Template Error}';
};
};
/**
* 编译模板
* 2012-6-6 @TooBug: define 方法名改为 compile Node Express 保持一致
* @name template.compile
* @param {String} 模板字符串
* @param {Object} 编译选项
*
* - openTag {String}
* - closeTag {String}
* - filename {String}
* - escape {Boolean}
* - compress {Boolean}
* - debug {Boolean}
* - cache {Boolean}
* - parser {Function}
*
* @return {Function} 渲染方法
*/
var compile = template.compile = function (source, options) {
// 合并默认配置
options = options || {};
for (var name in defaults) {
if (options[name] === undefined) {
options[name] = defaults[name];
}
}
var filename = options.filename;
try {
var Render = compiler(source, options);
} catch (e) {
e.filename = filename || 'anonymous';
e.name = 'Syntax Error';
return showDebugInfo(e);
}
// 对编译结果进行一次包装
function render (data) {
try {
return new Render(data, filename) + '';
} catch (e) {
// 运行时出错后自动开启调试模式重新编译
if (!options.debug) {
options.debug = true;
return compile(source, options)(data);
}
return showDebugInfo(e)();
}
}
render.prototype = Render.prototype;
render.toString = function () {
return Render.toString();
};
if (filename && options.cache) {
cacheStore[filename] = render;
}
return render;
};
// 数组迭代
var forEach = utils.$each;
// 静态分析模板变量
var KEYWORDS =
// 关键字
'break,case,catch,continue,debugger,default,delete,do,else,false'
+ ',finally,for,function,if,in,instanceof,new,null,return,switch,this'
+ ',throw,true,try,typeof,var,void,while,with'
// 保留字
+ ',abstract,boolean,byte,char,class,const,double,enum,export,extends'
+ ',final,float,goto,implements,import,int,interface,long,native'
+ ',package,private,protected,public,short,static,super,synchronized'
+ ',throws,transient,volatile'
// ECMA 5 - use strict
+ ',arguments,let,yield'
+ ',undefined';
var REMOVE_RE = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g;
var SPLIT_RE = /[^\w$]+/g;
var KEYWORDS_RE = new RegExp(["\\b" + KEYWORDS.replace(/,/g, '\\b|\\b') + "\\b"].join('|'), 'g');
var NUMBER_RE = /^\d[^,]*|,\d[^,]*/g;
var BOUNDARY_RE = /^,+|,+$/g;
var SPLIT2_RE = /^$|,+/;
// 获取变量
function getVariable (code) {
return code
.replace(REMOVE_RE, '')
.replace(SPLIT_RE, ',')
.replace(KEYWORDS_RE, '')
.replace(NUMBER_RE, '')
.replace(BOUNDARY_RE, '')
.split(SPLIT2_RE);
};
// 字符串转义
function stringify (code) {
return "'" + code
// 单引号与反斜杠转义
.replace(/('|\\)/g, '\\$1')
// 换行符转义(windows + linux)
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n') + "'";
}
function compiler (source, options) {
var debug = options.debug;
var openTag = options.openTag;
var closeTag = options.closeTag;
var parser = options.parser;
var compress = options.compress;
var escape = options.escape;
var line = 1;
var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1};
var isNewEngine = ''.trim;// '__proto__' in {}
var replaces = isNewEngine
? ["$out='';", "$out+=", ";", "$out"]
: ["$out=[];", "$out.push(", ");", "$out.join('')"];
var concat = isNewEngine
? "$out+=text;return $out;"
: "$out.push(text);";
var print = "function(){"
+ "var text=''.concat.apply('',arguments);"
+ concat
+ "}";
var include = "function(filename,data){"
+ "data=data||$data;"
+ "var text=$utils.$include(filename,data,$filename);"
+ concat
+ "}";
var headerCode = "'use strict';"
+ "var $utils=this,$helpers=$utils.$helpers,"
+ (debug ? "$line=0," : "");
var mainCode = replaces[0];
var footerCode = "return new String(" + replaces[3] + ");"
// html与逻辑语法分离
forEach(source.split(openTag), function (code) {
code = code.split(closeTag);
var $0 = code[0];
var $1 = code[1];
// code: [html]
if (code.length === 1) {
mainCode += html($0);
// code: [logic, html]
} else {
mainCode += logic($0);
if ($1) {
mainCode += html($1);
}
}
});
var code = headerCode + mainCode + footerCode;
// 调试语句
if (debug) {
code = "try{" + code + "}catch(e){"
+ "throw {"
+ "filename:$filename,"
+ "name:'Render Error',"
+ "message:e.message,"
+ "line:$line,"
+ "source:" + stringify(source)
+ ".split(/\\n/)[$line-1].replace(/^\\s+/,'')"
+ "};"
+ "}";
}
try {
var Render = new Function("$data", "$filename", code);
Render.prototype = utils;
return Render;
} catch (e) {
e.temp = "function anonymous($data,$filename) {" + code + "}";
throw e;
}
// 处理 HTML 语句
function html (code) {
// 记录行号
line += code.split(/\n/).length - 1;
// 压缩多余空白与注释
if (compress) {
code = code
.replace(/\s+/g, ' ')
.replace(/<!--[\w\W]*?-->/g, '');
}
if (code) {
code = replaces[1] + stringify(code) + replaces[2] + "\n";
}
return code;
}
// 处理逻辑语句
function logic (code) {
var thisLine = line;
if (parser) {
// 语法转换插件钩子
code = parser(code, options);
} else if (debug) {
// 记录行号
code = code.replace(/\n/g, function () {
line ++;
return "$line=" + line + ";";
});
}
// 输出语句. 编码: <%=value%> 不编码:<%=#value%>
// <%=#value%> 等同 v2.0.3 之前的 <%==value%>
if (code.indexOf('=') === 0) {
var escapeSyntax = escape && !/^=[=#]/.test(code);
code = code.replace(/^=[=#]?|[\s;]*$/g, '');
// 对内容编码
if (escapeSyntax) {
var name = code.replace(/\s*\([^\)]+\)/, '');
// 排除 utils.* | include | print
if (!utils[name] && !/^(include|print)$/.test(name)) {
code = "$escape(" + code + ")";
}
// 不编码
} else {
code = "$string(" + code + ")";
}
code = replaces[1] + code + replaces[2];
}
if (debug) {
code = "$line=" + thisLine + ";" + code;
}
// 提取模板中的变量名
forEach(getVariable(code), function (name) {
// name 值可能为空,在安卓低版本浏览器下
if (!name || uniq[name]) {
return;
}
var value;
// 声明模板变量
// 赋值优先级:
// [include, print] > utils > helpers > data
if (name === 'print') {
value = print;
} else if (name === 'include') {
value = include;
} else if (utils[name]) {
value = "$utils." + name;
} else if (helpers[name]) {
value = "$helpers." + name;
} else {
value = "$data." + name;
}
headerCode += name + "=" + value + ",";
uniq[name] = true;
});
return code + "\n";
}
};
// CommonJs
if (typeof exports === 'object' && typeof module !== 'undefined') {
module.exports = template;
// RequireJS && SeaJS
} else if (typeof define === 'function') {
define(function() {
return template;
});
} else {
this.template = template;
}
})();

View File

@ -0,0 +1,2 @@
/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(a){throw a.temp="function anonymous($data,$filename) {"+z+"}",a}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a)(b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;c<d;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(a){return a.filename=h||"anonymous",a.name="Syntax Error",p(a)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;"object"==typeof exports&&"undefined"!=typeof module?module.exports=d:"function"==typeof define?define(function(){return d}):this.template=d}();

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,73 @@
# artTemplate 原生 js 模板语法版
## 使用
在页面中引用模板引擎:
<script src="dist/template-native.js"></script>
[下载](https://raw.github.com/aui/artTemplate/master/dist/template-native.js)
## 表达式
``<%`` 与 ``%>`` 符号包裹起来的语句则为模板的逻辑表达式。
### 输出表达式
对内容编码输出:
<%=content%>
不编码输出:
<%=#content%>
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。
### 逻辑
支持使用 js 原生语法
<h1><%=title%></h1>
<ul>
<%for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> <%=list[i]%></li>
<%}%>
</ul>
> 模板不能访问全局对象,公用的方法请参见文档[辅助方法](#辅助方法)章节
### 模板包含表达式
用于嵌入子模板。
<% include('template_name') %>
子模板默认共享当前数据,亦可以指定数据:
<% include('template_name', news_list) %>
## 辅助方法
使用``template.helper(name, callback)``注册公用辅助方法:
template.helper('dateFormat', function (date, format) {
// ..
return value;
});
模板中使用的方式:
<%=dateFormat(content) %>
## 演示例子
* [基本例子](http://aui.github.io/artTemplate/demo/template-native/basic.html)
* [不转义HTML](http://aui.github.io/artTemplate/demo/template-native/no-escape.html)
* [在javascript中存放模板](http://aui.github.io/artTemplate/demo/template-native/compile.html)
* [嵌入子模板(include)](http://aui.github.io/artTemplate/demo/template-native/include.html)
* [访问外部公用函数(辅助方法)](http://aui.github.io/artTemplate/demo/template-native/helper.html)
----------------------------------------------
本文档针对 artTemplate v3.0.0 编写

View File

@ -0,0 +1,90 @@
# artTemplate 简洁语法版
## 使用
引用简洁语法的引擎版本,例如:
<script src="dist/template.js"></script>
[下载](https://raw.github.com/aui/artTemplate/master/dist/template.js)
## 表达式
``{{`` 与 ``}}`` 符号包裹起来的语句则为模板的逻辑表达式。
### 输出表达式
对内容编码输出:
{{content}}
不编码输出:
{{#content}}
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。
### 条件表达式
{{if admin}}
<p>admin</p>
{{else if code > 0}}
<p>master</p>
{{else}}
<p>error!</p>
{{/if}}
### 遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{{each list as value index}}
<li>{{index}} - {{value.user}}</li>
{{/each}}
亦可以被简写:
{{each list}}
<li>{{$index}} - {{$value.user}}</li>
{{/each}}
### 模板包含表达式
用于嵌入子模板。
{{include 'template_name'}}
子模板默认共享当前数据,亦可以指定数据:
{{include 'template_name' news_list}}
## 辅助方法
使用``template.helper(name, callback)``注册公用辅助方法:
```
template.helper('dateFormat', function (date, format) {
// ..
return value;
});
```
模板中使用的方式:
{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}
支持传入参数与嵌套使用:
{{time | say:'cd' | ubb | link}}
## 演示例子
* [基本例子](http://aui.github.io/artTemplate/demo/basic.html)
* [不转义HTML](http://aui.github.io/artTemplate/demo/no-escape.html)
* [在javascript中存放模板](http://aui.github.io/artTemplate/demo/compile.html)
* [嵌入子模板(include)](http://aui.github.io/artTemplate/demo/include.html)
* [访问外部公用函数(辅助方法)](http://aui.github.io/artTemplate/demo/helper.html)
----------------------------------------------
本文档针对 artTemplate v3.0.0+ 编写

View File

@ -0,0 +1,18 @@
var template = require('art-template/dist/template');
module.exports = function(source) {
this.cacheable && this.cacheable()
var ANONYMOUS_RE = /^function\s+anonymous/
template.onerror = function(e) {
var message = 'Template Error\n\n';
for (var name in e) {
message += '<' + name + '>\n' + e[name] + '\n\n';
}
throw new SyntaxError(message)
}
var render = template.compile(source, {}).toString().replace(ANONYMOUS_RE, 'function');
return 'module.exports = require("art-template/loader/runtime")(' + render + ');';
}

View File

@ -0,0 +1,14 @@
{
"name": "t-loader",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"art-template": "^3.1.3"
}
}

View File

@ -0,0 +1,129 @@
function template(content) {
return compile(content);
};
var String = this.String;
function toString(value, type) {
if (typeof value !== 'string') {
type = typeof value;
if (type === 'number') {
value += '';
} else if (type === 'function') {
value = toString(value.call(value));
} else {
value = '';
}
}
return value;
};
var escapeMap = {
"<": "&#60;",
">": "&#62;",
'"': "&#34;",
"'": "&#39;",
"&": "&#38;"
};
function escapeFn(s) {
return escapeMap[s];
}
function escapeHTML(content) {
return toString(content)
.replace(/&(?![\w#]+;)|[<>"']/g, escapeFn);
};
var isArray = Array.isArray || function (obj) {
return ({}).toString.call(obj) === '[object Array]';
};
function each(data, callback) {
if (isArray(data)) {
for (var i = 0, len = data.length; i < len; i++) {
callback.call(data, data[i], i, data);
}
} else {
for (i in data) {
callback.call(data, data[i], i);
}
}
};
var utils = template.utils = {
$helpers: {},
$include: function () {
throw new Error('art-template/loader: not support `include`.');
},
$string: toString,
$escape: escapeHTML,
$each: each
};
var helpers = template.helpers = utils.$helpers;
function compile(fn) {
var render = function (data) {
try {
return new fn(data) + '';
} catch (e) {
return showDebugInfo(e)();
}
};
render.prototype = fn.prototype = utils;
render.toString = function () {
return fn + '';
};
return render;
};
function showDebugInfo(e) {
var type = "{Template Error}";
var message = e.stack || '';
if (message) {
// 利用报错堆栈信息
message = message.split('\n').slice(0, 2).join('\n');
} else {
// 调试版本,直接给出模板语句行
for (var name in e) {
message += "<" + name + ">\n" + e[name] + "\n\n";
}
}
return function () {
if (typeof console === "object") {
console.error(type + "\n\n" + message);
}
return type;
};
};
template.helper = function (name, helper) {
helpers[name] = helper;
};
module.exports = template;

View File

@ -0,0 +1,90 @@
var fs = require('fs');
var path = require('path');
module.exports = function (template) {
var cacheStore = template.cache;
var defaults = template.defaults;
var rExtname;
// 提供新的配置字段
defaults.base = '';
defaults.extname = '.html';
defaults.encoding = 'utf-8';
function compileFromFS(filename) {
// 加载模板并编译
var source = readTemplate(filename);
if (typeof source === 'string') {
return template.compile(source, {
filename: filename
});
}
}
// 重写引擎编译结果获取方法
template.get = function (filename) {
var fn;
if (cacheStore.hasOwnProperty(filename)) {
// 使用内存缓存
fn = cacheStore[filename];
} else {
fn = compileFromFS(filename);
}
return fn;
};
function readTemplate (id) {
id = path.join(defaults.base, id + defaults.extname);
if (id.indexOf(defaults.base) !== 0) {
// 安全限制:禁止超出模板目录之外调用文件
throw new Error('"' + id + '" is not in the template directory');
} else {
try {
return fs.readFileSync(id, defaults.encoding);
} catch (e) {}
}
}
// 重写模板`include``语句实现方法,转换模板为绝对路径
template.utils.$include = function (filename, data, from) {
from = path.dirname(from);
filename = path.join(from, filename);
return template.renderFile(filename, data);
}
// express support
template.__express = function (file, options, fn) {
if (typeof options === 'function') {
fn = options;
options = {};
}
if (!rExtname) {
// 去掉 express 传入的路径
rExtname = new RegExp((defaults.extname + '$').replace(/\./g, '\\.'));
}
file = file.replace(rExtname, '');
options.filename = file;
fn(null, template.renderFile(file, options));
};
return template;
}

Some files were not shown because too many files have changed in this diff Show More