Skip to content

Commit

Permalink
fix condition dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@SDClowen
SDClowen committed May 14, 2024
1 parent 6ae3d78 commit cd8480c
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 18 deletions.
14 changes: 7 additions & 7 deletions app/views/survey-crud.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="mx-auto max-w-2xl">
<form role="form" action="/surveys/{$url}" before="window.generateSurvey()" method="post" data-block-reset="true" data-content=".survey-create-message">
<input type="hidden" name="data"/>
<input type="hidden" name="data" />
{csrf()|noescape}
<div class="survey-create-message fixed bottom-0 right-2 z-10 my-5"></div>
<div class="border-b border-gray-900/10 pb-12">
Expand Down Expand Up @@ -99,25 +99,25 @@
<div x-data="{ current: 1 }">
<div class="inline-flex overflow-hidden mb-3 bg-white border divide-x rounded-lg dark:bg-gray-900 rtl:flex-row-reverse shadow-sm dark:border-gray-700 dark:divide-gray-700">
<a href="javascript:void(0)" class="cursor-default inline-flex items-center px-4 py-1 text-xs font-medium text-gray-600 transition-colors duration-200 sm:text-sm dark:text-gray-300" x-on:click="current = 1" x-bind:class="{ 'text-white bg-blue-600 dark:bg-blue-800': current === 1 }">
<a href="javascript:void(0)" class="cursor-default inline-flex items-center px-4 py-1 text-xs font-medium transition-colors duration-200 sm:text-sm dark:text-gray-300" x-on:click="current = 1" x-bind:class="{ 'text-white bg-blue-600 dark:bg-blue-700': current === 1 }">
<svg class="w-5 h-5 mx-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 22C15.8082 21.9947 14.0267 20.2306 14 18.039V16H9.99996V18.02C9.98892 20.2265 8.19321 22.0073 5.98669 22C3.78017 21.9926 1.99635 20.1999 2.00001 17.9934C2.00367 15.7868 3.79343 14 5.99996 14H7.99996V9.99999H5.99996C3.79343 9.99997 2.00367 8.21315 2.00001 6.00663C1.99635 3.8001 3.78017 2.00736 5.98669 1.99999C8.19321 1.99267 9.98892 3.77349 9.99996 5.97999V7.99999H14V5.99999C14 3.79085 15.7908 1.99999 18 1.99999C20.2091 1.99999 22 3.79085 22 5.99999C22 8.20913 20.2091 9.99999 18 9.99999H16V14H18C20.2091 14 22 15.7909 22 18C22 20.2091 20.2091 22 18 22ZM16 16V18C16 19.1046 16.8954 20 18 20C19.1045 20 20 19.1046 20 18C20 16.8954 19.1045 16 18 16H16ZM5.99996 16C4.89539 16 3.99996 16.8954 3.99996 18C3.99996 19.1046 4.89539 20 5.99996 20C6.53211 20.0057 7.04412 19.7968 7.42043 19.4205C7.79674 19.0442 8.00563 18.5321 7.99996 18V16H5.99996ZM9.99996 9.99999V14H14V9.99999H9.99996ZM18 3.99999C17.4678 3.99431 16.9558 4.2032 16.5795 4.57952C16.2032 4.95583 15.9943 5.46784 16 5.99999V7.99999H18C18.5321 8.00567 19.0441 7.79678 19.4204 7.42047C19.7967 7.04416 20.0056 6.53215 20 5.99999C20.0056 5.46784 19.7967 4.95583 19.4204 4.57952C19.0441 4.2032 18.5321 3.99431 18 3.99999ZM5.99996 3.99999C5.4678 3.99431 4.95579 4.2032 4.57948 4.57952C4.20317 4.95583 3.99428 5.46784 3.99996 5.99999C3.99428 6.53215 4.20317 7.04416 4.57948 7.42047C4.95579 7.79678 5.4678 8.00567 5.99996 7.99999H7.99996V5.99999C8.00563 5.46784 7.79674 4.95583 7.42043 4.57952C7.04412 4.2032 6.53211 3.99431 5.99996 3.99999Z" fill="currentColor"></path>
</svg>
<span class="ml-1">Developing</span>
</a>
<a id="preview" href="javascript:void(0)" class="cursor-default inline-flex items-center px-4 py-1 text-xs font-medium text-gray-600 transition-colors duration-200 sm:text-sm dark:text-gray-300" x-on:click="current = 2" x-bind:class="{ 'text-white bg-blue-600 dark:bg-blue-800': current === 2 }">
<a id="preview" href="javascript:void(0)" class="cursor-default inline-flex items-center px-4 py-1 text-xs font-medium transition-colors duration-200 sm:text-sm dark:text-gray-300" x-on:click="current = 2" x-bind:class="{ 'text-white bg-blue-600 dark:bg-blue-700': current === 2 }">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mx-1 sm:w-6 sm:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
<span class="ml-1">Preview</span>
</a>
</div>
<div class="rounded-lg p-1 shadow-md bg-slate-50 border-slate-100 dark:border-slate-600 dark:bg-slate-700">
<div x-show="current === 1" x-transition class="questions">
{$showIfOnEditMode|noescape}
</div>
<div class="preview-content p-2" x-show="current === 2" x-transition>
</div>
<div class="preview-content p-2" x-show="current === 2" x-transition></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -206,8 +206,8 @@
toolbar: 'undo redo | blocks | bold italic link | forecolor backcolor | image media | ' +
'alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | removeformat | help | code',
setup: function (editor) {
editor.on('change', function () {
setup: function(editor) {
editor.on('change', function() {
tinymce.triggerSave();
})
}
Expand Down
81 changes: 70 additions & 11 deletions public/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,62 @@ $(function () {
`;
}

$(document).on("click", "#condition", (e) => {
const dropdown = $(e.currentTarget).next();
$("#condition-dropdown:not(.hidden)").each((i, ee) => {
if(dropdown.is($(ee)))
return;

$(ee).addClass("hidden")
})

dropdown.toggleClass("hidden")

if (dropdown.hasClass("hidden"))
return false

const parentIndex = $(e.currentTarget).parents("#answer").index()

const questions = generate()
const ul = dropdown.find("ul")
ul.html("")
ul.append(`
<li>
<input checked type="radio" id="first-condition-element" name="condition-${parentIndex}" value="none" class="hidden peer" required />
<label for="first-condition-element" class="inline-flex items-center justify-between w-full p-2 text-gray-500 bg-white border border-transparent rounded-lg cursor-pointer dark:hover:text-gray-300 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
Seçili Değil
</label>
</li>`)

for (const [k, v] of Object.entries(questions)) {
if (v.type == "description")
continue;

ul.append(`<li>
<input type="radio" id="${v.slug}" name="condition-${parentIndex}" value="${v.slug}" class="hidden peer" required />
<label for="${v.slug}" class="inline-flex items-center justify-between w-full p-2 text-gray-500 bg-white border border-transparent rounded-lg cursor-pointer dark:hover:text-gray-300 dark:peer-checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700">
${v.title}
</label>
</li>`)
}
})

const getAnswerComponent = (body) => {
return `
<div id="answer" class="relative mt-2 bg-gray-100 focus:outline-blue-600 rounded-md p-2 dark:bg-gray-700" contenteditable="true">
<button type="button" class="if absolute top-50 right-20 bg-gray-300 dark:bg-gray-600 transition duration-400 rounded-full p-1 inline-flex items-center justify-center text-white hover:bg-gray-400 focus:outline-none">
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M10.962 15.867a2.469 2.469 0 0 1-.69 1.377l-1.029 1.028a2.5 2.5 0 0 1-3.536-3.536l1.029-1.029a2.464 2.464 0 0 1 1.423-.694l1.781-1.781a4.425 4.425 0 0 0-4.619 1.062l-1.028 1.028a4.5 4.5 0 0 0 6.364 6.364l1.029-1.029a4.489 4.489 0 0 0 1.073-4.587zM19.686 4.293a4.511 4.511 0 0 0-6.364 0l-1.029 1.029a4.49 4.49 0 0 0-1.063 4.62l1.779-1.779a2.476 2.476 0 0 1 .7-1.427l1.029-1.029a2.5 2.5 0 0 1 3.536 3.536l-1.029 1.029a2.484 2.484 0 0 1-1.379.693l-1.796 1.794a4.409 4.409 0 0 0 4.587-1.072l1.029-1.029a4.5 4.5 0 0 0 0-6.365z"></path> <path d="M9 16a1 1 0 0 1-.707-1.707l6-6a1 1 0 0 1 1.414 1.414l-6 6A1 1 0 0 1 9 16z"></path> </g></svg>
</button>
<div id="answer" class="relative mt-2 bg-gray-100 focus:outline-blue-600 rounded-md dark:bg-gray-700 flex content-between">
<div class="content w-5/6 p-1 m-1 rounded-md focus:outline-blue-600" contenteditable="true">${body}</div>
<div class="w-1/6 p-2">
<div class="if absolute top-50 right-20" style="display:ruby">
<button type="button" id="condition" class="bg-gray-300 dark:bg-gray-600 transition duration-400 rounded-full p-1 inline-flex items-center justify-center text-white hover:bg-gray-400 focus:outline-none">
<svg fill="currentColor" class="h-3 w-3" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><defs><style>.cls-1{fill:none;}</style></defs><title>align--horizontal-center</title><path d="M24,18H17V14h3a2.0025,2.0025,0,0,0,2-2V8a2.0025,2.0025,0,0,0-2-2H17V2H15V6H12a2.0025,2.0025,0,0,0-2,2v4a2.0025,2.0025,0,0,0,2,2h3v4H8a2.0025,2.0025,0,0,0-2,2v4a2.0025,2.0025,0,0,0,2,2h7v4h2V26h7a2.0025,2.0025,0,0,0,2-2V20A2.0025,2.0025,0,0,0,24,18ZM12,8h8v4H12ZM24,24H8V20H24Z"></path><rect id="_Transparent_Rectangle_" data-name="<Transparent Rectangle>" class="cls-1" width="32" height="32"></rect></g></svg>
</button>
<!-- Dropdown menu -->
<div id="condition-dropdown" class="dropdown hidden absolute right-0 z-20 w-auto origin-top-right bg-white rounded-lg border dark:border-gray-600 shadow-xl dark:bg-gray-800">
<ul class="p-2 space-y-3 text-sm text-gray-700 h-80 min-w-80 overflow-x-auto dark:text-gray-200">
</ul>
</div>
</div>
<button type="button" class="down absolute top-50 right-14 bg-gray-300 dark:bg-gray-600 transition duration-400 rounded-full p-1 inline-flex items-center justify-center text-white hover:bg-gray-400 focus:outline-none">
<svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M19 9L14 14.1599C13.7429 14.4323 13.4329 14.6493 13.089 14.7976C12.7451 14.9459 12.3745 15.0225 12 15.0225C11.6255 15.0225 11.2549 14.9459 10.9109 14.7976C10.567 14.6493 10.2571 14.4323 10 14.1599L5 9" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</button>
Expand All @@ -109,8 +158,7 @@ $(function () {
<button type="button" class="remove absolute top-50 right-2 bg-gray-300 dark:bg-gray-600 transition duration-400 rounded-full p-1 inline-flex items-center justify-center text-white hover:bg-gray-400 focus:outline-none">
<svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
${body}
</div>
</div>
`
}
Expand Down Expand Up @@ -186,10 +234,7 @@ $(function () {
};
const answers = $this.find("#answers #answer");
answers.each(function () {
const clonedDom = $(this).clone()
clonedDom.find(".up").remove()
clonedDom.find(".down").remove()
clonedDom.find(".remove").remove()
const clonedDom = $(this).clone().find("[contenteditable]")

const answerContent = clonedDom.html().trim();
question.answers.push(clearText(answerContent));
Expand Down Expand Up @@ -385,4 +430,18 @@ $(function () {
alert(error.message);
}
});

$("[data-json]").on("click", function () {

const jsonData = $(this).data("json");

const questionTitle = $(this).parent().parent().parent().prev().text();
$("#answers-modal-title").text(questionTitle)

$("#answersModalContent").html("")

jsonData.forEach(element => {
$("#answersModalContent").prepend('<div class="dark:bg-gray-700 bg-gray-50 my-2 text-sm text-gray-900 dark:text-gray-200 p-3 rounded-md">' + element.value + '</div>');
});
})
});

0 comments on commit cd8480c

Please sign in to comment.