New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@progress/kendo-angular-scrollview

Package Overview
Dependencies
Maintainers
1
Versions
899
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@progress/kendo-angular-scrollview - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

218

dist/npm/js/draggable.js

@@ -112,3 +112,219 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap

module.exports = require("@telerik/kendo-draggable");
module.exports =
/******/ (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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var proxy = function proxy(a, b) {
return function (e) {
return b(a(e));
};
};
var bind = function bind(el, event, callback) {
return el.addEventListener(event, callback);
};
var unbind = function unbind(el, event, callback) {
return el.removeEventListener(event, callback);
};
var touchRegExp = /touch/;
function normalizeEvent(e) {
if (e.type.match(touchRegExp)) {
return {
pageX: e.changedTouches[0].pageX,
pageY: e.changedTouches[0].pageY,
type: e.type,
originalEvent: e
};
}
return {
pageX: e.pageX,
pageY: e.pageY,
type: e.type,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
originalEvent: e
};
}
var noop = function noop() {};
// 300ms is the usual mouse interval;
// However, an underpowered mobile device under a heavy load may queue mouse events for a longer period.
var IGNORE_MOUSE_TIMEOUT = 2000;
var Draggable = function () {
function Draggable(_ref) {
var _this = this;
var _ref$press = _ref.press;
var press = _ref$press === undefined ? noop : _ref$press;
var _ref$drag = _ref.drag;
var drag = _ref$drag === undefined ? noop : _ref$drag;
var _ref$release = _ref.release;
var release = _ref$release === undefined ? noop : _ref$release;
_classCallCheck(this, Draggable);
this._touchstart = function (e) {
if (e.touches.length === 1) {
_this._pressHandler(e);
}
};
this._touchmove = function (e) {
if (e.touches.length === 1) {
_this._dragHandler(e);
}
};
this._touchend = function (e) {
// the last finger has been lifted, and the user is not doing gesture.
// there might be a better way to handle this.
if (e.touches.length === 0 && e.changedTouches.length === 1) {
_this._releaseHandler(e);
_this._ignoreMouse = true;
setTimeout(_this._restoreMouse, IGNORE_MOUSE_TIMEOUT);
}
};
this._restoreMouse = function () {
_this._ignoreMouse = false;
};
this._mousedown = function (e) {
var which = e.which;
if (which && which > 1 || _this._ignoreMouse) {
return;
}
bind(document, "mousemove", _this._mousemove);
bind(document, "mouseup", _this._mouseup);
_this._pressHandler(e);
};
this._mousemove = function (e) {
_this._dragHandler(e);
};
this._mouseup = function (e) {
unbind(document, "mousemove", _this._mousemove);
unbind(document, "mouseup", _this._mouseup);
_this._releaseHandler(e);
};
this._pressHandler = proxy(normalizeEvent, press);
this._dragHandler = proxy(normalizeEvent, drag);
this._releaseHandler = proxy(normalizeEvent, release);
this._ignoreMouse = false;
}
_createClass(Draggable, [{
key: "bindTo",
value: function bindTo(element) {
if (element === this._element) {
return;
}
if (this._element) {
this._unbindFromCurrent();
}
this._element = element;
bind(element, "mousedown", this._mousedown);
bind(element, "touchstart", this._touchstart);
bind(element, "touchmove", this._touchmove);
bind(element, "touchend", this._touchend);
}
}, {
key: "_unbindFromCurrent",
value: function _unbindFromCurrent() {
unbind(this._element, "mousedown", this._mousedown);
unbind(this._element, "touchstart", this._touchstart);
unbind(this._element, "touchmove", this._touchmove);
unbind(this._element, "touchend", this._touchend);
}
}, {
key: "destroy",
value: function destroy() {
this._unbindFromCurrent();
this._element = null;
}
}]);
return Draggable;
}();
exports.default = Draggable;
/***/ }
/******/ ]);

@@ -115,0 +331,0 @@ /***/ }

12

dist/npm/js/enums.d.ts
/**
* @hidden
*/
export declare enum Translate {
Left = 0,
Right = 1,
Center = 2,
}
/**
* @hidden
*/
export declare enum Keys {

@@ -23,1 +15,5 @@ LeftArrow = 37,

}
/**
* @hidden
*/
export declare type AnimationState = "left" | "right" | "center";

