How to use el method in storybook-root

Best JavaScript code snippet using storybook-root

Sortable.js

Source:Sortable.js Github

copy

Full Screen

1/**!2 * Sortable3 * @author RubaXa <trash@rubaxa.org>4 * @license MIT5 */6(function sortableModule(factory) {7 "use strict";8 if (typeof define === "function" && define.amd) {9 define(factory);10 }11 else if (typeof module != "undefined" && typeof module.exports != "undefined") {12 module.exports = factory();13 }14 else {15 /* jshint sub:true */16 window["Sortable"] = factory();17 }18})(function sortableFactory() {19 "use strict";20 if (typeof window == "undefined" || !window.document) {21 return function sortableError() {22 throw new Error("Sortable.js requires a window with a document");23 };24 }25 var dragEl,26 parentEl,27 ghostEl,28 cloneEl,29 rootEl,30 nextEl,31 lastDownEl,32 scrollEl,33 scrollParentEl,34 scrollCustomFn,35 lastEl,36 lastCSS,37 lastParentCSS,38 oldIndex,39 newIndex,40 activeGroup,41 putSortable,42 autoScroll = {},43 tapEvt,44 touchEvt,45 moved,46 /** @const */47 R_SPACE = /\s+/g,48 R_FLOAT = /left|right|inline/,49 expando = 'Sortable' + (new Date).getTime(),50 win = window,51 document = win.document,52 parseInt = win.parseInt,53 $ = win.jQuery || win.Zepto,54 Polymer = win.Polymer,55 captureMode = false,56 supportDraggable = !!('draggable' in document.createElement('div')),57 supportCssPointerEvents = (function (el) {58 // false when IE1159 if (!!navigator.userAgent.match(/Trident.*rv[ :]?11\./)) {60 return false;61 }62 el = document.createElement('x');63 el.style.cssText = 'pointer-events:auto';64 return el.style.pointerEvents === 'auto';65 })(),66 _silent = false,67 abs = Math.abs,68 min = Math.min,69 savedInputChecked = [],70 touchDragOverListeners = [],71 _autoScroll = _throttle(function (/**Event*/evt, /**Object*/options, /**HTMLElement*/rootEl) {72 // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=50552173 if (rootEl && options.scroll) {74 var _this = rootEl[expando],75 el,76 rect,77 sens = options.scrollSensitivity,78 speed = options.scrollSpeed,79 x = evt.clientX,80 y = evt.clientY,81 winWidth = window.innerWidth,82 winHeight = window.innerHeight,83 vx,84 vy,85 scrollOffsetX,86 scrollOffsetY87 ;88 // Delect scrollEl89 if (scrollParentEl !== rootEl) {90 scrollEl = options.scroll;91 scrollParentEl = rootEl;92 scrollCustomFn = options.scrollFn;93 if (scrollEl === true) {94 scrollEl = rootEl;95 do {96 if ((scrollEl.offsetWidth < scrollEl.scrollWidth) ||97 (scrollEl.offsetHeight < scrollEl.scrollHeight)98 ) {99 break;100 }101 /* jshint boss:true */102 } while (scrollEl = scrollEl.parentNode);103 }104 }105 if (scrollEl) {106 el = scrollEl;107 rect = scrollEl.getBoundingClientRect();108 vx = (abs(rect.right - x) <= sens) - (abs(rect.left - x) <= sens);109 vy = (abs(rect.bottom - y) <= sens) - (abs(rect.top - y) <= sens);110 }111 if (!(vx || vy)) {112 vx = (winWidth - x <= sens) - (x <= sens);113 vy = (winHeight - y <= sens) - (y <= sens);114 /* jshint expr:true */115 (vx || vy) && (el = win);116 }117 if (autoScroll.vx !== vx || autoScroll.vy !== vy || autoScroll.el !== el) {118 autoScroll.el = el;119 autoScroll.vx = vx;120 autoScroll.vy = vy;121 clearInterval(autoScroll.pid);122 if (el) {123 autoScroll.pid = setInterval(function () {124 scrollOffsetY = vy ? vy * speed : 0;125 scrollOffsetX = vx ? vx * speed : 0;126 if ('function' === typeof(scrollCustomFn)) {127 return scrollCustomFn.call(_this, scrollOffsetX, scrollOffsetY, evt);128 }129 if (el === win) {130 win.scrollTo(win.pageXOffset + scrollOffsetX, win.pageYOffset + scrollOffsetY);131 } else {132 el.scrollTop += scrollOffsetY;133 el.scrollLeft += scrollOffsetX;134 }135 }, 24);136 }137 }138 }139 }, 30),140 _prepareGroup = function (options) {141 function toFn(value, pull) {142 if (value === void 0 || value === true) {143 value = group.name;144 }145 if (typeof value === 'function') {146 return value;147 } else {148 return function (to, from) {149 var fromGroup = from.options.group.name;150 return pull151 ? value152 : value && (value.join153 ? value.indexOf(fromGroup) > -1154 : (fromGroup == value)155 );156 };157 }158 }159 var group = {};160 var originalGroup = options.group;161 if (!originalGroup || typeof originalGroup != 'object') {162 originalGroup = {name: originalGroup};163 }164 group.name = originalGroup.name;165 group.checkPull = toFn(originalGroup.pull, true);166 group.checkPut = toFn(originalGroup.put);167 group.revertClone = originalGroup.revertClone;168 options.group = group;169 }170 ;171 /**172 * @class Sortable173 * @param {HTMLElement} el174 * @param {Object} [options]175 */176 function Sortable(el, options) {177 if (!(el && el.nodeType && el.nodeType === 1)) {178 throw 'Sortable: `el` must be HTMLElement, and not ' + {}.toString.call(el);179 }180 this.el = el; // root element181 this.options = options = _extend({}, options);182 // Export instance183 el[expando] = this;184 // Default options185 var defaults = {186 group: Math.random(),187 sort: true,188 disabled: false,189 store: null,190 handle: null,191 scroll: true,192 scrollSensitivity: 30,193 scrollSpeed: 10,194 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',195 ghostClass: 'sortable-ghost',196 chosenClass: 'sortable-chosen',197 dragClass: 'sortable-drag',198 ignore: 'a, img',199 filter: null,200 preventOnFilter: true,201 animation: 0,202 setData: function (dataTransfer, dragEl) {203 dataTransfer.setData('Text', dragEl.textContent);204 },205 dropBubble: false,206 dragoverBubble: false,207 dataIdAttr: 'data-id',208 delay: 0,209 forceFallback: false,210 fallbackClass: 'sortable-fallback',211 fallbackOnBody: false,212 fallbackTolerance: 0,213 fallbackOffset: {x: 0, y: 0}214 };215 // Set default options216 for (var name in defaults) {217 !(name in options) && (options[name] = defaults[name]);218 }219 _prepareGroup(options);220 // Bind all private methods221 for (var fn in this) {222 if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {223 this[fn] = this[fn].bind(this);224 }225 }226 // Setup drag mode227 this.nativeDraggable = options.forceFallback ? false : supportDraggable;228 // Bind events229 _on(el, 'mousedown', this._onTapStart);230 _on(el, 'touchstart', this._onTapStart);231 _on(el, 'pointerdown', this._onTapStart);232 if (this.nativeDraggable) {233 _on(el, 'dragover', this);234 _on(el, 'dragenter', this);235 }236 touchDragOverListeners.push(this._onDragOver);237 // Restore sorting238 options.store && this.sort(options.store.get(this));239 }240 Sortable.prototype = /** @lends Sortable.prototype */ {241 constructor: Sortable,242 _onTapStart: function (/** Event|TouchEvent */evt) {243 var _this = this,244 el = this.el,245 options = this.options,246 preventOnFilter = options.preventOnFilter,247 type = evt.type,248 touch = evt.touches && evt.touches[0],249 target = (touch || evt).target,250 originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0]) || target,251 filter = options.filter,252 startIndex;253 _saveInputCheckedState(el);254 // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group.255 if (dragEl) {256 return;257 }258 if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) {259 return; // only left button or enabled260 }261 target = _closest(target, options.draggable, el);262 if (!target) {263 return;264 }265 if (lastDownEl === target) {266 // Ignoring duplicate `down`267 return;268 }269 // Get the index of the dragged element within its parent270 startIndex = _index(target, options.draggable);271 // Check filter272 if (typeof filter === 'function') {273 if (filter.call(this, evt, target, this)) {274 _dispatchEvent(_this, originalTarget, 'filter', target, el, startIndex);275 preventOnFilter && evt.preventDefault();276 return; // cancel dnd277 }278 }279 else if (filter) {280 filter = filter.split(',').some(function (criteria) {281 criteria = _closest(originalTarget, criteria.trim(), el);282 if (criteria) {283 _dispatchEvent(_this, criteria, 'filter', target, el, startIndex);284 return true;285 }286 });287 if (filter) {288 preventOnFilter && evt.preventDefault();289 return; // cancel dnd290 }291 }292 if (options.handle && !_closest(originalTarget, options.handle, el)) {293 return;294 }295 // Prepare `dragstart`296 this._prepareDragStart(evt, touch, target, startIndex);297 },298 _prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target, /** Number */startIndex) {299 var _this = this,300 el = _this.el,301 options = _this.options,302 ownerDocument = el.ownerDocument,303 dragStartFn;304 if (target && !dragEl && (target.parentNode === el)) {305 tapEvt = evt;306 rootEl = el;307 dragEl = target;308 parentEl = dragEl.parentNode;309 nextEl = dragEl.nextSibling;310 lastDownEl = target;311 activeGroup = options.group;312 oldIndex = startIndex;313 this._lastX = (touch || evt).clientX;314 this._lastY = (touch || evt).clientY;315 dragEl.style['will-change'] = 'transform';316 dragStartFn = function () {317 // Delayed drag has been triggered318 // we can re-enable the events: touchmove/mousemove319 _this._disableDelayedDrag();320 // Make the element draggable321 dragEl.draggable = _this.nativeDraggable;322 // Chosen item323 _toggleClass(dragEl, options.chosenClass, true);324 // Bind the events: dragstart/dragend325 _this._triggerDragStart(evt, touch);326 // Drag start event327 _dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, oldIndex);328 };329 // Disable "draggable"330 options.ignore.split(',').forEach(function (criteria) {331 _find(dragEl, criteria.trim(), _disableDraggable);332 });333 _on(ownerDocument, 'mouseup', _this._onDrop);334 _on(ownerDocument, 'touchend', _this._onDrop);335 _on(ownerDocument, 'touchcancel', _this._onDrop);336 _on(ownerDocument, 'pointercancel', _this._onDrop);337 _on(ownerDocument, 'selectstart', _this);338 if (options.delay) {339 // If the user moves the pointer or let go the click or touch340 // before the delay has been reached:341 // disable the delayed drag342 _on(ownerDocument, 'mouseup', _this._disableDelayedDrag);343 _on(ownerDocument, 'touchend', _this._disableDelayedDrag);344 _on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);345 _on(ownerDocument, 'mousemove', _this._disableDelayedDrag);346 _on(ownerDocument, 'touchmove', _this._disableDelayedDrag);347 _on(ownerDocument, 'pointermove', _this._disableDelayedDrag);348 _this._dragStartTimer = setTimeout(dragStartFn, options.delay);349 } else {350 dragStartFn();351 }352 }353 },354 _disableDelayedDrag: function () {355 var ownerDocument = this.el.ownerDocument;356 clearTimeout(this._dragStartTimer);357 _off(ownerDocument, 'mouseup', this._disableDelayedDrag);358 _off(ownerDocument, 'touchend', this._disableDelayedDrag);359 _off(ownerDocument, 'touchcancel', this._disableDelayedDrag);360 _off(ownerDocument, 'mousemove', this._disableDelayedDrag);361 _off(ownerDocument, 'touchmove', this._disableDelayedDrag);362 _off(ownerDocument, 'pointermove', this._disableDelayedDrag);363 },364 _triggerDragStart: function (/** Event */evt, /** Touch */touch) {365 touch = touch || (evt.pointerType == 'touch' ? evt : null);366 if (touch) {367 // Touch device support368 tapEvt = {369 target: dragEl,370 clientX: touch.clientX,371 clientY: touch.clientY372 };373 this._onDragStart(tapEvt, 'touch');374 }375 else if (!this.nativeDraggable) {376 this._onDragStart(tapEvt, true);377 }378 else {379 _on(dragEl, 'dragend', this);380 _on(rootEl, 'dragstart', this._onDragStart);381 }382 try {383 if (document.selection) {384 // Timeout neccessary for IE9385 setTimeout(function () {386 document.selection.empty();387 });388 } else {389 window.getSelection().removeAllRanges();390 }391 } catch (err) {392 }393 },394 _dragStarted: function () {395 if (rootEl && dragEl) {396 var options = this.options;397 // Apply effect398 _toggleClass(dragEl, options.ghostClass, true);399 _toggleClass(dragEl, options.dragClass, false);400 Sortable.active = this;401 // Drag start event402 _dispatchEvent(this, rootEl, 'start', dragEl, rootEl, oldIndex);403 } else {404 this._nulling();405 }406 },407 _emulateDragOver: function () {408 if (touchEvt) {409 if (this._lastX === touchEvt.clientX && this._lastY === touchEvt.clientY) {410 return;411 }412 this._lastX = touchEvt.clientX;413 this._lastY = touchEvt.clientY;414 if (!supportCssPointerEvents) {415 _css(ghostEl, 'display', 'none');416 }417 var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),418 parent = target,419 i = touchDragOverListeners.length;420 if (parent) {421 do {422 if (parent[expando]) {423 while (i--) {424 touchDragOverListeners[i]({425 clientX: touchEvt.clientX,426 clientY: touchEvt.clientY,427 target: target,428 rootEl: parent429 });430 }431 break;432 }433 target = parent; // store last element434 }435 /* jshint boss:true */436 while (parent = parent.parentNode);437 }438 if (!supportCssPointerEvents) {439 _css(ghostEl, 'display', '');440 }441 }442 },443 _onTouchMove: function (/**TouchEvent*/evt) {444 if (tapEvt) {445 var options = this.options,446 fallbackTolerance = options.fallbackTolerance,447 fallbackOffset = options.fallbackOffset,448 touch = evt.touches ? evt.touches[0] : evt,449 dx = (touch.clientX - tapEvt.clientX) + fallbackOffset.x,450 dy = (touch.clientY - tapEvt.clientY) + fallbackOffset.y,451 translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)';452 // only set the status to dragging, when we are actually dragging453 if (!Sortable.active) {454 if (fallbackTolerance &&455 min(abs(touch.clientX - this._lastX), abs(touch.clientY - this._lastY)) < fallbackTolerance456 ) {457 return;458 }459 this._dragStarted();460 }461 // as well as creating the ghost element on the document body462 this._appendGhost();463 moved = true;464 touchEvt = touch;465 _css(ghostEl, 'webkitTransform', translate3d);466 _css(ghostEl, 'mozTransform', translate3d);467 _css(ghostEl, 'msTransform', translate3d);468 _css(ghostEl, 'transform', translate3d);469 evt.preventDefault();470 }471 },472 _appendGhost: function () {473 if (!ghostEl) {474 var rect = dragEl.getBoundingClientRect(),475 css = _css(dragEl),476 options = this.options,477 ghostRect;478 ghostEl = dragEl.cloneNode(true);479 _toggleClass(ghostEl, options.ghostClass, false);480 _toggleClass(ghostEl, options.fallbackClass, true);481 _toggleClass(ghostEl, options.dragClass, true);482 _css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));483 _css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));484 _css(ghostEl, 'width', rect.width);485 _css(ghostEl, 'height', rect.height);486 _css(ghostEl, 'opacity', '0.8');487 _css(ghostEl, 'position', 'fixed');488 _css(ghostEl, 'zIndex', '100000');489 _css(ghostEl, 'pointerEvents', 'none');490 options.fallbackOnBody && document.body.appendChild(ghostEl) || rootEl.appendChild(ghostEl);491 // Fixing dimensions.492 ghostRect = ghostEl.getBoundingClientRect();493 _css(ghostEl, 'width', rect.width * 2 - ghostRect.width);494 _css(ghostEl, 'height', rect.height * 2 - ghostRect.height);495 }496 },497 _onDragStart: function (/**Event*/evt, /**boolean*/useFallback) {498 var dataTransfer = evt.dataTransfer,499 options = this.options;500 this._offUpEvents();501 if (activeGroup.checkPull(this, this, dragEl, evt)) {502 cloneEl = _clone(dragEl);503 cloneEl.draggable = false;504 cloneEl.style['will-change'] = '';505 _css(cloneEl, 'display', 'none');506 _toggleClass(cloneEl, this.options.chosenClass, false);507 rootEl.insertBefore(cloneEl, dragEl);508 _dispatchEvent(this, rootEl, 'clone', dragEl);509 }510 _toggleClass(dragEl, options.dragClass, true);511 if (useFallback) {512 if (useFallback === 'touch') {513 // Bind touch events514 _on(document, 'touchmove', this._onTouchMove);515 _on(document, 'touchend', this._onDrop);516 _on(document, 'touchcancel', this._onDrop);517 _on(document, 'pointermove', this._onTouchMove);518 _on(document, 'pointerup', this._onDrop);519 } else {520 // Old brwoser521 _on(document, 'mousemove', this._onTouchMove);522 _on(document, 'mouseup', this._onDrop);523 }524 this._loopId = setInterval(this._emulateDragOver, 50);525 }526 else {527 if (dataTransfer) {528 dataTransfer.effectAllowed = 'move';529 options.setData && options.setData.call(this, dataTransfer, dragEl);530 }531 _on(document, 'drop', this);532 setTimeout(this._dragStarted, 0);533 }534 },535 _onDragOver: function (/**Event*/evt) {536 var el = this.el,537 target,538 dragRect,539 targetRect,540 revert,541 options = this.options,542 group = options.group,543 activeSortable = Sortable.active,544 isOwner = (activeGroup === group),545 isMovingBetweenSortable = false,546 canSort = options.sort;547 if (evt.preventDefault !== void 0) {548 evt.preventDefault();549 !options.dragoverBubble && evt.stopPropagation();550 }551 if (dragEl.animated) {552 return;553 }554 moved = true;555 if (activeSortable && !options.disabled &&556 (isOwner557 ? canSort || (revert = !rootEl.contains(dragEl)) // Reverting item into the original list558 : (559 putSortable === this ||560 (561 (activeSortable.lastPullMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) &&562 group.checkPut(this, activeSortable, dragEl, evt)563 )564 )565 ) &&566 (evt.rootEl === void 0 || evt.rootEl === this.el) // touch fallback567 ) {568 // Smart auto-scrolling569 _autoScroll(evt, options, this.el);570 if (_silent) {571 return;572 }573 target = _closest(evt.target, options.draggable, el);574 dragRect = dragEl.getBoundingClientRect();575 if (putSortable !== this) {576 putSortable = this;577 isMovingBetweenSortable = true;578 }579 if (revert) {580 _cloneHide(activeSortable, true);581 parentEl = rootEl; // actualization582 if (cloneEl || nextEl) {583 rootEl.insertBefore(dragEl, cloneEl || nextEl);584 }585 else if (!canSort) {586 rootEl.appendChild(dragEl);587 }588 return;589 }590 if ((el.children.length === 0) || (el.children[0] === ghostEl) ||591 (el === evt.target) && (_ghostIsLast(el, evt))592 ) {593 //assign target only if condition is true594 if (el.children.length !== 0 && el.children[0] !== ghostEl && el === evt.target) {595 target = el.lastElementChild;596 }597 if (target) {598 if (target.animated) {599 return;600 }601 targetRect = target.getBoundingClientRect();602 }603 _cloneHide(activeSortable, isOwner);604 if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt) !== false) {605 if (!dragEl.contains(el)) {606 el.appendChild(dragEl);607 parentEl = el; // actualization608 }609 this._animate(dragRect, dragEl);610 target && this._animate(targetRect, target);611 }612 }613 else if (target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0)) {614 if (lastEl !== target) {615 lastEl = target;616 lastCSS = _css(target);617 lastParentCSS = _css(target.parentNode);618 }619 targetRect = target.getBoundingClientRect();620 var width = targetRect.right - targetRect.left,621 height = targetRect.bottom - targetRect.top,622 floating = R_FLOAT.test(lastCSS.cssFloat + lastCSS.display)623 || (lastParentCSS.display == 'flex' && lastParentCSS['flex-direction'].indexOf('row') === 0),624 isWide = (target.offsetWidth > dragEl.offsetWidth),625 isLong = (target.offsetHeight > dragEl.offsetHeight),626 halfway = (floating ? (evt.clientX - targetRect.left) / width : (evt.clientY - targetRect.top) / height) > 0.5,627 nextSibling = target.nextElementSibling,628 after = false629 ;630 if (floating) {631 var elTop = dragEl.offsetTop,632 tgTop = target.offsetTop;633 if (elTop === tgTop) {634 after = (target.previousElementSibling === dragEl) && !isWide || halfway && isWide;635 }636 else if (target.previousElementSibling === dragEl || dragEl.previousElementSibling === target) {637 after = (evt.clientY - targetRect.top) / height > 0.5;638 } else {639 after = tgTop > elTop;640 }641 } else if (!isMovingBetweenSortable) {642 after = (nextSibling !== dragEl) && !isLong || halfway && isLong;643 }644 var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after);645 if (moveVector !== false) {646 if (moveVector === 1 || moveVector === -1) {647 after = (moveVector === 1);648 }649 _silent = true;650 setTimeout(_unsilent, 30);651 _cloneHide(activeSortable, isOwner);652 if (!dragEl.contains(el)) {653 if (after && !nextSibling) {654 el.appendChild(dragEl);655 } else {656 target.parentNode.insertBefore(dragEl, after ? nextSibling : target);657 }658 }659 parentEl = dragEl.parentNode; // actualization660 this._animate(dragRect, dragEl);661 this._animate(targetRect, target);662 }663 }664 }665 },666 _animate: function (prevRect, target) {667 var ms = this.options.animation;668 if (ms) {669 var currentRect = target.getBoundingClientRect();670 if (prevRect.nodeType === 1) {671 prevRect = prevRect.getBoundingClientRect();672 }673 _css(target, 'transition', 'none');674 _css(target, 'transform', 'translate3d('675 + (prevRect.left - currentRect.left) + 'px,'676 + (prevRect.top - currentRect.top) + 'px,0)'677 );678 target.offsetWidth; // repaint679 _css(target, 'transition', 'all ' + ms + 'ms');680 _css(target, 'transform', 'translate3d(0,0,0)');681 clearTimeout(target.animated);682 target.animated = setTimeout(function () {683 _css(target, 'transition', '');684 _css(target, 'transform', '');685 target.animated = false;686 }, ms);687 }688 },689 _offUpEvents: function () {690 var ownerDocument = this.el.ownerDocument;691 _off(document, 'touchmove', this._onTouchMove);692 _off(document, 'pointermove', this._onTouchMove);693 _off(ownerDocument, 'mouseup', this._onDrop);694 _off(ownerDocument, 'touchend', this._onDrop);695 _off(ownerDocument, 'pointerup', this._onDrop);696 _off(ownerDocument, 'touchcancel', this._onDrop);697 _off(ownerDocument, 'pointercancel', this._onDrop);698 _off(ownerDocument, 'selectstart', this);699 },700 _onDrop: function (/**Event*/evt) {701 var el = this.el,702 options = this.options;703 clearInterval(this._loopId);704 clearInterval(autoScroll.pid);705 clearTimeout(this._dragStartTimer);706 // Unbind events707 _off(document, 'mousemove', this._onTouchMove);708 if (this.nativeDraggable) {709 _off(document, 'drop', this);710 _off(el, 'dragstart', this._onDragStart);711 }712 this._offUpEvents();713 if (evt) {714 if (moved) {715 evt.preventDefault();716 !options.dropBubble && evt.stopPropagation();717 }718 ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl);719 if (rootEl === parentEl || Sortable.active.lastPullMode !== 'clone') {720 // Remove clone721 cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl);722 }723 if (dragEl) {724 if (this.nativeDraggable) {725 _off(dragEl, 'dragend', this);726 }727 _disableDraggable(dragEl);728 dragEl.style['will-change'] = '';729 // Remove class's730 _toggleClass(dragEl, this.options.ghostClass, false);731 _toggleClass(dragEl, this.options.chosenClass, false);732 // Drag stop event733 _dispatchEvent(this, rootEl, 'unchoose', dragEl, rootEl, oldIndex);734 if (rootEl !== parentEl) {735 newIndex = _index(dragEl, options.draggable);736 if (newIndex >= 0) {737 // Add event738 _dispatchEvent(null, parentEl, 'add', dragEl, rootEl, oldIndex, newIndex);739 // Remove event740 _dispatchEvent(this, rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);741 // drag from one list and drop into another742 _dispatchEvent(null, parentEl, 'sort', dragEl, rootEl, oldIndex, newIndex);743 _dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);744 }745 }746 else {747 if (dragEl.nextSibling !== nextEl) {748 // Get the index of the dragged element within its parent749 newIndex = _index(dragEl, options.draggable);750 if (newIndex >= 0) {751 // drag & drop within the same list752 _dispatchEvent(this, rootEl, 'update', dragEl, rootEl, oldIndex, newIndex);753 _dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);754 }755 }756 }757 if (Sortable.active) {758 /* jshint eqnull:true */759 if (newIndex == null || newIndex === -1) {760 newIndex = oldIndex;761 }762 _dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);763 // Save sorting764 this.save();765 }766 }767 }768 this._nulling();769 },770 _nulling: function() {771 rootEl =772 dragEl =773 parentEl =774 ghostEl =775 nextEl =776 cloneEl =777 lastDownEl =778 scrollEl =779 scrollParentEl =780 tapEvt =781 touchEvt =782 moved =783 newIndex =784 lastEl =785 lastCSS =786 putSortable =787 activeGroup =788 Sortable.active = null;789 savedInputChecked.forEach(function (el) {790 el.checked = true;791 });792 savedInputChecked.length = 0;793 },794 handleEvent: function (/**Event*/evt) {795 switch (evt.type) {796 case 'drop':797 case 'dragend':798 this._onDrop(evt);799 break;800 case 'dragover':801 case 'dragenter':802 if (dragEl) {803 this._onDragOver(evt);804 _globalDragOver(evt);805 }806 break;807 case 'selectstart':808 evt.preventDefault();809 break;810 }811 },812 /**813 * Serializes the item into an array of string.814 * @returns {String[]}815 */816 toArray: function () {817 var order = [],818 el,819 children = this.el.children,820 i = 0,821 n = children.length,822 options = this.options;823 for (; i < n; i++) {824 el = children[i];825 if (_closest(el, options.draggable, this.el)) {826 order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));827 }828 }829 return order;830 },831 /**832 * Sorts the elements according to the array.833 * @param {String[]} order order of the items834 */835 sort: function (order) {836 var items = {}, rootEl = this.el;837 this.toArray().forEach(function (id, i) {838 var el = rootEl.children[i];839 if (_closest(el, this.options.draggable, rootEl)) {840 items[id] = el;841 }842 }, this);843 order.forEach(function (id) {844 if (items[id]) {845 rootEl.removeChild(items[id]);846 rootEl.appendChild(items[id]);847 }848 });849 },850 /**851 * Save the current sorting852 */853 save: function () {854 var store = this.options.store;855 store && store.set(this);856 },857 /**858 * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.859 * @param {HTMLElement} el860 * @param {String} [selector] default: `options.draggable`861 * @returns {HTMLElement|null}862 */863 closest: function (el, selector) {864 return _closest(el, selector || this.options.draggable, this.el);865 },866 /**867 * Set/get option868 * @param {string} name869 * @param {*} [value]870 * @returns {*}871 */872 option: function (name, value) {873 var options = this.options;874 if (value === void 0) {875 return options[name];876 } else {877 options[name] = value;878 if (name === 'group') {879 _prepareGroup(options);880 }881 }882 },883 /**884 * Destroy885 */886 destroy: function () {887 var el = this.el;888 el[expando] = null;889 _off(el, 'mousedown', this._onTapStart);890 _off(el, 'touchstart', this._onTapStart);891 _off(el, 'pointerdown', this._onTapStart);892 if (this.nativeDraggable) {893 _off(el, 'dragover', this);894 _off(el, 'dragenter', this);895 }896 // Remove draggable attributes897 Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {898 el.removeAttribute('draggable');899 });900 touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);901 this._onDrop();902 this.el = el = null;903 }904 };905 function _cloneHide(sortable, state) {906 if (sortable.lastPullMode !== 'clone') {907 state = true;908 }909 if (cloneEl && (cloneEl.state !== state)) {910 _css(cloneEl, 'display', state ? 'none' : '');911 if (!state) {912 if (cloneEl.state) {913 if (sortable.options.group.revertClone) {914 rootEl.insertBefore(cloneEl, nextEl);915 sortable._animate(dragEl, cloneEl);916 } else {917 rootEl.insertBefore(cloneEl, dragEl);918 }919 }920 }921 cloneEl.state = state;922 }923 }924 function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {925 if (el) {926 ctx = ctx || document;927 do {928 if ((selector === '>*' && el.parentNode === ctx) || _matches(el, selector)) {929 return el;930 }931 /* jshint boss:true */932 } while (el = _getParentOrHost(el));933 }934 return null;935 }936 function _getParentOrHost(el) {937 var parent = el.host;938 return (parent && parent.nodeType) ? parent : el.parentNode;939 }940 function _globalDragOver(/**Event*/evt) {941 if (evt.dataTransfer) {942 evt.dataTransfer.dropEffect = 'move';943 }944 evt.preventDefault();945 }946 function _on(el, event, fn) {947 el.addEventListener(event, fn, captureMode);948 }949 function _off(el, event, fn) {950 el.removeEventListener(event, fn, captureMode);951 }952 function _toggleClass(el, name, state) {953 if (el) {954 if (el.classList) {955 el.classList[state ? 'add' : 'remove'](name);956 }957 else {958 var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' ');959 el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' ');960 }961 }962 }963 function _css(el, prop, val) {964 var style = el && el.style;965 if (style) {966 if (val === void 0) {967 if (document.defaultView && document.defaultView.getComputedStyle) {968 val = document.defaultView.getComputedStyle(el, '');969 }970 else if (el.currentStyle) {971 val = el.currentStyle;972 }973 return prop === void 0 ? val : val[prop];974 }975 else {976 if (!(prop in style)) {977 prop = '-webkit-' + prop;978 }979 style[prop] = val + (typeof val === 'string' ? '' : 'px');980 }981 }982 }983 function _find(ctx, tagName, iterator) {984 if (ctx) {985 var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;986 if (iterator) {987 for (; i < n; i++) {988 iterator(list[i], i);989 }990 }991 return list;992 }993 return [];994 }995 function _dispatchEvent(sortable, rootEl, name, targetEl, fromEl, startIndex, newIndex) {996 sortable = (sortable || rootEl[expando]);997 var evt = document.createEvent('Event'),998 options = sortable.options,999 onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);1000 evt.initEvent(name, true, true);1001 evt.to = rootEl;1002 evt.from = fromEl || rootEl;1003 evt.item = targetEl || rootEl;1004 evt.clone = cloneEl;1005 evt.oldIndex = startIndex;1006 evt.newIndex = newIndex;1007 rootEl.dispatchEvent(evt);1008 if (options[onName]) {1009 options[onName].call(sortable, evt);1010 }1011 }1012 function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvt, willInsertAfter) {1013 var evt,1014 sortable = fromEl[expando],1015 onMoveFn = sortable.options.onMove,1016 retVal;1017 evt = document.createEvent('Event');1018 evt.initEvent('move', true, true);1019 evt.to = toEl;1020 evt.from = fromEl;1021 evt.dragged = dragEl;1022 evt.draggedRect = dragRect;1023 evt.related = targetEl || toEl;1024 evt.relatedRect = targetRect || toEl.getBoundingClientRect();1025 evt.willInsertAfter = willInsertAfter;1026 fromEl.dispatchEvent(evt);1027 if (onMoveFn) {1028 retVal = onMoveFn.call(sortable, evt, originalEvt);1029 }1030 return retVal;1031 }1032 function _disableDraggable(el) {1033 el.draggable = false;1034 }1035 function _unsilent() {1036 _silent = false;1037 }1038 /** @returns {HTMLElement|false} */1039 function _ghostIsLast(el, evt) {1040 var lastEl = el.lastElementChild,1041 rect = lastEl.getBoundingClientRect();1042 // 5 Ҁ” min delta1043 // abs Ҁ” ΓΒ½ΓΒ΅ΓΒ»Γ‘ΒŒΓΒ·Γ‘Β ΓΒ΄ΓΒΎΓΒ±ΓΒ°ΓΒ²ΓΒ»Γ‘ΒΓ‘Β‚Γ‘ΒŒ, а то ΓΒ³ΓΒ»Γ‘ΒŽΓΒΊΓΒΈ при навСдСнии свСрху1044 return (evt.clientY - (rect.top + rect.height) > 5) ||1045 (evt.clientX - (rect.left + rect.width) > 5);1046 }1047 /**1048 * Generate id1049 * @param {HTMLElement} el1050 * @returns {String}1051 * @private1052 */1053 function _generateId(el) {1054 var str = el.tagName + el.className + el.src + el.href + el.textContent,1055 i = str.length,1056 sum = 0;1057 while (i--) {1058 sum += str.charCodeAt(i);1059 }1060 return sum.toString(36);1061 }1062 /**1063 * Returns the index of an element within its parent for a selected set of1064 * elements1065 * @param {HTMLElement} el1066 * @param {selector} selector1067 * @return {number}1068 */1069 function _index(el, selector) {1070 var index = 0;1071 if (!el || !el.parentNode) {1072 return -1;1073 }1074 while (el && (el = el.previousElementSibling)) {1075 if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && (selector === '>*' || _matches(el, selector))) {1076 index++;1077 }1078 }1079 return index;1080 }1081 function _matches(/**HTMLElement*/el, /**String*/selector) {1082 if (el) {1083 selector = selector.split('.');1084 var tag = selector.shift().toUpperCase(),1085 re = new RegExp('\\s(' + selector.join('|') + ')(?=\\s)', 'g');1086 return (1087 (tag === '' || el.nodeName.toUpperCase() == tag) &&1088 (!selector.length || ((' ' + el.className + ' ').match(re) || []).length == selector.length)1089 );1090 }1091 return false;1092 }1093 function _throttle(callback, ms) {1094 var args, _this;1095 return function () {1096 if (args === void 0) {1097 args = arguments;1098 _this = this;1099 setTimeout(function () {1100 if (args.length === 1) {1101 callback.call(_this, args[0]);1102 } else {1103 callback.apply(_this, args);1104 }1105 args = void 0;1106 }, ms);1107 }1108 };1109 }1110 function _extend(dst, src) {1111 if (dst && src) {1112 for (var key in src) {1113 if (src.hasOwnProperty(key)) {1114 dst[key] = src[key];1115 }1116 }1117 }1118 return dst;1119 }1120 function _clone(el) {1121 return $1122 ? $(el).clone(true)[0]1123 : (Polymer && Polymer.dom1124 ? Polymer.dom(el).cloneNode(true)1125 : el.cloneNode(true)1126 );1127 }1128 function _saveInputCheckedState(root) {1129 var inputs = root.getElementsByTagName('input');1130 var idx = inputs.length;1131 while (idx--) {1132 var el = inputs[idx];1133 el.checked && savedInputChecked.push(el);1134 }1135 }1136 // Fixed #973: 1137 _on(document, 'touchmove', function (evt) {1138 if (Sortable.active) {1139 evt.preventDefault();1140 }1141 });1142 try {1143 window.addEventListener('test', null, Object.defineProperty({}, 'passive', {1144 get: function () {1145 captureMode = {1146 capture: false,1147 passive: false1148 };1149 }1150 }));1151 } catch (err) {}1152 // Export utils1153 Sortable.utils = {1154 on: _on,1155 off: _off,1156 css: _css,1157 find: _find,1158 is: function (el, selector) {1159 return !!_closest(el, selector, el);1160 },1161 extend: _extend,1162 throttle: _throttle,1163 closest: _closest,1164 toggleClass: _toggleClass,1165 clone: _clone,1166 index: _index1167 };1168 /**1169 * Create sortable instance1170 * @param {HTMLElement} el1171 * @param {Object} [options]1172 */1173 Sortable.create = function (el, options) {1174 return new Sortable(el, options);1175 };1176 // Export1177 Sortable.version = '1.6.1';1178 return Sortable;...

Full Screen

Full Screen

sortable.1.6.0.js

Source:sortable.1.6.0.js Github

copy

Full Screen

1/**!2 * Sortable3 * @author RubaXa <trash@rubaxa.org>4 * @license MIT5 */6(function sortableModule(factory) {7 "use strict";8 if (typeof define === "function" && define.amd) {9 define(factory);10 }11 else if (typeof module != "undefined" && typeof module.exports != "undefined") {12 module.exports = factory();13 }14 else {15 /* jshint sub:true */16 window["Sortable"] = factory();17 }18})(function sortableFactory() {19 "use strict";20 if (typeof window == "undefined" || !window.document) {21 return function sortableError() {22 throw new Error("Sortable.js requires a window with a document");23 };24 }25 var dragEl,26 parentEl,27 ghostEl,28 cloneEl,29 rootEl,30 nextEl,31 lastDownEl,32 scrollEl,33 scrollParentEl,34 scrollCustomFn,35 lastEl,36 lastCSS,37 lastParentCSS,38 oldIndex,39 newIndex,40 activeGroup,41 putSortable,42 autoScroll = {},43 tapEvt,44 touchEvt,45 moved,46 /** @const */47 R_SPACE = /\s+/g,48 R_FLOAT = /left|right|inline/,49 expando = 'Sortable' + (new Date).getTime(),50 win = window,51 document = win.document,52 parseInt = win.parseInt,53 $ = win.jQuery || win.Zepto,54 Polymer = win.Polymer,55 captureMode = false,56 supportDraggable = !!('draggable' in document.createElement('div')),57 supportCssPointerEvents = (function (el) {58 // false when IE1159 if (!!navigator.userAgent.match(/Trident.*rv[ :]?11\./)) {60 return false;61 }62 el = document.createElement('x');63 el.style.cssText = 'pointer-events:auto';64 return el.style.pointerEvents === 'auto';65 })(),66 _silent = false,67 abs = Math.abs,68 min = Math.min,69 savedInputChecked = [],70 touchDragOverListeners = [],71 _autoScroll = _throttle(function (/**Event*/evt, /**Object*/options, /**HTMLElement*/rootEl) {72 // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=50552173 if (rootEl && options.scroll) {74 var _this = rootEl[expando],75 el,76 rect,77 sens = options.scrollSensitivity,78 speed = options.scrollSpeed,79 x = evt.clientX,80 y = evt.clientY,81 winWidth = window.innerWidth,82 winHeight = window.innerHeight,83 vx,84 vy,85 scrollOffsetX,86 scrollOffsetY87 ;88 // Delect scrollEl89 if (scrollParentEl !== rootEl) {90 scrollEl = options.scroll;91 scrollParentEl = rootEl;92 scrollCustomFn = options.scrollFn;93 if (scrollEl === true) {94 scrollEl = rootEl;95 do {96 if ((scrollEl.offsetWidth < scrollEl.scrollWidth) ||97 (scrollEl.offsetHeight < scrollEl.scrollHeight)98 ) {99 break;100 }101 /* jshint boss:true */102 } while (scrollEl = scrollEl.parentNode);103 }104 }105 if (scrollEl) {106 el = scrollEl;107 rect = scrollEl.getBoundingClientRect();108 vx = (abs(rect.right - x) <= sens) - (abs(rect.left - x) <= sens);109 vy = (abs(rect.bottom - y) <= sens) - (abs(rect.top - y) <= sens);110 }111 if (!(vx || vy)) {112 vx = (winWidth - x <= sens) - (x <= sens);113 vy = (winHeight - y <= sens) - (y <= sens);114 /* jshint expr:true */115 (vx || vy) && (el = win);116 }117 if (autoScroll.vx !== vx || autoScroll.vy !== vy || autoScroll.el !== el) {118 autoScroll.el = el;119 autoScroll.vx = vx;120 autoScroll.vy = vy;121 clearInterval(autoScroll.pid);122 if (el) {123 autoScroll.pid = setInterval(function () {124 scrollOffsetY = vy ? vy * speed : 0;125 scrollOffsetX = vx ? vx * speed : 0;126 if ('function' === typeof(scrollCustomFn)) {127 return scrollCustomFn.call(_this, scrollOffsetX, scrollOffsetY, evt);128 }129 if (el === win) {130 win.scrollTo(win.pageXOffset + scrollOffsetX, win.pageYOffset + scrollOffsetY);131 } else {132 el.scrollTop += scrollOffsetY;133 el.scrollLeft += scrollOffsetX;134 }135 }, 24);136 }137 }138 }139 }, 30),140 _prepareGroup = function (options) {141 function toFn(value, pull) {142 if (value === void 0 || value === true) {143 value = group.name;144 }145 if (typeof value === 'function') {146 return value;147 } else {148 return function (to, from) {149 var fromGroup = from.options.group.name;150 return pull151 ? value152 : value && (value.join153 ? value.indexOf(fromGroup) > -1154 : (fromGroup == value)155 );156 };157 }158 }159 var group = {};160 var originalGroup = options.group;161 if (!originalGroup || typeof originalGroup != 'object') {162 originalGroup = {name: originalGroup};163 }164 group.name = originalGroup.name;165 group.checkPull = toFn(originalGroup.pull, true);166 group.checkPut = toFn(originalGroup.put);167 group.revertClone = originalGroup.revertClone;168 options.group = group;169 }170 ;171 /**172 * @class Sortable173 * @param {HTMLElement} el174 * @param {Object} [options]175 */176 function Sortable(el, options) {177 if (!(el && el.nodeType && el.nodeType === 1)) {178 throw 'Sortable: `el` must be HTMLElement, and not ' + {}.toString.call(el);179 }180 this.el = el; // root element181 this.options = options = _extend({}, options);182 // Export instance183 el[expando] = this;184 // Default options185 var defaults = {186 group: Math.random(),187 sort: true,188 disabled: false,189 store: null,190 handle: null,191 scroll: true,192 scrollSensitivity: 30,193 scrollSpeed: 10,194 draggable: /[uo]l/i.test(el.nodeName) ? 'li' : '>*',195 ghostClass: 'sortable-ghost',196 chosenClass: 'sortable-chosen',197 dragClass: 'sortable-drag',198 ignore: 'a, img',199 filter: null,200 preventOnFilter: true,201 animation: 0,202 setData: function (dataTransfer, dragEl) {203 dataTransfer.setData('Text', dragEl.textContent);204 },205 dropBubble: false,206 dragoverBubble: false,207 dataIdAttr: 'data-id',208 delay: 0,209 forceFallback: false,210 fallbackClass: 'sortable-fallback',211 fallbackOnBody: false,212 fallbackTolerance: 0,213 fallbackOffset: {x: 0, y: 0}214 };215 // Set default options216 for (var name in defaults) {217 !(name in options) && (options[name] = defaults[name]);218 }219 _prepareGroup(options);220 // Bind all private methods221 for (var fn in this) {222 if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {223 this[fn] = this[fn].bind(this);224 }225 }226 // Setup drag mode227 this.nativeDraggable = options.forceFallback ? false : supportDraggable;228 // Bind events229 _on(el, 'mousedown', this._onTapStart);230 _on(el, 'touchstart', this._onTapStart);231 _on(el, 'pointerdown', this._onTapStart);232 if (this.nativeDraggable) {233 _on(el, 'dragover', this);234 _on(el, 'dragenter', this);235 }236 touchDragOverListeners.push(this._onDragOver);237 // Restore sorting238 options.store && this.sort(options.store.get(this));239 }240 Sortable.prototype = /** @lends Sortable.prototype */ {241 constructor: Sortable,242 _onTapStart: function (/** Event|TouchEvent */evt) {243 var _this = this,244 el = this.el,245 options = this.options,246 preventOnFilter = options.preventOnFilter,247 type = evt.type,248 touch = evt.touches && evt.touches[0],249 target = (touch || evt).target,250 originalTarget = evt.target.shadowRoot && evt.path[0] || target,251 filter = options.filter,252 startIndex;253 _saveInputCheckedState(el);254 // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group.255 if (dragEl) {256 return;257 }258 if (type === 'mousedown' && evt.button !== 0 || options.disabled) {259 return; // only left button or enabled260 }261 target = _closest(target, options.draggable, el);262 if (!target) {263 return;264 }265 if (lastDownEl === target) {266 // Ignoring duplicate `down`267 return;268 }269 // Get the index of the dragged element within its parent270 startIndex = _index(target, options.draggable);271 // Check filter272 if (typeof filter === 'function') {273 if (filter.call(this, evt, target, this)) {274 _dispatchEvent(_this, originalTarget, 'filter', target, el, startIndex);275 preventOnFilter && evt.preventDefault();276 return; // cancel dnd277 }278 }279 else if (filter) {280 filter = filter.split(',').some(function (criteria) {281 criteria = _closest(originalTarget, criteria.trim(), el);282 if (criteria) {283 _dispatchEvent(_this, criteria, 'filter', target, el, startIndex);284 return true;285 }286 });287 if (filter) {288 preventOnFilter && evt.preventDefault();289 return; // cancel dnd290 }291 }292 if (options.handle && !_closest(originalTarget, options.handle, el)) {293 return;294 }295 // Prepare `dragstart`296 this._prepareDragStart(evt, touch, target, startIndex);297 },298 _prepareDragStart: function (/** Event */evt, /** Touch */touch, /** HTMLElement */target, /** Number */startIndex) {299 var _this = this,300 el = _this.el,301 options = _this.options,302 ownerDocument = el.ownerDocument,303 dragStartFn;304 if (target && !dragEl && (target.parentNode === el)) {305 tapEvt = evt;306 rootEl = el;307 dragEl = target;308 parentEl = dragEl.parentNode;309 nextEl = dragEl.nextSibling;310 lastDownEl = target;311 activeGroup = options.group;312 oldIndex = startIndex;313 this._lastX = (touch || evt).clientX;314 this._lastY = (touch || evt).clientY;315 dragEl.style['will-change'] = 'transform';316 dragStartFn = function () {317 // Delayed drag has been triggered318 // we can re-enable the events: touchmove/mousemove319 _this._disableDelayedDrag();320 // Make the element draggable321 dragEl.draggable = _this.nativeDraggable;322 // Chosen item323 _toggleClass(dragEl, options.chosenClass, true);324 // Bind the events: dragstart/dragend325 _this._triggerDragStart(evt, touch);326 // Drag start event327 _dispatchEvent(_this, rootEl, 'choose', dragEl, rootEl, oldIndex);328 };329 // Disable "draggable"330 options.ignore.split(',').forEach(function (criteria) {331 _find(dragEl, criteria.trim(), _disableDraggable);332 });333 _on(ownerDocument, 'mouseup', _this._onDrop);334 _on(ownerDocument, 'touchend', _this._onDrop);335 _on(ownerDocument, 'touchcancel', _this._onDrop);336 _on(ownerDocument, 'pointercancel', _this._onDrop);337 _on(ownerDocument, 'selectstart', _this);338 if (options.delay) {339 // If the user moves the pointer or let go the click or touch340 // before the delay has been reached:341 // disable the delayed drag342 _on(ownerDocument, 'mouseup', _this._disableDelayedDrag);343 _on(ownerDocument, 'touchend', _this._disableDelayedDrag);344 _on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);345 _on(ownerDocument, 'mousemove', _this._disableDelayedDrag);346 _on(ownerDocument, 'touchmove', _this._disableDelayedDrag);347 _on(ownerDocument, 'pointermove', _this._disableDelayedDrag);348 _this._dragStartTimer = setTimeout(dragStartFn, options.delay);349 } else {350 dragStartFn();351 }352 }353 },354 _disableDelayedDrag: function () {355 var ownerDocument = this.el.ownerDocument;356 clearTimeout(this._dragStartTimer);357 _off(ownerDocument, 'mouseup', this._disableDelayedDrag);358 _off(ownerDocument, 'touchend', this._disableDelayedDrag);359 _off(ownerDocument, 'touchcancel', this._disableDelayedDrag);360 _off(ownerDocument, 'mousemove', this._disableDelayedDrag);361 _off(ownerDocument, 'touchmove', this._disableDelayedDrag);362 _off(ownerDocument, 'pointermove', this._disableDelayedDrag);363 },364 _triggerDragStart: function (/** Event */evt, /** Touch */touch) {365 touch = touch || (evt.pointerType == 'touch' ? evt : null);366 if (touch) {367 // Touch device support368 tapEvt = {369 target: dragEl,370 clientX: touch.clientX,371 clientY: touch.clientY372 };373 this._onDragStart(tapEvt, 'touch');374 }375 else if (!this.nativeDraggable) {376 this._onDragStart(tapEvt, true);377 }378 else {379 _on(dragEl, 'dragend', this);380 _on(rootEl, 'dragstart', this._onDragStart);381 }382 try {383 if (document.selection) {384 // Timeout neccessary for IE9385 setTimeout(function () {386 document.selection.empty();387 });388 } else {389 window.getSelection().removeAllRanges();390 }391 } catch (err) {392 console.log(err)393 }394 },395 _dragStarted: function () {396 if (rootEl && dragEl) {397 var options = this.options;398 // Apply effect399 _toggleClass(dragEl, options.ghostClass, true);400 _toggleClass(dragEl, options.dragClass, false);401 Sortable.active = this;402 // Drag start event403 _dispatchEvent(this, rootEl, 'start', dragEl, rootEl, oldIndex);404 } else {405 this._nulling();406 }407 },408 _emulateDragOver: function () {409 if (touchEvt) {410 if (this._lastX === touchEvt.clientX && this._lastY === touchEvt.clientY) {411 return;412 }413 this._lastX = touchEvt.clientX;414 this._lastY = touchEvt.clientY;415 if (!supportCssPointerEvents) {416 _css(ghostEl, 'display', 'none');417 }418 var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY),419 parent = target,420 i = touchDragOverListeners.length;421 if (parent) {422 do {423 if (parent[expando]) {424 while (i--) {425 touchDragOverListeners[i]({426 clientX: touchEvt.clientX,427 clientY: touchEvt.clientY,428 target: target,429 rootEl: parent430 });431 }432 break;433 }434 target = parent; // store last element435 }436 /* jshint boss:true */437 while (parent = parent.parentNode);438 }439 if (!supportCssPointerEvents) {440 _css(ghostEl, 'display', '');441 }442 }443 },444 _onTouchMove: function (/**TouchEvent*/evt) {445 if (tapEvt) {446 var options = this.options,447 fallbackTolerance = options.fallbackTolerance,448 fallbackOffset = options.fallbackOffset,449 touch = evt.touches ? evt.touches[0] : evt,450 dx = (touch.clientX - tapEvt.clientX) + fallbackOffset.x,451 dy = (touch.clientY - tapEvt.clientY) + fallbackOffset.y,452 translate3d = evt.touches ? 'translate3d(' + dx + 'px,' + dy + 'px,0)' : 'translate(' + dx + 'px,' + dy + 'px)';453 // only set the status to dragging, when we are actually dragging454 if (!Sortable.active) {455 if (fallbackTolerance &&456 min(abs(touch.clientX - this._lastX), abs(touch.clientY - this._lastY)) < fallbackTolerance457 ) {458 return;459 }460 this._dragStarted();461 }462 // as well as creating the ghost element on the document body463 this._appendGhost();464 moved = true;465 touchEvt = touch;466 _css(ghostEl, 'webkitTransform', translate3d);467 _css(ghostEl, 'mozTransform', translate3d);468 _css(ghostEl, 'msTransform', translate3d);469 _css(ghostEl, 'transform', translate3d);470 evt.preventDefault();471 }472 },473 _appendGhost: function () {474 if (!ghostEl) {475 var rect = dragEl.getBoundingClientRect(),476 css = _css(dragEl),477 options = this.options,478 ghostRect;479 ghostEl = dragEl.cloneNode(true);480 _toggleClass(ghostEl, options.ghostClass, false);481 _toggleClass(ghostEl, options.fallbackClass, true);482 _toggleClass(ghostEl, options.dragClass, true);483 _css(ghostEl, 'top', rect.top - parseInt(css.marginTop, 10));484 _css(ghostEl, 'left', rect.left - parseInt(css.marginLeft, 10));485 _css(ghostEl, 'width', rect.width);486 _css(ghostEl, 'height', rect.height);487 _css(ghostEl, 'opacity', '0.8');488 _css(ghostEl, 'position', 'fixed');489 _css(ghostEl, 'zIndex', '100000');490 _css(ghostEl, 'pointerEvents', 'none');491 options.fallbackOnBody && document.body.appendChild(ghostEl) || rootEl.appendChild(ghostEl);492 // Fixing dimensions.493 ghostRect = ghostEl.getBoundingClientRect();494 _css(ghostEl, 'width', rect.width * 2 - ghostRect.width);495 _css(ghostEl, 'height', rect.height * 2 - ghostRect.height);496 }497 },498 _onDragStart: function (/**Event*/evt, /**boolean*/useFallback) {499 var dataTransfer = evt.dataTransfer,500 options = this.options;501 this._offUpEvents();502 if (activeGroup.checkPull(this, this, dragEl, evt)) {503 cloneEl = _clone(dragEl);504 cloneEl.draggable = false;505 cloneEl.style['will-change'] = '';506 _css(cloneEl, 'display', 'none');507 _toggleClass(cloneEl, this.options.chosenClass, false);508 rootEl.insertBefore(cloneEl, dragEl);509 _dispatchEvent(this, rootEl, 'clone', dragEl);510 }511 _toggleClass(dragEl, options.dragClass, true);512 if (useFallback) {513 if (useFallback === 'touch') {514 // Bind touch events515 _on(document, 'touchmove', this._onTouchMove);516 _on(document, 'touchend', this._onDrop);517 _on(document, 'touchcancel', this._onDrop);518 _on(document, 'pointermove', this._onTouchMove);519 _on(document, 'pointerup', this._onDrop);520 } else {521 // Old brwoser522 _on(document, 'mousemove', this._onTouchMove);523 _on(document, 'mouseup', this._onDrop);524 }525 this._loopId = setInterval(this._emulateDragOver, 50);526 }527 else {528 if (dataTransfer) {529 dataTransfer.effectAllowed = 'move';530 options.setData && options.setData.call(this, dataTransfer, dragEl);531 }532 _on(document, 'drop', this);533 setTimeout(this._dragStarted, 0);534 }535 },536 _onDragOver: function (/**Event*/evt) {537 var el = this.el,538 target,539 dragRect,540 targetRect,541 revert,542 options = this.options,543 group = options.group,544 activeSortable = Sortable.active,545 isOwner = (activeGroup === group),546 isMovingBetweenSortable = false,547 canSort = options.sort;548 if (evt.preventDefault !== void 0) {549 evt.preventDefault();550 !options.dragoverBubble && evt.stopPropagation();551 }552 if (dragEl.animated) {553 return;554 }555 moved = true;556 if (activeSortable && !options.disabled &&557 (isOwner558 ? canSort || (revert = !rootEl.contains(dragEl)) // Reverting item into the original list559 : (560 putSortable === this ||561 (562 (activeSortable.lastPullMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) &&563 group.checkPut(this, activeSortable, dragEl, evt)564 )565 )566 ) &&567 (evt.rootEl === void 0 || evt.rootEl === this.el) // touch fallback568 ) {569 // Smart auto-scrolling570 _autoScroll(evt, options, this.el);571 if (_silent) {572 return;573 }574 target = _closest(evt.target, options.draggable, el);575 dragRect = dragEl.getBoundingClientRect();576 if (putSortable !== this) {577 putSortable = this;578 isMovingBetweenSortable = true;579 }580 if (revert) {581 _cloneHide(activeSortable, true);582 parentEl = rootEl; // actualization583 if (cloneEl || nextEl) {584 rootEl.insertBefore(dragEl, cloneEl || nextEl);585 }586 else if (!canSort) {587 rootEl.appendChild(dragEl);588 }589 return;590 }591 if ((el.children.length === 0) || (el.children[0] === ghostEl) ||592 (el === evt.target) && (_ghostIsLast(el, evt))593 ) {594 //assign target only if condition is true595 if (el.children.length !== 0 && el.children[0] !== ghostEl && el === evt.target) {596 target = el.lastElementChild;597 }598 if (target) {599 if (target.animated) {600 return;601 }602 targetRect = target.getBoundingClientRect();603 }604 _cloneHide(activeSortable, isOwner);605 if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt) !== false) {606 if (!dragEl.contains(el)) {607 el.appendChild(dragEl);608 parentEl = el; // actualization609 }610 this._animate(dragRect, dragEl);611 target && this._animate(targetRect, target);612 }613 }614 else if (target && !target.animated && target !== dragEl && (target.parentNode[expando] !== void 0)) {615 if (lastEl !== target) {616 lastEl = target;617 lastCSS = _css(target);618 lastParentCSS = _css(target.parentNode);619 }620 targetRect = target.getBoundingClientRect();621 var width = targetRect.right - targetRect.left,622 height = targetRect.bottom - targetRect.top,623 floating = R_FLOAT.test(lastCSS.cssFloat + lastCSS.display)624 || (lastParentCSS.display == 'flex' && lastParentCSS['flex-direction'].indexOf('row') === 0),625 isWide = (target.offsetWidth > dragEl.offsetWidth),626 isLong = (target.offsetHeight > dragEl.offsetHeight),627 halfway = (floating ? (evt.clientX - targetRect.left) / width : (evt.clientY - targetRect.top) / height) > 0.5,628 nextSibling = target.nextElementSibling,629 after = false630 ;631 if (floating) {632 var elTop = dragEl.offsetTop,633 tgTop = target.offsetTop;634 if (elTop === tgTop) {635 after = (target.previousElementSibling === dragEl) && !isWide || halfway && isWide;636 }637 else if (target.previousElementSibling === dragEl || dragEl.previousElementSibling === target) {638 after = (evt.clientY - targetRect.top) / height > 0.5;639 } else {640 after = tgTop > elTop;641 }642 } else if (!isMovingBetweenSortable) {643 after = (nextSibling !== dragEl) && !isLong || halfway && isLong;644 }645 var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after);646 if (moveVector !== false) {647 if (moveVector === 1 || moveVector === -1) {648 after = (moveVector === 1);649 }650 _silent = true;651 setTimeout(_unsilent, 30);652 _cloneHide(activeSortable, isOwner);653 if (!dragEl.contains(el)) {654 if (after && !nextSibling) {655 el.appendChild(dragEl);656 } else {657 target.parentNode.insertBefore(dragEl, after ? nextSibling : target);658 }659 }660 parentEl = dragEl.parentNode; // actualization661 this._animate(dragRect, dragEl);662 this._animate(targetRect, target);663 }664 }665 }666 },667 _animate: function (prevRect, target) {668 var ms = this.options.animation;669 if (ms) {670 var currentRect = target.getBoundingClientRect();671 if (prevRect.nodeType === 1) {672 prevRect = prevRect.getBoundingClientRect();673 }674 _css(target, 'transition', 'none');675 _css(target, 'transform', 'translate3d('676 + (prevRect.left - currentRect.left) + 'px,'677 + (prevRect.top - currentRect.top) + 'px,0)'678 );679 target.offsetWidth; // repaint680 _css(target, 'transition', 'all ' + ms + 'ms');681 _css(target, 'transform', 'translate3d(0,0,0)');682 clearTimeout(target.animated);683 target.animated = setTimeout(function () {684 _css(target, 'transition', '');685 _css(target, 'transform', '');686 target.animated = false;687 }, ms);688 }689 },690 _offUpEvents: function () {691 var ownerDocument = this.el.ownerDocument;692 _off(document, 'touchmove', this._onTouchMove);693 _off(document, 'pointermove', this._onTouchMove);694 _off(ownerDocument, 'mouseup', this._onDrop);695 _off(ownerDocument, 'touchend', this._onDrop);696 _off(ownerDocument, 'pointerup', this._onDrop);697 _off(ownerDocument, 'touchcancel', this._onDrop);698 _off(ownerDocument, 'pointercancel', this._onDrop);699 _off(ownerDocument, 'selectstart', this);700 },701 _onDrop: function (/**Event*/evt) {702 var el = this.el,703 options = this.options;704 clearInterval(this._loopId);705 clearInterval(autoScroll.pid);706 clearTimeout(this._dragStartTimer);707 // Unbind events708 _off(document, 'mousemove', this._onTouchMove);709 if (this.nativeDraggable) {710 _off(document, 'drop', this);711 _off(el, 'dragstart', this._onDragStart);712 }713 this._offUpEvents();714 if (evt) {715 if (moved) {716 evt.preventDefault();717 !options.dropBubble && evt.stopPropagation();718 }719 ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl);720 if (rootEl === parentEl || Sortable.active.lastPullMode !== 'clone') {721 // Remove clone722 cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl);723 }724 if (dragEl) {725 if (this.nativeDraggable) {726 _off(dragEl, 'dragend', this);727 }728 _disableDraggable(dragEl);729 dragEl.style['will-change'] = '';730 // Remove class's731 _toggleClass(dragEl, this.options.ghostClass, false);732 _toggleClass(dragEl, this.options.chosenClass, false);733 // Drag stop event734 _dispatchEvent(this, rootEl, 'unchoose', dragEl, rootEl, oldIndex);735 if (rootEl !== parentEl) {736 newIndex = _index(dragEl, options.draggable);737 if (newIndex >= 0) {738 // Add event739 _dispatchEvent(null, parentEl, 'add', dragEl, rootEl, oldIndex, newIndex);740 // Remove event741 _dispatchEvent(this, rootEl, 'remove', dragEl, rootEl, oldIndex, newIndex);742 // drag from one list and drop into another743 _dispatchEvent(null, parentEl, 'sort', dragEl, rootEl, oldIndex, newIndex);744 _dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);745 }746 }747 else {748 if (dragEl.nextSibling !== nextEl) {749 // Get the index of the dragged element within its parent750 newIndex = _index(dragEl, options.draggable);751 if (newIndex >= 0) {752 // drag & drop within the same list753 _dispatchEvent(this, rootEl, 'update', dragEl, rootEl, oldIndex, newIndex);754 _dispatchEvent(this, rootEl, 'sort', dragEl, rootEl, oldIndex, newIndex);755 }756 }757 }758 if (Sortable.active) {759 /* jshint eqnull:true */760 if (newIndex == null || newIndex === -1) {761 newIndex = oldIndex;762 }763 _dispatchEvent(this, rootEl, 'end', dragEl, rootEl, oldIndex, newIndex);764 // Save sorting765 this.save();766 }767 }768 }769 this._nulling();770 },771 _nulling: function() {772 rootEl =773 dragEl =774 parentEl =775 ghostEl =776 nextEl =777 cloneEl =778 lastDownEl =779 scrollEl =780 scrollParentEl =781 tapEvt =782 touchEvt =783 moved =784 newIndex =785 lastEl =786 lastCSS =787 putSortable =788 activeGroup =789 Sortable.active = null;790 savedInputChecked.forEach(function (el) {791 el.checked = true;792 });793 savedInputChecked.length = 0;794 },795 handleEvent: function (/**Event*/evt) {796 switch (evt.type) {797 case 'drop':798 case 'dragend':799 this._onDrop(evt);800 break;801 case 'dragover':802 case 'dragenter':803 if (dragEl) {804 this._onDragOver(evt);805 _globalDragOver(evt);806 }807 break;808 case 'selectstart':809 evt.preventDefault();810 break;811 }812 },813 /**814 * Serializes the item into an array of string.815 * @returns {String[]}816 */817 toArray: function () {818 var order = [],819 el,820 children = this.el.children,821 i = 0,822 n = children.length,823 options = this.options;824 for (; i < n; i++) {825 el = children[i];826 if (_closest(el, options.draggable, this.el)) {827 order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));828 }829 }830 return order;831 },832 /**833 * Sorts the elements according to the array.834 * @param {String[]} order order of the items835 */836 sort: function (order) {837 var items = {}, rootEl = this.el;838 this.toArray().forEach(function (id, i) {839 var el = rootEl.children[i];840 if (_closest(el, this.options.draggable, rootEl)) {841 items[id] = el;842 }843 }, this);844 order.forEach(function (id) {845 if (items[id]) {846 rootEl.removeChild(items[id]);847 rootEl.appendChild(items[id]);848 }849 });850 },851 /**852 * Save the current sorting853 */854 save: function () {855 var store = this.options.store;856 store && store.set(this);857 },858 /**859 * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.860 * @param {HTMLElement} el861 * @param {String} [selector] default: `options.draggable`862 * @returns {HTMLElement|null}863 */864 closest: function (el, selector) {865 return _closest(el, selector || this.options.draggable, this.el);866 },867 /**868 * Set/get option869 * @param {string} name870 * @param {*} [value]871 * @returns {*}872 */873 option: function (name, value) {874 var options = this.options;875 if (value === void 0) {876 return options[name];877 } else {878 options[name] = value;879 if (name === 'group') {880 _prepareGroup(options);881 }882 }883 },884 /**885 * Destroy886 */887 destroy: function () {888 var el = this.el;889 el[expando] = null;890 _off(el, 'mousedown', this._onTapStart);891 _off(el, 'touchstart', this._onTapStart);892 _off(el, 'pointerdown', this._onTapStart);893 if (this.nativeDraggable) {894 _off(el, 'dragover', this);895 _off(el, 'dragenter', this);896 }897 // Remove draggable attributes898 Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {899 el.removeAttribute('draggable');900 });901 touchDragOverListeners.splice(touchDragOverListeners.indexOf(this._onDragOver), 1);902 this._onDrop();903 this.el = el = null;904 }905 };906 function _cloneHide(sortable, state) {907 if (sortable.lastPullMode !== 'clone') {908 state = true;909 }910 if (cloneEl && (cloneEl.state !== state)) {911 _css(cloneEl, 'display', state ? 'none' : '');912 if (!state) {913 if (cloneEl.state) {914 if (sortable.options.group.revertClone) {915 rootEl.insertBefore(cloneEl, nextEl);916 sortable._animate(dragEl, cloneEl);917 } else {918 rootEl.insertBefore(cloneEl, dragEl);919 }920 }921 }922 cloneEl.state = state;923 }924 }925 function _closest(/**HTMLElement*/el, /**String*/selector, /**HTMLElement*/ctx) {926 if (el) {927 ctx = ctx || document;928 do {929 if ((selector === '>*' && el.parentNode === ctx) || _matches(el, selector)) {930 return el;931 }932 /* jshint boss:true */933 } while (el = _getParentOrHost(el));934 }935 return null;936 }937 function _getParentOrHost(el) {938 var parent = el.host;939 return (parent && parent.nodeType) ? parent : el.parentNode;940 }941 function _globalDragOver(/**Event*/evt) {942 if (evt.dataTransfer) {943 evt.dataTransfer.dropEffect = 'move';944 }945 evt.preventDefault();946 }947 function _on(el, event, fn) {948 el.addEventListener(event, fn, captureMode);949 }950 function _off(el, event, fn) {951 el.removeEventListener(event, fn, captureMode);952 }953 function _toggleClass(el, name, state) {954 if (el) {955 if (el.classList) {956 el.classList[state ? 'add' : 'remove'](name);957 }958 else {959 var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' ');960 el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' ');961 }962 }963 }964 function _css(el, prop, val) {965 var style = el && el.style;966 if (style) {967 if (val === void 0) {968 if (document.defaultView && document.defaultView.getComputedStyle) {969 val = document.defaultView.getComputedStyle(el, '');970 }971 else if (el.currentStyle) {972 val = el.currentStyle;973 }974 return prop === void 0 ? val : val[prop];975 }976 else {977 if (!(prop in style)) {978 prop = '-webkit-' + prop;979 }980 style[prop] = val + (typeof val === 'string' ? '' : 'px');981 }982 }983 }984 function _find(ctx, tagName, iterator) {985 if (ctx) {986 var list = ctx.getElementsByTagName(tagName), i = 0, n = list.length;987 if (iterator) {988 for (; i < n; i++) {989 iterator(list[i], i);990 }991 }992 return list;993 }994 return [];995 }996 function _dispatchEvent(sortable, rootEl, name, targetEl, fromEl, startIndex, newIndex) {997 sortable = (sortable || rootEl[expando]);998 var evt = document.createEvent('Event'),999 options = sortable.options,1000 onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);1001 evt.initEvent(name, true, true);1002 evt.to = rootEl;1003 evt.from = fromEl || rootEl;1004 evt.item = targetEl || rootEl;1005 evt.clone = cloneEl;1006 evt.oldIndex = startIndex;1007 evt.newIndex = newIndex;1008 rootEl.dispatchEvent(evt);1009 if (options[onName]) {1010 options[onName].call(sortable, evt);1011 }1012 }1013 function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvt, willInsertAfter) {1014 var evt,1015 sortable = fromEl[expando],1016 onMoveFn = sortable.options.onMove,1017 retVal;1018 evt = document.createEvent('Event');1019 evt.initEvent('move', true, true);1020 evt.to = toEl;1021 evt.from = fromEl;1022 evt.dragged = dragEl;1023 evt.draggedRect = dragRect;1024 evt.related = targetEl || toEl;1025 evt.relatedRect = targetRect || toEl.getBoundingClientRect();1026 evt.willInsertAfter = willInsertAfter;1027 fromEl.dispatchEvent(evt);1028 if (onMoveFn) {1029 retVal = onMoveFn.call(sortable, evt, originalEvt);1030 }1031 return retVal;1032 }1033 function _disableDraggable(el) {1034 el.draggable = false;1035 }1036 function _unsilent() {1037 _silent = false;1038 }1039 /** @returns {HTMLElement|false} */1040 function _ghostIsLast(el, evt) {1041 var lastEl = el.lastElementChild,1042 rect = lastEl.getBoundingClientRect();1043 // 5 Ҁ” min delta1044 // abs Ҁ” ΓΒ½ΓΒ΅ΓΒ»Γ‘ΒŒΓΒ·Γ‘Β ΓΒ΄ΓΒΎΓΒ±ΓΒ°ΓΒ²ΓΒ»Γ‘ΒΓ‘Β‚Γ‘ΒŒ, а то ΓΒ³ΓΒ»Γ‘ΒŽΓΒΊΓΒΈ при навСдСнии свСрху1045 return (evt.clientY - (rect.top + rect.height) > 5) ||1046 (evt.clientX - (rect.left + rect.width) > 5);1047 }1048 /**1049 * Generate id1050 * @param {HTMLElement} el1051 * @returns {String}1052 * @private1053 */1054 function _generateId(el) {1055 var str = el.tagName + el.className + el.src + el.href + el.textContent,1056 i = str.length,1057 sum = 0;1058 while (i--) {1059 sum += str.charCodeAt(i);1060 }1061 return sum.toString(36);1062 }1063 /**1064 * Returns the index of an element within its parent for a selected set of1065 * elements1066 * @param {HTMLElement} el1067 * @param {selector} selector1068 * @return {number}1069 */1070 function _index(el, selector) {1071 var index = 0;1072 if (!el || !el.parentNode) {1073 return -1;1074 }1075 while (el && (el = el.previousElementSibling)) {1076 if ((el.nodeName.toUpperCase() !== 'TEMPLATE') && (selector === '>*' || _matches(el, selector))) {1077 index++;1078 }1079 }1080 return index;1081 }1082 function _matches(/**HTMLElement*/el, /**String*/selector) {1083 if (el) {1084 selector = selector.split('.');1085 var tag = selector.shift().toUpperCase(),1086 re = new RegExp('\\s(' + selector.join('|') + ')(?=\\s)', 'g');1087 return (1088 (tag === '' || el.nodeName.toUpperCase() == tag) &&1089 (!selector.length || ((' ' + el.className + ' ').match(re) || []).length == selector.length)1090 );1091 }1092 return false;1093 }1094 function _throttle(callback, ms) {1095 var args, _this;1096 return function () {1097 if (args === void 0) {1098 args = arguments;1099 _this = this;1100 setTimeout(function () {1101 if (args.length === 1) {1102 callback.call(_this, args[0]);1103 } else {1104 callback.apply(_this, args);1105 }1106 args = void 0;1107 }, ms);1108 }1109 };1110 }1111 function _extend(dst, src) {1112 if (dst && src) {1113 for (var key in src) {1114 if (src.hasOwnProperty(key)) {1115 dst[key] = src[key];1116 }1117 }1118 }1119 return dst;1120 }1121 function _clone(el) {1122 return $1123 ? $(el).clone(true)[0]1124 : (Polymer && Polymer.dom1125 ? Polymer.dom(el).cloneNode(true)1126 : el.cloneNode(true)1127 );1128 }1129 function _saveInputCheckedState(root) {1130 var inputs = root.getElementsByTagName('input');1131 var idx = inputs.length;1132 while (idx--) {1133 var el = inputs[idx];1134 el.checked && savedInputChecked.push(el);1135 }1136 }1137 // Fixed #973: 1138 _on(document, 'touchmove', function (evt) {1139 if (Sortable.active) {1140 evt.preventDefault();1141 }1142 });1143 try {1144 window.addEventListener('test', null, Object.defineProperty({}, 'passive', {1145 get: function () {1146 captureMode = {1147 capture: false,1148 passive: false1149 };1150 }1151 }));1152 } catch (err) {}1153 // Export utils1154 Sortable.utils = {1155 on: _on,1156 off: _off,1157 css: _css,1158 find: _find,1159 is: function (el, selector) {1160 return !!_closest(el, selector, el);1161 },1162 extend: _extend,1163 throttle: _throttle,1164 closest: _closest,1165 toggleClass: _toggleClass,1166 clone: _clone,1167 index: _index1168 };1169 /**1170 * Create sortable instance1171 * @param {HTMLElement} el1172 * @param {Object} [options]1173 */1174 Sortable.create = function (el, options) {1175 return new Sortable(el, options);1176 };1177 // Export1178 Sortable.version = '1.6.0';1179 return Sortable;...

Full Screen

Full Screen

searchbar-class.js

Source:searchbar-class.js Github

copy

Full Screen

1function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }2function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }3import { getDocument } from 'ssr-window';4import $ from '../../shared/dom7';5import { extend, nextTick, deleteProps } from '../../shared/utils';6import FrameworkClass from '../../shared/class';7import { getDevice } from '../../shared/get-device';8import removeDiacritics from './remove-diacritics';9var Searchbar = /*#__PURE__*/function (_FrameworkClass) {10 _inheritsLoose(Searchbar, _FrameworkClass);11 function Searchbar(app, params) {12 var _this;13 if (params === void 0) {14 params = {};15 }16 _this = _FrameworkClass.call(this, params, [app]) || this;17 var sb = _assertThisInitialized(_this);18 var defaults = {19 el: undefined,20 inputEl: undefined,21 inputEvents: 'change input compositionend',22 disableButton: true,23 disableButtonEl: undefined,24 backdropEl: undefined,25 searchContainer: undefined,26 // container to search, HTMLElement or CSS selector27 searchItem: 'li',28 // single item selector, CSS selector29 searchIn: undefined,30 // where to search in item, CSS selector31 searchGroup: '.list-group',32 searchGroupTitle: '.item-divider, .list-group-title',33 ignore: '.searchbar-ignore',34 foundEl: '.searchbar-found',35 notFoundEl: '.searchbar-not-found',36 hideOnEnableEl: '.searchbar-hide-on-enable',37 hideOnSearchEl: '.searchbar-hide-on-search',38 backdrop: undefined,39 removeDiacritics: true,40 customSearch: false,41 hideDividers: true,42 hideGroups: true,43 disableOnBackdropClick: true,44 expandable: false,45 inline: false46 }; // Extend defaults with modules params47 sb.useModulesParams(defaults);48 sb.params = extend(defaults, params);49 var $el = $(sb.params.el);50 if ($el.length === 0) return sb || _assertThisInitialized(_this);51 if ($el[0].f7Searchbar) return $el[0].f7Searchbar || _assertThisInitialized(_this);52 $el[0].f7Searchbar = sb;53 var $pageEl;54 var $navbarEl = $el.parents('.navbar');55 if ($el.parents('.page').length > 0) {56 $pageEl = $el.parents('.page');57 } else if ($navbarEl.length > 0) {58 $pageEl = $(app.navbar.getPageByEl($navbarEl[0]));59 if (!$pageEl.length) {60 var $currentPageEl = $el.parents('.view').find('.page-current');61 if ($currentPageEl[0] && $currentPageEl[0].f7Page && $currentPageEl[0].f7Page.navbarEl === $navbarEl[0]) {62 $pageEl = $currentPageEl;63 }64 }65 }66 var $foundEl;67 if (params.foundEl) {68 $foundEl = $(params.foundEl);69 } else if (typeof sb.params.foundEl === 'string' && $pageEl) {70 $foundEl = $pageEl.find(sb.params.foundEl);71 }72 var $notFoundEl;73 if (params.notFoundEl) {74 $notFoundEl = $(params.notFoundEl);75 } else if (typeof sb.params.notFoundEl === 'string' && $pageEl) {76 $notFoundEl = $pageEl.find(sb.params.notFoundEl);77 }78 var $hideOnEnableEl;79 if (params.hideOnEnableEl) {80 $hideOnEnableEl = $(params.hideOnEnableEl);81 } else if (typeof sb.params.hideOnEnableEl === 'string' && $pageEl) {82 $hideOnEnableEl = $pageEl.find(sb.params.hideOnEnableEl);83 }84 var $hideOnSearchEl;85 if (params.hideOnSearchEl) {86 $hideOnSearchEl = $(params.hideOnSearchEl);87 } else if (typeof sb.params.hideOnSearchEl === 'string' && $pageEl) {88 $hideOnSearchEl = $pageEl.find(sb.params.hideOnSearchEl);89 }90 var expandable = sb.params.expandable || $el.hasClass('searchbar-expandable');91 var inline = sb.params.inline || $el.hasClass('searchbar-inline');92 if (typeof sb.params.backdrop === 'undefined') {93 if (!inline) sb.params.backdrop = app.theme !== 'aurora';else sb.params.backdrop = false;94 }95 var $backdropEl;96 if (sb.params.backdrop) {97 if (sb.params.backdropEl) {98 $backdropEl = $(sb.params.backdropEl);99 } else if ($pageEl && $pageEl.length > 0) {100 $backdropEl = $pageEl.find('.searchbar-backdrop');101 } else {102 $backdropEl = $el.siblings('.searchbar-backdrop');103 }104 if ($backdropEl.length === 0) {105 $backdropEl = $('<div class="searchbar-backdrop"></div>');106 if ($pageEl && $pageEl.length) {107 if ($el.parents($pageEl).length > 0 && $navbarEl && $el.parents($navbarEl).length === 0) {108 $backdropEl.insertBefore($el);109 } else {110 $backdropEl.insertBefore($pageEl.find('.page-content').eq(0));111 }112 } else {113 $backdropEl.insertBefore($el);114 }115 }116 }117 var $searchContainer;118 if (sb.params.searchContainer) {119 $searchContainer = $(sb.params.searchContainer);120 }121 var $inputEl;122 if (sb.params.inputEl) {123 $inputEl = $(sb.params.inputEl);124 } else {125 $inputEl = $el.find('input[type="search"]').eq(0);126 }127 var $disableButtonEl;128 if (sb.params.disableButton) {129 if (sb.params.disableButtonEl) {130 $disableButtonEl = $(sb.params.disableButtonEl);131 } else {132 $disableButtonEl = $el.find('.searchbar-disable-button');133 }134 }135 extend(sb, {136 app: app,137 view: app.views.get($el.parents('.view')),138 $el: $el,139 el: $el[0],140 $backdropEl: $backdropEl,141 backdropEl: $backdropEl && $backdropEl[0],142 $searchContainer: $searchContainer,143 searchContainer: $searchContainer && $searchContainer[0],144 $inputEl: $inputEl,145 inputEl: $inputEl[0],146 $disableButtonEl: $disableButtonEl,147 disableButtonEl: $disableButtonEl && $disableButtonEl[0],148 disableButtonHasMargin: false,149 $pageEl: $pageEl,150 pageEl: $pageEl && $pageEl[0],151 $navbarEl: $navbarEl,152 navbarEl: $navbarEl && $navbarEl[0],153 $foundEl: $foundEl,154 foundEl: $foundEl && $foundEl[0],155 $notFoundEl: $notFoundEl,156 notFoundEl: $notFoundEl && $notFoundEl[0],157 $hideOnEnableEl: $hideOnEnableEl,158 hideOnEnableEl: $hideOnEnableEl && $hideOnEnableEl[0],159 $hideOnSearchEl: $hideOnSearchEl,160 hideOnSearchEl: $hideOnSearchEl && $hideOnSearchEl[0],161 previousQuery: '',162 query: '',163 isVirtualList: $searchContainer && $searchContainer.hasClass('virtual-list'),164 virtualList: undefined,165 enabled: false,166 expandable: expandable,167 inline: inline168 }); // Events169 function preventSubmit(e) {170 e.preventDefault();171 }172 function onInputFocus(e) {173 sb.enable(e);174 sb.$el.addClass('searchbar-focused');175 }176 function onInputBlur() {177 sb.$el.removeClass('searchbar-focused');178 if (app.theme === 'aurora' && (!$disableButtonEl || !$disableButtonEl.length || !sb.params.disableButton) && !sb.query) {179 sb.disable();180 }181 }182 function onInputChange() {183 var value = sb.$inputEl.val().trim();184 if (sb.$searchContainer && sb.$searchContainer.length > 0 && (sb.params.searchIn || sb.isVirtualList || sb.params.searchIn === sb.params.searchItem) || sb.params.customSearch) {185 sb.search(value, true);186 }187 }188 function onInputClear(e, previousValue) {189 sb.$el.trigger('searchbar:clear', previousValue);190 sb.emit('local::clear searchbarClear', sb, previousValue);191 }192 function disableOnClick(e) {193 sb.disable(e);194 }195 function onPageBeforeOut() {196 if (!sb || sb && !sb.$el) return;197 if (sb.enabled) {198 sb.$el.removeClass('searchbar-enabled');199 if (sb.expandable) {200 sb.$el.parents('.navbar').removeClass('with-searchbar-expandable-enabled with-searchbar-expandable-enabled-no-transition');201 }202 }203 }204 function onPageBeforeIn() {205 if (!sb || sb && !sb.$el) return;206 if (sb.enabled) {207 sb.$el.addClass('searchbar-enabled');208 if (sb.expandable) {209 sb.$el.parents('.navbar').addClass('with-searchbar-expandable-enabled-no-transition');210 }211 }212 }213 sb.attachEvents = function attachEvents() {214 $el.on('submit', preventSubmit);215 if (sb.params.disableButton) {216 sb.$disableButtonEl.on('click', disableOnClick);217 }218 if (sb.params.disableOnBackdropClick && sb.$backdropEl) {219 sb.$backdropEl.on('click', disableOnClick);220 }221 if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) {222 sb.$pageEl.on('page:beforeout', onPageBeforeOut);223 sb.$pageEl.on('page:beforein', onPageBeforeIn);224 }225 sb.$inputEl.on('focus', onInputFocus);226 sb.$inputEl.on('blur', onInputBlur);227 sb.$inputEl.on(sb.params.inputEvents, onInputChange);228 sb.$inputEl.on('input:clear', onInputClear);229 };230 sb.detachEvents = function detachEvents() {231 $el.off('submit', preventSubmit);232 if (sb.params.disableButton) {233 sb.$disableButtonEl.off('click', disableOnClick);234 }235 if (sb.params.disableOnBackdropClick && sb.$backdropEl) {236 sb.$backdropEl.off('click', disableOnClick);237 }238 if (sb.expandable && app.theme === 'ios' && sb.view && $navbarEl.length && sb.$pageEl) {239 sb.$pageEl.off('page:beforeout', onPageBeforeOut);240 sb.$pageEl.off('page:beforein', onPageBeforeIn);241 }242 sb.$inputEl.off('focus', onInputFocus);243 sb.$inputEl.off('blur', onInputBlur);244 sb.$inputEl.off(sb.params.inputEvents, onInputChange);245 sb.$inputEl.off('input:clear', onInputClear);246 }; // Install Modules247 sb.useModules(); // Init248 sb.init();249 return sb || _assertThisInitialized(_this);250 }251 var _proto = Searchbar.prototype;252 _proto.clear = function clear(e) {253 var sb = this;254 if (!sb.query && e && $(e.target).hasClass('searchbar-clear')) {255 sb.disable();256 return sb;257 }258 var previousQuery = sb.value;259 sb.$inputEl.val('').trigger('change').focus();260 sb.$el.trigger('searchbar:clear', previousQuery);261 sb.emit('local::clear searchbarClear', sb, previousQuery);262 return sb;263 };264 _proto.setDisableButtonMargin = function setDisableButtonMargin() {265 var sb = this;266 if (sb.expandable) return;267 var app = sb.app;268 sb.$disableButtonEl.transition(0).show();269 sb.$disableButtonEl.css("margin-" + (app.rtl ? 'left' : 'right'), -sb.disableButtonEl.offsetWidth + "px");270 /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */271 sb._clientLeft = sb.$disableButtonEl[0].clientLeft;272 sb.$disableButtonEl.transition('');273 sb.disableButtonHasMargin = true;274 };275 _proto.enable = function enable(setFocus) {276 var sb = this;277 if (sb.enabled) return sb;278 var app = sb.app;279 var document = getDocument();280 var device = getDevice();281 sb.enabled = true;282 function enable() {283 if (sb.$backdropEl && (sb.$searchContainer && sb.$searchContainer.length || sb.params.customSearch) && !sb.$el.hasClass('searchbar-enabled') && !sb.query) {284 sb.backdropShow();285 }286 sb.$el.addClass('searchbar-enabled');287 if (!sb.$disableButtonEl || sb.$disableButtonEl && sb.$disableButtonEl.length === 0) {288 sb.$el.addClass('searchbar-enabled-no-disable-button');289 }290 if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') {291 if (!sb.disableButtonHasMargin) {292 sb.setDisableButtonMargin();293 }294 sb.$disableButtonEl.css("margin-" + (app.rtl ? 'left' : 'right'), '0px');295 }296 if (sb.expandable) {297 var $navbarEl = sb.$el.parents('.navbar');298 if ($navbarEl.hasClass('navbar-large') && sb.$pageEl) {299 var $pageContentEl = sb.$pageEl.find('.page-content');300 var $titleLargeEl = $navbarEl.find('.title-large');301 $pageContentEl.addClass('with-searchbar-expandable-enabled');302 if ($navbarEl.hasClass('navbar-large') && $navbarEl.hasClass('navbar-large-collapsed') && $titleLargeEl.length && $pageContentEl.length) {303 $pageContentEl.transition(0);304 $pageContentEl[0].scrollTop -= $titleLargeEl[0].offsetHeight;305 setTimeout(function () {306 $pageContentEl.transition('');307 }, 200);308 }309 }310 if (app.theme === 'md' && $navbarEl.length) {311 $navbarEl.addClass('with-searchbar-expandable-enabled');312 } else {313 $navbarEl.addClass('with-searchbar-expandable-enabled');314 if ($navbarEl.hasClass('navbar-large')) {315 $navbarEl.addClass('navbar-large-collapsed');316 }317 }318 }319 if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.addClass('hidden-by-searchbar');320 sb.$el.trigger('searchbar:enable');321 sb.emit('local::enable searchbarEnable', sb);322 }323 var needsFocus = false;324 if (setFocus === true) {325 if (document.activeElement !== sb.inputEl) {326 needsFocus = true;327 }328 }329 var isIos = device.ios && app.theme === 'ios';330 if (isIos) {331 if (sb.expandable) {332 if (needsFocus) sb.$inputEl.focus();333 enable();334 } else {335 if (needsFocus) sb.$inputEl.focus();336 if (setFocus && (setFocus.type === 'focus' || setFocus === true)) {337 nextTick(function () {338 enable();339 }, 400);340 } else {341 enable();342 }343 }344 } else {345 if (needsFocus) sb.$inputEl.focus();346 if (app.theme === 'md' && sb.expandable) {347 sb.$el.parents('.page, .view, .navbar-inner, .navbar').scrollLeft(app.rtl ? 100 : 0);348 }349 enable();350 }351 return sb;352 };353 _proto.disable = function disable() {354 var sb = this;355 if (!sb.enabled) return sb;356 var app = sb.app;357 sb.$inputEl.val('').trigger('change');358 sb.$el.removeClass('searchbar-enabled searchbar-focused searchbar-enabled-no-disable-button');359 if (sb.expandable) {360 var $navbarEl = sb.$el.parents('.navbar');361 var $pageContentEl = sb.$pageEl && sb.$pageEl.find('.page-content');362 if ($navbarEl.hasClass('navbar-large') && $pageContentEl.length) {363 var $titleLargeEl = $navbarEl.find('.title-large');364 sb.$el.transitionEnd(function () {365 $pageContentEl.removeClass('with-searchbar-expandable-closing');366 });367 if ($navbarEl.hasClass('navbar-large') && $navbarEl.hasClass('navbar-large-collapsed') && $titleLargeEl.length) {368 var scrollTop = $pageContentEl[0].scrollTop;369 var titleLargeHeight = $titleLargeEl[0].offsetHeight;370 if (scrollTop > titleLargeHeight) {371 $pageContentEl.transition(0);372 $pageContentEl[0].scrollTop = scrollTop + titleLargeHeight;373 setTimeout(function () {374 $pageContentEl.transition('');375 }, 200);376 }377 }378 $pageContentEl.removeClass('with-searchbar-expandable-enabled').addClass('with-searchbar-expandable-closing');379 }380 if (app.theme === 'md' && $navbarEl.length) {381 $navbarEl.removeClass('with-searchbar-expandable-enabled with-searchbar-expandable-enabled-no-transition').addClass('with-searchbar-expandable-closing');382 sb.$el.transitionEnd(function () {383 $navbarEl.removeClass('with-searchbar-expandable-closing');384 });385 } else {386 $navbarEl.removeClass('with-searchbar-expandable-enabled with-searchbar-expandable-enabled-no-transition').addClass('with-searchbar-expandable-closing');387 sb.$el.transitionEnd(function () {388 $navbarEl.removeClass('with-searchbar-expandable-closing');389 });390 if (sb.$pageEl) {391 sb.$pageEl.find('.page-content').trigger('scroll');392 }393 }394 }395 if (!sb.expandable && sb.$disableButtonEl && sb.$disableButtonEl.length > 0 && app.theme !== 'md') {396 sb.$disableButtonEl.css("margin-" + (app.rtl ? 'left' : 'right'), -sb.disableButtonEl.offsetWidth + "px");397 }398 if (sb.$backdropEl && (sb.$searchContainer && sb.$searchContainer.length || sb.params.customSearch)) {399 sb.backdropHide();400 }401 sb.enabled = false;402 sb.$inputEl.blur();403 if (sb.$hideOnEnableEl) sb.$hideOnEnableEl.removeClass('hidden-by-searchbar');404 sb.$el.trigger('searchbar:disable');405 sb.emit('local::disable searchbarDisable', sb);406 return sb;407 };408 _proto.toggle = function toggle() {409 var sb = this;410 if (sb.enabled) sb.disable();else sb.enable(true);411 return sb;412 };413 _proto.backdropShow = function backdropShow() {414 var sb = this;415 if (sb.$backdropEl) {416 sb.$backdropEl.addClass('searchbar-backdrop-in');417 }418 return sb;419 };420 _proto.backdropHide = function backdropHide() {421 var sb = this;422 if (sb.$backdropEl) {423 sb.$backdropEl.removeClass('searchbar-backdrop-in');424 }425 return sb;426 };427 _proto.search = function search(query, internal) {428 var sb = this;429 sb.previousQuery = sb.query || '';430 if (query === sb.previousQuery) return sb;431 if (!internal) {432 if (!sb.enabled) {433 sb.enable();434 }435 sb.$inputEl.val(query);436 sb.$inputEl.trigger('input');437 }438 sb.query = query;439 sb.value = query;440 var $searchContainer = sb.$searchContainer,441 $el = sb.$el,442 $foundEl = sb.$foundEl,443 $notFoundEl = sb.$notFoundEl,444 $hideOnSearchEl = sb.$hideOnSearchEl,445 isVirtualList = sb.isVirtualList; // Hide on search element446 if (query.length > 0 && $hideOnSearchEl) {447 $hideOnSearchEl.addClass('hidden-by-searchbar');448 } else if ($hideOnSearchEl) {449 $hideOnSearchEl.removeClass('hidden-by-searchbar');450 } // Add active/inactive classes on overlay451 if ($searchContainer && $searchContainer.length && $el.hasClass('searchbar-enabled') || sb.params.customSearch && $el.hasClass('searchbar-enabled')) {452 if (query.length === 0) {453 sb.backdropShow();454 } else {455 sb.backdropHide();456 }457 }458 if (sb.params.customSearch) {459 $el.trigger('searchbar:search', {460 query: query,461 previousQuery: sb.previousQuery462 });463 sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery);464 return sb;465 }466 var foundItems = [];467 var vlQuery;468 if (isVirtualList) {469 sb.virtualList = $searchContainer[0].f7VirtualList;470 if (query.trim() === '') {471 sb.virtualList.resetFilter();472 if ($notFoundEl) $notFoundEl.hide();473 if ($foundEl) $foundEl.show();474 $el.trigger('searchbar:search', {475 query: query,476 previousQuery: sb.previousQuery477 });478 sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery);479 return sb;480 }481 vlQuery = sb.params.removeDiacritics ? removeDiacritics(query) : query;482 if (sb.virtualList.params.searchAll) {483 foundItems = sb.virtualList.params.searchAll(vlQuery, sb.virtualList.items) || [];484 } else if (sb.virtualList.params.searchByItem) {485 for (var i = 0; i < sb.virtualList.items.length; i += 1) {486 if (sb.virtualList.params.searchByItem(vlQuery, sb.virtualList.params.items[i], i)) {487 foundItems.push(i);488 }489 }490 }491 } else {492 var values;493 if (sb.params.removeDiacritics) values = removeDiacritics(query.trim().toLowerCase()).split(' ');else {494 values = query.trim().toLowerCase().split(' ');495 }496 $searchContainer.find(sb.params.searchItem).removeClass('hidden-by-searchbar').each(function (itemEl) {497 var $itemEl = $(itemEl);498 var compareWithText = [];499 var $searchIn = sb.params.searchIn ? $itemEl.find(sb.params.searchIn) : $itemEl;500 if (sb.params.searchIn === sb.params.searchItem) {501 $searchIn = $itemEl;502 }503 $searchIn.each(function (searchInEl) {504 var itemText = $(searchInEl).text().trim().toLowerCase();505 if (sb.params.removeDiacritics) itemText = removeDiacritics(itemText);506 compareWithText.push(itemText);507 });508 compareWithText = compareWithText.join(' ');509 var wordsMatch = 0;510 for (var _i = 0; _i < values.length; _i += 1) {511 if (compareWithText.indexOf(values[_i]) >= 0) wordsMatch += 1;512 }513 if (wordsMatch !== values.length && !(sb.params.ignore && $itemEl.is(sb.params.ignore))) {514 $itemEl.addClass('hidden-by-searchbar');515 } else {516 foundItems.push($itemEl[0]);517 }518 });519 if (sb.params.hideDividers) {520 $searchContainer.find(sb.params.searchGroupTitle).each(function (titleEl) {521 var $titleEl = $(titleEl);522 var $nextElements = $titleEl.nextAll(sb.params.searchItem);523 var hide = true;524 for (var _i2 = 0; _i2 < $nextElements.length; _i2 += 1) {525 var $nextEl = $nextElements.eq(_i2);526 if ($nextEl.is(sb.params.searchGroupTitle)) break;527 if (!$nextEl.hasClass('hidden-by-searchbar')) {528 hide = false;529 }530 }531 var ignore = sb.params.ignore && $titleEl.is(sb.params.ignore);532 if (hide && !ignore) $titleEl.addClass('hidden-by-searchbar');else $titleEl.removeClass('hidden-by-searchbar');533 });534 }535 if (sb.params.hideGroups) {536 $searchContainer.find(sb.params.searchGroup).each(function (groupEl) {537 var $groupEl = $(groupEl);538 var ignore = sb.params.ignore && $groupEl.is(sb.params.ignore); // eslint-disable-next-line539 var notHidden = $groupEl.find(sb.params.searchItem).filter(function (el) {540 return !$(el).hasClass('hidden-by-searchbar');541 });542 if (notHidden.length === 0 && !ignore) {543 $groupEl.addClass('hidden-by-searchbar');544 } else {545 $groupEl.removeClass('hidden-by-searchbar');546 }547 });548 }549 }550 if (foundItems.length === 0) {551 if ($notFoundEl) $notFoundEl.show();552 if ($foundEl) $foundEl.hide();553 } else {554 if ($notFoundEl) $notFoundEl.hide();555 if ($foundEl) $foundEl.show();556 }557 if (isVirtualList && sb.virtualList) {558 sb.virtualList.filterItems(foundItems);559 }560 $el.trigger('searchbar:search', {561 query: query,562 previousQuery: sb.previousQuery,563 foundItems: foundItems564 });565 sb.emit('local::search searchbarSearch', sb, query, sb.previousQuery, foundItems);566 return sb;567 };568 _proto.init = function init() {569 var sb = this;570 if (sb.expandable && sb.$el) sb.$el.addClass('searchbar-expandable');571 if (sb.inline && sb.$el) sb.$el.addClass('searchbar-inline');572 sb.attachEvents();573 };574 _proto.destroy = function destroy() {575 var sb = this;576 sb.emit('local::beforeDestroy searchbarBeforeDestroy', sb);577 sb.$el.trigger('searchbar:beforedestroy');578 sb.detachEvents();579 if (sb.$el[0]) {580 sb.$el[0].f7Searchbar = null;581 delete sb.$el[0].f7Searchbar;582 }583 deleteProps(sb);584 };585 return Searchbar;586}(FrameworkClass);...

Full Screen

Full Screen

iconZoom.js

Source:iconZoom.js Github

copy

Full Screen

1export const iconList = [2 "el-icon-platform-eleme",3 "el-icon-eleme",4 "el-icon-delete-solid",5 "el-icon-delete",6 "el-icon-s-tools",7 "el-icon-setting",8 "el-icon-user-solid",9 "el-icon-user", "el-icon-phone",10 "el-icon-phone-outline",11 "el-icon-more",12 "el-icon-more-outline",13 "el-icon-star-on",14 "el-icon-star-off",15 "el-icon-s-goods",16 "el-icon-goods",17 "el-icon-warning",18 "el-icon-warning-outline",19 "el-icon-question",20 "el-icon-info",21 "el-icon-remove",22 "el-icon-circle-plus",23 "el-icon-success",24 "el-icon-error",25 "el-icon-zoom-in",26 "el-icon-zoom-out",27 "el-icon-remove-outline",28 "el-icon-circle-plus-outline",29 "el-icon-circle-check",30 "el-icon-circle-close",31 "el-icon-s-help",32 "el-icon-help", "el-icon-minus",33 "el-icon-plus", "el-icon-check",34 "el-icon-close",35 "el-icon-picture",36 "el-icon-picture-outline",37 "el-icon-picture-outline-round",38 "el-icon-upload",39 "el-icon-upload2",40 "el-icon-download",41 "el-icon-camera-solid",42 "el-icon-camera",43 "el-icon-video-camera-solid",44 "el-icon-video-camera",45 "el-icon-message-solid",46 "el-icon-bell",47 "el-icon-s-cooperation",48 "el-icon-s-order",49 "el-icon-s-platform",50 "el-icon-s-fold",51 "el-icon-s-unfold",52 "el-icon-s-operation",53 "el-icon-s-promotion",54 "el-icon-s-home",55 "el-icon-s-release",56 "el-icon-s-ticket",57 "el-icon-s-management",58 "el-icon-s-open",59 "el-icon-s-shop",60 "el-icon-s-marketing",61 "el-icon-s-flag",62 "el-icon-s-comment",63 "el-icon-s-finance",64 "el-icon-s-claim",65 "el-icon-s-custom",66 "el-icon-s-opportunity",67 "el-icon-s-data",68 "el-icon-s-check",69 "el-icon-s-grid",70 "el-icon-menu", "el-icon-share",71 "el-icon-d-caret",72 "el-icon-caret-left",73 "el-icon-caret-right",74 "el-icon-caret-bottom",75 "el-icon-caret-top",76 "el-icon-bottom-left",77 "el-icon-bottom-right",78 "el-icon-back", "el-icon-right",79 "el-icon-bottom", "el-icon-top",80 "el-icon-top-left",81 "el-icon-top-right",82 "el-icon-arrow-left",83 "el-icon-arrow-right",84 "el-icon-arrow-down",85 "el-icon-arrow-up",86 "el-icon-d-arrow-left",87 "el-icon-d-arrow-right",88 "el-icon-video-pause",89 "el-icon-video-play",90 "el-icon-refresh",91 "el-icon-refresh-right",92 "el-icon-refresh-left",93 "el-icon-finished",94 "el-icon-sort",95 "el-icon-sort-up",96 "el-icon-sort-down",97 "el-icon-rank",98 "el-icon-loading",99 "el-icon-view",100 "el-icon-c-scale-to-original",101 "el-icon-date", "el-icon-edit",102 "el-icon-edit-outline",103 "el-icon-folder",104 "el-icon-folder-opened",105 "el-icon-folder-add",106 "el-icon-folder-remove",107 "el-icon-folder-delete",108 "el-icon-folder-checked",109 "el-icon-tickets",110 "el-icon-document-remove",111 "el-icon-document-delete",112 "el-icon-document-copy",113 "el-icon-document-checked",114 "el-icon-document",115 "el-icon-document-add",116 "el-icon-printer",117 "el-icon-paperclip",118 "el-icon-takeaway-box",119 "el-icon-search",120 "el-icon-monitor",121 "el-icon-attract",122 "el-icon-mobile",123 "el-icon-scissors",124 "el-icon-umbrella",125 "el-icon-headset",126 "el-icon-brush",127 "el-icon-mouse",128 "el-icon-coordinate",129 "el-icon-magic-stick",130 "el-icon-reading",131 "el-icon-data-line",132 "el-icon-data-board",133 "el-icon-pie-chart",134 "el-icon-data-analysis",135 "el-icon-collection-tag",136 "el-icon-film",137 "el-icon-suitcase",138 "el-icon-suitcase-1",139 "el-icon-receiving",140 "el-icon-collection",141 "el-icon-files",142 "el-icon-notebook-1",143 "el-icon-notebook-2",144 "el-icon-toilet-paper",145 "el-icon-office-building",146 "el-icon-school",147 "el-icon-table-lamp",148 "el-icon-house",149 "el-icon-no-smoking",150 "el-icon-smoking",151 "el-icon-shopping-cart-full",152 "el-icon-shopping-cart-1",153 "el-icon-shopping-cart-2",154 "el-icon-shopping-bag-1",155 "el-icon-shopping-bag-2",156 "el-icon-sold-out",157 "el-icon-sell",158 "el-icon-present",159 "el-icon-box",160 "el-icon-bank-card",161 "el-icon-money", "el-icon-coin",162 "el-icon-wallet",163 "el-icon-discount",164 "el-icon-price-tag",165 "el-icon-news", "el-icon-guide",166 "el-icon-male",167 "el-icon-female",168 "el-icon-thumb", "el-icon-cpu",169 "el-icon-link",170 "el-icon-connection",171 "el-icon-open",172 "el-icon-turn-off",173 "el-icon-set-up",174 "el-icon-chat-round",175 "el-icon-chat-line-round",176 "el-icon-chat-square",177 "el-icon-chat-dot-round",178 "el-icon-chat-dot-square",179 "el-icon-chat-line-square",180 "el-icon-message",181 "el-icon-postcard",182 "el-icon-position",183 "el-icon-turn-off-microphone",184 "el-icon-microphone",185 "el-icon-close-notification",186 "el-icon-bangzhu",187 "el-icon-time",188 "el-icon-odometer",189 "el-icon-crop", "el-icon-aim",190 "el-icon-switch-button",191 "el-icon-full-screen",192 "el-icon-copy-document",193 "el-icon-mic",194 "el-icon-stopwatch",195 "el-icon-medal-1",196 "el-icon-medal",197 "el-icon-trophy",198 "el-icon-trophy-1",199 "el-icon-first-aid-kit",200 "el-icon-discover",201 "el-icon-place",202 "el-icon-location",203 "el-icon-location-outline",204 "el-icon-location-information",205 "el-icon-add-location",206 "el-icon-delete-location",207 "el-icon-map-location",208 "el-icon-alarm-clock",209 "el-icon-timer",210 "el-icon-watch-1",211 "el-icon-watch", "el-icon-lock",212 "el-icon-unlock", "el-icon-key",213 "el-icon-service",214 "el-icon-mobile-phone",215 "el-icon-bicycle",216 "el-icon-truck", "el-icon-ship",217 "el-icon-basketball",218 "el-icon-football",219 "el-icon-soccer",220 "el-icon-baseball",221 "el-icon-wind-power",222 "el-icon-light-rain",223 "el-icon-lightning",224 "el-icon-heavy-rain",225 "el-icon-sunrise",226 "el-icon-sunrise-1",227 "el-icon-sunset",228 "el-icon-sunny",229 "el-icon-cloudy",230 "el-icon-partly-cloudy",231 "el-icon-cloudy-and-sunny",232 "el-icon-moon",233 "el-icon-moon-night",234 "el-icon-dish",235 "el-icon-dish-1",236 "el-icon-food",237 "el-icon-chicken",238 "el-icon-fork-spoon",239 "el-icon-knife-fork",240 "el-icon-burger",241 "el-icon-tableware",242 "el-icon-sugar",243 "el-icon-dessert",244 "el-icon-ice-cream",245 "el-icon-hot-water",246 "el-icon-water-cup",247 "el-icon-coffee-cup",248 "el-icon-cold-drink",249 "el-icon-goblet",250 "el-icon-goblet-full",251 "el-icon-goblet-square",252 "el-icon-goblet-square-full",253 "el-icon-refrigerator",254 "el-icon-grape",255 "el-icon-watermelon",256 "el-icon-cherry",257 "el-icon-apple", "el-icon-pear",258 "el-icon-orange",259 "el-icon-coffee",260 "el-icon-ice-tea",261 "el-icon-ice-drink",262 "el-icon-milk-tea",263 "el-icon-potato-strips",264 "el-icon-lollipop",265 "el-icon-ice-cream-square",266 "el-icon-ice-cream-round"...

Full Screen

Full Screen

ui.js

Source:ui.js Github

copy

Full Screen

1import {2 // ElAlert,3 ElAside,4 // ElAutocomplete,5 // ElAvatar,6 // ElBacktop,7 // ElBadge,8 // ElBreadcrumb,9 // ElBreadcrumbItem,10 ElButton,11 ElButtonGroup,12 // ElCalendar,13 // ElCard,14 // ElCarousel,15 // ElCarouselItem,16 // ElCascader,17 // ElCascaderPanel,18 // ElCheckbox,19 // ElCheckboxButton,20 // ElCheckboxGroup,21 // ElCol,22 // ElCollapse,23 // ElCollapseItem,24 // ElCollapseTransition,25 // ElColorPicker,26 ElContainer,27 // ElDatePicker,28 ElDialog,29 // ElDivider,30 // ElDrawer,31 // ElDropdown,32 // ElDropdownItem,33 // ElDropdownMenu,34 // ElFooter,35 // ElForm,36 // ElFormItem,37 ElHeader,38 // ElIcon,39 // ElImage,40 // ElInput,41 // ElInputNumber,42 // ElLink,43 ElMain,44 ElMenu,45 ElMenuItem,46 ElMenuItemGroup,47 // ElOption,48 // ElOptionGroup,49 // ElPageHeader,50 // ElPagination,51 // ElPopconfirm,52 // ElPopover,53 // ElPopper,54 // ElProgress,55 // ElRadio,56 // ElRadioButton,57 // ElRadioGroup,58 // ElRate,59 // ElRow,60 // ElScrollbar,61 // ElSelect,62 // ElSlider,63 // ElStep,64 // ElSteps,65 ElSubmenu,66 // ElSwitch,67 // ElTabPane,68 ElTable,69 ElTableColumn,70 // ElTabs,71 // ElTag,72 // ElTimePicker,73 // ElTimeSelect,74 // ElTimeline,75 // ElTimelineItem,76 // ElTooltip,77 // ElTransfer,78 // ElTree,79 // ElUpload,80 ElInfiniteScroll,81 ElLoading,82 ElMessage,83 ElMessageBox,84 // ElNotification,85} from 'element-plus';86export const components = [87 // ElAlert,88 ElAside,89 // ElAutocomplete,90 // ElAvatar,91 // ElBacktop,92 // ElBadge,93 // ElBreadcrumb,94 // ElBreadcrumbItem,95 ElButton,96 ElButtonGroup,97 // ElCalendar,98 // ElCard,99 // ElCarousel,100 // ElCarouselItem,101 // ElCascader,102 // ElCascaderPanel,103 // ElCheckbox,104 // ElCheckboxButton,105 // ElCheckboxGroup,106 // ElCol,107 // ElCollapse,108 // ElCollapseItem,109 // ElCollapseTransition,110 // ElColorPicker,111 ElContainer,112 // ElDatePicker,113 ElDialog,114 // ElDivider,115 // ElDrawer,116 // ElDropdown,117 // ElDropdownItem,118 // ElDropdownMenu,119 // ElFooter,120 // ElForm,121 // ElFormItem,122 ElHeader,123 // ElIcon,124 // ElImage,125 // ElInput,126 // ElInputNumber,127 // ElLink,128 ElMain,129 ElMenu,130 ElMenuItem,131 ElMenuItemGroup,132 // ElOption,133 // ElOptionGroup,134 // ElPageHeader,135 // ElPagination,136 // ElPopconfirm,137 // ElPopover,138 // ElPopper,139 // ElProgress,140 // ElRadio,141 // ElRadioButton,142 // ElRadioGroup,143 // ElRate,144 // ElRow,145 // ElScrollbar,146 // ElSelect,147 // ElSlider,148 // ElStep,149 // ElSteps,150 ElSubmenu,151 // ElSwitch,152 // ElTabPane,153 ElTable,154 ElTableColumn,155 // ElTabs,156 // ElTag,157 // ElTimePicker,158 // ElTimeSelect,159 // ElTimeline,160 // ElTimelineItem,161 // ElTooltip,162 // ElTransfer,163 // ElTree,164 // ElUpload,165]166export const plugins = [167 ElInfiniteScroll,168 ElLoading,169 ElMessage,170 ElMessageBox,171 // ElNotification,...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4import { linkTo } from '@storybook/addon-links';5import { Button, Welcome } from '@storybook/react/demo';6storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);7storiesOf('Button', module)8 .add('with text', () => (9 <Button onClick={action('clicked')}>Hello Button</Button>10 .add('with some emoji', () => (11 <Button onClick={action('clicked')}>πŸ˜€ 😎 πŸ‘ πŸ’―</Button>12 ));13const el = document.querySelector('storybook-root');14storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);15storiesOf('Button', module)16 .add('with text', () => (17 <Button onClick={action('clicked')}>Hello Button</Button>18 .add('with some emoji', () => (19 <Button onClick={action('clicked')}>πŸ˜€ 😎 πŸ‘ πŸ’―</Button>20 ));21storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);22storiesOf('Button', module)23 .add('with text', () => (24 <Button onClick={action('clicked')}>Hello Button</Button>25 .add('with some emoji', () => (26 <Button onClick={action('clicked')}>πŸ˜€ 😎 πŸ‘ πŸ’―</Button>27 ));28storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);29storiesOf('Button', module)30 .add('with text', () => (31 <Button onClick={action('clicked')}>Hello Button</Button>32 .add('with some emoji', () => (33 <Button onClick={action('clicked')}>πŸ˜€ 😎 πŸ‘ πŸ’―</Button>34 ));35storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);36storiesOf('Button', module)

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { el } from 'storybook-root-element'2const root = document.createElement('div')3document.body.appendChild(root)4export const parameters = {5}6import { addDecorator } from '@storybook/react'7import { withRoot } from 'storybook-root-element'8addDecorator(withRoot)9import { addDecorator } from '@storybook/react'10import { withRoot } from 'storybook-root-element'11addDecorator(withRoot)12import { addDecorator } from '@storybook/react'13import { withRoot } from 'storybook-root-element'14addDecorator(withRoot)15import { addDecorator } from '@storybook/react'16import { withRoot } from 'storybook-root-element'17addDecorator(withRoot)18import { addDecorator } from '@storybook/react'19import { withRoot } from 'storybook-root-element'20addDecorator(withRoot)21import { addDecorator } from '@storybook/react'22import { withRoot } from 'storybook-root-element'23addDecorator(withRoot)24import { addDecorator } from '@storybook/react'25import { withRoot } from 'storybook-root-element'26addDecorator(withRoot)27import { addDecorator } from '@storybook/react'28import { withRoot } from 'storybook-root-element'29addDecorator(withRoot)30import { addDecorator } from '@storybook/react'31import { withRoot } from 'storybook-root-element'32addDecorator(withRoot)33import { addDecorator } from '@storybook/react'34import { withRoot } from 'storybook-root-element'35addDecorator(withRoot)36import { addDecorator } from '@storybook/react'37import { withRoot } from 'storybook-root-element'38addDecorator(withRoot)39import { addDecorator } from '@storybook/react'40import { withRoot } from 'storybook-root-element'41addDecorator(withRoot)42import { addDecorator } from '@

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { el } = require('storybook-root');2const { storybookRoot } = require('storybook-root');3const { storybookRoot } = require('storybook-root/react');4const { storybookRoot } = require('storybook-root/vue');5const { storybookRoot } = require('storybook-root/angular');6const { storybookRoot } = require('storybook-root/svelte');7const { storybookRoot } = require('storybook-root/preact');8const { storybookRoot } = require('storybook-root/mithril');9const { storybookRoot } = require('storybook-root/marko');10const { storybookRoot } = require('storybook-root/inferno');11const { storybookRoot } = require('storybook-root/ember');12const { storybookRoot } = require('storybook-root/html');13const { storybookRoot } = require('storybook-root/riot');14const { storybookRoot } = require('storybook-root/polymer');15const { storybookRoot } = require('storybook-root/rax');16const { storybookRoot } = require('storybook-root/angularjs');17const { storybookRoot } = require('storybook-root/knockout');18const { storybookRoot } = require('storybook-root/aurelia');19const { storybookRoot } = require('storybook-root/vanilla');20const { storybookRoot } = require('storybook-root/nuxt');21const { storybookRoot } = require('storybook-root/

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { el } from 'storybook-root';2const Button = el('button');3const button = new Button({text: 'Click me'});4import { storybookRoot } from 'storybook-root';5const Button = storybookRoot('button');6const button = new Button({text: 'Click me'});7I think you are missing the import statement. This should work:8import { el } from 'storybook-root';9const Button = el('button');10const button = new Button({text: 'Click me'});

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
β€Ί
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful