px-sortable.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="sortable-import.html">

<!--
The `px-sortable` element is a wrapper around the [Sortable.js](https://github.com/RubaXa/Sortable) library.


### Usage

```
<div class="flex">
  <div class="flex__item u-m">
    <px-table-view id="table-view-demo-43a" modifier="inset">
      <px-sortable id="table-view-demo-43a-sort" content group="grouped">
        <px-table-row title="Item 1"></px-table-row>
        <px-table-row title="Item 2"></px-table-row>
        <px-table-row title="Item 3"></px-table-row>
      </px-sortable>
    </px-table-view>
  </div>
  <div class="flex__item u-m">
    <px-table-view id="table-view-demo-43b" modifier="inset">
      <px-sortable id="table-view-demo-43b-sort" content group="grouped">
        <px-table-row title="Item 4"></px-table-row>
        <px-table-row title="Item 5"></px-table-row>
        <px-table-row title="Item 6"></px-table-row>
      </px-sortable>
    </px-table-view>
  </div>
</div>
```

### Styling

Custom property | Description | Default
------------ | ------------- | ------------
`--px-sortable` | Style mixin to be applied to the element | {}
`--px-sortable-ghost` | Style mixin to be applied to the ghost element | {}
`--px-sortable-chosen` | Style mixin to be applied to the chosen element | {}


-->
<dom-module id="px-sortable">
	<style>
		:host {
			display: block;
			@apply(--px-sortable);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-webkit-tap-highlight-color: red;
		}
		:host .sortable-ghost, :host ::content .sortable-ghost {
			@apply(--px-sortable-ghost);
		}
		:host .sortable-chosen, :host ::content .sortable-chosen {
			@apply(--px-sortable-chosen);
		}
	</style>
	<template>
		<content></content>
	</template>
	<script>
	Polymer({
		is: 'px-sortable',
		properties: {
			/**
			 * A named group to allow drag and drop between multiple elements.
			 * @attribute group
			 * @default null
			 * @type String
			 */
			group: {
				type: String,
				value: null
			},
			sort: {
				type: Boolean,
				value: true
			},
			/**
			 * When present, disables sorting.
			 * @attribute disabled
			 * @default false
			 * @type Boolean
			 */
			disabled: {
				type: Boolean,
				value: false
			},
			store: {
				type: Object,
				value: null
			},
			/**
			 * Length of sorting animation (`0` for no animation).
			 * @attribute animation
			 * @default 0
			 * @type Integer
			 */
			animation: {
				type: Number,
				value: 0
			},
			/**
			 * CSS selector for a handle inside the sortable item (if any).
			 * @attribute handle
			 * @default null
			 * @type String
			 */
			handle: {
				type: String,
				value: null
			},
			/**
			 * CSS selector for elements to ignore for sorting purposes.
			 * @attribute filter
			 * @default null
			 * @type String
			 */
			filter: {
				type: String,
				value: null
			},
			/**
			 * CSS selector for which child elements should be sortable.
			 * @attribute sortable
			 * @default >*
			 * @type String
			 */
			sortable: {
				type: String,
				value: '>*'
			},
			/**
			 * Name of the class to apply to the ghost during drag.
			 * @attribute ghostClass
			 * @default sortable-ghost
			 * @type String
			 */
			ghostClass: {
				type: String,
				value: 'sortable-ghost'
			},
			/**
			 * Whether or not to scroll when dragging to edges.
			 * @attribute scroll
			 * @default true
			 * @type Boolean
			 */
			scroll: {
				type: Boolean,
				value: true
			},
			/**
			 * Sensitivity of scroll boundary detection.
			 * @attribute scrollSensitivity
			 * @default 30
			 * @type Integer
			 */
			scrollSensitivity: {
				type: Number,
				value: 30
			},
			/**
			 * Scrolling speed.
			 * @attribute scrollSpeed
			 * @default 10
			 * @type Integer
			 */
			scrollSpeed: {
				type: Number,
				value: 10
			}
		},
		observers: [
			'_reactivate(group, sort, disabled, store, animation, handle, filter, sortable, ghostClass, scroll, scrollSensitivity, scrollSpeed)'
		],
		attached: function() {
			this._reactivate();
		},
		/**
		 * Manually destroy and recreate scrollable.
		 * @method _reactivate
		 */
		_reactivate: function() {
			if (this._sortable) {
				this._sortable.destroy();
			}
			this._sortable = Sortable.create(this, this.generateOptions());
		},
		generateOptions: function() {
			return {
				group: this.group || Math.random(),
				sort: this.sort,
				disabled: this.disabled,
				animation: this.animation,
				handle: this.handle,
				filter: this.filter,
				draggable: this.sortable,
				ghostClass: this.ghostClass,
				scroll: this.scroll,
				scrollSensitivity: this.scrollSensitivity,
				scrollSpeed: this.scrollSpeed,
				/**
				 * Triggered when a sort begins.
				 * @event sort-start
				 */
				onStart: function(evt) {
					this.fire('sort-start', evt);
					evt.stopPropagation();
				}.bind(this),
				/**
				 * Triggered when a sort ends.
				 * @event sort-end
				 */
				onEnd: function(evt) {
					this.fire('sort-end', evt);
					evt.stopPropagation();
				}.bind(this),
				/**
				 * Triggered when a new element is added to the list via sort drag.
				 * @event sort-add
				 */
				onAdd: function(evt) {
					this.fire('sort-add', evt);
					evt.stopPropagation();
				}.bind(this),
				/**
				 * Triggered when the sort order has been modified.
				 * @event sort-update
				 */
				onUpdate: function(evt) {
					this.fire('sort-update', evt);
					evt.stopPropagation();
				}.bind(this),
				/**
				 * Triggered on add, remove, or update.
				 * @event sort-change
				 */
				onSort: function(evt) {
					this.fire('sort-change', evt);
					evt.stopPropagation();
				}.bind(this),
				/**
				 * Triggered when an element was removed by sort drag.
				 * @event sort-remove
				 */
				onRemove: function(evt) {
					this.fire('sort-remove', evt);
					evt.stopPropagation();
				}.bind(this),
				onFilter: function(evt) {
					this.fire('sort-filter', evt);
					evt.stopPropagation();
				}.bind(this)
			};
		}
	});
	</script>
</dom-module>