@@ -60,11 +60,2 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap

*/
(function (Translate) {
Translate[Translate["Left"] = 0] = "Left";
Translate[Translate["Right"] = 1] = "Right";
Translate[Translate["Center"] = 2] = "Center";
})(exports.Translate || (exports.Translate = {}));
var Translate = exports.Translate;
/**
* @hidden
*/
(function (Keys) {

@@ -71,0 +62,0 @@ Keys[Keys["LeftArrow"] = 37] = "LeftArrow";

import '@telerik/kendo-theme-default/styles/packages/buttons';
import '@telerik/kendo-theme-default/styles/packages/scrollview';
import { EventEmitter, ElementRef, TemplateRef, OnChanges } from "@angular/core";
import { AnimationTransitionEvent, ApplicationRef, EventEmitter, ElementRef, TemplateRef, OnChanges } from "@angular/core";
import { ItemChangedEvent } from './change-event-args';

@@ -58,2 +58,3 @@ /**

protected element: ElementRef;
protected application: ApplicationRef;
/**

@@ -102,3 +103,4 @@ * Provides the data source for the ScrollView.

protected itemTemplateRef: TemplateRef<any>;
className: string;
private widgetClass;
private scrollViewClass;
private hostWidth;

@@ -112,7 +114,8 @@ private hostHeight;

private initialTouchCoordinate;
private isAnimating;
private pageIndex;
private isDataSourceEmpty;
private animationState;
private view;
constructor(element: ElementRef);
private transforms;
constructor(element: ElementRef, application: ApplicationRef);
protected keyDown(e: KeyboardEvent): void;

@@ -132,16 +135,16 @@ /**

protected pageChange(idx: number): void;
protected inlineStyles(idx: number): any;
protected listClass(): any;
protected transitionEndHandler(): void;
protected inlineStyles(idx: number): {
[key: string]: string;
};
protected transitionEndHandler(e: AnimationTransitionEvent): void;
protected handlePress(e: any): void;
protected handleDrag(e: any): void;
protected handleRelease(e: any): void;
protected displayPrevArrow(): boolean;
protected displayNextArrow(): boolean;
protected draggedInsideBounds(deltaX: number): boolean;
protected draggedEnoughToNavigate(deltaX: number): boolean;
protected isDragForbidden(deltaX: number): boolean;
private transition(direction);
private navigate(direction);
private changeIndex(direction);
private getTransition(direction);
private syncPagerIndex();
}

@@ -137,5 +137,6 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap

var ScrollViewComponent = (function () {
function ScrollViewComponent(element) {
function ScrollViewComponent(element, application) {
var _this = this;
this.element = element;
this.application = application;
/**

@@ -172,8 +173,9 @@ * Provides the data source for the ScrollView.

this.transitionStyle = {};
this.isAnimating = false;
this.pageIndex = null;
this.isDataSourceEmpty = false;
this.animationState = null;
this.view = new data_collection_1.DataCollection(function () {
return new data_collection_1.DataResultIterator(_this.data, _this.activeIndex, _this.endless, _this.pageIndex);
});
this.transforms = ["translateX(-100%)", "translateX(0%)", "translateX(100%)"];
}

@@ -193,8 +195,5 @@ Object.defineProperty(ScrollViewComponent.prototype, "activeIndex", {

});
Object.defineProperty(ScrollViewComponent.prototype, "className", {
Object.defineProperty(ScrollViewComponent.prototype, "widgetClass", {
get: function () {
return [
'k-widget',
'k-scrollview-wrap'
].filter(Boolean).join(' ');
return true;
},

@@ -204,2 +203,11 @@ enumerable: true,

});
;
Object.defineProperty(ScrollViewComponent.prototype, "scrollViewClass", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
;
Object.defineProperty(ScrollViewComponent.prototype, "hostWidth", {

@@ -241,8 +249,3 @@ get: function () { return this.width; },

ScrollViewComponent.prototype.ngOnChanges = function () {
if (this.activeIndex < 0 || this.view.total <= 0) {
this.activeIndex = 0;
}
else if (this.activeIndex > this.view.total - 1) {
this.activeIndex = this.view.total - 1;
}
this.activeIndex = Math.max(Math.min(this.activeIndex, this.view.total - 1), 0);
};

@@ -262,9 +265,9 @@ /**

ScrollViewComponent.prototype.pageChange = function (idx) {
if (!this.isAnimating && this.activeIndex !== idx) {
if (!this.animate) {
this.activeIndex = idx;
if (!this.animationState && this.activeIndex !== idx) {
if (this.animate) {
this.pageIndex = idx;
this.animationState = (this.pageIndex > this.index ? "left" : "right");
}
else {
this.pageIndex = idx;
this.transition(this.pageIndex > this.index ? enums_1.Translate.Left : enums_1.Translate.Right);
this.activeIndex = idx;
}

@@ -274,17 +277,4 @@ }

ScrollViewComponent.prototype.inlineStyles = function (idx) {
var translateString;
switch (idx) {
case 0:
translateString = "translateX(-100%)";
break;
case 1:
translateString = "translateX(0%)";
break;
case 2:
translateString = "translateX(100%)";
break;
default: break;
}
return {
"transform": translateString,
"transform": this.transforms[idx],
"width": this.width,

@@ -294,15 +284,12 @@ "height": this.height

};
ScrollViewComponent.prototype.listClass = function () {
return {
"k-scrollview": true,
"k-scrollview-animation": this.isAnimating && this.animate
};
};
ScrollViewComponent.prototype.transitionEndHandler = function () {
this.isAnimating = false;
if (this.transitionStyle !== this.getTransition(enums_1.Translate.Center)) {
this.transitionStyle = this.getTransition(enums_1.Translate.Center);
this.syncPagerIndex();
ScrollViewComponent.prototype.transitionEndHandler = function (e) {
this.animationState = null;
if (e.toState === "left" || e.toState === "right") {
if (this.pageIndex !== null) {
this.activeIndex = this.pageIndex;
this.pageIndex = null;
}
this.activeIndex = this.index;
this.itemChanged.emit({ index: this.activeIndex, item: this.view[1] });
this.application.tick();
}

@@ -315,4 +302,3 @@ };

var deltaX = e.pageX - this.initialTouchCoordinate;
this.isAnimating = false;
if (!this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
if (!this.animationState && !this.isDragForbidden(deltaX) && this.draggedInsideBounds(deltaX)) {
this.transitionStyle = { transform: "translateX(" + deltaX + "px)" };

@@ -324,3 +310,2 @@ }

if (this.isDragForbidden(deltaX)) {
this.transitionStyle = {};
return;

@@ -330,15 +315,22 @@ }

this.changeIndex(deltaX > 0 ? enums_1.Dir.Prev : enums_1.Dir.Next);
if (!this.animate) {
this.transitionStyle = null;
this.itemChanged.emit({ index: this.activeIndex, item: this.view[1] });
}
}
else if (Math.abs(deltaX) > 0) {
if (this.animate) {
this.transition((deltaX > 0) ? enums_1.Translate.Right : enums_1.Translate.Left);
this.animationState = "center";
}
else {
this.transitionStyle = this.getTransition(enums_1.Translate.Center);
this.activeIndex = this.index;
this.itemChanged.emit({ index: this.activeIndex, item: this.view[1] });
this.transitionStyle = null;
}
}
else if (!this.isAnimating && Math.abs(deltaX) > 0) {
this.transition(enums_1.Translate.Center);
}
};
ScrollViewComponent.prototype.displayPrevArrow = function () {
return (this.endless || this.activeIndex > 0) && this.view.total > 0;
};
ScrollViewComponent.prototype.displayNextArrow = function () {
return (this.endless || this.activeIndex + 1 < this.view.total) && this.view.total > 0;
};
ScrollViewComponent.prototype.draggedInsideBounds = function (deltaX) {

@@ -353,63 +345,28 @@ return Math.abs(deltaX) <= this.element.nativeElement.offsetWidth;

};
ScrollViewComponent.prototype.transition = function (direction) {
this.isAnimating = true;
switch (direction) {
case 0:
this.transitionStyle = this.getTransition(enums_1.Translate.Left);
break;
case 1:
this.transitionStyle = this.getTransition(enums_1.Translate.Right);
break;
case 2:
this.transitionStyle = this.getTransition(enums_1.Translate.Center);
break;
default: break;
}
};
ScrollViewComponent.prototype.navigate = function (direction) {
var canNavigate = (this.view.canMoveNext() && direction === enums_1.Dir.Next) ||
(this.view.canMovePrev() && direction === enums_1.Dir.Prev);
if (this.isDataSourceEmpty || this.isAnimating || !canNavigate) {
if (this.isDataSourceEmpty || this.animationState) {
return;
}
this.changeIndex(direction);
if (this.animate) {
this.transition(direction === enums_1.Dir.Prev ? enums_1.Translate.Right : enums_1.Translate.Left);
}
else {
this.activeIndex = this.index;
}
};
ScrollViewComponent.prototype.changeIndex = function (direction) {
if (direction === enums_1.Dir.Next) {
if (this.activeIndex < this.view.total - 1) {
this.index++;
if (direction === enums_1.Dir.Next && this.view.canMoveNext()) {
this.index = (this.index + 1) % this.view.total;
if (this.animate) {
this.animationState = "left";
}
else if (this.endless) {
this.index = 0;
else {
this.activeIndex = this.index;
}
}
else if (direction === enums_1.Dir.Prev) {
if (this.activeIndex > 0) {
this.index--;
else if (this.view.canMovePrev()) {
this.index = this.index === 0 ? this.view.total - 1 : this.index - 1;
if (this.animate) {
this.animationState = "right";
}
else if (this.endless) {
this.index = this.view.total - 1;
else {
this.activeIndex = this.index;
}
}
};
ScrollViewComponent.prototype.getTransition = function (direction) {
switch (direction) {
case 0: return { transform: "translateX(-" + this.element.nativeElement.offsetWidth + "px)" };
case 1: return { transform: "translateX(" + this.element.nativeElement.offsetWidth + "px)" };
case 2: return { transform: "translateX(0px)" };
default: break;
}
};
ScrollViewComponent.prototype.syncPagerIndex = function () {
if (this.pageIndex !== null) {
this.activeIndex = this.pageIndex;
this.pageIndex = null;
}
};
__decorate([

@@ -457,6 +414,10 @@ core_1.Input(),

__decorate([
core_1.HostBinding('class'),
__metadata('design:type', String)
], ScrollViewComponent.prototype, "className", null);
core_1.HostBinding('class.k-widget'),
__metadata('design:type', Boolean)
], ScrollViewComponent.prototype, "widgetClass", null);
__decorate([
core_1.HostBinding('class.k-scrollview-wrap'),
__metadata('design:type', Boolean)
], ScrollViewComponent.prototype, "scrollViewClass", null);
__decorate([
core_1.HostBinding('style.width'),

@@ -485,6 +446,20 @@ __metadata('design:type', String)

core_1.Component({
animations: [
core_1.trigger('animateTo', [
core_1.state('center, left, right', core_1.style({ transform: 'translateX(0)' })),
core_1.transition('* => right', [
core_1.animate('300ms ease-out', core_1.style({ transform: 'translateX(100%)' }))
]),
core_1.transition('* => left', [
core_1.animate('300ms ease-out', core_1.style({ transform: 'translateX(-100%)' }))
]),
core_1.transition('* => center', [
core_1.animate('300ms ease-out')
])
])
],
selector: 'kendo-scrollview',
template: "\n <ul [ngClass]=\"listClass()\"\n [ngStyle]=\"transitionStyle\"\n (webkitTransitionEnd) = \"transitionEndHandler()\"\n (oTransitionEnd) = \"transitionEndHandler()\"\n (transitionend) = \"transitionEndHandler()\"\n (kendo.drag) = \"handleDrag($event)\"\n (kendo.press) = \"handlePress($event)\"\n (kendo.release) = \"handleRelease($event)\"\n kendoDraggable>\n <li *ngFor=\"let item of view;let i=index\"\n [ngStyle]=\"inlineStyles(i)\"\n [attr.aria-hidden]=\"i !== 1\">\n <template\n [ngTemplateOutlet]=\"itemTemplateRef\"\n [ngOutletContext]=\"{ item: item }\">\n </template>\n </li>\n </ul>\n <div class='k-scrollview-elements'\n [ngStyle]=\"{'height': height}\"\n *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n <a class=\"k-scrollview-prev\"\n aria-label=\"previous\"\n *ngIf=\"!(!endless && activeIndex === 0) && arrows\"\n (click)=\"prev()\">\n <span class=\"k-icon k-i-arrowhead-w\"></span>\n </a>\n <a class=\"k-scrollview-next\"\n aria-label=\"next\"\n *ngIf=\"!(!endless && activeIndex === view.total - 1) && arrows\"\n (click)=\"next()\">\n <span class=\"k-icon k-i-arrowhead-e\"></span>\n </a>\n <kendo-scrollview-pager *ngIf(pageable)\n (pagerIndexChange)=\"pageChange($event)\"\n [data]=\"data\"\n [activeIndex]=\"activeIndex\">\n </kendo-scrollview-pager>\n </div>\n "
template: "\n <ul class='k-scrollview'\n [ngStyle]=\"transitionStyle\"\n [@animateTo]=\"animationState\"\n (@animateTo.done)= \"transitionEndHandler($event)\"\n (kendo.drag) = \"handleDrag($event)\"\n (kendo.press) = \"handlePress($event)\"\n (kendo.release) = \"handleRelease($event)\"\n kendoDraggable>\n <li *ngFor=\"let item of view;let i=index\"\n [ngStyle]=\"inlineStyles(i)\"\n [attr.aria-hidden]=\"i !== 1\">\n <template\n [ngTemplateOutlet]=\"itemTemplateRef\"\n [ngOutletContext]=\"{ item: item }\">\n </template>\n </li>\n </ul>\n <div class='k-scrollview-elements'\n [ngStyle]=\"{'height': height}\"\n *ngIf=\"!isDataSourceEmpty && (pageable||arrows)\">\n <a class=\"k-scrollview-prev\"\n aria-label=\"previous\"\n *ngIf=\"arrows && displayPrevArrow()\"\n (click)=\"prev()\">\n <span class=\"k-icon k-i-arrowhead-w\"></span>\n </a>\n <a class=\"k-scrollview-next\"\n aria-label=\"next\"\n *ngIf=\"arrows && displayNextArrow()\"\n (click)=\"next()\">\n <span class=\"k-icon k-i-arrowhead-e\"></span>\n </a>\n <kendo-scrollview-pager *ngIf(pageable)\n (pagerIndexChange)=\"pageChange($event)\"\n [data]=\"data\"\n [activeIndex]=\"activeIndex\">\n </kendo-scrollview-pager>\n </div>\n "
}),
__metadata('design:paramtypes', [core_1.ElementRef])
__metadata('design:paramtypes', [core_1.ElementRef, core_1.ApplicationRef])
], ScrollViewComponent);

@@ -491,0 +466,0 @@ return ScrollViewComponent;

{
"name": "@progress/kendo-angular-scrollview",
"description": "A ScrollView Component for Angular 2",
"version": "0.3.0",
"version": "0.3.1",
"publishConfig": {

@@ -29,25 +29,30 @@ "registry": "https://registry.npm.telerik.com"

],
"dependencies": {
"@angular/http": "2.0.0",
"peerDependencies": {
"@angular/common": "~2.0.0",
"@angular/core": "~2.0.0",
"rxjs": "~5.0.0-X"
},
"dependencies": {},
"devDependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/platform-server": "2.0.0",
"@progress/kendo-angular-tasks": "^4.0.0",
"@telerik/kendo-theme-default": "^1.24.0",
"@telerik/kendo-draggable": "^1.2.0",
"codelyzer": "0.0.28",
"core-js": "^2.2.2",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.23"
},
"devDependencies": {
"@progress/kendo-angular-tasks": "^4.0.0",
"@telerik/kendo-theme-default": "^1.24.0",
"cz-conventional-changelog": "^1.1.5",
"ghooks": "^1.0.3",
"gulp": "^3.9.0",
"rxjs": "5.0.0-beta.12",
"semantic-release": "^4.3.5",
"typings": "^1.3.0",
"validate-commit-msg": "^1.1.1",
"codelyzer": "0.0.28"
"zone.js": "0.6.23"
},

@@ -54,0 +59,0 @@ "config": {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc