2015-05-05 03:00:01 +02:00
< ? php
2015-10-19 00:45:58 +02:00
class HTML {
2015-05-05 03:00:01 +02:00
2015-10-19 00:45:58 +02:00
public static function title ( $args )
{
$html = '<h2 class="title"><i class="uk-icon-' . $args [ 'icon' ] . '"></i> ' . $args [ 'title' ] . '</h2>' ;
echo $html ;
}
public static function formOpen ( $args )
{
$class = empty ( $args [ 'class' ]) ? '' : ' ' . $args [ 'class' ];
$id = empty ( $args [ 'id' ]) ? '' : 'id="' . $args [ 'id' ] . '"' ;
2015-05-05 03:00:01 +02:00
2015-10-19 00:45:58 +02:00
$html = '<form class="uk-form' . $class . '" ' . $id . ' method="post" action="" autocomplete="off">' ;
echo $html ;
}
2015-05-05 03:00:01 +02:00
2015-10-19 00:45:58 +02:00
public static function formClose ()
2015-05-05 03:00:01 +02:00
{
2015-10-19 00:45:58 +02:00
$html = '</form>' ;
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$script = ' < script >
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$ ( document ) . ready ( function () {
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
// Prevent the form submit when press enter key.
$ ( " form " ) . keypress ( function ( e ) {
2016-02-24 06:22:24 +01:00
if ( ( e . which == 13 ) && ( e . target . type !== " textarea " ) ) {
2016-02-13 06:50:49 +01:00
return false ;
}
});
});
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
</ script > ' ;
2016-01-16 15:01:29 +01:00
echo $html . $script ;
2015-10-19 00:45:58 +02:00
}
// label, name, value, tip
public static function formInputText ( $args )
{
$id = 'js' . $args [ 'name' ];
$type = isset ( $args [ 'type' ]) ? $args [ 'type' ] : 'text' ;
$class = empty ( $args [ 'class' ]) ? '' : 'class="' . $args [ 'class' ] . '"' ;
$placeholder = empty ( $args [ 'placeholder' ]) ? '' : 'placeholder="' . $args [ 'placeholder' ] . '"' ;
2015-11-07 01:23:50 +01:00
$disabled = empty ( $args [ 'disabled' ]) ? '' : 'disabled' ;
2015-10-19 00:45:58 +02:00
$html = '<div class="uk-form-row">' ;
if ( ! empty ( $args [ 'label' ])) {
$html .= '<label for="' . $id . '" class="uk-form-label">' . $args [ 'label' ] . '</label>' ;
}
$html .= '<div class="uk-form-controls">' ;
2015-05-05 03:00:01 +02:00
2015-11-07 01:23:50 +01:00
$html .= '<input id="' . $id . '" name="' . $args [ 'name' ] . '" type="' . $type . '" ' . $class . ' ' . $placeholder . ' autocomplete="off" ' . $disabled . ' value="' . $args [ 'value' ] . '">' ;
2015-10-19 00:45:58 +02:00
if ( ! empty ( $args [ 'tip' ])) {
$html .= '<p class="uk-form-help-block">' . $args [ 'tip' ] . '</p>' ;
}
$html .= '</div>' ;
$html .= '</div>' ;
echo $html ;
}
2016-02-13 06:50:49 +01:00
public static function tags ( $args )
2016-01-12 04:36:48 +01:00
{
2016-02-13 10:58:34 +01:00
global $L ;
2016-02-13 06:50:49 +01:00
// Javascript code
include ( PATH_JS . 'bludit-tags.js' );
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$html = '<div id="bludit-tags" class="uk-form-row">' ;
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$html .= '<input type="hidden" id="jstags" name="tags" value="">' ;
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$html .= '<label for="jstagInput" class="uk-form-label">' . $args [ 'label' ] . '</label>' ;
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$html .= '<div class="uk-form-controls">' ;
$html .= '<input id="jstagInput" type="text" class="uk-width-1-2" autocomplete="off">' ;
2016-02-13 10:58:34 +01:00
$html .= '<button id="jstagAdd" class="uk-button">' . $L -> g ( 'Add' ) . '</button>' ;
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
$html .= '<div id="jstagList">' ;
2016-01-16 15:01:29 +01:00
2016-02-13 06:50:49 +01:00
foreach ( $args [ 'allTags' ] as $tag ) {
2016-02-14 01:15:19 +01:00
$html .= '<span data-tag="' . $tag . '" class="' . ( in_array ( $tag , $args [ 'selectedTags' ]) ? 'select' : 'unselect' ) . '">' . $tag . '</span>' ;
2016-01-16 15:01:29 +01:00
}
2016-02-13 06:50:49 +01:00
$html .= '</div>' ;
$html .= '</div>' ;
$html .= '</div>' ;
2016-01-12 04:36:48 +01:00
2016-02-13 06:50:49 +01:00
echo $html ;
2016-01-12 04:36:48 +01:00
}
2015-10-19 00:45:58 +02:00
public static function formInputPassword ( $args )
{
$args [ 'type' ] = 'password' ;
self :: formInputText ( $args );
2015-05-05 03:00:01 +02:00
}
2015-10-19 00:45:58 +02:00
public static function formTextarea ( $args )
{
$id = 'js' . $args [ 'name' ];
$type = isset ( $args [ 'type' ]) ? $args [ 'type' ] : 'text' ;
$class = empty ( $args [ 'class' ]) ? '' : 'class="' . $args [ 'class' ] . '"' ;
$placeholder = empty ( $args [ 'placeholder' ]) ? '' : 'placeholder="' . $args [ 'placeholder' ] . '"' ;
$rows = empty ( $args [ 'rows' ]) ? '' : 'rows="' . $args [ 'rows' ] . '"' ;
$html = '<div class="uk-form-row">' ;
if ( ! empty ( $args [ 'label' ])) {
$html .= '<label for="' . $id . '" class="uk-form-label">' . $args [ 'label' ] . '</label>' ;
}
$html .= '<div class="uk-form-controls">' ;
$html .= '<textarea id="' . $id . '" name="' . $args [ 'name' ] . '" ' . $class . ' ' . $placeholder . ' ' . $rows . '>' . $args [ 'value' ] . '</textarea>' ;
if ( ! empty ( $args [ 'tip' ])) {
$html .= '<p class="uk-form-help-block">' . $args [ 'tip' ] . '</p>' ;
}
$html .= '</div>' ;
$html .= '</div>' ;
echo $html ;
}
public static function formSelect ( $args )
{
$id = 'js' . $args [ 'name' ];
$type = isset ( $args [ 'type' ]) ? $args [ 'type' ] : 'text' ;
$class = empty ( $args [ 'class' ]) ? '' : 'class="' . $args [ 'class' ] . '"' ;
$html = '<div class="uk-form-row">' ;
$html .= '<label for="' . $id . '" class="uk-form-label">' . $args [ 'label' ] . '</label>' ;
$html .= '<div class="uk-form-controls">' ;
$html .= '<select id="' . $id . '" name="' . $args [ 'name' ] . '" ' . $class . '>' ;
foreach ( $args [ 'options' ] as $key => $value ) {
$html .= '<option value="' . $key . '"' . ( ( $args [ 'selected' ] == $key ) ? ' selected="selected"' : '' ) . '>' . $value . '</option>' ;
}
$html .= '</select>' ;
$html .= '<p class="uk-form-help-block">' . $args [ 'tip' ] . '</p>' ;
$html .= '</div>' ;
$html .= '</div>' ;
echo $html ;
}
public static function formInputHidden ( $args )
{
$id = 'js' . $args [ 'name' ];
$html = '<input type="hidden" id="' . $id . '" name="' . $args [ 'name' ] . '" value="' . $args [ 'value' ] . '">' ;
echo $html ;
}
public static function legend ( $args )
{
2015-11-30 01:45:30 +01:00
$class = empty ( $args [ 'class' ]) ? '' : 'class="' . $args [ 'class' ] . '"' ;
$html = '<legend ' . $class . '>' . $args [ 'value' ] . '</legend>' ;
2015-10-19 00:45:58 +02:00
echo $html ;
}
2015-12-28 23:28:42 +01:00
public static function bluditQuickImages ()
{
2016-02-10 00:02:51 +01:00
// Javascript code
include ( PATH_JS . 'bludit-quick-images.js' );
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
global $L ;
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
$html = '<!-- BLUDIT QUICK IMAGES -->' ;
$html .= '
< div id = " bludit-quick-images " >
< div id = " bludit-quick-images-thumbnails " onmousedown = " return false " >
' ;
$thumbnailList = Filesystem :: listFiles ( PATH_UPLOADS_THUMBNAILS , '*' , '*' , true );
array_splice ( $thumbnailList , THUMBNAILS_AMOUNT );
foreach ( $thumbnailList as $file ) {
$filename = basename ( $file );
$html .= '<img class="bludit-thumbnail" data-filename="' . $filename . '" src="' . HTML_PATH_UPLOADS_THUMBNAILS . $filename . '" alt="Thumbnail">' ;
}
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
$html .= '
</ div >
' ;
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted" ' . ( ! empty ( $thumbnailList ) ? 'style="display:none"' : '' ) . '>' . $L -> g ( 'There are no images' ) . '</div>' ;
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
$html .= '
2016-02-15 02:26:25 +01:00
< a data - uk - modal href = " #bludit-images-v8 " class = " moreImages uk-button " >< i class = " uk-icon-folder-o " ></ i > '.$L->g(' More images ').' </ a >
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
</ div >
' ;
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
echo $html ;
2015-12-28 23:28:42 +01:00
}
2015-12-31 01:35:28 +01:00
public static function bluditCoverImage ( $coverImage = " " )
2015-12-28 23:28:42 +01:00
{
2016-07-25 16:57:39 +02:00
global $L ;
2016-02-10 00:02:51 +01:00
// Javascript code
include ( PATH_JS . 'bludit-cover-image.js' );
2015-12-31 01:35:28 +01:00
$style = '' ;
if ( ! empty ( $coverImage )) {
$style = 'background-image: url(' . HTML_PATH_UPLOADS_THUMBNAILS . $coverImage . ')' ;
}
2016-02-10 00:02:51 +01:00
$html = '<!-- BLUDIT COVER IMAGE -->' ;
$html .= '
< div id = " bludit-cover-image " >
< div id = " cover-image-thumbnail " class = " uk-form-file uk-placeholder uk-text-center " style = " '. $style .' " >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< input type = " hidden " name = " coverImage " id = " cover-image-upload-filename " value = " '. $coverImage .' " >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " cover-image-upload " '.( empty($coverImage)?' ':' style = " display: none; " ' ).' >
< div >< i class = " uk-icon-picture-o " ></ i > '.$L->g(' Cover image ').' </ div >
< div style = " font-size:0.8em; " > '.$L->g(' Drag and drop or click here ').' < input id = " cover-image-file-select " type = " file " ></ div >
</ div >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " cover-image-delete " '.( empty($coverImage)?' ':' style = " display: block; " ' ).' >
< div >< i class = " uk-icon-trash-o " ></ i ></ div >
</ div >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " cover-image-progressbar " class = " uk-progress " >
< div class = " uk-progress-bar " style = " width: 0%; " > 0 %</ div >
</ div >
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
</ div >
</ div >
' ;
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
echo $html ;
}
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
public static function bluditMenuV8 ()
2015-12-28 23:28:42 +01:00
{
2016-02-10 00:02:51 +01:00
// Javascript code
include ( PATH_JS . 'bludit-menu-v8.js' );
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
global $L ;
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
$html = '<!-- BLUDIT MENU V8 -->' ;
$html .= '
< ul id = " bludit-menuV8 " >
< li id = " bludit-menuV8-insert " >< i class = " uk-icon-plus " ></ i > '.$L->g(' Insert image ').' </ li >
< li id = " bludit-menuV8-cover " >< i class = " uk-icon-picture-o " ></ i > '.$L->g(' Set as cover image ').' </ li >
< li id = " bludit-menuV8-delete " >< i class = " uk-icon-trash " ></ i > '.$L->g(' Delete image ').' </ li >
</ ul >
' ;
echo $html ;
2015-12-28 23:28:42 +01:00
}
public static function bluditImagesV8 ()
{
2016-07-25 16:57:39 +02:00
global $L ;
2016-02-10 00:02:51 +01:00
// Javascript code
include ( PATH_JS . 'bludit-images-v8.js' );
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
$html = '<!-- BLUDIT IMAGES V8 -->' ;
$html .= '
< div id = " bludit-images-v8 " class = " uk-modal " >
< div class = " uk-modal-dialog " >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " bludit-images-v8-upload " class = " uk-form-file uk-placeholder uk-text-center " >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " bludit-images-v8-drag-drop " >
< div >< i class = " uk-icon-picture-o " ></ i > '.$L->g(' Upload image ').' </ div >
< div style = " font-size:0.8em; " > '.$L->g(' Drag and drop or click here ').' < input id = " bludit-images-v8-file-select " type = " file " ></ div >
</ div >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " bludit-images-v8-progressbar " class = " uk-progress " >
< div class = " uk-progress-bar " style = " width: 0%; " > 0 %</ div >
</ div >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
</ div >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
< div id = " bludit-images-v8-thumbnails " >
' ;
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
$thumbnailList = Filesystem :: listFiles ( PATH_UPLOADS_THUMBNAILS , '*' , '*' , true );
foreach ( $thumbnailList as $file ) {
$filename = basename ( $file );
$html .= '<img class="bludit-thumbnail" src="' . HTML_PATH_UPLOADS_THUMBNAILS . $filename . '" data-filename="' . $filename . '" alt="Thumbnail">' ;
}
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
$html .= '
</ div >
' ;
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
$html .= '<div class="empty-images uk-block uk-text-center uk-block-muted" ' . ( ! empty ( $thumbnailList ) ? 'style="display:none"' : '' ) . '>' . $L -> g ( 'There are no images' ) . '</div>' ;
2016-01-03 22:04:54 +01:00
2016-02-10 00:02:51 +01:00
$html .= '
< div class = " uk-modal-footer " >
'.$L->g(' Click on the image for options ').' < a href = " " class = " uk-modal-close " > '.$L->g(' Click here to cancel ').' </ a >
</ div >
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
</ div >
</ div >
' ;
2015-12-28 23:28:42 +01:00
2016-02-10 00:02:51 +01:00
echo $html ;
}
2015-12-28 23:28:42 +01:00
2016-01-02 23:51:12 +01:00
public static function profileUploader ( $username )
2015-11-04 01:28:11 +01:00
{
global $L ;
2016-01-02 23:51:12 +01:00
$html = '<!-- BLUDIT PROFILE UPLOADER -->' ;
$html .= '
< div id = " bludit-profile-picture " >
< div id = " bludit-profile-picture-image " > ' ;
if ( file_exists ( PATH_UPLOADS_PROFILES . $username . '.png' )) {
$html .= '<img class="uk-border-rounded" src="' . HTML_PATH_UPLOADS_PROFILES . $username . '.png" alt="Profile picture">' ;
}
else {
$html .= '<div class="uk-block uk-border-rounded uk-block-muted uk-block-large">' . $L -> g ( 'Profile picture' ) . '</div>' ;
}
$html .= '
</ div >
2015-11-04 01:28:11 +01:00
2016-01-02 23:51:12 +01:00
< div id = " bludit-profile-picture-progressbar " class = " uk-progress " >
2015-11-04 01:28:11 +01:00
< div class = " uk-progress-bar " style = " width: 0%; " > 0 %</ div >
2016-01-02 23:51:12 +01:00
</ div >
2015-11-04 01:28:11 +01:00
2016-01-02 23:51:12 +01:00
< div id = " bludit-profile-picture-drag-drop " class = " uk-form-file uk-placeholder uk-text-center " >
< div > '.$L->g(' Upload image ').' </ div >
< div style = " font-size:0.8em; " > '.$L->g(' Drag and drop or click here ').' < input id = " bludit-profile-picture-file-select " type = " file " ></ div >
</ div >
2015-11-04 01:28:11 +01:00
2016-01-02 23:51:12 +01:00
</ div >
' ;
2015-11-04 01:28:11 +01:00
2016-01-02 23:51:12 +01:00
$script = '
< script >
$ ( document ) . ready ( function () {
2015-11-04 01:28:11 +01:00
2016-01-02 23:51:12 +01:00
var settings =
2015-11-15 22:37:34 +01:00
{
2016-01-02 23:51:12 +01:00
type : " json " ,
action : HTML_PATH_ADMIN_ROOT + " ajax/uploader " ,
2016-09-07 15:03:53 +02:00
allow : " *.(jpg|jpeg|gif|png) " ,
2016-01-02 23:51:12 +01:00
params : { " type " : " profilePicture " , " username " : " '. $username .' " },
2015-11-15 22:37:34 +01:00
2016-01-02 23:51:12 +01:00
loadstart : function () {
$ ( " #bludit-profile-picture-progressbar " ) . find ( " .uk-progress-bar " ) . css ( " width " , " 0% " ) . text ( " 0% " );
$ ( " #bludit-profile-picture-progressbar " ) . show ();
},
2015-11-15 22:37:34 +01:00
2016-01-02 23:51:12 +01:00
progress : function ( percent ) {
percent = Math . ceil ( percent );
$ ( " #bludit-profile-picture-progressbar " ) . find ( " .uk-progress-bar " ) . css ( " width " , percent + " % " ) . text ( percent + " % " );
},
2015-11-15 22:37:34 +01:00
2016-01-02 23:51:12 +01:00
allcomplete : function ( response ) {
$ ( " #bludit-profile-picture-progressbar " ) . find ( " .uk-progress-bar " ) . css ( " width " , " 100% " ) . text ( " 100% " );
$ ( " #bludit-profile-picture-progressbar " ) . hide ();
$ ( " #bludit-profile-picture-image " ) . html ( " <img class= \" uk-border-rounded \" src= \" '.HTML_PATH_UPLOADS_PROFILES. $username .'.png?time='.time().' \" > " );
},
notallowed : function ( file , settings ) {
alert ( " '. $L->g ('Supported image file types').' " + settings . allow );
}
};
UIkit . uploadSelect ( $ ( " #bludit-profile-picture-file-select " ), settings );
UIkit . uploadDrop ( $ ( " #bludit-profile-picture-drag-drop " ), settings );
});
</ script >
' ;
echo $html . $script ;
2015-11-15 22:37:34 +01:00
}
2016-09-07 15:03:53 +02:00
}