Added blade file hint feature for frontend
This commit is contained in:
jitendra
parent
e1c7506035
commit
2adb5f26d3
|
|
@ -1,6 +1,16 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Blade File Tracer
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Shows blade file path in front
|
||||
|
|
||||
*/
|
||||
|
||||
'tracer' => false,
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -10,13 +10,10 @@
|
|||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.19.0",
|
||||
"cross-env": "^6.0.3",
|
||||
"jquery": "^3.4.1",
|
||||
"laravel-mix": "^5.0.0",
|
||||
"laravel-mix-merge-manifest": "^0.1.2",
|
||||
"sass": "^1.25.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue": "^2.6.10"
|
||||
"sass-loader": "^8.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ use Illuminate\Database\Eloquent\Factory as EloquentFactory;
|
|||
use Illuminate\Support\ServiceProvider;
|
||||
use Illuminate\Support\Facades\Validator;
|
||||
use Illuminate\Foundation\AliasLoader;
|
||||
use Illuminate\Support\Facades\Event;
|
||||
use Webkul\Theme\ViewRenderEventManager;
|
||||
use Webkul\Core\View\Compilers\BladeCompiler;
|
||||
use Webkul\Core\Console\Commands\BookingCron;
|
||||
use Webkul\Core\Core;
|
||||
use Webkul\Core\Exceptions\Handler;
|
||||
|
|
@ -52,6 +55,16 @@ class CoreServiceProvider extends ServiceProvider
|
|||
);
|
||||
|
||||
SliderProxy::observe(SliderObserver::class);
|
||||
|
||||
$this->loadViewsFrom(__DIR__ . '/../Resources/views', 'core');
|
||||
|
||||
Event::listen('bagisto.shop.layout.head', static function(ViewRenderEventManager $viewRenderEventManager) {
|
||||
$viewRenderEventManager->addTemplate('core::blade.tracer.style');
|
||||
});
|
||||
|
||||
Event::listen('bagisto.admin.layout.head', static function(ViewRenderEventManager $viewRenderEventManager) {
|
||||
$viewRenderEventManager->addTemplate('core::blade.tracer.style');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -64,6 +77,8 @@ class CoreServiceProvider extends ServiceProvider
|
|||
$this->registerFacades();
|
||||
|
||||
$this->registerCommands();
|
||||
|
||||
$this->registerBladeCompiler();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -110,4 +125,16 @@ class CoreServiceProvider extends ServiceProvider
|
|||
{
|
||||
$this->app->make(EloquentFactory::class)->load($path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the Blade compiler implementation.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function registerBladeCompiler()
|
||||
{
|
||||
$this->app->singleton('blade.compiler', function ($app) {
|
||||
return new BladeCompiler($app['files'], $app['config']['view.compiled']);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<?php
|
||||
|
||||
return [
|
||||
'path-hint' => [
|
||||
'template' => 'Template',
|
||||
'parents' => 'Parents'
|
||||
]
|
||||
];
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<style>
|
||||
.path-hint {
|
||||
border: solid 1px transparent;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.path-hint:hover {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.path-hint-tooltip {
|
||||
padding: 0px 10px;
|
||||
position: absolute;
|
||||
background: #000000;
|
||||
z-index: 10000;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.path-hint-tooltip h4 {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.path-hint-tooltip ul li {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.main-container-wrapper .product-card .product-image img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", function(event) {
|
||||
$('.testing').each(function(index) {
|
||||
if ($(this).siblings(':not(.path-hint)').length == 1
|
||||
&& $(this).next().prop("tagName") != 'INPUT'
|
||||
&& $(this).next().prop("tagName") != 'TEXTAREA'
|
||||
&& $(this).next().prop("tagName") != 'SELECT'
|
||||
) {
|
||||
$(this).next().addClass('path-hint');
|
||||
|
||||
$(this).next().attr({
|
||||
'data-toggle': 'tooltip',
|
||||
'data-title': $(this).parent('.path-hint').attr('data-title'),
|
||||
'data-id': $(this).parent('.path-hint').attr('data-id')
|
||||
});
|
||||
|
||||
$(this).unwrap();
|
||||
}
|
||||
|
||||
$(this).remove();
|
||||
})
|
||||
|
||||
$('.path-hint').on('mouseover', function(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
var currentElement = $(e.currentTarget);
|
||||
|
||||
var tooltipContent = '<h4>{{ __("core::app.path-hint.template") }}</h4>' + currentElement.attr('data-title');
|
||||
|
||||
if ($(this).parents('.path-hint').length) {
|
||||
tooltipContent += '<h4>{{ __("core::app.path-hint.parents") }}</h4>';
|
||||
|
||||
tooltipContent += '<ul>';
|
||||
|
||||
$(this).parents('.path-hint').each(function(index) {
|
||||
tooltipContent += '<li>' + $(this).attr('data-title') + '</li>';
|
||||
});
|
||||
|
||||
tooltipContent += '</ul>';
|
||||
}
|
||||
|
||||
$('body').append("<span class='path-hint-tooltip' id='" + currentElement.attr('data-id') + "'>" + tooltipContent + "</span>")
|
||||
|
||||
var elementWidth = currentElement.outerWidth()
|
||||
|
||||
var tooltipWidth = $('.path-hint-tooltip').outerWidth()
|
||||
|
||||
var leftOffset = currentElement.offset().left;
|
||||
|
||||
minus = 0;
|
||||
|
||||
temp = leftOffset + (elementWidth / 2) + (tooltipWidth / 2)
|
||||
|
||||
if (temp > $(window).outerWidth()) {
|
||||
minus = temp - $(window).outerWidth();
|
||||
}
|
||||
|
||||
if (elementWidth > tooltipWidth) {
|
||||
var left = leftOffset + ((elementWidth / 2) - (tooltipWidth / 2));
|
||||
} else {
|
||||
var left = leftOffset - ((tooltipWidth / 2) - (elementWidth / 2));
|
||||
}
|
||||
|
||||
if (left <= 0) {
|
||||
left = 10;
|
||||
}
|
||||
|
||||
$('.path-hint-tooltip').css('left', left - minus)
|
||||
|
||||
$('.path-hint-tooltip').css('top', currentElement.offset().top + 20)
|
||||
})
|
||||
|
||||
$('[data-toggle="tooltip"]').on('mouseout', function(e) {
|
||||
var currentElement = $(e.currentTarget);
|
||||
|
||||
$("#" + currentElement.attr('data-id')).remove();
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<?php
|
||||
|
||||
namespace Webkul\Core\View\Compilers;
|
||||
|
||||
use Illuminate\View\Compilers\BladeCompiler as BaseBladeCompiler;
|
||||
|
||||
class BladeCompiler extends BaseBladeCompiler
|
||||
{
|
||||
/**
|
||||
* Append the file path to the compiled string.
|
||||
*
|
||||
* @param string $contents
|
||||
* @return string
|
||||
*/
|
||||
protected function appendFilePath($contents)
|
||||
{
|
||||
$tokens = $this->getOpenAndClosingPhpTokens($contents);
|
||||
|
||||
if (config('view.tracer')
|
||||
&& strpos($this->getPath(), 'tracer/style.blade.php') == false
|
||||
&& strpos($this->getPath(), 'master.blade.php') == false
|
||||
) {
|
||||
$finalPath = str_replace('/Providers/..', '', str_replace(base_path(), '', $this->getPath()));
|
||||
|
||||
$contents = '<div class="path-hint" data-toggle="tooltip" data-title="' . $finalPath . '" data-id="' . uniqid() . '"><span class="testing"></span>' . $contents . '</div>';
|
||||
}
|
||||
|
||||
if ($tokens->isNotEmpty() && $tokens->last() !== T_CLOSE_TAG) {
|
||||
$contents .= ' ?>';
|
||||
}
|
||||
|
||||
|
||||
return $contents."<?php /**PATH {$this->getPath()} ENDPATH**/ ?>";
|
||||
}
|
||||
}
|
||||
|
|
@ -84,6 +84,19 @@ class ThemeViewFinder extends FileViewFinder
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the string contents of the view.
|
||||
*
|
||||
* @param callable|null $callback
|
||||
* @return array|string
|
||||
*
|
||||
* @throws \Throwable
|
||||
*/
|
||||
public function render(callable $callback = null)
|
||||
{
|
||||
dd(111);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the array of paths where the views are being searched.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"tooltip.js": "^1.3.1",
|
||||
"url-polyfill": "^1.1.5",
|
||||
"url-search-params-polyfill": "^6.0.0",
|
||||
"v-tooltip": "^2.0.3",
|
||||
"vue-multiselect": "^2.1.6",
|
||||
"vue-swatches": "^1.0.3"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,13 @@ import TimeComponent from './components/time';
|
|||
import SwatchPicker from './components/swatch-picker';
|
||||
import Debounce from './directives/debounce';
|
||||
import OverlayLoader from './components/overlay-loader';
|
||||
import VTooltip from 'v-tooltip';
|
||||
|
||||
VTooltip.options.defaultDelay = 0;
|
||||
|
||||
Vue.directive('tooltip', VTooltip.VTooltip)
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.component('flash-wrapper', FlashWrapper);
|
||||
Vue.component('flash', Flash);
|
||||
|
|
|
|||
|
|
@ -1235,4 +1235,86 @@ modal {
|
|||
left: 50%;
|
||||
margin-top: -24px;
|
||||
margin-left: -24px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
|
||||
.tooltip-inner {
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px 4px;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue