자바스크립트 active 해제 하는 방법 채택완료
출처: 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개
채택된 답변
+20 포인트
2년 전
css 마지막 줄에
.syncro-progress-stepped-item{ font-size: 12px; color: #fff; border-radius: 5px !important; -webkit-transform: scaleY(1.25); transform: scaleY(1.25); }
이거 넣으세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
채택
답변대기
채택
채택
채택
답변대기
답변대기
답변대기
채택
채택
채택
채택
채택
채택
채택
답변대기