2022-05-04 10:12:01 +02:00
@ if ( env ( 'ENABLE_BUTTON_EDITOR' ) === true )
2022-05-04 00:19:29 +02:00
@ extends ( 'layouts.sidebar' )
2022-04-27 20:55:19 +02:00
2022-11-28 19:44:02 +01:00
@ include ( 'components.favicon' )
@ include ( 'components.favicon-extension' )
2022-05-04 00:19:29 +02:00
@ section ( 'content' )
2022-05-07 16:23:25 +02:00
@ push ( 'sidebar-scripts' )
2022-08-16 18:01:49 +02:00
< ? php function strp ( $urlStrp ){ return str_replace ( array ( 'http://' , 'https://' ), '' , $urlStrp );} ?>
2022-04-27 20:55:19 +02:00
<!-- start button editor -->
< script >
$ ( document ) . ready ( function () {
2022-05-04 00:19:29 +02:00
$ ( '#code' ) . click ( function () {
var css_text = 'padding-top : ' + button_css . padding_top + ';' + '\npadding-bottom :' + button_css . padding_bottom + ';' + '\npadding-left :' + button_css . padding_left + ';' ;
css_text = css_text + '\npadding-right :' + button_css . padding_right + ';' + '\ncolor :' + button_css . color + ';' + '\nbackground-image :' + button_css . background_image + ';' ;
css_text = css_text + '\nborder-radius :' + button_css . border_radius + ';' + '\nfont-size :' + button_css . font_size + ';' + '\nfont-family :' + button_css . font_family + ';' ;
css_text = css_text + '\nborder-color :' + button_css . border_color + ';' + '\nborder-style :' + button_css . border_style + ';' + '\nborder-width :' + button_css . border_width + ';' ;
$ ( '#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 ;
}
});
$ ( '#border-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 ) {
$ ( '#border-color' ) . css ( 'background-color' , '#' + hex );
document . getElementById ( " sample " ) . style . borderColor = '#' + hex ;
button_css . border_color = '#' + hex ;
}
});
document . getElementById ( " pdtb " ) . onchange = $ . proxy ( function () {
var val = document . getElementById ( 'pdtb' ) . value ;
$ ( '#sample' ) . css ( " padding-top " , val + 'px' );
$ ( '#sample' ) . css ( " padding-bottom " , val + 'px' );
button_css . padding_top = val + 'px' ;
button_css . padding_bottom = val + 'px' ;
}, document );
document . getElementById ( " pdlr " ) . onchange = $ . proxy ( function () {
var val = document . getElementById ( 'pdlr' ) . value ;
$ ( '#sample' ) . css ( " padding-left " , val + 'px' );
$ ( '#sample' ) . css ( " padding-right " , val + 'px' );
button_css . padding_left = val + 'px' ;
button_css . padding_right = val + 'px' ;
}, document );
document . getElementById ( " ftb " ) . onchange = $ . proxy ( function () {
var val = document . getElementById ( 'ftb' ) . value ;
$ ( '#sample' ) . css ( " font-size " , val + 'px' );
button_css . font_size = val + 'px' ;
}, document );
document . getElementById ( " br " ) . onchange = $ . proxy ( function () {
var val = document . getElementById ( 'br' ) . value ;
$ ( '#sample' ) . css ( " border-radius " , val + 'px' );
button_css . border_radius = val + 'px' ;
}, document );
document . getElementById ( " tsub " ) . onclick = $ . proxy ( function () {
var val = document . getElementById ( 'text' ) . value ;
$ ( '#sample' ) . text ( val );
}, document );
document . getElementById ( " ffsub " ) . onclick = $ . proxy ( function () {
var font1 = document . getElementById ( " font-face " ); // or in jQuery use: select = this;
var FontFace = font1 . options [ font1 . selectedIndex ] . text ;
document . getElementById ( 'sample' ) . style . fontFamily = FontFace ;
button_css . font_family = FontFace ;
}, document );
document . getElementById ( " bssub " ) . onclick = $ . proxy ( function () {
var bor = document . getElementById ( " border-style " ); // or in jQuery use: select = this;
var borstyle = bor . options [ bor . selectedIndex ] . text ;
document . getElementById ( 'sample' ) . style . borderStyle = borstyle ;
$ ( '#sample' ) . text ( val );
button_css . border_style = borstyle ;
}, document );
document . getElementById ( " bw " ) . onchange = $ . proxy ( function () {
var val = document . getElementById ( 'bw' ) . value ;
$ ( '#sample' ) . css ( " border-width " , val + 'px' );
button_css . border_width = val + 'px' ;
}, document );
});
// Many of these values cannot be changed by the UI editor, so they are set to zero here. These values might get used in the future.
2022-04-27 20:55:19 +02:00
var button_css = {
2022-05-04 00:19:29 +02:00
padding_top : '0px' ,
padding_bottom : '0px' ,
color : 'black' ,
background_image : 'none' ,
padding_left : '0px' ,
padding_right : '0px' ,
border_radius : '8px' ,
2022-11-28 21:07:16 +01:00
font_family : 'inherit' ,
2022-05-04 00:19:29 +02:00
font_size : '18px' ,
border_color : 'black' ,
border_style : 'none' ,
border_width : '0px'
2022-04-27 20:55:19 +02:00
};
</ script >
< link rel = " stylesheet " type = " text/css " href = " ./styles/button-gen.css " >
< link rel = " stylesheet " href = " ./styles/jquery.gradientPicker.css " type = " text/css " />
< link rel = " stylesheet " href = " ./styles/colorpicker_1.css " type = " text/css " />
< link rel = " stylesheet " type = " text/css " href = " ./themes/blackboard.css " >
2022-05-30 18:10:35 +02:00
< link rel = " stylesheet " href = " { { asset('littlelink/css/animations.css') }} " >
2022-05-04 00:19:29 +02:00
< link rel = " stylesheet " type = " text/css " href = " ./css/style.css " >
2022-04-27 20:55:19 +02:00
< script src = " ./js/rainbow.js " ></ script >
< script src = " ./js/css.js " ></ script >
< script src = " ./js/jquery-1.7.js " ></ script >
< script src = " ./js/jqueryUI-custom.js " ></ script >
< script src = " ./js/colorpicker.js " ></ script >
< script src = " ./js/jquery.gradientPicker.js " ></ script >
2022-05-04 00:19:29 +02:00
<!-- end button editor -->
@ endpush
2022-11-23 16:37:30 +01:00
< script src = " { { asset('studio/external-dependencies/fontawesome.js') }} " crossorigin = " anonymous " ></ script >
2022-04-27 20:55:19 +02:00
2022-05-04 00:19:29 +02:00
< div >
2022-11-08 16:11:59 +01:00
< section class = " shadow text-gray-400 " >
< h2 class = " mb-4 card-header " >< i class = " bi bi-pen " > Button Editor </ i ></ h2 >
< div class = " card-body p-0 p-md-3 " >
2022-05-07 16:40:21 +02:00
< br >< br >< a class = " btn btn-primary " href = " { { url('/studio/links') }} " > ⬅ Back </ a >
2022-04-27 20:55:19 +02:00
< h2 > Custom Button </ h2 >< br >
<!-- start button editor -->
< div style = " left: 10px; " >
< div class = " modal-profile " >
< h2 > CSS </ h2 >
< a class = " modal-close-profile " title = " Close profile window " href = " # " >< img src = " ./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 > Color & nbsp ; < span > 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 > background & nbsp ; < span > gradient </ span ></ heading >
</ br >
< div class = " grad_ex " id = " ex1 " ></ div >
</ div >
</ br >
</ aside >
< section id = " preview " >
2022-05-04 10:12:01 +02:00
@ if ( $buttonId == 1 )
< center >< div id = " sample " style = " --delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class= " button - entrance " ><div class= " button - demo button hvr - grow hvr - icon - wobble - vertical " ><img class= " icon hvr - icon " src= " {{ asset ( '\/littlelink/icons\/' ) . 'custom' }} . svg " > { { $title }}</div></div></center>
@ else
2022-11-28 19:44:02 +01:00
< center >< div id = " sample " style = " --delay: 1s; border-radius:8px !important; max-width: 400px; width: 80%; class= " button - entrance " ><div class= " button - demo button hvr - grow hvr - icon - wobble - vertical " ><img class= " wicon hvr - icon " src= " @ if ( file_exists ( base_path ( " studio/favicon/icons/ " ) . localIcon ( $id ))){{ url ( 'studio/favicon/icons/' . localIcon ( $id ))}} @ else {{ getFavIcon ( $id )}} @ endif " > { { $title }}</div></div></center>
2022-05-04 10:12:01 +02:00
@ endif
2022-04-27 20:55:19 +02:00
</ section >
</ div >
<!-- end button editor -->
< br >
< details >
< summary > 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 > Custom CSS </ p >
2022-07-07 12:09:46 +02:00
< textarea name = " custom_css " rows = " 9 " id = " sCode " type = " text " value = " { { $custom_css }} " class = " form-control " required > {{ $custom_css }} </ textarea >
2022-04-27 20:55:19 +02:00
</ div >
</ div >
</ details >
< br >< button id = " code " class = " mt-3 ml-3 btn btn-info " > Submit </ 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 " >
2022-05-20 16:15:14 +02:00
NULL
2022-04-27 20:55:19 +02:00
</ textarea >
</ div >
< button type = " submit " class = " mt-3 ml-3 btn btn-info " > Reset to default </ button >
</ form >
2022-05-04 00:40:41 +02:00
< 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); " >
2022-04-27 20:55:19 +02:00
< div style = " position: relative; top: 50%; transform: translateY(-50%); " >
< h2 align = " center " style = " color:white " > Result :</ h2 >
2022-05-20 16:15:14 +02:00
@ if ( $custom_css === " " or $custom_css === " NULL " and $buttonId == 1 )
2022-05-04 10:12:01 +02:00
< center >< div style = " --delay: 1s " class = " button-entrance " >< div class = " button-demo button-custom button hvr-grow hvr-icon-wobble-vertical " >< img class = " icon hvr-icon fa { { $custom_icon } } " > {{ $title }} </ div ></ div ></ center >
2022-05-20 16:15:14 +02:00
@ elseif ( $custom_css === " " or $custom_css === " NULL " and $buttonId == 2 )
2022-11-28 19:44:02 +01:00
< 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( " studio / favicon / icons / " ).localIcon( $id ))) { { url('studio/favicon/icons/'.localIcon( $id ))}}@else { { getFavIcon( $id )}}@endif " > {{ $title }} </ div ></ div ></ center >
2022-05-04 10:12:01 +02:00
@ elseif ( $custom_css != " " and $buttonId == 2 )
2022-11-28 19:44:02 +01:00
< 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( " studio / favicon / icons / " ).localIcon( $id ))) { { url('studio/favicon/icons/'.localIcon( $id ))}}@else { { getFavIcon( $id )}}@endif " > {{ $title }} </ div ></ div ></ center >
2022-05-04 10:12:01 +02:00
@ 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 hvr-icon fa { { $custom_icon } } " ></ i > {{ $title }} </ div ></ div ></ center >
2022-04-27 20:55:19 +02:00
@ endif
</ div >
</ div >
< br >< br >
2022-05-04 10:12:01 +02:00
@ if ( $buttonId == 1 )
2022-04-27 20:55:19 +02:00
< form action = " { { route('editCSS', $id ) }} " method = " post " >
@ csrf
< div class = " form-group col-lg-8 " >
< h2 > Custom Icon </ h2 >
2022-07-07 12:09:46 +02:00
< textarea id = " textareabox " type = " text " name = " custom_icon " value = " { { $custom_icon }} " class = " form-control " required > {{ $custom_icon }} </ textarea >
2022-04-27 20:55:19 +02:00
</ 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 ( 'Your custom icon\'s short code does not contain the string "fa-" always use icons in the format: fa-ghost, for example.' )
}
</ script >
< details >
< p > Custom icons can be added to buttons via Font Awesome . You can use any icon from the list below , you can access this list by clicking the 'See all icons' button . Each icon on that list has a short code , which you can copy and enter in the custom icon field .</ p >
< p > Every icon short code consists of a prefix and main part . If the short code is not a brand icon , you can simply enter the code in the format : fa - icon - name . The 'fa-...' formatting is important here . For example 'fa-code' .</ p >
2022-05-04 00:19:29 +02:00
< p > If the short code is a brand icon , it is important to include a 'fab' before the short code part . Again , The 'fa-...' formatting still applies here . For example , 'fab fa-github' </ p >
< p > To apply color to your icons , you can simply write out the color name or just write the HEX value before the icon , followed by a ';' . Here it is important to put the color before the icon short code and the color code must be ended with a semicolon .< br >
2022-04-27 20:55:19 +02:00
You can find a list of available colors < a href = " https://www.w3schools.com/cssref/css_colors.asp " target = " _blank " > here </ a >.</ p >
< br >< table class = " table table-bordered " >
< thead >
< tr >
< th scope = " col " > Style </ th >
< th scope = " col " > Prefix </ th >
2022-05-04 00:19:29 +02:00
< th scope = " col " style = " max-width: 1% " > Icon </ th >
2022-04-27 20:55:19 +02:00
< th scope = " col " > Short Code </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > Regular </ td >
< td ></ td >
< td >< i class = " fa fa-user " ></ i ></ td >
< td >< p > fa - user </ p ></ td >
</ tr >
< tr >
< td > Brands </ td >
< td > fab </ td >
< td >< i class = " fab fa-github " ></ i ></ td >
< td >< p > fab fa - github </ p ></ td >
</ tr >
< tr >
< td > Color </ td >
< td > color_name ; </ td >
< td >< i style = " color: red; " class = " fa fa-ghost " ></ i ></ td >
< td >< p style = " color: red; " > red ; fa - ghost </ p ></ td >
</ tr >
< tr >
< td > Color HEX </ td >
< td > color_HEX ; </ td >
< td >< i style = " color: #1DA1F2; " class = " fab fa-twitter " ></ i ></ td >
< td >< p style = " color: #1DA1F2; " > #1DA1F2; fab fa-twitter</p></td>
</ tr >
</ tbody >
</ table >
</ details >
< div class = " row " >
2022-05-04 10:12:01 +02:00
< button type = " submit " class = " mt-3 ml-3 btn btn-info " > Update icon </ button >
2022-04-27 20:55:19 +02:00
< button class = " mt-3 ml-3 btn btn-info " >< a href = " https://fontawesome.com/search?m=free " target = " _blank " > See all icons </ a ></ button >
</ div >
</ form >< br >< br >< br >< br >
2022-05-04 10:12:01 +02:00
@ endif
2022-04-27 20:55:19 +02:00
</ div >
2022-05-04 00:19:29 +02:00
2022-05-07 16:40:21 +02:00
< a class = " btn btn-primary " href = " { { url('/studio/links') }} " > ⬅ Back </ a >
2022-05-04 00:19:29 +02:00
2022-11-08 16:11:59 +01:00
</ div >
</ section >
2022-05-04 00:19:29 +02:00
@ endsection
2022-05-04 10:12:01 +02:00
@ endif