Apply prettier formatting

Author: jvanbruegge

src/definitions.ts

@@ -1,8 +1,12 @@
 import { Stream } from 'xstream';
 import { VNode } from '@cycle/dom';
 
-export type Transform<T, U> = (s : Stream<T>) => Stream<U>
-export type EventHandler = (node : VNode, event : MouseEvent, options : SortableOptions) => VNode;
+export type Transform<T, U> = (s: Stream<T>) => Stream<U>;
+export type EventHandler = (
+    node: VNode,
+    event: MouseEvent,
+    options: SortableOptions
+) => VNode;
 
 export interface SortableOptions {
     /**
@@ -12,57 +16,53 @@ export interface SortableOptions {
      * @default the root VNode of the given DOMSource
      * @type {string}
      */
-    parentSelector? : string;
+    parentSelector?: string;
 
     /**
      * Optional, has to be a valid CSS selector.
      * Used to define a drag handle on the sortable items
      * @default string the whole item
      * @type {string}
      */
-    handle? : string;
+    handle?: string;
 
     /**
      * Optional, has to be a CSS class name
      * Can be used to style the ghost item
      * @default the first CSS class of the first item
      * @type {string}
      */
-    ghostClass? : string;
+    ghostClass?: string;
 }
 
 /**
  * Contains the offset from the cursor to the top left of the item
  * x and y are negative or zero, so you have to add them to the current mouse position
  * @type {MouseOffset}
  */
