Socket
Socket
Sign inDemoInstall

@shopify/draggable

Package Overview
Dependencies
Maintainers
9
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shopify/draggable - npm Package Compare versions

Comparing version 1.0.0-beta.6 to 1.0.0-beta.7

lib/es5/plugins/resize-mirror.js

13

CHANGELOG.md
# Changelog
## v1.0.0-beta.7 - ?
## v1.0.0-beta.8 - ?

@@ -9,2 +9,13 @@ ### Added

## v1.0.0-beta.7 - 2018-04-28
### Added
* ResizeMirror plugin
### Changed
* Fixed native drag events with draggable
* Mouse position bug in scrollable
## v1.0.0-beta.6 - 2018-04-04

@@ -11,0 +22,0 @@

@@ -79,3 +79,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 17);
/******/ return __webpack_require__(__webpack_require__.s = 21);
/******/ })

@@ -94,3 +94,3 @@ /************************************************************************/

var _AbstractPlugin = __webpack_require__(12);
var _AbstractPlugin = __webpack_require__(16);

@@ -114,3 +114,3 @@ var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);

var _SnappableEvent = __webpack_require__(7);
var _SnappableEvent = __webpack_require__(8);

@@ -138,4 +138,35 @@ Object.keys(_SnappableEvent).forEach(function (key) {

var _AbstractEvent = __webpack_require__(14);
var _closest = __webpack_require__(15);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(13);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _AbstractEvent = __webpack_require__(18);
var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);

@@ -148,3 +179,3 @@

/***/ }),
/* 3 */
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

@@ -159,3 +190,3 @@

var _CollidableEvent = __webpack_require__(15);
var _CollidableEvent = __webpack_require__(19);

@@ -173,3 +204,3 @@ Object.keys(_CollidableEvent).forEach(function (key) {

/***/ }),
/* 4 */
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

@@ -325,3 +356,3 @@

/***/ }),
/* 5 */
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

@@ -337,3 +368,3 @@

var _SwapAnimation = __webpack_require__(4);
var _SwapAnimation = __webpack_require__(5);

@@ -348,3 +379,3 @@ var _SwapAnimation2 = _interopRequireDefault(_SwapAnimation);

/***/ }),
/* 6 */
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

@@ -512,3 +543,3 @@

/***/ }),
/* 7 */
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

@@ -524,3 +555,3 @@

var _AbstractEvent = __webpack_require__(2);
var _AbstractEvent = __webpack_require__(3);

@@ -585,3 +616,3 @@ var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);

/***/ }),
/* 8 */
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

@@ -608,3 +639,3 @@

var _Snappable = __webpack_require__(6);
var _Snappable = __webpack_require__(7);

@@ -618,3 +649,3 @@ var _Snappable2 = _interopRequireDefault(_Snappable);

