@cocreate/cursors 1.10.14 → 1.10.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/docs/index.html +24 -44
  3. package/package.json +8 -8
  4. package/src/index.css +1 -9
  5. package/src/index.js +28 -24
package/CHANGELOG.md CHANGED
@@ -1,3 +1,32 @@
1
+ ## [1.10.18](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.17...v1.10.18) (2021-12-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * check contenteditable element then iframe ([29bd7b4](https://github.com/CoCreate-app/CoCreate-cursors/commit/29bd7b4e7460c478cec37916fe9bb7439d2b8805))
7
+ * use attribute for socket_id instead of id ([db901da](https://github.com/CoCreate-app/CoCreate-cursors/commit/db901daa270551cd6b1b6b95124d785ed81643c9))
8
+
9
+ ## [1.10.17](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.16...v1.10.17) (2021-11-27)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * update dependencies ([4532eb5](https://github.com/CoCreate-app/CoCreate-cursors/commit/4532eb5470d6a8a76c22ed636ba83e9db43d2064))
15
+
16
+ ## [1.10.16](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.15...v1.10.16) (2021-11-27)
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * update dependencies ([000e805](https://github.com/CoCreate-app/CoCreate-cursors/commit/000e80564cfa029a60d0891da18a4076edb44ff2))
22
+
23
+ ## [1.10.15](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.14...v1.10.15) (2021-11-27)
24
+
25
+
26
+ ### Bug Fixes
27
+
28
+ * update docs api and cocreateJS script ([1c4984e](https://github.com/CoCreate-app/CoCreate-cursors/commit/1c4984eaf2288b7261181a98fb540bff3a85e0c8))
29
+
1
30
  ## [1.10.14](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.13...v1.10.14) (2021-11-26)
2
31
 
3
32
 
package/docs/index.html CHANGED
@@ -76,50 +76,30 @@
76
76
  <!-- SandBox -->
77
77
  <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2>
78
78
  <div class="position:sticky top:0 padding:15px_0px height:100vh">
79
- <div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="form-sandbox">
80
- <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7">
81
- <a class="margin-right:10px" id="preview" show="preview" hide="code"><i class="far fa-eye"></i></a>
82
- <a class="margin-right:10px hidden" id="code" show="code" hide="preview"><i class="fas fa-code"></i></a>
83
- <!--<a class="margin-right:10px"><i class="far fa-window-maximize"></i></a>-->
84
- <a target="modal" href="module_activity_datatable.html"
85
- pass-collection="modules"
86
- pass-document_id=""
87
- pass-fetch_value=""
88
- pass-prefix=""
89
- pass_to="render"
90
- modal-width="600px"
91
- modal-height="400px"
92
- modal-color="#229954"
93
- modal-header="false"
94
- class="margin-right:10px">
95
- <i class="fas fa-external-link-alt"></i>
96
- </a>
97
- <a class="fs-toggle margin-right:5px" target="#playground-1"><i class="fas fa-expand"></i></a>
98
- </div>
99
-
100
- <div class="svRow">
101
-
102
- <div class="svColumn">
103
-
104
- <div class="svPanel">
105
- <div realtime="false"
106
- collection="modules"
107
- document_id="5eefe30952c6e94c75fb5e3f"
108
- name="html"
109
- id="7"
110
- class="codemirror min-width:300px">
111
- </div>
112
- </div>
113
- <div class="svSplitter svHorizontal"> </div>
114
-
115
- <div class="svPanel">
116
- <iframe get-value="7" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
117
- </div>
118
-
119
- </div>
120
- </div>
121
- </div>
122
- <!-- End SandBox -->
79
+ <!-- SandBox -->
80
+ <div class="container svColumn overflow:hidden card position:relative border-radius:2px width:auto height:100%" id="sandbox">
81
+ <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
82
+ <a class="margin-right:10px" id="code" show="#preview" hide="#code, #view"><i class="far fa-eye"></i></a>
83
+ <a class="margin-right:10px hidden" id="preview" show="#code, #view" hide="#preview"><i class="fas fa-code"></i></a>
84
+ <a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a>
85
+ </div>
86
+ <div class="svRow">
87
+
88
+ <div class="svColumn">
89
+
90
+ <div class="svPanel" id="view">
91
+ <textarea collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% border:none resize:none padding:5px"></textarea>
92
+ </div>
93
+ <div class="svSplitter svHorizontal"> </div>
94
+
95
+ <div class="svPanel">
96
+ <iframe get-value="demo" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe>
97
+ </div>
98
+
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <!-- End SandBox -->
123
103
  </div>
124
104
  </div>
125
105
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/cursors",
3
- "version": "1.10.14",
3
+ "version": "1.10.18",
4
4
  "description": "Collaborative user cursor position for inputs, textarea's and contenteditable elements.",
5
5
  "keywords": [
6
6
  "cursors",
@@ -62,12 +62,12 @@
62
62
  "webpack-log": "^3.0.1"
63
63
  },
64
64
  "dependencies": {
65
- "@cocreate/crud-client": "^1.4.34",
66
- "@cocreate/docs": "^1.2.56",
67
- "@cocreate/message-client": "^1.1.52",
68
- "@cocreate/observer": "^1.3.48",
69
- "@cocreate/random-color": "^1.2.10",
70
- "@cocreate/selection": "^1.2.15",
71
- "@cocreate/uuid": "^1.1.45"
65
+ "@cocreate/crud-client": "^1.4.38",
66
+ "@cocreate/docs": "^1.2.60",
67
+ "@cocreate/message-client": "^1.1.56",
68
+ "@cocreate/observer": "^1.3.52",
69
+ "@cocreate/random-color": "^1.2.13",
70
+ "@cocreate/selection": "^1.2.19",
71
+ "@cocreate/uuid": "^1.1.49"
72
72
  }
73
73
  }
package/src/index.css CHANGED
@@ -27,13 +27,9 @@
27
27
  white-space: nowrap;
28
28
  }
29
29
 
30
- .selection {
31
- background-color: #ecd44;
32
- opacity: 0.6;
33
- }
34
-
35
30
  .cursor-selection {
36
31
  position: absolute;
32
+ opacity: 0.4;
37
33
  }
38
34
 
39
35
  .mirror {
@@ -49,7 +45,3 @@
49
45
  background: rgba(0, 0, 0, 0.00);
50
46
  width: 0px;
51
47
  }
52
-
53
- .users_selections {
54
- opacity: 0.4;
55
- }
package/src/index.js CHANGED
@@ -94,7 +94,7 @@ var getCoordinates = function(element, position_start, position_end) {
94
94
 
95
95
 
96
96
  let cursor_container = mirrorDiv.querySelectorAll('.cursor-container');
97
- let users_selections = mirrorDiv.querySelectorAll('.users_selections');
97
+ let users_selections = mirrorDiv.querySelectorAll('.cursor-selection');
98
98
 
99
99
  let value_element = (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) == -1) ? element.innerHTML : element.value;
100
100
  mirrorDiv.textContent = value_element.substring(0, position_start);
@@ -165,8 +165,10 @@ function drawCursors(selection) {
165
165
  let realtime = element.getAttribute('realtime');
166
166
  let cursors = element.getAttribute('cursors');
167
167
  if (realtime == 'false' || cursors == 'false') continue;
168
- if (element.tagName == 'IFRAME') {
169
- let domTextEditor = element.contentDocument.documentElement;
168
+ if (element.hasAttribute('contenteditable')) {
169
+ let domTextEditor = element;
170
+ if (element.tagName == 'IFRAME')
171
+ domTextEditor = element.contentDocument.documentElement;
170
172
  let pos = getElementPosition(domTextEditor.htmlString, start, end);
171
173
  element = domTextEditor.querySelector(pos.path);
172
174
  let endPos = end - start;
@@ -187,20 +189,18 @@ function drawCursors(selection) {
187
189
 
188
190
  let elementMirror = document.getElementById(id_mirror);
189
191
  let cursor;
190
- // let selection_user = false;
191
- // let user = (typeof(selection) != 'undefined' && selection.hasOwnProperty('user')) ? selection.user : false;
192
- // let user_id = (typeof(selection) != 'undefined' && selection.hasOwnProperty('user_id')) ? user.user_id : false;
192
+ let details = {collection, document_id, name};
193
193
  if (socket_id) {
194
- var cursores_other_elements = document.querySelectorAll('#socket_' + socket_id);
195
- cursores_other_elements.forEach(function(child_cursor, index, array) {
196
- if (child_cursor.parentElement.getAttribute('id') != id_mirror) {
197
- child_cursor.remove();
194
+ let cursores_other_elements = document.querySelectorAll(`.cursor-container[socket_id="${socket_id}"]`);
195
+ if (cursores_other_elements) {
196
+ for (cursor of cursores_other_elements){
197
+ if (cursor.details != details)
198
+ cursor.remove();
198
199
  }
199
- });
200
- cursor = elementMirror.querySelector('.cursor-container#socket_' + socket_id);
200
+ }
201
+ cursor = elementMirror.querySelector(`.cursor-container[socket_id="${socket_id}"]`);
201
202
  if (!cursor) {
202
- let cursor_template = '<div class="cursor-container" \
203
- id="socket_' + socket_id + '" \
203
+ let cursor_template = '<div class="cursor-container" socket_id="' + socket_id + '" \
204
204
  style="background-color:' + selection.background + '"> \
205
205
  <div class="cursor-flag" \
206
206
  collection="users" \
@@ -210,16 +210,14 @@ function drawCursors(selection) {
210
210
  elementMirror.innerHTML = cursor_template + elementMirror.innerHTML;
211
211
  }
212
212
  }
213
- cursor = elementMirror.querySelector('.cursor-container#socket_' + socket_id);
213
+ cursor = elementMirror.querySelector(`.cursor-container[socket_id="${socket_id}"]`);
214
214
  if (cursor) {
215
215
  let font_size = getStyle(element, 'font-size');
216
216
  font_size = parseFloat(font_size.substring(0, font_size.length - 2));
217
217
  let cursor_height = ((font_size * 112.5) / 100);
218
- // let my_cursor = cursor.querySelector('.cursor');
219
218
  let cursorFlag = cursor.querySelector('.cursor-flag');
220
219
  cursor.dataset.start = start;
221
220
  cursor.dataset.end = end;
222
- cursor.setAttribute('socket_id', socket_id);
223
221
  cursor.setAttribute('user-name', selection.userName);
224
222
  cursor.setAttribute('user-background', selection.background);
225
223
  cursor.setAttribute('user-color', selection.color);
@@ -228,26 +226,32 @@ function drawCursors(selection) {
228
226
  cursorFlag.style["background"] = selection.background;
229
227
  cursorFlag.innerHTML = selection.userName;
230
228
  cursor.style["left"] = coordinates.end.left + "px";
229
+ cursor.details = {collection, document_id, name};
231
230
 
232
- let selection_user = document.getElementById('sel-' + socket_id);
233
- if (selection_user) {
234
- selection_user.remove();
231
+ let userSelections = document.querySelectorAll(`.cursor-selection[socket_id="${socket_id}"]`);
232
+ if (userSelections) {
233
+ for (selection of userSelections){
234
+ if (selection.details != details)
235
+ selection.remove();
236
+ }
235
237
  }
236
238
  if ((start != end)) {
237
239
  var scrollwidth = element.offsetWidth - element.scrollWidth;
238
240
  var padding_right = parseInt(getComputedStyle(element)["paddingRight"]);
239
241
 
240
- selection_user = document.createElement('span');
242
+ let selection_user = document.createElement('span');
241
243
  selection_user.id = 'sel-' + socket_id;
242
- selection_user.className = 'users_selections';
244
+ selection_user.setAttribute('socket_id', socket_id);
245
+ selection_user.className = 'cursor-selection';
243
246
  let style_mirror = getComputedStyle(elementMirror);
244
247
  selection_user.style["position"] = "absolute";
245
248
  selection_user.style["top"] = style_mirror.paddingTop;
246
249
  selection_user.style["left"] = style_mirror.paddingLeft;
247
250
  selection_user.style["padding-right"] = scrollwidth + padding_right + "px";
251
+ selection_user.details = {collection, document_id, name};
248
252
  elementMirror.insertBefore(selection_user, elementMirror.firstChild);
253
+
249
254
  let selection_span_by_user = document.createElement('span');
250
- selection_span_by_user.id = 'selection-' + socket_id;
251
255
  selection_span_by_user.style.backgroundColor = selection.background;
252
256
  let value_element = (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) == -1) ? element.innerHTML : element.value;
253
257
  selection_user.textContent = value_element.substring(0, start);
@@ -297,7 +301,7 @@ function updateCursors(element) {
297
301
  }
298
302
 
299
303
  function removeCursor(clientId) {
300
- let elements = document.querySelectorAll('[id*="socket_' + clientId + '"]');
304
+ let elements = document.querySelectorAll(`.cursor-container[socket_id="${clientId}"]`);
301
305
  elements.forEach(function(element, index, array) {
302
306
  element.parentNode.removeChild(element);
303
307
  });