commi
This commit is contained in:
torun23
parent
6c38236438
commit
605a538315
|
|
@ -1,8 +1,9 @@
|
|||
|
||||
|
||||
body {
|
||||
background-color: rgb(240, 235, 248);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
|
|
@ -33,14 +34,13 @@ body {
|
|||
#preview-btn {
|
||||
margin-right: 10px;
|
||||
background-color: rgb(103, 58, 183);
|
||||
border-color: rgb(103, 58, 183);
|
||||
border-color: #007bff;
|
||||
border-radius: 100%;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#preview-btn i {
|
||||
|
|
@ -53,10 +53,12 @@ body {
|
|||
left: -60px;
|
||||
top: 24px;
|
||||
z-index: 1000;
|
||||
border-radius: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(103, 58, 183);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.form-section {
|
||||
background-color: white;
|
||||
width: 56%;
|
||||
|
|
@ -134,47 +136,38 @@ body {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
.add-option-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
margin-top: 11px;
|
||||
font-size: 0.9em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ui-state-highlight {
|
||||
background: rgb(240, 235, 248) !important;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
width: 56%;
|
||||
margin-left: 240px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.btn-required {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 100;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* Toggle button styles */
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Toggle Switch CSS */
|
||||
/* Toggle Switch CSS */
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 36px;
|
||||
height: 20.4px;
|
||||
width: 34px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
|
|
@ -192,19 +185,19 @@ body {
|
|||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 15.6px;
|
||||
width: 15.6px;
|
||||
left: 2.4px;
|
||||
bottom: 2.4px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
background-color: rgb(103, 58, 183);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(15.6px);
|
||||
transform: translateX(14px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ $(document).ready(function() {
|
|||
let index = 1;
|
||||
let activeSection = null;
|
||||
|
||||
// Add option function
|
||||
function addOption(type, container) {
|
||||
let optionIndex = container.children().length + 1;
|
||||
let optionHtml;
|
||||
|
|
@ -24,6 +25,7 @@ $(document).ready(function() {
|
|||
container.append(optionHtml);
|
||||
}
|
||||
|
||||
// Form section function
|
||||
function createFormSection() {
|
||||
let newSection = `
|
||||
<div class="form-section" data-index="${index}">
|
||||
|
|
@ -37,16 +39,13 @@ $(document).ready(function() {
|
|||
<option value="checkboxes">Checkboxes</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="required-toggle">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
||||
</div>
|
||||
<div class="options-container"></div>
|
||||
<div class="toggle-container">
|
||||
<span class="status">Required</span>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" class="toggleButton">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$('#form-container').append(newSection);
|
||||
|
|
@ -66,19 +65,11 @@ $(document).ready(function() {
|
|||
left: position.left - buttonWidth - 47 + 'px',
|
||||
top: position.top + activeSection.height() / 2 - buttonHeight / 2 + 'px'
|
||||
});
|
||||
} else {
|
||||
let containerPosition = $('#form-container').position();
|
||||
let buttonWidth = $('#add-section-btn').outerWidth();
|
||||
let buttonHeight = $('#add-section-btn').outerHeight();
|
||||
|
||||
$('#add-section-btn').css({
|
||||
position: 'absolute',
|
||||
left: containerPosition.left + 'px',
|
||||
top: containerPosition.top + $('#form-container').height() + 20 + 'px'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Event handler is triggered
|
||||
// creates a new form section;sets it as active;repositions the add section button
|
||||
$('#add-section-btn').on('click', function() {
|
||||
createFormSection();
|
||||
$('.form-section').removeClass('active');
|
||||
|
|
@ -87,6 +78,7 @@ $(document).ready(function() {
|
|||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// It updates the options container based on the selected type, adding the necessary input fields or buttons.
|
||||
$(document).on('change', '.custom-select', function() {
|
||||
let type = $(this).val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
|
|
@ -100,16 +92,20 @@ $(document).ready(function() {
|
|||
container.append('<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>');
|
||||
} else {
|
||||
addOption(type, container);
|
||||
$(this).closest('.form-section').append('<button class="btn btn-secondary btn-sm add-option-btn">Add Option</button>');
|
||||
$(this).closest('.form-section').append('<button class="btn btn-secondary add-option-btn">Add Option</button>');
|
||||
}
|
||||
});
|
||||
|
||||
// add option event handler
|
||||
// adds a new option to the options container and updates the option numbers
|
||||
$(document).on('click', '.add-option-btn', function() {
|
||||
let type = $(this).closest('.form-section').find('.custom-select').val();
|
||||
let container = $(this).closest('.form-section').find('.options-container');
|
||||
addOption(type, container);
|
||||
// refreshOptionNumbers(container);
|
||||
});
|
||||
|
||||
// removes the section;updates the active section;repositions add section button
|
||||
$(document).on('click', '.delete-section-icon', function() {
|
||||
let section = $(this).closest('.form-section');
|
||||
let prevSection = section.prev('.form-section');
|
||||
|
|
@ -129,19 +125,19 @@ $(document).ready(function() {
|
|||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// delete option
|
||||
$(document).on('click', '.delete-option-icon', function() {
|
||||
let option = $(this).closest('.option');
|
||||
let container = option.closest('.options-container');
|
||||
option.remove();
|
||||
K });
|
||||
|
||||
// Event handler for required toggle button
|
||||
$(document).on('click', '.required-toggle', function() {
|
||||
$(this).closest('.form-section').toggleClass('required');
|
||||
});
|
||||
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
// Preview button functionality
|
||||
$('#preview-btn').on('click', function() {
|
||||
let previewWindow = window.open('', '_blank');
|
||||
let previewContent = `
|
||||
|
|
@ -171,6 +167,7 @@ $(document).ready(function() {
|
|||
previewContent += '</div>';
|
||||
let type = $(this).find('.custom-select').val();
|
||||
let optionsContainer = $(this).find('.options-container');
|
||||
|
||||
if (type === 'multiple-choice') {
|
||||
optionsContainer.find('.option').each(function() {
|
||||
previewContent += `
|
||||
|
|
@ -213,6 +210,14 @@ $(document).ready(function() {
|
|||
previewWindow.document.close();
|
||||
});
|
||||
|
||||
// Activate the section;repositions add section button
|
||||
$(document).on('click', '.form-section', function() {
|
||||
$('.form-section').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
activeSection = $(this);
|
||||
positionAddSectionButton();
|
||||
});
|
||||
|
||||
$('#form-container').sortable({
|
||||
placeholder: 'ui-state-highlight',
|
||||
start: function (event, ui) {
|
||||
|
|
@ -224,13 +229,4 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
$('#form-container').disableSelection();
|
||||
|
||||
$(document).on('change', '.toggleButton', function() {
|
||||
let status = $(this).prop('checked');
|
||||
if (status) {
|
||||
$(this).closest('.form-section').addClass('required-section');
|
||||
} else {
|
||||
$(this).closest('.form-section').removeClass('required-section');
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue