merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Overlay Loader Added To Velocity

This commit is contained in:
devansh bawari 2021-07-14 17:36:22 +05:30
parent fcdf0636a8
commit 252c44081a
7 changed files with 157 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.editorconfig
View File

@ -6,6 +6,7 @@ end_of_line = lf
insert_final_newline = false insert_final_newline = false
indent_style = space indent_style = space
indent_size = 4 indent_size = 4
quote_type = single
trim_trailing_whitespace = true trim_trailing_whitespace = true
[*.md] [*.md]

2
packages/Webkul/Velocity/publishable/assets/js/velocity.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/Webkul/Velocity/publishable/assets/mix-manifest.json
View File

@ -1,5 +1,5 @@
{ {
"/js/velocity.js": "/js/velocity.js?id=3d77b8601fe8d17ef0bf", "/js/velocity.js": "/js/velocity.js?id=3e3ec5f958646d31a4b8",
"/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd", "/css/velocity-admin.css": "/css/velocity-admin.css?id=4322502d80a0e4a0affd",
"/css/velocity.css": "/css/velocity.css?id=170046c99c8d10e332ef" "/css/velocity.css": "/css/velocity.css?id=170046c99c8d10e332ef"
} }

31
packages/Webkul/Velocity/src/Resources/assets/js/UI/components/overlay-loader.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="overlay-loader" v-if="isLoaderOpen">
<div id="loader" class="cp-spinner cp-round"></div>
</div>
</template>
<script>
export default {
props: ['id', 'isOpen'],
computed: {
isLoaderOpen () {
this.addClassToBody();
return this.isOpen;
}
},
methods: {
addClassToBody () {
var body = document.querySelector("body");
if (this.isOpen) {
body.classList.add("modal-open");
} else {
body.classList.remove("modal-open");
}
}
}
}
</script>

234
packages/Webkul/Velocity/src/Resources/assets/js/app.js vendored
View File

