ngx-sort
Version:
An angular 4 and above component for sorting list supporting drag and drop sort.
398 lines (350 loc) • 16.5 kB
JavaScript
/**
* ngx-sort - An angular 4 and above component for sorting list supporting drag and drop sort.
* @version v1.0.6
* @author Manish Kumar
* @link https://github.com/debba/ngx-sortable#readme
* @license MIT
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"), require("@angular/common"));
else if(typeof define === 'function' && define.amd)
define(["@angular/core", "@angular/common"], factory);
else if(typeof exports === 'object')
exports["ticktock"] = factory(require("@angular/core"), require("@angular/common"));
else
root["ticktock"] = factory(root["ng"]["core"], root["ng"]["common"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_10__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = __webpack_require__(1);
var NgxSortableComponent = /** @class */ (function () {
function NgxSortableComponent() {
this.active = true;
this.listStyle = {
height: '250px',
width: '300px',
dropZoneHeight: '50px'
};
this.listSorted = new core_1.EventEmitter();
this.draggedIndex = -1;
this.onDragOverIndex = -1;
console.log('Intializing...');
}
NgxSortableComponent.prototype.selectItem = function (item) {
this.selectedItem = item;
};
NgxSortableComponent.prototype.moveUp = function () {
var index = this.items.indexOf(this.selectedItem);
if (index === 0) {
return;
}
this.swapElements(index, index - 1);
this.listSorted.emit(this.items);
};
NgxSortableComponent.prototype.moveDown = function () {
var index = this.items.indexOf(this.selectedItem);
if (index === this.items.length - 1) {
return;
}
this.swapElements(index, index + 1);
this.listSorted.emit(this.items);
};
NgxSortableComponent.prototype.onDrop = function ($event, index) {
// index is of the element on which the item is dropped
this.handleDrop(index);
};
NgxSortableComponent.prototype.allowDrop = function ($event, index) {
// index is of the item on which the item is currently hovered
this.onDragOverIndex = index;
$event.preventDefault();
};
NgxSortableComponent.prototype.onDragStart = function ($event, index) {
if (!this.active) {
$event.preventDefault();
}
this.draggedIndex = index;
};
NgxSortableComponent.prototype.handleDrop = function (droppedIndex) {
var item = this.items[this.draggedIndex];
this.items.splice(this.draggedIndex, 1);
this.items.splice(droppedIndex, 0, item);
this.draggedIndex = -1;
this.onDragOverIndex = -1;
this.listSorted.emit(this.items);
};
NgxSortableComponent.prototype.swapElements = function (oldIndex, newIndex) {
var temp = this.items[oldIndex];
this.items[oldIndex] = this.items[newIndex];
this.items[newIndex] = temp;
};
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], NgxSortableComponent.prototype, "active", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], NgxSortableComponent.prototype, "items", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], NgxSortableComponent.prototype, "name", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], NgxSortableComponent.prototype, "listStyle", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], NgxSortableComponent.prototype, "listSorted", void 0);
__decorate([
core_1.ContentChild(core_1.TemplateRef),
__metadata("design:type", core_1.TemplateRef)
], NgxSortableComponent.prototype, "itemTemplate", void 0);
NgxSortableComponent = __decorate([
core_1.Component({
selector: 'ngx-sortable',
template: __webpack_require__(5),
styles: [__webpack_require__(6)]
}),
__metadata("design:paramtypes", [])
], NgxSortableComponent);
return NgxSortableComponent;
}());
exports.NgxSortableComponent = NgxSortableComponent;
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
;
Object.defineProperty(exports, "__esModule", { value: true });
var components_1 = __webpack_require__(3);
exports.NgxSortableComponent = components_1.NgxSortableComponent;
var ngx_sortable_module_1 = __webpack_require__(9);
exports.NgxSortableModule = ngx_sortable_module_1.NgxSortableModule;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
;
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(__webpack_require__(4));
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
;
Object.defineProperty(exports, "__esModule", { value: true });
var ngx_sortable_component_1 = __webpack_require__(0);
exports.NgxSortableComponent = ngx_sortable_component_1.NgxSortableComponent;
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = "<div class=\"sortable-container\" [style.width]='listStyle.width'>\n <div class=\"sortable-header\">\n <label class=\"sortable-name\">{{name}}</label>\n <div class=\"sortable-buttons\" *ngIf=\"active\">\n <button (click)=\"moveUp()\" [disabled]=\"!selectedItem\" title=\"Move Up\">⇧</button>\n <button (click)=\"moveDown()\" [disabled]=\"!selectedItem\" title=\"Move Down\">⇩</button>\n </div>\n </div>\n <ul class=\"sortable-list\" [style.height]='listStyle.height'>\n <li [draggable]=\"active\" (click)=\"selectItem(item)\" *ngFor=\"let item of items; let i = index;\" [ngClass]=\"{'active': item == selectedItem}\"\n (drop)=\"onDrop($event, i)\" (dragover)=\"allowDrop($event,i)\" (dragstart)=\"onDragStart($event, i)\">\n <div class=\"drop-zone\" [style.height]=\"listStyle.dropZoneHeight\" *ngIf=\"onDragOverIndex == i\">\n </div>\n <ng-template ngFor [ngForOf]=\"[item]\" [ngForTemplate]=\"itemTemplate\">\n </ng-template>\n </li>\n </ul>\n</div>\n"
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
var result = __webpack_require__(7);
if (typeof result === "string") {
module.exports = result;
} else {
module.exports = result.toString();
}
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(8)(false);
// imports
// module
exports.push([module.i, ".sortable-container {\n width: 100%;\n border: 1px solid #d9d9d9;\n border-radius: 3px; }\n .sortable-container .sortable-header {\n width: auto;\n padding: 5px;\n background: lightgray;\n border-bottom: 1px solid #d9d9d9;\n height: 30px;\n background-image: linear-gradient(#f6f7f9 0%, #ebedf0 100%);\n box-sizing: content-box;\n color: black; }\n .sortable-container .sortable-header .sortable-name {\n vertical-align: middle;\n font-size: 25px; }\n .sortable-container .sortable-header .sortable-buttons {\n float: right;\n height: 100%;\n box-sizing: border-box; }\n .sortable-container .sortable-header .sortable-buttons button {\n height: 30px;\n width: 30px;\n vertical-align: middle;\n display: inline-block;\n box-sizing: border-box;\n margin-left: 5px;\n border: 1px solid #2399e5;\n color: #FFFFFF;\n background: #2399e5;\n -webkit-transition: background-color .2s;\n -moz-transition: background-color .2s;\n transition: background-color .2s;\n border-radius: 5px;\n outline: none; }\n .sortable-container .sortable-header .sortable-buttons button:disabled {\n cursor: not-allowed; }\n .sortable-container .sortable-header .sortable-buttons button:active, .sortable-container .sortable-header .sortable-buttons button:hover {\n border: 1px solid #156090;\n background: #186ba0;\n color: #ffffff; }\n .sortable-container .sortable-header .sortable-buttons button:active:enabled, .sortable-container .sortable-header .sortable-buttons button:hover:enabled {\n cursor: pointer; }\n .sortable-container .sortable-list {\n list-style-type: none;\n margin: 0;\n padding: 0px;\n overflow: auto; }\n .sortable-container .sortable-list .drop-zone {\n height: 30px;\n background: rgba(225, 219, 250, 0.5);\n opacity: 0.5px;\n border: 2px dotted #e1dbfa; }\n .sortable-container .sortable-list .active {\n background: #3f94e9 !important;\n color: white; }\n", ""]);
// exports
/***/ }),
/* 8 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var ngx_sortable_component_1 = __webpack_require__(0);
var core_1 = __webpack_require__(1);
var common_1 = __webpack_require__(10);
var NgxSortableModule = /** @class */ (function () {
function NgxSortableModule() {
}
NgxSortableModule = __decorate([
core_1.NgModule({
declarations: [ngx_sortable_component_1.NgxSortableComponent],
imports: [common_1.CommonModule],
exports: [ngx_sortable_component_1.NgxSortableComponent],
providers: [],
bootstrap: []
})
], NgxSortableModule);
return NgxSortableModule;
}());
exports.NgxSortableModule = NgxSortableModule;
/***/ }),
/* 10 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
/***/ })
/******/ ]);
});
//# sourceMappingURL=index.umd.js.map