1if (typeof ($xa) !== "undefined") { 2 $xa.stickynotes = (function ($) { 3 "use strict"; 4 5 var pub = {}, 6 notes = [], 7 stickynotesList = null, 8 minWidth = 150, 9 minHeight = 150, 10 colors = ["#FFFF99", "#FC8D8D", "#A2BCFC", "#91B897", "#FCBD6A", "#E5BFFF"]; 11 12 function StickyNote(id, newNote, userName) { 13 this.highlited = false; 14 this.id = id; 15 this.newNote = newNote; 16 this.obj = $("#" + id); 17 this.properties = { 18 "positionTop": "0", 19 "positionLeft": "0", 20 "text": "", 21 "state": "", 22 "width": "", 23 "height": "", 24 "color": colors[0], 25 "date": "", 26 "canvasContent": "", 27 "userName": (userName === undefined) ? "" : userName 28 }; 29 } 30 31 StickyNote.prototype.unhide = function() { 32 var stickynotesJson = stickynotesList.val(), 33 stickyNoteObj = JSON.parse(stickynotesJson), 34 item, 35 $note; 36 37 if (stickyNoteObj.items.length) { 38 for (var i = 0; i < stickyNoteObj.items.length; i++) { 39 item = stickyNoteObj.items[i]; 40 $note = $(".stickynotes[data-id=" + item.id + "]"); 41 if ($note.hasClass("hide")) { 42 $note.toggleClass("hide"); 43 } 44 } 45 } 46 } 47 48 StickyNote.prototype.getProperties = function () { 49 var inst = this, 50 stickynotesJson = stickynotesList.val(), 51 initialized = false, 52 stickyNoteObj = JSON.parse(stickynotesJson), 53 component; 54 55 inst.component = inst.obj.next(); 56 component = inst.component; 57 if (!component.hasClass("component")) { 58 component = component.find(".component"); 59 } 60 61 component.addClass("stickynotes-available"); 62 63 if (stickyNoteObj.items.length) { 64 for (var i = 0; i < stickyNoteObj.items.length; i++) { 65 var item = stickyNoteObj.items[i], 66 $note = $(".stickynotes[data-id=" + item.id + "]"); 67 68 if (item.id === inst.id) { 69 $.extend(inst.properties, item.properties); 70 stickyNoteObj.items[i].properties = inst.properties; 71 //there could be situation that init function was called twice (first time because upper ribbon checkbox were checked and secondl because someone want's to add new stickynotes 72 //because of that we have to check if that stickynotes wasn't displayed yet 73 if ($note.length == 0) { 74 inst.initNote(component, inst.properties, inst.id); 75 $note = $(".stickynotes[data-id=" + item.id + "]"); 76 } 77 initialized = true; 78 } 79 $note.show(); 80 } 81 } 82 83 if (!initialized) { 84 stickyNoteObj.items.push({"id": inst.id, "properties": inst.properties}); 85 inst.initNote(component, inst.properties, inst.id); 86 87 if (stickyNoteObj.items.length) { 88 for (var i = 0; i < stickyNoteObj.items.length; i++) { 89 $(".stickynotes[data-id=" + stickyNoteObj.items[i].id + "]").show(); 90 } 91 } 92 } 93 94 stickynotesList.val(JSON.stringify(stickyNoteObj)); 95 }; 96 97 StickyNote.prototype.updateHiddenField = function (properties) { 98 var inst = this, 99 stickyNoteObj = JSON.parse(stickynotesList.val()), 100 removedObj = {}, 101 component = {}; 102 103 $.each(stickyNoteObj.items, function (i, item) { 104 if (item.id === inst.id) { 105 removedObj = item; 106 stickyNoteObj.items.splice(i, 1); 107 return false; 108 } 109 }); 110 111 $.extend(removedObj.properties, properties); 112 stickyNoteObj.items.push(removedObj); 113 114 stickynotesList.val(JSON.stringify(stickyNoteObj)); 115 Sitecore.PageModes.PageEditor.setModified(true); 116 }; 117 118 StickyNote.prototype.deleteNote = function (note) { 119 var inst = this, 120 stickyNoteJson = stickynotesList.val(), 121 stickyNoteObj = JSON.parse(stickyNoteJson); 122 123 $.each(stickyNoteObj.items, function (i, item) { 124 if (item.id === inst.id) { 125 stickyNoteObj.items.splice(i, 1); 126 return false; 127 } 128 }); 129 130 $(note).hide(); 131 $(note).remove(); 132 stickynotesList.val(JSON.stringify(stickyNoteObj)); 133 Sitecore.PageModes.PageEditor.setModified(true); 134 }; 135 136 StickyNote.prototype.initNote = function (component, properties, id) { 137 var note = $("<div class='stickynotes' data-id='" + id + "'>" + 138 "<textarea>" + properties.text + "</textarea>" + 139 "<div class='nav'><span class='minimalize'>-</span><span class='drawing-control'></span><span class='search'></span><span class='delete'>x</span></div>" + 140 "<div class='bottom'><span class='date'>" + properties.date + "</span><span class='name'>" + properties.userName + "</span></div>" + 141 "</div>"), 142 inst = this, 143 ribbonHeight = $("#scWebEditRibbon").height(), 144 currentTop, currentLeft, width, height; 145
146 var componentOffsetTop = component.offset().top, 147 componentOffsetLeft = component.offset().left; 148 149 currentTop = component.offset().top + parseInt(properties.positionTop, 0); 150 currentLeft = component.offset().left + parseInt(properties.positionLeft, 0); 151 width = properties.width - 30; //minus note padding 152 height = properties.height - 35; 153 154 $("body").append(note); 155 inst.drawCanvas(component, properties); 156 157 var markComponent = function () { 158 component.find(".stickynotes-background").css({ 159 "background": properties.color 160 }); 161 note.css({ 162 "background": properties.color 163 }); 164 }; 165 markComponent(); 166 167 if (width > 0) { 168 $(note).css({ 169 "width": width 170 }); 171 } 172 173 if (height > 0) { 174 $(note).css({ 175 "height": height 176 }); 177 } 178 179 $(note).css({ 180 "top": currentTop, 181 "left": currentLeft 182 }); 183 184 $(note).resizable({ 185 helper: "ui-resizable-helper", 186 start: function (event, ui) { 187 $('iframe').css('pointer-events', 'none'); 188 }, 189 stop: function (event, ui) { 190 $('iframe').css('pointer-events', 'auto'); 191 }, 192 minHeight: minHeight, 193 minWidth: minWidth 194 }).draggable(); 195 196 $(note).on("dragstop", function (event, ui) { 197 inst.updateHiddenField({ 198 "positionTop": ui.position.top - component.offset().top, 199 "positionLeft": ui.position.left - component.offset().left 200 }); 201 }); 202 203 $(note).on("resizestop", function (event, ui) { 204 inst.updateHiddenField({ 205 "width": ui.size.width, 206 "height": ui.size.height 207 }); 208 }); 209 210 $(note).find("textarea").on("keyup", function () { 211 var currentDate = new Date(), 212 day = currentDate.getDate(), 213 month = currentDate.getMonth() + 1, 214 year = currentDate.getFullYear(); 215 216 var date = day + "/" + month + "/" + year; 217 218 inst.updateHiddenField({ 219 "text": $(this).val(), 220 "date": date 221 }); 222 223 $(this).parent().find(".date").html(date); 224 }); 225 226 $(note).find(".minimalize").on("click", function () { 227 $(this).parent().parent().toggleClass("hide"); 228 }); 229 230 $(note).find(".drawing-control").on("click", function () { 231 var colorIndex = _.indexOf(colors, properties.color); 232 if (colorIndex === (colors.length - 1)) { 233 colorIndex = 0; 234 } 235 else { 236 colorIndex++; 237 } 238 properties.color = colors[colorIndex]; 239 240 $(this).parent().parent().css({ 241 "background": properties.color 242 }); 243 244 inst.component.find(".stickynotes-background").css({ 245 "background": properties.color 246 }); 247 248 inst.updateHiddenField({ 249 "color": properties.color 250 }); 251 }); 252 253 $(note).find(".search").on("click", function () { 254 if (inst.highlited) { 255 inst.highlited = false; 256 } else { 257 inst.highlited = true; 258 } 259 260 inst.component.find(".stickynotes-canvas, .stickynotes-background").toggle(); 261 }); 262 263 $(note).find(".delete").on("click", function () { 264 inst.deleteNote(note); 265 }); 266 267 window.addEventListener('resize', function () { 268 var notePositionTop = parseInt($(note).css("top"), 0), 269 notePositionLeft = parseInt($(note).css("left"), 0); 270 271 $(note).css({ 272 "top": notePositionTop + ($(component).offset().top - componentOffsetTop) - ribbonHeight, 273 "left": notePositionLeft + ($(component).offset().left - componentOffsetLeft) 274 }); 275 componentOffsetTop = $(component).offset().top - ribbonHeight; 276 componentOffsetLeft = $(component).offset().left; 277 278 }); 279 280 }; 281 282 StickyNote.prototype.updateComponent = function (component, properties) { 283 var inst = this; 284 inst.component = component; 285 inst.drawCanvas(inst.component, inst.properties); 286 if (inst.highlited) { 287 inst.component.find(".stickynotes-canvas, .stickynotes-background").show(); 288 } 289 } 290 291 292 StickyNote.prototype.drawCanvas = function (component, properties) { 293 var inst = this, 294 canvas = $("<canvas class='stickynotes-canvas'></canvas>"), 295 background = $("<div class='stickynotes-background'></div>"); 296 background.css({ "background": properties.color }); 297 298 $(component).append(background); 299 $(component).append(canvas); 300 301 var cnv = canvas.get(0), 302 componentLeft = component.offset().left, 303 componentTop = component.offset().top, 304 ctx = cnv.getContext("2d"); 305 306 /*cnv.width = component.width(); 307 cnv.height = component.height(); 308 background.css({ 309 "width": component.width(), 310 "height": component.height() 311 });*/ 312 313 var loadDataUrl = function () { 314 var img = new Image(); 315 img.onload = function () { 316 ctx.drawImage(img, 0, 0); // Or at whatever offset you like 317 }; 318 img.src = properties.canvasContent; 319 }; 320 loadDataUrl(); 321 322 var drawLines = function () { 323 canvas.on("mousedown", function (evDown) { 324 ctx.beginPath(); 325 ctx.arc(evDown.pageX, evDown.pageY, 10, 0, Math.PI * 2, true); 326 ctx.fillStyle = 'green'; 327 ctx.fill(); 328 329 $(this).on("mousemove", function (ev) { 330 var currentX = ev.pageX - componentLeft, 331 currentY = ev.pageY - componentTop; 332 333 ctx.beginPath(); 334 ctx.arc(evDown.pageX, evDown.pageY, 10, 0, Math.PI * 2, true); 335 ctx.fillStyle = 'green'; 336 ctx.fill(); 337 });
338 }); 339 340 canvas.on("mouseup", function () { 341 $(this).unbind("mousemove"); 342 inst.updateHiddenField({ 343 "canvasContent": cnv.toDataURL("image/png;base64") 344 }); 345 }); 346 347 canvas.on("mouseleave", function () { 348 $(this).unbind("mousemove"); 349 }); 350 }; 351 352 drawLines(cnv, canvas); 353 }; 354 355 pub.init = function (showStickyNotes) { 356 var stickynotesListObj, 357 initObj = {"items": []}; 358 359 //stickynotess visible only on page editor 360 if (!$("body").hasClass("on-page-editor") || !showStickyNotes) { 361 return false; 362 } 363 364 $.each($("input"), function (i, item) { 365 if (item.id.match(/4C2F221F942645ED9EEBC79BB3169565/g)) { 366 stickynotesList = $(item); 367 } 368 }); 369 370 if (stickynotesList === null) { 371 console.warn("Layout is missing StickyNote meta component"); 372 return false; 373 } 374 375 if (!stickynotesList.val().length) { 376 stickynotesList.val(JSON.stringify(initObj)); 377 } else { 378 stickynotesListObj = JSON.parse(stickynotesList.val()); 379 380 var itemsToClean = []; 381 $.each(stickynotesListObj.items, function (i, item) { 382 if (item.hasOwnProperty("id")) { 383 if ($("#" + item.id).length) { 384 var stickynotes = new StickyNote(item.id, false, item.properties.userName); 385 notes.push(stickynotes); 386 stickynotes.unhide(); 387 stickynotes.getProperties(); 388 } else { 389 itemsToClean.push(i); 390 } 391 } 392 }); 393 394 itemsToClean.reverse(); 395 $.each(itemsToClean, function (i, item) { 396 stickynotesListObj.items.splice(item, 1); 397 }); 398 399 stickynotesList.val(JSON.stringify(stickynotesListObj)); 400 } 401 402 Sitecore.PageModes.ChromeManager.chromesReseted.observe(this.refresh); 403 }; 404 405 pub.refresh = function() { 406 $xa.stickynotes.reset(); 407 }; 408 409 pub.reset = function() { 410 var s = stickynotesList, 411 note = notes, 412 chromes = Sitecore.PageModes.ChromeManager.chromes(); 413 414 for (var i = 0; i < chromes.length; i++) { 415 var chrome = chromes[i], 416 renderingid = chrome._originalDOMElement[0].id; 417 418 if (renderingid != undefined) { 419 for (var j = 0; j < notes.length; j++) { 420 note = notes[j]; 421 if (note.id == renderingid) { 422 note.updateComponent($(chrome.element)); 423 } 424 } 425 } 426 } 427 }; 428 429 430 pub.add = function (stickyNoteId, userName) { 431 var stickynotesListObj, noteExists = false; 432 433 if (stickynotesList === null) { 434 return false; 435 } 436 437 stickynotesListObj = JSON.parse(stickynotesList.val()); 438 439 $.each(stickynotesListObj.items, function (i, item) { 440 if (item.id === stickyNoteId) { 441 noteExists = true; 442 } 443 }); 444 445 if (noteExists) { 446 var component = $("#" + stickyNoteId).next(), 447 note = $(".stickynotes[data-id='" + stickyNoteId + "']"), 448 cords = {}; 449 450 if (!component.hasClass("component")) { 451 component = component.find(".component"); 452 } 453 454 note.css({ 455 "top": component.offset().top, 456 "left": component.offset().left 457 }); 458 459 cords.position = { 460 "top": component.offset().top, 461 "left": component.offset().left 462 }; 463 note.trigger("dragstop", cords); 464 465 } else { 466 var stickynotes = new StickyNote(stickyNoteId, true, userName); 467 stickynotes.getProperties(); 468 notes.push(stickynotes); 469 } 470 }; 471 472 pub.remove = function () { 473 var stickynotes = $('.stickynotes'); 474 stickynotes.hide(); 475 }; 476 477 return pub; 478 }($xa)); 479}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.