Merge remote-tracking branch 'origin/rc-1.0.0'

Author: Katochimoto

dist/x-bubbles-compact.js

@@ -1,7 +1,7 @@
 {
   "name": "x-bubbles",
   "description": "Bubbles",
-  "version": "0.0.27",
+  "version": "1.0.2",
   "keywords": [],
   "homepage": "https://github.com/Katochimoto/x-bubbles",
   "author": {
@@ -20,33 +20,33 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "babel-eslint": "7.0.0",
-    "babel-loader": "6.2.5",
-    "babel-preset-es2015": "6.16.0",
+    "babel-eslint": "7.1.1",
+    "babel-loader": "6.2.10",
+    "babel-preset-es2015": "6.18.0",
     "babel-preset-stage-0": "6.16.0",
-    "babel-register": "6.16.3",
-    "benchmark": "2.1.1",
+    "babel-register": "6.18.0",
+    "benchmark": "2.1.2",
     "chai": "3.5.0",
-    "document-register-element": "1.2.0",
+    "document-register-element": "1.3.0",
     "es6-promise": "4.0.5",
-    "eslint": "3.7.1",
+    "eslint": "3.12.2",
     "eslint-config-yandex": "1.0.6",
-    "eslint-loader": "1.5.0",
+    "eslint-loader": "1.6.1",
     "file-loader": "0.9.0",
-    "invariant": "2.2.1",
+    "invariant": "2.2.2",
     "istanbul": "1.1.0-alpha.1",
     "istanbul-instrumenter-loader": "0.2.0",
     "jquery": "3.1.1",
     "karma-babel-preprocessor": "6.0.1",
     "karma-chai": "0.1.0",
     "karma-coverage": "1.1.1",
-    "karma-mocha": "1.2.0",
+    "karma-mocha": "1.3.0",
     "karma-phantomjs-launcher": "1.0.2",
     "karma-sinon-chai": "1.2.4",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "1.8.0",
-    "lodash": "4.16.4",
-    "mocha": "3.1.2",
+    "lodash": "4.17.2",
+    "mocha": "3.2.0",
     "modernizr": "3.3.1",
     "modernizr-loader": "0.0.5",
     "preprocess": "3.1.0",
@@ -56,7 +56,7 @@
     "sinon-chai": "2.8.0",
     "url-loader": "0.5.7",
     "karma": "1.3.0",
-    "webpack": "1.13.2"
+    "webpack": "1.14.0"
   },
   "engines": {
     "node": ">=4.0.0",

dist/x-bubbles-compact.min.js

@@ -166,7 +166,7 @@
 function cut(str, cutStart, cutEnd) {
     return str.substr(0, cutStart) + (cutEnd > 0 ? str.substr(cutEnd) : '');
 }
-
+/*
 console.log('>>>0', JSON.stringify(',,,,,a,,,b,;;;c;;;;,d,,,'), JSON.stringify(tokenizer(',,,,,a,,,b,;;;c;;;;,d,,,')));
 console.log('>>>1', JSON.stringify('[email protected]'), JSON.stringify(tokenizer('[email protected]')));
 console.log('>>>2', JSON.stringify('[email protected], asdqwe'), JSON.stringify(tokenizer('[email protected], asdqwe')));
@@ -176,14 +176,26 @@
 console.log('>>>6', JSON.stringify('test1, test2 <[email protected]>'), JSON.stringify(tokenizer('test1, test2 <[email protected]>')));
 console.log('>>>7', JSON.stringify('[email protected], test2 <[email protected]>'), JSON.stringify(tokenizer('[email protected], test2 <[email protected]>')));
 console.log('>>>8', JSON.stringify('test0, [email protected], test2 <[email protected]>'), JSON.stringify(tokenizer('test0, [email protected], test2 <[email protected]>')));
+*/
+
+window.addEventListener('x-bubbles-ready', function(event) {
+    console.log('>><<', event);
+}, false);
+
+function separatorCond(inputValue) {
+    return REG_EMAIL.test(inputValue);
+}
+
 </script>
 <div style="margin-top: 0;">
     <div class="bubbles"
         id="test"
         is="x-bubbles"
         tabindex="0"
         data-tokenizer="tokenizer"
-        data-separator="">
+        data-separator="/[,;]/"
+        data-separator-cond="separatorCond"
+        data-selection="false">
 
         123,456,789
     </div>
@@ -196,19 +208,19 @@
 var set = document.getElementById('test');
 
 set.addEventListener('change', function(event) {
-    console.log('change');
+    // console.log('change');
 }, false);
 
 set.addEventListener('bubble-input', function(event) {
     console.log('bubble-input', event.detail.data);
 }, false);
 
 set.addEventListener('focus', function(event) {
-    console.log('focus');
+    // console.log('focus');
 }, false);
 
 set.addEventListener('blur', function(event) {
-    console.log('blur');
+    // console.log('blur');
 }, false);
 
 document.getElementById('add-bubble')

dist/x-bubbles-compact.min.js.map

@@ -57,22 +57,22 @@ function edit(nodeSet, nodeBubble) {
 
 /**
  * У обертки нельзя делать tabindex=-1, иначе будет слетать фокус с поля ввода.
- * @param   {[type]} nodeSet             [description]
- * @param   {[type]} dataText            [description]
- * @param   {Object} [dataAttributes={}] [description]
- * @returns {[type]}                     [description]
+ * @param {HTMLElement} nodeEditor
+ * @param {string} dataText
+ * @param {Object} [dataAttributes={}]
+ * @returns {?HTMLElement}
  */
-function create(nodeSet, dataText, dataAttributes = {}) {
+function create(nodeEditor, dataText, dataAttributes = {}) {
     dataText = text.textClean(dataText);
 
     if (!dataText) {
         return;
     }
 
-    const bubbleFormation = nodeSet.options('bubbleFormation');
-    const classBubble = nodeSet.options('classBubble');
-    const draggable = canUseDrag && nodeSet.options('draggable');
-    const wrap = nodeSet.ownerDocument.createElement('span');
+    const bubbleFormation = nodeEditor.options('bubbleFormation');
+    const classBubble = nodeEditor.options('classBubble');
+    const draggable = canUseDrag && nodeEditor.options('draggable') && nodeEditor.options('selection');
+    const wrap = nodeEditor.ownerDocument.createElement('span');
 
     wrap.innerText = dataText;
 

dist/x-bubbles.js

@@ -11,6 +11,8 @@ exports.headBubble = headBubble;
 exports.lastBubble = lastBubble;
 exports.nextBubble = nextBubble;
 exports.prevBubble = prevBubble;
+exports.removeBubbles = removeBubbles;
+exports.moveBubbles = moveBubbles;
 
 function lastBubble(nodeSet) {
     return nodeSet.querySelector('[bubble]:last-child');
@@ -130,3 +132,13 @@ function isEditorNode(node) {
         node.getAttribute('is') === 'x-bubbles'
     );
 }
+
+function removeBubbles(nodeEditor, list) {
+    nodeEditor.fireBeforeRemove(list);
+    list.forEach(item => nodeEditor.removeChild(item));
+}
+
+function moveBubbles(nodeEditorFrom, nodeEditorTo, list) {
+    nodeEditorFrom.fireBeforeRemove(list);
+    list.forEach(item => nodeEditorTo.appendChild(item));
+}

dist/x-bubbles.min.js

@@ -0,0 +1,12 @@
+const events = require('../events');
+const { PROPS } = require('../constant');
+
+/**
+ * @param {Event} event
+ * @returns {?boolean}
+ */
+module.exports = function (event) {
+    if (event.currentTarget[ PROPS.LOCK_COPY ]) {
+        return events.prevent(event);
+    }
+};

dist/x-bubbles.min.js.map

@@ -0,0 +1,29 @@
+const events = require('../events');
+const bubbleset = require('../bubbleset');
+const { PROPS } = require('../constant');
+
+/**
+ * @param {Event} event
+ * @param {Object} sharedData
+ * @param {HTMLElement} [sharedData.nodeEditor]
+ * @param {HTMLElement} [sharedData.nodeBubble]
+ * @param {boolean} [sharedData.isDblclick]
+ * @returns {?boolean}
+ */
+module.exports = function (event, sharedData) {
+    const nodeEditor = bubbleset.closestNodeSet(event.target);
+    if (!nodeEditor) {
+        return events.prevent(event);
+    }
+
+    sharedData.nodeEditor = nodeEditor;
+    sharedData.nodeBubble = bubbleset.closestNodeBubble(event.target);
+    sharedData.isDblclick = false;
+
+    if (sharedData.nodeBubble) {
+        const clickTime = Date.now();
+        sharedData.isDblclick = nodeEditor[ PROPS.CLICK_TIME ] && (clickTime - nodeEditor[ PROPS.CLICK_TIME ]) < 200;
+
+        nodeEditor[ PROPS.CLICK_TIME ] = clickTime;
+    }
+};

docs/x-bubbles.min.js

@@ -0,0 +1,24 @@
+const raf = require('raf');
+const context = require('../../context');
+const events = require('../events');
+const { PROPS } = require('../constant');
+
+/**
+ * @param {Event} event
+ * @returns {?boolean}
+ */
+module.exports = function (event) {
+    const nodeEditor = event.currentTarget;
+    if (nodeEditor[ PROPS.LOCK_COPY ]) {
+        events.prevent(event);
+        delete nodeEditor[ PROPS.LOCK_COPY ];
+
+        // Safary 10 не сбрасывает курсор без задержки
+        raf(() => {
+            const selection = context.getSelection();
+            selection && selection.removeAllRanges();
+        });
+
+        return false;
+    }
+};

docs/x-bubbles.min.js.map

@@ -0,0 +1,24 @@
+const utils = require('../utils');
+const events = require('../events');
+const { KEY } = require('../constant');
+
+/**
+ * @param {Event} event
+ * @param {Object} sharedData
+ * @param {Selection} [sharedData.selection]
+ * @param {HTMLElement} [sharedData.nodeEditor]
+ */
+module.exports = function (event, sharedData) {
+    const code = events.keyCode(event);
+    sharedData.nodeEditor = event.currentTarget;
+
+    switch (code) {
+    case KEY.Left:
+    case KEY.Right:
+    case KEY.Delete:
+    case KEY.Backspace:
+        event.preventDefault();
+        sharedData.selection = utils.getSelection(event.currentTarget);
+        break;
+    }
+};

package.json

@@ -23,6 +23,7 @@ exports.CLS = {
 };
 
 exports.EV = {
+    BEFORE_REMOVE: 'before-remove',
     BUBBLE_EDIT: 'bubble-edit',
     BUBBLE_INPUT: 'bubble-input',
     CHANGE: 'change',
@@ -31,10 +32,13 @@ exports.EV = {
     DRAGLEAVE: 'dragleave',
     DRAGSTART: 'dragstart',
     DROP: 'drop',
+    READY: 'x-bubbles-ready',
 };
 
 exports.PROPS = {
-    BUBBLE_VALUE: '_bubbleValue',
-    CLICK_TIME: '_clickTime',
-    LOCK_COPY: '_lockCopy',
+    BUBBLE_VALUE: '__bubble_value__',
+    CLICK_TIME: '__click_time__',
+    LOCAL_EVENTS: '__events__',
+    LOCK_COPY: '__lock_copy__',
+    OPTIONS: '__options__',
 };

samples/index.html

@@ -83,7 +83,7 @@ function onMouseup(dragSet, event) {
             const list = select.get(currentDragSet);
 
             if (list.length) {
-                list.forEach(item => nodeSet.appendChild(item));
+                bubbleset.moveBubbles(currentDragSet, nodeSet, list);
                 context.setTimeout(onDropSuccess, 0, currentDragSet, nodeSet);
             }
         }

src/core/bubble.js

@@ -68,7 +68,7 @@ function onDrop(event) {
     const list = select.get(currentDragSet);
 
     if (list.length) {
-        list.forEach(item => nodeSet.appendChild(item));
+        bubbleset.moveBubbles(currentDragSet, nodeSet, list);
         context.setTimeout(onDropSuccess, 0, currentDragSet, nodeSet);
     }
 }