자바스크립트 active 해제 하는 방법 채택완료
sDiDis
2년 전
조회 1,872
출처: https://codepen.io/yashnarola/pen/MWmPKbz
막대바에서 숫자(값) .sycro-progress-stepped-item 이 부분을 hover나 active 상태가 아닌
기본 상태에서도 표시되게 변경하고 싶은데 어렵습니다....
바 막대크기 변경되는 기능은 유지한채로 글자만 디폴트에서도 표시되게 하고 싶은데 어떻게 수정을 해야 할까요?
</p>
<p>(function () {</p>
<p> var DIV = "div";</p>
<p> var BUTTON = "button";</p>
<p> var SPAN = "span";</p>
<p> var P = "p";</p>
<p> var A = "a";</p>
<p> </p>
<p> var defaults = {</p>
<p> title: "Ticket Categories",</p>
<p> catagories: [</p>
<p> {</p>
<p> name: "Remote Support",</p>
<p> value: 66,</p>
<p> color: "#ff6384",</p>
<p> },</p>
<p> {</p>
<p> name: "Contract Work",</p>
<p> value: 14,</p>
<p> color: "#ff9f40",</p>
<p> },</p>
<p> {</p>
<p> name: "Network Project",</p>
<p> value: 8,</p>
<p> color: "#ffcd56",</p>
<p> },</p>
<p> {</p>
<p> name: "Regular Maintenance",</p>
<p> value: 6,</p>
<p> color: "#4bc0c0",</p>
<p> },</p>
<p> {</p>
<p> name: "string",</p>
<p> value: 6,</p>
<p> color: "#36a2eb",</p>
<p> },</p>
<p> ],</p>
<p> };</p>
<p> </p>
<p> window.addEventListener("load", function () {</p>
<p> initSteppedProgress();</p>
<p> });</p>
<p> </p>
<p> function initSteppedProgress() {</p>
<p> [].forEach.call(</p>
<p> document.querySelectorAll("[data-stepped-bar]"),</p>
<p> function (steppedProgress, index) {</p>
<p> if (steppedProgress) {</p>
<p> var valueTotal = 0;</p>
<p> var data;</p>
<p> if (steppedProgress.getAttribute("data-stepped-bar")) {</p>
<p> data = JSON.parse(steppedProgress.getAttribute("data-stepped-bar"));</p>
<p> } else {</p>
<p> data = defaults;</p>
<p> }</p>
<p> </p>
<p> //#region: Markup</p>
<p> </p>
<p> var title = createElementWithClass(P, "syncro-card-title");</p>
<p> title.textContent = data.title;</p>
<p> </p>
<p> var step = createElementWithClass(DIV, "syncro-progress-stepped");</p>
<p> </p>
<p> var row = createElementWithClass(DIV, "syncro-row");</p>
<p> </p>
<p> data.catagories.forEach(function (catagory, i) {</p>
<p> valueTotal += catagory.value;</p>
<p> });</p>
<p> </p>
<p> data.catagories.forEach(function (catagory, i) {</p>
<p> stepItem = createElementWithClass(</p>
<p> DIV,</p>
<p> "syncro-progress-stepped-item"</p>
<p> );</p>
<p> stepItem.setAttribute(</p>
<p> "data-id",</p>
<p> "progress-stepped-item-" + index + "-" + i</p>
<p> );</p>
<p> stepItem.textContent = catagory.value;</p>
<p> stepItem.style.width = (catagory.value / valueTotal) * 100 + "%";</p>
<p> stepItem.style.backgroundColor = catagory.color;</p>
<p> </p>
<p> step.appendChild(stepItem);</p>
<p> </p>
<p> var dot = createElementWithClass(SPAN, "syncro-dot");</p>
<p> dot.style.backgroundColor = catagory.color;</p>
<p> </p>
<p> var category = createElementWithClass(SPAN, "syncro-category-name");</p>
<p> category.textContent = catagory.name;</p>
<p> </p>
<p> var btn = createElementWithClass(BUTTON, "syncro-btn");</p>
<p> btn.setAttribute(</p>
<p> "data-target",</p>
<p> "progress-stepped-item-" + index + "-" + i</p>
<p> );</p>
<p> btn.appendChild(dot);</p>
<p> btn.appendChild(category);</p>
<p> </p>
<p> var col = createElementWithClass(DIV, "syncro-col-auto");</p>
<p> col.appendChild(btn);</p>
<p> </p>
<p> row.appendChild(col);</p>
<p> });</p>
<p> </p>
<p> var cardBody = createElementWithClass(DIV, "syncro-card-body");</p>
<p> cardBody.appendChild(title);</p>
<p> cardBody.appendChild(step);</p>
<p> cardBody.appendChild(row);</p>
<p> </p>
<p> var card = createElementWithClass(DIV, "syncro-card");</p>
<p> card.appendChild(cardBody);</p>
<p> </p>
<p> var markup = createElementWithClass(DIV);</p>
<p> markup.appendChild(card);</p>
<p> </p>
<p> steppedProgress.innerHTML = markup.innerHTML;</p>
<p> </p>
<p> //#endregion: Markup</p>
<p> </p>
<p> //#region:</p>
<p> [].forEach.call(</p>
<p> steppedProgress.querySelectorAll(".syncro-progress-stepped-item"),</p>
<p> function (el) {</p>
<p> el.addEventListener("mouseenter", (e) => {</p>
<p> toggleActive(e, el);</p>
<p> });</p>
<p> el.addEventListener("mouseleave", (e) => {</p>
<p> toggleActive(e, el);</p>
<p> });</p>
<p> }</p>
<p> );</p>
<p> [].forEach.call(</p>
<p> steppedProgress.querySelectorAll(".syncro-btn"),</p>
<p> function (el) {</p>
<p> el.addEventListener("click", function () {</p>
<p> const dataID = el.getAttribute("data-target");</p>
<p> var targetElm = document.querySelector(</p>
<p> '[data-id="' + dataID + '"]'</p>
<p> );</p>
<p> </p>
<p> if (targetElm.classList.contains("active")) {</p>
<p> targetElm.classList.remove("active");</p>
<p> } else {</p>
<p> [].forEach.call(</p>
<p> steppedProgress.querySelectorAll(</p>
<p> ".syncro-progress-stepped-item"</p>
<p> ),</p>
<p> function (el) {</p>
<p> el.classList.remove("active");</p>
<p> }</p>
<p> );</p>
<p> targetElm.classList.add("active");</p>
<p> }</p>
<p> });</p>
<p> }</p>
<p> );</p>
<p> //#endregion</p>
<p> }</p>
<p> }</p>
<p> );</p>
<p> }</p>
<p> </p>
<p> function toggleActive(e, el) {</p>
<p> if (e.type === "mouseenter") {</p>
<p> if (!el.classList.contains("active")) {</p>
<p> el.classList.add("active");</p>
<p> }</p>
<p> } else if (e.type === "mouseleave") {</p>
<p> if (el.classList.contains("active")) {</p>
<p> el.classList.remove("active");</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> </p>
<p> function createElementWithClass(element, className = "") {</p>
<p> var ele = document.createElement(element);</p>
<p> if (className) {</p>
<p> var classList = className.split(" ");</p>
<p> classList.forEach(function (value, index) {</p>
<p> ele.classList.add(value);</p>
<p> });</p>
<p> }</p>
<p> return ele;</p>
<p> }</p>
<p>})();</p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인