Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="create">+</div>
- <div class="container" id="container">
- <div id="oneNote">
- <div class="sticky-header">
- <span id="lock-icon"><i class="fas fa-lock-open"></i></span>
- <span id='title'>New Note</span>
- <span><i class="fas fa-times"></i></span>
- <span id="toggle-settings" ><i class="fas fa-chevron-down"></i></span>
- </div>
- <div class="sticky-body">
- <textarea name="txtNote" id="txtNote" cols="30" rows="10"></textarea>
- </div>
- <div class="settings" id="settings" >
- <p id="delete-note"><i class="fas fa-trash-alt"></i>Delete Note</p>
- <div class="color">
- <p><i class="fas fa-paint-roller"></i>Color<i class="fas fa-chevron-right"></i></p>
- <div class="color-choice-container">
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#" class="active"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- <a href="#"></a>
- </div>
- </div>
- <div class="opacity">
- <p>opacity<i class="fas fa-chevron-right"></i></p>
- <div class="opacity-content">
- <p data-opacity='1'>100%</p>
- <p data-opacity='0.9'>90%</p>
- <p data-opacity='0.8'>80%</p>
- <p data-opacity='0.7'>70%</p>
- <p data-opacity='0.6'>60%</p>
- <p data-opacity='0.5'>50%</p>
- <p data-opacity='0.4'>40%</p>
- <p data-opacity='0.3'>30%</p>
- <p data-opacity='0.2'>20%</p>
- <p data-opacity='0.1'>10%</p>
- </div>
- </div>
- <p id="edit-title">Edit title</p>
- <p id="lock-note-button"><i class="fas fa-lock"></i>Lock note</p>
- </div>
- </div>
- </div>
- chat.client.addNoteToPage = function (title, noteText) {
- // Add the message to the page.
- duplicate();
- // var newNote = '<div class="sticky-header"><span id="lock-icon"><i class="fas fa-lock-open"></i></span ><span id="title">New Note</span><span><i class="fas fa-times"></i></span><span id="toggle-settings"><i class="fas fa-chevron-down"></i></span></div ><div class="sticky-body"><textarea name="txtNote" id="txtNote" cols="30" rows="10"></textarea></div>';
- // $('#oneNote').append(newNote);
- };
- function duplicate() {
- var original = document.getElementById('oneNote');
- var clone = original.cloneNode(true); // "deep" clone
- clone.id = "oneNote" + ++i; // there can only be one element with an ID
- //clone.onclick = duplicate; // event handlers are not cloned
- $('#create').before(clone);
- }
- var menu_bar = document.getElementById("toggle-settings");
- var settings = document.getElementById("settings");
- var sticky_header = document.querySelector(".sticky-header");
- var edit_title = document.getElementById("edit-title");
- var edit_title_box = document.querySelector(".edit-title-box");
- var overlay = document.querySelector(".overlay");
- var title = document.getElementById("title");
- var new_title = document.getElementById("new-title");
- var ok_button = document.getElementById("ok");
- var cancel_button = document.getElementById("cancel");
- var lock_note_button = document.getElementById("lock-note-button");
- var lock_note_icon = document.getElementById("lock-icon");
- var textarea = document.querySelector("textarea");
- var delete_note = document.getElementById("delete-note");
- var delete_box = document.querySelector(".delete-box");
- var yes_button = document.getElementById("yes");
- var no_button = document.getElementById("no");
- var container = document.getElementById("container");
- var opacity_content = document.querySelectorAll(".opacity-content>p");
- var color_container_colors = document.querySelectorAll(
- ".color-choice-container a"
- );
- var color_container = document.querySelector(".color-choice-container");
- var active = document.querySelector(".active");
- var notice = document.querySelector(".notice");
- var opacityArray = [1, 1];
- var colorObject = {
- old: {
- header: "rgb(206, 209, 38)",
- body: "rgb(236, 239, 68)"
- },
- new: {
- header: "rgb(206, 209, 38)",
- body: "rgb(236, 239, 68)"
- }
- };
- menu_bar.addEventListener("click", function () {
- var settings_display_prop = window.getComputedStyle(settings).display;
- if (settings_display_prop == "none") {
- settings.style.display = "block";
- } else {
- settings.style.display = "none";
- }
- });
- edit_title.addEventListener("click", function () {
- overlay.style.transform = "scale(1)";
- edit_title_box.classList.add("show");
- settings.style.display = "none";
- });
- cancel_button.addEventListener("click", function () {
- overlay.style.transform = "scale(0)";
- edit_title_box.classList.remove("show");
- });
- ok_button.addEventListener("click", function () {
- overlay.style.transform = "scale(0)";
- if (new_title.value.length > 0) {
- title.innerHTML = new_title.value;
- }
- edit_title_box.classList.remove("show");
- });
- lock_note_button.addEventListener("click", function () {
- var lock_icon = lock_note_icon.firstElementChild;
- if (lock_icon.classList.contains("fa-lock-open")) {
- lock_icon.classList.remove("fa-lock-open");
- lock_icon.classList.add("fa-lock");
- textarea.disabled = true;
- this.innerHTML = '<i class="fas fa-lock"></i> Unlock note';
- } else {
- lock_icon.classList.remove("fa-lock");
- lock_icon.classList.add("fa-lock-open");
- textarea.disabled = false;
- this.innerHTML = '<i class="fas fa-lock"></i> Lock note';
- }
- settings.style.display = "none";
- });
- textarea.addEventListener("click", function () {
- settings.style.display = "none";
- });
- delete_note.addEventListener("click", function () {
- overlay.style.transform = "scale(1)";
- delete_box.classList.add("show");
- settings.style.display = "none";
- });
- yes_button.addEventListener("click", function () {
- title.innerHTML = "New Note";
- textarea.value = "";
- delete_box.classList.remove("show");
- overlay.style.transform = "scale(0)";
- });
- no_button.addEventListener("click", function () {
- delete_box.classList.remove("show");
- overlay.style.transform = "scale(0)";
- });
- var isdown;
- var containerOffset = [];
- container.addEventListener(
- "mousedown",
- function (e) {
- isdown = true;
- containerOffset = [e.pageX - this.offsetLeft, e.pageY - this.offsetTop];
- this.style.opacity = opacityArray[1];
- },
- true
- );
- document.addEventListener(
- "mouseup",
- function () {
- isdown = false;
- },
- true
- );
- document.addEventListener(
- "mousemove",
- function (e) {
- e.preventDefault();
- if (isdown == true) {
- container.style.top = e.clientY - containerOffset[1] + "px";
- container.style.left = e.clientX - containerOffset[0] + "px";
- }
- },
- true
- );
- opacity_content.forEach(c => {
- c.addEventListener("click", function () {
- opacityArray[0] = this.getAttribute("data-opacity");
- container.style.opacity = opacityArray[0];
- settings.style.display = "none";
- });
- });
- document.addEventListener("click", function (e) {
- if (!container.contains(e.target)) {
- settings.style.display = "none";
- container.style.opacity = opacityArray[0];
- }
- });
- color_container_colors.forEach(c => {
- c.addEventListener("mouseover", function () {
- var color = window.getComputedStyle(c).backgroundColor;
- var textareaColor = lighterShade(color);
- colorObject.new.header = color;
- colorObject.new.body = textareaColor;
- sticky_header.style.backgroundColor = color;
- textarea.style.backgroundColor = textareaColor;
- });
- c.addEventListener("mouseout", function () {
- sticky_header.style.backgroundColor = colorObject.old.header;
- textarea.style.backgroundColor = colorObject.old.body;
- });
- c.addEventListener("click", function () {
- colorObject.old.header = colorObject.new.header;
- colorObject.old.body = colorObject.new.body;
- settings.style.display = "none";
- var currActive = document.querySelector(".active");
- currActive.removeChild(currActive.childNodes[0]);
- currActive.classList.remove("active");
- c.classList.add("active");
- c.innerHTML = '<i class="fas fa-check"></i>';
- });
- });
- function lighterShade(v) {
- var colorValue = v
- .split("")
- .filter(c => !isNaN(c))
- .join("")
- .split(" ");
- colorValue = colorValue.map(c => {
- var newNumber = parseInt(c) + 30;
- if (newNumber <= 255) return newNumber;
- else return 255;
- });
- return `rgb(${colorValue[0]},${colorValue[1]},${colorValue[2]})`;
- }
- active.innerHTML = '<i class="fas fa-check"></i>';
- setTimeout(function () {
- notice.style.display = 'none';
- }, 10000)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement