289 lines
16 KiB
PHP
289 lines
16 KiB
PHP
@if(env('ENABLE_BUTTON_EDITOR') === true)
|
|
@extends('layouts.sidebar')
|
|
|
|
@include('components.favicon')
|
|
@include('components.favicon-extension')
|
|
|
|
@section('content')
|
|
<div class="conatiner-fluid content-inner mt-n5 py-0">
|
|
<div class="row">
|
|
|
|
<div class="col-lg-12">
|
|
<div class="card rounded">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
@push('sidebar-scripts')
|
|
<?php function strp($urlStrp){return str_replace(array('http://', 'https://'), '', $urlStrp);} ?>
|
|
<!-- start button editor -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#code').click(function() {
|
|
var css_text = 'color: ' + button_css.color + ';' + '\nbackground-image: ' + button_css.background_image + ';';
|
|
$('#sCode').html(css_text);
|
|
Rainbow.color(div, function() {
|
|
document.getElementById('output').appendChild(div);
|
|
});
|
|
|
|
$('.modal-profile').fadeIn("slow");
|
|
$('.modal-lightsout').fadeTo("slow", .9);
|
|
});
|
|
|
|
$('a.modal-close-profile, .modal-lightsout').click(function() {
|
|
$('.modal-profile').fadeOut("slow");
|
|
$('.modal-lightsout').fadeOut("slow");
|
|
});
|
|
|
|
var $button = $("#sample");
|
|
$("#ex1").gradientPicker({
|
|
change: function(points, styles) {
|
|
for (i = 1; i < styles.length; ++i) {
|
|
$button.css("background-image", styles[i]);
|
|
button_css.background_image = styles[i];
|
|
}
|
|
},
|
|
fillDirection: "45deg",
|
|
controlPoints: ["white 0%", "#888888 100%"]
|
|
});
|
|
|
|
$('#color').ColorPicker({
|
|
color: '#000000',
|
|
onShow: function(colpkr) {
|
|
$(colpkr).fadeIn(500);
|
|
return false;
|
|
},
|
|
onHide: function(colpkr) {
|
|
$(colpkr).fadeOut(500);
|
|
return false;
|
|
},
|
|
onChange: function(hsb, hex, rgb) {
|
|
$('#color').css('background-color', '#' + hex);
|
|
document.getElementById("sample").style.color = '#' + hex;
|
|
button_css.color = '#' + hex;
|
|
}
|
|
});
|
|
});
|
|
// Only include the necessary properties
|
|
var button_css = {
|
|
color: 'inherit',
|
|
background_image: 'inherit'
|
|
};
|
|
</script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="{{asset('assets/button-editor/styles/button-gen.css')}}">
|
|
<link rel="stylesheet" href="{{asset('assets/button-editor/styles/jquery.gradientPicker.css')}}" type="text/css" />
|
|
<link rel="stylesheet" href="{{asset('assets/button-editor/styles/colorpicker_1.css')}}" type="text/css" />
|
|
<link rel="stylesheet" type="text/css" href="{{asset('assets/button-editor/themes/blackboard.css')}}">
|
|
<link rel="stylesheet" href="{{asset('assets/linkstack/css/animations.css') }}">
|
|
<link rel="stylesheet" type="text/css" href="{{asset('assets/button-editor/css/style.css')}}">
|
|
|
|
<script src="{{asset('assets/button-editor/js/rainbow.js')}}"></script>
|
|
<script src="{{asset('assets/button-editor/js/css.js')}}"></script>
|
|
|
|
<script src="{{asset('assets/button-editor/js/jquery-1.7.js')}}"></script>
|
|
<script src="{{asset('assets/button-editor/js/jqueryUI-custom.js')}}"></script>
|
|
<script src="{{asset('assets/button-editor/js/colorpicker.js')}}"></script>
|
|
<script src="{{asset('assets/button-editor/js/jquery.gradientPicker.js')}}"></script>
|
|
<!-- end button editor -->
|
|
@endpush
|
|
<script src="{{ asset('assets/external-dependencies/fontawesome.js') }}" crossorigin="anonymous"></script>
|
|
|
|
<div>
|
|
<section class="shadow text-gray-400">
|
|
<h2 class="mb-4 card-header"><i class="bi bi-pen">{{__('messages.Button Editor')}}</i></h2>
|
|
<div class="card-body p-0 p-md-3">
|
|
|
|
<a class="btn btn-primary" href="{{ url('/studio/links') }}"><i class="bi bi-arrow-left-short"></i>{{__('messages.Back')}}</a><br><br>
|
|
|
|
<h2>{{__('messages.Custom Button')}}</h2><br>
|
|
|
|
<!-- start button editor -->
|
|
<div style="left: 10px;">
|
|
<div class="modal-profile">
|
|
<h2>{{__('messages.CSS')}}</h2>
|
|
<a class="modal-close-profile" title="Close profile window" href="#"><img href="{{asset('assets/button-editor/images/close.png')}}" alt="Close profile window" /></a>
|
|
<div id="output">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal-lightsout"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<aside id="panel-right">
|
|
|
|
|
|
|
|
</br>
|
|
|
|
|
|
<div class="tool">
|
|
<heading>{{__('messages.Color')}} <span>{{__('messages.Text')}}</span></heading>
|
|
</br>
|
|
<input type="button" id="color" style="background-color:#FFFFFF; border:thin solid white;height:50px;width:50px;margin-left:5px;">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</br>
|
|
|
|
|
|
<div class="tool">
|
|
<heading>{{__('messages.background')}} <span>{{__('messages.gradient')}}</span></heading>
|
|
</br>
|
|
<div class="grad_ex" id="ex1"></div>
|
|
</div>
|
|
|
|
|
|
</br>
|
|
|
|
|
|
|
|
|
|
</aside>
|
|
|
|
<section id="preview">
|
|
@if($buttonId == 1)
|
|
<center><div id="sample" style="border-radius: 8px !important; max-width: 350px; height: 48px; display: flex; align-items: center; justify-content: center;font-size: 18px;" class="button-demo button"><img class="icon-btn hvr-icon" src="{{ asset('\/assets/linkstack/icons\/') . 'custom' }}.svg">{{ $title }}</div></center>
|
|
@else
|
|
<center><div id="sample" style="border-radius: 8px !important; max-width: 350px; height: 48px; display: flex; align-items: center; justify-content: center;font-size: 18px;" class="button-demo button"><img class="wicon hvr-icon" src="@if(file_exists(base_path("assets/favicon/icons/").localIcon($id))){{url('assets/favicon/icons/'.localIcon($id))}}@else{{getFavIcon($id)}}@endif">{{ $title }}</div></center>
|
|
@endif
|
|
|
|
</section>
|
|
</div>
|
|
<!-- end button editor -->
|
|
|
|
<br>
|
|
<details>
|
|
<summary>{{__('messages.Show CSS')}}</summary>
|
|
<div style="padding-left: 15px;">
|
|
<form action="{{ route('editCSS', $id) }}" method="post">
|
|
@csrf
|
|
<div class="form-group col-lg-8"><br>
|
|
<p>{{__('messages.Custom CSS')}}</p>
|
|
|
|
<textarea name="custom_css" rows="9" id="sCode" type="text" value="{{ $custom_css }}" class="form-control" required>{{ $custom_css }}</textarea>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
<br><button id="code" class="btn btn-primary">{{__('messages.Save')}}</button><br>
|
|
</form>
|
|
|
|
<form action="{{ route('editCSS', $id) }}" method="post">
|
|
@csrf
|
|
<div class="form-group col-lg-8">
|
|
<textarea style="display: none;" rows="9" type="text" name="custom_css" value="" class="form-control">
|
|
NULL
|
|
</textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-danger">{{__('messages.Reset to default')}}</button>
|
|
</form>
|
|
|
|
<br><br><div id="result" style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; min-width:300px; max-width:950px; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<h2 align="center" style="color:white">{{__('messages.Result')}}</h2>
|
|
@if($custom_css === "" or $custom_css === "NULL" and $buttonId == 1)
|
|
<center><div style="--delay: 1s" class="button-entrance"><div class="button-demo button-custom button hvr-grow hvr-icon-wobble-vertical"><img class="icon-btn hvr-icon fa {{$custom_icon}}">{{ $title }}</div></div></center>
|
|
@elseif($custom_css === "" or $custom_css === "NULL" and $buttonId == 2)
|
|
<center><div style="--delay: 1s" class="button-entrance"><div class="button-custom_website button hvr-grow hvr-icon-wobble-vertical"><img class="wicon hvr-icon" src="@if(file_exists(base_path("assets/favicon/icons/").localIcon($id))){{url('assets/favicon/icons/'.localIcon($id))}}@else{{getFavIcon($id)}}@endif">{{ $title }}</div></div></center>
|
|
@elseif($custom_css != "" and $buttonId == 2)
|
|
<center><div style="--delay: 1s" class="button-entrance"><div style="{{ $custom_css }}" class="button-custom_website button hvr-grow hvr-icon-wobble-vertical"><img class="wicon hvr-icon" src="@if(file_exists(base_path("assets/favicon/icons/").localIcon($id))){{url('assets/favicon/icons/'.localIcon($id))}}@else{{getFavIcon($id)}}@endif">{{ $title }}</div></div></center>
|
|
@else
|
|
<center><div style="--delay: 1s" class="button-entrance"><div style="{{ $custom_css }}" class="button-demo hvr-grow hvr-icon-wobble-vertical"><i style="color: {{$custom_icon}}" class="icon-btn hvr-icon fa {{$custom_icon}}"></i>{{ $title }}</div></div></center>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
@if($buttonId == 1)
|
|
<form action="{{ route('editCSS', $id) }}" method="post">
|
|
@csrf
|
|
<div class="form-group col-lg-8">
|
|
<h2>{{__('messages.Custom Icon')}}</h2>
|
|
<textarea id="textareabox" type="text" name="custom_icon" value="{{ $custom_icon }}" class="form-control" required>{{ $custom_icon }}</textarea>
|
|
</div>
|
|
<script type="text/javascript">
|
|
// Displays alert if custom icon doesn't contain string "fa-"
|
|
var textarea = document.getElementById('textareabox');
|
|
var word = 'fa-';
|
|
var textValue=textarea.value;
|
|
if (textValue.indexOf(word)==-1)
|
|
{
|
|
alert({{__('messages.Custom Alert')}})
|
|
}
|
|
</script>
|
|
|
|
<details>
|
|
<p>{{__('messages.cb.description.1-4')}}</p>
|
|
<p>{{__('messages.cb.description.2-4')}}</p>
|
|
<p>{{__('messages.cb.description.3-4')}}</p>
|
|
<p>{{__('messages.cb.description.4-4')}}</p>
|
|
<br>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{{__('messages.Style')}}</th>
|
|
<th scope="col">{{__('messages.Prefix')}}</th>
|
|
<th scope="col" style="max-width: 1%">{{__('messages.Icon')}}</th>
|
|
<th scope="col">{{__('messages.Short Code')}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{{__('messages.Regular')}}</td>
|
|
<td></td>
|
|
<td><i class="fa fa-user"></i></td>
|
|
<td><p>{{__('messages.Fa-user')}}</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{__('messages.Brands')}}</td>
|
|
<td>{{__('messages.Fab')}}</td>
|
|
<td><i class="fab fa-github"></i></td>
|
|
<td><p>{{__('messages.Fab fa-github')}}</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{__('messages.Color')}}</td>
|
|
<td>{{__('messages.Color name')}};</td>
|
|
<td><i style="color: red;" class="fa fa-ghost"></i></td>
|
|
<td><p style="color: red;">{{__('messages.Red fa')}};{{__('messages.Fa ghost')}}</p></td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{__('messages.Color HEX')}}</td>
|
|
<td>{{__('messages.Color HEX1')}};</td>
|
|
<td><i style="color: #1DA1F2;" class="fab fa-twitter"></i></td>
|
|
<td><p style="color: #1DA1F2;">#1DA1F2; {{__('messages.Hex fab fa-twitter')}}</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
|
|
<br>
|
|
<button type="submit" class="btn btn-primary">{{__('messages.Update icon')}}</button>
|
|
<a class="btn btn-primary" href="https://fontawesome.com/search?m=free" target="_blank">{{__('messages.See all icons')}}</a>
|
|
|
|
</form><br><br><br><br>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
<a class="btn btn-primary" href="{{ url('/studio/links') }}"><i class="bi bi-arrow-left-short"></i>{{__('messages.Back')}}</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@endif
|