soocrate-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">lib/view/marker.js | jquery-crate</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="Cratify tool that turns a division into a distributed and decentralized collaborative editor"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="jquery-crate"><meta property="twitter:description" content="Cratify tool that turns a division into a distributed and decentralized collaborative editor"></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/haouarin/jquery-crate.git"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/view.js~view.html">view</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Signaling">Signaling</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#controller">controller</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/controller/editor.js~EditorController.html">EditorController</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-StatesHeader">StatesHeader</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib">crate-core/lib</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-GUID">GUID</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-causalbroadcastdefinition-lib">crate-core/lib/CausalBroadcastDefinition/lib</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-GUID">GUID</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-causalbroadcastdefinition-lib-unicast-definition-lib-interfaces">crate-core/lib/CausalBroadcastDefinition/lib/unicast-definition/lib/interfaces</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/crate-core/lib/CausalBroadcastDefinition/lib/unicast-definition/lib/interfaces/ipsp.js~IPSP.html">IPSP</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-causalbroadcastdefinition-lib-unicast-definition-lib-messages">crate-core/lib/CausalBroadcastDefinition/lib/unicast-definition/lib/messages</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/crate-core/lib/CausalBroadcastDefinition/lib/unicast-definition/lib/messages/municast.js~MUnicast.html">MUnicast</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-lseqtree-lib">crate-core/lib/LSEQTree/lib</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-base">base</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-LSEQNode">LSEQNode</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Triple">Triple</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-spray-wrtc-lib">crate-core/lib/spray-wrtc/lib</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/crate-core/lib/spray-wrtc/lib/partialview.js~PartialView.html">PartialView</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/crate-core/lib/spray-wrtc/lib/spray.js~Spray.html">Spray</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MExchange">MExchange</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-EventEmitter">EventEmitter</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-spray-wrtc-lib-n2n-overlay-wrtc-lib">crate-core/lib/spray-wrtc/lib/n2n-overlay-wrtc/lib</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MConnectTo">MConnectTo</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MDirect">MDirect</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MForwardTo">MForwardTo</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MForwarded">MForwarded</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#crate-core-lib-spray-wrtc-lib-n2n-overlay-wrtc-lib-neighborhood-wrtc-lib">crate-core/lib/spray-wrtc/lib/n2n-overlay-wrtc/lib/neighborhood-wrtc/lib</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/lib/crate-core/lib/spray-wrtc/lib/n2n-overlay-wrtc/lib/neighborhood-wrtc/lib/neighborhood.js~Neighborhood.html">Neighborhood</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-MultiSet">MultiSet</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#view">view</a><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Editor">Editor</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-LinkView">LinkView</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-Marker">Marker</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-StatesHeader">StatesHeader</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">lib/view/marker.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">var animals = require('animals'); var hash = require('string-hash'); /** * [Marker Module manages the Carets, avatars, pseudonames for the different users of the document] * @param {[string]} origin [the id of the the user] * @param {Number} lifeTime [After this time, if no ping or Caret position is received => remove caret and avatar. if lifetime is -1 we didn't add the avatar] * @param {[{index: index,length: 0}]} range [range stars from index with the specified length] * @param {[cursor module]} cursorsp [the used cursor module for quilljs] * @param {[Boolean]} cursor [create the caret or not. If it is from ping, it will be false else true] * @param {Boolean} isItME [is it my caret ? true or false to disable the time if it is true] */ var Marker = function(origin, lifeTime = -1, range, cursorsp, cursor, isItME = false) { this.origin = origin; this.lifeTime = lifeTime; this.time = new Date().getTime(); this.color = this.getColor(this.origin); this.colorRGB = 'rgb(' + this.color + ')'; this.colorRGBLight = 'rgba(' + this.color + ', 0.5)'; this.animal = animals.words[hash(this.origin) % animals.words.length]; this.pseudoName = 'Anonymous ' + this.capitalize(animals.words[hash(this.origin) % animals.words.length]); this.avatarAdd = false; this.cursor = cursor; // true if editing, false if it is from ping if (lifeTime != -1) { // -1 => created without timer avatar cursor if (!isItME) { this.timer = setInterval(() => this.checkIfOutdated(), 1000); } this.addAvatar(); if (cursor) { this.addCursor(range); } } }; /** * [capitalize upercase the first letter] * @param {[string]} s [string] * @return {[string]} [String the first letter is in uppercase] */ Marker.prototype.capitalize = function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }; /** * [getColor for a specific id, get a unique color] * @param {[string]} str [the id of the user] * @return {[(r,g,b))]} [the correspanding rgb color] */ Marker.prototype.getColor = function getColor(str) { var h1 = hash(str) % 206; var h2 = (h1 * 7) % 206; var h3 = (h1 * 11) % 206; return Math.floor(h1 + 50) + ", " + Math.floor(h2 + 50) + ", " + Math.floor(h3 + 50); }; /** * [update the time to keep the avatar and cursor if it exist] * @param {[{index: index,length: 0}]} range [description] * @param {[boolean]} cursor [if it is true add update the caret position] */ Marker.prototype.update = function update(range, cursor) { this.time = new Date().getTime(); if (!$("#" + this.origin).length) { this.addAvatar(); } jQuery("#" + this.origin).attr('data-toggle', 'tooltip'); jQuery("#" + this.origin).attr('title', this.pseudoName); if (this.cursor == true && cursor == true) { // in the case of update, make sure that ping updates don't change the range Marker.cursors.moveCursor(this.origin, range); } else if (cursor == true) { this.cursor = cursor; this.addCursor(range); } }; /** * [checkIfOutdated check if the user is outdated and if it is the case remove its caret and avatar ] */ Marker.prototype.checkIfOutdated = function checkIfOutdated() { var timeNow = new Date().getTime(); var dff = (timeNow - this.time); // if cursor is outdated if ((timeNow - this.time) >= this.lifeTime) { // Remve cursor and avatar if (this.cursor) { Marker.cursors.removeCursor(this.origin); this.cursor = false; } this.removeAvatar(); clearInterval(this.timer); } else { jQuery("#" + this.origin + "").css('opacity', (1 - ((timeNow - this.time) / this.lifeTime))); } } /** * [addAvatar addAvatar of the user to the editor with correpanding divID] * @param {String} divID [the id of the div where the avatars are placed] */ Marker.prototype.addAvatar = function addAvatar(divID = "#users") { jQuery(divID).append(this.getAvatar()); jQuery("#" + this.origin + "").attr('data-toggle', 'tooltip'); jQuery("#" + this.origin + "").attr('title', this.pseudoName); this.avatarAdd = true; }; /** * [getAvatar return the div that contains this user id] * @return {[type]} [description] */ Marker.prototype.getAvatar = function getAvatar() { return '<div id="' + this.origin + '"style="background-color:' + this.colorRGB + ';"><img class="imageuser" src="./icons/' + this.animal + '.png" alt="' + this.pseudoName + '"></div>'; }; /** * [removeAvatar remove the avatar of the user from the interface] * @return {[type]} [description] */ Marker.prototype.removeAvatar = function removeAvatar() { jQuery("#" + this.origin + "").remove(); this.avatarAdd = false; }; /** * [setPseudo set pseudo for the user ] * @param {[type]} Pseudo [description] */ Marker.prototype.setPseudo = function setPseudo(Pseudo) { this.pseudoName = Pseudo; jQuery("#" + this.origin + "").attr('title', this.pseudoName); }; /** * [addCursor add the cursor to the editor] * @param {[{index: index,length: 0}]} range [description] */ Marker.prototype.addCursor = function addCursor(range) { this.cursor = true; Marker.cursors.setCursor(this.origin, range, this.pseudoName, this.colorRGB); }; module.exports = Marker;</code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.0.4)</span><img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>