/***/ }),
/* 9 */
/* 10 */
/***/ (function(module, exports, __webpack_require__) {

@@ -628,2 +659,174 @@

});
exports.defaultOptions = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _AbstractPlugin = __webpack_require__(0);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const onDragOver = Symbol('onDragOver');
const resize = Symbol('resize');
/**
* ResizeMirror default options
* @property {Object} defaultOptions
* @type {Object}
*/
const defaultOptions = exports.defaultOptions = {};
/**
* The ResizeMirror plugin resizes the mirror element to the dimensions of the draggable element that the mirror is hovering over
* @class ResizeMirror
* @module ResizeMirror
* @extends AbstractPlugin
*/
class ResizeMirror extends _AbstractPlugin2.default {
/**
* ResizeMirror constructor.
* @constructs ResizeMirror
* @param {Draggable} draggable - Draggable instance
*/
constructor(draggable) {
super(draggable);
/**
* ResizeMirror options
* @property {Object} options
* @type {Object}
*/
this.options = _extends({}, defaultOptions, this.getOptions());
this[onDragOver] = this[onDragOver].bind(this);
}
/**
* Attaches plugins event listeners
*/
attach() {
this.draggable.on('drag:over', this[onDragOver]);
this.draggable.on('drag:over:container', this[onDragOver]);
}
/**
* Detaches plugins event listeners
*/
detach() {
this.draggable.off('drag:over', this[onDragOver]);
this.draggable.off('drag:over:container', this[onDragOver]);
}
/**
* Returns options passed through draggable
* @return {Object}
*/
getOptions() {
return this.draggable.options.resizeMirror || {};
}
/**
* Drag over handler
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[onDragOver](dragEvent) {
this[resize](dragEvent);
}
/**
* Resize function for
* @param {DragOverEvent | DragOverContainer} dragEvent
* @private
*/
[resize](dragEvent) {
requestAnimationFrame(() => {
dragEvent.overContainer.appendChild(dragEvent.mirror);
const overElement = dragEvent.over || this.draggable.getDraggableElementsForContainer(dragEvent.overContainer)[0];
if (!overElement) {
return;
}
(0, _utils.requestNextAnimationFrame)(() => {
const overRect = overElement.getBoundingClientRect();
dragEvent.mirror.style.width = `${overRect.width}px`;
dragEvent.mirror.style.height = `${overRect.height}px`;
});
});
}
}
exports.default = ResizeMirror;
/***/ }),
/* 11 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defaultOptions = undefined;
var _ResizeMirror = __webpack_require__(10);
var _ResizeMirror2 = _interopRequireDefault(_ResizeMirror);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _ResizeMirror2.default;
exports.defaultOptions = _ResizeMirror.defaultOptions;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 13 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(12);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 14 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;

@@ -688,3 +891,3 @@ const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;

/***/ }),
/* 10 */
/* 15 */
/***/ (function(module, exports, __webpack_require__) {

@@ -699,3 +902,3 @@

var _closest = __webpack_require__(9);
var _closest = __webpack_require__(14);

@@ -709,3 +912,3 @@ var _closest2 = _interopRequireDefault(_closest);

/***/ }),
/* 11 */
/* 16 */
/***/ (function(module, exports, __webpack_require__) {

@@ -719,22 +922,2 @@

});
exports.closest = undefined;
var _closest = __webpack_require__(10);
var _closest2 = _interopRequireDefault(_closest);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.closest = _closest2.default;
/***/ }),
/* 12 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
/**

@@ -780,3 +963,3 @@ * All draggable plugins inherit from this class.

/***/ }),
/* 13 */
/* 17 */
/***/ (function(module, exports, __webpack_require__) {

@@ -795,5 +978,5 @@

var _utils = __webpack_require__(11);
var _utils = __webpack_require__(2);
var _CollidableEvent = __webpack_require__(3);
var _CollidableEvent = __webpack_require__(4);

@@ -957,3 +1140,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/***/ }),
/* 14 */
/* 18 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1046,3 +1229,3 @@

/***/ }),
/* 15 */
/* 19 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1058,3 +1241,3 @@

var _AbstractEvent = __webpack_require__(2);
var _AbstractEvent = __webpack_require__(3);

@@ -1129,3 +1312,3 @@ var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);

/***/ }),
/* 16 */
/* 20 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1140,3 +1323,3 @@

var _CollidableEvent = __webpack_require__(3);
var _CollidableEvent = __webpack_require__(4);

@@ -1153,3 +1336,3 @@ Object.keys(_CollidableEvent).forEach(function (key) {

var _Collidable = __webpack_require__(13);
var _Collidable = __webpack_require__(17);

@@ -1163,3 +1346,3 @@ var _Collidable2 = _interopRequireDefault(_Collidable);

/***/ }),
/* 17 */
/* 21 */
/***/ (function(module, exports, __webpack_require__) {

@@ -1174,3 +1357,3 @@

var _Collidable = __webpack_require__(16);
var _Collidable = __webpack_require__(20);

@@ -1184,4 +1367,19 @@ Object.defineProperty(exports, 'Collidable', {

var _Snappable = __webpack_require__(8);
var _ResizeMirror = __webpack_require__(11);
Object.defineProperty(exports, 'ResizeMirror', {
enumerable: true,
get: function () {
return _interopRequireDefault(_ResizeMirror).default;
}
});
Object.defineProperty(exports, 'defaultResizeMirrorOptions', {
enumerable: true,
get: function () {
return _ResizeMirror.defaultOptions;
}
});
var _Snappable = __webpack_require__(9);
Object.defineProperty(exports, 'Snappable', {

@@ -1194,3 +1392,3 @@ enumerable: true,

var _SwapAnimation = __webpack_require__(5);
var _SwapAnimation = __webpack_require__(6);

@@ -1197,0 +1395,0 @@ Object.defineProperty(exports, 'SwapAnimation', {

93

lib/plugins/collidable.js

@@ -79,3 +79,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 10);
/******/ return __webpack_require__(__webpack_require__.s = 12);
/******/ })

@@ -94,3 +94,3 @@ /************************************************************************/

var _CollidableEvent = __webpack_require__(9);
var _CollidableEvent = __webpack_require__(11);

@@ -117,2 +117,38 @@ Object.keys(_CollidableEvent).forEach(function (key) {

});
exports.default = requestNextAnimationFrame;
function requestNextAnimationFrame(callback) {
return requestAnimationFrame(() => {
requestAnimationFrame(callback);
});
}
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _requestNextAnimationFrame = __webpack_require__(1);
var _requestNextAnimationFrame2 = _interopRequireDefault(_requestNextAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _requestNextAnimationFrame2.default;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = closest;

@@ -177,3 +213,3 @@ const matchFunction = Element.prototype.matches || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector;

/***/ }),
/* 2 */
/* 4 */
/***/ (function(module, exports, __webpack_require__) {

@@ -188,3 +224,3 @@

var _closest = __webpack_require__(1);
var _closest = __webpack_require__(3);

@@ -198,3 +234,3 @@ var _closest2 = _interopRequireDefault(_closest);

/***/ }),
/* 3 */
/* 5 */
/***/ (function(module, exports, __webpack_require__) {

@@ -208,14 +244,25 @@

});
exports.closest = undefined;
var _closest = __webpack_require__(2);
var _closest = __webpack_require__(4);
var _closest2 = _interopRequireDefault(_closest);
Object.defineProperty(exports, 'closest', {
enumerable: true,
get: function () {
return _interopRequireDefault(_closest).default;
}
});
var _requestNextAnimationFrame = __webpack_require__(2);
Object.defineProperty(exports, 'requestNextAnimationFrame', {
enumerable: true,
get: function () {
return _interopRequireDefault(_requestNextAnimationFrame).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.closest = _closest2.default;
/***/ }),
/* 4 */
/* 6 */
/***/ (function(module, exports, __webpack_require__) {

@@ -269,3 +316,3 @@

/***/ }),
/* 5 */
/* 7 */
/***/ (function(module, exports, __webpack_require__) {

@@ -280,3 +327,3 @@

var _AbstractPlugin = __webpack_require__(4);
var _AbstractPlugin = __webpack_require__(6);

@@ -290,3 +337,3 @@ var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);

/***/ }),
/* 6 */
/* 8 */
/***/ (function(module, exports, __webpack_require__) {

@@ -301,7 +348,7 @@

var _AbstractPlugin = __webpack_require__(5);
var _AbstractPlugin = __webpack_require__(7);
var _AbstractPlugin2 = _interopRequireDefault(_AbstractPlugin);
var _utils = __webpack_require__(3);
var _utils = __webpack_require__(5);

@@ -467,3 +514,3 @@ var _CollidableEvent = __webpack_require__(0);

/***/ }),
/* 7 */
/* 9 */
/***/ (function(module, exports, __webpack_require__) {

@@ -556,3 +603,3 @@

/***/ }),
/* 8 */
/* 10 */
/***/ (function(module, exports, __webpack_require__) {

@@ -567,3 +614,3 @@

var _AbstractEvent = __webpack_require__(7);
var _AbstractEvent = __webpack_require__(9);

@@ -577,3 +624,3 @@ var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);

/***/ }),
/* 9 */
/* 11 */
/***/ (function(module, exports, __webpack_require__) {

@@ -589,3 +636,3 @@

var _AbstractEvent = __webpack_require__(8);
var _AbstractEvent = __webpack_require__(10);

@@ -660,3 +707,3 @@ var _AbstractEvent2 = _interopRequireDefault(_AbstractEvent);

/***/ }),
/* 10 */
/* 12 */
/***/ (function(module, exports, __webpack_require__) {

@@ -683,3 +730,3 @@

var _Collidable = __webpack_require__(6);
var _Collidable = __webpack_require__(8);

@@ -686,0 +733,0 @@ var _Collidable2 = _interopRequireDefault(_Collidable);

{
"name": "@shopify/draggable",
"version": "1.0.0-beta.6",
"version": "1.0.0-beta.7",
"private": false,

@@ -29,3 +29,4 @@ "license": "MIT",

"watch": "node scripts/watch.js",
"prepublish": "yarn build",
"prepare": "yarn build:development",
"prepublishOnly": "yarn build:production",
"lint": "eslint ./src --max-warnings 0",

@@ -41,3 +42,3 @@ "esdoc": "esdoc -c esdoc.json",

"babel-core": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-jest": "^22.4.3",
"babel-loader": "^7.1.4",

@@ -51,13 +52,13 @@ "babel-plugin-transform-class-properties": "^6.24.1",

"concurrently": "^3.5.1",
"core-js": "^2.5.3",
"core-js": "^2.5.5",
"esdoc": "^1.0.4",
"esdoc-ecmascript-proposal-plugin": "^1.0.0",
"esdoc-standard-plugin": "^1.0.0",
"eslint": "^4.19.0",
"eslint": "^4.19.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-shopify": "^20.0.0",
"jest": "^22.4.2",
"webpack": "^4.1.1",
"eslint-plugin-shopify": "^21.0.1",
"jest": "^22.4.3",
"webpack": "^4.6.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.12"
"webpack-cli": "^2.0.15"
},

@@ -70,3 +71,7 @@ "eslintConfig": {

"plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-es2015-modules-commonjs"]
},
"publishConfig": {
"access": "public",
"@shopify:registry": "https://registry.npmjs.org"
}
}

@@ -54,15 +54,15 @@ [![CircleCI](https://circleci.com/gh/Shopify/draggable/tree/master.svg?style=shield)](https://circleci.com/gh/Shopify/draggable/tree/master)

<!-- Entire bundle -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/draggable.bundle.js"></script>
<!-- legacy bundle for older browsers (IE11) -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/draggable.bundle.legacy.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/draggable.bundle.legacy.js"></script>
<!-- Draggable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/draggable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/draggable.js"></script>
<!-- Sortable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/sortable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/sortable.js"></script>
<!-- Droppable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/droppable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/droppable.js"></script>
<!-- Swappable only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/swappable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/swappable.js"></script>
<!-- Plugins only -->
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.6/lib/plugins.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.7/lib/plugins.js"></script>
```

@@ -115,2 +115,3 @@

* [Collidable](src/Plugins/Collidable)
* [ResizeMirror](src/Plugins/ResizeMirror)
* [Snappable](src/Plugins/Snappable)

@@ -142,3 +143,3 @@ * [SwapAnimation](src/Plugins/SwapAnimation)

We are currently working on `v1.0.0-beta.7`. Check out the [project board](https://github.com/Shopify/draggable/projects/3) to see tasks and follow progress on the release. Any Pull Requests should be pointed against the feature branch `v1.0.0-beta.7`.
We are currently working on `v1.0.0-beta.8`. Check out the [project board](https://github.com/Shopify/draggable/projects/3) to see tasks and follow progress on the release. Any Pull Requests should be pointed against the feature branch `v1.0.0-beta.8`.

@@ -145,0 +146,0 @@ ## Related resources

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

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