├── package.json
├── LICENCE
├── README.md
└── src
└── itemize.js
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "itemizejs",
3 | "version": "1.0.8",
4 | "description": "Turn any container's children into manageable items",
5 | "main": "build/itemize.min.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/Kosmoon/itemizejs.git"
12 | },
13 | "keywords": [
14 | "javascript",
15 | "library",
16 | "item",
17 | "remove",
18 | "add",
19 | "manage"
20 | ],
21 | "author": "Kosmoon",
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/Kosmoon/itemizejs/issues"
25 | },
26 | "homepage": "https://www.itemizejs.com",
27 | "devDependencies": {
28 | "uglify-js": "^3.5.15"
29 | },
30 | "dependencies": {}
31 | }
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Kosmoon
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ItemizeJS
2 |
3 | > Turn any container's children into manageable items.
4 |
5 | [
](https://www.npmjs.com/package/itemizejs)
6 |
7 | [Website](https://kosmoon.github.io/itemize/)
8 |
9 | ItemizeJS is a Javascript library which transforms any containers children into manageable items in just two lines of code.
10 |
11 | Items will reorganize themselves with a nice animation when removed, added or dragged.
12 |
13 | # Installation
14 |
15 | ### Include script
16 |
17 | CDN:
18 |
19 | ```html
20 |
21 | ```
22 |
23 | Locally:
24 |
25 | ```html
26 |
27 | ```
28 |
29 | ### OR install with NPM
30 |
31 | ```
32 | npm install itemizejs
33 | ```
34 |
35 | ```javascript
36 | import Itemize from itemizejs
37 | ```
38 |
39 | ### Start coding!
40 |
41 | ```javascript
42 | var itemManager = new Itemize();
43 | itemManager.apply(".target_container");
44 | ```
45 |
46 | # Usage example
47 |
48 | https://kosmoon.github.io/itemize/index.html?example
49 |
50 | # Documentation
51 |
52 | https://kosmoon.github.io/itemize/docs.html
53 |
54 | # Browser support
55 |
56 | | Chrome | Safari | IE / Edge | Firefox | Opera |
57 | | ------ | ------ | --------- | ------- | ----- |
58 | | 24+ | 8+ | 11+ | 32+ | 15+ |
59 |
60 | ## About
61 |
62 | Created by Kosmoon
63 |
64 | [
](https://twitter.com/KosmoonDev)
65 |
66 | kosmoonstudio@gmail.com
67 |
68 | Distributed under the MIT license. [](https://opensource.org/licenses/MIT)
69 |
--------------------------------------------------------------------------------
/src/itemize.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | /*
3 | -- itemize.js v1.0.8 --
4 | -- (c) 2019 Kosmoon --
5 | -- Released under the MIT license --
6 | */
7 |
8 | function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
9 |
10 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
11 |
12 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
13 |
14 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
15 |
16 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
17 |
18 | 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); } }
19 |
20 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
21 |
22 | if (typeof Object.assign != "function") {
23 | Object.defineProperty(Object, "assign", {
24 | value: function assign(target, varArgs) {
25 | if (target == null) {
26 | throw new TypeError("Cannot convert undefined or null to object");
27 | }
28 |
29 | var to = Object(target);
30 |
31 | for (var index = 1; index < arguments.length; index++) {
32 | var nextSource = arguments[index];
33 |
34 | if (nextSource != null) {
35 | for (var nextKey in nextSource) {
36 | if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
37 | to[nextKey] = nextSource[nextKey];
38 | }
39 | }
40 | }
41 | }
42 |
43 | return to;
44 | },
45 | writable: true,
46 | configurable: true
47 | });
48 | }
49 |
50 | var Itemize =
51 | /*#__PURE__*/
52 | function () {
53 | function Itemize(options) {
54 | _classCallCheck(this, Itemize);
55 |
56 | this.containers = [];
57 | this.items = [];
58 | this.globalOptions = this.mergeOptions(options);
59 | this.notificationNbs = {};
60 | this.modalDisappearTimeout = null;
61 | this.elPos = {};
62 | this.flipPlayId = "";
63 | this.elemToRemove = [];
64 | this.draggedEl = null;
65 | this.lastTargetedContainers = null;
66 | window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; // let optionCheckResult = this.optionsTypeCheck(this.globalOptions);
67 | // if (optionCheckResult !== "valid") {
68 | // console.error("- Itemize - TYPE error:\n" + optionCheckResult);
69 | // }
70 | }
71 |
72 | _createClass(Itemize, [{
73 | key: "apply",
74 | value: function apply(target, options) {
75 | var _this2 = this;
76 |
77 | var opts = _objectSpread({}, this.globalOptions);
78 |
79 | if (_typeof(target) === "object") {
80 | opts = this.mergeOptions(target);
81 | target = [null];
82 | } else {
83 | target = [target];
84 | }
85 |
86 | if (options) {
87 | opts = this.mergeOptions(options);
88 | }
89 |
90 | var childItemizedNb = 0;
91 |
92 | for (var i = 0; i < target.length; i++) {
93 | this.lastTargetedContainers = this.getTargetElements(target[i]);
94 |
95 | if (this.lastTargetedContainers && this.lastTargetedContainers.length > 0) {
96 | (function () {
97 | childItemizedNb += _this2.applyItemize(_this2.lastTargetedContainers, opts);
98 |
99 | var nestingApply = function nestingApply(containers, nestingLevel) {
100 | var nestingNb = 1;
101 |
102 | if (containers.length > 0 && nestingNb < nestingLevel) {
103 | for (var _i = 0; _i < containers.length; _i++) {
104 | childItemizedNb += _this2.applyItemize(containers[_i].children, opts);
105 | nestingNb++;
106 |
107 | if (containers.length > 0 && nestingNb < nestingLevel) {
108 | nestingApply(containers[_i].children, nestingLevel);
109 | }
110 | }
111 | }
112 | };
113 |
114 | nestingApply(_this2.lastTargetedContainers, opts.nestingLevel);
115 | })();
116 | } else {
117 | console.error(" - Itemize error - \n no valid target found.\n");
118 | }
119 | } // console.log(
120 | // "%c" + childItemizedNb + " element(s) itemized",
121 | // "background: #060606; color:#1FEA00;padding:10px"
122 | // );
123 |
124 |
125 | return childItemizedNb + " element(s) itemized";
126 | }
127 | }, {
128 | key: "cancel",
129 | value: function cancel(target) {
130 | var unItemizedNb = 0;
131 |
132 | if (target) {
133 | if (!Array.isArray(target)) {
134 | target = [target];
135 | }
136 |
137 | for (var i = 0; i < target.length; i++) {
138 | this.lastTargetedContainers = this.getTargetElements(target[i]);
139 |
140 | if (this.lastTargetedContainers && this.lastTargetedContainers.length > 0) {
141 | unItemizedNb += this.cancelItemize(this.lastTargetedContainers);
142 | } else {
143 | console.error(" - Itemize error - \n " + target[i] + " not found.\n");
144 | }
145 | }
146 | } else {
147 | this.clearObservers();
148 | unItemizedNb = this.cancelItemize("all");
149 | }
150 |
151 | return unItemizedNb + " element(s) unitemized";
152 | }
153 | }, {
154 | key: "getTargetElements",
155 | value: function getTargetElements(target) {
156 | try {
157 | if (!target) {
158 | return document.querySelectorAll("[itemize]");
159 | } else {
160 | return document.querySelectorAll(target);
161 | }
162 | } catch (error) {
163 | console.error(error);
164 | return null;
165 | }
166 | }
167 | }, {
168 | key: "clearObservers",
169 | value: function clearObservers(parentId) {
170 | if (window.itemizeObservers) {
171 | for (var i = window.itemizeObservers.length - 1; i >= 0; i--) {
172 | var disconnect = false;
173 |
174 | if (parentId) {
175 | if (window.itemizeObservers[i].itemizeContainerId === parentId) {
176 | disconnect = true;
177 | }
178 | } else {
179 | disconnect = true;
180 | }
181 |
182 | if (disconnect) {
183 | window.itemizeObservers[i].disconnect();
184 | window.itemizeObservers.splice(i, 1);
185 | }
186 | }
187 | }
188 | }
189 | }, {
190 | key: "applyItemize",
191 | value: function applyItemize(parents, applyOptions) {
192 | var _this3 = this;
193 |
194 | var childItemizedNb = 0;
195 | var knownErrors = "";
196 |
197 | try {
198 | var _loop = function _loop(i) {
199 | var parent = parents[i];
200 |
201 | if (!parent.classList.contains("itemize_remove_btn") && parent.type !== "text/css" && parent.tagName !== "BR" && parent.tagName !== "SCRIPT" && parent.tagName !== "STYLE") {
202 | var parentInList = false;
203 |
204 | for (var p = 0; p < _this3.containers.length; p++) {
205 | if (parent.itemizeContainerId && parent.itemizeContainerId === _this3.containers[p].itemizeContainerId) {
206 | parentInList = true;
207 | break;
208 | }
209 | }
210 |
211 | if (!parentInList) {
212 | _this3.containers.push(parent);
213 | }
214 |
215 | if (parent.itemizeContainerId) {
216 | _this3.clearObservers(parent.itemizeContainerId);
217 | }
218 |
219 | var parentItemizeId = _this3.makeId(8);
220 |
221 | parent.itemizeContainerId = parentItemizeId;
222 |
223 | for (var _i2 = parent.classList.length - 1; _i2 >= 0; _i2--) {
224 | // cleaning parent of itemize_parent_xxxx classes
225 | if (parent.classList[_i2].indexOf("itemize_parent") !== -1) {
226 | parent.classList.remove(parent.classList[_i2]);
227 | break;
228 | }
229 | }
230 |
231 | parent.classList.add("itmz_parent");
232 | parent.classList.add("itemize_parent_".concat(parentItemizeId));
233 |
234 | var options = _objectSpread({}, _this3.globalOptions); // cloning options
235 |
236 |
237 | if (applyOptions) {
238 | options = _this3.mergeOptions(applyOptions);
239 | }
240 |
241 | options = _this3.getOptionsFromAttributes(parent, options);
242 | parent.itemizeOptions = options; // node added OBSERVER
243 |
244 | if (parent.itemizeOptions.itemizeAddedElement) {
245 | var config = {
246 | childList: true
247 | };
248 | var scope = _this3;
249 |
250 | var callback = function callback(mutationsList, observer) {
251 | for (var z = 0; z < mutationsList.length; z++) {
252 | var mutation = mutationsList[z];
253 |
254 | if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
255 | for (var x = 0; x < mutation.addedNodes.length; x++) {
256 | var node = mutation.addedNodes[x];
257 | var newNode = true;
258 |
259 | if (node.classList) {
260 | for (var y = 0; y < node.classList.length; y++) {
261 | if (node.classList[y].indexOf("itemize_") !== -1) {
262 | // check si le child n'est pas un element deja added qui passe par un flipAnim
263 | newNode = false;
264 | }
265 | }
266 |
267 | if (newNode) {
268 | if (!node.getAttribute("notitemize") && node.parentElement && node.type !== "text/css" && node.tagName !== "BR" && node.tagName !== "SCRIPT" && node.parentElement.itemizeContainerId && node.tagName !== "STYLE") {
269 | if (node.parentElement.itemizeOptions && node.parentElement.itemizeOptions.anim) {
270 | node.classList.add("itemize_hide");
271 | scope.itemizeChild(node, node.parentElement, true);
272 | scope.flipRead(scope.items);
273 | scope.flipAdd(node);
274 | scope.flipPlay(scope.items, node.parentElement.itemizeOptions.animDuration);
275 | } else {
276 | scope.itemizeChild(node, node.parentElement, true);
277 | }
278 | }
279 |
280 | if (parent.itemizeOptions.onAddItem) {
281 | parent.itemizeOptions.onAddItem(node);
282 | }
283 | }
284 | }
285 | }
286 | }
287 | }
288 | };
289 |
290 | if (window.itemizeObservers) {
291 | // ajout des observer de facon global et suppression/deconnection quand parent n'est plus present
292 | window.itemizeObservers.push(new MutationObserver(callback));
293 | } else {
294 | window.itemizeObservers = [new MutationObserver(callback)];
295 | }
296 |
297 | window.itemizeObservers[window.itemizeObservers.length - 1].observe(parent, config);
298 | window.itemizeObservers[window.itemizeObservers.length - 1].itemizeContainerId = parent.itemizeContainerId;
299 | }
300 |
301 | _this3.applyCss(parent);
302 |
303 | for (var z = 0; z < parent.children.length; z++) {
304 | var child = parent.children[z];
305 |
306 | if (_this3.itemizeChild(child, parent)) {
307 | childItemizedNb++;
308 | }
309 | }
310 | }
311 | };
312 |
313 | for (var i = 0; i < parents.length; i++) {
314 | _loop(i);
315 | }
316 |
317 | return childItemizedNb;
318 | } catch (error) {
319 | console.error(" - Itemize error - \n" + knownErrors);
320 | console.error(error);
321 | }
322 | }
323 | }, {
324 | key: "childIsItemizable",
325 | value: function childIsItemizable(child, parent) {
326 | return child.type !== "text/css" && typeof child.getAttribute("notitemize") !== "string" && child.tagName !== "BR" && child.tagName !== "SCRIPT" && !child.itemizeItemId && !child.itemizeBtn && !child.classList.contains("itemize_remove_btn") && !(parent.parentNode.itemizeOptions && child.classList.contains(parent.parentNode.itemizeOptions.removeBtnClass));
327 | }
328 | }, {
329 | key: "itemizeChild",
330 | value: function itemizeChild(child, parent, fromObserver) {
331 | var _this4 = this;
332 |
333 | if (this.childIsItemizable(child, parent)) {
334 | child.itemizeItemId = this.makeId(8);
335 | this.items.push(child);
336 |
337 | if (parent.itemizeItems) {
338 | parent.itemizeItems.push(child);
339 | } else {
340 | parent.itemizeItems = [child];
341 | }
342 |
343 | child.classList.add("itemize_item_" + child.itemizeItemId);
344 | child.classList.add("itmz_item");
345 |
346 | if (!parent.itemizeOptions.removeBtn) {
347 | child.onclick = function (e) {
348 | e.stopPropagation();
349 |
350 | if (parent.itemizeOptions.modalConfirm) {
351 | _this4.modalConfirm(child);
352 | } else {
353 | _this4.remove(child.itemizeItemId);
354 | }
355 | };
356 |
357 | if (parent.itemizeOptions.outlineItemOnHover) {
358 | this.shadowOnHover(child, false);
359 | }
360 | } else {
361 | if (!parent.itemizeOptions.removeBtnClass) {
362 | var computedStyle = getComputedStyle(child);
363 |
364 | if (child.style.position !== "absolute" && child.style.position !== "fixed" && computedStyle.position !== "absolute" && computedStyle.position !== "fixed") {
365 | child.style.position = "relative";
366 | }
367 |
368 | var button = document.createElement("div");
369 | button.classList.add("itemize_btn_" + child.itemizeItemId);
370 | button.classList.add("itemize_remove_btn");
371 | button.itemizeBtn = true;
372 |
373 | button.onclick = function (e) {
374 | e.stopPropagation();
375 |
376 | if (parent.itemizeOptions.modalConfirm) {
377 | _this4.modalConfirm(child);
378 | } else {
379 | _this4.remove(child.itemizeItemId);
380 | }
381 | };
382 |
383 | child.appendChild(button);
384 |
385 | if (parent.itemizeOptions.outlineItemOnHover) {
386 | this.shadowOnHover(button, true);
387 | }
388 | } else {
389 | var _button = document.querySelector(".itemize_item_" + child.itemizeItemId + " ." + parent.itemizeOptions.removeBtnClass);
390 |
391 | if (!_button) {
392 | console.error(" - Itemize error - \n Cannot find specified button's class: " + parent.itemizeOptions.removeBtnClass + "\n");
393 | } else {
394 | _button.onclick = function (e) {
395 | e.stopPropagation();
396 |
397 | if (parent.itemizeOptions.modalConfirm) {
398 | _this4.modalConfirm(child);
399 | } else {
400 | _this4.remove(child.itemizeItemId);
401 | }
402 | };
403 |
404 | if (parent.itemizeOptions.outlineItemOnHover) {
405 | this.shadowOnHover(_button, true);
406 | }
407 | }
408 | }
409 | }
410 |
411 | if (parent.itemizeOptions.dragAndDrop) {
412 | child.setAttribute("draggable", "true");
413 | child.style.cursor = "move";
414 | child.addEventListener("dragstart", function (event) {
415 | event.stopPropagation();
416 | _this4.draggedEl = child;
417 |
418 | if (!child.opacityBeforeDrag) {
419 | child.opacityBeforeDrag = getComputedStyle(child).opacity;
420 | }
421 |
422 | if (!child.inFlipAnim) {
423 | event.dataTransfer.effectAllowed = "move";
424 | event.dataTransfer.setData("Text", "");
425 | }
426 |
427 | return true;
428 | });
429 | child.addEventListener("dragend", function (event) {
430 | event.preventDefault();
431 | event.stopPropagation();
432 |
433 | if (_this4.draggedEl) {
434 | if (_this4.draggedEl.opacityBeforeDrag) {
435 | _this4.draggedEl.style.opacity = _this4.draggedEl.opacityBeforeDrag;
436 | }
437 |
438 | _this4.draggedEl = null;
439 | }
440 |
441 | return true;
442 | });
443 | child.addEventListener("drag", function (event) {
444 | return true;
445 | });
446 | child.addEventListener("dragover", function (event) {
447 | event.preventDefault();
448 |
449 | if (_this4.draggedEl && !child.inFlipAnim) {
450 | if (_this4.draggedEl.parentNode === child.parentNode && !_this4.draggedEl.inFlipAnim) {
451 | _this4.draggedEl.style.opacity = "0.6";
452 |
453 | _this4.flipRead(_this4.items);
454 |
455 | var draggedElNodeIndex = Array.prototype.indexOf.call(_this4.draggedEl.parentNode.children, _this4.draggedEl);
456 | var draggedOnNodeIndex = Array.prototype.indexOf.call(_this4.draggedEl.parentNode.children, child);
457 |
458 | if (draggedElNodeIndex < draggedOnNodeIndex) {
459 | if (child.nextElementSibling && child.nextElementSibling.itemizeItemId) {
460 | _this4.draggedEl.parentNode.insertBefore(_this4.draggedEl, child.nextElementSibling);
461 | } else if (!child.nextElementSibling || !child.nextElementSibling.itemizeItemId) {
462 | var temp = document.createElement("div");
463 | temp.setAttribute("notitemize", "");
464 |
465 | _this4.draggedEl.parentNode.insertBefore(temp, child);
466 |
467 | _this4.draggedEl.parentNode.insertBefore(child, temp);
468 |
469 | _this4.draggedEl.parentNode.insertBefore(_this4.draggedEl, temp);
470 |
471 | _this4.draggedEl.parentNode.removeChild(temp);
472 | }
473 | } else if (draggedElNodeIndex > draggedOnNodeIndex) {
474 | _this4.draggedEl.parentNode.insertBefore(_this4.draggedEl, child);
475 | }
476 |
477 | _this4.flipPlay(_this4.items, 250, true);
478 | }
479 | }
480 |
481 | return false;
482 | });
483 | child.addEventListener("dragenter", function (event) {
484 | event.preventDefault();
485 | return false;
486 | });
487 | child.addEventListener("dragleave", function (event) {
488 | event.preventDefault();
489 | return false;
490 | });
491 | child.addEventListener("drop", function (event) {
492 | event.preventDefault();
493 |
494 | if (_this4.draggedEl && _this4.draggedEl.opacityBeforeDrag) {
495 | _this4.draggedEl.style.opacity = _this4.draggedEl.opacityBeforeDrag;
496 | }
497 |
498 | return false;
499 | });
500 | }
501 |
502 | if (fromObserver) {
503 | this.showNotification("added", child);
504 | }
505 |
506 | return true;
507 | } else {
508 | return false;
509 | }
510 | }
511 | }, {
512 | key: "shadowOnHover",
513 | value: function shadowOnHover(elem, isRemoveBtn) {
514 | var parent = null;
515 |
516 | if (isRemoveBtn) {
517 | parent = elem.parentElement;
518 | } else {
519 | parent = elem;
520 | }
521 |
522 | if (parent) {
523 | elem.parentShadowStyle = parent.style.boxShadow;
524 | }
525 |
526 | elem.onmouseenter = function (e) {
527 | if (parent) {
528 | parent.style.boxShadow = "inset 0px 0px 0px 3px rgba(15,179,0,1)";
529 | }
530 | };
531 |
532 | elem.onmouseleave = function (e) {
533 | if (parent) {
534 | parent.style.boxShadow = elem.parentShadowStyle;
535 | }
536 | };
537 | }
538 | }, {
539 | key: "applyCss",
540 | value: function applyCss(parent) {
541 | var options = parent.itemizeOptions;
542 | var oldStyle = parent.querySelector(".itemize_style");
543 |
544 | if (oldStyle) {
545 | oldStyle.parentNode.removeChild(oldStyle);
546 | }
547 |
548 | var css = document.createElement("style");
549 | css.classList.add("itemize_style");
550 | css.type = "text/css";
551 | var styles = ""; // parent global styles
552 |
553 | styles += ".itemize_parent_".concat(parent.itemizeContainerId, " .itemize_hide{display:none}"); // remove btn styles
554 |
555 | if (options.removeBtn && !options.removeBtnClass) {
556 | var btnMargin = options.removeBtnMargin + "px";
557 | var btnPos = {
558 | top: 0,
559 | right: 0,
560 | bottom: "auto",
561 | left: "auto",
562 | marginTop: btnMargin,
563 | marginRight: btnMargin,
564 | marginBottom: "0px",
565 | marginLeft: "0px",
566 | transform: "none"
567 | };
568 |
569 | switch (options.removeBtnPosition) {
570 | case "center-right":
571 | btnPos.top = "50%";
572 | btnPos.marginTop = "0px";
573 | btnPos.transform = "translateY(-50%)";
574 | break;
575 |
576 | case "bottom-right":
577 | btnPos.top = "auto";
578 | btnPos.bottom = 0;
579 | btnPos.marginTop = "0px";
580 | btnPos.marginBottom = btnMargin;
581 | break;
582 |
583 | case "bottom-center":
584 | btnPos.top = "auto";
585 | btnPos.right = "auto";
586 | btnPos.bottom = 0;
587 | btnPos.left = "50%";
588 | btnPos.marginTop = "0px";
589 | btnPos.marginRight = "0px";
590 | btnPos.marginBottom = btnMargin;
591 | btnPos.transform = "translateX(-50%)";
592 | break;
593 |
594 | case "bottom-left":
595 | btnPos.top = "auto";
596 | btnPos.right = "auto";
597 | btnPos.bottom = 0;
598 | btnPos.left = 0;
599 | btnPos.marginTop = "0px";
600 | btnPos.marginRight = "0px";
601 | btnPos.marginBottom = btnMargin;
602 | btnPos.marginLeft = btnMargin;
603 | break;
604 |
605 | case "center-left":
606 | btnPos.top = "50%";
607 | btnPos.right = "auto";
608 | btnPos.left = 0;
609 | btnPos.marginTop = "0px";
610 | btnPos.marginRight = "0px";
611 | btnPos.marginLeft = btnMargin;
612 | btnPos.transform = "translateY(-50%)";
613 | break;
614 |
615 | case "top-left":
616 | btnPos.right = "auto";
617 | btnPos.left = 0;
618 | btnPos.marginRight = "0px";
619 | btnPos.marginLeft = btnMargin;
620 | break;
621 |
622 | case "top-center":
623 | btnPos.right = "auto";
624 | btnPos.left = "50%";
625 | btnPos.marginRight = "0px";
626 | btnPos.marginTop = btnMargin;
627 | btnPos.transform = "translateX(-50%)";
628 | break;
629 |
630 | default:
631 | break;
632 | }
633 |
634 | styles += ".itemize_parent_".concat(parent.itemizeContainerId, " .itemize_remove_btn{position:absolute;top:").concat(btnPos.top, "!important;right:").concat(btnPos.right, "!important;bottom:").concat(btnPos.bottom, "!important;left:").concat(btnPos.left, "!important;width:").concat(options.removeBtnWidth, "px!important;height:").concat(options.removeBtnWidth, "px!important;overflow:hidden;cursor:pointer;margin:").concat(btnPos.marginTop, " ").concat(btnPos.marginRight, " ").concat(btnPos.marginBottom, " ").concat(btnPos.marginLeft, ";transform:").concat(btnPos.transform, ";border-radius:").concat(options.removeBtnCircle ? "50%" : "0%", ";background-color:").concat(options.removeBtnBgColor, "}.itemize_remove_btn:hover{background-color:").concat(options.removeBtnBgHoverColor, "}.itemize_parent_").concat(parent.itemizeContainerId, " .itemize_remove_btn:hover::after,.itemize_parent_").concat(parent.itemizeContainerId, " .itemize_remove_btn:hover::before{transition:background 150ms ease-in-out;background:").concat(options.removeBtnHoverColor, "}.itemize_parent_").concat(parent.itemizeContainerId, " .itemize_remove_btn::after,.itemize_parent_").concat(parent.itemizeContainerId, " .itemize_remove_btn::before{content:'';position:absolute;height:").concat(options.removeBtnThickness, "px;transition:background 150ms ease-in-out;width:").concat(options.removeBtnWidth / 2, "px;top:50%;left:25%;margin-top:").concat(options.removeBtnThickness * 0.5 < 1 ? -1 : -options.removeBtnThickness * 0.5, "px;background:").concat(options.removeBtnColor, ";border-radius:").concat(options.removeBtnSharpness, "}.itemize_parent_").concat(parent.itemizeContainerId, " .itemize_remove_btn::before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.itemize_parent_").concat(parent.itemizeContainerId, " .itemize_remove_btn::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}");
635 | }
636 |
637 | if (css.styleSheet) {
638 | css.styleSheet.cssText = styles;
639 | } else {
640 | css.appendChild(document.createTextNode(styles));
641 | }
642 |
643 | parent.appendChild(css);
644 | }
645 | }, {
646 | key: "cancelItemize",
647 | value: function cancelItemize(targets) {
648 | var unItemizedNb = 0;
649 |
650 | try {
651 | var parentTargets = [];
652 |
653 | if (targets === "all") {
654 | parentTargets = this.containers.splice(0); // cloning
655 | } else {
656 | parentTargets = targets;
657 | }
658 |
659 | for (var z = 0; z < parentTargets.length; z++) {
660 | var parent = parentTargets[z];
661 | var targetItems = parent.querySelectorAll(".itmz_item");
662 |
663 | for (var j = 0; j < targetItems.length; j++) {
664 | if (targetItems[j].itemizeContainerId) {
665 | this.clearObservers(targetItems[j].itemizeContainerId);
666 | }
667 |
668 | if (targetItems[j].itemizeItemId) {
669 | this.cancelItemizeChild(targetItems[j], targetItems[j].parentNode);
670 | unItemizedNb++;
671 | }
672 | }
673 |
674 | if (parent.itemizeContainerId) {
675 | this.clearObservers(parent.itemizeContainerId);
676 |
677 | for (var k = parent.classList.length - 1; k >= 0; k--) {
678 | if (parent.classList[k].indexOf("itemize_parent") !== -1) {
679 | parent.classList.remove(parent.classList[k]);
680 | parent.classList.remove("itmz_parent");
681 | break;
682 | }
683 | }
684 |
685 | var parentsInParent = parent.querySelectorAll(".itmz_parent");
686 |
687 | for (var v = 0; v < parentsInParent.length; v++) {
688 | this.cancelItemize(parentsInParent[v]);
689 | }
690 |
691 | parent.itemizeContainerId = null;
692 | parent.itemizeOptions = null;
693 |
694 | for (var i = 0; i < this.containers.length; i++) {
695 | if (this.containers[i] === parent) {
696 | this.containers.splice(i, 1);
697 | break;
698 | }
699 | }
700 | }
701 | }
702 |
703 | return unItemizedNb;
704 | } catch (err) {
705 | console.error(err);
706 | }
707 | }
708 | }, {
709 | key: "cancelItemizeChild",
710 | value: function cancelItemizeChild(child, parent) {
711 | for (var r = this.items.length - 1; r >= 0; r--) {
712 | if (this.items[r] === child) {
713 | this.cleanItem(this.items[r]);
714 | this.items.splice(r, 1);
715 | break;
716 | }
717 | }
718 |
719 | if (!parent.itemizeOptions.removeBtn) {
720 | child.onclick = null;
721 | } else {
722 | if (!parent.itemizeOptions.removeBtnClass) {
723 | var btn = child.querySelector(".itemize_remove_btn");
724 |
725 | if (btn) {
726 | btn.parentNode.removeChild(btn);
727 | }
728 | } else {
729 | var button = child.querySelector("." + parent.itemizeOptions.removeBtnClass);
730 |
731 | if (button) {
732 | button.onclick = null;
733 | }
734 | }
735 | }
736 |
737 | var oldStyle = parent.querySelector(".itemize_style");
738 |
739 | if (oldStyle) {
740 | oldStyle.parentNode.removeChild(oldStyle);
741 | }
742 |
743 | for (var s = child.classList.length - 1; s >= 0; s--) {
744 | if (child.classList[s].indexOf("itemize_item_") !== -1) {
745 | child.classList.remove(child.classList[s]);
746 | break;
747 | }
748 | }
749 |
750 | child.itemizeItemId = null;
751 | }
752 | }, {
753 | key: "modalConfirm",
754 | value: function modalConfirm(el) {
755 | var _this5 = this;
756 |
757 | try {
758 | var modalAnimDuration = 150;
759 | var backDrop = document.createElement("div");
760 | var modal = document.createElement("div");
761 | var notificationText = document.createElement("div");
762 | var btnContainer = document.createElement("div");
763 | var btnConfirm = document.createElement("button");
764 | var btnCancel = document.createElement("button");
765 | var crossClose = document.createElement("div");
766 | var body = document.querySelector("body"); // const bodyInitialOverflow = body.style.overflow;
767 | // body.style.overflow = "hidden";
768 |
769 | backDrop.classList.add("itemize_modal_backdrop");
770 | modal.classList.add("itemize_modal");
771 | notificationText.classList.add("itemize_modal_text");
772 | btnConfirm.classList.add("itemize_modal_btnConfirm");
773 | btnCancel.classList.add("itemize_modal_btnCancel");
774 | crossClose.classList.add("itemize_modal_cross");
775 | notificationText.textContent = el.parentElement.itemizeOptions.modalText;
776 | btnConfirm.innerHTML = "Yes";
777 | btnCancel.innerHTML = "Cancel";
778 | btnContainer.appendChild(btnCancel);
779 | btnContainer.appendChild(btnConfirm);
780 | modal.appendChild(notificationText);
781 | modal.appendChild(btnContainer);
782 | modal.appendChild(crossClose);
783 |
784 | var hideModal = function hideModal(bdy, bckdrop, mdal) {
785 | bckdrop.onclick = null;
786 | mdal.onclick = null;
787 |
788 | if (bckdrop.animate) {
789 | bckdrop.animate([{
790 | opacity: 1
791 | }, {
792 | opacity: 0
793 | }], {
794 | duration: modalAnimDuration,
795 | easing: "ease-in-out",
796 | fill: "both"
797 | });
798 | } else {
799 | _this5.animateRAF(bckdrop, [{
800 | opacity: 1
801 | }], [{
802 | opacity: 0
803 | }], modalAnimDuration);
804 | }
805 |
806 | if (mdal.animate) {
807 | mdal.animate([{
808 | opacity: 1,
809 | transform: "translateY(-50%) translateX(-50%)"
810 | }, {
811 | opacity: 0,
812 | transform: "translateY(0%) translateX(-50%)"
813 | }], {
814 | duration: modalAnimDuration,
815 | easing: "ease-in-out",
816 | fill: "both"
817 | });
818 | } else {
819 | _this5.animateRAF(mdal, [{
820 | opacity: 1,
821 | transform: {
822 | translateX: -50,
823 | translateY: -50,
824 | unit: "%"
825 | }
826 | }], [{
827 | opacity: 0,
828 | transform: {
829 | translateX: -50,
830 | translateY: 0,
831 | unit: "%"
832 | }
833 | }], modalAnimDuration);
834 | }
835 |
836 | clearTimeout(_this5.modalDisappearTimeout);
837 | _this5.modalDisappearTimeout = setTimeout(function () {
838 | bdy.removeChild(bckdrop);
839 | bdy.removeChild(mdal); // bdy.style.overflow = bodyInitialOverflow;
840 | }, modalAnimDuration);
841 | };
842 |
843 | backDrop.onclick = function () {
844 | if (!backDrop.hiding) {
845 | hideModal(body, backDrop, modal);
846 | }
847 |
848 | backDrop.hiding = true;
849 | };
850 |
851 | btnCancel.onclick = function () {
852 | if (!btnCancel.clicked) {
853 | hideModal(body, backDrop, modal);
854 | }
855 |
856 | btnCancel.clicked = true;
857 | };
858 |
859 | btnConfirm.onclick = function () {
860 | if (!btnConfirm.clicked) {
861 | hideModal(body, backDrop, modal);
862 |
863 | _this5.remove(el);
864 | }
865 |
866 | btnConfirm.clicked = true;
867 | };
868 |
869 | crossClose.onclick = function () {
870 | if (!crossClose.clicked) {
871 | hideModal(body, backDrop, modal);
872 | }
873 |
874 | crossClose.clicked = true;
875 | };
876 |
877 | Object.assign(modal.style, {
878 | all: "none",
879 | position: "fixed",
880 | top: "50%",
881 | left: "50%",
882 | transform: "translate(-50%, -50%)",
883 | padding: "25px",
884 | background: "#FFFFFF",
885 | width: "90vw",
886 | maxWidth: "500px",
887 | borderRadius: "4px",
888 | boxSizing: "border-box",
889 | display: "flex",
890 | flexDirection: "column",
891 | justifyContent: "center",
892 | textAlign: "center",
893 | fontFamily: "helvetica",
894 | zIndex: 100000000
895 | });
896 | var modalCss = ".itemize_modal_btnConfirm:hover{ background-color: #c83e34 !important; transition: background-color 0.3s ease-in-out }.itemize_modal_btnCancel:hover{ background-color: #4a5055 !important; transition: background-color 0.3s ease-in-out }.itemize_modal_cross {cursor:pointer;position: absolute;right: 5px;top: 5px;width: 18px;height:18px;opacity:0.3;}.itemize_modal_cross:hover{opacity:1;}.itemize_modal_cross:before,.itemize_modal_cross:after{position:absolute;left:9px;content:' ';height: 19px;width:2px;background-color:#333;}.itemize_modal_cross:before{transform:rotate(45deg);}.itemize_modal_cross:after{transform:rotate(-45deg);}";
897 | var styleEl = document.createElement("style");
898 |
899 | if (styleEl.styleSheet) {
900 | styleEl.styleSheet.cssText = modalCss;
901 | } else {
902 | styleEl.appendChild(document.createTextNode(modalCss));
903 | }
904 |
905 | modal.appendChild(styleEl);
906 | Object.assign(notificationText.style, {
907 | all: "none",
908 | marginBottom: "25px",
909 | fontSize: "16px"
910 | });
911 | Object.assign(btnContainer.style, {
912 | width: "100%",
913 | display: "flex"
914 | });
915 | Object.assign(btnCancel.style, {
916 | all: "none",
917 | fontSize: "14px",
918 | background: "#6C757D",
919 | border: "none",
920 | padding: "10px 0 10px 0",
921 | borderTopLeftRadius: "4px",
922 | borderBottomLeftRadius: "4px",
923 | flex: "1 0 auto",
924 | cursor: "pointer",
925 | color: "#FFFFFF",
926 | transition: "background-color 0.3s ease-in-out"
927 | });
928 | Object.assign(btnConfirm.style, {
929 | all: "none",
930 | fontSize: "14px",
931 | background: "#F94336",
932 | border: "none",
933 | padding: "10px 0 10px 0",
934 | borderTopRightRadius: "4px",
935 | borderBottomRightRadius: "4px",
936 | flex: "1 0 auto",
937 | cursor: "pointer",
938 | color: "#FFFFFF",
939 | transition: "background-color 0.3s ease-in-out"
940 | });
941 | Object.assign(backDrop.style, {
942 | position: "fixed",
943 | top: "0",
944 | left: "0",
945 | width: "100%",
946 | height: "100%",
947 | background: "rgba(0, 0, 0,0.7)",
948 | zIndex: 10000000
949 | });
950 | body.insertBefore(modal, body.childNodes[0]);
951 | body.insertBefore(backDrop, body.childNodes[0]);
952 |
953 | if (backDrop.animate) {
954 | backDrop.animate([{
955 | opacity: 0
956 | }, {
957 | opacity: 1
958 | }], {
959 | duration: 300,
960 | easing: "ease-out",
961 | fill: "both"
962 | });
963 | } else {
964 | this.animateRAF(backDrop, [{
965 | opacity: 0
966 | }], [{
967 | opacity: 1
968 | }], modalAnimDuration);
969 | }
970 |
971 | if (modal.animate) {
972 | modal.animate([{
973 | opacity: 0,
974 | transform: "translateY(-100%) translateX(-50%)"
975 | }, {
976 | opacity: 1,
977 | transform: "translateY(-50%) translateX(-50%)"
978 | }], {
979 | duration: modalAnimDuration,
980 | easing: "ease-in",
981 | fill: "both"
982 | });
983 | } else {
984 | this.animateRAF(modal, [{
985 | opacity: 0,
986 | transform: {
987 | translateX: -50,
988 | translateY: -100,
989 | unit: "%"
990 | }
991 | }], [{
992 | opacity: 1,
993 | transform: {
994 | translateX: -50,
995 | translateY: -50,
996 | unit: "%"
997 | }
998 | }], modalAnimDuration);
999 | }
1000 | } catch (error) {
1001 | console.error(" - Itemize error - \n" + error);
1002 | }
1003 | }
1004 | }, {
1005 | key: "showNotification",
1006 | value: function showNotification(action, element) {
1007 | var _this6 = this;
1008 |
1009 | if (element.parentElement.itemizeOptions.showAddNotifications && action === "added" || element.parentElement.itemizeOptions.showRemoveNotifications && action === "removed") {
1010 | var notificationClassName = "";
1011 | var notificationTextClassName = "";
1012 | var notificationBackground = "";
1013 | var notificationTimerColor = "";
1014 | var notificationTextContent = "";
1015 | var notificationLeftPos = "";
1016 | var notificationTopPos = "";
1017 | var notificationTranslateX = "";
1018 | var minusOrNothing = "-";
1019 | var notificationIsTop = false;
1020 | var notificationTimerDuration = element.parentElement.itemizeOptions.notificationTimer;
1021 | var notifPos = element.parentElement.itemizeOptions.notificationPosition;
1022 |
1023 | if (notifPos === "bottom-center") {
1024 | notificationLeftPos = "50%";
1025 | notificationTopPos = "100%";
1026 | notificationTranslateX = "-50%";
1027 | } else if (notifPos === "bottom-right") {
1028 | notificationLeftPos = "100%";
1029 | notificationTopPos = "100%";
1030 | notificationTranslateX = "-100%";
1031 | } else if (notifPos === "bottom-left") {
1032 | notificationLeftPos = "0%";
1033 | notificationTopPos = "100%";
1034 | notificationTranslateX = "0%";
1035 | } else if (notifPos === "top-center") {
1036 | notificationLeftPos = "50%";
1037 | notificationTopPos = "0%";
1038 | notificationTranslateX = "-50%";
1039 | minusOrNothing = "";
1040 | notificationIsTop = true;
1041 | } else if (notifPos === "top-right") {
1042 | notificationLeftPos = "100%";
1043 | notificationTopPos = "0%";
1044 | notificationTranslateX = "-100%";
1045 | minusOrNothing = "";
1046 | notificationIsTop = true;
1047 | } else if (notifPos === "top-left") {
1048 | notificationLeftPos = "0%";
1049 | notificationTopPos = "0%";
1050 | notificationTranslateX = "0%";
1051 | minusOrNothing = "";
1052 | notificationIsTop = true;
1053 | }
1054 |
1055 | if (action === "removed") {
1056 | notificationClassName = "itemize_remove_notification";
1057 | notificationTextClassName = "itemize_remove_notification_text";
1058 | notificationBackground = "#BD5B5B";
1059 | notificationTimerColor = "#DEADAD";
1060 | notificationTextContent = element.parentElement.itemizeOptions.removeNotificationText;
1061 | } else if (action === "added") {
1062 | notificationClassName = "itemize_add_notification";
1063 | notificationTextClassName = "itemize_add_notification_text";
1064 | notificationBackground = "#00AF66";
1065 | notificationTimerColor = "#80D7B3";
1066 | notificationTextContent = element.parentElement.itemizeOptions.addNotificationText;
1067 | }
1068 |
1069 | if (this.notificationNbs[notifPos]) {
1070 | this.notificationNbs[notifPos]++;
1071 | } else {
1072 | this.notificationNbs[notifPos] = 1;
1073 | }
1074 |
1075 | var popNotification = document.createElement("div");
1076 | popNotification.notificationId = this.notificationNbs[notifPos];
1077 | var notificationTimer = document.createElement("div");
1078 | var notificationText = document.createElement("div");
1079 | popNotification.classList.add(notificationClassName);
1080 | popNotification.classList.add("itemize_notification_" + notifPos);
1081 | notificationText.classList.add(notificationTextClassName);
1082 | notificationText.textContent = notificationTextContent;
1083 | Object.assign(notificationText.style, {
1084 | all: "none",
1085 | boxSizing: "border-box",
1086 | width: "100%",
1087 | height: "100%",
1088 | textAlign: "center",
1089 | whiteSpace: "nowrap",
1090 | padding: "10px 15px 10px 15px",
1091 | fontSize: "16px",
1092 | fontWeight: "normal"
1093 | });
1094 | Object.assign(notificationTimer.style, {
1095 | background: notificationTimerColor,
1096 | width: "100%",
1097 | height: "5px"
1098 | });
1099 | Object.assign(popNotification.style, {
1100 | boxSizing: "border-box",
1101 | position: "fixed",
1102 | display: "flex",
1103 | flexDirection: "column",
1104 | justifyContent: "center",
1105 | top: notificationTopPos,
1106 | left: notificationLeftPos,
1107 | border: "solid 1px " + notificationTimerColor,
1108 | borderRadius: "4px",
1109 | transform: "translate(".concat(notificationTranslateX, ", ").concat(minusOrNothing).concat(this.notificationNbs[notifPos] * 100 - (notificationIsTop ? 100 : 0), "%)"),
1110 | fontFamily: "helvetica",
1111 | background: notificationBackground,
1112 | color: "#FFFFFF",
1113 | zIndex: 100000000
1114 | });
1115 | document.querySelector("body").appendChild(popNotification);
1116 | popNotification.appendChild(notificationTimer);
1117 | popNotification.appendChild(notificationText);
1118 |
1119 | if (popNotification.animate) {
1120 | popNotification.animate([{
1121 | opacity: 0
1122 | }, {
1123 | opacity: 1
1124 | }], {
1125 | duration: 300,
1126 | easing: "linear",
1127 | fill: "both"
1128 | });
1129 | } else {
1130 | this.animateRAF(popNotification, [{
1131 | opacity: 0
1132 | }], [{
1133 | opacity: 1
1134 | }], 300);
1135 | }
1136 |
1137 | if (notificationTimer.animate) {
1138 | notificationTimer.animate([{
1139 | width: "100%"
1140 | }, {
1141 | width: "0%"
1142 | }], {
1143 | duration: notificationTimerDuration,
1144 | easing: "linear",
1145 | fill: "both"
1146 | });
1147 | } else {
1148 | this.animateRAF(notificationTimer, [{
1149 | width: {
1150 | value: 100,
1151 | unit: "%"
1152 | }
1153 | }], [{
1154 | width: {
1155 | value: 0,
1156 | unit: "%"
1157 | }
1158 | }], notificationTimerDuration);
1159 | }
1160 |
1161 | setTimeout(function () {
1162 | var notificationList = document.querySelectorAll(".itemize_notification_" + notifPos);
1163 |
1164 | for (var i = 0; i < notificationList.length; i++) {
1165 | if (notificationList[i].notificationId > 0) {
1166 | var translateYStart = parseInt("".concat(minusOrNothing).concat(notificationList[i].notificationId * 100 - (notificationIsTop ? 100 : 0)));
1167 | var translateYEnd = parseInt("".concat(minusOrNothing).concat(notificationList[i].notificationId * 100 - (notificationIsTop ? 100 : 0) - 100));
1168 |
1169 | if (notificationList[i].animate) {
1170 | notificationList[i].animate([{
1171 | transform: "translate(".concat(notificationTranslateX, ", ").concat(translateYStart, "%)")
1172 | }, {
1173 | transform: "translate(".concat(notificationTranslateX, ", ").concat(translateYEnd, "%)")
1174 | }], {
1175 | duration: 150,
1176 | easing: "ease-in-out",
1177 | fill: "both"
1178 | });
1179 | } else {
1180 | _this6.animateRAF(notificationList[i], [{
1181 | transform: {
1182 | translateX: parseInt(notificationTranslateX),
1183 | translateY: translateYStart,
1184 | unit: "%"
1185 | }
1186 | }], [{
1187 | transform: {
1188 | translateX: parseInt(notificationTranslateX),
1189 | translateY: translateYEnd,
1190 | unit: "%"
1191 | }
1192 | }], 150);
1193 | }
1194 |
1195 | notificationList[i].notificationId--;
1196 | }
1197 | }
1198 |
1199 | _this6.notificationNbs[notifPos]--;
1200 | setTimeout(function () {
1201 | document.querySelector("body").removeChild(popNotification);
1202 | }, 300);
1203 | }, notificationTimerDuration);
1204 | }
1205 | }
1206 | }, {
1207 | key: "remove",
1208 | value: function remove(el) {
1209 | var _this7 = this;
1210 |
1211 | try {
1212 | var item = null;
1213 |
1214 | if (typeof el === "string") {
1215 | for (var i = 0; i < this.items.length; i++) {
1216 | if (this.items[i].itemizeItemId === el) {
1217 | item = this.items[i];
1218 | item.arrayPosition = i;
1219 | }
1220 | }
1221 |
1222 | if (!item) {
1223 | item = document.querySelector(el);
1224 |
1225 | if (!item || !item.itemizeItemId) {
1226 | throw new Error(" - Itemize error - \nNot a valid Itemize element");
1227 | }
1228 |
1229 | for (var _i3 = 0; _i3 < this.items.length; _i3++) {
1230 | if (this.items[_i3].itemizeItemId === item.itemizeItemId) {
1231 | item.arrayPosition = _i3;
1232 | }
1233 | }
1234 | }
1235 |
1236 | if (!item) {
1237 | throw new Error(" - Itemize error - \nNo item found to remove");
1238 | }
1239 | } else {
1240 | item = el;
1241 |
1242 | if (!item) {
1243 | throw new Error(" - Itemize error - \nNo item found to remove");
1244 | }
1245 |
1246 | if (!item.itemizeItemId) {
1247 | throw new Error(" - Itemize error - \nNot a valid Itemize element");
1248 | }
1249 |
1250 | for (var _i4 = 0; _i4 < this.items.length; _i4++) {
1251 | if (item.itemizeItemId === this.items[_i4].itemizeItemId) {
1252 | item.arrayPosition = _i4;
1253 | }
1254 | }
1255 | }
1256 |
1257 | if ((item.arrayPosition || item.arrayPosition === 0) && item.parentElement && item.parentElement.itemizeOptions) {
1258 | if ((!item.removeStatus || item.removeStatus !== "pending") && !item.inFlipAnim) {
1259 | if (item.parentElement.itemizeOptions.beforeRemove) {
1260 | item.removeStatus = "pending";
1261 | var confirmRemove = item.parentElement.itemizeOptions.beforeRemove(item);
1262 |
1263 | if (confirmRemove === undefined) {
1264 | item.removeStatus = null;
1265 | throw new Error(' - Itemize error - \n The function "beforeRemove" must return a Boolean or a Promise');
1266 | }
1267 |
1268 | if (typeof confirmRemove.then === "function") {
1269 | var animDuration = item.parentElement.itemizeOptions.animDuration;
1270 | var onClickFn = item.onclick;
1271 | item.onclick = null;
1272 | confirmRemove.then(function (response) {
1273 | if (item.parentElement.itemizeOptions.anim) {
1274 | var closeBtn = item.querySelector(".itemize_remove_btn");
1275 |
1276 | if (closeBtn) {
1277 | closeBtn.onclick = null;
1278 | } else {
1279 | closeBtn = item.querySelector("." + _this7.globalOptions.removeBtnClass);
1280 |
1281 | if (closeBtn) {
1282 | closeBtn.onclick = null;
1283 | }
1284 | }
1285 |
1286 | _this7.showNotification("removed", item);
1287 |
1288 | _this7.flipRemove(item);
1289 |
1290 | _this7.items.splice(item.arrayPosition, 1);
1291 | } else {
1292 | _this7.showNotification("removed", item);
1293 |
1294 | item.parentNode.removeChild(item);
1295 |
1296 | _this7.cleanItem(item);
1297 |
1298 | _this7.items.splice(item.arrayPosition, 1);
1299 | }
1300 |
1301 | item.removeStatus = null;
1302 | })["catch"](function (err) {
1303 | item.onclick = onClickFn;
1304 | item.removeStatus = null;
1305 | });
1306 | } else if (confirmRemove) {
1307 | if (item.parentElement.itemizeOptions.anim) {
1308 | var _animDuration = item.parentElement.itemizeOptions.animDuration;
1309 | var closeBtn = item.querySelector(".itemize_remove_btn");
1310 | item.onclick = null;
1311 |
1312 | if (closeBtn) {
1313 | closeBtn.onclick = null;
1314 | } else {
1315 | closeBtn = item.querySelector("." + this.globalOptions.removeBtnClass);
1316 |
1317 | if (closeBtn) {
1318 | closeBtn.onclick = null;
1319 | }
1320 | }
1321 |
1322 | this.showNotification("removed", item);
1323 | this.flipRemove(item);
1324 | this.items.splice(item.arrayPosition, 1);
1325 | } else {
1326 | this.showNotification("removed", item);
1327 | item.removeStatus = null;
1328 | item.parentNode.removeChild(item);
1329 | this.items.splice(item.arrayPosition, 1);
1330 | this.cleanItem(item);
1331 | }
1332 |
1333 | item.removeStatus = null;
1334 | } else {
1335 | item.removeStatus = null;
1336 | }
1337 | } else {
1338 | if (item.parentElement.itemizeOptions.anim) {
1339 | var _animDuration2 = item.parentElement.itemizeOptions.animDuration;
1340 |
1341 | var _closeBtn = item.querySelector(".itemize_remove_btn");
1342 |
1343 | if (_closeBtn) {
1344 | _closeBtn.onclick = null;
1345 | } else {
1346 | _closeBtn = item.querySelector("." + this.globalOptions.removeBtnClass);
1347 |
1348 | if (_closeBtn) {
1349 | _closeBtn.onclick = null;
1350 | }
1351 | }
1352 |
1353 | this.showNotification("removed", item);
1354 | this.flipRemove(item);
1355 | this.items.splice(item.arrayPosition, 1);
1356 | } else {
1357 | this.showNotification("removed", item);
1358 | item.parentNode.removeChild(item);
1359 | this.cleanItem(item);
1360 | this.items.splice(item.arrayPosition, 1);
1361 | }
1362 |
1363 | item.removeStatus = null;
1364 | }
1365 | }
1366 | } else {
1367 | throw new Error(" - Itemize error - \n this element has an invalid itemizeItemId");
1368 | }
1369 | } catch (error) {
1370 | console.error(" - Itemize error - \n" + error);
1371 | }
1372 | }
1373 | }, {
1374 | key: "cleanItem",
1375 | value: function cleanItem(item) {
1376 | for (var u = 0; u < item.classList.length; u++) {
1377 | item.classList.remove("itmz_item");
1378 |
1379 | if (item.classList[u].indexOf("itemize_item_") !== -1) {
1380 | item.classList.remove(item.classList[u]);
1381 | break;
1382 | }
1383 | }
1384 |
1385 | if (item.parentNode && item.parentNode.itemizeItems) {
1386 | for (var i = 0; i < item.parentNode.itemizeItems.length; i++) {
1387 | if (item.parentNode.itemizeItems[i].itemizeItemId === item.itemizeItemId) {
1388 | item.parentNode.itemizeItems.splice(i, 1);
1389 | break;
1390 | }
1391 | }
1392 | }
1393 |
1394 | if (item.parentNode && item.parentNode.itemizeOptions && item.parentNode.itemizeOptions.removeBtnClass) {
1395 | var btn = item.querySelector("." + item.parentNode.itemizeOptions.removeBtnClass);
1396 |
1397 | if (btn) {
1398 | btn.parentNode.removeChild(btn);
1399 | }
1400 | } else {
1401 | var _btn = item.querySelector(".itemize_remove_btn");
1402 |
1403 | if (_btn) {
1404 | _btn.parentNode.removeChild(_btn);
1405 | }
1406 | }
1407 |
1408 | if (item.itemizeContainerId) {
1409 | this.clearObservers(item.itemizeContainerId);
1410 | var parentsInItem = item.querySelectorAll(".itmz_parent");
1411 | this.cancelItemize(parentsInItem);
1412 |
1413 | for (var _i5 = 0; _i5 < parentsInItem.length; _i5++) {
1414 | if (parentsInItem[_i5].itemizeContainerId) {
1415 | this.clearObservers(parentsInItem[_i5].itemizeContainerId);
1416 | }
1417 | }
1418 |
1419 | if (item.classList.contains("itmz_parent")) {
1420 | this.cancelItemize([item]);
1421 | }
1422 | }
1423 |
1424 | item.itemizeItemId = null;
1425 | }
1426 | }, {
1427 | key: "animateRAF",
1428 | value: function animateRAF(elem, from, to, duration) {
1429 | for (var i = 0; i < from.length; i++) {
1430 | for (var key in from[i]) {
1431 | if (from[i].hasOwnProperty(key)) {
1432 | if (key === "transform") {
1433 | elem.style.transform = "translateX(".concat(from[i][key].translateX).concat(from[i][key].unit, ") translateY(").concat(from[i][key].translateY).concat(from[i][key].unit, ")");
1434 | } else if (key === "opacity") {
1435 | elem.style.opacity = from[i][key];
1436 | } else {
1437 | elem.style[key] = "".concat(from[i][key].value).concat(from[i][key].unit);
1438 | }
1439 | }
1440 | }
1441 | }
1442 |
1443 | function anim(timestamp) {
1444 | var progress;
1445 |
1446 | if (!elem.startAnimTime) {
1447 | elem.startAnimTime = timestamp;
1448 | }
1449 |
1450 | progress = timestamp - elem.startAnimTime;
1451 |
1452 | for (var _i6 = 0; _i6 < to.length; _i6++) {
1453 | for (var _key in to[_i6]) {
1454 | if (to[_i6].hasOwnProperty(_key)) {
1455 | if (_key === "transform") {
1456 | elem.style.transform = "translateX(".concat(from[_i6][_key].translateX - (from[_i6][_key].translateX - to[_i6][_key].translateX) * parseInt(100 / (duration / progress)) / 100).concat(to[_i6][_key].unit, ") translateY(").concat(from[_i6][_key].translateY - (from[_i6][_key].translateY - to[_i6][_key].translateY) * parseInt(100 / (duration / progress)) / 100).concat(to[_i6][_key].unit, ")");
1457 | } else if (_key === "opacity") {
1458 | elem.style.opacity = from[_i6][_key] - (from[_i6][_key] - to[_i6][_key]) * parseInt(100 / (duration / progress)) / 100;
1459 | } else {
1460 | elem.style[_key] = "".concat(from[_i6][_key].value - (from[_i6][_key].value - to[_i6][_key].value) * parseInt(100 / (duration / progress)) / 100).concat(to[_i6][_key].unit);
1461 | }
1462 | }
1463 | }
1464 | }
1465 |
1466 | if (progress < duration - 1) {
1467 | requestAnimationFrame(anim);
1468 | } else {
1469 | elem.startAnimTime = null;
1470 |
1471 | if (elem.inFlipAnim) {
1472 | elem.inFlipAnim = false;
1473 | elem.style.transform = "none";
1474 | }
1475 | }
1476 | }
1477 |
1478 | requestAnimationFrame(anim);
1479 | }
1480 | }, {
1481 | key: "flipRemove",
1482 | value: function flipRemove(elem) {
1483 | var _this8 = this;
1484 |
1485 | elem.onclick = null;
1486 | var options = elem.parentElement.itemizeOptions;
1487 |
1488 | if (elem.animate) {
1489 | elem.animate([{
1490 | transform: "translate(0px, 0px)",
1491 | opacity: 1
1492 | }, {
1493 | transform: "translate(".concat(options.animRemoveTranslateX, "px, ").concat(options.animRemoveTranslateY, "px)"),
1494 | opacity: 0
1495 | }], {
1496 | duration: options.animDuration * 0.5,
1497 | easing: options.animEasing,
1498 | fill: "both"
1499 | });
1500 | } else {
1501 | this.animateRAF(elem, [{
1502 | opacity: 1
1503 | }, {
1504 | transform: {
1505 | translateX: 0,
1506 | translateY: 0,
1507 | unit: "px"
1508 | }
1509 | }], [{
1510 | opacity: 0
1511 | }, {
1512 | transform: {
1513 | translateX: options.animRemoveTranslateX,
1514 | translateY: options.animRemoveTranslateY,
1515 | unit: "px"
1516 | }
1517 | }], options.animDuration * 0.5);
1518 | }
1519 |
1520 | var flipPlayId = this.makeId(6);
1521 | this.flipPlayId = flipPlayId;
1522 | setTimeout(function () {
1523 | _this8.elemToRemove.push(elem);
1524 |
1525 | if (_this8.flipPlayId === flipPlayId) {
1526 | _this8.flipRead(_this8.items);
1527 |
1528 | for (var i = 0; i < _this8.elemToRemove.length; i++) {
1529 | _this8.cleanItem(_this8.elemToRemove[i]);
1530 |
1531 | _this8.elemToRemove[i].removeStatus = null;
1532 |
1533 | _this8.elemToRemove[i].parentNode.removeChild(_this8.elemToRemove[i]);
1534 | }
1535 |
1536 | _this8.elemToRemove = [];
1537 |
1538 | _this8.flipPlay(_this8.items, options.animDuration * 0.5);
1539 | }
1540 | }, options.animDuration * 0.5);
1541 | }
1542 | }, {
1543 | key: "flipAdd",
1544 | value: function flipAdd(elem) {
1545 | elem.classList.remove("itemize_hide");
1546 | elem.inAddAnim = true;
1547 | var options = elem.parentElement.itemizeOptions;
1548 | var translateXStart = options.animAddTranslateX;
1549 | var translateYStart = options.animAddTranslateY;
1550 |
1551 | if (elem.animate) {
1552 | elem.animate([{
1553 | transform: "translate(".concat(translateXStart, "px, ").concat(translateYStart, "px)"),
1554 | opacity: 0
1555 | }, {
1556 | transform: "none",
1557 | opacity: 1
1558 | }], {
1559 | duration: options.animDuration,
1560 | easing: options.animEasing
1561 | });
1562 | } else {
1563 | this.animateRAF(elem, [{
1564 | opacity: 0
1565 | }, {
1566 | transform: {
1567 | translateX: translateXStart,
1568 | translateY: translateYStart,
1569 | unit: "px"
1570 | }
1571 | }], [{
1572 | opacity: 1
1573 | }, {
1574 | transform: {
1575 | translateX: 0,
1576 | translateY: 0,
1577 | unit: "px"
1578 | }
1579 | }], options.animDuration);
1580 | }
1581 |
1582 | setTimeout(function () {
1583 | elem.inAddAnim = false;
1584 | elem.newAddPos = null;
1585 | elem.oldPos = null;
1586 | elem.style.transform = "none";
1587 | elem.style.opacity = 1;
1588 | }, options.animDuration);
1589 | }
1590 | }, {
1591 | key: "flipRead",
1592 | value: function flipRead(elems) {
1593 | for (var i = elems.length - 1; i >= 0; i--) {
1594 | if (elems[i].parentNode) {
1595 | this.elPos[elems[i].itemizeItemId] = elems[i].getBoundingClientRect();
1596 | } else {
1597 | elems.splice(i, 1);
1598 | }
1599 | }
1600 | }
1601 | }, {
1602 | key: "flipPlay",
1603 | value: function flipPlay(elems, duration, dragAnim) {
1604 | var _this9 = this;
1605 |
1606 | var _loop2 = function _loop2(i) {
1607 | var el = elems[i];
1608 |
1609 | if (!el.inAddAnim && el.parentNode && el.parentNode.itemizeOptions) {
1610 | var newPos = el.getBoundingClientRect();
1611 | var oldPos = _this9.elPos[el.itemizeItemId];
1612 | var deltaX = oldPos.left - newPos.left;
1613 | var deltaY = oldPos.top - newPos.top;
1614 | var deltaW = oldPos.width / newPos.width;
1615 | var deltaH = oldPos.height / newPos.height;
1616 |
1617 | if (isNaN(deltaW) || deltaW === Infinity) {
1618 | deltaW = 1;
1619 | }
1620 |
1621 | if (isNaN(deltaH) || deltaH === Infinity) {
1622 | deltaH = 1;
1623 | }
1624 |
1625 | if (deltaX !== 0 || deltaY !== 0 || deltaW !== 1 || deltaH !== 1) {
1626 | el.inFlipAnim = true;
1627 |
1628 | if (el.animate) {
1629 | el.animate([{
1630 | transform: "translate(".concat(deltaX, "px, ").concat(deltaY, "px)")
1631 | }, {
1632 | transform: "none"
1633 | }], {
1634 | duration: duration,
1635 | easing: dragAnim ? "ease-in-out" : el.parentNode.itemizeOptions.animEasing
1636 | });
1637 | } else {
1638 | _this9.animateRAF(el, [{
1639 | transform: {
1640 | translateX: deltaX,
1641 | translateY: deltaY,
1642 | unit: "px"
1643 | }
1644 | }], [{
1645 | transform: {
1646 | translateX: 0,
1647 | translateY: 0,
1648 | unit: "px"
1649 | }
1650 | }], duration);
1651 | }
1652 |
1653 | if (document.querySelector("body").animate) {
1654 | setTimeout(function () {
1655 | if (el) {
1656 | el.style.transform = "none";
1657 | el.inFlipAnim = false;
1658 | }
1659 | }, duration);
1660 | }
1661 | }
1662 | }
1663 | };
1664 |
1665 | for (var i = 0; i < elems.length; i++) {
1666 | _loop2(i);
1667 | }
1668 | }
1669 | }, {
1670 | key: "mergeOptions",
1671 | value: function mergeOptions(newOptions) {
1672 | try {
1673 | var defaultOptions = {
1674 | removeBtn: true,
1675 | removeBtnWidth: 20,
1676 | removeBtnThickness: 2,
1677 | removeBtnColor: "#565C67",
1678 | removeBtnHoverColor: "#ffffff",
1679 | removeBtnSharpness: "0%",
1680 | removeBtnPosition: "top-right",
1681 | removeBtnMargin: 2,
1682 | removeBtnCircle: true,
1683 | removeBtnBgColor: "rgba(200, 200, 200, 0.5)",
1684 | removeBtnBgHoverColor: "#959595",
1685 | removeBtnClass: null,
1686 | modalConfirm: false,
1687 | modalText: "Are you sure to remove this item?",
1688 | removeNotificationText: "Item removed",
1689 | addNotificationText: "Item added",
1690 | showRemoveNotifications: false,
1691 | showAddNotifications: false,
1692 | notificationPosition: "bottom-right",
1693 | notificationTimer: 4000,
1694 | anim: true,
1695 | animEasing: "ease-in-out",
1696 | animDuration: 500,
1697 | animRemoveTranslateX: 0,
1698 | animRemoveTranslateY: -100,
1699 | animAddTranslateX: 0,
1700 | animAddTranslateY: -100,
1701 | dragAndDrop: false,
1702 | beforeRemove: null,
1703 | outlineItemOnHover: false,
1704 | nestingLevel: 1,
1705 | itemizeAddedElement: true,
1706 | onAddItem: null
1707 | };
1708 |
1709 | if (this.globalOptions) {
1710 | defaultOptions = _objectSpread({}, this.globalOptions);
1711 | }
1712 |
1713 | var mergedOptions = _objectSpread({}, defaultOptions, {}, newOptions);
1714 |
1715 | return mergedOptions;
1716 | } catch (error) {
1717 | console.error(error);
1718 | }
1719 | }
1720 | }, {
1721 | key: "getOptionsFromAttributes",
1722 | value: function getOptionsFromAttributes(parent, options) {
1723 | var intAttributes = ["removeBtnWidth", "removeBtnThickness", "removeBtnMargin", "nestingLevel", "animDuration", "animRemoveTranslateX", "animRemoveTranslateY", "animAddTranslateX", "animAddTranslateY", "removeBtnThickness", "notificationTimer"];
1724 |
1725 | for (var key in options) {
1726 | if (options.hasOwnProperty(key)) {
1727 | if (parent.getAttribute(key)) {
1728 | if (parent.getAttribute(key) === "false") {
1729 | options[key] = false;
1730 | } else if (parent.getAttribute(key) === "true") {
1731 | options[key] = true;
1732 | } else if (intAttributes.indexOf(key) !== -1) {
1733 | if (!isNaN(parseInt(parent.getAttribute(key)))) {
1734 | options[key] = parseInt(parent.getAttribute(key));
1735 | }
1736 | } else {
1737 | options[key] = parent.getAttribute(key);
1738 | }
1739 | }
1740 | }
1741 | }
1742 |
1743 | return options;
1744 | }
1745 | }, {
1746 | key: "makeId",
1747 | value: function makeId(length) {
1748 | var result = "";
1749 | var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
1750 | var charactersLength = characters.length;
1751 |
1752 | for (var i = 0; i < length; i++) {
1753 | result += characters.charAt(Math.floor(Math.random() * charactersLength));
1754 | }
1755 |
1756 | return result;
1757 | }
1758 | }]);
1759 |
1760 | return Itemize;
1761 | }();
1762 |
1763 | var DragDropTouch;
1764 |
1765 | (function (DragDropTouch_1) {
1766 | "use strict";
1767 |
1768 | var DataTransfer = function () {
1769 | function DataTransfer() {
1770 | this._dropEffect = "move";
1771 | this._effectAllowed = "all";
1772 | this._data = {};
1773 | }
1774 |
1775 | Object.defineProperty(DataTransfer.prototype, "dropEffect", {
1776 | get: function get() {
1777 | return this._dropEffect;
1778 | },
1779 | set: function set(value) {
1780 | this._dropEffect = value;
1781 | },
1782 | enumerable: true,
1783 | configurable: true
1784 | });
1785 | Object.defineProperty(DataTransfer.prototype, "effectAllowed", {
1786 | get: function get() {
1787 | return this._effectAllowed;
1788 | },
1789 | set: function set(value) {
1790 | this._effectAllowed = value;
1791 | },
1792 | enumerable: true,
1793 | configurable: true
1794 | });
1795 | Object.defineProperty(DataTransfer.prototype, "types", {
1796 | get: function get() {
1797 | return Object.keys(this._data);
1798 | },
1799 | enumerable: true,
1800 | configurable: true
1801 | });
1802 |
1803 | DataTransfer.prototype.clearData = function (type) {
1804 | if (type != null) {
1805 | delete this._data[type];
1806 | } else {
1807 | this._data = null;
1808 | }
1809 | };
1810 |
1811 | DataTransfer.prototype.getData = function (type) {
1812 | return this._data[type] || "";
1813 | };
1814 |
1815 | DataTransfer.prototype.setData = function (type, value) {
1816 | this._data[type] = value;
1817 | };
1818 |
1819 | DataTransfer.prototype.setDragImage = function (img, offsetX, offsetY) {
1820 | var ddt = DragDropTouch._instance;
1821 | ddt._imgCustom = img;
1822 | ddt._imgOffset = {
1823 | x: offsetX,
1824 | y: offsetY
1825 | };
1826 | };
1827 |
1828 | return DataTransfer;
1829 | }();
1830 |
1831 | DragDropTouch_1.DataTransfer = DataTransfer;
1832 |
1833 | var DragDropTouch = function () {
1834 | function DragDropTouch() {
1835 | this._lastClick = 0;
1836 |
1837 | if (DragDropTouch._instance) {
1838 | throw "DragDropTouch instance already created.";
1839 | }
1840 |
1841 | var supportsPassive = false;
1842 | document.addEventListener("test", function () {}, {
1843 | get passive() {
1844 | supportsPassive = true;
1845 | return true;
1846 | }
1847 |
1848 | });
1849 |
1850 | if ("ontouchstart" in document) {
1851 | var d = document,
1852 | ts = this._touchstart.bind(this),
1853 | tm = this._touchmove.bind(this),
1854 | te = this._touchend.bind(this),
1855 | opt = supportsPassive ? {
1856 | passive: false,
1857 | capture: false
1858 | } : false;
1859 |
1860 | d.addEventListener("touchstart", ts, opt);
1861 | d.addEventListener("touchmove", tm, opt);
1862 | d.addEventListener("touchend", te);
1863 | d.addEventListener("touchcancel", te);
1864 | }
1865 | }
1866 |
1867 | DragDropTouch.getInstance = function () {
1868 | return DragDropTouch._instance;
1869 | };
1870 |
1871 | DragDropTouch.prototype._touchstart = function (e) {
1872 | var _this = this;
1873 |
1874 | if (this._shouldHandle(e)) {
1875 | if (Date.now() - this._lastClick < DragDropTouch._DBLCLICK) {
1876 | if (this._dispatchEvent(e, "dblclick", e.target)) {
1877 | e.preventDefault();
1878 |
1879 | this._reset();
1880 |
1881 | return;
1882 | }
1883 | }
1884 |
1885 | this._reset();
1886 |
1887 | var src = this._closestDraggable(e.target);
1888 |
1889 | if (src) {
1890 | if (!this._dispatchEvent(e, "mousemove", e.target) && !this._dispatchEvent(e, "mousedown", e.target)) {
1891 | this._dragSource = src;
1892 | this._ptDown = this._getPoint(e);
1893 | this._lastTouch = e;
1894 | e.preventDefault();
1895 | setTimeout(function () {
1896 | if (_this._dragSource == src && _this._img == null) {
1897 | if (_this._dispatchEvent(e, "contextmenu", src)) {
1898 | _this._reset();
1899 | }
1900 | }
1901 | }, DragDropTouch._CTXMENU);
1902 |
1903 | if (DragDropTouch._ISPRESSHOLDMODE) {
1904 | this._pressHoldInterval = setTimeout(function () {
1905 | _this._isDragEnabled = true;
1906 |
1907 | _this._touchmove(e);
1908 | }, DragDropTouch._PRESSHOLDAWAIT);
1909 | }
1910 | }
1911 | }
1912 | }
1913 | };
1914 |
1915 | DragDropTouch.prototype._touchmove = function (e) {
1916 | if (this._shouldCancelPressHoldMove(e)) {
1917 | this._reset();
1918 |
1919 | return;
1920 | }
1921 |
1922 | if (this._shouldHandleMove(e) || this._shouldHandlePressHoldMove(e)) {
1923 | var target = this._getTarget(e);
1924 |
1925 | if (this._dispatchEvent(e, "mousemove", target)) {
1926 | this._lastTouch = e;
1927 | e.preventDefault();
1928 | return;
1929 | }
1930 |
1931 | if (this._dragSource && !this._img && this._shouldStartDragging(e)) {
1932 | this._dispatchEvent(e, "dragstart", this._dragSource);
1933 |
1934 | this._createImage(e);
1935 |
1936 | this._dispatchEvent(e, "dragenter", target);
1937 | }
1938 |
1939 | if (this._img) {
1940 | this._lastTouch = e;
1941 | e.preventDefault();
1942 |
1943 | if (target != this._lastTarget) {
1944 | this._dispatchEvent(this._lastTouch, "dragleave", this._lastTarget);
1945 |
1946 | this._dispatchEvent(e, "dragenter", target);
1947 |
1948 | this._lastTarget = target;
1949 | }
1950 |
1951 | this._moveImage(e);
1952 |
1953 | this._isDropZone = this._dispatchEvent(e, "dragover", target);
1954 | }
1955 | }
1956 | };
1957 |
1958 | DragDropTouch.prototype._touchend = function (e) {
1959 | if (this._shouldHandle(e)) {
1960 | if (this._dispatchEvent(this._lastTouch, "mouseup", e.target)) {
1961 | e.preventDefault();
1962 | return;
1963 | }
1964 |
1965 | if (!this._img) {
1966 | this._dragSource = null;
1967 |
1968 | this._dispatchEvent(this._lastTouch, "click", e.target);
1969 |
1970 | this._lastClick = Date.now();
1971 | }
1972 |
1973 | this._destroyImage();
1974 |
1975 | if (this._dragSource) {
1976 | if (e.type.indexOf("cancel") < 0 && this._isDropZone) {
1977 | this._dispatchEvent(this._lastTouch, "drop", this._lastTarget);
1978 | }
1979 |
1980 | this._dispatchEvent(this._lastTouch, "dragend", this._dragSource);
1981 |
1982 | this._reset();
1983 | }
1984 | }
1985 | };
1986 |
1987 | DragDropTouch.prototype._shouldHandle = function (e) {
1988 | return e && !e.defaultPrevented && e.touches && e.touches.length < 2;
1989 | };
1990 |
1991 | DragDropTouch.prototype._shouldHandleMove = function (e) {
1992 | return !DragDropTouch._ISPRESSHOLDMODE && this._shouldHandle(e);
1993 | };
1994 |
1995 | DragDropTouch.prototype._shouldHandlePressHoldMove = function (e) {
1996 | return DragDropTouch._ISPRESSHOLDMODE && this._isDragEnabled && e && e.touches && e.touches.length;
1997 | };
1998 |
1999 | DragDropTouch.prototype._shouldCancelPressHoldMove = function (e) {
2000 | return DragDropTouch._ISPRESSHOLDMODE && !this._isDragEnabled && this._getDelta(e) > DragDropTouch._PRESSHOLDMARGIN;
2001 | };
2002 |
2003 | DragDropTouch.prototype._shouldStartDragging = function (e) {
2004 | var delta = this._getDelta(e);
2005 |
2006 | return delta > DragDropTouch._THRESHOLD || DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD;
2007 | };
2008 |
2009 | DragDropTouch.prototype._reset = function () {
2010 | this._destroyImage();
2011 |
2012 | this._dragSource = null;
2013 | this._lastTouch = null;
2014 | this._lastTarget = null;
2015 | this._ptDown = null;
2016 | this._isDragEnabled = false;
2017 | this._isDropZone = false;
2018 | this._dataTransfer = new DataTransfer();
2019 | clearInterval(this._pressHoldInterval);
2020 | };
2021 |
2022 | DragDropTouch.prototype._getPoint = function (e, page) {
2023 | if (e && e.touches) {
2024 | e = e.touches[0];
2025 | }
2026 |
2027 | return {
2028 | x: page ? e.pageX : e.clientX,
2029 | y: page ? e.pageY : e.clientY
2030 | };
2031 | };
2032 |
2033 | DragDropTouch.prototype._getDelta = function (e) {
2034 | if (DragDropTouch._ISPRESSHOLDMODE && !this._ptDown) {
2035 | return 0;
2036 | }
2037 |
2038 | var p = this._getPoint(e);
2039 |
2040 | return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y);
2041 | };
2042 |
2043 | DragDropTouch.prototype._getTarget = function (e) {
2044 | var pt = this._getPoint(e),
2045 | el = document.elementFromPoint(pt.x, pt.y);
2046 |
2047 | while (el && getComputedStyle(el).pointerEvents == "none") {
2048 | el = el.parentElement;
2049 | }
2050 |
2051 | return el;
2052 | };
2053 |
2054 | DragDropTouch.prototype._createImage = function (e) {
2055 | if (this._img) {
2056 | this._destroyImage();
2057 | }
2058 |
2059 | var src = this._imgCustom || this._dragSource;
2060 | this._img = src.cloneNode(true);
2061 |
2062 | this._copyStyle(src, this._img);
2063 |
2064 | this._img.style.top = this._img.style.left = "-9999px";
2065 |
2066 | if (!this._imgCustom) {
2067 | var rc = src.getBoundingClientRect(),
2068 | pt = this._getPoint(e);
2069 |
2070 | this._imgOffset = {
2071 | x: pt.x - rc.left,
2072 | y: pt.y - rc.top
2073 | };
2074 | this._img.style.opacity = DragDropTouch._OPACITY.toString();
2075 | }
2076 |
2077 | this._moveImage(e);
2078 |
2079 | document.body.appendChild(this._img);
2080 | };
2081 |
2082 | DragDropTouch.prototype._destroyImage = function () {
2083 | if (this._img && this._img.parentElement) {
2084 | this._img.parentElement.removeChild(this._img);
2085 | }
2086 |
2087 | this._img = null;
2088 | this._imgCustom = null;
2089 | };
2090 |
2091 | DragDropTouch.prototype._moveImage = function (e) {
2092 | var _this = this;
2093 |
2094 | requestAnimationFrame(function () {
2095 | if (_this._img) {
2096 | var pt = _this._getPoint(e, true),
2097 | s = _this._img.style;
2098 |
2099 | s.position = "absolute";
2100 | s.pointerEvents = "none";
2101 | s.zIndex = "999999";
2102 | s.left = Math.round(pt.x - _this._imgOffset.x) + "px";
2103 | s.top = Math.round(pt.y - _this._imgOffset.y) + "px";
2104 | }
2105 | });
2106 | };
2107 |
2108 | DragDropTouch.prototype._copyProps = function (dst, src, props) {
2109 | for (var i = 0; i < props.length; i++) {
2110 | var p = props[i];
2111 | dst[p] = src[p];
2112 | }
2113 | };
2114 |
2115 | DragDropTouch.prototype._copyStyle = function (src, dst) {
2116 | DragDropTouch._rmvAtts.forEach(function (att) {
2117 | dst.removeAttribute(att);
2118 | });
2119 |
2120 | if (src instanceof HTMLCanvasElement) {
2121 | var cSrc = src,
2122 | cDst = dst;
2123 | cDst.width = cSrc.width;
2124 | cDst.height = cSrc.height;
2125 | cDst.getContext("2d").drawImage(cSrc, 0, 0);
2126 | }
2127 |
2128 | var cs = getComputedStyle(src);
2129 |
2130 | for (var i = 0; i < cs.length; i++) {
2131 | var key = cs[i];
2132 |
2133 | if (key.indexOf("transition") < 0) {
2134 | dst.style[key] = cs[key];
2135 | }
2136 | }
2137 |
2138 | dst.style.pointerEvents = "none";
2139 |
2140 | for (var i = 0; i < src.children.length; i++) {
2141 | this._copyStyle(src.children[i], dst.children[i]);
2142 | }
2143 | };
2144 |
2145 | DragDropTouch.prototype._dispatchEvent = function (e, type, target) {
2146 | if (e && target) {
2147 | var evt = document.createEvent("Event"),
2148 | t = e.touches ? e.touches[0] : e;
2149 | evt.initEvent(type, true, true);
2150 | evt.button = 0;
2151 | evt.which = evt.buttons = 1;
2152 |
2153 | this._copyProps(evt, e, DragDropTouch._kbdProps);
2154 |
2155 | this._copyProps(evt, t, DragDropTouch._ptProps);
2156 |
2157 | evt.dataTransfer = this._dataTransfer;
2158 | target.dispatchEvent(evt);
2159 | return evt.defaultPrevented;
2160 | }
2161 |
2162 | return false;
2163 | };
2164 |
2165 | DragDropTouch.prototype._closestDraggable = function (e) {
2166 | for (; e; e = e.parentElement) {
2167 | if (e.hasAttribute("draggable") && e.draggable) {
2168 | return e;
2169 | }
2170 | }
2171 |
2172 | return null;
2173 | };
2174 |
2175 | return DragDropTouch;
2176 | }();
2177 |
2178 | DragDropTouch._instance = new DragDropTouch();
2179 | DragDropTouch._THRESHOLD = 5; // pixels to move before drag starts
2180 |
2181 | DragDropTouch._OPACITY = 0.5; // drag image opacity
2182 |
2183 | DragDropTouch._DBLCLICK = 500; // max ms between clicks in a double click
2184 |
2185 | DragDropTouch._CTXMENU = 900; // ms to hold before raising 'contextmenu' event
2186 |
2187 | DragDropTouch._ISPRESSHOLDMODE = false; // decides of press & hold mode presence
2188 |
2189 | DragDropTouch._PRESSHOLDAWAIT = 400; // ms to wait before press & hold is detected
2190 |
2191 | DragDropTouch._PRESSHOLDMARGIN = 25; // pixels that finger might shiver while pressing
2192 |
2193 | DragDropTouch._PRESSHOLDTHRESHOLD = 0; // pixels to move before drag starts
2194 |
2195 | DragDropTouch._rmvAtts = "id,class,style,draggable".split(",");
2196 | DragDropTouch._kbdProps = "altKey,ctrlKey,metaKey,shiftKey".split(",");
2197 | DragDropTouch._ptProps = "pageX,pageY,clientX,clientY,screenX,screenY".split(",");
2198 | DragDropTouch_1.DragDropTouch = DragDropTouch;
2199 | })(DragDropTouch || (DragDropTouch = {}));
2200 |
2201 | try {
2202 | module.exports = Itemize;
2203 | } catch (_unused) {}
--------------------------------------------------------------------------------