@ -1,28 +1,42 @@
import Vue from "vue"; /**
import accounting from "accounting"; * Main imports.
import VueCarousel from "vue-carousel"; */
import VueToast from "vue-toast-notification"; import 'lazysizes';
import "vue-toast-notification/dist/index.css"; import Vue from 'vue';
import de from "vee-validate/dist/locale/de"; import axios from 'axios';
import ar from "vee-validate/dist/locale/ar"; import accounting from 'accounting';
import fa from "vee-validate/dist/locale/fa"; import VueCarousel from 'vue-carousel';
import fr from "vee-validate/dist/locale/fr"; import VueToast from 'vue-toast-notification';
import nl from "vee-validate/dist/locale/nl"; import 'vue-toast-notification/dist/index.css';
import tr from "vee-validate/dist/locale/tr"; import VeeValidate, { Validator } from 'vee-validate';
import VeeValidate, { Validator } from "vee-validate";
import axios from "axios";
import "lazysizes";
/**
* Lang imports.
*/
import ar from 'vee-validate/dist/locale/ar';
import de from 'vee-validate/dist/locale/de';
import fa from 'vee-validate/dist/locale/fa';
import fr from 'vee-validate/dist/locale/fr';
import nl from 'vee-validate/dist/locale/nl';
import tr from 'vee-validate/dist/locale/tr';
/**
* Window assignation.
*/
window.Vue = Vue;
window.axios = axios; window.axios = axios;
window.eventBus = new Vue();
window.Carousel = VueCarousel;
window.VeeValidate = VeeValidate; window.VeeValidate = VeeValidate;
window.jQuery = window.$ = require("jquery"); window.jQuery = window.$ = require('jquery');
window.BootstrapSass = require("bootstrap-sass"); window.BootstrapSass = require('bootstrap-sass');
/**
* Vue use.
*/
Vue.use(VueToast); Vue.use(VueToast);
Vue.use(VueCarousel); Vue.use(VueCarousel);
Vue.use(BootstrapSass); Vue.use(BootstrapSass);
Vue.prototype.$http = axios;
Vue.use(VeeValidate, { Vue.use(VeeValidate, {
dictionary: { dictionary: {
ar: ar, ar: ar,
@ -34,61 +48,49 @@ Vue.use(VeeValidate, {
} }
}); });
Vue.filter("currency", function(value, argument) { /**
* Filters and prototype.
*/
Vue.prototype.$http = axios;
Vue.filter('currency', function(value, argument) {
return accounting.formatMoney(value, argument); return accounting.formatMoney(value, argument);
}); });
window.Vue = Vue; /**
window.Carousel = VueCarousel; * UI components.
**/
// UI components Vue.component('vue-slider', require('vue-slider-component'));
Vue.component("vue-slider", require("vue-slider-component")); Vue.component('mini-cart', require('./UI/components/mini-cart'));
Vue.component("mini-cart", require("./UI/components/mini-cart")); Vue.component('modal-component', require('./UI/components/modal'));
Vue.component("modal-component", require("./UI/components/modal")); Vue.component('add-to-cart', require('./UI/components/add-to-cart'));
Vue.component("add-to-cart", require("./UI/components/add-to-cart")); Vue.component('star-ratings', require('./UI/components/star-rating'));
Vue.component("star-ratings", require("./UI/components/star-rating")); Vue.component('quantity-btn', require('./UI/components/quantity-btn'));
Vue.component("quantity-btn", require("./UI/components/quantity-btn")); Vue.component('proceed-to-checkout', require('./UI/components/proceed-to-checkout'));
Vue.component( Vue.component('sidebar-component', require('./UI/components/sidebar'));
"proceed-to-checkout", Vue.component('product-card', require('./UI/components/product-card'));
require("./UI/components/proceed-to-checkout") Vue.component('wishlist-component', require('./UI/components/wishlist'));
); Vue.component('carousel-component', require('./UI/components/carousel'));
Vue.component("sidebar-component", require("./UI/components/sidebar")); Vue.component('child-sidebar', require('./UI/components/child-sidebar'));
Vue.component("product-card", require("./UI/components/product-card")); Vue.component('card-list-header', require('./UI/components/card-header'));
Vue.component("wishlist-component", require("./UI/components/wishlist")); Vue.component('magnify-image', require('./UI/components/image-magnifier'));
Vue.component("carousel-component", require("./UI/components/carousel")); Vue.component('compare-component', require('./UI/components/product-compare'));
Vue.component("child-sidebar", require("./UI/components/child-sidebar")); Vue.component('shimmer-component', require('./UI/components/shimmer-component'));
Vue.component("card-list-header", require("./UI/components/card-header")); Vue.component('responsive-sidebar', require('./UI/components/responsive-sidebar'));
Vue.component("magnify-image", require("./UI/components/image-magnifier")); Vue.component('product-quick-view', require('./UI/components/product-quick-view'));
Vue.component("compare-component", require("./UI/components/product-compare")); Vue.component('product-quick-view-btn', require('./UI/components/product-quick-view-btn'));
Vue.component( Vue.component('recently-viewed', require('./UI/components/recently-viewed'));
"shimmer-component", Vue.component('product-collections', require('./UI/components/product-collections'));
require("./UI/components/shimmer-component") Vue.component('hot-category', require('./UI/components/hot-category'));
); Vue.component('popular-category', require('./UI/components/popular-category'));
Vue.component( Vue.component('velocity-overlay-loader', require('./UI/components/overlay-loader'));
"responsive-sidebar",
require("./UI/components/responsive-sidebar")
);
Vue.component(
"product-quick-view",
require("./UI/components/product-quick-view")
);
Vue.component(
"product-quick-view-btn",
require("./UI/components/product-quick-view-btn")
);
Vue.component("recently-viewed", require("./UI/components/recently-viewed"));
Vue.component(
"product-collections",
require("./UI/components/product-collections")
);
Vue.component("hot-category", require("./UI/components/hot-category"));
Vue.component("popular-category", require("./UI/components/popular-category"));
window.eventBus = new Vue();
/**
* Start from here.
**/
$(document).ready(function() { $(document).ready(function() {
// define a mixin object // define a mixin object
Vue.mixin(require("./UI/components/trans")); Vue.mixin(require('./UI/components/trans'));
Vue.mixin({ Vue.mixin({
data: function() { data: function() {
@ -97,17 +99,17 @@ $(document).ready(function() {
navContainer: false, navContainer: false,
headerItemsCount: 0, headerItemsCount: 0,
sharedRootCategories: [], sharedRootCategories: [],
responsiveSidebarTemplate: "", responsiveSidebarTemplate: '',
responsiveSidebarKey: Math.random(), responsiveSidebarKey: Math.random(),
baseUrl: document baseUrl: document
.querySelector("script[src$='velocity.js']") .querySelector("script[src$='velocity.js']")
.getAttribute("baseUrl") .getAttribute('baseUrl')
}; };
}, },
methods: { methods: {
redirect: function(route) { redirect: function(route) {
route ? (window.location.href = route) : ""; route ? (window.location.href = route) : '';
}, },
debounceToggleSidebar: function(id, { target }, type) { debounceToggleSidebar: function(id, { target }, type) {
@ -116,28 +118,28 @@ $(document).ready(function() {
toggleSidebar: function(id, { target }, type) { toggleSidebar: function(id, { target }, type) {
if ( if (
Array.from(target.classList)[0] == "main-category" || Array.from(target.classList)[0] == 'main-category' ||
Array.from(target.parentElement.classList)[0] == Array.from(target.parentElement.classList)[0] ==
"main-category" 'main-category'
) { ) {
let sidebar = $(`#sidebar-level-${id}`); let sidebar = $(`#sidebar-level-${id}`);
if (sidebar && sidebar.length > 0) { if (sidebar && sidebar.length > 0) {
if (type == "mouseover") { if (type == 'mouseover') {
this.show(sidebar); this.show(sidebar);
} else if (type == "mouseout") { } else if (type == 'mouseout') {
this.hide(sidebar); this.hide(sidebar);
} }
} }
} else if ( } else if (
Array.from(target.classList)[0] == "category" || Array.from(target.classList)[0] == 'category' ||
Array.from(target.classList)[0] == "category-icon" || Array.from(target.classList)[0] == 'category-icon' ||
Array.from(target.classList)[0] == "category-title" || Array.from(target.classList)[0] == 'category-title' ||
Array.from(target.classList)[0] == "category-content" || Array.from(target.classList)[0] == 'category-content' ||
Array.from(target.classList)[0] == "rango-arrow-right" Array.from(target.classList)[0] == 'rango-arrow-right'
) { ) {
let parentItem = target.closest("li"); let parentItem = target.closest('li');
if (target.id || parentItem.id.match("category-")) { if (target.id || parentItem.id.match('category-')) {
let subCategories = $( let subCategories = $(
`#${ `#${
target.id ? target.id : parentItem.id target.id ? target.id : parentItem.id
@ -148,18 +150,18 @@ $(document).ready(function() {
let subCategories1 = Array.from(subCategories)[0]; let subCategories1 = Array.from(subCategories)[0];
subCategories1 = $(subCategories1); subCategories1 = $(subCategories1);
if (type == "mouseover") { if (type == 'mouseover') {
this.show(subCategories1); this.show(subCategories1);
let sidebarChild = subCategories1.find( let sidebarChild = subCategories1.find(
".sidebar" '.sidebar'
); );
this.show(sidebarChild); this.show(sidebarChild);
} else if (type == "mouseout") { } else if (type == 'mouseout') {
this.hide(subCategories1); this.hide(subCategories1);
} }
} else { } else {
if (type == "mouseout") { if (type == 'mouseout') {
let sidebar = $(`#${id}`); let sidebar = $(`#${id}`);
sidebar.hide(); sidebar.hide();
} }
@ -171,7 +173,7 @@ $(document).ready(function() {
show: function(element) { show: function(element) {
element.show(); element.show();
element.mouseleave(({ target }) => { element.mouseleave(({ target }) => {
$(target.closest(".sidebar")).hide(); $(target.closest('.sidebar')).hide();
}); });
}, },
@ -180,15 +182,15 @@ $(document).ready(function() {
}, },
toggleButtonDisability({ event, actionType }) { toggleButtonDisability({ event, actionType }) {
let button = event.target.querySelector("button[type=submit]"); let button = event.target.querySelector('button[type=submit]');
button ? (button.disabled = actionType) : ""; button ? (button.disabled = actionType) : '';
}, },
onSubmit: function(event) { onSubmit: function(event) {
this.toggleButtonDisability({ event, actionType: true }); this.toggleButtonDisability({ event, actionType: true });
if (typeof tinyMCE !== "undefined") tinyMCE.triggerSave(); if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
this.$validator.validateAll().then(result => { this.$validator.validateAll().then(result => {
if (result) { if (result) {
@ -199,7 +201,7 @@ $(document).ready(function() {
actionType: false actionType: false
}); });
eventBus.$emit("onFormError"); eventBus.$emit('onFormError');
} }
}); });
}, },
@ -223,11 +225,11 @@ $(document).ready(function() {
}, },
loadDynamicScript: function(src, onScriptLoaded) { loadDynamicScript: function(src, onScriptLoaded) {
let dynamicScript = document.createElement("script"); let dynamicScript = document.createElement('script');
dynamicScript.setAttribute("src", src); dynamicScript.setAttribute('src', src);
document.body.appendChild(dynamicScript); document.body.appendChild(dynamicScript);
dynamicScript.addEventListener("load", onScriptLoaded, false); dynamicScript.addEventListener('load', onScriptLoaded, false);
}, },
getDynamicHTML: function(input) { getDynamicHTML: function(input) {
@ -243,7 +245,7 @@ $(document).ready(function() {
try { try {
var output = render.call(this, this.$createElement); var output = render.call(this, this.$createElement);
} catch (exception) { } catch (exception) {
console.log(this.__("error.something_went_wrong")); console.log(this.__('error.something_went_wrong'));
} }
this.$options.staticRenderFns = _staticRenderFns; this.$options.staticRenderFns = _staticRenderFns;
@ -270,7 +272,7 @@ $(document).ready(function() {
}); });
const app = new Vue({ const app = new Vue({
el: "#app", el: '#app',
VueToast, VueToast,
data: function() { data: function() {
@ -285,14 +287,14 @@ $(document).ready(function() {
created: function() { created: function() {
setTimeout(() => { setTimeout(() => {
document.body.classList.remove("modal-open"); document.body.classList.remove('modal-open');
}, 0); }, 0);
window.addEventListener("click", () => { window.addEventListener('click', () => {
let modals = document.getElementsByClassName("sensitive-modal"); let modals = document.getElementsByClassName('sensitive-modal');
Array.from(modals).forEach(modal => { Array.from(modals).forEach(modal => {
modal.classList.add("hide"); modal.classList.add('hide');
}); });
}); });
}, },
@ -302,7 +304,7 @@ $(document).ready(function() {
this.addServerErrors(); this.addServerErrors();
}, 0); }, 0);
document.body.style.display = "block"; document.body.style.display = 'block';
this.$validator.localize(document.documentElement.lang); this.$validator.localize(document.documentElement.lang);
this.loadCategories(); this.loadCategories();
@ -313,7 +315,7 @@ $(document).ready(function() {
onSubmit: function(event) { onSubmit: function(event) {
this.toggleButtonDisability({ event, actionType: true }); this.toggleButtonDisability({ event, actionType: true });
if (typeof tinyMCE !== "undefined") tinyMCE.triggerSave(); if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
this.$validator.validateAll().then(result => { this.$validator.validateAll().then(result => {
if (result) { if (result) {
@ -324,13 +326,13 @@ $(document).ready(function() {
actionType: false actionType: false
}); });
eventBus.$emit("onFormError"); eventBus.$emit('onFormError');
} }
}); });
}, },
toggleButtonDisable(value) { toggleButtonDisable(value) {
var buttons = document.getElementsByTagName("button"); var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) { for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = value; buttons[i].disabled = value;
@ -340,15 +342,15 @@ $(document).ready(function() {
addServerErrors: function(scope = null) { addServerErrors: function(scope = null) {
for (var key in serverErrors) { for (var key in serverErrors) {
var inputNames = []; var inputNames = [];
key.split(".").forEach(function(chunk, index) { key.split('.').forEach(function(chunk, index) {
if (index) { if (index) {
inputNames.push("[" + chunk + "]"); inputNames.push('[' + chunk + ']');
} else { } else {
inputNames.push(chunk); inputNames.push(chunk);
} }
}); });
var inputName = inputNames.join(""); var inputName = inputNames.join('');
const field = this.$validator.fields.find({ const field = this.$validator.fields.find({
name: inputName, name: inputName,
@ -383,10 +385,10 @@ $(document).ready(function() {
$( $(
`<style type='text/css'> .sub-categories{ min-height:${response `<style type='text/css'> .sub-categories{ min-height:${response
.data.categories.length * 30}px;} </style>` .data.categories.length * 30}px;} </style>`
).appendTo("head"); ).appendTo('head');
}) })
.catch(error => { .catch(error => {
console.log("failed to load categories"); console.log('failed to load categories');
}); });
}, },
@ -404,17 +406,17 @@ $(document).ready(function() {
}, },
showLoader: function() { showLoader: function() {
$("#loader").show(); $('#loader').show();
$(".overlay-loader").show(); $('.overlay-loader').show();
document.body.classList.add("modal-open"); document.body.classList.add('modal-open');
}, },
hideLoader: function() { hideLoader: function() {
$("#loader").hide(); $('#loader').hide();
$(".overlay-loader").hide(); $('.overlay-loader').hide();
document.body.classList.remove("modal-open"); document.body.classList.remove('modal-open');
} }
} }
}); });
@ -422,9 +424,9 @@ $(document).ready(function() {
window.app = app; window.app = app;
// for compilation of html coming from server // for compilation of html coming from server
Vue.component("vnode-injector", { Vue.component('vnode-injector', {
functional: true, functional: true,
props: ["nodes"], props: ['nodes'],
render(h, { props }) { render(h, { props }) {
return props.nodes; return props.nodes;
} }

2
packages/Webkul/Velocity/src/Resources/views/shop/layouts/master.blade.php
View File

@ -105,7 +105,7 @@
</div> </div>
<div class="modal-parent" id="loader" style="top: 0" v-show="showPageLoader"> <div class="modal-parent" id="loader" style="top: 0" v-show="showPageLoader">
<overlay-loader :is-open="true"></overlay-loader> <velocity-overlay-loader :is-open="true"></velocity-overlay-loader>
</div> </div>
</div> </div>

4
packages/Webkul/Velocity/src/Resources/views/shop/products/reviews/create.blade.php
View File

@ -111,3 +111,7 @@
</div> </div>
@endsection @endsection
@push('scripts')
<script type="text/javascript" src="{{ asset('vendor/webkul/ui/assets/js/ui.js') }}"></script>
@endpush