Skip to content

L
laravel-adminpanel
Commit c95669b7 authored by Vipul Basapati's avatar Vipul Basapati
Browse files
Options

refactored add custom url button in admin.js and added loader

parent 7d6c9fee
Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 28 deletions
public/js/backend/admin.js
View file @ c95669b7
......@@ -43,7 +43,9 @@ var Backend = {}; // common variable used in all the files of the backend
},
ajaxrequest: function (url, method, data, csrf, callback) {
console.log(url);
var request = new XMLHttpRequest();
var loadingIcon = jQuery(".loading");
if (window.XMLHttpRequest) {
// code for modern browsers
request = new XMLHttpRequest();
......@@ -52,6 +54,15 @@ var Backend = {}; // common variable used in all the files of the backend
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open(method, url, true);
request.onloadstart = function() {
console.log('been here');
loadingIcon.show();
};
request.onloadend = function() {
console.log('been there');
loadingIcon.hide();
};
request.setRequestHeader('X-CSRF-TOKEN', csrf);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
if ("post" === method.toLowerCase() || "patch" === method.toLowerCase()) {
......@@ -378,6 +389,60 @@ var Backend = {}; // common variable used in all the files of the backend
}
},
Menu:
{
selectors: {
menuItemContainer: jQuery("#menu-items"),
menuItemsData: jQuery(".menu-items-field"),
addCustomUrlButton: jQuery(".show-modal"),
modal: jQuery("#showMenuModal"),
document: jQuery("document"),
addCustomUrlForm: "#menu-add-custom-url",
formUrl: ""
},
init: function () {
this.addHandlers();
},
addHandlers: function () {
var context = this;
var formName = "_add_custom_url_form";
this.selectors.menuItemContainer.nestable({
callback: function(l, e){
this.selectors.menuItemsData.val(JSON.stringify($(l).nestable('serialise')));
},
json: this.selectors.menuItemsData.val(),
includeContent:true,
scroll: false,
maxDepth: 10
});
this.selectors.addCustomUrlButton.click(function() {
let title = context.selectors.addCustomUrlButton.attr("data-header");
context.selectors.modal.find(".modal-title").html(title);
context.selectors.modal.modal("show");
// setTimeout(function() {
callback = {
success: function (request) {
console.log(request);
if (request.status >= 200 && request.status < 400) {
// Success!
context.selectors.modal.find(".modal-body").html(request.responseText);
jQuery(document).find(context.selectors.modal).find(".view-permission-block").remove();
jQuery(document).find(context.selectors.addCustomUrlForm).removeClass("hidden");
}
},
error: function (request) {
//Do Something
}
}
Backend.Utils.ajaxrequest(context.selectors.formUrl + "/" + formName, "get", {}, Backend.Utils.csrf, callback);
});
}
},
/**
* Tiny MCE
......
resources/views/backend/layouts/app.blade.php
View file @ c95669b7
......@@ -40,8 +40,129 @@
'csrfToken' => csrf_token(),
]); ?>
</script>
<style type="text/css">
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body class="skin-{{ config('backend.theme') }} {{ config('backend.layout') }}">
<div class="loading" style="display:none"></div>
@include('includes.partials.logged-in-as')
<div class="wrapper">
......
resources/views/backend/menus/form.blade.php
View file @ c95669b7
......@@ -58,34 +58,8 @@
<script type="text/javascript">
var formName = '_add_custom_url_form';
var lastId = null;
$('#menu-items').nestable({
callback: function(l, e){
$(".menu-items-field").val(JSON.stringify($(l).nestable('serialise')));
},
json: $(".menu-items-field").val(),
includeContent:true,
scroll: false,
maxDepth: 10
});
$(".show-modal").click(function(){
$("#showMenuModal").find(".modal-dialog .modal-content .modal-header .modal-title").html($(this).attr("data-header"));
formName = $(this).attr("data-form");
$("#showMenuModal").modal("show");
setTimeout(function() {
$(document).find("#showMenuModal .view-permission-block").remove();
$(document).find("#menu-add-custom-url").removeClass("hidden");
}, 500);
});
$("#showMenuModal").on('show.bs.modal', function () {
$.get("{{ route('admin.menus.getform') }}/" + formName, function(data, status){
if(status == "success") {
$("#showMenuModal").find(".modal-dialog .modal-content .modal-body").html(data);
}
else {
$("#showMenuModal").find(".modal-dialog .modal-content .modal-body").html("Something went wrong! Please try again later.");
}
});
});
Backend.Menu.selectors.formUrl = "{{route('admin.menus.getform')}}";
Backend.Menu.init();
var getNewId = function(str) {
var arr = str.match(/"id":[0-9]+/gi);
if(arr) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023