-export interface MouseOffset
-{
-    x : number;
-    y : number;
+export interface MouseOffset {
+    x: number;
+    y: number;
 }
 
 /**
  * Defines the object available on a custom updateOrder event
  * @type {EventDetails}
  */
-export interface EventDetails
-{
-    newOrder : number[];
-    oldIndex : number;
-    newIndex : number;
+export interface EventDetails {
+    newOrder: number[];
+    oldIndex: number;
+    newIndex: number;
 }
 
-export interface ItemDimensions
-{
-    width : number;
-    height : number;
+export interface ItemDimensions {
+    width: number;
+    height: number;
 }
 
-export interface Intersection
-{
-    xmin : number;
-    ymin : number;
-    xmax : number;
-    ymax : number;
+export interface Intersection {
+    xmin: number;
+    ymin: number;
+    xmax: number;
+    ymax: number;
 }

src/eventHandlers.ts

@@ -12,16 +12,19 @@ import { mousemoveHandler } from './eventHandlers/mousemove';
  * @param {SortableOptions} options a valid SortableOptions object, it and its properties have to be defined
  * @return {VNode} The new root VNode
  */
-export function handleEvent(node : VNode, event : MouseEvent, options : SortableOptions) : VNode
-{
-    const eventHandlerMapping : { [type : string]: EventHandler } = {
-        'mousedown': mousedownHandler,
-        'mouseup': mouseupHandler,
-        'mouseleave': mouseupHandler,
-        'mousemove': mousemoveHandler,
-        'touchstart': mousedownHandler,
-        'touchend': mouseupHandler,
-        'touchmove': mousemoveHandler
+export function handleEvent(
+    node: VNode,
+    event: MouseEvent,
+    options: SortableOptions
+): VNode {
+    const eventHandlerMapping: { [type: string]: EventHandler } = {
+        mousedown: mousedownHandler,
+        mouseup: mouseupHandler,
+        mouseleave: mouseupHandler,
+        mousemove: mousemoveHandler,
+        touchstart: mousedownHandler,
+        touchend: mouseupHandler,
+        touchmove: mousemoveHandler
     };
 
     return eventHandlerMapping[event.type](node, event, options);

src/eventHandlers/mousedown.ts

@@ -2,42 +2,56 @@ import { VNode } from '@cycle/dom';
 import { select } from 'snabbdom-selector';
 import { EventHandler, MouseOffset } from '../definitions';
 
-import { getIndex, getGhostStyle, findParent, addAttributes, replaceNode, getBodyStyle, addKeys } from '../helpers';
+import {
+    getIndex,
+    getGhostStyle,
+    findParent,
+    addAttributes,
+    replaceNode,
+    getBodyStyle,
+    addKeys
+} from '../helpers';
 
 /**
  * Used to create the ghost and hide the item dragged
  * @type {EventHandler}
  */
-export const mousedownHandler : EventHandler = (node, event, options) => {
-    const item : Element = findParent(event.target as Element, options.parentSelector + ' > *');
-    const itemRect : ClientRect = item.getBoundingClientRect();
-    const mouseOffset : MouseOffset = {
+export const mousedownHandler: EventHandler = (node, event, options) => {
+    const item: Element = findParent(
+        event.target as Element,
+        options.parentSelector + ' > *'
+    );
+    const itemRect: ClientRect = item.getBoundingClientRect();
+    const mouseOffset: MouseOffset = {
         x: itemRect.left - event.clientX,
         y: itemRect.top - event.clientY
     };
 
-    const body : Element = findParent(event.target as Element, 'body');
+    const body: Element = findParent(event.target as Element, 'body');
     body.setAttribute('style', getBodyStyle());
 
-    const parent : VNode = addKeys(select(options.parentSelector, node)[0]);
-    const index : number = getIndex(item);
+    const parent: VNode = addKeys(select(options.parentSelector, node)[0]);
+    const index: number = getIndex(item);
 
-    const ghostAttrs : { [name : string]: string } = {
+    const ghostAttrs: { [name: string]: string } = {
         'data-mouseoffset': JSON.stringify(mouseOffset),
-        'data-itemdimensions': JSON.stringify({ width: itemRect.width, height: itemRect.height }),
+        'data-itemdimensions': JSON.stringify({
+            width: itemRect.width,
+            height: itemRect.height
+        }),
         'data-itemindex': index.toString(),
         'data-originalIndex': index.toString(),
-        'style': getGhostStyle(event, mouseOffset, item)
+        style: getGhostStyle(event, mouseOffset, item)
     };
 
-    const items : VNode[] = parent.children as VNode[];
+    const items: VNode[] = parent.children as VNode[];
 
-    const children : VNode[] = [
+    const children: VNode[] = [
         ...items.slice(0, index),
-        addAttributes(items[index], { 'style': 'opacity: 0;' }),
+        addAttributes(items[index], { style: 'opacity: 0;' }),
         ...items.slice(index + 1),
-            addAttributes({ ...items[index], elm: undefined }, ghostAttrs)
-    ].map((c, i) => addAttributes(c, { 'data-index' : i }));
+        addAttributes({ ...items[index], elm: undefined }, ghostAttrs)
+    ].map((c, i) => addAttributes(c, { 'data-index': i }));
 
     return replaceNode(node, options.parentSelector, { ...parent, children });
 };

src/eventHandlers/mousemove.ts

@@ -1,54 +1,82 @@
 import { VNode } from '@cycle/dom';
 import { select } from 'snabbdom-selector';
-import { EventHandler, MouseOffset, ItemDimensions, Intersection } from '../definitions';
+import {
+    EventHandler,
+    MouseOffset,
+    ItemDimensions,
+    Intersection
+} from '../definitions';
 
-import { updateGhostStyle, findParent, getIntersection, getArea, addAttributes, replaceNode } from '../helpers';
+import {
+    updateGhostStyle,
+    findParent,
+    getIntersection,
+    getArea,
+    addAttributes,
+    replaceNode
+} from '../helpers';
 
 /**
  * Used to adjust the position of the ghost and swap the items if needed
  * @type {EventHandler}
  */
-export const mousemoveHandler : EventHandler = (node, event, options) => {
-    const parent : VNode = select(options.parentSelector, node)[0];
-    const ghost : VNode = parent.children[parent.children.length - 1] as VNode;
+export const mousemoveHandler: EventHandler = (node, event, options) => {
+    const parent: VNode = select(options.parentSelector, node)[0];
+    const ghost: VNode = parent.children[parent.children.length - 1] as VNode;
 
-    const mouseOffset : MouseOffset = JSON.parse(ghost.data.attrs['data-mouseoffset']);
-    const itemIndex : number = parseInt(ghost.data.attrs['data-itemindex']);
-    const item : VNode = parent.children[itemIndex] as VNode;
-    const itemIntersection : number = getArea(getIntersection(item.elm as Element, ghost.elm as Element));
-    const itemArea : number = getArea(getIntersection(item.elm as Element, item.elm as Element));
+    const mouseOffset: MouseOffset = JSON.parse(
+        ghost.data.attrs['data-mouseoffset']
+    );
+    const itemIndex: number = parseInt(ghost.data.attrs['data-itemindex']);
+    const item: VNode = parent.children[itemIndex] as VNode;
+    const itemIntersection: number = getArea(
+        getIntersection(item.elm as Element, ghost.elm as Element)
+    );
+    const itemArea: number = getArea(
+        getIntersection(item.elm as Element, item.elm as Element)
+    );
 
-    const intersectionAreas : [number, number][] = parent.children
+    const intersectionAreas: [number, number][] = parent.children
         .slice(0, -1)
         .map<Element>(c => (c as VNode).elm as Element)
         .map<Intersection>(e => getIntersection(e, ghost.elm as Element))
         .map<[number, number]>((e, i) => [getArea(e), i]);
 
-    const maxIntersection : [number, number] = intersectionAreas
-        .reduce((acc, curr) => curr[0] > acc[0] ? curr : acc);
+    const maxIntersection: [number, number] = intersectionAreas.reduce(
+        (acc, curr) => (curr[0] > acc[0] ? curr : acc)
+    );
 
-    const maxElement : Element = (parent.children[maxIntersection[1]] as VNode).elm as Element;
-    const maxArea : number = getArea(getIntersection(maxElement, maxElement));
+    const maxElement: Element = (parent.children[maxIntersection[1]] as VNode)
+        .elm as Element;
+    const maxArea: number = getArea(getIntersection(maxElement, maxElement));
 
-    const newIndex : number = maxIntersection[1] === itemIndex ? itemIndex :
-        (-itemIntersection > maxArea - itemArea ? maxIntersection[1] : itemIndex);
+    const newIndex: number =
+        maxIntersection[1] === itemIndex
+            ? itemIndex
+            : -itemIntersection > maxArea - itemArea
+              ? maxIntersection[1]
+              : itemIndex;
 
-    const ghostAttrs : { [attr : string]: string } = {
-        'style': updateGhostStyle(event, mouseOffset, ghost.elm as Element),
+    const ghostAttrs: { [attr: string]: string } = {
+        style: updateGhostStyle(event, mouseOffset, ghost.elm as Element),
         'data-itemindex': newIndex.toString()
     };
 
-    const filteredChildren : VNode[] = (parent.children as VNode[])
+    const filteredChildren: VNode[] = (parent.children as VNode[])
         .filter((e, i) => i !== itemIndex)
         .slice(0, -1);
 
-    const newChildren : VNode[] = [
+    const newChildren: VNode[] = [
         ...filteredChildren.slice(0, newIndex),
         parent.children[itemIndex] as VNode,
         ...filteredChildren.slice(newIndex, filteredChildren.length)
     ];
 
-    return replaceNode(node, options.parentSelector, Object.assign({}, parent, {
-        children: [...newChildren, addAttributes(ghost, ghostAttrs)]
-    }));
+    return replaceNode(
+        node,
+        options.parentSelector,
+        Object.assign({}, parent, {
+            children: [...newChildren, addAttributes(ghost, ghostAttrs)]
+        })
+    );
 };

src/eventHandlers/mouseup.ts

@@ -8,36 +8,38 @@ import { replaceNode, removeAttribute, findParent } from '../helpers';
  * Used to remove the ghost element
  * @type {EventHandler}
  */
-export const mouseupHandler : EventHandler = (node, event, options) => {
-    const parent : VNode = select(options.parentSelector, node)[0];
-    const items : VNode[] = parent.children as VNode[];
+export const mouseupHandler: EventHandler = (node, event, options) => {
+    const parent: VNode = select(options.parentSelector, node)[0];
+    const items: VNode[] = parent.children as VNode[];
 
-    const ghost : VNode = items[items.length - 1];
+    const ghost: VNode = items[items.length - 1];
 
-    if (!parent || !ghost) { return node; }
+    if (!parent || !ghost) {
+        return node;
+    }
 
-    const itemIndex : number = parseInt(ghost.data.attrs['data-itemindex']);
+    const itemIndex: number = parseInt(ghost.data.attrs['data-itemindex']);
 
-    const body : Element = findParent(event.target as Element, 'body');
+    const body: Element = findParent(event.target as Element, 'body');
     body.removeAttribute('style');
 
-    const newItems : VNode[] = [
+    const newItems: VNode[] = [
         ...items.slice(0, itemIndex),
         removeAttribute(items[itemIndex], 'style'),
         ...items.slice(itemIndex + 1, -1)
     ];
 
-    const indexes : number[] = newItems
+    const indexes: number[] = newItems
         .map(c => c.data.attrs['data-index'])
         .map(s => parseInt(s));
 
-    const tuple : [number, number] = [
+    const tuple: [number, number] = [
         parseInt(ghost.data.attrs['data-originalIndex']),
         parseInt(ghost.data.attrs['data-itemindex'])
     ];
 
     if (tuple[0] !== tuple[1]) {
-        const customEvent : CustomEvent = new CustomEvent('updateOrder', {
+        const customEvent: CustomEvent = new CustomEvent('updateOrder', {
             bubbles: true,
             detail: {
                 newOrder: indexes,
@@ -49,7 +51,9 @@ export const mouseupHandler : EventHandler = (node, event, options) => {
         parent.elm.dispatchEvent(customEvent);
     }
 
-    const children : VNode[] = newItems.map(c => removeAttribute(c, 'data-index'));
+    const children: VNode[] = newItems.map(c =>
+        removeAttribute(c, 'data-index')
+    );
 
     return replaceNode(node, options.parentSelector, { ...parent, children });
 };