Added multiple functionalities

shubhamagarwal16 · Sep 15, 2019 · 3b31212 · 3b31212
1 parent a82dacd
commit 3b31212
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 13 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,14 +1,38 @@
 .mainContainer {
-  width: 200px;
+  min-width: 200px;
   min-height: 200px;
-  border: 1px solid black;
+  border: 1px solid #999;
+  border-radius: 4px;
+  margin: 3px;
+  box-sizing: border-box;
 }
 .containerHeader {
-  margin: 5px;
+  padding: 5px;
   border: 1px solid #aaa;
   background-color: #ccc;
+  border-radius: 4px 4px 0px 0px;
 }
 .inputArea {
-  width: 200px;
   min-height: 200px;
+  padding: 5px;
+}
+.btn2 {
+  border: 1px solid #eee;
+  padding: 5px 5px;
+  margin: 2px;
+  background-color: #ccf;
+  border-radius: 3px;
+  min-width: 21px;
+  cursor: pointer;
+}
+.charCountContainer {
+  float: right;
+}
+.charCountContainer .charCountInput {
+  max-width: 55px;
+}
+.charCountContainer .charCountCkBox {
+  vertical-align: middle;
+  margin: 0px;
+  margin-right: 4px;
 }
diff --git a/index.html b/index.html
@@ -6,9 +6,11 @@
   <body>
     <form method="GET" action="">
       <textarea name="description" SAEditor></textarea>
+      <input type="submit" value="Submit" />
     </form>
     <form method="GET" action="">
       <textarea name="description" SAEditor></textarea>
+      <input type="submit" value="Submit" />
     </form>
     <script src="./js/main.js"></script>
   </body>

diff --git a/js/main.js b/js/main.js
@@ -1,3 +1,4 @@
+const metaData = [];
 const editorMain = document.querySelectorAll("[SAEditor]");
 console.log(editorMain, editorMain.length);
 
@@ -24,19 +25,26 @@ function editorUI(editor, index = 0) {
   mainContainer.setAttribute("id", `editorMainContainer${index}`);
   //   mainContainer.setAttribute("contentEditable", "");
   mainContainer.classList.add("mainContainer");
-  addHeader(mainContainer);
+  addHeader(mainContainer, index);
 
   const inputArea = document.createElement("div");
   inputArea.setAttribute("contentEditable", "");
+  inputArea.appendChild(
+    document.createTextNode("A simple text without errors")
+  );
   inputArea.classList.add("inputArea");
+  inputArea.addEventListener("keyup", () => {
+    editor.innerHTML = inputArea.innerHTML;
+    console.log(editor.innerHTML, inputArea.innerHTML);
+  });
   mainContainer.appendChild(inputArea);
 
   editor.insertAdjacentElement("afterend", mainContainer);
 
   console.log("here");
 }
 
-function addHeader(editor) {
+function addHeader(editor, index) {
   if (!editor) {
     console.error("[addHeader] Main container not found!");
     return;
@@ -47,18 +55,20 @@ function addHeader(editor) {
   //   ========================= BOLD BUTTON =============================
   const boldBtn = document.createElement("button");
   boldBtn.innerHTML = "B";
-  boldBtn.classList.add("btn");
-  boldBtn.classList.add("btn-secondary");
+  boldBtn.classList.add("btn2");
+  //   boldBtn.classList.add("btn-secondary");
   boldBtn.classList.add("boldBtn");
+  boldBtn.setAttribute("title", "Bold");
   boldBtn.addEventListener("click", event => performClickAction(event, "bold"));
   editorHeader.appendChild(boldBtn);
 
   //   ========================= ITALIC BUTTON =============================
   const italicBtn = document.createElement("button");
   italicBtn.innerHTML = "I";
-  italicBtn.classList.add("btn");
-  italicBtn.classList.add("btn-secondary");
+  italicBtn.classList.add("btn2");
+  //   italicBtn.classList.add("btn-secondary");
   italicBtn.classList.add("italicBtn");
+  italicBtn.setAttribute("title", "Italic");
   italicBtn.addEventListener("click", event =>
     performClickAction(event, "italic")
   );
@@ -67,18 +77,87 @@ function addHeader(editor) {
   //   ========================= UNDERLINE BUTTON =============================
   const underlineBtn = document.createElement("button");
   underlineBtn.innerHTML = "U";
-  underlineBtn.classList.add("btn");
-  underlineBtn.classList.add("btn-secondary");
+  underlineBtn.classList.add("btn2");
+  //   underlineBtn.classList.add("btn-secondary");
   underlineBtn.classList.add("underlineBtn");
+  underlineBtn.setAttribute("title", "Underline");
   underlineBtn.addEventListener("click", event =>
     performClickAction(event, "underline")
   );
   editorHeader.appendChild(underlineBtn);
 
+  //   ========================= LINK BUTTON =============================
+  const linkBtn = document.createElement("button");
+  linkBtn.innerHTML = "A";
+  linkBtn.classList.add("btn2");
+  //   linkBtn.classList.add("btn-secondary");
+  linkBtn.classList.add("LinkBtn");
+  linkBtn.setAttribute("title", "Link");
+  linkBtn.addEventListener("click", event => {
+    const getLink = window.prompt("Enter the link/url", "#");
+    if (getLink) performClickAction(event, "link", getLink);
+  });
+  editorHeader.appendChild(linkBtn);
+
+  //   ========================= Character Length =============================
+  const charCountContainer = document.createElement("span");
+  charCountContainer.classList.add("charCountContainer");
+
+  const charCountCkBox = document.createElement("input");
+  charCountCkBox.type = "checkbox";
+  charCountCkBox.classList.add("charCountCkBox");
+  charCountCkBox.setAttribute("title", "Check for limiting character count");
+  charCountContainer.appendChild(charCountCkBox);
+
+  const charCountInput = document.createElement("input");
+  charCountInput.type = "number";
+  charCountInput.classList.add("charCountInput");
+  charCountInput.setAttribute("disabled", true);
+  charCountInput.style.webkitAppearance = "none";
+  charCountInput.setAttribute("title", "Enter character count");
+
+  charCountInput.addEventListener("change", event => {
+    console.log(event.target.value);
+    metaData[index] = {};
+    metaData[index].charLength = event.target.value;
+  });
+  charCountCkBox.addEventListener("change", () => {
+    charCountInput.toggleAttribute("disabled");
+    // charCountInput.target.value = 0;
+    // metaData[index].charLength = 0;
+  });
+
+  charCountCkBox.insertAdjacentElement("afterend", charCountInput);
+
+  editorHeader.appendChild(charCountContainer);
+
   editor.appendChild(editorHeader);
 }
 
-function performClickAction(e, action) {
+function performClickAction(e, action, value = "") {
   e.preventDefault();
   console.log({ action });
+  let text = "";
+  if (!window.getselection) {
+    text = window.getSelection().toString();
+  } else if (document.selection && document.selection.type != "Control") {
+    text = document.selection.createRange().text;
+  }
+  if (!text) return;
+  console.log(text);
+
+  switch (action) {
+    case "bold":
+      document.execCommand("bold", false, true);
+      break;
+    case "italic":
+      document.execCommand("italic", false, true);
+      break;
+    case "underline":
+      document.execCommand("underline", false, true);
+      break;
+    case "link":
+      document.execCommand("createLink", false, value);
+      break;
+  }
 }