first commit
This commit is contained in:
benjibennn
244
resources/views/themes/tailwind/assets/js/app.js
Normal file
244
resources/views/themes/tailwind/assets/js/app.js
Normal file
@@ -0,0 +1,244 @@
|
||||
import Alpine from 'alpinejs'
|
||||
import axios from 'axios';
|
||||
|
||||
window.Alpine = Alpine;
|
||||
window.axios = axios;
|
||||
|
||||
window.url = document.querySelector("meta[name='url']").getAttribute("content");
|
||||
window.csrf = document.querySelector("meta[name='csrf-token']").getAttribute("content");
|
||||
|
||||
/** Adds some simple class replacers, see the following article to learn more:
|
||||
* https://devdojo.com/tnylea/animating-tailwind-transitions-on-page-load
|
||||
*/
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
var replacers = document.querySelectorAll('[data-replace]');
|
||||
for(var i=0; i<replacers.length; i++){
|
||||
let replaceClasses = JSON.parse(replacers[i].dataset.replace.replace(/'/g, '"'));
|
||||
Object.keys(replaceClasses).forEach(function(key) {
|
||||
replacers[i].classList.remove(key);
|
||||
replacers[i].classList.add(replaceClasses[key]);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/********** ALPINE FUNCTIONALITY **********/
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.store('toast', {
|
||||
type: '',
|
||||
message: '',
|
||||
show: false,
|
||||
|
||||
update({ type, message, show }) {
|
||||
this.type = type;
|
||||
this.message = message;
|
||||
this.show = show;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.show = false;
|
||||
}
|
||||
});
|
||||
|
||||
Alpine.store('plan_modal', {
|
||||
open: false,
|
||||
plan_name: 'basic',
|
||||
plan_id: 0,
|
||||
|
||||
switch(plan_id, plan_name) {
|
||||
this.plan_name = plan_name;
|
||||
this.plan_id = plan_id;
|
||||
this.open = true;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.open = false;
|
||||
}
|
||||
});
|
||||
|
||||
Alpine.store('viewApiKey', {
|
||||
open: false,
|
||||
id: '',
|
||||
name: '',
|
||||
key: '',
|
||||
|
||||
actionClicked(id, name, key) {
|
||||
this.open = true;
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.key = key;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
Alpine.store('editApiKey', {
|
||||
open: false,
|
||||
id: '',
|
||||
name: '',
|
||||
key: '',
|
||||
|
||||
actionClicked(id, name, key) {
|
||||
this.open = true;
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.key = key;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
Alpine.store('deleteApiKey', {
|
||||
open: false,
|
||||
id: '',
|
||||
name: '',
|
||||
key: '',
|
||||
|
||||
actionClicked(id, name, key) {
|
||||
this.open = true;
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
this.key = key;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
Alpine.store('confirmCancel', {
|
||||
open: false,
|
||||
|
||||
openModal() {
|
||||
this.open = true;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.open = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Alpine.store('uploadModal', {
|
||||
open: false,
|
||||
|
||||
openModal() {
|
||||
this.open = true;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.open = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Alpine.start();
|
||||
/********** END ALPINE FUNCTIONALITY **********/
|
||||
|
||||
/********** NOTIFICATION FUNCTIONALITY **********/
|
||||
|
||||
var markAsRead = document.getElementsByClassName("mark-as-read");
|
||||
var removedNotifications = 0;
|
||||
var unreadNotifications = markAsRead.length;
|
||||
for (var i = 0; i < markAsRead.length; i++) {
|
||||
markAsRead[i].addEventListener('click', function(){
|
||||
var notificationId = this.dataset.id;
|
||||
var notificationListId = this.dataset.listid;
|
||||
|
||||
var notificationRequest = new XMLHttpRequest();
|
||||
notificationRequest.open("POST", url + "/notification/read/" + notificationId, true);
|
||||
notificationRequest.onreadystatechange = function () {
|
||||
if (notificationRequest.readyState != 4 || notificationRequest.status != 200) return;
|
||||
var response = JSON.parse(notificationRequest.responseText);
|
||||
document.getElementById('notification-li-' + response.listid).remove();
|
||||
removedNotifications += 1;
|
||||
var notificationCount = document.getElementById('notification-count');
|
||||
if(notificationCount){
|
||||
notificationCount.innerHTML = parseInt(notificationCount.innerHTML) - 1;
|
||||
}
|
||||
if(removedNotifications >= unreadNotifications){
|
||||
if(document.getElementById('notification-count')){
|
||||
document.getElementById('notification-count').classList.add('opacity-0');
|
||||
}
|
||||
}
|
||||
};
|
||||
notificationRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
notificationRequest.send("_token=" + csrf + "&listid=" + notificationListId );
|
||||
});
|
||||
}
|
||||
|
||||
/********** END NOTIFICATION FUNCTIONALITY **********/
|
||||
|
||||
/********** START TOAST FUNCTIONALITY **********/
|
||||
|
||||
window.popToast = function(type, message){
|
||||
Alpine.store('toast').update({ type, message, show: true });
|
||||
|
||||
setTimeout(function(){
|
||||
document.getElementById('toast_bar').classList.remove('w-full');
|
||||
document.getElementById('toast_bar').classList.add('w-0');
|
||||
}, 150);
|
||||
// After 4 seconds hide the toast
|
||||
setTimeout(function(){
|
||||
Alpine.store('toast').update({ type, message, show: false });
|
||||
|
||||
setTimeout(function(){
|
||||
document.getElementById('toast_bar').classList.remove('w-0');
|
||||
document.getElementById('toast_bar').classList.add('w-full');
|
||||
}, 300);
|
||||
}, 4000);
|
||||
}
|
||||
|
||||
/********** END TOAST FUNCTIONALITY **********/
|
||||
|
||||
/********** Start Billing Checkout Functionality ***********/
|
||||
|
||||
/***** Payment Success Functionality */
|
||||
|
||||
window.checkoutComplete = function(data) {
|
||||
var checkoutId = data.checkout.id;
|
||||
|
||||
Paddle.Order.details(checkoutId, function(data) {
|
||||
// Order data, downloads, receipts etc... available within 'data' variable.
|
||||
document.getElementById('fullscreenLoaderMessage').innerText = 'Finishing Up Your Order';
|
||||
document.getElementById('fullscreenLoader').classList.remove('hidden');
|
||||
axios.post('/checkout', { _token: csrf, checkout_id: data.checkout.checkout_id })
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
if(parseInt(response.data.status) == 1){
|
||||
let queryParams = '';
|
||||
if(parseInt(response.data.guest) == 1){
|
||||
queryParams = '?complete=true';
|
||||
}
|
||||
window.location = '/checkout/welcome' + queryParams;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.checkoutUpdate = function(data){
|
||||
if(data.checkout.completed){
|
||||
popToast('success', 'Your payment info has been successfully updated.');
|
||||
} else {
|
||||
popToast('danger', 'Sorry, there seems to be a problem updating your payment info');
|
||||
}
|
||||
}
|
||||
|
||||
window.checkoutCancel = function(data){
|
||||
let subscriptionId = data.checkout.id;
|
||||
axios.post('/cancel', { _token: csrf, id: subscriptionId })
|
||||
.then(function (response) {
|
||||
if(parseInt(response.data.status) == 1){
|
||||
window.location = '/settings/subscription';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/***** End Payment Success Functionality */
|
||||
|
||||
/********** End Billing Checkout Functionality ***********/
|
||||
|
||||
/********** Switch Plans Button Click ***********/
|
||||
|
||||
window.switchPlans = function (plan_id, plan_name) {
|
||||
Alpine.store('plan_modal').switch(plan_id, plan_name);
|
||||
};
|
||||
|
||||
/********** Switch Plans Button Click ***********/
|
||||
69
resources/views/themes/tailwind/assets/sass/app.scss
Normal file
69
resources/views/themes/tailwind/assets/sass/app.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
@tailwind base;
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
[x-cloak]{
|
||||
display:none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width:100%;
|
||||
}
|
||||
.wave {
|
||||
animation: wave 3s linear;
|
||||
animation-iteration-count:infinite;
|
||||
fill: #0069ff;
|
||||
}
|
||||
|
||||
#wave2 {
|
||||
animation-duration:5s;
|
||||
animation-direction: reverse;
|
||||
opacity: .6
|
||||
}
|
||||
#wave3 {
|
||||
animation-duration: 7s;
|
||||
opacity:.3;
|
||||
}
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(80%);
|
||||
opacity:.6;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(80%);
|
||||
opacity:.6;
|
||||
}
|
||||
90% {
|
||||
transform: translateY(10%) ;
|
||||
opacity:.6;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%) scale(1.5);
|
||||
stroke-width:0.2;
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
@keyframes wave {
|
||||
from {transform: translateX(0%);}
|
||||
to {transform: translateX(-100%);}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
@apply form-input w-full;
|
||||
}
|
||||
|
||||
/****** Form Input CLASSES **********/
|
||||
|
||||
.form-input, .form-textarea, .form-select {
|
||||
@apply appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out focus:outline-none focus:ring focus:ring-opacity-30 focus:ring-wave-500 focus:border-wave-400;
|
||||
}
|
||||
|
||||
.form-select{
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-position: right .5rem center;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding:.5rem 2.5rem .5rem .75rem;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
Reference in New Issue
Block a user