diff --git a/app/Http/Controllers/IndonesiaController.php b/app/Http/Controllers/IndonesiaController.php new file mode 100644 index 00000000..bbc503d1 --- /dev/null +++ b/app/Http/Controllers/IndonesiaController.php @@ -0,0 +1,30 @@ +paginate(10); + + return response()->json($data); + } + + public function regency($id){ + $data = Regency::where('province_id', $id)->where('name', 'LIKE', '%'.request('q').'%')->paginate(10); + + return response()->json($data); + } + + public function district($id){ + $data = District::where('regency_id', $id)->where('name', 'LIKE', '%'.request('q').'%')->paginate(10); + + return response()->json($data); + } +} diff --git a/app/Models/District.php b/app/Models/District.php new file mode 100644 index 00000000..6d79b097 --- /dev/null +++ b/app/Models/District.php @@ -0,0 +1,12 @@ + .select2-results__options + .select2-results__option--highlighted { + background-color: #900c3e !important; + color: #fff !important; +} + .gender-select-menu, .select-menu { height: 100%; @@ -820,225 +864,75 @@ form p { ==================================================*/ /****************************************** - /* DROP IMAGE + /* SLIDER ==================================================*/ -.container-image { - padding: 28px; - border-radius: 25px; - background: #fff; -} - -.drop-area { - width: 125%; - height: 300px; +.slider-container { + position: relative; + max-width: 60%; + overflow: hidden; display: flex; flex-direction: column; - align-items: center; justify-content: center; - background: white; - padding: 20px; - border-radius: 1.5rem; - text-align: center; - color: #999; - cursor: pointer; - border: 2px dashed #999; - position: relative; - overflow: hidden; + align-items: center; } -.drop-area-title { - font-size: 1.2rem; - font-weight: 600; - margin-bottom: 16px; - pointer-events: none; -} - -.drop-area-text { - font-size: 0.7rem; -} - -.thumbnail, -.img-name { - position: absolute; +.slider { display: flex; - justify-content: center; - align-items: center; + + transition: transform 0.5s ease-in-out; +} + +.slide { + flex: 0 0 100%; +} + +.slider h3 { + margin: 1rem 0; +} + +.slide img { width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 5; + height: auto; } -.thumbnail { - height: 100%; + +.dots { display: flex; - justify-content: center; align-items: center; - object-fit: cover; - z-index: 6; + width: fit-content; + margin-top: 1rem; } -.drop-area:hover .img-name { - opacity: 1; +.dot { + display: inline-block; + width: 10px; + height: 10px; + margin: 0 5px; + background-color: #bbb; + border-radius: 50%; + cursor: pointer; } -.clickable-button { - padding: 10px 20px; - margin-top: 3%; - background-color: #007bff; - color: #fff; +.prev, +.next { + font-size: 1rem; + background: none; border: none; - border-radius: 5px; cursor: pointer; - font-size: 14px; - font-weight: 500; - width: 8rem; - transition: background-color 0.3s ease-in-out; + margin: 0 1rem; } -.clickable-button:hover { - background-color: #0056b3; +.dot.active { + background-color: #900c3e; +} + +#webcamKtp { + height: 30vh; + border-radius: 1rem; +} +#webcamEkyc { + height: 30vh; + border-radius: 1rem; } /****************************************** - /* END DROP IMAGE - ==================================================*/ - -/****************************************** - /* preloader - ==================================================*/ -#preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #fff; - z-index: 10000; -} - -#status, -.preloader { - top: 50%; - left: 50%; - position: absolute; -} - -#status { - width: 100px; - height: 100px; - background-repeat: no-repeat; - background-position: center; - margin: -50px 0 0 -50px; -} - -.preloader { - height: 40px; - width: 40px; - margin-top: -20px; - margin-left: -20px; -} - -.preloader:before { - content: ""; - display: block; - position: absolute; - left: -1px; - top: -1px; - height: 100%; - width: 100%; - -webkit-animation: rotation 1s linear infinite; - animation: rotation 1s linear infinite; - border: 2px solid #900c3f; - border-top: 2px solid transparent; - border-radius: 100%; -} - -.preloader > .icon { - position: absolute; - top: 50%; - left: 50%; - height: 25px; - width: 10.6px; - margin-top: -12.5px; - margin-left: -5.3px; - -webkit-animation: wink 1s ease-in-out infinite alternate; - animation: wink 1s ease-in-out infinite alternate; -} - -@media only screen and (min-width: 768px) { - .preloader { - height: 60px; - width: 60px; - margin-top: -30px; - margin-left: -30px; - } - .preloader:before { - left: -2px; - top: -2px; - border-width: 2px; - } - .preloader > .icon { - height: 37.5px; - width: 15.9px; - margin-top: -18.75px; - margin-left: -7.95px; - } -} - -@media only screen and (min-width: 1200px) { - .preloader { - height: 60px; - width: 60px; - margin-top: -30px; - margin-left: -30px; - } - .preloader > .icon { - height: 50px; - width: 21.2px; - margin-top: -25px; - margin-left: -10.6px; - } -} - -@-webkit-keyframes rotation { - from { - -webkit-transform: rotate(0); - transform: rotate(0); - } - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -@keyframes rotation { - from { - -webkit-transform: rotate(0); - transform: rotate(0); - } - to { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } -} - -@-webkit-keyframes wink { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes wink { - from { - opacity: 0; - } - to { - opacity: 1; - } -} -/****************************************** - /* preloader + /* END SLIDER ==================================================*/ diff --git a/public/assets/js/login_register/app.js b/public/assets/js/login_register/app.js index e41abd92..469ae5cd 100644 --- a/public/assets/js/login_register/app.js +++ b/public/assets/js/login_register/app.js @@ -1,6 +1,6 @@ /****************************************** - * ANIMATION BTN SIGN IN & SIGN UP - ******************************************/ + * ANIMATION BTN SIGN IN & SIGN UP + ******************************************/ const sign_in_btn = document.querySelector("#sign-in-btn"); const sign_up_btn = document.querySelector("#sign-up-btn"); const container = document.querySelector(".container"); @@ -13,120 +13,323 @@ sign_in_btn.addEventListener("click", () => { container.classList.remove("sign-up-mode"); }); /****************************************** - * END ANIMATION BTN SIGN IN & SIGN UP - ******************************************/ + * END ANIMATION BTN SIGN IN & SIGN UP + ******************************************/ /****************************************** - * PRELOADER - ******************************************/ -setTimeout(function() { + * PRELOADER + ******************************************/ +setTimeout(function () { $('#preloader').fadeToggle(); - }, 200); +}, 200); /****************************************** - * END PRELOADER - ******************************************/ + * END PRELOADER + ******************************************/ /****************************************** - * MULTIPLE FORM - ******************************************/ + * MULTIPLE FORM + ******************************************/ var form_1 = document.querySelector(".form_1"); - var form_2 = document.querySelector(".form_2"); - var form_3 = document.querySelector(".form_3"); - var form_4 = document.querySelector(".form_4"); +var form_2 = document.querySelector(".form_2"); +var form_3 = document.querySelector(".form_3"); +var form_4 = document.querySelector(".form_4"); - var form_1_btns = document.querySelector(".form_1_btns"); - var form_2_btns = document.querySelector(".form_2_btns"); - var form_3_btns = document.querySelector(".form_3_btns"); - var form_4_btns = document.querySelector(".form_4_btns"); +var form_1_btns = document.querySelector(".form_1_btns"); +var form_2_btns = document.querySelector(".form_2_btns"); +var form_3_btns = document.querySelector(".form_3_btns"); +var form_4_btns = document.querySelector(".form_4_btns"); - var form_1_next_btn = document.querySelector(".form_1_btns .btn_next"); - var form_2_back_btn = document.querySelector(".form_2_btns .btn_back"); - var form_2_next_btn = document.querySelector(".form_2_btns .btn_next"); - var form_3_back_btn = document.querySelector(".form_3_btns .btn_back"); - var form_3_next_btn = document.querySelector(".form_3_btns .btn_next"); - var form_4_back_btn = document.querySelector(".form_4_btns .btn_back"); +var form_1_next_btn = document.querySelector(".form_1_btns .btn_next"); +var form_2_back_btn = document.querySelector(".form_2_btns .btn_back"); +var form_2_next_btn = document.querySelector(".form_2_btns .btn_next"); +var form_3_back_btn = document.querySelector(".form_3_btns .btn_back"); +var form_3_next_btn = document.querySelector(".form_3_btns .btn_next"); +var form_4_back_btn = document.querySelector(".form_4_btns .btn_back"); - var form_2_progessbar = document.querySelector(".form_2_progessbar"); - var form_3_progessbar = document.querySelector(".form_3_progessbar"); - var form_4_progessbar = document.querySelector(".form_4_progessbar"); +var form_2_progessbar = document.querySelector(".form_2_progessbar"); +var form_3_progessbar = document.querySelector(".form_3_progessbar"); +var form_4_progessbar = document.querySelector(".form_4_progessbar"); - var btn_done = document.querySelector(".btn_done"); - var modal_wrapper = document.querySelector(".modal_wrapper"); - var shadow = document.querySelector(".shadow"); +var btn_done = document.querySelector(".btn_done"); +var modal_wrapper = document.querySelector(".modal_wrapper"); +var shadow = document.querySelector(".shadow"); - form_1_next_btn.addEventListener("click", function() { - form_1.style.display = "none"; - form_2.style.display = "block"; +form_1_next_btn.addEventListener("click", function () { + form_1.style.display = "none"; + form_2.style.display = "block"; - form_1_btns.style.display = "none"; - form_2_btns.style.display = "flex"; + form_1_btns.style.display = "none"; + form_2_btns.style.display = "flex"; - form_2_progessbar.classList.add("active"); - }); + form_2_progessbar.classList.add("active"); +}); - form_2_back_btn.addEventListener("click", function() { - form_1.style.display = "block"; - form_2.style.display = "none"; +form_2_back_btn.addEventListener("click", function () { + form_1.style.display = "block"; + form_2.style.display = "none"; - form_1_btns.style.display = "flex"; - form_2_btns.style.display = "none"; + form_1_btns.style.display = "flex"; + form_2_btns.style.display = "none"; - form_2_progessbar.classList.remove("active"); - }); + form_2_progessbar.classList.remove("active"); +}); - form_2_next_btn.addEventListener("click", function() { - form_2.style.display = "none"; - form_3.style.display = "block"; +form_2_next_btn.addEventListener("click", function () { + form_2.style.display = "none"; + form_3.style.display = "block"; - form_3_btns.style.display = "flex"; - form_2_btns.style.display = "none"; + form_3_btns.style.display = "flex"; + form_2_btns.style.display = "none"; - form_3_progessbar.classList.add("active"); - }); + form_3_progessbar.classList.add("active"); +}); - form_3_next_btn.addEventListener("click", function() { - form_3.style.display = "none"; - form_4.style.display = "block"; +form_3_next_btn.addEventListener("click", function () { + form_3.style.display = "none"; + form_4.style.display = "block"; - form_4_btns.style.display = "flex"; - form_3_btns.style.display = "none"; + form_4_btns.style.display = "flex"; + form_3_btns.style.display = "none"; - form_4_progessbar.classList.add("active"); - }); + form_4_progessbar.classList.add("active"); +}); - form_3_back_btn.addEventListener("click", function() { - form_2.style.display = "block"; - form_3.style.display = "none"; +form_3_back_btn.addEventListener("click", function () { + form_2.style.display = "block"; + form_3.style.display = "none"; - form_3_btns.style.display = "none"; - form_2_btns.style.display = "flex"; + form_3_btns.style.display = "none"; + form_2_btns.style.display = "flex"; - form_3_progessbar.classList.remove("active"); - }); + form_3_progessbar.classList.remove("active"); +}); - form_4_back_btn.addEventListener("click", function() { - form_3.style.display = "block"; - form_4.style.display = "none"; +form_4_back_btn.addEventListener("click", function () { + form_3.style.display = "block"; + form_4.style.display = "none"; - form_4_btns.style.display = "none"; - form_3_btns.style.display = "flex"; + form_4_btns.style.display = "none"; + form_3_btns.style.display = "flex"; - form_4_progessbar.classList.remove("active"); - }); + form_4_progessbar.classList.remove("active"); +}); - btn_done.addEventListener("click", function() { - modal_wrapper.classList.add("active"); - }) +btn_done.addEventListener("click", function () { + modal_wrapper.classList.add("active"); +}) - shadow.addEventListener("click", function() { - modal_wrapper.classList.remove("active"); - }) +shadow.addEventListener("click", function () { + modal_wrapper.classList.remove("active"); +}) /****************************************** - * MULTIPLE FORM END - ******************************************/ \ No newline at end of file + * MULTIPLE FORM END + ******************************************/ + + +/****************************************** + * KTP & E-KYC CAMERA + ******************************************/ +document.addEventListener("DOMContentLoaded", function () { + const videoElementKtp = document.getElementById("webcamKtp"); + const captureButtonKtp = document.getElementById("captureButtonKtp"); + const fotoInputKtp = document.getElementById("fotoKtp"); + + const videoElementEkyc = document.getElementById("webcamEkyc"); + const captureButtonEkyc = document.getElementById("captureButtonEkyc"); + const fotoInputEkyc = document.getElementById("fotoEkyc"); + + navigator.mediaDevices + .getUserMedia({ + video: true + }) + .then(function (stream) { + videoElementKtp.srcObject = stream; + }) + .catch(function (error) { + console.error("Gagal mengakses kamera: ", error); + }); + + captureButtonKtp.addEventListener("click", function () { + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + canvas.width = videoElementKtp.videoWidth; + canvas.height = videoElementKtp.videoHeight; + context.drawImage(videoElementKtp, 0, 0, canvas.width, canvas.height); + const fotoDataUrl = canvas.toDataURL("image/jpeg"); + + // Set nilai foto input hidden dengan data URL + fotoInputKtp.value = fotoDataUrl; + + // Tampilkan preview foto + const fotoPreview = document.getElementById("foto-preview"); + fotoPreview.innerHTML = 'Foto'; + + // // Hentikan akses kamera setelah mengambil foto + // stream.getTracks().forEach((track) => track.stop()); + }); + + navigator.mediaDevices + .getUserMedia({ + video: true + }) + .then(function (stream) { + videoElementEkyc.srcObject = stream; + }) + .catch(function (error) { + console.error("Gagal mengakses kamera: ", error); + }); + + captureButtonEkyc.addEventListener("click", function () { + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + canvas.width = videoElementEkyc.videoWidth; + canvas.height = videoElementEkyc.videoHeight; + context.drawImage(videoElementEkyc, 0, 0, canvas.width, canvas.height); + const fotoDataUrl = canvas.toDataURL("image/jpeg"); + + // Set nilai foto input hidden dengan data URL + fotoInputEkyc.value = fotoDataUrl; + + // Tampilkan preview foto + const fotoPreview = document.getElementById("foto-preview"); + fotoPreview.innerHTML = 'Foto'; + + // // Hentikan akses kamera setelah mengambil foto + // stream.getTracks().forEach((track) => track.stop()); + }); +}); +/****************************************** + * END KTP & E-KYC CAMERA + ******************************************/ + + +/****************************************** + * SLIDE KTP & E-KYC FORM 3 + ******************************************/ +let slideIndex = 1; +showSlide(slideIndex); + +function plusSlide(n) { + showSlide(slideIndex += n); +} + +function currentSlide(n) { + showSlide(slideIndex = n); +} + +function showSlide(n) { + let slides = document.querySelectorAll('.slide'); + let dots = document.querySelectorAll('.dot'); + + if (n > slides.length) { + slideIndex = 1; + } + + if (n < 1) { + slideIndex = slides.length; + } + + for (let i = 0; i < slides.length; i++) { + slides[i].style.transform = 'translateX(-' + ((slideIndex - 1) * 100) + '%)'; + } + + for (let i = 0; i < dots.length; i++) { + dots[i].classList.remove('active'); + } + + dots[slideIndex - 1].classList.add('active'); +} +/****************************************** + * END SLIDE KTP & E-KYC FORM 3 + ******************************************/ + + +/****************************************** + * DROPDOWN SELECT GENDER + ******************************************/ +$(document).ready(function () { + $('#gender-select').select2(); +}); +/****************************************** + * END DROPDOWN SELECT GENDER + ******************************************/ + + + + +/****************************************** + * AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN + ******************************************/ +$(document).ready(function () { + + $("#selectProv").select2({ + placeholder: 'Pilih Provinsi', + ajax: { + url: $("#selectProv").data("url"), + processResults: function ({ + data + }) { + return { + results: $.map(data, function (item) { + return { + id: item.id, + text: item.name + } + }) + } + } + } + }); + + $("#selectProv").change(function () { + let id = $('#selectProv').val(); + + $("#selectRegenc").select2({ + placeholder: 'Pilih Wilayah', + ajax: { + url: "/selectRegenc/" + id, + processResults: function ({ + data + }) { + return { + results: $.map(data, function (item) { + return { + id: item.id, + text: item.name + } + }) + } + } + } + }); + }); + $("#selectRegenc").change(function () { + let id = $('#selectRegenc').val(); + + $("#selectDistric").select2({ + placeholder: 'Pilih Kota', + ajax: { + url: "/selectDistric/" + id, + processResults: function ({ data }) { + return { + results: $.map(data, function (item) { + return { + id: item.id, + text: item.name + } + }) + } + } + } + }); + }); +}); +/****************************************** + * END AJAX DROPDOWN SELECT PROVINSI, KABUPATEN & KECAMATAN + ******************************************/ diff --git a/public/assets/js/login_register/main.js b/public/assets/js/login_register/main.js deleted file mode 100644 index 85cb8b19..00000000 --- a/public/assets/js/login_register/main.js +++ /dev/null @@ -1,110 +0,0 @@ -(function ($) { - "use strict"; - - // Spinner - var spinner = function () { - setTimeout(function () { - if ($('#spinner').length > 0) { - $('#spinner').removeClass('show'); - } - }, 1); - }; - spinner(); - - - // Initiate the wowjs - new WOW().init(); - - - // Sticky Navbar - $(window).scroll(function () { - if ($(this).scrollTop() > 300) { - $('.sticky-top').addClass('shadow-sm').css('top', '0px'); - } else { - $('.sticky-top').removeClass('shadow-sm').css('top', '-100px'); - } - }); - - - // Back to top button - $(window).scroll(function () { - if ($(this).scrollTop() > 300) { - $('.back-to-top').fadeIn('slow'); - } else { - $('.back-to-top').fadeOut('slow'); - } - }); - $('.back-to-top').click(function () { - $('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo'); - return false; - }); - - - // Facts counter - $('[data-toggle="counter-up"]').counterUp({ - delay: 10, - time: 2000 - }); - - - // Roadmap carousel - $(".roadmap-carousel").owlCarousel({ - autoplay: true, - smartSpeed: 1000, - margin: 25, - loop: true, - dots: false, - nav: true, - navText : [ - '', - '' - ], - responsive: { - 0:{ - items:1 - }, - 576:{ - items:2 - }, - 768:{ - items:3 - }, - 992:{ - items:4 - }, - 1200:{ - items:5 - } - } - }); - - - // Testimonials carousel - $(".testimonial-carousel").owlCarousel({ - autoplay: true, - smartSpeed: 1000, - margin: 25, - loop: true, - center: true, - dots: false, - nav: true, - navText : [ - '', - '' - ], - responsive: { - 0:{ - items:1 - }, - 768:{ - items:2 - }, - 992:{ - items:3 - } - } - }); - - -})(jQuery); - diff --git a/public/assets/js/login_register/script.js b/public/assets/js/login_register/script.js index 0ef4f1af..711eacdc 100644 --- a/public/assets/js/login_register/script.js +++ b/public/assets/js/login_register/script.js @@ -1,315 +1,70 @@ /****************************************** - * DROP AND DRAG IMAGE - ******************************************/ -const dropArea = document.querySelector('.drop-area'); - const inputFile = document.getElementById('input-file'); - - dropArea.addEventListener('click', function() { - inputFile.click() - }) - - inputFile.addEventListener('change', function() { - const file = this.files[0]; - - if (file.type.startsWith('image/')) { - if (file.size < 2000000) { - create_thumbnail(file); - } else { - alert('Image size must be less than 2MB'); - } - } else { - alert('Must be image'); - } - }) - - - dropArea.addEventListener('dragover', function(e) { - e.preventDefault(); - this.style.borderStyle = 'solid'; - - const h3 = this.querySelector('h3'); - h3.textContent = 'Release here to upload image'; - }) - - - - dropArea.addEventListener('drop', function(e) { - e.preventDefault(); - - inputFile.files = e.dataTransfer.files; - const file = e.dataTransfer.files[0]; - - if (file.type.startsWith('image/')) { - if (file.size < 2000000) { - create_thumbnail(file); - } else { - alert('Image size must be less than 2MB'); - } - } else { - alert('Must be image'); - } - }) - - - - const command = ['dragleave', 'dragend'] - - command.forEach(item => { - dropArea.addEventListener(item, function() { - this.style.borderStyle = 'dashed'; - - const h3 = this.querySelector('h3'); - h3.textContent = 'Drag and drop or click here to select image'; - }) - }) - - - function create_thumbnail(file) { - const img = document.querySelectorAll('.thumbnail'); - const imgName = document.querySelectorAll('.img-name'); - img.forEach(item => item.remove()); - imgName.forEach(item => item.remove()); - - const reader = new FileReader(); - reader.onload = () => { - const url = reader.result; - const img = document.createElement('img'); - img.src = url; - img.className = 'thumbnail' - const span = document.createElement('span'); - span.className = 'img-name'; - span.textContent = file.name; - dropArea.appendChild(img); - dropArea.appendChild(span); - dropArea.style.borderColor = 'transparent'; - } - reader.readAsDataURL(file); - } -/****************************************** - * END DROP AND DRAG IMAGE - ******************************************/ - - - -/****************************************** - * DROPDOOWN INPUT - ******************************************/ -const optionMenu = document.querySelector(".select-menu"), - selectBtn = optionMenu.querySelector(".select-btn"), - options = optionMenu.querySelectorAll(".option"), - sBtn_text = optionMenu.querySelector(".sBtn-text"); - - selectBtn.addEventListener("click", () => - optionMenu.classList.toggle("active") - ); - - options.forEach((option) => { - option.addEventListener("click", () => { - let selectedOption = option.querySelector(".option-text").innerText; - sBtn_text.innerText = selectedOption; - - optionMenu.classList.remove("active"); - }); - }); - -/****************************************** - * DROPDOOWN INPUT END - ******************************************/ - - - - -/****************************************** - * PROGRESS BAR MULTIPLE FORM - ******************************************/ + * PROGRESS BAR MULTIPLE FORM + ******************************************/ "use strict"; - //jQuery time - var current_fs, next_fs, previous_fs; //fieldsets - var left, opacity, scale; //fieldset properties which we will animate - var animating; //flag to prevent quick multi-click glitches +//jQuery time +var current_fs, next_fs, previous_fs; //fieldsets +var left, opacity, scale; //fieldset properties which we will animate +var animating; //flag to prevent quick multi-click glitches - $(".next").click(function() { - if (animating) return false; - animating = true; +$(".next").click(function () { + if (animating) return false; + animating = true; - current_fs = $(this).parent(); - next_fs = $(this).parent().next(); + current_fs = $(this).parent(); + next_fs = $(this).parent().next(); - //activate next step on progressbar using the index of next_fs - $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); + //activate next step on progressbar using the index of next_fs + $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); - //show the next fieldset - next_fs.show(); - //hide the current fieldset with style - current_fs.animate({ - opacity: 0 - }, { - step: function(now, mx) { - //as the opacity of current_fs reduces to 0 - stored in "now" - //1. scale current_fs down to 80% - scale = 0 - (0 - now) * 0; - //2. bring next_fs from the right(50%) - left = (now * 50) + "%"; - //3. increase opacity of next_fs to 1 as it moves in - opacity = 1 - now; - current_fs.css({ - 'transform': 'scale(' + scale + ')' - }); - next_fs.css({ - 'left': left, - 'opacity': opacity - }); - }, - duration: 500, - complete: function() { - current_fs.hide(); - animating = false; - }, - //this comes from the custom easing plugin - easing: 'easeOutQuint' - }); - }); + //show the next fieldset + next_fs.show(); - $(".previous").click(function() { - if (animating) return false; - animating = true; +}); - current_fs = $(this).parent(); - previous_fs = $(this).parent().prev(); +$(".previous").click(function () { + if (animating) return false; + animating = true; - //de-activate current step on progressbar - $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); + current_fs = $(this).parent(); + previous_fs = $(this).parent().prev(); - //show the previous fieldset - previous_fs.show(); - //hide the current fieldset with style - current_fs.animate({ - opacity: 0 - }, { - step: function(now, mx) { - //as the opacity of current_fs reduces to 0 - stored in "now" - //1. scale previous_fs from 80% to 100% - scale = 0.8 + (1 - now) * 0.2; - //2. take current_fs to the right(50%) - from 0% - left = ((1 - now) * 50) + "%"; - //3. increase opacity of previous_fs to 1 as it moves in - opacity = 1 - now; - current_fs.css({ - 'left': left - }); - previous_fs.css({ - 'transform': 'scale(' + scale + ')', - 'opacity': opacity - }); - }, - duration: 500, - complete: function() { - current_fs.hide(); - animating = false; - }, - //this comes from the custom easing plugin - easing: 'easeOutQuint' - }); - }); - - $(".submit").click(function() { - return false; - }) - - $(document).ready(function() { - $('select').material_select(); - }); - - var counter = 0; - var orderCounter = 1; - - function newKeyword() { - - $(".keywords").append( - '
\r\n
\r\n \r\n \r\n