saliance ux

index.html

<div class="sidebar">
  <div class="sidebar-item" data-item-id="item1">Item 1</div>
  <div class="sidebar-item" data-item-id="item2">Item 2</div>
  <div class="sidebar-item" data-item-id="item3">Item 3</div>
  <div class="sidebar-item" data-item-id="item4">Item 4</div>
  <!-- Add more items as needed -->
</div>
<div class="content">
  <!-- Sentences will be populated here -->
</div>

saliance-ux.markdown

saliance ux

A Pen by Faris Chebib on CodePen.

License.

script.js

document.addEventListener("DOMContentLoaded", function () {
  const documentJson = {
    sentences: [
      {
        id: "sentence1",
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      },
      {
        id: "sentence2",
        text:
          "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        id: "sentence3",
        text:
          "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      },
      {
        id: "sentence4",
        text:
          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
      },
      {
        id: "sentence5",
        text:
          "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      }
    ]
  };

  const sentenceMappings = {
    item1: {
      sentences: [{
        "sentence1": 0.5,
        "sentence3": 1.0
      }],
      color: "rgba(255, 215, 0, 0.5)", // Gold color with alpha
      weight: "bold"
    },
    item2: {
      sentences: [{
        "sentence1": 0.5,
        "sentence2": 1.0
      }],
      color: "rgba(255, 99, 71, 0.5)", // Tomato color with alpha
      weight: "normal"
    },
    item3: {
      sentences: [{
        "sentence3": 0.8,
        "sentence4": 0.3
      }],
      color: "rgba(155, 199, 1, 0.5)", 
      weight: "normal"
    },
    item4: {
      sentences: [{
        "sentence2": 0.85,
        "sentence4": 0.60
      }],
      color: "rgba(205, 199, 141, 0.5)",
      weight: "normal"
    }
  };

  // Populate the content area with sentences
  const contentDiv = document.querySelector(".content");
  documentJson.sentences.forEach((sentence) => {
    const p = document.createElement("p");
    p.setAttribute("data-sentence-id", sentence.id);
    p.textContent = sentence.text;
    contentDiv.appendChild(p);
  });

  // Add event listeners to sidebar items
  const sidebarItems = document.querySelectorAll(".sidebar-item");

 sidebarItems.forEach((item) => {
  item.addEventListener("mouseenter", () => {
    const mapping = sentenceMappings[item.dataset.itemId];
    
    item.style.backgroundColor = mapping.color;

    Object.entries(mapping.sentences[0]).forEach(([sentenceId, opacity]) => {
      const sentence = document.querySelector(`[data-sentence-id="${sentenceId}"]`);
      
      // Extract RGB values from the color and apply the new opacity
      let rgb = mapping.color.match(/\d+/g).slice(0, 3);
      let rgba = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;

      sentence.style.backgroundColor = rgba;
      sentence.style.fontWeight = mapping.weight;
    });
  });

  item.addEventListener("mouseleave", () => {
    const mapping = sentenceMappings[item.dataset.itemId];
    item.style.backgroundColor = "#f0f0f0";
    
    Object.keys(mapping.sentences[0]).forEach(sentenceId => {
      const sentence = document.querySelector(`[data-sentence-id="${sentenceId}"]`);
      sentence.style.backgroundColor = "";
      sentence.style.fontWeight = "";
    });
  });
});
 
  sidebarItems.forEach((item) => {
    item.addEventListener("mouseenter", () => {
      const mapping = sentenceMappings[item.dataset.itemId];
      item.style.backgroundColor = mapping.color;
      mapping.sentences.forEach((sentenceId) => {
        const sentence = document.querySelector(
          `[data-sentence-id="${sentenceId}"]`
        );
        sentence.style.backgroundColor = mapping.color;
        sentence.style.fontWeight = mapping.weight;
      });
    });

    item.addEventListener("mouseleave", () => {
      const mapping = sentenceMappings[item.dataset.itemId];
      item.style.backgroundColor = "#f0f0f0";
      mapping.sentences.forEach((sentenceId) => {
        const sentence = document.querySelector(
          `[data-sentence-id="${sentenceId}"]`
        );
        sentence.style.backgroundColor = "";
        sentence.style.fontWeight = "";
      });
    });
  });
});

style.css

.main-container {
    display: flex;
    flex-wrap: wrap;
}

.sidebar {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
    padding: 20px;
}

.content {
    flex: 3;
    padding: 20px;
}

.sidebar-item {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.sidebar-item:hover {
    background-color: #f0f0f0; /* Change as per your color scheme */
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }
    .content {
        width: 100%;
    }
}